Technical Help /php /chat

A web Chat Application

Creating a web Chat Application we will need to do a few things:

1. Figure out our Data - and Make a Database with a Table and the Fields we need - MySQL
2. Figure out our Work flow
3. Create an HTML interface (HTML, CSS and JavaScript
4. Change the HTML interface into PHP and pull data from database and from "local" paramaters
5. Create a php file to deal with the program logic - inserting data

Starting with HTML Design

There is a concept in web development which I subscribe to called design first development. This is a dangerous thing to do if you don't know much about application development. It sometimes gets similar criticism that Bruce Lee's martial art does. In design first you make your html document and then change it to be an application.

I went ahead and made a base chat html document view_messages.html|http://danm.ucsc.edu/~lyle/classes/php/chat/view_messages.html].

About view_messages.html

A few things to note about our html document (do a view source of that document):

• There is a div that holds the chat_log and that div has an id attribute called chat_log

Looks like: <div id="chat_log">.......</div>

And inside that chat_log I have a bunch of messages each inside a div. And each message has a person's name.

• There is a form which will post to a php file, in this doucment that file is called 'messages.php', which does not exist. We will fix this later.

• The form has two inputs:

  1. message - the message they want to send to the chat
  2. created_by - the person's name
• The bottom of the html there is some JavaScript which scrolls the chat_log to the bottom and puts the cursor inside the message field, ready for input.

Database - MySQL

• A Database Server - holds lots of databases and users
• A Database - holds lots of tables (kinda like a multi-worksheet excel document)
• A Table - holds rows (kinda like a Sheet in an excel document)
• A Row - one entry in a table, it has lots of fields
• A Field - holds one piece of information (kinda like a column in excel)

MySQL

MySQL is an open source database that is very common with web development. A bit about what a database is.

phpMyAdmin

To manage MySQL you will usually use phpMyAdmin which is a php web application that allows you to manage a MySQL server.

• Create a User
• Create a Database

Our Table

We need a table to hold our chat messages. We will call the table "messages" and the table will have these fields:

• id, this will be unique for every entry and it will auto increment for us.
• created_at, this will be a time stamp and we will have the database auto assign a now() value.
• created_by, for our example this will be the user's name.
• message, this will be the actual content of the message

Before Starting to code, workflow

You need to figure out how this application will work from a logic perspective. We are going to have two basic work-flows that will interact with each-other.

• view_messages - which will show the current chat_log and allow someone to enter a message. We will make this part of the workflow using the view_messages.html as a base and actually make a view_messages.php which will start as a copy of view_messages.html.
• add_message - this will check stuff and insert new messages into the database

View Messages

The view_messages workflow is fairly straight forward and doesn't need a large diagram. It is fairly linear.

1. Start / Browser asks for page
2. Get all the messages from the database ordered by their creation date.

3. Render the HTML

   Include the chat messages, notifications to the user, and insert their name/created_by if you know it.

Add Message

The add_messages workflow has some more complications. Here is a work flow diagram:

Part II: Let's code