Scribd
Upload
27 views33 pages

Web Design Record Final

The document is a web design lab record for a Master of Computer Applications program at Nehru Institute of Information Technology and Management, detailing various web design projects. It includes experiments such as creating an event registration form, a sticky navbar, a developer portfolio page, and responsive pricing cards using HTML, CSS, and JavaScript. Each experiment outlines the aim, source code, and results of the developed projects.

Uploaded by

subathra devi
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
27 views33 pages

Web Design Record Final

The document is a web design lab record for a Master of Computer Applications program at Nehru Institute of Information Technology and Management, detailing various web design projects. It includes experiments such as creating an event registration form, a sticky navbar, a developer portfolio page, and responsive pricing cards using HTML, CSS, and JavaScript. Each experiment outlines the aim, source code, and results of the developed projects.

Uploaded by

subathra devi
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/ 33

lOMoARcPSD|52618716

Web design record final

web design (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university


Downloaded by subathra devi ([email protected])
lOMoARcPSD|52618716

NEHRU INSTITUTE OF INFORMATION


TECHNOLOGY AND MANAGEMENT
(Approved by AICTE, New Delhi & Affiliated to Anna University Chennai)

“Nehru Gardens” ,T.M.Palayam P.O.

COIMBATORE-641105

Master of Computer Applications


REGISTER NO :

NAME :

CLASS : II MCA

SEMESTER : III

SUBJECTCODE : MC4023

SUBJECT : WEB DESIGN (LAB COMPONENT)

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

NEHRU INSTITUTE OF INFORMATION


TECHNOLOGY AND MANAGEMENT

BONAFIDE CERTIFICATE

It is certified that this is a bonafide record work for the subject

WEB DESIGN (LAB COMPONENT) Subject .Code: MC4023 done

by ________________________________________________________

Regno of II MCA during the period

FACULTY SUPERVISED HEAD OF THE DEPARTMENT

Submitted to the Anna University Practical Examination________________

2024 held on__________at Nehru Institute of Information Technologyand Management,

Coimbatore.

INTERNAL EXAMINER EXTERNAL EXAMINER

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

SL Date Experiments Page No. Signature


NO

1. Design and develop an event registration form 1

2. Design and develop a sticky navbar using floats and SASS 4

Design and develop a developer portfolio page. Develop


3. the layout using flexbox and ensure the page is 7
responsive

Design and develop pricing card list which are


4. 11
responsive using plain CSS and Flexbox

Develop a register form and validate it using JavaScript.


5. Design the forms using CSS3 and 15
display Error Messages in the HTML page

Develop a website that uses the ‘jsonplaceholder’ Api to


6. get posts data and display them in the 19
form of a card. Use Flexbox to style the cards

Develop a php server that Creates, Reads, Updates and


7. Deletes Todo and save them in 22
MySQL database

Develop a php server that registers and authenticates


user session and stores user data in 26
8.
MySQL database

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

EX NO.1 DESIGN AND DEVELOP AN EVENT REGISTRATION FORM.

AIM:
To Design and Develop an event registration form.

SOURCE CODE:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Registration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<h2>Register for the Event</h2>
<form id="regForm" onsubmit="return validateForm()">
<input type="text" id="name" placeholder="Full Name" required>
<input type="email" id="email" placeholder="Email" required>
<input type="tel" id="phone" placeholder="Phone" required pattern="^\+?[1-9]\d{1,14}$">
<input type="date" id="event_date" required>
<select id="attending" required>
<option value="yes">--Select Item--</option>
<option value="yes">Classical Dance</option>
<option value="no">Break Dance</option>
<option value="no">Singing</option>
<option value="no">Drawing</option>
</select>
<textarea id="comments" placeholder="Additional Comments (Optional)"></textarea>
<button type="submit">Register</button>
</form>
<div id="responseMessage"></div>
</div>
<script src="script.js"></script>
</body>
</html>

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

styles.css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
h2 {
margin: 0;
font-size: 24px;
color: #333;
text-align: center;
}
.form-container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
input,select,textarea,
button {
width: 100%;
padding: 10px;
margin: 8px 0;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background: #28a745;
color: white;
cursor: pointer;
border: none;
}

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

button:hover {
background: #218838;
}
#responseMessage {
margin-top: 15px;
text-align: center;
color: #28a745;
}

OUTPUT:

RESULT:
The event registration form is developed successfully and the output is verified.
3

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

EX NO.2 DESIGN AND DEVELOP A STICKY NAVBAR USING FLOATS AND SASS.

AIM:
To Design And Develop A Sticky Navbar Using Floats And SASS.

SOURCE CODE:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Sticky Navbar</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Home</h1>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="services">
<h1>Services</h1>
</section>
<section id="contact">
<h1>Contact</h1>
4

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

