Web Programming Lab: 8 IT 7

LAB MANUAL FOR

WEB PROGRAMMING

IV YEAR VIII SEM: B. TECH. IT BRANCH

SUBECT CODE: 8 IT 7

LAB HOURS: 2 CREDIT: 1

INDEX
 Web Programming Lab: 8 IT 7

S. No Contents

1 Lab Objective

2 Guidelines to Students

4 Solutions for RTU Programs

5 VIVA QUESTIONS
 Web Programming Lab: 8 IT 7

COURSE OBJECTIVES CONTRIBUTION TO PROGRAM OUTCOMES

COURSE OBJECTIVE PROGRAM OUTCOME

1) Apply the knowledge to manage and to
handle web site design and development to a) Graduates will demonstrate an ability to
solve the real world problems. identify formulate and solve the web based
2) Gain a reputed designation as good web problems.
designer and web developer ethically by b) Ability to apply conceptual skills of web
applying advance web technologies. site design and development.
3) Be successfully accepted in future’s c) Graduate can participate and succeed in
development scenario as an engineering competitive examinations like GATE etc.
d) Graduate will show the understanding of
graduate pursuit of lifelong learning.
4) Exhibit team spirit management & impact of Computer engineering
solutions on the society and also be aware
effective communication dealings. of contemporary issues.

Course Outcomes (student learning outcomes)

Graduate of the program will:

1. Demonstrate an understanding of Web Development Lab.

2. They are able to understand the difference among the various scripting languages.
3. Demonstrate proficiency in using web site design and development according to
market demand.
4. Can show their ability to apply conceptual skills of Web Site Design and
Development.
5. Graduates will show interest towards the development of different modern and
efficient tool.

Graduates will able to know about the HTML, CSS, VB Script, Java Script, Apache Web
Server, Internet Information Server, Active X Controls, JSP, ASP, Java Servlets, PHP, Ajax
Programming, Web Services
 Web Programming Lab: 8 IT 7

Guidelines to Students

Equipment in the lab for the use of student community. Students need to maintain a
proper decorum in the computer lab. Students must use the equipment with care. Any
damage is caused is punishable.
Students are required to carry their observation / programs book with completed
exercises while entering the lab.
Students are supposed to occupy the machines allotted to them and are not supposed
to talk or make noise in the lab. The allocation is put up on the lab notice board.
Lab can be used in free time / lunch hours by the students who need to use the
systems should take prior permission from the lab in-charge.
Lab records need to be submitted on or before date of submission.
Students are not supposed to use floppy disks
Use of computer network is encouraged.
 Web Programming Lab: 8 IT 7

Rajasthan Technical University, Kota

Detailed Syllabus for B.Tech. (Information Technology)
Session 2009-10 (Main Examination)

1. Create web pages to understand the various server controls.

2. Create web pages to understand and use to validate user inputs.
3. Create web pages to learn how to navigate between web pages and servers.
4. Programming to learn data binding.
5. Create login form and validate it username/password stored in database.
6. Create student record and perform following operations: Add record, delete, and edit,
search record, navigation between records.
7.A web application display product names and price in tabular formats. Each row
containing product detail should display Know More button. When the button is clicked the
description for the selected item should be displayed.
 Web Programming Lab: 8 IT 7

AIM: To Study J Query with Example

jQuery is a lightweight, "write less, do more", JavaScript library.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.

jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.

The jQuery library contains the following features:

 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities

$(document).ready(function(){

// jQuery methods go here...

});

What are Events?

All the different visitors' actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

 moving a mouse over an element

 selecting a radio button
 clicking on an element

click()

The click() method attaches an event handler function to an HTML element.

 Web Programming Lab: 8 IT 7

dblclick()

The dblclick() method attaches an event handler function to an HTML element.

mouseenter()

The mouseenter() method attaches an event handler function to an HTML element.

 Web Programming Lab: 8 IT 7

hover()

The hover() method takes two functions and is a combination of

the mouseenter() and mouseleave() methods.

jQuery Effects - Hide and Show

jQuery hide() and show()

Syntax:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

With jQuery, you can hide and show HTML elements with the hide() and show() methods:
 Web Programming Lab: 8 IT 7

jQuery - Get Content and Attributes

Get Content - text(), html(), and val()

Three simple, but useful, jQuery methods for DOM manipulation are:

 text() - Sets or returns the text content of selected elements

 html() - Sets or returns the content of selected elements (including HTML markup)
 val() - Sets or returns the value of form fields

