Scribd
Upload
6 views51 pages

WT Lab Manual

Web Technology problems

Uploaded by

Shankar Dupana
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
6 views51 pages

WT Lab Manual

Web Technology problems

Uploaded by

Shankar Dupana
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/ 51

Code No.

: 22IT104001

N MOHANBABU UNIVERSITY
Sree Sainath Nagar, Tirupati 517102
(22IT104001) Web Technologies
Lab Manual
Task 1: Login Form
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Avinash Baratam">
<meta name="description" content="It is a login form">
<title>Login Form</title>
<style>
body{
background-color: #333;
color: whitesmoke;
font-family: 'Times New Roman', Times, serif;

}
form{
text-align: center;
}
a{
color: aliceblue;
}
</style>
</head>
<body>
<h1 align="center">Student Login Form</h1>
<form action="https://httpbin.org/get" method="get">
<label for="username">Username : </label>
<input type="text" id="username" name="username" placeholder="Enter Username"
autofocus required><br><br>
<label for="password">Password : </label>
<input type="password" id="password" name="password" placeholder="Enter
Password" required><br><br>
<button type="submit" onclick="alert('No database recognized...!!!')">Login</button>
<br>
<label for="rememberme"><input type="checkbox" value="Remember me"
id="rememberme" name="remember me">Remember me</label>
<button type="reset">Cancel</button>
<p>Forgot <a href="forgotpassword.html">password?</a></p>
</form>
</body>
</html>
Task 2 :Course Registration Form
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Avinash Baratam">
<meta name="description" content="It is a Course registration form">
<title>Course Registration Form</title>
<style>
html{
font-size: 22;
}
body{
background-color: #333;
color: whitesmoke;
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h1 align="center">Course Registration Form</h1>
<form action="https://httpbin.org/get" method="get">
<label for="fname">First Name : </label>
<input type="text" id="fname" name="firstName" autofocus required><br><br>
<label for="mname">Middle Name : </label>
<input type="text" id="mname" name="middleName"><br><br>
<label for="lname">Last Name : </label>
<input type="text" id="lname" name="lastName" required><br>
<p>
Gender :
<select name="gender" id="gender">
<option value="select" selected>-select-</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</p>
<p>
Course:
<select name="course" id="course">
<option value="select">-select-</option>
<option value="java">JAVA</option>
<option value="c">C</option>
<option value="python">PYTHON</option>
<option value="c++">C++</option>
<option value="sql">SQL</option>
<option value="rLanguage">R LANGUAGE</option>
<option value="fullstack">FULL STACK</option>
</select>
</p>
<p>
Phone:
<input type="text" name="countrycode" value="+91" size="3">
<input type="text" name="phone" size="10"><br><br>
</p>
<p>
<label for="add">Address : </label><br>
<textarea name="address" id="add" cols="50" rows="5" placeholder="Type your
address here...."></textarea>
</p>
<p>
<label for="email">E-mail : </label>
<input type="email" id="email" name="email" placeholder="[email protected]">
</p>
<p>
<label for="pswd">Password : </label>
<input type="password" id="pswd" name="password" required>
</p>
<p>
<label for="repswd">Re-type password : </label>
<input type="password" id="repswd" name="repassword" required>
</p>
<p>
<label for="dob">Date of Birth(dd/mm/yyyy) :</label>
<input type="date" id="dob" name="dob">
</p>
<p>
<label for="image">Upload your image :</label>
<input type="file" id="image" name="candidateImage">
</p>
<p>
<button value="submit" onclick="alert('No database
available....!!!')">Submit</button>
</p>
</form>
</body>
</html>
Task 3: Animation Navbar Menu
Code :
<!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>CSS Animated Menu</title>
<link rel="stylesheet" href="menu.css">
</head>

<body>
<header>
<section class="header-title-line">
<h1>Acme Co.</h1>
<button class="menu-button">
<div class="menu-icon"></div>
</button>
</section>

<nav>
<ul>
<li><a href="products.html">Products</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>

</main>

</body>

</html>
Task 4: Write a JavaScript/JQuery code to validate the following fields of the Registration
web page.
a. First Name/Last Name - should contain only alphabets and the length should not be
less than 8 characters.
b. Username - It should contain combination of alphabets, numbers and underscore. It
should not allow spaces and special symbols.
c. Password - It should not less than 8 characters in length and it contains one uppercase
letter and one special symbol.
d. Date of Birth - It should allow only valid date; otherwise display a message stating that
entered date is invalid. Ex. 29 Feb. 2009 is an invalid date.
e. Postal Code: It must allow only 6 digit valid number.
f. Mobile No. - It should allow only numbers and total number of digits should be equal to
10.
g. e-mail id - It should allow the mail id with the following format:
Ex. [email protected]

Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAB-4</title>
<style>
body {
background-image: url("https://img.freepik.com/free-photo/top-view-blue-monday-
concept-composition-with-telephone_23-2149139103.jpg");
background-repeat: no-repeat;
background-size: cover;
}

#submit {
margin-left: 30%;
margin-top: 40px;
}

.container {
margin-left: 50%;
transform: translateX(-50%);
position: absolute;
top: 20%;
transform: translateX(-50%);
}

table tr td {
padding: 10px;
}

input {
padding: 7px;
width: 200px;
}

h1 {
margin-left: 46%;
color: green;
font-size: 40px;
}

p{
visibility: hidden;
display: inline-block;
}

label {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>

<body>
<h1>Contact form</h1>
<div class="container">
<form>
<table>
<tr>
<td>
<label for="first-name">First Name:</label>
</td>
<td>
<input type="text" id="first-name" placeholder="Chandrahaas Reddy">
<p id="fn_i"></p>
</td>
</tr>
<td>
<label for="last-name">Last Name:</label>
</td>
<td>
<input type="text" id="last-name" placeholder="Bhumireddy">
<p id="ln_i"></p>

</td>
</tr>
<td>
<label for="user-name">User Name:</label>
</td>
<td>
<input type="text" id="user-name" placeholder="chandrahaas_reddy_18">
<p id="un_i"></p>

</td>
</tr>
<td>
<label for="password">Password:</label>

</td>
<td>
<input type="password" id="password" placeholder="password">
<p id="p_i"></p>

</td>
</tr>
<td>
<label for="dob">Date Of Birth:</label>
</td>
<td>
<input type="date" id="dob">
</td>
</tr>
<td>
<label for="Postal-code">Postal Code:</label>
</td>
<td>
<input type="text" id="Postal-Code" minlength="8">
<p id="pc_i"></p>
</td>
</tr>
<td>
<label for="mobile-number">Mobile Number:</label>
</td>
<td>
<input type="text" id="mobile-number">
<p id="mn_i"></p>

</td>
</tr>
</table>
<input id="submit" type="submit" onclick="validate()">
</form>
</div>
<script>
function loop(word,len)
{
for(let i=0;i<len;i++)
{
if (!(word[i] >= "a" && word[i] <= "z") &&
!(word[i]>= "A" && word[i] <= "Z"))
{
return false;
}
}
return true;
}

function validate()
{ //first name
event.preventDefault();
let f_n = document.querySelector("#first-name").value;
if (f_n.length>8)
{
if (!loop(f_n,f_n.length))
{
let fn_p = document.querySelector("#fn_i");
fn_p.innerHTML="<i>first name Contains more than or equal to 8 charcaters but has
non aphabets in it.</i>";
fn_p.style.visibility="visible";
fn_p.style.color="red";

}
}
else{
let fn_p = document.querySelector("#fn_i");
fn_p.innerHTML="<i>first name Contains less than 8 charcaters.</i>";
fn_p.style.visibility="visible";
fn_p.style.color="red";
}

//LAST NAME
event.preventDefault();
let l_n = document.querySelector("#last-name").value;
if (l_n.length>8)
{
if (!loop(l_n,l_n.length))
{
let ln_p = document.querySelector("#ln_i");
ln_p.innerHTML="<i>Last name Contains more than 8 charcaters and it has non
alphabets in it.</i>";
ln_p.style.visibility="visible";
ln_p.style.color="red";

}
}
else{
let ln_p = document.querySelector("#ln_i");
ln_p.innerHTML="<i>Last name Contains less than 8 charcaters.</i>";
ln_p.style.visibility="visible";
ln_p.style.color="red";
}

//USER NAME
event.preventDefault();
let u_n = document.querySelector("#user-name").value;
if (u_n.length>8)
{
let ss=0,u=0,s=0,a=0,n=0;
for(let i=0;i<u_n.length;i++)
{
if (u_n[i] == "_")
{
u=1;
}
else if(u_n[i]=="@"||u_n=="$"||u_n=="!")
{
ss=1;
}
else if(u_n[i]==" ")
{
s=1;
}
else if ((u_n[i] >= "a" && u_n[i] <= "z") &&(u_n[i]>= "A" && u_n[i] <= "Z"))
{
a=1;
}
else if (u_n[i]>='0' && u_n[i]<='9')
{
n = 1;
}
}
if (ss==1)
{
let un_p = document.querySelector("#un_i");
un_p.innerHTML="<i>User name Contains more than 8 charcaters but it contains
special syombal.</i>";
un_p.style.visibility="visible";
un_p.style.color="red";
}
else if(s==1)
{
let un_p = document.querySelector("#un_i");
un_p.innerHTML="<i>User name Contains more than 8 charcaters but it conatins
spaces.</i>";
un_p.style.visibility="visible";
un_p.style.color="red";
}
else if(u==0)
{
let un_p = document.querySelector("#un_i");
un_p.innerHTML="<i>User name Contains more than 8 charcaters but it doesn't
contain underscore.</i>";
un_p.style.visibility="visible";
un_p.style.color="red";
}
else if(n==0)
{

let un_p = document.querySelector("#un_i");


un_p.innerHTML="<i>User name Contains more than 8 charcaters but it doesn't
contain number.</i>";
un_p.style.visibility="visible";
un_p.style.color="red";
}
else if (a==0)
{

let un_p = document.querySelector("#un_i");


un_p.innerHTML="<i>User name Contains more than 8 charcaters but it doesn't
contain alphabets.</i>";
un_p.style.visibility="visible";
un_p.style.color="red";
}
}
else{
let un_p = document.querySelector("#un_i");
un_p.innerHTML="<i>user name Contains less than 8 charcaters.</i>";
un_p.style.visibility="visible";
un_p.style.color="red";
}

//PASSWORD

event.preventDefault();
let p_n = document.querySelector("#password").value;
if (p_n.length>8)
{
let ss=0,u=0;
for(let i=0;i<u_n.length;i++)
{
if(u_n[i]=="@"||u_n=="$"||u_n=="!")
{
ss+=1;
}
else if(u_n[i] == u_n[i].toUpperCase())
{
un+=1;
}
}
if (ss>1)
{
let p_p = document.querySelector("#p_i");
p_p.innerHTML="<i>Password Contains more than 8 charcaters but it contains special
syombal more than 1.</i>";
p_p.style.visibility="visible";
p_p.style.color="red";
}
else if(un>1)
{
let p_p = document.querySelector("#p_i");
p_p.innerHTML="<i>Password Contains more than 8 charcaters but it conatins
uppercases more than 1.</i>";
p_p.style.visibility="visible";
p_p.style.color="red";
}
else if(u>1)
{
let p_p = document.querySelector("#p_i");
p_p.innerHTML="<i>Password Contains more than 8 charcaters but it doesn't contain
uppercase.</i>";
p_p.style.visibility="visible";
p_p.style.color="red";
}
else if(ss==0)
{
let p_p = document.querySelector("#p_i");
p_p.innerHTML="<i>Password Contains more than 8 charcaters but it doesn't special
syombal.</i>";
p_p.style.visibility="visible";
p_p.style.color="red";
}
else if (a==0)
{

let p_p = document.querySelector("#p_i");


p_p.innerHTML="<i>Password Contains more than 8 charcaters but it doesn't contain
alphabets.</i>";
p_p.style.visibility="visible";
p_p.style.color="red";
}
}

else{
let p_p = document.querySelector("#p_i");
p_p.innerHTML="<i>Password Contains less than 8 charcaters.</i>";
p_p.style.visibility="visible";
p_p.style.color="red";
}

//POSTAL CODE
let pc_i= document.querySelector("#Postal-Code").value;
let n=0;
for(let i=0;i<pc_i.length;i++)
{
if (pc_i[i]>='0' && pc_i[i]<='9')
{
n+=1;
}
}
console.log(n,pc_i.length);
if (n!==pc_i.length)
{
let p = document.querySelector("#pc_i");
p.innerHTML="<i>Postal code contains alphabets.</i>";
p.style.visibility="visible";
p.style.color="red";
}
else if (pc_i.length<6)
{
let p = document.querySelector("#pc_i");
p.innerHTML="<i>Postal code less than 6 charcaters.</i>";
p.style.visibility="visible";
p.style.color="red";
}

else if (pc_i.length>6)
{
let p = document.querySelector("#pc_i");
p.innerHTML="<i>Postal code more than 6 charcaters.</i>";
p.style.visibility="visible";
p.style.color="red";
}
//MOBILE NUMBER

let m_i= document.querySelector("#mobile-number").value;


let mn=0;
for(let i=0;i<m_i.length;i++)
{
if (m_i[i]>='0' && m_i[i]<='9')
{
mn+=1;
}
}
if (mn!==m_i.length)
{
let p = document.querySelector("#mn_i");
p.innerHTML="<i>Mobile Number contains alphabets.</i>";
p.style.visibility="visible";
p.style.color="red";
}
else if (m_i.length<10)
{
let p = document.querySelector("#mn_i");
p.innerHTML="<i>Mobile number contains less than 10 digits.</i>";
p.style.visibility="visible";
p.style.color="red";
}

else if (m_i.length>10)
{
let p = document.querySelector("#mn_i");
p.innerHTML="<i>Mobile number contains more than 10 digits.</i>";
p.style.visibility="visible";
p.style.color="red";
}

</script>
</body>

</html>
Task 5: Design a web page with the following features using HTML5, JavaScript and JQuery
a. Displaying of images with Custom animated effects
b. Playing of selected video from the list of videos
c. Showing the animated text in increasing and decreasing font size
d. Changing the size of the area in a web page using DIV tag
e. Hiding and Showing elements in a web page.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Web Page</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js" defer></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
}

#image-gallery {
display: flex;
gap: 20px;
margin-bottom: 20px;
}

.gallery-image {
width: 200px;
height: auto;
cursor: pointer;
}

#video-player {
margin-bottom: 20px;
}

