ANURAG COLLEGE OF ENGINEERING · right-click on My Computer, select Properties, then Advanced, then Environment Variables. Then, you would update the PATH value and press the OK button

Laboratory Manual

of

WEB TECHNOLOGIES LAB

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

ANURAG COLLEGE OF ENGINEERING

Aushapur (V), Ghatkesar (M), Medchal Dist.

Task1:

Installation the following on the local machine

Apache web server

Tomcat application server locally

MySQL

Install PHP and configure it work with apache web server and MySQL

XAMPP INSTALLATION STEPS:

Step1:

Step2:

Step3:

Step4:

Step5:

Step6:

Step7:

Step8:

Step9:

Alfter installation Apahe, MySql servers not be started, change the configuration settings Click on Xampp folder

1. Apache folder->Conf folder -> httd.conf file Listen 80 (change the port number 80 to 90) i.e Listen 90 ServerName localhost:80 (change here also 80 to 90) i.e ServerName localhost:90 2. Apache folder-> conf->extra->httd-ssl.conf file Listen 443( change to 443 to 434)

Save Both files. Now start the servers

In browser type localhost:90 in address bar

Apache server installation

Step1:

Step2:

Step3:

step4:

Step5:

Step6:

Step7:

Step8:

Step9:

Tomcat server installation steps:

Step1:

Step2:

Step3:

Step4:

Step5:

Step6:

Step7:

Step8:

Step9:

Step10:

Setting up Java Development Kit

right-click on My Computer, select Properties, then Advanced, then Environment Variables. Then, you would update the

PATH value and press the OK button.

set PATH and JAVA_HOME environment variables to refer to the directory that contains java and javac,

typically java_install_dir/bin and java_install_dir respectively.

1. Variable name:PATH

Variablevalue: C:\Program Files\Java\jdk1.7.0_21\bin

2. Variable name: JAVA_HOME

Variable value: C:\Program Files\Java\jdk1.7.0_21

Setting up Web Server: Tomcat

1. CATALINA_HOME environment variable

C:\Program Files\Apache Software Foundation\Tomcat 7.0

2. CLASSPATH

C:\Program Files\Apache Software Foundation\Tomcat 7.0\lib\servlet-

api.jar

MYSQL installation

Step1:

Step2:

Step3:

Step4:

Step5:

Task2: Write an HTML page including any required javascript that takes a number from one text field in

the range of 0 to 999 and shows it in another text field words. If number is out of range ,it should show

“out of range” and if it is not a number, it should should show “not a number”message in the result box.

Source code:

<html>

<Head>

<script>

function conversion()

{

var d,m,str,str2;

str=" ";

var ones=new Array("","one","two","three","four","Five","Six","Seven","Eight","Nine");

var tens=new Array("","","twenty","thirty","forty","FIfty","Sixty","Seventy","Eighty","Ninety");

var str2=new Array("ten","Eleven","twelve","thirteen","fourteen","Fifteen","Sixteen","Seventeen",

"Eighteen","Ninteen");

var n=document.numberstring.number.value;

if(n<0)

alert("enter positive number");

if(n>999)

alert("out of range");

if(n=="")

alert("enter valid number");

else if(n==0) alert("Zero");

else

{

m=n.toString();

if(m.charAt(0)=='0'&&m.length>1){m=m.substring(1,m.length)}

x=m.length;

if(x==3)

{

var c2=parseInt(m.charAt(2));



if(c1==1){

str+=ones[c0]+" hundred "+ str2[c2];

}

else{

str+=ones[c0]+" hundred "+ tens[c1]+ones[c2];

}

}

if(x==2)

{



if(c0==1){

str+= str2[c1];

}

else{

str+= tens[c0]+ones[c1];

}

}

if(x==1)

{


alert(ones[c0]);

}

alert(str);

}

}

</script>

</Head>

<BODY>

<FORM name="numberstring">

<input type="text" name="number">

<input type="button" value ="convert" onClick="conversion()">

</FORM>

</BODY>

</html>

Output:

Task 3:

Write an HTML page that has one input, which can take multi-line text and a submit button. Once the

user clicks the submit button, it should show the number of characters , words and lines in the text

entered using an alert message. Words are separated with white spaces and lines are separated with new

line character.

Source code:

<HTML>

<HEAD>

<SCRIPT>

function countWords(str)

{

var count = 0;

lines = str.split("\n");

characters = str.split(/\n|\s/).join('');

str1=str.replace(/\s/g,' ');

words=str1.split(' ');

for (i=0 ; i < words.length ; i++)

{

if (words[i] != "" )

count += 1;

}

document.theForm.results.value = "There are " + count + " words in the text string you

entered!\n"+"lines are:"+ lines.length +"\nchracters are" +characters.length;

}

</SCRIPT>

</HEAD>

<BODY>

<FORM name="theForm">

enter a text string:</br>

<TEXTAREA name=inStr rows=5 cols=90>

