Scribd
Upload
29 views

1

The document contains two PHP and HTML assignments. The first assignment demonstrates a PHP callback function that processes different data types, while the second assignment involves creating an HTML page that uses AJAX to fetch and display student information based on a roll number entered by the user. Both assignments include complete code examples and styling for the web pages.

Uploaded by

ramcharan M
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
29 views

1

The document contains two PHP and HTML assignments. The first assignment demonstrates a PHP callback function that processes different data types, while the second assignment involves creating an HTML page that uses AJAX to fetch and display student information based on a roll number entered by the user. Both assignments include complete code examples and styling for the web pages.

Uploaded by

ramcharan M
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Name: Chakkilam Tarun Siddardha

Reg No: 21MIC7027

SWE 4001
Assignment – 2

1. Write PHP program for callback function to pass different data types to perform the operation.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>PHP Callback Example</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #ff6f61, #ffde59,
#6bffb8, #61a3ff);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
}
h1 {
color: #ff6f61;
margin-bottom: 20px;
}
p {
font-size: 1.2em;
color: #333;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>PHP Callback Function Example</h1>
<?php
// Callback function to perform operations based on data type
function processData($data, $callback) {
return $callback($data);
}

// Different callback functions for each data type


$callbacks = [
'integer' => function($data) { return $data * 2; },
'string' => function($data) { return strtoupper($data); },
'array' => function($data) { return array_sum($data); },
'boolean' => function($data) { return $data ? 'TRUE' :
'FALSE'; },
'object' => function($data) { return "Name: " . $data->name
. ", Age: " . $data->age; },
];

// Sample data of different types


$intData = 5;
$stringData = "hello world";
$arrayData = [1, 2, 3, 4, 5];
$boolData = true;
$objectData = (object)[ 'name' => 'Tarun Siidardha', 'age' =>
20 ];

// Process each data type using the respective callback


function
echo "<p>Integer: " . processData($intData,
$callbacks['integer']) . "</p>";
echo "<p>String: " . processData($stringData,
$callbacks['string']) . "</p>";
echo "<p>Array: " . processData($arrayData,
$callbacks['array']) . "</p>";
echo "<p>Boolean: " . processData($boolData,
$callbacks['boolean']) . "</p>";
echo "<p>Object: " . processData($objectData,
$callbacks['object']) . "</p>";
?>
</div>
</body>
</html>
Output:

2. Design a HTML page with text field and submit button. On clicking the submit button make an
AJAX request to a file named info.JSON and print the cooresponding information on the screen based
on the roll no.
Infor.JSON
Student[{101,”Vikaram”,68.9,”Male”},{112,”ram”,98.2,”Male”},{306,”Radha”,58.9,”Female”}]

Note: u have to enter roll no, after submit button corresponding information display on the screen

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Student Info Lookup</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-
serif;
background: radial-gradient(circle, #2C5364, #203A43,
#0F2027);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
color: #fff;
}
.container {
background-color: #1E2D3B;
padding: 30px;
border-radius: 12px;
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
color: #00d4ff;
margin-bottom: 20px;
font-size: 24px;
}
input[type="text"] {
width: 85%;
padding: 12px;
margin: 15px 0;
border: none;
border-radius: 6px;
outline: none;
font-size: 16px;
background-color: #fff;
color: #333;
}
input[type="submit"] {
background-color: #00d4ff;
color: white;
padding: 12px 25px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #00a3cc;
}
.result {
margin-top: 20px;
font-size: 1.2em;
background-color: #203A43;
padding: 15px;
border-radius: 8px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>Student Info Lookup</h1>
<form id="studentForm">
<input type="text" id="rollNo" placeholder="Enter Roll No">
<br>
<input type="submit" value="Submit">
</form>
<div class="result" id="result"></div>
</div>

<script>
// Embedded JSON data
const studentData = {
"Student": [
[101, "Tarun", 68.9, "Male"],
[112, "Saivikas", 98.2, "Male"],
[306, "Lahari", 58.9, "Female"]
]
};

document.getElementById('studentForm').addEventListener('submit',
function(event) {
event.preventDefault(); // Prevent form submission

let rollNo = document.getElementById('rollNo').value;


let resultDiv = document.getElementById('result');

// Find student by roll number


let student = studentData.Student.find(s => s[0] ==
rollNo);

// Display student info or error


if (student) {
resultDiv.innerHTML = `Roll No: ${student[0]}<br>Name:
${student[1]}<br>Marks: ${student[2]}<br>Gender: ${student[3]}`;
} else {
resultDiv.innerHTML = "Student not found!";
}
});
</script>
</body>
</html>
Output:

You might also like