#animated-text {
margin-bottom: 20px;
}

#resizable-area {
border: 2px solid #333;
padding: 20px;
width: 200px;
margin-bottom: 20px;
}
.hide-show-text {
margin-bottom: 20px;
}
</style>
</head>
<body>

<!-- Image Gallery with Custom Animation -->


<div id="image-gallery">
<img src="image1.jpg" class="gallery-image" alt="Image 1">
<img src="image2.jpg" class="gallery-image" alt="Image 2">
<img src="image3.jpg" class="gallery-image" alt="Image 3">
</div>

<!-- Video Player -->


<div id="video-player">
<video id="selected-video" width="600" controls>
<source id="video-source" src="" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="video-list">
<button class="play-video" data-video="video1.mp4">Play Video 1</button>
<button class="play-video" data-video="video2.mp4">Play Video 2</button>
<button class="play-video" data-video="video3.mp4">Play Video 3</button>
</div>
</div>

<!-- Animated Text -->


<div id="animated-text">
<p class="animating-text">This text will change its size!</p>
<button id="increase-size">Increase Font Size</button>
<button id="decrease-size">Decrease Font Size</button>
</div>

<!-- Resizable DIV -->


<div id="resizable-area">
<p>Resizable area using DIV tag.</p>
<button id="increase-div">Increase Size</button>
<button id="decrease-div">Decrease Size</button>
</div>

