Scribd
Upload
26 views37 pages

CSE 5th Semester - Web Technologies Laboratory - CCS375 - Lab Manual

The document outlines a lab manual for a web technologies course at Grace College of Engineering, detailing various exercises that involve creating web pages using HTML and CSS. It includes specific tasks such as creating an image map, implementing cascading style sheets, and displaying college information with different styling techniques. The manual provides sample code and algorithms for each exercise to guide students in their practical assignments.

Uploaded by

thirumurugan311522104056
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views37 pages

CSE 5th Semester - Web Technologies Laboratory - CCS375 - Lab Manual

The document outlines a lab manual for a web technologies course at Grace College of Engineering, detailing various exercises that involve creating web pages using HTML and CSS. It includes specific tasks such as creating an image map, implementing cascading style sheets, and displaying college information with different styling techniques. The manual provides sample code and algorithms for each exercise to guide students in their practical assignments.

Uploaded by

thirumurugan311522104056
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Click on Subject/Paper under Semester to enter.

Environmental Sciences
Professional English and Sustainability -
Professional English - - II - HS3252 Discrete Mathematics GE3451
I - HS3152 - MA3354
Statistics and Theory of Computation
Matrices and Calculus Numerical Methods - Digital Principles and - CS3452
3rd Semester

4th Semester
- MA3151 MA3251 Computer Organization
1st Semester

2nd Semester

- CS3351 Artificial Intelligence


Engineering Graphics and Machine Learning
Engineering Physics - - CS3491
- GE3251 Foundation of Data
PH3151
Science - CS3352
Database Management
Physics for
Engineering Chemistry System - CS3492
Information Science Data Structure -
- CY3151 - PH3256 CS3301

Basic Electrical and


Algorithms - CS3401
Problem Solving and Electronics Engineering Object Oriented
Python Programming - - BE3251 Programming - CS3391 Introduction to
GE3151 Operating Systems -
Programming in C -
CS3451
CS3251

Computer Networks - Object Oriented


CS3591 Software Engineering
- CCS356
Compiler Design - Human Values and
5th Semester

CS3501 Embedded Systems Ethics - GE3791


7th Semester

8th Semester
6th Semester

and IoT - CS3691


Cryptography and Open Elective 2
Cyber Security - Open Elective-1 Project Work /
CB3491
Open Elective 3 Intership
Distributed Computing Elective-3
- CS3551 Open Elective 4
Elective-4
Elective 1
Management Elective
Elective-5
Elective 2
Elective-6
All Computer Engg Subjects - [ B.E., M.E., ] (Click on Subjects to
enter)
Programming in C Computer Networks Operating Systems
Programming and Data Programming and Data Problem Solving and Python
Structures I Structure II Programming
Database Management Systems Computer Architecture Analog and Digital
Communication
Design and Analysis of Microprocessors and Object Oriented Analysis
Algorithms Microcontrollers and Design
Software Engineering Discrete Mathematics Internet Programming
Theory of Computation Computer Graphics Distributed Systems
Mobile Computing Compiler Design Digital Signal Processing
Artificial Intelligence Software Testing Grid and Cloud Computing
Data Ware Housing and Data Cryptography and Resource Management
Mining Network Security Techniques
Service Oriented Architecture Embedded and Real Time Multi - Core Architectures
Systems and Programming
Probability and Queueing Theory Physics for Information Transforms and Partial
Science Differential Equations
Technical English Engineering Physics Engineering Chemistry
Engineering Graphics Total Quality Professional Ethics in
Management Engineering
Basic Electrical and Electronics Problem Solving and Environmental Science and
and Measurement Engineering Python Programming Engineering
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

BE- Computer Science and Engineering

Anna University Regulation: 2021

CCS375- Web Technologies

III Year/V Semester

Lab Manual

Prepared By,

Mrs. S. Porkodi, AP/CSE

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 1 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

Ex No: 1 CREATE A WEB PAGE WITH THE


