CS1507 Internet Programming Laboratory LTPC Objectives

INTERNET PROGRAMMING LABORATORY 2023-24
CS1507 INTERNET PROGRAMMING LABORATORY L T P C

0 0 4 2
OBJECTIVES
 To develop an ability to design and implement static and dynamic website
 To design interactive web pages using Scripting languages.
 To learn server side programming using servlets, PHP and JSP with database connectivity.
 To develop web pages using XML/XSLT
LIST OF EXPERIMENTS
1. To create an html page with different types of frames such as floating frame, navigation
frame& mixed frame
2. Develop static pages (using only HTML) of an online Book store. The pages should
resemble: www.amazon.com the website should consist the following pages. Home
page, Registration and user Login, User profile page, Books catalog, Shopping cart,
Payment By credit card, order confirmation
3. Design a web page using CSS (Cascading Style Sheets) which includes the following: CO1
a) Use different font, styles: In the style definition you define how each selector should
work (font, color etc.). Then, in the body of your pages, you refer to these selectors
to activate the styles.
b) Set a background image for both the page and single elements on the page.
c) Control the repetition of the image with the background-repeat property.
4. To create a html page to show online exam using JavaScript. CO2
5. Validate the registration, user login, user profile and payment by credit card pages using
CO2
JavaScript.
6. Write an XML file to display the Book information with Title, Author Name, ISBN,
Publisher, Edition and Price .
a) Write a Document Type Definition (DTD) to validate the above XML file. Display the
XML file as follows.
CO2
b) The contents should be displayed in a table. The header of the table should be in
color GREY. And the Author names column should be displayed in one color and
should be capitalized and in bold. Use your own colors for remaining columns.
c) Write XML schema and XSL for the XML file.
7. A web application that lists all cookies stored in the browser on clicking ―list cookies‖
button, add cookies if necessary
8. Consider a case where we have two web Services- an airline service and a travel agent
and the travel agent is searching for an airline. Implement this scenario using Web
Services and Data base.
9. Write a PHP program to input previous reading and present reading and prepare an
electricity bill using the following conditions
Units Consumed Rate
<100 Rs. 3/ Unit CO2
Between 100 and 200 Rs. 4/ Unit
Between 200 and 300 Rs. 5/ Unit
>300 Rs. 6/ Unit
Department of CSE St.Joseph’s College of Engineering

10. Implement the following web application using

a) Servlets
b) PHP
c) JSP
I. A user validation web application, where user submits the login name and
password to server. These are checked against the data already available in CO2
database and if the data matches a successful login page is returned. Otherwise a
failure message is shown to the user.
II. Modify the above program to use an xml file instead of database.
III. Modify the above program to use AJAX to show the result on the same page below
the submit button.
TOTAL : 60 PERIODS
REFERENCE BOOKS
1. Web Design with HTML, CSS, JavaScript and jQuery Set 1st Edition.
2. Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5 (Learning PHP, MYSQL,
Javascript, CSS & HTML5).
3. Murach‘s PHP and MySQL (3rd Edition).
4. Learn JavaScript VISUALLY with Interactive Exercises.
5. JavaScript and JQuery: Interactive Front-End Web Development.
6. PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide.
COURSE OUTCOMES
Upon completion of the course, students will be able to
CO1 Design screen-based user interfaces, with graphics, textual components, and navigation
systems to achieve a unified, functional environment that results in static web pages
CO2 Design and implement dynamic websites with good aesthetic sense of designing and latest
technical know-how's.
CO3 Have a Good grounding of Web Application Terminologies, Internet Tools, E – Commerce and
other web services
MAPPING OF COs WITH POs AND PSOs
PROGRAM SPECIFIC
PROGRAM OUTCOMES (POs)
COs OUTCOMES (PSOs)
PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO3
CO1 3 3 3 3 2 - - - - 2 2 2 3 3 2
CO2 3 3 3 3 2 - - - - 2 2 2 3 3 2
CO3 3 3 3 3 2 - - - - 2 2 2 3 3 2