</section>
</main>
</body>
</html>
styles.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
} header {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
z-index: 1000;
nav ul {
list-style: none;
padding: 0;
margin: 0;
li {
float: left;
padding: 15px 20px;
a{
color: white;
text-decoration: none;
&:hover {
background-color: #575757; }
}}}}
main {
margin-top: 60px;
padding: 20px;
section {
padding: 40px 0;
h1 {
margin-bottom: 10px;} } }

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

OUTPUT:

RESULT:
Thus, Sticky Navbar Using Floats And SASS has been created successfully and output is verified.

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

EX NO.3 DESIGN AND DEVELOP A DEVELOPER PORTFOLIO PAGE. DEVELOP THE LAYOUT
USING FLEXBOX AND ENSURE THE PAGE IS RESPONSIVE.

AIM:
To Design and develop a developer portfolio page. Develop the layout using flexbox and ensure the page is
responsive.

SOURCE CODE:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Portfolio</title>
<link rel="stylesheet" href="styles.css"> </head>
<body>
<header>
<h1>Akhil P A</h1>
<nav>
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav> </header>
<section id="about">
<h2>About Me</h2>
<div class="flex">
<div class="card">I'm a web developer with a passion for front-end technologies.</div>
<div class="card">I specialize in creating clean, responsive websites with modern tools.</div>
</div> </section>
<section id="skills">
<h2>Skills</h2>
<div class="flex">
<div class="card">
<h3>Languages</h3>
<ul>

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul> </div>
<div class="card">
<h3>Frameworks</h3>
<ul>
<li>React</li>
<li>Node.js</li>
</ul>
</div> </div> </section>
<section id="projects">
<h2>Projects</h2>
<div class="flex">
<div class="card">
<h3>Portfolio</h3>
<p>Showcasing my work as a developer.</p>
</div>
<div class="card">
<h3>Task Manager</h3>
<p>A simple task management app to track daily tasks.</p>
</div> </div> </section>
<section id="contact">
<h2>Contact</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form> </section>
</body> </html>
styles.css:
/* Basic reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f9f9f9; }
header {

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

background: #333;
color: white;
padding: 20px;
text-align: center; }
nav a {
color: white;
text-decoration: none;
margin: 0 15px; }
section {
padding: 40px 20px;
max-width: 1000px;
margin: auto; }
.flex {
display: flex;
flex-wrap: wrap;
gap: 20px; }
.card {
background: white;
padding: 20px;
border-radius: 5px;
flex: 1 1 30%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
h1, h2 {
margin-bottom: 10px; }
ul {
list-style: none;
padding-left: 0; }
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc; }
button {
background: #333;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer; }
button:hover {
background: #555; }

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

/* Responsive design */
@media (max-width: 768px) {
.card {
flex: 1 1 100%; }}

OUTPUT:

RESULT:
Thus, a responsive developer portfolio page has been developed successfully using flexbox and the output has been
verified.

10

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

EX NO.4 DESIGN AND DEVELOP PRICING CARD LIST WHICH ARE RESPONSIVE USING
PLAIN CSS AND FLEXBOX

AIM:
To Design and develop pricing card list which are responsive using plain CSS and Flexbox.

SOURCE CODE:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Cards</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="pricing-container">
<div class="pricing-card popular">
<h2>Standard Plan</h2>
<p class="price">$49/month</p>
<ul>
<li>50 GB Storage</li>
<li>Priority Support</li>
<li>Free Updates</li>
</ul>
<button>Select Plan</button>
</div>
<div class="pricing-card">
<h2>Basic Plan</h2>
<p class="price">$19/month</p>
<ul>
<li>10 GB Storage</li>
<li>Basic Support</li>
<li>Free Updates</li>
</ul>
<button>Select Plan</button>
</div>

11

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

<div class="pricing-card">
<h2>Premium Plan</h2>
<p class="price">$99/month</p>
<ul>
<li>200 GB Storage</li>
<li>24/7 Support</li>
<li>Free Updates</li>
</ul>
<button>Select Plan</button>
</div>
</section>
</body>
</html>
index.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 40px;
display: flex;
justify-content: center;
background: #f4f4f4;
}
.pricing-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
max-width: 1200px;
width: 100%;
justify-content: center;
}
.pricing-card {
background: #fff;
padding: 20px;
width: 280px;
border-radius: 10px;
text-align: center;

12

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);


transition: transform .3s;
}
.pricing-card:hover {
transform: translateY(-10px);
}
.popular {
border: 2px solid #ff9900;
}
h2 {
font-size: 1.5rem;
margin: 10px 0;
color: #333;
}
.price {
font-size: 2rem;
color: #ff6600;
margin: 10px 0;
}
ul {
list-style: none;
margin-bottom: 20px;
font-size: 1rem;
color: #555;
}

ul li {
margin: 8px 0;
}
button {
background: #ff6600;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #e65c00; }

13

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

OUTPUT:

RESULT:
Thus a responsive pricing card list has been developed successfully using CSS and flexbox and output is verified.

14

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

EX NO.5 DEVELOP A REGISTER FORM AND VALIDATE IT USING JAVASCRIPT. DESIGN THE
FORMS USING CSS3 AND DISPLAY ERROR MESSAGES IN THE HTML PAGE.

AIM:
To Develop a register form and validate it using JavaScript. Design the forms using CSS3 and display Error Messages
in the HTML page.

SOURCE CODE:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<h2>Register</h2>
<form id="registerForm" onsubmit="return validateForm()">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter your username">
<span class="error" id="usernameError"></span>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email">
<span class="error" id="emailError"></span>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password">
<span class="error" id="passwordError"></span>
</div>
<button type="submit">Register</button> </form> </div>
<script src="script.js"></script>
15

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

</body>
</html>
styles.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; }
.form-container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px; }
h2 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
color: #333; }
.input-group {
margin-bottom: 15px; }
label {
display: block;
font-size: 14px;
color: #555;
margin-bottom: 5px; }
input {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 5px; }

16

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

input:focus {
border-color: #007BFF;
outline: none; }
button {
width: 100%;
padding: 12px;
font-size: 16px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px; }
button:hover {
background-color: #218838; }
.error {
color: #dc3545;
font-size: 12px;
margin-top: 5px; }
script.js:
function validateForm() {
let isValid = true;
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const usernameError = document.getElementById('usernameError');
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');
usernameError.textContent = emailError.textContent = passwordError.textContent = '';
if (!username) {
usernameError.textContent = 'Username is required';
isValid = false;
}
if (!email || !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(email)) {
emailError.textContent = 'Invalid email';
isValid = false;
}
if (!password || password.length < 6) {
passwordError.textContent = 'Password must be at least 6 characters';
isValid = false;

17

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

}
return isValid;
}

OUTPUT:

RESULT:
Thus a register form has been developed and validated successfully using javascript and output is verified.

18

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

EX NO.6 DEVELOP A WEBSITE THAT USES THE ‘JSONPLACEHOLDER’ API TO GET POSTS
DATA AND DISPLAY THEM IN THE FORM OF A CARD.
USE FLEXBOX TO STYLE THE CARDS

AIM:
To Develop a website that uses the ‘jsonplaceholder’ Api to get posts data and display them in the form of a card. Use
Flexbox to style the cards.

SOURCE CODE:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posts Display</title>
<link rel="stylesheet" href="styles.css"> </head>
<body>
<div class="container">
<h1>Posts</h1>
<div id="posts" class="posts-container">
<!-- Posts will be dynamically added here -->
</div> </div>
<script src="script.js"></script> </body> </html>
styles.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box; }
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0; }
.container {
19

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

width: 90%;
max-width: 1200px;
text-align: center; }
.card {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
width: 300px;
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: space-between; }
.card h2 {
font-size: 20px;
margin-bottom: 10px; }
.card p {
font-size: 14px;
color: #333; }
.card button {
align-self: flex-start;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer; }
.card button:hover {
background-color: #0056b3; }
script.js:
async function fetchPosts() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await response.json();
const postsContainer = document.getElementById('posts');
posts.slice(0, 6).forEach(post => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<h2>${post.title}</h2>

20

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

<p>${post.body}</p>
<button onclick="alert('Post ID: ${post.id}')">Read More</button>
`; postsContainer.appendChild(card);
}); }
window.onload = fetchPosts;
OUTPUT:

RESULT:
Thus a website that uses jsonplaceholder API has been developed successfully and output is verified.

21

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

EX NO.7 DEVELOP A PHP SERVER THAT CREATES, READS, UPDATES AND DELETES
TODO AND SAVE THEM IN MYSQL DATABASE.

AIM:
To Develop a php server that Creates, Reads, Updates and Deletes Todo and save them in MySQL database.

SOURCE CODE:
config.php:
<?php
$host = 'localhost';
$dbname = 'todo_app';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname",'root','');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}

create.php:
<?php
include 'config.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$title = $_POST['title'];
$description = $_POST['description'];
if ($title) {
$stmt = $pdo->prepare("INSERT INTO todos (title, description) VALUES (?, ?)");
$stmt->execute([$title, $description]);
echo "To-Do Created Successfully!";
} else {
echo "Title is required!"; } }
?>
<!-- Simple form for creating a To-Do -->
<form action="create.php" method="POST">
<input type="text" name="title" placeholder="Title" required>
<textarea name="description" placeholder="Description"></textarea>
<button type="submit">Create To-Do</button> </form>
read.php:
<?php
include 'config.php';
22

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

$stmt = $pdo->query("SELECT * FROM todos");


$todos = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($todos as $todo) {
echo "<div>";
echo "<h3>" . htmlspecialchars($todo['title']) . "</h3>";
echo "<p>" . htmlspecialchars($todo['description']) . "</p>";
echo "<a href='update.php?id=" . $todo['id'] . "'>Edit</a> | ";
echo "<a href='delete.php?id=" . $todo['id'] . "'>Delete</a>";
echo "</div>";
}
?>
update.php:
<?php
include 'config.php';
if (isset($_GET['id'])) {
$id = $_GET['id'];
$stmt = $pdo->prepare("SELECT * FROM todos WHERE id = ?");
$stmt->execute([$id]);
$todo = $stmt->fetch(PDO::FETCH_ASSOC);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$title = $_POST['title'];
$description = $_POST['description'];
if ($title) {
$stmt = $pdo->prepare("UPDATE todos SET title = ?, description = ? WHERE id = ?");
$stmt->execute([$title, $description, $id]);
echo "To-Do Updated Successfully!";
} else {
echo "Title is required!";
}}
?>
<!-- Form for updating a To-Do -->
<form action="update.php?id=<?php echo $todo['id']; ?>" method="POST">
<input type="text" name="title" value="<?php echo htmlspecialchars($todo['title']); ?>" required>
<textarea name="description"><?php echo htmlspecialchars($todo['description']); ?></textarea>
<button type="submit">Update To-Do</button> </form>
delete.php:
<?php
include 'config.php';
if (isset($_GET['id'])) {

23

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

$id = $_GET['id'];
$stmt = $pdo->prepare("DELETE FROM todos WHERE id = ?");
$stmt->execute([$id]);
echo "To-Do Deleted Successfully!";
}
?>

OUTPUT:

24

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

RESULT:
Thus a Todo list is created successfully using PHP to perform CRUD operations and the output is verified.

25

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

EX NO.8 DEVELOP A PHP SERVER THAT REGISTERS AND AUTHENTICATES USER SESSION
AND STORES USER DATA IN MYSQL DATABASE.

AIM:
Develop a php server that registers and authenticates user session and stores user data in MySQL database.

SOURCE CODE:
register.php:
<?php
session_start();
include('db.php');
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$email = $_POST['email'];
if ($username && $password && $email) {
$stmt = $pdo->prepare("SELECT id FROM users WHERE username = :username");
$stmt->execute(['username' => $username]);
if ($stmt->fetch()) {
echo "Username already taken."; } else {
$stmt = $pdo->prepare("INSERT INTO users (username, password, email) VALUES (?, ?, ?)");
$stmt->execute([$username, $password, $email]);
echo "Registration successful!"; }
} else {
echo "All fields are required."; } }
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register</title></head>
<body>
<form method="POST">
Username: <input type="text" name="username" required><br>
Email: <input type="email" name="email" required><br>
Password: <input type="password" name="password" required><br>
<button type="submit">Register</button> </form> </body> </html>
login.php:
<?php

26

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

session_start();
include('db.php');
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$password = $_POST['password'];
if ($username && $password) {
$stmt = $pdo->prepare("SELECT id, password FROM users WHERE username = :username");
$stmt->execute(['username' => $username]);
$user = $stmt->fetch();
if ($user && password_verify($password, $user['password'])) {
$_SESSION['user_id'] = $user['id'];
echo "Logged in successfully!";
} else {
echo "Invalid credentials.";
} } else {
echo "Please enter both username and password.";
}}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form method="POST">
Username: <input type="text" name="username" required><br>
Password: <input type="password" name="password" required><br>
<button type="submit">Login</button> </form> </body> </html>
profile.php:
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
header('Location: login.php');
exit; }
echo "Welcome, user with ID: " . $_SESSION['user_id'] . "!<br>";
echo "<a href='logout.php'>Logout</a>";
?>
db.php:
<?php

27

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

$pdo = new PDO('mysql:host=localhost;dbname=user_auth', 'root', '');


$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
logout.php:
<?php
session_start();
session_unset();
session_destroy();
header('Location: login.php');
exit;
?>
sql.txt:
CREATE DATABASE user_management;
USE user_management;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);

OUTPUT:

28

Downloaded by subathra devi ([email protected])


lOMoARcPSD|52618716

RESULT:
Thus a PHP server that registers and authenticates user session and stores user data in MySQL has been developed
successfully and output is verified.

29

Downloaded by subathra devi ([email protected])

You might also like