Scribd
Upload
23 views23 pages

Cycle 4 and 5 Web

Uploaded by

jobintemail
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
23 views23 pages

Cycle 4 and 5 Web

Uploaded by

jobintemail
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/ 23

OUTPUT

Single-click: red color

Double-click: green color


Lab Cycle: 3 Date: 20/11/2023
Experiment No: 11

MOUSE CLICK EVENTS

AIM:
Develop a web application using JavaScript to change the background color of the
webpage when the following events of the button "change background color" occur.
a. Double click-background color changed to green.
b. Single click-background color changed to red

SOURCE CODE:

<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h1>Change Background Color</h1>
<button id="bgcolor">change color</button>
<script>
document.getElementById('bgcolor').addEventListener('dblclick',function()
{
document.body.style.backgroundColor="green";
});

document.getElementById('bgcolor').addEventListener('click',function()
{
document.body.style.backgroundColor="red";
});
</script>
</body>
</html>

RESULT:
The program has been executed successfully and output verified.

40
OUTPUT
Lab Cycle: 3 Date: 20/11/2023
Experiment No: 12

TURN ON/OFF BULB USING JAVASCRIPT


AIM:
Create a web application using JavaScript to turn on/off the given light bulb when the On and
Off buttons respectively are clicked. Hint: change the 'src' attribute of the image tag when
clicking buttons.

SOURCE CODE:
<html>
<head>
<title>bulb</title>
</head>
<body>
<h1>BULB</h1>
<button id="onbtn">ON</button>
<button id="offbtn">OFF</button>
<img id="light" src="bulboff.JPEG";alt="light off">
<script>
document.getElementById('onbtn').addEventListener('click',function(){
document.getElementById('light').src="lighton.JPEG";
});
document.getElementById('offbtn').addEventListener('click',function(){
document.getElementById('light').src="bulboff.JPEG";
});
</script>
</body>
</html>

RESULT:
The program has been executed successfully and output verified.

41
Lab Cycle: 3 Date: 27/11/2023

Experiment No: 13

FORM VALIDATION USING JAVASCRIPT

AIM:
Create a form that has Name, Mobile and email inputs. A submit button should validate

these three fields properly.

SOURCE CODE:

<html>

<head>

<title>FormValidation</title>

<script>

