ADVANCED WEB
PROGRAMMING
PRACTICAL FILE
PIYANSI SULTANIA | [Link]
PROGRAM | 23503/95
EXPERIMENTS
1. Write a PHP script to reverse the digits of a number.
2. Create a web page containing two text boxes and a button named "Evaluate".
When the user enters numbers in the text boxes and clicks on the "Evaluate" button,
a function should evaluate the sum of the numbers and display the result.
3. Write a PHP script to perform following string operations using in-built functions
and built an interactive web page having buttons for each of the following operation:
a. Find the length of a string
b. Find a substring from a string
c. Replace text within a string
d. Remove whitespace and other predefined characters from both sides of a string.
e. Check if a value is a string
f. Convert the first character of each word in a string into uppercase.
4. Design a Login form and validate that form using PHP code. Display error
message box when data is not valid otherwise redirect to the next page and display
"Welcome username!".
5. Design a student registration form, using appropriate input fields consisting of
following:
a First Name
b. Last Name
C. Gender
d. Roll Number
e. Phone Number
f. Course
PAGE 1
EXPERIMENT 1.
Write a PHP script to reverse the digits of a number.
CODE
<?php
// Iterative function to
// reverse digits of num
function reversDigits($num) {
$rev_num = 0;
while($num > 1) {
$rev_num = $rev_num * 10 + $num % 10;
$num = (int)$num / 10;
return $rev_num;
$num = 123456;
echo "Original number is :".$num;
echo "\r\n";
echo "Reverse of no. is ", reversDigits($num);
?>
PAGE 2
OUTPUT
Create a web page containing two text boxes and a button named
"Evaluate". When the user enters numbers in the text boxes and clicks
on the "Evaluate" button, a function should evaluate the sum of the
numbers and display the result.
CODE
<!DOCTYPE html>
<html>
<head>
<title>Sum of Two Numbers</title>
</head>
<body>
<h2>Add Two Numbers</h2>
<form method="post">
Enter First Number:
PAGE 3
<input type="text" name="num1" required>
<br><br>
Enter Second Number:
<input type="text" name="num2" required>
<br><br>
<input type="submit" name="evaluate" value="Evaluate">
</form>
<?php
if (isset($_POST["evaluate"])) {
$a = $_POST["num1"];
$b = $_POST["num2"];
$sum = $a + $b;
echo "<h3>Result: $sum</h3>";
?>
</body>
</html>
OUTPUT
PAGE 4
Write a PHP script to perform following string operations using in-built
functions and built an interactive web page having buttons for each of the
following operation:
a. Find the length of a string
CODE:
<!DOCTYPE html>
<html>
<head>
<title>PHP String Operations</title>
</head>
PAGE 5
<body>
<h2>String Operations</h2>
<form method="post">
Enter String:
<input type="text" name="mainStr" required><br><br>
Extra Input (Substring / Replace Text):
<input type="text" name="extraStr"><br><br>
<button type="submit" name="length">Find Length</button>
<button type="submit" name="substring">Find Substring</button>
<button type="submit" name="replace">Replace Text</button>
<button type="submit" name="trim">Trim Whitespaces</button>
<button type="submit" name="check">Check if String</button>
<button type="submit" name="ucwords">Uppercase Each Word</button>
</form>
<hr>
<?php
if($_SERVER['REQUEST_METHOD'] == "POST"){
$main = $_POST['mainStr'];
$extra = $_POST['extraStr'];
PAGE 6
echo "<h3>Result:</h3>";
// a. Find Length
if(isset($_POST['length'])){
echo "Length of string: " . strlen($main);
// b. Find Substring
if(isset($_POST['substring'])){
if($extra != ""){
$pos = strpos($main, $extra);
if($pos !== false){
echo "Substring found at position: " . $pos;
} else {
echo "Substring not found.";
} else {
echo "Enter substring in extra input field.";
// c. Replace text within a string
if(isset($_POST['replace'])){
if($extra != ""){
echo "After replacement: " . str_replace($extra, "*****", $main);
} else {
echo "Enter text to replace in extra input field.";
PAGE 7
}
// d. Trim whitespace
if(isset($_POST['trim'])){
echo "After trim: '" . trim($main) . "'";
// e. Check if value is a string
if(isset($_POST['check'])){
if(is_string($main)){
echo "Yes, this is a string.";
} else {
echo "This is not a string.";
// f. Convert first character of each word into uppercase
if(isset($_POST['ucwords'])){
echo "Updated String: " . ucwords($main);
?><body>
</html>
OUTPUT
PAGE 8
Design a Login form and validate that form using PHP code. Display error message
box when data is not valid otherwise redirect to the next page and display "Welcome
username!".
CODE
<!DOCTYPE html>
<html>
<body>
<h2>Login Form</h2>
<form method="post">
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="password"><br><br>
<button type="submit" name="login">Login</button>
</form>
PAGE 9
<?php
if(isset($_POST['login'])) {
$user = $_POST['username'];
$pass = $_POST['password'];
if($user == "" || $pass == "") {
echo "<script>alert('Both fields required!');</script>";
else if($user == "admin" && $pass == "123") {
echo "<h3>Welcome $user!</h3>";
else {
echo "<script>alert('Wrong username or password!');</script>";
?>
</body>
</html>
PAGE 10
Design a student registration form, using appropriate input fields consisting
of following:
a. First Name
b. Last Name
c. Gender
d. Roll Number
e. Phone Number
f. Course
Submit and retrieve the form data using $_POST, $_GET variable.
<!DOCTYPE html>
<html>
<body>
<h2>Student Registration Form</h2>
<form method="post">
First Name: <input type="text" name="fname" required><br><br>
Last Name: <input type="text" name="lname" required><br><br>
Gender:
<input type="radio" name="gender" value="Male" required> Male
<input type="radio" name="gender" value="Female" required> Female
<br><br>
Roll Number: <input type="number" name="roll" required><br><br>
Phone Number: <input type="text" name="phone" required><br><br>
PAGE 11
Course:
<select name="course" required>
<option value="">Select</option>
<option value="[Link]">[Link]</option>
<option value="BBA">BBA</option>
<option value="BCA">BCA</option>
</select><br><br>
<button type="submit" name="register">Submit</button>
</form>
<hr>
<?php
// Submit using POST and show data using GET
if(isset($_POST['register'])){
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$gender = $_POST['gender'];
$roll = $_POST['roll'];
$phone = $_POST['phone'];
$course = $_POST['course'];
// Redirect using GET method
PAGE 12
header("Location: ?
fname=$fname&lname=$lname&gender=$gender&roll=$roll&phone=$pho
ne&course=$course");
exit();
// If redirected: show the data
if(isset($_GET['fname'])){
echo "<h3>Student Details:</h3>";
echo "First Name: " . $_GET['fname'] . "<br>";
echo "Last Name: " . $_GET['lname'] . "<br>";
echo "Gender: " . $_GET['gender'] . "<br>";
echo "Roll Number: " . $_GET['roll'] . "<br>";
echo "Phone Number: " . $_GET['phone'] . "<br>";
echo "Course: " . $_GET['course'] . "<br>";
?>
</body>
PAGE 13
</html>
Write PHP Code to make connection to MySql database, create
database and tables and perform insertion, deletion, and retrieval of
the data (Using SQL operations like JOIN, ORDER BY, GROUP BY)
Display the messages such as "The record is added in the database!"
when data is inserted into the database, "A record is deleted from the
database" when data is deleted from the database. Use appropriate
button names such as Add Data, Delete Data, and Display Data.
CODE
<?php
$cn = mysqli_connect("localhost", "root", "");
mysqli_query($cn, "CREATE DATABASE IF NOT EXISTS studentDB");
mysqli_select_db($cn, "studentDB");
mysqli_query($cn, "CREATE TABLE IF NOT EXISTS students(
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50),
PAGE 14
roll INT
)");
$msg = "";
if(isset($_POST['add'])){
$n = $_POST['name'];
$r = $_POST['roll'];
mysqli_query($cn, "INSERT INTO students(name, roll) VALUES('$n',
'$r')");
$msg = "The record is added in the database!";
if(isset($_POST['delete'])){
$i = $_POST['id'];
mysqli_query($cn, "DELETE FROM students WHERE id=$i");
$msg = "A record is deleted from the database";
?>
<!DOCTYPE html>
<html>
<body
<h3>Student Form</h3>
<form method="post">
Name: <input type="text" name="name"><br><br>
Roll No: <input type="number" name="roll"><br><br>
<button name="add">Add Data</button><br><br>
PAGE 15
Enter ID to Delete: <input type="number" name="id">
<button name="delete">Delete Data</button><br><br>
<button name="show">Display Data</button>
</form>
<p><b><?php echo $msg; ?></b></p>
<?php
if(isset($_POST['show'])){
$res = mysqli_query($cn, "SELECT * FROM students ORDER BY name");
echo "<h3>Student List</h3>";
echo "<table border='1'><tr><th>ID</th><th>Name</th><th>Roll
No</th></tr>";
while($row = mysqli_fetch_assoc($res)){
echo "<tr><td>".$row['id']."</td><td>".$row['name']."</td><td>".
$row['roll']."</td></tr>";
echo "</table>";
?>
</body>
</html>
PAGE 16
Multiplication Table
<!DOCTYPE html>
<html>
<body>
<h3>Multiplication Table</h3>
<form method="post">
Enter a Number: <input type="number" name="num" required>
<button type="submit" name="show">Show Table</button>
</form>
<?php
if(isset($_POST['show'])){
$n = $_POST['num'];
echo "<h4>Table of $n</h4>";
for($i = 1; $i <= 10; $i++){
echo "$n x $i = " . ($n * $i) . "<br>";
PAGE 17
?>
</body>
</html>
jQuery and JSON
1. Change text color and contents using button click events using jQuery
2. Select elements using ID, class, elements name, attribute name
3. Run code on click events in jQuery
<!DOCTYPE html>
<html>
<head>
<title>jQuery Examples</title>
<!-- jQuery CDN -->
<script src="[Link]
<script>
PAGE 18
$(document).ready(function(){
// 1️⃣ Change text + color on button click
$("#btnChange").click(function(){
$("#text1").text("Text changed using jQuery!");
$("#text1").css("color", "blue");
});
// 2️⃣ Select elements by ID, Class, Element name, Attribute
$("#selectElements").click(function(){
// ID Selector
$("#heading").css("color", "green");
// Class Selector
$(".msg").css("font-weight", "bold");
// Element Selector
$("p").css("background-color", "yellow");
// Attribute Selector
$("input[name='username']").val("Selected by Attribute!");
});
// 3️⃣ Run code on click event
$("#runEvent").click(function(){
alert("Button clicked! jQuery event working.");
});
PAGE 19
});
</script>
</head>
<body>
<h2 id="heading">jQuery Demo Page</h2>
<p id="text1">This text will change.</p>
<p class="msg">jQuery is powerful!</p>
<input type="text" name="username" placeholder="Enter name"><br><br>
<button id="btnChange">Change Text</button>
<button id="selectElements">Select Elements</button>
<button id="runEvent">Click Event</button>
</body>
</html>
PAGE 20
PAGE 21