<!-- Hide and Show Elements -->


<div id="hide-show-section">
<p class="hide-show-text">This element can be hidden or shown.</p>
<button id="hide-element">Hide</button>
<button id="show-element">Show</button>
</div>
<script>
$(document).ready(function() {
// Custom Animated Effects for Images
$('.gallery-image').hover(function() {
$(this).animate({
width: '+=50px',
height: '+=50px',
opacity: 0.8
}, 500);
}, function() {
$(this).animate({
width: '-=50px',
height: '-=50px',
opacity: 1.0
}, 500);
});

// Playing Selected Video from the List


$('.play-video').click(function() {
var videoSrc = $(this).data('video');
$('#video-source').attr('src', videoSrc);
$('#selected-video')[0].load();
$('#selected-video')[0].play();
});

// Animated Text with Increasing and Decreasing Font Size


$('#increase-size').click(function() {
$('.animating-text').animate({ 'font-size': '+=10px' }, 500);
});

$('#decrease-size').click(function() {
$('.animating-text').animate({ 'font-size': '-=10px' }, 500);
});

// Changing the Size of the Area in a Web Page Using DIV


$('#increase-div').click(function() {
$('#resizable-area').animate({ 'width': '+=50px', 'height': '+=50px' }, 500);
});
$('#decrease-div').click(function() {
$('#resizable-area').animate({ 'width': '-=50px', 'height': '-=50px' }, 500);
});

// Hiding and Showing Elements in a Web Page


$('#hide-element').click(function() {
$('.hide-show-text').hide();
});

$('#show-element').click(function() {
$('.hide-show-text').show();
});
});
</script>
</body>
</html>
Task 6: Design a web page with the following features using Bootstrap and Media Query.
a. Components
b. Responsive tables
c. Responsive images and videos
d. Toolbars, Buttons and Lists

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Web Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
/* Media Queries for different screen sizes */
@media (max-width: 768px) {
.navbar-nav {
text-align: center;
}

.table-responsive {
overflow-x: auto;
}
.btn-toolbar {
flex-direction: column;
align-items: stretch;
}

.btn-group {
margin-bottom: 10px;
}
}

