Department of Computer Science and Engineering: Lab Manual

1
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
LAB MANUAL
SUBJECT: WEB TECHNOLOGIES
SUBJECT CODE: CS302
2019-20 SEM-I
WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

2
Course Description and Objectives:
This course offers the basic concepts used to develop static web pages and it also provides knowledge
of Internet programming concepts, Web Servers and Web Application Servers, Design Methodologies
with concentration on Object-Oriented concepts. The objective of this course is to build web
applications using JSP and client side script technologies
Course Outcomes:
The student will be able to:
• Develop a dynamic webpage using Java script and DHTML.
• Connect a Java program to a DBMS and perform insert, update and delete operations on DBMS
table.
• Write a server side Java application called Servlet to catch form data sent from client, process it
and store it in the database.
• Write a server side Java application called JSP to catch form data sent from client and store it in
the database.
SKILLS:
✓ Perform client side validation using Java script.
✓ Store and retrieve data using JDBC.
✓ Generate dynamic contents using Servlets.
✓ Generate dynamic contents using JSPs.
✓ Overcome problems in Servlets and JSP using Struts Programs.
✓ Develop a working system of web application or web site.

3
LIST OF EXPERIMENTS
1. Create a HTML document to demonstrate lists, links, images, pre, font, heading tags…5
2. Create a HTML document to display your class timetable …………9
3. Create a HTML page having four frames named …………10
a. top
b. center
c. bottom
d. left
The top frame should contain company logo and title. The bottom frame should contain Copy
right information. The left frame should contain various links like Home, Products, Services,
Branches, about us, etc. When clicked on those links, the contents should appear in the display
on to center frame.
4. Create a HTML document to demonstrate Form Elements that includes Form, input-text,
password, radio, checkbox, hidden, button, submit, reset, label, text area, select, option, file
upload…………14
5. Write a HTML program with at least two <h1>, two images, two buttons and appropriate
CSS to display………….16
a. All <h1> with font-size 12pt, and bold in Verdana font using Inline CSS.
b. All <img> with border color yellow, thickness 10px using Document Level CSS
c. All <input type=’button’> should change background color to red on mouse over
them using External CSS.
6. Design a HTML page having a text box and four buttons via Factorial, Fibonacci, Prime and
Palindrome. When a button is pressed an appropriate java script function should be called to
display the following:…………18
a. factorial of that number
b. Fibonacci series up to that number
c. prime numbers up to that number
d. is it palindrome or not
7. Write Java script program to demonstrate the following objects with at least
five methods:………..20
a. MATH
b. STRING
c. ARRAY
d. DATE
8. Write a JavaScript program to perform arithmetic operations when the corresponding button is
pressed……………22
9. Write a java script program to display message on ONBLUR and ONFOCUS events…..24
10. Write a Javascript program for form Validation……….26
11. Create an XML document where CSEBooks is the root tag, it consists of 5 books named
as(book1, book2, book3, book4, book5) whose copies of books are 10 and provide the child tag
such as author, title, pages, price for all books………27
12. For the above program, provide an associate DTD………28
13. Create an XML document where automobiles is the root tag, it consists of 5 vehicles

4
VFSTR UNIVERSITY 82 named as (vehicle1, vehicle2, vehicle3, vehicle4, vehicle5) and use
attributes type, model, engine number, color, cc……….29
14. For the above program, provide an associated Schema……..30
15. Write a Java program to connect to a database server using JDBC and insert 10 employees
information of user choice in to employee table……..31
16. Write a JDBC Program to retrieve and display data from a table employee……32
17. Develop a simple Servlet to display Welcome to Servlet………..33
18. Write a servlet program to demonstrate Life cycle of Servlet………34
19. Develop a Servlet to validate user name and password with the data stored in Servlet
configuration file. Display authorized user if she/he is authorized else display
unauthorized user……………….35
20. .Write a Servlet program to store student details sent from registration form in to the
database……..36
21. Write JSP Program to store student information sent from registration page into
Database……….38
22. Develop a program to validate username and password that are stored in database
using JSP………….40
23. Write an appropriate JSP page to insert, update and delete data in student table in a single
application with proper linking of JSP pages and session management……….41

