Scribd
Upload
4 views

Web Tech

The document outlines a series of web technology experiments for a 2nd-year MCA program at Galgotias University, detailing various HTML, CSS, JavaScript, PHP, and JSP projects. It includes instructions for creating registration forms, static pages for an online bookstore, and dynamic web pages with server-side scripting. Each experiment is accompanied by sample code and design elements to guide students in their practical applications.

Uploaded by

ajha18697
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
4 views

Web Tech

The document outlines a series of web technology experiments for a 2nd-year MCA program at Galgotias University, detailing various HTML, CSS, JavaScript, PHP, and JSP projects. It includes instructions for creating registration forms, static pages for an online bookstore, and dynamic web pages with server-side scripting. Each experiment is accompanied by sample code and design elements to guide students in their practical applications.

Uploaded by

ajha18697
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/ 55

Galgotias University

Plot No.2, Sector-17A, Yamuna Expressway, Greater


Noida, Gautam Buddh Nagar, U.P., India

Course Name: Web Technology School: SCAT


Year: 2nd Semester: 3rd
Program: MCA Session: 2023-25

Submitted By: Submitted To:

Name: Ajeet Kumar Dr. Santosh Kumar


Admission No: 23SCSE2030640
Page |2

Name Semester Section Enrollment No.

Prabhat Kumar 3rd 6 23132030062

Index

Sr. Name of Experiment Page Date of Signature of


No. No. Experiment Faculty

Create a simple HTML


1. 3
registration form.

To create Student Registration


2. 8
Forms in HTML.

Develop static pages of an


3. 14
online Book store.

Write an HTML page that


4. contains a selection box with a 34
list of 5 countries.

Write a program to store the


form fields in a database, use
5. 39
any appropriate Server Slide
Scripting.
Page |3

Sr. Name of Experiment Page Date of Signature of


No. No. Experiment Faculty

Create a dynamic web page


6. 35
with the help of JavaScript
Create html with js to perform
7. basic operation and show how 39
try catch works.

8. Create a dynamic web page 41


with the help of js events.
Write a php code using
9. function to find the sum of two 43
integers.

Create a php program to


10. demonstrate opening and 44
closing a file.

Create a php program to


11. 46
demonstrate reading a file

Write a program to verify the


12. 47
email address is valid or not.

Write a jsp code for dynamic


13. web page using server 48
response

Write a java script program to


14. 49
validate the user login page

Design and develop a book


store webpage in any scripting
15. language and store the books 52
details in database that is
created in MySQL.
Page |4

Experiment No. 1
Aim: Create a simple HTML registration form.