@media (max-width: 576px) {


.navbar-brand {
font-size: 1.5rem;
}

.embed-responsive {
height: auto;
}

.list-group-item {
font-size: 0.9rem;
}
}
</style>
</head>
<body>

<!-- Navbar Component -->


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Web Page</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Responsive Table -->


<div class="container my-4">
<h2 class="text-center">Responsive Table</h2>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>+123456789</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>+987654321</td>
</tr>
</tbody>
</table>
</div>
</div>

<!-- Responsive Images and Videos -->


<div class="container my-4">
<h2 class="text-center">Responsive Images and Videos</h2>
<img src="image.jpg" class="img-fluid" alt="Responsive Image">
<div class="embed-responsive embed-responsive-16by9 mt-3">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
</div>
</div>

<!-- Toolbar and Buttons -->


<div class="container my-4">
<h2 class="text-center">Toolbar, Buttons, and Lists</h2>
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
</body>
</html>
Task 7: Write a PHP code to read user details entered through the registration web page
and store the same into MySQL database.
Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<style>
*{
margin: 0px;
padding: 0px;
font-family: Arial;
}

body {
background-color: rgb(34, 34, 34);
}

form {
background-color: rgb(255, 0, 0);
display: flex;
gap: 25px;
flex-direction: column;
width: fit-content;
padding: 35px;
border: 3px solid white;
border-radius: 20px;
margin: auto;
margin-top: 20px;
}

