DEPT.
OF COMPUTER SCIENCE & ENGINEERIING
VII SEMESTER
LAB RECORD
SUB: INTERNET TECHNOLOGIES
(CSE 256)
NAME: SHRINIVASA S K
SECTION: 7CSE-10
ROLL NUMBER: 20191CSE0568
DATE OF SUBMISSION: 21.12.22
Lab.1:-
ABC Book House plans to sell their books online, So you are hired as a software developer to create a website for
them, Your first task is to create a static web page using HTML. The web page should be having following things 1)
Top of the page will display the store name and other related information, address, and contact information. 2)
Middle of the page will display the book information like s.no, book name, author name, and price with a table
format. 3) Bottom of the page will display the contact information.
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>ABC Book House</title>
<style>
body {
font-family: monospace;
margin: 0;
background-color: rgb(232, 245, 244);
}
header {
background-color: #cef5ce;
padding: 30px;
text-align: center;
}
section {
padding: 30px;
text-align: center;
height: 15rem;
}
table{
margin: auto;
text-align: center;
}
footer {
background-color: burlywood;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>ABC Book House</h1>
<p>Address: 18, ABC Street, CVD City, 560094</p>
<p>Contact: 9955228844</p>
</header>
<section>
<h2>Book Information</h2>
<table border="1">
<tr>
<th>S.No</th>
<th>Book Name</th>
<th>Author Name</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>Japan</td>
<td>Kentaro Miura</td>
<td>5600</td>
</tr>
<tr>
<td>2</td>
<td>One piece</td>
<td>Eiichiro Oda</td>
<td>2040</td>
</tr>
<tr>
<td>3</td>
<td>Bible Black</td>
<td>YKW</td>
<td>3300</td>
</tr>
</table>
</section>
<footer>
<h3>Contact Information</h3>
<p>Address: 123, ABC Street, bengalore City, 123456</p>
<p>Contact: 6969696969</p>
</footer>
</body>
</html>
Output:-
Lab.2:-
You have been hired as a software developer for Eureka Info Solutions. They are already doing online shopping
project for ABC Mobile shop. You are part of a development team and your task is to create a static web page using
HTML. The web page should be having following things: 1) Top of the page will display the Mobile shop Banner
(include image and text) and other related information. 2) New offers and notifications are in running text. 3) Middle
of the page will display the mobile information, clicking on mobile name/image the page will take you to the next
page which will display the mobile image and specification in tabular format. 4) Bottom of the page will display the
contact information
Code:-
<!DOCTYPE html>
<html>
<head>
<title>ABC Best Mobile Shop</title>
<style>
body {
font-family: monospace;
margin: 0;
}
header {
background-color: #5242af;
padding: 30px;
text-align: center;
display: flex;
justify-content: space-between;
align-items: stretch;
padding: 20px 20px 0 20px;
color: rgb(229, 250, 190);
}
section.offers{
background-color: rgb(95, 174, 81);
color: rgb(192, 241, 196);
font-size: 1.2rem;
margin-bottom: 10px;
}
section.main{
padding-bottom: 5rem;
padding-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
justify-content: center;
align-items: center;
}
.mobile-card{
display: inline-block;
padding: 10px;
margin: 10px;
border: 1px solid rgb(49, 24, 24);
border-radius: 10px;
height: 350px;
display: flex;
flex-direction: column;
cursor: pointer;
}
.mobile-img{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
table{
margin: auto;
text-align: center;
}
footer {
background-color: #b4e0fa;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<banner>
<img
src="C:\Users\Shrinivas S K\Desktop\html\icon.jpg"
alt="mobile logo" height="120">
<h1>ABC Mobile Shop</h1>
</banner>
<div class="details">
<p>Address: 9, NY Street, DC, 699669</p>
<p>Contact: 9955447788</p>
</div>
</header>
<section class="offers">
<marquee behavior="scroll" direction="left">
<p>Get 15% off on all mobiles. Offer available only this end of
season sale !!</p>
</marquee>
</section>
<section class="main">
<a href="app-site2.html">
<div class="mobile-card">
<div class="mobile-img">
<img
src="C:\Users\Shrinivas S K\Desktop\html\iphone.jpg" alt="mobile
image" height="200">
</div>
<div class="mobile-details">
<h2>iPhone 14 Pro</h2>
<p>Price: 120000</p>
</div>
</div>
</a>
<a href="app-site2.html">
<div class="mobile-card">
<div class="mobile-img">
<img
src="C:\Users\Shrinivas S K\Desktop\html\oneplus.jpg" alt="mobile image"
height="200">
</div>
<div class="mobile-details">
<h2>OnePlus 10 pro 5G</h2>
<p>Price: 62000</p>
</div>
</div>
</a>
<a href="app-site2.html">
<div class="mobile-card">
<div class="mobile-img">
<img
src="C:\Users\Shrinivas S K\Desktop\html\samsung.jpg" alt="mobile image"
height="200">
</div>
<div class="mobile-details">
<h2>Samsung galaxy Flip4</h2>
<p>Price: 90000</p>
</div>
</div>
</a>
<a href="app-site2.html">
<div class="mobile-card">
<div class="mobile-img">
<img
src="https://static.toiimg.com/thumb/resizemode-4,msid-54083591,imgsize-200,width-
1200/540
83591.jpg" alt="mobile image" height="200">
</div>
<div class="mobile-details">
<h2>Nokia C1-01</h2>
<p>Price: 1000</p>
</div>
</div>
</a>
</section>
<footer>
<p>ABC Mobile Shop</p>
<p>Address: 123, ABC Street, XYZ City, 123456</p>
<p>Contact: 1234567890</p>
</footer>
</html>
Output:-
Lab.3:-
The Computer Science Engineering department is planning to organize a symposium. Symposium events are to be
held with paper and project presentations, quizzes, etc. Students should register the interesting events. Assist the
web page design team to create a registration form for the symposium using appropriate HTML tags. The web page
should be having following things: 1. The top of the page will display the symposium event Banner (including image
and text) and other related information. 2. The Registration page will get the following details from the participants.
Participant Name, Branch, college name, communication Address, E-mail id, mobile no, age, state, Gender, Events
(Paper Presentation, Quiz, etc), etc.
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>Document</title>
<style>
header{
background-color: #dde6db;
padding: 30px;
text-align: center;
font-size: 20px;
color: rgb(53, 27, 27);
font: monospace;
}
banner {
display: flex;
justify-content: center;
align-items: center;
}
.details{
display: flex
justify-content : center;
align-items : center;
}
h1{
text-align: center;
}
form{
text-align: center;
}
label{
margin: 10px;
}
input{
margin: 15px;
}
</style>
</head>
<body style="background-color: rgb(224, 139, 199)">
<header>
<banner>
<img
src="C:\Users\Shrinivas S K\Desktop\html\Symposium_Logo.jpg" alt="fest
logo" height="120">
</banner>
<div class="details">
</div>
</header>
<h1>Registration Form</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="branch">Branch:</label>
<input type="text" id="branch" name="branch" required>
<br>
<label for="college">College:</label>
<input type="text" id="college" name="college" required>
<br>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="mobile">Mobile:</label>
<input type="tel" id="mobile" name="mobile" required>
<br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
<br>
<label for="state">State:</label>
<input type="text" id="state" name="state" required>
<br>
<label for="gender">
Male:
</label>
<input type="radio" id="gender" name="male" value="male">
<label for="gender">
Female:
</label>
<input type="radio" id="gender" name="female" value="female">
<label for="gender">
Other:
</label>
<input type="radio" id="gender" name="other" value="other">
<label for="gender">
Non Binary:
</label>
<input type="radio" id="gender" name="non binary" value="non binary">
<br>
<br>
<label for="events">Events:</label>
<select name="events" id="events">
<option value="paper">Paper Presentation</option>
<option value="quiz">Quiz</option>
<option value="project">Project Presentation</option>
</select>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:-
Lab.4:-
Write a JavaScript program to validate form and email
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>Lab 4</title>
</head>
<body bgcolor=" #66ffff">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password" required>
<br>
<input type="submit" value="Submit" onclick="Validate_form()">
</form>
<script>
function Validate_form(){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
var confirm_password = document.getElementById("confirm_password").value;
if (name == "" || email == "" || password == "" || confirm_password == ""){
alert("All fields are required");
return false;
}
else if (password.length < 8){
alert("Password must be at least 8 characters long");
return false;
}
else if(email.includes("@") == false){
alert("Email must contain @");
return false;
}
else if (password != confirm_password){
alert("Password and Confirm Password must be same");
return false;
}
else{
alert("Form Submitted Successfully");
return true;
}
}
</script>
</body>
</html>
Output:-
Lab.5:-
Demonstrates the various processes/steps involved in developing a voting application for CR election in your class.
(PHP, CSS, HTML, MySQL)
Code:-
Html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form{
background-color: #c4fff0;
color: rgb(0, 0, 0);
margin: auto;
padding: 100px;
border: 1px solid black;
border-radius: 5px;
position: relative;
}
input[type=submit]{
background-color: rgb(0, 0, 0);
color: white;
border: none;
border-radius: 5px;
padding: 5px;
margin: auto;
position: absolute;
left: 45%;
bottom: 10px
}
input[type=radio]{
margin-left: 1px;
}
input{
margin: 20px;
}
label{
margin: 10px;
}
</style>
</head>
<body>
<form action="iot6.php" method="post">
<h1>Voting Form</h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="age" >Age:</label>
<input type="number" min="18" id="age" name="age" required>
<br>
<label for ="candidate">candidate1</label>
<input type="radio" id="candidate" name="candidate" value="candidate1" required>
<label for ="candidate">candidate2</label>
<input type="radio" id="candidate" name="candidate" value="candidate2" required>
<label for ="candidate">candidate3</label>
<input type="radio" id="candidate" name="candidate" value="candidate3" required>
<br>
<input type="submit" value="Submit">
<br>
<input type="button" value="View Results" onclick="location.href='iot7.php'">
</form>
</body>
</html>
Insert file
<?php
include("php7(connect).php");
$studname=$_POST['name'];
$age=$_POST['age'];
$can_name=$_POST['candidate'];
$ins="insert into voting values('$studname','$age','$can_name')";
$result=mysqli_query($dbh,$ins)
or
die("Error in inserting data");
echo("Success inserting data");
?>
Print file
<?php
include("php7(connect).php");
$query = "select studname,age,can_name from voting";
$result = mysqli_query($dbh,$query) or
die("Error querying the database");
echo "<br/>";
echo"fetching success"; // not required only for initial code
echo "<br/>";
echo "20191CSE0568 <br/>";
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)) //mysqli_fetch_assoc($result);
{
echo $row['studname']." ";
echo $row['age'], " ";
echo $row['can_name'],"<br/>";} ?>
Data base
Output:-
