0% found this document useful (0 votes)

15 views

Code

File code

Uploaded by

studenttaskmate

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

15 views

Code

File code

Uploaded by

studenttaskmate

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 91

GU-2023-1247

PRACTICAL NO. -1

OBJECTIVE: Write a program to demonstrate Events in Javascript.

Description: In this program, Javascript events are demonstrated. The event handlers are
used to detect the events and perform specific tasks. The name of event handlers always
begins with on. An event can be assigned directly to the HTML element using the event
handler as an attribute.

1.1 Click Event: In this program, click event is used on a button, when the user clicks this
button then an alert box will pop up.

Source Code:

<html>

<head>

<title>

Click Event

</title>

function msg()

alert("This is the alert box");

</script>

</head>

<body>

<h2>Web Technology</h2>

<p>Myself, Jasmit Kaur Bassi from BCA-2(A)</p>

<form>

<input type="button" value="Click" onclick="msg()">

</form>

</body>

Web Technologies-II Lab 1

GU-2023-1247

</html>

Output:

Click Event:

Web Technologies-II Lab 2

GU-2023-1247

1.2 Mouseover Event: In this program, mouseover event is used on a paragraph, when the
user brings the mouse pointer over the paragraph then an alert box will pop up.

Source Code:

<html>

<head>

<title>

Mouseover Event

</title>

</head>

<body>

function mouseoverevent()

alert("This is a mouseover event");

</script>

<p onmouseover="mouseoverevent()">Bring the cursor here.</p>

</body>

</html>

Web Technologies-II Lab 3

GU-2023-1247

Output:

Mouseover Event:

Web Technologies-II Lab 4

GU-2023-1247

1.3 Focus Event: In this program, focus event is used on a textbox, when the user focuses on
this textbox that is clicks the textbox to enter something then the colour of the textbox will
change.

Source Code:

<html>

<head>

<title>

Focus Event

</title>

</head>

<body>

<h2>Enter something here</h2>

<input type="text" id="i1" onfocus="focusevent()">

function focusevent()

document.getElementById("i1").style.background="grey";

</script>

</body>

</html>

Web Technologies-II Lab 5

GU-2023-1247

Output:

Focus Event:

Web Technologies-II Lab 6

GU-2023-1247

1.4 Keydown Event: In this program, keydown event is used on a textbox, when the user
presses any key to enter something in this textbox then an alert box will pop up.

Source Code:

<html>

<head>

<title>

Keydown Event

</title>

</head>

<body>

<h2>Enter something here</h2>

<input type="text" id="i1" onkeydown="keydownevent()">

function keydownevent()

document.getElementById("i1");

alert("Pressed a key");

</script>

</body>

</html>

Web Technologies-II Lab 7

GU-2023-1247

Output:

Keydown Event:

Web Technologies-II Lab 8

GU-2023-1247

1.5 Load Event: In this program, load event is used with body element, when the user will
load this page then an alert box will pop up.

Source Code:

<html>

<head>

<title>

Load Event

</title>

</head>

<body onload="window.alert('Page successfully loaded');">

document.write("Page loaded successfully");

</script>

</body>

</html>

Output:

Web Technologies-II Lab 9

GU-2023-1247

PRACTICAL NO. -2

OBJECTIVE: Write a program to print a table of any number.

Description: In this program, we can print the table of any number entered by the user using
loop and the ‘*’ operator. The loop will operate till the desired number entered by the user,
up to which the table is to be printed. The number whose table is to be printed is then
multiplied with the numbers till that number.

Source Code:

<html>

<head>

<title>

Table

</title>

</head>

<body>

const number=prompt("Enter the number");

const n=prompt("Enter the number upto which you want the table");

document.write("The Table of" +" "+ number +":");

for(i=1;i<=n;i++)

document.write("<br>");

document.writeln(number +"" + i + "=" + (inumber));

</script>

</body>

</html>

Web Technologies-II Lab 10

GU-2023-1247

Output:

Table:

Web Technologies-II Lab 11

GU-2023-1247

PRACTICAL NO. -3

OBJECTIVE: Write a program to generate a random number using Javascript

method.

Description: In this program, Math.random() is used to generate any random decimal

number between 0(inclusive) and 1(exclusive). To get an integer within a specific range,
multiply the result by the range and use and then use Math.floor(). This technique is
commonly used for creating dynamic and unpredictable behaviours in web applications.

Source Code:

<html>

<head>

<title>

Random Number

</title>

</head>

<body>

<input type="button" value="Click to display any random number" onclick="random()">

function random()

const r=Math.random();

document.write("The random number between 0 and 1 is:" + " " + r);

</script>

</body>

</html>

Web Technologies-II Lab 12

GU-2023-1247

Output:

Web Technologies-II Lab 13

GU-2023-1247

PRACTICAL NO. -4

OBJECTIVE: Write a program to display today’s date and time using date() function.

Description: In this program, the Date object is used to get the current date and time. It
provides methods for retrieving and manipulating the components of date and time, such as
year, month, day, hours, minutes, seconds, and milliseconds. The Date() constructor creates a
new date object representing current date and time.

Source Code:

<html>

<head>

<title>

Date and Time

</title>

</head>

<body>

<h3>Date and Time</h3>

<input type="button" value="Current Date and Time" onclick="datentime()">

function datentime()

const d=new Date();

document.getElementById("dnt").innerHTML=d;

</script>

</body>

</html>

Web Technologies-II Lab 14

GU-2023-1247

Output:

Web Technologies-II Lab 15

GU-2023-1247

PRACTICAL NO. -5

OBJECTIVE: Write a program to demonstrate form validation using Javascript.

Description: In this program, the HTML form is validated using Javascript. It helps to ensure
that the data collected from the user is accurate and complete.

Source Code:

<html>

<head>

<title>

Form Validation

</title>

<style>

form

border:6px solid gray;

margin-left:470px;

margin-right:470px;

