Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
SUBJECT
PREFACE OF THE SUBJECT
Web application the content, design and how you interact with it. This is done with
three codes-HTML, CSS and JAVASCRIPT.
HTML is a special code for ‘marking up’ text in order to turn it into a web page. Every
web page on the net is written in HTML and it will form the backbone of any web application.
CSS is a code for setting styles rules for the appearance of web pages. CSS handles
the cosmetic side of the web.
Finally JavaScript is a scripting language that’s widely used to add functionality and
interactivity to web pages.
PHP is a scripting language that has the ability to output HTML. Instead of manually
writing HTML files, you can program PHP to automatically generate them for you.
SYLLABUS
MC5312 WEB PROGRAMMING LABORATORY L T P C
0 0 4 2
OBJECTIVES:
Try and develop the most important technologies that are being used today by web
developers to build a wide variety of web applications.
To build web applications using proven developer tools and message formats.
To understand and practice web development techniques on client-side
Web applications using technologies such as HTML, CSS, Javascript, AJAX, JQuery
and JSON.
LIST OF EXPERIMENTS
TOTAL: 60 PERIODS
OUTCOMES:
&
EXECUTION
SL. PROPOSED EXPERIMENT LIST & DATE OF REASON MAKEUP
COMPLETION FOR CLASSES
NO DATE ADDITIONAL EXP LIST DEVIATION
1 Create your own Resume using
HTML 5 Tags
2 Debug and validate your HTML
document ( Resume ) using W3C
validator and fix the issues.
(https://validator.w3.org/#validat
e_by_upload ).
3 Add Styles to your Resume using
CSS 3 Properties.
c. Add External, Internal and
Inline CSS styles to know
the priority.
d. Add CSS3 Animation to
your profile.
4 (a). Add functionalities that use
any 2 of HTML 5 API‟s.
(b).Create a student Registration
form for Job Application and
validate the form fields using
JavaScript.
5 (a) Create a CGPA Calculator in
Web Brower using HTML, CSS
and JavaScript. Use functions in
JavaScript. (b) Create a Quiz
Program with adaptive questions
using JavaScript.
6 Create a Pan Card Validation
form using Object Oriented
JavaScript, consider the 10th
character to be an alphabet.
Get the user‟s First Name,
Last Name and other
required fields as input
Assume the last digit of the
Pan Number to be an
alphabet
Validate the PAN Number.
7 (a) Create an online Event
Registration form and validate
using JQuery
(b) Create an online video Player
which will allow you to play
videos from the system and also
create custom playlist using
JQuery.
8 Construct a JSON Structure for a
bookstore and validate it using
JSON Validator such as
http://jsonlint.com/ and parse the
Json file to list the books under
the category “Fiction”. Use
Javascript or JQuery for parsing.
9 1Create a Single Page
application allowing to search
for a movie and displaying the
trailer, poster for various
movies.
Create an admin login to
upload the trailer, poster,
keyword and details of
the movie.
Use Bootstrap and
JQuery for designing the
User Interface.
Form Submission should
be handled through Ajax.
10 Using PHP and MySQL, develop
a program to accept book
information viz. Accession
number, title, authors, edition and
publisher from a web page and
store the information in a
database and to search for a book
with the title specified by the user
and to display the search results
with proper headings.
11 Develop a Social Media Web
Application using HTML5,
CSS3, JQuery, AJAX & PHP.
ADDITIONAL EXPERIMENT
12 Write a Perl program to display
various Server Information like
Server Name, Server Software,
Server protocol, CGI Revision
etc.
13 Create a XHTML form with
Name, Address Line 1, Address
Line 2, and E-mail text fields.
On submitting, store the values
in MySQL table.Retrieve and
display the data based on Name.
FACULTY INCHARGE HOD
Department : MCA
Hour 1 2 3 4 5 6 7 8
10.55A
11.45A
8.55AM 9.45AM M 1.15PM 2.00PM 3.00PM 3.45PM
M-
Days - - -
12.40P
- - - -
9.45AM 10.40AM 11.45A 2.00PM 2.45PM 3.45PM 4.30PM
M
M
MON
LUNCH
BREAK
BREAK
TUE
WED
FRI
EX.NO: 1 CREATE YOUR OWN RESUME USING HTML 5 TAGS
Aim:
Algorithm:
Program:
Css/style.css:
body {
margin: 0px;
padding: 0px;
background: url("../images/bg_dark_green.png");
background-color: inherit;
font-size: 16px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
color: #000;
}
a:link {
text-decoration: underline;
color: #000;
font-weight: bold;
}
a:visited {
text-decoration: underline;
color: #000;
font-weight: bold;
}
a:hover {
text-decoration: underline;
color: #669933;
font-weight: bold;
}
a:active {
text-decoration: underline;
color: #000;
font-weight: bold;
}
#wrapper {
width: 965px;
margin: 0 auto;
}
#content {
background-color: #eee;
width: 960px;
text-align: left;
overflow: auto;
position: relative;
margin: 25px 0px 25px 0px;
border: #fff solid 2px;
}
.clear {
float: none;
clear: both;
margin: 20px 0px 20px 0px;
}
/* Header
--------------------------------------------------- */
#contact-details .header_1 {
float: left;
width: 350px;
text-align: center;
margin: 40px 0px 0px 20px;
}
#contact-details .header_2 {
float: left;
width: 570px;
margin: 40px 0px 0px 10px;
}
#contact-details .header_2 a {
font-weight: normal;
}
#contact-details h1 {
margin: 0px 0px 0px 20px;
font-size: 52px;
font-weight: bold;
}
#contact-details h3 {
margin: 0px 0px 32px 20px;
font-size: 30px;
font-weight: bold;
font-style: italic;
}
#contact-details ul.info_1 {
list-style: none;
margin: 0px 0px 0px -12px;
font-size: 18px;
}
#contact-details ul.info_2 {
list-style: none;
margin: 0px 0px 15px -12px;
font-size: 18px;
}
#contact-details li.address {
background: url("../images/home.png") no-repeat;
background-position: 0px 0px;
padding: 0px 0px 12px 40px;
}
#contact-details li.phone {
background: url("../images/phone.png") no-repeat;
background-position: 0px 0px;
padding: 0px 0px 12px 40px;
}
#contact-details li.email {
background: url("../images/mail.png") no-repeat;
background-position: 0px 0px;
padding: 0px 0px 12px 40px;
}
#contact-details li.site_url {
background: url("../images/computer.png") no-repeat;
background-position: 0px 2px;
padding: 0px 0px 12px 40px;
}
#contact-details li.twitter {
background: url("../images/twitter_sm.png") no-repeat;
background-position: 0px 0px;
padding: 0px 0px 12px 40px;
}
/* Main Content
--------------------------------------------------- */
h2.top {
margin: 0px;
font-size: 22px;
font-weight: bold;
}
h2 {
margin: 40px 0px 0px 0px;
font-size: 22px;
font-weight: bold;
}
dl {
margin: 0px 50px 0px 0px;
}
dt {
float: left;
width: 200px;
font-size: 20px;
font-weight: bold;
font-style: italic;
text-align: right;
}
dd {
width: 620px;
float: right;
margin-right: 20px;
}
dl#contact {
margin: 0px;
}
dt#contact {
margin: 0px;
}
dd#contact {
margin: 0px;
}
p.bus1 {
margin: 0px;
font-weight: bold;
color: #669933;
}
p.edu-info {
margin: 10px 0px 0px 0px;
font-weight: bold;
color: #669933;
}
p.edu-info a {
color: #000;
}
p.edu-info a:hover {
color: #669933;
}
p.time {
margin: 0px;
}
p.summary {
margin: 10px 0px 0px 0px;
}
#skills ul.list1 {
float: left;
list-style: none;
margin: 0px 0px 0px -40px;
width: 220px;
}
#skills ul.list2 {
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
width: 220px;
}
#skills li {
background: url("../images/bullet_green.png") no-repeat;
background-position: 0px 2px;
padding: 0px 0px 0px 25px;
}
abbr {
border-width: 0px;
}
/* Footer
--------------------------------------------------- */
#footer {
margin: 60px 40px 0px 40px;
}
#footer img {
border: 0px;
}
#footer .footer_content {
width: 700px;
overflow: auto;
margin: auto;
border: #fff solid 2px;
background-color: #dcdcdc;
}
#footer ul.icons_1 {
float: left;
width: 525px;
margin: 15px 10px 10px 15px;
padding: 0px;
}
#footer ul.icons_2 {
float: right;
width: 100px;
margin: 10px 20px 10px 10px;
padding: 0px;
}
#footer a {
color: #000;
}
#footer a:hover {
color: #669933;
}
#footer .credits {
float: none;
clear: both;
margin: 10px 0px 20px 0px;
font-size: 12px;
text-align: center;
}
#footer .credits a {
font-weight: normal;
}
Resume.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1><span>Your Name</span></h1>
<h3>Web Developer / Designer</h3>
<ul class="info_1">
<li class="address">555 Street Address, Toledo, Ohio, 43606 U.S.A.</li>
</ul>
<ul class="info_2">
<li class="phone">(000) 000-0000</li>
<li class="email"><a href="mailto:your-email@gmail.com">your-
email@gmail.com</a></li>
<li class="site_url"><a href="http://www.webcodepro.net/about.php" title="www.your-
website.com">www.your-website.com</a></li>
<li class="twitter"><a href="http://twitter.com/twitter-screen-name" title="Follow Me on
Twitter">@twitter-screen-name</a></li>
</ul>
</div>
<!-- End Profile Information Section -->
</section>
<!-- End Contact Section -->
</header>
<!-- End Header -->
<div class="clear"> </div>
<section class="summary">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
</section>
</dd>
</dl>
<!-- End Profile Section -->
<div class="clear"> </div>
<dl>
<dt>Skills:</dt>
<dd>
<section id="skills">
<ul class="list1">
<li>XHTML</li>
<li>HTML5</li>
<li>PHP</li>
<li>JavaScript</li>
<li>Magento</li>
<li>WordPress</li>
</ul>
<ul class="list2">
<li>HTML</li>
<li>CSS</li>
<li>MySQL</li>
<li>jQuery</li>
<li>CMS Made Simple</li>
<li>Photoshop</li>
</ul>
</section>
</dd>
</dl>
<div class="clear"> </div>
<dd>
<section id="experience">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium.
</p>
</section>
</dd>
</dl>
<!-- End Experience Section -->
<div class="clear"> </div>
<!-- Begin Publications Section -->
<dl>
<dt>Publications:</dt>
<dd>
<section id="publications">
<a href="http://net.tutsplus.com/tutorials/php/how-to-create-an-advanced-twitter-widget/"
target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an
Advanced Twitter Widget"</a>, <a href="http://net.tutsplus.com/" target="_blank"
title="Nettuts+">Nettuts+</a>, 8/25/11
</section>
</dd>
</dl>
<!-- End Publications Section -->
<div class="clear"> </div>
<section id="education">
<p class="edu-info">
<a href="http://www.utoledo.edu/" target="_blank" title="University of
Toledo">www.utoledo.edu</a>
</p>
</section>
</dd>
</dl>
<!-- End Education Section -->
<div class="clear"> </div>
<ul class="icons_1">
<li><a href="https://profiles.google.com/jwagner719" title="Google Profile"><img
src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32"
height="32" alt="Google Profile"></a></li>
<li><a href="http://dribbble.com/" title="Dribbble"><img src="images/dribbble.png"
width="32" height="32" alt="Dribbble" /></a></li>
<li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png"
width="32" height="32" alt="LinkedIn" /></a></li>
<li><a href="http://www.facebook.com/" title="Facebook"><img
src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li>
<li><a href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png"
width="32" height="32" alt="Flickr" /></a></li>
<li><a href="http://twitter.com/" title="Follow Me on Twitter!"><img
src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li>
</ul>
<ul class="icons_2">
<li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png"
width="48" height="48" alt="Download Resume PDF" /></a></li>
</ul>
</div>
<!-- End Footer Content -->
<div class="credits">
Social Icons by <a href="http://paulrobertlloyd.com/2009/06/social_media_icons"
target="_blank" title="Paul Robert Lloyd">Paul Robert Lloyd</a>, Profile & Download
Icons by <a href="http://dryicons.com/" target="_blank" title="DryIcons">DryIcons</a>,
Phone Icon by <a href="http://www.comfi.com/telecom-icons/" target="_blank"
title="ComFi Telecom">ComFi Telecom</a>, Profile Image User Symbol by <a
href="http://thenounproject.com/" target="_blank" title="The Noun Project">The Noun
Project</a>.
<br />
All used under a Creative Commons Attribution-ShareAlike license: <a
href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank" title="Creative
Commons Attribution-ShareAlike license">http://creativecommons.org/licenses/by-
sa/3.0/</a>
</div>
</footer>
<!-- End Footer -->
</div>
<!-- End Content -->
</div>
<!-- End Wrapper -->
</body>
</html>
Output:
Result:
Thus the above program was successfully executed and the output was verified
EX.NO:2 CREATE A QUIZ PROGRAM WITH ADAPTIVE QUESTIONS USING
JAVASCRIPT.
Aim:
Algorithm:
Program:
Quiz.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Quiz</title>
<style>
div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background-
color:#E5FCE3; width:50%;}
</style>
<script type="text/javascript">
// pos is position of where the user in the test or which question they're up to
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
// this is a multidimensional array with 4 inner array elements with 5 elements inside them
// if you don't want answers viewable in the code, then you should use PHP and mySQL
database
var questions = [
];
function get(x){
return document.getElementById(x);
function renderQuestion(){
test = get("test");
pos = 0;
correct = 0;
return false;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
}
function checkAnswer(){
choices = document.getElementsByName("choices");
if(choices[i].checked){
choice = choices[i].value;
if(choice == questions[pos][4]){
correct++;
pos++;
renderQuestion();
</script>
</head>
<body>
<h2 id="test_status"></h2>
<div id="test"></div>
</body>
</html>
Output:
Result:
Thus the above program was successfully executed and the output was verified.
Aim:
To create a student Registration form for Job Application and validate the form fields
using JavaScript.
Algorithm:
Program
<html>
<head>
<title> Student Registration form </title>
<script>
function v()
{
if((document.f1.Name.value=="")|| (document.f1.Name.value==null))
{
alert("enter some name"); return false; } for(i=0;i<document.f1.Name.value.length;i++)
{
var ch=document.f1.Name.value.charAt(i);
if(!ch.match(/\w/))
{
alert("Invalid Name"); return false;
}
}
if((document.f1.age.value=="") || (document.f1.age.value==null))
{
alert("enter some age"); return false; }
if((document.f1.age.value <10)|| (document.f1.age.value > 22))
{
alert("Invalid age"); return false;
}
for(i=0;i<document.f1.age.value.length;i++)
{
var ch1=document.f1.age.value.charAt(i);
if(!ch1.match(/\d/))
{
alert("Invalid Age");
return false;
}
}
if(document.f1.phone.value.length < 10 || document.f1.phone.value.length >10)
{
alert("Invalid phone number");
return false;
}
for(i=0;i<document.f1.phone.value.length;i++)
{
var ch2=document.f1.phone.value.charAt(i);
if(!ch2.match(/\d/))
{
alert("Invalid phone number");
return false;
}
}
var emstr=document.f1.email.value; var indexat=emstr.indexOf("@");
var len=emstr.length;
var indexdot=emstr.indexOf(".");
if((emstr==null) || (emstr.value==""))
{
alert("plaese enter email id");
return false;
}
if(indexat==-1 || indexdot==0 || indexat==indexdot)
{
alert("invalid Email ID");
return false;
}
if(emstr.indexOf("@",(indexdot+1))!=-1)
{
alert("invalid Email ID");
return false;
}
if(emstr.indexOf(" ")!=-1)
{
alert("invalid Email ID");
return false;
}
if(!document.f1.g1[0].checked && !document.f1.g1[1].checked)
{
alert("Please select Sex");
return false;
}
if(!document.f1.g2[0].checked &&!document.f1.g2[1].checked &&! document.f1.g2[1].
checked )
{
alert("Please tick any one hobbie");
return false;
}
if(document.f1.g3.selectedIndex==0)
{
alert("Please SELECT any one COUNTRY");
return false;
}
return true;
}
</script>
</head>
<body>
<center>
<h3> Application Form</h3>
</center>
<form name="f1" onsubmit=v()>
<strong> Name:</strong>
<input type="text" name="Name">
<br/>
<strong> Age:</strong>
<input type="text" name="age">
<br/>
<strong> Phone:</strong>
<input type="text" name="phone">
<br/>
<strong> EmailID:</strong>
<input type="text" name="email">
<br/>
<strong> Sex:</strong> <input type="radio" name="g1"> Male
<br/>
        
<input type="radio" name="g1" > Female<br/>
<strong> Hoby:</strong>
 <input type="checkbox" name="g2" value="Singing">
Singing
<br/>
             
<input type="checkbox" name="g2" value="Reading">
Reading
<br/>
             
<input type="checkbox" name="g2" value="TV">Watching TV<br/>
<strong> Country:</strong><select name="g3">
<option value="I">India</option>
<option value="C">China</option>
<option value="S">Srilanka</option>
</select>
<center>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Reset">
<br/>
</center>
</form>
</body>
</html>
Output:
Result:
Thus the above form validation using javascript was executed succesfully.
EX.NO:4 CREATE AN ONLINE EVENT REGISTRATION FORM AND VALIDATE
USING JQUERY
Aim:
Program:
Register.PHP
<?php
$connection = mysql_connect("localhost", "root", "");
// Establishing connection with server..
$db = mysql_select_db("college", $connection);
// Selecting Database.
$name=$_POST['name1']; // Fetching Values from URL.
$email=$_POST['email1'];
$password= sha1($_POST['password1']); // Password Encryption, If you like
you can also leave sha1.
// Check if e-mail address syntax is valid or not
$email = filter_var($email, FILTER_SANITIZE_EMAIL); // Sanitizing
email(Remove unexpected symbol like <,>,?,#,!, etc.)
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo "Invalid Email.......";
}
Else
{
$result = mysql_query("SELECT * FROM registration WHERE email='$email'");
$data = mysql_num_rows($result);
if(($data)==0)
{
$query = mysql_query("insert into registration(name, email, password)
values ('$name', '$email', '$password')"); // Insert query
if($query)
{
echo "You have Successfully Registered.....";
}
else
{
echo "Error....!!";
}
}
else
{
echo "This email is already registered, Please try another email...";
}
}
mysql_close ($connection);
?>
css/style.css:
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
h2{
text-align: center;
font-size: 24px;
hr{
margin-bottom: 30px;
div.container{
width: 960px;
height: 610px;
margin:50px auto;
position:relative;
div.main{
width: 320px;
float:left;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
input[type=text],[type=password] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
color: #4f4f4f;
font-size: 16px;
label{
color: #464646;
font-size: 14px;
font-weight: bold;
#register {
font-size: 20px;
margin-top: 15px;
color: white;
font-weight: bold;
border-radius: 2px;
cursor: pointer;
width: 100%;
#register:hover{
Registration.js:
$(document).ready(function()
{
$("#register").click(function()
{
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var cpassword = $("#cpassword").val();
if (name == '' || email == '' || password == '' || cpassword == '')
{
alert("Please fill all fields...!!!!!!");
}
else if ((password.length) < 8)
{
alert("Password should atleast 8 character in length...!!!!!!");
}
else if (!(password).match(cpassword))
{
alert("Your passwords don't match. Try again?");
}
else
{
$.post("register.php",
{
name1: name,
email1: email,
password1: password
}, function(data)
{
if (data == 'You have Successfully Registered.....')
{
$("form")[0].reset();
}
alert(data);
});
}
});
});
Registration.html:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Using jQuery - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JS File Here -->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/registration.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<form class="form" method="post" action="#">
<h2>Create Registration Form Using jQuery</h2>
<label>Name :</label>
<input type="text" name="dname" id="name">
<label>Email :</label>
<input type="text" name="demail" id="email">
<label>Password :</label>
<input type="password" name="password" id="password">
<label>Confirm Password :</label>
<input type="password" name="cpassword" id="cpassword">
<input type="button" name="register" id="register" value="Register">
</form>
</div>
</body>
</html>
Output:
Result:
Thus the above program was successfully executed and the output was verified.
EX.NO:5 Using PHP and MySQL, develop a program to accept book information viz.
Accession number, title, authors, edition and publisher from a web page and store the
information in a database and to search for a book with the title specified by the user and
to display the search results with proper headings.
13.php
<?php
$mysql = mysql_connect("localhost","root","") or die("Cannot connect");
?>
<html>
<body bgcolor = "lightyellow">
<h2 align ="center">USER ENTRY</h2>
<?php
$name = $_REQUEST["name"];
$add1 = $_REQUEST["add1"];
$add2 = $_REQUEST["add2"];
$email = $_REQUEST["email"];
if($name == NULL && $add1 == NULL && $add2 == NULL && $email == NULL)
{
echo "Dont enter null values";
}
else
{
mysql_select_db("perlexample") or die("Cannot select the database");
$result = mysql_query("insert into user_info values('$name','$add1','$add2','$email')") or
die("Cannot insert");
echo "Successfully Inserted";
}
?>
<a href="13.html" align = center>HOME</a>
</table>
</body>
</html>
13a.php
<?php
$mysql = mysql_connect("localhost","root","") or die("Cannot connect");
?>
<html>
<body bgcolor="lightyellow">
<h2 align = "center">SEARCH RESULTS</h2>
<?php
$name1 = $_REQUEST["name1"];
if($name1==NULL)
{
echo "Dont enter null values";
}
else
{
mysql_select_db("perlexample") or die("Cannot select the database");
$result1 = mysql_query("select * from user_info where name = '$name1'") or die("Cant
select");
}
echo "<hr>";
echo "<table border= 1 align = center>
<tr>
<td>Name:</td>
<td>Address1:</td>
<td>Address2:</td>
<td>Email:</td>
</tr>";
while($array = mysql_fetch_row($result1))
{
echo "<tr>
<td>$array[0]</td>
<td>$array[1]</td>
<td>$array[2]</td>
<td>$array[3]</td>";
}
echo "</table>";
echo "<hr>";
?>
<a href="13.html" align = center>HOME</a>
</body> </html>
Result:
The above program was successfully executed and the output was verified.
EX.NO:6 Create a XHTML form with Name, Address Line 1, Address Line 2, and E-
mail text fields. On submitting, store the values in MySQL table. Retrieve and display the
data based on Name.
INSERT FORM
<?xml version=”1.0” encoding = “utf-8”>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="lightyellow">
<form method ="post" action="13.php">
<table align="center" width="100%" border="1">
<tr>
<td colspan="2" align="center"><h1>USER INFORMATION</h1></td>
</tr>
<tr>
<td width="50%"><h3>USER INFO ENTRY</h3></td>
<tr>
<td>
<table border="1">
<tr>
<td>Name:</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>ADDRESS1:</td>
<td><input type="text" name="add1"/></td>
</tr>
<tr>
<td>ADDRESS2:</td>
<td><input type="text" name="add2"/></td>
</tr>
<tr>
<td>EMAIL:</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="INSERT"/>
<input type="reset" value="RESET"/></td>
</tr>
</table>
</td>
</tr>
</table>
<a href="13a.html" align = center>CLICK HERE TO SEARCH</a>
</form>
</body>
</html>
SEARCH FORM
<html>
<head>
<title>Insert title here</title>
</head>
<html>
<body bgcolor = "lightyellow">
<h2 align ="center">DATABASE SEARCH</h2>
<form action = "13a.php "method="post">
<table>
<tr>
<td>
<p><b>Enter the user name here:</b></p><br/>
<input type="text" name="name1"/>
<input type="submit" value="SEARCH"/>
</td>
</tr>
</table>
<a href="13.html" align = center>HOME</a>
</body>
</html>
Result:
The above program was successfully executed and the output was verified.