Overview of Web Live Text Chart Application with PHP and MySQL
Web Live Text Chart Application with PHP and MySQL - Part 1
Forward: In this part of the series, I give you an overview of a project to design a Web Live Text Chart Application with PHP and MySQL.
By: Chrysanthus Date Published: 14 Nov 2012
Introduction
Live text chart takes place in a small browser window (so far as the client is concerned). The web user writes, the operator working for the company replies by writing. The user writes again, the operator replies; he writes, the operator replies, and so on until both of them decide to stop the text conversation. In the project of this series, the client (web user) initiates conversation and the operator begins conversation; you will see the meaning of this letter.
Prerequisite
You need basic knowledge in web development with PHP and MySQL in order to understand this series. If you do not have that knowledge, then click the link below.
Client Requirements
Here, I say what the user expects from a live web chart application. The user is browsing (surfing) the web:
- When the user clicks a link on a normal web page to have live chart with an operator working for the company, a small browser window will appear.
- In the small browser window the user will be asked to fill in his firstname and email address. After that he clicks the Submit button.
- The web document of the small window will be replaced by another document in which the live text chart will take place.
- When both parties decide to stop the text conversation, the operator clicks an End Conversation Button at his own browser window.
As you should already know, the company that owns the website is not necessarily the company that hosts the website. The operator works for the company that owns the website. So the operator and the server that hosts the website may even be in different countries.
- The operator does not have any form (pre-window) where he fills in his name and email address. The operator works for the company and his name and email address are in the database of the company already.
- The operator has just one web document in one window and he has the duty to make sure that it is always displayed. In this pedagogic project, the operator name is Peter and is hard coded in his web document.
- When a client (user) has filled in the form window with his name and email at the client end and submitted the data, an ECMAScript alert box will appear at the operator's window signaling him with the alert sound that a client (user) wants to chart. It is the operator who begins the chart.
- The operator charts in a similar way that the user charts.
- When the conversation has ended, the operator clicks an End Conversation Button.
- At this End click, all the conversation text in the operator’s web document (window) is erased.
General Requirements
I am making things simple.
- There is only one operator.
- The operator charts with one client at a time.
- While any participant (client or operator) is typing, the other participant has to know in order to be sure that the person at the other end has not abandoned the text conversation.
- The document of the client’s small window is an HTML document.
- Both conversation windows use Ajax.
- Both conversation windows use the timer interval function for sending and receiving Ajax data to and from the server.
- In either the user or operator window, Ajax is responsible for sending and receiving data.
- At the server, PHP scripts do the interface between the MySQL database and the client (computer).
- For simplicity, assume that the PHP scripts and the database are in the same computer server.
- The conversation is stored temporarily in a table called, discussion in the database. There is another table that monitors the conversation in the discussion table. So there are two tables. In this project, these tables are deleted at the end of the conversation.
The Chart Progression
Try (open in browser) the following HTML document to see how the charting looks like:
<!DOCTYPE HTML>
<html>
<head>
<title>Live Chart of Company</title>
</head>
<body style="background-color:bisque">
<h3>Company Live Chart</h3>
An operator will contact you shortly.
<dl>
<dt style="color:crimson"><strong>Operator</strong></dt>
<dd style='color:brown'>operator text, operator text, operator text</dd>
<dt style="color:darkslateblue"><strong>Firstname</strong></dt>
<dd>your text, your text, your text</dd>
<dt style="color:crimson"><strong>Operator</strong></dt>
<dd style='color:brown'>operator text, operator text, operator text</dd>
<dt style="color:darkslateblue"><strong>Firstname</strong></dt>
<dd>your text, your text, your text</dd>
</dl>
<span style="color:blue"> Agent is typing. . .</span><br>
<textarea cols='45' rows='5'>
</textarea>
<br>
<button type="submit" style="float:right">Send</button>
</body>
<html>
There is more to this code, as you will see later.
I use Apache HTTP Server 2.2.10 Localhost, PHP 5.2.8 and MySQL 5.5 in my Windows Personal Computer. For you to execute the application, you need similar software. Of course you need a browser and a good computer.
I have just given you an overview for what is needed to produce a Web Live Text Chart Application. Let us take a break here and continue in the next part of the series.
Chrys