Ex.No 1 : To create an html page with different types of frames such as floating frame,
navigation frame& mixed frame
Aim: Create an HTML page with different types of frames, including a floating frame,
navigation frame, and mixed frame.
Procedure/Algorithm:
1. Set up the basic HTML structure for the frameset.

2. Define the frameset rows and columns.
3. Specify the sources (content) for each frame.
4. Customize the attributes and styles of each frame to achieve the desired effects.
5. Save the HTML code and open it in a web browser to view the result.
Coding Example
index.html
<!DOCTYPE html>
<html>
<head>
<title>Frame Example</title>
</head>
<frameset cols="20%, 80%">

<frame src="floating.html" frameborder="0" noresize scrolling="no">

<frameset rows="15%, 85%">
<frame src="navigation.html" frameborder="0" noresize scrolling="no">
<frame src="content.html" frameborder="0" noresize scrolling="yes">
</frameset>
</frameset>
</html>
floating.html:
<!DOCTYPE html>
<html>
<head>

<title>Floating Frame</title>
<style>
body {
margin: 0;
padding: 0;
background-color: lightblue;
}
h1 {
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>Floating Frame Content</h1>
</body>
</html>
navigation.html:
<!DOCTYPE html>
<html>
<head>
<title>Navigation Frame</title>
<style>
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;

}
li {
padding: 10px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
li:hover {
background-color: #e6e6e6;
}
a{
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
content.html:
<!DOCTYPE html>
<html>
<head>
<title>Content Frame</title>
<style>
body {

margin: 0;
padding: 20px;
}
.hotspot {
position: relative;
display: inline-block;
}
.hotspot img {
width: 100%;
height: auto;
}
.hotspot .overlay {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.7);
opacity: 0;
transition: opacity 0.3s ease;
padding: 10px;
color: #333;
}
.hotspot:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h1>Welcome to the Content Frame</h1>
<div class="hotspot">
<img src="india.jpg" alt="India Map" usemap="#hotspot-map">

<div class="overlay">
<p>This is a hotspot!</p>
</div>
</div>
<p>India is a federal union comprising 28 states and 8 union territories, with a total of 36
entities. The states and union territories are further subdivided into districts and smaller
administrative divisions..</p>
<map name="hotspot-map">
<area shape="rect" coords="50,50,200,200" href="https://www.tamilnadu.com"
alt="Hotspot Link">
<area shape="circle" coords="300,150,50" href="https://www.kerala.com" alt="Hotspot
Link">
<area shape="poly" coords="400,100,450,200,350,200" href="https://www.andra.com"
alt="Hotspot Link">
</map>
</body>
</html>
Output :
Result :
Successfully created all frames and various hotspot

Ex.No : 2 Develop static pages (using only HTML) of an online Book store. The pages
should resemble: www.amazon.com the website should consist the following pages. Home
page, Registration and user Login, User profile page, Books catalog, Shopping cart, Payment
By credit card, order confirmation
Aim: Develop static pages for an online bookstore resembling www.amazon.com.
Procedure:
1. Identify the different pages required for the online bookstore: Home page,
Registration and User Login, User Profile page, Books Catalog, Shopping Cart,
Payment by Credit Card, and Order Confirmation.
2. Create a new directory for your project and navigate into it using a command line
interface.
3. Use a text editor or an Integrated Development Environment (IDE) to create HTML
files for each page.
4. Start with the Home page:
 Write the HTML structure, including the <!DOCTYPE html> declaration,
<html> tags, <head> section, and <body> section.
 Add the necessary elements for the Home page, such as a header, navigation
menu, featured books, and footer.
 Style the page using CSS to achieve the desired layout and visual appearance.
5. Repeat the process for the remaining pages:
 Registration and User Login: Create a form for user registration and login.
 User Profile page: Display user information and allow users to edit their profile.
 Books Catalog: Create a grid or list view to display books with their details.
 Shopping Cart: Show the selected books, allow users to modify quantities or
remove items.
 Payment by Credit Card: Create a form for users to enter their credit card details.
 Order Confirmation: Display a confirmation message after a successful order.
6. Link the pages together using hyperlinks and navigation menus.
7. Test the pages by opening them in a web browser to ensure they render correctly.
8. Optionally, you can enhance the pages further by adding images, additional
interactivity, or improving the layout and design.

Home.html
<!DOCTYPE html>
<html>
<head>
<title>Online Bookstore</title>
<style>
/* CSS styles for the page */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
padding: 10px;
text-align: center;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.featured-books {
text-align: center;
padding: 20px;
}
footer {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to the Online Bookstore</h1>
</header>
<nav>

<ul>
<li><a href="home.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="catalog.html">Books Catalog</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="payment.html">Payment</a></li>
<li><a href="confirmation.html">Order Confirmation</a></li>
</ul>
</nav>
<div class="featured-books">
<h2>Featured Books</h2>
<p>Here are some of our top picks:</p>
<ul>
<li>Book 1</li>
<li>Book 2</li>
<li>Book 3</li>
</ul>
</div>
<footer>
<p>© 2023 Online Bookstore. All rights reserved.</p>
</footer>
</body>
</html>
Login.html
<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
}
form {
margin-top: 20px;
}
form label {

display: block;
margin-bottom: 5px;
}
form input[type="text"],
form input[type="password"],
form input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
color: #fff;
cursor: pointer;
}
form input[type="submit"]:hover {
}
.message {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>User Login</h2>
<form>
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Enter your email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
password" required>
<input type="submit" value="Login">

</form>
<div class="message">
<p>Don't have an account? <a href="register.html">Register</a></p>
</div>
</div>
</body>
</html>
register.html
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>

<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
}
form {
margin-top: 20px;
}
form label {
display: block;
margin-bottom: 5px;
}
form input[type="password"],
width: 100%;
padding: 10px;
border-radius: 4px;
}
color: #fff;
cursor: pointer;
}
}
.message {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<h2>Registration</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="email">Email:</label>

<input type="text" id="email" name="email" placeholder="Enter your email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
password" required>
<input type="submit" value="Register">

</form>
<p>Already have an account? <a href="login.html">Login</a></p>
</div>
</div>
</body>
</html>
profile.html
<!DOCTYPE html>
<html>
<head>
<title>User Profile</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
}
.profile-info {
margin-top: 20px;
}
.profile-info label {
display: block;
margin-bottom: 5px;
}
.profile-info span {
font-weight: bold;
}
.message {
text-align: center;
margin-top: 10px;
}
</style>
</head>