padding:10px;

color:grey;

text-align:center;

</style>

function val()

Web Technologies-II Lab 16

GU-2023-1247

var a=document.getElementById("name").value;

var b=document.getElementById("fname").value;

var c=document.getElementById("addrs").value;

var d=document.getElementById("eaddrs").value;

var e=document.getElementById("contact").value;

if(a==""||b==""||c==""||d==""||e=="")

alert("All feilds are mandatory");

return false;

else if(e.length<10||e.length>10)

alert("Phone number must contain 10 digits.");

return false;

else if(isNaN (e))

alert("Please enter valid digits.");

return false;

else

true;

</script>

</head>

Web Technologies-II Lab 17

GU-2023-1247

<body>

<h1>Student Registration Form</h1>

<form onsubmit="return val()">

Name:<br>

<input type="text" placeholder="Enter your name" id="name"><br><br>

Father's Name:<br>

<input type="text" id="fname"><br><br>

D.O.B:<br>

<input type="date" id="dob"><br><br>

Gender:<br>

<input type="radio" name="gender">Male<br>

<input type="radio" name="gender">Female<br>

<input type="radio" name="gender">Other<br><br>

Course:<br>

</select><br><br>

Address:<br>

<textarea placeholder="Enter your address" id="addrs" ></textarea><br><br>

Phone.No:<br>

<input type="text" id="contact"><br><br>

E-mail:<br>

Web Technologies-II Lab 18

GU-2023-1247

<input type="text" placeholder="Enter your E-mail" id="eaddrs"><br><br>

<button type="Submit">Submit</button>

</form>

</body>

</html>

Output:

Web Technologies-II Lab 19

GU-2023-1247

PRACTICAL NO. -6

OBJECTIVE: Write a program to demonstrate accessing of HTML elements.

Description: In this program, various methods to access/find the HTML elements are
demonstrated. If we want to access any element in HTML we start with accessing the
document object.

6.1 Accessing HTML Element by Id: In this program, the getElementById(element_id)

method is used to access the HTML elements by using the element id that is paragraph in this
case.

Source Code:

<html>

<head>

<title>

Accessing HTML elements

</title>

</head>

<body>

<h2>Accessing HTML Element by Id</h2>

function parah()

document.getElementById("paragraph").innerHTML="This paragraph demonstrates the

getElementById method";

</script>

<button onclick="parah()">Click to see the paragraph</button>

</body>

</html>

Web Technologies-II Lab 20

GU-2023-1247

Output:

Web Technologies-II Lab 21

GU-2023-1247

6.2 Accessing HTML Elements by Class name: In this program, the

getElementByClassName(class_name) method is used to access the HTML elements by using
the class name that is parah and heading in this case.

Source Code:

<html>

<head>

<title>

Accessing HTML elements

</title>

</head>

<body>

<h2>Accessing HTML Element by Class Name</h2>

<h2 class="heading">Heading 1</h2>

<p class="parah">This is paragraph 1</p>

<h2 class="heading">Heading 2</h2>

<p class="parah">This is paragraph 2</p>

<p class="parah">This is paragraph 3</p>

const h=document.getElementsByClass("heading");

const p=document.getElementsByClass("parah");

document.writeln(h[0]);

document.writeln(p[0]);

document.writeln(h[1]);

document.writeln(p[1]);

document.writeln(p[2]);

</script>

</body>

</html>

Web Technologies-II Lab 22

GU-2023-1247

Output:

Web Technologies-II Lab 23

GU-2023-1247

6.3 Accessing HTML Element by Tag name: In this program, the

getElementByTagName(tag_name) method is used to access the HTML elements by using
the tag name that is p and h2 in this case.

Source Code:

<html>

<head>

<title>

Accessing HTML elements

</title>

</head>

<body>

<h1>Accessing HTML Element by Tag Name</h1>

<h2>Heading 1</h2>

<p>This is paragraph 1</p>

<h2>Heading 2</h2>

<p>This is paragraph 2</p>

<p>This is paragraph 3</p>

function counth()

const h=document.getElementsByTagName("h2");

alert("Total number of heading tags are:"+ " "+h.length);

function countp()

const p=document.getElementsByTagName("p");

alert("Total number of paragraph tags are:"+ " "+p.length);

Web Technologies-II Lab 24

GU-2023-1247

</script>

<button onclick="counth()">Count the no. of headings</button>

<button onclick="countp()">Count the no. of paragraphs</button>

</body>

</html>

Output:

Web Technologies-II Lab 25

GU-2023-1247

6.4 Accessing HTML Element by Name: In this program, the getElementByName(name)

method is used to access the HTML elements by using the name that is parah and heading in
this case.

Source Code:

<html>

<head>

<title>

Accessing HTML elements

</title>

</head>

<body>

<h2>Accessing HTML Element by Name</h2>

<h2 name="heading">Heading 1</h2>

<p name="parah">This is paragraph 1</p>

<h2 name="heading">Heading 2</h2>

<p name="parah">This is paragraph 2</p>

<p name="parah">This is paragraph 3</p>

function counth()

const h=document.getElementsByName("heading");

alert("Total number of heading tags are:"+ " "+h.length);

function countp()

const p=document.getElementsByName("parah");

alert("Total number of paragraph tags are:"+ " "+p.length);

Web Technologies-II Lab 26

GU-2023-1247

document.writeln(h[0]);

document.writeln(p[0]);

document.writeln(h[1]);

document.writeln(p[1]);

document.writeln(p[2]);

</script>

<button onclick="counth()">Count the no. of headings</button>

<button onclick="countp()">Count the no. of paragraphs</button>

</body>

</html>

Output:

Web Technologies-II Lab 27

GU-2023-1247

6.5 Accessing HTML Element by CSS selector: In this program, the querySelector() and
querySelectorAll() method is used to access the HTML elements by using CSS selectors.

Source Code:

<html>

<head>

<title>

Accessing HTML elements

</title>

</head>

<body>

<h2>Accessing HTML Element by querySelector method.</h2>

<h2>Heading 1</h2>

<p class="parah">This is paragraph 1</p>

<h2>Heading 2</h2>

<p class="parah">This is paragraph 2</p>

<p class="parah">This is paragraph 3</p>

document.querySelector("h2").style.backgroundColor="yellow";

p=document.querySelectorAll(".parah");

for(i=0;i<p.length;i++)

p[i].style.backgroundColor="grey";

</script>

</body>

</html>

Web Technologies-II Lab 28

GU-2023-1247

Output:

Web Technologies-II Lab 29

GU-2023-1247

PRACTICAL NO. -7

OBJECTIVE: Write a program to change the value of an HTML attribute.

Description: In this program, the document.getElementById(id).attribute=new value is used

to change the value of the attribute that is src in this case.

Source Code:

<html>

<head>

<title>

Changing attribute value

</title>

</head>

<body>

<h2>Changing the value of an attribute.</h2>

<img src="on.jpg" id="img" style="width:100px; margin-bottom:20px">

</body>

</html>

Web Technologies-II Lab 30

GU-2023-1247

Output:

Web Technologies-II Lab 31

GU-2023-1247

PRACTICAL NO. -8

OBJECTIVE: Create a PHP webpage and print “hello world”.

Description: In this program, the echo and print are used to print Hello World in PHP. It also
shows the difference between echo and print that is echo can take multiple parameters while
print can take one argument only.

Source Code:

<html>

<body>

<?php

echo "<b>Hello World</b><br>";

echo "<i>Hello World</i><br>";

echo "Hello"."World<br>";

echo "Hello","World<br>";

print "<b>Hello World</b><br>";

print "<i>Hello World</i><br>";

print "Hello"."World<br>";

print "Hello";

print "World";

</body>

</html>

Web Technologies-II Lab 32

GU-2023-1247

Output:

Web Technologies-II Lab 33

GU-2023-1247

PRACTICAL NO. -9

OBJECTIVE: Write a PHP program to find maximum of three numbers.

Description: In this program, three textboxes are used to read the numbers and then the
maximum/largest of these three numbers will be executed on clicking the submit button.
Source Code:

<html>

<body>

<h2>Enter the values</h2>

<table>

<tr>

<td><input type="text" name="n1" placeholder="First Number"></td>

</tr>

<tr>

<td><input type="text" name="n2" placeholder="Second Number"></td>

</tr>

<tr>

<td><input type="text" name="n3" placeholder="Third Number"></td>

</tr>

<tr>

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

</tr>

</form>

<?php

if(isset($_POST['submit']))

$n1=$_POST['n1'];

$n2=$_POST['n2'];

Web Technologies-II Lab 34

GU-2023-1247

$n3=$_POST['n3'];

if($n1>=$n2&&$n3<=$n1)

echo "Maximum Number:".$n1;

else if($n2>=$n1&&$n3<=$n2)

echo "Maximum Number:".$n2;

else if($n3>=$n2&&$n1<=$n3)

echo "Maximum Number:".$n3;

return 0;

</body>

</html>

Web Technologies-II Lab 35

GU-2023-1247

Output:

Web Technologies-II Lab 36

GU-2023-1247

PRACTICAL NO. -10

OBJECTIVE: Write a program to swap two numbers.

Description: In this program, swapping of two numbers is performed which can be done in
two ways by using a third variable and without using a third variable.

10.1 Swapping using third variable: In this program, two numbers are swapped using a
third variable. Firstly one of the value is stored in a temporary variable, then the value of
second number is assigned to the first, and then value of first number stored in the temporary
variable is assigned to the second number.

Source Code:

<html>

<body>

Enter first number:<br>

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

Enter second number:<br>

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

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

</form>

<?php

if(isset($_POST['Swap']))

$n1=$_POST['num1'];

$n2=$_POST['num2'];

echo "Before Swapping:" ."<br>";

echo "First Number:" .$n1 ."<br>";

echo "Second Number:" .$n2 ."<br>";

$temp=$n1;

$n1=$n2;

Web Technologies-II Lab 37

GU-2023-1247

$n2=$temp;

echo "After Swapping:" ."<br>";

echo "First Number:" .$n1 ."<br>";

echo "Second Number:" .$n2 ."<br>";

</body>

</html>

Output:

Web Technologies-II Lab 38

GU-2023-1247

10.2 Swapping without using third variable: In this program, two numbers are swapped
without using a third variable with the help of addition and subtraction operators by adding
and subtracting the numbers.

Source Code:

<html>

<body>

Enter first number:<br>

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

Enter second number:<br>

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

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

</form>

<?php

if(isset($_POST['Swap']))

$n1=$_POST['num1'];

$n2=$_POST['num2'];

echo "Before Swapping:" ."<br>";

echo "First Number:" .$n1 ."<br>";

echo "Second Number:" .$n2 ."<br>";

$n1=$n1+$n2;

$n2=$n1-$n2;

$n1=$n1-$n2;

echo "After Swapping:" ."<br>";

echo "First Number:" .$n1 ."<br>";

echo "Second Number:" .$n2 ."<br>";

Web Technologies-II Lab 39

GU-2023-1247

</body>

</html>

Output:

Web Technologies-II Lab 40

GU-2023-1247

PRACTICAL NO. -11

OBJECTIVE: Write a program to do PHP Functions –Adding parameters.

Description: In this program PHP Functions are demonstrated which is a block of statement
that can be used repeatedly in a program. A function can have no or any number of
parameters which act as variables inside your function. A function will be executed by a call
to that function which can be done in two ways call by value and call by reference.

Call by value: In this method, the values of actual parameters are copied to the formal
parameters and any change made inside the function will not affect the original value of the
variable.

Call by reference: In this method, the address of actual parameters is passed to the function
as the formal parameters and any change made inside the function will affect the original
value of the variable.

