Scribd
Upload
6 views

Next Gen File

Uploaded by

Somya Sharma
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

Next Gen File

Uploaded by

Somya Sharma
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/ 24

INDEX

S.NO PROGRAM DATE SIGN

1 Create a webpage with HTML using paragraph and list tags 3/9/24

2 Experiments based on PHP and MySQL to be implemented. 10/9/24

3 Exercise based on implementation of XML technologies. 17/9/24

4 Create a simple JSP page. Separate the JSP and HTML 24/9/24
coding in different files and link them together.

5 Demonstrate the concept of Database Connectivity using 1/10/24


JDBC and ODBC

6 Demonstrate the concept of Database to web connectivity 8/10/24

7 Demonstrate the concept of Servlets 15/10/24

8 Experiment based on Client Side Programming. 5/11/24


Experiment - 1
Aim : Create a webpage with HTML using paragraph and list tags.

Theory :
HTML (HyperText Markup Language) is the standard language used to create and
design webpages. The <p> tag is used to define paragraphs, while lists can be
created using the <ul> (unordered list) or <ol> (ordered list) tags, along with <li>
(list item) for individual entries.

 Paragraphs (<p>): Useful for creating textual blocks.


 Lists (<ul>, <ol>): Helpful for organizing data into bullet points or
numbered formats.

Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Paragraphs and Lists</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>

<p>This is an example of a paragraph in HTML. Paragraphs are used to group


and display text content in a structured manner.</p>

<p>Below is an example of an unordered list:</p>


<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<p>Below is an example of an ordered list:</p>


<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
</body>
</html>

Output :

Welcome to My Webpage

This is an example of a paragraph in HTML. Paragraphs are used to group


and display text content in a structured manner.

Below is an example of an unordered list:

 Item 1
 Item 2
 Item 3

Below is an example of an ordered list:

1. Step 1
2. Step 2
3. Step 3
Experiment - 2
Aim : Experiments based on PHP and MySQL to be implemented.

Theory : PHP is a server-side scripting language used to create dynamic


webpages. MySQL is a database management system that stores and retrieves data
efficiently. PHP and MySQL can work together to manage backend operations for
websites.

CRUD operations allow:

 Create: Adding new records to the database.


 Read: Retrieving data from the database.
 Update: Modifying existing records.
 Delete: Removing records from the database.

Steps:

1. Create a MySQL database and table.


2. Write a PHP script to connect to the database.
3. Implement CRUD operations using PHP.

Code :
Database Setup:
Run the following SQL query to create the database and table:

CREATE DATABASE TestDB;

USE TestDB;
CREATE TABLE Users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL,
age INT NOT NULL
);
PHP Script:

<?php// Database connection parameters$servername = "localhost";$username =


"root";$password = "";$database = "TestDB";
// Connect to MySQL database$conn = new mysqli($servername, $username,
$password, $database);
// Check connectionif ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}echo "Connected successfully<br>";
// Create operation$sql = "INSERT INTO Users (name, email, age) VALUES
('John Doe', '[email protected]', 25)";if ($conn->query($sql) === TRUE) {
echo "New record created successfully<br>";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
// Read operation$sql = "SELECT id, name, email, age FROM Users";$result =
$conn->query($sql);
if ($result->num_rows > 0) {
echo "<h3>Users List:</h3>";
while ($row = $result->fetch_assoc()) {
echo "ID: " . $row["id"] . " - Name: " . $row["name"] . " - Email: " .
$row["email"] . " - Age: " . $row["age"] . "<br>";
}
} else {
echo "0 results";}
// Update operation$sql = "UPDATE Users SET age = 30 WHERE name = 'John
Doe'";if ($conn->query($sql) === TRUE) {
echo "Record updated successfully<br>";
} else {
echo "Error updating record: " . $conn->error;
}
// Delete operation$sql = "DELETE FROM Users WHERE name = 'John Doe'";if
($conn->query($sql) === TRUE) {
echo "Record deleted successfully<br>";
} else {
echo "Error deleting record: " . $conn->error;
}
// Close connection$conn->close();?>
Output :

