Scribd
Upload
5 views60 pages

Web Programming Manual

The Web Programming Lab Manual outlines the course outcomes and a series of experiments for S5 Computer Science and Design B.Tech students at Vimal Jyothi Engineering College. It includes objectives and sample programs for creating interactive web pages using HTML, CSS, JavaScript, PHP, and MySQL. The manual emphasizes client-side and server-side scripting, database connectivity, and the development of web applications using the Laravel framework.

Uploaded by

Stanly Kurian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views60 pages

Web Programming Manual

The Web Programming Lab Manual outlines the course outcomes and a series of experiments for S5 Computer Science and Design B.Tech students at Vimal Jyothi Engineering College. It includes objectives and sample programs for creating interactive web pages using HTML, CSS, JavaScript, PHP, and MySQL. The manual emphasizes client-side and server-side scripting, database connectivity, and the development of web applications using the Laravel framework.

Uploaded by

Stanly Kurian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

WEB PROGRAMMING LAB MANUAL

For S5 Computer Science and Design B.Tech Degree Courses


(As per the APJ Abdul Kalam Technological University Syllabus)

VIMAL JYOTHI ENGINEERING COLLEGE


JYOTHI NAGAR, CHEMPERI, KANNUR-670632
www.vjec.ac.in

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

PREPARED BY
NAMITHA P
COURSE OUTCOMES

CO1 Explore and develop interactive web pages using markup languages.

CO2 Implement client-side validation using scripting languages using Javascript and PHP.

CO3 Design and develop web pages and implement databases connectivity using PHP and MySQL.

CO4 Develop and execute Client-side & Server-side scripts using CSS, Javascript and PHP.

CO5 Develop Web Applications using Laravel framework.


INDEX

Sl. No
List of Experiments

1 Create a simple HTML file to demonstrate the use of different tags.

Create a HTML file to link to different HTML page which contains images, tables and
2
also link within a page.

Create a HTML page with different types of frames such as floating frame, navigation
3
frame & mixed frame.

Create a HTML file by applying the different styles using inline, external & internal
4
style sheets.

5 Create a registration form using HTML.

Create a HTML page to explain the use of various predefined functions in a string and
6
math object in java script.

7 Generate the calendar using JavaScript code by getting the year from the user.

8 Create a HTML registration form and to validate the form using JavaScript code.

Create a HTML page to change the background color for every click of a button using
9
JavaScript Event Handling.

Create a HTML page to display a new image and text when the mouse comes over the
10
existing content in the page using JavaScript Event Handling.
11 Create a HTML page to show online exam using JavaScript

12 Develop a registration form using PHP and do necessary validations.

13 Compose Electricity bill from user input based on a given tariff using PHP.

Build a PHP code to store name of students in an array and display it using print_r
14 function. Sort and Display the same using assort & arsort functions.

Build a PHP code to store name of Indian Cricket players in an array and display the
15 same in HTML table.

Develop a PHP program to connect to a database and retrieve data from a table and
16
show the details in a neat format.

17 Develop Web applications using HTML and PHP and deploy.

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
18
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.
Program #: 1
Date:

HTML TAGS
OBJECTIVE

Create a simple HTML file to demonstrate the use of different tags.

PROGRAM

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>HTML stands for Hyper Text Markup Language,It used to create static web pages.
<br/>
HTML supports different types of tags those are html,head,title,h1,h2 etc.</p>
<hr />
Heading tags are <br/>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3> This is heading 3</h3>
<h4> This is heading 4</h4>
<h5> This is heading 5</h5>
<h6> This is heading 6</h6>
<B>This text is Bold </B>
<I>This text is Italic</I>
<U>This text is Underline</U>
</body>
</html>

Computer Science and Design 1 Web Programming Lab Manual


OUTPUT

Computer Science and Design 2 Web Programming Lab Manual


Program #: 2
Date:

HYPERLINKS IN HTML

OBJECTIVE

Create a HTML file to link to different HTML page which contains images, tables and also
link within a page.

PROGRAM

mainpage.html

<html>
<head>
<title>Hyperlinks</title>
</head>
<body>
<center>
<h1>Link to different HTML pages</h1>
<h2><a href="image.html">IMAGE</a></h2><br>
<h2><a href="table.html">TABLE</a></h2><br>
</center>
<a href="#top">Goto top of the page</a>
</body>
</html>

image.html

<html>
<head>
<title>Image</title>
</head>
<body>
<imgsrc="photo.jpg" alt=”Image” width=’200’ height=’100’>
<h1><ahref="mainpage.html">Back</a></h1>
</body>
</html>

table.html

<html>
<head>
<title>Table</title>
</head>
<body>

Computer Science and Design 3 Web Programming Lab Manual


<h1>Indian Nobel Prize Winners</h1>
<table border="1">
<tr>
<th>Sl No</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Abhijit </td>
<td>Banerjee</td>
</tr>
<tr>
<td>2</td>
<td>Kailash </td>
<td>Satyarthi</td>
</tr>
<tr>
<td>3</td>
<td>Amartya</td>
<td>Sen</td>
</tr>
<tr>
<td>4</td>
<td>Mother </td>
<td>Teresa</td>
</tr>
<tr>
<td>5</td>
<td>Subrahmanyan</td>
<td>Chandrasekhar</td>
</tr>
</table>
<h1><a href="mainpage.html">Back</a></h1>
</body>
</html>

