Scribd
Upload
17 views46 pages

WP BHav

Uploaded by

21ce63
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
17 views46 pages

WP BHav

Uploaded by

21ce63
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/ 46

SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713

PRACTICAL 5
a. Create a page using java script, which sorts elements of array in ascending array using
bubble sort.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Bubble Sort Example</title>
</head>
<body>
<h1>Bubble Sort Example</h1>
<p>Click the button to sort the array in ascending order:</p>
<button onclick="bubbleSort()">Sort Array</button>
<p id="result"></p>
<script>
function bubbleSort() { // The array to be sorted
var arr = [55, 34, 20, 9, 22, 18, 111];
// Loop through the array
for (var i = 0; i<arr.length - 1; i++) { // Last i elements are already in place
for (var j = 0; j <arr.length - i - 1; j++) {
// Swap if the element is greater than the next element
if (arr[j] >arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}

EN.NO-210410107114 Page|44
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


// Display the sorted array
document.getElementById("result").innerHTML = "Sorted Array: " + arr;
}
</script>
</body>
</html>

OUTPUT:

b. Create an HTML page with JavaScript , which contains a text box and button, When
you click on button itdisplays content of text box in alert box.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Text Box Alert Example</title>
<script>
function displayText()
{
var textBox = document.getElementById("myTextBox");
var text = textBox.value;
alert(text);
}
</script>
</head>
<body>
<label for="myTextBox">Enter some text:</label>
<input type="text" id="myTextBox">
<button onclick="displayText()">Display
"displayText()">Display Text</button>

EN.NO-210410107114 Page|45
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


</body>
</html>
OUTPUT:

c. Create an HTML page using JavaScript, which gives simple functionality of a


calculator. (Addition,multiplication, division and subtraction)
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h1>Simple Calculator</h1>
<input type="number" id="num1" /><input type="number" id="num2" />
<br />
<br />
<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>
<button onclick="multiply()">Multiply</button>
ly()">Multiply</button>
<button onclick="divide()">Divide</button>
<br />
<br />
<input type="text" id="result" />
<script>
function add() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getE
parseFloat(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
function subtract() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 - num2;
document.getElementById("result").value = result;
}
function multiply() {
EN.NO-210410107114 Page|46
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


var num1 = parseFloat(document.getElementById("num1").value);
document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 * num2;
document.getElementById("result").value = result;
}
function divide() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 / num2;
document.getElementById("result").value = result;
}
</script>
</body>
</html>
OUTPUT:

Addition

Subtraction

Multiplication

EN.NO-210410107114 Page|47
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


Division

d. Create an HTML page with java script, which takes numbers as inputs and display
Odd numbers, EvenNumbers on the web page.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Odd
title>Odd and Even Number Finder</title>
<script type="text/javascript">
function findNumbers() {
// Get the input numbers from the user
let startNum = Number(document.getElementById("startNum").value);
let endNum = Number(document.getElementById
Number(document.getElementById("endNum").value);
// Find and display the odd and even numbers
let oddNumbers = [];
let evenNumbers = [];
for (let i = startNum; i<= endNum; i++) {
if (i % 2 === 0) {
evenNumbers.push(i);}
else
{oddNumbers.push(i); }
}
document.getElementById("oddNumbers").innerHTML = "Odd Numbers: " + oddNumbers.join(", ");
document.getElementById("evenNumbers").innerHTML = "Even Numbers: " + evenNumbers.join(", ");
EN.NO-210410107114 Page|48
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


}
</script>
</head>
<body>
<h1>Odd and Even Number Finder</h1>
<labell for="startNum">Starting Number:</label>
<input type="number" id="startNum"><br><br>
<label for="endNum">Ending Number:</label>
<input type="number" id="endNum"><br><br>
<button onclick="findNumbers()">Find Odd and Even
Numbers</button><br><br>
<div id="oddNumbers"></div>
<div id="evenNumbers"></div>
</body>
</html>

OUTPUT:

EN.NO-210410107114 Page|49
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 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)

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label><br>

EN.NO-210410107114 Page|50
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


<input type="text" id="name" name="name" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" minlength="6" required><br>
<label for="address">Address:</label><br>
<input type="text" id="address" name="address" required><br>
<label for="phone">Phone No:</label><br>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="gender">Gender:</label><br>
<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>
<label for="hobbies">Hobbies:</label><br>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="travelling" name="hobbies" value="travelling">
<label for="travelling">Travelling</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">Sports</label><br>
<label for="country">Country:</label><br>
<select id="country" name="country" required><br>

<option value="">--Select Country--</option>


<option value="India">India</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
<option value="UK">UK</option>
<option value="China">China</option>
EN.NO-210410107114 Page|51
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Italy">Italy</option>
</select>

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


<input type="reset" value="Reset">
</form>
<script>
const form = document.getElementById('myForm');
constnameField = document.getElementById('name');
constpasswordField = document.getElementById('password');
constaddressField = document.getElementById('address');
constphoneField = document.getElementById('phone');
constemailField = document.getElementById('email');
constgenderField = document.getElementsByName('gender');
constcountryField = document.getElementById('country');
form.addEventListener('submit', (event) => { let isValid = true;
if (nameField.value === '') {
alert('Please enter your name.');
isValid = false;
}
if (passwordField.value.length< 6) {
alert('Password must be at least 6 characters long.');
isValid = false; }
if (addressField.value === '') {
alert('Please enter your address.');
isValid = false;
}
if (phoneField.value === '' || isNaN(phoneField.value)) {
EN.NO-210410107114 Page|52
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


alert('Please enter a valid phone number.');
isValid = false; }
if (emailField.value === '') {
alert('Please enter your email address.');
isValid = false;
}
else { constemailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zAZ]{2,4}$/;
if (!emailRegex.test(emailField.value)) {
alert('Please enter a valid email address.');
isValid = false;
}
} let selectedGender = false;
genderField.forEach((gender) => {
if (gender.checked) {
selectedGender = true;
}
});
if (!selectedGender) {
alert('Please select your gender.');
isValid = false; }
if (countryField.value === '') {
alert('Please select your country.');
isValid = false; }
if (!isValid) {
event.preventDefault(); }
else {
alert('Data submitted successfully.');
} });
constresetButton = document.querySelector('input[type="reset"]');
resetButton.addEventListener('click', () =>{ form.reset();
});
EN.NO-210410107114 Page|53
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


