Scribd
Upload
18 views25 pages

WT Practicals (SATYAM GAWALI)

The document outlines various web development projects including a restaurant website using HTML, CSS, and JavaScript, an XML document for employee information with DTD and XML Schema, a simple calculator implemented in JavaScript, a student registration system using Servlets and JSP, and a database connection example. Each project includes code snippets and file structures necessary for implementation. The projects demonstrate the use of web technologies to create functional applications.

Uploaded by

nothingee904
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
18 views25 pages

WT Practicals (SATYAM GAWALI)

The document outlines various web development projects including a restaurant website using HTML, CSS, and JavaScript, an XML document for employee information with DTD and XML Schema, a simple calculator implemented in JavaScript, a student registration system using Servlets and JSP, and a database connection example. Each project includes code snippets and file structures necessary for implementation. The projects demonstrate the use of web technologies to create functional applications.

Uploaded by

nothingee904
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/ 25

WTPR2

Problem Statement

Implement a web page index.htm for any client website (e.g., a restaurant website project) using
following: HTML syntax: heading tags, basic tags and attributes, frames, tables, images, lists, links
for text andimages, forms etc. Use of Internal CSS, Inline CSS, External CSS

index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Restaurant</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css">
<!-- Internal CSS -->
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<!-- Header with inline CSS -->
<header style="background-color: #ff6b6b; color: white;">
<h1>Simple Eats</h1>
<p>Good food made simple</p>
</header>
<!-- Navigation -->
<nav>
<a href="#menu">Menu</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<!-- Main Content -->
<main>
<section id="menu">
<h2>Our Menu</h2>
<table>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Burger</td>
<td>₹80</td>
</tr>
<tr>
<td>Pizza</td>
<td>₹150</td>
</tr>
<tr>
<td>Salad</td>
<td>₹70</td>
</tr>
</table>
</section>

1
<section id="about">
<h2>About Us</h2>
<ul>
<li>Family-owned since 2010</li>
<li>Fresh ingredients</li>
<li>Friendly service</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<label>Name:</label>
<input type="text"><br>

<label>Email:</label>
<input type="email"><br>

<label>Message:</label>
<textarea></textarea><br>
<button type="submit" style="background-color: #ff6b6b; color:
white;">Send</button>
</form>
</section>
</main>
<!-- Footer -->
<footer>
<p>© 2023 Simple Eats | Open daily 11am-9pm</p>
</footer>
</body>
</html>

style.css

/* Simple styles */ form {


body { display: grid;
line-height: 1.5; gap: 10px;
} }
nav { input, textarea {
text-align: center; padding: 8px;
margin: 20px 0; border: 1px solid #ddd;
padding: 10px; }
background-color: #f0f0f0; button {
} padding: 8px 15px;
section { border: none;
margin-bottom: 30px; cursor: pointer;
padding: 15px; }
border: 1px solid #ddd; footer {
border-radius: 5px; text-align: center;
} margin-top: 30px;
table { padding: 10px;
width: 100%; background-color: #f0f0f0;
border-collapse: collapse; }
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

2
3
WTPR3
Problem Statement
Design the XML document to store the information of the employees of any business organizationand
demonstrate the use of: DTD & XML Schema and display the content in (e.g., tabular format) by using
CSS/XSL.
employees.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="employees.xsl"?>
<!DOCTYPE employees SYSTEM "employees.dtd">
<employees xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="employees.xsd">
<employee>
<id>101</id>
<name>Satyam Gawali</name>
<position>Flutter Developer</position>
<department>IT</department>
<salary>100000</salary>
</employee>
<employee>
<id>102</id>
<name>Aditya Pagare</name>
<position>HR Manager</position>
<department>HR</department>
<salary>90000</salary>
</employee>
<employee>
<id>103</id>
<name>Sakshi Chaudhari</name>
<position>Developer</position>
<department>IT</department>
<salary>90000</salary>
</employee>
</employees>

