Lecture Notes

Section 1: Introduction

Web Development Masterclass - Introduction
Course Learning Objectives
Locating Assessments and Course Files

Section 2: How the Internet Works

The Internet Overview
The HTTP Protocol
The HTTPS Protocol
The SMTP Protocol and Local Mail Delivery
Outbound Mail Delivery
Network Basics - LAN and WAN
Network Ports and Firewalls

Section 3: The Web Development Process

Web Development Process Overview

Section 4: Planning a Website

Web Application Planning Overview

Section 5: Web Hosting and System Requirements

Web Hosting Packages Overview
Shared Hosting
Dedicated Hosting
VPS Hosting
Cloud Hosting and Case Study

Section 6: Domain Names

Introduction to Domain Names
Domain Name Registrars
Domain Registration
Registration and Privacy Protection
Control Panel Sign-In
Auto-Renewal and Domain Lock
Domain Forwarding
Update Registration Information

Section 7: Testing Environment

Introduction to Testing Servers
Installing WampServer - WAMP
Installing MampServer - MAMP
WampServer Menu
Localhost File Test

Section 8: Production Environment

Cloud Hosting Registration
Creating a Virtual Server
Linode Settings and Configuration
Deploying an Image - Ubuntu 14.04 LTS
Linode Dashboard
Remote Access
Download PuTTY and PuTTYgen - Windows
Launch Terminal - MAC
Intro to Command Console
Connecting with PuTTY - Windows
Connecting with Terminal - MAC
Maintenance Commands
File and Directory Commands
Installing LAMP Stack
Server Host Name and Date
Creating a User - Ubuntu
Ubuntu SSH Authentication - Windows
Ubuntu SSH Authentication - MAC
Web Root Permissions
Remote Dekstop Connection
Installing Tight VNC Viewer - Windows
Installing RealVNC Viewer - MAC
Ubuntu Desktop Basics
Disable Root and Password Access
Re-sizing a Linode Server
Creating Backups on Linode
Changing Root Password through Linode
Linode DNS Manager
Amending GoDaddy Name Servers

Section 9: FTP Setup

FTP Client Installation
FileZilla Overview
FileZilla Uploading
FileZilla Interface Basics

Section 10: HTML Development

Introduction to HTML
Basic Structure of a Web Page
HTML Head Tags
HTML Body Tag
HTML Paragraph Spacing
HTML Line Breaks
HTML Non-Breaking Space
HTML Header Tags
HTML Text Formatting and Decoration
HTML Inline Text Formatting
HTML Unordered Lists
HTML Ordered Lists
HTML Image Insertion
HTML Embedding Videos
HTML Absolute vs. Relative File Referencing
HTML Link Creation
HTML Anchor Tags
HTML Tables
HTML Nested Tables
HTML Merging Cells
HTML Text Wrapping
HTML Table Background Image
HTML Table Cell Alignment
HTML - Introduction to Forms
HTML Form Tags and Attributes
HTML Forms - Post vs. Get
HTML Forms - Input Text Fields
HTML Forms - Select Menus
HTML Forms - Check Boxes and Radio Buttons
HTML Forms - Text Areas and Buttons
HTML Iframes
HTML Project - Introduction
HTML Project - Header
HTML Project - Callout
HTML Project - Image Insertion
HTML Project - Text Insertion
HTML Project - Links and Form
HTML Project - Tabular Data
HTML Project - Footer

Section 11: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements

Section 12: Document Object Model (DOM)

DOM Introduction
DOM Manipulation

Section 13: JavaScript Development

JavaScript - Introduction
JavaScript Placement
External JavaScript
JavaScript Output
JavaScript InnerHTML
JavaScript Commenting
JavaScript Constants
JavaScript Variables Introduction
JavaScript Assignment Operator
JavaScript Arithmetic Operations
JavaScript Arithmetic Operations Continued
JavaScript Operator Precedence
JavaScript Data Types
JavaScript Objects
JavaScript Object Output
JavaScript Strings
JavaScript String Length
JavaScript Special Characters
JavaScript Random Numbers
JavaScript Min and Max Function
JavaScript Math Round Function
JavaScript Arrays
JavaScript Array Attributes
JavaScript Arrays - Pop - Push - Shift - Unshift
JavaScript Changing and Deleting Elements
JavaScript Splicing an Array
JavaScript Sorting an Array
JavaScript Joining Arrays
JavaScript Conditional Statements
JavaScript Comparisons
JavaScript Booleans
JavaScript For Loops
JavaScript For-In Loop
JavaScript While Loops
JavaScript Do-While Loop
JavaScript Break and Continue
JavaScript Functions
JavaScript Events
JavaScript Project 1 - BG Color Changer
JavaScript Project 2 - Photo Gallery
JavaScript Project 2 - Completion

Section 14: jQuery Library

Introduction to jQuery
Embedding jQuery
jQuery Syntax and Selector Intro
jQuery ID Selector
jQuery Class Selector
jQuery Other Selectors
External jQuery File
jQuery Events Intro
jQuery Events - mouseenter and mouseleave
jQuery Events - mousedown and mouseup
jQuery Multiple Event Handlers
jQuery Hiding-Showing
jQuery Toggle
jQuery Fade In-Out
jQuery Fade Toggle
jQuery Fade To
jQuery Slide Down
jQuery Slide Up
jQuery Slide Toggle
jQuery Animate
jQuery Animate - Multiple Params
jQuery Animate - Relative Values
jQuery Animate - Queue Functionality
jQuery Stop Method
jQuery Callback Functions
jQuery Chaining
jQuery Draggables
jQuery Accordian Menu
jQuery Get Content - text and html
jQuery Get Content - Val
jQuery Get Content - attr
jQuery Set Content - text - html - val
jQuery Set Attributes - attr
jQuery Append and Preprend
jQuery - After and Before
jQuery Remove and Empty
jQuery Filter Remove
jQuery Add Class
jQuery Remove Class
jQuery Toggle Class

Section 15: Bootstrap Framework

Introduction to Bootstrap
Embedding Bootstrap
Bootstrap - Basic Page Structure
Bootstrap Grid System
Bootstrap Three Column Layouts
Bootstrap Typography
Bootstrap Tables
Bootstrap Styling Images
Bootstrap Jumbotron
Bootstrap Wells
Bootstrap Alerts
Bootstrap Buttons
Bootstrap Button Groups
Bootstrap Justified Button Groups
Bootstrap Glyphicons
Bootstrap Badges and Labels
Bootstrap Progress Bars
Bootstrap Pagination
Bootstrap Pager Pagination
Bootstrap List Groups
Bootstrap Panels
Bootstrap Dropdown Menus
Bootstrap Collapsibles
Bootstrap Collapse Panel
Bootstrap Collapse List Group
Bootstrap Accordian
Bootstrap Tab Menus
Bootstrap Pill Menus
Bootstrap Dynamic Tabs and Pills
Bootstrap Navigation Bar
Bootstrap Collapsible Navigation Bar
Bootstrap Forms - Vertical and Inline
Bootstrap Inputs
Bootstrap Form Control States
Bootstrap Input Sizing
Bootstrap Carousel
Bootstrap Modal
Bootstrap Tooltip
Bootstrap Popover
Bootstrap Scrollspy
Bootstrap Project - Themes Intro
Bootstrap Project - File Overview
Bootstrap Project - Script Overview
Bootstrap Project - Script Overview Continued

Section 16: PHP Development

PHP Introduction
PHP Preparation
PHP File Test
PHP Syntax
PHP Variables
PHP Variable Scope
PHP Global Keyword
PHP Static Keyword
PHP Echo vs Print
PHP Data Types
PHP Objects
PHP Strings
PHP Constants
PHP Operators
PHP Conditional Statements
PHP ElseIf Statement
PHP Switch Statement
PHP While Loops
PHP For Loops
PHP Functions
PHP Functions Continued
PHP Arrays
PHP Multidimensional Arrays
PHP Sorting Arrays
PHP Superglobal Variables
PHP Forms Introduction
PHP POST vs GET Basics
PHP Form Output and Validation
PHP Form Required Fields
PHP Validation Continued

Section 17: MySQL Database Integration

Introduction to MySQL Databases
Introduction PhpMyAdmin
PhpMyAdmin Interface Overview
MySQL Security and Root Superuser
MySQL Creating a Database and Table
MySQL Creating a New User
MySQL Database and Table Specific Privileges
MySQL Modifying and Deleting a Table
MySQL Modifying and Deleting a Database
Introduction to SQL
SQL Statements in PhpMyAdmin
Connect to MySQL Database using PHP
MySQL Database - Import Data
SQL Select
SQL Distinct Keyword
SQL Where Clause
SQL And Operator
SQL Or Operator
SQL Order By
MySQL Insert Into
MySQL Get Last ID
MySQL Insert Multiple Records
MySQL Prepared Statements
MySQL Delete Records
PHP Header Function
PHP Isset
MySQL Update Records

Section 18: XML l AJAX

Introduction to XML
XML Basics
XML Schema
XML Parsing
XML Parsing Continued
Introduction to AJAX
AJAX - Search Suggest Tutorial
AJAX - Database Select Menu Tutorial

Section 19: Development Project

Development Overview
Project Setup
Index Page Overview
Home Page Mods
About Page Mods
Blog Page Mods
MySQL Database Creation
Creating a Registration Form
Registration Status using JavaScript and AJAX
PHP Validation - Encryption - Session
Login Authentication - Part 1
Login Authentication - Part 2
Login Authentication - Part 3
Login Authentication - Part 4
Logout - Terminate Session
Contact Page - Google Maps API
Contact Form - AJAX Integration
PHPMailer Installation
PHP Form Validation and Email Transmission
Production Server Migration

Section 20: Google Apps for Work

Google Apps for Work - Introduction
Google Apps for Work - Registration
Google Apps for Work - Admin Console

Lecture Notes

Course: Web Development Masterclass View Course Outline

Created by:





19h 25m 44s

Skill Level:

All Levels



Students Enrolled:




Certification Type:

Completion Certificate

Lecture: AJAX - Database Select Menu Tutorial

In this lesson we will use AJAX to retrieve information from a database.

As shown in this example, we have a SELECT menu that is populated from records in a database.

File: index4.html

function StudentData(str) {
if (str == "") {
document.getElementById("Hint").innerHTML = "";
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("Hint").innerHTML = xmlhttp.responseText;


$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);

$sql = "SELECT id, fname, lname FROM students ORDER BY fname";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
echo '<select name="users" onchange="StudentData(this.value)">';
echo "<option value='0'>Select Name</option>";
while($row = $result->fetch_assoc()) {
echo "<option value='" . $row['id'] . "'>" . $row['fname']. " " . $row['lname']. "</option>";

echo "</select>";

} else {

echo "0 results";


<div id="Hint"><b>Table Data will be Displayed here</b></div>


File: dbcon.php

<!DOCTYPE html>
table {
width: 500px;
border-collapse: collapse;

table, td, th {
border: 1px solid black;
padding: 10px;

th {text-align: left;}

$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','','testdb');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));

$sql="SELECT * FROM students WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table>
<th>First Name</th>
<th>Last Name</th>

while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['fname'] . "</td>";
echo "<td>" . $row['lname'] . "</td>";
echo "<td>" . $row['mark'] . "</td>";

echo "</tr>";
echo "</table>";

When we select an option from the menu, a table is displayed with all the information pertaining to that record. using AJAX we are able to refresh the table data without refreshing the page.

Let's take a look at the structure of our database before coding our files.

You will need to import the database in PhpMyAdmin. To do so, download the testdb.sql file in the downloads folder corresponding to this lesson.

Now open PhpMyAdmin from the WAMP/MAMP menu.

Click on the SQL tab and paste the contents of the testdb.sql file into the text area and click Go.

Once you have done so, you will see the testdb database appear on the left column.

Expand the database and click on the students table.

Inside the table we can see 4 columns (id, fname, lname, and mark)

There are also 4 rows with student data.

Everytime we select a name from our select menu, the data pertaining to the student name selected is displayed.

Let's go ahead and get started.

First, we will need to create our main page, that will display the data from the database.

Create a new document in your text editor, and save the file as index3.php in your xml folder.

Now start by creating your basic html page structure.

In the <body> tag, create a Php script that connects to your database.

After your connection, create the SQL SELECT statement, to select the id, fname and lname columns from the students table.

We will store the data in a $result variable.

Next, if the number of rows in our $result variable is greater than 0, a select menu will be generated.

Name the select menu as users, and create an onchange event that will trigger a function named StudentData – we will create this function in a moment.

We will need to loop through each row and output the data as an option in our select menu.

The option value will be the id, and the display will be the firstname and lastname.

If there are 0 records in the database, we will display the words "0 results".

Next, we will create a <div> that will display the data from our database. Set the <div> id, to hint.

Once this block of code is created, we will need to create our Javascript code.

In the <head> tag of your document, start with creating the StudentData function. This is almost identical to what we did in the last tutorial, so this likely all looks familiar to you.

We've set up the XMLHttpRequest object to facilitate data exchange between our document and Php script.

The Php script will be named dbcon.php.

Open a new document and save the file as dbcon.php.

Setup your basic html page structure.

Inside the <head> tag, create a style sheet with the attributes shown.

These attributes will be used to style the table that contains the data.

We've set a width of 500px, and a 1px black border, with 10px of padding.

Inside the <body> tag, create a Php script that starts by getting the value of the query.

The value is the item the user has selected from the select menu.

This value will be stored in a variable called $q.

Next we create a connection to our database, and select the record from the database that matches the query item.

We store the values of this record in a $result variable.

Next we create the <table>, and display the data of each user that matches our query.

This is done using a while loop, and echoing the data corresponding to the id, fname, lname and mark columns.

Lastly we close the database connection.