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
WordPress/MySQL lessons
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:

XAMPP / WINDOWS

Recommended: Installing XAMPP on Windows (~30:00 total, 2-video playlist)

XAMPP / MAC

Installing XAMPP on a Mac (~30:00 total, 2-video playlist)

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.


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.


^ 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 ^

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 http://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 http://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 ^

11 : User Defined Functions

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

(Located at http://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 ^

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