employees.dtd
<!ELEMENT employees (employee+)>
<!ELEMENT employee (id, name, position, department, salary)>
<!ELEMENT id (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT position (#PCDATA)>
<!ELEMENT department (#PCDATA)>
<!ELEMENT salary (#PCDATA)>

employees.xsd
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="employees">
<xs:complexType>
<xs:sequence>
<xs:element name="employee" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<xs:element name="id" type="xs:integer"/>
<xs:element name="name" type="xs:string"/>
<xs:element name="position" type="xs:string"/>
<xs:element name="department" type="xs:string"/>
<xs:element name="salary" type="xs:decimal"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

4
employees.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Employee List</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2 style="text-align:center;">Employee Information</h2>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Department</th>
<th>Salary</th>
</tr>
<xsl:for-each select="employees/employee">
<tr>
<td><xsl:value-of select="id"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="position"/></td>
<td><xsl:value-of select="department"/></td>
<td><xsl:value-of select="salary"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Output

5
WTPR4
Problem Statement
Design and implement a simple calculator using Java Script for operations like addition,multiplication,
subtraction, division, square of number etc.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="calculator">
<h2>Simple Calculator</h2>
<input type="number" id="num1" placeholder="First number"><br>
<input type="number" id="num2" placeholder="Second number"><br>
<button onclick="calculate('add')">+</button>
<button onclick="calculate('subtract')">−</button>
<button onclick="calculate('multiply')">×</button>
<button onclick="calculate('divide')">÷</button>
<button onclick="calculate('square')">Square</button>
<div id="result">Result: </div>
</div>
<script src="script.js"></script>
</body>
</html>

style.css
body { button {
font-family: Arial, sans-serif; padding: 10px 15px;
text-align: center; margin: 5px;
margin-top: 50px; font-size: 16px;
} border: none;
background-color: #4CAF50;
#calculator { color: white;
display: inline-block; border-radius: 5px;
border: 2px solid #888; cursor: pointer;
padding: 20px; }
border-radius: 10px;
background-color: #f2f2f2; button:hover {
} background-color: #45a049;
}
input[type="number"] {
width: 120px; #result {
padding: 10px; margin-top: 20px;
margin: 5px; font-size: 18px;
font-size: 16px; font-weight: bold;
} }

6
sript.js
function calculate(operation) {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
let result;
let str;
switch (operation) {
case 'add':
result = num1 + num2;
str = num1 +" + "+ num2 +" = "+ result;
break;
case 'subtract':
result = num1 - num2;
str = num1 +" - "+ num2 +" = "+ result;
break;
case 'multiply':
result = num1 * num2;
str = num1 +" * "+ num2 +" = "+ result;
break;
case 'divide':
result = num2 !== 0 ? num1 / num2 : "Cannot divide by zero";
str = num1 +" / "+ num2 +" = "+ result;
break;
case 'square':
result = `Square of ${num1} is ${num1 * num1}`;
str = result;
break;
default:
result = "Invalid operation";
}
document.getElementById("result").textContent = "Result: " + str;
}

7
WTPR5
Problem Statement
Implement the sample program demonstrating the use of Servlet

Folder structure
D:\apache-tomcat-9.0.85\webapps\STUDENTAPP\
├── index.html ← HTML form for student registration
├── success.jsp ← Simple confirmation page
└── WEB-INF/
├── web.xml ← Servlet configuration
└── classes/
| └── com/
| └── example/
| └── StudentServlet.class ← Compiled servlet file
└── lib/
└── mysql-connector-j-8.0.33.jar ← JDBC driver for MySQL

web.xml Configuration File


<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="3.0">
<servlet>
<servlet-name>StudentServlet</servlet-name>
<servlet-class>com.example.StudentServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>StudentServlet</servlet-name>
<url-pattern>/register</url-pattern>
</servlet-mapping>
</web-app>

MySQL Database (Table Structure)


CREATE TABLE students (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100),
course VARCHAR(100)
);

