Scribd
Upload
68 views

WP Record

This document contains a laboratory record for a student enrolled in the Web Programming Lab course at SCMS College of Polytechnics. It includes the student's name, year, branch, class number, and registration number. It also contains an index listing the experiments conducted in the lab along with their page numbers and dates. The record is certified by the Head of Section and Lecturer in Charge, and includes spaces for internal and external examiners' signatures.

Uploaded by

Hyjan Jacob
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
68 views

WP Record

This document contains a laboratory record for a student enrolled in the Web Programming Lab course at SCMS College of Polytechnics. It includes the student's name, year, branch, class number, and registration number. It also contains an index listing the experiments conducted in the lab along with their page numbers and dates. The record is certified by the Head of Section and Lecturer in Charge, and includes spaces for internal and external examiners' signatures.

Uploaded by

Hyjan Jacob
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

SCMS COLLEGE OF POLYTECHNIC VAIKKARA

PERUMBAVOOR ERNAKULAM-683549

LABORATORY RECORD

Name…………………………………………………………………………………………

Year…………………………………….…Branch………………………………………….

Class No…………………………………...Reg.no…………………………………………

Certified that this is the bonafide record of work done in the ……………………
…………………………………………………………………………………………….
Laboratory of the SCMS College of Polytechnics, Vaikkara

By,
Sri/Smt……………………………………………..

Head of Section Lecturer in Charge

Place:
Date:

Internal Examiner External Examiner


WEB PROGRAMMING LAB (5139)

INDEX

Sl No Name of Experiment Date Page No Initial of


Teacher
1 BASIC TAGS 3

2 TIME TABLE 6

3 FORM 8

4 CSS 10

5 CALCULATOR USING JAVA SCRIPT 12

6 USERNAME AND PASSWORD 14


VALIDATION USING JAVA SCRIPT
7 PHONE NUMBER VALIDATION USING 16
JAVA SCRIPT
8 SIMPLE INTEREST USING PHP 18

9 CALCULATION OF ELECTRICITY BILL 20


USING PHP
10 COOKIE CREATION 22

11 DATABASE CONNECTION USING PHP 23

Dept. of Computer Engg. 2 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:1 Date:

BASIC TAGS

AIM: To make a website for college using basic tags.

<!doctype.html>
<head>
<title>
SCMS
</title>
</head>
<body text="blue" bgcolor="GREY">
<h1 style="color:white; text-align:center" >
SCMS College Of Polytechnic Perumbavoor
</h1>
<h2>
Genesis
</h2>
<h3>
Dr. G.P.C. Nayar
Chairman, SCMS Group
</h3>
<img src="Nayar.jpg">
</img>
<p>
The year 1976 saw the birth of a luminous star of learning on the educational horizon. The star was to
later blaze a trail across the Indian skies guiding scores of students to scale the heights of success in
their careers, professions and enterprises. Today, the beacon stands firm on massive pillars, having
stamped indelible imprints on the glorious academic traditions of India. This is the story of PRATHAP
FOUNDATION FOR EDUCATION AND TRAINING, the brainchild of the great visionary Dr. G.P.C.
Nayar, who wanted to redefine educational standards in India by shaping it as a window to the
emerging market-driven global economy. Prathap Foundation of Education and Training started its first
academic institution, the School of Communication and Management Studies (SCMS) in 1976, which
in later years earned fame and glory as a top business school. It was rechristened as SCMS COCHIN
SCHOOL OF BUSINESS in the year 2013. The Foundation went on establishing institutions to offer
professional education in engineering, technology, management, hospitality, animation, biotech
research, socio-economic research and other professional areas with the core concept of quality and
excellence in anything it does. Together, these institutions constitute SCMS GROUP OF
EDUCATIONAL INSTITUTIONS
</p>
<p>
The SCMS Group of Educational Institutions decided to start a state-of-theart polytechnic college to

Dept. of Computer Engg. 3 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

offer diplomas in Mechanical Engineering, Electrical Engineering, Civil Engineering, Automobile


