Scribd
Upload
21 views81 pages

Online Book Store HTML Project

The document outlines a series of experiments for an M.Tech CSE course at Lenora College of Engineering, focusing on web development using HTML, JavaScript, and PHP. It includes instructions for creating a static online bookstore, implementing JavaScript functions for various tasks, and developing a simple visual bean with dynamic color changes. Additionally, it covers XML user data management and PHP scripts for digit summation and palindrome checking.

Uploaded by

Ays Sai Kiran
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
21 views81 pages

Online Book Store HTML Project

The document outlines a series of experiments for an M.Tech CSE course at Lenora College of Engineering, focusing on web development using HTML, JavaScript, and PHP. It includes instructions for creating a static online bookstore, implementing JavaScript functions for various tasks, and developing a simple visual bean with dynamic color changes. Additionally, it covers XML user data management and PHP scripts for digit summation and palindrome checking.

Uploaded by

Ays Sai Kiran
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

LENORA COLLEGE OF ENGINEERING

RAMPACHODAVARAM
R19 – [Link] CSE
1st Year 2nd Semester
MEAN STACK TECHNOLOGIES LAB

1|Page
Experiment 1:
Develop static pages (using only HTML) of an online Book store. The pages should
resemble [Link]. The website should consist of the following pages:
- Home page
- Registration and user Login
- User profile page
- Books catalog
- Shopping cart
- Payment by credit card Order Confirmation

Home page

[Link]:
<html>
<head>
<title>
Amazon</title>
</head>
<body bgcolor="cyan"> <center>
<strong><h1>Welcome to AMAZON</h1></strong>
<form method="post" action="[Link]" target=_blank >
<h4>for books</h4><input type="submit" value="click here">
</form>
</center>
</body>
</html>

Registration and user Login

[Link]:
<html>
<head>
<title>
login</title>
</head>
<body bgcolor="cyan"> <center>
<strong><h1> AMAZON </h1></strong></center>
<right>
<table align="right">
<tr>
<td><h4>user name</td>
<td><input type="text" ></td>
<td></td>
</tr>
<tr>
<td><h4>password</td>

2|Page
<td><input type="password"></td>
<td></td>
</tr>
<tr>
<td>
<form method="post" action="[Link]" >
<input type="submit" value="submit" >
</form>
</td>
<td>
<form method="post" action="[Link]" >
<input type="submit" value="register" >
&nbsp;&nbsp;
<input type="reset" value="reset"></form></td>
</tr>
</table>
</body>
</html>

Registration page

[Link]:
<html>
<head>
<title>
login page</title>
</head>
<body bgcolor="cyan">
<center><strong><h1> AMAZON </h1></strong></center>
<form method="post" action="[Link]" >
<right>
<table align="left">
<tr>
<td><h4>user name</td>
<td><input type="text" ></td>
<tr>
<tr>
<td><h4>password</td>
<td><input type="password"></td>
</tr>
<tr>
<td><h4>confirm password</td>
<td><input type="password"></td>
</tr>
<tr>
<td><h4>male &nbsp;&nbsp;
<option >
<input type="radio" name="sex" id="male"></td>
<td><h4>female &nbsp; &nbsp;
<input type="radio" name="sex" id="female" ></td>
</option>

3|Page
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" rows=5 cols=19>
</textarea>
</td>
<tr>
<td>
<input type="submit" value="submit" ></td>
<td>
<input type="reset" value="reset"></td>
</tr>
</form>
</body>
</html>

Userprofile

[Link]
<html>
<head>
<title>
userprofile</title>
</head>
<body bgcolor="cyan"> <center>
<strong><h1>Welcome to AMAZON Online Book Store </h1></strong></center>
Edit your profile here...
<form method="post" action="[Link]" >
<right>
<table align="left">
<tr>
<td><h4>Edit user name</td>
<td><input type="text" ></td>
<tr>
<tr>
<td><h4>Edit password</td>
<td><input type="password"></td>
</tr>
<tr>
<option >
<td><h4>male &nbsp;&nbsp;
<input type="radio" name="sex" id="male"></td>
<td><h4>female &nbsp; &nbsp;
<input type="radio" name="sex" id="female" ></td>
</option>
</tr>
<tr>
<td>Edit Address</td>
<td><textarea name="address" rows=5 cols=19>
</textarea>
</td>

4|Page
<tr>
<td>
<input type="submit" value="submit" ></td>
</tr>
</form>
</body>
</html>

Books catalog
[Link]:
<html>
<head>
<title>
books catalog</title>
</head>
<body bgcolor="cyan">
<center><h1>AMAZON</h1></center>
<form method="post" action="[Link]">
<left>
<table>
<tr>
<td><b><h3>frontend books</td>
<td></td></tr>
<tr>
<td></td>
<td><h4>C&Ds</td>
</tr>
<tr>
<td></td>
<td><h4>Ads</td>
</tr>
<tr>
<td></td>
<td><h4>JAVA
</td></tr>
<tr>
<td><b><h3>backend books</td>
<td></td>
</tr>
<tr>
<td></td>
<td><h4>Oracle</td>
</tr>
<tr>
<td></td>
<td><h4>Ms SQL Server
</td></tr>
<tr>
<td></td>
<td><h4>MySql </td>

5|Page
</tr>
</table>
</h4>
<center>
<b>for buy one of these books
<br>
</b><input type="submit" value="click here">
</center>
</form>
</body>
</html>

Shopping cart

[Link]:
<html>
<head><title>shopping cart</title>
</head>
<body bgcolor="cyan">
<center><h1>
Shopping Cart</h1></center>
<br><br><br><br><br>
<table align="center">
<tr>
<td>Text Books</td>
<td>
<select >
<optgroup label="select the book">
<option value="C&Ds">C&Ds
<option value="Ads">Ads
<option value="Java">Java
<option value="Oracle">Oracle
<option value="Ms SQL Server">Ms SQL Server
<option value="MySql">MySql
</optgroup>
</select>
</td></tr>
<tr>
<td>
Quantity</td>
<td>
<input type="text" id="q">
</td></tr>
<tr>
<td></td>
<td>
<form method=post action="[Link]">
<input type="submit" value=ok />
</form>
</td></tr>
</table>

6|Page
<center>
<pre>Cost of one book is"500" + shipping "100"</pre>
</center>
<body>
</html>

Payment by credit card

[Link]:
<html>
<head><title>payment</title></head>
<body bgcolor="cyan">
<center><h1>Payment By Credit Card</h1></center>
<form method=post action="[Link]">
<br><br><br><br><br>
<table align="center">
<tr>
<td>
<h4>Total Amount</h4></td>
<td><input type="text">
</td>
</tr>
<tr>
<td><h4>Credit Card Number</td>
<td><input type="text"></td>
</tr>
<tr>
<td>
</td>
<td><input type="submit" value=OK>
</td>
</tr>
</table>
</form></body>
</html>

Order Conformation

Ordrconform:
<html>
<head><title>order conformation</title><M/head>
<body bgcolor="cyan">
<center>
<h1><b>BOOK SHOPPING</h1>
<pre><strong>
<b>Your order Is Conformed
</strong></pre>
<h2><b>THANK YOU</h2>
</center>

7|Page
</body></html>

output:

8|Page
9|Page
10 | P a g e
11 | P a g e
Experiment-2:
Write an HTML page including any required JavaScript that takes a number from text field in
the range of 0 to 999 and shows it in words. It should not accept four and above digits,
alphabets and special characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="number" onchange="f1()"/>
<div id="ans"></div>
<script>
function f1()
{
var v=[Link];
if(v>999 || v<0)
{
alert("Invalid number(range is 0-999)");
}
else
{
var ans="";
//const strRev = [...v].reverse().join("");
const strRev=v;
for(var i=0;i<[Link];i++)
{
var d=[Link](i);
//alert(d);
switch(d)

12 | P a g e
{
case "1":
ans+="ONE ";
break;

case "2":
ans+="TWO ";
break;

case "3":
ans+="THREE ";
break;

case "4":
ans="FOUR ";
break;

case "5":
ans="Five ";
break;

case "6":
ans="SIX ";
break;

case "7":
ans="SEVEN ";
break;

case "8":
ans="EIGHT ";
break;

13 | P a g e
case "9":
ans="NINE ";
break;

case "0":
ans="ZERO ";
break;
}
}
[Link]("ans").innerHTML=ans;
}
}
</script>
</body>
</html>

OUTPUT:

14 | P a g e
Experiment-3:
Develop and demonstrate JavaScript with POP-UP boxes and functions for the following
problems:
a) Display Date using onClick function.
b) Factorial of a number using alert.
c) Multiplication table of a number using alert.
d) Sum of entered numbers using alert and confirm.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Pop-up Box Examples</title>
<script>
// a) Display Date using onClick function
function displayDate() {
[Link]("dateOutput").innerHTML = new Date();
}

// b) Factorial of a number using alert


function calculateFactorial() {
let num = prompt("Enter a number to calculate its factorial:");
num = parseInt(num);

if (isNaN(num) || num < 0) {


alert("Please enter a non-negative integer.");
return;
}

let factorial = 1;
for (let i = 1; i <= num; i++) {
factorial *= i;
}
alert("The factorial of " + num + " is: " + factorial);
}

15 | P a g e
// c) Multiplication table of a number using alert
function displayMultiplicationTable() {
let num = prompt("Enter a number to display its multiplication table:");
num = parseInt(num);

if (isNaN(num)) {
alert("Please enter a valid number.");
return;
}

let table = "Multiplication Table for " + num + ":\n";


for (let i = 1; i <= 10; i++) {
table += num + " x " + i + " = " + (num * i) + "\n";
}
alert(table);
}

// d) Sum of entered numbers using alert and confirm


function calculateSum() {
let sum = 0;
let continueAdding = true;

while (continueAdding) {
let numStr = prompt("Enter a number to add:");
let num = parseFloat(numStr);

if (isNaN(num)) {
alert("Invalid input. Please enter a number.");
} else {
sum += num;
}

16 | P a g e
continueAdding = confirm("Do you want to add another number?");
}
alert("The total sum of entered numbers is: " + sum);
}
</script>
</head>
<body>

<h1>JavaScript Pop-up Box Demonstrations</h1>

<h2>a) Display Date</h2>


<button onclick="displayDate()">Display Current Date</button>
<p id="dateOutput"></p>

<h2>b) Factorial of a Number</h2>


<button onclick="calculateFactorial()">Calculate Factorial</button>

<h2>c) Multiplication Table</h2>


<button onclick="displayMultiplicationTable()">Show Multiplication Table</button>

<h2>d) Sum of Entered Numbers</h2>


<button onclick="calculateSum()">Calculate Sum</button>

</body>
</html>

Output:

17 | P a g e
18 | P a g e
Experiment-4:
Create a simple visual bean with an area filled with a color. If shape is true, it's Square, else
Circle. Color should change dynamically on mouse click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Bean</title>
<style>
#bean-container {
width: 100px;
height: 100px;
margin: 50px auto;
cursor: pointer;
border: 1px solid #ccc; /* Optional: for visibility */
}
.square {
border-radius: 0;
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>

<div id="bean-container" class="square"></div>

<script>
const beanContainer = [Link]('bean-container');
let isSquare = true; // Initial shape
const colors = ['red', 'blue', 'green', 'purple', 'orange'];

19 | P a g e
let currentColorIndex = 0;

// Set initial color


[Link] = colors[currentColorIndex];

[Link]('click', () => {
// Change color
currentColorIndex = (currentColorIndex + 1) % [Link];
[Link] = colors[currentColorIndex];

// Toggle shape
isSquare = !isSquare;
if (isSquare) {
[Link]('circle');
[Link]('square');
} else {
[Link]('square');
[Link]('circle');
}
});
</script>

</body>
</html>

Output:

Experiment-5:
Create an XML document with 10 users. Write a Java program to fetch user details using
DOM or SAX parser based on input user ID.

20 | P a g e
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user id="1">
<name>Alice Smith</name>
<email>[Link]@[Link]</email>
</user>
<user id="2">
<name>Bob Johnson</name>
<email>[Link]@[Link]</email>
</user>
<user id="3">
<name>Charlie Brown</name>
<email>[Link]@[Link]</email>
</user>
<user id="4">
<name>Diana Prince</name>
<email>[Link]@[Link]</email>
</user>
<user id="5">
<name>Edward Norton</name>
<email>[Link]@[Link]</email>
</user>
<user id="6">
<name>Fiona Apple</name>
<email>[Link]@[Link]</email>
</user>
<user id="7">
<name>George Lucas</name>
<email>[Link]@[Link]</email>
</user>

21 | P a g e
<user id="8">
<name>Hannah Montana</name>
<email>[Link]@[Link]</email>
</user>
<user id="9">
<name>Ivan Drago</name>
<email>[Link]@[Link]</email>
</user>
<user id="10">
<name>Julia Roberts</name>
<email>[Link]@[Link]</email>
</user>
</users>

Output:

22 | P a g e
23 | P a g e
24 | P a g e
Experiment-6:
Develop and demonstrate PHP scripts:
a) Sum of individual digits
b) Check if a number is palindrome

a) Sum of individual digits


<?php

function sumDigits(int $number): int {


$sum = 0;
// Handle negative numbers by taking the absolute value
$number = abs($number);

// Loop while the number is greater than 0


while ($number > 0) {
// Get the last digit using the modulo operator
$digit = $number % 10;
// Add the digit to the sum
$sum += $digit;
// Remove the last digit by integer division
$number = (int)($number / 10);
}
return $sum;
}

// Demonstration
$num1 = 12345;
echo "Sum of digits of " . $num1 . ": " . sumDigits($num1) . "\n"; // Output: 15

$num2 = 789;
echo "Sum of digits of " . $num2 . ": " . sumDigits($num2) . "\n"; // Output: 24

25 | P a g e
$num3 = 0;
echo "Sum of digits of " . $num3 . ": " . sumDigits($num3) . "\n"; // Output: 0

$num4 = -567;
echo "Sum of digits of " . $num4 . ": " . sumDigits($num4) . "\n"; // Output: 18

?>
Output:

b) Check if a number is palindrome

<?php

function isPalindrome(int $number): bool {


// Handle negative numbers as non-palindromes (or adjust logic as needed)
if ($number < 0) {
return false;
}

$originalNumber = $number;
$reversedNumber = 0;

// Reverse the number


while ($number > 0) {
$digit = $number % 10;
$reversedNumber = ($reversedNumber * 10) + $digit;

26 | P a g e
$number = (int)($number / 10);
}

// Compare the original and reversed numbers


return $originalNumber === $reversedNumber;
}

// Demonstration
$pal1 = 121;
echo $pal1 . " is a palindrome: " . (isPalindrome($pal1) ? "True" : "False") . "\n"; // Output:
True

$pal2 = 12345;
echo $pal2 . " is a palindrome: " . (isPalindrome($pal2) ? "True" : "False") . "\n"; // Output:
False

$pal3 = 9;
echo $pal3 . " is a palindrome: " . (isPalindrome($pal3) ? "True" : "False") . "\n"; // Output:
True

$pal4 = 1221;
echo $pal4 . " is a palindrome: " . (isPalindrome($pal4) ? "True" : "False") . "\n"; // Output:
True

$pal5 = -121;
echo $pal5 . " is a palindrome: " . (isPalindrome($pal5) ? "True" : "False") . "\n"; // Output:
False

?>

27 | P a g e
Output:

28 | P a g e
Experiment-7:
Implement in CSS:
a) 'get' and 'post' methods
b) Colors, border padding
c) Buttons, frames, tables, nav bars

a) 'get' and 'post' methods


<!-- GET method form -->
<form method="get" style="background-color:#e7f1ff; padding:10px; border:1px solid
#007bff;">
<input type="text" name="username" placeholder="Enter Name">
<input type="submit" value="Submit GET" style="background-color:#007bff; color:white;
padding:5px 10px; border:none; border-radius:4px;">
</form>

<br>

<!-- POST method form -->


<form method="post" style="background-color:#e9fbe9; padding:10px; border:1px solid
#28a745;">
<input type="text" name="email" placeholder="Enter Email">
<input type="submit" value="Submit POST" style="background-color:#28a745; color:white;
padding:5px 10px; border:none; border-radius:4px;">
</form>

b) Colors, border padding

29 | P a g e
<div style="background-color:#fff3cd; border:1px solid #ffc107; padding:15px; border-
radius:5px;">
<p style="color:#856404; font-weight:bold;">This is a styled paragraph with border and
padding.</p>
</div>

c) Buttons, frames, tables, nav bars

<button style="background-color:#dc3545; color:white; padding:10px 20px; border:none;


border-radius:4px;">
Click Me
</button>
<div style="border:2px solid #6c757d; padding:20px; border-radius:8px;">
<p>This is a content inside a frame.</p>
</div>
<table style="border-collapse:collapse; width:100%;">
<tr style="background-color:#343a40; color:white;">
<th style="border:1px solid #ccc; padding:8px;">Name</th>
<th style="border:1px solid #ccc; padding:8px;">Age</th>
</tr>
<tr>
<td style="border:1px solid #ccc; padding:8px;">Ravi</td>
<td style="border:1px solid #ccc; padding:8px;">25</td>
</tr>

30 | P a g e
</table>
<div style="background-color:#007bff; overflow:hidden;">
<a href="#" style="float:left; display:block; color:white; text-align:center; padding:14px 16px;
text-decoration:none;">Home</a>
<a href="#" style="float:left; display:block; color:white; text-align:center; padding:14px 16px;
text-decoration:none;">About</a>
<a href="#" style="float:left; display:block; color:white; text-align:center; padding:14px 16px;
text-decoration:none;">Contact</a>
</div>

31 | P a g e
Experiment-8:
Implement web applications with Database using:
a) PHP
b) Servlets
c) JSP
Implementing web applications with database interaction using PHP, Servlets, and JSP
involves distinct approaches for each technology.
a) PHP Web Application with Database:
 Set up Environment:
Install a web server (e.g., Apache), PHP, and a database (e.g., MySQL, PostgreSQL).
 Database Connection:
Establish a connection to the database using PHP's built-in database extensions
(e.g., mysqli for MySQL, PDO for various databases).
<?php
$servername = "localhost";
$username = "root";
$password = "your_password";
$dbname = "your_database";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
?>
 Execute Queries: Perform CRUD (Create, Read, Update, Delete) operations using
SQL queries executed through the established connection.
<?php
// ... database connection code ...

$sql = "SELECT id, firstname, lastname FROM MyGuests";


$result = $conn->query($sql);

32 | P a g e
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>

 Display Data: Present the retrieved data or results on HTML pages generated by
PHP.
b) Servlets and JSP Web Application with Database:
 Set up Environment:
Install JDK, a Servlet/JSP container (e.g., Apache Tomcat), and a database.
 Database Connection (JDBC):
Use Java Database Connectivity (JDBC) to connect to the database within your Servlets.

import [Link];
import [Link];
import [Link];

public class DatabaseUtil {


public static Connection getConnection() throws SQLException {
String url = "jdbc:mysql://localhost:3306/your_database";
String user = "root";
String password = "your_password";
return [Link](url, user, password);
}
}

33 | P a g e
 Servlet for Logic: Servlets handle user requests, process data, interact with the
database using JDBC, and prepare data to be displayed.
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

@WebServlet("/users")
public class UserServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List<String> users = new ArrayList<>();
try (Connection conn = [Link]()) {
String sql = "SELECT username FROM Users";
try (PreparedStatement stmt = [Link](sql);
ResultSet rs = [Link]()) {
while ([Link]()) {
[Link]([Link]("username"));
}
}
} catch (SQLException e) {
throw new ServletException("Database error", e);
}
[Link]("users", users);

34 | P a g e
[Link]("/WEB-INF/views/[Link]").forward(request,
response);
}
}

 JSP for Presentation: JSPs display the data retrieved by Servlets. Servlets forward
requests to JSPs, passing data as request attributes.

<%@ page language="java" contentType="text/html; charset=UTF-8"


pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="[Link] %>
<!DOCTYPE html>
<html>
<head>
<title>User List</title>
</head>
<body>
<h1>Users</h1>
<ul>
<c:forEach var="user" items="${users}">
<li>${user}</li>
</c:forEach>
</ul>
</body>
</html>

35 | P a g e
Experiment-9:
Design a simple calculator using:
a) JavaScript
b) PHP
c) Servlet
d) JSP

a) JavaScript

<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
/* Basic CSS for styling the calculator layout */
.calculator {
width: 200px;
margin: 50px auto;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
input[type="text"] {
width: 90%;
margin-bottom: 10px;
padding: 5px;
}
button {
width: 45px;
height: 45px;
margin: 2px;
}
</style>
</head>

36 | P a g e
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="appendOperator('/')">/</button>
</div>
<div>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="appendOperator('*')">*</button>
</div>
<div>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="appendOperator('-')">-</button>
</div>
<div>
<button onclick="appendNumber('0')">0</button>
<button onclick="clearDisplay()">C</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendOperator('+')">+</button>
</div>
</div>

<script>
let display = [Link]('display');
let currentInput = '';

37 | P a g e
let operator = '';
let firstOperand = null;

function appendNumber(num) {
currentInput += num;
[Link] = currentInput;
}

function appendOperator(op) {
if (currentInput === '') return;
if (firstOperand === null) {
firstOperand = parseFloat(currentInput);
} else if (operator) {
calculateResult(); // Perform previous operation if one exists
}
operator = op;
currentInput = '';
}

function calculateResult() {
if (firstOperand === null || operator === '' || currentInput === '') return;
let secondOperand = parseFloat(currentInput);
let result;
switch (operator) {
case '+': result = firstOperand + secondOperand; break;
case '-': result = firstOperand - secondOperand; break;
case '*': result = firstOperand * secondOperand; break;
case '/':
if (secondOperand === 0) {
alert("Cannot divide by zero!");
clearDisplay();
return;

38 | P a g e
}
result = firstOperand / secondOperand;
break;
default: return;
}
[Link] = result;
firstOperand = result;
operator = '';
currentInput = String(result); // Allow further operations on the result
}

function clearDisplay() {
[Link] = '';
currentInput = '';
operator = '';
firstOperand = null;
}
</script>
</body>
</html>

39 | P a g e
b) PHP
A PHP calculator relies on form submissions and server-side processing.
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<title>PHP Calculator</title>
</head>
<body>
<form action="[Link]" method="post">
<input type="text" name="num1" placeholder="Enter number 1" required>
<select name="operator">
<option value="+">+</option>

40 | P a g e
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="num2" placeholder="Enter number 2" required>
<button type="submit">Calculate</button>
</form>
</body>
</html>
<!-- [Link] -->
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$operator = $_POST['operator'];
$result = '';

if (is_numeric($num1) && is_numeric($num2)) {


switch ($operator) {
case '+': $result = $num1 + $num2; break;
case '-': $result = $num1 - $num2; break;
case '*': $result = $num1 * $num2; break;
case '/':
if ($num2 != 0) {
$result = $num1 / $num2;
} else {
$result = "Error: Division by zero!";
}
break;
default: $result = "Invalid operator"; break;
}
} else {

41 | P a g e
$result = "Invalid input: Please enter numbers.";
}
echo "Result: " . $result;
}
?>

c) Servlet
A Servlet-based calculator involves a [Link] configuration, an HTML form, and a Java
Servlet class.
<!-- [Link] -->
<web-app>
<servlet>
<servlet-name>CalculatorServlet</servlet-name>
<servlet-class>[Link]</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CalculatorServlet</servlet-name>
<url-pattern>/calculate</url-pattern>
</servlet-mapping>
</web-app>
<!-- [Link] -->
<!DOCTYPE html>
<html>
<head>
<title>Servlet Calculator</title>
</head>
<body>
<form action="calculate" method="post">
<input type="text" name="num1" placeholder="Enter number 1" required>
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>

42 | P a g e
<option value="/">/</option>
</select>
<input type="text" name="num2" placeholder="Enter number 2" required>
<button type="submit">Calculate</button>
</form>
</body>
</html>
// [Link]
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];

@WebServlet("/calculate") // Alternative to [Link] mapping for modern servlets


public class CalculatorServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
[Link]("text/html");
PrintWriter out = [Link]();

try {
double num1 = [Link]([Link]("num1"));
double num2 = [Link]([Link]("num2"));
String operator = [Link]("operator");
double result = 0;

switch (operator) {
case "+": result = num1 + num2; break;
case "-": result = num1 - num2; break;
case "*": result = num1 * num2; break;

43 | P a g e
case "/":
if (num2 == 0) {
[Link]("Error: Division by zero!");
return;
}
result = num1 / num2;
break;
default: [Link]("Invalid operator"); return;
}
[Link]("Result: " + result);

} catch (NumberFormatException e) {
[Link]("Invalid input: Please enter numbers.");
} finally {
[Link]();
}
}
}

d) JSP
A simple calculator using JSP typically involves two main components: an HTML form for
user input and a JSP page to process the calculation.
1. [Link] (Input Form):
This JSP file will present the user with input fields for two numbers and buttons for the
desired operations.
<!DOCTYPE html>
<html>
<head>
<title>Simple JSP Calculator</title>
</head>
<body>
<h2>Simple Calculator</h2>
<form action="[Link]" method="post">

44 | P a g e
Number 1: <input type="text" name="num1"><br><br>
Number 2: <input type="text" name="num2"><br><br>
<input type="submit" name="operation" value="Add">
<input type="submit" name="operation" value="Subtract">
<input type="submit" name="operation" value="Multiply">
<input type="submit" name="operation" value="Divide">
</form>
</body>
</html>
2. [Link] (Calculation Logic):
This JSP file will receive the input from [Link], perform the calculation based on the
chosen operation, and display the result.

45 | P a g e
Experiment-10:
Create registration and login forms with validations using JScript query.

<!DOCTYPE html>
<html>
<head>
<title>Registration Form Using jQuery - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/[Link]"/>
<!-- Include JS File Here -->
<script src="[Link]
<script type="text/javascript" src="js/[Link]"></script>
</head>
<body>
<div class="container">
<div class="main">
<form class="form" method="post" action="#">
<h2>Create Registration Form Using jQuery</h2>
<label>Name :</label>
<input type="text" name="dname" id="name">
<label>Email :</label>
<input type="text" name="demail" id="email">
<label>Password :</label>
<input type="password" name="password" id="password">
<label>Confirm Password :</label>
<input type="password" name="cpassword" id="cpassword">
<input type="button" name="register" id="register" value="Register">
</form>
</div>
</body>
</html>
jQuery File: [Link]

46 | P a g e
Given below our complete jQuery code.
$(document).ready(function() {
$("#register").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var cpassword = $("#cpassword").val();
if (name == '' || email == '' || password == '' || cpassword == '') {
alert("Please fill all fields...!!!!!!");
} else if (([Link]) < 8) {
alert("Password should atleast 8 character in length...!!!!!!");
} else if (!(password).match(cpassword)) {
alert("Your passwords don't match. Try again?");
} else {
$.post("[Link]", {
name1: name,
email1: email,
password1: password
}, function(data) {
if (data == 'You have Successfully Registered.....') {
$("form")[0].reset();
}
alert(data);
});
}
});
});
Copy
PHP Script: [Link]
Below script executes for inserting data into database.
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing connection with
server..

