Untitled

WEB TECHNOLOGIES LABORATORY
OBJECTIVE:
Presenting information over internet in form of web pages is the best way of reaching to
all corners of world. This laboratory aims at giving knowledge about creating web pages and also
about different web programming concepts, technologies.
OUTCOMES:
Upon the completion of Operating Systems practical course, the student will be able to:
1. Demonstrate the ability to retrieve data from a database and present it in a web page.
2. Demonstrate competency in the use of common HTML code.
3. Demonstrate competency using FTP to transfer web pages to a server.
4. Construct pages that meet guidelines for efficient download.
5. Construct pages that meet the needs of an identified audience.
6. Construct efficient file structure for web sites.
7. Evaluate the functions of specific types of web pages in relationship to an entire web site.
8. Design electronic text and web pages that include the standard textual components needed
on web pages.
9. Create web pages that meet accessibility needs of those with physical disabilities.
10. Understand how CSS will affect web page creation.
27 | P a g eEXPERIMENT-1
OBJECTIVE:
To Install XAMPP Stack Server.
RESOURCES:
XAMPP Stack Software, 1GB RAM, Hard Disk 80 GB.
PROCEDURE:
1. Run the XAMPP setup software.
2. In the next Screen, Select the path if required and then click on the Next Button.
27 | P a g e3. In the next screen select Apache and MySQL. You may optionally select FileZilla
(FTP Client) if needed. Click Install.
4. On successful completion of installation, the following window will appear.
27 | P a g e5. Click on Finish button.
INPUT AND OUTPUT:
27 | P a g ePRE LAB VIVA QUESTIONS:
1. What is XAMPP stack?
2. What is setup file?
3. What is client side scripting?
4. What is server side scripting?
LAB ASSIGNMENT:
1. Install WAMP Stack Server?
2. Install LAMP Stack Server?
POST LAB VIVA QUESTIONS:
1. What is Mysql?
2. Why is the name as Mysql?
3. What is the usage of apache tomcat server?
4. How to run the PHP file?
27 | P a g eEXPERIMENT-2
OBJECTIVE:
To accept a number from one text field in the range of 0 to 999 and shows it in another text field
in words. If the number is out of range, it should show “out of range” and if it is not a number, it
should show “not a number” message in the result box.
RESOURCES:
XAMPP Stack, 1GB RAM, Hard Disk 80 GB
PROGRAM LOGIC:
1. Create a HTML file.
2. Read a number in one text field and display that number name in another text field.
3. Include the JavaScript to convert number into words.
PROCEDURE:
To execute a PHP program:
1. Open XAMPP control Panel then start Apache Server and Mysql.
2. Open Notepad++ and Save the php program in htdocs folder of XAMPP.
3. To run the php file open the browser and type the following URL
localhost:90/directory name/filename
SOURCE CODE:
<html>
<head>
<script type="text/javascript">
var th = ['','thousand','million', 'billion','trillion'];
var dg=['zero','one','two','three','four','five','six','seven','eight','nine'];
var tn=['ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen','nineteen'];
var tw=['twenty','thirty','forty','fifty','sixty','seventy','eighty','ninety'];
function change()
{
var numString=document.getElementById('anumber').value;
var output=towords(numString);
27 | P a g edocument.getElementById('aresult').value=output;
}
function towords(s)
{
s = s.toString();
if (s != parseFloat(s)) return 'not a number';
var x = s.indexOf('.');
if (x == -1) x = s.length;
if (x > 3) return 'too big';
var n = s.split('');
var str = '';
var sk = 0;
for (var i=0; i < x; i++)
{
if ((x-i)%3==2)
{
if (n[i] == '1')
{
str += tn[Number(n[i+1])] + ' ';
i++;
sk=1;
}
else if (n[i]!=0)
{
str += tw[n[i]-2] + ' ';
sk=1;
}
}
else if (n[i]!=0)
{
str += dg[n[i]] +' ';
if ((x-i)%3==0) str += 'hundred ';
sk=1;
27 | P a g e}
if ((x-i)%3==1)
{
if (sk) str += th[(x-i-1)/3] + ' ';
sk=0;
}
}
return str;
}
</script>
</head>
<body>
<form>
enter a number<input type="text" id="anumber">
<input type="button" value='convert to words' onClick="change()">
<input type="text" size="40" id="aresult">
</form>
</body>
</html>
INPUT AND OUTPUT:
27 | P a g ePRE LAB VIVA QUESTIONS:
1. What is an example of client side scripting language?
2. What are JavaScript data types?
3. How do we submit the form in JavaScript?
4. What is JavaScript?
LAB ASSIGNMENT:
1. Write a JavaScript program for checking a number is even or odd?
2. Write a JavaScript program for a string is palindrome or not?
3. Write a JavaScript program for printing the days of a week?
POST LAB VIVA QUESTIONS:
1. How to create the text field?
2. How to retrieve the form data?
3. What is the purpose of writing document.getElementById ('anumber').value?
4. How to create an array in JavaScript?
27 | P a g eEXPERIMENT-3
OBJECTIVE:
To display the number lines ,words and characters from 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 a white space and lines are separated with new line character.
RESOURCES:
XAMPP Stack, 1GB RAM, Hard Disk 80 GB
PROGRAM LOGIC:
1. Create an HTML File to read the multi-line text using text area field.
2. Once the user clicks the submit button it should show the number of characters ,words and lines
entered in the text area.
3. Include the JavaScript code to count the number of characters, words and lines.
PROCEDURE:
To execute a PHP program:
1.Open XAMPP control Panel then start Apache Server and Mysql.
2.Open Notepad++ and Save the php program in htdocs folder of XAMPP.
3.To run the php file open the browser and type the following URL
localhost:90/directory name/filename
SOURCE CODE:
<html>
<head>
<script type="text/JavaScript">
function count()
{
var str=document.getElementById('atext').value;
var result='';
result+='The number of characters are'+str.length+'\n';
var arr=str.split(' ');
result+='The number of words are'+arr.length+'\n';
var a=str.split('\n');
27 | P a g eresult+='The number of lines are'+a.length;
alert(result);
}
</script>
</head>
<body>
<form>
<textarea rows='40' cols='70' id='atext'>
</textarea>
<input type="submit" value="submit" onclick="count()">
</form>
</body>
</html>
INPUT AND OUTPUT:
PRE LAB VIVA QUESTIONS:
1. How to create the HTML document?
2. How to create the text area in an HTML document?
3. How to create the submit button in an HTML document?
27 | P a g e4. How to create function in an HTML document?
LAB ASSIGNMENT:
1. Write an HTML program for creating two frames?
2. Write a HTML program for adding images with HTML.
3. Write a HTML Program to demonstrate Cell Spacing and Cell Padding in a XHTML Table?
POST LAB VIVA QUESTIONS:
1. What is the purpose of str.split(' ')?
2. What is the purpose of str.split('\n')?
3. How to find the length of the array?
4. How to create the alert message?
27 | P a g eEXPERIMENT-4
OBJECTIVE:
To print the capital of country from 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)
RESOURCES:
XAMPP Stack, 1GB RAM, Hard Disk 80 GB
PROGRAM LOGIC:
1. Create an HTML file from which select the country from the selection box.
2. Once the user selects the country it should display the selected country’s capital.
3. Include the JavaScript display the capital for selected country.
4. Create the CSS file which includes the properties like color, bold and font size.
PROCEDURE:
To execute a PHP program:
1.Open XAMPP control Panel then start Apache Server and Mysql.
2.Open Notepad++ and Save the php program in htdocs folder of XAMPP.
3.To run the php file open the browser and type the following URL
localhost:90/directory name/filename
SOURCE CODE:
<html>
<title>Fourth Program</title>
<head>
<script type="text/JavaScript">
function OnDropDownChange(dropDown)
{
var selectedValue = dropDown.options[dropDown.selectedIndex].value;
document.getElementById("txtSelectedCapital").innerHTML = selectedValue;
}
</script>
</head>
<body>
27 | P a g e<form action = "">
<select name = "Countries" onChange="OnDropDownChange(this);">
<option value="">--Select a country--</option>
<option value="New Delhi">India</option>
<option value="Wellington">New Zealand</option>
<option value="Paris">France</option>
<option value="Athens">Greece</option>
<option value="Madrid">Spain</option>
</select>
<h1
style="color:blue;font-family:verdana;font-size:300%;"
id="txtSelectedCapital"
type="text"></h1>
</form>
</body>
</html>
INPUT AND OUTPUT:
27 | P a g ePRE LAB VIVA QUESTIONS:
1. How do you insert a comment in html?
2. What are some of the common lists that can be used when designing a page?
3. How do you create links to sections within the same page?
4. Does a hyperlink apply to text only?
LAB ASSIGNMENT:
1. Write a HTML Program to demonstrate Form Fields.
2. Write a HTML Demonstration of Navigation through various frames
3. To create a php program to demonstrate the different file handling methods.
POST LAB VIVA QUESTIONS:
1. If the user’s operating system does not support the needed character, how can the symbol be
represented?
2. How do you change the number type in the middle of a list?
3. Is it possible to set specific colors for table borders?
4. How do you create a link that will connect to another web page when clicked?
27 | P a g eEXPERIMENT-5
OBJECTIVE:
To write a program that parses an XML document using DOM and SAX parsers.
RESOURCES:
JDK Tool Kit, 1GB RAM, Hard Disk 80 GB
PROGRAM LOGIC:
1. Create a .xml file that has to be parsed.
2. Using DOM parser
i. Get a document builder using document builder factory and parse the xml file to create a
DOM object
ii. Get a list of User elements from the DOM
iii. For each User element id get the name, age and qualification.
3. Using SAX Parser
Create a Sax parser and parse the xml
In the event handler create the User object
Print out the data
PROCEDURE:
To execute a java program we require setting a class path:
1.C:\set path= C:\Program Files\Java\jdk1.6.0\bin;.;
2.C:\javac Parse.java
3. C:\java Parse
SOURCE
CODE:
DOM:
Student.xml
<?xml version="1.0"?>
<student>
<Roll_No>10</Roll_No>
<Personal_Info>
<Name>parth</Name>
<Address>pune</Address>
<Phone>1234567890</Phone>
</Personal_Info>
<Class>Second</Class>
<Subject>Maths</Subject><Marks>100</Marks>
27 | P a g e27 | P a g e<Roll_No>20</Roll_No>
<Personal_Info>
<Name>AnuRadha</Name>
<Address>Bangalore</Address>
<Phone>90901233</Phone>
</Personal_Info>
<Class>Fifth</Class>
<Subject>English</Subject>
<Marks>90</Marks>
<Roll_No>30</Roll_No>
<Personal_Info>
<Name>Anand</Name>
<Address>Mumbai</Address>
<Phone>90901256</Phone>
</Personal_Info>
<Class>Fifth</Class>
<Subject>English</Subject>
<Marks>90</Marks>
</student>
Parse.java
import java.io.*;
import javax.xml.parsers.*;
import org.w3c.dom.*;
import org.xml.sax.*;
public class Parse
{
public static void main(String[] arg)
{
try
{
System.out.println("enter the name of xml document");
BufferedReader input=new BufferedReader(new InputStreamReader(System.in));
String file_name=input.readLine();
File fp=new File(file_name);
if(fp.exists())
27 | P a g e{
try
{
DocumentBuilderFactory Factory_obj=DocumentBuilderFactory.newInstance();
DocumentBuilder builder=Factory_obj.newDocumentBuilder();
InputSource ip_src=new InputSource(file_name);
Document doc=builder.parse(ip_src);
System.out.println(file_name+" is well-formed!");
}
catch(Exception e)
{
System.out.println(file_name+" isn't well-formed!");
System.exit(1);
}
}
else
{
System.out.print("file not found!");
}
}
catch(IOException ex)
{
ex.printStackTrace();
}
}}
SAX:
EmployeeDetail.xml:
<?xml version="1.0"?>
<EmployeeDetail>
<Employee>
<Emp_id>E-001</Emp_id>
<Emp_Name>revathy</Emp_Name>
<Emp_E-mail>revathy@yahoo.com</Emp_E-mail>
</Employee>
<Employee>
27 | P a g e<Emp_id>E-002</Emp_id>
<Emp_Name>vinod</Emp_Name>
<Emp_E-mail>vinod2@yahoo.com</Emp_E-mail>
</Employee>
<Employee>
<Emp_id>E-001</Emp_id>
<Emp_Name>deepak</Emp_Name>
<Emp_E-mail>deepak3@yahoo.com</Emp_E-mail>
</Employee>
</EmployeeDetail>
SAXParserCheck.java:
import org.xml.sax.*;
import org.xml.sax.helpers.*;
import java.io.*;
public class SAXParserCheck
{
public static void main(String[]args)throws IOException
{
BufferedReader bf=new BufferedReader(new InputStreamReader(System.in));
System.out.print("enter XML file name :");
String xmlfile=bf.readLine();
SAXParserCheck par=new SAXParserCheck(xmlfile);
}
public SAXParserCheck(String str)
{
try
{
File file=new File(str);
if(file.exists())
{
XMLReader reader=XMLReaderFactory.createXMLReader();
reader.parse(str);
System.out.println(str+" is well-formed!");
}
else
27 | P a g e{
System.out.println("File not found:"+str);
}
}
catch(SAXException sax)
{
System.out.println(str+" isn't well-formed");
}
catch(IOException io)
{
System.out.println(str+" isn't well-formed");
}
INPUT AND
OUTPUT: DOM:
SAX:
27 | P a g ePRE LAB VIVA QUESTIONS:
1. Is Java purely object oriented language?
2. How to create an object in java language?
3. How to display the string in java language?
4. What is the purpose of java.io.* package?
LAB ASSIGNMENT:
1. Write a program to reverse a number using Java language?
2. Write a program for linear search using Java language?
3. Write a program to check a number is even or odd using Java language?
POST LAB VIVA QUESTIONS:
1. How to handle the exceptions in java?
2. How to catch exceptions using java language?
3. How to read the XML file using java language?
4. How many types of parsers we have in XML?
27 | P a g eEXPERIMENT-6
OBJECTIVE:
To validate the user login using PHP and database.
RESOURCES:
XAMPP Stack, 1GB RAM, Hard Disk 80 GB
PROGRAM LOGIC:
1. Create the user database and table along with the user name and password as the attributes.
2. Create an HTML File to retrieve user name and password.
3. Create PHP file to retrieve the data from the database and HTML File.
4. Authenticate the user name and password if it is the valid user the display as successful login
otherwise display failure message.
PROCEDURE:
To execute a PHP program:
1. Open XAMPP control Panel then start Apache Server and Mysql.
2. Open Notepad++ and Save the php program in htdocs folder of XAMPP.
3. To run the php file open the browser and type the following URL
localhost:90/directory name/filename
SOURCE CODE:
<html>
<body>
<form enctype="multipart/form-data" action="database.php" method="post">
username:
<input type="text" name="username">
<br>
password:
<input type="password" name="password" maxlength="10">
<br>
<input type="submit" name="submit">
</form>
</body>
</html>
database.php
27 | P a g e<?php
$name=$_REQUEST['username'];
$pass=$_REQUEST['password'];
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'santosh';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn ) {
die('Could not connect: ' . mysql_error());
}
$sql = 'SELECT username, password FROM user_detail';
mysql_select_db('user_login');
$retval = mysql_query( $sql, $conn );
if(! $retval ) {
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
if($name==$row['username'] && $pass==$row['password'])
{
echo("login sucesses");
return true;
}
else
{
echo("invalid username and paasword ");
return false;
}
}
?>
27 | P a g e27 | P a g eINPUT AND OUTPUT:
PRE LAB VIVA QUESTIONS:
1. What does the initials of PHP stand for?
2. Which programming language does PHP resemble to?
3. What is the actually used PHP version?
4. How do you execute a PHP script from the command line?
5. How can PHP and HTML interact?
LAB ASSIGNMENT:
1.Write a HTML program to demonstrate HTML Headers.
2.Write a HTML program using images as link Anchor.
3.Write a HTML program for adding images with HTML.
POST LAB VIVA QUESTIONS:
1. What is the difference between SQL and Mysql?
2. What is JOIN in MySQL? What are the different types of join?
3. If we use SUM function in MySQL, does it return sum of that row or for that column?
4. What do we use to remove duplicate records while fetching a data in MySQL?
27 | P a g eEXPERIMENT-7
OBJECTIVE:
To validate the user login using PHP and XML.
RESOURCES:
XAMPP Stack, 1GB RAM, Hard Disk 80 GB
PROGRAM LOGIC:
1. Create the XML file with the tags user name and password.
2. Create an HTML File to retrieve user name and password.
3. Create PHP file to retrieve the data from the XML and HTML File.
4. Authenticate the user name and password if it is the valid user the display as successful login
otherwise display failure message.
PROCEDURE:
To execute a PHP program:
1. Open XAMPP control Panel then start Apache Server and Mysql.
2. Open Notepad++ and Save the php program in htdocs folder of XAMPP.
3. To run the php file open the browser and type the following URL
localhost:90/directory name/filename
SOURCE
CODE: html
file
<html>
<body>
<form action="database.php" method="post">
username:
<input type="text" name="username">
<br>
password:
<input type="password" name="password" maxlength="10">
<br>
<input type="submit" name="submit">
</form>
</body></html>
27 | P a g exml file-file.xml
<?xml version=”1.0”?>
<user-detail>
<username>santosh</username>
<password>iare</password>
</user-detail>
php file
<?php
$name=$_REQUEST['username'];
$pass=$_REQUEST['password'];
$file=”file.xml”;
$xml=simplexml_load_file($file);
If($name==$xml->username && $pass==$xml->password)
{
echo("login sucesses");
return true;
}
Else
{
echo("invalid username and paasword ");
return false;
}
?>
INPUT AND OUTPUT:
27 | P a g ePRE LAB VIVA QUESTIONS:
1. Whether root element is required for XML? If so, how many root elements are required?
2. What are the disadvantages of xml?
3. Is there a way to describe XML data?
4. What is well formed XML document?
LAB ASSIGNMENT:
1. Write a program to create a CD catalog using XML file.
2. To create an XSL style sheet to display the data in the xml using html table.
3. Write an XML file which will display the Book information.
It includes the following:
1) Title of the book
2) Author Name
3) ISBN number
4) Publisher name
5) Edition
6) Price
Write an Internal Document Type Definition (DTD) to validate the above XML file.
POST LAB VIVA QUESTIONS:
1. How to read the data from the controls.
2. Why do we use multipart/form-data in html form?
3. What function do we use to find length of string, and length of array?
4. How to display the form data in php?
27 | P a g eEXPERIMENT-8
OBJECTIVE:
To develop simple calculator web application.
RESOURCES:
XAMPP Stack, 1GB RAM, Hard Disk 80 GB
PROGRAM LOGIC:
1.Create an HTML file to read two variables and operator.
2.Create an PHP file to compute the arithmetic operation.
3.Dispaly the result.
PROCEDURE:
To execute a PHP program:
1. Open XAMPP control Panel then start Apache Server and Mysql.
2. Open Notepad++ and Save the php program in htdocs folder of XAMPP.
3. To run the php file open the browser and type the following URL
localhost:90/directory name/filename
SOURCE CODE:
cal.html
<html>
<body>
<form method="POST" action="process.php">
NO1:
<input type="text" name="num1" id="num1">
<br>
NO2:
<input type="text" name="num2" id="num2">
<br>
<select name = "func">
<option value="+">Add [+]</option>
<option value="-">Subtract[-]</option>
<option value="*">Multiple[*]</option>
<option value="/">Divide[/]</option>
30<option value=”%”>modulus</option>
</select>
<input type="submit" name="submit" value="Submit" >
</form
</body>
</html>
process.php
<?php
$num1 = ($_POST['num1']);
$num2 = ($_POST['num2']);
$func= ($_POST['func']);
if(is_numeric($num1) &&is_numeric($num2) )
{
if($func != null)
{
switch($func)
{
case "+" : $result= $num1 + $num2; break;
case "-" : $result= $num1 - $num2; break;
case "*" : $result= $num1 * $num2; break;
case "/" : $result= $num1 / $num2; break;
case "%" : $result= $num1 % $num2; break;
}
echo("calculation result: ". $result);
}
}
?>
31INPUT AND OUTPUT:
PRE LAB VIVA QUESTIONS:
1. What are arithmetic operations in PHP?
2. How can we change the value of a constant?
3. Differences between GET, POST and REQUEST methods ?
4. What is Open Source Software?
LAB ASSIGNMENT:
1. A program to store and display student marks using arrays.
2. Write a HTML Program to demonstrate different forms of Lists- Ordered, Unordered, Nested
and description lists
3. Write a HTML Demonstration of Navigation through various frames
POST LAB VIVA QUESTIONS:
1. How to read the data using form controls?
2. How to use the switch case in PHP?
3. What is the purpose of ($_POST['num1'])?
4. What is the purpose of ($_POST['num2'])?
| P a g eEXPERIMENT-9
OBJECTIVE:
To validate age attribute, if age is less than 18 then display a message the user is not authorized to
visit this site otherwise a welcome message should be displayed using PHP.
RESOURCES:
XAMPP Stack, 1GB RAM, Hard Disk 80 GB
PROGRAM LOGIC:
1Create an HTML file to read the age and username.
2. Create a PHP file to check the user age.
3. If age>18 then display a message, welcome to the site otherwise display not authorized to this
site.
PROCEDURE:
To execute a PHP program:
1.Open XAMPP control Panel then start Apache Server and Mysql.
2.Open Notepad++ and Save the php program in htdocs folder of XAMPP.
3.To run the php file open the browser and type the following URL
localhost:90/directory name/filename
SOURCE
CODE: age
checking
<html>
<body>
<form action="age.php" method="post">
username:
<input type="text" name="username">
<br>
password:
<input type="number" name="age" maxlength="10">
<br>
<input type="submit" name="submit">
</form>
| P a g e| P a g e</body>
</html>
age.php
<?php
$name=$_REQUEST['username'];
$age=$_REQUEST['age'];
if($age<=18)
{
echo("hello!".$name.".not authorized to visit this site");
}
else
{
echo("hello!".$name.".welcome to this site");
}
?>
INPUT AND OUTPUT:
| P a g ePRE LAB VIVA QUESTIONS:
1. Explain how to submit form without a submit button.
2. How can we encrypt the password using PHP?
3. What is the difference between $message and $$message?
4. Is PHP a loosely Typed Language? What is the difference between strongly typed and loosely
typed language?
LAB ASSIGNMENT:
1. Write a PHP program for reversing the string?
2. Write a PHP program for creating feedback Form?
3. Write a PHP program for creating registration form?
POST LAB VIVA QUESTIONS:
1. How will you create a database using PHP and MySQL?
2. How will you find out the value of current session id?
3. List the different run time errors in PHP.
4. What is a PHP Session?
| P a g e