When the PHP script is run, the following output is displayed in the browser:

1. On successful connection to the database :

Connected successfully

2. Create Operation (Inserting a new record):

New record created successfully

3. Read Operation (Fetching records from the database):

Users List:

ID: 1 - Name: John Doe - Email: [email protected] - Age: 25

4. Update Operation (Modifying a record):

Record updated successfully

5. Delete Operation (Removing a record):

Record deleted successfully


Experiment - 3

Aim : Exercise based on implementation of XML technologies.

Theory :
 XML (Extensible Markup Language): A markup language used for storing
and transporting data. It is platform-independent and ensures data portability.
 XSD (XML Schema Definition): Used to define the structure, data types,
and rules for an XML document.
 XSLT (Extensible Stylesheet Language Transformations): A language
for transforming XML data into different formats (e.g., HTML, plain text).

Key Components:

1. XML Document: Represents structured data.


2. XSD Schema: Validates the XML document.
3. XSLT Stylesheet: Transforms XML data into a different format.

Code :

XML document :
<?xml version="1.0" encoding="UTF-8"?>
<library>
<book>
<title>XML Fundamentals</title>
<author>John Doe</author>
<price>500</price>
<year>2021</year>
</book>
<book>
<title>Learning XSLT</title>
<author>Jane Smith</author>
<price>450</price>
<year>2020</year>
</book>
</library>

XML Schema :
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="library">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<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:element name="year" type="xs:gYear" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

XML stylesheet :
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="library">
<xs:complexType>
<xs:sequence>
<xs:element name="book" maxOccurs="unbounded">
<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:element name="year" type="xs:gYear" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Output :
Library Collection

Title Author Price Year


XML Fundamentals John Doe 500 2021
Learning XSLT Jane Smith 450 2020
Experiment - 4
Aim :
Create a simple JSP page. Separate the JSP and HTML coding in different files and
link them together.

Theory :
· JSP (JavaServer Pages): A technology used to develop dynamic web pages by
embedding Java code within HTML using special JSP tags (<% %>).
· Separation of Concerns: Keeping JSP logic separate from HTML ensures better
maintainability and readability of code.

Code :
HTML file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple JSP Example</title>
</head>
<body>
<h1>Welcome to the Simple JSP Example</h1>
<form action="process.jsp" method="post">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="age">Enter your age:</label>
<input type="number" id="age" name="age" required><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>

JSP file :
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Processed Data</title>
</head>
<body>
<h1>Processed Information</h1>
<%
// Retrieving data from the HTML form
String name = request.getParameter("name");
String age = request.getParameter("age");

// Displaying the output


if (name != null && age != null) {
out.println("<p>Hello, " + name + "!</p>");
out.println("<p>You are " + age + " years old.</p>");
} else {
out.println("<p>Error: Missing input!</p>");
}
%>
</body>
</html>

Steps to Link and Run the Files

1. Setup a Java Server: Use a web server like Apache Tomcat to deploy and
test JSP files.
2. File Placement:
1. Place index.html in the root directory of the web application.
2. Place process.jsp in the same directory or a subfolder.
3. Run the Application:

1. Open index.html in the browser.


2. Fill out the form and submit it.
3. The browser sends the data to process.jsp, which processes and
displays the response.

Input (HTML Page): The user submits their name and age through a form.
Output (JSP Page):

# For inputs name = John and age = 25 :

Hello, John!

You are 25 years old.

# If any field is empty, an error message is displayed :

Error: Missing input!


Experiment - 5
Aim : Demonstrate the concept of Database Connectivity using JDBC and ODBC.

Theory :
 JDBC: A Java API for connecting and executing queries on a database.
 ODBC: A standard API for accessing database management systems
