Overview of Web Live Text Chart Application using Perl and MySQL
Web Live Text Chart Application using Perl and MySQL - Part 1
Web Development with Perl and MySQL
Foreword: In this part of the series, I give you an overview of a project to design a Web Live Text Chart Application with Perl and MySQL.
By: Chrysanthus Date Published: 9 Sep 2016
Introduction
Live text chart takes place in a small browser window (so far as the client is concerned). The web client user writes; the operator working for the company replies by writing also. 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.
Pre-knowledge
This series is part of my volume, Web Development with Perl and MySQL. At the bottom of this page you have all the series for the volume. You should be reading the series in the volume in the order given. In part 2 of the first series, you are told how to download the PurePerl MySQL API, free. That is the API you will use in this series and it is very easy to use.
In a series, you should read the parts in the order given.
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.
Technical Requirements
- The document of the client’s small window is an HTML document. That of the operator is also 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’s window, Ajax is responsible for sending and receiving data.
- At the server, Perl scripts do the interface between the MySQL database and the client (computer).
- For simplicity, assume that the Perl scripts and the database are in the same computer server (localhost).
- 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 - Localhost, Perl 5.18 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
Related Links
Web Development Basics with Perl and MySQLPerl 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
Perl Mailsend
PurePerl MySQL API
Perl Course - Professional and Advanced
Major in Website Design
Web Development Course
Producing a Pure Perl Library
MySQL Course
NEXT