Scribd
Upload
71 views19 pages

Web Design Record

Uploaded by

Jasvan Sundar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views19 pages

Web Design Record

Uploaded by

Jasvan Sundar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Exercise no: 3

Design and develop an event registration form


Date:

Aim:
Design and develop an event registration form

Procedure:
Step 1: Open the code editor.
Step 2: Inside a form tag give the necessary labels and corresponding input fields.
Step 3: Provide a submit button in the form at last.
Step 4: Close the form tag and all other tags opened.
Step 5: Use CSS to style the design.
Step 6: Run the code to check the output.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Registration Form</title>
<style>
.box
{
border: 2px solid black;
margin-top: 20px;
padding: 10px;
height: 200px;
width: 400px;
}
</style>
</head>
<body class="box">
<h1>Event Registration Form</h1>
<form action="submit_registration.php" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="event">Event:</label>
<select id="event" name="event">
<option value="event1">Event 1</option>
<option value="event2">Event 2</option>
1
<option value="event3">Event 3</option>
</select>
</div>
<div>
<label for="number_of_attendees">Number of attendees:</label>
<input type="number" id="number_of_attendees" name="number_of_attendees">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>

Output:

Result:

The above program executed successfully, Hence output verified.

2
Exercise no: 4
Design and develop a sticky navbar using floats and SASS
Date:

Aim:
Design and develop a sticky navbar using floats and SASS.
Procedure:
Step 1: Open the code editor.
Step 2: Provide the link of the CSS.
Step 3: Use the header tag to provide header to the web page.
Step 4: Inside the nav tag provide the necessary navigation contents.
Step 5: In CSS, provide the styling to the navigation contents.
Step 6: Run the code to check the output.
Program:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky navbar</title>
<link rel="stylesheet" href="/Ex2/style.css">
</head>
<body>
<header class="header">
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">Sticky Navbar program</li>
</ul>
</nav>
<nav class="header__nav1">
<ul class="header__list">
<li class="header__item"><a href="#" class="header__link">Home</a></li>
<li class="header__item"><a href="#" class="header__link">About</a></li>
<li class="header__item"><a href="#" class="header__link">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

style.css
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
3
background-color: rgb(109, 236, 215);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header__nav {
float: left;
margin: 0;
padding: 20px;
font-size: 35px;
}
.header__nav1 {
float: right;
margin: 0;
padding: 20px;
font-size: 30px;
}

.header__list {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}

.header__item {
display: inline-block;
margin-left: 20px;

.header__link {
color: #333;
text-decoration: none;
}
Output:

Result:
The above program executed successfully, Hence output verified.
Exercise no: 5
Design and develop a developer portfolio page 4
Date:
Aim:
Design and develop a developer portfolio page. Develop the layout using flex box and ensure the page is
responsive
Procedure:
Step 1:
Step 2:
Step 3:
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/Ex3/style.css">
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>Hi, my name is John Doe and I am a full-stack developer with 5 years of experience. I
have a passion for coding and enjoy building web applications. In my free time, I also like to
contribute to open source projects and attend local tech events.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
<li>
<h3>Project 1</h3>
<p>A brief description of project 1 goes here. This project was built using React and
Node.js and it allows users to...</p>
<a href="#">View Project</a>
</li>
<li>
<h3>Project 2</h3>

5
<p>A brief description of project 2 goes here. This project was built using Vue.js and it
allows users to...</p>
<a href="#">View Project</a>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form action="#" method="post">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<textarea name="message" placeholder="Your Message"></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>Copyright &copy; 2023 John Doe</p>
</footer>
</body>
</html>
Output:

Result:

The above program executed successfully, Hence output verified.

6
Exercise no: 6
Design and develop pricing card list
Date:

Aim:
Design and develop pricing card list which are responsive using plain CSS and Flex box.
Procedure:
Step 1:
Step 2:
Step 3:
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price card</title>
<link rel="stylesheet" href="/Ex4/style.css">
</head>
<body>
<div class="price-list">
<div class="price-card">
<h3>Plan 1</h3>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
<div class="price">$10/month</div>
<a href="#" class="sign-up">Sign Up</a>
</div>
<div class="price-card">
<h3>Plan 2</h3>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
<div class="price">$20/month</div>
<a href="#" class="sign-up">Sign Up</a>
</div>
<div class="price-card">
<h3>Plan 3</h3>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
7
<li>Feature 3</li>
<li>Feature 4</li>
<li>Feature 5</li>
</ul>
<div class="price">$30/month</div>
<a href="#" class="sign-up">Sign Up</a>
</div>
</div>
</body>
</html>
Output:

Result:

The above program executed successfully, Hence output verified.

8
Exercise no: 7 Develop a register form and validate it using JavaScript
Date: and display error message in HTML page

Aim:
Develop a register form and validate it using JavaScript and display error message in HTML page
Procedure:
Step 1:
Step 2:
Step 3:
Program:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To Registration Form</title>
</head>
<script>
function registration()
{

var email= document.getElementById("t2").value;


var uname= document.getElementById("t3").value;
var pwd= document.getElementById("t4").value;

//email id expression code


var letters = /^[A-Za-z]+$/;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if(email=='')
{
alert('Please enter your user email id');
}
else if (!filter.test(email))
{
alert('Invalid email');
}
else if(uname=='')
{
alert('Please enter the user name.');
}
else if(!letters.test(uname))
{
alert('User name field required only alphabet characters');
}
else if(pwd=='')
{
alert('Please enter Password');
}
9
else if(!letters.test(pwd))
{
alert ('Upper case, Lower case, Special character and Numeric letter are
required in Password filed');
}
else
{
alert('Thank You for Login & You are Redirecting to Google');
// Redirecting to other page or webste code.
window.location = "http://www.google.com";
}
}
</script>
<style>
.login
{
border: 3px solid black;
margin: auto;
height: 400px;
width: 500px;
padding: 10px;
text-align: center;
font-size: 26px;
background-color: rgb(241, 206, 153);
}
.tb
{
font-size: 17px;
}
</style>
<body>
<!-- create account div -->
<div class="login">
<table align="center">
<h2>Create Your Account</h2>
<tr>
<td>Enter Email ID :</td>
<td><input type="text" id="t2" class="tb" /></td>
</tr>
<tr>
<td>Enter Username :</td>
<td><input type="text" id="t3" class="tb" /></td>
</tr>
<tr>
<td>Enter Password :</td>
<td><input type="password" id="t4" class="tb" /></td>
</tr>
<tr>
<td></td>
<td>
10
<input type="submit" value="Create Account" class="tb" onclick="registration()"
/></td>
</tr>
</table>
</div>
<!-- create account box ending here.. -->
</body>
</html>
Output:

Result:

The above program executed successfully, Hence output verified.

11
Exercise no: 8 Develop a website that uses the ‘jsonplaceholder’ API to
Date: get posts data and display them in the
form of a card
Aim:
Develop a website that uses the ‘jsonplaceholder’ API to get posts data and display them in the form of a
card. Use Flex box to style the cards
Procedure:
Step 1:
Step 2:
Step 3:
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API CARD</title>
<script>
const api_url = "https://jsonplaceholder.typicode.com/users";
let i = parseInt(prompt("Enter the User ID: "));
--i;
async function getapi(url)
{
const response = await fetch(url);
var data = await response.json();
console.log(data[i]);
show(data);
}
getapi(api_url);
function show(data)
{
let tab = `<tr>
<td>Employee ID : </td>
<td>${data[i].id}</td>
</tr>
<tr>
<td>Employee Name : </td>
<td>${data[i].name}</td>
</tr>
<tr>
<td>User Name : </td>
<td>${data[i].username}</td>
</tr>
<tr>
<td>Employee Email-ID : </td>
<td>${data[i].email}</td>
12
</tr>`;
document.getElementById("demo").innerHTML = tab;
}
</script>
<style>
.card
{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover
{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container
{
padding: 2px 16px;
}
</style>
</head>
<body>
<div class="card">
<imgsrc="img_avatar.png" alt="Avatar" style="width:50%">
<div class="container">
<h4><b>Fetch API GET REQUEST</b></h4>
<p>Fetching Users</p>
<table id="demo"></table>
</div>
</div>
</div>
</body>
</html>
Output:

Result:

The above program executed successfully, Hence output verified.

13
Exercise no: 9 Develop a php server that Creates, Reads, Updates and
Date: Deletes Todo and save them in MySQL database
MySQL database.
Aim:
Develop a php server that Creates, Reads, Updates and Deletes Todo and save them in MySQL database
MySQL database.
Procedure:
Step 1:
Step 2:
Step 3:
Program:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo";

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

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

// Create Todo
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['create_todo'])) {
$text = $_POST['text'];
$sql = "INSERT INTO employees (text) VALUES ('$text')";
if ($conn->query($sql) === TRUE) {
echo "Todo created successfully";
} else {
echo "Error creating Todo: " . $conn->error;
}
}

// Read Todos
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$sql = "SELECT id, text FROM employees";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$todos = [];
while ($row = $result->fetch_assoc()) {
$todos[] = $row;
}
echo json_encode($todos);
} else {
14
echo "No Todos found";
}
}

// Update Todo
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_todo'])) {
$id = $_POST['id'];
$text = $_POST['text'];
$sql = "UPDATE employees SET text='$text' WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo "Todo updated successfully";
} else {
echo "Error updating Todo: " . $conn->error;
}
}

// Delete Todo
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_todo'])) {
$id = $_POST['id'];
$sql = "DELETE FROM employees WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo "Todo deleted successfully";
} else {
echo "Error deleting Todo: " . $conn->error;
}
}

$conn->close();
?>

Output:

Result:

The above program executed successfully, Hence output verified.

15
Exercise no: 10 Develop a php server that registers and authenticates user
Date: session and stores user data in MySQL database.
MySQL database.
Aim:
Develop a php server that registers and authenticates user session and stores user data in
MySQL database.

Procedure:
Step 1:
Step 2:
Step 3:
Program:
login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/Ex8/session.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>
<input type="submit" value="Login" name="login">
</form>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
</head>

16
<body>
<form action="/Ex8/session.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>
<input type="submit" value="Register" name="register">
</form>
</body>
</html>

session.php

<?php
// Connect to the database
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo";

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

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

// Check if the form has been submitted


if (isset($_POST['register'])) {
// Get the form data
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];

// Hash the password


$password_hash = password_hash($password, PASSWORD_BCRYPT);

// Check if the email and username are unique


$query = "SELECT * FROM users WHERE email='$email' OR username='$username'";
$result = $conn->query($query);

if ($result->num_rows > 0) {
// Email or username already exists
echo "Email or username already exists, please choose another.";
17
} else {
// Insert the new user
$query = "INSERT INTO users (username, email, password) VALUES ('$username',
'$email', '$password_hash')";

if ($conn->query($query) === TRUE) {


// User registered successfully
echo "User registered successfully.";
} else {
// Error occurred
echo "Error: " . $conn->error;
}
}
} elseif (isset($_POST['login'])) {
// Get the form data
$username = $_POST['username'];
$password = $_POST['password'];

// Get the user from the database


$query = "SELECT * FROM users WHERE username='$username'";
$result = $conn->query($query);

if ($result->num_rows == 0) {
// User not found
echo "User not found.";
} else {
// User found
$user = $result->fetch_assoc();

// Verify the password


if (password_verify($password, $user['password'])) {
// Password is correct
// Start a new session
session_start();
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $user['username'];

// Redirect to the home page


header('Location: home.php');
exit;
} else {
// Password is incorrect
echo "Password is incorrect.";
}
}
}

// Close the connection


$conn->close();

18
Output:

19

You might also like