</script>
</body>
</html>
OUTPUT:

EN.NO-210410107114 Page|54
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713

EN.NO-210410107114 Page|55
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 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.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Button Color Change Example</title>
<style>
body {
background-color: white;
}
button {
font-size: 20px; padding: 10px 20px; margin: 10px; border: none;
border-radius: 5px; cursor: pointer;
}
.red {
background-color: red; color: white;
}
.green { background-color: green; color: white;
}
.blue {
background-color: blue; color: white;
}
</style>
</head>
<body>
<h1>Button Color Change Example</h1>
<p>Click on a button to change the background color:</p>

EN.NO-210410107114 Page|56
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


<button class="red">Red</button>
<button class="green">Green</button>
<button class="blue">Blue</button>

<script>
// Get all the buttons
var buttons = document.querySelectorAll("button"); // Add an event listener to each button
buttons.forEach(function(button) {
button.addEventListener("click", function() { // Get the color class from the button's class list
var colorClass = button.classList[0];

// Set the body's class to the color class


document.body.className = colorClass;
});
});
</script>
</body>
</html>

OUTPUT:

EN.NO-210410107114 Page|57
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713

EN.NO-210410107114 Page|58
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


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

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Open Window</title>
<script>
function openWindow() {
var width = 500; var height = 500;
var status = "yes"; varurl = "http://www.example.com";
var windowName = "exampleWindow";
var windowFeatures = "width=" + width + ",height=" + height + ",status=" + status;
window.open(url, windowName,
owName, windowFeatures); }
</script>
</head>
<body>
<button onclick="openWindow()">Open Window</button>
</body>
</html>
OUTPUT:

EN.NO-210410107114 Page|59
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


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

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Open
Open Multiple Windows on Button Click</title>
</head>
<body>
<button onclick="openWindows()">Open Windows</button>
<script>
function openWindows() {
// Set the number of windows you want to open
var numWindows = 3; // Loop through and open each window
for (var i = 0; i<numWindows; i++) {
window.open('https://www.example.com'); }}
</script>
</body>
</html>
OUTPUT:

EN.NO-210410107114 Page|60
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


i. Write a script having 1 textbox, 1 button in 1.htm page. When button is clicked, it
should open new window &display the contents entered in the textbox in the new
window.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Textbox to New Window
</title>
</head>
<body>
<h1>Textbox to New Window</h1>
<form>
label for="text">Enter Text:</label>
<input type="text" id="text" name="text">
<br>
<button type="button"
onclick="openNewWindow()">Submit
</button>
</form>
<script>
function openNewWindow()
{
const text = document.getElementById("text").value;
constnewWindow = window.open("", "newWindow", "width=500,height=500");
newWindow.document.write(`<h1>Text Entered:</h1><p>${text}</p>`);
}
</script>
</body>

EN.NO-210410107114 Page|61
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


</html>

OUTPUT:

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

PROGRAM:
<html>
<body>
<!-- HTML code with text and buttons -->
<div id="text">This is the text to be hidden/showed</div>
<button id="hide">Hide</button>
<button id="show">Show</button>

<script>
// Get the text and buttons elements
const text
xt = document.getElementById("text");
consthideButton = document.getElementById("hide");
constshowButton = document.getElementById("show");
EN.NO-210410107114 Page|62
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


// Hide the text by default
text.style.display = "none";
// Add click event listeners to the buttons
hideButton.addEventListener("click", () =>{ text.style.display = "none";
});
showButton.addEventListener("click", () =>{ text.style.display = "block";
});
</script>
</body>
</html>

OUTPUT:

EN.NO-210410107114 Page|63
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713

PRACTICAL 6
a. Introduction to PHP and MYSQL.

PHP (Hypertext Preprocessor) is a server-side scripting language designed for web development. It is
widely used for creating dynamic web pages and web applications. PHP code is executed on the server side,
and the resulting HTML is sent to the client's browser for display.

MySQL is a popular open-source relational database management system that is used for storing, organizing
and retrieving data. It uses Structured Query Language (SQL) to access and manipulate the data stored in
the database. MySQL is often used in conjunction with PHP to build web applications that require persistent
data storage.

PHP and MySQL are commonly used together to create dynamic web applications. PHP can be used to
generate HTML pages dynamically based on user input, and MySQL can be used to store and retrieve data
entered by users. For example, a simple online store might use PHP to display products and prices on a web
page, and MySQL to store information about customer orders.

PHP and MySQL are both open-source technologies, which means that they are free to use and can be
customized to meet specific development needs. There are also many resources available online for learning
PHP and MySQL, including tutorials, forums, and documentation.

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

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>

EN.NO-210410107114 Page|64
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


<form method="post" action="1.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>

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


<input type="button" value="Cancel" onclick="location.href='index.php';">

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

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Submitted Data</title>
</head>
<body>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];
echo "<p>Username: $username</p>";
echo "<p>Password: $password</p>";
}
?>
</body>
EN.NO-210410107114 Page|65
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


</html>

OUTPUT:

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

PROGRAM:

name1.php

<!DOCTYPE html>
<html>
<body>
<form method="post" action="check.php" id="form">

<label>First Name :</label>


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

<label>Password :</label>
<input type="password" name="pwd"/><br>

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


<input type="reset" value="Cancel">
</form>
EN.NO-210410107114 Page|66
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


</body>
</html>

Check.php

<html>
<body>
<?php if($_POST["fname"]=="admin"&&$_POST["pwd"]=="admin")
header("Location: http://localhost/admin.php");
if($_POST["fname"]=="visitor"&&$_POST["pwd"]=="visitor")
header("Location: http://localhost/visitor.php"); ?>
</body>
</html>

Admin.php

<html>
<body>
<h2>Welcome admin!</h2>
</body>
</html>

