Unit 35 Web Application Development Sample Solution

Program	Diploma  in Computing and Systems Development
Unit Number and Title	Unit 35 Web Application Development
QFC Level	Level 5

Task 1

1.1 Briefly describe web based application and critically analyze the business advantage

Web applications are basically the “web sites” which have some similar functions like a normal software application or mobile app. Web applications or we can say web apps are the client-side applications that run on a web browser. Web based applications fetch data which may be stored locally or stored on remote server. The major work of web applications is to retrieve the data from databases and deliver that to the client who is running the web application on their web browsers.
Business Advantage to use Web applications: Having offline business and website design or development strategies of making an online presence will prove to be the best strategy ever made for an offline store as an online store has the capability of having more customers as compare to an offline one. By using the web based applications, we can have the following advantages:
• Accessible anywhere: Unlike the traditional web sites, the web applications are accessible anytime, anywhere by the use of internet only. Having a web application on an online platform makes it globally accessible by any number of users.
• Accessible for a range of devices: The web applications are made responsive which looks perfect on any kind of device the customers are using. Since it depends on the screen size the devices which are being used by the customers can see this website.
• Easy installation and maintenance: The installation of a new web application is easier for the owner and the users also. Maintaining the website will require to upgrade the software as per the changing technology so that can be done easily.
• Security: The web based applications are most of the time monitored by some experienced IT professionals and firewall and other security features are also provided by the web based applications.

1.2 Critically compare the key differences between JavaScript (Client-side) and PHP (Server-side). Give examples and demonstrate how each will be used to build your solution.

The main difference between JavaScript and PHP is JavaScript being client side scripting and PHP being the server side scripting. Some other differences can be seen as:

S. No.	PHP	JavaScript
1.	In our website PHP has been used with HTML and no other language is used on this website.	JavaScript is also used along with HTML for the form validation.
2.	The major functionality of PHP is to produce the code in HTML code which can be read by the browsers.	In our website, the JavaScript is used only for some specific purposes.
3.	PHP generally uses MYSQL database for connecting to the databases.	No database is used in case of JavaScript.
4.	PHP being a server side script does not execute in browser’s window.	JavaScript executes within the user browser.
5.	PHP can be seen after the interpretation of server.	JavaScript enables the user to view the code even after the output has been interpreted.
6.	PHP has been used to fetch the data from the database, inserting book’s details, editing the books details already stored on the database, user login/signup and for including other files.	JavaScript has been used to validate the data entered during login/signup, the addition of data and updating those details.
7.	The work of PHP sticks during the web page is loading and once it is loaded, there will be no use of PHP.	JavaScript works only when the web page is received.

For developing our solution we have used PHP for storing the user entered data in the database, and for validating the user data, JavaScript has been used.
In our solution, the data fetched from the database is shown in the web application and JavaScript is not responsible in such scenario.
In our solution, we also have used the MYSQL database for connection with PHP and JavaScript is not involved in this case.

1.3 Demonstrate the web security techniques

We will be using some techniques in our solution to protect our data:

• Firewalls: A firewall is used in securing the data by restricting the traffic in the incoming and outgoing packets within the network. A firewall acts as a security guard when it comes to a web application protection.
• Session management: Since PHP is used for server side scripting in our solution, we will be using a session variable in order to maintain the session of a logged in user. The session variables are created once the user or admin login to the website, and once they log out, the session variable expires.
• Authentication: Only an authorized user can sign into the system. When it comes to the admin part, the email id and passwords are kept safe. For a new user to login to the website, they first need to register to our website. This is the widely used method for securing the website from attacks.
• Password hashing: For securing the password, we have used an asterisk on our website design so that other user cannot identify the password entered by some other user. In this way, we will be providing security to our solution.

Task 2

Task 2.1 Introduction to a design to the online library via wire-framing, mock-ups and sitemap of website

Design of the online library based on the given scenario techniques including wire-framing, mock-ups and sitemap of website is given as:

Wireframes

Wireframe of “Bookteria” Homepage

Wireframe of Login

Wireframe of Registration

Wireframe of About Us

Wireframe of Add-Book

Wireframe of Admin Course Detail

Wireframe of Contact

Wireframe of course detail

Wireframe of Courses

Wireframe of Edit book

Sitemap of website

Mock-ups

Sitemap of the complete web application

2.2 Design Client server architecture as suitable to the web application. List all technologies required on both side and demonstrate how the client side will communicate data with server side.

Client server architecture of online library management system is as follows:

List of the technologies required on both (Client and server) sides

• JavaScript - It is a high-level dynamic and interpreted programming language. JavaScript is one of the core technologies used in the production of World Wide Web content. All the latest web browsers support it without getting the help of Plugins.
• PHP - It is a scripting language, take action on the server side on time of web development. PHP code is embedded in HTML code or with the variety of web templates. A PHP is used to develop the static website, dynamic website and web application.