8
HTML Form Submission (Form Page) index.html
<!DOCTYPE html>
<html>
<head>
<title>Student Registration</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="form-container">
<h2>Student Registration Form</h2>
<form action="register" method="post">
<label>Name:</label>
<input type="text" name="name" required>
<label>Email:</label>
<input type="email" name="email" required>
<label>Course:</label>
<input type="text" name="course" required>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
Style.css
body {
font-family: Arial, sans-serif; input[type="text"],
background: #f4f4f4; input[type="email"] {
display: flex; width: 100%;
justify-content: center; padding: 8px;
align-items: center; margin-top: 5px;
height: 100vh; border: 1px solid #ccc;
} border-radius: 5px;
.form-container { }
background: white;
padding: 30px; input[type="submit"] {
border-radius: 10px; margin-top: 20px;
box-shadow: 0 0 15px rgba(0,0,0,0.2); width: 100%;
width: 400px; padding: 10px;
} background: #28a745;
h2 { color: white;
text-align: center; border: none;
} border-radius: 5px;
label { cursor: pointer;
display: block; }
margin-top: 15px;
}

9
StudentServlet.class
package com.example;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet({"/register"})
public class StudentServlet extends HttpServlet {
public StudentServlet() {
}
protected void doPost(HttpServletRequest var1, HttpServletResponse var2) throws
ServletException, IOException {
String var3 = var1.getParameter("name");
String var4 = var1.getParameter("email");
try {
Class.forName("com.mysql.cj.jdbc.Driver");
Connection var5 =
DriverManager.getConnection("jdbc:mysql://localhost:3306/studentdb", "root", "");
String var6 = "INSERT INTO students (name, email) VALUES (?, ?)";
PreparedStatement var7 = var5.prepareStatement(var6);
var7.setString(1, var3);
var7.setString(2, var4);
var7.executeUpdate();
var5.close();
var2.sendRedirect("success.jsp");
} catch (Exception var8) {
var8.printStackTrace();
var2.getWriter().println("Database Error: " + var8.getMessage());
}
}
}
Database Connection (Success or Error Message) success.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Success</title>
</head>
<body>
<h2>🎉 Registration Successful!</h2>
<p>Thank you for registering.</p>
</body>
</html>

10
WTPR6
Problem Statement
Implement the program demonstrating the use of JSP.

Directly Structure
WTPR6/
│
├── index.html
├── style.css
├── WEB-INF/
│ ├── web.xml
│ └── classes/
│ ├── DBConnection.class
│ └── DataServlet.class
└── src/
├── DBConnection.java
└── DataServlet.java
└── lib/
└── mysql-connector-j-9.3.0.jar

index.html
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<form action="submit" method="post">
<h2>Student Registration</h2><br><br><br>
Name: <input type="text" name="name" required><br><br>
Email: <input type="email" name="email" required><br><br>
Mobile: <input type="text" name="mobile" required><br><br>
Gender:
<input type="radio" name="gender" value="Male" checked> Male
<input type="radio" name="gender" value="Female"> Female<br><br>
DOB: <input type="date" name="dob" required><br><br>
Address:<br>
<textarea name="address" rows="4" cols="30" required></textarea><br><br>
Password: <input type="password" name="password" required><br><br>
<input type="submit" value="Register">
</form>
</div>
</body>
</html>

MySQL Database
CREATE DATABASE wtpr6db;

USE wtpr6db;

CREATE TABLE users (


id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100),
mobile VARCHAR(15),
gender VARCHAR(10),
dob DATE,
address TEXT,
password VARCHAR(100)
);

11
style.css
body { input[type="submit"] {
font-family: Arial, sans-serif; background-color: #007bff;
background-color: #f2f2f2; color: white;
display: flex; padding: 10px;
justify-content: center; margin-top: 15px;
align-items: center; border: none;
height: 100vh; width: 100%;
} border-radius: 6px;
form { cursor: pointer;
background-color: #fff; }
padding: 25px; input[type="submit"]:hover {
border-radius: 12px; background-color: #0056b3;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
width: 300px; a {
} display: block;
h2 { margin-top: 15px;
text-align: center; text-align: center;
color: #333; color: #007bff;
} text-decoration: none;
input[type="text"], }
input[type="email"] { a:hover {
width: 100%; text-decoration: underline;
padding: 10px; }
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}

web.xml
<web-app>
<servlet>
<servlet-name>DataServlet</servlet-name>
<servlet-class>DataServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DataServlet</servlet-name>
<url-pattern>/submit</url-pattern>
</servlet-mapping>
</web-app>

DBConnection.java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {


public static Connection getConnection() {
Connection con = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
con = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/wtpr6db?useSSL=false&serverTimezone=UTC",
"root", ""
);
} catch (Exception e) {
e.printStackTrace();
}
return con;
}
}