Visitor.php

<html>
<body>
<h2>Welcome visitor!</h2>
</body>
EN.NO-210410107114 Page|67
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


</html>
OUTPUT:

EN.NO-210410107114 Page|68
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


d. 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
to1.php where it should contain link with name showdetails and on click of it other
page should be open which shows you the details which you have filled
incookie.phppage.(make use of cookies)

PROGRAM:
Cookie.php

<!DOCTYPE html>
<html>
<body>
<form method="post" action="1.php" id="form">
<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">
</form>
</body></html>

1.php

<!DOCTYPE html>
<html>
<body>
<h2>This is 1.php</h2><br>
<?phpsetcookie("c1",$_POST["fname"]); setcookie("c2",$_POST["lname"]); setcookie("c3",$_POST["email"]);
setcookie("c4",$_POST["phoneno"]); setcookie("c5",$_POST["city"]);
?>
<a href="http://localhost/details.php">Show Details</a>
</body>
</html>

Details.php

<!DOCTYPE html>
<html>
<body>
<h2>Your details</h2><br>
<?php
echo "Name : " ,$_COOKIE["c1"],"<br>"; echo "Surname:
",$_COOKIE["c2"],"<br>"; echo "Email-id: ",$_COOKIE["c3"],"<br>"; echo
"Phone-no: ",$_COOKIE["c4"],"<br>"; echo "City: ",$_COOKIE["c5"],"<br>";

EN.NO-210410107114 Page|69
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


?>
</body>
</html>

OUTPUT:

EN.NO-210410107114 Page|70
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713

e. Same program as above but instead of using cookie use session to store information

PROGRAM:
Session.php

<!DOCTYPE html>
<html>
<body>
<form method="post" action="1.php" id="form">
<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">
</form>
</body>
</html>

1.php

EN.NO-210410107114 Page|71
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713

<!DOCTYPE html>
<html>
<body>
<h2>This is 1.php</h2><br>
<?phpsetcookie("c1",$_POST["fname"]); setcookie("c2",$_POST["lname"]);
setcookie("c3",$_POST["email"]);
setcookie("c4",$_POST["phoneno"]); setcookie("c5",$_POST["city"]); ?>
<a href="http://localhost/details.php">Show Details</a>
</body>
</html>
Details.php

<!DOCTYPE html>
<html>
<body>
<h2>Your details</h2><br>
<?php
echo "Name : " ,$_COOKIE["c1"],"<br>"; echo "Surname: ",$_COOKIE["c2"],"<br>"; echo "Email-id:
",$_COOKIE["c3"],"<br>"; echo "Phone-no: ",$_COOKIE["c4"],"<br>"; echo "City:
",$_COOKIE["c5"],"<br>";
?>
</body>
</html>
OUTPUT:

EN.NO-210410107114 Page|72
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713

EN.NO-210410107114 Page|73
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 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,Phoneno.,Email address. Add
information of 5 students in the database.(All things should be done through php
coding.)

PROGRAM:

<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;}
$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); $conn->query($sql6);


$conn->query($sql7);

EN.NO-210410107114 Page|74
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


$conn->close();
?>
</body>
</html>

OUTPUT:

EN.NO-210410107114 Page|75
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 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.

PROGRAM:
<!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'">Delete record</button><br>
<button
onclick="window.location.href='update.php'">Update record</button>
</body>
</html>

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");

EN.NO-210410107114 Page|76
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


$mysqli -> query("CREATE TABLE
practical8btable( id VARCHAR(10),
fnameVARCHAR(30), lname VARCHAR(30), email VARCHAR(30),
phonenoVARCHAR(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>

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 = $mysqli->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"];

echo
'<tr>
<td>'.$field0name.'</td>
<td>'.$field1name.'</td>
<td>'.$field2name.'</td>
<td>'.$field3name.'</td>
<td>'.$field4name.'</td>
EN.NO-210410107114 Page|77
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


<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>

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();
?>
<a href="http://localhost/displaytable.php">Display table</a>
</body>
</html>

Update.php

<!DOCTYPE html>
<html>
<body>
EN.NO-210410107114 Page|78
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLO
TECHNOLOGY

WEB PROGRAMMING 3160713


<h2>Updationpage!</h2>
<br>
<h3>we are gonna update the phone number of Dhananjay</h3>
<br>
<?php
$mysqli = new mysqli("localhost","root","vb","practical8b");
$mysqli ->query("UPDATE
"UPDATE practical8btable SET phoneno='7600077777' where id=1");
$mysqli ->close();
?><br>
<h3>...Updated!</h3>
<a href="http://localhost/displaytable.php">Display table</a>
</body>
</html>

OUTPUT:

EN.NO-210410107114 Page|79
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713

EN.NO-210410107114 Page|80
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


PRACTICAL 8
a. Create a simple XMLHttpRequest, and retrieve data from a TXT file

PROGRAM:
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change
Content</button>
</div>
<script> function loadDoc() { var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 &&this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
} };
xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); }
</script>
</body>
</html>
OUTPUT:

EN.NO-210410107114 Page|81
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


b. Create a XMLHttpRequest with a callback function, and retrieve data from a TXT file.

PROGRAM:

<!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, cFunction)
{
var xhttp; xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function ()
{
if (this.readyState == 4 &&this.status == 200)
{
cFunction(this);
} };
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp)
{
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>

EN.NO-210410107114 Page|82
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


</body>
</html>

OUTPUT:

EN.NO-210410107114 Page|83
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


Beyond syllabus

a. Introduction to Node JS with example

What is Node.js?

• Node.js is an open source server environment


• Node.js is free
• Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
• Node.js uses JavaScript on the server

Why Node.js?

Node. js uses asynchronous programming!


A common task for a web server can be to open a file on the server and return the content to the client.
Here is how PHP or ASP handles a file request:
1. Sends the task to the computer's file system.
2. Waits while the file system opens and reads the file.
3. Returns the content to the client.
4. Ready to handle the next request.

Here is how Node.js handles a file request:


1. Sends the task to the computer's file system.
2. Ready to handle the next request.
3. When the file system has opened and read the file, the server returns the content to the client.

Node.js eliminates the waiting, and simply continues with the next request.
Node.js runs single-threaded, non-blocking, asynchronously programming, which is very memory efficient.

What Can Node.js Do?

• Node.js can generate dynamic page content


• Node.js can create, open, read, write, delete, and close files on the server
• Node.js can collect form data
• Node.js can add, delete, modify data in your database

EN.NO-210410107114 Page|84
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


What is a Node.js File?

• Node.js files contain tasks that will be executed on certain events


• A typical event is someone trying to access a port on the server
• Node.js files must be initiated on the server before having any effect
• Node.js files have extension ".js"

Command Line Interface

Node.js files must be initiated in the "Command Line Interface" program of your computer.
How to open the command line interface on your computer depends on the operating system. For Windows
users, press the start button and look for "Command Prompt", or simply write "cmd" in the search field.
Navigate to the folder that contains the file "myfirst.js", the command line interface window should look
something like this:

C:\Users\Your Name>_

Initiate the Node.js File

The file you have just created must be initiated by Node.js before any action can take place.
Start your command line interface, write node myfirst.js and hit enter:
Initiate "myfirst.js":
C:\Users\Your Name>node myfirst.js
Now, your computer works as a server!
If anyone tries to access your computer on port 8080, they will get a "Hello World!" message in return!
Start your internet browser, and type in the address: http://localhost:8080

What is a Module in Node.js?

Consider modules to be the same as JavaScript libraries.


A set of functions you want to include in your application.

EN.NO-210410107114 Page|85
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


Built-in Modules

Node.js has a set of built-in modules which you can use without any further installation.

Include Modules

To include a module, use the require() function with the name of the module:
var http = require('http');
Now your application has access to the HTTP module, and is able to create a server: http.createServer(function
(req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('Hello World!'); }).listen(8080);

Create Your Own Modules

You can create your own modules, and easily include them in your applications.
The following example creates a module that returns a date and time object:

Example

Create a module that returns the current date and time: exports.myDateTime = function () { return
Date(); };

Use the exports keyword to make properties and methods available outside the module file.
Save the code above in a file called "myfirstmodule.js"

Include Your Own Module

Now you can include and use the module in any of your Node.js files.

Example
Use the module "myfirstmodule" in a Node.js file:
var http = require('http'); var dt = require('./myfirstmodule'); http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'}); res.write("The date and time are currently: " +
dt.myDateTime()); res.end(); }).listen(8080);