5
PROGRAM NO: 1DATE:
AIM:Create a design using the basic concepts of HTML.
PROCEDURE:
1. Open a document and save it with program name.html

2. By using li and ul tag create a ordered list and unordered list should be created.
3. To each list create a link by using href attribute.
4. In one of the page, create a separate html page which has one heading with some
text followed by paragraph using p tag. Which will be followed for remaining
headings also. Each para will be separated by hr tag.
5. An image should be displayed at the top right side.
6. Different pages should be created and displayed by clicking the links which are
displayed by using lists.
OUTPUT:

6

7

8
Test cases:
1. Html page should be displayed with different kinds of lists in which one should be
ordered list and unordered lists.
2. Each list name should be made as link. By clicking each link of list, another page
should be displayed
3. Different pages to be displayed successfully by clicking each link.

9
PROGRAM NO.: 2DATE:
AIM: Create a design using the concept of tables.
PROCEDURE:
1. Create a document and save it with html

2. By using table tag create a table.
3. For heading use the th tag and for data use the td tag
4. Background color should be applied for each table row.
5. For merging rows or columns, use colspan and rowspan
6. A time table format table should be displayed at last as per the conditions given in
the question.
OUTPUT:

10
Test Cases:
1. A html page should be displayed which shows some clear description of time table.
2. Each row should be showed with different kinds of colors.
3. There should be few merging of rows and columns should be there.
PROGRAM NO: 3 DATE:
AIM:Create a design using the concept of frames.
ALGORITHM:
1. create a html document by saving it with program name.html

2. by using frame tag, frames should be created
3. partition of columns, rows will be made by frameset tag
4. Top of the frame should contain of different images
5. In the middle left frame, 3 links should be created by anchor tag and target should be
set on which frame, that particular page should be displayed.
6. Each separate html pages should be created with different images by using img tag,
lists by using li tag, paragraph by using p tag. When we click the links, pages should
be properly displayed
OUTPUT

11

12

13
TEST CASES:
1. A html page should be displayed which shows the division of page by 3 columns.
2. On the 1st top frames. Different images to be displayed.
3. In the second frame, on the left corner 3 links should be displayed.
4. By clicking that links different pages should be displayed in the middle of the frame
or right side of the frame.
5. At the last bottom footer frame, some copyright should be displayed.

14
PROGRAM NO: 4DATE:
AIM:Create a Application Form.
PROCEDURE:
1. Open a word document ans save it with .html

2. open html tag and write code for text boxes for username, password, phone number
3. create a radio button for gender
4. create a checkboxes for qualification
5. create a dropdown box for select statement
6. create a file button for uploading files.
7. create a button for submit, reset and cancel
8. save the program and open the document in browser.
OUTPUT:

15
Test cases:
1. Text boxes should be displayed for entering the information
2. radio button should be displayed to select gender
3. For multiple selection of input checkbox should be created for selection course
4. files should be successfully submitted by choose file button
5. after giving input data, submit button should be clicked to submit database
6. Reset button is displayed to reset the database
7. cancel button should be displayed to cancel the data.

16
PROGRAM NO: 5DATE:
PROGRAM NO.: 5DATE:

Aim: Write a HTML program with at least two <h1>, two images, two buttons and appropriate
CSS to display
a. All <h1> with font-size 12pt, and bold in Verdana font using Inline CSS.
b. All <img> with border color yellow, thickness 10px using Document Level CSS
c. All <input type=’button’> should change background color to red on mouse over
them using External CSS.
ALGORITHM:
1. Create a html page and save it with *.html extension.
2. Define h1 tag with inline style having font-size 12pt, and bold in Verdana font
3. Define a image tag with yellow border and 10px thickness.
4. Create a button and change the background color to red on mouse over
OUTPUT