input {
width: 245px;
height: 47px;
border: none;
border-radius: 17px;
padding-left: 15px;
font-size: 15px;
outline: none;
}

textarea {
font-size: 15px;
padding-left: 10px;
padding-top: 12px;
outline-color: green;
border-radius: 15px;
}

button {
border-radius: 20px;
height: 45px;
font-size: 17px;
border: 1.5px solid rgb(108, 108, 108);
background-color: antiquewhite;
}

button:hover {
background-color: rgb(255, 218, 170);
transition: all 0.3s ease;
}

#beyond {
width: fit-content;
height: fit-content;
}

#year {
width: 245px;
height: 47px;
border: none;
border-radius: 17px;
padding-left: 15px;
font-size: 15px;
outline: none;
}
</style>
</head>

<body>
<h1 align="center" style="color: white; margin-top:100px;">Registration Form</h1>
<form action="prac3.php" method="post">
<input type="text" placeholder="Enter your name" name="name" required>
<input type="email" placeholder="Enter your email" name="email" required>
<input type="password" placeholder="Enter password" name="password" required>
<input type="number" placeholder="Enter your age" name="age" required>
<input type="date" name="date" id="date">
<div class="box1">
<input type="radio" name="gender" id="beyond" value="Male"> Male
<input type="radio" name="gender" id="beyond" value="Female" style="margin-left:
15px;"> Female
</div>
<div class="box2">
<input type="checkbox" name="course[]" id="beyond" value="C"> C
<input type="checkbox" name="course[]" id="beyond" value="Java" style="margin-
left: 5px;"> Java
<input type="checkbox" name="course[]" id="beyond" value="Python"
style="margin-left: 5px;"> Python
<input type="checkbox" name="course[]" id="beyond" value="DBMS" style="margin-
left: 5px;"> DBMS
</div>
<select name="year" id="year" required>
<option value="I">I</option>
<option value="II">II</option>
<option value="III">III</option>
<option value="IV">IV</option>
</select>
<textarea name="query" id="query" cols="30" rows="7" placeholder="Enter other
queries"></textarea>
<button name="submit">Submit</button>
</form>
</body>

</html>
PHP code : prac3.php:
<?php

if (isset($_POST['submit'])) {
$server = "localhost";
$username = "root";
$password = "";

$conn = mysqli_connect($server, $username, $password);

if (!$conn) {
die("Error" . mysqli_connect_error());
}

$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];
$age = $_POST['age'];
$date = $_POST['date'];
$gender = $_POST['gender'];
$course = $_POST['course'];
$year = $_POST['year'];
$query = $_POST['query'];

$allCourses = implode(",", $course);

$sql = "INSERT INTO `table`.`register2` (`name`, `email`, `password`, `age`, `date`, `gender`,
`course`, `year`, `query`, `dt`) VALUES ('$name', '$email', '$password', '$age', '$date',
'$gender', '$allCourses', '$year', '$query', current_timestamp());";
if ($conn->query($sql) == true) {
echo "Success";
} else {
echo "Error" . mysqli_error($conn);
}
$conn->close();
}
?>
Task 8: Write a PHP code to read the username and password entered in the Login form of
the online book store and authenticate with the values available in cookies. If user enters
a valid username and password, welcome the user by username otherwise display a
message stating that, entered details are invalid.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Book Store Login</title>
</head>
<body>

<h2>Login to Your Account</h2>

<form action="authenticate.php" method="post">


<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

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


</form>
<?php
// Set cookies for username and password
setcookie("username", "user123", time() + (86400 * 30), "/"); // 86400 = 1 day
setcookie("password", "pass123", time() + (86400 * 30), "/");

echo "Cookies for username and password have been set.";


?>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Retrieve form data
$username = htmlspecialchars($_POST['username']);
$password = htmlspecialchars($_POST['password']);

// Check if the cookies for username and password are set


if (isset($_COOKIE['username']) && isset($_COOKIE['password'])) {
// Authenticate user
if ($username === $_COOKIE['username'] && $password === $_COOKIE['password']) {
echo "<h1>Welcome, $username!</h1>";
} else {
echo "<h1>Invalid username or password. Please try again.</h1>";
}
} else {
echo "<h1>Authentication cookies are not set. Please contact support.</h1>";
}
}
?>
</body>
</html>
Task 9: Write a PHP code for storing books details like Name of the book, author, publisher,
edition, price, etc into MySQL database. Embed a PHP code in catalogue page of the online
book store to extract books details from the database.
Code:
Step 1: Create a MySQL Database and Table
1. Create the Database:
First, log into your MySQL server (using phpMyAdmin or the MySQL command line) and
create a database for your bookstore:
CREATE DATABASE online_bookstore;

2. Create the Books Table:

Next, create a table to store the book details:

USE online_bookstore;

CREATE TABLE books (


id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
author VARCHAR(255) NOT NULL,
publisher VARCHAR(255) NOT NULL,
edition VARCHAR(100),
price DECIMAL(10, 2) NOT NULL
);
Step 2: PHP Code to Store Book Details into the Database
Create a PHP script (add_book.php) to insert book details into the books table:
<?php
$servername = "localhost";
$username = "root"; // Change this if your MySQL uses a different username
$password = ""; // Change this if your MySQL has a password
$dbname = "online_bookstore";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Check if form is submitted


if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST['name']);
$author = htmlspecialchars($_POST['author']);
$publisher = htmlspecialchars($_POST['publisher']);
$edition = htmlspecialchars($_POST['edition']);
$price = htmlspecialchars($_POST['price']);

// Prepare and bind


$stmt = $conn->prepare("INSERT INTO books (name, author, publisher, edition, price)
VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param("ssssd", $name, $author, $publisher, $edition, $price);

// Execute the query


if ($stmt->execute()) {
echo "New book record created successfully";
} else {
echo "Error: " . $stmt->error;
}

$stmt->close();
}

$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Book</title>
</head>
<body>

<h2>Add New Book</h2>

<form action="add_book.php" method="post">


<label for="name">Name of the Book:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="author">Author:</label>
<input type="text" id="author" name="author" required><br><br>

<label for="publisher">Publisher:</label>
<input type="text" id="publisher" name="publisher" required><br><br>

<label for="edition">Edition:</label>
<input type="text" id="edition" name="edition"><br><br>

