Scribd
Upload
2K views

It-Web-Essential-Lab-Manual ORG

The document discusses handling multimedia content on websites. It provides an aim and lists algorithms for optimizing file sizes, lazy loading content, responsive design, user interaction, accessibility, and performance monitoring.

Uploaded by

Marie Claude AGACE090
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
2K views

It-Web-Essential-Lab-Manual ORG

The document discusses handling multimedia content on websites. It provides an aim and lists algorithms for optimizing file sizes, lazy loading content, responsive design, user interaction, accessibility, and performance monitoring.

Uploaded by

Marie Claude AGACE090
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/ 34

Alpha College of Engineering

(Approved by AICTE, Affiliated to Anna University & ISO Certified)


Thirumazhisai, Chennai – 600 124

IT Web Essential LAB Manual


Information Technology (Anna University)
Alpha College of Engineering
(Approved by AICTE, Affiliated to Anna University & ISO Certified)
Thirumazhisai, Chennai – 600 124

DEPARTMENT OF INFORMATION TECHNOLOGY

IT3401-WEB ESSENTIALS LABORATORY


IV– SEMESTER

2
Alpha College of Engineering
(Approved by AICTE, Affiliated to Anna University & ISO Certified)
Thirumazhisai, Chennai – 600 124

University Register no:

CERTIFICATE

Certified to bonafide record of work done


Of IV Semester B.Tech (Information Technology) in the IT3401

WEB ESSENTIALS LABORATORY during the Academic Year2022–2023.


Submitted for the University Practical Examination held on

STAFF-IN-CHARGE HEAD OF THE DEPARTMENT

INTERNALEXAMINER EXTERNALEXAMINER

3
CONTENTS

DATE EX.NO LISTOFEXPERIMENTS PAGE SIGN


NO

4
EX.NO:1 CREATION OF INTERACTIVE WEBSITE

Date: DESIGN USING HTML AND AUTHORING


TOOLS

AIM:
The aim of this project is to create an inter active website using HTML and
authoring tools.

ALGORITHM:

1. Define the purpose of the website and identify the target audience.

2.Plan the layout of the website, including the pages and navigation.

3. Choose an authoring tool, such as Dream weaver or Word


Press , to create the website.

4.Use HTML to design the pages of the website.

5.Add inter active elements, such as forms and buttons ,to engage the user.

6.Optimize the website for search engines and accessibility.

7.Test the website on different devices and browsers.

8.Publish the website to a webhosting service.

5
PROGRAM:

<!DOCTYPEhtml>
<html>

<head>
<title>InteractiveWebpage</title>
<style>
button{
background-color:#4CAF50;
color: white;
padding:10px20px;
border: none;
border-radius:4px;
cursor: pointer;
}

input[type=text]{
padding: 10px;
border:1pxsolid#ccc;
border-radius: 4px;
box-sizing:border-box;
}
</style>
</head>

<body>

<h1>WelcometoMyWebpage!</h1>

<p>Clickthebuttonbelowtoseea message:</p>
<buttononclick="alert('HelloWorld!')">ClickMe</button>

<form>
<labelfor="name">EnterYourName:</label>
<inputtype="text"id="name"name="name"><br><br>
<button onclick="alert('Hello ' +
document.getElementById('name').value)">SayHello</button>
</form>

</body>

</html>

6
OUTPUT:

RESULT:
Thus the Creation of inter active websites – Design using HTML and
authoring tools have been executed successfully and the output got
verified.

7
EX.NO:2 FORM VALIDATION USINGJAVASCRIPT

Date:

AIM:
The aim of form validation using JavaScript is to ensure that
user- submitted data is accurate, complete, and properly
formatted before it is processed by the server. This helps to
prevent errors and data loss, and ensures a better user
experience.

ALGORITHMS:

1.Gets the form element from the HTML document using JavaScript.

2.Add an event listener to the form element that listens for the
submit event.

3.Inside the event listener function, prevent the default form


submission behavior using event. Prevent Default ().

4. Retrieve the values of the form fields using JavaScript and validate
those using conditional statements.

5.If any field is invalid, display an error message and prevent the form
from submitting.

6. If all fields are valid, submit the form.

8
PROGRAM:

