Scribd
Upload
19 views

WEB_LABS-1

Uploaded by

abhishekvatsavhpt
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
19 views

WEB_LABS-1

Uploaded by

abhishekvatsavhpt
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/ 19

<!

-- PROGRAM - 1 -->
<!DOCTYPE html>

<head>
<title>My First Web Page </title>
</head>

<body>
<!-- Moving text -->
<marquee>Welcome to BIT</marquee>
<!-- Different heading tags -->
<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>
<!-- Paragraph -->
<p>This is a paragraph demonstrating the use of the paragraph tag in HTML.</p>
<!-- Horizontal line -->
<hr>
<!-- Line break -->
<p>This is a line of text before the break.<br>This is a line of text after the break.</p>
<!-- Block Quote -->
<blockquote>
This is a blockquote. It is used to display a quotation or excerpt from another source. </blockquote>
<!-- Pre tag -->
<pre>
This is preformatted text.
It preserves spaces and line breaks.
</pre>
<!-- Different Logical Style tags -->
<p>This is <b>bold</b> text.</p>
<p>This is <i>italicized</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <sup>superscript</sup> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strong</strong> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>small</small> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<p>This is <code>inline code</code> text.</p>
</body>

</html>

<!-- Program 2 -->


<!DOCTYPE html>

<head>
<title> 5th sem Time Table</title>
<style>
body {
font-family: Arial, sans-serif;
}

table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}

th,
td {
border: 1px solid #0d0101;
padding: 8px;
text-align: center;
}

th {
background-color: #f4f4f4;
color: #333;
}

tr:nth-child(even) {

background-color: #f9f9f9;
}

tr:nth-child(odd) {
background-color: #e6f7ff;
}
.lab-hour {
background-color: #ffcccc;
}

.elective-hour {
background-color: #ccffcc;
}

.highlight {
font-weight: bold;
color: #d63384;
}

tfoot {
background-color: #e0e0e0;
font-weight: bold;
}
</style>
</head>

<body>
<h1 style="text-align: center;">Time Table 5th sem</h1>
<table>
<thead>
<tr>
<th>Day/Time</th>
<th>8:00 - 9:00</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>Break</th>
<th>11:30 - 12:30</th>
<th>12:30 - 1:30</th>
<th>Lunch Break</th>
<th>2:00 - 3:00</th>
<th>3:00 - 4:00</th>
<th>4:00 - 5:00</th>
</tr>
</thead>

<tbody>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td class="lab-hour">Physics Lab</td>
<td rowspan="5" class="highlight">Break</td>
<td>Elective</td>
<td class="elective-hour">Elective</td>
<td rowspan="5" class="highlight">Lunch Break</td>
<td>History</td>
<td colspan="2" class="highlight">club Activities</td>
</tr>
<tr>
<td>Tuesday</td>
<td class="elective-hour">Elective</td>
<td>Biology</td>
<td>Math</td>
<td class="lab-hour">Chemistry Lab</td>
<td>Geography</td>
<td>PE</td>
<td colspan="2" class="highlight">library</td>
</tr>
<tr>
<td>Wednesday</td>
<td>History</td>
<td class="lab-hour">Computer Lab</td>
<td>English</td>
<td>Math</td>
<td>Physics</td>
<td class="elective-hour">Elective</td>
<td colspan="2" class="highlight">yoga</td>
</tr>
<tr>
<td>Thursday</td>
<td>PE</td>
<td>History</td>
<td>Geography</td>
<td class="elective-hour">Elective</td>
<td>Biology</td>
<td>Math</td>
<td colspan="2" class="highlight">NSS Activity</td>
</tr>

<tr>
<td>Friday</td>
<td class="lab-hour">Biology Lab</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td class="elective-hour">Elective</td>
<td>Chemistry</td>
<td colspan="2" class="highlight">SCR ACTIVITY</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="11">End of Timetable</td>
</tr>
</tfoot>
</table>
</body>

</html>

<!-- program 3 : index.html -->


<!DOCTYPE html>