Engineering and Computer Engineering with the idea of filling up part of the large shortage in the field.
This decision was taken on the basis of a study conducted by an external agency which found there is a
great demand for engineering diploma holders in this country. In the manufacturing sector, particularly
the engineering and automobile sectors, there is a great shortage of technicians and technical hands.
The existing institutions are not able to provide even half the requirement in this sector. We hope our
effort will at least partially meet such growing demands in the field. SCMS Group has a national
reputation for excellence in engineering and management education and we hope to maintain the same
level of standard and excellence for SCMS College of Polytechnics.
</p>
<h4>
Dr. Pradeep P. Thevannoor
Former Vice Chairman of SCMS Group
</h4>
<img src="Pradeep.jpg">
<p>
Dr. Pradeep P. Thevannoor, the late Vice Chairman of SCMS Group, was a great visionary and a
source of inspiration for all of us at SCMS Group. He wanted to take SCMS to great heights in quality
and excellence. A man of fertile imagination and untiring energy, he was in a hurry to accomplish his
pet projects. SCMS Engineering College was closest to his heart. He was also the guiding force and
inspiration behind SCMS School of Architecture and projects like SCMS Water Institute,
Biotechnology Research Centre, the now famous Neera, biofuel from coconut oil, the antidiabetic tea
powder ‘Stevia Tea’ and a host of other activities. They were all products inspired and initiated by him.
Widely travelled, his unfinished mission was for spreading the wings of SCMS to London and
Bangalore by establishing academic institutions. He died on his way to Bangalore for project evaluation
on 17.11.2014 when his car collided with a truck and died instantly. True to his nature, he lived for
SCMS and died for it.
</p>
<h5>
Branches
</h5>
<ul>
<li>Computer</li>
<li>Civil</li>
<li>Electrical</li>
<li>Mechanical</li>
<li>Automobile</li>
</ul>
<table border="1" cellspacing="5" align="center">
<tr>
<th>Branches</th>
<td>CT</td>
<td>EEE</td>
<td>CE</td>
</tr>
<tr>
<th>Seat</th>
Dept. of Computer Engg. 4 SCMS College of Polytechnics
WEB PROGRAMMING LAB (5139)

<td>20</td>
<td>11</td>
<td>15</td>
</tr>
<tr>
<th>Total</th>
<td colspan="3" align="right">46</td>
</tr>
</table>
<a href="https://scmsgroup.org/scmspoly/index.php">Reference Link👇</a>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 5 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:2 Date:

TIME TABLE

AIM: To make class time table using table tag.

<!doctype.html>
<body>
<h2 align="center">Odd Semester Class Time Table for the Academic Year 2022-2023 W.E.F 22-
08-2022</h2>
<table border="1" cellspacing="1" align="center">
<tr>
<th>Day/Period</th>
<th>I</th>
<th>II</th>
<th rowspan="6" align="center">TEA BREAK</th>
<th>III</th>
<th>IV</th>
<th rowspan="6" align="center">LUNCH BREAK</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr>
<th>Monday</th>
<td>MP</td>
<td>CC</td>
<td></td>
<td>PMSE</td>
<td>WP LAB</td>
<td></td>
<td colspan="3" align="center">WP LAB</td>
</tr>
<tr>
<th>Tuesday</th>
<td>PMSE</td>
<td>MP</td>
<td></td>
<td>WP</td>
<td>CC</td>
<td></td>
<td colspan="3" align="center">MP LAB</td>
</tr>
Dept. of Computer Engg. 6 SCMS College of Polytechnics
WEB PROGRAMMING LAB (5139)

<tr>
<th>Wednesday</th>
<td>WP</td>
<td>PMSE</td>
<td></td>
<td>MP</td>
<td>MP LAB</td>
<td></td>
<td colspan="3" align="center">P&S</td>
</tr>
<tr>
<th>Thursday</th>
<td>CC</td>
<td>WP</td>
<td colspan="2" align="center">CNE LAB</td>
<td></td>
<td></td>
<td colspan="3" align="center">CNE LAB</td>
</tr>
<tr>
<th>Friday</th>
<td>MP</td>
<td>CC</td>
<td></td>
<td>WP</td>
<td>PMSE</td>
<td></td>
<td colspan="3" align="center">P&S</td>
</tr>
</table>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 7 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:3 Date:

FORM

AIM: To make an application form using form tag.

<!DOCTYPE html>
<html>
<head>
<title>
FORM
</title>
</head>
<h1 align="center" >APPLICATION FORM</h1>
<body>
<form>NAME :<input type="text" name="name"/>
<br>
<br>
Address :
<br>
<br>
<textarea rows ="5" cols="50"name="description">
Enter address here....
</textarea>
<br>
<br>
Gender
<input type="radio" name="Gender" value="Male">Male
<input type="radio" name="Gender" value="Female">Female
<br>
<br>
District
<select value="dropdown">
<option value=""selected></option>
<option value="Ernakulam">Ernakulam</option>
<option value="Alappuzha"> Alappuzha</option>
<option value="Idukki"> Idukki</option>
<option value="Wayanad">Wayanad</option>
</select>
<br>
<br>
<input type="file" name="fileupload"accept="image/*"/>
<br>
Dept. of Computer Engg. 8 SCMS College of Polytechnics
WEB PROGRAMMING LAB (5139)