<label for="price">Price:</label>
<input type="text" id="price" name="price" required><br><br>

<input type="submit" value="Add Book">


</form>

</body>
</html>

Step 3: PHP Code to Extract and Display Book Details


Create a PHP script (catalogue.php) to retrieve and display book details from the `books`
table:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "online_bookstore";

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

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

// Fetch book details


$sql = "SELECT name, author, publisher, edition, price FROM books";
$result = $conn->query($sql);

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalogue</title>
</head>
<body>

<h2>Book Catalogue</h2>

<?php
if ($result->num_rows > 0) {
echo "<table border='1'>";
echo
"<tr><th>Name</th><th>Author</th><th>Publisher</th><th>Edition</th><th>Price</
th></tr>";
// Output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["name"]. "</td><td>" . $row["author"]. "</td><td>" .
$row["publisher"]. "</td><td>" . $row["edition"]. "</td><td>" . $row["price"]. "</td></tr>";
}
echo "</table>";
} else {
echo "0 results";
}

$conn->close();
?>

</body>
</html>
Task 10 : Online quiz platform
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Quiz -1</title>
</head>
<body>
<form action="quiz1submit.php" method="post">
<div class="whole-box">
<div class="question-box">
<h3 id="question" >Who is the prime minister of India?</h3>
<div class="opt-group">
<input type="radio" name="question1" value="Narendra Modi" class="option">
Narendra Modi <br>
<input type="radio" name="question1" value="Rajeev Gandhi" class="option">
Rajeev Gandhi <br>
<input type="radio" name="question1" value="Murmu" class="option"> Murmu <br>
<input type="radio" name="question1" value="None" class="option"> None <br>
</div>
</div>
<div class="question-box">
<h3 id="question" >Who is the president of india?</h3>
<div class="opt-group">
<input type="radio" name="question2" value="Narendra Modi" class="option">
Narendra Modi <br>
<input type="radio" name="question2" value="Rajeev Gandhi" class="option">
Rajeev Gandhi <br>
<input type="radio" name="question2" value="Murmu" class="option"> Murmu <br>
<input type="radio" name="question2" value="None" class="option"> None <br>
</div>
</div>
<div class="question-box">
<h3 id="question" >How many wonders are present in the world ?</h3>
<div class="opt-group">
<input type="radio" name="question3" value="8" class="option"> 8 <br>
<input type="radio" name="question3" value="7" class="option"> 7 <br>
<input type="radio" name="question3" value="9" class="option"> 9 <br>
<input type="radio" name="question3" value="5" class="option"> 5 <br>
</div>
</div>
<div class="question-box">
<h3 id="question" >What is the capital of India?</h3>
<div class="opt-group">
<input type="radio" name="question4" value="Delhi" class="option"> Delhi <br>
<input type="radio" name="question4" value="Jaipur" class="option"> Jaipur <br>
<input type="radio" name="question4" value="Andaman" class="option"> Andaman
<br>
<input type="radio" name="question4" value="Hyderabad" class="option">
Hyderabad <br>
</div>
</div>
<div class="question-box">
<h3 id="question" >What is the Capital of AndhraPradesh ?</h3>
<div class="opt-group">
<input type="radio" name="question5" value="Amaravati" class="option"> Amaravati
<br>
<input type="radio" name="question5" value="Vizag" class="option"> Vizag <br>
<input type="radio" name="question5" value="Kurnool" class="option"> Kurnool
<br>
<input type="radio" name="question5" value="All" class="option"> All <br>
</div>
</div>
<button name="submit">Submit</button>
</div>
</form>
</body>
</html>

PHP Code:
<?php
if(isset($_POST['submit'])){
$server = "localhost";
$username = "root";
$password = "";

$connect = mysqli_connect( $server, $username, $password );

if(!$connect){
die("Connection Failed! due to ".mysqli_connect_error());
}

$question1 = $_POST['question1'];
$question2 = $_POST['question2'];
$question3 = $_POST['question3'];
$question4 = $_POST['question4'];
$question5 = $_POST['question5'];

$sql = "INSERT INTO `quiz`.`quiz1` (`question1` , `question2` , `question3` , `question4` ,


`question5`) VALUES ('$question1', '$question2', '$question3', '$question4', '$question5');";

if ($connect->query($sql)) {
echo "Success";
} else {
echo "Error";
}

$connect->close();

}
?>

You might also like