<!DOCTYPEhtml>
<html>
<head>
<title>FormValidationExample</title>
<script>
functionvalidateForm(){
varname=document.forms["myForm"]["name"].value;
varemail= document.forms["myForm"]["email"].value;

if(name==""){
alert("Namemustbefilledout");
return false;
}

if(email==""){
alert("Emailmustbefilledout");
return false;
}

if(email.indexOf("@")== -1 ||email.indexOf(".")== -1){ alert("Please


enter a valid email address");
returnfalse;
}
}
</script>
</head>
<body>

<h1>FormValidationExample</h1>

<formname="myForm"onsubmit="returnvalidateForm()">
<labelfor="name">Name:</label>
<inputtype="text"id="name"name="name"><br><br>

<labelfor="email">Email:</label>
<inputtype="text"id="email"name="email"><br><br>

<inputtype="submit"value="Submit">
</form>

</body>
9
</html>

OUTPUT:

RESULT:

Thus the Validation form using Java script have been executed
successfully and the output got verified.

10
EX.NO:3 CREATION OF SIMPLE PHP SCRIPTS

Date:

AIM:

The aim of creating simple PHP scripts is to enable web developers to build
dynamic web pages that can interact with databases and provide customized responses
to user input.

ALGORITHMS:

1. Identify the purpose of the PHP script: Determine what the script should
accomplish, whether it's processing user input, retrieving data from a database, or
generating dynamic content.

2. Set up the PHP environment: Install PHP and configure the web server to support
PHP scripts.

3. Create a new PHP file: Use a text editor or integrated development environment
(IDE) to create a new file with a .php extension.

4. StartwiththePHPopeningtag:BeginthePHPscriptwiththeopening<?phptag

5. Write PHP code: Write PHP code that performs the desired task, such as
processing form data, querying a database, or generating HTML content.

6. Test the PHP script : Save the PHP script to a web server and test it in a web
browser to verify that it's functioning correctly.

7. Debug and refine the script: If the script doesn't work as expected, use error
messages and debugging tools to identify and fix any issues.

8. Add comments and documentation: Add comments to the code to explain its
purpose and make it easier to maintain in the future.

9. Refactor and optimize: Refactor the code to make it more efficient and optimize it
for performance.

10. Deploy the PHP script: Upload the PHP script to the web server and integrate it

11
into the website or application as needed.

12
PROGRAM:

<!DOCTYPEhtml>
<html>
<head>
<title>SimplePHPScript</title>
</head>
<body>

<h1>Current Date and Time</h1>

<?php
echo"The current date and time is:".date("Y-m-dH:i:s");
?>

</body>
</html>

13
OUTPUT:

Current Date and Time

The current date and time is: 2024-11-1114:45:30

RESULT:

Thus the Creation of simple PHP scripts have been executed


successfully and the output got verified.
14
EX.NO:4 HANDLING MULTIMEDIA CONTENT IN WEBSITES

Date:

AIM:

The aim of handling multimedia content in web sites is to ensure that users have a
seamless and enjoyable experience while accessing multimedia content on a website.

ALGORITHMS:

1. Determine the types of multimedia content that will be used on the website, such
as images, videos, audio, and animations.

2. Optimize multimedia files for the web by compressing them without sacrificing
quality. This can be done using image compression tools, video compression tools,
and audio compression tools.

3. Implement lazy loading for multimedia content to improve the website's loading
speed. This involves only loading multimedia content when it is necessary, such as when
the user scrolls to a certain point on the page.

4. Use responsive design techniques to ensure that multimedia content is displayed


properly on different devices and screen sizes. This includes using responsive image and
video tags, and using CSS to adjust the size and position of multimedia elements.

5. Provide an intuitive interface for users to interact with multimedia content, such
as allowing them to play and pause videos, adjust the volume, and control the
playback speed.

6. Ensure that multimedia content is accessible to users with disabilities, such as


providing captions and transcripts for videos and audio files, and using al tags for
images. Monitor website performance and user feedback to continuously
optimize multimedia content for the website.

7. Monitor website performance and user feedback to continuously optimize


multimedia content for the website.

15
PROGRAM:

<!DOCTYPE html>
<html>

<head></head>

<body>
<imgsrc="https://thumbs.dreamstime.com/b/beautiful-landscape-dry-tree-branch-
sun-flowers-field-against-colorful-evening-dusky-sky-use-as-natural-background-
backdrop-48319427.jpg" alt="An example image" /><br /><br />
<videocontrols>
<sourcesrc="video.mp4"type="video/mp4">
<sourcesrc="video.webm"type="video/webm"> Your
browser does not support the video tag.
</video>
<br/><br/>
<audiocontrols>
<sourcesrc="audio.mp3"type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Yourbrowserdoesnotsupporttheaudiotag.
</audio>

</body>

</html>

16
OUTPUT:

RESULT:
Thus the Handling Multimedia content in websites has been executed successfully
and the output got verified.

17
EX.NO: 5 i) WRITE PROGRAMS USING SERVLETS

Date: TO INVOKE SERVLETS FROM HTMLFORMS

AIM:

The aim of invoking servlets from HTML forms is to enable the server-side
processing of form data submitted by users on a web page.

ALGORITHMS:

1. Create an HTML form that will collect data from the user. The form should have
action attribute set to the URL pattern of the servlets that will handle the form
submission and a method attribute set to POST or GET.

2. Create a servlets that will handle the form submission. This involves extending the
Http Servlet class and overriding the do Post or do Get method, depending on the
method used in the form.

3. In the servlet, retrieve the form data submitted by the user using there quest oject's
get Parameter method. This method takes the name of the form input element as a
parameter and returns its value.

4. Validate the form data to ensure that it meets the required format and values. This
involves checking for errors and generating appropriate error messages if necessary.

5. Process the form data to perform the necessary actions, such as updating a
database, sending an email, or generating a report.

6. Generate a response to be displayed back to the user. This involves using the
response object's Print Writer to write HTML code that will be displayed in the user's
browser.

7. MaptheservlettoaURLpatternintheweb.xml file. This allows the servlets to be


invoked when the form is submitted.

8. Deploy the web application to a server and test the HTML form by submitting
data and verifying that the servlet is invoked, the data is processed correctly, and the
response is displayed back to the user.

18
PROGRAM:

HTML:
<!DOCTYPE html>
<html>
<head>
<title>FormSubmission</title>
</head>
<body>
<formaction="FormServlet"method="POST">
<labelfor="name">Name:</label>
<inputtype="text"id="name"name="name"><br>

<labelfor="email">Email:</label>
<inputtype="email"id="email"name="email"><br>

<labelfor="message">Message:</label>
<textareaid="message"name="message"></textarea><br>

<inputtype="submit"value="Submit">
</form>
</body>
</html>

19
SERVLETS:

importjava.io.IOException;
importjavax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;

public class FormServlet extends HttpServlet


{ privatestaticfinallongserialVersionUID=1L;

protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse) throws
ServletException, IOException {
String name = request.getParameter("name");
String email = request.getParameter("email");
Stringmessage=request.getParameter("message");

//Processtheformdata here(e.g.sendanemail,savetoadatabase)

// Generate a response to be displayed back to the user


response.setContentType("text/html");
response.getWriter().println("<html><body>");
response.getWriter().println("<h2>Thankyouforyoursubmission,"+name+
"!</h2>");
response.getWriter().println("<p>Wewillrespondto your messageat"+email+ "as soon
as possible.</p>");
response.getWriter().println("</body></html>");
}
}

20
OUTPUT:
ii) Session tracking using hidden form fields and session tracking for a hit count

21
AIM:

To implement session tracking in a Servlet to keep track of the number of times a user
has visited a page.

ALGORITHM1:

Step1: Create a JSP or HTML page with a form that has a hidden input field. This

field should be named "sessionId" and should have a value equal to the session ID.

Step2: In the Servlet, use the Http Servlet Request object to retrieve the session ID

from the hidden input field. If the session ID does not exist in the hidden input field,

create a new session ID and store it in the hidden input field.

Step3: Use the Http Servlet Response object to set a cookie with the session

ID. Step 4: Use the Http Session object to store any session attributes you need

ALGORITHM2:

Step1:Create a Servlet that extends Http Servlet.

Step2: Over ride the do Get ( ) method to retrieve the current session, and then retrieve

"hitCount" attribute from the session.

Step3: If the"hitCount"attributedoesnotexist,setitto1. Otherwise, increment itby1.

Step 4: Store the "hitCount" attribute in the session.

Step5: Send the "hitCount" attribute to the client in the response.

Step6: Over ride the do Post ( ) method to call the do Get( ) method.

22
PROGRAM:

HTML:

<html>
<body>
<h2>Enteryourname:</h2>
<formmethod="post"action="greeting">
<inputtype="text"name="name">
<br><br>
<inputtype="hidden"name="sessionid">
<inputtype="submit"value="Submit">
</form>
</body>
</html>