The following example demonstrates how to get content with the

jQuery text() and html() methods:

AIM: To Study Bootstrap with Templetes.

 Bootstrap is a free front-end framework for faster and easier web development
 Web Programming Lab: 8 IT 7

 Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as
optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive designs

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">

<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
 Web Programming Lab: 8 IT 7

</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>

</body>
</html>

AIM:

Create Login Form and Validate it Username and password stored in Database
.Develop static pages (using only HTML) of an online Book store. The pages should
resemble: www.amazon.com. The website should consist of the following pages.

Home page
Registration and user Login
User profile page

PROCEDURE:

Home page

Main.html:

<html>

<head>

<title>
 Web Programming Lab: 8 IT 7

Amazon</title>

</head>

<body bgcolor="cyan"> <center>

<strong><h1>Welcome to AMAZON</h1></strong>

<form method="post" action="login.html" target=_blank >

<h4>for books</h4><input type="submit" value="click here">

</form>

</center>

</body>

</html>
 Web Programming Lab: 8 IT 7

Registration and user Login

Login.html:

<html>
<head>
<title>
login page</title>
</head>
<body bgcolor="cyan"> <center>
<strong><h1> AMAZON </h1></strong></center>
<right>
<table align="right">
<tr>
<td><h4>user name</td>
<td><input type="text" ></td>
<td></td>
</tr>
<tr>
<td><h4>password</td>
<td><input type="password"></td>
<td></td>
</tr>
<tr>
<td>
<form method="post" action="catalog.html" >
<input type="submit" value="submit" >
</form>
</td>
<td>
<form method="post" action="userpro.html" >
<input type="submit" value="register" >
&nbsp;&nbsp;
<input type="reset" value="reset"></form></td>
</tr>
</table>
</body>
</html>
 Web Programming Lab: 8 IT 7

User profile page

Userpro.html:

<html>
<head>
<title>
login page</title>
</head>
<body bgcolor="cyan">
<center><strong><h1> AMAZON </h1></strong></center>
<form method="post" action="catalog.html" >
<right>
<table align="left">
<tr>
<td><h4>user name</td>
<td><input type="text" ></td>
<tr>
<tr>
<td><h4>password</td>
<td><input type="password"></td>
</tr>
<tr>
<td><h4>confirm password</td>
<td><input type="password"></td>
</tr>
<tr>
<td><h4>male &nbsp;&nbsp;
<option >
<input type="radio" name="sex" id="male"></td>
<td><h4>female &nbsp; &nbsp;
<input type="radio" name="sex" id="female" ></td>
</option>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" rows=5 cols=19>
</textarea>
</td>
<tr>
<td>
<input type="submit" value="submit" ></td>
<td>
<input type="reset" value="reset"></td>
</tr>

</form>
</body>
</html>
Web Programming Lab: 8 IT 7

OUTPUT:

MAIN.HTML

LOGIN.HTML
Web Programming Lab: 8 IT 7

USERPRO.HTML

CATALOG.HTML

SHOPPING.HTML
Web Programming Lab: 8 IT 7
 Web Programming Lab: 8 IT 7

AIM
Create web pages to understand and use to validate user inputs.
Validate the Registration, user login, user profile and payment by credit card pages
using JavaScript.

PROCEDURE:

Home page:

Main.html:

<html>

<frameset rows="25%,*">

<frame src="top.html" name="top" scrolling ="no" frameborder

="0"> <frameset cols="25%,75%">

<frame src="left.html" name="left" scrolling ="no" frameborder ="0">

<frame src="right.html" name="right" scrolling ="auto" frameborder ="0">

</frameset>

</frameset>

</html>

Top.html:

<html>

<body bgcolor="pink">

<br><br>

<marquee><h1 align=”center”><b><u>ONLINE
BOOK STORAGE</u></b></h1></marquee>
</body>

</html>

Right.html:

<html>

<body>

<br><br><br><br><br>
 Web Programming Lab: 8 IT 7

<h2 align="center">

<b><p> welcome to online book storage. Press login if you

are having id otherwise press registration. </p></b></h2>

</body>

</html>

Left.html:

<html>

<body bgcolor="pink">

<h3>

<ul>

<li><a href="login.html" target="right"><font color="black">

LOGIN</font></a></li><br><br>

