PREFACE OF THE

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

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/#validate_by_upload ).
3. Add Styles to your Resume using CSS 3 Properties.
a. Add External, Internal and Inline CSS styles to know the priority.
b. 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. Create 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.

TOTAL: 60 PERIODS

OUTCOMES:

 Upon Completion of the course, the students will be able to:

 Develop simple web applications using scripting languages.
 Implement server side and client side programming develop web applications with
various web technology concepts.
 Design a Web application using various technologies such as AJAX, JQuery and JSON.
 Develop an application for social media using HTML5, CSS3, JQuery, AJAX & PHP
TENTATIVE PLAN
 PROPOSED NO.OF CUMULATIVE
SL.NO EXPERIMENT LIST &
DATE ADDITIONAL EXP LIST PERIODS PERIODS

1 18.07.19 Create your own Resume using 3 3

HTML 5 Tags
Debug and validate your HTML
document ( Resume ) using W3C
2 25.07.19 validator and fix the issues. 3 6
(https://validator.w3.org/#validate
_by_upload ).
Add Styles to your Resume using
CSS 3 Properties.
a. Add External, Internal and
3 01.08.19 Inline CSS styles to know the 3 9
priority.
b. Add CSS3 Animation to your
profile.
(a). Add functionalities that use
any 2 of HTML 5 API‟s.
4 08.08.19 (b).Create a student Registration 3 12
form for Job Application and
validate the form fields using
JavaScript.
(a) Create a CGPA Calculator in
Web Brower using HTML, CSS
5 15.08.19 and JavaScript. Use functions in 3 15
JavaScript. (b) Create a Quiz
Program with adaptive questions
using JavaScript.
Create a Pan Card Validation form
using Object Oriented JavaScript,
consider the 10th character to be an
alphabet.
22.08.19 &
6  Get the user‟s First Name, 6 21
29.08.19 Last Name and other required
fields as input
 Assume the last digit of the
Pan Number to be an alphabet
 Validate the PAN Number.
(a) Create an online Event
Registration form and validate
using JQuery
31.08.19 &
7 (b) Create an online video Player 6 27
05.09.19 which will allow you to play
videos from the system and also
create custom playlist using
JQuery.
Construct a JSON Structure for a
8 12.09.19 bookstore and validate it using 3 30
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 14.09.19 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 3 33
movie.
 Use Bootstrap and JQuery
for designing the User
Interface.
 Form Submission should
be handled through Ajax.
10 19.09.19 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 3 36
and to search for a book with the
title specified by the user and to
display the search results with
proper headings.

11 26.09.19 Develop a Social Media Web

Application using HTML5, CSS3, 3 39
JQuery, AJAX & PHP.
ADDITIONAL EXPERIMENT
12 03.10.19 Write a Perl program to display
various Server Information like
Server Name, Server Software, 3 42
Server protocol, CGI Revision
etc.
13 10.10.19 Create a XHTML form with
Name, Address Line 1, Address
Line 2, and E-mail text fields. On 3 45
submitting, store the values in
MySQL table.Retrieve and
display the data based on Name.

FACULTY INCHARGE HOD

LESSON PLAN

&

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

TIME TABLE AND

INDIVIDUAL
WORKLOAD
 S.VEERASAMY CHETTIAR COLLEGE OF ENGINEERING AND TECHNOLOGY
College Road, SVC Nagar, Puliyangudi- 627 855
Department of Computer Applications
Academic Year 2019 - 2020 (Odd Semester)

Faculty Time Table- Individual Subject

Name of the Faculty :Mrs.M.VIJAYA LAKSHMI

Subject Code/Title : MC5312/ Web Programming Laboratory

Year/SEM : II/ III

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

THU ------- MC5312---

FRI
EX.NO: 1 CREATE YOUR OWN RESUME USING HTML 5 TAGS

Aim:

To create your own Resume using HTML 5 Tags

Algorithm:

1. Create your resume on a word processor and print it.

2. Save your word-processed resume in text (.txt) format.
3. Open your text resume in an editor.
4. Add the required html tags.
5. Add additional html formatting tags as necessary.
6. Save your resume.
7. Create and/or acquire any images you want to use in your resume.

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_1 img {

border: #fff solid 4px;
background: url("../images/bg_img_dark_green.png");
padding: 16px;
 margin: 10px 0px 0px 0px;
}

#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 .icons_1 li, #footer .icons_2 li {

margin: 0px 0px 0px 7px;
padding: 0px;
 list-style-type: none;
display: inline;
}

#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">

<title>Online Resume of Your Name</title>

<!-- Meta -->

<meta name="description" content="A few lines about yourself">
<meta name="keywords" content="web,developer,designer,resume" />
<meta name="author" content="Your Name">

<!-- CSS Stylesheet -->

<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<!-- Begin Wrapper -->

<div id="wrapper">
<!-- Begin Content Area -->
<div id="content">

<!-- Begin Header -->

<header>

<!-- Begin Contact Section -->

<section id="contact-details">

<!-- Begin Profile Image Section -->

<div class="header_1">
<img src="images/profile.jpg" width="250" height="250" alt="Your Name" />
</div>
<!-- End Profile Image Section -->

<!-- Begin Profile Information Section -->

<div class="header_2">

<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">&nbsp;</div>

<!-- Begin Profile Section -->

<dl>
<dt>Profile:</dt>
<dd>

<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">&nbsp;</div>

<!-- Begin Skills Section -->

<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>

<!-- End Skills Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Experience Section -->

<dl>
<dt>Experience:</dt>

<dd>

<section id="experience">

<!-- Position #1 -->

<h2 class="top">Web Developer / Designer</h2>
<p class="bus1">Company Name 1</p>
<p class="time">February 2009 &#45; Present</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>

<!-- Position #2 -->

<h2>Web Developer / Programmer</h2>

<p class="bus1">Company Name 2</p>
<p class="time">November 2007 &#45; February 2009</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>

<!-- Position #3 -->

<h2>Web Developer / Programmer</h2>

<p class="bus1">Company Name 3</p>
<p class="time">March 2006 &#45; November 2007</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">&nbsp;</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">&nbsp;</div>

<!-- Begin Education Section -->

<dl>
<dt>Education:</dt>
<dd>

<section id="education">

<p class="bus1">University of Toledo</p>

2801 Bancroft Street

<br />
Toledo, Ohio, 43606 U.S.A.

<p class="summary">Web Design</p>

<p class="time">2003 &#45; 2005</p>

<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">&nbsp;</div>

<!-- Begin Footer -->

<footer id="footer">

<!-- Begin Footer Content -->

<div class="footer_content">

<!-- Begin Schema Person -->

<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>

<!-- End Schema Person -->

</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 &amp; 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:

To Create a Quiz Program with adaptive questions using JavaScript.

Algorithm:

1. Create your own quiz in HTML format.

2. Add more questions (easy!)
3. Change the quiz theme (background colours/gradient, border, font style, etc)
4. Tell the user which questions they answered incorrectly
5. Display a visual progress bar during the test
6. Using if statements to test conditions
7. Display the user’s score as a percentage value
8. Allow the user to re-take the quiz
9. Add more possible answers (eg. A, B, C, D)
10. Store the results in a database using PHP/MySQL

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 = [

["What is 36 + 42", "64", "78", "76", "B"],

["What is 7 x 4?", "21", "27", "28", "C"],

["What is 16 / 4?", "4", "6", "3", "A"],

["What is 8 x 12?", "88", "112", "96", "C"]

];

// this get function is short for the getElementById function

function get(x){

return document.getElementById(x);

function renderQuestion(){

test = get("test");

if(pos >= questions.length){

 test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions
correct</h2>";

get("test_status").innerHTML = "Test completed";

// resets the variable to allow users to restart the test

pos = 0;

correct = 0;

// stops rest of renderQuestion function running when test is completed

return false;

get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;

question = questions[pos][0];

chA = questions[pos][1];

chB = questions[pos][2];

chC = questions[pos][3];

test.innerHTML = "<h3>"+question+"</h3>";

// the += appends to the data we started on the line above

test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";

test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";

test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";

test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";

}
function checkAnswer(){

// use getElementsByName because we have an array which it will loop through

choices = document.getElementsByName("choices");

for(var i=0; i<choices.length; i++){

if(choices[i].checked){

choice = choices[i].value;

// checks if answer matches the correct choice

if(choice == questions[pos][4]){

//each time there is a correct answer this value increases

correct++;

// changes position of which character user is on

pos++;

// then the renderQuestion function runs again to go to next question

renderQuestion();

window.addEventListener("load", renderQuestion, false);

</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.

EX.NO:3 CREATE A STUDENT REGISTRATION FORM FOR JOB APPLICATION

AND VALIDATE THE FORM FIELDS USING JAVASCRIPT.

Aim:

To create a student Registration form for Job Application and validate the form fields
using JavaScript.

Algorithm:

1. start the program

2. assign condition to get name field
3. assign condition for age
4. assign condition for phone number
5. assign condition to get email field and a radio button
6. have a checkbox for hobby and give a select down arrow for selecting country
7. validate the form
8. execute the program
9. stop the program

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>&nbsp<input type="radio" name="g1"> Male
<br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="radio" name="g1" > Female<br/>
<strong> Hoby:</strong>
&nbsp<input type="checkbox" name="g2" value="Singing">
Singing
<br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp
<input type="checkbox" name="g2" value="Reading">
Reading
<br/>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp
<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:

To create an online Event Registration form and validate using JQuery

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:

/* Below line is used for online Google font */

@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;

font-family: 'Droid Serif', serif;

position:relative;

div.main{

width: 320px;

float:left;

padding: 10px 55px 40px;

background-color: rgba(187, 255, 184, 0.65);

border: 15px solid white;

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;

box-shadow: 0 0 5px #00F5FF;

border: 2px solid #00F5FF;

color: #4f4f4f;

font-size: 16px;

label{

color: #464646;

text-shadow: 0 1px 0 #fff;

font-size: 14px;
font-weight: bold;

#register {

font-size: 20px;

margin-top: 15px;

background: linear-gradient(#22abe9 5%, #36caf0 100%);

border: 1px solid #0F799E;

padding: 7px 35px;

color: white;

text-shadow: 0px 1px 0px #13506D;

font-weight: bold;

border-radius: 2px;

cursor: pointer;

width: 100%;

#register:hover{

background: linear-gradient(#36caf0 5%, #22abe9 100%);

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"/>&nbsp;
<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"/>&nbsp;
<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.