</TEXTAREA>

</br><br>

<INPUT type=button value="Count Words lines characters"

onClick="countWords(document.theForm.inStr.value)";>

<INPUT type=button name="theButton" value="Clear Results"

onClick='document.theForm.results.value=""';>

</br>

Results<br>

<TEXTAREA name=results rows=5 cols=90>

</TEXTAREA>

</FORM>

</BODY>

</HTML>

Output:

Task 4:

Write an HTML page that contains a selection box with a list of 5 countries .when the user selects a

country; its capital should be printed next to the list. Add CSS to customize the properties of the font of

the capital color, bold and font size.

Source code:

<html>

<head>

<title>TASK4</title>





<script type="text/javascript" src="js/jquery-1.12.0.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var cap = new Array("New Delhi","Islamabad", "Helsinki","Manila", "Kabul");

$("#country").change(function(){

var ctry = '';

var capital = '';

$("#display_capital").html('');

ctry = $(this).val();

ctry_txt = $(this).find('option:selected').text();

if(ctry != '')

{

capital = cap[ctry];

$("#display_capital").html("The Capital Of

<strong>"+ctry_txt+"</strong> Is <em>"+capital+"</em>");

}

});

});

</script>

<style type="text/css">

#display_capital {

color: #22164c;

font-family: Tahoma !important;

font-size: 20px;

margin: 20px 0;

}

#display_capital strong {

font-variant: all-small-caps !important;

color: #772020;

}

#display_capital em {

color: #17750F;

}

</style>

</head>

<body>



<form name="f1">

<label>Select A Country From The Dropdown List</label>

<select id="country" name="country">

<option value="">Select Country</option>

<option value="0">India</option>

<option value="1">Pakistan</option>

<option value="2">Finland</option>

<option value="3">Philippines</option>

<option value="4">Afghanistan</option>

</select>

<br>

<div id="display_capital"></div>

</form>

</body>

</html>

Step1: After writing code in any editor.. save as : task4.php

In c:/XAMPP/htdocs/task.php

Step2:

Procedure to run this program:

Start Apache server in XMAPP tool.

Open any browser type in url localhost:90/task4.php

Output:

Task5:

Create an XMLdocument that contains 10 users information, write a java program which takes user id as

input and returns the user details by taking the user information from the XML document using (a)

DOM parser (b) SAX parser.

Task 6:

Implement the following web application using (a) PHP, (b) servlets and (c) JSP

USING PHP

i. A user validation web application, where the user submits the login name and password to the

server. The name and password are checked against the data already available in database and if

the data matches a successful login page is returned otherwise a failure message is shown to the

user.

Source code:

Login.php

<html>

<head>

<title>Login Now</title>

<script language="javascript">

function validate()

{

if(document.login.uname.value=="")

{

alert("enter username");

document.login.uname.focus();

return false;

}

if(document.login.pwd.value=="")

{

alert("enter password");

document.login.pwd.focus();

return false;

}

else{

return true;

}

}

</script>

</head>

<body>

<h3>Login</h3>

<?php

include("connection.php");

/*

write these 2 lines of code separately save as connection.php

mysql_connect("localhost","root","");

mysql_select_db("projectDB");

*/

if(isset($_POST['login']))

