HC2051: Mobile Web Applications Development - Report Writing Assessment Answers

Introduction/Overview:

The web technology has resolved many unsolved problems. The traditional information technology is very simple and its application is limited into the organization. But, the web technology has become a platform that can support various activities of the organization and even a new medium of human communication. (Turoff and Hiltz, 1998, p. 116).

Due to increasing demand of various industries (product based or service oriented), the web technology has offered the various facilities like higher flexibility, better availability, shorter lead-times as well as quality products or services. When the technology is rapidly changing, the new groups of people are interested to distribute their products or services throughout the world (Burdman, 1999). First the web application is started with the help of small set of web pages for the purpose of advertising and news publishing. Later, with the help of different models, tools, techniques and concepts, the web application is developing as a large-scale basis. The purpose of the most web application is “perfect communication and information transmission” ( Turoff and Hiltz, 1998) that tends to increase e-business by the organization. Now a day, most of the organizations build their web presence for e-commerce, document handling and community service easily. The most important components of a web application are the flexible web browsers and web server. The web browsers are used to retrieve data from web server with the help of interactive web pages. The web pages typically run the client script as well as store and transmit sensitive data like credit card information, personal details etc. The application areas of web are very vast like advertising, webmail, login screen, content management system, dynamic shopping cart, new user registration, customer support form, product request form etc. The web pages typically designed by HTML and CSS that information are generated dynamically. The visitors naturally access the web pages through their preferred web browser as well as send and retrieve data to or from database through the web application. JavaScript is mainly used for client-side checking before submitting information to the server. The web-application model is naturally three layered approach. The first layer is the web browser or user interface, second layer is the dynamic content management technology tool (such as, JSP, ASP, PHP etc) and the third layer is the database server that contains the user’s and organization’s data.

The main advantage of using web application is to minimize the cost. Because, web application can run anywhere and anytime without any extra hardware or software cost.

The intended system is to develop a dynamic shopping cart application. The shopping cart is a graphical representation of a vendor’s website where the products are shown digitally. Customer can choose any product from the list of products and can add to cart. After adding the products, the cart displays all chosen items with total price. The customer can change their chosen items before clicking but button. Naturally, the ordered products are stored into the database server. The administrator can send the ordered products to their shipping address after confirmation of payment by the customers. The intended system is designed as a client based system where local storage is applied in HTML page. No database is used in this respect. Here, the overhead of web server and database server is reduced but in case of large customer base, this system will be problematic.

Body of the Discussion:

Design:

The main requirements for the project is the choose products through a web application, dynamic shopping cart. The requirements can be converted into the following designs,-

• User must register into the site, so a dynamic registration form is designed with HTML and CSS. After filling the required data into the registration form, the user must click on SUBMIT button. But, it is a client side application so the data will be stored into the HTML local storage.
• Then, user must Sign In by their inputted user name and password in the Sign In form. If their user name and password matches with their registered user name and password (retrieved from local storage) then Shopping page is opened.
• In the intended system, without registration and Sign In, Shopping is not possible.
• The Shopping page is a dynamic that is designed by HTML , CSS and Java Script. User can choose any product and click on Add to Cart button, then the product details with price is shown in user’s shopping cart. When, user selects another product it will be added with the shopping cart and shows the list. It is a demonstration of a simple shopping cart.
• After choosing items, user can Sign Out from the application. But, this application is not used to design the payment system.
• The Index page will show other menus like About us, Contact Us and Help menu.
• The index.html, registration.html and shop.html pages are designed with sufficient styles, dynamic features and user interfacing.

The flow of the design pages are shown as above. So, the required pages are index.html, registration.html and shop.html. The external CSS files are taken as, a.css, reset.css and style.css and all required images are on two folders, image and images.

The user acceptance criteria for the design can be as follows,-

• The digital images and user interface design for index.html page of the e-commerce site has a professional look. The about us, contact us and help menu are available in the index page. The designs for every page are clean and spacious that must have comfortable feeling to the customers and motivate them to visit the site.
• Secondly, customer can select their products in the shop.html page and after clicking Add to Cart, view them with total price. So, customer must have an option to further choose another product.
• This simplicity, flexibility design must attract the customers.

The following Java script functions are used for dynamic page designing,-

• In the Index.html page, the Java script function is used to display the current day, date, year like Friday, June 03, 2016.
• The validate () function is used to check the fields UserId and password are blank or not? If they are blank then alert message is displayed by the JavaScript to enter the fields.
• This function also matches the inputted UserId and password with registered userId and password (by retrieving from HTML local storage). If two values are same then a link is obtained to open the shop.html page. But, if the values are not matched then a message “wrong UserId and Password” is displayed.
• In the registration.html page, a JavaScript function, store() is used for storing the inputted userId and password by the user into the HTML local storage.
• In the shop.html page, the AddtoCart() function is used to store name, description and price into a JavaScript object. The parameters are passed from HTML page as per users’ choice. Then, displayShoppingCart () function is called to show the selected items with total price.

Implementation:

User Interface Design: Before implementing the actual project design, user interface designing is the best choice for interacting with user. Here, the user interface design screens are Registration page, Sign In page and shopping cart. The Functional Decomposition diagram for the intended system is as follows,-

Implementation techniques: The e-commerce site is designed as client-based application where there is no use of database as well as web server. The HTML local storage is used as database and JavaScript is used for shopping cart creation and display. The client side programming is achieved by creating scripts with the HTML web page commands that is interpreted by the browser. The used JavaScript is implemented for validation checking of user’s input before processing. The JavaScript is also used to implement different features like animations, displaying today’s date etc. The JavaScript’s store () function is used to store UserId and password into HTML local storage. The validate() function also retrieves data from local storage and matches these with inputted value. These JavaScript functions are depending on browser. The Mozilla Firefox browser only supports store () function.

The system’s implementation is to create various functions and operations as per the requirements like user interface layout, business rules, process diagrams etc. The output of the system is to select items in the shopping cart and shows them with total price in the cart but the user must be an authorized/ registered.

The requirements are implemented by the following functionalities,-

• Index.html page shows different designing and styles (used two external style sheets like reset.css and style.css). The reset.css page implements the different styles, colors of body, table, headings, text area, subscript and superscript of HTML page (index.html). The style.css page implements the different designs and styles of header, footer, link, heading, image, logo, blog of index.html page. The different menu designing style is implemented with the use of style.css file.
• A form, Sign In is designed for accepting User Id and Password from the user. These fields are checked by the validation function validate() using JavaScript. Validate() function also checks the inputted user Id and password with registered User Id and password. This is implemented in the index.html page as follows,-.

var user_name=document.getElementById("user").value // accepts inputted user value from the form

var user_pass=document.getElementById("pass").value // accepts inputted password value from the form

var storedValue = localStorage.getItem("user"); //retrieves user value from local storage and assigns it into storedValue

var storedValue1 = localStorage.getItem("password");

//retrieves password value from local storage and assigns it into storedValue1

if(storedValue == user_name && storedValue1 == user_pass )

{

document.write("<center><a href='shop.html'>SHOPPING CART</a></center>")

} // if matches both value with registered values then redirect to shop.html page

else

{

alert("Wrong UserId and Password....")

} // if the inputted values does not match with registered values, this message displayed

• The registration.html form is designed to accept various values from users. After clicking the SUBMIT button, the JavaScript function, store() is called. This function is used to store the registered User Id and password into HTML local storage as follows,-

function store(){

var inputuser= frm.user.value; // accepting user value from inputted form

localStorage.setItem("user", inputuser);

// stores the user value in “user” variable into local storage.

var inputpass= frm.pass.value; // accepting password value from inputted form

localStorage.setItem("password", inputpass);

// stores the password value in “password” variable into local storage.

}

• The shop.html page implements the creation and display of the shopping cart using JavaScript functions. The AddtoCart() function implements JavaScript object, SingleProduct that holds three properties, Name, Description and price. shoppingCart[] is declared as an array where singleProduct object is added as: shoppingCart.push(singleProduct);
• The displayShoppingCart() function is called. This function is implemented as:

1. Delete all previously added rows from ordered products table.
2. Assign a variable, cart_total_price to store total price.
3. Iteration of array of objects asfor(var product in shoppingCart)
4. Add a new row in the table.
5. Create three cells for product properties.
6. Fill cells with values from current product object of array, shoppingCart[].
7. End iteration
8. Fill total cost of our shopping cart

The program code is implemented in the shop.html file.

Analysis:

The intended project is developed as a demonstration of online dynamic shopping cart. The user first registers into the site, and then with the help of User Id and password they can Sign In on that site. After, they are able to access the shopping cart. The full implementation is done on the client side with the help of HTML, CSS and Java Script technology. There is no implementation for PLACE ORDER and PAYMENT page. The HTML local storage is used instead of web server and database server.

The following sections are ignored for this project and it will be implemented in future.

• Detail Categorization of product: More categories and their additional items should be added. The project is shown only 3 categories of recent products.
• Delete from shopping cart: The above shopping cart shows only the selected items but there is no chance to remove items after Add to Cart. The REMOVE FROM CART option after adding should be implemented.
• Enhanced user interface: More user interface designing should be presented like users’ feedback form, search page for a product etc.
• Recommended items: By adding a bar at the bottom of the shopping cart that shows the most recommended items with price by the buyers.
• Payment Page: After choosing items in shopping cart, there should be a “Place Order” button. Clicking on that button, the payment page will show the total price with selected items and different payment options like Visa, MasterCard, PayPal etc. The user can also save this page for later checkouts.
• Shipping Page: After successfully payment, the shipping page is generated that shows the confirmation of order dispatching to the user’s shipping address. After, the page is automatically Signed Out.
• Recent History: A tab of Recent History should be designed that shows user’s recently browsed items.

The dynamic online shopping cart application should be designed with server side. HTML local storage (client based application) is quite impossible if the products are large and the customer base is higher. So, a suitable dynamic shopping cart must be implemented in the following technologies,-

• The client side should be designed with HTML, CSS and JavaScript technology.
• The server side business logic should be implemented in the JSP (Java Server Pages) technology. The pages should be stored in the Web server( e.g, Tomcat 8.0). The web server processes the user’s input, determines the actions and interacts with the external sources like database.
• The third layer is the Database server (e.g, MySQL) that stores the user’s and company’s information. When, the user sends any request through the HTTP to the web server, the web server performs actions by interacting with database and sends reply to the client.

The server side implementation is done for dynamic shopping cart as it is the best suitable option for flexibility, speediness, usability and availability.

Conclusion:

Due to the advancement of Internet technology and the growing need for different products by online, the Web application plays a major role. Most of the Companies are adopting e-commerce technology for the following purposes,-

• The business critical solution is resolved by the web technology.
• The involving of the different actors and making a suitable communication with the stakeholders, this technology is mandatory.
• The e-commerce shopping generates a new business opportunity and makes a comparative shopping for the customers.

The e-commerce shopping platform is the best choice for the customers due to availability, convenience of access, 24x7 support, comparative options and online security payment option. Customers can easily get their intended product at their home. The project is implemented the dynamic interactive shopping cart that is designed using client side. This technology reduces the overhead of web server and database server. But this implementation will be more effective if the Payment option is added with this card.