> For the complete documentation index, see [llms.txt](https://founders-and-coders.gitbook.io/coursebook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://founders-and-coders.gitbook.io/coursebook/src/course/syllabus/developer/week11-project05-dotnet-testing/project.md).

# 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

* [ ] Tests for all the functions of your APIs
* [ ] Tests run without making changes to the actual database
* [ ] Code is efficiently organized and has been refactored

#### Stretch criteria

* [ ] Add verification to your code and test its functionality

***

## 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:**
       * Use diagrams or tools like [Draw.io](https://app.diagrams.net/).
  4. **Set Up Version Control:**
     * **Initialize Git Repository:**
       * Run `git init` in your plugin directory.
     * **Create a Remote Repository:**
       * Use [GitHub](https://github.com/), [GitLab](https://gitlab.com/), or [Bitbucket](https://bitbucket.org/).
     * **Commit and Push Changes:**
       * Stage files with `git add .`, commit with `git commit -m "Initial commit"`, and push to remote.
* **Resources:**
  * [Guide to Custom Post Types (Official Docs)](https://developer.wordpress.org/plugins/post-types/registering-custom-post-types/)
  * [Git Basics (Git-SCM)](https://git-scm.com/book/en/v2/Getting-Started-Git-Basics)
  * [Database Schema Best Practices (DigitalOcean)](https://www.digitalocean.com/community/tutorial_series/databases)

***

**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:**

       ```php
       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:**

       ```php
       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:**

       ```php
       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:**

       ```php
       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:**

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

       ```php
       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:**
  * [How to Register Custom Taxonomies (Official Docs)](https://developer.wordpress.org/plugins/taxonomies/working-with-custom-taxonomies/)
  * [Admin Menus and Settings API (Official Docs)](https://developer.wordpress.org/plugins/settings/custom-settings-page/)
  * [Plugin Settings with the WordPress Settings API (Smashing Magazine)](https://www.smashingmagazine.com/2011/10/create-wordpress-plugins-with-the-settings-api/)

***

**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:**

       ```php
       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`:**

       ```javascript
       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:**

       ```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.

       ```php
       $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/`.

       ```typescript
       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:**
  * [Using AJAX in Plugins (Official Docs)](https://developer.wordpress.org/plugins/javascript/ajax/)
  * [Fetch API Basics (MDN Web Docs)](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
  * [Integrating APIs into WordPress (WPBeginner)](https://www.wpbeginner.com/wp-tutorials/how-to-fetch-and-display-external-api-data-in-wordpress/)

***

**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:**
  * [Presentation Skills for Developers](https://www.developer.com/languages/7-presentation-skills-every-developer-needs/)
  * [Demo Preparation Checklist](https://www.softwaretestinghelp.com/how-to-give-software-demo/)

***

**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:**

       ```php
       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
         <?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`:

         ```bash
         npm install --save-dev node-sass
         ```
     * **Update Build Process:**
       * Configure Webpack to process SCSS files.
       * Example `webpack.config.js` update:

         ```javascript
         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:**

       ```typescript
       import "./styles/main.scss";
       ```
* **Resources:**
  * [Building Shortcodes (Official Docs)](https://developer.wordpress.org/plugins/shortcodes/basic-shortcodes/)
  * [Creating Widgets for Plugins (Official Docs)](https://developer.wordpress.org/themes/functionality/widgets/)
  * [Responsive Design Basics (MDN Web Docs)](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)