Program:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
text-align: center;
}
input[type="text"], input[type="email"], input[type="password"], select {
width: 100%;
padding: 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 8px 0;
Page |5

border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.form-group {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form action="register.php" method="POST">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password"
required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="country">Country:</label>
<input type="text" id="country" name="country" required>
</div>
<input type="submit" value="Register">
</form>
Page |6

</div>
</body>
</html>

Sample Run:
Page |7

Experiment No. 2
Aim: To create Student Registration Forms in HTML.

Program:
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Student Registration Form</h2>
<form action="#" method="post">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name" required>

<label for="last-name">Last Name:</label>


<input type="text" id="last-name" name="last-name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone" required>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required>

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>

<label for="course">Course:</label>
<select id="course" name="course" required>
<option value="science">Science</option>
Page |8

<option value="arts">Arts</option>
<option value="commerce">Commerce</option>
</select>

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


</form>
</div>
</body>
</html>

CSS:

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
}

h2 {
text-align: center;
margin-bottom: 20px;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
Page |9

input[type="date"],
select,
textarea {
margin-bottom: 15px;
padding: 10px;
border: 1px solid #b8b8b8;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
}

input[type="submit"]:hover {
background-color: #2e8b32;
}
P a g e | 10

Sample Run:
P a g e | 11

Experiment No. 3
Aim: Develop static pages of an online Book store. The website should consist the
following pages. i. Home page ii. Registration and user Login iii. User profile page iv.
Books catalog v. Shopping cart vi. Payment by credit card Order Conformation.

Program:
HTML:

Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to the Online Bookstore</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="catalog.html">Book Catalog</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="payment.html">Payment</a></li>
</ul>
</nav>
</header>
<main>
<h2>Discover Your Next Great Read</h2>
<p>Explore our wide collection of books and find your next favorite.</p>
</main>
<footer>
<p>&copy; 2024 Online Bookstore</p>
</footer>
</body>
P a g e | 12

</html>

Register.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - Online Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Online Bookstore</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="catalog.html">Book Catalog</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="payment.html">Payment</a></li>
</ul>
</nav>
</header>
<main>
P a g e | 13

<h2>Register</h2>
<form action="#">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Register</button>
</form>
</main>
<footer>
<p>&copy; 2024 Online Bookstore</p>
</footer>
</body>
</html>

Login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - Online Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Online Bookstore</h1>
P a g e | 14

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="catalog.html">Book Catalog</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="payment.html">Payment</a></li>
</ul>
</nav>
</header>
<main>
<h2>Login</h2>
<form action="#">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
</main>
<footer>
<p>&copy; 2024 Online Bookstore</p>
</footer>
</body>
</html>
P a g e | 15

Profile.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile - Online Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Online Bookstore</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="catalog.html">Book Catalog</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="payment.html">Payment</a></li>
</ul>
</nav>
</header>
<main>
<h2>User Profile</h2>
<p>Username: user123</p>
<p>Email: user123@example.com</p>
<button>Edit Profile</button>
</main>
<footer>
<p>&copy; 2024 Online Bookstore</p>
</footer>
</body>
</html>
P a g e | 16

BookCataloge.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalog - Online Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Online Bookstore</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="catalog.html">Book Catalog</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="payment.html">Payment</a></li>
</ul>
</nav>
P a g e | 17

</header>
<main>
<h2>Book Catalog</h2>
<ul>
<li>
<h3>Book Title 1</h3>
<p>Author: Author 1</p>
<p>Price: $10</p>
<button>Add to Cart</button>
</li>
<li>
<h3>Book Title 2</h3>
<p>Author: Author 2</p>
<p>Price: $15</p>
<button>Add to Cart</button>
</li>
<!-- Add more books as needed -->
</ul>
</main>
<footer>
<p>&copy; 2024 Online Bookstore</p>
</footer>
</body>
</html>
P a g e | 18

Cart.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart - Online Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Online Bookstore</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="catalog.html">Book Catalog</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="payment.html">Payment</a></li>
</ul>
</nav>
</header>
<main>
<h2>Shopping Cart</h2>
<ul>
<li>
<h3>Book Title 1</h3>
<p>Author: Author 1</p>
<p>Price: Rs.10</p>
<button>Remove</button>
</li>
<li>
<h3>Book Title 2</h3>
<p>Author: Author 2</p>
<p>Price: Rs.15</p>
<button>Remove</button>
</li>
<!-- Add more items as needed -->
</ul>
<p>Total: Rs. 25</p>
<button>Proceed to Payment</button>
</main>
<footer>
<p>&copy; 2024 Online Bookstore</p>
P a g e | 19

</footer>
</body>
</html>

Payment.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment - Online Bookstore</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Online Bookstore</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="catalog.html">Book Catalog</a></li>
<li><a href="cart.html">Shopping Cart</a></li>
<li><a href="payment.html">Payment</a></li>
</ul>
</nav>
P a g e | 20

</header>
<main>
<h2>Payment</h2>
<form action="#">
<label for="card-number">Card Number:</label>
<input type="text" id="card-number" name="card-number" required>
<label for="card-holder-Name">Card Holder Name: </label>
<input type="text" id="card-holder-Name" name="card-holder-Name" required>
<label for="expiry-date">Expiry Date:</label>
<input type="text" id="expiry-date" name="expiry-date" required>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv" required>
<button type="submit">Pay Now</button>
</form>
</main>
<footer>
<p>&copy; 2024 Online Bookstore</p>
</footer>
</body>
</html>

CSS:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #e6e6e6;
P a g e | 21

header {
background-color: #480d29;
color: white;
padding: 1rem;
text-align: center;
}

header h1 {
margin: 0;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 1rem;
}

nav ul li a {
color: white;
text-decoration: none;
}

main {
padding: 2rem;
background-color: white;
margin: 2rem;
border-radius: 5px;
}

footer {
text-align: center;
padding: 1rem;
background-color: #480d29;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}

form {
display: flex;
flex-direction: column;
P a g e | 22

form label {
margin: 0.5rem 0 0.2rem;
}

form input, form button {


padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 3px;
}

button {
background-color: #432c98;
color: white;
cursor: pointer;
}

button:hover {
background-color: #555;
}

ul {
list-style-type: none;
padding: 0;
}

ul li {
margin: 1rem 0;
}

ul li h3 {
margin: 0;
}
P a g e | 23

Experiment No. 4
Aim: Write an HTML page that contains a selection box with a list of 5 countries. When
the user selects a country, its capital should be printed next in the list. Add CSS to
customize the properties of the font of the capital (color, bold and font size).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country and Capital</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(300deg, #dd00ff, #99a5fc, #ef8172);
background-size: 150% 150%;
animation: gradient-animation 20s ease infinite;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}
h1 {
margin-bottom: 20px;
font-size: 24px;
text-align: center;
}
select {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
#capital {
P a g e | 24

text-align: center;
font-weight: bold;
font-size: 18px;
color: #333;
}

@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

</style>
</head>
<body>
<section id="title" class="gradient-background">
<div class="container col-xxl-8 px-4 pt-5">
<div class="container">
<h1>Select a Country</h1>
<form>
<label for="countries">Choose a country:</label>
<select id="countries" name="countries" onchange="showCapital()">
<option value="" disabled selected>Select a country</option>
<option value="Washington, D.C.">United States</option>
<option value="Ottawa">Canada</option>
<option value="London">United Kingdom</option>
<option value="Canberra">Australia</option>
<option value="New Delhi">India</option>
</select>
</form>
<div id="capital"></div>
</div>
</div>

</section>

<script>
function showCapital() {
const capital = document.getElementById("countries").value;
document.getElementById("capital").textContent = "Capital: " + capital;
P a g e | 25

}
</script>

</body>
</html>
P a g e | 26

Experiment No. 5
Aim: Write a program to store the form fields in a database, use any appropriate Server
Slide Scripting.

Frontend:

Signup.js:

import React, {useState} from 'react'


import { Link, useNavigate } from 'react-router-dom'
import validation from './SignupValidation';
import axios from 'axios';

function Signup() {
const[values, setValues] = useState({
name:'',
email: '',
password: ''
})

const navigate = useNavigate();

const[errors, setErrors] = useState({})

const handleInput = (event) => {


setValues(prev => ({...prev, [event.target.name]: [event.target.value]}))
}

const handleSubmit = (event) => {


event.preventDefault();
setErrors(validation(values));
if(errors.name === "" && errors.email === "" && errors.password === "") {
axios.post("http://http://localhost:8081/signup", values)
.then(res=> {
navigate('/');
})
.catch(err=> console.log(err));

}
}
return (
<div className='d-flex justify-content-center align-items-center bg-primary vh-100'>
<div className='bg-white p-3 rounded w-25'>
P a g e | 27

<h2>Sign-Up</h2>
<form action="" onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor='name'>Name</label>
<input type='text' placeholder='Enter Name' name='name'
onChange = {handleInput} className='form-control rounded-0'/>
{errors.name && <span className='text-danger'> {errors.name}</span>}
</div>
<div className="mb-3">
<label htmlFor='email'>Email</label>
<input type='email' placeholder='Enter Email' name='email'
onChange = {handleInput} className='form-control rounded-0'/>
{errors.email && <span className='text-danger'> {errors.email}</span>}
</div>
<div className="mb-3">
<label htmlFor='password'>Password</label>
<input type='password' placeholder='Enter Password' name='password'
onChange = {handleInput} className='form-control rounded-0'/>
{errors.password && <span className='text-danger'>
{errors.password}</span>}
</div>
<button type='Submit' className='btn btn-success w-100'>Sign up</button>
<p> You are agree to our terms and policies </p>
<Link to="/" className='btn btn-default border w-100 bg-light rounded-0 text
decoration-none'> Login </Link>
</form>
</div>
</div>
)
}

export default Signup;


P a g e | 28

Login.js:
import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import validation from './LoginValidation';

export default function Login() {


const[values, setValues] = useState({
email: '',
password: ''
})
const[errors, setErrors] = useState({})
const handleInput = (event) => {
setValues(prev => ({...prev, [event.target.name]: [event.target.value]}))
}

const handleSubmit = (event) => {


event.preventDefault();
setErrors(validation(values));
}
return (
<div className='d-flex justify-content-center align-items-center bg-primary vh-100'>
<div className='bg-white p-3 rounded w-25'>
<h2>Sign-in</h2>
P a g e | 29

<form action="" onSubmit={handleSubmit}>


<div className="mb-3">
<label htmlFor='email'>Email</label>
<input type='email' placeholder='Enter Email' name='email'
onChange = {handleInput} className='form-control rounded-0'/>
{errors.email && <span className='text-danger'> {errors.email}</span>}
</div>
<div className="mb-3">
<label htmlFor='password'>Password</label>
<input type='password' placeholder='Enter Password' name='password'
onChange = {handleInput} className='form-control rounded-0'/>
{errors.password && <span className='text-danger'>
{errors.password}</span>}

</div>
<button type='submit' className='btn btn-success w-100'>Login</button>
<p> You are agree to our terms and policies </p>
<Link to="/signup" className='btn btn-default border w-100 bg-light rounded-0
text decoration-none'> Create Account </Link>
</form>
</div>
</div>
)
}
P a g e | 30

Index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

reportWebVitals();

index.css:

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

App.js:

// import logo from './logo.svg';


import './App.css';
import React from 'react'
import Login from './login';
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Signup from './Signup'
P a g e | 31

function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Login />}></Route>
<Route path='/signup' element={<Signup />}></Route>
</Routes>
</BrowserRouter>

);
}

export default App;

App.css:

.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {


.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}
P a g e | 32

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

SignupValidation.js:

function validation(values){
let error = {}
const email_pattern = /^[^\s@] + @] +\.[^\s@]+$/
const password_pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$/

if(values.name ===""){
error.name = "Name should not be empty"
}
else{
error.name = ""
}

if(values.email ===""){
error.email = "Name should not be empty"
}
else if(!email_pattern.test(values.email)){
error.email = "Email Didn't match"
}else{
error.email = ""
}

if(values.password ===""){
error.password = "Password should not be empty"
}
else if(!password_pattern.test(values.password)){
error.password = "Password didn't match"
} else{
error.password = ""
}
return error;

export default validation;

LoginValidation.js:
P a g e | 33

import React, { useState } from 'react'


import { Link } from 'react-router-dom'
import validation from './LoginValidation';

export default function Login() {


const[values, setValues] = useState({
email: '',
password: ''
})

const[errors, setErrors] = useState({})

const handleInput = (event) => {


setValues(prev => ({...prev, [event.target.name]: [event.target.value]}))
}

const handleSubmit = (event) => {


event.preventDefault();
setErrors(validation(values));
}
return (
<div className='d-flex justify-content-center align-items-center bg-primary vh-100'>
<div className='bg-white p-3 rounded w-25'>
<h2>Sign-in</h2>
<form action="" onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor='email'>Email</label>
<input type='email' placeholder='Enter Email' name='email'
onChange = {handleInput} className='form-control rounded-0'/>
{errors.email && <span className='text-danger'> {errors.email}</span>}
</div>
<div className="mb-3">
<label htmlFor='password'>Password</label>
<input type='password' placeholder='Enter Password' name='password'
onChange = {handleInput} className='form-control rounded-0'/>
{errors.password && <span className='text-danger'>
{errors.password}</span>}

</div>
<button type='submit' className='btn btn-success w-100'>Login</button>
<p> You are agree to our terms and policies </p>
<Link to="/signup" className='btn btn-default border w-100 bg-light rounded-0
text decoration-none'> Create Account </Link>
</form>
</div>
</div>
)
P a g e | 34

Backend:
Server.js:

const express = require("express");


const mysql = require('mysql');
const cors = require('cors');

const app = express();


app.use(cors());
app.use(express.json())

const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "signup"
})