(DBMS). JDBC-ODBC bridge is used to enable Java applications to interact
with ODBC-supported databases.

Steps in JDBC and ODBC Database Connectivity:

1. Load the JDBC-ODBC driver.


2. Establish a connection to the database.
3. Create a statement to execute SQL queries.
4. Process the results of the query.
5. Close the connection.

Code :
SQL for Database Setup (Example with a table named Employees):

CREATE TABLE Employees (

id INT AUTO_INCREMENT PRIMARY KEY,

name VARCHAR(100) NOT NULL,

department VARCHAR(50) NOT NULL,

salary DECIMAL(10, 2)

);

INSERT INTO Employees (name, department, salary) VALUES

('Alice', 'HR', 50000),

('Bob', 'Engineering', 75000),

('Charlie', 'Marketing', 60000);


Java Code Using JDBC and ODBC :
import java.sql.*;

public class JdbcOdbcDemo {

public static void main(String[] args) {

Connection connection = null;

Statement statement = null;

try {

// Step 1: Load JDBC-ODBC driver

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

// Step 2: Establish a connection to the database

String databaseURL = "jdbc:odbc:EmployeeDB"; // ODBC data source


name

connection = DriverManager.getConnection(databaseURL, "username",


"password");

if (connection != null) {

System.out.println("Connected to the database successfully!");

// Step 3: Create a statement object to execute queries

statement = connection.createStatement();

// Step 4: Execute a query (e.g., retrieve all employees)

String query = "SELECT * FROM Employees";

ResultSet resultSet = statement.executeQuery(query);

// Step 5: Process the query results


System.out.println("Employee Details:");

while (resultSet.next()) {

int id = resultSet.getInt("id");

String name = resultSet.getString("name");

String department = resultSet.getString("department");

double salary = resultSet.getDouble("salary");

System.out.println("ID: " + id + ", Name: " + name +

", Department: " + department + ", Salary: " + salary);

resultSet.close();

} catch (ClassNotFoundException e) {

System.out.println("JDBC-ODBC Driver not found: " + e.getMessage());

} catch (SQLException e) {

System.out.println("SQL Exception: " + e.getMessage());

} finally {

try {

// Step 6: Close resources

if (statement != null) statement.close();

if (connection != null) connection.close();

} catch (SQLException e) {

System.out.println("Error closing resources: " + e.getMessage());

}}}

Steps to Run

Set Up the ODBC Data Source:


1. Open the ODBC Data Source Administrator (search ODBC in your
system).
2. Add a new User DSN named EmployeeDB and connect it to your
database.

Database Configuration:

1. Use a database like MySQL, PostgreSQL, or Microsoft Access to


create and populate the Employees table using the SQL script
provided above.

Compile and Execute the Code:

1. Save the Java file as JdbcOdbcDemo.java.


2. Compile the code using javac JdbcOdbcDemo.java.
3. Run the program using java JdbcOdbcDemo.

Output :
Expected Output (if the table has data):

Connected to the database successfully!

Employee Details:

ID: 1, Name: Alice, Department: HR, Salary: 50000.0

ID: 2, Name: Bob, Department: Engineering, Salary: 75000.0

ID: 3, Name: Charlie, Department: Marketing, Salary: 60000.0

Errors:

If the ODBC driver or data source is not set up correctly, the program throws an
error such as

JDBC-ODBC Driver not found: sun.jdbc.odbc.JdbcOdbcDriver


Experiment - 6

Aim : Demonstrate the concept of Database to web connectivity.

Theory : Database-to-Web Connectivity involves integrating a web application


with a database to retrieve, display, or manipulate data. This concept is essential for
dynamic websites like e-commerce platforms, social networks, or content
management systems.

Key Steps:

1. Frontend: HTML or a similar markup language is used for user interface


design.
2. Backend: Server-side scripting languages like JSP, PHP, or Python handle
database interactions.
3. Database: A relational database (e.g., MySQL) stores data.
4. Connectivity: Tools like JDBC (Java), PDO (PHP), or ORM frameworks
connect the backend to the database.

Code :
Database Setup (SQL Script) :
CREATE TABLE Users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100),
age INT
);

INSERT INTO Users (name, email, age) VALUES


('Alice', '[email protected]', 25),
('Bob', '[email protected]', 30),
('Charlie', '[email protected]', 28);

HTML File (index.html)


This is the user interface that triggers the backend JSP file to fetch data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Database to Web Connectivity</title>
</head>
<body>
<h1>User Information</h1>
<form action="fetchUsers.jsp" method="get">
<button type="submit">View Users</button>
</form>
</body>
</html>

JSP File (fetchUsers.jsp)


This file connects to the database, retrieves data, and displays it on the webpage.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Users</title>
</head>
<body>
<h1>List of Users</h1>
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
<%
Connection connection = null;
Statement statement = null;
ResultSet resultSet = null;

try {
// Step 1: Load the database driver
Class.forName("com.mysql.cj.jdbc.Driver");

// Step 2: Establish a connection


connection = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/YourDatabaseName",
"username", "password"
);

// Step 3: Create and execute a SQL query


String query = "SELECT * FROM Users";
statement = connection.createStatement();
resultSet = statement.executeQuery(query);

// Step 4: Process the results


while (resultSet.next()) {
int id = resultSet.getInt("id");
String name = resultSet.getString("name");
String email = resultSet.getString("email");
int age = resultSet.getInt("age");

out.println("<tr>");
out.println("<td>" + id + "</td>");
out.println("<td>" + name + "</td>");
out.println("<td>" + email + "</td>");
out.println("<td>" + age + "</td>");
out.println("</tr>");
}
} catch (Exception e) {
out.println("<p>Error: " + e.getMessage() + "</p>");
} finally {
// Step 5: Close the resources
try {
if (resultSet != null) resultSet.close();
if (statement != null) statement.close();
if (connection != null) connection.close();
} catch (SQLException e) {
out.println("<p>Error closing resources: " + e.getMessage() +
"</p>");
}
}
%>
</table>
</body>
</html>

Steps to Execute the Code

Set Up the Database:

1. Create the Users table using the SQL script provided above.
2. Insert some sample data.

Configure the Server:

1. Use Apache Tomcat for running the JSP file.


2. Place the fetchUsers.jsp file in the webapps/YourAppName directory.
Run the Application:

1. Open index.html in a browser.


2. Click the "View Users" button, which sends a request to
fetchUsers.jsp.
3. The JSP file retrieves the data and displays it in a table.

Expected Output (Web Page):

A table displaying the user information from the database. For example:

ID Name Email Age


1 Alice [email protected] 25
2 Bob [email protected] 30
3 Charlie [email protected] 28
Experiment - 7
Aim : Demonstrate the concept of Servlets.

Theory :
A Servlet is a Java program that runs on a web server or application server and acts
as a middle layer between the frontend (HTML) and backend (database or server
logic). It is used for handling HTTP requests, processing data, and generating
dynamic web content.

Lifecycle of a Servlet:

1. Initialization: The init() method is called when the Servlet is first loaded.
2. Request Handling: The service() method handles HTTP requests (usually
via doGet() or doPost() methods).
3. Termination: The destroy() method is called before the Servlet is removed
from memory.

Code :

HTML File (index.html)


This file sends a user request to the Servlet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servlet Example</title>
</head>
<body>
<h1>Welcome to the Servlet Example</h1>
<form action="HelloServlet" method="get">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
</body>
</html>

Servlet Code (HelloServlet.java)


This Servlet processes the request and generates a dynamic response.
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// Step 1: Annotate the Servlet with a URL pattern


@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

// Step 2: Handle GET requests


protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Set the content type of the response
response.setContentType("text/html");
PrintWriter out = response.getWriter();

// Retrieve user input from the request


String name = request.getParameter("name");

// Generate dynamic response


out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head><title>Servlet Response</title></head>");
out.println("<body>");
out.println("<h1>Hello, " + name + "!</h1>");
out.println("<p>Welcome to the world of Servlets.</p>");
out.println("</body>");
out.println("</html>");

// Close the writer


out.close();
}
}

Steps to Execute the Code

Setup a Java Web Server:

Install and configure Apache Tomcat or any other Java-based web server.

Place Files in Appropriate Directories:

1. Save the index.html in the webapps/YourAppName directory.


2. Save HelloServlet.java in the src directory of your project.

Compile the Servlet:


Compile the HelloServlet.java file and place the compiled .class file in the
WEB-INF/classes directory of your application.

Update web.xml (if not using annotations):


If not using the @WebServlet annotation, map the Servlet in web.xml
located in WEB-INF.

<servlet>
<servlet-name>HelloServlet</servlet-name>
<servlet-class>HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet</servlet-name>
<url-pattern>/HelloServlet</url-pattern>
</servlet-mapping>

Run the Application:

 Start the server and access index.html through the browser.


 Fill in the form and submit it to see the Servlet response.

Input (from HTML Form):


name = John

Output (Servlet Response in Browser):

<!DOCTYPE html>
<html>
<head><title>Servlet Response</title></head>
<body>
<h1>Hello, John!</h1>
<p>Welcome to the world of Servlets.</p>
</body>
</html>
Experiment - 8
Aim : Experiment based on Client Side Programming.

Theory :
Client-side programming is executed on the user's browser, making it fast and
responsive. Commonly used technologies include:

 HTML: Structures the content of the webpage.


 CSS: Styles the content for better presentation.
 JavaScript: Adds interactivity and dynamic behavior to the webpage.

Advantages of Client-Side Programming:

 Faster user interaction.


 Reduces server load.
 Provides immediate feedback to the user (e.g., form validation).

Code :
HTML, CSS, and JavaScript Example: Form Validation and Dynamic Content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Client-Side Programming Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
form {
max-width: 300px;
margin: 0 auto;
}
input[type="text"], input[type="email"], button {
width: 100%;
padding: 10px;
margin: 10px 0;
}
.error {
color: red;
font-size: 0.9em;
}
.success {
color: green;
font-size: 1.1em;
}
</style>
</head>
<body>
<h1>Client-Side Programming Example</h1>
<form id="userForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your
name">
<span id="nameError" class="error"></span>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your
email">
<span id="emailError" class="error"></span>

<button type="button" onclick="validateForm()">Submit</button>


</form>
<div id="output" class="success"></div>

<script>
function validateForm() {
// Retrieve form values
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const nameError = document.getElementById("nameError");
const emailError = document.getElementById("emailError");
const output = document.getElementById("output");

// Reset error messages


nameError.textContent = "";
emailError.textContent = "";
output.textContent = "";

let isValid = true;

// Validate name
if (name.trim() === "") {
nameError.textContent = "Name is required.";
isValid = false;
}

// Validate email
if (!email.match(/^[^@\s]+@[^@\s]+\.[^@\s]+$/)) {
emailError.textContent = "Enter a valid email address.";
isValid = false;
}

// Display success message if valid


if (isValid) {
output.textContent = `Hello, ${name}! Your email (${email}) has been
successfully submitted.`;
}
}
</script>
</body>
</html>

Steps to Execute the Code

1. Save the code in a file named client_side_programming.html.


2. Open the file in a browser.
3. Interact with the form by entering values for the name and email fields.
4. Observe the validation messages and dynamic output displayed on the page.

Input Validation:
If the name field is empty, an error message will appear: "Name is required."

If an invalid email is entered, an error message will appear: "Enter a valid email
address."

Output for Valid Inputs:


For name = John and email = [email protected], the page will display:
"Hello, John! Your email ([email protected]) has been successfully
submitted."

You might also like