Broad Network


A Simple Web Development Project Description for ECMAScript and MySQL

Web Development Basics with ECMAScript and MySQL Ė Part 4

Web Development with ECMAScript and MySQL in Node.js

Foreword: In this part of the series, I give a simple project description for a conventional web development project.

By: Chrysanthus Date Published: 16 Jul 2016

Introduction

This is part 4 of my series, Web Development Basics with ECMAScript and MySQL. In this part of the series, I give a simple project description for a conventional web development project. I assume you have read the previous parts of the series, before reaching here; this is a continuation.

Project Description from the Userís Point of View
The project concerns a university library. We consider a hypothetical university library that sells only 8 types of books and 8 types of pens, only to students of the university. In order to buy a book or a pen, the student must be a registered member of the library, and the student registers thought the web site of the library, which is what we shall build as part of the web development project. Of course the books and pens are sold at prices lower than what you will get in public bookshops.

In order to buy a book or a pen, the registered student logs into the site. After logging in, the student can buy one or more books and/or one or more pens using his email address. This email address is the one he has with the company PayPal or Moneybookers, that actually does the payment. In practice, withdrawing money from someoneís Paypal or Moneybookers account is more involving than what is in this series. This series is for pedagogic purpose and I will not go into the real details of withdrawing money from such accounts.

Paypal or Moneybookers is a kind of intermediary bank. A student can have an account (some money) with the intermediary bank. A student (adult) registers with such an intermediary bank with his email address. If the student wants to buy something from a shop that has an account with the intermediary bank, the main thing he has to use is his email address, and money will be transferred from the studentís account to the account of the shop. Paypal is American based; Moneybookers is European based. Moneybookers is newer and at the moment, not as popular as PayPal.
Registered and non-registered members can see all the items in the bookshop at the website. However, in order to buy an item, the student must be registered.

There are 5 HTML pages for the site: the home (welcome) page, the books page, the pens page, the registration (and login) page and the contact page. The books page displays 4 books; if the client (internet user) wants to see more, he clicks a button. The pens page also displays 4 pens; if the client wants to see more pens, he clicks a button.

When a client (student) clicks an item (book or pen) on the web page, a window opens. The window that opens has an enlarged image of the item, detailed description of the item and an input text control for him to type in the number of items he wants.

The site will have a shopping cart displayed in the books and pens pages. The shopping cart displays the items the client has selected for purchase. It displays the unit price and total price for each item selected. It also displays the grand total price for all items selected.

Note: The word, item, in this project, refers to a book or a pen.

Also note: The web pages in this series have been made very simple, for pedagogic reasons. Your commercial project will be more elaborated with more details and precisions.

Technical Requirements
You will carry out the project using a personal web server, a MySQL 5 server and your personal computer, which will be referred to as, localhost.

For simplicity, each HTML page will have a Header and Content (header and article) layout. The links to the different pages will be in the header in one horizontal line. There will be an aside element on the right of the content area of the books and pens pages. This aside element will have the shopping cart and a button to place an order.

The home (index) page will have just general information about the site. In practice, it should have a few products (items) the bookshop is selling. The books page will display 4 books in small sizes. It will have a hyperlink titled, More, so that when the client clicks it he will see more books. The pens page will be arranged in a similar way.

The database will have a products table. The products table will have a category column. The possible values for this column are Book and Pen; just 2 categories. The first 4 items in the books or pens HTML page are the corresponding first 4 items in the concerned category in the products table. However, the first 4 items will be hard coded in the HTML page, so that search engines can know some of what you are selling. This is because, in principle, search engines read only HTML elements and do not read scripts or databases.

I will not explain or give you the code for the contact HTML page. I will also not give you the ECMAScript script corresponding to the contact page. These two are simple to code, if you have covered the pre-knowledge mention in the first part of this series, and if you have read the previous parts of this series.

You need one ECMAScript script at the server to handle purchase (when the client places an order for items). You need one ECMAScript script for the HTML contact page, which I have said I will not talk about in this series. You need one ECMAScript script to handle more items from either the HTML books page or the HTML pens page. You need one ECMAScript script to handle login. You need one ECMAScript script to handle registration. Note, the login and registration Forms are in the same HTML page in this series. So, apart from the Contact page ECMAScript script, I will give you the rest of the scripts.

Connection to server will be non-persistent. So connection will only exist while an ECMAScript script runs from start to end.

Each page will have a login hyperlink. After the user has logged in, Client ECMAScript (JavaScript) will turn it into logout hyperlink.

When the client clicks an item, it is Client ECMAScript that will open the new window (for item details) at the browser. When the client closes the opened window it is still Client ECMAScript that will send any necessary information from the window to the shopping cart at the browser. So, the opening of the window and transmission of information between the window and the shopping cart, is done at the clientís browser without the involvement of the server; that is a bit of Active Client Technology.

Well, above are the simple web development project requirements from the userís point of view and from the technical point of view.

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