app.post('/signup', (req, res) => {


const sql = "INSERT INTO login ('name', 'email', 'password') VALUES (?)";

console.log("SQL Query:", sql);


console.log(values);
console.log(req.body);
const values = [
req.body.name,
req.body.email,
req.body.password
]
db.query(sql, [values], (err, data) => {
if(err) {
return res.json("Error");
}
return res.json(data);
})

})

app.listen(8081, ()=> {
console.log("listening");
})
P a g e | 35

Experiment No. 6
Aim: Create a dynamic web page with the help of JavaScipt.

Program:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Web Page with JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 id="greeting">Welcome!</h1>
<p>Enter a new item to add to the list:</p>
<input type="text" id="itemInput" placeholder="Add item here">
<button onclick="addItem()">Add Item</button>

<ul id="itemList">
<!-- Dynamic list items will appear here -->
</ul>

<hr>

<p>Change the background color:</p>


<button onclick="changeColor('lightblue')">Light Blue</button>
<button onclick="changeColor('lightgreen')">Light Green</button>
<button onclick="changeColor('lightcoral')">Light Coral</button>

<hr>

<button onclick="resetPage()">Reset Page</button>


</div>

<script src="script.js"></script>
</body>
</html>
P a g e | 36

Script.js

// Change the background color dynamically


