IP Record Till EXP 10 504

Ex. No. : 1 a Date : 28/07/2023 Reg. No.
: 210701127
HTML – Basic Elements
Aim:
Program to design a resume using HTML basic elements table, styles, links and list.
Procedure:
1. Create your resume on a word processor
2. Save your word-processed resume in text (.txt) format.
3. Open your text resume in an editor.
4. Add the required html tags.
5. Tables are defined with the table element. Use the border attribute specifies the table’s border
width in pixels. To create a table without a border, set border to "0". Use the tr element to
define an individual table row. The columns in the head section are defined with th elemen
Code:
<html>
<head>
<title>
RESUME
</title>
</head>
<body>
<h1><center>RESUME</center></h1>
<h2><font color="Blue">Personal Details:</font></h2>
<p><b>Name:</b> P.Kanaga Shanmugam</p>
<p><b>Date of Birth:</b> 06/06/2003</p>
<p><b>Email:</b> pkanagashanmugam03@gmail.com</p>
<p><b>Phone Number:</b> 7810550817</p>
<p><b>Address:</b> No.3,Aspiran Garden 1st street,<br>Kilpauk,<br>Chennai-600010</p>
<h2><font color="Blue">Career Objective:</font></h2>
<p>To be placed in a Corporate Company where I would get an opportunity to showcase my skillsets
and develop several other skills which will help my in the future</p>
<h2><font color="Blue">Educational Qualification:</font></h2>
<p>
<ol>
<li>Graduated B.E Computer Science and Engineering from <b>Rajalakshmi Engineering
College</b> with a CGPA of 8.5</li>
<li>Completed 12th from <b>Bhavan's Rajaji Vidyashram</b> with 96.6%</li>
<li>Completed 12th from <b>Bhavan's Rajaji Vidyashram with</b> 95%</li>
</ol>
</p>
<h2><font color="Blue">Personal Achievements:</font></h2>
<p>
<ul>
<li>Was a part of Student Council Member of Bhavan's Rajaji Vidyashram</li>
<li>Represented school in a National Integration Camp held between 01/06/2019 and 06/06/2019 in
Punjab</li>
<li>Was a subject topper of "Computer Science" subject during 12th Board Exams</li>
<li>Participated in several inter college and intra college symposiums</li> <li>Completed an
internship on <b>Web Development</b> from <a href="https://codebindtechnologies.com/"
target="_blank">Code Bind Technologies</a></li> <li>Completed an internship on <b>UI/UX
Designing</b> from <a href="https://www.smarther.co/" target="_blank">Smarther</a></li>
</ul>
</p>
<p align="right"><b>Your Sincerely</b><br><br>
P.Kanaga Shanmugam
</p>
</body>
</html>
Design:
Result:
Thus the given design was successfully developed and output was verified.
Ex. No. : 1 b Date : 29/07/ Reg. No. : 210701127
=
HTML – Element - Tables
Aim:
Program to design a class timetable using HTML basic elements.
Procedure:
1. Tables are defined with the table element
2. Use the border attribute specifies the table’s border width in pixels. To create
a table without a border, set border to "0".

3. Use the tr element to define an individual table row.
4. The columns in the head section are defined with th elements.
5. Data cells contain individual pieces of data and are defined with td (table data)
elements within each row.
6. Table cells are sized to fit the data they contain. Document authors can create
larger data cells by using attributes rowspan and colspan. The values assigned
to these attributes specify the number of rows or columns occupied by a cell.
7. Use the attribute rowspan = "2" to allow the cell to use two vertically adjacent
cells (thus the cell spans two rows).
8. Use the attribute colspan = "4" to widen the header cell to span four cells.
Code:
<html>
<head>
<title>III CSE B</title>
</head>
<center><b>RAJALAKSHMI ENGINEERING
COLLEGE<br>DEPARTMENT OF COMPUTER SCIENCE AND
ENGINEERING<br>Time Table for Academic Year 2023-2024(Odd
Semester-JUL'23-NOV'23)</b></center><br>
<center><b>Year:III Sem:V Sec:B &emsp;Wef:27.07.2023</b></center>
<br>
<table cellspacing="1" border="1px solid black" width=100%>
<tr>
<th colspan=2>Class Incharge</th>
<th colspan=8>Class Committee
Chairperson</th>
</tr>
<tr>
<td
colspan=2><center>Mrs.M.Jaeyalakshmi</center></td>
<td
colspan=8><center>Dr.K.Anand</center></td>
</tr>
<tr>
<th>DAY</th>
<th>8.00 - 9.00</th>
<th>9.00 - 9.50</th>
<th rowspan="6">B<br>R<br>E<br>A<br>K</th>
<th>10:10 - 11:00</th>
<th>11:00 - 11:50</th>
<th>5/L<br>11:50-12:30/12:40</th>
<th>L/5<br>12:30/12:40-1:20</th>
<th>1:20 - 2:10</th>
<th>2:10 - 3:00</th>
</tr>
<tr>
<td><center>TUESDAY</center></td>
<td colspan="2"><center>CS19501 TOC<br>A 204<center></td>
<td><center>AI19341 POAI<br>A 204<center></td>
<td><center>LUNCH<center></td>
<td colspan="2"><center>OAI1903 RPA<br>A 105<center></td>
<td colspan="2"><center>CS19P06 HCI<br>A 204<center></td>
</tr>
<tr>
<td><center>WEDNESDAY</center></td>
<td colspan="2"><center>AI19341 POAI<br>A 204<center></td>
<td colspan="2"><center>CS19542 IP<br>A 105<center></td>
<td><center>CS19541 CN<br>A 204<center></td>
<td colspan="2"><center>CS19542 IP/CS19541 CN LAB<br><span
style="color: #ff0000">TLFL1/JL1</span><center></td>
</tr>
<tr>
<td><center>THURSDAY</center></td>
<td colspan="2"><center>CS19P06 HCI/CS19541 CN LAB<br><span
style="color: #ff0000">TLFL5/JL1</span><center></td> <td
colspan="2"><center>CS19542 IP<br>A 105<center></td>
<td><center>CS19501 TOC<br>A 304<center></td>
<td colspan="2"><center>VAP<center></td>
</tr>
<tr>
<td><center>FRIDAY</center></td>
<td colspan="2"><center>AI19341 POAI/CS19542 IP LAB<br><span
style="color: #ff0000">TLGL3/TLFL1</span><center></td>
<td><center>CS19501 TOC<br>A 204<center></td>
<td colspan="2"><center>OAI1903 RPA<br>A 105<center></td>
<td colspan="2"><center>CS19541 CN<br>A 204<center></td>
</tr>
<tr>
<td><center>SATURDAY</center></td>
<td colspan="2"><center>CS19P06 HCI/CS19542 IP LAB<br><span
style="color: #ff0000">TLFL5/TLFL1</span><center></td> <td
colspan="2"><center>CS19542 IP/CS19541 CN LAB<br><span
style="color: #ff0000">JL1/JL2</span><center></td>
<td><center>COUNSELLING<br>A 303<center></td>
<td colspan="2"><center>CS19541 CN/AI19341 POAI LAB<br><span
style="color: #ff0000">TLFL5/TLGL3</span><center></td>
</tr>
<table>
</html>
Design:
Result:
Ex. No. : 2 a Date : 05/08/2023 Reg. No. : 210701504
HTML – Image Map
Aim:
Program to create and use image maps:
i. To embed a map in a web page. ii.
To fix the hot spots in that map.
iii. Show all the related information when the hot spots are clicked.
Procedure:
1. Define an image maps by using a map element.
2. Use attribute id to identify the image map.
3. Define hotspots with area elements.
4. Use attribute href to specify the link’s target (i.e.,the resource to which to link).
5. Use attributes shape and coords to specify the hotspot’s shape and coordinates, respectively.
6. Use attribute alt to provide alternate text for the link.
7. Use the markup to create a rectangular hotspot (shape = "rect") for the coordinates specified
in the coords attribute (For rectangular hotspots, the required coordinates are those of the
upper-left and lower-right corners of the rectangle).
8. Use the map area to assign the shape attribute "poly" to create a hotspot in the shape of a
polygon using the coordinates in attribute coords (These coordinates represent each vertex,
or corner, of the polygon).
9. Use the map area to assign the shape attribute "circle" to create a circular hotspot (the coords
attribute specifies the circle’s center coordinates and the circle’s radius, in pixels).
10. Use an image map with an img element, the img element’s usemap attribute is assigned the
id of a map.
11. Locate the image map within the same document so internal linking is used.
Code:
Map.html:
<html>
<head>
<title>INDIA MAP</title>
</head>
<body>
<img src="india-map-2019.jpg" alt="India Map" usemap="#map">
<map name="#map">
<area
shape="rect" coords="300,968,400,995" alt="TamilNadu" href="TamilNadu.html">
<area
shape="circle" coords="250,861,35" alt="Karnataka" href="Karnataka.html">
<area
shape="poly" coords="975,800,400,831,400,874,345,874,337,823" alt="Andhra Pradesh"
href="Andhra Pradesh.html">
</map>
</body>
</html>
TamilNadu.html:
<html><head><title>Tamil Nadu</title></head>
<body>
<h1><center><font color="purple">Tamil Nadu</font></center></h1>
<h3>STATE DETAILS</h3>
<p>
&ensp;Capital:Chennai<br>
&ensp;Chief minister: M. K. Stalin<br>
&ensp;Language: Tamil<br>
&ensp;Governor: R. N. Ravi<br>
&ensp;Area: 130,060 km²<br>
</p>
<a href="Map.html">Back</a>
</body>
</html>
Design:
Karnataka.html:
<body>
<h1><center><font color="pink">KARNATAKA</font></center></h1>
<p>
&ensp;Capital:Bengaluru<br>
&ensp;Chief minister: Siddaramaiah<br>
&ensp;Language: Kannada<br>
&ensp;Governor: Thawar Chand Gehlot<br>
</p>
</body>
</html>
Andhra Pradesh.html:
<body>
<h1><center><font color="pink">ANDHRA PRADESH</font></center></h1>
<p>
&ensp;Capital:Amaravati<br>
&ensp;Chief minister: YS Jagan Mohan Reddy<br>
&ensp;Language: Telugu<br>
&ensp;Governor: S. Abdul Nazeer<br>
</p>
</body>
</html>
Result:
Thus the given design was successfully developed and output was verufued.
Ex. No. : 2 b Date : 11/08/ Reg. No. : 210701127
=
CSS
Aim:
Program to design web pages using basic elements, hyperlinks and to
perform web navigation using CSS.
Procedure:
Inline Style Sheets
1. Create inline styles that declare an individual element’s format using attribute style.
2. Apply inline styles to p elements to alter their font size and color.
3. Use the attribute style to specify the style for an element.
4. Create CSS property (the font-size property) followed by a colon and a value.
5. Use the two properties, font-size and color, separated by a semicolon. Embedded Style Sheets
1. Use the style element to define the embedded style sheet.
2. Place the Styles in the head to apply matching elements in the entire document, not just to a
single element.
3. Use the type attribute to specify specifies the Multipurpose Internet Mail
Extension (MIME) type that describes a file’s content. CSS documents use the MIME type
text/css.
4. Use the body of the style sheet to declare the CSS rules for the style sheet.
5. The body of each rule is enclosed in curly braces ({ and }).
6. Declare a style class. Class declarations are preceded with a period and are applied to
elements only of that class.
7. Use the property name is followed by a colon (:) and the value of that property. Multiple
properties are separated by semicolons (;).
Linking External Style Sheets
1. Create a link element, which uses the rel attribute to specify a relationship between the current
document and another document.
2. Declare the linked document to be a stylesheet for this document.
3. Use the type attribute to specify the MIME type as text/css.
4. Use the href attribute provides the URL for the document containing the style sheet.
Code:
Main.html:
<html>
<head>
<title>REC</title>
<link rel="stylesheet" href="Style.css">
</head>
<div class="header">
<h3><center><u>RAJALAKSHMI</u><br>ENGINEERING
COLLEGE</h3>
</div>
<div id="tag">
<p style="text-align:right;"><b>Rajalakshmi Nagar,Thandalam,Chennai602
105</b>    </p>
</div>
<body>
<div class="sidebar"><font size="+2">

