LogoLogo
  • FAC Curriculum
  • archive
    • Node & npm introduction
    • developer
      • Programming Paradigms
    • handbook
      • Asking for help
      • Coaching groups
      • Code review
      • Course rules
      • Debugging
      • Employment schedule and material delivered in FAC20
      • GitHub Workflow
      • Glossary or terms
      • Presentation Guidance
      • Equality, Diversity and Inclusion
      • Installation guide
      • Learning circles
      • Mentoring guidance
      • What to expect from your mentors
      • One-day projects
      • Pair programming
      • Portfolio
      • Questions for problem solving
      • Progress Logs
      • Final project report
      • Managing software projects
      • Project Presentations
      • Project roles
      • Projects
      • Retrospectives
      • Role Circles
      • Safeguarding policy
      • Technical Spikes
      • System requirements
      • Tech for Better
      • User Manuals
      • Wellbeing Support
      • project-docs
        • What makes a mentor?
        • Product Handover
        • Sprint Planning
        • Tech for Better Presentations
        • User Research & Usability Testing
    • foundation
      • full-stack
        • Learning Outcomes
        • project
      • testing
        • project
        • spikes
  • docs
    • Contributing to the curriculum
    • Curriculum intent
    • Curriculum process
  • src
    • About our curriculum
    • course
      • Code of Conduct
      • Docker
      • .NET and Umbraco
      • Getting started
      • Founders and Coders coursebook
      • KSB's
      • Mini projects
      • Revision checklist
      • Svelte
      • TypeScript
      • handbook
        • Software Developer Handbook
        • Software Foundation Handbook
      • precourse
        • Before you start the course
        • Installation List
      • syllabus
        • developer
          • app
            • learning-outcomes
            • project
            • schedule
            • spikes
          • introduction
            • learning-outcomes
            • project
            • resources
            • schedule
          • week00-pre-course
            • We'd like you to spend some time before starting the course working on useful fundamentals.
            • spikes
          • week01-project01-basics
            • Employability introduction
            • Homework
            • learning-outcomes
            • Week of September 9th
            • project
            • resources
            • schedule
            • spikes
          • week02-project02-chatbot
            • employability
            • Homework
            • learning-outcomes
            • Week of September 16th
            • project
            • resources
            • schedule
            • spikes
          • week03-project03-server
            • Learning Outcomes
            • Week of September 23th
            • The Amazin' Quizzer API Backend
            • resources
            • schedule
          • week04-project03-frontend
            • learning-outcomes
            • Week of September 30th
            • UI for Quizzer App
            • resources
            • schedule
          • week05-project03-test-deploy
            • Testing and deployment
            • Week of October 7th
            • project
            • resources
            • schedule
          • week06-project04-databases
            • learning-outcomes
            • Week of October 14th
            • project
            • Databases
            • schedule
          • week07-project04-authentication
            • Learning Outcomes
            • Week of October 21st
            • project
            • resources
            • schedule
          • week08-project04-test-deploy
            • Learning Outcomes
            • Week of October 28th
            • project
            • resources
            • schedule
          • week09-reading-week
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
          • week10-project05-DOTNET-intro
            • Learning Outcomes
            • overview
            • project
            • Resources
            • schedule
          • week11-project05-DOTNET-testing
            • Testing and deployment
            • Week of November 18th
            • project
            • Resources
            • schedule
          • week12-project05-DOTNET-deploy
            • Learning Outcomes
            • Week of November 25th
            • project
            • Resources
            • schedule
            • Spikes
          • week13-TFB-design
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
            • Design Week Spikes
          • week14-TFB-build
            • Learning Outcomes
            • overview
            • Project
            • DevOps Resources
            • schedule
            • Spikes
          • week15-TFB-build
            • Learning Outcomes
            • overview
            • Project
            • Resources
            • schedule
            • Spikes
          • projects
            • in-house-design
              • Learning Outcomes
              • Project
              • Resources
              • schedule
              • Design Week Spikes
        • foundation
          • Obsolete-full-stack
            • project
          • post-course
            • Homework
            • schedule
        • portfolio
          • fruit-shop
            • learning-outcomes
            • project
            • resources
          • game
            • learning-outcomes
            • project
            • resources
          • hobby-page
            • learning-outcomes
            • project
            • resources
          • movie-data
            • learning-outcomes
            • project
            • resources
          • project-gallery
            • learning-outcomes
            • project
            • resources
          • website
            • learning-outcomes
            • project
            • JavaScript
        • tfb
          • week 1
            • Introduction (45 minutes)
            • Further reading
          • week 10
            • content
            • resources
          • week 11
            • What will we be doing this week?
            • resources
          • week 12
            • What will we be doing this week?
            • Further reading
          • week 2
            • Discover (90 minutes)
            • resources
          • week 3
            • content
            • resources
          • week 4
            • Mapping the user journey (90 minutes)
            • resources
          • week 5
            • Figma Workshop 1 (90 minutes)
            • Further reading
          • week 6
            • Figma Workshop 2 (90 minutes)
            • resources
          • week 7
            • Product pitches & Selection (90 minutes)
            • resources
          • week 8
            • content
            • resources
          • week 9
            • content
            • resources
    • learn
      • DOTNET
        • Introduction to .NET
      • auth
        • Authenticating web apps
      • database
        • Persisting data with SQLite and Node
      • dotnet-two
        • Dependency injections and interfaces in .NET
      • form-validation
        • Form validation
      • react
        • Building client-side apps with React
      • server
        • HTTP servers with Node & Express
      • typescript
        • TypeScript
    • mentoring
      • design-week
        • Analysis Workshop
        • Code planning
        • Definition Workshop
        • Discovery Workshop
        • Figma introduction
        • Usability testing
        • User Research
    • resources
      • http
        • introduction
    • workshops
      • cookie-auth
        • index
      • creating-promises
        • index
      • css-layout
        • index
      • cypress-testing
        • index
      • database-testing
        • index
      • dev-tooling
        • Developer tooling
      • dom-challenge
        • index
      • dom-rendering
        • index
      • es-modules
        • index
      • express-middleware
        • Express middleware
      • first-class-functions
        • index
      • form-validation
        • index
      • functions-callbacks-async
        • Functions, callbacks, & async JavaScript
      • git-intro
        • Introduction to Git
      • git-terminal
        • Using Git in the terminal
      • git-workflow
        • Git workflow
      • github-projects
        • GitHub Projects Workflow Workshop
      • heroku-sql-challenge
        • index
      • html-forms
        • index
      • learn-a11y
        • index
        • starter-files
          • solution
            • Accessibility solution explanation
      • learn-fetch
        • index
      • learn-integration-testing
        • index
      • learn-testing
        • Learn testing in JavaScript
      • learn-unit-testing
        • index
      • node-error-handling
        • Node error-handling
      • node-express-server
        • Node and Express HTTP server
      • node-npm-intro
        • Node & npm introduction
      • node-postgres
        • Learn Postgres with Node
      • node-scripting-challenge
        • index
      • password-security
        • index
      • promise-practice
        • index
      • react-components
        • React components
      • react-fetch
        • index
      • react-forms
        • React forms
      • react-refactor-classes
        • index
      • react-state-effects
        • React state & effects
      • real-world-fetch
        • index
      • scope-challenge
        • Scope debugging challenge
      • semantic-html
        • index
      • server-side-forms
        • Server-side forms
      • session-auth
        • Session authentication
      • sql-intro
        • index
      • tdd-array-methods
        • index
