OnTargetHTML5 Logo Image

OnTargetHTML5 Tutorial Sets

Your source for web development training

Pay Securely with PayPal

Building a Live Chat System

Priced at: ... $8.00   Holiday Pricing: $4.00

Build a Live Chat System for your website.

This 10 Chapter Tutorial is approximately 2 hour and 15 minutes in length. Recorded in High Definition format with a screen resolution of 1280 x 720. It is recorded with the learner in mind as Mike takes his time and explains step by step what he is doing as he designs and develops the system.

This tutorial covers many of the most important technologies used in web development. We start off with building the HTML5 structure for our Chat Application page and form, then move into CSS3 to style our page.

Once that is complete we build a MySQL database and add a table to the database, we then build the table rows and add sample data to test our form design.

Then we move into PHP and remotely connect to our database so that we can dynamically load data from the database. Once that is complete we write the PHP code needed to add new messages to the databse as the Chat system is implemented.

We then using AJAX objects, PHP and JavaScript setup our Chat Application to dynamically update as new messages are added across the system and using multiple chat windows confirm that that the application is functioning correctly.

We then wrap up the tutorial by writing a character counter, in PHP and JavaScript to count down the characters remaining in our message box.

We utilize the following technologies to develop and write this application.

Technologies used in this Tutorial

  • HTML5
  • CSS3
  • PHP
  • MySQL
  • JavaScript
  • AJAX Objects
  • jQuery

A complete Chapter Listing with a Preview Videos is listed below.

Length: 2:15:00

Level: Beginner

In the tutorial series we begin by demonstrating what we plan to build in the series, the steps we will follow and the core knowledge and tools that will be needed to complete the exercises. This tutorial is written at a beginner level.

Building a Live Chat System.

Chapter 1 - An Introduction

Subject Area: Length
In this section of the tutorial we introduce the application and the technologies that will be involved with the development of the Live Chat Application. 5:12

Chapter 2 - Building the Pages

Subject Area: Length
In Section 2 of the tutorial series we build the file structure that will be used throughout the tutorial series. We create our folders and initial pages that will hold our code as we develop our application. We also build the framework code for the chat.php page in our standard HTML5 page format. We also begin the framework for our Chat Form by adding our div structure for the form framework. 9:52

Chapter 3 - The Chat Page

Subject Area: Length
In Section 3 we will build the form that will hold our chat application. We add our span elements that will hold our dynamic data that is read from our database. We add our filler data to be used as we layout our form elements. We add our form elements to include our name field, our text area field and the submit button that will be used in our form. 6:16

Chapter 4 - Styling the Chat Page

Subject Area: Length
In Section 4 of the tutorial series be setup our main style sheet and add the link in our chat.php page to link to that stylesheet. We start out by doing a very basic CSS reset in our style sheet to set all our browsers at a standard point. Then we setup the styling of our chat form and style the chat window to make our application appear more as a chat system. We demonstrate the use of a container ID and how that is used to setup our form for centering. 29:22

Chapter 5 - Building the Database

Subject Area: Length
In this section we will build the database that will hold our names and message for our chat system. Using phpMyAdmin we build the chat databse and setup the database table to store the information from our chat application. We create the columns for our table and discuss the types of fields we will be using in the databse table. We setup our new database with some sample users to check our database access when we create that portion of our code. Using our text editor we build the PHP code (PDO Method) to connect to our database. We check the connection to make certain we have a good connection to the database. 12:39

Chapter 6 - Retrieving our Data

Subject Area: Length
In this section of the tutorial we will build the code that will retrieve the data from our MYSQL database. Using PHP we write the MySQLi statements inside our PHP code to extract the data from our chat database table. Once our data is extracted we populate our chat window with the data extracted from the database. 8:50

Chapter 7 - Inserting our Messages into the DB

Subject Area: Length
In this section we will be inserting data that has been entered by our users into our database. We will be sanitizing the data to make certain that the users have not tried to insert any malicious data into the database. We will be taking the data from the input fields and prepare that data for data insertion into our database. 15:20

Chapter 8 - Formatting the Time Display

Subject Area: Length
In this section we will build a function that will format the time display to better display how we would like that field to appear in our application. In this presentation we will be reformatting the time and date display to display just the time and AM or PM depending upon when the data was inserted into the database. 7:18

Chapter 9 - Building the Dynamic Update Code - Part 1

Subject Area: Length
In this section we will begin to setup our code that will allow our application to dynamically update the chat message screen. During the tutorial we will be using PHP, JavaScript, HTML and AJAX Objects to refresh our page automatically. Using the Http Request we and the properties of that request we go step by step through the process of updating our application. We bring in the chat message box dynamically to the chat.php page after making our code changes. We update the chat.php file to support the new refresh function that we have written. 14:16

Chapter 10 - Building the Dynamic Update Code - Part 2

Subject Area: Length
In this section of the tutorial the first thing that we do is test our application across multiple windows. Realizing that we are not seeing updates across multiple windows we write the code to correct that situation. Using the setInterval function we set a refresh property for the browser window. Once we correct that we write the code to count the characters remaining in our text area field. We set this code up to be contingent upon a variable value thus it is easy to adjust by the developer. 23:27

Make payments with PayPal - it's fast, free, and secure!

Accepts all payments

Accepts credit cards whether you have PayPal account or not. PayPal acts as the gateway to get your purchase completed quickly. It is fast, convenient and secure.

PayPal is trusted by over 173 million users around the world. This gives you peace of mind throughout the purchasing process knowing your payment will be made quickly and your information is secure.

Pay Securely with PayPal