<h4><b>CSE</b></h4>
<p id="intro"><a class="int" href="REC
COLLEGE.html">Introduction</a></p>
<p id="intro"><a class="int"
href="Opportunities.html">Opportunities</a></p>
href="Faculty.html">Faculty Members</a></p>
<p id="intro"><a class="int" href="Lab
Facility.html">Lab Facility</a></p>
<p id="intro"><a class="int">News</a></p>
</div>
<div class="content">
<p>Welcome to the Department of
CSE</font></p>
</div>
</body>
</html>
Design:
REC COLLEGE.html:
<html>
<head>
<title>REC</title>
</head>
<h3><center><u>RAJALAKSHMI</u><br>ENGINEERING
COLLEGE</h3>
</div>
<div id="tag">
<p style="text-align:right;"><b>Rajalakshmi Nagar,Thandalam,Chennai602
105</b>    </p>
</div>
<body>
<h4><b>CSE</b></h4>
<p id="intro"><a class="int" href="REC
COLLEGE.html">Introduction</a></p>
href="Opportunities.html">Opportunities</a></p>
href="Faculty.html">Faculty Members</a></p>
<p id="intro"><a class="int" href="Lab
Facility.html">Lab Facility</a></p>
</div>
<h4>Vision</h4>
To promote highly ethical and innovative computer professionals through
excellence in teaching, training and research.
<h4><font="color:Purple">Mission</font></h4>
<ul>
<li>To produce globally competent professionals, motivated to learn the
emerging technologies and to be innovative in solving real world problems.</li>
<li>To promote research activities amongst the students and the members of
faculty that could benefit the society.</li>
<li>To impart moral and ethical values in their profession.</li>
</ul>
</div>
</body>
</html>
Opportunities.html:
<html>
<head>
<title>REC</title>
</head>
<h3><center><u>RAJALAKSHMI</u><br>ENGINEERING COLLEGE</h3>
</div>
<div id="tag">
<p style="text-align:right;"><b>Rajalakshmi Nagar,Thandalam,Chennai-602
105</b>    </p>
</div>
<body>
<h4><b>CSE</b></h4>
<p id="intro"><a class="int" href="REC COLLEGE.html">Introduction</a></p>
<p id="intro"><a class="int" href="Opportunities.html">Opportunities</a></p>
<p id="intro"><a class="int" href="Faculty.html">Faculty Members</a></p>
<p id="intro"><a class="int" href="Lab Facility.html">Lab Facility</a></p>
</div>
<h2>Opportunities</h2>
<p>
Computer science and engineering graduates are the pillars of the current and emerging information
era. Opportunities include pursuing Master of Science Programs in reputed Universities of U.S and
Europe. and taking up research assignments in Hardware, System Software, Computer Engineering,
Multimedia, Networking and Communication areas.<br><br>
Computer science is a broad field with many different job paths to choose from. With so many
options, it can be difficult to decide on a certain route to study and focus on. Even if mastering only
one specific subject of interest in Computer Science is possible, it is necessary to acquire all of the
fundamentals connected to other areas in order to implement and use that subject of interest. For
example, when writing Server-side scripts, we must know how to obtain data from databases and/or
perform HTTP requests to retrieve information/outputs from APIs, in addition to dealing with the
Frontend elements and delivering accordingly. So, in order to use databases and retrieve data via
APIs, we must first understand the fundamental ideas and applications.
br><br> </p>
</div>
</body>
</html>
Lab Facility.html:
<html>
<head>
<title>REC</title>
</head>
</div>
<div id="tag">
105</b>    </p>
</div>
<body>
<div class="sidebar"><dont size="+2">
<h4><b>CSE</b></h4>
</div> <div class="content">
<h2>Lab Facility</h2>
<p> <table border="1px solid black">
<tr> <th>S.No</th>
<th>Lab Name</th>
<th>Equipment Details</th></tr>
<tr> <td>1.</td>
<td>Game Programming</td>
<td>Software: Unity, Python, Blender, Java, Apache Server, Open Office, GCC,
Oracle, Visual Studio (Atom, NetBeans, Eclipse, Andriod Studio)<br>
Platform : Linux<br>
No. of Systems : 37 Area of the Lab : 84.54 Sq.m.</td></tr>
<tr> <td>2.</td>
<td>DBMS Lab</td>
<td>Software: SQL, MySQL, Oracle Academy Modules, OpenSQL<br>
No. of Systems : 35 Area of the Lab : 84.54 Sq.m.</td></tr>
<tr> <td>3.</td>
<td>Mobile Applications Lab</td>
<td>Software: Visual Studio (Atom, NetBeans, Eclipse, Andriod Studio), Oracle,
Java<br>
Platform : Linux, Fedora<br>
No. of Systems : 40 Area of the Lab : 84.54 Sq.m.</td>
</tr></table>
</p> </div>
</body>
</html>
Faculty.html:
<html>
<head>
<title>REC</title>
</head>
</div>
<div id="tag">
105</b>    </p>
</div>
<body>
<h4><b>CSE</b></h4>
</div>
<h2>Faculty Members</h2>
<p> <table border="1px solid black">
<tr>
<th>S.No</th>
<th>Name</th>
<th>Designation</th>
</tr>
<tr>
<td>1</td>
<td>Dr.V.Murali Bhaskaran</td>
<td>Professor and Dean</td>
</tr>
<tr>
<td>2.</td>
<td>Dr.P.Kumar</td>
<td>Head and Director</td>
</tr>
<tr>
<td>3.</td>
<td>Dr. Revathy P</td>
<td>Professor</td>
</tr>
</table>
</p>
</div>
</body>
</html>
Style.css:
.header{ background-
color:#800080;
}
h3{
padding:0;
color:white;
}
h2{
padding:0;
color:blue;
}
#tag{
color:blue;
.sidebar { margin: 0;
padding: 0; width:
200px; background-
color: grey; position:
fixed; height: 100%;
overflow: auto;
}
div.content { margin-
left: 200px; padding:
1px 16px; height:
1000px;
color:teal;
}
#intro{
color:purple;
}
a.int:hover, a.int:active{
background:white;
width:200px;
}
Result:
Ex. No. : 3 Date : 18/08/ Reg. No. : 210701127
=
Form Validation
Aim:
Create a HTML form for course registration with student_name, rollno, gender, year,
department, Section, mobile_no, E-Mail_ID, Address, City, Country, pincode and validate
with the following specifications.
i. Check whether all the inputs are entered or not.
ii. Check whether the inputs entered should be in correct format.
After validating using JavaScript, display proper error messages in red color just next
to the textbox where there is an error.
Procedure:
1. The form is defined by a form element.
<form method = "post" action = "#">
2. Use the attribute method specifies how the form’s data is sent to the Web server.Using
method
= "post" appends form data to the browser request, which contains the protocol (i.e.,
HTTP) and the requested resource’s URL. Scripts located on the Web server’s computer
(or on a computer accessible through the network) can access the form data sent as part
of the request. For example, a script may take the form information and update an
electronic mailing list. The other possible value, method = "get" appends the form data
directly to the end of the URL.
3. The action attribute in the <form> tag specifies the URL of a script on the Web server’ 4.
Use the type of input as "text" input inserts a text box into the form. Users can type data in
text boxes.
5. The input element’s size attribute specifies the number of characters visible in the
text box. Optional attribute maxlength limits the number of characters input into the
text box.
6. There are two types of input elements in lines
<input type = "submit" value = "Submit Your Entries" />
<input type = "reset" value = "Clear Your Entries" />
7. The "submit" input element is a button. When the user presses a "submit" button, the
browser sends the data in the form to the Web server for processing. The value
attribute sets the text displayed on the button (the default value is Submit Query).
8. The "reset" input element allows a user to reset all form elements to their default
values. The value attribute of the "reset" input element sets the text displayed on the
button (the default value is Reset).
9. The textarea element inserts a multiline text box, called a text area, into the form.
The number of rows is specified with the rows attribute and the number of columns
(i.e.,characters) is specified with the cols attribute. In this example, the textarea is
four rows high and 36 characters wide. To display default text in the text area, place
the text between the <textarea> and </textarea> tags. Default text can be specified
in other input types, such as text boxes, by using the value attribute.
10. The "password" input in lines inserts a password box with the specified size. A
password box allows users to enter sensitive information, such as credit card
numbers and passwords, by “masking” the information input with asterisks. The
actual value input is sent to the Web server, not the character that mask the input.
11. Checkboxes enable users to select from a set of options. When a user selects a
checkbox, a check mark appears in the check box. Otherwise, the checkbox remains
empty. Each "checkbox" input creates a new checkbox. Checkboxes can be used
individually or in groups. Checkboxes that belong to a group are assigned the same
name.
12. Radio buttons are similar to checkboxes, except that only one radio button in a group
of radio buttons may be selected at any time. The radio buttons in a group have the
same name attributes and are distinguished by their different value attributes. The
attribute- value pair checked = "checked" indicates which radio button, if any, is
selected initially. The checked attribute also applies to checkboxes.
13. The select element provides a drop-down list of items from which the user can select
an item. The name attribute identifies the drop-down list. The option element adds
items to the drop-down list. The option element’s selected attribute specifies which
item initially is displayed as the selected item in the select element.
14. Use the events for processing forms - onsubmit and onreset.
15. These events fire when a form is submitted or reset, respectively.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
//let x = document.forms["myForm"]["fname"].value;
entry1=document.myForm.fname.value;
entry2=document.myForm.lname.value;
entry3=document.myForm.city.value;
entry4=document.myForm.state.value;
entry5=document.myForm.pin.value;
entry6=document.myForm.phno.value;
entry7=document.myForm.email.value;
entry8=document.myForm.pass.value;
entry9=document.myForm.cpass.value;
//if (entry1 ==
""||entry2==""||entry3==""||entry4==""||entry5==""||entry6==""||entry7=="") {
// alert("Please fill all the details properly");
//}
if (entry1 == "") {
alert("First Name must be filled out");
//return false;
}
if (entry2 == "") {
alert("Second Name must be filled out");
//return false;
}
if (entry3 == "") {
alert("City must be filled out");
//return false;
}
if (entry4 == "") {
alert("State must be filled out");
//return false;
}
if (entry5.length != 6) {
alert("Enter correct pincode");
//return false;
}
if (entry6.length != 10) {
alert("Enter correct Phone Number");
//return false;
}
if (entry8.length <8 ) {
alert("Password should atleast have 8 characters");
//return false;
}
if (entry8 != entry9 ) {
alert("Passwords don't match");
//return false;
}
}
</script>
</head>
<body>
<h2 style="color:rgb(219, 0, 219)"><center>Student Registration Form</center></h2>