<li><a href="profile.html" target="right"><font color="black">

USER PROFILE</font></a></li><br><br>

<li><a href="catalog.html" target="right"><font color="black">

BOOKS CATALOG</font></a></li><br><br>

<li><a href="scart.html" target="right"><font color="black">

SHOPPINGCART</font></a></li><br><br>

<li><a href="payment.html" target="right"><font color="black">

PAYMENT</font></a></li><br><br> <br><br>

</ul>

</body>

</html>

Registration and user Login

Login.html:

<html>

<body bgcolor="pink"><br><br><br>

<script language="javascript">
 Web Programming Lab: 8 IT 7

function validate()

var flag=1;

if(document.myform.id.value==""||

document.myform.pwd.value=="")

alert("LoginId and Password must be filled")

flag=0;

if(flag==1)

alert("VALID INPUT");

window.open("catalog.html","right");

else

alert("INVALID INPUT");

//document.myform.focus();

</script>

<form name="myform">

<div align="center"><pre>

LOGIN ID:<input type="text" name="id"><br>

PASSWORD:<input type="password"
name="pwd"><br><br> </pre>

<input type="button" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="clear" >

 Web Programming Lab: 8 IT 7

</div>

</form>

</body>

</html>

User profile page

Profile.html:

<html>

<body bgcolor="pink"><br><br>

<script type="text/javascript">

function validate()

var flag=1;

if(document.myform.name.value==""||

document.myform.addr.value==""||

document.myform.phno.value==""||

document.myform.id.value==""||

document.myform.pwd.value=="")

alert("Enter all the details");

flag=0;

var str=document.myform.phno.value;

var x=new RegExp("\\d","g");

if(!(str.match(x)))

if(!(str.length==10))

flag=0;
 Web Programming Lab: 8 IT 7

var str1=document.myform.id.value;

var x1=new RegExp("^[A-Z][a-zA-Z]+$","g");

if(!(str1.match(x1)))

flag=0;

alert("Invalid UserID");

var str1=document.myform.pwd.value;

var x1=new RegExp("^[A-Z][a-zA-Z]+$","g");

if(!(str1.match(x1)))

flag=0;

alert("Invalid password");

if(flag==1)

alert("VALID INPUT");

window.self.location.href="login.html";

else

alert("INVALID INPUT");

document.myform.focus();

</script>
 Web Programming Lab: 8 IT 7

<form name="myform">

<div align="center"><pre>

NAME :<input type="text" name="name"><br>

ADDRESS :<input type="type" name="addr"><br>

CONTACT NUMBER:<input type="text" name="phno"><br>

LOGINID :<input type="text" name="id"><br>

PASSWORD :<input type="password"

name="pwd"></pre><br><br>

</div>

<br><br>

<div align="center">

<input type="button" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;

<input type="reset" value="clear">

</form>

</body>

</html>

Books catalog:

Scart.html:

<html>

<body bgcolor="pink"><br><br><br>

<script language="javascript">

function validate()

var flag=1;

if(document.myform.title.value=="")

flag=0;
 Web Programming Lab: 8 IT 7

str=document.myform.title.value;

if(str=="c"||str=="C")

document.myform.t1.value="C";

document.myform.t2.value=444;

else if(str=="jsp"||str=="JSP")

document.myform.t1.value="JSP";

document.myform.t2.value=555;

else

flag=0;

if(flag==1)

alert("VALID INPUT");

else

alert("INVALID INPUT");

document.myform.focus();
 Web Programming Lab: 8 IT 7

</script>

<form name="myform" action="payment.html"

target="right"> <div align="center"><pre>

BOOK TITLE :<input type="text"

name="title"><br> </pre><br><br>

Book Title: <input type="text" name="t1" disabled>

Book Cost: <input type="text" name="t2" disabled>

</div>

<br><br>

<div align="center">

<input type="submit" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="clear">

<input type="submit" value="Purchase">

</form>

</body>

</html>

Shopping cart:

Catalog.html:

<html>
<body bgcolor="pink"><br><br><br>
<script language="javascript">
function validate()
{
var flag=1;
if(document.myform.id.value==""||
document.myform.title.value==""||
document.myform.no.value==""||
document.myform.cost.value=="")
{
 Web Programming Lab: 8 IT 7

flag=0;
}
str=document.myform.title.value;
var str1=document.myform.cost.value;
if(!((str=="c"&& str1==444) || (str=="jsp" && str1==555)))
{
flag=0;
}
if(flag==1)
{
alert("VALID INPUT");
}
else
{
alert("INVALID INPUT");
document.myform.focus();
}
}
</script>
<form name="myform" action="scart.html" target="right">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br>
TITLE :<input type="text" name="title"><br>
NO.OF BOOKS :<input type="text" name="no"><br>
COST OF BOOK :<input type="text"name="cost"><br>
</pre><br><br>

</div>
<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()"> &nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear">
</form>
</body>
</html>

Payment by credit card

Payment.html:

<html>
<body bgcolor="pink"><br><br><br>
<script language="javascript">
function validate()
{
var flag=1;
if(document.myform.id.value==""|| document.myform.pwd.value==""||
document.myform.amount.value==""|| document.myform.num.value=="")
{
flag=0;
 Web Programming Lab: 8 IT 7

}
var str=document.myform.amount.value;
var x=new RegExp("\\d","g");
if(!(str.match(x)))
{ flag=0;
}
var str1=document.myform.num.value;
var x1=new RegExp("\\d","g");
if(!(str.match(x1)))
{ flag=0;
}i
f(flag==1)
{ alert("VALID INPUT");
window.self.location.href="order.html";
} else
{

alert("INVALID INPUT");
document.myform.focus();
}}
</script>
<form name="myform">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br>
PASSWORD :<input type="password" name="pwd"><br>
AMOUNT :<input type="text" name="amount"><br>
CREDITCARDNUMBER :<input type="PASSWORD" name="num"><br></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="button" value="ok" onClick="validate()">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="clear" >
</form>
</body>
</html>

Order Conformation

Order.html:

<html>
<head><title>order conformation</title><M/head>
<body bgcolor="cyan">
<center>
<h1><b>AMAZON</h1>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU</h2>
</center>
 Web Programming Lab: 8 IT 7

</body>
</html>
Web Programming Lab: 8 IT 7

OUTPUT:

MAIN.HTML

LOGIN.HTML
Web Programming Lab: 8 IT 7

PROFILE.HTML

CATALOG.HTML
Web Programming Lab: 8 IT 7

SCART.HTML

PAYMENT.HTML
 Web Programming Lab: 8 IT 7

WEEK-5.

AIM:
Write an XML file which will display the Book information which includes the following:
1) Title of the book
2) Author Name
3) ISBN number
4) Publisher name
5) Edition
6) Price

Write a Document Type Definition (DTD) to validate the above XML file. Display the XML
file as follows.
The contents should be displayed in a table. The header of the table should be in color GREY
& the Author names column should be displayed in one color and should be capitalized and
in bold. Use your own colors for remaining columns. Use XML schemas XSL and CSS for
the above purpose.

