CREATING A PHP CMS

with Dreamweaver and jQueryMobile using PDO

INTRODUCTION

Below are some links to general information about this tutorial:

  1. Prerequisites
  2. Overview of Structure
  3. Executive Summary
  4. Techniques Used In Training

Objective

The objective of this tutorial is to NOT have users write a lot of code but rather link to existing code or copy & paste code that have been provided:

  • Frameworks (jQuery, jQueryMobile, etc.)
  • CSS (custom_styles.css)
  • PHP Connection Script (db.php)
  • PHP Script files (loginScript.php, logout.php, uploadScript)
  • PHP Code Snippet Scripts (searh_and_pagination.php)
  • Main PHP code (written in in black text)
  • New or modified HTML or PHP code (highlighted in blue text)

So that more focus can be given to how a CMS works instead of how it is written.

Prep, Database, and Pages

Prep:

  • Install XAMPP
  • Check Server and Database
  • Check PHP
  • Check PHP Output / Format (OPTIONAL)

Database (Create/Connect/Communicate):

  • Create Database
    • Normalize Data (Info Only)
    • Create Database
    • Create Tables
      • Create First Table
      • Create Other Tables
      • Relate Tables
      • Populate Tables
      • Create A User And Set Privilege
    • Export Database (Backup)
      • Review *.SQL File
    • Import Database
  • Connect To Database
    • Setup Server
    • Connect To Database Server
    • Select A Database
      • Close Connection
  • Communicate With Database
    • Test Database
    • Create Connection Script

Create Stub Pages:

  • Create Master Page
  • Create All Other Pages

Training Resources

Final Project (Zip file: will need to config for your local system or ISP)

CMS PAGES

The following CMS pages will be created. Click a panel's link to see details for page.

1. Master Page

  • PART A: CREATE STATIC CONTENT
    • Create Static Buttons
    • Create Static Listview
  • PART B: ADD DYNAMIC SCRIPT
    • Add SQL SELECT Recordset Script
  • PART C: REPLACE STATIC CONTENT WITH DYNAMIC CONTENT
    • Make Query String And Tooltip Dynamic
    • Make Department Name Dynamic
    • Make Image Reference Dynamic
  • OPTION 1: Display Total Records From Database
  • OPTION 2: Add Dynamic Copyright Notice
  • OPTION 3: Add Dynamic Time and Date
  • OPTION 4: Add Dynamic Thumbnails to Table
  • OPTION 5: Provide an Avatar for Missing Images
  • OPTION 6: Display Message If No Record is Found

2. Detail Page

  • PART A: CREATE STATIC CONTENT
    • Create Static Image
    • Create Static Table
    • Create Static Button
  • PART B: ADD DYNAMIC SCRIPT
    • Add SQL SELECT Recordset Script
  • PART C: REPLACE STATIC CONTENT WITH DYNAMIC CONTENT
    • Make Image Dynamic
    • Make Table Dynamic
    • Make Button Dynamic
    • Make Confirmation Dialog Box Dynamic
  • Option 1: Add Dynamic Image
  • Option 2: Provide An Avatar For Missing Image
  • Option 3: Add Non User Data (e.g., DateEntered)
  • Option 4: Create Alternating Row Colors
  • Option 5: Create A Personalize Delete Dialog Box
  • Option 6: Create A Custom Delete Dialog Box (NOT COMPLETED)

3. Search Page

  • PART A: CREATE STATIC CONTENT
    • Create Static Form
    • Create Static Message Paragraph
    • Create Static jQuery Listview
  • PART B: ADD DYNAMIC SCRIPTS
    • Add Conditional Script
  • PART C: REPLACE STATIC CONTENT WITH DYNAMIC CONTENT
    • Make Total Record Dynamic
    • Make Query String and Tooltip Dynamic
  • OPTION 1: Add Search Button (NOT COMPLETED)
  • OPTION 2: Add Pagination Scheme
  • OPTION 3: Add Previous/Next and First/Last Navigation links/buttons (NOT COMPLETED)

4. Add Page

  • PART A: CREATE STATIC CONTENT
    • Create Static Form and Form Elements
  • PART B: ADD DYNAMIC SCRIPT
    • Add SQL INSERT Recordset Script
    • Add Redirect User To Another Page Script
  • Option 1: Provide Basic Form Validation
  • Option 2: Add Dynamic Combo Box
    (Must be done on both Add and Edit Pages)
  • Option 3: Create Upload Image Functionality
    (Must be done on both Add and Edit Pages)

5. Edit Page

  • PART A: CREATE STATIC CONTENT (From Add Employee Page)
    • Create Static Image
    • Create Static Table
    • Create Static Button
  • PART B: ADD DYNAMIC SCRIPTS
    • Add SQL SELECT Recordset Script
    • Add Dynamic Variables Script
    • Add SQL UPDATE Recordset Script
  • PART C: REPLACE STATIC CONTENT WITH DYNAMIC CONTENT
    • Make Department Combo Box Dynamic
  • Option 1: Provide Form Basic Validation
  • Option 2: Add Dynamic Combo Box
    (Must be done on both Add and Edit Pages)
  • Option 3: Create Upload Image Functionality (NOT COMPLETED)
    (Must be done on both Add and Edit Pages)

6. Delete Page

  • ADD DYNAMIC SCRIPT
    • Add SQL DELETE Recordset Script
    • Add Redirect User Script

7. Login Page

  • PART A: CREATE STATIC CONTENT
    • Create Static Login Form
  • PART B: ADD DYNAMIC SCRIPTS
    • Add Login Script
    • Add Error Message Script
    • Add Server Variables Script
    • Add Logout Script
    • Add Restrict Admin Pages Script
    • Add Session Variables Script
  • OPTION 1: Add Registration Link (NOT COMPLETED)
  • OPTION 2: Add “Forgot Password” Functionality (NOT COMPLETED)
  • OPTION 3: Add “Remember Me” Functionality (NOT COMPLETED)

8. Logout Page

Create Logout Script

9. Registration Page

  • PART A: CREATE STATIC CONTENT
    • Create Static Form and Form Elements
  • PART B: ADD DYNAMIC SCRIPTS
    • Add Sticky Form Script
    • Add Validate Form Fields Script
  • Option 1: Validate Form
  • Option 2: Create Sticky Form
  • Option 3: Add Send Confirmation Email (NOT COMPLETED)
    (PHP Third Edition page 222-226)
  • Option 4: Check for Unique Username and Email  (NOT COMPLETED)
Preview Final Project

ENHANCEMENTS

After the Essential Basic CMS functionalities have been completed, you may want to add some additional enhancements, especially for security.

Vital Few Pages

Master Page (Employee Master Page)

  1. Display Total Records From Database
  2. Add Dynamic Copyright Notice
  3. Add Dynamic Time and Date
  4. Add Dynamic Thumbnails to Table
  5. Provide an Avatar for Missing Images
  6. Display Message If No Record is Found

Detail Page (Employee Detail Page)

  1. Add Dynamic Image
  2. Provide An Avatar For Missing Image
  3. Add Non User Data (e.g., DateEntered)
  4. Create Alternating Row Colors
  5. Create A Personalize Delete Dialog Box
  6. Create A Custom Delete Dialog Box (NOT COMPLETED)

Search / Navigate Function

  1. Add Search Button (NOT COMPLETED)
  2. Add Pagination Scheme
  3. Add Previous/Next and First/Last Navigation links/buttons (NOT COMPLETED)

Admin Pages

Add Page (Add Employee)

  1. Provide Basic Form Validation
  2. Add Dynamic Combo Box
    (Must be done on both Add and Edit Pages)
  3. Create Upload Image Functionality
    (Must be done on both Add and Edit Pages)

Delete Page (Page Not Applicable)

No enhancement necessary since
page is never seen by user.

Edit Page (Edit Employee)

  1. Provide Form Basic Validation
  2. Add Dynamic Combo Box
    (Must be done on both Add and Edit Pages)
  3. Create Upload Image Functionality (NOT COMPLETED)
    (Must be done on both Add and Edit Pages)

Authentication Pages

Login (Employee Login)

  1. Add Registration Link (NOT COMPLETED)
  2. Add “Forgot Password” Functionality (NOT COMPLETED)
  3. Add “Remember Me” Functionality (NOT COMPLETED)

Logout (Page Not Applicable)

No enhancement necessary since
page is never seen by user.

Registration Page (Employee Registration)

  1. Validate Form
  2. Create Sticky Form
  3. Add Send Confirmation Email (NOT COMPLETED)
    (PHP Third Edition page 222-226)
  4. Check for Unique Username and Email  (NOT COMPLETED)