arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

project

hashtag
.NET

hashtag
Intro

Learners with build a library in which to sort and share information (i.e. music, photos, recipes etc...). Potential users should be able to view, favourite and upload items as well as make collections and view ones created by other users.

The frontend of this project will be built using React. For the backend, it will use ASP.NET to handle server-side functionality. User accounts and item lists will be stored in a PostgreSQL or SQLite database.

hashtag
Project

Your project for the next 3 weeks will be to develop a .NET backend connected to a database and linked to a React frontend. This week you should start by building the backend and testing it with Swagger (.NET equivalent to Postman). Tests should cover the creation users and endpoints related to user content.

hashtag
Spike

Like the last project you will benefit by building a scheme for your database before you start. Hopefully with what you learned from last projects you are ready to think about how things will connect and consider what sorts of endpoints you will want. Finally, think about what you have done for stretch goals on previous projects and see if you can come up with a different sort of goal this time. For example if you've been stretching yourself by adding technical complexity try focusing on design or UX/UI instead.

hashtag
Questions to consider

  1. What endpoints will you need for your app?

  2. What sort of classes will you need to match your data and how will these be represented in OOP (object orientated programming)?

hashtag
Useful resources

hashtag
User stories

As a user, I want to:

  • Login to an individual account

  • See my collections of items and favourites

  • Search and look at other users collections

hashtag
Stretch user stories

  • Follow other users

  • Make sure users can only edit their own collections and items

  • Stop duplicate items being uploaded

hashtag
Repository naming convention

Please name your repo following this template: PRO05_Name1_Name2_Name3_Name4

hashtag
Acceptance criteria

hashtag
Stretch


hashtag
PHP

Project Overview: Building a Custom WordPress Site with Theme and Plugin Development

Over the next three weeks, you will develop a fully functional WordPress website from scratch. Starting with setting up your local development environment, you'll create a custom theme tailored to your design preferences, incorporating dynamic content using The Loop and interactive elements with TypeScript. You'll then plan and build a custom plugin to add significant functionality to your site, such as an event manager or testimonials feature, utilizing custom post types, taxonomies, and AJAX for dynamic updates.

In the final week, you'll focus on deploying your site to a live hosting environment, implementing security best practices, and optimizing performance. By integrating your custom plugin with your theme, you'll create a seamless user experience. This project will enhance your proficiency in WordPress development and PHP programming, providing you with valuable skills and a portfolio-worthy website.

hashtag
Foundations of WordPress and PHP

Monday: Setting Up the Development Environment

  • Objectives:

    • Set up a local server environment for WordPress development.

    • Install and configure WordPress locally.


Tuesday: Introduction to WordPress Theme Development

  • Objectives:

    • Understand how WordPress themes work.

    • Begin developing a custom theme from scratch.


Wednesday: Advanced Theme Customization

  • Objectives:

    • Add features to the custom theme.

    • Integrate TypeScript for front-end interactivity.


Thursday: Presentation Preparation and Delivery

  • Objectives:

    • Prepare and deliver a 20-minute presentation showcasing the custom theme.

    • Continue normal development activities.


Friday: Working with WordPress Database

  • Objectives:

    • Learn to interact with the WordPress database using PHP.

    • Understand data sanitization and security best practices.