47 | P a g e
$db = mysql_select_db("college", $connection); // Selecting Database.
$name=$_POST['name1']; // Fetching Values from URL.
$email=$_POST['email1'];
$password= sha1($_POST['password1']); // Password Encryption, If you like you can
also leave sha1.
// Check if e-mail address syntax is valid or not
$email = filter_var($email, FILTER_SANITIZE_EMAIL); // Sanitizing email(Remove
unexpected symbol like <,>,?,#,!, etc.)
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo "Invalid Email.......";
}else{
$result = mysql_query("SELECT * FROM registration WHERE email='$email'");
$data = mysql_num_rows($result);
if(($data)==0){
$query = mysql_query("insert into registration(name, email, password) values
('$name', '$email', '$password')"); // Insert query
if($query){
echo "You have Successfully Registered.....";
}else
{
echo "Error....!!";
}
}else{
echo "This email is already registered, Please try another email...";
}
}
mysql_close ($connection);
?>
Copy
My SQL Code Segment:
To create database and table, execute following codes in your My SQL .

CREATE DATABASE college;

48 | P a g e
CREATE TABLE registration(
id int(10) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(255) NOT NULL,
PRIMARY KEY (id)
)
Copy
CSS File: [Link]
Styling HTML Elements.
/* Below line is used for online Google font */
@import url([Link]
h2{
text-align: center;
font-size: 24px;
}
hr{
margin-bottom: 30px;
}
[Link]{
width: 960px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
position:relative;
}
[Link]{
width: 320px;
float:left;
padding: 10px 55px 40px;
background-color: rgba(187, 255, 184, 0.65);
border: 15px solid white;

49 | P a g e
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
input[type=text],[type=password] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px #00F5FF;
border: 2px solid #00F5FF;
color: #4f4f4f;
font-size: 16px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
#register {
font-size: 20px;
margin-top: 15px;
background: linear-gradient(#22abe9 5%, #36caf0 100%);
border: 1px solid #0F799E;
padding: 7px 35px;
color: white;
text-shadow: 0px 1px 0px #13506D;
font-weight: bold;
border-radius: 2px;
cursor: pointer;

50 | P a g e
width: 100%;
}
#register:hover{
background: linear-gradient(#36caf0 5%, #22abe9 100%);
}

51 | P a g e
Experiment-11:
JScript to retrieve student information from student database using database connectivity.
Steps to create the application:
1. First, open Netbeans and click on the File option from the menu bar.

2. Now create a new Java application by clicking on New Project -> Java -> Java
Application and give a suitable project name and click finish.

52 | P a g e
3. Now create a new file by going to the File option again on the menu bar, then New File ->
Swing GUI Forms -> JFrame Form, and give a suitable file name click finish.

53 | P a g e
4. After successful file creation, we will now be presented with the following screen. The 3
important parts of this window are:
 Design: This is the area where we will create the design/template of our application.
 Source: This is where the logic code of the program is written.
 Palette: This component contains all the widgets which we need to drag and drop on
the design area

54 | P a g e
Window displayed after successful Java file creation.
5. Now from the palette situated at the right-hand side of the window, start dragging the
toolkit widgets.

Drag Components from palette to design area


6. Since we need to display all data in a tabulated form, drag the table widget from the
palette onto the design area. Now to set the headings, right-click on the table,
select Properties -> Model ->Add/delete Columns.

55 | P a g e
56 | P a g e
7. Now let us create the database to store the data. Open MySQL command client, enter
password, and type in the following commands to create a new database, new table, and
defining the attributes.
mysql> create database student;
Query OK, 1 row affected (0.14 sec)

mysql> use student;


Database changed
mysql> create table record(
-> rollno int(3),
-> name char(20),
-> class int(2),
-> section char(2),
-> address varchar(40));
Query OK, 0 rows affected (2.03 sec)

57 | P a g e
mysql> describe record;
+---------+-------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| rollno | int(3) | YES | | NULL | |
| name | char(20) | YES | | NULL | |
| class | int(2) | YES | | NULL | |
| section | char(2) | YES | | NULL | |
| address | varchar(40) | YES | | NULL | |
+---------+-------------+------+-----+---------+-------+
5 rows in set (0.03 sec)
8. We need to import libraries that are needed to set up a connection with the database and
retrieve data which is done by - DriverManager Class, Connection Class, and Statement
Class. Thus go to the menubar, under Tools->Libraries, and add MySQL JDBC connector.
Note down the Library ClassPath and click OK. Now go to Projects toolbar and go to your
application's Libraries. Right-click and select Add Jar/Library and browse the Library
classpath noted down previously.

58 | P a g e
59 | P a g e
Add Jar file

Add mysql connector


9. Go to Windows->Services->Databases and enter the required credentials of your
MySQL username and password. After clicking test connection, if it's successful, the
connector logo appears connected.

60 | P a g e
Connection is initially broken

61 | P a g e
62 | P a g e
10. Now to type the code, double-click on jButton1 (Insert), you will be directed to the source
tab. Here type in the following code.
// Write the import code at top
import [Link].*;
import [Link];
import [Link];

public class SchoolRecord extends [Link] {

Connection con = null;


Statement stmt = null;
ResultSet rs = null;
// JButton1 Code starts from here
try {
[Link]("[Link]");

63 | P a g e
Connection con = [Link](
"jdbc:mysql://localhost:3306/student", "root",
"root");
stmt = [Link]();
String rollno = [Link]();
String name = [Link]();
String class = [Link]();
String sec = [Link]();
String adr = [Link]();
String INSERT = "INSERT INTO RECORD VALUES('"
+ rollno + "','" + name + "','"
+ class + "','" + sec + "','" + adr
+ "');";
[Link](INSERT);
[Link](
this, "Record Added Successfully");
[Link](true);
}
catch (Exception e) {
[Link](
this, "Error In Connectivity");
}

In the above code, the following things need to be kept in mind which are:
1. Connection Class: It acts as a connection session between the Java program and
specific database application. It is through which we send SQL queries to the
database.
2. Statement Class: A Statement is an interface that represents a SQL statement.
3. ResultSet: When you execute Statement objects, and they generate ResultSet
objects, which is a table of data representing a database result set. A Connection
object is needed to create a Statement object.
4. JDBC Driver Registration: To open a connection to the database from Java
application, the JDBC driver should be registered with the Device Manager. Hence
we use forName() of language package. Here [Link] is the driver
name for MySQL.

64 | P a g e
5. .getConnection(): It is used to establish a physical connection to the database by
specifying the database name(student) , username(root) and password(root). This
creates a connection object.
6. Query Execution: createStatement() creates a statement type object that holds SQL
queries. Then executeQuery/executeUpdate method executes the SQL statement.
Here it is "INSERT INTO RECORD VALUES....".
7. Data Extraction: The above method creates a resultset object that contains the
resultant data. (Now see the code below) rs is the variable that stores the resultant
dataset and hence we use a .get<Type>() method to obtain data.
8. while([Link]()): (See code below) Since we need data containing multiple rows, we
use a loop to access them. The next() method moves the cursor forward by one row.
9. Closing open databases: We close all open databases to clean up the
environment. Thus we use- [Link]() , [Link]() and [Link]() methods.
11. Now to display all data, write the following code under the jButton2 ActionPerformed
option which can be achieved by clicking twice on View Data Button in the design area.
DefaultTableModel model
= (DefaultTableModel)[Link]();
try {
[Link]("[Link]");
Connection con = [Link](
"jdbc:mysql://localhost:3306/student", "root",
"root");
String query = "SELECT* FROM RECORD;";
ResultSet rs = [Link](query);
while ([Link]()) {
String rollno = [Link]("rollno");
String name = [Link]("name");
String class = [Link]("class");
String sec = [Link]("section");
String adr = [Link]("address");
[Link](
new Object[] { rollno, name, class, sec, adr });
}
[Link]();
[Link]();

65 | P a g e
[Link]();
}
catch (Exception e) {
[Link](this,
"Error In Connectivity");
}

12. Now to clear all textfields, textareas and table content write the following code under the
jButton3 ActionPerformed option which can be achieved by clicking twice on Clear Button in
the design area.
[Link]("");
[Link]("");
[Link]("");
[Link]("");
[Link]("");
DefaultTableModel dm
= (DefaultTableModel)[Link]();
[Link]().removeAllElements();
[Link]();

13. Now to exit from the system, add the following statement under the jButton4
ActionPerformed option which can be achieved by clicking twice on Exit Button in the design
area.
[Link](0);
14. After code is typed, right-click anywhere on the screen and select the Run File option
from the drop-down menu. The final output is shown below. Input necessary details and the
application is ready!

66 | P a g e
Insert Data

67 | P a g e
Experiment-12:
Implement in React JS:
a) Create constructs and data elements
b) Implement DOM operations

import React, { useState } from 'react';

function App() {
// Data Element: List of names (array)
const [names, setNames] = useState(["Sai", "Kiran"]);

// Data Element: Input value (string)


const [inputValue, setInputValue] = useState("");

// DOM Operation: Add name to list


const handleAdd = () => {
if ([Link]() !== "") {
setNames([...names, inputValue]);
setInputValue(""); // Clear input box
}
};

// DOM Operation: Remove a name


const handleRemove = (index) => {
const updatedNames = [...names];
[Link](index, 1);
setNames(updatedNames);
};

return (
<div style={{ padding: '20px' }}>
<h2>Simple React Example</h2>

68 | P a g e
{/* Input Field to enter name */}
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue([Link])}
placeholder="Enter name"
/>

{/* Button to add name */}


<button onClick={handleAdd}>Add</button>

{/* Displaying list of names */}


<ul>
{[Link]((name, index) => (
<li key={index}>
{name}
<button style={{ marginLeft: '10px' }} onClick={() => handleRemove(index)}>
Remove
</button>
</li>
))}
</ul>
</div>
);
}

export default App;

69 | P a g e
70 | P a g e
Experiment-13:
Implement in Angular JS:
a) Data binding
b) Directives and events
c) Fetching data from MySQL