17

18
Test Cases:
1. h1 tag should be displayed as in the question
2. <img> with border color yellow, thickness 10px using Document Level CSS should be
displayed
3. <input type=’button’> should change background color to red on mouse over

them using External CSS based on the code.
PROGRAM NO.:6DATE:
PROGRAM NO.: 6
AIM: Design a HTML page having a text box and four buttons via Factorial, Fibonacci, Prime and
Palindrome. When a button is pressed an appropriate java script function should be called to
display the following:
a. factorial of that number
b. Fibonacci series up to that number
c. prime numbers up to that number
d. is it palindrome or not?
PROCEDURE:
Create a html page and save it with *.html extension.
Textboxes are to be created in order to enter the data.
4 buttons are to be created by using the button tag.
When clicking the button, corresponding functions are to be executed.
OUTPUT:

19
Testcases:
1. Two text boxes should be displayed, where one text box is for entering the input and one for
displaying the output.

2. Buttons are to be displayed, where after clicking them, corresponding functionalities are to
be executed.

20
PROGRAM NO.:7DATE:
AIM: Write Java script programs to demonstrate the following objects with at least five methods:
a. Math.
b. String.
c. Array.
d. Date.
Algorithm:
1. For performing Math object methods, use functions abs(), ceil(), pow(), round(), sqrt() with
the syntax math.function form.

2. create a JS String using new keyword. Use the functions charAt(), concat(), replace(), slice()
and substr() in the form.

3. Create a JS array using new keyword and initialize values. Use the functions concat(), pop(),
unshift(), reverse(), slice() and sort() in the form.

4. Create a date object in the form and apply functions getFullYear(), getDate(), getDay(),
getMath() and getHours().
OUTPUT:

21

22
PROGRAM NO.: 8 DATE:
AIM: Write a JavaScript program to build a calculator perform arithmetic operations.
ALGORITHM:
1. HTML page should be created in a document by saving it with program cal. html
2. One textboxe should be created in order to enter the data and displaying the output
3. 15 or more buttons are created by using the button tag.
4. In those 15 or more button assign 0 to 9 digits and symbols of arithmetic operations
5. After clicking the respective arithmetic button it should perform respective operation.
6. In the head tag, script tag should be opened.
7. Inside the script tag, a function should be created to write the logic for all arithmetic
operations.
8. Create a variables. To each variable, store the number which user enters in the
textbox by getElemntById function.
9. In the same way result should be stored in one more variable by using id of result
textbox.
OUTPUT:

23

24
Test Cases:
1. Create all arithmetic buttons on a web page
2. Each one should perform specific task.
3.One text boxes should be displayed , this text box is for taking input and for
displaying the output inside it.
4.15 or more buttons has to display, after clicking equal button result of the
arithmetic operations number should be done and successfully displayed inside the result
textbox.
PROGRAM NO.: 9DATE:

AIM:
Write a java script program to display message on ONBLUR and ONFOCUS events
PROCEDURE:
1. Create a html page and save it with *.html extension.
2. Create a text field with ONBLUR and ONFOCUS events.
3. Define function to change background color of textfield and ie called when
onfocus event is generated4
4. Define function to change background color of textfield and ie called when
onblur event is generated.
OUTPUT:

25

