Scribd
Upload
13 views55 pages

WPjash

Uploaded by

Jash Shah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views55 pages

WPjash

Uploaded by

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

SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

PRACTICAL-5
a) Create a page using java script, which sorts elements of array
in ascending array using bubble sort.
var arr = [5,6,3,1,2,4];
bubbleSortAlgo(arr);
function bubbleSortAlgo(arr){
for(var i=0;i<arr.length;i++){
var flag=false;
for(var j=0;j<arr.length-i-1;j++)
{ if(arr[j]>arr[j+1]){
var tempValue=
arr[j]; arr[j]=arr[j+1];
arr[j+1]=tempValue;
flag=true;
}
}
if(flag==false)
break;
}
console.log("SORTED ARRAY");
console.log(arr);
}

OUTPUT:

ENROLLMENT NO.:210410107033 Page|1


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

b) Create an HTML page with JavaScript , which contains a text box


and button, When you click on button it displays content of text box in
alert box.

<!DOCTYPE html>
<html>
<head>
<title>Alert</title>
<script type="text/javascript">
function display()
{
alert(PARTH.tbox.value);
}
</script>
</head>
<body>
<form name="PARTH">
Enter some text: <input type="text" name="tbox">
<input type="submit" onclick="display()">
</form>
</body>
</html>

OUTPUT:

ENROLLMENT NO.:210410107033 Page|2


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

c) Create an HTML page using JavaScript, which gives simple


functionality of a calculator. (Addition,multiplication, division and
subtraction)

<!DOCTYPE html>
<html>
<head>
<title>calculator</title>
<script>
function calc()
{
var n1 = parseFloat(document.getElementById('n1').value);
var n2 = parseFloat(document.getElementById('n2').value);
var oper = document.getElementById('operators').value;
if(oper === '+')
{
document.getElementById('result').value = n1+n2;
}
if(oper === '-')
{
document.getElementById('result').value = n1-n2;
}
if(oper === '/')
{
document.getElementById('result').value = n1/n2;
}
if(oper === 'X')
{

ENROLLMENT NO.:210410107036 Page|3


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

document.getElementById('result').value = n1*n2;

ENROLLMENT NO.:210410107036 Page|4


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

}
}
</script>
</head>
<body>
Enter number 1: <input type="text" id="n1"/><br/><br/>
Enter number 2: <input type="text" id="n2"/><br/><br/>
<select id="operators">
<option value="+">+</option>
<option value="-">-</option>
<option value="/">/</option>
<option value="X">X</option>
</select>
<button onclick="calc();">=</button>
<input type="text" id="result"/>
</body>
</html>

OUTPUT:

ENROLLMENT NO.:210410107036 Page|5


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

d) Create an HTML page with java script, which takes numbers as


inputs and display Odd numbers, Even Numbers on the web page.

<!DOCTYPE html>
<html>
<head>
<title>odd-even</title>
<script>
function display()
{
var n1 = parseInt(document.getElementById('n1').value);
var n2 = parseInt(document.getElementById('n2').value);
document.write("Odd,even numbers between ["+n1+","+n2+"] are: <br>");
for(i=n1;i<=n2;i++)
{ if(i
%2===0)
{document.write(i+": even<br>");}
else
{document.write(i+": odd<br>");}
}
}
</script>
</head>
<body>
<form name="form1" onsubmit="display()">
Enter number 1: <input type="text" id="n1"/><br/><br/>
Enter number 2: <input type="text" id="n2"/><br/><br/>
<input type="submit">
</form>

ENROLLMENT NO.:210410107036 Page|6


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

</body>
</html>

OUTPUT:

ENROLLMENT NO.:210410107036 Page|7


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

e) Using JavaScript complete the form validation for fields in the


given form.
i. Name(User can enter text)
ii. Password(minimum six characters)
iii. Address(user can enter text & number)
iv. Phone no.(User can enter only numeric values)
v. Email address
a. E-mail address must in [email protected] format (Validate Using JavaScript)
b. Display error message dialog box if user does not enter e-mail address
in proper format.
vi. Two radio buttons for gender(male/female)
vii. Checkboxes for different hobbies
viii. One list for countries (at least 10 different countries in list)
ix. One submit button(error message should be displayed on the click
of submit button if validation check
fails OR message should be displayed “data submitted successfully”)
x. Reset Button (all fields on the form should be clear)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form onsubmit="return validateForm()">