<form name="myForm" onsubmit="return validateForm()" method="post">
<b>First Name:</b> <br><input type="text" name="fname" placeholder="Enter your First
Name"><br><br>
<b>Last Name:</b> <br><input type="text" name="lname" placeholder="Enter your Last
Name"><br><br>
<b>City:</b> <br><input type="text" name="city" placeholder="Enter your
City"><br><br>
<b>State:</b> <br><input type="textarea" name="state" placeholder="Enter your
State"><br><br>
<b>Pincode:</b> <br><input type="text" name="pin" placeholder="Enter your
Pincode"><br><br>
<b>Phone Number:</b> <br><input type="text" name="phno" placeholder="Enter your
Phone Number"><br><br>
<b>Email:</b> <br><input type="text" name="email" placeholder="Enter your
Email"><br><br>
<b>Password:</b> <br><input type="password" name="pass" placeholder="Enter your
Password"><br><br>
<b>Confirm Password:</b> <br><input type="password" name="cpass"
placeholder="Confirm your Password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Design:
Result:
Ex. No. : 4 Date : 01/09/ Reg. No. : 210701127
=
SERVLET
Aim:
Create a HTML form for course registration with student name, rollno, gender, year,
department, Section, mobile_no, E-Mail_ID, Address, City, Country, pincode. Once a user
click the submit button extract the input data using servlet and display that data with proper
labels.
Procedure:
1. Create a dynamic web project in eclipse and configure apache server.
2. Create a index.html file in WEB_INF folder in the project directory.
3. Type in the basic design of HTML form in the index.html file to prompt for
details: Student name, Rollno, Gender, Year, Department, Section, Mobile_no,
EMail_ID, Address, City, Country, Pincode.
4. Once the user submits the form, forward the data received to a servlet.
5. Create a servlet Login.java which imports the necessary libraries.
6. Using the Printwriter object, display the data that the user submitted.
Code:
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Forms</title>
</head>
<body>
<h1><center>Student Registration Form</h1>
<form name="forms" action="Login" method="post">
Name: <input type="Text" name="name" placeholder="Enter your
Name"><br><br>
Roll Number: <input type="Text" name="rlno" placeholder="Enter your" Roll
Number><br><br>
Gender: <input type="Text" name="gender" placeholder="Enter your
Gender"><br><br>
Year: <input type="Text" name="yr" placeholder="Enter your Year"><br><br>
Department: <input type="Text" name="dept" placeholder="Enter
yourDepartment"><br><br>
Section: <input type="Text" name="sec" placeholder="Enter your
Section"><br><br>
Mobile Number: <input type="Text" name="phno" placeholder="Enter your
Mobile Number"><br><br>
Email ID: <input type="Text" name="email" placeholder="Enter your
Email"><br><br>
Address: <input type="Text" name="addr" placeholder="Enter your
Address"><br><br>
City: <input type="Text" name="city" placeholder="Enter your
City"><br><br>
Country: <input type="Text" name="country" placeholder="Enter your
Country"><br><br>
Pincode: <input type="Text" name="pin" placeholder="Enter your
Pincode"><br><br>
<input type="submit">
</form>
</body>
</html>
Design:
Login.java:
import java.io.IOException; import