1. Books.DTD:
<!ELEMENT details (title, author, ISBN_Number, publisher, edition, price) >
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT ISBN_Number (#PCDATA)>
<!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>

2. Th.CSS
.thb
{
background-color:gray;
}
.bg
{
background-color:red;
}

3. Books.XML:
<?xml version="1.0"?>
<!DOCTYPE book SYSTEM "books.dtd">
<book>
<details>
<title> C</title>
<author> BalaGuru Swami</author>
<ISBN_Number>2536</ISBN_Number>
<publisher>pearson</publisher>
<edition>2</edition>
<price>255/-</price>
</details>
<details>
 Web Programming Lab: 8 IT 7

<title> C++</title>
<author> BalaGuru Swami</author>
<ISBN_Number>5236</ISBN_Number>
<publisher>pearson</publisher>
<edition>2</edition>
<price>315/-</price>
</details>
<details>
<title> E-Commerce</title>
<author> Kalakata</author>
<ISBN_Number>8562</ISBN_Number>
<publisher>pearson</publisher>
<edition>5</edition>
<price>300/-</price>
</details>
<details>
<title> CO</title>
<author> Marris </author>
<ISBN_Number>4578</ISBN_Number>
<publisher>Dream Tech</publisher>
<edition>5</edition>
<price>270/-</price>
</details>
<details>
<title> Web Technologies</title>
<author> Kumar </author>
<ISBN_Number>5423</ISBN_Number>
<publisher>Willay</publisher>
<edition>6</edition>
<price>500/-</price>
</details>
<details>
<title> Web Programming</title>
<author> Kumar </author>
<ISBN_Number>1258</ISBN_Number>
<publisher>Willay</publisher>
<edition>6</edition>
<price>500/-</price>
</details>
</book>

4. Books.HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="th.css">
</head>
<body>
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 Web Programming Lab: 8 IT 7

xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("details")
document.write("<tr><th class='thb'>");
document.write("TITLE</th><th class='thb'>AUTHOR</th><th
class='thb'>ISBN_Number</th><th class='thb'>PUBLISHER</th><th
class='thb'>EDITION</th><th class='thb'>PRICE</th></tr>");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("</td><th class='bg'>");
document.write(x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue.toU
pperCase());
document.write("</th><td>");
document.write(x[i].getElementsByTagName("ISBN_Number")[0].childNodes[0].nodeV
alue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("publisher")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("edition")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
Web Programming Lab: 8 IT 7

OUTPUT:
 Web Programming Lab: 8 IT 7

AIM: To Study PHP with Examples.

Q1.What is PHP?

Ans.PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open

source general-purpose scripting language that is especially suited for web development and
can be embedded into HTML.

Instead of lots of commands to output HTML (as seen in C or Perl), PHP pages contain
HTML with embedded code that does "something" (in this case, output "Hi, I'm a PHP
script!"). The PHP code is enclosed in special start and end processing
instructions <?php and ?> that allow you to jump into and out of "PHP mode."

Q2.What can PHP do?

Ans.PHP can generate dynamic page content

 PHP can create, open, read, write, delete, and close files on the server
 PHP can collect form data
 PHP can send and receive cookies
 PHP can add, delete, modify data in your database
 PHP can be used to control user-access
 PHP can encrypt data

Q3. Write a program to display a default program (index.html)?

Ans.

<html>

<body><?php

echo "Hello world!<br>";

echo "This is the text in PHP!<br>";?>

</body>

</html>
 Web Programming Lab: 8 IT 7

Q4. Write a program to add two no.?

Ans.<html>

<body><?php

$a=10;

$b=20;

$c=$a+$b;

echo "addition is: $a+$b = $c”;?><body>

</html>

Q5.Write a program to print prime no.?

Ans. <html>
<body>
<?php
function prime1($i)
{
$flag=0;
for($j=2 ; $j<$i ; $j++)
{
 Web Programming Lab: 8 IT 7

if($i % $j == 0)
{
$flag=1;
break;
}
}
if($flag == 0)
return 0;
else
return 1;
}
echo "<h1> PHP </h1>";
echo "<h3>Check Prime between 1 and 50 :<br></h3>";
for($i=2 ; $i<=50 ; $i++)
{
if(prime1($i) == 0)
echo "$i is Prime <br>";
else
echo "$i is Not prime <br>";
}?>
</body>
</html>
 Web Programming Lab: 8 IT 7

Q6. Write a program for maximum among three?

Ans.
<html>
<body>
<?php
echo "<h1> PHP </h1>";
$a=10;
$b=20;
echo "a=$a <br>";
echo "b=$b <br>";$c = $a + $b;
echo "c = $c <br>";
if ( $a > $b && $a > $c)
echo " A is Max";
elseif($b > $c)
echo "B is Greater";
else
echo " c is greater";?>
 Web Programming Lab: 8 IT 7

</body>
</html>

Q7. Write a program to print 1 to 10?

Ans
<html><body>
<?php
for ($i=1 ; $i<=10 ; $i++)
echo "$i<br>"?>
</body>
</html>
Web Programming Lab: 8 IT 7
 Web Programming Lab: 8 IT 7

How to connect with database?

1. HTML File
<html>
<head>
<title>16egjcs089</title>
</head>
<body>
<form action="prog1.php" method = "Post">
<input type = "text" name="id" placeholder="id" required="True" ><br>
<input type = "text" name="Sname" placeholder="Name" required="True" ><br>
<input type = "text" name="Roll_NO" placeholder="Roll_NO" required="True"
><br>
<input type = "text" name="Password" placeholder="password"
required="True" >
<br>
<input type = "Submit" name="Submit" >
</form>
</body>
</html>
2. PHP file
<?php
$Server = "localhost";
$username = "root";
$password = "";
$db = "16egjcs089";
$con = mysqli_connect($server,$username,$password,$db);
if(!$con) {
die("connection failed : ".mysqli_connect_error());
}
echo $sql = "insert into student
values('".$_POST['id']."','".$_POST['Sname']."','".$_POST['Roll_NO']."','".$_POST['P
a ssword']."')";
mysqli_query($con,$sql);
mysqli_close($con);
 Web Programming Lab: 8 IT 7

AIM :

Create Student record and Perform following Operations:

Design a form and insert data into database.

Add Record, delete and edit, Search Record .

1. HTML file

<!DOCTYPE html>

<html>

<head>

<title>16EGJCS089</title>
 Web Programming Lab: 8 IT 7

</head>

<center>

<body>

<div style="background-color:#7719AA;margin:25%;padding-top:20px;margin-top: 10px;

color:white;font-size:12px">

<form action="prog2.php" method="Post">

<table cellspacing="15px" cellpadding="5%" align="left">

<tr>

<td>First Name:</td>

<td><input type="text" name="First Name" placeholder="First Name"

style="width:100%;size:30;padding: 5px;"/></td>

</tr>

<tr>

<td>Last Name:</td>

<td><input type="text" name="Last Name" placeholder="Last Name"

style="width:100%;padding: 5px;"></td>

</tr>

<tr>

<td>Date of birth:</td>

<td><input type="text" name="Date" placeholder="Date"

style="width:100%;padding: 5px;"/></td>

</tr>

<tr>

<td>Email id:</td>

<td><input type="text" name="Email" placeholder="Email"

style="width:100%;padding: 5px;"/></td>

</tr>

<tr>

<td>Mobile no.:</td>
 Web Programming Lab: 8 IT 7

<td><input type="text" name = "Mobile" placeholder="Mobile no"

style="width:100%;padding: 5px;"/></td>

</tr>

<tr>

<td>Address:</td>

<td><textarea name = "Address" rows="5" cols="40" ></textarea></td>

</tr>

<tr>

<td>Gender:</td>

<td><input type="radio" name="gender">male<input type="radio"

name="gender">female</td>

</tr>

<tr>

<td>Country:</td>

<td><select style="width:100%;padding: 5px;">

<option value="India">India</option>

<option value="Pakistan">Pakistan</option>

<option value="England">England</option>

<option value="Australia">Australia</option>

<option value="newzealand">Newzealand</option>

</select></td>

</tr>

<tr>

<td>Hobbies:</td>

<td><input type="checkbox" name="Hobbies"style="margin-left:10%">Drawing

<input type="checkbox" name="Hobbies">Singing

<input type="checkbox" name="Hobbies">Dancing</td>

</tr>
 Web Programming Lab: 8 IT 7

<div>

<table>

<tr>

<td>Qualification:</td>

<td>ScNo</td>

<td>Examination</td>

<td>Board</td>

<td>Percentage</td>

<td>Year of passing</td>

</tr>

<tr>

<td></td>

<td>1.</td>

<td>class X</td>

<td><input type="text" name="Board_10" style="width:90%" /></td>

<td><input type="text" name="Percentage_10" style="width:90%" /></td>

<td><input type="text" name="Year_10"style="width:90%" /></td>

</tr>

<tr>

<td></td>

<td>2.</td>

<td>class XII</td>

<td><input type="text" name="Board_12" style="width:90%"/></td>

<td><input type="text" name="Percentage_12" style="width:90%"/></td>

<td><input type="text" name="Year_12" style="width:90%"/></td>

</tr>

<tr>
 Web Programming Lab: 8 IT 7

<td></td>

<td>3.</td>

<td>Graduation</td>

<td><input type="text" name="Board" style="width:90%"/></td>

<td><input type="text" name="Percentage" style="width:90%"/></td>

<td><input type="text" name="Year of passing" style="width:90%"/></td>

</tr>

<tr>

<td></td>

<td>4.</td>

<td>Masters</td>

<td><input type="text" name="Board" style="width:90%"/></td>

<td><input type="text" name="Percentage" style="width:90%"/></td>

<td><input type="text" name="Year of passing" style="width:90%"/></td>

</tr>

<tr>

<td></td>

<td><input type="submit" name="Submit"></td>

<td><input type="reset" name="reset"></td></tr>

</table>

</table>

</div></form>

</div>

</body>ss

</html>
 Web Programming Lab: 8 IT 7

2. PHP file

<?php

$Server = "localhost";

$username = "root";

$password = "";

$db = "16egjcs089";

$con = mysqli_connect($server,$username,$password,$db);

if(!$con)

die("connection failed : ".mysqli_connect_error());

$sql = "insert into form

values('".$_POST['First_Name']."','".$_POST['Last_Name']."','".$_POST['Date']."','".$_POST
['Email']."','".$_POST['Mobile']."','".$_POST['Address']."','".$_POST['Board_10']."','".$_POS
T['Percentage_10']."','".$_POST['Year_10']."','".$_POST['Board_12']."','".$_POST['Percentag
e_12']."','".$_POST['Year_12']."')";

echo "First_Name : ".$_POST['First_Name']."<BR>";

echo "Last_Name : ".$_POST['Last_Name']."<BR>";

echo "Date : ".$_POST['Date']."<BR>";

echo "Email : ".$_POST['Email']."<BR>";

echo "Mobile : ".$_POST['Mobile']."<BR>";

echo "Address : ".$_POST['Address']."<BR>";

echo "Board_10 : ".$_POST['Board_10']."<BR>";

echo "Percentage_10 : ".$_POST['Percentage_10']."<BR>";

echo "Year_10 : ".$_POST['Year_10']."<BR>";

echo "Board_12 : ".$_POST['Board_12']."<BR>";

 Web Programming Lab: 8 IT 7

echo "Percentage_12 : ".$_POST['Percentage_12']."<BR>";

echo "Year_12 : ".$_POST['Year_12']."<BR>";

mysqli_query($con,$sql);

mysqli_close($con);

?>
 Web Programming Lab: 8 IT 7

AIM:
Create web pages to learn how to navigate between web pages and servers.
Basic Navbar

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with the .navbar class, followed by a responsive
collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large,
large, medium or small screens).

To add links inside the navbar, use a <ul> element with class="navbar-nav". Then
add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class:

 Link 1
 Link 2
 Link 3

<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 Web Programming Lab: 8 IT 7

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-light">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>

<div class="container-fluid">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack
vertically (on extra large, large, medium or small screens).</p>
</div>
 Web Programming Lab: 8 IT 7

</body>
</html>
 Web Programming Lab: 8 IT 7

Vertical Navbar

Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar:

<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar bg-light">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
 Web Programming Lab: 8 IT 7

<br>

<div class="container-fluid">
<h3>Vertical Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

</body>
</html>

Centered Navbar

Add the .justify-content-center class to center the navigation bar.

The following example will center the navigation bar on medium, large and extra large
screens. On small screens it will be displayed vertically and left-aligned (because of the
.navbar-expand-sm class):

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

 Web Programming Lab: 8 IT 7

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-light justify-content-center">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#">Link 1</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 2</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 3</a>

</li>

</ul>

</nav>

<br>

<div class="container-fluid">

<h3>Centered Navbar</h3>
 Web Programming Lab: 8 IT 7

<p>Use the .justify-content-center class to center the navigation bar.</p>

<p>In this example, the navbar will be centered on medium, large and extra large screens.
On small screens it will be displayed vertically and left-aligned (because of the .navbar-
expand-sm class).</p>

</div>

</body>

</html>

Colored NavbarActive

Use any of the .bg-color classes to change the background color of the navbar (.bg-
primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-
light)

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 Web Programming Lab: 8 IT 7

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h3>Colored Navbar</h3>

<p>Use any of the .bg-color classes to add a background color to the navbar.</p>

<p>Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use
the .navbar-light class to add a black text color.</p>

</div>

<nav class="navbar navbar-expand-sm bg-light navbar-light">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

 Web Programming Lab: 8 IT 7

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

 Web Programming Lab: 8 IT 7

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-success navbar-dark">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">
 Web Programming Lab: 8 IT 7

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-info navbar-dark">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-warning navbar-dark">

<ul class="navbar-nav">

<li class="nav-item active">

 Web Programming Lab: 8 IT 7

<a class="nav-link" href="#">Active</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-danger navbar-dark">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>
 Web Programming Lab: 8 IT 7

<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">

<ul class="navbar-nav">

<li class="nav-item active">

<a class="nav-link" href="#">Active</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

</nav>

</body>

</html>
 Web Programming Lab: 8 IT 7

AIM: Programming to learn data binding.

Data Binding Library

The Data Binding Library is a support library that allows you to bind UI components in your
layouts to data sources in your app using a declarative format rather than programmatically.
Layouts are often defined in activities with code that calls UI framework methods. For
example, the code below calls findViewById() to find a TextView widget and bind it to
the userName property of the viewModel variable:
 Web Programming Lab: 8 IT 7

Using the Data Binding Library

Use the following pages to learn how to use the Data Binding Library in your Android apps.

Get started
Learn how to get your development environment ready to work with the Data Binding
Library, including support for data binding code in Android Studio.

Layouts and binding expressions

The expression language allows you to write expressions that connect variables to the
views in the layout. The Data Binding Library automatically generates the classes
required to bind the views in the layout with your data objects. The library provides
features such as imports, variables, and includes that you can use in your layouts.
These features of the library coexist seamlessly with your existing layouts. For
example, the binding variables that can be used in expressions are defined inside
a data element that is a sibling of the UI layout's root element. Both elements are
wrapped in a layout tag, as shown in the following example:
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="viewmodel"
type="com.myapp.data.ViewModel" />
</data>
<ConstraintLayout... /> <!-- UI layout's root element -->
</layout>

Generated binding classes

The Data Binding Library generates binding classes that are used to access the
layout's variables and views. This page shows you how to use and customize
generated binding classes.
 Web Programming Lab: 8 IT 7

Binding adapters
For every layout expression, there is a binding adapter that makes the framework calls
required to set the corresponding properties or listeners. For example, the binding adapter can
take care of calling the setText() method to set the text property or call
the setOnClickListener() method to add a listener to the click event. The most common
binding adapters, such as the adapters for the android:text property used in the examples in
this page, are available for you to use in the android.databinding.adapters package. For a list
of the common binding adapters, see adapters. You can also create custom adapters, as shown
in the following example:

Bind layout views to Architecture Components

The Android Support Library includes the Architecture Components, which you can
use to design robust, testable, and maintainable apps. You can use the Architecture
Components with the Data Binding Library to further simplify the development of
your UI.

Two-way data binding

The Data Binding Library supports two-way data binding. The notation used for this
type of binding supports the ability to receive data changes to a property and listen to
user updates to that property at the same time.
 Web Programming Lab: 8 IT 7

VIVA QUESTIONS

Q. 1 What is HTML. Explain popular tags used in web page designing.

Ans. –HTML stands for hyper text markup language. It is the standard markup language for
creating Web pages.
Popular tags are:
<h1> - <h6> : This tag is used for heading.
<p> : Paragraph tag
<img> : used for inserting images.
<a> : used for inserting hypertext or hyperlinks.

Q. 2 Differentiate Client side scripting and server side scripting with the help of example.
Ans. - The main difference between server-side scripting and client-side scripting is that the server
side scripting involves server for its processing. On the other hand, client-side scripting requires
browsers to run the scripts on the client machine but does not interact with the server while
processing the client-side scripts.

The client-side script executes the code to the client side which is visible to the users while a
server-side script is executed in the server end which users cannot see.

Q. 3 Explain the procedure to design HTML pages(e.g. Editors, Browsers, page format)
Ans. – 1. Open a text editor
2. Type <!Doctype html>
3. Type <html> tag
4. Type <head> tag and write code in it.
5. Type <body> tag and write code in it.
6. End all the tags as</tag>.
7. Save the file with extension .html or .htm.
8. Open web browser and view the web page.
Q. 4 What is CSS. Discuss in detail about the types of CSS.

Sol- Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language like HTML. A CSS file has
extention .css and internet media type is text/css.CSS is designed to enable the sepration of
presentation and content, including layout, colors and fonts.
 Web Programming Lab: 8 IT 7

Types of css:
 Inline CSS
 Internal or Embedded CSS
 External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag using
style attribute.

Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the
CSS is embedded within the HTML file.

External CSS: External CSS contains separate CSS file which contains only style property
with the help of tag attributes (For example class, id, heading, …etc). CSS property written
in a separate file with .css extension and should be linked to the HTML document
using link tag. This means that for each element, style can be set only once and that will be
applied across web pages.
Q.5 What is JavaScript. Discuss types of JavaScript.

Sol-JavaScript is a web development language used to define the behavior of the web
page.There are 3 types of JavaScript:

1. Inline JavaScript: JavaScript which is defined in a tag itself is known as inline JS.
2. Internal JavaScript: JS which is defined in the head section of the html code is
known as internal JS. It is defined in the <script> tag.

External JavaScript: JavaScript which is defined in any external file is known as external
JS. The extension of that file is .js.