Scribd
Upload
150 views

Web Development Practicals

The document outlines a series of practical programming tasks related to web development, including creating XML documents, using JavaScript for data display, and handling form submissions with AJAX. It covers various topics such as displaying book collections, employee lists, and player details, along with error handling in AJAX requests. Additionally, it includes PHP scripts for variable types and file uploads.

Uploaded by

amolgupta129
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
150 views

Web Development Practicals

The document outlines a series of practical programming tasks related to web development, including creating XML documents, using JavaScript for data display, and handling form submissions with AJAX. It covers various topics such as displaying book collections, employee lists, and player details, along with error handling in AJAX requests. Additionally, it includes PHP scripts for variable types and file uploads.

Uploaded by

amolgupta129
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Web Development - II

Practicals List of Programs

1. Create an XML document to store information about a collection of books, including elements for
title, author, publication year, and genre. Write a simple HTML page that uses JavaScript to load and
display the XML data.

<!DOCTYPE html>
<html lang="en">
<?xml version="1.0" encoding="UTF-8"?>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Collection</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
text-align: center;
}
#bookList {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.book {
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
width: 250px;
background-color: #f9f9f9;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
}
</style>
</head>
<body>

<h2>Book Collection</h2>
<div id="bookList">Loading books...</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
let xmlString = `
<library>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
<genre>Fiction</genre>
</book>
<book>
<title>1984</title>
<author>George Orwell</author>
<year>1949</year>
<genre>Dystopian</genre>
</book>
<book>
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<year>1960</year>
<genre>Classic</genre>
</book>
<book>
<title>The Hobbit</title>
<author>J.R.R. Tolkien</author>
<year>1937</year>
<genre>Fantasy</genre>
</book>
</library>`;

let parser = new DOMParser();


let xml = parser.parseFromString(xmlString, "text/xml");
let books = xml.getElementsByTagName("book");
let output = "";

for (let book of books) {


let title = book.getElementsByTagName("title")[0].textContent;
let author = book.getElementsByTagName("author")[0].textContent;
let year = book.getElementsByTagName("year")[0].textContent;
let genre = book.getElementsByTagName("genre")[0].textContent;

output += `
<div class="book">
<h3>${title}</h3>
<p><strong>Author:</strong> ${author}</p>
<p><strong>Year:</strong> ${year}</p>
<p><strong>Genre:</strong> ${genre}</p>
</div>
`;
}
document.getElementById("bookList").innerHTML = output;
});
</script>
</body>
</html>

2. Create an XML file and an XSLT stylesheet to transform the XML data into an HTML table. Use
the transformNode or XSLTProcessor methods to apply the transformation and display the result in a
web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Collection</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
text-align: center;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>

<h2>Book Collection</h2>
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
<th>Genre</th>
</tr>
</table>
<script>
document.addEventListener("DOMContentLoaded", function() {
let xmlString = `
<library>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
<genre>Fiction</genre>
</book>
<book>
<title>1984</title>
<author>George Orwell</author>
<year>1949</year>
<genre>Dystopian</genre>
</book>
<book>
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<year>1960</year>
<genre>Classic</genre>
</book>
<book>
<title>The Hobbit</title>
<author>J.R.R. Tolkien</author>
<year>1937</year>
<genre>Fantasy</genre>
</book>
</library>`;

let parser = new DOMParser();


let xml = parser.parseFromString(xmlString, "text/xml");
let books = xml.getElementsByTagName("book");
let table = document.querySelector("table");
for (let book of b

3. Write an HTML page with a script that loads an XML file containing a list of employees. Parse the
XML data with JavaScript and display the employee names and departments in a list on the web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f4f4f4;
margin: 5px auto;
padding: 10px;
width: 50%;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<h2>Employee List</h2>
<ul id="employeeList"></ul>

<script>
const xmlData = `<?xml version="1.0" encoding="UTF-8"?>
<company>
<employee>
<name>John Doe</name>
<department>IT</department>
</employee>
<employee>
<name>Jane Smith</name>
<department>Marketing</department>
</employee>
<employee>
<name>Robert Brown</name>
<department>Finance</department>
</employee>
<employee>
<name>Emily Davis</name>
<department>Human Resources</department>
</employee>
</company>`;

document.addEventListener("DOMContentLoaded", function() {
let parser = new DOMParser();
let xml = parser.parseFromString(xmlData, "text/xml");
let employees = xml.getElementsByTagName("employee");
let output = "";

for (let emp of employees) {


let name = emp.getElementsByTagName("name")[0].textContent;
let department = emp.getElementsByTagName("department")[0].textContent;
output += `<li><strong>${name}</strong> - ${department}</li>`;
}
document.getElementById("employeeList").innerHTML = output;
});
</script>
</body>
</html>

4. Develop a form that allows users to submit their contact information (name, email, message). Use
AJAX to send the form data to a server-side script (e.g., a PHP script) that echoes the received data.
Display the server's response on the web page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
text-align: center;
}
form {
width: 50%;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #28a745;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#response {
margin-top: 20px;
color: green;
}
</style>
</head>
<body>
<h2>Contact Us</h2>
<form id="contactForm">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<script>
document.getElementById("contactForm").addEventListener("submit", function(event) {
event.preventDefault();

let formData = new FormData(this);

fetch("contact.php", {
method: "POST",
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById("response").innerHTML = data;
})
.catch(error => {
document.getElementById("response").innerHTML = "Error submitting the form.";
});
});
</script>
</body>
</html>

4. Write an Ajax script to get player details from xml file when user select player name in any game.
Also create xml file to store details of player(name, country, wickets and runs)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Player Details</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
padding: 20px;
}
select, #details {
margin-top: 20px;
font-size: 16px;
padding: 10px;
}
</style>
</head>
<body>
<h2>Select a Player</h2>
<select id="playerSelect">

<option value="">-- Select a Player --</option>


<option value="player1">John Smith</option>
<option value="player2">David Warner</option>
<option value="player3">Virat Kohli</option>
<option value="player4">James Anderson</option>
</select>

<div id="details"></div>
<script>
document.getElementById("playerSelect").addEventListener("change", function() {
let playerId = this.value;
if (playerId) {
fetch("players.xml")
.then(response => response.text())
.then(data => {
let parser = new DOMParser();
let xml = parser.parseFromString(data, "text/xml");
let player = xml.getElementById(playerId);

if (player) {
let name = player.getElementsByTagName("name")[0].textContent;
let country = player.getElementsByTagName("country")[0].textContent;
let wickets = player.getElementsByTagName("wickets")[0].textContent;
let runs = player.getElementsByTagName("runs")[0].textContent;

document.getElementById("details").innerHTML = `<h3>${name}</h3><p>Country:
${country}</p><p>Wickets: ${wickets}</p><p>Runs: ${runs}</p>`;
} else {
document.getElementById("details").innerHTML = "Player not found.";
}
})
.catch(error => console.error("Error loading XML:", error));
} else {
document.getElementById("details").innerHTML = "";
}
});
</script>
</body>
</html>

6. Write an AJAX request to a URL that does not exist. Implement error handling to display a user-
friendly message when the request fails.

document.addEventListener("DOMContentLoaded", function() {
document.getElementById("fetchData").addEventListener("click", function() {
fetch("nonexistent_url.json")
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then(data => {
document.getElementById("output").innerHTML = JSON.stringify(data);
})
.catch(error => {
document.getElementById("output").innerHTML = "Failed to fetch data. Please try again
later.";
console.error("Fetch error:", error);
});
});
});

7. Write a jQuery code to select values from a JSONobject. Also Write a JQuery code to remove all
CSS classes from an Applications.

$(document).ready(function() {
// Selecting values from a JSON object
let jsonData = {
"name": "John Doe",
"age": 30,
"city": "New York"
};

$("#getData").click(function() {
let output = `Name: ${jsonData.name}, Age: ${jsonData.age}, City: ${jsonData.city}`;
$("#output").text(output);
});

// Removing all CSS classes from an application


$("#removeClasses").click(function() {
$("*").removeClass();
});
});

8. Create a PHP script that defines variables of different data types (string, integer, float, boolean,
array). Output the values and types of these variables using echo and var_dump.

<?php
// Defining variables of different data types
$stringVar = "Hello, World!";
$intVar = 42;
$floatVar = 3.14;
$boolVar = true;
$arrayVar = array("Apple", "Banana", "Cherry");

// Output values using echo


echo "String: $stringVar <br>";
echo "Integer: $intVar <br>";
echo "Float: $floatVar <br>";
echo "Boolean: " . ($boolVar ? "true" : "false") . "<br>";
echo "Array: " . implode(", ", $arrayVar) . "<br><br>";

// Output values and types using var_dump


echo "<strong>Variable Types:</strong><br>";
var_dump($stringVar);
echo "<br>";
var_dump($intVar);
echo "<br>";
var_dump($floatVar);
echo "<br>";
var_dump($boolVar);
echo "<br>";
var_dump($arrayVar);
?>

9. Develop an HTML form to upload a file. Write a PHP script to handle the file upload, save the file
on the server, and display a message indicating the file upload status.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
form {
border: 1px solid #ccc;
padding: 20px;
display: inline-block;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<h2>Upload a File</h2>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedFile" required>
<br><br>
<button type="submit" name="uploadBtn">Upload</button>
</form>
</body>
</html>

9. Create a MySQL database and table to store user information (name, email). Write a PHP script to
connect to the database and insert a new user record. Display a success message upon successful
insertion.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "user_database";

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

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// SQL to create table (Run once manually in MySQL)


/*
CREATE DATABASE user_database;
USE user_database;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL UNIQUE
);
*/

// Insert user record


$name = "John Doe";
$email = "[email protected]";

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {


echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

11. Create a web page for Travel agency using PHP.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Agency</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.destination {
margin: 20px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background: #e3f2fd;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Dream Travels</h1>
<p>Your perfect travel partner for amazing destinations.</p>

<?php
$destinations = [
["name" => "Paris", "description" => "The city of lights, romance, and art."],
["name" => "Maldives", "description" => "Tropical paradise with crystal-clear waters."],
["name" => "Tokyo", "description" => "A blend of tradition and futuristic technology."],
["name" => "New York", "description" => "The city that never sleeps."]
];

echo "<h2>Popular Destinations</h2>";


foreach ($destinations as $destination) {
echo "<div class='destination'>";
echo "<h3>" . $destination['name'] . "</h3>";
echo "<p>" . $destination['description'] . "</p>";
echo "</div>";
}
?>
</div>
</body>
</html>

You might also like