26
PROGRAM NO.: 10. DATE:
AIM: Write a JavaScript program for form validation
Procedure:
1 create an html page and save it with *.html extension.
2. Create a html application form as shown below.
3. Text boxes, radio buttons, checkboxes, dropdown button, file button, submit button, reset button
and cancel button should be viewed in the form in an organized format.
4. Apply css styles to the page like background color and logo at the top of the page.
5. Add JS for the registraion form for validation.
OUTPUT:
Test Cases:
1. Name field should accept only alphabets either uppercase or lowercase
2. password field should accept any special characters,symbols,numers , and aplhbeticals
27
3.Email field must and should contains @ symbol, without @ it should not accept any
string.
PROGRAM NO.: 11. DATE:
Aim : Create an XML document where CSE Books is the root tag,it consists of 5 books
named as(book1, book2, book3, book4, book5) whose copies of books are 10 and provide
the child tag such as author,title,pages,price for all books
PROCEDURE:
1. create a xml document and save it with program name .xml
2. write an xml code for author and books.
3. create one DTD document and save it as name.dtd
4. write the dtd code for the given data
5. save the file

OUTPUT:
Testcases:
1. XML content should be displayed on web page.
2. All the conditions should be accepted in the given question.

28
AIM: For the above program, provide an associate DTD.

OUTPUT:
Testcases:

29
PROGRAM NO.: 13DATE:
AIM: Create an XML document where automobiles is the root tag, it consists of 5 vehicles
VFSTR UNIVERSITYnamed as (vehicle1, vehicle2, vehicle3, vehicle4, vehicle5) and use
attributes type, model,engine number, color, cc.
Procedure:
OUTPUT:
Testcases:

30
PROGRAM NO.: 14.DATE:
AIM: For the above program, provide an associated Schema.
Procedure:
OUTPUT:

31
AIM: Write a Java program to connect to a database server using JDBC and insert 10 employees
information of user choice in to employee table.?
ALGORITHM:
1. Loading the JDBC driver
2. Creating a Connection to Data Base
3. Creating a statement object
4. Executing SQL statements
5. Closing the connection
OUTPUT:
Test Cases:
1. Connect to the jdbc driver successfully
2. Displaying employee details from database

32
AIM: Write a JDBC Program to retrieve and display data from a table Employee
ALGORITHM:
1.Loading the JDBC driver
2.Creating a Connection to Data Base
3.Creating a statement object
4.Executing SQL statements(Like select query for retrieving data from a table)
5.Closing the connection
OUTPUT:
Test cases:
1. Connect to the jdbc driver successfully

2. Displaying employee details from database
3. Rows which are updated should be displayed

33

AIM: Develop a simple Servlet to display Welcome to Servlet?
ALGORITHM:
1. import required packages
2. Create a servlet by extending HttpServlet and override doGet() or doPost()
method.
3. Create PrintWriter object to send output to client (browser).
Output:
Test case:
1. Required string should be displayed on a webpage
2. The string should be displayed through only servlet program.

34
AIM: Write a servlet program to demonstrate Life cycle of Servlet?
ALGORITHM:
1. import required packages.
2. Create a servlet by extending HttpServlet and override init() ,doGet() and destroy() methods
3. Create PrintWriter object to send output to client (browser).
OUTPUT:
Test case:
1. Required string should be displayed on a webpage
2. The string should be displayed through only servlet program.

35
AIM: Develop a Servlet to validate user name and password stored in the database. Display
authorized user is she/he is authorized else display unauthorized user
1. Create a html page with username and password fields.
2. Create a servlet class by extending HttpServlet class and override doPost() method
3. Retrieve username and password values from html form using getParameter() method.
4. Create a connection with Mysql database using JDBC.
5. Retrieve username and password values from the database.
6. Compare the username and password which are retrieved from html form and database.
7. If both are same then display authorized otherwise display un authorized using
printwriter object
Output:
Test cases:
1. Username field must and should accept only alphabeticals

2. Password field should accept any character,should not be visible to the user.

36
AIM: Write a Servlet program to store data entered in a registration form into a database
ALGORITHM:
1. Create a html page of registration.

2. Create a servlet class by extending httpservlet
3. Create a method dopost() to access inputs from the textboxes, what user has given
4. Create a variable of string datatype and access the data from particular textbox name
by getparameter method.
5. Create a connection with the jbdc driver by loading it.
6. Create a statement object to execute query
7. Write the query to insert values
8. Execute the query by executeupdate() method.
9. After execution display whether successfully inserted or not.
OUTPUT:

37

38
Test cases:
1. Html page should be successfully displayed

2. User should able to enter the data successfully in html page.
3. After inserting the input, it should get a statement of successfully inserted message as
output
4. Open command prompt and connect to the sql
5. Execute the query to display the details of what user has entered.
6. User details should be successfully displayed.

AIM: Write a JSP program to store data entered in a registration form into a database
ALGORITHM:
1. Create a html page of registration.

2. Create a jsp class by extending httpservlet
3. Create a method dopost() to access inputs from the textboxes, what user has given
4. Create a variable of string datatype and access the data from particular textbox name
by getparameter method.
5. Create a connection with the jbdc driver by loading it.
6. Create a statement object to execute query
7. Write the query to insert values
8. Execute the query by executeupdate() method.
9. After execution display whether successfully inserted or not.
OUTPUT:

39

40
Test cases:
1. Html page should be successfully displayed

2. User should able to enter the data successfully in html page.
3. After inserting the input, it should get a statement of successfully inserted
message as output
4. Open command prompt and connect to the sql
5. Execute the query to display the details of what user has entered.
6. User details should be successfully displayed.

AIM: Develop a program to validate username and password that are stored in database using
JSP.
ALGORITHM:
1. Create a html page with username and password fields.
2. Create a JSP code and save it as .jsp.
3. Retrieve username and password values from html form using getParameter() method.
4. Create a connection with Mysql database using JDBC.
5. Retrieve username and password values from the database.
6. Compare the username and password which are retrieved from html form and database.
7. If both are same then display authorized otherwise display un authorized user.

41
Output:

AIM:Write an appropriate JSP page to insert, update and delete data in student table in a single
application with proper linking of JSP pages and session management.
ALGORITHM:
1. Define a jsp file to insert data into student table.
2. Define a jsp file to update the data of student table.
3. Define a jsp file to delete data in student table.
4. Now create a main JSP file and import all above created jsp files.

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

Department of Computer Science and Engineering: Lab Manual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Department of Computer Science and Engineering: Lab Manual

Uploaded by

Copyright:

Available Formats

1

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SUBJECT: WEB TECHNOLOGIES

SUBJECT CODE: CS302

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

14. For the above program, provide an associated Schema……..30

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

PROGRAM NO: 1DATE:

AIM:Create a design using the basic concepts of HTML.

1. Open a document and save it with program name.html

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

PROGRAM NO.: 2DATE:

AIM: Create a design using the concept of tables.

1. Create a document and save it with html

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

PROGRAM NO: 3 DATE:

AIM:Create a design using the concept of frames.

1. create a html document by saving it with program name.html

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

PROGRAM NO: 4DATE:

AIM:Create a Application Form.

1. Open a word document ans save it with .html

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

1. Text boxes should be displayed for entering the information

2. radio button should be displayed to select gender

4. files should be successfully submitted by choose file button

6. Reset button is displayed to reset the database

7. cancel button should be displayed to cancel the data.

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

PROGRAM NO: 5DATE:

PROGRAM NO.: 5DATE:

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

1. h1 tag should be displayed as in the question

3. <input type=’button’> should change background color to red on mouse over

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

displaying the output.

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

the syntax math.function form.

and substr() in the form.

unshift(), reverse(), slice() and sort() in the form.

getMath() and getHours().

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

AIM: Write a JavaScript program to build a calculator perform arithmetic operations.

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

PROGRAM NO.: 9DATE:

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

WEB TECHNOLOGIES LAB D EPARTMENT OF CSE

PROGRAM NO.: 10. DATE:

AIM: Write a JavaScript program for form validation

PROGRAM NO.: 11. DATE:

1. create a xml document and save it with program name .xml

2. write an xml code for author and books.