ENROLLMENT NO.:210410107036 Page|8


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

<label for="name">Name:</label>
<input type="text" id="name" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" required minlength="6">
<br><br>
<label for="address">Address:</label>
<textarea id="address" required></textarea>
<br><br>
<label for="phone">Phone No.:</label>
<input type="tel" id="phone" required pattern="[0-9]+"> <br><br>
<label for="email">Email:</label>
<input type="email" id="email" required>
<br><br>

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
<br><br>

<label>Hobbies:</label>
<input type="checkbox" id="hobby_reading" name="hobby[]" value="reading"> Read
<input type="checkbox" id="hobby_movies" name="hobby[]" value="movies"> Movies
<input type="checkbox" id="hobby_sports" name="hobby[]" value="sports"> Sports
<br><br>

ENROLLMENT NO.:210410107036 Page|9


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

<label for="country">Country:</label>
<select id="country" required>
<option value="">Select Country</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="Australia">Australia</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Japan">Japan</option>
<option value="China">China</option>
<option value="Brazil">Brazil</option>
</select>
<br><br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

<p id="error-message"></p>
</form>

<script>
function validateForm()
{ var errorMessage = "";
var email = document.getElementById("email").value;

// Email validation (basic format check)


if (!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-
]+)*$/.test(email)) {

ENROLLMENT NO.:210410107036 Page|


10
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

errorMessage = "Invalid email format. Please enter a valid email address (e.g.,
[email protected])";
}

// Display error message if any validation fails


if (errorMessage !== "") {
document.getElementById("error-message").innerHTML = errorMessage;
return false; // Prevent form submission
}

// If validation passes, submit the form (replace with your form submission logic)
alert("Data submitted successfully!");
return true;
}
</script>
</body>
</html>

ENROLLMENT NO.:210410107036 Page|10


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

OUTPUT:

ENROLLMENT NO.:210410107036 Page|11


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

f) Write a script having 3 buttons representing colour names as their


caption. Background colour of the webpage should change according to
the caption of the button when button is clicked.
<!DOCTYPE html>

<html>

<head>

<title>color-color</title>

<script type="text/javascript">

function changeBodyBg(color) {document.body.style.background = color;}

</script>

</head>

<body>

<label>Change Webpage Background To:</label>

<button type="button" onclick="changeBodyBg('yellow');">Yellow</button>

<button type="button" onclick="changeBodyBg('green');">Green</button>

<button type="button" onclick="changeBodyBg('blue');">Blue</button>

</body>

</html>

OUTPUT:

ENROLLMENT NO.:210410107036 Page|12


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

g) Write a script to open window having specific width, height and with
a status bar on button click.

<html>

<head>

<title>JavaScript Popup Example</title>

</head>

<script type="text/javascript">

function poponload()

testwindow = window.open("", "mywindow", "scrollbars=1,width=300,height=300");

</script>

<body>

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

</body>

</html>

ENROLLMENT NO.:210410107036 Page|13


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

OUTPUT:

ENROLLMENT NO.:210410107036 Page|14


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

h) Write a script to open multiple windows on button click.


<html>

<head>

<title>JS windows</title>

</head>

<script type="text/javascript">

function poponload()

window.open("http://www.google.com/");

testwindow = window.open("", "mywindow", "scrollbars=1,width=300,height=300");

</script>

<body>

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

</body>

</html>

OUTPUT:

ENROLLMENT NO.:210410107036 Page|15


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

i) Write a script having 1 textbox, 1 button in 1.html page. When


button is clicked, it should open new window & display the contents
entered in the textbox in the new window.
<html>

<head>

<title>Cross-Window HTML</title>

<script>

function newHTML()

HTMLstring='<html>\n';

HTMLstring+='<p>'+mainform.word.value+'</p>\n';

HTMLstring+='</html>';

newwindow=window.open();

newdocument=newwindow.document;

newdocument.write(HTMLstring);

newdocument.close();

</script>

</head>

<body>

<form name="mainform">

Enter text: <input type="text" name="word">

<br><br>

<input type="button" value="Click me!" onclick="newHTML();">

ENROLLMENT NO.:210410107036 Page|16


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

</form>

</body>

</html>

OUTPUT:

ENROLLMENT NO.:210410107036 Page|17


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

j) Write a script to hide the text when hide button is clicked and to show
the text when show button is clicked.

<html>

<head>

<title>FORM</title>

<script type="text/javascript">

function myFunction()

var x = document.getElementById("myInput");

if (x.type === "password")

x.type = "text";

} else

x.type = "password";

</script>

</head>

<body>

<form>

Password: <input type="password" value="Hello!" id="myInput">

<input type="checkbox" onclick="myFunction()">Show Password

</form>

ENROLLMENT NO.:210410107036 Page|18


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

</body>

</html>

OUTPUT:

ENROLLMENT NO.:210410107036 Page|19


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

PRACTICAL-6

a) Introduction to PHP & MYSQL


=> PHP
What is PHP?
PHP stands for Hypertext Preprocessor. It's a server-side scripting language primarily used
for web development. This means PHP code executes on the web server before the resulting
HTML content is sent to the user's browser.

Why use PHP?


Dynamic Content Generation: PHP allows you to create dynamic web pages that can adapt
based on user input, database information, or other factors.
Form Handling: You can use PHP to process data submitted through web forms, validate
user input, and perform actions like storing data in a database.
Database Interaction: PHP can connect to various databases to retrieve, manipulate, and store
data. This is crucial for building interactive web applications.
Server-Side Functionality: Since PHP runs on the server, it can perform tasks that wouldn't be
possible with client-side scripting (JavaScript) alone, such as accessing files, connecting to
databases, or sending emails.
Open Source and Free: PHP is an open-source language, meaning it's free to use and modify.
This extensive community and vast resources contribute to its popularity.

Basic PHP Structure:


A basic PHP script often follows this format:

HTML
<?php
// Your PHP code goes here
?>

ENROLLMENT NO.:210410107036 Page|20


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<?php
// More PHP code (optional)
?>
</body>
</html>
Key PHP Features:
Variables: Store and manage data using variables with different data types (strings, integers,
arrays, etc.).
Operators: Perform operations on variables and data (arithmetic, comparison, logical, etc.).
Control Flow Statements: Control the flow of execution using if, else, for, while, and other
statements.
Functions: Create reusable blocks of code for modularity and better organization.
Object-Oriented Programming (OOP): PHP supports object-oriented programming concepts
like classes, objects, inheritance, and more (optional for beginners).

=>MYSQL
SQL stands for Structured Query Language. It's a standardized language used to manage data
stored in relational databases. Here's a breakdown of key concepts:

1. Relational Databases:

Organize data in tables with rows and columns.

Each table represents a specific entity (e.g., customers, products, orders).

Rows represent individual records within a table (e.g., each customer record).

ENROLLMENT NO.:210410107036 Page|21


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

Columns represent attributes or characteristics of those records (e.g., customer name, email,
address).

2. SQL Functionality:

Data Definition Language (DDL):

Used to create, modify, and delete database structures (tables, columns).

Examples: CREATE TABLE, ALTER TABLE, DROP TABLE.

Data Manipulation Language (DML):

Used to insert, update, and delete data within tables.

Examples: INSERT INTO, UPDATE, DELETE.

Data Query Language (DQL):

Used to retrieve data from tables based on specific criteria.

Examples: SELECT, FROM, WHERE, ORDER BY, JOIN (to combine data from multiple
tables).

4. Advantages of SQL:

Standardized language across different database platforms.

Powerful and flexible for data manipulation and retrieval.

Relatively easy to learn and understand for basic operations.

ENROLLMENT NO.:210410107036 Page|22


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

b) Create php page with name 1.php With fields username and
password. 2 buttons ok and cancel. On click of ok button data filled in
the fields should be displayed on the next page.(use post and get method)
1. php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Form</title>

</head>

<body>

<h1>Login</h1>

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

<label for="username">Username:</label>

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