<br>
<input type="Submit" name="Submit"value="Submit"/>
<input type="Reset" name="Reset"value="Reset"/>
<input type="Button" name="OK"value="OK"/>

</form>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 9 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:4 Date:

CSS

AIM: To make the text stylish using CSS.

<!DOCTYPE html>
<html>
<head>
<style>
h1{color: aqua;}
p.a{color: #000ff0;}
p.b{color: #8f9;}
p.c{color: rgb(45, 147, 155);}
p.d{color: rgb(96%, 96%, 20%);}
</style>
</head>
<body>
<h1>SCMS</h1>
<p class="a">The year 1976 saw the birth of a luminous star of learning on the educational
horizon. The star was to later blaze a trail across the Indian skies guiding scores of students to scale the
heights of success in their careers, professions and enterprises. Today, the beacon stands firm on
massive pillars, having stamped indelible imprints on the glorious academic traditions of India.</p>
<p class="b">This is the story of PRATHAP FOUNDATION FOR EDUCATION AND
TRAINING, the brainchild of the great visionary Dr. G.P.C. Nayar, who wanted to redefine educational
standards in India by shaping it as a window to the emerging market-driven global economy. </p>
<p class="c">Prathap Foundation of Education and Training started its first academic institution,
the School of Communication and Management Studies (SCMS) in 1976, which in later years earned
fame and glory as a top business school.</p>
<p class="d">It was rechristened as SCMS COCHIN SCHOOL OF BUSINESS in the year 2013.
The Foundation went on establishing institutions to offer professional education in engineering,
technology, management, hospitality, animation, biotech research, socio-economic research and other
professional areas with the core concept of quality and excellence in anything it does. Together, these
institutions constitute SCMS GROUP OF EDUCATIONAL INSTITUTIONS</p>
</body>
</html>

Dept. of Computer Engg. 10 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

OUTPUT

Dept. of Computer Engg. 11 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:5 Date:

CALCULATOR USING JAVA SCRIPT

AIM: To create a simple calculator using javascript.

<!doctype html>
<html>
<body>
Enter the First number : <input type="text" id="first"><br><br>
Enter the Second number : <input type="text" id="second"><br><br>
<button onclick="add()">Add</button><br><br>
<button onclick="mul()">Mul</button><br><br>
<button onclick="div()">Div</button><br><br>
<button onclick="sub()">Sub</button><br><br>
The result is :<input type="text" id="answer">
<script>
function add(){
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c=a+b;
document.getElementById("answer").value=c;
}
function sub(){
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c=a-b;
document.getElementById("answer").value=c;
}
function mul(){
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c=a*b;
document.getElementById("answer").value=c;
}
function div(){
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c=a/b;
Dept. of Computer Engg. 12 SCMS College of Polytechnics
WEB PROGRAMMING LAB (5139)

document.getElementById("answer").value=c;
}
</script>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 13 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:6 Date:

USERNAME AND PASSWORD VALIDATION USING JAVA SCRIPT

AIM: To validate username and password using javascript.

<!doctype.html>
<html>
<script>
function validation()
{
var name=document.myform.name.value;
var password=document.myform.password.value;
if(name==""||name==null)
{
alert("Name can't be blank");
document.myform.name.focus();
return false;
}
if(password.length<6)
{
alert("password must be 6 character");
document.myform.name.focus();
return false;
}
else
alert("succefully logged");
}
</script>
<body>
<form name="myform" onsubmit="validation()">
Name: <input type="text" name="name"/>
Password: <input type="password" name="password"/>
<input type="submit" name="register" value="register"/>
</form>
</body>
</html>

Dept. of Computer Engg. 14 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

OUTPUT

Dept. of Computer Engg. 15 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:7 Date:

PHONE NUMBER VALIDATION USING JAVA SCRIPT

AIM: To validate a phone number using javascript.

<!doctype.html>
<html>
<head>
<script>
function Validation(){
var a = document.form.phone.value;
if(a=="")
{
alert("please Enter the Contact Number");
document.form.phone.focus();
return false;
}
if(isNaN(a))
{
alert("Enter the valid Mobile Number(Like : 9566137117)");
document.form.phone.focus();
return false;
}
if(a.length==10)
{
alert("YOU HAVE ENTERED A VALID PHONE NUMBER")
}
else
alert("ENTER A VALID PHONE NUMBER");
}
</script>
</head>
<body>
<form name="form" method="post" onsubmit="return Validation()">
<tr>
<td>Mobile No:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
Dept. of Computer Engg. 16 SCMS College of Polytechnics
WEB PROGRAMMING LAB (5139)

</form>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 17 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:8 Date:

SIMPLE INTEREST USING PHP

AIM: To calculate simple interest using php.

<!doctype.html>
<html>
<body>
<form action="" method="post">
<center>
<table border=0>
<tr>
<td>
Principle Amount
</td>
<td>
<input type=text name="t1">
</td>
</tr>
<tr>
<td>
no. of Years
</td>
<td>
<input type=text name="t2">
</td>
</tr>
<tr>
<td>
Rate
</td>
<td>
<input type=text name="t3">
</td>
</tr>
</table>
<br>
<br>
<input type=submit name="s" value="Result">
</center>
<?php
if(isset($_POST['s']))////checking whether the input element is set or not
Dept. of Computer Engg. 18 SCMS College of Polytechnics
WEB PROGRAMMING LAB (5139)

{
$a=$_POST['t1']; //accessing value from 1st text box
$a1=$_POST['t2']; //accessing value from 2nd text field
$a2=$_POST['t3']; //accessing value from 3rd text field
$p=($a*$a2*$a1)/100;
echo "<font size=4><center>Simple Interest is:-".$p."</center>";
}
?>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 19 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:9 Date:

CALCULATION OF ELECTRICITY BILL USING PHP

AIM: To create a webpage to calculate the electricity bill.

<!DOCTYPE html>
<head>
<title>Calculate Electricity Bill</title>
</head>
<?php
if (isset($_POST['unit-submit']))
{
$units = $_POST['units'];
if (!empty($units)) {
$result = calculate_bill($units);
$result_str = 'Total amount of ' . $units . ' - ' . $result;
}
}
function calculate_bill($units) {

if($units <= 100) {


$bill = $units * 4;
}
else if($units > 100 && $units <= 200) {
$temp = 100 * 4;
$remaining_units = $units - 100;
$bill = $temp + ($remaining_units * 5);
}
else {
$temp = (100 * 4) + (100 * 5) ;
$remaining_units = $units - 200;
$bill = $temp + $remaining_units*6 ;
}
return ($bill);
}
?>
<body>
<h1>Php - Calculate Electricity Bill</h1>
<form action="" method="post" id="quiz-form">
<input type="number" name="units" id="units" placeholder="Please enter no. of
Units" />
<input type="submit" name="unit-submit" id="unit-submit" value="Submit" />
Dept. of Computer Engg. 20 SCMS College of Polytechnics
WEB PROGRAMMING LAB (5139)

</form>
<?php echo '<br />' . $result_str; ?>
</div>
</div>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 21 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:10 Date:

COOKIE CREATION

AIM: To create a cookie.

<!doctype html>
<?php
$cookie_name="user";
$cookie_value="John Doe";
setcookie($cookie_name, $cookie_value, time() +(86400*30),"/");//86400=1day
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])){
echo "Cookie named'".$cookie_name."'is not set!";
}else{
echo "cookie'".$cookie_name."'is set!<br>";
echo "value is:".$_COOKIE[$cookie_name];
}
?>
<p><strong>Note:</strong>You might have to reload the page to see the value of the cookie.</p>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 22 SCMS College of Polytechnics


