Web Application

Development


Web Application Development 2

Section 1
Task 1: understand the concept of web application
1. Briefly evaluate the functions and advantages of web applications
A Web application is an application that is accessed via web over a network such as
the Internet or an intranet.
Functions
Web applications are very popular because of the ubiquity of a client. The ability to
update and maintain Web applications without distributing and installing software on
potentially thousands of client computers is a key reason for their popularity. The uses of
Web applications are to implement Webmail, online auctions, online retail sales, discussion
boards, wikis, Weblogs, MMORPGs and many other functions.
In early days the types of client-server computing, each application had its own client
program which served as its user interface and had to be separately installed on each user's
personal computer. An upgrade to the server part of the application would typically require
an upgrade to the clients installed on each user workstation, adding to the support cost and
decreasing productivity.
In contrast, Web applications dynamically generate a series of Web documents in a
standard format supported by common browsers such as HTML/XHTML. Client-side
scripting in a standard language such as JavaScript is commonly included to add dynamic
elements to the user interface. Generally, each individual Web page is delivered to the client
as a static document, but the sequence of pages can provide an interactive experience, as user
input is returned through Web form elements embedded in the page markup. During the
session, the Web browser interprets and displays the pages, and acts as the universal client for
any Web application.
The advantages of web applications are web applications do not require any complex
"roll out" procedure to deploy in large organizations. A compatible web browser is all that is
needed and browser applications typically require little or no disk space on the client. They
require no upgrade procedure since all new features are implemented on the server and
automatically delivered to the users. Web applications integrate easily into other server-side
web procedures, such as email and searching. They also provide cross-platform compatibility
in most cases (i.e., Windows, Mac, Linux, etc.) because they operate within a web browser
window. With the advent of HTML5, programmers can create richly interactive
environments natively within browsers. Included in the list of new features are native audio,
video and animations, as well as improved error handling. Modern web applications support
greater interactivity and greatly improved usability through technologies such as AJAX that
efficiently exchange data between the browser and the server. Web applications allow for
easier introduction of new user devices (e.g. smartphones, tablets) because they have built-in
browsers.
2. Briefly compare different types client side and server side scripting languages
The client is the system on which the Web browser is running. JavaScript is the main
client-side scripting language for the Web. Client-side scripts are interpreted by the browser.
The process with client-side scripting is:
Web Application Development 3