FOLLOWING USING HTML.
Date:

AIM:
1. To Create a web page with the following using HTML.
• To embed an image map in a web page.
• To fix the hot spots.
• Show all the related information when the hot spots are clicked.
ALGORITHM:
• Create a html file with map tag.
• Set the source attribute of the img tag to the location of the image and also set the use map
attribute.
• Specify an area with name, shape and href set of the appropriate value.
• Repeat step3 as many hot spots you want to put in the map.
• Create html file for each and every hot spots the user will select the particular location it shows
information about it.
PROGRAM:
/*mapping.html*/
<html>
<head>
<title>India Map</title>
<head>
<body bgcolor="PINK">
<font face="Monotype Corsiva" color="BLUE" size="6">
<marquee direction="left" behavior="alternate">INDIA MAP
</marquee>
</font>
<hr size="6" color="RED">
<map name="pagemap">
<area shape="rect" coords="194,151,247,219" href="map1.html">
<area shape="rect" coords="291,268,384,337" href="map2.html">
<area shape="rect" coords="100,337,197,384" href="map3.html">
<area shape="rect" coords="236,543,344,577" href="map4.html">
</map>
<img src="india.bmp" usemap="#pagemap">
</body>
<font color="#ff0000" size="5">

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 2 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

<p><b>Hints:</b><i>Click on the Name of the Cities in the map


to know itsdescription</i></p>
</html>
/*map1.html*/
<html>
<body bgcolor="SKYBLUE">
<font face="Monotype Corsiva" size="18" color="RED">
<center><b><i><tt>Delhi is the capital of our INDIA<br> and <br>More IT
companies areCamped at Delhi</tt></i></b></center>
<a href="mapping.html">Home Page</a>
</font>
</body>
</html>

/*map2.html*/
<html>
<body bgcolor="SKYBLUE">
<font face="Times New Roman" size="18" color="RED">
<center><b><i>Calcutta is the wealthy city in WEST BENGAL<br> and <br>it
has Famous"Sunderbans Forests"</i></b></center>
<a href="mapping.html">Home Page</a>
</font></body></html>
/*map3.html*/
<html>
<body bgcolor="DARKGREEN">
<font face="Times New Roman" size="12" color="RED">
<center>MUMBAI is the capital of Maharashtra<br> and <br>it has
Famous IndiaGate</center>
<a href="mapping.html">Home Page</a>
</font>
</body>
</html>

/*map4.html*/
<html>
<body bgcolor="BLACK">
<font face="Times New Roman" size="12" color="RED">
<center>Chennai is hte capital of Tamil Nadu<br> and <br>More IT companies
are camped at Chennai</center>
<a href="mapping.html">Home Page</a>
</font></body></html>
OUTPUT:

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 3 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

RESULT: Thus creation of an webpage using cascading style sheet has been developed successfully.

ii)Using Javascript to display the above

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 4 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Map Example</title>
<style>
#map-container {
position: relative;
}

#info-box {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
display: none;
}
</style>
</head>
<body>

<div id="map-container">
<img src="c:\Users\A\Downloads\example-map-image.jpg" alt="Example Image Map"
usemap="#hotspots">

<map name="hotspots">
<!-- Define hot spots with coordinates -->
<area shape="rect" coords="10,10,100,100" alt="Hotspot 1" onclick="showInfo('Hotspot 1
Information')">
<area shape="circle" coords="150,150,50" alt="Hotspot 2" onclick="showInfo('Hotspot 2
Information')">
<area shape="poly" coords="300,10,400,50,350,100" alt="Hotspot 3"
onclick="showInfo('Hotspot 3 Information')">
</map>
</div>

<div id="info-box"></div>

<script>
function showInfo(info) {
// Display related information in the info-box
var infoBox = document.getElementById("info-box");
infoBox.innerHTML = info;
infoBox.style.display = "block";
}
</script>

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 5 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

</body>
</html>

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 6 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

