Windows for Web Live Text Chart Application with PHP and MySQL
Web Live Text Chart Application with PHP and MySQL - Part 2
Forward: In this part of the series, I talk about the browser windows for my Web Live Text Chart Application with PHP and MySQL pedagogic project.
By: Chrysanthus Date Published: 14 Nov 2012
Introduction
The client window has two HTML documents: the first one is a form in which he fills in his first name and email address. When this form is submitted, another HTML document appears in the same small window in which the client does the chart. At the other end, the operator has just the chart document in a window; this chart document behaves in a similar way to that of the client. The operator does not have the document for first name and email address; as being a worker in the company, his credentials are already in the database of the company.
Normal Window and Opening Link
The small window for the client is opened from a normal browser window. When the client clicks a link in the normal window, a small window opens while the normal window stays behind. Into the small window, the client (user) types his username and email address and clicks Submit. The normal window has a hyperlink and ECMAScript (JavaScript) code, such as:
<a href="" onclick="window.open('form.htm', '_blank', 'width=500,height=500,scrollbars=yes');">Live Chart</a>
This is a hyperlink with some ECMScript code. The href value is empty. The document to be opened is the one whose name is in the onclick event. In the script code, this is, 'form.htm', an HTML file in the same directory (folder) as the normal file (page) that has the hyperlink. When the hyperlink is clicked, the onclick event opens the small window with the dimensions given in the code. So the href value can be empty. Note that because of “scrollbars=yes” the small window would have scrollbars if the conversation becomes long.
So, when you click the hyperlink above, the small window for the client opens, displaying the form for the first name and email address.
The Form document code is:
<!DOCTYPE HTML>
<html>
<head>
<title>Live Chart of Company</title>
</head>
<body style="background-color:bisque">
<h3>Company Live Chart Start Up</h3>
<p>
Enter name and email to start chart.
</p>
<form method="get" action="newClient.php" onsubmit="return storeFn()">
<p>
<label>*First Name: <input type="text" name="firstname" required id="firstname"></label>
</p>
<p>
<label>*Email: <input type="email" name="email" required></label>
</p>
<p>
<button type="submit">Submit</button>
</p>
<script type="text/ECMAScript">
function storeFn()
{
sessionStorage.firstname = document.getElementById('firstname').value;
return true;
}
</script>
</form>
</body>
<html>
The first name field and email field are there. The PHP file to receive the data is "newClient.php". It is in the same directory (folder) as the form file, "form.htm". Everything being equal, the PHP file will return the second client document after temporarily recording the name and email of the client in the database. The second client HTML document comes to replace the form document in the same small window.
The second client document has an Ajax function that is called every 10 seconds. This function reads every new message of the operator that has been sent by the operator to the database.
Send Button of Second Client Document
When the Send (Submit) button of the second client document is clicked, another Ajax function sends the data, of what has just been typed, by the client. No form is actually submitted here. A submitted form normally results in a new feedback HTML document. That is not what you want here. When you submit the information just typed, you want it to be displayed on the current document, and a copy sent to the server (database).
So, there are two Ajax scripts for receiving and sending messages: one that is executed regularly to obtain a message from the database, of what the other participant has typed and the other to send the user’s message to the database. The document is not replaced by any feedback document; it is only updated from time to time.
The operator HTML document is similar to the client HTML document – details later.
I have given you the basics of the two HTML documents at the client. I have actually given you all the code for the Form (first) document. In the next part of the series, I talk about the database that holds the messages from both participants.
We take a break here and continue in the next part.
Chrys