Client Side Scripting. The Bookshop

Size: px

Start display at page:

Download "Client Side Scripting. The Bookshop"

Gary Bradford
6 years ago
Views:

1 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

2 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. Figure 2: JavaScript Alert Form Validation 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.

3 Figure 3: JavaScript Final 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.

4 Figure 4: Form Validation Register New Books Page 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.

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.

5 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. Figure 5: Register account username is 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.

6 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. Figure 6: PHP Account Delete 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 7: JavaScript Account Delete

7 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 Figure 8: JavaScript Delete Confirmed 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 9: New Books page books hidden 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.

8 Figure 9: New Books page books hidden 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.

9 Figure 10: New Books page book shown Moreover, same technique has been made for index.php page to make a good first impression of the website.

10 References TechTerms (2013) JavaScript [online] available from < [25 April 2013]

205CDE Developing the Modern Web. Assignment 2 Server Side Scripting. Scenario D: Bookshop

205CDE Developing the Modern Web Assignment 2 Server Side Scripting Scenario D: Bookshop Introduction This assignment was written using PHP programming language for interactions with the website and the