12
DataServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;

public class DataServlet extends HttpServlet {


protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html");
PrintWriter out = response.getWriter();

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


String email = request.getParameter("email");
String mobile = request.getParameter("mobile");
String gender = request.getParameter("gender");
String dob = request.getParameter("dob");
String address = request.getParameter("address");
String password = request.getParameter("password");

Connection con = DBConnection.getConnection();

try {
if (con != null) {
String sql = "INSERT INTO users (name, email, mobile, gender, dob, address,
password) VALUES (?, ?, ?, ?, ?, ?, ?)";
PreparedStatement stmt = con.prepareStatement(sql);
stmt.setString(1, name);
stmt.setString(2, email);
stmt.setString(3, mobile);
stmt.setString(4, gender);
stmt.setString(5, dob);
stmt.setString(6, address);
stmt.setString(7, password);

int rowsInserted = stmt.executeUpdate();

if (rowsInserted > 0) {
out.println("<h3> Registration successful!</h3>");
} else {
out.println("<h3> Registration failed.</h3>");
}

stmt.close();
con.close();
} else {
out.println("<h3> Could not connect to database.</h3>");
}
} catch (Exception e) {
out.println("<h3> Error: " + e.getMessage() + "</h3>");
e.printStackTrace(out);
}

out.println("<br><a href='index.html'>Go Back</a>");


}
}

13
14
WTPR7

Problem Statement
To understand the principles and methodologies of PHP web based applications development
process.

Directly Structure
/WTPR7
├── /assets
│ ├── /css
│ │ └── style.css
│ └── /js
│ └── script.js
├── /includes
│ └── db.php
├── /config
│ └── config.php
└── /public
├── index.php
├── register.php
└── users.php

db.php
<?php
require_once('../config/config.php');

$conn = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_DATABASE);

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

config.php
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'wtpr7');
?>

script.js
console.log("JavaScript Loaded");

MySQL query
CREATE DATABASE wtpr7;
USE wtpr7;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100),
password VARCHAR(255)
);

15
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to WTPR7</title>
<link rel="stylesheet" href="../assets/css/style.css">
<style>
.welcome-box {
background-color: #ffffff;
padding: 40px;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
max-width: 500px;
margin: auto;
margin-top: 100px;
}
.welcome-box h1 {
font-size: 32px;
color: #007BFF;
margin-bottom: 20px;
}
.welcome-box p {
font-size: 18px;
color: #555;
margin-bottom: 30px;
}
.btn-group a {
display: inline-block;
margin: 0 10px;
padding: 12px 25px;
background-color: #007BFF;
color: white;
border-radius: 8px;
font-weight: bold;
transition: background 0.3s;
}
.btn-group a:hover {
background-color: #0056b3;
}
@media (max-width: 500px) {
.btn-group a {
display: block;
margin: 10px auto;
width: 80%;
}
}
</style>
</head>
<body>
<div class="welcome-box">
<h1>Welcome to WTPR7</h1>
<p>This is a simple PHP-MySQL web application for user registration and
listing.</p>
<div class="btn-group">
<a href="register.php">Register User</a>
<a href="users.php">View Users</a>
</div>
</div>

</body>
</html>