function validate(){

var name= document.forms ["frm"] ["name"].value;

var mobile= document.forms ["frm"] ["mobile"].value;

var email=document.forms["frm"] ["mail"].value;

var numformat= /^\d{10}$/;

var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if(name==null||name==""){

alert ("Name cannot be empty");

return false;

42
if (isNaN(mobile)) {

alert(" Number should be numeric");

return false;

if (mobile=="") {

alert("Mobile no. cannot be empty");

return false;

else if(!(mobile.match(numformat))){

alert("Mobile no.should contain 10 digits");

return false;

if (email==""){

alert("Email cant be empty");

return false;

else if (!(email.match(mailformat))) {

alert ("Invalid email format")

return false;

else

alert("Successfully submitted");

</script>

</head>

43
OUTPUT
<body align="center">

<b> Form Validation </b> <br><br>

<form name="frm" onsubmit="return validate()">

Name: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

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

Mobile No: &nbsp; &nbsp; &nbsp;

<input type = "text" name="mobile"> <br>

Email: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

<input type="text" name="mail"><br>

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

</form>

</body>

</html>

RESULT:
The program has been executed successfully and output verified.

44
OUTPUT
Lab Cycle: 4 Date:07/12/2023
Experiment No: 15

FACTORIAL USING POST METHOD


AIM:
Write a PHP program to print the factorial of a number
[Hint :Use for loop, number should be read using textbox, use POST Method]

SOURCE CODE:
<html>
<body>
<form method="post">
Enter a number :
<input type="text" name="number">
<input type="submit" name="submit">
</form>
</body>
</html>
<?php
if($_POST){
$number=$_POST['number'];
$n=$number;
$f=1;
for($i=1; $i<=$n;$i++) {
$f=$f*$i;
}
echo "factorial of $n is $f";
}
?>

RESULT:
The program has been executed successfully and output verified .

46
Lab Cycle : 4 Date: 11/12/2023
Experiment No : 16 =

DETAILS OF STUDENT
USING REQUEST
AIM :

Develop a PHP web application for reading details of a student such as Name, Email Id,
Address, Gender, Date of Birth etc., and display details when submit button is pressed.
[Use $_REQUEST variable: The $_REQUEST variable is a super global variable, which
can hold the content of both $_GET and $_POST variable.]

SOURCE CODE :

<html>
<head>
<title>Student Details </title>
</head>
<body align="center">
<h2>Details of Student</h2>
<form method="REQUEST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Name: <input type="text" name="name"><br><br>
Email id: <input type="email" name="mail"><br><br>
Address: <textarea rows="4" name="adrs"></textarea><br><br>
Gender: M <input type="radio" value="M" name="gender"> F <input type="radio"
value="F" name="gender"><br><br>
DOB: <input type="date" name="dob"><br><br>
<input type="submit" value="Submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "GET") {
if(isset($_REQUEST["name"],$_REQUEST["mail"], $_REQUEST["adrs"],
$_REQUEST["gender"], $_REQUEST["dob"])) {
$name = $_REQUEST["name"];
$mail = $_REQUEST["mail"];
$adrs = $_REQUEST["adrs"];
$gen = $_REQUEST["gender"]; $dob = $_REQUEST["dob"]; echo
"<br><br>DETAILS:- <br><br>"; echo "Name: $name <br> Email ID: $mail <br>
Address: $adrs <br> Gender: $gen <br> D.O.B: $dob" ;
}

47
OUTPUT

on submit :-
else {
echo "<p>Please enter values..</p>";
}
}
?>
</body>
</html>

RESULT:
The program has been executed successfully and output is verified.

48
Lab Cycle : 4 Date: 14 /12/2023
Experiment No : 17 =

BOOK DETAILS FROM


THE DATABASE
AIM :
Using PHP and MySQL, develop a program to accept book information such as
book_no (primary key) , title, edition and publisher from a web page and store the
information in a table named ‘book_details’. Also display the details of all books
using a HTML Table.

SOURCE CODE :

main.php

<?php
include("connect.php");
?>
<html>
<head>
<title>Book Details</title>
</head>
<body>
<center>
<h2>Book Details</h2>
<form action="display.php" method="POST">
Book Number: <input type="text" name="bookno"><br><br>
Book Title: <input type="text" name="booktitle"><br><br>
Book Edition: <input type="number" name="booked"><br><br>
Book Publisher: <input type="text" name="bookpub" value=""><br><br>
<input type="submit" name="submit" value="Submit">
</form>
</center>
</body>
</html>

display.php

<?php
include("connect.php");
if($_POST){
$bookno= $_POST['bookno']; //form name atrribute

49
OUTPUT

main.php

on submit :-
$booktitle= $_POST['booktitle'];
$bookedition= $_POST['booked'];
$bookpub= $_POST['bookpub'];
$sql= mysqli_query($conn, "INSERT INTO book_details VALUES('$bookno', '$booktitle',
'$bookedition', '$bookpub')");
$query=mysqli_query($conn, "SELECT * FROM book_details"); }
?>
<html>
<head>
<title>Display Book Details</title>
</head>
<body>
<h2 align="center">Book Details</h2><br>
<table align="center" border="1px solid black">
<tr>
<th>Book Number</th>
<th>Title</th>
<th>Edition</th>
<th>Publisher</th>
</tr>
<tr>
<?php
while($row= mysqli_fetch_assoc($query)){
echo "<tr>";
echo "<td>". $row['id'] ."</td>"; //table coloum
name echo "<td>". $row['title'] ."</td>"; echo "<td>".
$row['edition'] ."</td>"; echo "<td>". $row['publisher'] ."</td>";
echo "</tr>";
} ?>
</tr>
</table>
</body>
</html>

connect.php
<?php
$servername = "localhost";
$username= "root";
$password = "";
$dbname="mcadb"; //db name
$conn=new mysqli($servername, $username, $password,$dbname); if($conn->connect_error)
{
die("Connection failed:".$conn->connect_error); }
?>

RESULT:
The program has been executed successfully and output is verified.

50
Lab cycle:4 Date:19/12/2023
Experiment no: 18

LOGIN FORM
AIM:
Create a Login form using PHP. The user is first served a login page which
takes username and password. After submitting the details, the server checks
these values against the data from a database and takes the following decisions.

SOURCE CODE:
Main.php

<?php

include('connect.php');

session_start();

?>

//creation of form

<html>

<head>

<title>Login</title>

</head>

<body>

<center>

<h2>Login Page</h2>

<form action="check.php" method ="post">

Username: <input type="text" name="uname"><br><br>

Password: <input type="password" name="pword"><br><br>

<input type="submit" name="submit" value="Submit"><br>

51
</form>

</center>

</body>

</html>

//display error meassage

<?php

if($_GET){

$msg=$_GET['msg'];

echo "<center>";

echo "<br><br>".$msg."<br>";

echo "</center>";

?>

Connect.php

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "loginform";

$conn = new mysqli($servername,$username,$password,$dbname);

if($conn->connect_error){

die("Connection failed:" . $conn->connect_error);

?>

52
Welcome.php
<?php
session_star();
?>
<html>
<body>
<h1 align=”center”>welcome</h1>
<h1 align=”center”>
<?php
echo $_SESSION[‘login_user’];
?>
</h1>
</body>
</html>

Check.php

<?php

include('connect.php');

session_start();

if($_POST['submit']){

$uname = $_POST['uname'];

$pword = $_POST['pword'];

$sql = mysqli_query($conn, "SELECT * FROM userlogin WHERE username=


'$uname' OR password=

'$pword'");

while($row = mysqli_fetch_assoc($sql)){

$dbuname = $row['username'];

$dbpword = $row['password'];

}
53
OUTPUT
if(isset($dbuname) && isset($dbpword)){

if($dbuname == $uname && $dbpword ==$pword){

$_SESSION['login_user'] = $uname;
header("location:welcome.php");

else if($dbuname == $uname && $dbpword != $pword)

header("Location:main.php?msg=Wrong password");

else if($dbuname != $uname && $dbpword == $pword)

header("Location:main.php?msg=Wrong username");

else{

header("Location:main.php?msg=Wrong username and password");

?>

RESULT:

The program ran successfully and output is obtained.


54

You might also like