ABES Engineering College, Ghaziabad

B. Tech. (CS) 5th Semester (Section – All)

Session 2024-25 (ODD Semester)

Lab Manual

Course Title: Web Technology Lab (BCS-552) Name of Faculty: Ms. Shruti Keshri/Ms.Sonia
Lamba/Ms.Satwik Teotia

S.No List of Experiments CO

Write HTML program for designing your institute website. Display departmental information 1
1 of your institute on the website.

Write HTML program to design an entry form for student details/employee 1

2 information/faculty details.

Develop a responsive website using CSS and HTML. Website may be for 2
3 tutorial/blogs/commercial website.

Write programs using HTML and Java Script for validation of input data. 3
4
Write a program in XML for creation of DTD, which specifies set of rules. Create a style sheet 1
5 in CSS/ XSL & display the document in internet explorer.

Create a Java Bean for Employee information (EmpID, Name, Salary, Designation and 4
6 Department).

Build a command-line utility using Node.js that performs a specific task, such as converting 4
7 text to uppercase, calculating the factorial of a number, or generating random passwords.

Develop a script that uses MongoDB's aggregation framework to perform operations like 4
grouping, filtering, and sorting. For instance, aggregate user data to find the average age of
8
users in different cities.

Assume four users user1, user2, user3 and user4 having the passwords pwd1, pwd2, pwd3 5
and pwd4 respectively. Write a servlet for doing the following: 1. Create a Cookie and add
9 these four user id’s and passwords to this Cookie. 2. Read the user id and passwords entered
in the Login form and authenticate with the values available in the cookies.

Create a table which should contain at least the following fields: name, password, email-id, 5
phone number Write Servlet/JSP to connect to that database and extract data from the tables
10 and display them. Insert the details of the users who register with the web site, whenever a
new user clicks the submit button in the registration page.

Write a JSP which insert the details of the 3 or 4 users who register with the web site by using 5
registration form. Authenticate the user when he submits the login form using the user name
11
and password from the database.
 Design and implement a simple shopping cart example with session tracking API. 5
12
Beyond Syllabus

13 Program to implement Filters in Web Application 4

14 Program to implement Listeners in Web Application 4

 PROGRAM: 1

OBJECTIVE - Write HTML program for designing your institute website. Display departmental information of
your institute on the website.

THEORY:

HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language

 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page.

SOURCE CODE:

OUTPUT
 PROGRAM: 2
OBJECTIVE- Write HTML program to design an entry form for student details/employee
information/faculty details.

THEORY:
Forms are used in webpages for the user to enter their required details that are further send it to the
server for processing. A form is also known as web form or HTML form. Examples of form use are
prevalent in e-commerce websites, online banking, and online surveys etc.
An HTML form is used to collect data from the user and send it to the server. Consider a scenario
where we incorporate a Form section into our HTML webpage. Whenever the browser loads that
page and encounters the <form> element, it will generate controls on the page allowing users to enter
the required information according to the type of control.
Create an HTML Form
The HTML <form> tag is used to create an HTML form. There are a few more tags which are
required to create an actual form - all those tags are briefly described in this post.
The <form> element contains various predefined tags and elements termed as form controls.
SOURCE CODE

OUTPUT:
 PROGRAM: 3

OBJECTIVE: Develop a responsive website using CSS and HTML. Website may be for tutorial/ blogs/
commercial website

THEORY

CSS stands for Cascading Style Sheets, it is a simple design language intended to simplify the
process of making web pages presentable using CSS properties. CSS specify how an HTML element
should be displayed on the web page. If you think of the human body as a web page then CSS is
styling part of the body. Like color of the eyes, size of the nose, skin tone, etc.

Types of CSS
There is no types in CSS, it actually refer - "In how many ways we can use CSS?" So there are three
ways to use CSS on HTML document.
 Inline CSS: Inline CSS are directly applied on the HTML elements and it is the most prioritize
CSS among these three. This will override any external or internal CSS.
 Internal CSS: Internal CSS are defined in the HTML head section inside of <style> tag to let
the browser know where to look for the CSS.
 External CSS: External CSS are defined in a separate file that contains only CSS properties,
this is the recommended way to use CSS when you are working on projects. It is easy to main -
tain and multiple CSS files can be created and you can use them by importing it into your
HTML document using HTML <link> tag.

SOURCE CODE

OUTPUT
 PROGRAM: 4
OBJECTIVE: Writing program in XML for creation of DTD. Create a style sheet in CSS/ XSL & display the
document in internet explorer.
THEORY: The Extensible Markup Language (XML) is a simple text-based format for representing structured
information: documents, data, configuration, books, transactions, invoices, and much more. It was derived from an older
standard format called SGML (ISO 8879), in order to be more suitable for Web use.
What is XML Used For?
XML is one of the most widely-used formats for sharing structured information today: between programs, between
people, between computers and people, both locally and across networks.
DTD stands for Document Type Definition. It defines the legal building blocks of an XML document. It is used to define
document structure with a list of legal elements and attributes.
Purpose of DTD
Its main purpose is to define the structure of an XML document. It contains a list of legal elements and define the
structure with the help of them.
Checking Validation
Before proceeding with XML DTD, you must check the validation. An XML document is called "well-formed" if it
contains the correct syntax.
SOURCE CODE:
INDEX.XML

OUTPUT:
 PROGRAM: 5
OBJECTIVE- Write programs using HTML and Java Script for validation of input data.

THEORY
Forms are used in webpages for the user to enter their required details that are further send it to the server for
processing. A form is also known as web form or HTML form. Examples of form use are prevalent in e-commerce
websites, online banking, and online surveys etc.

Validating a form

The data entered into a form needs to be in the right format and certain fields need to be filled in order to
effectively use the submitted form. Username, password, contact information are some details that are mandatory
in forms and thus need to be provided by the user.

SOURCE CODE

OUTPUT
 PROGRAM: 6
OBJECTIVE- Create a Java Bean for Employee information (EmpID, Name, Salary, Designation and
Department).

THEORY

A JavaBean is a Java class that should follow the following conventions:

It should have a no-arg constructor.
It should be Serializable.
It should provide methods to set and get the values of the properties, known as getter and setter methods.
Why use JavaBean?
According to Java white paper, it is a reusable software component. A bean encapsulates many objects into one
object so that we can access this object from multiple places. Moreover, it provides easy maintenance.
JavaBean Properties
A JavaBean property is a named feature that can be accessed by the user of the object. The feature can be of any
Java data type, containing the classes that you define.
A JavaBean property may be read, write, read-only, or write-only. JavaBean features are accessed through two
methods in the JavaBean's implementation class:
1. getPropertyName ()
For example, if the property name is firstName, the method name would be getFirstName() to read that property.
This method is called the accessor.
2. setPropertyName ()
For example, if the property name is firstName, the method name would be setFirstName() to write that property.
This method is called the mutator.
Advantages of JavaBean
The following are the advantages of JavaBean:/p>
The JavaBean properties and methods can be exposed to another application.
It provides an easiness to reuse the software components.
Disadvantages of JavaBean
The following are the disadvantages of JavaBean:
JavaBeans are mutable. So, it can't take advantages of immutable objects.
Creating the setter and getter method for each property separately may lead to the boilerplate code.

SOURCE CODE

OUTPUT