WEB PROGRAMMING LAB (5139)

Experiment No:11 Date:

DATABASE CONNECTION USING PHP

AIM: Connecting a form in HTML with database.

<?php
$servername="localhost";
$username="root";
$password="";
$db="college";
$conn=mysqli_connect($servername,$username,$password,$db);
$txtid=$_POST['eid'];
$txtname=$_POST['ename'];
$txtsalary=$_POST['salary'];
$sql="INSERT INTO emp values('$txtid','$txtname','$txtsalary')";
mysqli_query($conn,$sql);
$sql="select * from emp";
$result=mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<body>
<center>
<h1>FORM</h1>
<table border=1 align center>
<form name="formcontext" method="post">
Enter ID
<input type="text" name="eid">
<p>Enter Name
<input type="text" name="ename"></p>
<p>Enter Salary
<input type="text" name="salary"></p>
<p>
<input type="submit" name="submit" id="submit" value="submit"></p>
<tr>
<td>ID</td>
<td>Name</td>
<td>Salary</td>
</tr>
<?php
while($row=mysqli_fetch_assoc($result))
{
Dept. of Computer Engg. 23 SCMS College of Polytechnics
WEB PROGRAMMING LAB (5139)

?>
<tr>
<td><?php echo $row['eid']?></td>
<td><?php echo $row['ename']?></td>
<td><?php echo $row['salary']?></td>
</tr>
<?php
}?>
</table>
</form>
</body>
</html>

OUTPUT

Dept. of Computer Engg. 24 SCMS College of Polytechnics

You might also like