[go: up one dir, main page]
Scribd
Upload
23 views32 pages

WEB Lab

The document outlines a series of experiments focused on designing webpages for the Computer Science and Engineering Department of an institute using HTML and CSS. It includes code examples for a landing page and multiple departmental pages (CSE, BBA, MBA) with navigation, faculty information, and styling. The objective is to create functional and visually appealing web pages that demonstrate the use of HTML tags and CSS for layout and design.

Uploaded by

Farhadur Rahman
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
23 views32 pages

WEB Lab

The document outlines a series of experiments focused on designing webpages for the Computer Science and Engineering Department of an institute using HTML and CSS. It includes code examples for a landing page and multiple departmental pages (CSE, BBA, MBA) with navigation, faculty information, and styling. The objective is to create functional and visually appealing web pages that demonstrate the use of HTML tags and CSS for layout and design.

Uploaded by

Farhadur Rahman
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/ 32

Experiment No: 01

Experiment Name: Design a simple webpage using only HTML tags for Computer Science and
Engineering Department of your institute or college where <head>, <tittle>, <body> and divisional
tags like <div>, <span>, <table> should be used as needed.
Objective: The objective of this experiment is to design a simple HTML webpage using some of
HTML tags.
Code for landing page: (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>Department of Computer Science and Engineering - IIBS</title>
<style>
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.container{
width: 100%;
}
.heading{
min-height: 90vh;
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('college.jpg')
no-repeat center center / cover;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.heading h2{
font-size: 40px;
color: #fff;
font-weight: bold;
padding: 1rem;
}
.heading p{
font-size: 20px;
color: #fff;
}
.faculty{
padding: 1.5rem 0;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.members{
width: 80%;
}
.members h2{
letter-spacing: 1px;
font-size: 1.5rem;
padding-bottom: 20px;
text-align: center;
text-transform: uppercase;
border-bottom: 2px solid lightgreen;
cursor: pointer;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
footer{
padding: 1.5rem;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="heading">
<h2>Ideal Institute of Business & Science (IIBS)</h2>
<p>Department of Computer Science & Engineering</p>
</div>
<div class="faculty">
<div class="members">
<h2 id="fac_mem">Faculty Members</h2>
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Contact</th>
</tr>
<tr>
<td>Md. Ali Asgor</td>
<td>Assistent Professor</td>
<td>+880 1527309851</td>
</tr>
<tr>
<td>Md. Toufiqul Islam</td>
<td>Lecturer</td>
<td>+880 1569853412</td>
</tr>
<tr>
<td>Samsul Haque</td>
<td>Lecturer</td>
<td>+880 1627309821</td>
</tr>
<tr>
<td>Mahmudul Hasan</td>
<td>Lecturer</td>
<td>+880 1568954723</td>
</tr>
</table>
</div>
</div>
<footer>
<p>All Rights Reserved by IIBS © Copyright 2011 - 2024</p>
</footer>
<script>
const box = document.getElementById('fac_mem');
// Change text color on mouseover
box.addEventListener('mouseover', function handleMouseOver() {
box.style.color = 'green';
});
// Change text color back on mouseout
box.addEventListener('mouseout', function handleMouseOut() {
box.style.color = 'black';
});
</script>
</div>
</body>
</html>
Output:
Experiment No: 02
Experiment Name: Using CSS menu, design a website to navigate between different pages.
(Minimum three pages and each page must contain heading, paragraph, text formatting tags and mouse
over links to back homepage).
Objective: The objective of this experiment is to design a website to navigate between different pages
using CSS menu.
Code for Home Page: (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>Ideal Institute of Business & Science</title>
<link rel="stylesheet" href="style.css">
<style>
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<a href="index.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Department</button>
<div class="dropdown-content">
<a href="cse.html">CSE</a>
<a href="bba.html">BBA</a>
<a href="mba.html">MBA</a>
</div>
</div>
<a href="index.html">Contact</a>
</div>
<div class="heading">
<h1 style="color: antiquewhite;">Ideal Institute of Business & Science (IIBS)</h1>
</div>
<div class="formatted_text">
<h1><i>About Us</i></h1>
<p>Nestled in the heart of Dhaka's bustling <small style="color: darkgreen;">Mirpur
11</small>, <b>Ideal Institute of Business and Science </b> <sub>(IIBS)</sub> stands as a beacon
of academic excellence and personal growth. Founded in <b>2013</b> by the visionary
<sup>Principal Abdur Rashid</sup>,and currently led by Principal Shirazul Alam and Vice-Principal
Humayun Kabir. IIBS has carved its niche within the esteemed network of <strong>National
University of Bangladesh</strong> <sub>(NU)</sub> affiliated institutions. More than just an
institute, it's a community where ambition meets opportunity, shaping future leaders and innovators in
the dynamic realms of business and science. <br>The institute offers B.Sc and BBA professsional
degrees through <b>National University.</b></p>
</div>
<footer>
<p>All Rights Reserved by IIBS © Copyright 2011 - 2024</p>
</footer>
<script>
const box = document.getElementById('fac_mem');
// Change text color on mouseover
box.addEventListener('mouseover', function handleMouseOver() {
box.style.color = 'green';
});
// Change text color back on mouseout
box.addEventListener('mouseout', function handleMouseOut() {
box.style.color = 'black';
});
</script>
</div>
</body>
</html>
Output:
Code for CSE Page: (cse.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>Department of CSE - IIBS </title>
<link rel="stylesheet" href="style.css">
<style>
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<a href="index.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Department</button>
<div class="dropdown-content">
<a href="cse.html">CSE</a>
<a href="bba.html">BBA</a>
<a href="mba.html">MBA</a>
</div>
</div>
<a href="index.html">Contact</a>
</div>
<div class="heading">
<h2>Ideal Institute of Business & Science (IIBS)</h2>
<p>Department of Computer Science & Engineering</p>
</div>
<div class="formatted_text">
<h3><i>About Us</i></h3>
<p>The Computer Science and Engineering (CSE) department at Ideal Institute of Business
and Science (IIBS) stands as a dynamic hub for aspiring tech wizards. Established within the esteemed
National University of Bangladesh (NU) network, the department offers a world-class education,
equipping students with the knowledge, skills, and confidence to thrive in the ever-evolving field of
technology.</p>
</div>
<div class="faculty">
<div class="members">
<h2 id="fac_mem">Faculty Members</h2>
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Contact</th>
</tr>
<tr>
<td>Md. Ali Asgor</td>
<td>Assistent Professor</td>
<td>+880 1527309851</td>
</tr>
<tr>
<td>Md. Toufiqul Islam</td>
<td>Lecturer</td>
<td>+880 1569853412</td>
</tr>
<tr>
<td>Samsul Haque</td>
<td>Lecturer</td>
<td>+880 1627309821</td>
</tr>
<tr>
<td>Mahmudul Hasan</td>
<td>Lecturer</td>
<td>+880 1568954723</td>
</tr>
</table>
</div>
</div>
<footer>
<p>All Rights Reserved by IIBS © Copyright 2011 - 2024</p>
</footer>
<script>
const box = document.getElementById('fac_mem');
// Change text color on mouseover
box.addEventListener('mouseover', function handleMouseOver() {
box.style.color = 'green';
});
// Change text color back on mouseout
box.addEventListener('mouseout', function handleMouseOut() {
box.style.color = 'black';
});
</script>
</div>
</body>
</html>
Output:

Code for BBA Page: (bba.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>Department of BBA - IIBS </title>
<link rel="stylesheet" href="style.css">
<style>
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<a href="index.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Department</button>
<div class="dropdown-content">
<a href="cse.html">CSE</a>
<a href="bba.html">BBA</a>
<a href="mba.html">MBA</a>
</div>
</div>
<a href="index.html">Contact</a>
</div>
<div class="heading">
<h2>Ideal Institute of Business & Science (IIBS)</h2>
<p>Department of Bachelor of Business Administration</p>
</div>
<div class="formatted_text">
<h3><i>About Us</i></h3>
<p>Within the vibrant tapestry of Ideal Institute of Business and Science (IIBS) lies the BBA
department, a powerhouse of ambition and opportunity for aspiring business professionals. Established
under the renowned National University of Bangladesh (NU) umbrella, this department offers more
than just a degree – it's a transformative journey that equips you with the knowledge, skills, and
confidence to thrive in the dynamic world of business.</p>
</div>
<div class="faculty">
<div class="members">
<h2 id="fac_mem">Faculty Members</h2>
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Contact</th>
</tr>
<tr>
<td>Md. Ali Asgor</td>
<td>Assistent Professor</td>
<td>+880 1527309851</td>
</tr>
<tr>
<td>Md. Toufiqul Islam</td>
<td>Lecturer</td>
<td>+880 1569853412</td>
</tr>
<tr>
<td>Samsul Haque</td>
<td>Lecturer</td>
<td>+880 1627309821</td>
</tr>
<tr>
<td>Mahmudul Hasan</td>
<td>Lecturer</td>
<td>+880 1568954723</td>
</tr>
</table>
</div>
</div>
<footer>
<p>All Rights Reserved by IIBS © Copyright 2011 - 2024</p>
</footer>
<script>
const box = document.getElementById('fac_mem');
// Change text color on mouseover
box.addEventListener('mouseover', function handleMouseOver() {
box.style.color = 'green';
});
// Change text color back on mouseout
box.addEventListener('mouseout', function handleMouseOut() {
box.style.color = 'black';
});
</script>
</div>
</body>
</html>
Output:
Code for MBA Page: (mba.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>Department of MBA - IIBS </title>
<link rel="stylesheet" href="style.css">
<style>
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<a href="index.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Department</button>
<div class="dropdown-content">
<a href="cse.html">CSE</a>
<a href="bba.html">BBA</a>
<a href="mba.html">MBA</a>
</div>
</div>
<a href="index.html">Contact</a>
</div>
<div class="heading">
<h2>Ideal Institute of Business & Science (IIBS)</h2>
<p>Department of Masters of Business Administration</p>
</div>
<div class="formatted_text">
<h1><i>About Us</i></h1>
<p>Rising above the ordinary, the IIBS MBA Department invites you to embark on a
transformative journey towards leadership excellence. Nestled within the prestigious Ideal Institute of
Business and Science (IIBS), affiliated with the esteemed National University of Bangladesh (NU),
this department empowers aspiring professionals to navigate the dynamic landscape of modern
business.</p>
</div>
<div class="faculty">
<div class="members">
<h2 id="fac_mem">Faculty Members</h2>
<table>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Contact</th>
</tr>
<tr>
<td>Md. Ali Asgor</td>
<td>Assistent Professor</td>
<td>+880 1527309851</td>
</tr>
<tr>
<td>Md. Toufiqul Islam</td>
<td>Lecturer</td>
<td>+880 1569853412</td>
</tr>
<tr>
<td>Samsul Haque</td>
<td>Lecturer</td>
<td>+880 1627309821</td>
</tr>
<tr>
<td>Mahmudul Hasan</td>
<td>Lecturer</td>
<td>+880 1568954723</td>
</tr>
</table>
</div>
</div>
<footer>
<p>All Rights Reserved by IIBS © Copyright 2011 - 2024</p>
</footer>
<script>
const box = document.getElementById('fac_mem');
// Change text color on mouseover
box.addEventListener('mouseover', function handleMouseOver() {
box.style.color = 'green';
});
// Change text color back on mouseout
box.addEventListener('mouseout', function handleMouseOut() {
box.style.color = 'black';
});
</script>
</div>
</body>
</html>
Output:

External CSS Code: (style.css)


.container {
width: 100%;
}
.navbar {
overflow: hidden;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s ease-in-out;
text-transform: uppercase;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 38px;
background-color: inherit;
font-family: inherit;
margin: 0;
cursor: pointer;
text-transform: uppercase;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: rgb(32, 243, 60);
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e5e1e1;
min-width: 185px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
transition: 0.2s ease-in-out;
}
.dropdown-content a:hover {
background-color: rgb(32, 243, 60);
color: #fff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.heading{
font-size: 20px;
min-height: 90vh;
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('./college.jpg')
no-repeat center center / cover;
display: flex;
justify-content: center;
padding: 10%;
align-items: center;
flex-direction: column;
color: #dddddd;
}
.heading h2{
font-size: 40px;
color: #fff;
font-weight: bold;
padding: 1rem;
}
.heading p{
font-size: 20px;
color: #fff;
}
.faculty{
padding: 1.5rem 0;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.members{
width: 80%;
}
.members h2{
letter-spacing: 1px;
font-size: 1.5rem;
padding-bottom: 20px;
text-align: center;
text-transform: uppercase;
border-bottom: 2px solid lightgreen;
cursor: pointer;
}
.formatted_text{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: lightgrey;
padding: 1.5rem 1.5rem;
border: 1px solid black ;
margin: 16px 16px;
text-align: center;
border-radius: 70px 70px;
font-size: large;
}
.formatted_text h1{
text-align: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
footer{
padding: 1.5rem;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
Experiment No: 03
Experiment Name: Design a form that contains “Text Fields”, “Text Area”, “Check boxes”, “Multiple
Checkboxes”, “Radio Buttons”, “List Boxes”, “Password Fields”, “Submit Button”, Reset Button”
and store the value of this form into MySQL database and show the stored information into another
page using PHP program.
Objective: The objective of this experiment is to design a form using MySQL database and show the
stored information into another page using PHP program.
Code for index.php:
<!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>PHP Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form_element">
<h2>Student Information</h2>
<form action="data_store.php" method="POST">
<div class="form_group">
<label for="name">Name : </label>
<input type="text" class="form_control" name="name" placeholder="Enter Your
Name">
</div>
<div class="form_group">
<label for="email">Email : </label>
<input type="email" class="form_control" name="email" placeholder="Enter Your
Email">
</div>
<div class="form_group">
<label for="pass">Password : </label>
<input type="password" class="form_control" name="password" placeholder="Enter
Your Password">
</div>
<div class="form_group">
<label for="department">Department</label>
<select id="department" name="department" class="form_control">
<option value="cse">CSE</option>
<option value="bba">BBA</option>
<option value="mba">MBA</option>
</select>
</div>
<div class="form_group">
<label for="gender">Gender : </label>
<input type="radio" name="gender" value="Male">&nbsp; <small>Male</small>
<input type="radio" name="gender" value="Female">&nbsp; <small>Female</small>
<input type="radio" name="gender" value="Other">&nbsp; <small>Other</small>
</div>
<div class="form_group">
<label for="hobbies">Hobbies : </label>
<input type="checkbox" name="hobbies[]" value="Coding">
<small>Coding</small>&nbsp; &nbsp;
<input type="checkbox" name="hobbies[]" value="Gardening">
<small>Gardening</small>&nbsp; &nbsp;
<input type="checkbox" name="hobbies[]" value="Watching Movie"> <small>Watching
Movie</small>&nbsp;
&nbsp;
</div>
<div class="form_group">
<label for="description">Description : </label>
<textarea name="description" id="description" class="form_control">
</textarea>
</div>
<div class="form_group">
<div class="submit">
<input type="submit" value="Submit" class="submit_btn">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Code for data_store.php:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "student_info";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
if(!$conn){
echo "connection failed";
}
if(isset($_POST)){
$name = $_POST['name'];
$email = $_POST['email'];
$pass = $_POST['password'];
$gender = $_POST['gender'];
$department = $_POST['department'];
$description = $_POST['description'];
$checkbox=$_POST['hobbies'];
$hobbies = "";
foreach($checkbox as $chk)
{
$hobbies .= $chk.",";
}
$sql_query = "INSERT INTO `student`(`name`, `email`, `password`, `department`, `gender`,
`hobbies`, `description`) VALUES
('{$name}','{$email}','{$pass}','{$department}','{$gender}','{$hobbies}','{$description}')";

$result = mysqli_query($conn,$sql_query) OR die("Query Failed.");


}
// Insert into database
if($result){
// header('Location:http://localhost/');
header("Location: http://localhost/php_form/student_info.php");
}
else{
echo "<h1>Insert Failed</h1>";
}
?>
Code for student_info.php:
<!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>Ideal Institute of Business & Science</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" style="flex-direction: column;">
<div class="faculty">
<h2>student information table</h2>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "student_info";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
if(!$conn){
echo "connection is failed";
}
$sql = "SELECT * FROM student";
$result = mysqli_query($conn, $sql) OR die('Query Failed.');
if(mysqli_num_rows($result) > 0){
?>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Gender</th>
<th>Department</th>
<th>Hobbies</th>
<th>Description</th>
</tr>
<tr>
<?php
while($row = (mysqli_fetch_assoc($result))){
?>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $row['gender']; ?></td>
<td style="text-transform:uppercase;"><?php echo $row['department']; ?></td>
<td><?php echo $row['hobbies']; ?></td>
<td><?php echo $row['description']; ?></td>
</tr>
<?php } ?>
</table>
<?php } ?>
</div>
<a href="index.php">Home</a>
</div>
</body>
</html>
Code for student.sql:
-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: localhost:3306
-- Generation Time: Feb 23, 2024 at 09:33 AM
-- Server version: 8.0.30
-- PHP Version: 8.1.10
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `student_info`
--
-- --------------------------------------------------------
--
-- Table structure for table `student`
--
CREATE TABLE `student` (
`id` int NOT NULL,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(15) NOT NULL,
`department` varchar(20) NOT NULL,
`gender` varchar(20) NOT NULL,
`hobbies` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
`description` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
--
-- Dumping data for table `student`
--
INSERT INTO `student` (`id`, `name`, `email`, `password`, `department`, `gender`, `hobbies`,
`description`) VALUES
(1, 'Minu', 'minu@gmail.com', '12345678', 'cse', 'Male', 'Coding,Gardening,Watching Movie,', 'Hello,
Myself Minu. I am a student of IIBS.\r\n '),
(2, 'Mukul', 'mukul@gmail.com', '123123', 'cse', 'Male', 'Coding,Watching Movie,', 'I am a dynamic
individual committed to continuous growth and contributing positively to diverse environments. With
a resilient spirit, I approach challenges with adaptability and enthusiasm. A lifelong learner, I embrace
opportunities for personal and professional development. I thrive on collaboration, fostering
meaningful connections and making impactful contributions in every endeavor. \r\n '),
(3, 'Omar', 'omar@gmail.com', '123123', 'cse', 'Male', 'Coding,Gardening,', 'I approach challenges with
adaptability and enthusiasm. A lifelong learner, I embrace opportunities for personal and professional
development. I thrive on collaboration, fostering meaningful connections and making impactful
contributions in every endeavor.\r\n '),
(4, 'Juyel', 'juyel@gmail.com', '12345678', 'cse', '', 'Coding,Gardening,Watching Movie,', 'As a
dedicated and versatile individual, I bring a passion for learning and a commitment to excellence in
all endeavors. With strong interpersonal skills and a proactive mindset, I thrive in collaborative
environments. My adaptability and positive attitude make me an asset, ensuring success and
contributing effectively to any team or project.\r\n '),
(5, 'Jahanur', 'jahanur@gmail.com', '11111111', 'cse', 'Female', 'Coding,Watching Movie,', 'I thrive in
collaborative environments. My adaptability and positive attitude make me an asset, ensuring success
and contributing effectively to any team or project.\r\n ');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `student`
--
ALTER TABLE `student`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `student`
--
ALTER TABLE `student`
MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Code for Style: (style.css)
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.container{
width: 100%;
background-color: lightgray;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.form_element{
padding: 1.5rem;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(144, 238, 144,0.8);
border-radius: 0.4rem;
margin: 2rem;
min-width: 50%;
}
.form_element h2{
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid rgb(144, 238, 144);
padding: 1rem 0;
margin-bottom: 1.5rem;
}
.form_group{
padding: 0.3rem 0; }
.form_group label{
font-weight: 600;
font-size: 0.8rem;
}
.form_control{
width: 100%;
padding: 10px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form_control:focus{
border: 1px solid rgb(35, 24, 24);
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
input[type=radio]{
cursor: pointer;
}
input[type=check]{
width: 0.8rem;
height: 0.8rem;
cursor: pointer;
}
.submit{
display: flex;
justify-content: center;
align-items: center;
}
.submit_btn{
padding: 0.6rem 2.5rem;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
background-color: rgba(36, 126, 36);
border: 1px solid rgba(36, 126, 36);
color: #fff;
cursor: pointer;
transition: all 0.3s linear;
}
.submit_btn:hover{
background-color: rgba(36, 126, 36,0.8);
border: 1px solid rgba(36, 126, 36,0.8);
}
.faculty{
padding: 4rem;
background-color: antiquewhite;
width: 100%;
}
.faculty h2{
text-align: center;
font-size: 2.5rem;
padding-bottom: 1.5rem;
letter-spacing: 1px;
text-transform: uppercase;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: 1px solid rgba(0,0,0,0.2);
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
footer{
padding: 1.5rem;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
Output: (Designed form)
Student Information Table:

Stored Data in Database:


Experiment No: 04
Experiment Name: Design a page where user can input his/her personal information like name,
address, email, gender, mobile number etc. and perform common input validation using JavaScript
like valid email, mobile number should be 11 digits, mandatory field check etc.
Objective: The objective of this experiment is to design a page using JavaScript, where user can input
his/her personal information and perform common input validation.
Code for Design a validation form: (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>Form Validation Using JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form_element">
<h2>Student Information</h2>
<form name="contactForm" onsubmit="return validateForm()" action="" method="POST">
<div class="form_group">
<label for="name">Name : </label>
<input type="text" class="form_control" name="name" placeholder="Enter Your Name">
<div class="error" id="nameErr"></div>
</div>
<div class="form_group">
<label for="email">Email : </label>
<input type="email" class="form_control" name="email" placeholder="Enter Your
Email">
<div class="error" id="emailErr"></div>
</div>
<div class="form_group">
<label for="pass">Password : </label>
<input type="password" class="form_control" name="password" placeholder="Enter Your
Password">
<div class="error" id="passwordErr"></div>
</div>
<div class="form_group">
<label for="mobile">Mobile : </label>
<input type="text" class="form_control" name="mobile"
maxlength="14" minlength="11" placeholder="Enter Your Mobile">
<div class="error" id="mobileErr"></div>
</div>
<div class="form_group">
<label for="gender">Gender : </label>
<input type="radio" name="gender" value="Male">&nbsp; <small>Male</small>
<input type="radio" name="gender" value="Female">&nbsp; <small>Female</small>
<input type="radio" name="gender" value="Other">&nbsp; <small>Other</small>
<div class="error" id="genderErr"></div>
</div>
<div class="form_group">
<label for="address">Address : </label>
<textarea name="address" id="address" class="form_control">
</textarea>
<div class="error" id="addressErr"></div>
</div>
<div class="form_group">
<div class="submit">
<input type="submit" value="Submit" class="submit_btn">
</div>
</div>
</form>
</div>
</div>
<script>
// Defining a function to display error message
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// Defining a function to validate form
function validateForm() {
// Retrieving the values of form elements
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var password = document.contactForm.password.value;
var mobile = document.contactForm.mobile.value;
var gender = document.contactForm.gender.value;
var address = document.contactForm.address.value;
// Defining error variables with a default value
var nameErr = emailErr = mobileErr = passwordErr = addressErr = genderErr = true;
// Validate name
if(name == "") {
printError("nameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Please enter a valid name");
} else {
printError("nameErr", "");
nameErr = false;
}
}
// Validate email address
if(email == "") {
printError("emailErr", "Please enter your email address");
} else {
// Regular expression for basic email validation
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email address");
} else{
printError("emailErr", "");
emailErr = false;
}
}
// Validate mobile number
if(mobile == "") {
printError("mobileErr", "Please enter your correct mobile number");
} else {
printError("mobileErr", "");
mobileErr = false;
}
// Validate password
if(password == "") {
printError("passwordErr", "Please enter your password");
} else {
printError("passwordErr", "");
passwordErr = false;
}
// Validate gender
if(gender == "") {
printError("genderErr", "Please select your gender");
} else {
printError("genderErr", "");
genderErr = false;
}
// Validate address
if(address == "") {
printError("addressErr", "Please select your address");
} else {
printError("addressErr", "");
addressErr = false;
}
// Prevent the form from being submitted if there are any errors
if((nameErr || emailErr || passwordErr || mobileErr || genderErr || addressErr ) == true) {
return false;
} else {
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n" +
"Name: " + name + "\n" +
"Email: " + email + "\n" +
"Password: " + password + "\n" +
"Mobile: " + mobile + "\n" +
"Gender: " + gender + "\n" +
"Address: " + address + "\n";
// Display input data in a dialog box before submitting the form
alert(dataPreview);
}
};
</script>
</body>
</html>
Code for Style: (style.css)
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.container{
width: 100%;
background-color: lightgray;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.form_element{
padding: 1.5rem;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(144, 238, 144,0.8);
border-radius: 0.4rem;
margin: 2rem;
min-width: 50%;
}
.form_element h2{
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid rgb(144, 238, 144);
padding: 1rem 0;
margin-bottom: 1.5rem;
}
.form_group{
padding: 0.3rem 0;
}
.form_group label{
font-weight: 600;
font-size: 0.8rem;
}
.form_control{
width: 100%;
padding: 10px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.form_control:focus{
border: 1px solid rgb(35, 24, 24);
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
input[type=radio]{
cursor: pointer;
}
input[type=check]{
width: 0.8rem;
height: 0.8rem;
cursor: pointer;
}
.submit{
display: flex;
justify-content: center;
align-items: center;
}
.submit_btn{
padding: 0.6rem 2.5rem;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
background-color: rgba(36, 126, 36);
border: 1px solid rgba(36, 126, 36);
color: #fff;
cursor: pointer;
transition: all 0.3s linear;
}
.submit_btn:hover{
background-color: rgba(36, 126, 36,0.8);
border: 1px solid rgba(36, 126, 36,0.8);
}
.error {
color: red;
font-size: 90%;
}
Output:

After submitting information:

You might also like