WEB APPLICATION DEVELOPMENT (212INT1401)

Laboratory Manual

DEPARTMENT OF INFORMATION TECHNOLOGY

WEB APPLICATION DEVELOPMENT / 212INT1401

PEO Statements

PEO-1:
 The graduates will be successful IT professionals in their chosen area
and / or pursue higher studies.

PEO-2:
 The graduates will comprehend, analyze, design and create novel
products and technologies that provide sustainable solutions.

PEO-3:
 The graduates will demonstrate multidisciplinary knowledge, personal
and interpersonal skills and work as an effective team member with
ethical standards.

PO Statements
1. Engineering Knowledge: Apply the knowledge of mathematics,
science, engineering fundamentals, and an engineering specialization
to the solution of complex engineering problems.

2. Problem Analysis: Identify, formulate, review research literature,

and analyze complex engineering problems reaching substantiated
conclusions using first principles of mathematics, natural sciences,
and engineering sciences.

3. Design / Development of Solutions: Design solutions for complex

engineering problems and design system components or processes
that meet the specified needs with appropriate consideration for the
public health and safety, and the cultural, societal, and environmental
considerations.

4. Conduct Investigations of Complex Problems: Use research-based

knowledge and research methods including design of experiments,
analysis and interpretation of data, and synthesis of the information
to provide valid conclusions.

5. Modern Tool Usage: Create, select, and apply appropriate

Department of Information Technology

Kalasalingam Academy of Research and Education
WEB APPLICATION DEVELOPMENT / 212INT1401

techniques, resources, and modern engineering and IT tools including

prediction and modeling to complex engineering activities with an
understanding of the limitations.

6. The Engineer and Society: Apply reasoning informed by the

contextual knowledge to assess societal, health, safety, legal and
cultural issues and the consequent responsibilities relevant to the
professional engineering practice.

7. Environment and Sustainability: Understand the impact of the

professional engineering solutions in societal and environmental
contexts, and demonstrate the knowledge of, and need for sustainable
development.

8. Ethics: Apply ethical principles and commit to professional ethics

and responsibilities and norms of the engineering practice.

9. Individual and Team Work: Function effectively as an individual,

and as a member or leader in diverse teams, and in multidisciplinary
settings.

10. Communication: Communicate effectively on complex engineering

activities with the engineering community and with society at large,
such as, being able to comprehend and write effective reports and
design documentation, make effective presentations, and give and
receive clear instructions.

11. Project Management and Finance: Demonstrate knowledge and

understanding of the engineering and management principles and
apply these to one’s own work, as a member and leader in a team, to
manage projects and in multidisciplinary environments.

12. Life-long Learning: Recognize the need for, and have the
preparation and ability to engage in independent and life-long
learning in the broadest context of technological change.

Department of Information Technology

Kalasalingam Academy of Research and Education
WEB APPLICATION DEVELOPMENT / 212INT1401

Program Specific Outcomes (PSOs) of Department of Information Technology

PSO 1:
Ability to identify, design and develop processes and systems for enterprises.
PSO 2:
Ability to identify, deploy and maintain the IT infrastructure based on the needs of
the businesses.
PSO 3:
Practice and promote information technologies for societal needs.

ABET STUDENT OUTCOMES(ASO)

ASO 1:

Analyze a complex computing problem and to apply principles of computing and

other relevant disciplines to identify solutions.

ASO 2:

Design, implement, and evaluate a computing-based solution to meet a given set of

computing requirements in the context of the program’s discipline.

ASO 3:

Communicate effectively in a variety of professional contexts.

ASO 4:

Recognize professional responsibilities and make informed judgments in computing

practice based on legal and ethical principles.

ASO 5:

Function effectively as a member or leader of a team engaged in activities

appropriate to the program’s discipline.

ASO 6:

Identify and analyze user needs to take them into account in the selection, creation,
integration, evaluation, and administration of computing-based systems.

Department of Information Technology

Kalasalingam Academy of Research and Education
WEB APPLICATION DEVELOPMENT / 212INT1401

Course Outcome(s)
CO1 Apply frontend web development concepts in designing static pages.
CO2 Apply frontend web development concepts in deigning dynamic pages.
CO3 Develop web server incorporating multimedia features.
CO4 Develop dynamic server based applications through ASP.
CO5 Apply database concepts in storing and managing data generated through
web applications

Mapping of COs with Pos

COs PO’s PSO’s
CO 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3
CO1 2 2 2 2 3 2
CO2 2 2 3 2 3 2
CO3 3 2 2 3 3 2
CO4 3 3 3 2 3 3 2
CO5 2 2 2 2 2 3 3 2
2 2 3 2 2 2 2 3 3 2 2