Source Code:

<html>

<body>

<h1>PHP Function</h1>

<input type="submit" value="Call by Value" name="call">

<input type="submit" value="Call by Reference" name="call">

</form>

<?php

function callValue($num)

echo "Original Value:".$num ."<br>";

$num=$num+10;

return $num;

function callRef(&$num)

echo "Original Value:".$num ."<br>";

Web Technologies-II Lab 41

GU-2023-1247

$num=$num+10;

return $num;

if(isset($_POST['call']))

$v=$_POST['call'];

$comp=strcmp($v, "Call by Value");

if($comp==0)

$n=10;

callValue($n);

echo "Changed Value:".$n;

else

$n=10;

callRef($n);

echo "Changed Value:".$n;

return 0;

</body>

</html>

Web Technologies-II Lab 42

GU-2023-1247

Output:

Call by value:

Call by reference:

Web Technologies-II Lab 43

GU-2023-1247

PRACTICAL NO. -12

OBJECTIVE: Write a program to do Array Operation in PHP.

Description: In this program, various operations that can be performed on arrays are
demonstrated. An array is used to hold multiple values of similar type in a single variable.
The operations on arrays can be performed with the help of array functions which are used to
access and manipulate the elements of an array. Some of the array functions are:

 array(): creates an array.

 sort(): sorts an array in ascending order.
 array_unique(): removes duplicate values from an array.
 array_pop(): deletes last element from an array.
 array_reverse(): returns an array in reverse order.
 array_search(): searches an array for a given value and return the key.

Source Code:

<html>

<body>

<h1>Array Functions</h1>

<input type="radio" name="choice" value="display">Display Array<br>

<input type="radio" name="choice" value="sort">Sort Array<br>

<input type="radio" name="choice" value="duplicate">Remove duplicate values<br>

<input type="radio" name="choice" value="pop">Delete last element<br>

<input type="radio" name="choice" value="reverse">Reverse the Array<br>

<input type="radio" name="choice" value="search">Search the element<br>

</form>

<?php

if($_POST)

$array1= array("Jasmit Kaur","Rajdeep Kaur","Harsimran Kaur","Jitesh","Harmanpreet

Kaur","Kamaldeep","Jasmit Kaur","Gagandeep","Abhay","Abhinav","Jasleen Kaur");

Web Technologies-II Lab 44

GU-2023-1247

$val=$_POST['choice'];

switch($val)

case "display":

foreach($array1 as $value)

echo "<br>" .$value;

break;

case "sort":

sort($array1);

foreach($array1 as $value)

echo "<br>" .$value;

break;

case "duplicate":

$a=array_unique($array1);

foreach($a as $value)

echo "<br>" .$value;

break;

case "pop":

array_pop($array1);

foreach($array1 as $value)

Web Technologies-II Lab 45

GU-2023-1247

echo "<br>" .$value;

break;

case "reverse":

$a=array_reverse($array1);

foreach($a as $value)

echo "<br>" .$value;

break;

case "search":

echo "<br>" .array_search("Rajdeep Kaur",$array1,false);

break;

</body>

</html>

Output:

Web Technologies-II Lab 46

GU-2023-1247

Display array elements:

Sort:

Remove duplicate values:

Web Technologies-II Lab 47

GU-2023-1247

Delete last element:

Reverse the array:

Search the element:

Web Technologies-II Lab 48

GU-2023-1247

PRACTICAL NO. -13

OBJECTIVE: Write a program to do Multidimensional array in PHP.

Description: In this program, multidimensional array is demonstrated which is an array

containing one or more arrays. It can be regarded as array of arrays and is used to store the
data in tabular or matrix from i.e. in the form of rows and columns.

Source Code:

<html>

<body>

<h1>Multidimensional Array</h1>

<?php

$sdetails=array(array("S.No","Name","Course"), array(1,"Jasmit","BCA"),
array(2,"Rajdeep","BBA"),array(3,"Jasleen","B.Tech"), array(4,"Harsimran","B.Com"));

for($row=0;$row<4;$row++)

for($col=0;$col<3;$col++)

echo $sdetails[$row][$col];

echo "&nbsp" ."&nbsp";

echo "<br>";

</body>

</html>

Web Technologies-II Lab 49

GU-2023-1247

Output:

Web Technologies-II Lab 50

GU-2023-1247

PRACTICAL NO. -14

OBJECTIVE: Write a program demonstrate string functions in PHP.

Description: In this program, string functions are demonstrated. A string is a sequence of

characters and string functions are used to perform operations on strings. Some of the string
functions are:

 strlen(): Returns the length of the string.

 str_word_count(): count the number of words in a string.
 str_replace(): replaces some characters in a string.
 strrev(): reverses a string.
 strpos(): returns the position of the first occurrence of a string inside another string.
 strtolower(): converts the string to lowercase letters.
 strtoupper(): converts the string to uppercase letters.
 srtcmp(): compare two strings.
 str_split(): splits a string into an array.

Source Code:

<html>

<body>

<h1>String Functions</h1>

Enter a string:</label>

<input type="text" name="String" id="String">

Select a string function:

<select name="functionSelect" id="functionSelect">

<option value="length">Count length</option>

<option value="words">Count words</option>

<option value="replace">Replace Text</option>

<option value="reverse">Reverse String</option>

<option value="search">Search within String</option>

<option value="small">Lower Case String</option>

<option value="capital">Upper Case String</option>

Web Technologies-II Lab 51

GU-2023-1247

<option value="cmpare">Compare String</option>

<option value="join">Join String</option>

<option value="splt">Split String</option>

</select>

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

</form>

<?php

if ($_POST)

$a = $_POST["String"];

$b = $_POST["functionSelect"];

switch ($b)

case "length":

echo "Length of string is: " . strlen($a);

break;

case "words":

echo "Number of words in string is: " . str_word_count($a);

break;

case "replace":

echo "Replaced string: " . str_replace("Web", "PHP", $a);

break;

case "reverse":

echo "Reversed string: " . strrev($a);

break;

case "search":

Web Technologies-II Lab 52

GU-2023-1247

echo "Search result: " . strpos($a, "Technology");

break;

case "small":

echo "Lowercased String: " . strtolower($a);

break;

case "capital":

echo "Uppercased string: " . strtoupper($a);

break;

case "cmpare":

echo "Comparison result: " . strcmp($a, "Web Technology");

break;

case "join":

echo "Joined string: " . implode("+", explode(" ", $a));

break;

case "splt":

print_r(str_split($a, 3));

break;

default:

echo "Invalid choice";

</body>

</html>

Web Technologies-II Lab 53

GU-2023-1247

Output:

Count length:

Count the number of words:

Web Technologies-II Lab 54

GU-2023-1247

Replace text:

Reverse string:

Search:

Web Technologies-II Lab 55

GU-2023-1247

Convert to lowercase:

Convert to uppercase:

Join:

Web Technologies-II Lab 56

GU-2023-1247

Split string:

Web Technologies-II Lab 57

GU-2023-1247

PRACTICAL NO. -15

OBJECTIVE: Database connectivity in PHP with MySQL.

Description: In this program, the methods to establish connection with database using
MySQLi are demonstrated. There are two ways of connecting the data using this method that
are object oriented procedure and procedural procedure.

15.1 Object oriented approach: In this program, we create an instance of the mysqli class
and provide all the necessary details required to establish connection.

Source Code:

<?php

$servername="localhost";

$username="root";

$password="";

// Create connection

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

// Check connection

if($conn->connect_error)

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

echo "Connected Successfully";

// closing connection

$conn->close();

Web Technologies-II Lab 58

GU-2023-1247

Output:

Web Technologies-II Lab 59

GU-2023-1247

15.2 Procedural approach: In this approach, we create a function mysqli_connect() that

takes all the required information as arguments to establish the connection.

Source Code:

<?php

$servername="localhost";

$username="root";

$password="";

// Create connection

$conn=mysqli_connect($servername, $username, $password);

// Check connection

if(!$conn)

die("Connection Failed:" .mysqli_connect_error());

echo "Connected Successfully";

// closing connection

mysqli_close($conn);

Output:

Web Technologies-II Lab 60

GU-2023-1247

PRACTICAL NO. -16

OBJECTIVE: Write a PHP program that demonstrate managing MySQL database by

performing the following operations:

i. Create a database.

ii. Create a table.

iii. Inserting rows in table.

iv. Updating rows in table.

v. Deleting rows in table.

Description: In this program, the method to create a database and table using PHP are
demonstrated, along with some operations that can be performed on table stored in the
database.

16.1 Creating database: In this program, the method to create a database is demonstrated.
Firstly, we need to build a connection and then create the database using the query or through
user interface.

i. By using object oriented procedure of MySQLi approach:

Source Code:

<?php

$servername="localhost";

$username="root";

$password="";

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

if($conn->connect_error)

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

$sql="Create database DB";

if($conn->query($sql)===TRUE)

echo "Database created successfully"."<br>";

Web Technologies-II Lab 61

GU-2023-1247

echo "Database name DB";

else

echo "Error creating database".$conn->error;

$conn->close();

Output:

Web Technologies-II Lab 62

GU-2023-1247

ii. By using procedural procedure of MySQLi approach:

Source Code:

<?php

$servername="localhost";

$username="root";

$password="";

$conn=mysqli_connect($servername, $username, $password);

if(!$conn)

die("Connection Failed:" .mysqli_connect_error());

$sql="Create database db2";

if(mysqli_query($conn,$sql))

echo "Database created Successfully"."<br>";

echo "Database Name:db2";

else

echo "Error creating database".mysqli_error($conn);

mysqli_close($conn);

Web Technologies-II Lab 63

GU-2023-1247

Output:

Web Technologies-II Lab 64

GU-2023-1247

16.2 Creating table: : In this program, the methods to create a table using PHP in MySQL
database are demonstrated.

i. By using object oriented procedure of MySQLi approach:

Source Code:

<?php

$servername="localhost";

$username="root";

$password="";

$database="db";

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

if($conn->connect_error)

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

$sql="Create table student(stu_id int(2) PRIMARY KEY, firstname varchar(15) NOT NULL,
lastname varchar(12) NOT NULL, age int(2) NOT NULL, course varchar(10), semester
int(1) )";

if($conn->query($sql)===TRUE)

echo "Table created successfully"."<br>";

echo "Table name student";

else

echo "Error creating table".$conn->error;

$conn->close();

Web Technologies-II Lab 65

GU-2023-1247

Output:

Web Technologies-II Lab 66

GU-2023-1247

ii. By using procedural procedure of MySQLi approach:

Source Code:

<?php

$servername="localhost";

$username="root";

$password="";

$database="db2";

$conn=mysqli_connect($servername, $username, $password, $database);

if(!$conn)

die("Connection Failed:" .mysqli_connect_error());

$sql="Create table employee(emp_id int(2) PRIMARY KEY, firstname varchar(15) NOT

NULL, lastname varchar(12) NOT NULL, age int(2) NOT NULL, email varchar(25))";

if(mysqli_query($conn,$sql))

echo "Table created successfully"."<br>";

echo "Table name employee";

else

echo "Error creating table".$conn->error;

mysqli_close($conn);

Web Technologies-II Lab 67

GU-2023-1247

Output:

Web Technologies-II Lab 68

GU-2023-1247

16.3 Inserting rows in a table: In this program, the method to insert values into a table
created in the database is demonstrated.

Source Code:

<html>

<body>

<h2>Enter your details:</h2>

<input type="text" name="id" placeholder="Student Id"><br><br>

<input type="text" name="fname" placeholder="First Name"><br><br>

<input type="text" name="lname" placeholder="Last Name"><br><br>

<input type="text" name="age" placeholder="Age"><br><br>

<input type="text" name="course" placeholder="Course"><br><br>

<input type="text" name="semester" placeholder="Semester"><br><br>

<input type="submit" name="submit">

</form>

<?php

$servername="localhost";

$username="root";

$password="";

$database="db";

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

if ($conn->connect_error)

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

else

Web Technologies-II Lab 69

GU-2023-1247

if(isset($_POST['submit']))

$id = $_POST['id'];

$fname = $_POST['fname'];

$lname = $_POST['lname'];

$age = $_POST['age'];

$course = $_POST['course'];

$sem = $_POST['semester'];

$query="INSERT INTO student(stu_id, firstname, lastname, age, course, semester)

VALUES('$id', '$fname', '$lname', '$age', '$course', '$sem')";

$data=mysqli_query($conn,$query);

if($data)

alert("Data stored successfully");

</script>

<?php

else

alert("Please try again");

</script>

<?php

Web Technologies-II Lab 70

GU-2023-1247

$conn->close();

</body>

</html>

Output:

Web Technologies-II Lab 71

GU-2023-1247

Web Technologies-II Lab 72

GU-2023-1247

16.4 Updating rows in a table: In this program the method to update the data in a table
using query is demonstrated.

Source Code:

<html>

<body>

<h2>Enter your updated details:</h2>

<input type="text" name="id" placeholder="Student Id"><br><br>

<input type="text" name="fname" placeholder="First Name"><br><br>

<input type="text" name="lname" placeholder="Last Name"><br><br>

<input type="text" name="age" placeholder="Age"><br><br>

<input type="text" name="course" placeholder="Course"><br><br>

<input type="text" name="semester" placeholder="Semester"><br><br>

<input type="submit" name="submit">

</form>

<?php

$servername="localhost";

$username="root";

$password="";

$database="db";

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

if ($conn->connect_error)

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

else

Web Technologies-II Lab 73

GU-2023-1247

if(isset($_POST['submit']))

$id = $_POST['id'];

$fname = $_POST['fname'];

$lname = $_POST['lname'];

$age = $_POST['age'];

$course = $_POST['course'];

$sem = $_POST['semester'];

$query="UPDATE student SET firstname='$fname', lastname='$lname', age='$age',

course='$course', semester='$sem' WHERE stu_id='$id'";

$data=mysqli_query($conn,$query);

if($data)

<script> alert("Data updated!"); </script>

<?php

else

<script> alert("Please try again"); </script>

<?php

}}}

$conn->close();

</body>

</html>

Web Technologies-II Lab 74

GU-2023-1247

Output:

Previous data:

Web Technologies-II Lab 75

GU-2023-1247

Updated data:

Web Technologies-II Lab 76

GU-2023-1247

16.5 Deleting row in a table: In this program the method to delete a row in a table that is
data of any person is demonstrated.

Source Code:

<html>

<body>

<h3>Enter the student id of the student whose data you want to delete:</h3>

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

<input type="submit" name="submit">

</form>

<?php

$servername="localhost";

$username="root";

$password="";

$database="db";

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

if ($conn->connect_error)

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

else

if(isset($_POST['submit']))

$id = $_POST['id'];

$query="DELETE from student WHERE stu_id='$id'";

$data=mysqli_query($conn,$query);

Web Technologies-II Lab 77

GU-2023-1247

if($data)

alert("Data Deleted!");

</script>

<?php

else

alert("Please try again");

</script>

<?php

$conn->close();

</body>

</html>

Web Technologies-II Lab 78

GU-2023-1247

Output:

Previous data:

Web Technologies-II Lab 79

GU-2023-1247

Data after deletion:

Web Technologies-II Lab 80

GU-2023-1247

PRACTICAL NO. -17

OBJECTIVE: Create a form, add the data into it and submit it to the database by
connecting it to MySQL database using PHP and display all the submitted data on
another page.

Description: In this program, a form is created using HTML and the data to the form is
provided by the user which gets stored in the MySQL database when the user submits the
data. The stored data is then displayed on another page. Firstly the table and the connection is
created, then the form is created which will store all the information. Lastly, the web page
that will display the stored data is created.

Creating Table:

Source Code:

<?php

$servername="localhost";

$username="root";

$password="";

$database="db2";

$conn=mysqli_connect($servername, $username, $password, $database);

if(!$conn)

die("Connection Failed:" .mysqli_connect_error());

$sql="Create table studentdetails( firstname varchar(15) NOT NULL, lastname varchar(12)

NOT NULL, age int(2) NOT NULL, course varchar(10), semester int(1), contact
varchar(10))";

if(mysqli_query($conn,$sql))

echo "Table created successfully"."<br>";

echo "Table name studentdetails";

else

Web Technologies-II Lab 81

GU-2023-1247

echo "Error creating table".$conn->error;

mysqli_close($conn);

Output:

Web Technologies-II Lab 82

GU-2023-1247

Creating connection (connection.php):

Source Code:

<?php

$servername="localhost";

$username="root";

$password="";

$database="db2";

$conn=mysqli_connect($servername, $username, $password, $database);

if(!$conn)

die("Connection Failed:" .mysqli_connect_error());

Insertion of data:

Source Code:

<?php include 'connection.php';

<html>

<head>

<title>

Form

</title>

</head>

<body>

<form action="" method="post">

First Name:<br><input type="text" name="firstName"><br>

Last Name:<br><input type="text" name="lastName"><br>

Web Technologies-II Lab 83

GU-2023-1247

Age:<br><input type="text" name="age"><br>

Course:<br><input type="text" name="course"><br>

Semester:<br><input type="text" name="semester"><br>

Contact:<br><input type="text" name="contact"><br><br>

<input type="submit" name="save" value="Save">

</form>

<?php

if(isset($_POST['save']))

$fname=$_POST['firstName'];

$lname=$_POST['lastName'];

$age=$_POST['age'];

$course=$_POST['course'];

$semester=$_POST['semester'];

$contact=$_POST['contact'];

$query="insert into studentdetails(firstname, lastname, age, course, semester, contact)

values('$fname', '$lname', '$age', '$course', '$semester', '$contact')";

$data=mysqli_query($conn,$query);

if($data)

?> <script> alert("Data saved succesfully!"); </script> <?php

else

?><script>alert("Please try again!");</script><?php

Web Technologies-II Lab 84

GU-2023-1247

</body>

</html>

Output:

Web Technologies-II Lab 85

GU-2023-1247

Display the stored data (display.php):

Source Code:

<?php include 'connection.php';

<tr>

<th>First Name</th>

<th>Course</th>

<th>Semester</th>

<th>Contact</th>

</tr>

<?php

$query="select *from studentDetails";

$data=mysqli_query($conn, $query);

$result=mysqli_num_rows($data);

if($result)

while($row=mysqli_fetch_array($data))

<tr>

<td>

<?php

echo $row['firstname'];

Web Technologies-II Lab 86

GU-2023-1247

</td>

<td>

<?php

echo $row['lastname'];

</td>

<td>

<?php

echo $row['age'];

</td>

<td>

<?php

echo $row['course'];

</td>

<td>

<?php

echo $row['semester'];

</td>

<td>

<?php

echo $row['contact'];

</td>

</tr>

Web Technologies-II Lab 87

GU-2023-1247

<?php

else

<tr>

<td>No record Found</td>

</tr>

<?php

</table>

Output:

Web Technologies-II Lab 88

GU-2023-1247

PRACTICAL NO. -18

OBJECTIVE: Write a PHP code to upload image.

Description: In this program, the method to upload an image using PHP is demonstrated.
The uploaded image gets stored in the specified destination.

Source Code:

<?php include 'connection.php';

if(isset($_POST['ubtn']))

$Imagename=$_FILES['img_name']['name'];

$tmpname=$_FILES['img_name']['tmp_name'];

if(move_uploaded_file($tmpname,$Imagename))

alert("Image loaded succesfully");

</script>

<?php

else

alert("Plz try again");

</script>

<?php

Web Technologies-II Lab 89

GU-2023-1247

<html>

<body>

<form method="POST" enctype="multipart/form-data">

<input type="file" name="img_name">

<br>

<input type="submit" name="ubtn" value="upload">

</form>

</body>

</html>

Output:

Web Technologies-II Lab 90

GU-2023-1247

Web Technologies-II Lab 91