<head>
<title>Styled HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h2>This is a Main Heading</h2>
<h3>This is a Subheading</h3>
<hr>
<p>This is a paragraph demonstrating the basic text styling applied by CSS.</p>
<div>
This is a styled <strong>div</strong> element with padding and a light border. Inside
the div, we can also use
<span>span elements</span> that have their own styles, like this bold and orange text.
</div>
<p>Current time<time>10:30 AM</time></p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSkxM7bqUhVW4EaLOR21oEaV0sj7bb05kCNDg&s"
alt="Placeholder Image">
<p>Visit <a href="https://bit-bangalore.edu.in/">bit-bangalore.edu.in</a> to know more about our college.</p>
<p class="highlight">This paragraph is highlighted with a yellow background.</p>
<p class="center">This text is centered using a class selector.</p>
<p id="special-paragraph">This is a special paragraph with unique styles applied through an ID selector.</p>
</body>

</html>

/* PROGRAM 3 style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

h2 {
color: #2c3e50;
font-size: 2em;
margin-bottom: 10px;
}

h3 {
color: #34495e;
font-size: 1.5em;
margin-bottom: 8px;
}

hr {
border: 0;
height: 2px;
background-color: #e74c3c;
margin: 20px 0;
}

p {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 10px 0;
}
div {
padding: 15px;
border: 1px solid #bdc3c7;
background-color: #ecf0f1;
}

span {
color: #e67e22;
font-weight: bold;
}

time::before {
content: '<<';
color: #16a085;
}

time::after {
content: '>>';
color: #ff0000;
}

img {
margin-left: 15px;
height: 300px;
width: 400px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 100%;
}

a {
text-decoration: none;
color: #ea0e4c;
}

a:hover {
color: #6200ee;
text-decoration: underline;
}

.highlight {
background-color: yellow;
padding: 3px;
}

.center {
text-align: center;
}

#special-paragraph {
font-size: 1.2em;
color: #8e44ad;
background-color: #f5f5f5;
padding: 10px;
border-left: 5px solid #8e44ad;
}

h2,
h3,
p {
margin-left: 20px;
}
<!-- Program 4 -->
<!DOCTYPE html>
<html>

<head>
<title>Registration Form</title>
<style>
body {
margin: 0;
padding: 20px;
}

h1 {
color: #333;
text-align: center;
}

table {
width: 100%;
max-width: 700px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

td {
padding: 10px;
}

label {
color: #555;
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
}

input[type="submit"]:hover {
background-color: #45a049;
}

.error {
color: #ff0000;
font-size: 14px;
}
</style>
</head>

<body>
<h1>Registration Form</h1>
<table>
<form action="#" method="post">
<tr>
<td><label for="fullname">Full Name:</label></td>
<td><input type="text" id="fullname" name="fullname" required></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>

<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>
<tr>
<td><label for="confirm_password">Confirm password:</label></td>
<td><input type="password" id="confirm_password" name="confirm_password" required></td>
</tr>
<tr>
<td><label>Gender:</label></td>
<td><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>
<input type="radio" id="other" name="gender" value="other" required>
<label for="other">Other</label>
</td>
</tr>
<tr>
<td><label for="birthdate">Date of Birth:</label></td>
<td><input type="date" id="birthdate" name="birthdate" required></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country" required>
<option value="">Select a country</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><label for="interests">Interests:</label></td>
<td>
<input type="checkbox" id="sports" name="interests[]" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests[]" value="music">
<label for="music">Music</label>
<input type="checkbox" id="reading" name="interests[]" value="reading">
<label for="reading">Reading</label> <input type="checkbox" id="travel" name="interests[]"
value="travel"> <label for="travel">Travel</label>
</td>
</tr>
<tr>
<td><label for="bio">Bio:</label></td>
<td><textarea id="bio" name="bio" rows="4"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="Register">
</td>
</tr>
</table>
</form>
</body>

</html>
<!DOCTYPE html>

<head>
<title>Newspaper Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
padding: 20px;
font-family: 'Arial', sans-serif;
color: #000;
}

header {
margin-bottom: 30px;
background-color: #7b38f7;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
}

header a,
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}

.content {
display: flex;
justify-content: space-between;
}

.main-content {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
background-color: #fff;
padding: 20px;
}

aside {
width: 350px;
margin-left: 20px;
}

article {
background-color: #fff;
padding: 15px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

img {
max-width: 100%;
height: auto;
}

footer {
background-color: #7b38f7;
color: #fff;
padding: 20px;
text-align: center;
margin-top: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

th,
td {
padding: 8px;
text-align: left;
}

thead {
background-color: #007BFF;
color: #fff;
}
</style>
</head>

<body>
<header>
<a href="#">Newspaper</a>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Services</a>
<a href="#">Marketing</a>
<a href="#">Updates</a>
</nav>
</header>
<div class="content">
<main class="main-content">
<article>
<h2>Article Title 1</h2>
<figure>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
<figcaption>Image Caption</figcaption>
</figure>
<p>This is the content of the first article. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
<h2>Article Title 2</h2>
<figure>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
<figcaption>Image Caption</figcaption>
</figure>
<p>This is the content of the second article. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
<h2>Article Title 3</h2>
<figure>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
<figcaption>Image Caption</figcaption>
</figure>
<p>This is the content of the third article. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
<h2>Article Title 4</h2>
<figure>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
<figcaption>Image Caption</figcaption>
</figure>
<p>This is the content of the fourth article. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
<h2>Article Title 5</h2>
<figure>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
<figcaption>Image Caption</figcaption>
</figure>
<p>This is the content of the fourth article. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
<h2>Article Title 6</h2>
<figure>
<img src="https://via.placeholder.com/600x400" alt="Placeholder Image">
<figcaption>Image Caption</figcaption>
</figure>
<p>This is the content of the fourth article. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
</main>
<aside class="related-news">
<h3>Related News</h3>
<ul>
<li><a href="#">Related News 1</a></li>
<li><a href="#">Related News 2</a></li>
<li><a href="#">Related News 3</a></li>
</ul>
</aside>
</div>
<section>
<h2>Recent Posts</h2>
<div>
<table>
<caption>List of Posts</caption>
<thead>
<tr>
<th>Post Title</th>
<th>Date</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>Post 1</td>
<td>2024-08-30</td>
<td>Author 1</td>
</tr>
<tr>
<td>Post 2</td>
<td>2024-08-29</td>
<td>Author 2</td>
</tr>
<tr>
<td>Post 3</td>
<td>2024-08-28</td>
<td>Author 3</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer>
<p>© 2024 Newspaper. All rights reserved.</p>
</footer>
</body>

</html>

<!-- Program 6 -->


<!DOCTYPE html>

<head>
<title>Simple Calculator</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.calculator {
background: #cdd1f4;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 320px;
text-align: center;
}

h1 {
border-radius: 8px;
background: #000;
font-size: 24px;
padding: 10px;
color: #ffffff;
margin-bottom: 30px;
}

input,
select,
button {
width: 100%;
margin: 10px 0;
padding: 12px;
border: 1px solid #0808081d;
border-radius: 8px;
font-size: 16px;
box-sizing: border-box;
}

button {
margin-bottom: 20px;
}

#operation {
cursor: pointer;
}

input:focus,
select:focus,
button:focus {
outline: none;
border-color: #ff00009d;
box-shadow: 0 0 0 3px rgba(252, 0, 0, 0.5);
}

button {
background-color: #007bff;
color: white;
cursor: pointer;
font-size: 18px;
}

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;
}
</style>
</head>

<body>
<div class="calculator">
<h1>Simple Calculator</h1>
<form id="calculator-form">
<input type="number" id="num1" placeholder="Enter first number" required>
<input type="number" id="num2" placeholder="Enter second number" required>
<select id="operation" required>
<option value="">Select Operation</option>
<option value="sum">Sum</option>
<option value="product">Product</option>
<option value="difference">Difference</option>
<option value="remainder">Remainder</option>
<option value="quotient">Quotient</option>
<option value="power">Power</option>
<option value="sqrt">Square Root</option>
<option value="square">Square</option>
</select>
<button type="button" onclick="calculate()">Calculate</button>
</form>
<div id="result"></div>
</div>
<script>
function calculate() {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
const operation = document.getElementById('operation').value;
let result = ' ';
let resultClass = 'success';
if (isNaN(num1) || isNaN(num2)) {
result = 'Please enter valid numbers.';
resultClass = 'error';
} else {
switch (operation) {
case 'sum':
result = `Sum: ${num1 + num2}`;
break;
case 'product':
result = `Product: ${num1 * num2}`;
break;
case 'difference':
result = `Difference: ${num1 - num2}`;
break;
case 'remainder':
result = `Remainder: ${num1 % num2}`;
break;
case 'quotient':
if (num2 === 0) {
result = 'Cannot divide by zero';
resultClass = 'error';
} else {
result = `Quotient: ${num1 / num2}`;
}
break;
case 'power':
result = `Power: ${Math.pow(num1, num2)}`;
break;
case 'sqrt':
if (num1 < 0 || num2 < 0) {
result = 'Square root is not defined for negative numbers';
resultClass = 'error';
}
else {
result = `Square Root of ${num1}: ${Math.sqrt(num1)} <br> Square Root of ${num2}: $
{Math.sqrt(num2)}`;
}
break;
case 'square':
result = `Square of ${num1}: ${Math.pow(num1, 2)} <br> Square of ${num2}: ${Math.pow(num2,
2)}`;
break;
default:
result = 'Please select an operation.';
resultClass = 'error';
}
}
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = result;
resultDiv.classList.remove('show', 'error', 'success');
resultDiv.classList.add(resultClass, 'show');
}
</script>
</body>

</html>

<!-- Program 7 -->


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

.container {
max-width: 600px;
margin: auto;
}

h1 {
text-align: center;
}

.section {
margin-bottom: 20px;
}

textarea,
input {
width: 100%;
padding: 10px;
margin: 10px 0;
font-size: 14px;
}

button {
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
display: block;
width: 100%;
margin-bottom: 10px;
}

button:hover {
background-color: #0056b3;
}

pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto;
}
</style>
</head>

<body>
<div class="container">
<h1>Simple Converter</h1>

<div class="section">
<h2>1. Convert JSON Text to JavaScript Object</h2>
<textarea id="jsonInput" placeholder="Enter JSON here..."></textarea>
<button onclick="convertJsonToObject()">Convert JSON</button>
<pre id="jsonOutput"></pre>
</div>

<div class="section">
<h2>2. Convert JSON Results into Date</h2>
<textarea id="jsonDateInput" placeholder='Enter JSON with "yyyy-mm-dd" date format'></textarea>
<button onclick="convertJsonToDate()">Convert to Date</button>
<pre id="jsonDateOutput"></pre>
</div>

<div class="section">
<h2>3. Convert JSON to CSV and CSV to JSON</h2>
<textarea id="jsonCsvInput" placeholder="Enter JSON for CSV conversion..."></textarea>
<button onclick="convertJsonToCsv()">JSON to CSV</button>
<pre id="csvOutput"></pre>
<textarea id="csvInput" placeholder="Enter CSV here..."></textarea>
<button onclick="convertCsvToJson()">CSV to JSON</button>
<pre id="jsonCsvOutput"></pre>
</div>

<div class="section">
<h2>4. Create Hash from String</h2>
<input type="text" id="hashInput" placeholder="Enter string to hash">
<button onclick="createHash()">Create Hash</button>
<pre id="hashOutput"></pre>
</div>
</div>

<script>
function convertJsonToObject() {
const input = document.getElementById('jsonInput').value;
try {
const output = JSON.parse(input);
document.getElementById('jsonOutput').textContent = JSON.stringify(output, null, 2);
} catch {
document.getElementById('jsonOutput').textContent = "Invalid JSON!";
}
}

function convertJsonToDate() {
const input = document.getElementById('jsonDateInput').value;
try {
const obj = JSON.parse(input);
const date = new Date(obj.date);
document.getElementById('jsonDateOutput').textContent = date.toString();
} catch {
document.getElementById('jsonDateOutput').textContent = "Invalid JSON or Date!";
}
}

function convertJsonToCsv() {
const input = document.getElementById('jsonCsvInput').value;
try {
const array = JSON.parse(input);
const keys = Object.keys(array[0]);
const csv = [keys.join(','), ...array.map(row => keys.map(key => row[key]).join(','))].join('\n');
document.getElementById('csvOutput').textContent = csv;
} catch {
document.getElementById('csvOutput').textContent = "Invalid JSON!";
}
}

function convertCsvToJson() {
const input = document.getElementById('csvInput').value;
try {
const [headers, ...rows] = input.trim().split('\n');
const keys = headers.split(',');
const json = rows.map(
row => {
const values = row.split(',');
return keys.reduce((acc, key, i) => ({ ...acc, [key]: values[i] }), {});
});
document.getElementById('jsonCsvOutput').textContent = JSON.stringify(json, null, 2);
} catch {
document.getElementById('jsonCsvOutput').textContent = "Invalid CSV!";
}
}

function createHash() {
const input = document.getElementById('hashInput').value;
if (input) {
const hash = CryptoJS.SHA256(input).toString();
document.getElementById('hashOutput').textContent = hash;
} else {
document.getElementById('hashOutput').textContent = "Input is empty!";
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</body>

</html>

<!-- Program 8a -->

<?php
$count_file = 'count.txt';
if (!file_exists($count_file))
{
file_put_contents($count_file, 0);
}
$count = (int)file_get_contents($count_file);
$count++;
file_put_contents($count_file, $count);
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitor counter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Welcome to Our Website!</h1>
<h2>Visitor Count</h2>
<p>Number of visitors: <strong>
<?php echo $count; ?>
</strong></p>
</div>
</body>

</html>

<!-- Program 8b -->


<!-- Program 8b -->
<?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 </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;
}
td:before {
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
color: #4A90E2;
}
}
</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>

<!-- Program 9 -->


<html>

<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>jQuery Example</title>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f7f6;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
text-align: center;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}

.container:hover {
transform: scale(1.02);
}

#paragraph {
margin-bottom: 20px;
color: #333;
font-size: 18px;
line-height: 1.5;
}

#list {
margin-bottom: 20px;
list-style: none;
padding: 0;
}

#list li {
background: #e8f0fe;
margin: 5px 0;
padding: 10px;
border-radius: 8px;
transition: background 0.3s;
}

#list li:hover {
background: #d0e2fe;
}

.box {
padding: 0 10px;
width: 100px;

height: 100px;
background-color: #007bff;
margin: 20px auto;
line-height: 100px;
color: white;
text-align: center;
border-radius: 8px;
transition: all 0.3s ease;
}

button {
padding: 12px 24px;
margin: 10px;
cursor: pointer;
border: none;
border-radius: 6px;
font-size: 16px;
background: #007bff;
color: white;
transition: box-shadow 0.3s, transform 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

button:active {
background: #004494;
transform: translateY(0);
}
</style>
</head>

<body>
<div class="container">
<p id="paragraph">This is an existing paragraph.</p>
<ul id="list">
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="box" id="box">Animate me!</div> <button id="appendButton">Append Content</button> <button
id="animateButton">Animate Box</button>
</div>
<script> $(document).ready(function () {
$("#appendButton").click(function () {
$("#paragraph").append(" Appended text."); $("#list").append("<li>New appended list item</li>");
});
$("#animateButton").click(function () {
$("#box").stop(true, true).css({

width: "100px",
height: "100px",
opacity: 1, backgroundColor: "blue"
}).animate({
width: "200px", height: "200px", opacity: 0.5
}, 1000, function () {
$(this).css("background-color", "green");
});
});
});
</script>
</body>

</html>

<!-- Program 10 -->


<!DOCTYPE html>

<head>
<title>AJAX Examples </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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy