WEB PRACTICALS
Practical1a.html
AIM: Design a webpage that make use of document structure tag.
<HTML>
<Head>
<title> Document structure tags
</title>
</Head>
<body bgcolor="Red">
<Header> Header of web page
</Header>
<Br/> <Br/> <hr/>
<p> This is simple web page
</p>
<Br/> <Br/> <hr/>
<Footer> Created Date:13-07-19
</Footer>
</body>
</HTML>
Practical1b.html
AIM: Design web page that make use of various text formatting tags.
<HTML>
<head>
<title> Text formatting tags
</title>
</head>
<body bgcolor="#00FF00">
<H1 align="center"> <B> <I> Student Info
</I> </B> </H1> <Br/> <Br/> <hr/>
<font face="Arial" color="Red" size="10">
Name:<big> Abc </big> <Br/>
<font face="verdana" color="Blue" size="15">
Roll No.:<em> 01 </em>
</body>
</HTML>
Practical1c.html
AIM: Design web page that make use of various text List tags.
<html>
<head>
<title>List tag
</title>
</head>
<body bgcolor="violet">
<H1 align="center"> Course offered
</H1>
<ul type="square">
<li>IT</li>
<ol type="1">
<li>FYIT</li>
<li>SYIT</li>
</ol>
<li> CS </li>
<ol type="A">
<li>FYCS</li>
<li>SYCS</li>
</ol>
</ul>
</body>
</html>
Practical1d.html
AIM: Design web page that define image and image map.
<HTML>
<head>
<title>IMAGE MAPPING
</title>
</head>
<body>
<p>click on the<B>HOTSPOT</B>to see previous praticals</p>
<img src="Tiger.jpg" usemap="#main">
<map name="main">
<area shape="circle" coords="129,150,150" alt="Pratical1a" href="Pratical1a.html" border="5">
<area shape="rect" coords="366,75,805,420" alt="Pratical1b" href="Pratical1b.html" border="5">
<area shape="poly" coords="250,300,105,614,505,614" alt="Pratical1c" href="Pratical1c.html"
border="5">
</map>
</body>
</html>
Practical2a.html
AIM: Design web page that demonstrate Table tag.
<HTML>
<head>
<title> Table tag
</title>
</head>
<body >
<table border="1" cellspacing="2" cellpadding="2" height="100" width="100">
<caption> Statewise population </caption>
<tr> <th> state </th>
<th colspan="2"> population </th>
</tr>
<tr> <td rowspan="3">Maharashtra </td>
<td> Year </td>
<td> Population </td>
</tr>
<tr>
<td> 2005 </td>
<td> 6800000 </td>
</tr>
<tr>
<td> 2010 </td>
<td> 10000000 </td>
</tr>
<tr>
<td rowspan="2"> Kerala </td>
<td> 2005 </td>
<td> 4500000 </td>
</tr>
<tr>
<td> 2010 </td>
<td> 15000000 </td>
</tr>
</table>
</body>
</HTML>
Practical2b.html
AIM: Design web page for Application Form.
<HTML>
<head>
<head><title>Application form
</title>
</head>
<body>
<H1> Application form </H1>
<form name="f1" action="next.html" method="post">
<pre>
Name:<input type="text " id="Name">
Contact:<input type="number" id="Contact">
Gender:<input type="radio" value="male" id="Gender">male <input type="radio"value="female" id="Gender">female
skillset<input type="checkbox">Game <input type="checkbox">music
</pre>
<input type="submit"value="submit">
<input type="reset"value="reset">
</form>
</body>
</html>
Next.html
<HTML>
<body>
<p> Form Submitted Successfully
</p>
</body>
</HTML>
Practical2c.html
AIM: Design web page to Embedded Multimedia Element.
<HTML>
<title>working with multiamedia
</title>
</head>
<body>
<video src="Believer.mp4" height="200px" width="200px" controls>
s</video> <br/> <hr/>
<audio src="Leja Re.mp3" height="200px" width="200px" controls>
</audio>
</body>
</HTML>
Practical2d.html
AIM: Design web page to link different practical & allows Navigation.
<HTML>
<head>
<title> Working with Navigation
</title>
</head>
<body bgcolor="Yellow" link="Blue" link="Purple" link="Red">
<pre>
<H1>index</H1>
<a href="pratical2a.html">use of table tag </a>
<a href="pratical2b.html">use of form tag </a>
<a href="pratical2c.html">multimedia </a>
</pre>
</body>
</HTML>
Practical3.html
AIM: Design web page that demonstrate css selector & all types of css.
<!DOCTYPE HTML>
<HTML>
<head>
<title>cascading style sheet
</title>
<link rel="stylesheet" type="text/css" href="style1.css"/>
<style>
.c1{tect-align:center;color:Green;font-family:arial}
#i1{color:blue;font-size:20px;text-decoration:underline}
</style>
</head>
<body style="background-color:yellow">
<h1 class="c1"> Save Trees </h1>
<p id="i1"> benefits of tree </p>
<h3> purify water </h3>
<h5 style="font-family:Algerian;text-style:italic"> purify air </h5>
<h6> boost economy <h6>
</body>
</HTML>
Practical4a.html
AIM: Write a Javascript code for performing various operations.
<HTML>
<head>
<title> Using javascript
</title>
<script language="javascript">
function fact(n)
{
var num=n;
var x=1;
while(n)
{
x=x*n;
n--;
}
alert("Factorial of" +num+ "is"+ x);
}
function prime(n)
{
var flag=1;
for(var i=2; i<n; i++)
{
if(n % i==0)
{
flag=0;
break;
}
}
if(flag==0)
{
alert(n+ "is not a prime number");
}
else
{
alert(n+ "is a prime number");
}
}
function sum(n)
{
var i;
var sm=0;
for(i=1; i<=n; i++)
{
sm=sm+1;
}
alert("the sum of "+n+ " is="+ sm);4
}
</script>
</head>
<body>
<form>
<h1> Select mathematical operation </h1>
Enter a number:<input type="text" name="n"><br/>
<input type="submit" onclick="fact(n.value)"
value="calculate factorial"><br/>
<input type="submit" onclick="prime(n.value)"
value="check prime"><br/>
<input type="submit" onclick="sum(n.value)" value="find
submation">
</form>
</body>
<HTML>
Practical4b.html
AIM: Write a Javascript code for validate various form element.
<HTML>
<head>
<title> Using javascript
</title>
<script language="javascript">
function validate()
{
var nm=document.form["My form"]["fname"].value;
var un=document.form["My form"]["uname"].value;
var pn=document.form["My form"]["phone"].value;
var pass=document.form["My form"]["pass"].value;
if(num=="" || un=="" || pn=="" || email=="" || bdate=="")
{
alert("Mandatory fields must be filled");
}
var pass_regex="(?=.*/d)(?=.*[a-z])(?=.*[A-Z]).{8,}";
if(!pass.match(pass_regex))
{
alert("Please enter valid password");
}
if(isNan(pn))
{
alert("Please enter mumber only");
}
var atpos=email.indexof("@");
var datpos=email.indexof(".");
{
alert("Please enter valid email id");
}
}
</script>
</head>
<body>
<h1> Registration form </h1>
<form name="Myform" action="next.html" method="post">
full name:<input type="text" name="fname" required><br/>
username:<input type="text" name="uname" required><br/>
password:<input type="password" name="pass" required><br/>
contact number:<input type="number" name="email"><br/>
Emailid:<input type="email" name="phone"><br/>
Birthdate:<input type="date" name="bdate"><br/>
<input type="submit" value="Send Data" onclick="validate()">
<input type="reset" value="clear all>
</form>
</body>
</HTML>
Practical5a.html
AIM: Demonstrate different JavaScript option such as Math and Date.
<!DOCTYPE HTML>
<html>
<head>
<title>math and date function</title>
</head>
<body>
<script type="text/javascript">
document.write("<H1>"+"date function"+"</H1>");
varmydate=new Date();
document.write("today is:"+mydate.getDate()+"/"+(mydate.getMonth()+1)+"/"+ mydate.getFullYear()+"<br/>");
document.write("time:"+mydate.getHours()+":"+ mydate.getMinutes()+":"+mydate.getSeconds()+"<br/>");
document.write("<hr/>"+"<h1>"+"Math functions"+"</h1>"+"<br/>");
document.write("log:"+Math.log(12.6)+"<br/>");
document.write("max:"+Math.max(12,15,16,20)+"<br/>");
document.write("min:"+Math.min(12,15,16,20)+"<br/>");
document.write("Power:"+Math.pow(10,2)+"<br/>");
document.write("Square root:"+Math.sqrt(100)+"<br/>");
</script>
</body>
</html>
Practical5b.html
AIM: Demonstrating different Javascript object such as history.
<html>
<head>
<script type="text/javascript">
functiongoBack()
{
varhistcount=history.length;
document.write("you have visited "+ histcount +" web pages so far");
}
</script>
</head>
<body>
<form>
<input type="button" value="check history" onclick="goBack()">
</form>
</body>
</html>
Practical5c.html
AIM: Demonstrating different Javascript object such as Location.
<html>
<head>
<script type="text/javascript">
functionforAssign()
{
window.location.assign("http://www.vivacollege.org")
}
functionforReplace()
{
window.location.replace("http://www.google.com")
}
</script>
</head>
<body>
<input type="button" value="viva college" onclick="forAssign()"/>
<input type="button" value="Google" onclick="forReplace()"/>
</body>
</html>
Practical5d.html
AIM: Demonstrating different Javascript object such as Window.
<html>
<head>
<script type="text/javascript">
functionOpenWin(url)
{
var width=400, height=300;
mywindow=window.open(url,"Subwind",400,300);
}
functionshowAlert()
{
alert("This is alter box")
}
functioncloseWindow()
{
window.close();
}
</script>
</head>
<body>
<input type="button" value="New window"
onclick="OpenWin('www.google.com')"/>
<input type="button" value="show Alter box" onclick="showAlert()"/>
<input type="button" value="close" onclick="closeWindow()"/>
</body>
</html>
.
Practical 6 (A)
AIM: Create a XML file with internal DTD and display it using CSS.
favbooks.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style2.css"?>
<!DOCTYPEfavbooks[
<!ELEMENTfavbooks (book,title,author,publisher)>
<!ELEMENT book (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
]>
<favbooks>
<book>
<title>The Story</title>
<author>M.K.gandhi</author>
<publisher>Penguin India</publisher>
</book>
<book>
<title>Oliver Twist</title>
<author>Charles Dickens</author>
<publisher>Repa and co</publisher>
</book>
</favbooks>
Style2.css
favbooks
{
background-color:#FFFFFF;
width:100%;
}
book
{
display:block;
margin-bottom:30pt;
margin-left:0;
}
title
{
color:#FF0000;
font-size:20pt;
}
author,publisher
{
color:#0000FF;
font-size:16pt;
}
title,author,publisher
{
display:Block;
margin-left:20pt;
}
Practical 6 (B)
AIM: Create a XML file with DTD and display it using XSL.
favbooks.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="fav.xsl"?>
<!DOCTYPEfavbooks[
<!ELEMENTfavbooks (book,title,author,publisher)>
<!ELEMENT book (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
]>
<favbooks>
<book>
<title>The Story</title>
<author>M.K.gandhi</author>
<publisher>Penguin India</publisher>
</book>
<book>
<title>Oliver Twist</title>
<author>Charles Dickens</author>
<publisher>Repo and co</publisher>
</book>
</favbooks>
fav.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<table border="1">
<trbgcolor="#9acd32">
<th>TITLE</th>
<th>AUTHOR</th>
<th>PUBLISHER</th>
</tr>
<xsl:for-each select="favbooks/book">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="publisher"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Steps for run php program:
1. turn on wamp server
2. save your code in C:/wamp/www/new folder/___.php.
3. left click on wamp server icon(taskbar) -> restart all services
4. click on local host -> select your project-> localhost/_____. php
Practical No: 7
AIM: Design a web page to handle asynchronous request using AJAX on button click.
Pract7.html
<!DOCTYPE html>
<head>
<script type="text/javascript">
functionloadXMLDoc()
{
string=document.getElementById("t1").value
url="P1.php? t1="+string;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp.onreadstateChange=function()
{
if(xmlhttp.readstate==4 &&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form action="P1.php" method="get" target="_blank">
Enter text:
<input type="text" name="t1">
<div id="myDiv"><H2> Let AJAX change this</H2></div>
<input type="submit" onclick="loadXMLDoc()" value="change content">
</body>
</html>
P1.php
<?php
$text=$_GET["t1"];
echo "You have typed ".$text;
echo"<p>Text retrived by AJAX</p>";
?>
Practical No: 8 (A)
AIM: Write a php script for retrieving data from html form.
8a.html
<!DOCTYPE html>
<head></head>
<body>
<form action="Next.php" method="get" target="_blank">
Name:<input type="text" name="name"><br/>
Roll no:<input type="text" name="no"><br/>
<input type="submit" value="submit">
</form>
</body>
</html>
Next.php
<!DOCTYPE html>
<body>
Welcome <?php echo $_GET["name"]?>
<br/>
Your Roll no is <?php echo $_GET["no"]?>
</body>
</html>
___________________________________________________________________
Practical No: 8 (B)
AIM: Write a php script for calculate factorial number.
8b.php
<?php
if(isset($_POST["number"]))
{
$num = $_POST["number"];
$factorial = 1;
for ($x=$num; $x>=1; $x--)
{
$factorial = $factorial * $x;
}
}
else
$factorial = "";
?>
<html>
<body>
<form action="" method="post">
Enter a Number: <input type="text" name="number"><br/>
<input type="submit" Value="Calculate Factorial"><br/><br/>
<?php
if($factorial)
echo "Factorial of $num is $factorial";
?>
</form>
</body>
</html>
_
Practical No: 8 (C)
AIM: Write a php script for display pyramid.
8c.php
<!DOCTYPE html>
<head></head>
<body>
<script language="php">
$x=1;
for($i=0;$i<4;$i++) {
$p=$x;
for($j=0;$j<=$i;$j++)
{
echo "$p
\t";
if($p==0)
$p=0;
}
echo "<br>";
if($x==0)
{
$x=1;
}
else
{
$x=0;
}
}
</script>
</body>
</html>
____________________________________________________________________
Practical No: 8 (D)
AIM: Write a php script for working on string function.
8d.php
<!DOCTYPE html>
<body>
<script language="php">
$str1='Hello';
$str2='World';
echo "Lenght of first word is ", strlen($str1),"<br/>";
echo $str1, " ", $str2;
</script>
</body>
</html>
___________________________________________________________________
Practical No: 9
AIM: Working with Database.
create database company5;
use company5;
create table employee(
employee_id int(10) NOT NULL auto_increment,
employee_name varchar(255) NOT NULL,
employee_email varchar(255) NOT NULL,
employee_contact varchar(255) NOT NULL,
employee_address varchar(255) NOT NULL,
primary key (employee_id)
);
insert into employee (employee_name, employee_email,employee_contact,employee_address) values
("Ramesh","suresh@gmail.com", "9897674534","virar west");
insert into employee (employee_name, employee_email,employee_contact,employee_address) values
("suresh","suresh@gmail.com", "9897674534","virar west");
insert into employee (employee_name, employee_email,employee_contact,employee_address) values
("Sagar","suresh@gmail.com", "9897674534","virar west");
select * from employee;
datafile.php
<!DOCTYPE html>
<html>
<head>
<title>Read Data from Database</title>
</head>
<body>
<h2> Read Data From Database Using PHP</h2>
<br>
<p>Click On Menu</p>
<?php
$connection= mysql_connect("localhost","root", "root");
$db = mysql_select_db("company", $connection);
$query = mysql_query("select * from employee", $connection);
while($rows=mysql_fetch_array($query)){
echo "<b><a href = \"readphp.php?id={$rows['employee_id']}\">{$rows['employee_name']}</a></b>";
echo "<br>";
}
?>
</body>
</html>
readphp.php
<?php
if (isset($_GET['id'])){
$connection2= mysql_connect("localhost","root", "root");
$id = $_GET['id'];
$db2 = mysql_select_db("company", $connection2);
$query2 = mysql_query("select * from employee where employee_id = $id", $connection2);
while($rows2=mysql_fetch_array($query2)){
?>
<div>
<h2>--Details--</h2>
<br>
<span>Employee_id:</span><?php echo $rows2['employee_id']; ?><br>
<span>Name:<span><?php echo $rows2['employee_name']; ?><br>
<span>E-mail:<span><?php echo $rows2['employee_email']; ?><br>
<span>Contact No.:<span><?php echo $rows2['employee_contact']; ?><br>
<span>Address:<span><?php echo $rows2['employee_address']; ?><br>
</div>
<?php
}
}
?>
<?php
mysql_close($connection2);
?>
Practical No: 10
AIM: Handling Database.
db.php
<?php
//$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$connection= mysql_connect("localhost","root", "root") or die(mysql_error());
$db = mysql_select_db("company5", $connection) or die(mysql_error());
?>
delete.php
<?php
ob_start();
include("db.php");
if(isset($_GET['id'])!="")
{
$delete=$_GET['id'];
$delete=mysql_query("DELETE FROM employee WHERE employee_id='$delete'");
if($delete)
{
header("Location: pract10.php");
}
else
{
echo mysql_error();
}
}
ob_end_flush();
?>
edit.php
<?php
ob_start();
include('db.php');
if(isset($_GET['id']))
{
$id=$_GET['id'];
if(isset($_POST['update']))
{
$eid=$_POST['empid'];
$ename=$_POST['ename'];
$eemail=$_POST['eemail'];
$econtact=$_POST['econtact'];
$eaddress=$_POST['eaddress'];
$updated=mysql_query("UPDATE employee SET employee_name='$ename', employee_email
='$eemail', employee_contact='$econtact', employee_address='$eaddress' WHERE employee_id = '$eid'")
or die();
if($updated)
{
header('Location:prac10.php');
}
}
} //update ends here
if(isset($_POST['add']))
{
$ename=$_POST['ename'];
$eemail=$_POST['eemail'];
$econtact=$_POST['econtact'];
$eaddress=$_POST['eaddress'];
$added=mysql_query("INSERT into employee (employee_name, employee_email,
employee_contact,employee_address) values (
'$ename', '$eemail', '$econtact', '$eaddress' )") or die();
if($added)
{
header('Location:prac10.php');
}
}
ob_end_flush();
?>
<!DOCTYPE>
<html>
<head>
<title>Edit form</title>
</head>
<body>
<form action="" method="post">
<?php
if(isset($_GET['id']))
{
$id=$_GET['id'];
$getselect = mysql_query("SELECT * FROM employee WHERE employee_id='$id'");
while($rows=mysql_fetch_array($getselect))
{
?>
<input type="hidden" name="empid" id="empid" value="<?php echo $rows['employee_id']; ?>" />
Employee name: <input type="text" name="ename" required value="<?php echo
$rows['employee_name']; ?>" id="ename" /><br><br>
Employee email: <input type="email" name="eemail" required value="<?php echo
$rows['employee_email']; ?>" id="eemail" /><br><br>
Employee contact: <input type="number" name="econtact" required value="<?php echo
$rows['employee_contact']; ?>" id="econtact" /><br><br>
Employee address: <input type="text" name="eaddress" required value="<?php echo
$rows['employee_address']; ?>" id="eaddress" /><br><br>
<input type="submit" name="update" value="Update" id="btnUpdate" />
<?php
}
}
else
{
?>
Employee Name: <input type="text" name="ename"><br><br>
Email: <input type="email" name="eemail"><br><br>
Contact number: <input type="tel" name="econtact" maxlength="10"><br><br>
Address: <textarea cols="20" rows="4" name="eaddress"></textarea><br><br>
<input type="submit" name="add" value="Send data"><input type="reset" value="Clear All">
<?php
}
?>
</form>
</body>
</html>
pract10.php
<!DOCTYPE html>
<html>
<body>
<h2> Employee Data</h2>
<br>
<?php
include("db.php");
$query = mysql_query("select * from employee", $connection);
?>
<a href="edit.php"> Add New </a><br>
<table border="2" cellspacing="2" cellpadding="3" width="80%">
<tr>
<td> Employee ID</td>
<td> Employee Name</td>
<td> Employee Email</td>
<td> Employee Contact</td>
<td> Employee Address</td>
<td colspan="2">Action</td>
</tr>
<?php
while($rows=mysql_fetch_array($query)){
echo "<tr>";
echo "<td> {$rows['employee_id']} </td>";
echo "<td> {$rows['employee_name']} </td>";
echo "<td> {$rows['employee_email']} </td>";
echo "<td> {$rows['employee_contact']} </td>";
echo "<td> {$rows['employee_address']} </td>";
echo "<td><a target=\"_blank\" href=\"edit.php?id={$rows['employee_id']}\"
onclick=\"return confirm('Are you sure you wish to Modify this Record?');\"> E </a></td>";
echo "<td><a href=\"delete.php?id={$rows['employee_id']}\"
onclick=\"return confirm('Are you sure you wish to delete this Record?');\"> X </a></td>";
echo "</tr>";
}
?>
</table>
</body>
</html>
AIM: Design a webpage that make use of document structure tag.
<HTML>
<Head>
<title> Document structure tags
</title>
</Head>
<body bgcolor="Red">
<Header> Header of web page
</Header>
<Br/> <Br/> <hr/>
<p> This is simple web page
</p>
<Br/> <Br/> <hr/>
<Footer> Created Date:13-07-19
</Footer>
</body>
</HTML>
Practical1b.html
AIM: Design web page that make use of various text formatting tags.
<HTML>
<head>
<title> Text formatting tags
</title>
</head>
<body bgcolor="#00FF00">
<H1 align="center"> <B> <I> Student Info
</I> </B> </H1> <Br/> <Br/> <hr/>
<font face="Arial" color="Red" size="10">
Name:<big> Abc </big> <Br/>
<font face="verdana" color="Blue" size="15">
Roll No.:<em> 01 </em>
</body>
</HTML>
Practical1c.html
AIM: Design web page that make use of various text List tags.
<html>
<head>
<title>List tag
</title>
</head>
<body bgcolor="violet">
<H1 align="center"> Course offered
</H1>
<ul type="square">
<li>IT</li>
<ol type="1">
<li>FYIT</li>
<li>SYIT</li>
</ol>
<li> CS </li>
<ol type="A">
<li>FYCS</li>
<li>SYCS</li>
</ol>
</ul>
</body>
</html>
Practical1d.html
AIM: Design web page that define image and image map.
<HTML>
<head>
<title>IMAGE MAPPING
</title>
</head>
<body>
<p>click on the<B>HOTSPOT</B>to see previous praticals</p>
<img src="Tiger.jpg" usemap="#main">
<map name="main">
<area shape="circle" coords="129,150,150" alt="Pratical1a" href="Pratical1a.html" border="5">
<area shape="rect" coords="366,75,805,420" alt="Pratical1b" href="Pratical1b.html" border="5">
<area shape="poly" coords="250,300,105,614,505,614" alt="Pratical1c" href="Pratical1c.html"
border="5">
</map>
</body>
</html>
Practical2a.html
AIM: Design web page that demonstrate Table tag.
<HTML>
<head>
<title> Table tag
</title>
</head>
<body >
<table border="1" cellspacing="2" cellpadding="2" height="100" width="100">
<caption> Statewise population </caption>
<tr> <th> state </th>
<th colspan="2"> population </th>
</tr>
<tr> <td rowspan="3">Maharashtra </td>
<td> Year </td>
<td> Population </td>
</tr>
<tr>
<td> 2005 </td>
<td> 6800000 </td>
</tr>
<tr>
<td> 2010 </td>
<td> 10000000 </td>
</tr>
<tr>
<td rowspan="2"> Kerala </td>
<td> 2005 </td>
<td> 4500000 </td>
</tr>
<tr>
<td> 2010 </td>
<td> 15000000 </td>
</tr>
</table>
</body>
</HTML>
Practical2b.html
AIM: Design web page for Application Form.
<HTML>
<head>
<head><title>Application form
</title>
</head>
<body>
<H1> Application form </H1>
<form name="f1" action="next.html" method="post">
<pre>
Name:<input type="text " id="Name">
Contact:<input type="number" id="Contact">
Gender:<input type="radio" value="male" id="Gender">male <input type="radio"value="female" id="Gender">female
skillset<input type="checkbox">Game <input type="checkbox">music
</pre>
<input type="submit"value="submit">
<input type="reset"value="reset">
</form>
</body>
</html>
Next.html
<HTML>
<body>
<p> Form Submitted Successfully
</p>
</body>
</HTML>
Practical2c.html
AIM: Design web page to Embedded Multimedia Element.
<HTML>
<title>working with multiamedia
</title>
</head>
<body>
<video src="Believer.mp4" height="200px" width="200px" controls>
s</video> <br/> <hr/>
<audio src="Leja Re.mp3" height="200px" width="200px" controls>
</audio>
</body>
</HTML>
Practical2d.html
AIM: Design web page to link different practical & allows Navigation.
<HTML>
<head>
<title> Working with Navigation
</title>
</head>
<body bgcolor="Yellow" link="Blue" link="Purple" link="Red">
<pre>
<H1>index</H1>
<a href="pratical2a.html">use of table tag </a>
<a href="pratical2b.html">use of form tag </a>
<a href="pratical2c.html">multimedia </a>
</pre>
</body>
</HTML>
Practical3.html
AIM: Design web page that demonstrate css selector & all types of css.
<!DOCTYPE HTML>
<HTML>
<head>
<title>cascading style sheet
</title>
<link rel="stylesheet" type="text/css" href="style1.css"/>
<style>
.c1{tect-align:center;color:Green;font-family:arial}
#i1{color:blue;font-size:20px;text-decoration:underline}
</style>
</head>
<body style="background-color:yellow">
<h1 class="c1"> Save Trees </h1>
<p id="i1"> benefits of tree </p>
<h3> purify water </h3>
<h5 style="font-family:Algerian;text-style:italic"> purify air </h5>
<h6> boost economy <h6>
</body>
</HTML>
Practical4a.html
AIM: Write a Javascript code for performing various operations.
<HTML>
<head>
<title> Using javascript
</title>
<script language="javascript">
function fact(n)
{
var num=n;
var x=1;
while(n)
{
x=x*n;
n--;
}
alert("Factorial of" +num+ "is"+ x);
}
function prime(n)
{
var flag=1;
for(var i=2; i<n; i++)
{
if(n % i==0)
{
flag=0;
break;
}
}
if(flag==0)
{
alert(n+ "is not a prime number");
}
else
{
alert(n+ "is a prime number");
}
}
function sum(n)
{
var i;
var sm=0;
for(i=1; i<=n; i++)
{
sm=sm+1;
}
alert("the sum of "+n+ " is="+ sm);4
}
</script>
</head>
<body>
<form>
<h1> Select mathematical operation </h1>
Enter a number:<input type="text" name="n"><br/>
<input type="submit" onclick="fact(n.value)"
value="calculate factorial"><br/>
<input type="submit" onclick="prime(n.value)"
value="check prime"><br/>
<input type="submit" onclick="sum(n.value)" value="find
submation">
</form>
</body>
<HTML>
Practical4b.html
AIM: Write a Javascript code for validate various form element.
<HTML>
<head>
<title> Using javascript
</title>
<script language="javascript">
function validate()
{
var nm=document.form["My form"]["fname"].value;
var un=document.form["My form"]["uname"].value;
var pn=document.form["My form"]["phone"].value;
var pass=document.form["My form"]["pass"].value;
if(num=="" || un=="" || pn=="" || email=="" || bdate=="")
{
alert("Mandatory fields must be filled");
}
var pass_regex="(?=.*/d)(?=.*[a-z])(?=.*[A-Z]).{8,}";
if(!pass.match(pass_regex))
{
alert("Please enter valid password");
}
if(isNan(pn))
{
alert("Please enter mumber only");
}
var atpos=email.indexof("@");
var datpos=email.indexof(".");
{
alert("Please enter valid email id");
}
}
</script>
</head>
<body>
<h1> Registration form </h1>
<form name="Myform" action="next.html" method="post">
full name:<input type="text" name="fname" required><br/>
username:<input type="text" name="uname" required><br/>
password:<input type="password" name="pass" required><br/>
contact number:<input type="number" name="email"><br/>
Emailid:<input type="email" name="phone"><br/>
Birthdate:<input type="date" name="bdate"><br/>
<input type="submit" value="Send Data" onclick="validate()">
<input type="reset" value="clear all>
</form>
</body>
</HTML>
Practical5a.html
AIM: Demonstrate different JavaScript option such as Math and Date.
<!DOCTYPE HTML>
<html>
<head>
<title>math and date function</title>
</head>
<body>
<script type="text/javascript">
document.write("<H1>"+"date function"+"</H1>");
varmydate=new Date();
document.write("today is:"+mydate.getDate()+"/"+(mydate.getMonth()+1)+"/"+ mydate.getFullYear()+"<br/>");
document.write("time:"+mydate.getHours()+":"+ mydate.getMinutes()+":"+mydate.getSeconds()+"<br/>");
document.write("<hr/>"+"<h1>"+"Math functions"+"</h1>"+"<br/>");
document.write("log:"+Math.log(12.6)+"<br/>");
document.write("max:"+Math.max(12,15,16,20)+"<br/>");
document.write("min:"+Math.min(12,15,16,20)+"<br/>");
document.write("Power:"+Math.pow(10,2)+"<br/>");
document.write("Square root:"+Math.sqrt(100)+"<br/>");
</script>
</body>
</html>
Practical5b.html
AIM: Demonstrating different Javascript object such as history.
<html>
<head>
<script type="text/javascript">
functiongoBack()
{
varhistcount=history.length;
document.write("you have visited "+ histcount +" web pages so far");
}
</script>
</head>
<body>
<form>
<input type="button" value="check history" onclick="goBack()">
</form>
</body>
</html>
Practical5c.html
AIM: Demonstrating different Javascript object such as Location.
<html>
<head>
<script type="text/javascript">
functionforAssign()
{
window.location.assign("http://www.vivacollege.org")
}
functionforReplace()
{
window.location.replace("http://www.google.com")
}
</script>
</head>
<body>
<input type="button" value="viva college" onclick="forAssign()"/>
<input type="button" value="Google" onclick="forReplace()"/>
</body>
</html>
Practical5d.html
AIM: Demonstrating different Javascript object such as Window.
<html>
<head>
<script type="text/javascript">
functionOpenWin(url)
{
var width=400, height=300;
mywindow=window.open(url,"Subwind",400,300);
}
functionshowAlert()
{
alert("This is alter box")
}
functioncloseWindow()
{
window.close();
}
</script>
</head>
<body>
<input type="button" value="New window"
onclick="OpenWin('www.google.com')"/>
<input type="button" value="show Alter box" onclick="showAlert()"/>
<input type="button" value="close" onclick="closeWindow()"/>
</body>
</html>
.
Practical 6 (A)
AIM: Create a XML file with internal DTD and display it using CSS.
favbooks.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style2.css"?>
<!DOCTYPEfavbooks[
<!ELEMENTfavbooks (book,title,author,publisher)>
<!ELEMENT book (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
]>
<favbooks>
<book>
<title>The Story</title>
<author>M.K.gandhi</author>
<publisher>Penguin India</publisher>
</book>
<book>
<title>Oliver Twist</title>
<author>Charles Dickens</author>
<publisher>Repa and co</publisher>
</book>
</favbooks>
Style2.css
favbooks
{
background-color:#FFFFFF;
width:100%;
}
book
{
display:block;
margin-bottom:30pt;
margin-left:0;
}
title
{
color:#FF0000;
font-size:20pt;
}
author,publisher
{
color:#0000FF;
font-size:16pt;
}
title,author,publisher
{
display:Block;
margin-left:20pt;
}
Practical 6 (B)
AIM: Create a XML file with DTD and display it using XSL.
favbooks.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="fav.xsl"?>
<!DOCTYPEfavbooks[
<!ELEMENTfavbooks (book,title,author,publisher)>
<!ELEMENT book (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
]>
<favbooks>
<book>
<title>The Story</title>
<author>M.K.gandhi</author>
<publisher>Penguin India</publisher>
</book>
<book>
<title>Oliver Twist</title>
<author>Charles Dickens</author>
<publisher>Repo and co</publisher>
</book>
</favbooks>
fav.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<table border="1">
<trbgcolor="#9acd32">
<th>TITLE</th>
<th>AUTHOR</th>
<th>PUBLISHER</th>
</tr>
<xsl:for-each select="favbooks/book">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="publisher"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Steps for run php program:
1. turn on wamp server
2. save your code in C:/wamp/www/new folder/___.php.
3. left click on wamp server icon(taskbar) -> restart all services
4. click on local host -> select your project-> localhost/_____. php
Practical No: 7
AIM: Design a web page to handle asynchronous request using AJAX on button click.
Pract7.html
<!DOCTYPE html>
<head>
<script type="text/javascript">
functionloadXMLDoc()
{
string=document.getElementById("t1").value
url="P1.php? t1="+string;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp.onreadstateChange=function()
{
if(xmlhttp.readstate==4 &&xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form action="P1.php" method="get" target="_blank">
Enter text:
<input type="text" name="t1">
<div id="myDiv"><H2> Let AJAX change this</H2></div>
<input type="submit" onclick="loadXMLDoc()" value="change content">
</body>
</html>
P1.php
<?php
$text=$_GET["t1"];
echo "You have typed ".$text;
echo"<p>Text retrived by AJAX</p>";
?>
Practical No: 8 (A)
AIM: Write a php script for retrieving data from html form.
8a.html
<!DOCTYPE html>
<head></head>
<body>
<form action="Next.php" method="get" target="_blank">
Name:<input type="text" name="name"><br/>
Roll no:<input type="text" name="no"><br/>
<input type="submit" value="submit">
</form>
</body>
</html>
Next.php
<!DOCTYPE html>
<body>
Welcome <?php echo $_GET["name"]?>
<br/>
Your Roll no is <?php echo $_GET["no"]?>
</body>
</html>
___________________________________________________________________
Practical No: 8 (B)
AIM: Write a php script for calculate factorial number.
8b.php
<?php
if(isset($_POST["number"]))
{
$num = $_POST["number"];
$factorial = 1;
for ($x=$num; $x>=1; $x--)
{
$factorial = $factorial * $x;
}
}
else
$factorial = "";
?>
<html>
<body>
<form action="" method="post">
Enter a Number: <input type="text" name="number"><br/>
<input type="submit" Value="Calculate Factorial"><br/><br/>
<?php
if($factorial)
echo "Factorial of $num is $factorial";
?>
</form>
</body>
</html>
_
Practical No: 8 (C)
AIM: Write a php script for display pyramid.
8c.php
<!DOCTYPE html>
<head></head>
<body>
<script language="php">
$x=1;
for($i=0;$i<4;$i++) {
$p=$x;
for($j=0;$j<=$i;$j++)
{
echo "$p
\t";
if($p==0)
$p=0;
}
echo "<br>";
if($x==0)
{
$x=1;
}
else
{
$x=0;
}
}
</script>
</body>
</html>
____________________________________________________________________
Practical No: 8 (D)
AIM: Write a php script for working on string function.
8d.php
<!DOCTYPE html>
<body>
<script language="php">
$str1='Hello';
$str2='World';
echo "Lenght of first word is ", strlen($str1),"<br/>";
echo $str1, " ", $str2;
</script>
</body>
</html>
___________________________________________________________________
Practical No: 9
AIM: Working with Database.
create database company5;
use company5;
create table employee(
employee_id int(10) NOT NULL auto_increment,
employee_name varchar(255) NOT NULL,
employee_email varchar(255) NOT NULL,
employee_contact varchar(255) NOT NULL,
employee_address varchar(255) NOT NULL,
primary key (employee_id)
);
insert into employee (employee_name, employee_email,employee_contact,employee_address) values
("Ramesh","suresh@gmail.com", "9897674534","virar west");
insert into employee (employee_name, employee_email,employee_contact,employee_address) values
("suresh","suresh@gmail.com", "9897674534","virar west");
insert into employee (employee_name, employee_email,employee_contact,employee_address) values
("Sagar","suresh@gmail.com", "9897674534","virar west");
select * from employee;
datafile.php
<!DOCTYPE html>
<html>
<head>
<title>Read Data from Database</title>
</head>
<body>
<h2> Read Data From Database Using PHP</h2>
<br>
<p>Click On Menu</p>
<?php
$connection= mysql_connect("localhost","root", "root");
$db = mysql_select_db("company", $connection);
$query = mysql_query("select * from employee", $connection);
while($rows=mysql_fetch_array($query)){
echo "<b><a href = \"readphp.php?id={$rows['employee_id']}\">{$rows['employee_name']}</a></b>";
echo "<br>";
}
?>
</body>
</html>
readphp.php
<?php
if (isset($_GET['id'])){
$connection2= mysql_connect("localhost","root", "root");
$id = $_GET['id'];
$db2 = mysql_select_db("company", $connection2);
$query2 = mysql_query("select * from employee where employee_id = $id", $connection2);
while($rows2=mysql_fetch_array($query2)){
?>
<div>
<h2>--Details--</h2>
<br>
<span>Employee_id:</span><?php echo $rows2['employee_id']; ?><br>
<span>Name:<span><?php echo $rows2['employee_name']; ?><br>
<span>E-mail:<span><?php echo $rows2['employee_email']; ?><br>
<span>Contact No.:<span><?php echo $rows2['employee_contact']; ?><br>
<span>Address:<span><?php echo $rows2['employee_address']; ?><br>
</div>
<?php
}
}
?>
<?php
mysql_close($connection2);
?>
Practical No: 10
AIM: Handling Database.
db.php
<?php
//$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$connection= mysql_connect("localhost","root", "root") or die(mysql_error());
$db = mysql_select_db("company5", $connection) or die(mysql_error());
?>
delete.php
<?php
ob_start();
include("db.php");
if(isset($_GET['id'])!="")
{
$delete=$_GET['id'];
$delete=mysql_query("DELETE FROM employee WHERE employee_id='$delete'");
if($delete)
{
header("Location: pract10.php");
}
else
{
echo mysql_error();
}
}
ob_end_flush();
?>
edit.php
<?php
ob_start();
include('db.php');
if(isset($_GET['id']))
{
$id=$_GET['id'];
if(isset($_POST['update']))
{
$eid=$_POST['empid'];
$ename=$_POST['ename'];
$eemail=$_POST['eemail'];
$econtact=$_POST['econtact'];
$eaddress=$_POST['eaddress'];
$updated=mysql_query("UPDATE employee SET employee_name='$ename', employee_email
='$eemail', employee_contact='$econtact', employee_address='$eaddress' WHERE employee_id = '$eid'")
or die();
if($updated)
{
header('Location:prac10.php');
}
}
} //update ends here
if(isset($_POST['add']))
{
$ename=$_POST['ename'];
$eemail=$_POST['eemail'];
$econtact=$_POST['econtact'];
$eaddress=$_POST['eaddress'];
$added=mysql_query("INSERT into employee (employee_name, employee_email,
employee_contact,employee_address) values (
'$ename', '$eemail', '$econtact', '$eaddress' )") or die();
if($added)
{
header('Location:prac10.php');
}
}
ob_end_flush();
?>
<!DOCTYPE>
<html>
<head>
<title>Edit form</title>
</head>
<body>
<form action="" method="post">
<?php
if(isset($_GET['id']))
{
$id=$_GET['id'];
$getselect = mysql_query("SELECT * FROM employee WHERE employee_id='$id'");
while($rows=mysql_fetch_array($getselect))
{
?>
<input type="hidden" name="empid" id="empid" value="<?php echo $rows['employee_id']; ?>" />
Employee name: <input type="text" name="ename" required value="<?php echo
$rows['employee_name']; ?>" id="ename" /><br><br>
Employee email: <input type="email" name="eemail" required value="<?php echo
$rows['employee_email']; ?>" id="eemail" /><br><br>
Employee contact: <input type="number" name="econtact" required value="<?php echo
$rows['employee_contact']; ?>" id="econtact" /><br><br>
Employee address: <input type="text" name="eaddress" required value="<?php echo
$rows['employee_address']; ?>" id="eaddress" /><br><br>
<input type="submit" name="update" value="Update" id="btnUpdate" />
<?php
}
}
else
{
?>
Employee Name: <input type="text" name="ename"><br><br>
Email: <input type="email" name="eemail"><br><br>
Contact number: <input type="tel" name="econtact" maxlength="10"><br><br>
Address: <textarea cols="20" rows="4" name="eaddress"></textarea><br><br>
<input type="submit" name="add" value="Send data"><input type="reset" value="Clear All">
<?php
}
?>
</form>
</body>
</html>
pract10.php
<!DOCTYPE html>
<html>
<body>
<h2> Employee Data</h2>
<br>
<?php
include("db.php");
$query = mysql_query("select * from employee", $connection);
?>
<a href="edit.php"> Add New </a><br>
<table border="2" cellspacing="2" cellpadding="3" width="80%">
<tr>
<td> Employee ID</td>
<td> Employee Name</td>
<td> Employee Email</td>
<td> Employee Contact</td>
<td> Employee Address</td>
<td colspan="2">Action</td>
</tr>
<?php
while($rows=mysql_fetch_array($query)){
echo "<tr>";
echo "<td> {$rows['employee_id']} </td>";
echo "<td> {$rows['employee_name']} </td>";
echo "<td> {$rows['employee_email']} </td>";
echo "<td> {$rows['employee_contact']} </td>";
echo "<td> {$rows['employee_address']} </td>";
echo "<td><a target=\"_blank\" href=\"edit.php?id={$rows['employee_id']}\"
onclick=\"return confirm('Are you sure you wish to Modify this Record?');\"> E </a></td>";
echo "<td><a href=\"delete.php?id={$rows['employee_id']}\"
onclick=\"return confirm('Are you sure you wish to delete this Record?');\"> X </a></td>";
echo "</tr>";
}
?>
</table>
</body>
</html>
Comments
Post a Comment