Level 3 Answers
No ratings yet
Level 3 Answers
4 pages
Salesforce-Deployment-Tools
No ratings yet
Salesforce-Deployment-Tools
8 pages
Web Programming Lab Programs Vi Bca Questions Answer Web Programming Lab Programs Vi Bca Questions Answer
No ratings yet
Web Programming Lab Programs Vi Bca Questions Answer Web Programming Lab Programs Vi Bca Questions Answer
20 pages
VI BCA-Web Programming - Lab Programs
80% (5)
VI BCA-Web Programming - Lab Programs
28 pages
Webnew Chetan
No ratings yet
Webnew Chetan
19 pages
Webtechnology Piyush
No ratings yet
Webtechnology Piyush
19 pages
Chetan Javascript
No ratings yet
Chetan Javascript
18 pages
java script lab manual edited (1)
No ratings yet
java script lab manual edited (1)
13 pages
CSS Summer 22
No ratings yet
CSS Summer 22
32 pages
IAL IT 9 WS JavaScript Functions
No ratings yet
IAL IT 9 WS JavaScript Functions
6 pages
Basics of JavaScript
No ratings yet
Basics of JavaScript
12 pages
2 Iaimp
No ratings yet
2 Iaimp
16 pages
javascript print
No ratings yet
javascript print
22 pages
Practical Sanket Css13
No ratings yet
Practical Sanket Css13
45 pages
javascript print1
No ratings yet
javascript print1
20 pages
21CS1202 WAD Question BANK For Students 2022
No ratings yet
21CS1202 WAD Question BANK For Students 2022
17 pages
Client Side Scripting Language (22519) Semester - V (CM) : A Laboratory Manual For
No ratings yet
Client Side Scripting Language (22519) Semester - V (CM) : A Laboratory Manual For
21 pages
Javascript Practical File Work
No ratings yet
Javascript Practical File Work
8 pages
awdt Aditya
No ratings yet
awdt Aditya
22 pages
CSS Codes
No ratings yet
CSS Codes
17 pages
Web App. Dev. Security - Lab Manual 3 - JavaScript
No ratings yet
Web App. Dev. Security - Lab Manual 3 - JavaScript
20 pages
CS101 Introduction To Computing: (Web Development Lecture 11)
No ratings yet
CS101 Introduction To Computing: (Web Development Lecture 11)
47 pages
WebLabProgs VIBCA
No ratings yet
WebLabProgs VIBCA
20 pages
Web Lab Programs
No ratings yet
Web Lab Programs
56 pages
Lab 9 - en
No ratings yet
Lab 9 - en
19 pages
Amruta CSS 1 to 16 Exp
No ratings yet
Amruta CSS 1 to 16 Exp
51 pages
Computer 8 Module 14
No ratings yet
Computer 8 Module 14
9 pages
Sukruthi WT Week5
No ratings yet
Sukruthi WT Week5
15 pages
Web Technology
No ratings yet
Web Technology
19 pages
0 - JSP - Web-Lab Manual
No ratings yet
0 - JSP - Web-Lab Manual
76 pages
Cs101 Lec35.pps
No ratings yet
Cs101 Lec35.pps
47 pages
Ss-Web Mannual
No ratings yet
Ss-Web Mannual
38 pages
Event Handling & Mathematical Methods: (Javascript)
No ratings yet
Event Handling & Mathematical Methods: (Javascript)
50 pages
WT Unit Iii
No ratings yet
WT Unit Iii
41 pages
Events: Onload and Onunload
No ratings yet
Events: Onload and Onunload
17 pages
Tutorial-3-Client-side-scripting Languages
No ratings yet
Tutorial-3-Client-side-scripting Languages
3 pages
Software Engineer
No ratings yet
Software Engineer
62 pages
Client Side Scripting Language (22519) : A Laboratory Manual For
No ratings yet
Client Side Scripting Language (22519) : A Laboratory Manual For
23 pages
WebDevelopAssign
No ratings yet
WebDevelopAssign
16 pages
JS Students'
No ratings yet
JS Students'
58 pages
JavaScript Events
No ratings yet
JavaScript Events
12 pages
Web 06CSL78 Lab Manual
No ratings yet
Web 06CSL78 Lab Manual
36 pages
L 7
No ratings yet
L 7
38 pages
Lab Script 2
No ratings yet
Lab Script 2
9 pages
Web design manual-printout
No ratings yet
Web design manual-printout
13 pages
Javascript Event Handling
No ratings yet
Javascript Event Handling
47 pages
HTML Lab File
No ratings yet
HTML Lab File
85 pages
Lab Manual_KIT451_2021_22_Even
No ratings yet
Lab Manual_KIT451_2021_22_Even
24 pages
Internet-Technologies-Lab-Cycles (1)
No ratings yet
Internet-Technologies-Lab-Cycles (1)
41 pages
Web Technology Lab
No ratings yet
Web Technology Lab
17 pages
hemant css practicals 1 to 4 (1)
No ratings yet
hemant css practicals 1 to 4 (1)
14 pages
What Is E-Commerce
No ratings yet
What Is E-Commerce
33 pages
pyq1_fsd
No ratings yet
pyq1_fsd
6 pages
CSS Solved QB 22-23-1
No ratings yet
CSS Solved QB 22-23-1
12 pages
javascript_study_material (1)
No ratings yet
javascript_study_material (1)
8 pages
ilovepdf_merged
No ratings yet
ilovepdf_merged
27 pages
IP Notes
No ratings yet
IP Notes
63 pages
2261ab98-6dc5-4b71-994a-da73ffb9218e
No ratings yet
2261ab98-6dc5-4b71-994a-da73ffb9218e
52 pages
CSS-PreliumAns
No ratings yet
CSS-PreliumAns
14 pages
Javascript 1
No ratings yet
Javascript 1
88 pages
L3 Types Object Event
No ratings yet
L3 Types Object Event
28 pages
Inspiring Powershell Articles
From Everand
Inspiring Powershell Articles
Murat Yildirimoglu
No ratings yet
The Research On Single Page Application Front-End
No ratings yet
The Research On Single Page Application Front-End
6 pages
Quiz M3. Data types
No ratings yet
Quiz M3. Data types
5 pages
Distributed System Lessonplan
No ratings yet
Distributed System Lessonplan
6 pages
SWING UI Elements:: Unit V: Exploring Swing
No ratings yet
SWING UI Elements:: Unit V: Exploring Swing
4 pages
Software Systems Integration and Architectural Analysis - A Case Study
No ratings yet
Software Systems Integration and Architectural Analysis - A Case Study
11 pages
CA 2 MCQ Set1
No ratings yet
CA 2 MCQ Set1
2 pages
Abraham Mekonnen Resume
No ratings yet
Abraham Mekonnen Resume
1 page
Databases in Delphi-Mr-Long-Summary
No ratings yet
Databases in Delphi-Mr-Long-Summary
11 pages
Newton School Course Final
No ratings yet
Newton School Course Final
5 pages
DevOps Ecosystem v2
100% (1)
DevOps Ecosystem v2
1 page
Cursor vs. Double vs. OpenHands Comparison
No ratings yet
Cursor vs. Double vs. OpenHands Comparison
6 pages
Bca 1 Sem Problem Solving Using C 76963 Nov 2019
No ratings yet
Bca 1 Sem Problem Solving Using C 76963 Nov 2019
2 pages
Rsyslog Centralized Logging Ebook PDF
No ratings yet
Rsyslog Centralized Logging Ebook PDF
30 pages
Excel Lesson 4 Formatting Continued
No ratings yet
Excel Lesson 4 Formatting Continued
7 pages
File Sharing and Printer Sharing
No ratings yet
File Sharing and Printer Sharing
12 pages
jqFancyTransitions 1 8 Min Js
No ratings yet
jqFancyTransitions 1 8 Min Js
2 pages
Javascript Excercises v2 v.1
No ratings yet
Javascript Excercises v2 v.1
4 pages
Study Material For XII Computer Science On: Data Visualization Using Pyplot
No ratings yet
Study Material For XII Computer Science On: Data Visualization Using Pyplot
22 pages
2008 PHP PHP
No ratings yet
2008 PHP PHP
39 pages
Readme
No ratings yet
Readme
3 pages
Developing SCRABBLE Game
No ratings yet
Developing SCRABBLE Game
73 pages
Using The GNU Compiler Collection PDF
No ratings yet
Using The GNU Compiler Collection PDF
694 pages
DBMS Lab
No ratings yet
DBMS Lab
59 pages
Lab 04 DoublyCircularlyLinkedLists
No ratings yet
Lab 04 DoublyCircularlyLinkedLists
9 pages
Python PPT 2
100% (1)
Python PPT 2
36 pages
8051 Interrupt and Timer Using C
100% (2)
8051 Interrupt and Timer Using C
12 pages
SAP Advanced Track Trace For Pharmaceuticals
No ratings yet
SAP Advanced Track Trace For Pharmaceuticals
1 page
Ssce Computer Science Lab Manual - 2023-2024
No ratings yet
Ssce Computer Science Lab Manual - 2023-2024
32 pages