java.io.*;
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 Login extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//doGet(request, response);
response.setContentType("text/html");
PrintWriter out=response.getWriter(); String
name=request.getParameter("name");
int rno=Integer.parseInt(request.getParameter("rlno"));
String gender=request.getParameter("gender");
String year=request.getParameter("yr");
String dept=request.getParameter("dept");
String sec=request.getParameter("sec");
String mobile=request.getParameter("phno");
String email=request.getParameter("email");
String addrs=request.getParameter("addr");
String ct=request.getParameter("city");
String cnt=request.getParameter("country");
String pin=request.getParameter("pin");
out.println("Name is: <h5
style='display:inline'>"+name+"</h5><br>");
out.println("Roll Number is: <h5 style='display:inline'>
"+rno+"</h5><br>");
out.println("Gender is: <h5 style='display:inline'>
"+gender+"</h5><br>");
out.println("Year is: <h5 style='display:inline'>
"+year+"</h5><br>"); out.println("Department is: <h5
style='display:inline'>
"+dept+"</h5><br>");
out.println("Section is: <h5 style='display:inline'>
"+sec+"</h5><br>");
out.println("Mobile Number is: <h5
style='display:inline'>"+mobile+"</h5><br>");
out.println("Email ID is: <h5 style='display:inline'>
"+email+"</h5><br>");
out.println("Address is: <h5 style='display:inline'
'color:red'> "+addrs+"</h5><br>");
out.println("City is: <h5 style='display:inline'>
"+ct+"</h5><br>");
out.println("Country is: <h5 style='display:inline'>
"+cnt+"</h5><br>");
out.println("Pincode is: <h5 style='display:inline'>
"+pin+"</h5><br>");
}
}
Result:
Ex. No. : 5 Date : 08/09/ Reg. No. : 210701127
=
SERVLET-JDBC
Aim:
Consider a Library Management System. Develop a JavaScript program that
will validate
the controls in the forms you have created for the application. State the assumptions
you make (business logic you are taking into consideration). Note: Your application
must access a database using Servlet.
Table fields: book_name, author, publisher, edition, price, category
Ex: Internet & World Wide Web, Paul Deitel, Pearson, Fifth Edition, $160, Programming
Functionalities: Display individual book information, Display all book information, Insert
individual book information, Update a book information and Delete it.
Procedure:
Relations using MYSQL given below enforcing primary key constraints:
BOOK (ACCNO, TITLE, AUTHOR, PUBLISHER, EDITION, PRICE)
MEMBER (MID, MNAME, BRANCH) FINE
(MID, FINE_DATE, AMOUNT)
1. Open MySQL.
2. Create a database.
3. Connect to the database.
4. Create the tables
Code:
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Library</title>
</head>
<body>
<h1 style="color: red;"><center>Welcome to Library Management
System</center></h1>
<a href="Addbook.html">Add Book Details</a><br><br>
<a href="Viewbook.html">View Book Details</a><br><br>
<a href="Editbook.html">Edit Book Details</a><br><br>
<a href="Deletebook.html">Delete Book Details</a><br><br>
<a href="Addmembers.html">Add Member Details</a><br><br>
<a href="Viewmember.html">View Member Details</a><br><br>
<a href="EditMember.html">Edit Member Details</a><br><br>
<a href="DeleteMember.html">Delete Member Details</a><br><br>
<a href="AddFine.html">Add Fine Details</a><br><br>
<a href="ViewFine.html">View Fine Details</a><br><br>
<a href="EditFine.html">Edit Fine Details</a><br><br>
<a href="DeleteFine.html">Delete Fine Details</a><br><br>
</body>
</html>
Addbook.html:
<!DOCTYPE html>
<html>
<head>
<title>Library</title>
</head>
<body>
<form name="book" action="addbook" method="post">
Enter Account Number: <input type="text" name="accno"
placeholder="Enter account number"><br>
Enter Title: <input type="text" name="title" placeholder="Enter title"><br>
Enter Author: <input type="text" name="author" placeholder="Enter author"><br>
Enter Publisher: <input type="text" name="publisher"
placeholder="Enter publisher"><br>
Enter Edition: <input type="text" name="edition" placeholder="Enter
edition"><br>
Enter Price: <input type="text" name="price" placeholder="Enter price"><br>
</form>
</body>
</html>
Design:
addbook.java:
package addbook; import java.io.IOException;

import java.io.PrintWriter; import
java.sql.Connection; import
java.sql.DriverManager; import
java.sql.PreparedStatement; import
javax.servlet.ServletException; import
javax.servlet.http.HttpServletResponse;
@WebServlet("/addbook")
public class addbook extends HttpServlet {
private static final long serialVersionUID = 1L;
public addbook() { super();
// TODO Auto-generated constructor stub
}
protected void doPost(HttpServletRequest request,
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<head><title>Add Book Details</title></head>");
out.println("<body>");
out.println("<h1 align='center'>Add Book Details</h1>");
out.println("<hr />");
try {
Class.forName("com.mysql.cj.jdbc.Driver");
String URL = "jdbc:mysql://localhost:3306/jdbc";
Connection conn = DriverManager.getConnection(URL,
"root", "");
PreparedStatement ps = conn.prepareStatement("insert
book values (?, ?,?,?,?,?)");
ps.setInt(1,Integer.parseInt(request.getParameter("accno")));
ps.setString(2, request.getParameter("title"));
ps.setString(3, request.getParameter("author"));
ps.setString(4, request.getParameter("publisher"));
ps.setString(5, request.getParameter("edition"));
ps.setInt(6,Integer.parseInt(request.getParameter("price")));
int res = ps.executeUpdate();
if (res != 0)
out.println("Book Details Inserted Successfully...");
else
out.println("Book Details Insertion Failure...");
ps.close();
conn.close();
} catch (Exception e) {
out.println(e); }
out.println("<br />");
out.println("<a href='index.html'>Back</a>");
out.println("</body></html>"); }}
Viewbook.html:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Book</title></head>
<body>
<form name="viewbook" method="post" action="viewbook">
Enter Account Number of the book<input type="text" name="accno"
placeholder="Enter Accno of the book"><br>
</form>
</body>
</html>
Viewbook.java: package
viewbook; import
java.io.IOException; import
java.io.PrintWriter; import
java.sql.*;
javax.servlet.http.HttpServletResponse; public class
viewbook extends HttpServlet { private static final
long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
out.println("<head><title>View Book Details</title></head>");
out.println("<h1 align='center'>View Book Details</h1>"); try {
Class.forName("com.mysql.cj.jdbc.Driver"); String URL =
"jdbc:mysql://localhost:3306/jdbc";
Connection conn = DriverManager.getConnection(URL, "root", "")
PreparedStatement ps = conn.prepareStatement("select * from book where accno=(?)");
ps.setInt(1, Integer.parseInt(request.getParameter("accno")));
ResultSet rs = ps.executeQuery();
out.println("<center><table border='1'>");
out.println("<tr>");
out.println("<td>Acc No</td>");
out.println("<td>Title</td>");
out.println("<td>Author</td>");
out.println("<td>Publisher</td>");
out.println("<td>Edition</td>");
out.println("<td>Price</td>");
out.println("</tr>");
while (rs.next()) { out.println("<tr>");
out.println("<td>" + rs.getInt("accno") + "</td>");
out.println("<td>" + rs.getString("title") + "</td>");
out.println("<td>" + rs.getString("author") + "</td>");
out.println("<td>" + rs.getString("publisher") +
"</td>"); out.println("<td>" + rs.getString("edition") +
"</td>"); out.println("<td>" + rs.getString("price") +
"</td>"); out.println("</tr>");}
out.println("</table></center>");
ps.close(); conn.close();}
catch (Exception e) {out.println(e);}
out.println("</body></html>");}}
DeleteBook.html:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Book</title></head> <body>
<form name="deletebook" method="post" action="deletebook">
</form></body></html>
Deletebook.java:
package deletebook; import
java.io.*; import
java.sql.PreparedStatement;
deletebook extends HttpServlet { protected void
doPost(HttpServletRequest request,
out.println("<head><title>Delete Customer
Details</title></head>");
out.println("<h1 align='center'>Delete Customer
Details</h1>");
try {Class.forName("com.mysql.cj.jdbc.Driver");
Connection conn = DriverManager.getConnection(URL, "root",
"");
PreparedStatement ps = conn.prepareStatement("delete from book where
accno = ?");
ps.setInt(1, Integer.parseInt(request.getParameter("accno")));
if (res != 0) out.println("Book Details Deleted successfully...");
else out.println("Book Details Deletion Failure...");
ps.close(); conn.close();
} catch (Exception e) { out.println(e); }
Editbook.html:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Book</title></head>
<body>
<form name="editbook" method="post" action="editbook">
Enter Edition: <input type="text" name="edition" placeholder="Enter Edition of
the book"><br>
Enter Price: <input type="text" name="price" placeholder="Enter price
of the book"><br>
Editbook.java:
package editbook; import
java.io.PrintWriter; import
java.sql.*;
editbook extends HttpServlet { private static final
response.setContentType("text/html"); PrintWriter out
= response.getWriter();
out.println("<head><title>Edit Customer Details</title></head>");
out.println("<h1 align='center'>Edit Customer Details</h1>");
Connection conn = DriverManager.getConnection(URL, "root", "");
PreparedStatement ps = conn.prepareStatement("update book set edition=?,price=? where
accno = ?");
ps.setString(1, request.getParameter("edition")); ps.setInt(2,
Integer.parseInt(request.getParameter("price"))); ps.setInt(3,
Integer.parseInt(request.getParameter("accno")));
if (res != 0) out.println("Book Details Updated successfully...");
else out.println("Book Details updation Failure...");
ps.close();
conn.close();
out.println(e); }
out.println("</body></html>"); } }
Addmembers.html:
<!DOCTYPE html>
<html><body>
<form name="addmembers" action="memberadd" method="post">
Enter Member Id: <input type="text" name="mid" placeholder="Enter your Member
Id"><br>
Enter Member Name: <input type="text" name="mname" placeholder="Enter
your Member Name"><br>
Enter Branch Name:<input type="text" name="branch" placeholder="Enter
your Branch Name"><br>
Memberadd.java:
package memberadd; import java.io.IOException; import
java.io.PrintWriter; import java.sql.Connection;
import java.sql.DriverManager; import
memberadd extends HttpServlet { private static
final long serialVersionUID = 1L;
out.println("<head><title>Add Book Details</title></head>");
out.println("<h1 align='center'>Add Book Details</h1>");
"");
PreparedStatement ps = conn.prepareStatement("insert member values (?,?,?)");
ps.setInt(1, Integer.parseInt(request.getParameter("mid")));
ps.setString(2, request.getParameter("mname"));
ps.setString(3, request.getParameter("branch"));
if (res != 0) out.println("Book Details Inserted
Successfully...");
else out.println("Book Details Insertion
Failure...");
} catch (Exception e) { out.println(e);
}
ViewMember.html:
<!DOCTYPE html>
<html>
<head><meta View Member Details
<body>
<form name="viewmember" method="post" action="memberview">
Enter Member Id: <input type="text" placeholder="Enter your Member
Id" name="mid"><br>
Memberview.java:
package memberview; import java.io.*; import
javax.servlet.http.HttpServletResponse; import
java.sql.*;
public class memberview extends HttpServlet { private
static final long serialVersionUID = 1L;
response) throws ServletException, IOException { PrintWriter
out=response.getWriter();
out.println("<head><title>View Member Details</title></head>");
out.println("<h1 align='center'>View Member Details</h1>");
out.println("<hr />"); try {
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://localhost:3306/jdbc";
Connection conn=DriverManager.getConnection(url,"root",""); PreparedStatement
ps=conn.prepareStatement("Select * from member where mid=?");
ResultSet res=ps.executeQuery();
res.next();
out.println("Member Id: "+res.getString("mid")+"<br>");
out.println("Member Name: "+res.getString("mname")+"<br>");
out.println("Member Branch: "+res.getString("branch")+"<br>"
); ps.close();
conn.close();
}
catch(Exception e) {
out.println(e);
}
out.println("</body></html>");
}
}
EditMember.html:
<!DOCTYPE html>
<html>
<head><meta Edit Member Details
<body>
<form name="editmember" action="memberedit" method="post">
Enter Branch: <input type="text" placeholder="Enter branch" name="branch"><br>
Enter Member Id: <input type="text" placeholder="Enter Member Id" name="mid">
<br><input type="submit">
Memberedit.java: package memberedit; import java.io.*;

javax.servlet.http.HttpServletResponse; import
java.sql.*;
public class memberedit extends HttpServlet { private
response.setContentType("text/html"); PrintWriter
out=response.getWriter(); out.println("<html>");
out.println("<head><title>Edit Member Details</title></head>");
out.println("<h1 align='center'>Edit Member Details</h1>");
out.println("<hr />"); try {
PreparedStatement ps = conn.prepareStatement("update member set branch=? where mid = ?");
ps.setString(1, request.getParameter("branch")); ps.setInt(2,
Integer.parseInt(request.getParameter("mid"))); int res = ps.executeUpdate();
if (res != 0) out.println("Member Details Updated successfully...");
else out.println("Member Details Updation Failure..."); ps.close();
conn.close();
} catch (Exception e) { out.println(e); }
DeleteMember.html:
<!DOCTYPE html>
<html>
<head><meta Edit Member Details
<body>
<form name="editmember" action="memberdelete" method="post">
Memberdelete.java:
package memberdelete; import java.io.*; import java.sql.*;
memberdelete extends HttpServlet { private static final long
serialVersionUID = 1L;
response.setContentType("text/html"); PrintWriter
out = response.getWriter();
out.println("<head><title>Delete Member Details</title></head>");
out.println("<h1 align='center'>Delete Member Details</h1>");
try {
Connection conn = DriverManager.getConnection(URL, "root", ""); PreparedStatement ps
= conn.prepareStatement("delete from member where mid = ?");
int res = ps.executeUpdate(); if
(res != 0)
out.println("Member Details Deleted successfully...");
else
out.println("Member Details Deletion Failure...");
}
}
}
AddFine.html:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Library</title></head><body>
<form name="fine" action="addfine" method="post">
Enter Member Id: <input type="text" name="mid" placeholder="Enter Member
Id"><br>
Enter Fine Date: <input type="date" name="finedate"
placeholder="Enter FineDate"><br>
Enter Amount: <input type="text" name="amt" placeholder="Enter Fine Amount"><br>
Addfine.java:
package addfine; import java.io.IOException; import
addfine extends HttpServlet { private static final
out.println("<head><title>Add Fine Details</title></head>");
out.println("<h1 align='center'>Add Fine Details</h1>");
"");
PreparedStatement ps = conn.prepareStatement("insert fine values (?,?,?)");
ps.setString(2, request.getParameter("finedate"));
ps.setInt(3, Integer.parseInt(request.getParameter("amt")));
if (res != 0)
out.println("Fine Details Inserted Successfully...");
else
out.println("Fine Details Insertion Failure...");
ps.close();
conn.close();
out.println(e);
}
out.println("</body></html>");}}
Viewfine.html:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>View Member Details</title></head>
<body>
<form name="viewfine" method="post" action="fineview">
Enter Member Id: <input type="text" placeholder="Enter your Member
Id" name="mid"><br>
Fineview.java:
package fineview; import java.io.IOException; import
java.sql.PreparedStatement; import java.sql.ResultSet;
fineview extends HttpServlet { private static final
PrintWriter out=response.getWriter();
out.println("<head><title>View Fine Details</title></head>");
out.println("<h1 align='center'>View Fine Details</h1>");
try {
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://localhost:3306/jdbc";
Connection conn=DriverManager.getConnection(url,"root",""); PreparedStatement
ps=conn.prepareStatement("Select * from fine where mid=?");
ResultSet res=ps.executeQuery();
res.next();
out.println("Member Id: "+res.getString("mid")+"<br>"); out.println("Fine
Date: "+res.getString("fine_date")+"<br>"); out.println("Amount:
"+res.getString("amount")+"<br>" ); ps.close(); conn.close();
}
catch(Exception e) {
out.println(e);
}
}
}
Editfine.html:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Fine</title></head>
<body>
<form name="editfine" method="post" action="editfine">
Enter Member Id: <input type="text" name="mid" placeholder="Enter Member
Id"><br>
Enter Amount: <input type="text" name="amt" placeholder="Enter amount"><br>
Editfine.java:
package editfine; import java.io.IOException;
import java.io.PrintWriter; import
javax.servlet.http.HttpServletResponse;
public class editfine extends HttpServlet { private

PrintWriter out=response.getWriter();
out.println("<head><title>Edit Member Details</title></head>");
out.println("<h1 align='center'>Edit Member Details</h1>");
PreparedStatement ps = conn.prepareStatement("update fine set amount=? where mid =
?");
ps.setString(1, request.getParameter("amt")); ps.setInt(2,
Integer.parseInt(request.getParameter("mid")));
if (res != 0)
out.println("Fine Details Updated successfully...");
else
out.println("Fine Details Updation Failure...");
out.println(e);
}
}
}
DeleteFine.html:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Edit Member Details</title></head> <body>
<form name="deletefine" action="finedelete" method="post">
Finedelete.java:
package finedelete; import java.io.IOException; import
finedelete extends HttpServlet { private static
final long serialVersionUID = 1L;
out.println("<head><title>Delete Fine Details</title></head>");
out.println("<h1 align='center'>Delete Fine Details</h1>");
PreparedStatement ps = conn.prepareStatement("delete from fine where mid = ?");
if (res != 0)
out.println("Fine Details Deleted successfully...");
else
out.println("Fine Details Deletion Failure...");
ps.close();
conn.close();
out.println(e);
}
}
}
Result:
Ex. No. : 6a Date : 22/09/ Reg. No. : 210701127
=
AJAX
Aim:
Program to create a simple XMLHttpRequest, and retrieve data from a TXT file.
Procedure:
1. Create a text document file rec.txt.
2. Type some context in that file.
3. Create a HTML document file File.html.
4. Inside the BODY tag create one div section and one button.
5. Use the div section to display information returned from a server.
6. Make the button to calls a function named loadXMLDoc(), if it is clicked.
7. Add a <script> tag to the page's head section.
8. Inside the script section create the loadXMLDoc() function.
9. Create an XMLHttpRequest object.
10. To send a request to a server, use the open() method of the XMLHttpRequest object.
11. Use the url parameter of the open() method, an address to a file on a server.
12. Use the responseText property returns the response as a string, and can use it accordingly.
Code:
Index.html:
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script> function loadDoc() { var xhttp = new
XMLHttpRequest(); xhttp.onreadystatechange =
function() { if (this.readyState == 4 &&
this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
} }; xhttp.open("GET",
"rec.txt", true); xhttp.send(); }
</script></body> </html>
Rec.txt:
<p>Welcome To IP LAB</p>
<h1>HELLO</h1>
Design:
Result:
Ex. No. : 6b Date : 30/09/ Reg. No. : 210701127
=
AJAX
Aim:
Create a program in AJAX using Javascript, DHML and the XMLHttpRequest object to
perform a GET or Post and return a result without reloading the HTML page.
Case Study : Create an application that takes student names as input from the
user. While taking the input, for each key press it is going to provide a list of student
names starting with the entered keywords, as suggestion. Use AJAX to generate the
suggestion from a servlet having an array of student names.
Procedure:
1. Create a HTML document file Studnames.html.
2. Inside the BODY tag create one label and one input field.
3. When a user types a character in the input field, call the function "showName()" and
execute.
4. Call the function is triggered by the onkeyup event.
6. Inside the script section create the showName() function.
7. Check if the input field is empty (str.length == 0).
8. If it is, clear the content of the txtHint placeholder and exit the function.
9. If the input field is not empty, do the following:
• Create an XMLHttpRequest object
• Create the function to be executed when the server response is ready
• Send the request off to a JSP file (gename.jsp) on the server
• Notice that q parameter is added gethint.jsp?q="+str
• The str variable holds the content of the input field
13. Create a JSP document file getname.jsp.
14. Create the array which contains the list of student names.
Code:
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script> function showName(str) { if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return; } else { var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() { if
(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML =
xmlhttp.responseText;
} } xmlhttp.open("GET", "NewFile.jsp?q="+ str,
true); xmlhttp.send();
} }
</script>
</head>
<body>
<form>
First name: <input type="text" onkeyup="showName(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Design:
Newfile.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<%
String a[] = new String[7];
String hint = new String();
// Array with names
a[0] = "HARISH";
a[1] = "JERIN";
a[2] = "JERPHY";
a[3] = "KANAGA SHANMUGAM";
a[4] = "HARINI";
a[5] = "PRADEEP";
a[6] = "DEEPAK";
String q = request.getParameter("q").toUpperCase();
out.print(q);
if (q.length()>0) {
hint="";
for(int i=0; i<a.length;i++) {
if(a[i].length() >= q.length()) {
if (q.equals(a[i].toUpperCase().substring(0,
q.length()))) {
if (hint.equals("")) {
hint = a[i];
} else {
hint = hint + ", " + a[i];
} } }}} if(hint.equals(""))
out.println("no suggestion");
else
out.println(hint);%>
</body>
</html>
Result:
Ex. No. : 7 Date : 13/10/ Reg. No. : 210701127
=
AJAX-JSP-JDBC
Aim:
Create an application that allows user can choose student reg-no as input from the
list.While choosing the input, for each change it is going to provide student details, which is
available in a database
Procedure:
1. Create a JSP document file student.jsp.
2. Inside the BODY tag create one label and one select option field.
3. When a user selects a student roll number in the dropdown list above, a function called
"showStudent()" is executed.
4. The function is triggered by the "onchange" event.
6. Inside the script section create the showstudent() function.
7. The showCustomer() function does the following:
• Check if a student roll number is selected
• Create an XMLHttpRequest object
• Create the function to be executed when the server response is ready
• Send the request off to a file on the server
• Notice that a parameter (q) is added to the URL (with the content of the dropdown
list)
11. Create a JSP document file getstudent.jsp.
12. The source code in "getstudent.jsp" runs a query against a database, and returns the result
in an HTML.
CODE:
Student.html:
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head>
<body>
<h1>Student Details</h1>
<label for="studentSelect">Select Student Registration
Number:</label>
<input type="text" id="studentSelect" onkeyup="showStudent()"/>
<div id="studentDetails">
</div>
<script>
function
showStuden
t() { var
select =
document.getElementById("studentSelect");
var regNo = select.value; if (regNo !== "") {
console.log("hel"); var xhttp = new
XMLHttpRequest(); xhttp.onreadystatechang e =
function()
{
document.getElementById("studentDetails").innerHTML =
this.responseText;
};
xhttp.open("GET", "getStudents.jsp?q="
+ regNo, true); xhttp.send();
} else {
document.getElementById("studentDetail
s").innerHTML = "";}}
</script></body></html>
getStudents.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-
8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head><body>
<%
String regNo =
request.getParameter("q");
String dbUrl =
"jdbc:mysql://localhost:3306/
iplab"; String dbUsername =
"root";
String dbPassword = ""; try
{
Connection conn = DriverManager.getConnection(dbUrl,
dbUsername, dbPassword); String query = "SELECT name,
email, dept FROM students WHERE regno=?";
PreparedStatement pstmt = conn.prepareStatement(query);
pstmt.setString(1, regNo); ResultSet rs =
pstmt.executeQuery(); if (rs.next()) { String name =
rs.getString("name") ; String email = rs.getString("email"
); String dept=rs.getString("d ept");
%>
<h2>Student Details:</h2>
<p><strong>Name:</strong> <%= name %></p>
<p><strong>Email:</strong> <%= email %></p>
<p><strong>Department:</strong> <%= dept %></p>
<%
} else {
%>
<p>No student found with Registration Number <%= regNo %></p>
<% }
rs.close(); pstmt.close(); conn.close();
} catch (Exception e) { e.printStackTrace();
}%></body>
</html>
Design:
Result:
Ex. No. : 8 Date : 06/10/ Reg. No. : 210701127
=
JSP
Aim:
Consider a Banking application. Develop a JavaScript program that will validate the
controls in the forms you have created for the application. State the assumptions you make
(business logic you are taking into consideration). Note: Your application must access a
database using JSP.
Functionalities:
1. Displaying customer information
2. Displaying account information
3. Inserting customer information
4. Inserting account information
Procedure:
Relations using MYSQL for a banking application given below enforcing primary constraints:
CUSTOMER (CID, CNAME)
ACCOUNT (ANO, ATYPE, BALANCE, CID)
An account can be a savings account or a current account. Check ATYPE in ‘S’ or ‘C’ . A
customer can have both types of accounts.
TRANSACTION (TID, ANO, TTYPE, TDATE, TAMOUNT)
TTYPE can be ‘D’ or ‘W’ (D- Deposit; W – Withdrawal)
1. Open MySQL.
4. Create the tables.
CODE:
Index.html:
<!DOCTYPE html>
<html><head><title>Banking</title></head>
<body>
<a href="viewcus.html">VIEW CUSTOMER DETAILS</a><br><br>
<a href="addcus.html">ADD NEW CUSTOMER DETAILS</a><br><br>
<a href="addacc.html">ADD ACCOUNT DETAILS</a><br><br>
<a href="viewacc.html">VIEW ACCOUNT DETAILS</a><br><br>
</body>
</html>
Addacc.html:
<html>
<body>
<h2>Enter Account Details</h2>
<form action="addaccount.jsp" method="post">
Account Number: <input type="text" name="ano"><br><br>
Account Type: <input type="text" name="atype"><br><br>
Balance: <input type="text" name="balance"><br><br>
Customer ID: <input type="text" name="cid"><br><br>
<br> <input type="submit" value="Submit Details"><br>
</form>
<br>
<a href="index.html">HOME</a>
</body>
</html>
Viewacc.jsp:
<!DOCTYPE html>
<html>
<body>
<form action="viewacc.jsp" method="post">
Account Number: <input type="text" name="ano"><br>
<input type="submit" value="Submit Details">
</form>
<br>
</body>
</html>
Addcus.html:
<!DOCTYPE html>
<html><head><title>View Customer Details</title></head>
<body>
<form action="addcustomer.jsp" method="post">
Customer ID: <input type="text" name="cid"><br><br>
Customer Name: <input type="text" name="cname"><br><br>
</form><br>
</body>
</html>
Design:
Viewcus.html:
<!DOCTYPE html>
<html>
<body>
<form action="viewacc.jsp" method="post">
Account Number: <input type="text" name="ano"><br>
</form>
<br>
</body>
</html>
Addaccount.jsp:
<%@ page language="java" contentType="text/html;
charset=ISO-8859-1" pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head> <title>Add Account Details</title></head>
<body>
<h1 align="center">Add Account Details</h1>
<hr />
<%
Connection conn = null;
PreparedStatement ps = null;
try {
Class.forName("com.mysql.jdbc.Driver"); String URL
= "jdbc:mysql://localhost:3306/jdbc"; conn =
DriverManager.getConnection(URL, "root", ""); ps =
conn.prepareStatement("insert into account values (?, ?, ?,
?)");
ps.setInt(1,Integer.parseInt(request.getParameter("ano")));
ps.setString(2, request.getParameter("atype"));
ps.setInt(3, Integer.parseInt(request.getParameter("balance")));
ps.setInt(4, Integer.parseInt(request.getParameter("cid"))); if
("S".equals(request.getParameter("atype")) ||
"C".equals(request.getParameter("atype"))) {
if (res != 0)
out.println("Account Details Inserted Successfully...");
else
out.println("Account Details Insertion Failure...");
}
else{
out.println("Enter proper account type");
}
out.println(e);
}
%> <br />
<br>
</body>
</html>
Addcustomer.jsp:
<%@ page language="java" contentType="text/html;
charset=ISO-8859-1" pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head> <title>Add Customer Details</title> </head>
<body>
<h1 align="center">Add Customer Details</h1>
<hr />
<%
Connection conn = null; PreparedStatement
ps = null;
try {
Class.forName("com.mysql.jdbc.Driver"); String URL =
"jdbc:mysql://localhost:3306/jdbc"; conn =
DriverManager.getConnection(URL, "root", "");
ps = conn.prepareStatement("insert into customer values (?,
?)"); ps.setInt(1,Integer.parseInt(request.getParameter("cid")));
ps.setString(2, request.getParameter("cname")); int res =
ps.executeUpdate();
if (res != 0)
out.println("Customer Details Inserted Successfully..."); else
out.println("Customer Details Insertion Failure...");
out.println(e); }
%> <br /><br>
</body>
</html>
Viewcustomer.jsp:
pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<title>View Customer Details</title>
</head>
<body>
<h1>Customer Details</h1>
<hr />
<%
PreparedStatement ps = null; ResultSet
rs = null;
try {
conn.prepareStatement("select * from customer where cid=?");
ps.setInt(1,Integer.parseInt(request.getParameter("cid"))); rs =
ps.executeQuery();
%>
<table border="1">
<tr>
<td>Customer ID</td>
<td>Customer Name</td>
</tr> <%
while (rs.next()) {
%>
<tr>
<td><%=rs.getInt("cid")%></td>
<td><%=rs.getString("cname")%></td>
</tr>
<%
}
%></table>
<%
}
%>
<br />
</body>
</html>
Viewaccount.jsp:
pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<title>View Account Details</title>
</head>
<body>
<h1>Account Details</h1>
<hr />
<%
PreparedStatement ps = null; ResultSet
rs = null;
try {
conn.prepareStatement("select * from account where ano=?");
ps.setInt(1,Integer.parseInt(request.getParameter("ano"))); rs =
ps.executeQuery();
%>
<table border="1">
<tr>
<td>Account Number</td>
<td> Account Type</td>
<td>Balance</td>
<td>Customer ID</td> </tr>
<%
while (rs.next()) {
%>
<tr>
<td><%=rs.getInt("ano")%></td>
<td><%=rs.getString("atype")%></td>
<td><%=rs.getInt("balance")%></td>
<td><%=rs.getInt("cid")%></td>
</tr>
<%
}
%></table>
<%
}
%>
<br />
<br>
</body>
</html>
Result:
Ex. No. : 9 Date : 20/10/ Reg. No. : 210701127
=
PHP
Aim:
PHP program for Employee Details, which includes EmpID, Name, Designation,
Salary, DOJ, etc., to connect with the database and execute queries to retrieve and update
data.
Procedure:
Relations using MYSQL for a banking application given below enforcing primary key
constraints: EMPDETAILS (EMPID, ENAME, DESIG, DEPT, DOJ, SALARY) 1.
Open MySQL.
4. Create a table
CODE:
Index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="empdetails.html">VIEW EMPLOYEE DETAILS</a><br><br>
<a href="empinsert.html">INSERT EMPLOYEE DETAILS</a><br><br>
<a href="update.html">UPDATE EMPLOYEE DETAILS</a><br><br>
</body>
</html>
empinsert.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="insert.php" method="post">
Employee Id: <input type="text" name="empid"><br><br>
Name: <input type="text" name="ename"><br><br>
Designation: <input type="text" name="desig"><br><br>
Department: <input type="text" name="dept"><br><br>
Date of joining: <input type="date" name="doj"><br><br>
Salary: <input type="text" name="sal"><br><br>
<br> <input type="submit" name="add" value="insert"><br>
</form>
</body>
</html>
empdetails.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="show.php" method="post">
Employee ID: <input type="text" name="empid"><br>
<input type="submit" value="Show Details">
</form>
</body>
</html>
Design:
update.html:
<!DOCTYPE html>
<html>
<body>
<form action="empupdate.php" method="post">
Enter Employee ID: <input type="text"
name="empid"><br>
<input type="submit" name="update" value="Edit">
</form>
</body>
</html>
Empupdate.php:
<!DOCTYPE html>
<html>
<body>
<?php
$id=$_POST['empid'];
$conn = mysqli_connect("localhost", "root","","jdbc");
$sql = "SELECT * FROM empdetail where empid='".$id."'";
$retval=mysqli_query($conn, $sql);
if(mysqli_num_rows($retval) > 0){ while($row
= mysqli_fetch_assoc($retval)){
?>
<form action="update.php" method="post">
Employee Id: <input type="text" value="<?php echo $row['empid']; ?>"
name="t1"><br><br>
Name: <input type="text" value="<?php echo
$row['ename']; ?>" name="t2"><br><br>
Designation: <input type="text" value="<?php echo $row['desig']; ?>"
name="t3"><br><br>
Department: <input type="text" value="<?php echo $row['dept']; ?>"
name="t4"><br><br>
Date of joining: <input type="date" value="<?php echo $row['doj']; ?>"
name="t5"><br><br>
Salary: <input type="text" value="<?php echo $row['sal']; ?>"
name="t6"><br><br>
<br> <input type="submit" name="ok" value="update"><br>
</form>
<?php
}
}
?>
</body>
</html>
insert.php:
<?php if(isset($_POST['add'])){
$my=new mysqli("localhost","root","","jdbc");
$name=$_POST['ename'];
$desig=$_POST['desig'];
$dept=$_POST['dept'];
$doj=$_POST['doj'];
$sal=$_POST['sal'];
$sql="insert into empdetail values('$id','$name','$desig','$dept','$doj','$sal')";
$final=$my->query($sql);
if($final==true) echo
"INSERT SUCESSEFULL"; else
echo "INSERT UNSUCESSEFULL";
} ?>
show.php:
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$dbname = 'jdbc';
$conn = mysqli_connect($host, $user, $pass,$dbname); if(!$conn){
die('Could not connect: '.mysqli_connect_error());
}
$sql = "SELECT * FROM empdetail where empid='".$id."'";
$retval=mysqli_query($conn, $sql);
if(mysqli_num_rows($retval) > 0){ while($row
= mysqli_fetch_assoc($retval)){ echo
"EMP ID :{$row['empid']} <br> ".
"EMP NAME : {$row['ename']} <br> ".
"DESIGNATION : {$row['desig']} <br> ".
"EMP NAME : {$row['dept']} <br> ".
"EMP NAME : {$row['doj']} <br> ".
"EMP SALARY : {$row['sal']} <br> ".
"--------------------------------<br>";
} //end of while
} else{
echo "0 results";
}
mysqli_close($conn);
?>
Update.php:
<?php if(isset($_POST['ok'])){
$my=new mysqli("localhost","root","","jdbc");
$id=$_POST['t1'];
$name=$_POST['t2'];
$desig=$_POST['t3'];
$dept=$_POST['t4'];
$doj=$_POST['t5'];
$sal=$_POST['t6'];
$sql="update empdetail set
empid='$id',ename='$name',desig='$desig',dept='$dept',doj='$doj',sal='$sal' where
empid='".$id."'"; $final=$my->query($sql); if($final==true) echo "UPDATE
SUCESSEFULL"; else echo "UPDATE UNSUCESSEFULL";
} ?>
Result:
Ex. No. : 10 Date : 03/1 Reg. No. : 210701127
=
JQuery
Aim:
Program to develop a simple game using jQuery.
Procedure:
1. Read a key Code upon pressing a key on keyboard.
2. Screen resolution is read by the following code. Here we are reducing 100px and 200px
from width and height as browser occupying some of the space at top and bottom. var width
= screen.width - 100; var height = screen.height - 200;
3. And next function is used to Generate a random alphabet between A - Z.
4. Here the key code values for A - Z are 65 - 90.
5. Math.random() - used to generate a random number.
6. String.fromCharCode() - is used to convert a key Code into its equivalent Character.
7. For CSS styling purpose we are generating a random color for every bubble.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop the Bubbles Game</title>
<style> body {
margin: 0; padding: 0;
background-color: #fff
overflow: hidden;
font-family: Arial, sans-serif;
}
.bubble { position:
absolute; width: 40px;
height: 40px; border-radius:
50%; background-color:
#3498db;
color: white;
text-align: center; line-
height: 40px;
font-size: 24px;
}
</style>
</head>
<body>
<h2>Pop the Bubbles Game</h2>
<p>Score: <span id="score">0</span></p>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
$(document).ready(function(){
var score = 0; var width =
screen.width - 100; var height =
screen.height - 200;
function generateRandomLetter() {
var keyCode = Math.floor(Math.random() * 26) + 65; // Random key code for A-Z
return String.fromCharCode(keyCode);
}
function generateRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#'; for (var i = 0; i < 6;
i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
function createBubble() { var
letter = generateRandomLetter(); var
left = Math.random() * width; var
color = generateRandomColor();
var $bubble = $("<div class='bubble'></div>")

.text(letter)
.css("left", left)
.css("background-color", color);
$("body").append($bubble);
$bubble.animate({ top: height }, 5000, "linear", function() {

$(this).remove();
});
$bubble.click(function() {
score++;
$("#score").text(score);
$(this).remove();
});
}
$(document).keypress(function(e) {
var letter = String.fromCharCode(e.which).toUpperCase();
$(".bubble").each(function() {
if ($(this).text() === letter) {
score++;
$("#score").text(score);
$(this).remove();
}
});
});
setInterval(createBubble, 2000);
});
</script>
</body>
</html>
Design:
Result:

IP Record Till EXP 10 504

Uploaded by

Copyright:

Available Formats

You might also like

IP Record Till EXP 10 504

Uploaded by

Document Information

Original Description:

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

IP Record Till EXP 10 504

Uploaded by

Copyright:

Available Formats

Ex. No. : 1 a Date : 28/07/2023 Reg. No.

HTML – Basic Elements

HTML – Element - Tables

a table without a border, set border to "0".

HTML – Image Map

<div class="sidebar"><font size="+2">

<h2 style="color:rgb(219, 0, 219)"><center>Student Registration Form</center></h2>

import java.io.IOException; import

Table fields: book_name, author, publisher, edition, price, category

package addbook; import java.io.IOException;

Memberedit.java: package memberedit; import java.io.*;

public class editfine extends HttpServlet { private

var $bubble = $("<div class='bubble'></div>")

$bubble.animate({ top: height }, 5000, "linear", function() {

You might also like