<label for="password">Password:</label>

<input type="password" id="password" name="password" required><br><br>

<button type="submit">OK</button>

<button type="reset">Cancel</button>

</form>

</body>

</html>

ENROLLMENT NO.:210410107036 Page|23


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

2. php

<?php

// Check if form is submitted and username and password are set

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["username"]) &&


isset($_POST["password"])) {

$username = $_POST["username"];

$password = $_POST["password"];

// Display the received information (replace with your logic for processing)

echo "<h1>Data from 1.php (POST Method)</h1>";

echo "Username: " . $username . "<br>";

echo "Password: " . $password . "<br>";

} else {

echo "Error: Form not submitted properly.";

?>

OUTPUT:

ENROLLMENT NO.:210410107036 Page|24


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

c) Create php page with name 1.php With fields username and password.
2 buttons ok and cancel. On click of ok button Retrieve the username &
password and check if username= “admin” and password=”admin” go to
admin.php. if username= “visitor” and password=”visitor” go to
visitor.php.

login.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login</title>

</head>

<body>

<h1>Login</h1>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">

<label for="username">Username:</label>

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

<label for="password">Password:</label>

<input type="password" id="password" name="password" required><br><br>

<button type="submit">OK</button>

<button type="reset">Cancel</button>

</form>

ENROLLMENT NO.:210410107036 Page|25


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

<?php

// Check if form is submitted and username and password are set

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST["username"])


&& isset($_POST["password"])) {

$username = $_POST["username"];

$password = $_POST["password"];

// Validate username and password

if ($username === "admin" && $password === "admin")

{ header("Location: admin.php"); // Redirect to admin page

} else if ($username === "visitor" && $password === "visitor")

{ header("Location: visitor.php"); // Redirect to visitor page

} else {

echo "<p style='color: red;'>Invalid username or password!</p>";

?>

</body>

</html>

admin.php

<!DOCTYPE html>

<html lang="en">

<head>

ENROLLMENT NO.:210410107036 Page|26


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Admin Page</title>

</head>

<body>

<h1>Welcome Admin!</h1>

<p>This is the content accessible only to authorized administrators.</p>

</body>

</html>

visitor.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Visitor Page</title>

</head>

<body>

<h1>Welcome Visitor!</h1>

<p>This is the content accessible to visitors.</p>

</body>

</html>

ENROLLMENT NO.:210410107036 Page|27


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

OUTPUT:

ENROLLMENT NO.:210410107036 Page|28


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

d) Create and php page with name cookie.php with fields Name, surname,
email-id, phone_no and city. 2 buttons ok and cancel. On click of ok
button page should go to 1.php where it should contain a link with the
name show details and on click of it other page should be open which
shows you the details which you have filled in cookie.php page (make use
of cookies).
cookie.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Enter Details</title>

</head>

<body>

<h1>Enter Your Details</h1>

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

<label for="name">Name:</label>

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

<label for="surname">Surname:</label>

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

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br><br>

<label for="phone">Phone No.:</label>

<input type="tel" id="phone" name="phone" required><br><br>

<label for="city">City:</label>

ENROLLMENT NO.:210410107036 Page|29


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

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

ENROLLMENT NO.:210410107036 Page|


210
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

<button type="submit">OK</button>

<button type="reset">Cancel</button>

</form>

</body>

</html>

one.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Welcome</title>

</head>

<body>

<h1>Welcome!</h1>

<p>You have entered your details.</p>

<a href="details.php">Show Details</a>

</body>

</html>

details.php

<?php

// Check if cookie exists

if (isset($_COOKIE["user_details"])) {

ENROLLMENT NO.:210410107036 Page|30


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

$user_details = json_decode($_COOKIE["user_details"], true); // Decode JSON data

// Display details if cookie is set

echo "<h1>Your Details</h1>";

echo "Name: " . $user_details["name"] . "<br>";

echo "Surname: " . $user_details["surname"] . "<br>";

echo "Email: " . $user_details["email"] . "<br>";

echo "Phone No.: " . $user_details["phone"] . "<br>";

echo "City: " . $user_details["city"] . "<br>";

} else {

// Display message if cookie is not set

echo "No details found. Please enter your details on the cookie.php page.";

ENROLLMENT NO.:210410107036 Page|31


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

OUTPUT:

ENROLLMENT NO.:210410107036 Page|32


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

e) Create and php page with name cookie.php With fields Name , surname,
email-id, phone_no and city. 2 buttonsok and cancel. On click of ok button
page should go to 1.php where it should contain link with name show
details and on click of it other page should be open which shows you the
details which you have filled in cookie.php page.(make use of session)

cookie1.php

<?php

session_start();

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

$_SESSION['name'] = $_POST['name'];

$_SESSION['surname'] = $_POST['surname'];

$_SESSION['email'] = $_POST['email'];

$_SESSION['phone_no'] = $_POST['phone_no'];

$_SESSION['city'] = $_POST['city'];

header("Location: session1.php");

exit;

?>

<!DOCTYPE html>

<html>

<head>

ENROLLMENT NO.:210410107036 Page|33


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

<title>Cookie Form</title>

</head>

<body>

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

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

Surname: <input type="text" name="surname"><br>

Email: <input type="text" name="email"><br>

Phone No: <input type="text" name="phone_no"><br>

City: <input type="text" name="city"><br>

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

<input type="button" value="Cancel" onclick="window.location.href='cancel.php'">

</form>

</body>

</html>

session1.php

<?php

session_start();

?>

<!DOCTYPE html>

<html>

<head>

<title>Show Details</title>

</head>

<body>

ENROLLMENT NO.:210410107036 Page|34


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

<a href="details1.php">Show Details</a>

</body>

</html>

details1.php

<?php

session_start();

?>

<!DOCTYPE html>

<html>

<head>

<title>Details</title>

</head>

<body>

<h2>Details</h2>

<p>Name: <?php echo $_SESSION['name']; ?></p>

<p>Surname: <?php echo $_SESSION['surname']; ?></p>

<p>Email: <?php echo $_SESSION['email']; ?></p>

<p>Phone No: <?php echo $_SESSION['phone_no']; ?></p>

<p>City: <?php echo $_SESSION['city']; ?></p>

</body>

</html>

ENROLLMENT NO.:210410107036 Page|35


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

OUTPUT:

ENROLLMENT NO.:210410107036 Page|36


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

PRACTICAL-7

a) Create a database name student info in my sql using php coding.


Create table name personal info with the fields Name, Password,
Address,Phone no., Email address , Add information of 5 students in the
database (all things should be done throught php coding).

<html>
<body>
<?php
$servername = "localhost";
$username = "root";
$password = "admin";
$conn = new mysqli($servername, $username, $password); if ($conn->connect_error)
{die("Connection failed: " . $conn->connect_error);
}
$sql2 = "CREATE TABLE personal_info( name VARCHAR(30),
password VARCHAR(30), address VARCHAR(30), phoneno VARCHAR(30),
email VARCHAR(50))"; $dbname="student_info";

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


if ($conn->query($sql2) === TRUE)
{
echo "Table personal_info created successfully<br>";
} else
{
echo "Error creating table: " . $conn->error;
}

ENROLLMENT NO.:210410107036 Page|37


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

$sql3 = "INSERT INTO personal_info (name,password,address,phoneno,email)


VALUES ('AA', 'DJ','Baroda','7600050563', '[email protected]')";
$sql4 = "INSERT INTO personal_info (name,password,address,phoneno,email)
VALUES ('BB', 'AS','Baroda','7600099999', '[email protected]')";
$sql5 = "INSERT INTO personal_info (name,password,address,phoneno,email)
VALUES ('CC', 'NP','Baroda','9999950563', '[email protected]')";
$sql6 = "INSERT INTO personal_info (name,password,address,phoneno,email)
VALUES ('DD', 'SV','Baroda','8888850563', '[email protected]')";
$sql7 = "INSERT INTO personal_info (name,password,address,phoneno,email)
VALUES ('EE', 'KS','Baroda','1111150563', '[email protected]')";

$conn->query($sql3);
$conn->query($sql4);
$conn->query($sql5);

OUTPUT:

ENROLLMENT NO.:210410107036 Page|38


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

ENROLLMENT NO.:210410107036 Page|39


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

b) Create a Form that accepts Personal information. Data should be


saved in database on click of submit button. Added information should be
displayed in tabular format on click of view details. Form should also
contain button add, update, delete, for performing the operations Like
adding information, editing the information and deleting information
respectively.

Formdb.php

<!DOCTYPE html>
<html>
<body>
<form method="post" action="formdb2.php" id="form">
<label>ID: </label><input type="text" name="id"/><br>
<label>First Name : </label><input type="text" name="fname"/><br>
<label>Last Name : </label><input type="text" name="lname"/><br>
<label>Email-id : </label><input type="text" name="email"/><br>
<label>Phone-no : </label><input type="text" name="phoneno"/><br>
<label>City : </label><input type="text" name="city"/><br>
<input type="submit" name="submit" value="OK">
<input type="reset" value="Cancel">
<br></form>
<button
onclick="window.location.href='delete.php'">Deleterecord</button>
<br>
<button onclick="window.location.href='update.php'">Update
record</button>
</body>
</html>

ENROLLMENT NO.:210410107036 Page|40


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

Formdb2.php

<html>
<body>
<h2>Values are updated!</h2>
<br>
<?php
$vo=$_POST["id"];
$v1=$_POST["fname"];
$v2=$_POST["lname"];
$v3=$_POST["email"];
$v4=$_POST["phoneno"];
$v5=$_POST["city"];
?>
<?php
$mysqli = new mysqli("localhost","root","vb","practical8b");
$mysqli -> query("CREATE TABLE practical8btable( id
VARCHAR(10), fname VARCHAR(30), lname VARCHAR(30), email
VARCHAR(30),
phoneno VARCHAR(30), city VARCHAR(30)
)");

$mysqli -> query("INSERT INTO practical8btable (id,fname,lname,email,phoneno,city)


VALUES ('$vo','$v1','$v2','$v3','$v4','$v5')");
$mysqli -> close();
?>
<a href="http://localhost/displaytable.php">Display table</a>
</body>
</html>

ENROLLMENT NO.:210410107036 Page|41


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

Displaytable.php

<html>
<body>
<h2>Your table!</h2><br>
<?php
$mysqli = new mysqli("localhost","root","vb","practical8b");
$sql = "select * from practical8btable"; echo '<table
border="1">
<tr>
<td>ID</td> <td>First Name</td>
<td>Last name</td>
<td>Email-id</td>
<td>Phone-no</td>
<td>City</td>
</tr>;
if ($result = $mysql->
query($sql))
{
while ($row = $result->
fetch_assoc())
{
$field0name = $row["id"];
$field1name = $row["fname"];
$field2name = $row["lname"];
$field3name = $row["email"];
$field4name = $row["phoneno"];
$field5name = $row["city"];

ENROLLMENT NO.:210410107036 Page|42


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

echo '<tr>
<td>'.$field0name.'</td>
<td>'.$field1name.'</td>
<td>'.$field2name.'</td>
<td>'.$field3name.'</td>
<td>'.$field4name.'</td>
<td>'.$field5name.'</td>
</tr>';
}
$result->free();
}
?>
</body>
</html>

Delete.php

<!DOCTYPE html>
<html>
<body>
<h2>Deletion page!</h2>
<form method="post" action="deleteid.php" id="form">
<label>Enter the ID of the person whose record you want to delete :
</label>
<input type="text" name="delid"/><br>
<input type="submit" name="submit" value="Delete">
</form>
</body>
</html>

ENROLLMENT NO.:210410107036 Page|43


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

Deleteid.php

<!DOCTYPE html>
<html>
<body>
<h2>Record Deleted!</h2>
<br>
<?php
$mysqli = new mysqli("localhost","root","vb","practical8b");
$v0=$_POST["delid"];
$mysqli -> query("DELETE FROM practical8btable where
id='$v0'"); $mysqli -> close();

OUTPUT:

ENROLLMENT NO.:210410107036 Page|44


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

ENROLLMENT NO.:210410107036 Page|45


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

ENROLLMENT NO.:210410107036 Page|46


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

PRACTICAL-8

a) Create a simple XMLHttpRequest, and retrieve data from a TXT file

<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML =
this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>

ENROLLMENT NO.:210410107036 Page|47


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

ajax_info.txt

OUTPUT:

ENROLLMENT NO.:210410107036 Page|48


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

b) Create a XMLHttpRequest with a callback function, and retrieve


data from a TXT file

<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc('ajax_info.txt', myFunction)">Change Content
</button>
</div>
<script>
function loadDoc(url, xFunction)
{ const xhttp=new
XMLHttpRequest();
xhttp.onload = function() {xFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction(xhttp)
{ document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>

ENROLLMENT NO.:210410107036 Page|49


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

ajax_info.txt

OUTPUT:

ENROLLMENT NO.:210410107036 Page|50


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

PRACTICAL-9
(BEYOND SYLLABUS)

a) Introduction to node JS with Example

=> Key Features of Node.js:


Event-driven, non-blocking I/O model: Node.js handles multiple requests efficiently without
blocking on individual tasks. It uses events and callbacks to manage asynchronous
operations.
JavaScript on the server-side: Node.js allows you to write server-side code using JavaScript, a
familiar language for many web developers.
Lightweight and efficient: Thanks to its event-driven architecture, Node.js can handle a high
volume of concurrent connections using a single process.
Large ecosystem of libraries: Node.js has a vast ecosystem of open-source libraries (modules)
called npm packages that provide functionalities for various tasks like building web servers,
interacting with databases, and more.
Example: Creating a Simple HTTP Server
JavaScript
const http = require('http'); // Import the http module
const hostname = 'localhost';
const port = 3000;
const server = http.createServer((req, res) =>
{ res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!\n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

ENROLLMENT NO.:210410107036 Page|51


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

b) Trending Tools/Technology related to the subject.

=>Front-End Development
React, Angular, Vue.js: These popular JavaScript libraries (frameworks) continue to dominate
the front-end landscape, each offering different strengths and approaches to building user
interfaces. They allow for component-based architecture, reusability, and efficient
development.
Svelte: Gaining traction, Svelte is a compiler-based framework that offers a unique approach.
It compiles code during the build process, resulting in smaller bundle sizes and potentially
faster performance compared to traditional frameworks.
WebAssembly (WASM): WASM allows running code written in languages like C++ or Rust
within web browsers. This can be beneficial for performance-critical tasks like complex
animations or 3D graphics, as it leverages the efficiency of compiled languages.
Progressive Web Apps (PWAs): PWAs offer app-like experiences within the browser.
They can be installed on home screens, work offline, and leverage push notifications,
providing a more engaging user experience.
CSS-in-JS Libraries: Libraries like styled-components or Emotion allow you to write CSS
code directly within your JavaScript components, promoting better maintainability and
styling flexibility.

=>Back-End Development:

Node.js: Node.js remains a popular choice for building scalable and efficient server-side
applications. Its event-driven architecture makes it suitable for real-time applications and
APIs.
Serverless Computing: Cloud platforms like AWS Lambda or Google Cloud Functions allow
you to build and deploy code without managing servers. This serverless approach facilitates
faster development and reduces infrastructure management overhead.
GraphQL: GraphQL is an API query language that allows clients to request specific data from
an API. This can improve performance and flexibility compared to traditional REST APIs.
Headless CMS: Headless CMS systems decouple the content management system from the
front-end. This allows developers to choose any front-end framework while managing
content centrally.

ENROLLMENT NO.:210410107036 Page|52


SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

SUB NAME:WEB PROGRAMMING SUBJECT CODE:3160713

=>DevOps and Tools:

Git version control: Git remains an essential tool for managing code versions and
collaboration among developers.
Containerization (Docker, Kubernetes): Containerization technologies like Docker package
applications with their dependencies, making them portable and easier to deploy across
different environments. Kubernetes helps manage containerized applications at scale.
Cloud Platforms (AWS, Azure, GCP): Cloud platforms offer a variety of services for
building, deploying, and scaling web applications. They provide infrastructure, databases,
serverless functions, and other tools that streamline development and deployment.

ENROLLMENT NO.:210410107036 Page|53

You might also like