Scribd
Upload
24 views32 pages

WT Lab Manual 23-24 - Edited

Uploaded by

smita.videogallery
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
24 views32 pages

WT Lab Manual 23-24 - Edited

Uploaded by

smita.videogallery
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/ 32

LLOYD INSTITUTE OF ENGINEERING & TECHNOLOGY

Web Technology Lab


(KCS-652)

LAB MANUAL
ACADEMIC SESSION 2023-24

COURSE : B.TECH (CSE)


SEM: VIth
Dept. of Computer Science & Engineering
LLOYD INSTITUTE OF ENGINEERING & TECHNOLOGY
Knowledge Park II, Gr. Noida

SUBMITTED BY SUBMITTED TO
Smita Kumari Ms. Neetu Sharma
ROLL NO
2101530100151
Experiment No: 1

Aim: WAP IN HTML to display your CV on a web browser


SOFTWAREREQUIRED: NOTEPAD,SDK

Program:
< !DOCTYPEHTML >
<htmllang="en-US" >
<head>
<metacharset="UTF-8">
<title></title>

<linkrel="stylesheet"href="style.css"/>
</head>
<body>
<divclass="container">
<header>
<h1id="name">GauravPandey</h1>

<div id="designation">

<span class="title">your designation</span>


<span class="organization">The organisation
name</span>

</div>

<divclass="contact" >
<divclass="email" > [email protected]</div >
</div >

</header >
<divclass="content"role = main >
<sectionid="objective" >
<h2class="title" > Objective</h2 >
<divclass="description" >
<p>
Loremipsumdolorsitamet,consectetueradipiscin
gelit.Aeneancommodoligulaegetdolor.Aeneanmassa.
Cumsociisnatoquepenatibusetmagnisdisparturie
ntmontes,nasceturridiculusmus.
</p>
</div >< !--enddescription-->
</section >

<sectionid="Education" >
<h2class="title" > Education</h2 >
<divclass="description" >

<table>
<thead>
<td>Duration</td>
<td>Qualification</td>
<td>Institute/School</td>
<td>Result</td>
</thead>

<!--editthis/row-wise-->
<tr>
<td>4year</td>
<td>B.tech</td>
<td>G.LBajajInstituteofEngineeringandTechnol
ogy</td>
<td>73.3</td>
</tr>
<tr><!--row2-->
<td>3year</td>
<td>Polytechnic</td>
<td>J.PInstitueofEngineering and Technology</td>

<td>73</td>
</tr>

<tr><!--row2-->

<td>--</td>
<td>HighSchool</td>
<td>B.M.GDegreecollege</td>
<td>82</td>

</tr>

</table>

</div >< !--enddescription-->


</section >

<sectionid="projects" >
<h2class="title" > ProjetcsUndertaken</h2 >
<divclass="description" >

< !--Project1-->
<sectionclass="project" >
<h3class="title" > BrainTumorDetection

usingCNN</h3 > Learning</span >

<divclass="meta" >

<spanclass="field" > Machine

</div >
<pclass="description" > Loremipsum

dolor sit amet, consectetuer adipiscing elit.Aenean commodo


ligulaeget dolor.Aenean massa.Cum sociis natoque penatibus et
magnisdisparturientmontes, nasceturridiculusmus.</p >
</section >< !--endprojectdescription-->

< !--project2-->
<sectionclass="project" >
<h3class="title" > CollegeWebsite</h3 >

<divclass="meta" >
<spanclass="field" > Javascript</span >
</div >
<pclass="description" > Loremipsumdolorsitamet,
consectetueradipiscingelit.Aeneancommodoligulaegetdolor.Aeneanmassa.
Cumsociisnatoquepenatibusetmagnisdisparturientmontes,
nasceturridiculusmus.</p >
</section >< !--endprojectdescription-->

< !--project3-->
<sectionclass="project" >
<h3class="title" > WeatherReport</h3 >
<divclass="meta" >
<spanclass="field" > Python</span >

</div >
<pclass="description" > Loremipsumdolorsitamet,
consectetueradipiscingelit.Aeneancommodoligulaegetdolor.Aeneanmassa.
Cumsociisnatoquepenatibusetmagnisdisparturientmontes,
nasceturridiculusmus.</p >
</section >< !--endprojectdescription-->

</div >< !--enddescription-->


</section >
< !--Training / seminars-- >
< !--ScholisticsAchievements-->

< !--TechnicalSkills-->

< !--Extra - CurricularActivities-- >

< !--PersonalInformations-->

< !--References-->
< !--Declarations-->
< !--signatory-->

</div >< !--endmaincontent-->

</div >< !--endcontainer-->

</body >
</html >

OUTPUT:
Experiment No: 2
Aim: WAP IN HTML to Create your Institute website,
Departmentwebsite,andTutorialwebsiteforspecificsubject

SOFTWAREREQUIRED:NOTEPAD,SDK
Program:
< !<!DOCTYPEHTML>
<html>
<head>
<style>
h1{
color: red;
font - family: verdana; font - size: 300 %;
background - color: CBCBCB;
}
h2{
color: red;
font - family: verdana;
background - color: CBCBCB;
}
}
</style >
<title>G.LBajajInstituteof Technology And
Management</title>
</head >
<body>
<h1><center>G.LBajajInstituteofTechnology</center></h1>
<h2>AboutUS</h2>
<p>
GLBajajInstituteofTechnologyandManagementisthe6thInstituteestablishedunderthe
prestigiousbannerofRajeevMemorial Academic Welfare Society (Registered Under
SocietiesRegistrationAct1860).TheinstituteisapprovedbyAllIndiaCouncilforTechnic
alEducation(AICTE),MinistryofHRD,Govt.ofIndiaandAffiliatedtoDr.A.P.J.AbdulK
alamTechnical university(FormerlyUPTULucknow).

GLBajajInstituteofTechnologyandManagementisoneofthequalitydrivenEducation
alInstituteintheGreaterNoida/DelhiNCRRegion.GLBajajstandsoutasoneofthebeste
ngineeringandmanagementcollegeinUP.Italsostandsoutinitsapproachtoassistandeq
uipthestudentsfortheiroveralldevelopment,givingthemastrongfoundationforasucce
ssfulfuture.TheinstituteoffersB.Tech,MBAandMCAprograms.
ThisselffinancedinstituteisgovernedbyRajeevMemorialAcademicWelfareSo
ciety (RegisteredUnder SocietiesRegistrationAct1860).
ItisapprovedbyAllIndiaCouncilforTechnicalEducation(AICTE),MinistryofHuman
ResourceDevelopment,GovernmentofIndiaandaffiliatedtoDr.A.P.J.AbdulKalam
TechnicalUniversity,
Lucknow.</p>
<h2>CampusFacilities</h2>
<h3>GreenInitiativeforEco-FriendlyCampus</h3>
<p>TheInstitutehasastate-of-the-
art,PVSolarPanels,SolarWaterHeatingandWaterHarvesting.</p>
<h3>Auditorium&ConferenceRoom</h3>
<p>The Institute has a state-of-the-art, fully air-
conditionedauditoriumwithaseatingcapacityof350people,hugeamphitheaterandnum
erousconferencerooms.Auditoriumandconferenceroomsarewell-
equippedwithlatestacousticstechnology,soundsystemandreflectanexcellentworkofm
odernarchitecture.</p>
<h2>CoursesandAdmissions</h2>
<h3>UnderGraduate(B.TECH)</h3>
<p>ArtificialIntelligence&DataScienceArtificialIntelligence&MachineLearn
ingCivilEngineering
ComputerSc.&Engg.(AI)ComputerSc.&Engg.(AIML)
ComputerSc.&Engg.(DataScience)ComputerSc.&Engg.(Regionallanguage)Compu
ter Science and
EngineeringElectricalandElectronicsEngineeringElectronicsandCommunicationEn
gineeringInformationTechnologyMechanicalEngineering</p>
</body>
</html>

OUTPUT:
Experiment No: 3
Aim:WAPINHTMLtodesignanentryformofstudentdetailsandsentittoserver

