Scribd
Upload
6 views

Sdc Lab Internal

The document outlines the development of a responsive shopping cart web application using HTML, CSS, and Bootstrap, along with client-side JavaScript validation for registration and login forms. It also includes a Java standalone application for CRUD operations with a MySQL database, and an XML representation of a bookstore validated by DTD and XSD. Additionally, it describes creating a custom Node.js server utilizing various modules like http, os, path, and events.

Uploaded by

haribabumudhiraj06
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
6 views

Sdc Lab Internal

The document outlines the development of a responsive shopping cart web application using HTML, CSS, and Bootstrap, along with client-side JavaScript validation for registration and login forms. It also includes a Java standalone application for CRUD operations with a MySQL database, and an XML representation of a bookstore validated by DTD and XSD. Additionally, it describes creating a custom Node.js server utilizing various modules like http, os, path, and events.

Uploaded by

haribabumudhiraj06
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/ 16

Exp-01: Build a responsive web application for shopping cart with registration, login, catalog and cart

pages using CSS3 features, flex and grid.

index.html (Home Page)

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Welcome to Shopping Cart</h1></header>
<nav>
<a href="index.html">Home</a> |
<a href="login.html">Login</a> |
<a href="registration.html">Register</a> |
<a href="cart.html">Cart</a>
</nav>
<main>
<h2>Best Deals on Books</h2>
<p>Save up to 90% on selected books!</p>
</main>
<footer>&copy; 2024 MyShop</footer>
</body>
</html>

login.html

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Login</h2>
<form>
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

registration.html
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Register</h2>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Password: <input type="password" name="pass"><br><br>
Phone: <input type="text" name="phone"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

cart.html

<!DOCTYPE html>
<html>
<head>
<title>Cart</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Your Cart</h2>
<table border="1">
<tr><th>Book</th><th>Price</th><th>Quantity</th><th>Total</th></tr>
<tr><td>HTML Basics</td><td>300</td><td>2</td><td>600</td></tr>
<tr><td>JavaScript</td><td>400</td><td>1</td><td>400</td></tr>
</table>
</body>
</html>

style.css (CSS with Flexbox & Grid)

body {
font-family: Arial;
margin: 20px;
}

header, nav, main, footer {


margin: 10px 0;
padding: 10px;
border-radius: 8px;
}
header {
background-color: #004080;
color: white;
text-align: center;
}

nav {
background-color: #e6e6e6;
display: flex;
justify-content: space-around;
font-weight: bold;
}

main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}

footer {
background-color: #333;
color: white;
text-align: center;
}

Exp-02: Make the above web application responsive web application using Bootstrap framework.

index.html (Responsive with Bootstrap)

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<header class="bg-primary text-white text-center p-3">
<h1>Welcome to Shopping Cart</h1>
</header>

<nav class="nav justify-content-center bg-light mb-3">


<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="login.html">Login</a>
<a class="nav-link" href="registration.html">Register</a>
<a class="nav-link" href="cart.html">Cart</a>
</nav>

<main class="row text-center">


<div class="col-md-6">
<h2>Big Deals</h2>
<p>Up to 90% off on best-selling books.</p>
</div>
<div class="col-md-6">
<img src="https://via.placeholder.com/200" class="img-fluid" alt="Books">
</div>
</main>

<footer class="text-center bg-dark text-white p-2 mt-3">


&copy; 2024 MyShop
</footer>
</div>
</body>
</html>

login.html (Bootstrap Form)

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Login</h2>
<form class="w-50 mx-auto">
<div class="mb-3">
<label class="form-label">Username</label>
<input type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
</html>

registration.html (Bootstrap Form)

<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Register</h2>
<form class="w-50 mx-auto">
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Phone</label>
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-success">Register</button>
</form>
</div>
</body>
</html>

cart.html (Bootstrap Table)

<!DOCTYPE html>
<html>
<head>
<title>Cart</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="text-center">Your Cart</h2>
<table class="table table-bordered table-striped">
<thead class="table-dark">
<tr>
<th>Book</th><th>Price</th><th>Qty</th><th>Total</th>
</tr>
</thead>
<tbody>
<tr><td>HTML Basics</td><td>300</td><td>2</td><td>600</td></tr>
<tr><td>JavaScript</td><td>400</td><td>1</td><td>400</td></tr>
</tbody>
</table>
</div>
</body>
</html>

Exp-03: Use JavaScript for client-side validation of the pages implemented in Experiment 1
(registration and login).

HTML: registration.html

