Scribd
Upload
11 views21 pages

Web Technologies

The document outlines the structure of an Order Management System and a Movie Ticket Booking System, detailing the XML files used for product and movie data, HTML pages for user interaction, and JavaScript for functionality. It includes product and order management features, user registration, and ticket booking capabilities. Additionally, it provides styling information for a cohesive user interface across both systems.

Uploaded by

Sangeetha
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
11 views21 pages

Web Technologies

The document outlines the structure of an Order Management System and a Movie Ticket Booking System, detailing the XML files used for product and movie data, HTML pages for user interaction, and JavaScript for functionality. It includes product and order management features, user registration, and ticket booking capabilities. Additionally, it provides styling information for a cohesive user interface across both systems.

Uploaded by

Sangeetha
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/ 21

1….

Order management system

1. Products.xml (Product Data)

<?xml version=”1.0” encoding=”UTF-8”?>

<products>

<product>

<id>1</id>

<name>Product A</name>

<price>100</price>

</product>

<product>

<id>2</id>

<name>Product B</name>

<price>150</price>

</product>

<product>

<id>3</id>

<name>Product C</name>

<price>200</price>

</product>

</products>

2. Orders.xml (Order History)


<?xml version=”1.0” encoding=”UTF-8”?>

<orders>

<order>

<product>Product A</product>

<quantity>2</quantity>

<total>200</total>

</order>

<order>

<product>Product B</product>

<quantity>1</quantity>

<total>150</total>

</order>

<order>

<product>Product C</product>

<quantity>3</quantity>

<total>600</total>

</order>

</orders>

3. Index.html (Main Page – Products & Orders)

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

<head>

<meta charset=”UTF-8”>

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

<title>Order Management System</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<header>

<h1>Order Management System</h1>

<button onclick=”window.location.href=’create-user.html’”>Create User</button>

</header>

<section class=”products”>

<h2>Available Products</h2>

<div id=”productList”></div>

</section>

<section class=”orders”>

<h2>Order History</h2>

<table id=”orderTable”>

<tr>

<th>Product</th>
<th>Quantity</th>

<th>Total</th>

</tr>

</table>

</section>

<script src=”script.js”></script>

</body>

</html>

4. Create-user.html (User Registration Page)

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

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

<title>Create User</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body class=”gradient-bg”>
<div class=”form-container”>

<h2>Create User</h2>

<form id=”userForm”>

<input type=”text” id=”name” placeholder=”Full Name” required>

<input type=”email” id=”email” placeholder=”Email” required>

<input type=”tel” id=”phone” placeholder=”Phone Number” required>

<input type=”date” id=”dob” required>

<input type=”password” id=”password” placeholder=”Password” required>

<button type=”submit”>Create User</button>

</form>

</div>

<script>

Document.getElementById(“userForm”).addEventListener(“submit”, function(event) {

Event.preventDefault();

Let formData = `<user>

<name>${document.getElementById(“name”).value}</name>

<email>${document.getElementById(“email”).value}</email>

<phone>${document.getElementById(“phone”).value}</phone>

<dob>${document.getElementById(“dob”).value}</dob>
<password>${document.getElementById(“password”).value}</password>

</user>`;

Let xhr = new XMLHttpRequest();

Xhr.open(“POST”, “server-url-here”, true);

Xhr.setRequestHeader(“Content-Type”, “application/xml”);

Xhr.send(formData);

Xhr.onload = function() {

If (xhr.status == 200) {

Alert(“User created successfully!”);

} else {

Alert(“Error creating user.”);

};

});

</script>

</body>

</html>

5. Script.js (Load Products & Orders)


Document.addEventListener(“DOMContentLoaded”, function() {

loadProducts();

loadOrders();

});

// Load Products from XML

Function loadProducts() {

Let xhr = new XMLHttpRequest();

Xhr.open(“GET”, “products.xml”, true);

Xhr.send();

Xhr.onload = function() {

If (xhr.status == 200) {

Let xml = xhr.responseXML;

Let products = xml.getElementsByTagName(“product”);

Let productList = document.getElementById(“productList”);

For (let I = 0; I < products.length; i++) {

Let name = products[i].getElementsByTagName(“name”)[0].textContent;

Let price = products[i].getElementsByTagName(“price”)[0].textContent;

Let productDiv = document.createElement(“div”);

productDiv.classList.add(“product”);

productDiv.innerHTML = `<p>${name}</p>
<p>$${price}</p>

<button onclick=”alert(‘Added to cart!’)”>Add to Cart</button>`;

productList.appendChild(productDiv);

};

// Load Orders from XML

Function loadOrders() {

Let xhr = new XMLHttpRequest();

Xhr.open(“GET”, “orders.xml”, true);

Xhr.send();

Xhr.onload = function() {

If (xhr.status == 200) {

Let xml = xhr.responseXML;

Let orders = xml.getElementsByTagName(“order”);

Let orderTable = document.getElementById(“orderTable”);

For (let I = 0; I < orders.length; i++) {

Let product = orders[i].getElementsByTagName(“product”)[0].textContent;

Let quantity = orders[i].getElementsByTagName(“quantity”)[0].textContent;

Let total = orders[i].getElementsByTagName(“total”)[0].textContent;


Let row = orderTable.insertRow();

Row.innerHTML = `<td>${product}</td>

<td>${quantity}</td>

<td>$${total}</td>`;

};

6. Style.css (Styling)

Body {

Font-family: Arial, sans-serif;

Margin: 0;

Padding: 0;

Text-align: center;

Background-color: #f8f8f8;

Header {

Background-color: #ff0077;

Color: white;

Padding: 15px;
}

Button {

Background-color: #ff0077;

Color: white;

Border: none;

Padding: 10px 15px;

Cursor: pointer;

.products, .orders {

Margin: 20px;

Padding: 20px;

Background: white;

Box-shadow: 0px 0px 10px #ccc;

.product {

Border: 1px solid #ccc;

Padding: 10px;

Display: inline-block;

Margin: 10px;

Table {

Width: 100%;
Border-collapse: collapse;

Th, td {

Padding: 10px;

Border: 1px solid #ddd;

Th {

Background-color: #ff0077;

Color: white;

2.Ticket booking

1. movie.xml (Movie Data Storage)

This XML file stores movie details.

<?xml version=”1.0” encoding=”UTF-8”?>

<movies>

<movie>

<title>Sample Movie 1</title>

<genre>Action</genre>

<totalSeats>50</totalSeats>

<price>10</price>

</movie>
<movie>

<title>Sample Movie 2</title>

<genre>Comedy</genre>

<totalSeats>60</totalSeats>

<price>8</price>

</movie>

</movies>

2. index.html (Home Page – Booking Tickets)

This page lets users book tickets.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

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

<title>Movie Ticket Booking System</title>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<h1>Movie Ticket Booking System</h1>

<a href=”addMovie.html”>Add Movie</a>


<div class=”container”>

<h2>Book Movie Tickets</h2>

<label for=”movieSelect”>Select Movie:</label>

<select id=”movieSelect” onchange=”updatePrice()”></select>

<p id=”moviePrice”>Price: $0</p>

<label for=”seats”>Select Number of Seats:</label>

<input type=”number” id=”seats” min=”1” value=”1”>

<button onclick=”bookTicket()”>Book Ticket</button>

<h2>Booked Movies</h2>

<table id=”bookedMovies”>

<tr>

<th>Movie Title</th>

<th>Seats</th>

<th>Total Price</th>

</tr>

</table>

</div>

<script src=”script.js”></script>

</body>

</html>
3. addMovie.html (Adding New Movies)

This page allows users to add movies.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

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

<title>Add Movie</title>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<h1>Add Movie</h1>

<a href=”index.html”>Book Tickets</a>

<div class=”container”>

<label for=”movieTitle”>Title:</label>

<input type=”text” id=”movieTitle”>

<label for=”genre”>Genre:</label>

<input type=”text” id=”genre”>


<label for=”totalSeats”>Total Seats:</label>

<input type=”number” id=”totalSeats”>

<label for=”price”>Price:</label>

<input type=”number” id=”price”>

<button onclick=”addMovie()”>Add Movie</button>

</div>

<script src=”script.js”></script>

</body>

</html>

4. styles.css (Green Theme Styling)

This file styles the website.

Body {

Font-family: Arial, sans-serif;

Background-color: #e8f5e9; /* Light Green */

Text-align: center;

Margin: 0;

Padding: 0;

}
H1 {

Background-color: #388e3c; /* Dark Green */

Color: white;

Padding: 10px;

.container {

Background: white;

Padding: 20px;

Width: 50%;

Margin: auto;

Box-shadow: 0px 0px 10px gray;

Margin-top: 20px;

Border-radius: 5px;

Button {

Background-color: #4caf50; /* Green */

Color: white;

Border: none;

Padding: 10px;

Cursor: pointer;

Border-radius: 3px;

}
Button:hover {

Background-color: #2e7d32; /* Darker Green */

Table {

Width: 100%;

Margin-top: 10px;

Border-collapse: collapse;

Table, th, td {

Border: 1px solid #388e3c; /* Green Border */

Th {

Background-color: #66bb6a; /* Light Green */

Color: white;

Padding: 10px;

Td {

Padding: 10px;

A{

Display: inline-block;
Margin: 10px;

Padding: 8px 15px;

Background-color: #43a047; /* Medium Green */

Color: white;

Text-decoration: none;

Border-radius: 3px;

A:hover {

Background-color: #2e7d32;

5. script.js (JavaScript for XHR & Booking Logic)

Handles XML loading, ticket booking, and adding movies.

// Load Movies from XML

Function loadMovies() {

Let xhr = new XMLHttpRequest();

Xhr.open(“GET”, “movie.xml”, true);

Xhr.onreadystatechange = function () {

If (xhr.readyState == 4 && xhr.status == 200) {

Let xmlDoc = xhr.responseXML;


Let movies = xmlDoc.getElementsByTagName(“movie”);

Let select = document.getElementById(“movieSelect”);

Select.innerHTML = “”;

For (let I = 0; I < movies.length; i++) {

Let title = movies[i].getElementsByTagName(“title”)[0].textContent;

Let price = movies[i].getElementsByTagName(“price”)[0].textContent;

Let option = document.createElement(“option”);

Option.value = price;

Option.textContent = title;

Select.appendChild(option);

updatePrice();

};

Xhr.send();

// Update Movie Price

Function updatePrice() {

Let price = document.getElementById(“movieSelect”).value;

Document.getElementById(“moviePrice”).textContent = “Price: $” + price;

}
// Book Ticket

Function bookTicket() {

Let select = document.getElementById(“movieSelect”);

Let movieTitle = select.options[select.selectedIndex].text;

Let price = select.value;

Let seats = document.getElementById(“seats”).value;

Let totalPrice = price * seats;

Let table = document.getElementById(“bookedMovies”);

Let row = table.insertRow(-1);

Row.insertCell(0).textContent = movieTitle;

Row.insertCell(1).textContent = seats;

Row.insertCell(2).textContent = “$” + totalPrice;

// Add Movie (Stores Temporarily in Session Storage)

Function addMovie() {

Let title = document.getElementById(“movieTitle”).value;

Let genre = document.getElementById(“genre”).value;

Let seats = document.getElementById(“totalSeats”).value;

Let price = document.getElementById(“price”).value;


Let newMovie =
`<movie><title>${title}</title><genre>${genre}</genre><totalSeats>${seats}</totalSeats><
price>${price}</price></movie>`;

sessionStorage.setItem(“newMovie”, newMovie);

alert(“Movie added successfully!”);

// Load Movies on Page Load

Window.onload = loadMovies;

You might also like