Pages Menu
Chitu Okoli chitu.okoli.org

BTM 395 Modules

Contents

Module: Introduction

The introductory course module gives a general overview of the World Wide Web, explaining how the Web works, the nature of progarmming languages used for websites, and gives initial considerations about setting up a computer for web development. It also gives a general introduction to the WordPress content management system, its capabilities, and the options available for hosting a WordPress site.

Textbook readings

  • All-in-One (Suehring and Valade) book: Book I Chapter 1 (entire chapter, pages 7 to 20), “Understanding the Languages of the Web”. A free online preview is available from Amazon that contains these pages of the book: Click the image that says, “Click to LOOK INSIDE!”.
  • WordPress (MacDonald) book: Chapter 1 (entire chapter, pages 11 to 30), “The WordPress Landscape”. A free PDF sampler of this chapter is available from Wiley.

Module: HTML

In this module, you will first set up a local Apache-MySQL-PHP stack using XAMPP. Next, you will learn how to create a basic web page using HTML, and then learn some of the most useful features of HTML5, the latest version of HTML. Finally, you will learn about some necessary considerations for choosing a web host for a WordPress website.

Textbook readings

  • All-in-One: Book I Chapter 5 (entire chapter, pages 75 to 85), “Setting Up Your Web Development Environment with the XAMPP Package”.
    • You are not required to use XAMPP (any web server stack of your choice that includes Apache, MySQL, PHP and phpMyAdmin will suffice), but since the book uses XAMPP with its default configuration options, it would be easier to follow the entire book if you use XAMPP.
  • All-in-One: Book II Chapter 1 (entire chapter, pages 89 to 119), “Creating a Basic Page with HTML”.
  • WordPress: Chapter 3, pages 51 to 57 only, “Installing WordPress on Your Web Host: Preparing for WordPress”.
    • For now, you are not required to actually do the steps described here (though you are free to do so if you want). However, you should read this portion and start thinking seriously about a domain name and host. You will be required to do these steps for the first WordPress module.

Required Web readings and videos

  • WordPress HTML Coding Standards
  • 28 HTML5 Features, Tips, and Techniques you Must Know
    • For now you, only read tips #1, 2, 3, 4, 5, 6, [skip 7-8], 9, 10, [skip 11], 12, 13, [skip 14-15], 16, 17, 18, 19, [skip 20], 21, 22, 23, 24, 25, 26, [skip 27-28]. You will read skipped tips in a subsequent module.
  • 50 HTML tags in 15 minutes. A few notes:
    • This is a very rapid, high-level view, just to give a quick overview of the breadth of possibilities
    • This video covers HTML 4, not HTML5, so there are a few differences.
    • Some of the tags mentioned (particularly <s>) are obsolete in HTML5.
    • He erroneously specifies <th> for table data contents. <th> is correct for the header row (or column), but <td> should be used for all other table data.
  • How to register your own domain name: Some important considerations before registering a domain name

Exercises (not graded)

  • HTML Basics I: Do 1. Introduction to HTML; 2. Body elements; and 3. Adding images to your site!
  • HTML Basics II: Do only 1. Making lists
  • HTML Basics III: Do 1. Learning about tables; 2. Better tables; and 3. Div and span
  • Code with me: Do Lessons 1, 2, 3, and Lesson-3-‘oops’
    • Before doing the exercises, click “Presentation” and then scroll down to see the lessons.

Supplementary readings

Module: WordPress 3-5

In this module, you will first install WordPress on a web host to launch a real, live WordPress site. This will be your WordPress site for the term project, so you should carefully consider the domain name you want to use. Next, you will learn how to create and organize posts, according to the WordPress blog model. Third, you will learn how to select, install and configure a theme for your WordPress site.

Textbook readings

When reading the WordPress book, you need to read actively—create your own site as you read along, doing all the steps described in the book. In the page specifications below, there are specific technical notes when applicable, especially concerning installing WordPress. The exercises that follow simply assure that you have followed the steps described in the textbook.

  • WordPress: Chapter 3, pages 51 to 57 only, “Installing WordPress on Your Web Host: Preparing for WordPress”.
    • If you haven’t yet read this section (from the HTML module), please read it now.
    • Sign up for a domain name and a web host as specified in the course outline.
    • You may choose any of the three options on page 53 for where to install WordPress. I recommend using a subdomain, as I do on my own website—it is generally the most flexible option long-term. If you choose to install it in a subdomain and you use 1&1 as your host, instructions are available on creating a subdomain.
  • WordPress: Chapter 3, pages 65 to 77 only, “Installing WordPress on Your Web Host: Installing WordPress by Hand; and Maintaining Your Site”.
    • You are not allowed to use a WordPress autoinstaller (as described on pages 57 to 65), even if your web host provides one (e.g. 1&1’s “Click and Build” feature). For your learning, it is important to understand how to create the MySQL database and install WordPress step-by-step. It’s not that hard. If you have any trouble, ask for help on Piazza.
    • If you are using 1&1 as your web host, then the following pages could be helpful:
    • For FTP transfer, you will need FileZilla or any FTP client of your choice. The video tutorial is required viewing—this is a tool you will use a lot during this course.
      • Note: You need an FTP client, not an FTP server. Your web host has the FTP server, and you connect to it using a client.
    • You can skip pages 78-81. You will learn how to back up your site in a later module.
  • WordPress: Chapter 4 (entire chapter, pages 85 to 130), “Creating Posts”
  • WordPress: Chapter 5 (entire chapter, pages 131 to 166), “Choosing and Polishing Your WordPress Theme”
    • The textbook uses the Twenty Eleven theme for most of its examples, not just in this chapter, but for most of the book. You may use any theme you like for the exercises and for your project, but to make sure you can follow the book with no problems, you should install the Twenty Eleven theme as one of your available themes, even if it is not enabled. That way, you can always switch back and forth as necessary if you need to follow some particular points in the book.

Web readings and videos

WordPress exercises (graded)

  1. Set up a domain name registered in your own name.
  2. Install a WordPress site on your domain (you may install it to the domain root, a subfolder, or a subdomain—your choice; however, I recommend using a subdomain).
  3. Create at least five sample posts with at least three different categories.
  4. Install a new free theme on your site (Twenty Eleven is perfectly OK for this exercise); you may use anything other than the default Twenty Twelve theme.

Submission: Submit the full URL of your new WordPress site on Moodle.

Deadline: 6:30 pm Wednesday July 10, 2013

Module: CSS

In this module, you will learn how to use CSS to format the visual appearance of web pages. You will also learn how to create HTML forms and how to style them with CSS.

Textbook readings

  • All-in-One: Book II Chapter 2 (entire chapter, pages 121 to 167), “Adding Style with CSS”.
  • All-in-One: Book II Chapter 3 (entire chapter, pages 169 to 183), “Creating and Styling Web Forms”.

Required Web readings and videos

  • WordPress CSS Coding Standards
  • 28 HTML5 Features, Tips, and Techniques you Must Know
    • Read the tips skipped from the HTML module: tips #7, 8,  11, 14, 15, 20, 27 and 28.
  • CSS Selector Types
  • The Cascade
    • The only thing I don’t like is the way he presents the specificity measures, e.g. (0,1,0,1). Even though this is the official method used by W3C, it seems to me more suitable for web browsers that need to compute numeric values than for human web developers trying to figure it out. I find it easier just to remember:
      inline style > ID > class > element. Every other detail is a development of this general precedence rule.

Exercises (not graded)

Supplementary readings

Module: WordPress 6&7

In this module, you will first learn how to edit posts using the visual editor and in raw HTML; and how to add and manipulate images using the WordPress Media Library. Then you will learn how to create and organize WordPress pages; and how to create custom menus.

Textbook readings

When reading the WordPress book, you need to read actively—create your own site as you read along, doing all the steps described in the book. The exercises that follow simply assure that you have followed the steps described in the textbook.

  • WordPress: Chapter 6 (entire chapter, pages 167 to 198), “Jazzing Up Your Posts”
  • WordPress: Chapter 7 (entire chapter, pages 199 to 228), “Adding Pages and Menus”

Web readings and videos

WordPress exercises (graded)

  1. Create three pages, where one of the three is the parent of the other two.
  2. Add an HTML table with at least three rows and three columns to one of the child pages.
  3. Upload at least three images to the Media Library, and add at least one to each of the three pages.
  4. Create two custom menus: one custom menu should be a top menu which includes two of your three pages, but NOT all three. The other custom menu should appear in a custom menu widget (p. 219) in a sidebar; this second custom menu must include one and only one of your three pages; its contents must be clearly different from those of the top menu.

Submission

Submit the following three URLs to Moodle:

  1. URL to the parent page (this does not need to be your home page, though it may be, if you like). The custom top menu and the custom sidebar menu should both be visible on this page.
  2. URL to the first child page with the table.
  3. URL to the second child page.

Deadline: 6:30 pm Wednesday July 17, 2013

Module: JavaScript

In this module, you will learn the basics of JavaScript, the language that provides dynamic capability to web browsers. In addition to a general introduction to most of the key features of the JavaScript programming language, you will get a small taste of the Document Object Model, which is one of the most powerful aspects of JavaScript.

Textbook readings

  • All-in-One: Book III Chapter 1 (entire chapter, pages 187 to 190), “Understanding JavaScript Basics”.
  • All-in-One: Book III Chapter 2 (entire chapter, pages 191 to 217), “Building a JavaScript Program”.
  • All-in-One: Book III Chapter 5 (entire chapter, pages 261 to 268), “Troubleshooting JavaScript Programs”.

Required Web readings and videos

Exercises (not graded)

Module: WordPress 9&10

In this module, you will first learn how to install and manage plugins. You will learn about the Jetpack plugin and plugins for backing up WordPress and for caching WordPress content. You will also learn about shortcodes, how to embed video and audio in your website, and how to set up photo galleries.

Textbook readings

When reading the WordPress book, you need to read actively—create your own site as you read along, doing all the steps described in the book. The exercises that follow simply assure that you have followed the steps described in the textbook.

  • WordPress:Chapter 9 (pages 273 to 293, and 299 to 310), “Getting New Features with Plug-Ins”
    • Skip the section on “Adding Mobile Support”. The web reading below on responsive themes provides a better solution for this important need.
  • WordPress:Chapter 10 (entire chapter, pages 311 to 351), “Adding Picture Galleries, Video, and Music”

Web readings and videos

Supplementary resources

  • Sources of legal, free music (follow specified instructions given with each song for proper attribution)
    • Magnatune: High-quality music from all genres
    • Jamendo: Much larger selection than Magnatune, but much more variable quality
  • Sources of legal, free images and video (follow specified instructions given with each file for proper attribution)

WordPress exercises (graded)

For some of these exercises, I will need to login to the administrative dashboard of your WordPress site to verify that you have done what is required. Thus, you will need to create a user account for me. (I will use the same account later to evaluate your project.)

  • Create a new user with full Administrator rights. For the exact user name to use, read the submission instructions in Moodle.
  • Choose a secure password for this account, and write it down. Note that I will change the password to a strong password after I log in. Also note that even with an administrator account, I will not be able to see your own personal password.

For the exercises, do the following tasks:

  1. Install the Jetpack plugin. This involves creating an account with WordPress.com. Then, create a contact page, and create a custom contact form that asks the visitor for at least six pieces of information of your choice.
  2. Install a backup plugin and set up a backup schedule for your database and files. You may install the one demonstrated by the textbook or any other one you like.
  3. Create a post or page with a photo gallery that consists of at least five photos. You may use any gallery feature (such as a shortcode or plugin) available to you, such as what the textbook describes, or something provided by your theme, or using a special plugin. However, you cannot simply display five images. (See the “Supplementary resources” section of this module for sources of legal images.)
  4. Upload any legally-obtained audio file (such as an MP3). Create a post or page where you embed this uploaded file using the audio shortcode. (See the “Supplementary resources” section of this module for sources of legal music.)

Submission

Submit the following information to Moodle:

  1. The password for the administrator account that you created. (Go to the submission instructions in Moodle to see the exact user name to use.) Don’t worry; Moodle is a secure environment, and I will change the password to a strong password after I log in.
  2. URL to the contact page.
  3. A screenshot of your plugins page that clearly shows:
    1. The full URL of the plugins page in the screenshot (e.g.
    2. “Jetpack by WordPress.com” (circle it in red in the screenshot)
    3. The backup plugin you installed (circle it in red in the screenshot)
  4. A screenshot of the settings page of your backup plugin that summarizes the settings of your scheduled backup job
  5. URL to the post or page with the photo gallery.
  6. URL to the post or page with the audio file.

Deadline: 6:30 pm Friday July 26, 2013

Module: PHP Introduction

In this module, you will be introduced to the basics of PHP, the most popular server-side scripting language. You will learn PHP syntax, variables, data types, arrays, conditional statements, and loops.

Textbook readings

  • All-in-One: Book IV Chapter 1 (pages 271 to 313; 316 to 318), “Understanding PHP Basics”.
    • Read the initial material on PHP error messages (pages 310 to 313), but skip the sections on “Displaying error messages” and “Logging error messages” (pages 313 to 316).
  • All-in-One: Book IV Chapter 2 (pages 319 to 337; 339 to 346), “Building PHP Scripts”.
    • Take special note of “Pattern matching with regular expressions” (pages 323 to 327). This is very important. You don’t need to memorize anything there, but you should understand how regular expressions work in PHP.
    • Read the initial material on for loops (pages 335 to 337), but skip the section on “Designing advanced for loops” (pages 337 to 339).
    • This module ends on page 346. You will continue with PHP functions in the next module.

Required Web readings and videos

Exercises (not graded)

Module: PHP Forms

In this module, you will learn the basic elements of form handling using PHP. You will learn how HTML forms interact with PHP to deliver server-side interactivity for users.

Textbook readings

  • None for this module

Required Web readings and videos

  • Videos on handling forms in PHP. It could be helpful to watch the videos first, then understand more details with the readings below. It would be best to watch actively—since the code in the videos is simple, type out the same code that you see being demonstrated to better understand what’s going on.
  • HTML Forms from Paul Hudson’s Hacking with PHP online book. You can read the entire chapter 7, but you don’t have to. You are only required to read the following specified sections. Regardless, take care of all the notes I make:
    • Read 7.1, 7.2, 7.3, 7.3.1, 7.3.2, 7.3.3.
      • Study 7.3.3 (“A working form”) carefully and make sure you understand everything there, since this is the focus of the entire chapter. In fact, it is 100% HTML, so you should understand it easily.
    • Read 7.4 and 7.4.1. You can skip 7.4.2 and 7.4.3. Read 7.4.4 and 7.4.5.
      • Study 7.4.5 (“Handling our form”) carefully—it is the most important part of this section. I strongly recommend that you type out the code he demonstrates by hand yourself so that you make sure you understand every single line. In particular, you should do the little exercise he suggests to fix the bug in his code.
    • Read 7.5 and 7.6. Separate readings below will explain in detail what he mentions briefly in 7.5.
    • Read 7.7, 7.7.1, 7.7.2 and 7.7.5. You can skip 7.7.3 and 7.7.4. Data validation is extremely important, but it can be quite tricky. The All-in-One book has an excellent and detailed chapter on data validation, listed in the supplementary readings below (not required reading for this module).
    • Read 7.8
      • The first recommendation, “Use tables to lay your elements out neatly”, is no longer good advice (this is an old book, back from when CSS was not so flexible). You should use CSS for all layout and design, not tables.
    • Read 7.9. You can skip 7.10, 7.11 and 7.12.
  • HTML Form Guide. These tutorial posts fill in some important gaps not well covered in the online book above:

Exercises (not graded)

Supplementary readings (not required)

Module: WordPress 13&14

In this module, you will learn how to integrate the skills you have learnt about core web technologies to customize and adapt a base WordPress website. Specifically, you will learn how to customize the WordPress theme by modifying its CSS and PHP, and then you will study in detail the variety of steps needed to completely customize a sample WordPress website.

Textbook readings

When reading the WordPress book, you need to read actively—create your own site as you read along, doing all the steps described in the book. The exercises that follow simply assure that you have followed the steps described in the textbook.

  • WordPress: Chapter 13 (entire chapter, pages 427 to 470), “Editing Themes: The Key to Customizing Your Site”
    • I don’t recommend using the Theme Editor for editing themes (pp. 433–434). I find it quite limiting. I prefer to edit files directly from FileZilla. To edit files on a remote web host directly from FileZilla:
      1. Associate the web development files (.html, .php, .css, .js, etc.) in your operating system with NotePad++ or whatever text editor you use).
      2. Then in FileZilla, right-click on the file on your server (don’t double-click!), and choose “View/Edit”.
      3. Edit the files in NotePad++, and then save the file.
      4. In order for the file to be modified on your server, you must switch back to the FileZilla window. It will ask you if you want to update the file on the server, and then click “Yes”.
      5. Refresh your web browser page, and then you should see the changes live.
    • Rather than using the child theme plugin described by the book (pp. 435-437), in the exercises below, you will be required to create one manually using the instructions in the web reading below.
    • To follow the examples in the book, you might want to install and activate the Twenty Eleven theme.
    • Note that each theme has its own set of CSS classes and PHP templates; thus, not everything in tables 13-1 and 13-2 will apply to your preferred theme. Nonetheless, it is important to understand these things, since the default WordPress themes set the standard for most other themes.
  • WordPress: Chapter 14 (entire chapter, pages 471 to 510), “Building an Advanced WordPress Site”
    • To follow this detailed, extended example, you might want to set up a new WordPress site just for testing. You should not use your project website for actively following this chapter.
    • There is no exercise based on this chapter, so you may just want to read it in detail. However, there will be reading quiz questions on it.