the user requests a Web page from the server
the server finds the page and sends it to the user
the page is displayed on the browser with any scripts running during or after display
Client-side scripting is used to make Web pages change after they arrive at the browser.
It is useful for making pages a bit more interesting and user-friendly. It can also provide
useful gadgets such as calculators, clocks etc. but on the whole is used for appearance and
interaction.
Client-side scripts rely on the user's computer. If that computer is slow they may run
slowly. They may not run at all if the browser does not understand the scripting language. As
they have to run on the user's system the code which makes up the script is there in the
HTML for the user to look at (and copy or change).
Some Client-Side Scripting Languages
JavaScript
Action Script (used to create animated interactive web applications for Adobe Flash
Player using Adobe Flash Pro)
Dart
VBScript (Correction: VBScript is not client-side. All processing is done on the server.
It may appear to be client-side because the processing is done in tags inside the
HTML.)
Typescript
The server is where the Web page and other content lives. The server sends pages to the
user/client on request. The process is:
the user requests a Web page from the server
the script in the page is interpreted by the server creating or changing the page content
to suit the user and the occasion and/or passing data around
the page in its final form is sent to the user and then cannot be changed using server-
side scripting
The use of HTML forms or clever links allow data to be sent to the server and processed.
The results may come back as a second Web page.
Server-side scripting tends to be used for allowing users to have individual accounts and
providing data from databases. It allows a level of privacy, personalisation and provision of
information that is very powerful. E-commerce, MMORPGs and social networking sites all
rely heavily on server-side scripting.
PHP and ASP.net are the two main technologies for server-side scripting.
The script is interpreted by the server meaning that it will always work the same way.
Server-side scripts are never seen by the user (so they can't copy your code). They run on the
server and generate results which are sent to the user. Running all these scripts puts a lot of
load onto a server but none on the user's system.
Web Application Development 4

ASP (*.asp)
ActiveVFP (*.avfp)
ASP.NET (*.aspx)
C (*.c, *.csp) via CGI
ColdFusion Markup Language (*.cfm)
Groovy Server Pages (*.gsp)
Java (*.jsp) via JavaServer Pages
JavaScript using Server-side JavaScript (*.ssjs, *.js) (example: Node.js)
Lua (*.lp *.op *.lua)
Perl CGI (*.cgi, *.ipl, *.pl)
PHP (*.php)
R (*.rhtml) - (example: rApache)
Python (*.py) (examples: Pyramid, Flask, Django)
Ruby (*.rb, *.rbw) (example: Ruby on Rails)
SMX (*.smx)
Lasso (*.lasso)
Tcl (*.tcl)
WebDNA (*.dna,*.tpl)
Progress WebSpeed (*.r,*.w)
A site such as Google, Amazon, Facebook or Hobowars will use both types of scripting:
server-side handles logging in, personal information and preferences and provides the
specific data which the user wants (and allows new data to be stored)
client-side makes the page interactive, displaying or sorting data in different ways if the
user asks for that by clicking on elements with event triggers
3. Examine web security concerns and make recommendations for security
improvements for your web application.
To improve the security of web applications, an open and freely-accessible community
called the Open Web Application Security Project (OWASP) has been established to
coordinate worldwide efforts aimed at reducing the risks associated with web application
software.
A number of major organisations and government departments have also devoted resources
themselves to develop strategies, policies and guidelines aimed at managing the risks from
the open nature of web applications. To ensure a minimum level of assurance of web
application security, some organisations have developed checklists designed to assess overall
web application security before final production launch. The US Department of Defence has
developed their own Application Security Checklist2 as one example, designed just for this
purpose.

This section focuses on areas that need to be observed from a technical perspective, in order
to increase the reliability and security of all programs and systems involved. A typical web
application architecture contains 3 tiers, separating the externally-facing web server from the
internal application server and database server. With a tier-based architecture such as this,
even if an attacker compromises an externally-facing web server from the outside, they still
have to find ways to gain access and attack the internal network. This is the principle of
defence-in-depth protection. Defence-in-Depth is a practical approach to information
Web Application Development 5

security. The fundamental concept always centres on the idea of multiple layers of security to
protect vital assets. Layers of security include input validation, database layer abstraction,
server configuration, proxies, web application firewalls, data encryption, OS hardening, and
so on.
The Development Stage
This is one of the most important stages in terms of mitigating security issues within the
code. Observing secure coding standards certainly helps improving security and reducing the
number of common mistakes that result in security breaches. In addition, performing security
risk assessments during the development stage also helps to identify the security controls
required.
The Testing and Quality Assurance Stage Before any application is launched for
production, the need for comprehensive testing is paramount. In addition to user acceptance
tests, there are others, such as system tests, stress tests, regression tests and unit tests that are
useful in validating the performance and accuracy of system functionalities. This section
describes some of the tests that can be carried out in order to increase the reliability and
security of the program/systems being developed.
Web Application Firewalls
Standard firewalls can help restrict or permit network access to network ports
authorised by the organisation. Although application proxy firewalls exist, they cannot
understand the specific content of all web applications being run by the organisation.
According to the Web Application Security Consortium, a web application firewall (WAF) is
an intermediary device, sitting between a web-client and a web server, analysing OSI Layer-
7 messages for violations in the programmed security policy
Usually, web application firewalls are installed in front of a web server. Like standard
firewalls, these can be software or hardware based, but always with the purpose of protecting
the web server from attack. There are two protection approaches:
Signature based: The WAF identifies attacks by checking web request against an
attack signature file.
Abnormal behaviour based: The WAF identifies attacks by detecting abnormal traffic
patterns.
The potential advantages for nonprofits in integrating their donor database with their
web site are significant. However, the security risks presented by online database access are
potentially very serious and these risks are the same whether you are a small nonprofit
staffed by volunteers or a Fortune 500 corporation. These risks can be greatly reduced, and in
many cases, eliminated altogether, when secure data access is a priority in the design,
implementation, and maintenance of your online access portal.
In this article, wed like to address some common security risks associated with online
database transactions, explain some of the technology behind these interactions, and then
describe steps that can be taken to mitigate the risks involved.

Task 2: Design web applications
Web Application Development 6

1. Design a web application to meet the given requirements in the scenario above. Use
all relevant techniques such as wireframing, storyboarding and sitemap. Your website
should have at least five pages including homepage, a login/ registration page,
search/rate book page, make reservation page and web map. The header and the footer
design should be the same in all pages.
A Web application is an application that can be accessed by the users through a Web
browser or a specialized user agent. The browser creates HTTP requests for specific URLs
that map to resources on a Web server. The server renders and returns HTML pages to the
client, which the browser can display. The core of a Web application is its server-side logic.
The application can contain several distinct layers. The typical example is a three-layered
architecture comprised of presentation, business, and data layers. Figure 1 illustrates a typical
Web application architecture with common components grouped by different areas of
concern.













The presentation layer usually includes UI and presentation logic components; the
business layer usually includes business logic, business workflow and business entities
components, and optionally a faade; and the data layer usually includes data access and
service agent components.
General Design Considerations
When designing a Web application, the goal of the software architect is to minimize the
complexity by separating tasks into different areas of concern while designing a secure, high
performance application. Follow these guidelines to ensure that your application meets your
requirements, and performs efficiently in scenarios common to Web applications:
Partition your application logically. Use layering to partition your application logically
into presentation, business, and data access layers. This helps you to create
Web Application Development 7

maintainable code and allows you to monitor and optimize the performance of each
layer separately. A clear logical separation also offers more choices for scaling your
application.
Use abstraction to implement loose coupling between layers. This can be accomplished
by defining interface components, such as a faade with well known inputs and
outputs that translates requests into a format understood by components within the
layer. In addition, you can also use Interface types or abstract base classes to define a
shared abstraction that interface components must implement.
Understand how components will communicate with each other. This requires an
understanding of the deployment scenarios your application must support. You must
determine if communication across physical boundaries or process boundaries should
be supported, or if all components will run within the same process.
Consider caching to minimize server round trips. When designing a Web application,
consider using techniques such as caching and output buffering to reduce round trips
between the browser and the Web server, and between the Web server and
downstream servers. A well designed caching strategy is probably the single most
important performance related design consideration. ASP.NET caching features
include output caching, partial page caching, and the Cache API. Design your
application to take advantage of these features.
Consider logging and instrumentation. You should audit and log activities across the
layers and tiers of your application. These logs can be used to detect suspicious
activity, which frequently provides early indications of an attack on the system. Keep
in mind that it can be difficult to log problems that occur with script code running in
the browser.
Consider authenticating users across trust boundaries. You should design your
application to authenticate users whenever they cross a trust boundary; for example,
when accessing a remote business layer from the presentation layer.
Do not pass sensitive data in plaintext across the network. Whenever you must pass
sensitive data such as a password or authentication cookie across the network,
consider encrypting and signing the data or using Secure Sockets Layer (SSL)
encryption.
Design your Web application to run using a least-privileged account. If an attacker
manages to take control of a process, the process identity should have restricted
access to the file system and other system resources in order to limit the possible
damage.
2. Design client-side and server-side (client server architecture) functionality in your
web application
Market analysts have noticed a trend toward developing multitier applications that are
distributed over Internet-standard networks, and predict rapid growth in these distributed
systems in the coming years. Some predict that, by 2005, the familiar architecture of
client/server applications will be replaced by "super-suites" of interconnected components,
operating in frameworks of widely-available distributed systems. In other words, applications
will be assembled from reusable building blocks, by using a variety of cooperating
subsystems.
Web Application Development 8

Before delving into the implementation details of building Web applications, it might
be helpful to take a brief look at the architecture of the Web from a historical perspective,
beginning with the traditional client/server architecture.
Client/server (two-tier) architecture have usually performed many of the functions of
stand-alone systems; that is, they present a user interface, gather and process user input,
perform the requested processing, and report the status of the request. Because servers only
provide access to the data, the client uses its local resources to process it. Out of necessity,
the client application can tell where the data resides and how it is laid out in the database.
Once the server transmits the data, the client is responsible for formatting and displaying it to
the user.
3. Design your web application database system
Application of computers certainly has improved the ways in which we acquire,
process, store and disseminate information in libraries.
Web enabled database have certain advantages over other means of sharing/ publishing
information over internet.
The following ER diagram will descried the database functionalities of the online library
system
4. Evaluate alternatives designs and solutions to meet a given requirements
Web Application Development 9

Alternative design solutions are designing the dataflow diagram for the given online
library management system to create the architectural view of the system and making the
desining the flow charts and procedure oriented design for the given domain.

Task 3: Implement web applications
1. Implement a proposed wireframe and client server architecture introduced in task 2
using scripting languages as appropriate html for web pages, css for presentation style,
javascript for client side script, php for server side script and sql for database query.
Creating the required pages and relevant functionalities
Javascript implementation of online library managemenr system:
import javax.servlet.*;
import java.sql.*;
public class books extends GenericServlet
{
Connection con;
ResultSet rs;
Statement st ;
public void init(ServletConfig sc)
{
try
{
super.init(sc);
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
con = DriverManager.getConnection("jdbc:odbc:sri","gscl","granada");
}
catch(Exception e){e.printStackTrace();}
}

public void service(ServletRequest req,ServletResponse res)
{
try
Web Application Development 10

{
st=con.createStatement();
rs = st.executeQuery("select * from addbooks");
ServletOutputStream sos = res.getOutputStream();
sos.println("Currently existing books are");
if(rs.next())
sos.println("<html><head></head><body bgcolor=seagreen><table
border=2><tr><th>BNAME</th><th>BCODE</th><th>AUTHOR</th><th>DATEOFARR
</th><th>PRICE</th><th>RACKNO</th><th>NOOFBOOKS</th><th>SUBJCODE</th><
/tr>");
while(rs.next())
{

sos.println("<tr><td>"+rs.getString(1)+"</td><td>"+rs.getString(2)+"</td><td>"+rs.getStrin
g(3)+"</td><td>"+rs.getString(4)+"</td><td>"+rs.getString(5)+"</td><td>"+rs.getString(6)
+"</td><td>"+rs.getString(7)+"</td><td>"+rs.getString(8)+"</td></tr>");
}
sos.println("</table></body></html>");
st.close();
rs.close();
}
catch(Exception ex){ex.printStackTrace();}
}
}
public class addbooks extends GenericServlet
{
Connection con;

public void init(ServletConfig sc)
{
try
{
super.init(sc);
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
con = DriverManager.getConnection("jdbc:odbc:sri","gscl","granada");
}
catch(Exception e){e.printStackTrace();}
Web Application Development 11

}

public void service(ServletRequest req,ServletResponse res)
{
try
{
Statement st = con.createStatement();
String str1 = req.getParameter("bn");
String str2 = req.getParameter("bc");
String str3 = req.getParameter("aut");
String str4 = req.getParameter("doa");
String str5 = req.getParameter("pr");
String str6 = req.getParameter("rn");
String str7 = req.getParameter("nob");
String str8 = req.getParameter("sc");
ServletOutputStream sos = res.getOutputStream();
INT k = st.executeUpdate("insert into addbooks
values('"+str1+"','"+str2+"','"+str3+"','"+str4+"','"+str5+"','"+str6+"','"+str7+"','"+str8+"')");
IF(k&gt;0)
sos.println("books are added successfully");
ELSE
sos.println("books are not added");
}
catch(Exception ex){ex.printStackTrace();}
}
}
2. Implement a web-enabled database management system to store, retrieve and
manipulate data in the web application
In the General Database Access area, any table in the database can be viewed or
manipulated through a standardized interface. Common activities in this area include adding
new item formats and adding terms.
MySQL is an industrial-grade database management system (DBMS). The IS is driven
by a MySQL database hosted on an OIT MySQL server. It is defined by a collection of
MySQL scripts. These scripts contain MySQL statements that, when executed by the DBMS,
create the tables required by the IS. After the database is created, another collection of
MySQL scripts migrate the data from the old database to the new. The database is solely
responsible for representing the state of the library and is the only way in which data is stored
within the IS.
3. Identify and implement opportunities for error handling and reporting
Error handlings are implemented which will be executed when an expected error
occurred. And produce status reports to provide information on the progress of resolving the
problems found.
An electronic system supports easy production of various reports on the status of the
recorded problems, (e.g., a report sorted by date, status, or priority). Summary totals can also
be produced readily, such as the number of problems resolved and the number unresolved.
Web Application Development 12

Status reports must also be produced for manual Fault Reporting Systems, but are more
time consuming and prone to error.

Task 4: test web applications
4.1 review and test your web application on front end and back end levels
Generally the testing levels are
Integrity checks:
Ensure that the data has not been tampered with and is the same as before
Integrity checks must be included wherever data passes from a trusted to a less trusted
boundary, such as from the application to the user's browser in a hidden field, or to a third
party payment gateway, such as a transaction ID used internally upon return.
The type of integrity control (checksum, HMAC, encryption, digital signature) should
be directly related to the risk of the data transiting the trust boundary.
Validation:
Ensure that the data is strongly typed, correct syntax, within length boundaries, contains
only permitted characters, or that numbers are correctly signed and within range boundaries
Validation must be performed on every tier. However, validation should be performed
as per the function of the server executing the code. For example, the web / presentation tier
should validate for web related issues, persistence layers should validate for persistence
issues such as SQL / HQL injection, directory lookups should check for LDAP injection, and
so on.;
Business rules
Business rules are known during design, and they influence implementation. However,
there are bad, good and "best" approaches. Often the best approach is the simplest in terms of
code.
Business rules are known during design, and they influence implementation. However,
there are bad, good and "best" approaches. Often the best approach is the simplest in terms of
code.
Ensure that data is not only validated, but business rule correct. For example, interest
rates fall within permitted boundaries.
Some documentation and references interchangeably use the various meanings, which
is very confusing to all concerned. This confusion directly causes continuing financial loss to
the organization.
It is not easier to understand and verify a back end than a front end because a front end
usually has friendly and intuitive user interfaces.
Web Application Development 13

A back end has its own objects, such as, tables, stored procedures and triggers. Data
integrity and protection is critical. Performance and multi-user support are big issues.
Slowness in operation can be vital to the projects future.
There are no sufficient tools for back end testing. SQL language is mainly a testing
tool. MS Access and MS Excel can be used to verify data but they are not perfect for testing.
However, there are a large number of test tools available for front end testing.
To be able to do back end testing, a tester must have strong background in SQL server
and SQL language. It is relatively difficult to find testers who understand both SQL server
and SQL testing. This causes a shortage of back end testers.
A back end is the engine of any client/server system. If the back end malfunctions, it
may cause system deadlock, data corruption, data loss and bad performance. Many front ends
log on to a single SQL server. A bug in a back end may put serious impact on the whole
system. Too many bugs in a back end will cost tremendous resources to find and fix bugs and
delay the system developments.
It is very likely that many tests in a front end only hit a small portion of a back end.
Many bugs in a back end cannot be easily discovered without direct testing.
Back end testing has several advantages: The back end is no longer a "black box" to
testers. We have full control of test coverage and depth. Many bugs can be effectively found
and fixed in the early development stage. Take Forecast LRS as an example; the number of
bugs in a back end was more than 30% of total number of bugs in the project. When back end
bugs are fixed, the system quality is dramatically increased.
This testing approach document is designed for Information and Technology Services
upgrades to PeopleSoft. The document contains an overview of the testing activities to be
performed when an upgrade or enhancement is made, or a module is added to an existing
application. The emphasis is on testing critical business processes, while minimizing the
time necessary for testing while also mitigating risks. Its important to note that reducing the
amount of testing done in an upgrade increases the potential for problems after go-live.
Management will need to determine how much risk is acceptable on an upgrade by upgrade
basis.
4.2 analyse actual results against expected results to identify discrepancies
After conducting the test, compare the actual result to the expected result. Various
testing methods can be used to review the results. If there is no difference, record the test as
non-discrepant on the test scenario test script.
If there is a difference, record the discrepancy on the test scenario test script, and
determine if the discrepancy is the result of an error in the code or an error in the expected
result.
The sample of a completed test scenario illustrates the process of documenting the
testing as it is conducted.
If the code is in error:
Use the Guidelines for Preparing a Fault Report to prepare the Fault
Report.
Web Application Development 14

Follow the Fault Report Tracking Procedures defined in the Test Plan.
Use an automated fault tracking system or a manual error tracking
system to track the Fault Report.
If the expected result is in error, correct the expected result, and rerun the test.
When all tests have been executed and errors corrected, conduct regression testing to
ensure that no new errors were created during error correction. Tools that capture and
playback screen activity, can be used to assist with the process of running regression tests.
Record any metrics as required by the test procedures, (e.g., the types of errors found,
such as logic errors and documentation errors). Use evaluating test metrics to assist with the
process of identifying and gathering test metrics.
4.3 Critically evaluate independent feedback on a developed web application and make
recommendations for improvements
After evaluating the functionalities of the system the online library web application
system finally given to a set of individual customers to get their feedback about that web
application. Finally the feedbacks are recorded and the additional requirements to improve
the system are also recorded which will leads to the improvement of the whole web
application
4.4 create user documentation for a developed web application
The end user documentation process contains the information about the system which
includes what are all the functionalities of the system, and how to handle the system in an
optimized way.
Generally it will act as a guide which helps the user to become more familiar with the
web application system tutorial. The user documentation describes each feature of the
application. A good user documentation can also go far as to provide trouble shooting
assistance.
Documentation:
Register your mail id to get continuous access to the online web application
Search for the book by giving any of the metadata of the book (such as title,
author, genre, year of publication) you are looking for.
Receive the book online and rate them
These are the some guidance given to the user in the user documentation.






Web Application Development 15

References:
1. Kozlowski, P. and Darwin, P. (2013). Mastering web application development with
AngularJS. 1st ed. Birmingham, U.K.: Packt Pub.
2. Grove, R. (2010). Web-based application development. 1st ed. Sudbury, Mass.: Jones
and Bartlett Publishers.
3. Fowler, S. and Stanwick, V. (2004). Web application design handbook. 1st ed. San
Francisco: Morgan Kaufmann.
4. Oberg, R., Thorsteinson, P. and Wyatt, D. (2003). Application development using
Visual Basic and .NET. 1st ed. Upper Saddle River, NJ: Prentice Hall PTR.
5. Conallen, J. (2003). Building Web applications with UML. 1st ed. Boston: Addison-
Wesley.
6. MacCaw, A. (2011). JavaScript web applications. 1st ed. Sebastopol, CA: O'Reilly.
7. Radaideh, M. and Al-Ameed, H. (2007). Architecture of reliable Web applications
software. 1st ed. Hershey, PA: Idea Group Pub.
8. Reese, G. (2009). Cloud application architectures. 1st ed. Sebastopol, Calif.: O'Reilly.