How the client side will communicate data with server side

When the data or information is input by the user onto the web application development than general purpose scripting language PHP stored these onto the web server to access it again. PHP also provide contents means image, the name of books and written text which is shown on the web page. When a user request for a file or data then this scripting language fetch data from the database of “Bookteria”.

2.3 Create a database using MYSQL to use in your web application. Design multiple tables in your database.

The entity relationship diagram of database including multiples tables is as follows:

2.4Evaluate different design for the above scenario

The “BookTeria” website can also be developed in the following scenarios:

• The menu bar that we have given in the header section can also be given as the left side menu bar, appearing on every page of the website like the header.
• The logo of the website can also be put in the center of the header part.
• The footer of this website can be extended by having contact information on it, and also by having some links on it.
• The font size and font color can be changed and the color combination of the website can also be altered. In other words, we can say that the theme of this website is in our hands, we can alter it any time we want.

Task4

4.1 Critically review and test the overall performance of webapplication also have to review and test both client side (front end) and server side (back end).

I have designed a prototype of web online application to support a manually operated library. I have created rough sketches to full fill all requirements and design a web page of the web application to reduce chances of error. I have designed a web application effectively to manage the online library and their related database. This web application is capable of handling many tasks of library management system. I have test overall performance of web application to check their functionality, operation, load balancing and data retrieval from the database in real time.
To test the overall performance of web application I have go through the following steps:
I have performed many testing operations to test the overall performance of the website on both client and server side.

Client side performance of website

This web application is very responsive to the client as it responds quickly. The user can easily register them to get services of the library. Using search option a user can search for a book, and reserve book online. A user can also able to rate the book. A new user has to register to get services. When a user fills any incorrect credential then it shows an error message. The database has a secured login panel where only admin and an authorized member have access. The user can make access globally and get services from anywhere. This website is effectively optimized as a user can get quick access to any webpage. The navigation system of the web app is very strong and responsive when a large number of customers come at any instant.

Server side performance of website

The server-side performance of the website is very effective and to measure the performance of the website. This website is designed using PHP and JavaScript and all the form is designed using HTML. When a user registers them by filling their data then it all store into the database of the website and retrieved whenever it is required. Also, it takes few second to response on hitting means it provides quick response and all mail of user registration and of unauthorized access is automatically goes to the admin email.  The database never stored duplicate data and shows error pop-up whenever the wrong credential is filled.

After the overall performance testing of web application I have some review about it which is as follows:

• The navigation system of web application reliable to the user as the user can go to any of the web pages from any.
• The infrastructure of the web application looks simple and nice. The user can make a search operation as per their requirement at any time.
• The web application has very well the support of social media so that an admin can promote their new collection of books and services to attract more online customers or members.
• This website also has better load balancing capability so that when the number of customer increases at any time, then none of the web-pages will show irresponsive nature.
• Only the registered member can make a reservation of book after login into the website.
• The one and only admin of the library can make add, delete or change in a database so to fulfill this requirement this website has a login panel.
• Registration message, book reservation message and payment of against book reservation and other services.
• The database of this website stores all the detail of books, employees and staff, emails, and user list of the website.
• The database is design and capable of identifying duplicate username so that is the preventing system from duplicity and redundancy.
• Also show error message as needed means whenever a user fills incorrect credential then it pop-up incorrect or try again.

4.2 Verification table to test actual result against expected result and method to identify of discrepancies and demonstrate how you will deal with them.

Verification table to test actual test result against expected test result is as follows:

S.No.	Expected test result	Actual Test Result
1	The database of the book should be managed by the authorized user to make efficient searching.	The authorized user is only capable of managing book database and it fetches information about specific quickly.
2	Only the registered customer should be able to reserve a book.	The web application asks when a new user try to reserve a book.
3	The users have to fill username, password, name, and email to register with this application.	During registration, if any field is left blank then it shows error message.
4	Admin should have credentials to access in the system and has right to update book database.	Admin has a user id and password to access the database.
5	The user should be able to system search, rate and reserve books services after login.	The user can only get facilities like searching, rate and reservation of book after login into the web application.
6	The web application should be able to generate a message to the admin email when a user fill a form, database of the website should effectively store a copy of the email.	An admin of the library gets notification email as whenever a user fills form, also the database the library effectively keep a copy of that email.
7	The infrastructure of the web application should be simple and attractive.	The look and feel of the web application is very simple and much more attractive.
8	Web site of the library should have a homepage, courses, about, contact us and search management.	The website has pages such as home, about us, contact us, login and search.
9	The header and footer of the website should have a relevant logo, navigational links, registration, and login form, images, and videos.	Each of the web pages has a logo on header and footer. The website has better load balancing capability and it is mandatory to login in a web application to get services of the library.

Discrepancies and way to resolve them

