Overview of Search Within a Site using ECMAScript and MySQL
Search Within a Site using ECMAScript and MySQL – Part 1
Web Development with ECMAScript and MySQL in Node.js
Foreword: In this part of the series, I give you an overview for Searching within a Site using ECMAScript and MySQL.
By: Chrysanthus Date Published: 18 Oct 2016
Here, I talk about what you should have studied in order to understand this series. This series is part of my Web Development Course with ECMAScript and MySQL. Below you have the links to all the series in the volume, in the order you should be reading them.
- The user is in his house or office with his browser connected to the Internet.
- There is a website with a database at a web server.
- The website is a social network site consisting mainly of articles in HTML format.
- When the user wants to search for a particular kind of articles, he would type at his browser, the search phrase in a form text field in any of the web pages of the site and then click the Search Button.
- The search phrase goes to the server, and after a while, the user would have a return web page indicating whether or not any articles where found.
- If articles where found, he would see a list of possible articles of his interest.
- When he clicks the title of an article found, the actual article would be downloaded from server and displayed at his browser.
- The web server has a home directory with sub directories of the home directory.
- In the home directory, you have the index HTML file and a few other HTML files.
- Each subdirectory to the home directory belongs to a writer of articles and the subdirectory has all the articles of that particular writer.
- The articles are HTML files.
- Each HTML file in the home page and each HTML file in a subdirectory has a form text field in which the user can type in a new search phrase to search for a particular kind of articles.
- The subdirectory name, the article HTML file name, the title of article, the first name of writer, the keywords and the foreword for each article, are kept in the database.
- The search process at the server, searches the database and not the HTML article files.
- When relevant data related to the articles are found, hyperlinks to the articles are formed with associated information and placed in a web page and sent to the user’s browser.
- The link the user can click to obtain the article has the title of the article as link text.
- The client script is ECMAScript, the server script is ECMAScript script and the database is MySQL. The application programming interface that connects the client to the database, is EMySQL (Pure ECMAScript MySQL) API.
At the client computer, there is a web page with an HTML Form having one text field and one button with the title, “Search This Site”. The form has a supporting ECMAScript. At the server, you have another ECMAScript. This server ECMAScript receives the search phrase, searches the database, prepares the feedback page and sends the feedback page to the user’s browser. So far as the search is concerned, the database has three tables, which are called, series, articles and writers.
The series table has the following columns (cells in a row): a column of subdirectory names, a column of article HTML file names, a column of titles for articles, a column of forewords for each article and a column of keywords for each article. In the column of keywords, each cell has a number of keywords for the corresponding article. The writers table has a column for the first name of writers. I talk about the articles table and the other two tables in more detail below.
The Search Form
The search form is on each article (HTML file) and on each of the HTML files of the home directory. The controls in the form are, the text field to type in the search phrase and the button to send the search phrase to the server. The code is:
<form action='http://localhost:8080/include/searchThisSite.js' method='post' style='display:inline; float:right'>
<span id='S1' style='display:none'><b>Please Wait . . . </b></span>
<input type='search' size='40' name='searchStr'>
<button type='submit' onclick="document.getElementById('S1').style.display = 'inline'">Search this Site</button>
There are actually three HTML elements in the form. You have the span element, the input text element and the button element. The span element has the content, “Please Wait . . .” This span element is displayed only when the user has clicked the button, which is the search button. Note that the value of the control type attribute for the text field is ‘search’ and not ‘text’. If you type this today, some browsers will give you a better looking search field, better than if you typed, “text”.
The ECMAScript is the button’s onclick event’s code. This very short script displays the span element, and the user sees, “Please Wait . . .” when the button is clicked. The form uses the HTTP POST method to send the search phrase to the server. At the server, the search phrase is received by the ECMAScript file, searchThisSite.js. There are two ECMAScripts: this short one at the client and another at the server. The one at the server is in the directory, c:/server/include. The server file is a node server ECMAScript file and it is in the directory, c:/server.
The actual database has many tables, but only three of them are used for the search. The three tables are called, series, articles and writers. The table notation for the series table is:
series(articleID, title1, keywords, forward, directoryName, htmlfilename, …)
The table notation for the articles table is:
articles(articleID, writerID, …)
The table notation for the writers table is:
writers(writerID, firstname, ...)
In this application, the articles table serves to link the series table to the writers table (with the ON clause of the SQL select query). The use of the writers table is to obtain the first name of the writer. So the query will know the articleID from the series table. From there it will use the articleID to know the writerID from the articles table. From there it will use the writerID to know (obtain) the first name of the writer in the writers table. The data we want are in the series and writers table.
The Server ECMAScript
There is an ECMAScript at the server. It receives the search phrase and removes the non-keywords with regular expression techniques. It places the keywords of the phrase in an array still using regular expression techniques. The script goes on to form the MySQL Select query in ECMAScript terms. Then it sends the query to the MySQL database.
The purpose of the query is to obtain a resultset for series.directoryName, series.htmlfilename, series.title1, series.forward, and writers.firstname. From the selected rows of these headings, the result list in HTML to be displayed to the user’s browser is produced still by the ECMAScript. After formation, this same ECMAScript sends the result HTML list to the browser.
The ECMAScript file uses the ECMAScript regular expression in its normal code, and also uses the MySQL regular expression in the MySQL Query statement, written as an ECMAScript string (ECMAScript terms).
ECMAScript uses its regular expression techniques to place the keywords in an ECMAScript array. In the query string formed by ECMAScript, MySQL’s regular expression is used (typed) to search all the cells of the keywords column of the series table. Each cell of the keywords column has a number of keywords for the corresponding article; these cell keywords are separated by commas. For each cell, the query checks if all the keywords of the search phrase are found in the cell. If all the keywords are not found, the row and corresponding article is not selected.
This means that the more keywords in the search phrase the less the number of articles (article rows) selected. The query uses a combination of MySQL regular expression technique and SQL logic to achieve this – see details in the next part of the series.
The server ECMAScript (file) has to remove the non-keywords from the search phrase. So, what are non-keywords. In this section I give you the English non-keywords that I know, in the categories that I know: you have the preposition category, the grammatical article category and a few others.
Prepositions that I know for now are: about, along, among, before, after, by, for, in, from, on, of, since, to until, till, up, with, between. Some of these prepositions convey more meaning than the others, but not as much meaning as the other grammatical words (nouns, adjectives, etc.).
The grammatical articles are: an, a, the.
Conjunctions that I know are: while, whereas, since, as, for, therefore, but, and, or.
Pronouns that I know for now are: I, you, he, she, we, they, me, him, her, us, them, my, your, his, her, our, their, mine, yours, hers, ours, theirs, it, its.
Words of Quantity
Words of quantity that I know for now are: some, few, many, much, little
And so, the ECMAScript at the server removes all the prepositions, articles, conjunctions, pronouns and words of quantity from the search phrase. These non-keywords should not be searched for, because in a written article, they are many and do not indicate to the user what the written article is about.
Wow! At this point I guess you are hungry to see the ECMAScript code. You already have the code for the form at the client web page. You next have to see the ECMAScript code and the database query. Rendezvous in the next part of the series.
Search Within a Site using ECMAScript and MySQL
More Related Links
Major in Website Design