Weekly Plan
Week Lecture (2 Hour) Practical (2 Hours) X-Component (3 Hours)
Week 1 History of Internet and Familiarizing Web Create a profile page in Google
W3C – Internet Protocols Applications and browsers – Sites
– HTTP Request and Web portals, e-commerce, --Include Name and public
Response – HTTP blogs, social media, etc. personal details
Message Header Types --Include photo
Week 2 HTML5: Basic Tags – Working with basic HTML --Include About Yourself
Metadata Tags – Section Tags --Your expertise and
Tags – Grouping Tags – achievements
Text Formatting Tags --Your strengths
Week 3 Embedded Content Tags – Working with tables and --Photo gallery
Multimedia – Tables – Form Elements -- Any specific interests
Forms
Week 4 JavaScript: History – Syntax Event Handling - Validating Simple game using JS and CSS
– variables – data types – Simple Form tricks
operators - control Event Handling - Background
structures Color Change
Event Handling -
OnMouseover event
Event Handling -

Department of Information Technology

Kalasalingam Academy of Research and Education
WEB APPLICATION DEVELOPMENT / 212INT1401

OnMouseover using objects

Week 5 functions – arrays - objects – b. String, Math & Date
events - ajax Object’s predefined methods
Week 6 CSS: Inline, Embedded and Calendar Creation : with all
External style sheets – months
positioning elements –
backgrounds – element
dimensions – box model and
flow model
Week 7 ASP.NET Introduction – Understanding .NET IDE for Installing and configuring IIS
Server Controls: HTML ASP Application Development
Server Controls - ASP.NET
Web Controls – Validation ASP.NET Application for
controls – List – User Form validation
Controls, IIS
Week 8 State Management: Client ASP.NET application for Mini Project – Form Designing
Side state management - state management and validation
Server Side state
management
Week 9 ASP.NET Ajax Controls - ASP.NET application with
URL Rewriting - Working ajax controls
with XML documents
Week ADO.NET – Connecting Use ADO.NET for DB Use the Mini project to connect
10 Database – Performing Connection with ASP.NET with database and do DB
CURD operations with application operations
SqlCommand,
SqlDataReader objects
Week Disconnected Database Working with disconnected
11 databases in ASP.NET
Week Working with stored Working with stored
12 procedures – SQL procedures
Injection Attacks and
prevention
Week Web Services: WSDL – Implement WSDL – SOAP Case study of WSDL – SOAP
13 SOAP – RDF – RSS – RDF – RSS in the Mini – RDF – RSS with different
Project platforms
Week Web Security Issues: Add appropriate security Test the Mini Project for these
14 Broken Authentication measures for the attacks specific attacks. Try to resolve
and Session Management it.
- Sensitive Data Exposure
- XML External Entities
(XXE)

Week Broken Access Control - Add appropriate security Test the Mini Project for these
15 Security check for XSS, RCE etc. specific attacks. Try to resolve
Misconfiguration - Cross- it.
Site Scripting XSS, RCE

Department of Information Technology

Kalasalingam Academy of Research and Education
WEB APPLICATION DEVELOPMENT / 212INT1401

Do’s Dont’s
 Be punctual.  Don’t use the system for typing
 Follow dress code. letters, reports etc., during lab
 Remove the foot wears. hours.
 Keep personal belonging in allotted  Don’t use others login.
place.  Don’t change the configuration
 Submit the observation record of and system settings.
previous experiments.  Don’t bring floppies, cd’s inside
 Use the allotted system and login as lab without permission
per instruction only.  Don’t load unauthorized software.
 Take the printouts regularly.
 While leaving the lab, arrange the
chairs you are seated in a proper way.
 Help to maintain the cleanliness of
the lab.
 Maintain strict discipline.
Assessment Pattern:

Sl. No. Evaluation Method Weightage Units Covered

Internal Continuous Assessment (70 Marks)
1 Mid – Semester Practical 20 All Units
Examination
2 Mini Project 20 All Units
3 Regular Laboratory Performance 20 All Units
4 Sessional Examination 10 3,4
End Semester Assessment
1 End Semester Practical 20 All units
Examination
2 Viva-Voce 10 All Units

Department of Information Technology

Kalasalingam Academy of Research and Education
WEB APPLICATION DEVELOPMENT / 212INT1401

Rubrics for assessment

Module Rubrics for assessment Marks (100)

 Poor : 0 - 5 (Not able to understand what is given and what is

expected)
 Normal : 5 - 10 ( Understood what is given but can't decide what
Problem
is expected)) 20
Analysi  Good : 10 - 15 (Understood what is given and Understood the
s stated expectation)
 Very Good : 15 - 20 ( Understood what is given and understood
the stated expectation as well as the hidden expectation)
 Extraordinary : 35-40 Marks (With good Layout, Colour,
Graphics, Font)
Design 40
 Used efficiently: 25 - 35
 Met problem requirements : 15 - 25
 Poor: 0 - 15 Marks
