Broad Network


Web Pages for Simple Web Development Project with ECMAScript and MySQL

Web Development Basics with ECMAScript and MySQL – Part 6

Web Development with ECMAScript and MySQL in Node.js

Foreword: In this part of the series, I talk about the main HTML pages for the simple web development project, described in the previous parts of the series.

By: Chrysanthus Date Published: 16 Jul 2016

Introduction

This is part 6 of my series, Web Development Basics with ECMAScript and MySQL. In this part of the series, I talk about the main HTML pages for the simple web development project, described in the previous parts of the series. I assume you have read the previous parts of the series, before reaching here; this is a continuation.

A typical web page for web development has HTML elements (with text) and one or a few empty portions where data from the database would be displayed. It is good to design the web page in such a way that if there is no data from the database, the empty portions in the HTML page would collapse; in this way, the presentation of the page would still be acceptable.

For the project in this series, I will talk about the index (home) page, the books page, the pens page and the login/registration page.

In the project, the home (index) page has summarized text of what the site is doing. In practice it should also have some of the products being sold; however, for our simple pedagogic project, that will be omitted. The books page will have 4 books displayed. The images, titles and short summaries for the 4 books will be hard coded. This will make the page more search engine friendly. In your commercial project you will have to write a ECMAScript code to be changing these hard code automatically (that is not covered in this simple project). When the user clicks the More hyperlink, the new books data will come from the database. The pens page is similar, but it is for pens. The login/registration page has two HTML Forms: one at the top and one below. The one at the top is for logging in by already registered members. The one at the bottom is for new members to register. Let us allow things that simple for this pedagogic project. Of course every site including web development sites have a contact page. The contact page for a web development site is a normal contact page that will send emails to important workers of the site. I assume you already know how to do that; so I will not address that in this series.

The Home Page
The home page typically has the name, index.htm. So it can also be called the index page. This is the code of the home page:

<!DOCTYPE HTML>
<html>
<head>
<title>University Bookshop</title>
    <style type="text/css">
        img {width:200px;height:200px}
    </style>
</head>
<body>
<header>
<h1>University Bookshop</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm' id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>
A summary of all what the site is doing goes here . . .
</article>
</body>
</html>

The Books Page
This is the books page:

<!DOCTYPE HTML>
<html>
<head>
    <title>Books in University Bookshop</title>
    <style type="text/css">
        img {width:200px;height:200px}
    </style>
</head>
<body>
<header>
<h1>University Bookshop</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm' id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>
    <table>
        <tbody>
            <tr><td><img src='itemsDir/BookA.jpg'><br>Book A Title Price: $9.99<br>This book written by ... published by ... year... explains ...</td><td><img src='itemsDir/BookB.jpg'><br>Book B Title Price: $9.99<br>This book written by ... published by ... year... explains ...</td></tr>
            <tr><td><img src='itemsDir/BookC.jpg'><br>Book C Title Price: $9.99<br>This book written by ... published by ... year... explains ...</td><td><img src='itemsDir/BookD.jpg'><br>Book D Title Price: $9.99<br>This book written by ... published by ... year... explains ...</td></tr>
        </tbody>
    </table>
</article>
</body>
</html>

To test this page you have to create a directory called, itemsDir, in your home directory of your personal web server. Look for any jpg image of 400px X 400px, give it the name BookA.jpg and place it in the itemsDir directory. Do the same for images, BookB.jpg, BookC.jpg and BookD.jpg for the code.

The Pens Page
The pens page is created in a similar way to the books page. This is it:

<!DOCTYPE HTML>
<html>
<head>
    <title>Pens in University Bookshop</title>
    <style type="text/css">
        img {width:200px;height:200px}
    </style>
</head>
<body>
<header>
<h1>Pens in University Bookshop</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm' id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>
    <table>
        <tbody>
            <tr><td><img src='itemsDir/BluePen.jpg'><br>Blue Pen Name Price: $1.50<br>Short pen summary...</td><td><img src='itemsDir/RedPen.jpg'><br>Red Pen Name Price: $1.50<br>Short pen summary...</td></tr>
            <tr><td><img src='itemsDir/BlackPen.jpg'><br>Black Pen Name Price: $1.50<br>Short pen summary...</td><td><img src='itemsDir/GreenPen.jpg'><br>Green Pen Name Price: $1.50<br>Short pen summary...</td></tr>
        </tbody>
    </table>
</article>
</body>
</html>

The pen images are kept in the same directory as the book images.

The Login/Registration Page
This page has two forms: one at the top and one below. The one at the top is for login and it has just a user name field and a password field. The one below is for registration of a new student. It has the user name field for the student to type in the user name of his choice. It has the password field for the user to type the password of his choice. It also has fields for the user’s email address, his geographical address, his city, state and country. For simplicity, there will be no validation of the fields. For simplicity again, the fields will not be displayed in regular fashion. However, in practice, you should have validation for the fields (at client and server), and good presentation. The code for the page is:

<!DOCTYPE HTML>
<html>
<head>
    <title>Login-Registration for University Bookshop</title>
    <style type="text/css">
        img {width:200px;height:200px}
    </style>
</head>
<body>
<header>
<h1>Login or Register at University Bookshop Site</h1>
<a href='index.htm'>Home</a> <a href='books.htm'>Books</a> <a href='pens.htm'>Pens</a> <a href='login-registration.htm' id="login">Login</a> <a href='login-registration.htm#register'>Register</a>
</header>
<article>
    <h3>Login</h3>
    <form method='POST' action='login.js'>
        User: <input type='text' name='username'><br>
        Password: <input type='password' name='password'><br>
        <button type='submit'>Send</button>
    </form>
    <form method='POST' action='register.js'>
        <h3>Register</h3>
        First Name: <input type='text' name='firstname'><br>
        Middle Name: <input type='text' name='middlename'><br>
        Last Name: <input type='text' name='lastname'><br>
        Email: <input type='email' name='email'><br>
        <label>Telephone: <input type="tel" name="tel"></label><br>
        <label>University: <input type="university" name="university"></label><br>
        Address: <input type='text' name='address'><br>
        City: <input type='text' name='city'><br>
        State: <input type='text' name='state'><br>
        Country: <input type='text' name='country'><br>
        User: <input type='text' name='username'><br>
        Password: <input type='password' name='password'><br>
        <button type='submit'>Send</button>
    </form>
</article>
</body>
</html>

When the Login Submit button is clicked, it calls the login.js script in the home directory at the server. When the Register Submit button is clicked, it calls a different ECMAScript script, register.js, still in the home directory of the server. In fact, in this project, all the HTML files and ECMAScript scripts are in the home directory. The name of the index HTML file is index.htm; that of the book HTML file is books.htm; that of the pens HTML file is pens.htm; and that of the login/registration file is log_reg.htm .

Remember: you will have all the HTML and ECMAScript files in a zip folder, to download, at the end of this series.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Related Links

Web Development Basics with ECMAScript and MySQL
ECMAScript Validation of HTML Form Data
Web Live Text Chart Application using ECMAScript and MySQL
More Related Links
Node Mailsend
EMySQL API
Node.js Web Development Course
Major in Website Design
Low Level Programming - Writing ECMAScript Module
ECMAScript Course

BACK NEXT

Comments

Become the Writer's Follower
Send the Writer a Message