🔹 Step 1: HTML + AngularJS Frontend

Save this as [Link]


(AngularJS CDN is used here, not Angular 2+)
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS MySQL Example</title>
<script src="[Link]
</head>
<body ng-controller="myCtrl">

<h2>Student Data</h2>

<!-- a) Data Binding -->


<label>Enter Name:</label>
<input type="text" ng-model="studentName">
<p>You typed: {{ studentName }}</p>

<!-- b) Directive & Event -->


<button ng-click="loadData()">Load Data from MySQL</button>

<table border="1" style="margin-top: 10px;">


<tr>
<th>ID</th>
<th>Name</th>
<th>Course</th>
</tr>

71 | P a g e
<tr ng-repeat="student in students">
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>

<script>
var app = [Link]('myApp', []);
[Link]('myCtrl', function($scope, $http) {
$[Link] = "";

// c) Fetching data from MySQL


$[Link] = function() {
$[Link]("[Link]")
.then(function(response) {
$[Link] = [Link];
});
};
});
</script>

</body>
</html>

🔹 Step 2: PHP Backend to Fetch from MySQL

Save this as [Link] (in the same folder on your local server like XAMPP)
<?php
$host = "localhost";
$user = "root";
$password = "";
$db = "college"; // make sure this DB exists

72 | P a g e
$conn = new mysqli($host, $user, $password, $db);

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