<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<script src="validate.js"></script> <!-- JS file -->
</head>
<body>
<h2>Register</h2>
<form name="regForm" onsubmit="return validateForm()">
Name: <input type="text" name="username"><br><br>
Email: <input type="text" name="email"><br><br>
Password: <input type="password" name="password"><br><br>
Phone: <input type="text" name="phone"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
JavaScript: validate.js

function validateForm() {
let uname = document.regForm.username.value;
let email = document.regForm.email.value;
let pass = document.regForm.password.value;
let phone = document.regForm.phone.value;

if (uname == "" || uname.length < 3) {


alert("Please enter a valid name (min 3 letters).");
return false;
}

if (email == "" || !email.includes("@")) {


alert("Please enter a valid email.");
return false;
}

if (pass.length < 6) {
alert("Password must be at least 6 characters.");
return false;
}

if (phone.length != 10 || isNaN(phone)) {
alert("Please enter a valid 10-digit phone number.");
return false;
}

alert("Registration Successful!");
return true;
}

Simple Example: Login Page Validation

HTML: login.html

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script>
function checkLogin() {
let uname = document.loginForm.username.value;
let pass = document.loginForm.password.value;

if (uname == "" || pass == "") {


alert("Username and password are required.");
return false;
}

alert("Login Successful!");
return true;
}
</script>
</head>
<body>
<h2>Login</h2>
<form name="loginForm" onsubmit="return checkLogin()">
Username: <input type="text" name="username"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

Exp-04: Develop a Java standalone application that connects with MySQL database and performs
CRUD (Create, Read, Update, Delete) operations.

Step 1: MySQL Table Setup

CREATE DATABASE mydb;


USE mydb;

CREATE TABLE student (


id INT PRIMARY KEY,
name VARCHAR(50),
address VARCHAR(100)
);

Step 2: Java CRUD Code (Simple Format for Exam)


1. InsertData.java

import java.sql.*;
import java.util.*;

public class InsertData {


public static void main(String[] args) {
try {
Connection con =
DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "");
Statement stmt = con.createStatement();
Scanner sc = new Scanner(System.in);

System.out.print("Enter ID: ");


int id = sc.nextInt();
System.out.print("Enter Name: ");
String name = sc.next();
System.out.print("Enter Address: ");
String address = sc.next();

String query = "INSERT INTO student VALUES(" + id + ", '" + name + "', '" +
address + "')";
stmt.executeUpdate(query);

System.out.println("Inserted successfully.");
} catch (Exception e) {
System.out.println("Error: " + e);
}
}
}

2. DisplayData.java

import java.sql.*;

public class DisplayData {


public static void main(String[] args) {
try {
Connection con =
DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM student");

System.out.println("ID\tName\tAddress");
while (rs.next()) {
System.out.println(rs.getInt("id") + "\t" + rs.getString("name") + "\t" +
rs.getString("address"));
}
} catch (Exception e) {
System.out.println("Error: " + e);
}
}
}

3. UpdateData.java

import java.sql.*;
import java.util.*;

public class UpdateData {


public static void main(String[] args) {
try {
Connection con =
DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "");
Statement stmt = con.createStatement();
Scanner sc = new Scanner(System.in);

System.out.print("Enter ID to update: ");


int id = sc.nextInt();
System.out.print("Enter New Name: ");
String name = sc.next();
System.out.print("Enter New Address: ");
String address = sc.next();

String query = "UPDATE student SET name='" + name + "', address='" + address +
"' WHERE id=" + id;
stmt.executeUpdate(query);

System.out.println("Updated successfully.");
} catch (Exception e) {
System.out.println("Error: " + e);
}
}
}

4. DeleteData.java

import java.sql.*;
import java.util.*;

public class DeleteData {


public static void main(String[] args) {
try {
Connection con =
DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "");
Statement stmt = con.createStatement();
Scanner sc = new Scanner(System.in);

System.out.print("Enter ID to delete: ");


int id = sc.nextInt();

String query = "DELETE FROM student WHERE id=" + id;


stmt.executeUpdate(query);

System.out.println("Deleted successfully.");
} catch (Exception e) {
System.out.println("Error: " + e);
}
}
}

Exp-05: Create an XML for a bookstore. Validate the same using both DTD and XSD.

1. XML File – bookstore.xml

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


<!DOCTYPE bookstore SYSTEM "bookstore.dtd">
<bookstore>
<book>
<title>Learning XML</title>
<author>John Doe</author>
<price>399.99</price>
</book>
<book>
<title>HTML Guide</title>
<author>Jane Smith</author>
<price>299.00</price>
</book>
</bookstore>

2. DTD File – bookstore.dtd

<!ELEMENT bookstore (book+)>


<!ELEMENT book (title, author, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>

3. XSD File – bookstore.xsd

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


<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="bookstore">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded" minOccurs="1">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="price" type="xs:decimal"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>

</xs:schema>

Exp-06: Create a custom server using the http module and explore other modules of Node.js like os,
path, and events.

Create a file named server.js.

// Step 1: Import required modules


const http = require('http');
const os = require('os');
const path = require('path');
const EventEmitter = require('events');

// Step 2: Create a custom event emitter


const emitter = new EventEmitter();

// Step 3: Create a basic HTTP server


const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write("Hello from Node.js Server!");
res.end();
});

// Step 4: Start the server


server.listen(3000, () => {
console.log("Server running at http://localhost:3000/");
});

// Step 5: Print OS information


console.log("OS Type: " + os.type());
console.log("OS Platform: " + os.platform());
console.log("CPU Cores: " + os.cpus().length);

// Step 6: Use PATH module


console.log("Current File: " + __filename);
console.log("Directory Name: " + path.dirname(__filename));
console.log("Joined Path: " + path.join(__dirname, "public", "index.html"));

// Step 7: Handle custom events


emitter.on("greet", () => {
console.log("Custom Event Triggered: Welcome!");
});

// Emit the event


emitter.emit("greet");

Run the server using: node server.js


Open your browser and visit: http://localhost:3000​
You will see: Hello from Node.js Server!
07. i) What is HTML, and what is it used for?
HTML (HyperText Markup Language) is the standard markup language used to create and design web pages.
It provides the basic structure of a webpage by using a system of tags and attributes to define elements
like headings, paragraphs, images, links, forms, tables, and more.​
Purpose:
●​ Structuring content on the web
●​ Embedding multimedia (images, audio, video)
●​ Creating interactive forms
●​ Linking between web pages​

ii) What are the basic tags in an HTML document?


Some essential tags include:
●​ <!DOCTYPE html> – Declares the document type and HTML version
●​ <html> – Root element of the HTML document
●​ <head> – Contains metadata, links to styles/scripts, and the title
●​ <title> – Sets the title of the web page (seen in browser tab)
●​ <body> – Contains the content visible on the webpage
●​ <h1> to <h6> – Headings
●​ <p> – Paragraph
●​ <a> – Anchor tag for hyperlinks
●​ <img> – For images
●​ <ul>, <ol>, <li> – Lists (unordered and ordered)
●​ <div>, <span> – Layout and inline grouping elements

08. i) What is the purpose of the <head> and <body> tags?


●​ <head>: Contains metadata and external references (like CSS, JavaScript, fonts). This part is not
visible to users but important for browsers and search engines.​
Examples inside <head>: <meta>, <title>, <link>, <script>​

●​ <body>: Contains all visible content of the web page such as text, images, links, forms, etc.​

ii) What is the difference between <div> and <span>?


Feature <div> <span>

Type Block-level element Inline element

Layout Takes full width Takes only required width

Use For larger sections/layout For styling inline text

Example <div>Paragraph here</div> <span>word</span>

09. i) How do you create a list in HTML (ordered and unordered)?


●​ Ordered List (numbered):​

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

●​ Unordered List (bulleted):​

<ul>
<li>First item</li>
<li>Second item</li>
</ul>

ii) What is the function of the <title> tag?


The <title> tag defines the title of the HTML document, shown in:
●​ Browser’s title/tab bar
●​ Search engine results
●​ Bookmark names​

Example:
<title>My Web Page</title>

10. i) How does the <form> tag work, and what attributes does it use?
The <form> tag is used to collect user input. It wraps form controls like text fields, checkboxes, radio
buttons, and submit buttons.
Important attributes:
●​ action – URL where form data is sent
●​ method – HTTP method (GET or POST)
●​ enctype – Encoding type for data (multipart/form-data for file upload)
●​ target – Where to display the response (_self, _blank, etc.)​

Example:
<form action="/submit" method="post">
<input type="text" name="name">
<input type="submit" value="Submit">
</form>

ii) What are the new HTML5 form elements, and how are they useful?
HTML5 introduced new input types and form elements to enhance usability and reduce the need for
JavaScript validation.
New input types:
●​ email – Validates email format
●​ url – Validates URL format
●​ date, month, week – Date selectors
●​ range – Slider input
●​ tel – Phone number input
●​ number – Numeric input with spinner
●​ color – Color picker​

New form elements:


●​ <datalist> – Provides auto-complete options
●​ <output> – Displays result of a calculation
●​ <progress> – Shows progress bar
●​ <meter> – Indicates a scalar measurement within a known range​

Example:
<input type="email" required>
<input type="range" min="0" max="100">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
<input list="browsers">

You might also like