Ex No:2 CREATE A WEB PAGE WITH ALL TYPES OF


CASCADING STYLE SHEETS.
Date:

AIM:
To create a webpage with the following using html to embedded the style sheet

ALGORITHM:

Step1: Create html file with the style tag, inside head tag.
Step2: Set the style such as font-family, font-size, color, left etc, for
the headingh1,h2,…h6 and respectively.
Step3: Close the head tag.
Step4: Specify the heading and information required inside
the body tag.Step5: Close the opened tag.

PROGRAM:
<! DOCTYPE html >

<html xmlns="http://www.w3org/1999/xhtml">

<head>

<title>Embedded style sheet</title>

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 7 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

<style type="text/css">
h1
{

font-family:arial;
color:green;
}

h2

font-family:arial;
color:red;
left:20px;
}

h3

font-family:arial;
color:blue;
}

font-sise:14pt;

font-family:verdana;

</style>

</head>

<body>

<h1>
<center>This is created using embedded style sheet

</center>

</h1>

<h2>This line is allingned left and red colored;

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 8 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

</h2>

<p>

The embedded style sheet is the most commonly used


style sheet This paragragh is return in verdana font
with font size of 14.
</p>

<h3>

This is a blue <a href="colorname.html">colored</a> line

</h3>

</body>

</html>

OUTPUT:

(ii) To Create a web page that displays college information using various style
sheets.

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 9 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Information</title>

<!-- Inline Styles -->


<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background-color: #c683d7;
color: white;
text-align: center;
padding: 1em;
}

section {
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
color: #333;
}

p{
line-height: 1.6;
color: #666;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 10 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

position: fixed;
bottom: 0;
width: 100%;
}
</style>

<!-- Internal Styles -->


<style>
h2 {
color: #008080;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 8px;
}
</style>

<!-- External Styles -->


<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
<h1> Grace College Information</h1>
</header>

<section>
<h2>About Us</h2>
<p>Welcome to our college! We are committed to providing quality education
and fostering a supportive learning environment.</p>
</section>

<section>
<h2>Courses Offered</h2>
<ul>
<li>CSE</li>
<li>EEE</li>
<li>ECE</li>
<li>B.Tech: AI-DS</li>
<li>CIVIL</li>
<li>MECH</li>

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 11 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

</ul>
</section>

<section>
<h2>Contact Information</h2>
<p>Email: [email protected]</p>
<p>Phone: +91 9585511757</p>
<p>Website:www.gracecoe.org</p>
</section>

<footer>
&copy; 2023 College Information
</footer>

</body>
</html>

Output:

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 12 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

RESULT:Thus creation of an webpage using cascading style sheet has beendeveloped successfully.

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 13 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

CLIENT SIDE SCRIPTS FOR


Ex No:3 VALIDATING WEB FORM CONTROLS
USING DHTML
Date:

AIM:

To develop a program for validating web form control using DHTML.

ALGORITHM:
Step1:Start the program.
Step2: Define the title within the tag.
Step3: Give the script type within the script tag.
Step4: Validate each and every column as the box with the if condition.
Step5: If empty value are given or the block term are next then it is verified
with certaincondition.
Step6:If values is empty then a message is been displayed.
Step7: Form is designed with GUI tool is description.
Step8: All buttons are processed accordingly.
Step9: Stop the program.
PROGRAM:

//Webforms.html