Powered by GitBook
On this page
  • .NET
  • Spike
  • PHP
Export as PDF
  1. src
  2. course
  3. syllabus
  4. developer
  5. week11-project05-DOTNET-testing

project

.NET

Your task this week is to continue building the project from last week but to try and add some .NET tests and more broadly to use dependency injection.

Spike

Before you start think what are your dependencies. Which of these are tightly tied to other classes in a way that will slow development or make testing hard. If you want to replace this with dependency injection think what will the interface look like.

Questions to consider

  • What do you want the structure of your project to look like and how should the solution file be configured to allow that?

  • Where do you want to use dependency injections in my code?

  • How will you test the functionality of the API?

  • Where you are using interfaces what keys and methods will the interface need to look for?

Acceptance Criteria

Stretch criteria


PHP

Building the Custom Plugin and Theme Integration

Monday: Planning the Plugin Functionality

  • Objectives:

    • Define the plugin's purpose, features, and data requirements.

    • Design the database schema if needed.

    • Set up version control.

  • Activities:

    1. Brainstorm Plugin Ideas:

      • Possible Ideas:

        • Event Manager with custom event posts.

        • Testimonials plugin with submission form.

        • Simple CRM for managing contacts.

    2. Outline Main Features:

      • User Interactions:

        • Front-end forms for data submission.

        • Admin pages for data management.

      • Functionality:

        • CRUD operations (Create, Read, Update, Delete).

        • Notifications or email integration.

    3. Design Database Schema:

      • Identify Data Entities:

        • Determine what data needs to be stored.

      • Sketch Tables and Relationships:

    4. Set Up Version Control:

      • Initialize Git Repository:

        • Run git init in your plugin directory.

      • Create a Remote Repository:

      • Commit and Push Changes:

        • Stage files with git add ., commit with git commit -m "Initial commit", and push to remote.

  • Resources:


Tuesday: Developing the Plugin Backend

  • Objectives:

    • Start coding the core functionality of the plugin.

    • Create custom post types and taxonomies.

    • Build admin menus and settings pages.

  • Activities:

    1. Register Custom Post Types (CPT):

      • Add Code in Plugin File:

        function create_custom_post_type() {
          $labels = array(
            'name' => __( 'Events' ),
            'singular_name' => __( 'Event' ),
            'add_new' => __( 'Add New Event' ),
            'add_new_item' => __( 'Add New Event' ),
            'edit_item' => __( 'Edit Event' ),
            'new_item' => __( 'New Event' ),
            'all_items' => __( 'All Events' ),
            'view_item' => __( 'View Event' ),
            'search_items' => __( 'Search Events' ),
            'not_found' => __( 'No events found' ),
            'not_found_in_trash' => __( 'No events found in Trash' ),
            'menu_name' => __( 'Events' )
          );
          $args = array(
            'labels' => $labels,
            'public' => true,
            'has_archive' => true,
            'supports' => array( 'title', 'editor', 'custom-fields', 'thumbnail' ),
            'rewrite' => array( 'slug' => 'events' ),
          );
          register_post_type( 'event', $args );
        }
        add_action( 'init', 'create_custom_post_type' );
    2. Add Custom Taxonomies:

      • Register Taxonomy:

        function create_event_taxonomies() {
          $labels = array(
            'name' => __( 'Event Types' ),
            'singular_name' => __( 'Event Type' ),
            'search_items' =>  __( 'Search Event Types' ),
            'all_items' => __( 'All Event Types' ),
            'parent_item' => __( 'Parent Event Type' ),
            'parent_item_colon' => __( 'Parent Event Type:' ),
            'edit_item' => __( 'Edit Event Type' ),
            'update_item' => __( 'Update Event Type' ),
            'add_new_item' => __( 'Add New Event Type' ),
            'new_item_name' => __( 'New Event Type Name' ),
            'menu_name' => __( 'Event Types' ),
          );
          $args = array(
            'hierarchical' => true,
            'labels' => $labels,
            'show_ui' => true,
            'show_admin_column' => true,
            'query_var' => true,
            'rewrite' => array( 'slug' => 'event-type' ),
          );
          register_taxonomy( 'event_type', array( 'event' ), $args );
        }
        add_action( 'init', 'create_event_taxonomies', 0 );
    3. Build Admin Menus and Settings Pages:

      • Add Menu Page:

        function my_plugin_menu() {
          add_menu_page( 'Events Management', 'Events', 'manage_options', 'events', 'events_page', 'dashicons-calendar', 6 );
        }
        add_action( 'admin_menu', 'my_plugin_menu' );
      • Create Settings Page Content:

        function events_page() {
          echo '<div class="wrap"><h1>Events Management</h1>';
          // Add settings forms or data display here.
          echo '</div>';
        }
    4. Use the WordPress Settings API:

      • Register Settings:

        function my_plugin_settings() {
          register_setting( 'my-plugin-settings-group', 'my_option_name' );
        }
        add_action( 'admin_init', 'my_plugin_settings' );
      • Create Settings Form:

        function events_page() {
          ?>
          <div class="wrap">
            <h1>Events Management</h1>
            <form method="post" action="options.php">
              <?php settings_fields( 'my-plugin-settings-group' ); ?>
              <?php do_settings_sections( 'my-plugin-settings-group' ); ?>
              <table class="form-table">
                <tr valign="top">
                  <th scope="row">Option Name</th>
                  <td><input type="text" name="my_option_name" value="<?php echo esc_attr( get_option('my_option_name') ); ?>" /></td>
                </tr>
              </table>
              <?php submit_button(); ?>
            </form>
          </div>
          <?php
        }
  • Resources:


Wednesday: Enhancing the Plugin with AJAX and APIs

  • Objectives:

    • Implement dynamic features using AJAX.

    • Integrate external APIs if applicable.

  • Activities:

    1. Implement AJAX in the Plugin:

      • Enqueue Scripts:

        function enqueue_plugin_scripts() {
          wp_enqueue_script( 'my-plugin-ajax', plugin_dir_url( __FILE__ ) . 'js/plugin-ajax.js', array('jquery'), null, true );
          wp_localize_script( 'my-plugin-ajax', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
        }
        add_action( 'wp_enqueue_scripts', 'enqueue_plugin_scripts' );
      • Create JavaScript File plugin-ajax.js:

        jQuery(document).ready(function ($) {
          $("#my-button").on("click", function () {
            $.ajax({
              url: ajax_object.ajax_url,
              type: "POST",
              data: {
                action: "my_ajax_action",
                data: "test",
              },
              success: function (response) {
                alert("Response: " + response);
              },
            });
          });
        });
      • Handle AJAX Request in PHP:

        function my_ajax_action() {
          $data = $_POST['data'];
          // Process data here.
          echo 'Received: ' . $data;
          wp_die(); // All AJAX handlers should die when finished.
        }
        add_action( 'wp_ajax_my_ajax_action', 'my_ajax_action' );
        add_action( 'wp_ajax_nopriv_my_ajax_action', 'my_ajax_action' );
    2. Integrate External APIs (Optional):

      • Choose an API:

        • For example, fetch event data from a public API like Eventbrite.

      • Make API Requests:

        • Use wp_remote_get() to fetch data.

        $response = wp_remote_get( 'https://api.eventbriteapi.com/v3/events/search/?token=YOUR_API_TOKEN' );
        if ( is_array( $response ) && ! is_wp_error( $response ) ) {
          $body = $response['body']; // use the content
          $data = json_decode( $body );
        }
      • Display Data on Front-End:

        • Process and output the data within templates or via shortcodes.

    3. Continue Integrating TypeScript:

      • Use TypeScript for AJAX Calls:

        • Convert plugin-ajax.js to TypeScript and place it in src/.

        import $ from "jquery";
        
        $(document).ready(function () {
          $("#my-button").on("click", function () {
            $.ajax({
              url: ajax_object.ajax_url,
              type: "POST",
              data: {
                action: "my_ajax_action",
                data: "test",
              },
              success: function (response) {
                alert("Response: " + response);
              },
            });
          });
        });
      • Update Build Process:

        • Ensure Webpack compiles the TypeScript file into JavaScript.

      • Enqueue the Compiled Script:

        • Update the script handle and path in your plugin.

  • Resources:


Thursday: Presentation Preparation and Delivery

  • Objectives:

    • Prepare and deliver a 20-minute presentation showcasing the plugin progress.

    • Continue normal development activities.

  • Activities:

    1. Morning Development:

      • Integrate Plugin with Theme:

        • Connect plugin functionalities to the custom theme.

      • Enhance Plugin Features:

        • Add new features or refine existing ones.

      • Debug and Test:

        • Ensure the plugin works seamlessly within the theme.

    2. Presentation Preparation (1 hour):

      • Summarize Plugin Progress:

        • Outline key functionalities developed.

      • Prepare Presentation Materials:

        • Create slides or notes.

        • Set up a live demo.

      • Rehearse:

        • Practice delivering the presentation within the time limit.

    3. Deliver the Presentation (20 minutes):

      • Presentation Content:

        • Introduce your plugin and its purpose.

        • Demonstrate key features and integrations.

        • Discuss challenges faced and solutions implemented.

      • Engage with the Audience:

        • Encourage questions and feedback.

    4. Afternoon Development:

      • Implement Feedback:

        • Incorporate any useful suggestions received during the presentation.

      • Continue Development:

        • Proceed with pending tasks.

  • Resources:


Friday: Front-End Integration and Shortcodes

  • Objectives:

    • Connect the plugin with the theme.

    • Provide user-facing features using shortcodes and widgets.

  • Activities:

    1. Create Shortcodes to Display Plugin Data:

      • Display Events List:

        function display_events_shortcode() {
          $args = array(
            'post_type' => 'event',
            'posts_per_page' => -1,
          );
          $events = new WP_Query( $args );
          $output = '<ul>';
          if ( $events->have_posts() ) {
            while ( $events->have_posts() ) {
              $events->the_post();
              $output .= '<li>' . get_the_title() . ' - ' . get_the_date() . '</li>';
            }
          } else {
            $output .= '<li>No events found.</li>';
          }
          $output .= '</ul>';
          wp_reset_postdata();
          return $output;
        }
        add_shortcode( 'events_list', 'display_events_shortcode' );
      • Use Shortcode in a Page:

        • Add [events_list] to display the list of events.

    2. Design Front-End Templates for CPT:

      • Create Template Files:

        • single-event.php for individual events.

        • archive-event.php for event archives.

      • Customize Templates:

        • Use HTML and WordPress functions to display event details.

        • Example for single-event.php:

          <?php get_header(); ?>
          <div class="event-content">
            <?php
            if ( have_posts() ) :
              while ( have_posts() ) : the_post();
                ?>
                <h1><?php the_title(); ?></h1>
                <div class="event-meta">
                  <p>Date: <?php echo get_post_meta( get_the_ID(), 'event_date', true ); ?></p>
                  <p>Location: <?php echo get_post_meta( get_the_ID(), 'event_location', true ); ?></p>
                </div>
                <div class="event-description">
                  <?php the_content(); ?>
                </div>
                <?php
              endwhile;
            endif;
            ?>
          </div>
          <?php get_footer(); ?>
    3. Ensure Responsive Design and Accessibility:

      • Use Responsive CSS Frameworks (Optional):

        • Integrate Bootstrap or Tailwind CSS.

      • Accessibility Best Practices:

        • Use semantic HTML.

        • Ensure proper contrast and font sizes.

        • Add alt attributes to images.

    4. Optimize Assets with TypeScript and CSS Preprocessors:

      • Set Up SASS (Optional):

        • Install node-sass:

          npm install --save-dev node-sass
      • Update Build Process:

        • Configure Webpack to process SCSS files.

        • Example webpack.config.js update:

          module: {
            rules: [
              // ...existing rules
              {
                test: /\.scss$/,
                use: [
                  'style-loader',
                  'css-loader',
                  'sass-loader'
                ],
              },
            ],
          },
      • Organize Styles:

        • Create SCSS files in src/styles/.

      • Import Styles in TypeScript:

        import "./styles/main.scss";
  • Resources:

PreviousWeek of November 18thNextResources

Last updated 6 months ago

Use diagrams or tools like .

Use , , or .

Draw.io
GitHub
GitLab
Bitbucket
Guide to Custom Post Types (Official Docs)
Git Basics (Git-SCM)
Database Schema Best Practices (DigitalOcean)
How to Register Custom Taxonomies (Official Docs)
Admin Menus and Settings API (Official Docs)
Plugin Settings with the WordPress Settings API (Smashing Magazine)
Using AJAX in Plugins (Official Docs)
Fetch API Basics (MDN Web Docs)
Integrating APIs into WordPress (WPBeginner)
Presentation Skills for Developers
Demo Preparation Checklist
Building Shortcodes (Official Docs)
Creating Widgets for Plugins (Official Docs)
Responsive Design Basics (MDN Web Docs)