EN.NO-210410107114 Page|86
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


Output-
------------------------------------------------------------------------------------------------ The date and time are
currently Tue Apr 07 2020 18:47:22 GMT+0530 (India Standard Time)
------------------------------------------------------------------------------------------------
Notice that we use ./ to locate the module, that means that the module is located in the same folder as the
Node.js file.
Save the code above in a file called "demo_module.js", and initiate the file:
Initiate demo_module.js:
C:\Users\Your Name>node demo_module.js
If you have followed the same steps on your computer, you will see the same result as the example:
http://localhost:8080

Node.js as a File Server

The Node.js file system module allows you to work with the file system on your computer.
To include the File System module, use the require() method:
var fs = require('fs');
Common use for the File System module:
• Read files
• Create files
• Update files
• Delete files
• Rename files

Events in Node.js

Every action on a computer is an event. Like when a connection is made or a file is opened.
Objects in Node.js can fire events, like the readStream object fires events when opening and closing a file:

Example

var fs = require('fs'); var rs = fs.createReadStream('./demofile.txt'); rs.on('open', function () { console.log('The


file is open'); });
Output:

C:\Users\My Name>node demo_events_open.js The file is open

EN.NO-210410107114 Page|87
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


b. Trending Tools/Technology related to the subject.
 JavaScript Frameworks:
o React.js: Developed and maintained by Facebook, React.js is a JavaScript library for building user
interfaces, particularly single-page applications (SPAs). It allows developers to create reusable UI
components.
o Vue.js: A progressive JavaScript framework for building interactive web interfaces. Vue.js is known for
its simplicity and flexibility, making it easy to integrate into existing projects.
o Angular: Developed and maintained by Google, Angular is a TypeScript-based open-source framework
for building web applications. It provides a comprehensive solution with features like two-way data
binding and dependency injection.

 CSS Frameworks:
o Bootstrap: One of the most popular CSS frameworks, Bootstrap offers pre-designed templates and
components for creating responsive and mobile-first websites. It simplifies the process of styling web
applications.
o Tailwind CSS: Unlike traditional CSS frameworks, Tailwind CSS provides low-level utility classes that
can be composed to build custom designs. It offers flexibility and eliminates the need for writing custom
CSS.

 Build Tools and Bundlers:


o Webpack: A module bundler for JavaScript applications. Webpack bundles JavaScript, CSS, images, and
other assets into optimized bundles for deployment. It also supports features like code splitting and hot
module replacement.
o Parcel: A zero-config web application bundler that requires no configuration. It automatically detects
dependencies and bundles them efficiently, making it easy to get started with new projects.

EN.NO-210410107114 Page|88
SARDAR VALLABHBHAI PATEL INSTITUTE OF TECHNOLOGY

WEB PROGRAMMING 3160713


 Server-Side Technologies:
o Node.js: A runtime environment that allows running JavaScript code on the server-side. Node.js enables
building scalable and high-performance web applications using non-blocking, event-driven architecture.
o Express.js: A minimal and flexible Node.js web application framework that provides a robust set of
features for building web and mobile applications. It simplifies routing, middleware integration, and
request handling.

 API Technologies:
o GraphQL: A query language and runtime for APIs that provides a more efficient, powerful, and flexible
alternative to REST APIs. GraphQL enables clients to request only the data they need, reducing over-
fetching and under-fetching of data.
o RESTful APIs: Representational State Transfer (REST) is an architectural style for designing networked
applications. RESTful APIs use HTTP methods like GET, POST, PUT, and DELETE to perform CRUD
operations (Create, Read, Update, Delete) on resources

EN.NO-210410107114 Page|89

You might also like