Computer Science and Design 4 Web Programming Lab Manual


OUTPUT

Computer Science and Design 5 Web Programming Lab Manual


Computer Science and Design 6 Web Programming Lab Manual
Program #: 3
Date:
FRAMESET
OBJECTIVE

Create a HTML page with different types of frames such as floating frame, navigation frame
& mixed frame.

PROGRAM

Mainpage.html

<html>
<body>
<a href="floatingframe.html">floating frame</a><br>
<a href="navigationframe.html">navigation frame</a><br>
<a href="mixedframe.html">mixed frame</a><br>
</body>
</html>

floatingframe.html

<html>
<body>
<iframe src="flower.gif" height="225" width="500">
</iframe>
<iframe src="MainPage.html" height="50%" width="50%">
</iframe>
</body>
</html>

navigationframe.html

<html>
<frameset cols="20%,35%,*" scrolling="no">
<frame name="one" src="Mainpage.html"></frame>
<frame name="flower" src="flower.gif"></frame>
<frame name="two" src="hulk.gif"></frame>
</frameset>
</html>

Mixedframe.html

<html>
<frameset cols="30%,*">
<frame src="table.html">
</frame>
<frameset rows="50%,*">
<frame src="hulk.gif"></frame>

Computer Science and Design 7 Web Programming Lab Manual


<frame src="mainpage.html" ></frame>
</frameset>
</frameset>
</html>

table.html

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>A simple HTML5 table</title>
</head>
<body>
<table border = "1">
<caption><strong>Table of Fruits (1st column) and Their Prices (2nd
column)</strong></caption>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Apple</td>
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</tbody>
</table>
</body>
</html>

Computer Science and Design 8 Web Programming Lab Manual


OUTPUT

Computer Science and Design 9 Web Programming Lab Manual


Computer Science and Design 10 Web Programming Lab Manual
Program #: 4
Date:

INLINE, EXTERNAL & INTERNAL STYLE SHEETS

OBJECTIVE

Create a HTML file by applying the different styles using inline, external & internal style
sheets.

PROGRAM

combinedStyles.html

<!DOCTYPE html>
<html>
<head>
<title>CSS Styles</title>
<link rel="stylesheet" href="style.css">
<style>
h1 {
color: blue;
}

p{
font-size: 18px;
background-color: yellow;
}
</style>
</head>
<body>
<h1 style="color: red;">This is a Heading with Inline Style</h1>
<p>This is a paragraph with Internal Style</p>
<h2>This is a Heading with External Style</h2>
<h3 class="externalclass">This is a Heading with External Style</p>
<h4>This is a paragraph with no specific style.</h4>
</body>
</html>

style.css
h2 {
font-weight: bold;
color: blue;
}
.externalclass {
font-weight: bold;
color: green;

Computer Science and Design 11 Web Programming Lab Manual


}

OUTPUT

Computer Science and Design 12 Web Programming Lab Manual


Program #: 5
Date:

REGISTRATION FORM USING HTML

OBJECTIVE

Create a registration form using HTML.

PROGRAM

<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<table cellspacing="5px">
<form action="#" method="post">
<tr>
<td>
<label for="first_name">First Name:</label>
</td>
<td>
<input type="text" id="first_name" name="first_name" required>
</td></tr>
<tr><td><label for="last_name">Last Name</label></td>
<td><input type="text" id="last_name" name="last_name" required></td></tr>
<tr><td><label for="email">Email</label></td>
<td><input type="email" id="email" name="email" required></td></tr>
<tr><td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required></td></tr>
<tr><td>
<label for="confirm_password">Confirm Password:</label></td><td>
<input type="password" id="confirm_password" name="confirm_password"
required></td></tr>
<tr><td>
<label for="gender">Gender:</label></td>
<td><input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label></td></tr>
<tr><td><label for="birthdate">Date of Birth:</label></td>
<td><input type="date" id="birthdate" name="birthdate" required></td></tr>
<tr><td><label for="country">Country:</label></td>
<td>

Computer Science and Design 13 Web Programming Lab Manual


<select id="country" name="country" required>
<option value="india">India</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select><br><br>
</td>
<tr>
<td></td><td>
<input type="submit" value="Register"></td></tr>
</form>
</table>
</body>
</html>

OUTPUT

Computer Science and Design 14 Web Programming Lab Manual


Program #: 6
Date:

PREDEFINED FUNCTIONS

OBJECTIVE

Create a HTML page to explain the use of various predefined functions in a string and math
object in java script.

PROGRAM

<!DOCTYPE html>
<html>
<head>
<title>JavaScript String and Math Object</title>
</head>
<script type="text/javascript">
document.write("<p>Math.round(4.5)="+Math.round(4.5)+"</p>");
document.write("<p>Math.floor(4.9)="+Math.floor(4.9)+"</p>");
document.write("<p>Math.pow(8,2)="+Math.pow(8,2)+"</p>");
document.write("<p>Math.sqrt(64)="+Math.sqrt(64)+"</p>");
document.write("<p>Math.abs(-4.7)="+Math.abs(-4.7)+"</p>");
document.write("<p>Math.random()="+Math.random()+"</p>");
document.write("<p>Math.sin(0)="+Math.sin(0)+"</p>");
document.write("<p>Math.min(0, 150, 30, 20, -8, -200)="+Math.min(0, 150, 30, 20, -8, -
200)+"</p>");
document.write("<p>Math.max(0, 150, 30, 20, -8, -200)="+Math.max(0, 150, 30, 20, -8, -
200)+"</p>");
var s = "ZEBRA";
var s2 = "AbCdEfG";
var result = "";
result ="<p>String Length of "+s+" is "+s.length+"</p>";
result +="<p>String concatenation of "+s+" and "+s2+":"+s.concat(s2)+"</p>";
result += "<p>Character at index 0 in '" + s + "' is " +
s.charAt( 0 ) + "</p>";
result += "<p>Character code at index 0 in '" + s + "' is " +
s.charCodeAt( 0 ) + "</p>";
result += "<p>'" + String.fromCharCode( 87, 79, 82, 68 ) +
"' contains character codes 87, 79, 82 and 68</p>";
result += "<p>'" + s2 + "' in lowercase is '" + s2.toLowerCase() + "'</p>";
result += "<p>'" + s2 + "' in uppercase is '" + s2.toUpperCase() + "'</p>";
document.writeln(result);
</script>
<body>
</body>
</html>

Computer Science and Design 15 Web Programming Lab Manual


OUTPUT

Computer Science and Design 16 Web Programming Lab Manual


Program #: 7
Date:

CALENDAR USING JAVASCRIPT

OBJECTIVE

Generate the calendar using JavaScript code by getting the year from the user.

PROGRAM

<!DOCTYPE html>
<html lang="en">
<head>
<title>Yearly Calendar Generator</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<h1>Yearly Calendar Generator</h1>
<p>Enter a year to generate the calendar:</p>
<input type="number" id="yearInput" placeholder="Enter a year">
<button onclick="generateCalendar()">Generate Calendar</button>
<div id="calendar"></div>
<script>
function generateCalendar() {
var yearInput = document.getElementById("yearInput").value;
var calendarDiv = document.getElementById("calendar");
if (isNaN(yearInput) || yearInput< 0 || yearInput> 9999) {
calendarDiv.innerHTML = "Please enter a valid year.";
return;
}
var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'];
var calendarHTML = '<h2>' + yearInput + ' Calendar</h2>';
for (var month = 0; month < 12; month++) {
calendarHTML += '<h3>' + months[month] + '</h3>';
calendarHTML += '<table>';
calendarHTML += '<tr>';
for (var day = 0; day < 7; day++) {

Computer Science and Design 17 Web Programming Lab Manual


calendarHTML += '<th>' + daysOfWeek[day] + '</th>';
}
calendarHTML += '</tr>';
var firstDay = new Date(yearInput, month, 1).getDay();
var daysInMonth = new Date(yearInput, month + 1, 0).getDate();
var dayCounter = 1;
var row = '<tr>';
for (var i = 0; i< 7; i++) {
if (i<firstDay) {
row += '<td></td>';
} else {
row += '<td>' + dayCounter + '</td>';
dayCounter++;
}
}
row += '</tr>';
calendarHTML += row;
while (dayCounter<= daysInMonth) {
row = '<tr>';
for (var i = 0; i< 7 &&dayCounter<= daysInMonth; i++) {
row += '<td>' + dayCounter + '</td>';
dayCounter++;
}
row += '</tr>';
calendarHTML += row;
}
calendarHTML += '</table>';
}
calendarDiv.innerHTML = calendarHTML;
}
</script>
</body>
</html>

Computer Science and Design 18 Web Programming Lab Manual


OUTPUT

Computer Science and Design 19 Web Programming Lab Manual


Program #: 8
Date:

FORM VALIDATION USING JAVASCRIPT

OBJECTIVE

Create a HTML registration form and to validate the form using JavaScript code.

PROGRAM

