MAT-225 Index of Lectures and Demos

About This Page . . .

This page is a compilation of lectures and demos all in one place so that they are easy to find and refer to outside of the class schedule.


You can jump straight to the desired lecture/demo topical unit that you are looking for.

01a : Understanding the PHP process
01b : Installing PHP/MySQL on your personal computer
02 : Overview of PHP Data Types
03 : Data Types – Strings
04 : Data Types – Arithmetic (Integers, Floats)
05 : Data Types – Booleans
06 : Data Types – Arrays
07 : Data Types – Data Types – Arrays (using functions)
08 : Control Structures – Logical Expressions
09 : Control Structures : Loops
10 : Control Structures – “Include” function
11 : User Defined Functions
Creating a Mobile-First design template
Modularizing the Project-1 Template
Adding JS mobile menu to Project-1 template
Adding Page Naming Function to Site
WordPress/MySQL lessons
WordPress Custom Theme Lessons
Adobe XD Screen Layout Design Demo
Posix Primer
Digging Deeper with MySQL

 

Lessons and Demos by Topical Units

01a : Understanding the PHP process

In these two lectures, you will learn:

Introduction: (14:46)

  • what PHP is
  • why we want to use it
  • an overview of how PHP works as an embedded language
  • very basic syntax
  • the fundamentals of variables
  • the 3 types of commenting

Explanation of the Client-Server Process (9:42)

The second lecture explains in more detail how PHP server-side scripting works with the Apache web service and client computers/browsers. It is useful to comprehend this before setting your own computer up to be a server so that you understand why you need a true “web server” for testing.


^ TOP MENU ^

01b : Installing PHP/MySQL on your personal computer

Overview

This section covers how to make your own computer into a web server for testing and development purposes (Windows and Mac). This is not mandatory, but making your personal computer into a web/PHP test server environment will make your life easier throughout most of this course. Additionally, it covers:

  • Setting up a parallel directory structure to your server root directory (dir)
  • Using FTP software to connect and understand the parallel dirs
  • Very basic error checking strategies

1. Server Development Software Installation Demos

The following options have accompanying demos explaining how to install, configure, and understand a personal computer development package. You only need to choose ONE of the following to follow, depending on your operating system:

NOTE: As of 8/22/2022, all users please download installer version 8.1.6 on your system to follow the tutorial unless your computer only supports an older version. ***And Mac users: do NOT download the “VM” version (see Mac instructions below).

XAMPP / WINDOWS USERS

REQUIRED AND IMPORTANT:
Watch “Installing XAMPP on Windows” (~30:00 total, 2-video playlist)

Download Windows XAMPP installer 8.1.6

XAMPP / MAC USERS

REQUIRED AND IMPORTANT:
Watch “Installing XAMPP on a Mac” (~30:00 total, 2-video playlist)

Download Mac XAMPP installer 8.1.6

What is XAMPP?
XAMPP stands for “X (one of four OSs), Apache, MySQL, PHP, PERL” and is used to enable your personal computer with the web and database tools necessary to host its own dynamically driven websites for testing and development purposes. The tutorial video demonstrations above will show you the steps to set your computer up as a “localhost” server.

MAC USERS: Do NOT download the “VM” version for this class. Download the most recent version of the regular installer (163Mb)  that your computer will support. See screenshot above.


2. Web Directories and Intro to PHP Error Reporting (~30:00 total)

These demonstrations will reiterate the pathways to your web serving directory on your file system, how to access the files through your web browser, and basics of understanding PHP error reporting.


3. Local & Remote Web Directories, File Transfer, and cPanel (~35:00 total)

These videos explain the differences between your localhost computer setup and the class server, as well as how to upload your development files from localhost to the class server using Cyberduck. Additionally, it goes over the basics of connecting to yourcPanel account on the class ‘cloud’ world-visible server.

The videos below (three) are in a single playlist, so they will auto-load when the previous one is completed. To jump forward, use the top left video player icon to access the playlist. DO NOT SHARE THESE VIDEOS.

IN VIDEO 3 RE: CPANEL
In the third video in the playlist, I tell you how you can access your cPanel account on the server. The address you should NOW use is the one I sent you via email. It should be as follows, where you would substitute your last name for “lastname”: https://cpanel.lastname.matmcc.org 

 
IMPORTNANT! In the third video, I explain that our server’s cPanel address has a “self-signed” security certificate for its https, which browsers will suggest is unsafe to visit. You shouldn’t receive this if you are using the “https://cpanel.lastname.matmcc.org” format address. The correct address to visit in order to go to the cPanel is the cPanel address I sent in your credentials PDF via email. Using this address should help you avoid the security prompt mentioned below.
 
If for any reason that cPanel address doesn’t work, you can now use: https://132.148.28.209:2083 . The IP address in the video and in the screenshots below are incorrect.
 
Here are example warning screens from Chrome:
Click Advanced
 
Click Proceed
 This particular web address portal and security certificate are safe to use since you know who set it up (me). Any warnings that appear in your browser will only appear because we have our own server verifying its encryption instead of paying for a third party to do so. It is safe to click “Proceed”, “Continue”, or “Advanced” to go to the website.
 
 

^ TOP MENU ^

02 : Overview of PHP Data Types

Learn the fundamentals of PHP Data Types and how they work to build a solid foundation in your understanding of the scripting language.

This section provides and overview of PHP “data types”:

  1. Data Types Overview (25:00 video + web lecture notes)

^ TOP MENU ^

03 : Data Types – Strings

Learn the fundamentals of PHP Strings:

  1. Strings (~1hour video + web lecture notes) :

To read and learn more about operators relevant to the lessons above, check out php.net’s awesome documentation:

04 : Data Types – Arithmetic (Integers, Floats)

Learn the fundamentals of PHP Integers, Floats, arithmetic operators, and arithmetic functions:

  1. Arithmetic Operators (~25:00 video + web lecture notes) :
 

To read and learn more about operators relevant to the lessons above, check out php.net’s awesome documentation:


^ TOP MENU ^

05 : Data Types – Booleans

Learn the fundamentals of PHP Booleans:

Booleans and NULL (web notes only)


^ TOP MENU ^

08 : Control Structures – Logical Expressions

1. Read Logical Expressions Web Notes to learn about:

– “If” statements
– “Else/Elseif” statements
– Comparison operators used in decision-making
– “Switch” statement
– Conditional operator

(Located at https://learn.leighcotnoir.com/2011/08/php-lesson-08-logical-expressions-3/)

List of Demo Videos:

To read more on different types of operators relevant to this lesson, visit the following php.net links (extremely informative and helpful!):


^ TOP MENU ^

09 : Control Structures : Loops

1. Read Loops Web Notes to learn about:

– ‘while’ and ‘do…while’ loops
– ‘for’ loops
– ‘foreach’ loops (indexed arrays)
– ‘foreach’ loops (associative arrays)
– Continue

(Located at https://learn.leighcotnoir.com/2011/07/php-loops-and-include-overview/)

List of Demo Videos (~1.5 hrs total):

VIEW COMPLETE PLAYLIST or individual videos:


^ TOP MENU ^

10 : Control Structures – “Include” function

List of Demo Videos (~41 minutes total):


^ TOP MENU ^

11 : User Defined Functions

1. Read Functions Web Notes to learn about user-defined functions in PHP.

(Located at https://learn.leighcotnoir.com/2014/01/php-lesson-10-functions/)


Lesson Demo: Creating a function to dynamically generate image galleries
Getting Started with Source Files

Download the files below to follow along with the demo series:

 displayImages-function STARTER FILES       

NOTE: TWO IMPORTANT THINGS ABOUT THESE FILES:

  1. You will want to place the unzipped folder below in your web-serving “dev/” folder.
  2. This folder/file configuration will not make complete sense as a usable set of files until the 6:30 minute marker of the “displayImages Part 02: Batch Images” video in the series below.

~~~

List of Demo Videos (total time almost 4 hours):

 

PLEASE NOTE!

Duplicate Lightbox JS Instance
Duplicate Lightbox JS Instance

After completing video #12 you might notice an empty container below the Lightbox on the page, with a perpetually spinning icon. You haven’t done anything wrong. This problem is addressed in a later video. It is occurring because the lightbox javascript is loaded on the page more than once. Later you will learn how to check to see if it has been fired to prevent it from loading again.

~~~


^ TOP MENU ^

Creating a Mobile-First design template

Go to the “Mobile-First Design” tutorial page.


^ TOP MENU ^

Modularizing the Project-1 Template

The following demo series will show you how you should apply include functions to start modularizing your Project-1 template so that the template page pulls from component page resources. This is a REQUIRED part of the assignment, so this will be useful in helping you understand how it works.

View the demo page.


^ TOP MENU ^

Adding JS mobile menu to Project-1 template

Optional but recommended: adding a jQuery mobile menu to the template

One thing you might notice if you have followed the template demo closely is that the navigational menu in mobile view stays expanded. Because this takes up valuable real estate, you should consider adding javascript functionality to the menu so that it collapses into an expandable menu in ‘mobile’ view. It also covers how to create an accessible fallback method in the event the client borwser has Javascript disabled. To learn how to do this, you can watch the following 5-part video demo series, “Project1 – Mobile JS Menu ” (~53 minutes total).

Mobile Orientation Checker and Background Image Issue Fixes

Interested in digging deeper? Also on the JS mobile menu page is information (and video tutorial) that explains a way to resolve problems many versions of iPhones typically have with rendering “background-size: cover;” images. It uses php to detect a mobile user agent, jQuery to target orientation changes, and conditional statements to trigger appropriate css changes. It also provides resource files.


^ TOP MENU ^

PHP – Adding Functions to Your Template


Adding Page Naming Function to Project-1

REQUIRED

To do this required portion of project-1, you will need to watch the following 2-part video demo series, “Adding Functions to Your Template ” (~40 minutes total).


^ TOP MENU ^

WordPress Custom Theme Lessons

The fundamentals of this assignment are based off of lessons from the required textbook, WordPress Responsive Theme Design by Dejan Markovic, as well as instructor video lectures and demos. While the book is useful in putting you on a solid path to understanding the structure of WordPress and how to manipulate it in building a custom theme, there are places where better explanation is required for a full understanding of the concepts and directives. Therefore, you will also be assigned tutorial videos to walk you through the process of building your own theme from scratch.

  • PLAYLIST BREAKDOWN FOR ABOVE TUTORIAL
      • Video 1 covers downloading the correct WP package, the correct “topcat” Underscores starter theme, merging them, and uploading to the class server. (15:27min)
      • Video 2 covers creating the new MySQL database and database user and then finishing the installation of WordPress with Underscores activated (10min)
      • Video 3 covers installation of Theme Unit Test Data and Developer plugins (18min)
      • Video 4 covers the WP template hierarchy (!IMPORTANT) – 35min

     

    • INSERT OPTIONAL PLAYLIST HERE:
      Adobe XD Tutorial (~2hrs runtime)

      This tutorial is a 5-part playlist that logically slots into this project after Video 5 of the WordPress Custom Theme Lessons series. Because it is not required, it has been separated out into a separate playlist. You will be required to do a visual mockup for the final project, though, and the new XD prototyping tool is an extremely nimble and efficient solution compared to Photoshop or Illustrator. I strongly suggest you check this out since tools like XD (similar to InVision’s Sketch) are the industry standard for UI/UX development of web and phone deliverables!
    • Video 5: This demo explains how to set up FTP as your primary method for transferring files in this project. It goes over explicit instructions on mapping your WP project folder from your computer to the correct server subdirectory using an absolute path from the class server. It is not as intuitive as you might expect! It also discusses the methods you should NOT use to edit your files on the server. (20min)
    • Video 6: This demo explains what the basic components of the functions page does and shows you how to modify some basic settings to get started. (14min)
    • Video 7: This video covers how to download Google Fonts and use FontSquirrel’s web font generator tool to prep the package for your server directory. Next, it shows you how to modify the css and functions.php page to pull the fonts into the site PROPERLY. (31min)
    • Video 8: This shows you how to download the free Font Awesome icon set, package it within your site, enqueue in functions.php, and test in your site. It also covers how to download Modernizr and Respond.js to functions.php so that your site can gracefully degrade in older browsers that don’t support CSS3 for things like media queries (respond.js) and visual styling issues as well as HTML5 issues (modernizr). (32min)
    • Video 9 explains and illustrates the differences of “em” and “rem” units using a simple HTML/CSS example. (13min)
    • Video 10 starts with styling in the main style.css file, including styling all heading levels. (21min)
    • Video 11 illustrates how to enqueue the content-sidebar.css file and make modifications with mobile-first media queries to float two columns on specific screens sizes. (17min)
    • Video 12 shows you how to set up the custom header file  and add a function to the functions.php page to allow SVG image uploads (NOT IN THE BOOK). (18min)
    • Video 13 shows how an approach in styling the header as a fixed element so that content will scroll beneath it. (32min)
    • Video 14 explains how to create media queries to address the tagline scaling on very small and large screens. (10min)
    • Video 15 addresses the basic styling of the main/primary navigation bar for desktop sizes (not including dropdowns). (22min)
    • Video 16 shows you how to target and style the dropdown descendant list links on the main navigation in desktop view. (21min)
    • Video 17 explains an approach to styling the mobile menu navigation button. (17min)
    • Video 18 shows you how to make the navigation responsive on mobile-sized screens (29min)
    • Video 19 explains how to register new sidebar/widget areas in the functions.php page, create a new sidebar file that will serve as a footer widget area, and how to call the footer widget in your footer.php file.  (22min)
    • Video 20 show how to target and style the new footer widget and optimize an SVG file. (16min)
    • “21 Making Content Under Header Visible with JS:” explains how you can write and enqueue custom jQuery to adjust your page’s content to adapt to the header.
    • “22 Styling the Content”
    • “23 Adjusting Background Image, Margin, and Mobile Nav Issues”
    • “24 Basic Yet Important Styling”
    • “25 Customizing Search and Archive Result Pages”
    • “26 More Custom Styling and Adding Icons to Meta”
    • “27 Adding Icons to Entry Footer and Post Nav”
    • “28 Styling Galleries”
    • “29 Not Found and Error 404 Styling”
    • “30 Sidebar Link Styling”
    • “31 Create a Custom Home Page”
    • More videos will be released as the project progresses.

    To relate your readings to the video tutorials, see the basic outline below:

    • pp. 1-10 (not video-related)
    • pp.11-12 (Video 1 & 2 – but the video is WAY more in depth and advises to use the class server instead of your development computer environment)
    • pp.13-15 (Video 3)
    • pp.17-33 (Video 4 – video will be extremely helpful)
    • pp.36-37 (Video 5 – somewhat related)
    • pp.37-38 (Video 6)
    • pp.38-40 (Video 7 – video will be extremely helpful)
    • pp.40-42 (Video 8 – video will be extremely helpful)
    • More videos will be released as the project progresses.

    ^ TOP MENU ^

  • WordPress/MySQL lessons


    ^ TOP MENU ^

    Posix Primer

    This is a POSIX file permissions primer lesson to help you understand how to manipulate file permissions on your server to allow for php application privileges for reading, writing, and executing files in your web directories. POSIX permissions apply to UNIX-based servers, which are the most standard variety out there.


    ^ TOP MENU ^

    Digging Deeper with MySQL

    These demos below might not be covered in this class as a regular part of the curiculum, but it you are interested in trying to build your own backend without using a CMS like WordPress, you can do the following tutorials on your own after the class is over:

    ^ TOP MENU ^

    Digital Art, Design, and Communication Education