Logic  Aesthetic Output : 15 - 20
20
and  User interactive input and output : 5 - 15
Output  No proper user interactive I/O operation : 0 – 5
 Answered for more than 80 % Qs : 16 - 20 Marks
Viva
 50% - 80% - 11 - 15 Marks 20
questions
 25% - 50 % - 6- 10 Marks
 0%-25% - 0 - 5 Marks

Department of Information Technology

Kalasalingam Academy of Research and Education
WEB APPLICATION DEVELOPMENT / 212INT1401

Table of Contents
Topic Page No
1 Familiarizing Web Development 1
1.1 Web Technology 1
1.2 Web Development 1
1.2.1 Frontend Development 1
1.2.2 Backend Development 2
2 Familiarizing Development Environment 4
2.1 Text Editor and IDE 4
3 Familiarizing HTML Basic HTML Tags 5
3.1 HTML Elements and Attributes 5
3.2 HTML Structure 5
3.3 Basic HTML Tags 6
4 Html Links And Images 8
5 Working with Lists 13
6 Working with Tables 17
7 Cascading Style Sheet 20
8 JavaScripts 25
9 ASP.NET Form Designing 31
10 ASP.NET Validation Controls 33
11 ASP.NET State Management 35
12 ASP.NET DB Connectivity 37

Department of Information Technology

Kalasalingam Academy of Research and Education i
WEB APPLICATION DEVELOPMENT / 212INT1401

1. FAMILIARIZING WEB DEVELOPMENT

1.1 Web Technology
Web Technology refers to the various tools and techniques that are
utilized in the process of communication between different types of
devices over the internet. A web browser is used to access web pages.
Web browsers can be defined as programs that display text, data,
pictures, animation, and video on the Internet. Hyperlinked resources on
the World Wide Web can be accessed using software interfaces provided
by Web browsers.
1.2 Web Development
Web development refers to the building, creating, and maintaining of
websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an
application that works over the internet i.e. websites.

1.2.1 Frontend Development: The part of a website that the user

interacts directly (browser) is termed as front end. It is also referred to as
the ‘client side’ of the application. HTML, CSS and JavaScript work at
the front end. The following diagram shows the technologies and
packages/libraries available for front end development. We will be using
the following for the laboratory exercises.

HTML: HTML stands for Hypertext Markup Language. It is used to

design the front-end portion of web pages using a markup language.
HTML is the combination of Hypertext and Markup language. Hypertext
defines the link between the web pages. The markup language is used to
define the text documentation within the tag which defines the structure
of web pages.
CSS: Cascading Style Sheets fondly referred to as CSS is a simply
designed language intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages. More
importantly, CSS enables you to do this independent of the HTML that
makes up each web page.

Department of Information Technology

Kalasalingam Academy of Research and Education 1
WEB APPLICATION DEVELOPMENT / 212INT1401

JavaScript: JavaScript is a famous scripting language used to create

magic on the sites to make the site interactive for the user. It is used to
enhancing the functionality of a website to running cool games and web-
based software.
AJAX: Ajax is an acronym for Asynchronous Javascript and XML. It is
used to communicate with the server without refreshing the web page
and thus increasing the user experience and better performance.

1.2.2 Backend Development: Backend is the server side of a website. It

is the part of the website that users cannot see and interact. It is the
portion of software that does not come in direct contact with the users. It
is used to store and arrange data. The following diagram shows the
backend technologies.

Department of Information Technology

Kalasalingam Academy of Research and Education 2
WEB APPLICATION DEVELOPMENT / 212INT1401

On the backend, we will be using ASP.NET with C# for the business logic
and ADO.NET with MS SQL server for database connectivity.

Department of Information Technology

Kalasalingam Academy of Research and Education 3
WEB APPLICATION DEVELOPMENT / 212INT1401

2. FAMILIARIZING DEVELOPMENT ENVIRONMENT

2.1 Text Editor and IDE
HTML Development can be done in either TEXT editors or IDEs. IDEs
for HTML come with advanced features like WYSIWYG - What You
See Is What You Get. WYSIWYG is a paradigm where you can drag and
drop HTML elements, and place them on your screen. Then you can
further set the attributes of the elements you placed on the screen.
For regular text editors, you can use the editor of your operating system.
Example:
 Notepad in Windows.
 TextEdit in Mac.
 vi editor in Linux.
Alternatively you can download advanced editors like Sublime Text or
Notepad++ or visual studio code. You can search for them in your search
engine and go to the download page.
When you use a Text editor, just create a new file, and add your HTML
Code. Once added, save the file to your location. Make sure to save with
extension ".HTML".
To run the file, go to the location where you saved the file and double
click the file to see the HTML Output. You will be able to see your
outputs in a browser.

IDEs for HTML:

There are several IDEs that can used for HTML editing. Some of the
popular ones are:
 Microsoft Visual Studio
 Adobe Dreamweaver
 Eclipse IDE
 IntelliJ IDEA.

We will be using Microsoft Visual Studio with Server Side

Programming.

Department of Information Technology

Kalasalingam Academy of Research and Education 4
WEB APPLICATION DEVELOPMENT / 212INT1401

3. FAMILIARIZING BASIC HTML TAGS

3.1 HTML ELEMENTS AND ATTRIBUTES:

HTML Elements are also known as HTML tags. They have the
following format.

<tagname> ... </tagname>

<tagname> is known as start tag. The text that you enter after the start
tag will be in scope until the end tag. </tagname> is known as end tag.
This will close the scope of the start tag.

Example:

<h3>The Quick Brown Fox</h3> Jumps over the lazy dog.

Note: It is possible to nest multiple HTML elements together.

HTML Attributes are mentioned within the HTML Element's start tag.
They provide modifiers for the HTML Elements. HTML Attributes will
be of the following format.

<tagname attribute1="value1" attribute2="value2"> ... </tagname>

Example:

<a href='https://kalasalingam'>KARE</a>

3.2 HTML Structure:

An HTML Document is mainly divided into two parts:
HEAD: This contains the information about the HTML document. For
Example, the Title of the page, version of HTML, Meta Data, etc.
BODY: This contains everything you want to display on the Web Page.

Department of Information Technology

Kalasalingam Academy of Research and Education 5
WEB APPLICATION DEVELOPMENT / 212INT1401

The content inside the <body> section (the white area above) will be
displayed in a browser. The content inside the <title> element will be
shown in the browser's title bar or in the page's tab.
3.3 Basic HTML Tags:
Problem
Statement:
Practice all the basic HTML statements. Note down the observations on
the changes that happens in the output page.

Procedure:
Write the HTML code in any text editor and save with .html extension.
Once the coding is done, open the saved file from the file location by
double clicking it. Observe the changes in the Web browser.

Basic HTML Tags:

Basic HTML

Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the
document
Department of ation Technology
Inform y of Research and on 6
Kalasalingam Educati
Academ
WEB APPLICATION DEVELOPMENT / 212INT1401

<title> Defines a title for the document

<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...--> Defines a comment

Formatting
Tag Description
<b> Defines bold text
<big> Not supported in HTML5. Use CSS instead.
Defines big text
<center> Not supported in HTML5. Use CSS instead.
Defines centered text
<cite> Defines the title of a work
<del> Defines text that has been deleted from a
document
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or
mood
<ins> Defines a text that has been inserted into a
document
<pre> Defines preformatted text
<small> Defines smaller text
<strike> Not supported in HTML5. Use <del> or <s>
instead.
Defines strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<u> Defines some text that is unarticulated and
styled differently from normal text

Department of Information Technology

Kalasalingam Academy of Research and Education 7
WEB APPLICATION DEVELOPMENT / 212INT1401

Sample Output for header tag:

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

Department of Information Technology

Kalasalingam Academy of Research and Education 8
WEB APPLICATION DEVELOPMENT / 212INT1401

4. HTML LINKS AND IMAGES

4.1 Links and Images:
The <a> tag defines a hyperlink, which is used to link from one page to
another. The most important attribute of the <a> element is the href
attribute, which indicates the link's destination.
By default, links will appear as follows in all
browsers: An unvisited link is underlined and
blue
A visited link is underlined and purple
An active link is underlined and red

The <img> tag is used to embed an image in an HTML page. Images are
not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image. The
<img> tag has two required attributes: src
- Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed
4.2 Problem Statement:
Design pages using multiple links and images. Try adding all attributes
of the tags. Note down the observations on the changes.

Procedure:
Write the HTML code in any text editor and save with .html extension.
Once the coding is done, open the saved file from the file location by
double clicking it. Observe the changes in the Web browser.

Attributes of <a> tag:

Attribute Value Description

download filename Specifies that the
target will be
downloaded when a
user clicks on the
hyperlink

Department of Information Technology

Kalasalingam Academy of Research and Education 9
WEB APPLICATION DEVELOPMENT / 212INT1401

href URL Specifies the URL of

the page the link goes
to
rel alternate Specifies the
author relationship between
bookmark the current document
external and the linked
help document
license
next
nofollow
noreferrer
noopener
prev
search
tag

target _blank Specifies where to

_parent open the linked
_self document
_top
type media_type Specifies the media
type of the linked
document

Attributes of <img> tag:

Attribute Value Description

alt text Specifies an alternate text for an image

height pixels Specifies the height of an image

src URL Specifies the path to the image

Department of Information Technology

Kalasalingam Academy of Research and Education 10
WEB APPLICATION DEVELOPMENT / 212INT1401

width pixels Specifies the width of an image

Sample Outputs:
Links:

Creates a link (usually

underlined and in blue
color clicking will take
to new page
<body>
<a href="http://kalasalingam.ac.in"
target=“_blank”>This is a link to Kalasalingam
University</a>
</body>

Department of Information Technology

Kalasalingam Academy of Research and Education 11
WEB APPLICATION DEVELOPMENT / 212INT1401

Images:

<body>
<img src="laptop.png" width="200" height="150">
<img src="laptop.png" width="300" height="250">
</body>

Department of Information Technology

Kalasalingam Academy of Research and Education 12
WEB APPLICATION DEVELOPMENT / 212INT1401

5. Working with Lists

5.1 Lists:
HTML has three types of lists
Unordered Lists
Ordered Lists
Description Lists
Unordered Lists: As the name indicates it is used to configure list of
unordered elements.
ul is the tag used to create unordered lists.
Example:
 python
 cobra
 crocodile
 tiger

Ordered Lists:
As the name indicates it is used to configure list of ordered elements.
1. python
2. cobra
3. crocodile
4. tiger
Description
Lists:
Description Lists use name value pairs instead of list items.
Example:
Animals
Tiger

5.2 Problem statement:

Practice all the List tags with its different attributes. Note down the
observations on the page.

Department of Information Technology

Kalasalingam Academy of Research and Education 13
WEB APPLICATION DEVELOPMENT / 212INT1401

Procedure:
Write the HTML code in any text editor and save with .html extension.
Once the coding is done, open the saved file from the file location by
double clicking it. Observe the changes in the Web browser.

HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

Unordered list can have the following options as attributes

<ul type = "square">
<ul type = "disc">
<ul type = "circle">
An ordered HTML list can have
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters
Definition Lists:
<DL>
<DT>List Name One
<DD>This is where information about List Name
One would go</DD>
</DT>

<DT>List Name Two

<DD>This is where information about List Name

Two would go</DD>

Department of Information Technology

Kalasalingam Academy of Research and Education 14
WEB APPLICATION DEVELOPMENT / 212INT1401

</DT>
</DL>

Sample
Outputs:
Unordered List:

Department of Information Technology

Kalasalingam Academy of Research and Education 15
WEB APPLICATION DEVELOPMENT / 212INT1401

Ordered List:

Department of Information Technology

Kalasalingam Academy of Research and Education 16
WEB APPLICATION DEVELOPMENT / 212INT1401

6. TABLES
6.1 HTML Tables:
A table is defined using the <table> element, and contains a number of
table cells ( <td>, for “table data” ) which are organized into table rows (
<tr>). The markup (HTML code) for a table is always based on rows,
ever columns. Table cells which act as column headers or row headers
should use the <th> (table header) element.
Table cells can be merged using the colspan and rowspan attributes.
Tables can be broken into sections using the following elements:
<thead> — Table header
<tbody> — Table body
<tfoot> — Table footer
A caption can be added to a table using the <caption> element.

A Sample page showing list of students arranged in a tabular structure

Department of Information Technology

Kalasalingam Academy of Research and Education 17
WEB APPLICATION DEVELOPMENT / 212INT1401

6.2 Problem Statement:

Design tabular structure that uses all the attributes of HTML tables.

Procedure:
Write the HTML code in any text editor and save with .html extension.
Once the coding is done, open the saved file from the file location by
double clicking it. Observe the changes in the Web browser.

Specific Attributes
The HTML <table> tag also supports the following additional attributes −
Attribute Value Description
align right Deprecated − Visual alignment.
left
center
justify
char
bgcolor rgb(x,x,x) Deprecated − Specifies the background
#hexcode color of the table.
colorname
border pixels Deprecated − Specifies the border width.
A value of "0" means no border.
cellpadding pixels or % Deprecated − Specifies the space between
the cell borders and their contents.
cellspacing pixels or % Deprecated − Specifies the space between
cells.
frame void Deprecated − Used in conjunction with the
above border attribute, specifies which side of the
below frame that makes up the border
hsides surrounding the table is displayed.
lhs
rhs
vsides
box
border
width pixels or % Deprecated − Specifies the width of the
table.

Department of Information Technology

Kalasalingam Academy of Research and Education 18
WEB APPLICATION DEVELOPMENT / 212INT1401

Sample Outputs expected:

Department of Information Technology

Kalasalingam Academy of Research and Education 19
WEB APPLICATION DEVELOPMENT / 212INT1401

7. Cascading Style Sheet

7.1 CSS:
CSS - Cascading Style Sheet
This is used to style and layout the web content. You can change font,
color, size, and spacing of your content, Split it into multiple columns, or
add animations and other decorative features. HTML5 recommends to
use CSS for doing the above. So far the HTML tags we learned can create
a simple text content with limited arrangements. See the example in the
right, how well the CSS is applied to make a good look and feel.
In short CSS can add a good look and feel to your HTML content

There are different types of selectors in CSS.

 Element Selector
 Id Selector
 Class Selector
 Universal Selector
 Group Selector
This provides us with a convenient way to select the particular element to
do the styling.
The example below used Element selector to make the changes.

Department of Information Technology

Kalasalingam Academy of Research and Education 20
WEB APPLICATION DEVELOPMENT / 212INT1401

The following uses ID selector.

The following uses Class selector:

Department of Information Technology

Kalasalingam Academy of Research and Education 21
WEB APPLICATION DEVELOPMENT / 212INT1401

Where to write the CSS?

CSS in a page can be written in three different places:
Internal CSS
CSS written with in <style> and </style> block within the file itself,
mostly in header section.
Must write it before using the element. Inline
CSS
Comes along with the element. This starts with a parameter name
“style=”
External CSS
CSS will be available in an external file / in some other domain
Referred with <link> tag
Usually used when large set of CSS need to be defined. This will make
coding easier. The content of example file is given below.

Department of Information Technology

Kalasalingam Academy of Research and Education 22
WEB APPLICATION DEVELOPMENT / 212INT1401

<head>
<style>
h1 { color: blue; }
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a sample text with css applied</h1>
<p style="color:red;">This is my first paragraph</p>
<div id="my_div_1">This is my second paragraph</div>
</body>

Department of Information Technology

Kalasalingam Academy of Research and Education 23
WEB APPLICATION DEVELOPMENT / 212INT1401

7.2 Problem Statement:

Apply different border styles and font styles with the HTML Designs.

Procedure:
Write the HTML code in any text editor and save with .html extension.
Write the CSS in the internal file or as a separate .css file
Once the coding is done, open the saved file from the file location by
double clicking it. Observe the changes in the Web browser.

7.3 Other Exercises

Use other style options with different pages like profile page, etc. Note
down the observations.

Department of Information Technology

Kalasalingam Academy of Research and Education 24
WEB APPLICATION DEVELOPMENT / 212INT1401

8. JavaScript
8.1 JavaScript

It is a programming language designed initially to interact with web page

elements. The programs here are called scripts and hence the name
“Scripting Language”. It doesn't have any relation with Java language.

JavaScript was initially designed to run on browsers alone. Now it can run
from command interface / Server environment, mobile app, gaming etc.

JavaScript enhances the page by adding interaction to the page.

This includes form validations

Interactive maps
Animated charts etc.,

JavaScript works in the following order in web pages

HTML loads -> CSS loads-> JavaScript execution

Mainly used for client side interaction (browser interaction)

How to Write Scripts:

Written between <script> and </script>

This can be placed anywhere in the web page

Usually written in <head></head>

<script> tells the browser to interpret the content as script

Always specify the type of script as type = "text/javascript“. This is an

information to the browser that you are running javascript

<html>
<body>
<script type = "text/javascript">
document.write(“Written from JavaScript!")
</script>
</body>
</html>

Department of Information Technology

Kalasalingam Academy of Research and Education 25
WEB APPLICATION DEVELOPMENT / 212INT1401

Language specific rules.

Whitespace and Line Breaks

JavaScript ignores spaces, tabs and newlines

Semicolon
Optional in JavaScript if placed one statement in a line

If two statements come in same line, must use semicolon

Always use semicolon, that is a best practice!

Case Sensitivity

Very much case sensitive language. Always follow case rules

Comments
Single line use //

Multi line enclose in /*.................. */

JavaScript Events

The change in the state of an object is known as an Event. In html, there are
various events which represents that some activity is performed by the user
or by the browser. When javascript code is included in HTML, js react over
these events and allow the execution. This process of reacting over the
events is called Event Handling. Thus, js handles the HTML events via
Event Handlers.

For example, when a user clicks over the browser, add js code, which will
execute the task to be performed on the event.

Some of the HTML events and their event handlers are:

Department of Information Technology

Kalasalingam Academy of Research and Education 26
WEB APPLICATION DEVELOPMENT / 212INT1401

Mouse events:

Event Event Handler Description

Performed

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse
comes over the element

mouseout onmouseout When the cursor of the mouse leaves

an element

mousedown onmousedown When the mouse button is pressed

over the element

mouseup onmouseup When the mouse button is released

over the element

mousemove onmousemove When the mouse movement takes

place.

Keyboard events:

Event Event Handler Description

Performe
d
Keydown onkeydown When the user press and then
release the key
& Keyup & onkeyup
Form events:

Event Event Description

Performed Handle
r
focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away from a form
element

change onchange When the user modifies or changes the

value of a form element

Department of Information Technology

Kalasalingam Academy of Research and Education 27
WEB APPLICATION DEVELOPMENT / 212INT1401

Window/Document events

Event Event Description

Performe Handle
d r
load onload When the browser finishes the loading of
the page

unload onunload When the visitor leaves the current

webpage, the browser unloads it

resize onresize When the visitor resizes the window of

the browser

8.2 Problem Statement:

8.2.1 Understand the JavaScript Syntax by adding scripts in multiple places
of the page (head, body, outside html). Also try using inline, internal
and external scripts.
8.2.2 Use event handles to handle mouse / keyboard events and use it with
proper application.

8.3 Procedure:
Open any text editor to write the HTML and JS file.
In case the JS is internal, use the same file for HTML and JS
In case the JS is external use a separate file with extension .js for the
java script files.
Run the HTML Files to see the outputs.

8.4 Exercises:

Simple programs to print some text on Screen

Simple programs to Sow alert boxes
Simple programs to do calculations

Design forms and handle events with applications like Calculator.

Department of Information Technology

Kalasalingam Academy of Research and Education 28
WEB APPLICATION DEVELOPMENT / 212INT1401

9. ASP.NET Form Designing

9.1 ASP.NET Forms
With ASP.NET Web Forms, you can build dynamic websites using a
familiar drag-and-drop, event-driven model. A design surface and
hundreds of controls and components let you rapidly build sophisticated,
powerful UI-driven sites with data access.

Before you start, make sure the following software is installed on your
computer:
Microsoft Visual Studio or Microsoft Visual Studio Community edition
is installed.

9.2 Creating a Project

1. Open Visual Studio.
2. Select New Project from the File menu in Visual Studio.
3. Create the Project - New Project Menu Item
4. Select the Templates -> Visual C# -> Web templates group on the left.
5. Choose the ASP.NET Web Application template in the center column.
6. This tutorial series is using .NET Framework 4.5.2.
7. Name your project “my name” and choose the OK button.
8. Create the Project - New Project Dialog
9. Click the Change Authentication button. Select Individual User
Accounts and click the OK button.
10. Select the Web Forms template and click the OK button.

The project will take a little time to create. When it's ready, open the
Default.aspx page.

Department of Information Technology

Kalasalingam Academy of Research and Education 29
WEB APPLICATION DEVELOPMENT / 212INT1401

You can switch between Design view and Source view by selecting an
option at the bottom of the center window. Design view displays
ASP.NET Web pages, master pages, content pages, HTML pages, and
user controls using a near-project name- view. Source view displays the
HTML markup for your Web page, which you can edit.

9.3 Running the Default Web Application

The default Web application provides a rich experience based on built-in
functionality and support. Without any changes to the default Web forms
project, the application is ready to run on your local Web browser.

Press the F5 key while in Visual Studio.

The application will build and display in your Web browser.

9.4 Exercises
Simple form design for student registration or ticket booking or login
forms etc.

Department of Information Technology

Kalasalingam Academy of Research and Education 30
WEB APPLICATION DEVELOPMENT / 212INT1401

10. ASP.NET Validation Controls

10.1 ASP.NET Validation controls

Validation is important part of any web application. User's input must
always be validated before sending across different layers of the
application.

You can use ASP.NET validation, which will ensure client, and server
validation. It work on both end; first it will work on client validation and
than on server validation. At any cost server validation will work always
whether client validation is executed or not. So you have a safety of
validation check. For client script .NET used JavaScript.
WebUIValidation.js file is used for client validation by .NET

Validation Controls in ASP.NET

An important aspect of creating ASP.NET Web pages for user input is to

be able to check that the information users enter is valid. ASP.NET
provides a set of validation controls that provide an easy-to-use but
powerful way to check for errors and, if necessary, display messages to
the user.

There are six types of validation controls in ASP.NET

 RequiredFieldValidation Control
 CompareValidator Control
 RangeValidator Control
 RegularExpressionValidator Control
 CustomValidator Control
 ValidationSummary

Validation Control Description:

RequiredFieldValidation - Makes an input control a required field
CompareValidator - Compares the value of one input control to the value
of another input control or to a fixed value

Department of Information Technology

Kalasalingam Academy of Research and Education 31
WEB APPLICATION DEVELOPMENT / 212INT1401

RangeValidator - Checks that the user enters a value that falls between
two values
RegularExpressionValidator - Ensures that the value of an input control
matches a specified pattern
CustomValidator - Allows you to write a method to handle the validation
of the value entered
ValidationSummary - Displays a report of all validation errors occurred in
a Web page

10.2 Problem statement

To write a C# program for validation control using ASP.NET web
application
10.3 Procedure
Step 1: Open Visual Studio
Step 2: Click File Menu -> Choose New -> Select Project.
Step 3:Goto Solution Explorer -> Select default.aspx -> Delete the
default.aspx
Step 4: Right click on our New project -> Add -> New Item ->
Select Web Form (WebForm1.aspx ).
Step 5: Design the form using Button, Textbox, Label and Validation
Controls.
Step 6: Re-Write (or) Edit Source page loading program.
Step 7: Save and Run our project.
Step 8: Finally view the result on our browser.
10.4 Exercises
For the Web forms already developed like a registration form or
reservation form or login form etc., apply the validation controls and
verify the same.

Department of Information Technology

Kalasalingam Academy of Research and Education 32
WEB APPLICATION DEVELOPMENT / 212INT1401

11. ASP.NET State Management

11.1 ASP.NET State Management

State Management can be defined as the technique or the way by which
we can maintain / store the state of the page or application until the
User's Session ends.

ASP.NET provides us with 2 ways to manage the state of an application.

It is basically divided into the 2 categories:
 Client Side State Management.
 Server Side State Management.

Client Side State Management

It is a way in which the information which is being added by the user or

the information about the interaction happened between the user and the
server is stored on the client's machine or in the page itself. The server
resources (e.g. server's memory) is not at all utilized during the process.

This management technique basically makes use of the following:

 View State
 Hidden Fields
 Query String
 Cookies

Server Side State Management

It is another way which ASP.NET provides to store the user's specific

information or the state of the application on the server machine. It
completely makes use of server resources (the server's memory) to
store information.

This management technique basically makes use of the following,

 Application State

Department of Information Technology

Kalasalingam Academy of Research and Education 33
WEB APPLICATION DEVELOPMENT / 212INT1401

 Session State
11.2 Problem Statement
Let us assume that someone is trying to access a banking website and he
has to fill in a form. So the person fills in the form and submits it. After
submission of the form, the person realizes he has made a mistake. So he
goes back to the form page and he sees that the information he submitted
is lost. So he again fills in the entire form and submits it again. This is
quite annoying for any user. So to avoid such problems "STATE
MANAGEMENT" have to be used to solve the problem.
11.3 Procedure
1. Start a new web site with two web forms. Let Default.aspx and
Success.aspx are two web forms.
2. Design Default.aspx page with required fields and a submit button.
3. After filling all information, it should be displayed on Success.aspx
page using
a) Client side techniques
b) Server side techniques
11.4 Exercises
Similar programs like counter, login form, registration forms etc can be
designed.

Department of Information Technology

Kalasalingam Academy of Research and Education 34
WEB APPLICATION DEVELOPMENT / 212INT1401

12. ASP.NET DB Connectivity

12.1 DB
Connectivity
ADO.NET
ADO.NET is a set of classes (a framework) to interact with data sources
such as databases and XML files. ADO is the acronym for ActiveX Data
Objects. It allows us to connect to underlying data or databases. It has
classes and methods to retrieve and manipulate data.

We can also observe various classes in the preceding diagram. They are:
 Connection Class
 Command Class
 DataReader Class
 DataAdaptor Class
 DataSet.Class

1. Connection Class
In ADO.NET, we use these connection classes to connect to the database.
These connection classes also manage transactions and connection
pooling. To learn more about connection classes, start here: Connection
in ADO.NET.

Department of Information Technology

Kalasalingam Academy of Research and Education 35
WEB APPLICATION DEVELOPMENT / 212INT1401

2. Command Class
The Command class provides methods for storing and executing SQL
statements and Stored Procedures. The following are the various
commands that are executed by the Command Class.
ExecuteReader: Returns data to the client as rows. This would typically
be an SQL select statement or a Stored Procedure that contains one or
more select statements. This method returns a DataReader object that can
be used to fill a DataTable object or used directly for printing reports and
so forth.
ExecuteNonQuery: Executes a command that changes the data in the
database, such as an update, delete, or insert statement, or a Stored
Procedure that contains one or more of these statements. This method
returns an integer that is the number of rows affected by the query.
ExecuteScalar: This method only returns a single value. This kind of
query returns a count of rows or a calculated value.
ExecuteXMLReader: (SqlClient classes only) Obtains data from an SQL
Server 2000 database using an XML stream. Returns an XML Reader
object.

3. DataReader Class
The DataReader is used to retrieve data. It is used in conjunction with
the Command class to execute an SQL Select statement and then access
the returned rows. Learn more here: Data Reader in C#.

4. DataAdapter Class
The DataAdapter is used to connect DataSets to databases. The
DataAdapter is most useful when using data-bound controls in Windows
Forms, but it can also be used to provide an easy way to manage the
connection between your application and the underlying database tables,
views and Stored Procedures. Learn more here: Data Adapter in
ADO.NET.

Department of Information Technology

Kalasalingam Academy of Research and Education 36
WEB APPLICATION DEVELOPMENT / 212INT1401

5. DataSet Class
The DataSet is the heart of ADO.NET. The DataSet is essentially a
collection of DataTable objects. In turn each object contains a collection
of DataColumn and DataRow objects. The DataSet also contains a
Relations collection that can be used to define relations among Data
Table Objects.
12.2 Procedure
Design Simple application using Form designer
Create necessary DB and tables in the MS Sql server
Create Connection with a connection string
Do the database operations with the command class User
reader class to read and show the data to the user

12.3 Experiments
Create Db Operations for Student management, reservation systems etc

Department of Information Technology

Kalasalingam Academy of Research and Education 37