The Computer Gal Logo - Laptop with coffee and plants
Articles • Computer Tips • Links • About
Basic Web Programming
Day 1 | Day 2 | Day 3 | Day 4 | Day 5 | Day 6 | Day 7 | Day 8 | Day 9 | Day 10
This book is available in The Lifelong Learning Center bookstore or from Amazon by clicking the image.
The Computer Gal on Facebook
Ask to receive tips and handouts to your email.

Course Objectives

  1. To understand basic programming structures
  2. To understand the difference between client-side and server-side programming
  3. To learn basic programming structures with JavaScript
  4. To use a prewritten function
  5. To understand and use basic programming structures and syntax: variables, functions, if statements, loops, function calls, passing variables and values.
  6. To understand the importance of naming conventions in variables and functions
  7. To understand basic database design
  8. To set up a MySQL database in PHPMyAdmin
  9. To be able to write simple MySQL queries
  10. To learn the basics of PHP and how the skills learned in JavaScript apply to PHP and other programming languages
  11. How to connect to a MySQL database with PHP
  12. How to write PHP code to with a MySQL query
Days Topics Web References
1
Introduction to Basic Programming Tools

Topics

  1. What is a variable?
  2. What is a function()?
  3. What is an if statement?
  4. What is a loop?
  5. What is good programming form?
ANALYZE THIS! Put this piece of code into good programming form.
startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";} node.onmouseout=function() {this.className=this.className.replace(" over", "");}}}}}window.onload=startList; 		 
2
Using the Programming Structures in JavaScript

Topics

  1. How is JavaScript different from PHP or ASP?
  2. Using a predefined function with parameters
  3. What is a String? and What is the difference between a hard-coded string and a variable?
  4. Using Variables and Math Operators
    concatenation, overloaded operators and the effect of ambiguity
  5. Outputting JavaScript to the page instead of to an Alert Box
  6. Getting user entry from a Prompt Box and writing to the screen
  7. Gathering information from a form

 

What is JavaScript?

Example of JavaScript Programming to supplement CSS

The HTML DOM (Document Object Model)

 
3

Form Validation with JavaScript

Topics

  1. Writing a function to show errors in form entry
  2. Calling a function
  3. Passing values and variables to functions.
  4. Regular expressions

ANALYZE THIS! This code checks to see if a date entered into a form field is in MySQL date format.
 if(!preg_match("/[0-9-]{4}-[0-9]{2}-[0-9]{2}/", $DateFromForm))

Suggested Reading about Website Security

Regular Expressions Quick Start

JavaScript Regular Expressions

JavaScript Regular Expressions 2

Regular Expression Cheatsheet

4
JavaScript Finish

Topics

  1. Finish form validation
  2. Review basic programming principles
  3. Review passing data and scope of variables
  4. Semantics and names
10 Ways to Mess up your Database
5
Introduction to Database Design
  1. Relational Database
  2. Tables and Fields
  3. Field Constraints
  4. Relational database, primary keys, and foreign keys
  5. Exercise: create a database design for a random image generator.
 
6
Database Design and Construction
  1. Create a database design for classes a business will hold
  2. Introduction to PHPMyAdmin
  3. Create the random image generator database in PHPMyAdmin
  4. What will you store for the image?
 
7
MYSQL Queries
  1. Basic MySQL Queries
  2. Create queries to add image records to your database

Exercise: Writing MySQL Queries from practice database design
CaseStudy: SQL Injection attempts

 
8
Introduction to PHP - Code to Pick up a Random Image
  1. Understanding page states
  2. Programming logic - what steps do we need the program to do?
  3. Connecting to a database
  4. Getting data from the database - SELECT - what will you get for the image and how will you make it work?
  5. Using the data set on the page.
  6. Example: do you see the PHP code?
9
Program a Form to Add to your Database
  1. Security on a backend form
  2. Page states of a login form
  3. Build a form to add an image to your random image generator.
  4. Connect to the database
  5. Get data from the form fields
  6. Consider the Image field. How will you set the work flow?
  7. Push data into a query.
  8. How will you know if the query worked?
  9. How will the person doing the entry know whether the query worked?
  10. How will an entry affect the front end?

Exercise to try at home: Programming a login form

 Code to create State/Province dropdown with PHP 'selected'
10
What do you need to Program a Form to Delete and Course Review
  • Review: Programming Jeopardy
  • Case Study: Pushing the results of PHP into JavaScript

 
Nora McDougall | Missoula, Montana 59801 | 406.253.4045 | Contact Nora
© 2010, Nora McDougall-Collins