Scribd
Upload
157 views

web essentials lab manual (1to5)expertiments

web essentials lab manual

Uploaded by

ithod
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
157 views

web essentials lab manual (1to5)expertiments

web essentials lab manual

Uploaded by

ithod
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/ 22

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

DEPARTMENTOF INFORMATION TECHNOLOGY

IT3401-WEB ESSENTIALS

LABORATORY

IV – SEMESTER

1
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 Year 2022– 2023.Submitted
for the University Practical Examination held on

STAFF-IN-CHARGE HEAD OF THE DEPARTMENT

INTERNALEXAMINER EXTERNALEXAMINER
CONTENTS

DATE EX.NO LISTOFEXPERIMENTS PAGE SIGN


NO
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.


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>
OUTPUT:

RESULT:
Thus the Creation of inter active websites – Design using HTML and
authoring tools have been executed successfully and the output got
verified.
EX.NO:2 FORMVALIDATIONUSINGJAVASCRIPT
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. Get 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 them
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.


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>
</html>

OUTPUT:

RESULT:

Thus the Validation form using Java script have been executed
successfully and the output got verified.
EX.NO:3 CREATIONOFSIMPLEPHPSCRIPTS
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
into the website or application as needed.
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>
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.
EX.NO:4 HANDLINGMULTIMEDIACONTENTINWEBSITES
Date:

AIM:

The aim of handling multi media 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


properlyondifferentdevicesandscreensizes.Thisincludesusingresponsive 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 ttags
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.
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>
OUTPUT:

RESULT:
Thus the Handling Multimedia content in websites has been executed successfully
and the output got verified.
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 servlet 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. DeploythewebapplicationtoaserverandtesttheHTMLformbysubmittingdata and
verifying that the servlet is invoked, the data is processed correctly, and the response
is displayed back to the user.
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>
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>");
}
}
OUTPUT:
ii) Session tracking using hidden form fields and session tracking for a hit count

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 extendsHttpServlet.

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

"hitCount" attribute from the session.

Step3:Ifthe"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.

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>");
}
}
OUTPUT:

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

You might also like