<html>
<head>
<script>
function functionvalid() {
var name = document.forms.RegForm.Name.value;
var email = document.forms.RegForm.EMail.value;
var phone = document.forms.RegForm.Telephone.value;
var what = document.forms.RegForm.Subject.value;
var password = document.forms.RegForm.Password.value;
var address = document.forms.RegForm.Address.value;
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
//Javascript reGex for Email Validation.
var regPhone=/^\d{10}$/;
// Javascript reGex for Phone Number validation.
var regName = /\d+$/g;
// Javascript reGex for Name validation
if (name == "" || regName.test(name)) {
window.alert("Please enter your name properly.");
name.focus();
return false;
}
if (address == "") {
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email == "" || !regEmail.test(email)) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (password == "") {
alert("Please enter your password");
password.focus();

Computer Science and Design 20 Web Programming Lab Manual


return false;
}
if(password.length <6){
alert("Password should be atleast 6 character long");
password.focus();
return false;

}
if (phone == "" || !regPhone.test(phone)) {
alert("Please enter valid phone number.");
phone.focus();
return false;
}
if (what.selectedIndex == -1) {
alert("Please enter your course.");
what.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" onsubmit="return functionvalid()" method="post">
<p>Name: <input type="text" size="65" name="Name" /></p>
<br />
<p>Address: <input type="text" size="65" name="Address" />
</p>
<br />
<p>E-mail Address: <input type="text" size="65" name="EMail" /></p>

Computer Science and Design 21 Web Programming Lab Manual


<br />
<p>Password: <input type="text" size="65" name="Password" /></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>
CH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
</select>
</p>
<br />
<br />
<p>Comments: <textarea cols="55" name="Comment"> < </textarea></p>
/textarea></p>
<p>
<input type="submit" value="send" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
</p>
</form>
</body>
</html>

OUTPUT

Computer Science and Design 22 Web Programming Lab Manual


Computer Science and Design 23 Web Programming Lab Manual
Program #: 9
Date:

JAVASCRIPT EVENT HANDLING


OBJECTIVE

Create a HTML page to change the background color for every click of a button using
JavaScript Event Handling.

PROGRAM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bg Color</title>
</head>
<script>
function changecolor()
{
var btn = document.getElementById('btn');
var rand1=Math.random() * 255;
var rand2=Math.random() * 255;
var rand3=Math.random() * 255;
document.body.style.backgroundColor = 'rgb('+rand1+','+rand2
'rgb('+rand1+','+rand2+','+rand3+')';
+','+rand3+')';
}
</script>
<body style="background-color:
color: yellow;">
<button id="btn" onclick="changecolor()" style="font
style="font-size:
size: 16px;border-radius:
16px;border
8px;border: none;padding: 12px;cursor: pointer;">Click me to change background
color</button>
</body>
</html>

OUTPUT

Computer Science and Design 24 Web Programming Lab Manual


Program #: 10
Date:

JAVASCRIPT EVENT HANDLING


OBJECTIVE

Create a HTML page to display a new image and text when the mouse comes over the
existing content in the page using JavaScript Event Handling.

PROGRAM

<!DOCTYPE html>
<html>
<head>
<title>Mouse Hover</title>
</head>
<body>
<div>
<h2>Hover over this content</h2>
<p>Mouse over this area to see a new image and text.</p>
<img id='menuImg' src="firstimage.jpg" onmouseover="hover();"
onmouseout="hover_img()"/>
</div>
<script>
function hover()
{
document.getElementById("menuImg").src = "img_flwr.png";
}
function hover_img()
{
document.getElementById("menuImg").src = "firstimage.jpg";
}
</script>
</body>
</html>

Computer Science and Design 25 Web Programming Lab Manual


OUTPUT

Computer Science and Design 26 Web Programming Lab Manual


Program #: 11
Date:

ONLINE EXAM USING JAVASCRIPT


OBJECTIVE
Create a HTML page to show online exam using JavaScript.

PROGRAM

<!DOCTYPE html>
<html>
<body>
<div class="panel">
<h1>Quiz Application Using JavaScript</h1>
<div class="question" id="ques"></div>
<div class="options" id="opt"></div>
<button onclick="checkAns()" id="btn">SUBMIT</button>
<div id="score"></div>
<script src="script.js"></script>
</div>
</body>
</html>

script.js

// Questions that will be asked


const Questions = [{
q: "What is capital of India?",
a: [{ text: "Gandhinagar", isCorrect: false },
{ text: "Surat", isCorrect: false },
{ text: "Delhi", isCorrect: true },
{ text: "Mumbai", isCorrect: false }
]},
{
q: "What is the capital of Thailand?",
a: [{ text: "Lampang", isCorrect: false, isSelected: false },
{ text: "Phuket", isCorrect: false },
{ text: "Ayutthaya", isCorrect: false },
{ text: "Bangkok", isCorrect: true }
]},
{
q: "What is the capital of Gujarat",
a: [{ text: "Surat", isCorrect: false },
{ text: "Vadodara", isCorrect: false },
{ text: "Gandhinagar", isCorrect: true },

Computer Science and Design 27 Web Programming Lab Manual


{ text: "Rajkot", isCorrect: false }]
}]
var currQuestion = 0
var score = 0
function checkAns() {
const selectedAns = parseInt(document.querySelector
('input[name="answer"]:checked').value);
if (Questions[currQuestion].a[selectedAns].isCorrect)
{
score++;
nextQuestion();
}
else
{
nextQuestion();
}
}
function nextQuestion() {
if (currQuestion < Questions.length - 1) {
currQuestion++;
loadQues();
} else {
document.getElementById("opt").remove()
document.getElementById("ques").remove()
document.getElementById("btn").remove()
loadScore();
}
}

function loadQues() {
const question = document.getElementById("ques");
const opt = document.getElementById("opt");
question.textContent = Questions[currQuestion].q;
opt.innerHTML = ""
for (var i = 0; i < Questions[currQuestion].a.length; i++)
{
const choicesdiv = document.createElement("div");
const choice = document.createElement("input");
const choiceLabel = document.createElement("label");
choice.type = "radio";
choice.name = "answer";
choice.value = i;
choiceLabel.textContent = Questions[currQuestion].a[i].text;
choicesdiv.appendChild(choice);
choicesdiv.appendChild(choiceLabel);

Computer Science and Design 28 Web Programming Lab Manual


opt.appendChild(choicesdiv);
}
}

loadQues();

function loadScore() {
const totalScore = document.getElementById("score")
totalScore.textContent = "You scored "+score+" out of "+
Questions.length;
}

OUTPUT

Computer Science and Design 29 Web Programming Lab Manual


Computer Science and Design 30 Web Programming Lab Manual
Program #: 12
Date:

REGISTRATION FORM USING PHP


OBJECTIVE
Develop a registration form using PHP and do necessary validations.

PROGRAM

<!DOCTYPE html>
<html>
<head>
<style>
.error {color: #FF0001;}
</style>
</head>
<body>
<?php
// define variables to empty values
$nameErr = $emailErr = $mobilenoErr = $genderErr = $websiteErr = $agreeErr = "";
$name = $email = $mobileno = $gender = $website = $agree = "";
//Input fields validation
if ($_SERVER["REQUEST_METHOD"] == "POST") {
//String Validation
if (emptyempty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = input_data($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$nameErr = "Only alphabets and white space are allowed";
}
}
//Email Validation
if (emptyempty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = input_data($_POST["email"]);
// check that the e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
//Number Validation
if (emptyempty($_POST["mobileno"])) {

Computer Science and Design 31 Web Programming Lab Manual


$mobilenoErr = "Mobile no is required";
} else {
$mobileno = input_data($_POST["mobileno"]);
// check if mobile no is well-formed
if (!preg_match ("/^[0-9]*$/", $mobileno) ) {
$mobilenoErr = "Only numeric value is allowed.";
}
//check mobile no length should not be less and greator than 10
if (strlen ($mobileno) != 10) {
$mobilenoErr = "Mobile no must contain 10 digits.";
}
}
//URL Validation
if (emptyempty($_POST["website"])) {
$website = "";
} else {
$website = input_data($_POST["website"]);
// check if URL address syntax is valid
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-
9+&@#\/%=~_|]/i",$website)) {
$websiteErr = "Invalid URL";
}
}
//Empty Field Validation
if (emptyempty ($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = input_data($_POST["gender"]);
}
//Checkbox Validation
if (!isset($_POST['agree'])){
$agreeErr = "Accept terms of services before submit.";
} else {
$agree = input_data($_POST["agree"]);
}
}
function input_data($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

<h2>Registration Form</h2>

Computer Science and Design 32 Web Programming Lab Manual


<span class = "error">* required field </span>
<br><br>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);
?>" >
Name:
<input type="text" name="name">
<span class="error">* <?php echo $nameErr; ?> </span>
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr; ?> </span>
<br><br>
Mobile No:
<input type="text" name="mobileno">
<span class="error">* <?php echo $mobilenoErr; ?> </span>
<br><br>
Website:
<input type="text" name="website">
<span class="error"><?php echo $websiteErr; ?> </span>
<br><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
<span class="error">* <?php echo $genderErr; ?> </span>
<br><br>
Agree to Terms of Service:
<input type="checkbox" name="agree">
<span class="error">* <?php echo $agreeErr; ?> </span>
<br><br>
<input type="submit" name="submit" value="Submit">
<br><br>
</form>
<?php
if(isset($_POST['submit'])) {
if($nameErr == "" && $emailErr == "" && $mobilenoErr == "" && $genderErr == ""
&& $websiteErr == "" && $agreeErr == "") {
echo "<h3 color = #FF0001> <b>You have sucessfully registered.</b> </h3>";
echo "<h2>Your Input:</h2>";
echo "Name: " .$name;
echo "<br>";
echo "Email: " .$email;
echo "<br>";
echo "Mobile No: " .$mobileno;
echo "<br>";

Computer Science and Design 33 Web Programming Lab Manual


echo "Website: " .$website;
echo "<br>";
echo "Gender: " .$gender;
} else {
echo "<h3> <b>You didn't filled up the form correctly.</b> </h3>";
}
}
?>
</body>
</html>

OUTPUT

Computer Science and Design 34 Web Programming Lab Manual


Program #: 13
Date:

ELECTRICITY BILL
OBJECTIVE
Compose Electricity bill from user input based on a given tariff using PHP.
PROGRAM

<!DOCTYPE html>
<head>
<title>PHP - Calculate Electricity Bill</title>
</head>
<?php
$result_str = '';
$result = '';
if (isset($_POST['unit-submit'])) {
$units = $_POST['units'];
if (!empty($units)) {
$result = calculate_bill($units);
$result_str = 'Total amount of ' . $units . ' - ' . $result;
}
}
/**
* To calculate electricity bill as per unit cost
*/
function calculate_bill($units) {
$unit_cost_first = 3.15;
$unit_cost_second = 3.95;
$unit_cost_third = 5.00;
$unit_cost_fourth = 6.80;
if($units <= 50) {
$bill = $units * $unit_cost_first;
}
else if($units > 50 && $units <= 100) {
$temp = 50 * $unit_cost_first;
$remaining_units = $units - 50;
$bill = $temp + ($remaining_units * $unit_cost_second);
}
else if($units > 100 && $units <= 200) {
$temp = (50 * 3.15) + (100 * $unit_cost_second);
$remaining_units = $units - 150;
$bill = $temp + ($remaining_units * $unit_cost_third);
}
else {
$temp = (50 * 3.15) + (100 * $unit_cost_second) + (100 * $unit_cost_third);

Computer Science and Design 35 Web Programming Lab Manual


$remaining_units = $units - 250;
$bill = $temp + ($remaining_units * $unit_cost_fourth);
}
return (float)$bill;
}
?>
<body>
<div>
<h1>Php - Calculate Electricity Bill</h1>
<form action="" method="post" id="quiz
id="quiz-form">
<input type="number" name="units" id="units" placeholder="Please enter no. of Units" />
<input type="submit" name="unit
name="unit-submit" id="unit-submit"
submit" value="Submit" />
</form>
<div>
<?php echo '<br />' . $result_str; ?>
</div>
</div>
</body>
</html>

OUTPUT

Computer Science and Design 36 Web Programming Lab Manual


Program #: 14
Date:

ASSORT & ARSORT FUNCTIONS


OBJECTIVE

Build a PHP code to store name of students in an array and display it using print_r function.
Sort and Display the same using assort & arsort functions.

PROGRAM

<?php
// Create an array to store the names of students
$students = array("John", "Mary", "David", "Sarah", "Michael");
echo "Display the array using print_r<br>";
print_r($students);
echo "<br>Display the array using asort : asort is a PHP function used to sort an associative
array in ascending order based on the values. <br>";
//create associative array here....
asort($students);
foreach($students as $x => $x_value) {
echo "Key=" . $x . ", Value=" . $x_value;
echo "<br>";
}
echo "<br>Display the array using arsort : arsort is used to sort an associative array in
descending order based on the values. <br>";
arsort($students);
foreach($students as $x => $x_value) {
echo "Key=" . $x . ", Value=" . $x_value;
echo "<br>";
}
?>

Computer Science and Design 37 Web Programming Lab Manual


OUTPUT

Computer Science and Design 38 Web Programming Lab Manual


Program #: 15
Date:

ARRAY
OBJECTIVE

Build a PHP code to store name of Indian Cricket players in an array and display the same in
HTML table.

PROGRAM

<?php
// Array of Indian cricket players
$indianPlayers = array(
"Virat Kohli",
"Rohit Sharma",
"MS Dhoni",
"Shikhar Dhawan",
"Ravindra Jadeja",
"Jasprit Bumrah",
"Cheteshwar Pujara",
"Ajinkya Rahane"
);
// HTML table header
echo "<table border='1'>";
echo "<tr><th>Player Name</th></tr>";
// Loop through the array and display each player name in a table row
foreach ($indianPlayers as $player) {
echo "<tr><td>$player</td></tr>";
}

// Close the HTML table


echo "</table>";
?>

Computer Science and Design 39 Web Programming Lab Manual


OUTPUT

Computer Science and Design 40 Web Programming Lab Manual


Program #: 16
Date:

PHP AND MYSQL


OBJECTIVE

Develop a PHP program to connect to a database and retrieve data from a table and show the
details in a neat format.

PROGRAM

<html>
<head>
<style>
h2{color :brown;
font: 50px Cambria;}
p{
font: 20px Lucida Sans;

}
#submit{
width:200px;
font-weight: 500;
border-radius: 5px;
margin :auto;
max-width: 500px;
}
div{
margin:auto;
max-width:500px;
border : 5px white solid;
border-width: 500px,500px;
background-color: rgb(208, 166, 166);
}
</style>
</head>
<body>
<div>
<h2>REGISTRATION FORM</h2>
<form name="forms" action="reg.php" method="post">
Username :
<input type="text" name="Name"><br><br>
Date of birth :
<input type="date" name= "dob"><br><br>

Computer Science and Design 41 Web Programming Lab Manual


Gender :
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">female<br><br>
Address :
<input type="text" maxlength="50" name="address"><br><br>
Phone No :
<input type="text" name="phno"><br><br><br>
<input type="submit" id="submit" value="register">
</form>
</div>
</body>
</html>

Reg.php

<html>
<head>
<style type="text/css">
table {
border : 5px solid black;
border-collapse: collapse;
}
table td {border :2px solid black;
width :100px;}
</style>
</head>
</html>
<?php
$mysqli =
mysqli_connect("localhost","root","","STUDENT")
;
if(mysqli_connect_errno())
{
printf("connection
failed",mysqli_connect_error());
exit();
}
else
{
$sql = "INSERT INTO
Registration_details(Name,DOB,Gender,Address,P
hone_no)

VALUES('".$_POST["Name"]."','".$_POST["dob"]."'
,'". $_POST["gender"]."','"

Computer Science and Design 42 Web Programming Lab Manual


.$_POST["address"]."','".$_POST["phno"]."')";

$res = mysqli_query($mysqli,$sql);
if($res===TRUE)
{
echo "\ntable created successfully\n";
$sql_new = "SELECT * FROM
Registration_details";
$res_new = mysqli_query($mysqli,$sql_new);
if($res_new)

{
$number_of_rows =
mysqli_num_rows($res_new);
if($number_of_rows>0)
{
echo "<table>";
while($row=mysqli_fetch_assoc($res_new))
{
echo "<tr><td>".$row["id"]."</td><td>
".$row["Name"]."</td><td> "
.$row["DOB"]."</td><td>
".$row["Gender"]."</td><td> ".$row["Address"].
"</td><td>
".$row["Phone_no"]."</td></tr>";
}
echo "</table>";
}
else
{
printf("Could not retrive
data",mysqli_error($mysqli));
}
}
}
mysqli_close($mysqli);
}
?>

Computer Science and Design 43 Web Programming Lab Manual


OUTPUT

Computer Science and Design 44 Web Programming Lab Manual


Program #: 17
Date:
HTML AND PHP
OBJECTIVE

Develop Web applications using HTML and PHP and deploy.

PROGRAM

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration</title>
<link rel="stylesheet" href="./styles.css"> </link>
</head>
<body>
<div class="container">
<h1> Registration </h1>
<div class="form">
<form action="action.php" method="post">
<label for="username">Username</label>
<input type="text" id="username" name="username"><br>
<label for="name">Student Name</label>
<input type="text" id="name" name="name"><br>
<label for="dob">Date of birth</label>
<input type="date" id="dob" name="dob"><br>
<label for="gender">Gender</label>
<input type="radio" id="gender" name="gender" value="male">
<label>Male</label>
<input type="radio" id="gender" name="gender" value="female">
<label>Female</label><br>
<label for="address">Address</label>
<input type="text" id="Address" name="address"><br>
<label for="phone">Phone number</label>
<input type="number" id="phone" name="phone"><br>
<label for="pass">Password</label>
<input type="password" id="pass" name="pass"><br>
<label for="pass">Confirm Password</label>
<input type="password" id="pass" name="cpass"><br>
<button type="submit" value="submit">submit</button>
</form>
</div>

Computer Science and Design 45 Web Programming Lab Manual


</div>
</body>
</html>

Login.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
</head>
<body>
<div class="form-container">
<h2>Login</h2>
<form action="logincheck.php" method="post">
<label for="username">Username</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password</label>
<input type="password" id="pass" name="pass"><br>
<button type="submit" value="submit">Login</button>
</form>
</div>
</body>
</html>

database.php

<?php
$server = "localhost";
$dbusername = "root";
$dbpassword = "";
$dbname = "StudentTable";
$conn = mysqli_connect($server,$dbusername,$dbpassword,$dbname);
?>
action.php
logincheck.php
<?php
$pass = $_POST['pass'];
$cpass = $_POST['cpass'];
if($pass != $cpass)
{
echo "<h1>Password does not match</h1>";
die();
}
$username = $_POST['username'];
$name = $_POST['name'];

Computer Science and Design 46 Web Programming Lab Manual


$dob = $_POST['dob'];
$address = $_POST['address'];
$gender = $_POST['gender'];
$phone = $_POST['phone'];
include"database.php";
$query="INSERT INTO
Registration(Username,Name,DOB,GENDER,ADDRESS,PHONE,Password)
VALUES ('$username','$name','$dob','$gender','$address','$phone','$pass');";
mysqli_query($conn,$query);
header('Location: login.html');
?>

logincheck.php

<?php
include 'database.php';
$username = $_POST['username'];
$pass = $_POST['pass'];
$query ="SELECT Username,Password FROM Registration WHERE username =
'$username'";
$result=mysqli_query($conn,$query);
$password_checker;
$username_checker;
if(mysqli_num_rows($result))
{

$row = mysqli_fetch_assoc($result);
$username_checker = $row['Username'];
$password_checker =$row["Password"];
if($pass == $password_checker)
{
echo "<h1>Logged in succesfully</h1>";
$query ="SELECT * FROM Registration WHERE username = '$username'";
$result=mysqli_query($conn,$query);
echo $row['Name'];
}
else
{
echo "<h1>Password Incorect</h1>";
}
}
else
{
echo "No records found";
die();
}
?>

Computer Science and Design 47 Web Programming Lab Manual


OUTPUT

Computer Science and Design 48 Web Programming Lab Manual


Program #: 18
Date:

BOOK MANAGEMENT

OBJECTIVE

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.

PROGRAM

<html>
<head>
<title>BOOK MANAGEMENT</title>
<style> .center
{ margin: auto;
width: 50%;
padding: 10px;
background-color: rgba(255, 255, 255, 0.20);
}
h1,p,a
{
color: aliceblue;
font-family:'Courier New', Courier, monospace
}
body
{
background-image: url('book.jpg');
}
</style>
</head>
<body>
<div class="center">
<h1>BOOK MANAGEMENT SYSTEM</h1>
<p>HOW CAN WE HELP YOU ?</p>
<a href="addBook.html">ADD A BOOK</a><br><br>
<a href="searchBook.html">SEARCH BOOKS</a>
</div>
</body>
</html>

Computer Science and Design 49 Web Programming Lab Manual


addBook.html <html>
<head>
<title>ADD A BOOK</title>
</head>
<style>
h1,p,a,td
{
font-family:'Courier New', Courier, monospace;
color: aliceblue;
}
input
{
font-family: 'Courier New', Courier, monospace;
color: black;
}
body
{
background-image: url('book.jpg');
}
.submitForm
{
margin: auto;
width: 50%;
padding: 10px;
background-color: rgba(255, 255, 255, 0.20);
}
</style>
<body>
<div class="submitForm">
<h1>ADD BOOK DETAILS HERE : </h1>
<form action="addBook_page.php" method="post">
<table>
<tr>
<td>ACCESSION NO : </td>
<td><input type="text" name="anum"></td>
</tr>
<tr></tr>
<tr>
<td>TITLE : </td>
<td><input type="text" name="title"></td>
</tr>
<tr></tr>
<tr>
<td>AUTHOR : </td>
<td><input type="text" name="author"></td>

Computer Science and Design 50 Web Programming Lab Manual


</tr>
<tr></tr>
<tr>
<td>EDITION : </td>
<td><input type="text" name="edition"></td>
</tr>
<tr></tr>
<tr>
<td>PUBLISHER : </td>
<td><input type="text" name="publisher"></td>
</tr>
<tr></tr>
<tr>
<td ><input type="submit" value="ADD BOOK" ></td>
<td ><input type="reset" value="clear form" ></td>
</tr>
</table>
</form>

</div>
</body>
</html>
searchBook.html
<html>
<head><title>SEARCH BOOKS</title></head>
<style>
h1
{
font-family: 'Courier New', Courier, monospace;
color: aliceblue;
}
input
{
font-family: 'Courier New', Courier, monospace;
color: black;
}
body
{
background-image: url('book.jpg');
}
.searchBook
{
margin: auto;
width: 50%;
padding: 10px;

Computer Science and Design 51 Web Programming Lab Manual


background-color: rgba(255, 255, 255, 0.20);
}
</style>
<body>
<div class="searchBook">
<h1>ENTER THE BOOK TO SEARCH</h1>
<form action="searchBook_page.php" method="POST">
<input type="text" name="bookName">
<input type="submit" value="search" style="color: black;">
</form>
</div>
</body>
</html>
addBook_page.php
<?php
$servername="localhost";
$username="root";
$pass_word="";

$dbname="bookList";
$accesion_no=$_POST["anum"];
$title=$_POST["title"];
$author=$_POST["author"];
$edition=$_POST["edition"];
$publisher=$_POST["publisher"];
$conn=mysqli_connect($servername,$username,$pass_word,$dbname);

if (!$conn)
{
die("connection has failed".mysqli_connect_errno());
}

$sql="INSERT INTO
book_list(ACCESSION_NO,TITLE,AUTHOR,EDITION,PUBLISHER)
VALUES('$accesion_no','$title','$author','$edition','$publisher')";

$result=mysqli_query($conn,$sql);

if ($result==true)
{
echo "<h1>BOOK HAS BEEN ADDED SUCCESFULLY</h1>";
}

echo "<br><br><a href='book.html'>GO BACK TO HOME PAGE</a>"


?>

Computer Science and Design 52 Web Programming Lab Manual


searchBook_page.php
<style>
table,tr,td,th
{
font-family: 'Courier New', Courier, monospace;
border: 1px solid black;
border-collapse :collapse;
}
h1,a
{
font-family: 'Courier New', Courier, monospace;
color:white;
}
body
{
background-image: url('book.jpg');
}
.bookInfo
{
margin: auto;
width: 50%;
padding: 10px;
background-color: rgba(255, 255, 255, 0.20);
}
table
{
background-color:white;
}
</style>
<?php
$servername="localhost";
$username="root";
$pass_word="";
$dbname="bookList";
$bookName=$_POST["bookName"];

$conn=mysqli_connect($servername,$username,$pass_word,$dbname);

if (!$conn)
{
die("connection has failed".mysqli_connect_errno());
}

$qry="SELECT * FROM book_list WHERE TITLE='$bookName' ";

Computer Science and Design 53 Web Programming Lab Manual


$result=mysqli_query($conn,$qry);
echo "<div class='bookInfo'>";
if($num=mysqli_num_rows($result)>0)
{
if ($num==1)
{
echo "<h1>One record of $bookName have been found</h1>";
}
else
{
echo "<h1>$num records of $bookName have been found</h1>";
}
echo "<table>";
echo
"<tr><th>ACCESSION_NO</th><th>TITLE</th><th>AUTHOR</th><th>EDITION</th><
th>PUBLISHER<
/th><tr>";
while($row=mysqli_fetch_assoc($result))
{
echo
"<tr><td>".$row["ACCESSION_NO"]."</td><td>".$row["TITLE"]."</td><td>".$row["AU
THOR"]."</td>
<td>".$row["EDITION"]."</td><td>".$row["PUBLISHER"]."</td>";
}
echo "</table>";
}
else
{
echo "<h1>NO BOOKS FOUND</h1>";
}
echo "<br><br><a href='book.html' >GO BACK TO HOME PAGE</a>"; echo
"</div>"
?>

Computer Science and Design 54 Web Programming Lab Manual


OUTPUT

Computer Science and Design 55 Web Programming Lab Manual


Computer Science and Design 56 Web Programming Lab Manual

You might also like