Web readings and videos

  • Child Themes from the WordPress Codex
  • The Loop: the core code that displays blog posts in a WordPress site

WordPress exercises (graded)

  1. Create a child theme using the instructions in the WordPress Codex. Do not use a plugin as the textbook describes. It’s really not that hard. The following changes must be implemented in the child theme.
  2. Select a web font from Google, and implement it as the default font for your website.
  3. Change the background colours of main content body, your header, and your footer; also change the line spacing or font size of any element of your choice. Your changes can be minor if you already like the default colours in your theme.
  4. Borrow any PHP code snippet from the textbook (with proper citation) and change any template file in your child theme. You can make whatever change you like.

Submission

Submit the following information to Moodle:

  1. Full URL directly to the style.css file of your child theme (e.g. . Clicking on this link should directly open your child theme style sheet in a browser.
  2. A brief explanation of the modifications you made for exercise #4 above. It will be verified by logging into your site.

Deadline: 6:30 pm Friday August 9, 2013

Module: PHP Functions and MySQL

In this module, you will learn how to use functions in PHP and the basic organization of files for PHP scripts. You will also be introduced to MySQL and learn how PHP and MySQL interact in a script that uses a database.

Textbook readings

  • All-in-One: Book IV Chapter 2 (pages 346 to 361), “Building PHP Scripts”.
    • Read the initial material on “Organizing with include files” (pages 359 to 361), but skip the sections on “Using variables in include statements”, “Storing include files securely” and everything else to the end of the chapter (pages 361 to 363).
  • All-in-One: Book V Chapter 1 (pages 449 to 452), “Introducing MySQL”.
    • You will learn only the bare basics of what the MySQL database engine is. Thus, skip the sections on “Sending SQL queries”, “Using the mysql client”, and “Protecting Your MySQL Databases” (pages 452 to 455).
  • All-in-One: Book V Chapter 5 (pages 515 to 526), “Communicating with the Database from PHP Scripts”.
    • Skip the section on “Converting mysqli Functions to mysql Functions (pages 526 to 527).

Required Web readings and videos

  • None for this module.

Exercises (not graded)

Module: WordPress Plugins

In this module, you will learn how to create WordPress plugins, widgets and shortcodes. Although you will learn just the elementary concepts of plugin development, these advanced skills will enable you to begin to develop and customize a WordPress site to do almost anything you want it to.

Textbook readings

  • None for this module

Required Web readings and videos

WordPress exercises (not graded)

  • Install a new localhost version of WordPress for testing purposes.
  • Using your test installation of WordPress, create the plugins, widget and shortcodes in the videos and web readings.

Supplementary readings (not required)

 

Module: WordPress Project

This is module is purely learning by doing—you will work on your project and thus integrate all your learning from this course. There are no readings or exercises other than working on your project.

0 Comments

Trackbacks/Pingbacks

  1. WordPress in Education: Becoming a Platform for Course Delivery, MOOCs - […] helped him make his course material public, which I found amazing. The ironic thing is that he also teaches…
  2. Pressed Solutions | WordPress Development.Management.Support WordPress in Education: Becoming a Platform for Course Delivery and Learning - Pressed Solutions | WordPress Development.Management.Support - […] subject material public, which i revealed excellent. The ironic factor is that he additionally teaches WordPress at a university…
  3. How teachers can benefit from open education resources (OERs) - […] professor’s own free quality course materials on internet programming can be found here. Yes, it’s free material that other…