16
register.php
<?php
require_once('../includes/db.php');
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'] ?? '';
$email = $_POST['email'] ?? '';
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$sql = "INSERT INTO users (name, email, password) VALUES ('$name', '$email',
'$password')";
if ($conn->query($sql) === TRUE) {
$msg = "User registered successfully!";
} else {
$msg = "Error: " . $conn->error;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h2>User Registration</h2>
<?php if (!empty($msg)) echo "<p>$msg</p>"; ?>
<form method="POST" action="">
<input type="text" name="name" placeholder="Name" required><br><br>
<input type="email" name="email" placeholder="Email" required><br><br>
<input type="password" name="password" placeholder="Password"
required><br><br>
<button type="submit">Register</button>
</form>
</body>
</html>

users.php
<?php
require_once('../includes/db.php');
$result = $conn->query("SELECT id, name, email FROM users");
?>
<!DOCTYPE html>
<html>
<head>
<title>User List</title>
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h2>Registered Users</h2>
<table border="1" cellpadding="10">
<tr>
<th>ID</th><th>Name</th><th>Email</th>
</tr>
<?php while($row = $result->fetch_assoc()) : ?>
<tr>
<td><?= $row['id']; ?></td>
<td><?= $row['name']; ?></td>
<td><?= $row['email']; ?></td>
</tr>
<?php endwhile; ?>
</table>
</body>
</html>

17
style.css
* { /* Table Styles */
margin: 0; table {
padding: 0; width: 100%;
box-sizing: border-box; border-collapse: collapse;
} background-color: #fff;
body { margin-top: 30px;
font-family: 'Segoe UI', Tahoma, box-shadow: 0 4px 8px rgba(0,0,0,0.1);
Geneva, Verdana, sans-serif; }
background: #f7f9fc; th, td {
color: #333; padding: 15px;
padding: 30px; border-bottom: 1px solid #eee;
line-height: 1.6; text-align: left;
} }
a { th {
text-decoration: none; background-color: #007BFF;
color: #007BFF; color: white;
} }
a:hover { tr:hover {
text-decoration: underline; background-color: #f1f1f1;
} }
h1, h2 {
margin-bottom: 20px; /* Container for main content */
} .container {
max-width: 900px;
/* Form Styles */ margin: auto;
form { }
background: #fff;
padding: 25px; /* Message styling */
border-radius: 10px; p {
box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-bottom: 20px;
max-width: 400px; padding: 12px;
margin: 20px auto; border-radius: 6px;
} }
input[type="text"], p.success {
input[type="email"], background-color: #d4edda;
input[type="password"], color: #155724;
button { }
width: 100%; p.error {
padding: 12px; background-color: #f8d7da;
margin: 10px 0; color: #721c24;
border: 1px solid #ccc; }
border-radius: 8px;
font-size: 16px; /* Navigation Links */
} .nav {
input:focus, text-align: center;
button:focus { margin-bottom: 30px;
border-color: #007BFF; }
outline: none; .nav a {
} display: inline-block;
button { margin: 0 10px;
background-color: #007BFF; font-size: 18px;
color: white; }
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background-color: #0056b3;
}

18
19
WTPR8
Problem Statement
Design a login page with entries for name, mobile number email id and login button-Use struts

Directly structure
WTPR8/
├── src/com/wtpr8/
| ├── action/LoginAction.java
| └── form/LoginForm.java
├── WEB-INF/
│ ├── classes/ # Compiled .class files
│ ├── lib/ # struts-core JARs
│ ├── struts-config.xml
│ └── web.xml
├── login.jsp # Login form
├── success.jsp # Success page after login
└── style.css # CSS styling

LoginAction.java
package com.wtpr8.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.wtpr8.form.LoginForm;
import org.apache.struts.action.*;
public class LoginAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception {
LoginForm loginForm = (LoginForm) form;
String name = loginForm.getName();
String mobile = loginForm.getMobile();
String email = loginForm.getEmail();
request.setAttribute("user", name);
return mapping.findForward("success");
}
}

LoginForm.java
package com.wtpr8.form;
import org.apache.struts.action.ActionForm;
public class LoginForm extends ActionForm {
private String name;
private String mobile;
private String email;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMobile() {
return mobile;
}
public void setMobile(String mobile) {
this.mobile = mobile;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}

20
struts-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"
"http://struts.apache.org/dtds/struts-config_1_3.dtd">
<struts-config>
<form-beans>
<form-bean name="loginForm" type="com.wtpr8.form.LoginForm"/>
</form-beans>
<action-mappings>
<action path="/login"
type="com.wtpr8.action.LoginAction"
name="loginForm"
scope="request"
input="/login.jsp">
<forward name="success" path="/success.jsp"/>
</action>
</action-mappings>
</struts-config>

web.xml
<web-app>
<display-name>WTPR8 Login App</display-name>
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>/WEB-INF/struts-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
</web-app>

login.jsp
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body><div class="container login-container">
<h2>User Login</h2>
<html:form action="/login">
<div class="form-group">
<label for="name">Name:</label>
<html:text property="name" styleId="name"/>
</div>
<div class="form-group">
<label for="mobile">Mobile Number:</label>
<html:text property="mobile" styleId="mobile"/>
</div>
<div class="form-group">
<label for="email">Email ID:</label>
<html:text property="email" styleId="email"/>
</div>
<html:submit value="Login" styleClass="submit-btn"/>
</html:form> </div>
</body>
</html>

21
success.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ page language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Success</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container success-container">
<div class="success-icon">✓</div>
<h2>Welcome, <span class="user-name">${user}</span>!</h2>
<p>You have successfully logged in.</p>
</div>
</body>
</html>

22
WTPR9
Problem Statement
Design an application using Angular JS

Directory Structure
WTPR9/
├── index.html
├── app.js
├── controllers/
│ └── userController.js
├── services/
│ └── userService.js
├── directives/
│ └── userCard.js
└── css/
└── style.css

index.html
<!DOCTYPE html>
<html ng-app="userApp">
<head>
<meta charset="UTF-8">
<title>WTPR9 - User Management</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers/userController.js"></script>
<script src="services/userService.js"></script>
<script src="directives/userCard.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body ng-controller="UserController">
<h1>User Management System</h1>
<form ng-submit="addUser()">
<input type="text" ng-model="newUser.name" placeholder="Name" required>
<input type="email" ng-model="newUser.email" placeholder="Email" required>
<input type="text" ng-model="newUser.role" placeholder="Role" required>
<button type="submit">Add User</button>
</form>
<input type="text" ng-model="searchText" placeholder="Search user">
<div ng-repeat="user in users | filter:searchText">
<user-card info="user" on-delete="deleteUser(user)"></user-card>
</div>
</body>
</html>

style.css
body { .user-card {
font-family: Arial, sans-serif; border: 1px solid #ccc;
margin: 20px; padding: 15px;
} margin-top: 10px;
input { border-radius: 5px;
margin: 5px; }
padding: 8px;
}
button {
padding: 8px 10px;
background: #007BFF;
color: white;
border: none;
cursor: pointer;
}

23
app.js
angular.module('userApp', []);

userController.js
angular.module('userApp').controller('UserController', function($scope, UserService) {
$scope.users = UserService.getUsers();

$scope.addUser = function() {
if ($scope.newUser) {
UserService.addUser($scope.newUser);
$scope.newUser = {};
}
};

$scope.deleteUser = function(user) {
UserService.deleteUser(user);
};
});

userService.js
angular.module('userApp').factory('UserService', function() {
var users = [
{ name: 'Satyam', email: 'satyam@gmail.com', role: 'Developer' },
];

return {
getUsers: function() {
return users;
},
addUser: function(user) {
users.push(user);
},
deleteUser: function(user) {
var index = users.indexOf(user);
if (index > -1) users.splice(index, 1);
}
};
});

userCard.js
angular.module('userApp').directive('userCard', function() {
return {
restrict: 'E',
scope: {
info: '=',
onDelete: '&'
},
template: `
<div class="user-card">
<h3>{{ info.name }}</h3>
<p><strong>Email:</strong> {{ info.email }}</p>
<p><strong>Role:</strong> {{ info.role }}</p>
<button ng-click="onDelete()">Delete</button>
</div>
`
};
});

24
25

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy