Scribd
Upload
7 views

wt_8_to_10

The document contains multiple PHP and jQuery programs for web development tasks. It includes a visitor counter, a student records sorter using selection sort, jQuery scripts for DOM manipulation and animations, and AJAX examples for loading text and JSON data. Each section is accompanied by HTML/CSS for presentation and user interaction.

Uploaded by

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

wt_8_to_10

The document contains multiple PHP and jQuery programs for web development tasks. It includes a visitor counter, a student records sorter using selection sort, jQuery scripts for DOM manipulation and animations, and AJAX examples for loading text and JSON data. Each section is accompanied by HTML/CSS for presentation and user interaction.

Uploaded by

ankitharam436
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/ 18

8A .

Develop a PHP program (with HTML/CSS) to keep track of the number of


visitors visiting the web page and to display this count of visitors, with relevant
headings.
<?php

$counterFile = "counter.txt";

if (!file_exists($counterFile)) {

file_put_contents($counterFile, "0");

$currentCount = file_get_contents($counterFile);

$newCount = $currentCount + 1;

file_put_contents($counterFile, $newCount);

?>

<!DOCTYPE html>

<html lang="en">

<head>

<title>Visitor Counter | vtucode</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin: 0;

padding: 0;

display: flex;

flex-direction: column;
justify-content: center;

height: 100vh;

background-color: #f4f4f9;

color: #333;

.container {

background: #fff;

padding: 20px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

border-radius: 8px;

margin: 0 auto;

width: 60%;

h1 {

font-size: 2.5em;

margin: 0;

p{

font-size: 1.2em;

color: #555;

</style>

</head>

<body>

<div class="container">

<h1>Welcome to Our Website!</h1>

<p>You are visitor number: <strong><?php echo $newCount; ?></strong></p>


</div>

</body>

</html>

8B . Develop a PHP program (with HTML/CSS) to sort the student records which are
stored in the database using selection sort.

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "students";

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

if ($conn->connect_error) {

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

$sql = "SELECT * FROM students";

$result = $conn->query($sql);

$students = [];

if ($result->num_rows > 0) {

while ($row = $result->fetch_assoc()) {

$students[] = $row;

function selectionSort(&$arr, $key)


{

$n = count($arr);

for ($i = 0; $i < $n - 1; $i++) {

$minIndex = $i;

for ($j = $i + 1; $j < $n; $j++) {

if ($arr[$j][$key] < $arr[$minIndex][$key]) {

$minIndex = $j;

$temp = $arr[$i];

$arr[$i] = $arr[$minIndex];

$arr[$minIndex] = $temp;

selectionSort($students, 'name');

?>

<!DOCTYPE html>

<head>

<title>Sorted Student Records | vtucode</title>

<style>

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background-color: #f0f2f5;

color: #333;

margin: 0;

padding: 20px;

}
h2 {

text-align: center;

color: #4A90E2;

margin-bottom: 20px;

table {

width: 100%;

border-collapse: collapse;

background-color: #fff;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

margin: 0 auto;

th,

td {

padding: 12px 15px;

text-align: left;

border-bottom: 1px solid #ddd;

th {

background-color: #4A90E2;

color: white;

text-transform: uppercase;

letter-spacing: 0.03em;

}
tr {

transition: background-color 0.3s ease;

tr:hover {

background-color: #f1f1f1;

td {

font-size: 0.9em;

color: #555;

@media (max-width: 768px) {

table,

th,

td {

display: block;

width: 100%;

th,

td {

box-sizing: border-box;

tr {

margin-bottom: 15px;

display: block;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);


}

th {

position: absolute;

top: -9999px;

left: -9999px;

td {

border: none;

position: relative;

padding-left: 50%;

text-align: right;

</style>

</head>

<body>

<h2>Sorted Student Records by Name</h2>

<table>

<thead>

<tr>

<th>ID</th>

<th>Name</th>

<th>USN</th>

<th>Branch</th>

<th>Email</th>

<th>Address</th>
</tr>

</thead>

<tbody>

<?php foreach ($students as $student): ?>

<tr>

<td data-label="ID"><?php echo htmlspecialchars($student['id']); ?></td>

<td data-label="Name"><?php echo htmlspecialchars($student['name']); ?></td>

<td data-label="USN"><?php echo htmlspecialchars($student['usn']); ?></td>

<td data-label="Branch"><?php echo htmlspecialchars($student['branch']); ?></td>

<td data-label="Email"><?php echo htmlspecialchars($student['email']); ?></td>

<td data-label="Address"><?php echo htmlspecialchars($student['address']); ?></td>

</tr>

<?php endforeach; ?>

</tbody>

</table>

</body>

</html>
9 . Develop jQuery script (with HTML/CSS) for:

a) Appends the content at the end of the existing paragraph and list.
b) Change the state of the element with CSS style using animate() method.
c) Change the color of any div that is animated.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>jQuery Demo</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

background-color: #f4f4f4;

.container {

max-width: 600px;

margin: auto;

padding: 20px;

background: white;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

.box {

width: 100px;

height: 100px;
background-color: #3498db;

margin: 20px 0;

button {

padding: 10px 15px;

background-color: #2ecc71;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

margin-top: 10px;

button:hover {

background-color: #27ae60;

</style>

</head>

<body>

<div class="container">

<h1>jQuery Demo</h1>

<h2>a. Append Content</h2>

<p id="existingParagraph">This is an existing paragraph.</p>

<ul id="existingList">

<li>Existing item 1</li>

</ul>

<button id="appendButton">Append Content</button>

<h2>b. Animate Element</h2>

<div id="animateBox" class="box"></div>

<button id="animateButton">Animate Box</button>


<h2>c. Animate and Change Color</h2>

<div id="colorBox" class="box"></div>

<button id="colorAnimateButton">Animate and Change Color</button>

</div>

<script>

$(document).ready(function() {

// a. Append content

$("#appendButton").click(function() {

$("#existingParagraph").append(" This content is appended.");

$("#existingList").append("<li>Appended item</li>");

});

// b. Animate element

$("#animateButton").click(function() {

$("#animateBox").animate({

width: "200px",

height: "200px",

opacity: 0.5

}, 1000);

});

// c. Animate and change color

$("#colorAnimateButton").click(function() {

$("#colorBox").animate({

width: "200px",

height: "200px"

}, {

duration: 1000,

step: function(now, fx) {


if (fx.prop === "width") {

$(this).css("background-color", `black `);

});

});

});

</script>

</body>

</html>
10. Develop a JavaScript program with Ajax (with HTML/CSS) for:
a) Use ajax() method (without Jquery) to add the text content from the text file by
sending ajax request.
b) Use ajax() method (with Jquery) to add the text content from the text file by
sending ajax request.
c) Illustrate the use of getJSON() method in jQuery.
d) Illustrate the use of parseJSON() method to display JSON values.

<!DOCTYPE html>

<head>

<title>AJAX Examples | vtucode</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f9;

h1 {

text-align: center;

color: #333;

padding: 20px 0;

#content {

flex-direction: column;

display: flex;

max-width: 600px;

margin: 20px auto;


padding: 20px;

border: 1px solid #ddd;

border-radius: 8px;

background-color: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

button {

display: inline-block;

padding: 10px 15px;

margin: 12px;

border: none;

border-radius: 5px;

background-color: #007bff;

color: #fff;

font-size: 16px;

cursor: pointer;

transition: box-shadow 0.3s;

button:hover {

box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;

button:focus {

box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff;

#output {

display: none;

margin-top: 20px;

padding: 10px;

border-radius: 5px;

white-space: pre-wrap;

max-height: 300px;
overflow-y: auto;

#output.plain-ajax {

background-color: #f0f8ff;

border: 1px solid #b0c4de;

#output.jquery-ajax {

background-color: #f5fffa;

border: 1px solid #98fb98;

#output.jquery-json {

background-color: #fffaf0;

border: 1px solid #ffd700;

#output.parse-json {

background-color: #fff0f5;

border: 1px solid #ff69b4;

</style>

</head>

<body>

<h1>AJAX Examples</h1>

<div id="content">

<button id="plain-ajax-btn">Load Text (Plain AJAX)</button>

<button id="jquery-ajax-btn">Load Text (jQuery AJAX)</button>

<button id="jquery-json-btn">Load JSON (jQuery getJSON)</button>

<button id="parse-json-btn">Load and Parse JSON (jQuery get)</button>

<div id="output"></div>

</div>

<script>

function showOutput(className) {
const output = document.getElementById('output');

output.className = className;

output.style.display = 'block';

document.getElementById('plain-ajax-btn').addEventListener('click', function () {

var xhr = new XMLHttpRequest();

xhr.open('GET', 'textfile.txt', true);

xhr.onload = function () {

if (xhr.status === 200) {

document.getElementById('output').innerText = xhr.responseText;

} else {

document.getElementById('output').innerText = 'Error loading file.';

showOutput('plain-ajax');

};

xhr.send();

});

$('#jquery-ajax-btn').on('click', function () {

$.ajax({

url: 'textfile.txt',

method: 'GET',

success: function (data) {

$('#output').text(data);

},

error: function () {

$('#output').text('Error loading file.');

}).always(function () {

showOutput('jquery-ajax');

});

});
$('#jquery-json-btn').on('click', function () {

$.getJSON('data.json')

.done(function (data) {

$('#output').text(JSON.stringify(data, null, 2));

})

.fail(function () {

$('#output').text('Error loading JSON file.');

})

.always(function () {

showOutput('jquery-json');

});

});$('#parse-json-btn').on('click', function () {

$.get('data.json')

.done(function (data) {

try {

let jsonData;

if (typeof data === 'string') {

jsonData = JSON.parse(data);

} else {

jsonData = data;

$('#output').text(JSON.stringify(jsonData, null, 2));

} catch (e) {

$('#output').text('Error parsing JSON: ' + e.message);

})

.fail(function () {

$('#output').text('Error loading JSON file.');

})

.always(function () {

showOutput('parse-json');
});

});

</script>

</body>

</html>

You might also like