<body>
<h2>User Profile</h2>
<div class="profile-info">
<label>Name:</label>
<span>John Doe</span>
<label>Email:</label>
<span>johndoe@example.com</span>
<label>Address:</label>
<span>123 Main St, City, Country</span>
</div>
<p><a href="edit-profile.html">Edit Profile</a></p>
</div>
</div>
</body>
</html>
catlog.html
<!DOCTYPE html>
<html>
<head>
<title>Books Catalog</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
}
.book-list {
margin-top: 20px;
}
.book {
display: flex;
border-radius: 4px;
padding: 10px;
}
.book img {

max-width: 100px;
margin-right: 10px;
}
.book-info {
flex: 1;
}
.book-info h3 {
margin: 0;
}
.book-info p {
margin: 5px 0;
}
</style>
</head>
<body>
<h2>Books Catalog</h2>
<div class="book-list">
<div class="book">
<img src="book1.jpg" alt="Book 1">
<div class="book-info">
<h3>Book Title 1</h3>
<p>Author: Author Name 1</p>
<p>Price: $19.99</p>
<p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="book">
<div class="book-info">
<p>Price: $24.99</p>
<p>Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

</div>
</div>
</body>
</html>
Cart.html
<!DOCTYPE html>
<html>
<head>
<title>Shopping Cart</title>
<style>
body {
margin: 0;

padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
}
.cart-items {
margin-top: 20px;
}
.item {
display: flex;
border-radius: 4px;
padding: 10px;
}
.item img {
max-width: 100px;
margin-right: 10px;
}
.item-info {
flex: 1;
}
.item-info h3 {
margin: 0;
}
.item-info p {
margin: 5px 0;
}
.subtotal {
text-align: right;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Shopping Cart</h2>
<div class="cart-items">
<div class="item">
<div class="item-info">
<p>Price: $19.99</p>
<p>Quantity: 1</p>
</div>
</div>
<div class="item">


<div class="item-info">
<p>Price: $24.99</p>
<p>Quantity: 2</p>
</div>
</div>

</div>
<div class="subtotal">
<p>Subtotal: $69.97</p>
</div>
<div>
<button>Checkout</button>
</div>
</div>
</body>
</html>
payment.html
<!DOCTYPE html>
<html>
<head>
<title>Payment</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
h2 {
text-align: center;
}
form {
margin-top: 20px;
}
form label {
display: block;
margin-bottom: 5px;
}
form input[type="number"],

width: 100%;
padding: 10px;
border-radius: 4px;
}
color: #fff;
cursor: pointer;
}
}
</style>
</head>
<body>
<h2>Payment</h2>
<form>
<label for="card-number">Card Number:</label>
<input type="text" id="card-number" name="card-number" placeholder="Enter your card
number" required>
<label for="expiry-date">Expiry Date:</label>

<input type="text" id="expiry-date" name="expiry-date" placeholder="MM/YYYY"
required>
<label for="cvv">CVV:</label>
<input type="number" id="cvv" name="cvv" placeholder="Enter the CVV" required>
<input type="submit" value="Pay Now">

</form>
</div>
</body>
</html>
confirmation.html
<!DOCTYPE html>
<html>
<head>
<title>Order Confirmation</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 0 auto;

padding: 20px;
}
h2 {
text-align: center;
}
.order-details {
margin-top: 20px;
}
.order-details label {
display: block;
margin-bottom: 5px;
}
.order-details span {
font-weight: bold;
}
.message {
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<h2>Order Confirmation</h2>
<div class="order-details">
<label>Order Number:</label>
<span>123456789</span>
<label>Items:</label>
<span>Book Title 1, Book Title 2</span>
<label>Total Amount:</label>
<span>$69.97</span>
</div>
<p>Thank you for your order!</p>
</div>
</div>
</body>
</html>






Result :
An online Book store created and implemented successfully

CS1507 Internet Programming Laboratory LTPC Objectives

Uploaded by

Copyright:

Available Formats

CS1507 Internet Programming Laboratory LTPC Objectives

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CS1507 Internet Programming Laboratory LTPC Objectives

Uploaded by

Copyright:

Available Formats

INTERNET PROGRAMMING LABORATORY 2023-24

CS1507 INTERNET PROGRAMMING LABORATORY L T P C

Department of CSE St.Joseph’s College of Engineering

10. Implement the following web application using

Department of CSE St.Joseph’s College of Engineering

1. Set up the basic HTML structure for the frameset.

<frameset cols="20%, 80%">

<frame src="floating.html" frameborder="0" noresize scrolling="no">

<frameset rows="15%, 85%">

<frame src="navigation.html" frameborder="0" noresize scrolling="no">

<frame src="content.html" frameborder="0" noresize scrolling="yes">

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Aim: Develop static pages for an online bookstore resembling www.amazon.com.

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

<input type="submit" value="Login">

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

<input type="text" id="email" name="email" placeholder="Enter your email" required>

<input type="submit" value="Register">

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

<img src="book2.jpg" alt="Book 2">

Department of CSE St.Joseph’s College of Engineering

<label for="expiry-date">Expiry Date:</label>

<input type="submit" value="Pay Now">

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

Department of CSE St.Joseph’s College of Engineering

An online Book store created and implemented successfully

Department of CSE St.Joseph’s College of Engineering

You might also like