When a web page of the web application of library shows error or alert problem on time of entering value due to incorrect file, data, credentials, formats then the website show discrepancies problem. For example when as user fill incorrect or unspecified data or also when the user fills data with incorrect format then it shows error message automatically by the web application. This type of discrepancies can be resolve by specifying guidelines on a specific field of data. By the help of routing and action and resolution action discrepancies of library web application will be resolve.

4.3 Evaluate web application with different users including feedback and also make recommendation for any possible improvements.

Evaluation of application with different users including feedback

• All the web page of this web application is quickly responsive.
• A user has to login to the application to get library facilities.
• The look and feel of the website is much attractive.
• The new web application fulfill all requirements of the website as it has five different pages and has a proper content management system to retain the online customers.
• The website is secured through SSL Certification to secure the session of the user.
• Only admin can make an update in book database so that there is no chance of unauthorized access.
• A user can reach to any of the web pages with the help of navigation link.
• As a user fill a form of registration then admin can get an automatically generated email notification about the specific user.
• The web application of library required minimum maintenance.
• It is secured by strong login panel.

Recommendation for possible improvements

After deep evaluation, I have made some recommendation to the web application of “Bookers” online library management system.

• This web app doesn’t have an online payment system to pay for reservation of book so as future improvement an online payment gateway can be added.
• Online data backup on the facility can be added to this application as a future recommendation.
• This web application can be used as an e-commerce web application in future.
• The home delivery feature can be added as a future improvement.
• In a future variety of payment, the facility can be added to this application.
• A variety of courses material including video lecture DVD, hard and soft copy of lecture notes can also be added to this application in future.

4.4 Create user guide and technical documentation for the web application solution.

To support the customer and user I have created a user guide as well as a technical document to understand how actually its work, also tools and technologies which are used to design and develop the online library management system.

User Manual

• Login- The users have to log in with user id and password to get any service of the online library.

• Registration- Users have to register first by filling proper credentials like name, username, email and password. After completion of registration process, users get their user id and password automatically and other side admin will get a new registration email notification.

• About Us- A user can get detail understanding about the library and their relevant services using this section. A user can also know which type of services is provided by this library.

• Contact- A user can find the geographical location of “Booketeria” using contact web page. This web page has Google map view through which user can find the nearest location of the library. A user can also get support to resolve queries and can contact to admin when they facing trouble with this.

Technical guide

This technical guide is developed to assist employees and admin of the “Booketeria”. The database of this online library is developed using MySQL which contains files and information of the customer, employees, and book. Book information within a database of the library can only be updated/delete/add by the authorized person. In the creation of a database of this library, I have used MySQL DB to make a secure and long lasting database. I have also secured this database using proper login panel. I have used following tool develop the web application.

• PHP – I have used PHP for app development from the server side.
• HTML- All the web pages are designed and developed using HTML.
• JS- I have used Javascript to apply validation on login panel, registration forms, error message etc.
• CSS- I have Cascading style sheet is used to provide a better look and feel with the attractive infrastructure to retain more online library customers. I have used CSS to provide better content management, including the design of the website, layout and display for a variety of devices along with their screen sizes.
• MySQL- This Database is used to create database “Bookers”. I have created total six tables as per requirement. Name of these six tables is book_rate, book_reserve, contact, courses, genre, and user.

System Requirement

Processor- Dual Core (Minimum)
Memory- 128 MB (Minimum)
Disk Space- An additional 500 MB is required on time of setup of the database and to run smoothly the newly designed MySQL DB.
Operating System- Window NT 4 (SP4) and above, Linux.
Supported browser- This web app is capable of running on Google Chrome, Safari, Mozilla Firefox, and internet Explorer. Etc.

References

Lingham, V. (2007).Top 20 Reasons why Web Apps are Superior to Desktop Apps. [online] VinnyLingham's Blog. Available at: http://www.vinnylingham.com/top-20-reasons-why-web-apps-are-superior-to-desktop-apps.html [Accessed 18 Dec. 2015].
Totalmetrics.com, (2015).Total Metrics - Helping Manage Software Development. [online] Available at: http://www.totalmetrics.com/ [Accessed 18 Dec. 2015].
Slideshare.net, (2015).Client and server side scripting. [online] Available at: http://www.slideshare.net/BaabtraMentoringPartner/client-and-server-side-scripting [Accessed 18 Dec. 2015].
SearchSecurity, (2015).Top Web application security problems identified. [online] Available at: http://searchsecurity.techtarget.com/news/873823/Top-Web-application-security-problems-identified [Accessed 18 Dec. 2015].
www.tutorialspoint.com, (2015). DBMS Architecture. [online] Available at: http://www.tutorialspoint.com/dbms/dbms_architecture.htm [Accessed 17 Dec. 2015].
www.tutorialspoint.com, (2015). SQL CREATE Database. [online] Available at: http://www.tutorialspoint.com/sql/sql-create-database.htm [Accessed 18 Dec. 2015].