Windows for Web Live Text Chart Application using Perl and MySQL
Web Live Text Chart Application using Perl and MySQL - Part 2
Web Development with Perl and MySQL
Foreword: In this part of the series, I talk about the browser windows for my Web Live Text Chart Application using Perl and MySQL pedagogic project.
By: Chrysanthus Date Published: 9 Sep 2016
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 HTML document for first name and email address; as a worker in the company, his credentials are already in the database of the company.
Normal Window and Opening Link
<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:
<title>Live Chart of Company</title>
<h3>Company Live Chart Start Up</h3>
Enter name and email to start chart.
<form method="get" action="newClient.pl" onsubmit="return storeFn()">
<label>*First Name: <input type="text" name="firstname" required id="firstname"></label>
<label>*Email: <input type="email" name="email" required></label>
sessionStorage.firstname = document.getElementById('firstname').value;
The first name field and email field are there. The Perl file to receive the data is "newClient.pl". It is in the same directory as the form file, "form.htm". Everything being equal, the Perl 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 Document
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.
Related LinksWeb Development Basics with Perl and MySQL
Perl Validation of HTML Form Data
Page Views with Ajax and Perl and MySQL
Web Live Text Chart Application using Perl and MySQL
Search Within a Site using Perl and MySQL
More Related Links
PurePerl MySQL API
Perl Course - Professional and Advanced
Major in Website Design
Web Development Course
Producing a Pure Perl Library