<html>
<head>
<script type='text/javascript'>
function formValidator()
{
var firstname=document.getElementById('firstname');
var lastname=document.getElementById('lastname');
var addr=document.getElementById('addr');
var zip=document.getElementById('zip');
var Countries=document.getElementById('Countries');
var username=document.getElementById('username');
var email=document.getElementById('email');
var dd=document.getElementById('dd');
var mm=document.getElementById('mm');
var yyyy=document.getElementById('yyyy');
var comment=document.getElementById('comment');
var password=document.getElementById('password');
if(isAlphabet(firstname,"Please enter only letters for your First name"))
{
if(isAlphabet(lastname,"Please enter only letters for your Last name"))
{

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 14 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

if(isNumeric(dd,"Please enter a date"))


{
if(madeSelection(mm,"Please Choose"))
{
if(isNumeric(yyyy,"Please enter a year"))
{
if(isAlphanumeric(addr,"Enter Numbers and letters only for address"))
{
if(isNumeric(zip,"please enter a valid zip code"))
{
if(madeSelection(Countries,"Please Choose"))
{
if(lengthRestriction(username,6,8))
{
if(isAlphanumeric(password,"Enter Numbers and letters only for password"))
{
if(emailValidator(email,"Please enter a valid email address"))
{
if(notEmpty(comment,"Please fill the comment"))
{
document.write("<b><i>Thank's for submitting your details</i></b>");
alert("Successful Entry!!");
return true;
}}}}}}}}}}}}
return false;
}
function notEmpty(elem,helperMsg)
{
if(elem.value.length==0)
{
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
function isNumeric(elem,helperMsg)
{
var numericExpression=/^[0-9]+$/;
if(elem.value.match(numericExpression))
{
return true;
}
else
{
alert(helperMsg);elem.focus(); return false;
}

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 15 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

}
function isAlphabet(elem,helperMsg)
{
var alphaExp=/^[a-zA-Z]+$/; if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem,helperMsg)
{
var alphaExp=/^[0-9, a-z a-z, 0-9, A-Z A-Z, - 0-9 . ]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);elem.focus(); return false;
}
}
function lengthRestriction(elem,min,max)
{
var unput=elem.value;
if(unput.length>=min&&unput.length<=max)
{
return true;
}
else
{
alert("Please enter between "+min+" and "+max+" charactters");
elem.focus();
return false;
}
}
function madeSelection(elem,helperMsg)
{
if(elem.value=="Please Choose")
{
alert(helperMsg);elem.focus(); return false;
}
else

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 16 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

{
return true;
}
}
function emailValidator(elem,helperMsg)
{
var emailExp=/^[0-9 a-z . a-z 0-9]+\@[a-z]+\.[a-z]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else
{
alert(helperMsg);elem.focus(); return false;
}
}
</script>
<h1><center><b>
<font color="#347235">Please Enter YourDetails</font></b></center>
</h1>
</head>
<body bgcolor="LIGHTGREEN">
<hr>
<form onsubmit='return formValidator()' height="50%">
<table height="50%" border="3pt" align="center">
<tr><td><b>
<font color="#347235">First Name:</font></b></td>
<td><input type='text' id='firstname'/></td></tr><br />
<tr><td><b>
<font color="#347235">Last Name:</font></b></td>
<td><input type='text' id='lastname'/></td></tr><br />
<tr><td><b>
<font color="347235">Date of Birth(dd/mm/yyyy):</font></b></td>
<td><input type='text' id='dd' />
<select id='mm'>
<option>Please Choose</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 17 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<input type='text' id='yyyy' /></td></tr><br />
<tr><td><b>
<font color="#347235">Address:</font></b></td>
<td><input type='text' id='addr'/></td></tr><br />
<tr><td><b>
<font color="#347235">Zip code:</font></b></td>
<td><input type='text' id='zip'/></td></tr><br />
<tr><td><b>
<font color="#347235">Countries:</font></b></td>
<td><select id='Countries'>
<option>Please Choose</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="America">America</option>
<option value="India">India</option>
<option value="Tanzania">Tanzania</option>
<option value="Zimbabwe">Zimbabwe</option>
<option value="Switzerland">Switzerland</option>
</select></td></tr><br />
<tr><td><b>
<font color="#347235">Username(6-8 characters):</font></b></td>
<td><input type='text' id='username' /></td></tr><br />
<tr><td><b><font color="#347235">Password:</font></b></td>
<td><input type='password' id='password' /></td></tr><br />
<tr><td><b><font color="#347235">Email:</font></b></td>
<td><input type='text' id='email' /></td></tr><br />
<tr><td><b>
<font color="#347235">Comment:</font></b></td>
<td><textarea id='comment'cols="20"rows="5"
name="Address"></textarea></td></tr><br />
<tr><td><input type='submit' value='Check Form' /></td></tr>
</table>
</form>
</body>
</html>
OUTPUT:

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 18 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

Apply validation

RESULT:Thus developing client side scripts for validating web from controls usingDHTML has been
verified.

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 19 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

Ex No :5 Write programs in Java using Servlets:


● To invoke servlets from HTML forms.
Date: ● Session Tracking.

AIM

To . Write programs in Java using Servlets:


● To invoke servlets from HTML forms.
● Session Tracking.
ALGORITHM:

Step1: In html program, define the html, head and title tag.

Step2: Then the title is Student Information Form and close the title and head tag.

Step3: Define the body tag inside the body tag create form and table simultaneously.

Step4: The table consists of following information Roll no, Student name, Address, Phone no

and total marks.

Step5: In the servlet program, import the summary package and create a ownservlet class

extends with generic servlet.

Step6: In the service method defined to request and response.

Step7: Create the object and for print writer and get writer() value.

Step8: The enumeration object get the servlet request parameter.

Step9: Create objects for string method and it is displayed another object value

received get parameter of name received and displayed the value received

value.

PROGRAM:
//index.jsp
<html>
<head>
<title>Processing get requests with data</title>
</head>
<body>
<form action = "Servlet3" method = "get">

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 20 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

<b><p><label>Enter Your name Please!!


<br />
<input type = "text" name = "firstname" />
<input type = "submit" value = "Submit" />
</label></p></b>
</form>
</body>
</html>

//Servlet3.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Servlet3 extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException
{
String firstName = request.getParameter( "firstname" );
response.setContentType( "text/html" );
PrintWriter out = response.getWriter();
// send XHTML document to client
// start XHTML documentout.println( "<html>" );
// head section of documentout.println( "<head>" );
out.println("<title>Processing get requests with data</title>" );
out.println( "</head>" );
// body section of document out.println( "<body>" );
out.println( "<h1>Hello " + firstName + ",<br />" );
out.println( "Welcome to Servlets!</h1>" );
out.println( "</body>" );
// end XHTML document
out.println( "</html>" );
out.close(); // close stream to complete the page
}
public String
getServletInfo() {
return "Short
description";
}
}

Program (ii)

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 21 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

Session tracking
GfgSession.java
// Java Program to Illustrate Creation and last-accessed
// Times for a Session
// Import required java libraries
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

// Extend HttpServlet class


public class GfgSession extends HttpServlet
{
public void doGet(HttpServletRequest request,HttpServletResponse response)throws
ServletException, IOException
{

// Create a session object if it is already not


// created.
HttpSession session = request.getSession(true);

// Get session creation time.


Date createTime= new Date(session.getCreationTime());

// Get last access time of this web page.


Date lastAccessTime = new Date(session.getLastAccessedTime());

String title = "Welcome Back to GraceCollege";


Integer visitCount = new Integer(0);
String visitCountKey = new String("visitCount");
String userIDKey = new String("userID");
String userID = new String("GFG");

// Check if this is new comer on your web page.


if (session.isNew()) {
title = "Welcome to GraceCollege";
session.setAttribute(userIDKey, userID);
}
else {
visitCount = (Integer)session.getAttribute( visitCountKey);
visitCount = visitCount + 1;
userID= (String)session.getAttribute(userIDKey);
}
session.setAttribute(visitCountKey, visitCount);

// Set response content type

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 22 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

response.setContentType("text/html");
PrintWriter out = response.getWriter();

String docType= "<!doctype html public \"-//w3c//dtd html 4.0


"+"transitional//en\">\n";
out.println(docType + "<html>\n" + "<head><title>" + title + "</title></head>\n"+

"<body bgcolor = \"#f0f0f0\">\n"


+ "<h1 align = \"center\">" + title + "</h1>\n"
+ "<h2 align = \"center\">Gfg Session Information</h2>\n"
+ "<table border = \"1\" align = \"center\">\n"
+

"<tr bgcolor = \"#949494\">\n"


+ " <th>Session info</th><th>value</th>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>id</td>\n"
+ " <td>" + session.getId() + "</td>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>Creation Time</td>\n"
+ " <td>" + createTime + " </td>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>Time of Last Access</td>\n"
+ " <td>" + lastAccessTime + "</td>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>User ID</td>\n"
+ " <td>" + userID + "</td>"
+ "</tr>\n"
+

"<tr>\n"
+ " <td>Number of visits</td>\n"
+ " <td>" + visitCount + "</td>"
+ "</tr>\n"

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 23 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

+ "</table>\n"
+ "</body>"
+ "</html>");
}
}
web.xml
<web-app>
<servlet>
<servlet-name>GfgSession</servlet-name>
<servlet-class>GfgSession</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>GfgSession</servlet-name>
<url-pattern>/GfgSession</url-pattern>
</servlet-mapping>
</web-app>

OUTPUT:

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 24 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

RESULT:Thus the invocation of servlet from HTML from has been developed
successfully.

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 25 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

Ex No :7 Write programs in Java to create three-


tier applications using JSP and Databases
Date:

AIM:
To write a java servlet program to conduct online examination and to
display student mark list available in a database.
ALGORITHM:
Step1: Create a html file with form tag.
Step2: The form tag action=”http://localhost:8080/example/servlet/exam”.
Step3: Create a two textbox(name & seat number).
Step4: The 5 question are defined into true or false model and close the all tags.
Step5: Import the necessary packages and declare class, class name in exam.
Step6: Declare the connection, statement and result set object.
Step7: Use the deposit () for check the connection in JDBC:ODBC driver.
Step8: The data are inserting into corresponding table.
Step9: The execute update () are update the database.
Step10: Display the table in after html file compilation.
PROGRAM:

//index.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome to Online Examination!!!!</title>
</head>
<body>
Welcome to Online Examination!!!!
<form action="exam" method="get">
<label><p> Enter Your name Please!!<br/> <input type="text"name="name"/>
<br/>
<input type="submit" name="SUBMIT"/>
</p></label>
</form>
</body>
</html>
//exam.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 26 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

public class exam extends HttpServlet {


protected void doGet(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException { response.setContentType("text/html");
PrintWriter out=response.getWriter(); String name=request.getParameter("name");
out.println("<html>");
out.println("<head>");
out.println("<title>Online Examination</title>");
out.println("</head>");
out.println("<body bgcolor=PINK>");
out.println("<h2 align=center>Online Examination</h2><hr>");
out.println("<h3 align=center> Welcome Mr."+name+"</h3><hr>");
out.println("<h4><u>Terms and Conditions:</u></h4>"); out.println("<ul
type=disc>");
out.println("<li>The Paper consists a set of five questions.</li>");
out.println("<li>Every question consists of two options.</li>");
out.println("<li>All must be answered</li></ul><hr>");
out.println("<center><h5><u>Your Questions</u></h5></center>");
out.println("<hr>");
out.println("<form method=get action=exam2>");
out.println("<p>1.Operating System is a ................ </p>");
out.println("<input type=radio name=q1 value=0>Hardware");
out.println("<br>");
out.println("<input type=radio name=q1
value=1>Software");out.println("<hr>");
out.println("<p>2.Developer of C Language is ............... </p>");
out.println("<br>");
out.println("<input type=radio name=q2 value=0>Dennis Richee");
out.println("<br>");
out.println("<input type=radio name=q2 value=1>James Thompson");
out.println("<hr>");
out.println("<p>3.Which of the following is a multitasking,multiuser,multiprocessing);
out.println("OS. ....... </p>");
out.println("<br>");
out.println("<input type=radio name=q3 value=0>MS DOS");out.println("<br>");
out.println("<input type=radio name=q3 value=1>Windows NT");
out.println("<hr>");
out.println("<p>4.Father of Computers is ................ </p>");
out.println("<br>");
out.println("<input type=radio name=q4 value=1>Charles babbage");
out.println("<br>");
out.println("<input type=radio name=q4 value=0>Charles Dickson");
out.println("<hr>");
out.println("<p>5.What is the current generation of computers ?</p>");
out.println("<br>");
out.println("<input type=radio name=q5 value=0>Fifth");out.println("<br>");
out.println("<input type=radio name=q5 value=1>Sixth");

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 27 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

out.println("<hr>");
out.println("<input type=submit value=Done>");
out.println("</form>");
out.println("</body>");
out.println("</html>");
}
public String getServletInfo() { return "A Servlet of the user";
}
}
//exam2.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class exam2 extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException
{
int count=0,j; response.setContentType("text/html");
PrintWriter out=response.getWriter();
String q1=request.getParameter("q1");
String q2=request.getParameter("q2");
String q3=request.getParameter("q3");
String q4=request.getParameter("q4");
String q5=request.getParameter("q5");
if(q1.equals("1"))
{
count=count+1;
}
if(q2.equals("1"))
{
count=count+1;
}
if(q3.equals("1"))
{
count=count+1;
}
if(q4.equals("1"))
{
count=count+1;
}
if(q5.equals("1"))

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 28 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

{
count=count+1;
}
out.println("<html>");
out.println("<head><title>Examination Results</title></head>");
out.println("<body>");
out.println("<h2 align=center<Online Examination</h2><hr>");
out.println("<h3>Number of Questions answered correctly:</h3>"+count); if(count>=3)
{
out.println("<hr><h3>Congrats!!! You Have Passed!!!</h3><hr>");
out.println("<h4><b>Try Other Tests!!</b></h4>");
}
else
{
out.println("<hr><h3>Sorry!!! You Have Failed!!!</h3><hr>");
out.println("<h4><b>Try Again:</b></h4>");
}
out.println("</body>");
out.println("</html>");
}
public String getServletInfo() { return "A Servlet of the User";
}
}

RESULT:Thus the creation of three tier application using database and JSP
has been verified successfully.

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 29 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

Ex No : 8
XML SCHEMA FOR STUDENT DETAILS
Date:

To write a program for implementing student information using using XML – Schema –
XSLT/XSL..

ALGORITHM:

Step1:The XML document reference to the XSL document.

Step2:The create the student information in the student tag and

insert the same information about the student.

Step3:Close all opened tags.

Step4:In XSL document create a html file include the student information in

table format. Step5:Close the necessary tags.

PROGRAM:

//student.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="student.css"?>
<!DOCTYPE student SYSTEM "student.dtd">
<students>
<student>
<sno>801041</sno>
<sname>S.Soundarapandian</sname>
<dob>05/081991</dob>
<address>Neyveli</address>
<m1>80</m1>
<m2>90</m2>
<m3>95</m3>
</student>
<student>
<sno>801049</sno>
<sname>R.Vadivelan</sname>
<dob>22/07/1990</dob>

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 30 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

<address>Pondicherry</address>
<m1>90</m1>
<m2>95</m2>
<m3>80</m3>
</student>
<student>
<sno>801037</sno>
<sname>R.Satheesh</sname>
<dob>21/01/1991</dob>
<address>Kanyakumari</address>
<m1>80</m1>
<m2>90</m2>
<m3>95</m3>
</student>
</students>
//student.css
Student {
background.color:#aabbcc;width:100%;}
Sno { display:block; color:GREEN;
font.size:25pt; } Sname { display:block;
color:BLACK; font.size:20pt; }Dob {
display:block; color:BLUE; font.size:15pt; }
Address { display:block; color:BLUE;
font.size:15pt; }m1 { display:block;
color:BLUE; font.size:15pt; }
m2 { display:block; color:BLUE;
font.size:15pt; }m3 { display:block;
color:BLUE; font.size:15pt;}
//student.dtd`
<?xml version="1.0"?>
<!ELEMENT students (student+)>
<!ELEMENT student (sno,sname,dob,address,m1,m2,m3)>
<!ELEMENT sno (#PCDATA)>
<!ELEMENT sname (#PCDATA)>
<!ELEMENT dob (#PCDATA)>
<!ELEMENT address (#PCDATA)>
<!ELEMENT m1 (#PCDATA)>
<!ELEMENT m2 (#PCDATA)>
<!ELEMENT m3 (#PCDATA)>

OUTPUT:

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 31 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

RESULT:Thus the creation of XSL document using Xml has been verified
successfully.

EX 7 OUTPUT:

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 32 of 33
www.BrainKart.com
4931_Grace College of Engineering,Thoothukudi

CCS375_WT

https://play.google.com/store/apps/details?id=info.therithal.brainkart.annauniversitynotes Page 33 of 33
Click on Subject/Paper under Semester to enter.
Environmental Sciences
Professional English and Sustainability -
Professional English - - II - HS3252 Discrete Mathematics GE3451
I - HS3152 - MA3354
Statistics and Theory of Computation
Matrices and Calculus Numerical Methods - Digital Principles and - CS3452
3rd Semester

4th Semester
- MA3151 MA3251 Computer Organization
1st Semester

2nd Semester

- CS3351 Artificial Intelligence


Engineering Graphics and Machine Learning
Engineering Physics - - CS3491
- GE3251 Foundation of Data
PH3151
Science - CS3352
Database Management
Physics for
Engineering Chemistry System - CS3492
Information Science Data Structure -
- CY3151 - PH3256 CS3301

Basic Electrical and


Algorithms - CS3401
Problem Solving and Electronics Engineering Object Oriented
Python Programming - - BE3251 Programming - CS3391 Introduction to
GE3151 Operating Systems -
Programming in C -
CS3451
CS3251

Computer Networks - Object Oriented


CS3591 Software Engineering
- CCS356
Compiler Design - Human Values and
5th Semester

CS3501 Embedded Systems Ethics - GE3791


7th Semester

8th Semester
6th Semester

and IoT - CS3691


Cryptography and Open Elective 2
Cyber Security - Open Elective-1 Project Work /
CB3491
Open Elective 3 Intership
Distributed Computing Elective-3
- CS3551 Open Elective 4
Elective-4
Elective 1
Management Elective
Elective-5
Elective 2
Elective-6
All Computer Engg Subjects - [ B.E., M.E., ] (Click on Subjects to
enter)
Programming in C Computer Networks Operating Systems
Programming and Data Programming and Data Problem Solving and Python
Structures I Structure II Programming
Database Management Systems Computer Architecture Analog and Digital
Communication
Design and Analysis of Microprocessors and Object Oriented Analysis
Algorithms Microcontrollers and Design
Software Engineering Discrete Mathematics Internet Programming
Theory of Computation Computer Graphics Distributed Systems
Mobile Computing Compiler Design Digital Signal Processing
Artificial Intelligence Software Testing Grid and Cloud Computing
Data Ware Housing and Data Cryptography and Resource Management
Mining Network Security Techniques
Service Oriented Architecture Embedded and Real Time Multi - Core Architectures
Systems and Programming
Probability and Queueing Theory Physics for Information Transforms and Partial
Science Differential Equations
Technical English Engineering Physics Engineering Chemistry
Engineering Graphics Total Quality Professional Ethics in
Management Engineering
Basic Electrical and Electronics Problem Solving and Environmental Science and
and Measurement Engineering Python Programming Engineering

You might also like