{

$user=($_POST['uname']);

$pass=($_POST['pwd']);

$res=mysql_query("select *from register where user='$user' and

password='$pass'");

if(mysql_num_rows($res))

{

echo "You Have Logged In Successfully";

}

else

{

echo "Wrong Credentials";

}

}

?>

<form name="login" method="POST" action="" onsubmit="validate()">

<table>

<tr>

<td>username</td>

<td><input type="text" name="uname"></td>

</tr>

<tr>

<td>Password:</td>

<td><input type="password" name="pwd"></td>

</tr>

<tr>

<td></td>

<td><input type="submit" name="login" value="Login"></td>

</tr>

</table>

</form>

</body>

</html>

Output:

Create a database: projectDB

Create table : register

ii. Modify above program to use an xml file instead of database.

Step1:

Create a XML document

Code :userlist.xml

<?xml version="1.0" ?>

<userlist>

<user>

<username>alice</username>

<password>12345</password>

</user>

<user>

<username>john</username>


</user>

<user>

<username>roy</username>


</user>

</userlist>

Source code:

<html>

<head>



function validate()

{

if(document.login.uname.value=="")

{

alert("enter username");

document.login.uname.focus();

return false;

}

if(document.login.pwd.value=="")

{

alert("enter password");

document.login.pwd.focus();

return false;

}

else{

return true;

}

}

</script>

</head>

<body>

<h3>Login</h3>

<?php

if(isset($_POST['login']))

{

$user=($_POST['uname']);

$pass=($_POST['pwd']);

$userdata = simplexml_load_file('userlist.xml') or die("Error: Cannot create object");

$found = 0;

foreach ($userdata as $key => $value) {

if($value->username == $user && $value->password == $pass)

{

$found = 1;

break;

}

}

if($found == 0)

{

echo 'Invalid Username And Password Please Try Again';

}

else

{

echo "you have logged in sucessfully";

}

}

?>

<form name="login" method="POST" action="" onsubmit="validate()">

<table>

<tr>

<td>username</td>


</tr>

<tr>

<td>Password:</td>


</tr>

<tr>

<td></td>

<td><input type="submit" name="login" value="Login"></td>

</tr>

</table>

</form>

</body>

</html>

Output:

iii. Modify the above program to use AJAX to show the result on the same page below

submit button.

Source code:

<html>

<head>



function validate()

{

var user=document.login.uname.value;

var pwd=document.login.pwd.value;

var obj;

if(window.XMLHttpRequest)

{

obj=new XMLHttpRequest();

}

else

{

obj=new ActiveXObject('Microsoft.XMLHTTP');

}

obj.open("POST","check.php?u="+user+"&p="+pwd,true);

obj.send();

obj.onreadystatechange=function()

{

if(obj.readyState==4 && obj.status==200)

{

document.getElementById("success").innerHTML=obj.responseText;

}

}

}

</script>

</head>

<body>

<h3>Login</h3>

<form name="login" method="POST" action="check.php" onclick="validate()">

<table>

<tr>

<td>username</td>


</tr>

<tr>

<td>Password:</td>


</tr>

<tr>

<td></td>

<td><input type="button" value="submit"></td>

</tr>

</table>

</form>

<div id="success"></div>

</body>

</html>

Connection.php

<?php

mysql_connect("localhost","root","");

mysql_select_db("projectDB");

?>

Check.php

<?php

$user=$_REQUEST["u"];

$pass=$_REQUEST["p"];

include("connection.php");

$res=mysql_query(" select * from register where user='$user' and password='$pass' ");

if(mysql_num_rows($res)==1)

{

echo "you have sucessfully logged in";

}

else

{

echo "wrong credentials";

}

?>

Output:

Create a database: projectDB

Create table : register

iv. A sample calculator web application that takes two numbers and an operator(+,-,*,/,%) from an

HTML page and returns the result page with the operation performed on the operands.

Source code:

Calculator.php

<html>

<head>

<title>calculator</title>


function validateForm()

{

first=document.f1.fvalue.value;

second=document.f1.lvalue.value;

if(first=="")

{

alert("enter value");

document.f1.fvalue.focus();

return false;

}

if(isNaN(first))

{

alert("must enter number");

document.f1.fvalue.focus();

return false;

}

if(document.f1.operator.value=="")

{

alert("choose operator");

document.f1.operator.focus();

return false;

}

if(second=="")

{

alert("enter value");

document.f1.lvalue.focus();

return false;

}

if(isNaN(second))

{

alert("must enter number");

document.f1.lvalue.focus();

return false;

}

return true;

}

</script>

</head>

<body>

<form name="f1" method="post" action="success.php" onsubmit="return validateForm();">

<table cellpadding="5" cellspacing="5" border="0">

<tr>

<td>Enter First Number</td>

<td colspan="1"><input name="fvalue" id="fvalue" type="text"/></td>

<tr>

<td>Select Operator</td>

<td><select name="operator">

<option selected value=""> choose operator</option>

<option value="+">+</option>

<option value="-">-</option>

<option value="*">*</option>

<option value="/">/</option>

<option value="%">%</option>

</select></td>

</tr>

<tr>

<td>Enter second Number</td>

<td><input name="lvalue" type="text" id="lvalue"/></td>

</tr>

<tr>

<td></td>

<td><input type="submit" name="calculate" value="Calculate" /></td>

</tr>

</table>

</form>

</body>

</html>

Success.php

<?php

if( isset( $_REQUEST['calculate']))

{

$operator = $_REQUEST['operator'];

if($operator == "+")

{

$add1 = $_REQUEST['fvalue'];

$add2 = $_REQUEST['lvalue'];

$res = $add1 + $add2;

$result = 'SUM';

}

if($operator == "-")

{



$res = $add1 - $add2;

$result = 'DIFFERENCE';

}

if($operator == "*")

{



$res = $add1 * $add2;

$result = 'PRODUCT';

}

if($operator == "/")

{



$res= $add1 / $add2;

$result = 'DIVISION';

}

if($operator == "%")

{



$res= $add1 % $add2;

$result = 'REMAINDER';

}

}

?>

<?php echo "The <strong>".$result."</strong> Of <strong>".$add1."</strong> And

<strong>".$add2."</strong> Is <strong>". $res."</strong>"; ?>

<br/><br/><a href="calculator.php">click Here</a> To Go Back To Calculator

Output:

Documents

ANURAG COLLEGE OF ENGINEERING · right-click on My Computer, select Properties, then Advanced, then Environment Variables. Then, you would update the PATH value and press the OK button