Client Side Scripting The Bookshop Side Scripting The Bookshop Introduction ... can leave field...

205CDE Developing the Modern Web: Assignment 3

Arunas Bedzinskas, ID: 3790007, BsC Computing Student

Client Side Scripting

The Bookshop

Introduction

This assignment is a part of three assignments related to the bookshop website. Currently design part

(using HTML and CSS) and server side script (using PHP and mySQL) are done. Third part was to do client

side scripting using JavaScript and additional JavaScript libraries. JavaScript like Java, this is a

programming language designed by Sun Microsystems, in conjunction with Netscape that can be

integrated into standard HTML pages. While JavaScript is based on the Java syntax, it is a scripting

language, and therefore cannot be used to create stand-alone programs. Instead, it is used mainly to

create dynamic, interactive Web pages (TechTerms, 2013).

Form Validation

First and the main thing of JavaScript were to do a normal form validation since PHP form validation

looked not as good as I wanted to. Even though it was still the best you can get from PHP as far as I

thought or managed to do.

Figure 1: PHP Form Validation - Account Registration



Even though, this design was very inconvenient since the error messages does not show up near the

actual errors and show up all at once on the top. I first I decided to do a simple error pop up messages in

the separate windows.

That would be useful, because that would instantly attract users attention, he / she would definitely see

the text where they made the mistake. So I implemented that by using JavaScript DOM by searching if

user has left an empty space in the form. If user left out something – a pop up window appears using the

alert function to show the user where the mistake is made. However, it had a disadvantage as well. Even

though it did show where the first mistake was, it did not show other mistakes as well. So if user made

mistakes in more than one field, he had to rewrite all the information all over again to find another

mistake and do it again and so on. That is very inconvenient and frustrating. I did some research and

found out that implementing JQuery library to JavaScript is very good idea for form validation. Using

selectors, effects and CSS were very useful to make form validation look much better and convenient.

Figure 2: JavaScript Alert Form Validation



This form has an extra JavaScript file added to validate a form. It has many global variables to maintain

the data from the form. JavaScript code is reached through on submit selector in HTML which directs to

particular entered file if the form is submitted. JavaScript file has many global variables to store all the

data from the form. They use val method from JQuery to retrieve the values from the variables. Blur and

key up functions are used to check if user has left particular form window or is in it. File also has many

functions to check if the conditions of the form are met. In the picture first line of the form you can see

that user left a first name field empty which is required. An explanation of the field that is in pink color

changes to red to attract attention from the user and also the text changes to This Field is required to let

user know what is wrong. More is done with the password fields. Since password is required for the

form to be completed, the field is required text will appear as well if user will leave it blank. However,

both password fields have to match for security purposes. So, if user types different passwords in fields

the explanation texts of both fields change to the passwords must match text as you can see in the

picture above. More different cases of form validation are explained in the register new books page

displayed below.

Figure 3: JavaScript Final Form Validation



Now we can see a dropdown menu in the first and fourth lines of the form. Since the drop down menus

cannot be left blank, I assigned a zero value with a text to let user know that they have to choose an

author or a genre in the menu. If user does not change it to the actual author – genre the error message

will appear saying you must choose Author / Genre. Image field is a file upload. User is able to upload an

image of the book into the server. However, only jpg or jpeg file formats are allowed. If user tries to

upload other file format as you can see in picture above, an error message appears. Even though, user

can leave field blank and a default image will be taken from the server as an image for book. As price

and ISBN fields should contain only numeric values they all have a validation installed that detects a non

numeric value. If that happens, an error message will appear as you can see in the ISBN-10 field in the

picture above. If the numeric value is entered – everything stays as it was (ISBN-13 field) and if field is

left empty in the price field – it also displays that it is required field.

Figure 4: Form Validation – Register New

Books Page



Alert Messages

I decided to include alert messages into some of the forms. The reason I made this decision is just to

inform user about the changes in the browser. These are all around the website for example it appears

after a successful login or successful contact form. It also appears if user wants to register a username

that is already taken.

Account Delete

I have registered many accounts in many different websites because they are usually needed to access

advanced features of website. Now I noticed that many of the websites do not have the ability to

completely delete an account from the database. My personal opinion is that user must have an ability

to change his / her mind about the website and completely delete data about them from the website.

Figure 5: Register account – username is taken



That is why in the user account section there is a delete account link. The PHP programmed deletion of

information had two buttons and a text asking user is he sure about the deletion of the account.

It is a convenient request to confirm an account delete. However, it does not look good. So I decided to

improve it using simple confirm box in JavaScript.

Figure 6: PHP Account Delete

Figure 7: JavaScript Account Delete



User can choose either OK or CANCEL in the confirm box which is quite clear what will happen. After

pressing okay alert message appears.

Moreover, not only user account will be deleted but also all books that the user uploaded, so all track

that user was involved in the website is gone (that is also displayed in confirm message in figure seven).

Book Display

After looking in book display pages I sensed that it is a little boring. I thought that something should be

improved to make website look more professional. That is why I decided to add some slide functions

from JQuery library of JavaScript to the website. They simply use slide toggle functions and this variable

to make different books slide out and in separately from others.

Figure 8: JavaScript Delete Confirmed



As soon as user moves a mouse over an author and a title of a book slider activates and slides down to

show some information about the book. If a user still desires to review even more information about the

book he / she just have to press an underlined text to be directed to a product page which views a

desired book.

Figure 9: New Books page – books hidden



Moreover, same technique has been made for index.php page to make a good first impression of the

website.

Figure 10: New Books page – book shown



References

TechTerms (2013) JavaScript [online] available from <http://www.techterms.com/definition/javascript>

[25 April 2013]

http://www.techterms.com/definition/javascript

Client Side Scripting The Bookshop Side Scripting The Bookshop Introduction ... can leave field...

Documents

Transcript of Client Side Scripting The Bookshop Side Scripting The Bookshop Introduction ... can leave field...