Web Tech Lab Manual
Web Tech Lab Manual
Web Tech Lab Manual
19. Write a program using PHP and HTML to create a form and
display the details entered by the user
Solutions
1.
<html>
<head>
<title>Education details</title>
</head>
<body>
<h1 align="center" style="color:blue">EDUCATION DETAILS</h1><br><br>
<table border="1" background="gray" cellspacing="5" cellpadding="5">
<th>SNo</th>
<th>Course</th>
<th>Board/University</th>
<th>School/College</th>
<th>Year of Passing</th>
<th>Percentage</th>
<tr>
<td>1</td>
<td>10</td>
<td>ICSE</td>
<td>DPS</td>
<td>2008</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>12</td>
<td>ICSE</td>
<td>DPS</td>
<td>2010</td>
<td>95</td>
</tr>
</table>
</body>
</html>
2. <html>
<head>
<title>RESUME | JOHN DOE</title>
</head>
<body>
<!-- BEGIN DIV FOR OVERALL BOX -->
<div id="resume">
<!-- THIS DIV CENTERS OUR HEADING -->
<h1>John Doe</h1>
<h2>4242 Ghila Road</h2>
<h2>Tucson, AZ 85701</h2>
<br />
<!-- END CENTERING DIV -->
</div>
<h2>Profile</h2>
<p>
Desires a resident position in the Bastyr University Acupuncture and Oriental
Medicine Residency Program. Able to be effective in a practice of any
size.
Draw on experience with a range of patient issues, including additional
work in women and children’s care. Interested in health education for
homeless. Strong desire to contribute to the success of a program
through an ability to initiate and maintain relationships. Creative
developer and presenter of educational information.
</p>
<br />
<h2>Education</h2>
<h3>Masters of Acupuncture and Oriental Medicine,
<br />
Graduating June 2003</h3>
<p>
Bastyr University, Kenmore, WA 1999
</p>
<ul>
<li>
Completing an accredited program of coursework and supervised
practice
in Acupuncture and Oriental Medicine. Extensive exposure to
issues involving
women and children.
</li>
</ul>
<h3>Research Project</h3>
<ul>
<li>
Assisted the primary investigator in a double blind, randomized
controlled
trail conducted at the Bastyr Center for Natural Health that
evaluated
the
effectiveness of Chinese herbs towards the control of Diabetes
Mellitus in
post-menopausal women. Co-authored the research report that
has
been
submitted for publication to the Journal of Traditional Chinese
Medicine.
</li>
</ul>
<h3>Bachelor of Science, Zoology</h3>
<p>
Miami University, Oxford, OH 1991 - 1995
</p>
<ul>
<li>
Participated in a community service project to increase citizen
participation
in a clean up campaign.
</li>
<li>
Served as project leader in a fund raising project sponsored by
the
University
Student Council towards helping homeless youths’ return back to
school.
</li>
</ul>
<br />
<h2>Related Experience</h2>
<h3>Bastyr University, Kenmore, WA 1999-present</h3>
<p>
Teaching Assistant
</p>
<ul>
<li>
Assists professor in the Anatomy & Physiology class.
</li>
<li>
Answers questions and demonstrate as needed.
</li>
</ul>
<h3>Kenmore Youth Ministry, Kenmore, WA 2000-2001</h3>
<p>
Camp Group Leader
</p>
<ul>
<li>
Participated in community youth group activities.
</li>
<li>
Developed activity programs now utilized by the youth ministry in
helping
children improve reading skills.
</li>
</ul>
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
6.
<html>
<head>
<title>Institute of Engineering</title>
</head>
<body>
<ul>
<li><a href="http://my.wm.edu">myWM</a></li>
<li><a
href="http://directory.wm.edu/people/">Directory</a></li>
<li><a href="http://events.wm.edu">Events</a></li>
<li><a href="/about/visiting">Visit</a></li>
<li class="last-side-tactical"><a href="/atoz"
id="wm- az">W&M A-Z</a></li>
</ul>
</nav>
<nav id="side_top_nav">
<ul>
<li ><a href="/about" id="about" title="About William
& Mary">About</a></li>
<li ><a href="/academics" id="academics"
title="InstituteAcademics">Academics</a></li>
<li ><a href="/admission" id="admission" title="InstituteAdmission &
Aid">Admission & Aid</a></li>
<li ><a href="/research" id="research"
title="InstituteResearch">Research</a></li>
<li ><a href="/campuslife" id="campus" title="InstituteCampus
Life">Campus Life</a></li>
<li ><a href="/news" id="news_events"
title="InstituteNews">News</a></li>
<li><a href="http://www.tribeathletics.com/" id="athletics"
title="InstituteAthletics">Athletics</a></li>
<li><a href="http://www.wmalumni.com/" id="alumni"
title="InstituteAlumni">Alumni</a></li>
<li><a href="/giving" id="giving" title="InstituteGiving">Giving</a></li>
</ul>
</nav>
</div>
<header id="main-header"><div id="topbar"><a class="action_left icon-font"
href="#" id="menu_btn"></a><a class="mobile-header-logo"
href="index.php"><img alt="William and Mary" id="top_mark"
src="img/wm_wordmark_single_line_green.png"/></a><a class="action_right
icon-font" href="#" id="search_btn"></a></div>
<div id="desktop_header">
<nav id="tactical_nav">
<ul>
<li>
<a href="http://my.wm.edu">myWM</a>
</li>
<li>
<a href="http://directory.wm.edu/people/">Directory</a>
</li>
<li>
<a href="http://events.wm.edu">Events</a>
</li>
<li>
<a href="/about/visiting">Visit</a>
</li>
<li>
<a href="/atoz" id="wm-az">W&M A-Z</a>
</li>
</ul>
<
</nav>
</div>
<!-- end desktop_header -->
</header>
<!-- end main_header -->
<div></div>
</body>
</html>
7.
<html>
<head>
<title> My First Page </title>
</head>
<body>
<UL type='A'>
<LI>Red
<LI>Blue
<LI>Green
<LI>White
</UL><br>
<OL type='square'>
<LI>Red
<LI>Blue
<LI>Green
<LI>White
</OL><br>
<dl>
<dt>Red</dt>
<dd>Red color has the highest wavelength.</dd>
<dt>Violet</dt>
<dd>Violet color has the shortest wavelength.</dd>
</body>
</html>
8.
<html>
<FRAMESET Rows = "30%,*" >
<Frame Src="head.html" >
<FRAMESET Cols = "25%,*">
<Frame Src="navigation.html" >
<Frame Src="content.html" >
</FRAMESET>
</FRAMESET>
</html>
9.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue" align="center">This is a Blue Heading</h1>
<p style="color:red">This is a red paragraph with inline css</p>
</body>
</html>
10.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p{
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
11.
Css
#para1
{ color:
red;
text-align: center;
font-family:courier;
}
h1{
color:blue;
font-size:200%;
text-align:right;
background-color: #6495ed;
}
#para {
color: green;
text-align: center;
font-size:500%;
}
p{
border:1px solid black;
padding:10px;
margin:30px;
background-color: #e0ffff;
}
body {
background-image:url("bird.jpeg");
div{
text-decoration:overline;
font-size:200%;
}
Html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p id="para">This is a green paragraph.</p>
<p id="para1">This is a red paragraph.</p>
</body>
</html>
12.
<html>
<head>
<title>
Greetings </title>
</head>
<body>
<script language="JavaScript">
firstName = prompt("Please enter your name", "");
document.write("Hello " +
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
Javascript
function validate()
{
if( document.StudentRegistration.textnames.value == "" )
{
alert( "Please provide your Name!" );
document.StudentRegistration.textnames.focus() ;
return false;
}
if( document.StudentRegistration.fathername.value == "" )
{
alert( "Please provide your Father Name!" );
document.StudentRegistration.fathername.focus() ;
return false;
}
return false;
}
if( document.StudentRegistration.District.value == "-1" )
{
alert( "Please provide your Select District!" );
return false;
}
if( document.StudentRegistration.State.value == "-1" )
{
alert( "Please provide your Select State!" );
return false;
}
if( document.StudentRegistration.pincode.value == "" ||
isNaN( document.StudentRegistration.pincode.value) ||
document.StudentRegistration.pincode.value.length != 6 )
{
alert( "Please provide a pincode in the format ######." );
document.StudentRegistration.pincode.focus() ;
return false;
}
var email = document.StudentRegistration.emailid.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.StudentRegistration.emailid.focus() ;
return false;
}
if( document.StudentRegistration.dob.value == "" )
{
alert( "Please provide your DOB!" );
document.StudentRegistration.dob.focus() ;
return false;
}
if( document.StudentRegistration.mobileno.value == "" ||
isNaN( document.StudentRegistration.mobileno.value) ||
document.StudentRegistration.mobileno.value.length != 10 )
{
alert( "Please provide a Mobile No in the format
123." );
document.StudentRegistration.mobileno.focus() ;
return false;
}
return( true );
}
14.
<!DOCTYPE html>
<html>
<head>
<title>PHP insertion</title>
<link href="css/insert.css" rel="stylesheet">
</head>
<body>
<div class="maindiv">
<!--HTML Form -->
<div class="form_div">
<div class="title">
<h2>Insert Data In Database Using PHP.</h2>
</div>
<form action="insert.php" method="post">
<!-- Method can be set as POST for hiding values in URL-->
<h2>Form</h2>
<label>Name:</label>
<input class="input" name="name" type="text" value="">
<label>Email:</label>
<input class="input" name="email" type="text" value="">
<label>Contact:</label>
<input class="input" name="contact" type="text" value="">
<label>Address:</label>
<textarea cols="25" name="address" rows="5"></textarea><br>
<input class="submit" name="submit" type="submit" value="Insert">
</form>
</div>
</div>
</body>
</html>
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing
Connection with Server
$db = mysql_select_db("colleges", $connection); // Selecting Database from
Server
if(isset($_POST['submit'])){ // Fetching variables of the form which travels in
URL
$name = $_POST['name'];
$email = $_POST['email'];
$contact = $_POST['contact'];
$address = $_POST['address'];
if($name !=''||$email !=''){
//Insert Query of SQL
$query = mysql_query("insert into students(student_name, student_email,
student_contact, student_address) values ('$name', '$email', '$contact',
'$address')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank. !!</p>";
}
}
mysql_close($connection); // Closing Connection with Server
?>
15.
<html>
<head>
<title>Browser Information</title>
</head>
<body>
<h1>Browser Information</h1>
<hr>
<p>
The <b>navigator</b> object contains the following
information about the browser you are using.
</p>
<ul>
<script LANGUAGE="JavaScript" type="text/javascript">
document.write("<li><b>Code Name:</b> " + navigator.appCodeName);
document.write("<li><b>App Name:</b> " + navigator.appName);
document.write("<li><b>App Version:</b> " + navigator.appVersion);
document.write("<li><b>User Agent:</b> " + navigator.userAgent);
document.write("<li><b>Language:</b> " + navigator.language);
document.write("<li><b>Platform:</b> " + navigator.platform);
</script>
</ul>
<hr>
</body>
</html>
16.
import java.applet.*;
import java.awt.*;
<?xml-stylesheet href="classic.css"?>
<ARTICLE>
<HEADLINE>A Fairytale</HEADLINE>
<AUTHOR>John Brown</AUTHOR>
<PARA>
Once upon a time, in a kingdom called Pansia lived a brave King. He
loved to play
<INSTRUMENT>flute</INSTRUMENT>
One fine day he called his ministers to hear him play the instrument.
</PARA>
</ARTICLE>
ARTICLE {
font-family: serif;
background: white; color: #003
}
AUTHOR {
font-size: large;
margin: 1em 0
}
HEADLINE
{
font-size: x-large;
margin-bottom: 1em
}
PARA {
text-indent: 1em;
text-align: justify
}
INSTRUMENT
{
font-style: italic
}
18.
<?xml-stylesheet href="classic.css"?>
<ARTICLE>
<HEADLINE>A Fairytale</HEADLINE>
<AUTHOR>John Brown</AUTHOR>
<PARA>
Once upon a time, in a kingdom called Pansia lived a brave King. He
loved to play
<INSTRUMENT>flute</INSTRUMENT>
One fine day he called his ministers to hear him play the instrument.
</PARA>
</ARTICLE>
19.
<html>
<head>
<title>PHP Form Validation</title>
</head>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<tr>
<td>Specific Time:</td>
<td> <input type="text" name="website"></td>
</tr>
<tr>
<td>Class details:</td>
<td><textarea name="comment"
rows="5" cols="40"></textarea></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>
<?php
echo "<h2>Your Given details are as
:</h2>"; echo $name;
echo "<br>";
echo
$email;
echo "<br>";
echo
$website;
echo "<br>";
echo
$comment;
echo "<br>";
echo $gender;
?>
</body>
</html>