SOFTWAREREQUIRED:NOTEPAD,SDK
Program:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Resume</title>
</head>
<body>
<h1>StudentEntryform</h1>
<form>
<h3>FirstName:</h3>
<inputtype="text" />
<h3>LastName:</h3>
<inputtype="text" />
<h3>Email:</h3>
<inputtype="email" />
<h3>Mobileno.:</h3>
<inputtype="text" />
<h3>Alternatephoneno:</h3>
<inputtype="text" />
<h3>AadharNo.:</h3>
<inputtype="text" />
<h3>Gender:</h3>
<inputtype="radio" />
<labelfor="html">Male</label>
<br/>
<inputtype="radio" />
<labelfor="css">Female</label>
<br/>
<inputtype="radio" />
<labelfor="javascript">Other</label>
<h3>Address:</h3>
<textarea></textarea>
<h3>Password:</h3>
<inputtype="password" />
<h3>ConfirmPassword:</h3>
<inputtype="password" />
<buttontype="submit">Submit</button>
</form>
</body>

</html>
OUTPUT:
Experiment No: 4
Aim: WAP in JAVA to make a Calculator

SOFTWAREREQUIRED: NOTEPAD,SDK

Program:

//Javaprogramforsimplecalculator
importjava.io.*;
importjava.lang.*;
importjava.lang.Math;
import java.util.Scanner;
publicclassBasicCalculator {
publicstaticvoidmain(String[] args) {
// stores two numbersdoublenum1,num2;
//Takeinputfromtheuser
Scannersc = newScanner(System.in);
System.out.println("Enterthenumbers");
//take the inputsnum1=sc.nextDouble();
num2 = sc.nextDouble();
System.out.println("Entertheoperator(+,-,*,/)");
charop = sc.next().charAt(0);
doubleo = 0;
switch (op) {
//casetoaddtwonumberscase'+':
o = num1 + num2;
break;
//casetosubtracttwonumbers
case '-':
o = num1 - num2;
break;
//casetomultiplytwonumberscase'*':
o = num1 * num2;
break;
// case to divide two numberscase'/':
o = num1 / num2;
break;
default:
System.out.println("Youenterwronginput");
break;
}
System.out.println("Thefinalresult:");
System.out.println();
//printthefinalresultSystem.out.println(num1+""+op+""+num2+"="+o);
OUTPUT:
Experiment No: 5
Aim:WAP in JAVA to Implement Inheritance
SOFTWAREREQUIRED:NOTEPAD,SDK

Program:

//Javaprogramtoillustratethe
//conceptofinheritance
//baseclassclassBicycle{
//theBicycleclasshastwofieldspublicintgear;
publicintspeed;
//theBicycleclasshasoneconstructorpublicBicycle(intgear,intspeed)
{
this.gear = gear;
this.speed = speed;
}
//theBicycleclasshasthreemethodspublicvoidapplyBrake(intdecrement)
{
speed -= decrement;
}
publicvoidspeedUp(intincrement) {
speed += increment;
}
//toString()methodtoprintinfoofBicyclepublicStringtoString()
{
return ("Noofgearsare" + gear + "\n" +
"speedofbicycleis" + speed);
}
}
//derivedclass
classMountainBikeextendsBicycle {
//theMountainBikesubclassaddsonemorefieldpublicintseatHeight;
//theMountainBikesubclasshasoneconstructorpublicMountainBike(intgear,intspeed,
intstartHeight) {
//invokingbase-class(Bicycle)constructorsuper(gear,speed);
seatHeight = startHeight;
}
//theMountainBikesubclassaddsonemoremethodpublicvoidsetHeight(intnewValue)
{
seatHeight = newValue;
}
//overridingtoString()method
//ofBicycletoprintmoreinfo@OverridepublicStringtoString()
{
return (super.toString() + "\nseatheightis" +
seatHeight);
}
}
//driverclasspublicclassTest{
publicstaticvoidmain(Stringargs[]) {
MountainBikemb = newMountainBike(3, 100, 25);
System.out.println(mb.toString());
}
}

OUTPUT:

Noofgears are
3speedofbicycleis100seathei
ghtis25
Experiment No: 6