View individual items details
  • Save items or collections from other users

  • Upload and add items

  • Suggest collections based on favourites
    Understand the WordPress file and folder structure.
  • Activities:

    1. Install a Local Server Environment:

      • Choose and Install Software:

        • Windows Users: Download and install .

        • Mac Users: Download and install .

      • Configure the Server:

        • Start Apache and MySQL services from the control panel.

    2. Download and Install WordPress Locally:

      • Download WordPress:

        • Get the latest version from the .

    3. Explore WordPress File Structure:

      • Directories to Explore:

        • wp-content: Holds themes, plugins, and uploads.

    4. Review PHP Basics (If Needed):

      • PHP Syntax and Structure:

        • Variables, arrays, loops, functions.

  • Resources:

    • Installing WordPress Locally (WPBeginner)arrow-up-right

    • WordPress File Structure Overview (Official Docs)arrow-up-right

  • Activities:
    1. Study the WordPress Template Hierarchy:

      • Understand the Hierarchy:

        • Learn how WordPress determines which template file to use.

        • Review the .

    2. Create a New Theme Directory:

      • Set Up Theme Folder:

        • Navigate to wp-content/themes/.

    3. Develop Basic Theme Files:

      • style.css:

        • Add theme information at the top:

    4. Activate the Theme:

      • Through WordPress Admin:

        • Go to Appearance > Themes.

    5. Use Template Tags and The Loop:

      • Display Posts:

        • Implement The Loop in index.php:

  • Resources:

    • Creating a Basic Theme (ThemeShaper Tutorial)arrow-up-right

    • Understanding The Loop (Official Docs)arrow-up-right

  • Activities:
    1. Create Custom Page Templates:

      • Make a Custom Template:

        • Create page-custom.php in your theme folder.

        • At the top, add:

        • Modify the template as needed, for example:

    2. Implement Custom Menus:

      • Register Menus in functions.php:

      • Display Menus in Templates:

    3. Add Widget Areas (Sidebars):

      • Register Sidebar in functions.php:

      • Display Sidebar in Templates:

    4. Set Up TypeScript Build Process:

      • Initialize NPM in Theme Folder:

        • Open a terminal in your theme directory and run npm init -y.

    5. Add Interactive Elements Using TypeScript:

      • Create src/index.ts:

        • Example code:

  • Resources:

    • Custom Page Templates (Official Docs)arrow-up-right

    • WordPress Menus and Widgets (WPBeginner)arrow-up-right

  • Activities:
    1. Morning Development:

      • Enhance Theme Features:

        • Refine your theme based on previous work.

        • Add any additional features or styling improvements.

      • Debug and Test:

        • Ensure all features are working as expected.

        • Test across different browsers and devices.

    2. Presentation Preparation (1 hour):

      • Summarize Work Done:

        • Create an outline highlighting key features and customizations.

    3. Deliver the Presentation (20 minutes):

      • Presentation Content:

        • Introduce your custom theme and its purpose.

    4. Afternoon Development:

      • Implement Feedback:

        • Incorporate any useful suggestions received during the presentation.

  • Resources:

    • Effective Presentation Tipsarrow-up-right

    • Demo Guidelinesarrow-up-right

  • Activities:
    1. Using $wpdb for Database Queries:

      • Global $wpdb Object:

        • Access the database using $wpdb.

      • Retrieve Data:

      • Display Data in the Theme:

        • Create a custom template or modify an existing one to display the data.

    2. Create a Custom Table:

      • Register Activation Hook:

    3. Create a Form to Save Data:

      • Display Form Using Shortcode:

      • Handle Form Submission:

    4. Understand Data Sanitization and Security:

      • Sanitize Inputs:

        • Use sanitize_text_field(), sanitize_email(), etc.

  • Resources:

    • Using $wpdb (Official Docs)arrow-up-right

    • Database Security Best Practices (Official Docs)arrow-up-right

  • Simple demo of react and .NET projectarrow-up-right
    Demo of a more complicated backend with a databasearrow-up-right
    Set Up the Database:
    • Access phpMyAdmin via http://localhost/phpmyadmin/.

    • Create a new database (e.g., wordpress_db).

  • Configure WordPress:

    • Extract WordPress files into the htdocs (XAMPP) or MAMP directory.

    • Rename wp-config-sample.php to wp-config.php.

    • Edit wp-config.php with the database details:

  • Run the Installation Script:

    • Navigate to http://localhost/wordpress/ and follow the installation prompts.

  • wp-includes: Core WordPress files.

  • wp-admin: Backend administration files.

  • Understanding Core Files:

    • Review index.php, wp-config.php, and .htaccess.

  • Resources:
    • PHP Manualarrow-up-right

    • W3Schools PHP Tutorialarrow-up-right

    Create a new folder for your theme (e.g., my-custom-theme).

    index.php:

    • Basic template file that WordPress uses by default.

    • Add a simple HTML structure:

  • header.php and footer.php:

    • Separate the header and footer sections.

    • header.php:

    • footer.php:

    • Include them in index.php using get_header() and get_footer() functions:

  • Find and activate "My Custom Theme".

    Install Dependencies:

    • Install Webpack and TypeScript:

  • Configure TypeScript:

    • Create tsconfig.json:

  • Set Up Webpack Config:

    • Create webpack.config.js:

  • Add Scripts to package.json:

  • Build and Include Script:

    • Run npm run build.

    • Enqueue the script in functions.php:

  • Add an Element to Test Interaction:

    • In your template file (e.g., index.php), add:

  • Prepare Presentation Materials:
    • Create slides if necessary.

    • Set up a live demo environment.

  • Rehearse:

    • Practice delivering the presentation within the time limit.

  • Demonstrate key features and customizations.
  • Discuss challenges faced and solutions implemented.

  • Engage with the Audience:

    • Encourage questions and feedback.

  • Continue Development:
    • Proceed with the next planned activities.

    Display Submitted Data:
    • Create a shortcode or admin page to display the data from the custom table.

    Prevent SQL Injection:

    • Always prepare queries or use helper methods.

  • Use Nonces:

    • Protect against CSRF attacks by using nonces.

  • Escape Outputs:

    • Use esc_html(), esc_attr(), etc., when outputting data.

  • XAMPParrow-up-right
    MAMParrow-up-right
    official websitearrow-up-right
    Template Hierarchy diagramarrow-up-right
    WordPress Template Hierarchy (Official Docs)arrow-up-right
    Webpack and TypeScript Setup Guide (DigitalOcean)arrow-up-right
    Using TypeScript with WordPressarrow-up-right
    Nonces for Security (Official Docs)arrow-up-right
    <!DOCTYPE html>
    <html>
    <head>
      <title><?php bloginfo('name'); ?></title>
      <?php wp_head(); ?>
    </head>
    <body>
      <h1>Welcome to <?php bloginfo('name'); ?></h1>
      <?php wp_footer(); ?>
    </body>
    </html>
    npm install --save-dev webpack webpack-cli typescript ts-loader
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "strict": true
      },
      "include": ["src/**/*"]
    }
    const path = require("path");
    
    module.exports = {
      entry: "./src/index.ts",
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: "ts-loader",
            exclude: /node_modules/,
          },
        ],
      },
      resolve: {
        extensions: [".tsx", ".ts", ".js"],
      },
      output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
      },
    };
    "scripts": {
      "build": "webpack",
      "watch": "webpack --watch"
    }
    function enqueue_my_scripts() {
      wp_enqueue_script( 'my-typescript', get_template_directory_uri() . '/dist/bundle.js', array(), '1.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_my_scripts' );
    <button id="interactive-element">Click Me</button>
    /*
    Theme Name: My Custom Theme
    Theme URI: http://example.com/
    Author: Your Name
    Description: A custom theme for learning.
    Version: 1.0
    */
    <?php get_header(); ?>
    <?php
    if ( have_posts() ) :
      while ( have_posts() ) : the_post();
        the_title('<h2>', '</h2>');
        the_content();
      endwhile;
    else :
      echo '<p>No posts found.</p>';
    endif;
    ?>
    <?php get_footer(); ?>
    <?php
    /*
    Template Name: Custom Page
    */
    ?>
    <?php get_header(); ?>
    <div class="custom-page-content">
      <h2>Custom Page Template</h2>
      <?php
      if ( have_posts() ) :
        while ( have_posts() ) : the_post();
          the_content();
        endwhile;
      endif;
      ?>
    </div>
    <?php get_footer(); ?>
    <?php
    function register_my_menus() {
      register_nav_menus(
        array(
          'header-menu' => __( 'Header Menu' ),
          'footer-menu' => __( 'Footer Menu' )
        )
      );
    }
    add_action( 'init', 'register_my_menus' );
    <?php
    wp_nav_menu( array( 'theme_location' => 'header-menu' ) );
    ?>
    function my_custom_sidebar() {
      register_sidebar(
        array (
          'name' => __( 'Custom Sidebar', 'your-theme-domain' ),
          'id' => 'custom-sidebar',
          'description' => __( 'Custom Sidebar for Theme', 'your-theme-domain' ),
          'before_widget' => '<div class="widget-content">',
          'after_widget' => '</div>',
          'before_title' => '<h3 class="widget-title">',
          'after_title' => '</h3>',
        )
      );
    }
    add_action( 'widgets_init', 'my_custom_sidebar' );
    <?php
    if ( is_active_sidebar( 'custom-sidebar' ) ) {
      dynamic_sidebar( 'custom-sidebar' );
    }
    ?>
    document.addEventListener("DOMContentLoaded", () => {
      const element = document.getElementById("interactive-element");
      if (element) {
        element.addEventListener("click", () => {
          alert("TypeScript is working!");
        });
      }
    });
    global $wpdb;
    $results = $wpdb->get_results( "SELECT * FROM {$wpdb->prefix}posts WHERE post_status = 'publish'" );
    foreach ( $results as $post ) {
      echo $post->post_title;
    }
    register_activation_hook( __FILE__, 'create_custom_table' );
    function create_custom_table() {
      global $wpdb;
      $table_name = $wpdb->prefix . 'custom_table';
      $charset_collate = $wpdb->get_charset_collate();
    
      $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        time datetime DEFAULT '0000-00-00 00:00:00' NOT NULL,
        name tinytext NOT NULL,
        email VARCHAR(100) NOT NULL,
        PRIMARY KEY  (id)
      ) $charset_collate;";
    
      require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
      dbDelta( $sql );
    }
    function custom_form_shortcode() {
      ob_start();
      ?>
      <form method="post">
        <?php wp_nonce_field( 'submit_form' ); ?>
        <input type="text" name="name" placeholder="Name" required>
        <input type="email" name="email" placeholder="Email" required>
        <input type="submit" name="submit_form" value="Submit">
      </form>
      <?php
      return ob_get_clean();
    }
    add_shortcode( 'custom_form', 'custom_form_shortcode' );
    function handle_form_submission() {
      if ( isset( $_POST['submit_form'] ) ) {
        // Security check
        if ( ! wp_verify_nonce( $_POST['_wpnonce'], 'submit_form' ) ) {
          die( 'Security check failed' );
        }
    
        global $wpdb;
        $table_name = $wpdb->prefix . 'custom_table';
        $name = sanitize_text_field( $_POST['name'] );
        $email = sanitize_email( $_POST['email'] );
    
        $wpdb->insert(
          $table_name,
          array(
            'time' => current_time( 'mysql' ),
            'name' => $name,
            'email' => $email,
          )
        );
      }
    }
    add_action( 'init', 'handle_form_submission' );
    define('DB_NAME', 'wordpress_db');
    define('DB_USER', 'root');
    define('DB_PASSWORD', '');
    <!DOCTYPE html>
    <html>
    <head>
      <title><?php bloginfo('name'); ?></title>
      <?php wp_head(); ?>
    </head>
    <body>
      <?php wp_footer(); ?>
    </body>
    </html>
    <?php get_header(); ?>
    <h1>Welcome to <?php bloginfo('name'); ?></h1>
    <?php get_footer(); ?>