$sql = "SELECT id, name, course FROM students";


$result = $conn->query($sql);

$data = array();

while($row = $result->fetch_assoc()) {
$data[] = $row;
}

echo json_encode($data);
$conn->close();
?>

🔹 Step 3: Sample MySQL Table

Make sure you create a MySQL table like this:


CREATE DATABASE college;

USE college;

CREATE TABLE students (


id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50),
course VARCHAR(50)
);

INSERT INTO students (name, course) VALUES

73 | P a g e
('Sai', '[Link]'),
('Kiran', 'MBA'),
('Anjali', '[Link]');

74 | P a g e
Experiment-14:
Invoke data using JScript from MongoDB.
To invoke and retrieve data from MongoDB using JavaScript, you typically use the official
MongoDB [Link] driver. This involves setting up a [Link] application and connecting to
your MongoDB database.
Here's a general outline of the process: Install the MongoDB [Link] Driver.
npm install mongodb
Connect to MongoDB.
const { MongoClient } = require('mongodb');

// Replace with your MongoDB connection string


const uri = "mongodb+srv://<username>:<password>@<cluster-url>/<database-
name>?retryWrites=true&w=majority";

const client = new MongoClient(uri);

async function connectAndOperate() {


try {
await [Link]();
[Link]("Connected to MongoDB!");

const database = [Link]("yourDatabaseName"); // Specify your database name


const collection = [Link]("yourCollectionName"); // Specify your
collection name

// Example: Find all documents in the collection


const documents = await [Link]({}).toArray();
[Link]("Found documents:", documents);

// Example: Find a specific document


const specificDocument = await [Link]({ name: "Example Document" });
[Link]("Specific document:", specificDocument);

} finally {

75 | P a g e
// Close the connection when done or if an error occurs
await [Link]();
[Link]("Connection closed.");
}
}

connectAndOperate().catch([Link]);

76 | P a g e
Experiment-15:
Create an Online fee payment form using JScript and MongoDB.

To create an Online Fee Payment Form using JavaScript (JScript) and MongoDB, we’ll
follow a [Link] + Express + MongoDB approach — this is standard and works well for
full-stack development.

✅ Tech Stack:

 Frontend: HTML + Vanilla JavaScript


 Backend: [Link] with Express
 Database: MongoDB (local or Atlas)

🔷 Step 1: Setup MongoDB

You can:
 Install MongoDB locally OR
 Use MongoDB Atlas (cloud-based, free tier available)
Create a collection named fee_payments in a database called college.

🔷 Step 2: HTML + JavaScript (Frontend)

Save as [Link]:
<!DOCTYPE html>
<html>
<head>
<title>Online Fee Payment Form</title>
</head>
<body>
<h2>Fee Payment Form</h2>
<form id="feeForm">
<label>Name:</label><br>
<input type="text" id="name" required><br><br>

<label>Roll No:</label><br>
<input type="text" id="roll" required><br><br>

<label>Course:</label><br>
<input type="text" id="course" required><br><br>

77 | P a g e
<label>Amount:</label><br>
<input type="number" id="amount" required><br><br>

<button type="submit">Pay Now</button>


</form>

<p id="status"></p>

<script>
[Link]('feeForm').addEventListener('submit', function(e) {
[Link]();

const data = {
name: [Link]('name').value,
roll: [Link]('roll').value,
course: [Link]('course').value,
amount: [Link]('amount').value
};

fetch('[Link] {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: [Link](data)
})
.then(res => [Link]())
.then(result => {
[Link]('status').innerText = [Link];
})
.catch(err => {

78 | P a g e
[Link]('status').innerText = "Error processing payment.";
[Link](err);
});
});
</script>
</body>
</html>

🔷 Step 3: [Link] + Express Server (Backend)

Create a file [Link]:


const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();


[Link]([Link]());
[Link](cors());

// Connect to MongoDB
[Link]('mongodb://localhost:27017/college', {
useNewUrlParser: true,
useUnifiedTopology: true
});

// Schema
const feeSchema = new [Link]({
name: String,
roll: String,
course: String,
amount: Number,
paidOn: { type: Date, default: [Link] }

79 | P a g e
});

const Fee = [Link]('Fee', feeSchema);

// POST API to store form data


[Link]('/payfee', async (req, res) => {
try {
const newPayment = new Fee([Link]);
await [Link]();
[Link]({ message: "Fee paid successfully!" });
} catch (err) {
[Link](500).json({ message: "Payment failed!" });
}
});

// Start server
[Link](3000, () => {
[Link]('Server running on [Link]
});

🔷 Step 4: Run the App

1. Make sure MongoDB is running.


2. Install dependencies:
npm init -y
npm install express mongoose body-parser cors
Start server:
node [Link]
Open [Link] in a browser and submit the form.

80 | P a g e
81 | P a g e

You might also like