Aim: WAP using Java Script for webpage to display browserinformation


SOFTWAREREQUIRED:NOTEPAD,SDK

Program:

<!DOCTYPEhtml>
<htmllang="en">

<head>
<title>webpagetodisplaybrowserinformation</title>
</head>

<body>
<h2>TheNavigatorObject</h2>
<p>BrowserInformation-</p>
<pid="demo">
</p>
<script>
document.getElementById("demo").innerHTML =
"navigator.appVersionis" + navigator.appVersion;
</script>
</body>

</html>
</body>

</html>
OUTPUT:
Experiment No: 7

Aim:: WAP in JAVA applet to display the application program


screeni.e.Calculator
Program:

import java.awt.*;
import java.awt.event.*;
class MyCalculator extends Frame implements ActionListener {
TextFieldtfInput;
Panelpanel;
StringbtnString[] = {
"7",
"8",
"9",
"+",
"4",
"5",
"6",
"-",
"1",
"2",
"3",
"*",
"C",
"0",
"=",
"/"
};
Buttonbtn[] = newButton[16];
int num1 = 0, num2 = 0, result = 0;
charop;
publicMyCalculator() {
Fontf = newFont("Cambria", Font.BOLD, 18);
tfInput = new TextField(10);
tfInput.setFont(f);
panel = newPanel();
add(tfInput, "North");
add(panel, "Centr");
panel.setLayout(new GridLayout(4, 4));
for (inti = 0; i < 16; i++) {
btn[i] = new Button(btnString[i]);
btn[i].setFont(f);
btn[i].addActionListener(this);
panel.add(btn[i]);
}
addWindowListener(newWindowAdapter() {
public void windowClosing(WindowEvent we) {
System.exit(0);
}
});
}
public void actionPerformed(ActionEvent ae) {
String str = ae.getActionCommand();
if (str.equals("+")) {
op = '+';
num1 = Integer.parseInt(tfInput.getText());
tfInput.setText("");
} else if (str.equals("-")) {
op = '-';
num1 = Integer.parseInt(tfInput.getText());
tfInput.setText("");
} else if (str.equals("*")) {
op = '*';
num1 = Integer.parseInt(tfInput.getText());
tfInput.setText("");
} else if (str.equals("/")) {
op = '/';
num1 = Integer.parseInt(tfInput.getText());
tfInput.setText("");
}
elseif(str.equals("=")) {
num2 = Integer.parseInt(tfInput.getText());
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
}
tfInput.setText(result + "");
result = 0;
}
elseif(str.equals("C")) {
tfInput.setText("");
num1 = num2 = result = 0;
}
else {
tfInput.setText(tfInput.getText() + str);
}
}
publicstaticvoidmain(Stringargs[]) {
MyCalculator m = new MyCalculator();
m.setTitle("My Calculator");
m.setSize(250, 300);
m.setVisible(true);
}
}
}

OUTPUT:
Experiment No: 9
Aim:WAP in XML for creation of DTD,which specifies set of rules.

Program:

<?xmlversion="1.0"encoding="UTF-8"?>
<?xml-stylesheettype="text/css"href="Rule.css"?>
<!DOCTYPEnoteSYSTEM"note.dtd">
<books>
<heading>WelcomeToMYMART</heading>
<book>
<title>Title-:WebTechnology</title>
<author>Author-:UttamK.Roy</author>
<publisher>Publisher-:Oxford</publisher>
<edition>Edition-:3</edition>
<price>Price-:450</price>
</book>
<book>
<title>Title-:InternetOfThings</title>
<author>Author-:Ditel</author>
<publisher>Publisher-:Pearson</publisher>
<edition>Edition-:3</edition>
<price>Price-:400</price>
</book>
<book>
<title>Title-:ComputerNetworks</title>
<author>Author-:Foruouzan</author>
<publisher>Publisher-:McGrawHill</publisher>
<edition>Edition-:5</edition>
<price>Price-:700</price>
</book>
<book>
<title>Title-:DBMSConcepts</title>
<author>Author-:Navath</author>
<publisher>Publisher-:Oxford</publisher>
<edition>Edition-:5</edition>
<price>Price-:600</price>
</book>
<book>
<title>Title-:PythonProgramming</title>
<author>Author-:SubhitabDas</author>
<publisher>Publisher-:Oxford</publisher>
<edition>Edition-:8</edition>
<price>Price-:300</price>
</book>
</books>Note.dtd:

<!ELEMENTbook(title,author,publisher,edition,price)>
<!ELEMENTtitle(#PCDATA)>
<!ELEMENTauthor(#PCDATA)>
<!ELEMENTpublisher(#PCDATA)>
<!ELEMENTedition(#PCDATA)>
<!ELEMENTprice(#PCDATA)>

Rule.css:
books {color:white;
background-color:yellow;width:100%;
}
heading {color:

red;font-size:
40px;
background-color:powderblue;
}
heading,title,author,publisher,edition,price{display:block;color:black;
}
title{
font-size:25px;font-weight:bold;
}

OUTPUT:
Experiment No: 10

Aim:InstallTOMCATwebserverandAPACHE.

Program:

INSTALLINGTOMCAT:

Step1:DownloadTomcatforWindows
Browse to theofficial Apache Tomcat website. Locate the Download section and clickthe latest
Tomcat version available. At the time of writing this article, the latestTomcatversion was
version 10.
On the Download page, scroll down and locate the Binary Distributions area.In the Core list,
depending on the installation type you prefer, click thedownload link for the Windows Service
Installer or the 32bit/64bit Windowszip file.

Step2:InstallTomcat
Install Tomcat via the Windows Service Installer for an automated and wizard-guided
experience. The service installer installs the Tomcat service and runs it automaticallywhenthe
systemboots.

1. Open the downloaded Windows Service Installer file to start the installationprocess.
2. IntheTomcatSetupwelcomescreen,clickNexttoproceed.

3. Read the License Agreement and if you agree to the terms, click I Agree to proceed to
thenextstep.

4. In the Tomcat component selection screen, choose Full in the dropdown menu to ensurethe
wizard installs the Tomcat Host Manager and Servlet and JSP examples
webapplications.Alternatively,keepthedefault NormalinstallationtypeandclickNext.

5. The next step configures the Tomcat server. For instance, enter the Administrator
logincredentials or choose a different connection port. When finished, click Next to proceed
tothenextstep.

6. The next step requires you to enter the full path to the JRE directory on your system.
Thewizard auto-completes this if you have previously set up the Java environment
variables.ClickNexttoproceedtothe nextstep.

7. ChoosetheTomcatserver installlocationorkeepthedefaultoneandclickInstall.
8. Check the Run Apache Tomcat box to start the service after the installation
finishes.Optionally, check the Show Readme box to see the Readme file. To complete
theinstallation, clickFinish.

Result:WehaveSuccessfullyinstallAPACHETOMCAT
Experiment No: 10
Aim:WAP IN JS for validation of HTML FORM(E-MAIL,PHONENO.,NAME).

Program:

E - MailValidation:

functionValidateEmail(inputText) {
varmailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if (inputText.value.match(mailformat)) {
alert("Youhaveenteredavalidemailaddress!"); //The popup alert for a valid email
addressdocument.form1.text1.focus();
returntrue;
} else {
alert("Youhaveenteredaninvalidemailaddress!"); //Thepop up alert for an invalid email
addressdocument.form1.text1.focus();
returnfalse;

PHONEVALIDATION:

function {

phonenumber(inputtxt)

varphoneno = /^\d{10}$/;
if ((inputtxt.value.match(phoneno)) {
return true;
} else {
alert("message");
return false;
}
}

PASSWORDVALIDATION

<
script type = "text/javascript" > functionmatchpass() {
varfirstpassword = document.f1.password.value;
varsecondpassword = document.f1.password2.value;

if (firstpassword == secondpassword) {
returntrue;
} else {
alert("password must be same!");
returnfalse;
}
}<
/script>

<
form name = "f1"
action = "register.jsp"
onsubmit = "return matchpass()" > Password: < inputtype = "password"
name = "password" / > < br / >
Re - enterPassword: < inputtype = "password"
name = "password2" / > < br / >
<
inputtype = "submit" >
<
/form>

OUTPUT:
Experiment No: 11

Aim: Design and implement simple shopping cart example


with session tracking API.

Program:

HTMLFile: ShoppingCart.html

<
h3 > CookieExamplethroughShoppingCart < /h3>

<
body >

<
form method = "get"
action = "http://localhost:8888/india/SC" >

<
/section><!--e

EnterItemName < inputtype = "text"


name = "item" > < br >

EnterItemQuantity < inputtype = "text"


name = "qty" > < br > < inputtype = "submit"
value = "AddCookie"
name = "add" > < inputtype = "submit"
value = "ListCookies"
name = "list" >

<
/form>

<
/body>

Observe, fisttimewearehavingtwosubmitbuttons inasingle


<
form > tag.Click any submit button, the same serviet is called.Then how to
differentiate the submit button clicked by the
userandaccordinglyactiontakenbytheProgrammeronServiet ?
Observe, the names of two submit buttons are add and list.WeseethisinServletprogram.

web.xmlentryforShoppingCartservlet
< servlet - name > snraol < /servlet-name>

<servlet - classShoppingCart < /servlet-class>

</servlet>
web. <
servlet - mapping >
<
servlet - name > snraol < /servlet-name> <
url - pattern > /SC</url - pattern >
<
/servlet-mapping>
ServletFile: ShoppingCart.java

importjava.io.*;
importjavax.servlet.
";
importjavax.servlet.http.
";
publicclassShoppingCartextendsHttpServlet {

Result

public void service(HttpServletRequest req, HttpServletResponse res)


throwsServletException, IOException {

String str1 = req.getParameter("item"); // item


nameStringstr2=req.getParameter("qty");

//itemquantity

Stringstr3 = req.getParameter("add");

//submitbuttonby nameadd

Stringstr4 = req.getParameter("list");

//submitbuttonby namelist
res.setContentType("text/html");
PrintWriterout = res.getWriter();

if (str3 != null)

{
Cookie c1 = new Cookie(str1, str2);
res.addCookie(c1);
res.sendRedirect("ShoppingCart.html");
}
elseif(str4 != null) {

CookieclientCookies[] = req.getCookies();

for (inti = 0; i < clientCookies.length; i++) {

out.print("<B>" + clientCookies[i].getName() + ":" +


clientCookies[i].getValue() + "</B><BR>");

}
}
out.close();
}
}

Result:
Experiment No: 12

Aim:Write a JDBC Program to perform various operation on the table created on


ORACLE DATABASE

Program:

/Javaprogramtoillustrate
// Connecting to the Databaseimportjava.sql.*;
publicclassconnect {
publicstaticvoidmain(Stringargs[]) {
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
//EstablishingConnection
Connection con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl",
"login1", "pwd1");
if (con != null) System.out.println("Connected");
else
System.out.println("NotConnected");
con.close();
} catch (Exceptione) {
System.out.println(e);
}
}
}

Note:HereoracleindatabaseURLingetConnection()methodspecifiesSIDofO
racleDatabase.ForOracledatabase11gitisorclandfororacledatabase10gitisx
e.

ImplementingInsertStatement

//Javaprogramtoillustrate
// inserting to the
Databaseimportjava.sql.*;
publicclassinsert1 {
publicstaticvoidmain(Stringargs[]) {
String id = "id1";
Stringpwd = "pwd1";
String fullname = "geeks for geeks";
Stringemail = "[email protected]";
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
Connectioncon = DriverManager.getConnection("
jdbc: oracle: thin: @localhost: 1521: orcl ", "
login1 ", "
pwd1 ");Statementstmt=con.createStatement();
//Insertingdataindatabase
Stringq1 = "insertintouseridvalues('" + id + "','" + pwd +
"','" + fullname + "','" + email + "')"; intx = stmt.executeUpdate(q1);
if (x > 0)
System.out.println("SuccessfullyInserted");
else
System.out.println("InsertFailed"); con.close();
}
catch (Exceptione) {
System.out.println(e);
}
}
}

Result:
Successfully Registered.

You might also like