function changeColor(color) {
document.body.style.backgroundColor = color;
}

// Add an item to the list


function addItem() {
var itemInput = document.getElementById("itemInput");
var itemText = itemInput.value;

if (itemText === "") {


alert("Please enter an item.");
return;
}

// Create a new list item and add it to the list


var newItem = document.createElement("li");
newItem.textContent = itemText;

document.getElementById("itemList").appendChild(newItem);

// Clear the input field after adding the item


itemInput.value = "";
}

// Function to display a dynamic greeting based on the time of day


function displayGreeting() {
var greetingElement = document.getElementById("greeting");
var currentHour = new Date().getHours();

if (currentHour < 12) {


greetingElement.textContent = "Good Morning!";
} else if (currentHour < 18) {
greetingElement.textContent = "Good Afternoon!";
} else {
greetingElement.textContent = "Good Evening!";
}
}

// Function to reset the page (clear list, reset background color, etc.)
function resetPage() {
document.body.style.backgroundColor = "#f9f9f9"; // Reset background color
document.getElementById("itemList").innerHTML = ""; // Clear the list
document.getElementById("greeting").textContent = "Welcome!"; // Reset greeting
}
P a g e | 37

// Call the displayGreeting function when the page loads


window.onload = displayGreeting;

Script.js

body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}

.container {
width: 60%;
margin: 20px auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

h1 {
color: #333;
}

input[type="text"] {
padding: 10px;
width: 60%;
margin-bottom: 10px;
}

button {
padding: 10px 15px;
margin-right: 5px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

ul {
list-style-type: none;
padding: 0;
P a g e | 38

ul li {
padding: 8px;
background-color: #f1f1f1;
margin-bottom: 5px;
border-radius: 4px;
}

Output:
P a g e | 39

Experiment No. 7
Aim: Create html with js to perform basic operation and show how try catch works.

Program:

Index.html

<!DOCTYPE html>
<html>

<head>
<title>Basic Operations with Try-Catch</title>
<script>
function performOperation() {
try {
let num1 = parseFloat(document.getElementById('num1').value);
let num2 = parseFloat(document.getElementById('num2').value);
let operation = document.getElementById('operation').value;
let result;

if (isNaN(num1) || isNaN(num2)) {
throw "Please enter valid numbers";
}

switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if (num2 === 0) throw "Cannot divide by zero";
result = num1 / num2;
break;
default:
throw "Invalid operation";
}

document.getElementById('result').innerText = "Result: " + result;


} catch (error) {
document.getElementById('result').innerText = "Error: " + error;
P a g e | 40

}
}
</script>
</head>

<body>
<h2>Basic Operations with Try-Catch</h2>
<input type="text" id="num1" placeholder="Enter first number">
<input type="text" id="num2" placeholder="Enter second number">
<select id="operation">
<option value="add">Add</option>
<option value="subtract">Subtract</option>
<option value="multiply">Multiply</option>
<option value="divide">Divide</option>
</select>
<button onclick="performOperation()">Calculate</button>
<p id="result"></p>
</body>

</html>

Output:
P a g e | 41

Experiment No. 8
Aim: Create a dynamic web page with the help of js events.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Web Page with JS Events</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
#content {
margin-top: 20px;
font-size: 20px;
color: blue;
}
</style>
<script>
function changeContent() {
document.getElementById("content").innerText = "You clicked the button!";
}

function changeColor() {
document.getElementById("content").style.color = "red";
}

function resetContent() {
document.getElementById("content").innerText = "Click the button to change this
text.";
document.getElementById("content").style.color = "blue";
}
</script>
</head>
<body>
<h2>Dynamic Web Page with JavaScript Events</h2>
<button onclick="changeContent()">Change Text</button>
<button onmouseover="changeColor()" onmouseout="resetContent()">Hover to Change
Color</button>
<p id="content">Click the button to change this text.</p>
</body>
</html>
P a g e | 42

Output:
P a g e | 43

Experiment No. 9
Aim: Write a php code using function to find the sum of two integers.

Program:

<?php
// Function to calculate the sum of two integers
function sumIntegers($a, $b) {
return $a + $b;
}

// Example usage
$num1 = 10;
$num2 = 20;
$result = sumIntegers($num1, $num2);

// Output the result


echo "The sum of $num1 and $num2 is: $result";
?>

Output:
P a g e | 44

Experiment No. 10
Aim: Create a php program to demonstrate opening and closing a file.

Program:

<?php
// Define file name
$filename = "example.txt";

// Open file for writing


$file = fopen($filename, "w");
if ($file) {
echo "File opened successfully for writing.<br>";
fwrite($file, "This is a sample text written to the file.\n");
fclose($file);
echo "File closed after writing.<br>";
} else {
echo "Failed to open file for writing.<br>";
}

// Open file for reading


$file = fopen($filename, "r");
if ($file) {
echo "File opened successfully for reading.<br>";
while (!feof($file)) {
echo fgets($file) . "<br>";
}
fclose($file);
echo "File closed after reading.<br>";
} else {
echo "Failed to open file for reading.<br>";
}
?>
P a g e | 45

Experiment No. 11
Aim: Create a php program to demonstrate reading a file

Program:

<?php
// Define the file name
$filename = "example.txt";

// Check if the file exists


if (file_exists($filename)) {
// Open the file for reading
$file = fopen($filename, "r");
if ($file) {
echo "File opened successfully for reading.<br>";

// Read and display the content


while (!feof($file)) {
echo fgets($file) . "<br>";
}

// Close the file


fclose($file);
echo "File closed after reading.<br>";
} else {
echo "Failed to open file for reading.<br>";
}
} else {
echo "File does not exist.<br>";
}
?>
P a g e | 46

Experiment No. 12
Aim: Write a program to verify the email address is valid or not.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Email Verification</title>
<script>
function validateEmail() {
let email = document.getElementById('email').value;
let result = document.getElementById('result');
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (emailPattern.test(email)) {
result.style.color = 'green';
result.innerText = "Valid Email Address";
} else {
result.style.color = 'red';
result.innerText = "Invalid Email Address";
}
}
</script>
</head>
<body>
<h2>Signup Form</h2>
<form>
<label for="email">Email:</label>
<input type="text" id="email" placeholder="Enter your email"
onkeyup="validateEmail()">
<p id="result"></p>
<button type="submit">Sign Up</button>
</form>
</body>
</html>

Output:
P a g e | 47

Experiment No. 13
Aim: Write a jsp code for dynamic web page using server response

Program:

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


8" %>
<!DOCTYPE html>
<html>
<head>
<title>Dynamic JSP Page</title>
</head>
<body>
<h2>Server Response Example</h2>
<form method="post">
<label for="username">Enter your name:</label>
<input type="text" name="username" id="username" required>
<button type="submit">Submit</button>
</form>

<%
String username = request.getParameter("username");
if (username != null && !username.trim().isEmpty()) {
%>
<h3>Hello, <%= username %>! Welcome to our website.</h3>
<%
}
%>
</body>
</html>
P a g e | 48

Experiment No. 14
Aim: Write a java script program to validate the user login page

Program:

Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Login Validation</title>
<script src="loginValidation.js"></script> <!-- External JS -->
<style>
body {
font-family: Arial, sans-serif;
}
.login-container {
width: 300px;
margin: 100px auto;
padding: 60px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
}
.error {
color: red;
}
</style>
</head>
<body>

<div class="login-container">
<h2>Login</h2>
<form id="loginForm" onsubmit="return validateForm()">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" placeholder="Enter your
username"><br>
P a g e | 49

<label for="password">Password:</label><br>
<input type="password" id="password" name="password" placeholder="Enter your
password"><br>

<span id="error-message" class="error"></span><br><br>

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


</form>
</div>

</body>
</html>

LoginValidation.js

function validateForm() {
// Get the input values
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var errorMessage = document.getElementById("error-message");

// Clear any previous error messages


errorMessage.textContent = "";

// Validation rules
if (username === "") {
errorMessage.textContent = "Username is required.";
return false;
}

if (password === "") {


errorMessage.textContent = "Password is required.";
return false;
}

if (password.length < 6) {
errorMessage.textContent = "Password must be at least 6 characters long.";
return false;
}

// If all validations pass


alert("Login successful!");
return true;
}
P a g e | 50

Output:
P a g e | 51

Experiment No. 15
Aim: Design and develop a book store webpage in any scripting language and store the
books details in database that is created in MySQL.
Program:
P a g e | 52
P a g e | 53
P a g e | 54
P a g e | 55

You might also like