Web Manual

KONGUENGINEERINGCOLLEGE
(Autonomous)
PERUNDURAI,ERODE–638 052
DEPARTMENT OF ELECTRICAL AND ELECTRONICS

ENGINEERING
NAME :
ROLL NO :
CLASS :
SEMESTER :
Certified that this is a bonafide record of work done by the above student of the 18CSO04-
WEB ENGINEERING during the Academic year 2021-22.
LAB-INCHARGE HEAD OF THE DEPARTMENT
Submitted for the practical exam held on…………………
EXAMINER1 EXAMINER2
18CSO04 - WEB ENGINEERING
Laboratory Index
S.N Experiment Name of the experiment Page no Mark Signature

o Date
1. 04.03.2022 Design a web page using HTML tags

2. 07.03.2022 Create a document to implement types
of CSS
3. 21.03.2022 Menu layout and apply various
formatting using CSS
4. 11.04.2022 Registration form validation using
JavaScript
5. 18.04.2022 Interactive CGPA calculator using
DOM
6. 09.05.2022 Objects and Collections
7. 23.05.2022 Registration form using PHP
8. 23.05.2022 Student mark maintance system using
PHP and MySQL
9. 30.05.2022 Session Tracking using PHP
10. 30.05.2022 Online reservation system using
JavaScript, CSS , PHP, MySQL and
session tracking
Exp No:01
Date:04.03.22 DESIGN A WEB PAGE USING HTML TAGS
AIM:
To design a web page using various HTML Tags.
DESCRIPTION:
PROGRAM:
BASIC FORMATTING OF TEXT
<html>
<body leftmargin="100px" topmargin="50px">
<center><h1>WEB ENGINEERING</h1></center>
<hr color="green"/>
<h2>Introduction to WEB ENGINEERING </h2>
<p align="justify">
WEB ENGINEERING is the(<i> application of systematic </i>) disciplined and <u>
quantifiable approaches to development.</u></p> operation, and maintenance of </p><b>Web-
based applications.</b>
</p>
<p> 19EER070 Priyadharshini R </p>
</xmp>
</body>
</html>
LIST IN HTML
<html>
<body topmargin="50px" leftmargin="200px">
<center>
<u>
<h4>Courses </h4>
</u>
</center>
<h4>Bio-Maths</h4>
<ul type="square">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Science</li>
</ul>
<h4>Science</h4>
<ol type="square">
<li>Biology</li>
<li>Botany</li>
<li>Zoology</li>
</ol>
<p>19EER070 Priyadharshini R</p>
</body>
</html>
ADDING IMAGE TO A WEB PAGE
<html>
<body leftmargin="200px">
<h1>web engineering</h1>
<hr color="green"/>
<img src="image.jpg" align="right" width="500px" border="5" hspace="30px" vspace="30px"
title="Education"/>
<p align="justify">
Web Engineering is the application of systematic, disciplined and quantifiable approaches to
development, operation, and maintenance of Web-based applications.
</p>
<p> 19EER070 Priyadharshini R </p>
</body>
</html
LIST IN HTML
<html>
<body>
<h2><center>Link</h2>
<P><a href="https://www.google.com">visit google.com</p></a>
<p>19EER070 Priyadharshini R</p>
</body>
</html>
REGISTERATION FORM
<html>
<body>
<form>
<table border="1" align="center" width="60%" cellpadding="5px">
<tr>
<th colspan="2"><h2>Registration Form</h2></th>
</tr>
<tr>
<td><label>Student Name</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>Roll no</label></td>
</tr>
<tr>
<td><label>Father's Name</label></td>
</tr>
<tr>
<td><label>Mother's Name</label></td>
</tr>
<tr>
<td><label>Date of Birth</label></td>
<td><input type="date"></td>
</tr>
<tr>
<td><label>Gender</label></td>
<td><label>Male</label><input type="radio" name="gender"><label>Female</label><input
name="gender" type="radio"></td>
</tr>
<tr>
<td><label>Email ID</label></td>
<td><input type="email"></td>
</tr>
<tr>
<td><label>Mobile No.</label></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="4"></textarea></td>
</tr>
<tr>
<td><label>State</label></td>
</tr>
<td></td>
<td>
<input type="button" value="Submit"/>
</td>
</tr>
</table>
</form>
<p>19EER070 priyadharshini R</p>
</body>
</html>
fTABLE IN HTML
<!doctype html>
<html>
<body>
<h1 style="display:none">HTML Labs Assignment - Table Assignment 1</h1>
<center><h4>Basic Course</h4></center>
<table border="1" align="center" width="60%" cellpadding="10px" cellspacing="3px"
bgcolor="blue" bordercolor="green">
<tr bgcolor="yellow">
<th>Sr. No</th>
<th>Course Name</th>
<th>Fees</th>
<th>Duration</th>
<th>Eligibility</th>
</tr>
<tr>
<td>1</td>
<td>CCC - Course on Computer Concept</td>
<td>2000</td>s
<td>3 Months</td>
<td>10<sup>th</sup></td>
</tr>
<tr>
<td>2</td>
<td>CCA - Course on Computer Application</td>
<td>2000</td>
<td>3 Months</td>
</tr>
<tr>
<td>3</td>
<td>Tally</td>
<td>3000</td>
<td>3 Months</td>
</tr>
<tr>
<td>4</td>
<td>O Level</td>
<td>15,000</td>
<td>1 Year</td>
</tr>
</table>
<p>19EER070 priyadharshini R</p>
</body>
</html>
OUTPUT:
TEXT FORMATTING:
LIST
IMAGE:
LINK:
FORM:
TABLE:
RESULT:
Thus, the web page using HTML tags is designed and hence verified and the output is
obtained.
Exp No:02
Date:07.03.22 CREATE A DOCUMENT TO IMPLEMENT TYPES OF CSS
AIM:
To create a HTML document to implement types of CSS.
DESCRIPTION:
PROGRAM:
INTERNAL & INLINE CSS
<html>
<head>
<style>
p{color:red}
</style>
<link href="style.css" rel="stylesheet">
</head>
<body bgcolor="yellow">
<center>
<h1>TYPES OF CSS</h1>
<ul>
<li>Inline CSS</li>
<li>Internal CSS</li>
<li>External CSS</li>
</ul>
</b></p>
<p style="color:blue">Here I've used <strong>Inline CSS</strong></p>
<p>Here I've used <strong>Internal CSS</strong></p>
</center>
<p style="color:green">PRIYADHARSHINI R 19EER070</P>
</body>
</html>
EXTERNAL CSS
Index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body><center>
<p><u>EXTERNAL</u></p>
<p><b>CSS type</b></p><br><br>
<p>I h've used External CSS here</p>
</center>
</body>
</html>
Style.css
body{
background-color:blue;
}
p{
color:pink;
}
OUTPUT:
INLINE &INTERNAL:
EXTERNAL:
RESULT:
Thus, the HTML document to implement types of CSS created is hence verified and the output
is obtained.
Exp No:03 MENU LAYOUT AND APPLY VARIOUS FORMATTING USING
Date:21.03.22 CSS
AIM:
To design a web page with menu layout by applying various formatting using CSS.
DESCRIPTION:
PROGRAM:
VERTICAL MENU
<!DOCTYPE html>
<html>
<head>
<style>
#nv
{
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
#nv li
{
border-left: 10px solid #666666;
border-bottom: 1px solid #666666;
}
#nv a
{
background-color: #949494;
color: #ffffff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
}
</style>
</head>
<body>
<ul id="nv">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About us</a></li>
</ul>
</body>
</html>
HORIZONTAL MENU:
<!DOCTYPE html>
<html>
<head>
<style>
#nv
{
margin: 0;
padding: 0;
list-style-type: none;
border: 2px solid #0066FF;
border-radius: 20px 5px;
width: 550px;
text-align: center;
background-color: #33ADFF;
}
#nv li
{
display: inline;
}
#nv a
{
color: #fff;
padding: 5px 10px;
font-weight: bold;
display: inline-block;
width: 100px;
}
#nv a:hover
{
border-radius: 20px 5px;
background-color: #0066FF;
}
</style>
</head>
<body>
<ul id="nv">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About us</a></li>
</ul>
</body>
</html>
DROP DOWN MENU:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn
{
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown
{
position: relative;
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
color: black;
padding: 12px 16px;
display: block;
}
.dropdown-content a:hover
{
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content
{
display: block;
}
.dropdown:hover .dropbtn
{
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be
URLs.</p>
</body>
</html>
OUTPUT:
VERTICAL MENU
HORIZONTAL MENU:
DROP DOWN MENU:

RESULT:
Thus, the web page with menu layout is designed by applying various formatting using CSS
is hence verified and the output is obtained.
Exp No:04 REGISTRATION FORM VALIDATION USING JAVASCRIPT

Date:11.04.22
AIM:
To design a registration page and perform form validation using JavaScript.
DESCRIPTION:
PROGRAM:
<html>
<head>
<script>
function test()
{
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["phone"];
var rollno = document.forms["RegForm"]["Rollno"];
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
if (rollno.value == "")
{
window.alert("Please enter your rollno.");
address.focus();
return false;
}
if (email.value == "")
{window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
return true;
}
</script>
<style>
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form
{
margin: 0 auto;
width: 600px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">REGISTRATION FORM</h1>
<form name="RegForm" action=" " onsubmit="return test()" method="post">
<p>Name: <input type="text" size="65" name="Name" /></p> <br />
<p>E-mail Address: <input type="text" size="65" name="EMail" /></p> <br />
<p>Rollno: <input type="text" size="65" name="rollno" /></p> <br />
<p>Telephone: <input type="text" size="65" name="Telephone" /></p> <br />
<p> SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option><option>BCA</option>
<option>B.COM</option>
</select>
</p> <br /> <br />
<p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
<p>
<input type="submit" value="send" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
</p>
</form>
</body>
</html>
OUTPUT:
RESULT:
Thus, the registration page designed to perform validation using JavaScript is hence verified
and the output is obtained.
Exp No:05 INTERACTIVE CGPA CALCULATOR USING DOM

Date:18.04.22
AIM:
To design a webpage to create simple interactive CGPA calculator using DOM.
DESCRIPTION:
PROGRAM:
<html>
<head>
<title>CGPA Calculator</title>
<style>
</head>
<body><center><fieldset>
<h1><b><i>CGPA Calculator</i><b></h1>
<b>Enter the Mark of physics:</b>
<input type="number" id="num1"><br><br>
<b>Enter the Mark of chemistry:</b>
<b>Enter the Mark of maths 3:</b>
<button onclick="calc()">CGPA</button>
<p id="demo"></p>
<script>
function calc(){
var a=document.getElementById("num1").value;
document.getElementById("demo").innerHTML="<b>Sub1 Mark:</b>"+a+" ";
document.getElementById("demo").innerHTML+="<b>Grade:</b>";
grade(a);
document.getElementById("demo").innerHTML+="<br>";
var b=document.getElementById("num2").value;
document.getElementById("demo").innerHTML+="<b>Sub2 Mark:</b>"+b+" ";
grade(b);
var c=document.getElementById("num3").value;
document.getElementById("demo").innerHTML+="<b>Sub3 Mark:</b>"+c+" ";
grade(c);
document.getElementById("demo").innerHTML+="<b>CGPA:</b>";
cgpa(Number(a),Number(b),Number(c));
}
function cgpa(a,b,c){
if(a>=50 && b>=50 && c>=50 ){
sum=a+b+c;
cgpa=sum/30;
document.getElementById("demo").innerHTML+=cgpa;
}
else{
document.getElementById("demo").innerHTML+="FAIL";
}
}
function grade(mark){
if(mark>=90)
document.getElementById("demo").innerHTML+="O";
if(mark>=80 && mark<90)
document.getElementById("demo").innerHTML+="A";
document.getElementById("demo").innerHTML+="A+";
document.getElementById("demo").innerHTML+="B";
document.getElementById("demo").innerHTML+="B+";
if(mark<50)
document.getElementById("demo").innerHTML+="FAIL";
}
</script>
</fieldset></center></body>
</html>
OUTPUT:
RESULT:
Thus, the webpage to create simple interactive CGPA calculator using DOM designed is
hence verified and the output is obtained.
Exp No:06
Date:09.05.22 OBJECTSANDCOLLECTIONS
AIM:
To write a JavaScript program using Objects and Collections.
DESCRIPTION:
PROGRAM:
ELECTRICITY BILL CALCULATION

<html>
<head>Electricity bill calculation page</head>
<br></br>
<body>
<script>
var units=parseInt(prompt("Enter the total number of units consumed"))
var bill=0
if(units>100)
{
bill=100*10
units=units-100
if(units>100)
{
bill=bill+100*15
units=units-100
bill=bill+units*20
document.write("Total Electricity bill = "+bill)
}
else
{
document.write("Total Electricity bill = "+(bill+units*15))
}
}
else
{
document.write("Total Electricity bill = "+(units*10))
}
</script>
<p> PriyadharshIni 19EER070</p>
</body>
</html>
FACTORIAL AND FIBANOCCI SERIES
<html>
<body>
<script>
document.write("FACTORIAL: <br>");
var x=parseInt(prompt("Enter the number:"));
var ans=1,i=1;
for(i=1;i<=x;i++) ans*=i;
document.write("Factorial of "+x+" is:"+ans+"<br>");
var num=parseInt(prompt("Enter the number:"));
var a=0,b=1,c=0;
document.write("FIBANOCCI SERIES: <br>");
for(i=0; i<num; i++){
document.write(a+" "+"<br>");
c=a+b;a=b;b=c;
}
document.write("priyadharshini R -19REER070 ");
</script>
</body>
</html>
OUTPUT:
ELECTRCITY BILL:
FACTORIAL AND FIBANOCCI:

RESULT:
Thus, the JavaScript program to use Objects and Collections designed is hence verified and
the output is obtained.
Exp No:07
Date:23.05.22 REGISTRATION FORM USING PHP
AIM:
The aim of this experiment is to Design a web page with user registration form with JavaScript
Validation and store the user information into Database.
DESCRIPTION:
PROGRAM:
<!DOCTYPE HTML>
<html>
<head>
<style>
form{
width: 40%;
margin: auto;
margin-top: 30vh;
box-shadow:10px 10px 10px 10px
rgb(169,160,160);
padding: 10px;
}
body{
background-color: antiquewhite;
}
.input
{
width: 50%;
float: right;
margin-right: 6%;
}
p{
margin-left: 6%;
}
.submit
{
margin-left: 7%;
}
</style>
</head>
<body>
<form action="lab_exp_7.php" method="post">
<h4>
<p>Name: <input class="input" type="text" name="fname"></p>
<p>Email: <input class="input" type="text" name="femail"></p>
<p>Password: <input class="input" type="text" name="pwd1"></p>
<p>Confirm Password: <input class="input" type="text"
name="pwd2"></p>
<input class="submit" type="submit">

</h4>
</form>
</body>
</html>
//php file with name lab_exp_7.php

<html>
<body>
<?php
$host= "localhost";
$username= "root";
$password = "";
$db_name = "stu_registration_form";
$conn = mysqli_connect($host, $username, $password, $db_name);
if (!$conn)
{
echo "Connection failed!". "<br>";
}
else
{
echo "Connection Successful". "<br>";
}
$n=$_POST["fname"];
$e=$_POST["femail"];
$p1=$_POST["pwd1"];
$p2=$_POST["pwd2"];
$sql = "INSERT INTO tab1 (name,emailid,pass,cpass)

VALUES ('$n','$e','$p1','$p2')";
if (mysqli_query($conn, $sql))
{
echo "New record created successfully !";
}
else
{
echo "Error: " . $sql . " " . mysqli_error($conn);
}
$conn->close();
?>
</body>
</html>
OUTPUT:
RESULT:
Thus, using JavaScript user registration form is validated and using PHP and phpMyAdmin
Data were stored and retrieved from Database.
Exp No:08 STUDENT MARK MAINTENANCE SYSTEM USING PHP AND

Date:23.05.22 MYSQL
AIM:
To create a website for student mark maintenance system using PHP and MySQL.
DESCRIPTION:
PROGRAM:
<!DOCTYPE HTML>
<html>
<head>
<style>
form{
width: 40%;
margin: auto;
margin-top: 30vh;
box-shadow: 10px 10px 10px 10px rgb(169, 160,
160);padding: 10px;
}
body{
background-color: antiquewhite;
}
.input
{
width: 50%;
float: right;
margin-right: 6%;
}
p{
margin-left: 6%;
}
.submit
{
margin-left: 7%;
}
</style>
</head>
<body>
<form action="lab_exp_8.php" method="post">
<h4>
<p>Enter RollNo: <input type="text" name="rollno"></p>
<p>Enter Name: <input type="text" name="name"></p>
</h4>
<input type="submit">
</form></body>
</html>
//php code with the name lab_exp_8.php
<html>
<body>
<?php
$host= "localhost";
$username= "root";
$password = "";
$db_name = "students_mark_form";
$conn = mysqli_connect($host, $username, $password, $db_name);
if (!$conn)
{
echo "Connection failed!". "<br>";
}
else{
echo "Connection Successful". "<br>";
}
$sql = "SELECT * FROM marks1";
$result = $conn->query($sql);
$count = 0;
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
if((!strcmp($row["Rollno"],$_POST["rollno"])))
{
echo "Maths " . $row["Maths"] . "<br>";echo "Physics " . $row["Physics"] . "<br>";
echo "Chemistry " . $row["Chemistry"] . "<br>";
echo "PSP " . $row["PSP"] . "<br>";
echo "IE " . $row["IE"] . "<br>";
echo "ValueEducation " . $row["ValueEducation"] . "<br>";
echo "C " . $row["C"] . "<br>";
}
}
}
else { echo "0 results";
}
$conn-close();
?>
</body>
</html>
OUTPUT:
RESULT:
Thus, a website for student mark maintenance system using PHP and MySQL is designed
successfully.
Exp No:09
Date:30.05.22 SESSION TRACKER USING PHP.
AIM:
To create a website to illustrate the Session Tracker using PHP.
DESCRIPTION:
PROGRAM:
<?php
session_st
a rt();
if( isset( $_SESSION['counter'] ) )
{
}
else
{
$_SESSION['counter'] += 1;
$_SESSION['counter'] = 1;
}
$msg = "You have visited this page ". $_SESSION['counter'];
$msg .= " in this
session.";
if($_SESSION['counter
']==8)
{
session_destroy();
}
?>
<html>
<head>
<title>Session Tracker</title>
</head>
<body>
<?php echo ( $msg ); ?>
</body>
</html>
OUTPUT:
RESULT:
Thus, the creating of website to illustrate the session tracking was successfully done.
Exp No:10
Date:09.05.22 SESSION TRACKER USING PHP.
AIM:
To develop an online reservation system using Java script, CSS, PHP, MySQL with
Session Tracking.
DESCRIPTION:
PROGRAM:
[INDEX.PHP]
<?php
include
'dbconnect.php';
include 'server.php';
if (!isset($_SESSION['cust_id'])) {
$_SESSION['msg'] = "You must log in
first"; header('location: login.php');
}
else{ //Continue to current page
header( 'Content-Type: text/html; charset=utf-8' );
}
if (isset($_GET['logout']))
{ session_destroy();
unset($_SESSION['cust_name']);
header("location: login.php");
}
?>
<!DOCTYPE html>
<html lang="en" class="js csstransitions">
<head>
<title>Bus Ticket Reservation System</title><meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initialscale=1">
<link rel="stylesheet" href="assets/css/normalize.css" />
<link href="assets/css/index.css" type="text/css"
rel="stylesheet" />

<script
type="text/javascript"
src="assets/js/date&time/jQuery.ptTimeSelect.js"></script>
<script type="text/javascript"
src="assets/js/date&time/jqueryui-1.8.22.custom.min.js"></scrip
t>
<script
src="assets/js/date&time/jquery.ui.timepicker.js"></script>
<script
src="assets/js/date&time/customDateTime.js"></script>

<link
rel="stylesheet"
href="assets/css/date&time/jquery.ptTimeSelect.css" />
<link
rel="stylesheet"
href="assets/css/date&time/jquery.ui.timepicker.css" />
</head>
<body>
<div id="pagewrapper">
<div id="topbg"></div>
<div id="systemName">
<h1>Bus Booking</h1>
</div>
<div id="header">
<div id="mainmenu">
<header>
<ul>
<li><a
href="index.php">Home</a></li
>
<li><a
href="timetable.php">Time
<?php if
(!isset($_SESSION['cust_name'
]))
<li><a
href="login.php">Login</a
></li>
<li><a
href="register.php">Register</a></li>
<?php }?>
<?php if (isset($_SESSION['cust_name']))
{?>
<li>
<a
href="index.php?logout='1'">Logout</a> </li>
<?php }?>
</ul>
</header>
</div>
</div>
<div class="content">

<?php if (isset($_SESSION['success'])) {?>
<div class="error success" >
<h3 style="color: green;">
<?php
echo
$_SESSION['success']; unset($_SESSION['success']);
?></h3></div>
<?php } ?>
</div>
<div id="content">
<h1>Welcome
<?php
if (isset($_SESSION['cust_id']))
{
echo
$_SESSION['cust_name'];
}
?>
</h1>
<div class="abc">
<?php include('errors.php'); ?>
<form
id="search_buses_form"
action="<?php
echo
$_SERVER['PHP_SELF'];
?>"
method="post"
class="has- validationcallback">
From</label>
<label for="journeyFrom"
class="required">Journey
<select
class="select"
name="journeyFrom"
id="journeyFrom" style="width:150px;"
data-validation="required">
<option value="">Select From</option>
<?php
$sql
=
"select
DISTINCT departure_station from `route_detail`";
$run = mysqli_query($db,$sql);if(!$run)
query".mysqli_error());
die("Unable
to
run
$rows = mysqli_num_rows($run);
if($rows>0){
mysqli_fetch_object($run)){
while($data =
echo '<option value="' .
$data -
> departure_station . '">' . $data -> departure_station . '</option>';
}
}
else{
echo "No data found
<br/>";
}
?>
To</label>
</select>
<br>
<label for="journeyTo"
class="required">Journey
<select
class="select"
name="journeyTo"
id="journeyTo" style="width:150px;" data-validation="required">
<option value="">Select To</option>
<?php
$sql
=
"select
DISTINCT arrival_station from `route_detail`";
$run = mysqli_query($db,$sql);
if(!$run)die("Unable to
run
query".mysqli_error());
$rows = mysqli_num_rows($run);
if($rows>0){
mysqli_fetch_obje
ct($run)){
while($data =
echo
'<option
value="' . $data -> arrival_station . '">' . $data
-> arrival_station . '</option>';
}
}
else{
echo "No data found <br/>";
}
?>
</select>
<br>
<label
class="required">Date</label
>
for="dateofJourney"
<input
style="width:147px;"
name="dateOfJourney" id="dateOfJourney" type="date"
class="datepicker_bus_date hasDatepicker" data-
validation="required" value="<?php echo date("Y-m-d");
?>" autocomplete="off">
<br />
<label></label>
<input style="margin:5px 25px 0;" type="submit"
name="searchBuses" id="searchBuses" value="Search Buses">
</form>
</div></div>

<div class="clear"></div>
<footer id="footer" class="footer">
<div class="container-fluid">
<p class="copyright pull-right">Copyright ©
<script>
document.write(new Date().getFullYear())
</script><a href="#"> 18ECR118</a>.
<br> All Rights Reserved.
</p>
</div>
</footer>
</div>
</body>
</html>
[booking.php]
<?php
include
'dbconnect.php';
include
'server.php';
if
(!isset($_SESSION['cust_id']))
{
header("location:
../index.php");}
else{ //Continue to current page
header( 'Content-Type: text/html; charset=utf-8' );
}
?>
<!DOCTYPE html>
<html dir="">
<head>
<title>Bus Reservation System</title>
<meta charset="utf-8">
<meta name="fragment" content="!">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
minimumscale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="assets/css/index.css" type="text/css"
rel="stylesheet" />
<link href="assets/css/seat.css" type="text/css"
rel="stylesheet" />
<style>
form label {
width: 140px;
}
</style>
</head>
<body> <?php if
(!isset($_SESSION['total_rent']))
{
header("location:
index.php");} else{ //Continue to current page
header( 'Content-Type: text/html;
charset=utf-8' );
}
?>
<div id="pagewrapper">
<div id="topbg"></div>
<div id="systemName">
<h1>Bus Booking</h1>
</div>
<div id="header">
<div id="mainmenu">
<header>
<ul>
Table</a></li>
<li><a
href="index.php">Home</a></li>
<li><a
href="timetable.php">Time
<?php
if
(!isset($_SESSION['cust_name'])) {?>
<li><
a href="login.php">Login</a></li>
<?php }?>
<?php if (isset($_SESSION['cust_name']))
{?>
<li>
<a
href="index.php?logout='1'">Logout</a> </li>
<?php }?>
</ul>
</header>
</div></div>
<div></div>
<div></div>
<div></div>
<div id="content">
<h1>My Tickets</h1>
{?>
<div class="content"
style="text-align:center;">

<?php if
(isset($_SESSION['booking_succe
ss']))
<div class="text success" >
<h3 style="color:
green;">
<
?
p
h
p
e
c
h
o
$_SESSION['booking_success'];
unset($_SESSION['booking_success']);
?>
</h3>
</div>
<?php } ?>
</div>
<div class="busdataarea" style="margin: 20px 0 0;
float:none; padding: 20px 10px;">
<table
border="0"
cellpadding="0" cellspacing="20" style="margin: 5px 0;position: relative; margin: 0 auto;
width: auto;">
<thead style="text-align: left;">
<tr>
<th>Bus Name</th>
<th>From</th>
<th>To</th>
<th>Journey Date</th>
<th>Booking Date</th>
<th>Seat No.</th>
<th>Departure Time</th>
<th>Arrival Time</th>
<th>Total Fare</th>
</tr>
</thead>
<?php
$journeyFrom = $_SESSION['journeyFrom'];
$journeyTo = $_SESSION['journeyTo'];
$sql = "SELECT * from `time_table`
WHERE departure_station = '$journeyFrom' AND arrival_station =
'$journeyTo'";
$run = mysqli_query($db,$sql);if(!$run)
die("Unable
to
run
query".mysqli_error($db));
$no_rows = mysqli_num_rows($run);
if($no_rows>0){
while($data
=
mysqli_fetch_assoc($run)){
$departure_station
=
$data['departure_station'];
$arrival_station
=
$data['arrival_station'];
$dateOfJourney
=
$_SESSION['dateOfJourney'];
$selected_seat
=
$_SESSION['selected_seat'];
$booking_date
=
$_SESSION['booking_date'];
$total_rent
=$_SESSION['total_rent'];
if(($journeyFro
m
$departure_station) && ($journeyTo == $arrival_station)){
echo
"<td>".$data['departure_station']."".$data['arrival_station']."</td>"
;
echo
"<td>".$data['departure_station']."</td>";
ech
o
"<td>".$data['arrival_station']."</td>"
;
echo
"<td>".$dateOfJourney."</td>";
echo
"<td>".$booking_date."</td>";
echo
"<td>".$selected_seat."</td>";
if(empty($data['departure_time'])){
$departure_time = "--:--
AM";
}else{
$departure_time
= date('h:i A', strtotime($data['departure_time']));
}
echo
"<td>".$departure_time."</td>";
if(empty($data['arrival_time'])){
$arrival_time = "--:--
PM";
}else{
==A',
strtotime($data['arrival_time'
]));
}
$arrival_time = date('h:i
"<td>".$arrival_time."</td>";
"<td>".$total_rent."</td>";
e
c
h
o
e
c
h
o
}
else if(($journeyFrom
!=
$departure_station) && ($journeyTo != $arrival_station)) {
echo ("No data available in
table.");
$sql = "SELECT * from
`time_table` WHERE departure_station = '$journeyFrom'
AND arrival_station = '$journeyTo'";
mysqli_query($db,$sql);}
}
}
else{
$run
=
</td> <br/>";
}
?>
</table>echo "<td colspan='5'> No
data found
</div>
</div>

<div class="clear"></div>
<div id="footer">Copyrights @ 2018<br>All rights reserved
</div>
</div>
</body>
</html>
OUTPUT:
RESULT:
Thus online reservation system using Java script, CSS, PHP, MySQL with Session
Tracking is designed and deployed successfully.

Web Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Manual

Uploaded by

Copyright:

Available Formats

KONGUENGINEERINGCOLLEGE

DEPARTMENT OF ELECTRICAL AND ELECTRONICS

LAB-INCHARGE HEAD OF THE DEPARTMENT

Submitted for the practical exam held on…………………

S.N Experiment Name of the experiment Page no Mark Signature

1. 04.03.2022 Design a web page using HTML tags

To design a web page using various HTML Tags.

BASIC FORMATTING OF TEXT

ADDING IMAGE TO A WEB PAGE

To create a HTML document to implement types of CSS.

INTERNAL & INLINE CSS

DROP DOWN MENU:

DROP DOWN MENU:

Exp No:04 REGISTRATION FORM VALIDATION USING JAVASCRIPT

To design a registration page and perform form validation using JavaScript.

Exp No:05 INTERACTIVE CGPA CALCULATOR USING DOM

To design a webpage to create simple interactive CGPA calculator using DOM.

To write a JavaScript program using Objects and Collections.

ELECTRICITY BILL CALCULATION

FACTORIAL AND FIBANOCCI SERIES

FACTORIAL AND FIBANOCCI:

box-shadow:10px 10px 10px 10px

<input class="submit" type="submit">

//php file with name lab_exp_7.php

$conn = mysqli_connect($host, $username, $password, $db_name);

$sql = "INSERT INTO tab1 (name,emailid,pass,cpass)

echo "New record created successfully !";

echo "Error: " . $sql . " " . mysqli_error($conn);

Exp No:08 STUDENT MARK MAINTENANCE SYSTEM USING PHP AND

To create a website to illustrate the Session Tracker using PHP.

You might also like