SERVLETS:

import java.io.*;
importjavax.servlet.*;
importjavax.servlet.http.*;

publicclassGreetingServletextendsHttpServlet{
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriterout=response.getWriter();

HttpSessionsession=request.getSession(true);
String sessionid = session.getId();
Stringname=request.getParameter("name");

int hitcount = 0;
if(session.getAttribute("hitcount")!=null){
hitcount=(Integer)session.getAttribute("hitcount");
}
hitcount++;
session.setAttribute("hitcount",hitcount);

out.println("<html>");
out.println("<body>");
out.println("<h1>Hello, " + name + "!</h1>");
out.println("<p>YoursessionIDis"+sessionid +".</p>");
out.println("<p>Youhave visitedthispage"+hitcount +"times.</p>"); out.println("</body>");
out.println("</html>");
}
}
23
OUTPUT:

RESULT:
Thus the given program using Servlets have been executed successfully and
the output got verified.

24
EX.NO:6 CREATION OF INFORMATION RETREIVEL
SYSTEM USING WEB, PHP, AND MYSQL

Date:

AIM:

The aim of this project is to create an information retrieval system using web
technologies like PHP and MySQL.

ALGORITHM:

Step1: Design the database schema for the information retrieval system. Determine the
tables, fields, and relationships between the tables.

Step2: Create a database using MySQL and populate it with sample data.

Step3: Design the user interface for the search feature. This may involve creating an
HTML form where users can enter search terms and submit the form to the server.

Step4: Write PHP code to handle the user input from the search form. The PHPcode
should connect to the MySQL database, retrieve the relevant data based on the user
input, and display the results to the user.

Step 5: Implement a ranking algorithm to sort the search results by relevance. This may
involve calculating as core based on factors like the frequency of these arch terms in
the database and the proximity of the search terms to each other.

Step6: Implement pagination to display search results across multiple pages.

Step7: Add security measures to prevent SQL injection attacks and other security
vulnerabilities.

Step 8: Test the system thoroughly to ensure that it works as expected.

Step9: Deploy the system to a web server and make it accessible to users.

Step10:Monitor the system for performance and security issues, and make updates as
needed to improve the system over time.

25
PROGRAM:

1. Create a MySQL database and table to store the information we want to retrieve:

CREATEDATABASEexample_db;

USE example_db;

CREATETABLEexample_table (
idINT(6)UNSIGNEDAUTO_INCREMENTPRIMARYKEY, name
VARCHAR(30) NOT NULL,
emailVARCHAR(50)NOTNULL,
phoneVARCHAR(20)NOTNULL
);

2. Create a PHPscript to connect to the database and retrieve the information:

<?php
//Connecttodatabase
$servername="localhost";
$username="username";
$password="password";
$dbname="example_db";

$conn=newmysqli($servername,$username,$password,$dbname);

//Checkconnection
if($conn->connect_error){
die("Connectionfailed:".$conn->connect_error);
}

//Retrieveinformationfromdatabase
$sql="SELECT*FROMexample_table";
$result=$conn->query($sql);

//Closedatabaseconnection
$conn->close();
?>

26
3. Create a web interface using HTML and CSS to display the retrieved information:
<!DOCTYPEhtml>
<html>
<head>
<title>InformationRetrievalSystem</title>
<style>
table{
border-collapse:collapse;
width: 100%;
}
th,td{
text-align:left;
padding: 8px;
}
tr:nth-child(even)
{ background-
color:#f2f2f2;
}
</style>
</head>
<body>
<h1>InformationRetrievalSystem</h1>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<?php
//Outputretrievedinformationintablerows if
($result->num_rows > 0) {
while($row=$result->fetch_assoc()){ echo
"<tr>";
echo"<td>".$row["id"]."</td>";
echo"<td>".$row["name"]."</td>";
echo"<td>".$row["email"]."</td>";
echo"<td>".$row["phone"]."</td>";
echo "</tr>";
}
}else{
echo"0results";
}
27
?></table>

28
</body>
</html>

OUTPUT:

ID |Name |Email |Phone

1 |JohnDoe|[email protected] |555-1234
2 |JaneDoe|[email protected] |555-5678
3 |BobSmith|[email protected] |555-9876

RESULT:
Thus the given program Creation of retrieval System using web, PHP,and MySQL
have been executed successfully and the output got verified.

29
EX.NO:7 CREATION OF INFORMATION RETREIVELSYSTEM
USING WEB, PHP, AND MYSQL

Date:

AIM:

The aim of creating a Personal Information System (PIS) is to provide individuals


with a centralized platform to manage their personal information securely
And conveniently.

ALGORITHM:

1. Define the data types to be included in the PIS such as personal details(name, dateof
birth, contact details, etc.), education details, work experience, financial information,
medical history, etc.

2. Design the user interface for the PIS. The interface should be intuitive and user-
friendly.ItshouldprovideeasynavigationandaccesstodifferentsectionsofthePIS.

3. Develop a secure login system with multi-factor authentication to protect the


user's data from unauthorized access.

4. Create a database to store user data. The database should be secure, scalable, and
easily accessible. Use encryption and hashing techniques to secure the data.

5. Implement data validation and verification methods to ensure the accuracy


and integrity of the data entered by the user.

6. Create an analytics engine to generate insights and reports based on the user's
data. This engine can provide valuable information on the user's spending habits,
health status, career progress, etc.

7. Enable data sharing with trusted third-party services if required. The user should
have full control over what data is shared and with whom.

8. Providedatabackupandrecoverymechanismstoensurethattheuser'sdatais not lost in


case of hardware failure or other unforeseen events.

9. TestthePISthoroughlytoensurethatitmeetstherequirementsandspecifications.

10. Rollout the PIS and provide ongoing support and maintenance to ensure its
smooth operation.

30
PROGRAM:

1. Databasesetup:
StartbycreatingaMySQLdatabaseandatable named "users".The"users"tablewill store the
user's personal information.

CREATEDATABASEpersonal_info; USE

personal_info;

CREATETABLEusers(
idINT(11)NOTNULLAUTO_INCREMENTPRIMARYKEY, name
VARCHAR(255) NOT NULL,
addressVARCHAR(255)NOTNULL,
phone VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL
);

2. HTMLform:
Create an HTML form that allows users to input their personal information.

<formaction="add_user.php"method="post">
<label>Name:</label>
<inputtype="text"name="name"required>
<label>Address:</label>
<inputtype="text"name="address"required>
<label>Phone:</label>
<inputtype="text"name="phone"required>
<label>Email:</label>
<inputtype="email"name="email"required>
<buttontype="submit">Submit</button>
</form>

31
3. PHP script to add user:

CreateaPHPscriptnamed"add_user.php"thataddsthe user's informationtothe"users" table


in the database.

<?php
//connecttothedatabase
$servername="localhost";
$username="username";
$password="password";
$dbname="personal_info";

$conn=mysqli_connect($servername,$username,$password,$dbname);

//checkconnection
if (!$conn) {
die("Connectionfailed:".mysqli_connect_error());
}

//insertuserdataintothedatabase
$name=$_POST['name'];
$address=$_POST['address'];
$phone=$_POST['phone'];
$email=$_POST['email'];

$sql="INSERTINTOusers(name,address,phone,email)VALUES('$name',
'$address', '$phone', '$email')";

if (mysqli_query($conn, $sql))
{ echo"Useraddedsuccessfully";
}else{
echo"Error:".$sql. "<br>".mysqli_error($conn);
}

mysqli_close($conn);
?>

32
4. PHP script to display user information:

CreateaPHPscriptnamed"view_users.php"thatdisplaysallusers'informationfrom the
"users" table in the database.

<?php
//connecttothedatabase
$servername="localhost";
$username="username";
$password="password";
$dbname="personal_info";

$conn=mysqli_connect($servername,$username,$password,$dbname);

//checkconnection
if (!$conn) {
die("Connectionfailed:".mysqli_connect_error());
}

//getallusersfromthedatabase
$sql="SELECT*FROMusers";
$result=mysqli_query($conn,$sql);

//displayuserdata
if (mysqli_num_rows($result) > 0)
{ while($row=mysqli_fetch_assoc($result))
{ echo "Name: " . $row["name"]. "<br>";
echo"Address:".$row["address"]."<br>";
echo"Phone:".$row["phone"]."<br>";
echo"Email:".$row["email"]."<br><br>";
}
}else{
echo"Nousersfound.";
}
mysqli_close($conn);
?>

33
OUTPUT:

RESULT:
Thus the given program Creation of Personal Information System have been
executed successfully and the output got verified.

34

You might also like