KEMBAR78
Web Essential Lab | PDF | Websites | World Wide Web
0% found this document useful (0 votes)
19 views39 pages

Web Essential Lab

The document outlines the vision and mission of the PERI Institute of Technology and its Computer Science and Engineering department, emphasizing quality education and industry readiness. It details program outcomes for engineering students, including knowledge application, problem analysis, and ethical practices. Additionally, it provides examples of projects such as creating interactive websites, form validation using JavaScript, and session tracking using hidden form fields.

Uploaded by

Mubeena Queen
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
0% found this document useful (0 votes)
19 views39 pages

Web Essential Lab

The document outlines the vision and mission of the PERI Institute of Technology and its Computer Science and Engineering department, emphasizing quality education and industry readiness. It details program outcomes for engineering students, including knowledge application, problem analysis, and ethical practices. Additionally, it provides examples of projects such as creating interactive websites, form validation using JavaScript, and session tracking using hidden form fields.

Uploaded by

Mubeena Queen
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/ 39

PERI Institute of Technology

Department of Computer Science and Engineering


VISION AND MISSION OF THE INSTITUTION
Vision:
PERI Institute of Technology visualizes growing in future to an internationally recognized
seat of higher learning in engineering, technology & science. It also visualizes being a
research
incubator for academicians, industrialists and researchers from across the world, enabling
them to
work in an environment with the sophisticated and state of the art equipment and amenities
provided
at the institute.
Mission:
In the process of realization of its Vision, PERIIT strives to provide quality technical
education at affordable cost in a challenging & stimulating environment with state-of-the-art
facilities
and a global team of dedicated and talented academicians, without compromising in its core
values
of honesty, transparency and excellence.
VISSION AND MISSION OF THE DEPARTMENT
Vision:
The vision of the department is to prepare industry-ready competent professionals with moral
values by imparting scientific knowledge and skill-based education.
Mission:
To provide exposure of latest tools and technologies in the broad area of computing.
To promoter search-based projects/activities in the emerging area soft technology.
ToenhanceIndustryInstituteInteractionprogramtogetacquaintedwithcorporateculture
and to develop entrepreneurship skills.
To induce ethical values and spirit of social commitment
PROGRAM OUTCOMES (POs)
1 Engineering knowledge: Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to the solution of complex engineering
problems.
2 Problem analysis: Identify, formulate, review research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
3 Design/development of solutions: Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.
4 Conduct investigations of complex problems: Use research-based knowledge
and research methods including design of experiments, analysis and interpretation of data,
and synthesis of the information to provide valid conclusions.
5 Modern tool usage: Create, select, and apply appropriate techniques, resources, and
modern engineering and IT tools including prediction and modeling to complex engineering
activities with an understanding of the limitations.
6 The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.
7 Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and need
for sustainable development.
8 Ethics: Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.
9 Individual and team work: Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
10 Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and
write effective reports and design documentation, make effective presentations, and give and
receive clear instructions.
11 Project management and finance: Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.
12 Life-long learning: Recognize the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological change.
EX NO:1 CREATION OF INTERACTIVE WEBSITE – DESIGN USING
DATE: HTML AND AUTHORING TOOLS

AIM:
The aim of this project is to create an interactive 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 Dreamweaver or
WordPress,to create the website.
4. Use HTML to design the page of the website.
5.Add interactive element, 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 web hosting service.
PROGRAM:
<DOCTYPE html>
<html>
<head>
<title>Interactive Webpage</title>
<style>
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=text] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Welcome to My Interactive Webpage!</h1>
<p>Click the button bellow to see a message:</p>
<button onclick=”alert(‘Hello World!’)”>Click Me</button>
<form>
<label for=”name”>Enter Your Name:</label>
<input type=”text” id=”name” name=”name”><br><br>
<button onclick=”alert(‘Hello’+
document.getElementByID(‘name’).value)”>Say Hello</button>
</form>
</body>
</html>
OUTPUT:

RESULT :
Thus the Creation of interactive Web sites -Design using
HTML and authoring tools have been executed successfully and the
output got verified.
EX.NO:2 FORM VALIDATION USING JAVASCRIPT
Date:

AIM:
The aim of form validation using JavaScript is to ensure that
user-submitted data 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 experiences.

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
event.
3. Inside the event listener function, prevent the default form
submission behavior using event.preventDefault().
4. Retrieve the values of the form fields using JavaScript and
validate then 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:

<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
<script>
function validateForm() {
var name = document.
forms[“myForm”][“name”].value;
var email= document.
forms[“myForm”][“email”].value;

if (name ==””) {
alert(“Name must be filled out”);
return false;
}
if (email ==””) {
alert(“Email must be filled out”);
return false;
}
if (email.indexOf(“@”) == -1 || email.
indexOf(“.”) == -1) {
alert(“Please enter a valid email
address”);
return false;
}
}
</script>
</head>
<body>
<hl>Form Validation Example</h>
<form name=”myForm” onsubmit=”return validateForm()”>
<lable for=”name”>Name:</lable>
<input type=”text” id=”name”name=”name”><br><br>
<label for=”email”>Email:</label>
<input type=”text”id=”email”name=”email”><br><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
OUTPUT:

RESULT:
Thus the validation form using javascript have been executed
successfully and the output got verified.
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.

ALGORITHM:
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 extention
4. Start with the PHP opening tag: Begin the PHP script with
the opening <?php tag
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 message and debugging tools to identify
and fi 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:
<!DOCTYPE html>
<html>
<head>
<title>Simple PHP Script</title>
</head>
<body>
<h1>Current Date and Time</h1>
<?php echo”The current date and time is:”.date(“Y-m-d
H:i:s”);?>
</body>
</html>
OUTPUT:

Current Date and Time


The current date and time is: 2022-11-11 14:45:30

RESULT:
Thus the Creation of simple PHP scripts have been executed
successfully and the output got verified.
EX.NO:4 HANDLING MULTIMEDIA CONTENT
DATE: IN WEBSITES

AIM:
The aim of handling multimedia content in web sites is to ensure
that user 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 websites, such as images, videos, audio and animations.
2. Optimize multimedia files for the web by compressing then
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 user 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 alt 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.

PROGRAM:
<!DOCTYPE html>
<html>
<head></head>
<body>
<img src=https://thumbs.dreamstime.com/b/beautiful-landscape-
dry-tree-branch-sun-flowers-field-against-colorful-evening-dusky-
sky-use-as-natural-background-backdrop-4819427.jpg” alt=”An
example image” /><br/><br/>
<video controls>
<source src=”video.mp4”type=”video/mp4”>
<source src=”video.webm”type=”video/webm”>
Your browser does not support the video tag.
</video>
<br/><br/>
<audio controls>
<source src=”audio.mp3” type=”audio/mpeg”>
<source src=”audio.ogg” type=”audio/ogg”>
Your browser does not support the audio tag.
</audio>
</body>
</html>
OUTPUT:

RESULT:
Thus the Handling Multimedia content in website have been executed
successfully and the output got verified.
EX.NO:5 i) INVOKING SERVLETS FROM HTML FORM
DATE:

AIM:
To write a java program to invoke servlets from HTML form.
PROCEDURE:
client.html:
(1) Create a web page using HTML form that contains the fields such
as text, password and one submit button.
(2) Set the URL of the server as the value of form’s action attribute.
(3) Run the HTML program.
(4) Submit the form data to the server.
server.java:
(1) Define the class server that extends the property of the class
HttpServlet
(2) Handle the request from the client by using the method service()
of HttpServlet class.
(3) Get the parameter names from the HTML form by using the
method getParameterNames().
(4) Get the parameter values from the HTML forms by using the
method getParameter().
(5) Send the response to the client by using the method of PrintWriter
class
PROGRAM:
MySrv.java:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MySrv extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML
4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
//Getting HTML parameters from Servlet
String username=request.getParameter("uname");
String password=request.getParameter("pwd");
if((username.equals("user")) && (password.equals("pswd")))
{
out.println(" <h1> Welcome to "+username);
}
else {
out.println(" <h1> Registration success ");
out.println(" <a href='./index.html'> Click for Home page </a>");
}
out.println(" </BODY>");
out.println("</HTML>");
out.close();
}
public void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
doPost( request,response);
}
}
Registration.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY bgcolor='#e600e6'>
<form action='./MySrv' method="post">
<center> <h1> <u> Login Page </u></h1>
<h2> Username : <input type="text" name="uname"/>
Password : <input type="password" name="pwd"/>
<input type="submit" value="click me"/>
</center>
</form>
</body>
</HTML>
web.xml:
<web-app>
<servlet>
<servlet-name>MySrv</servlet-name>
<servlet-class>MySrv</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MySrv</servlet-name>
<url-pattern>/MySrv</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
OUTPUT:
RESULT:
Thus the java program to invoke servlets from HTML form
has been executed successfully.
ii) SESSION TRACKING USING HIDDEN FORM FIELDS

AIM:
To write a Java Program for Session Tracking Using Hidden Form
Fields. This servlet demonstrates session tracking using hidden form
fields by displaying the shopping cart for a bookworm. Note that, if
you try this servlet, the buttons at the bottom of the page it generates
don't take you anywhere real.
PROCEDURE:
1. Create a web page using HTML form that contains the fields such
as text, password and one
submit button.
2. Set the URL of the server as the value of form’s action attribute.
3. Ask if the user wants to add more items or check out.
4. Include the current items as hidden fields so they'll be passed on
and submit to self.

PROGRAM:
register.html:
<html>
<body bgcolor = "cyan">
<center>
<h1>WELCOME TO REGISTRATION PAGE</h1>
<form action="./registerone" METHOD="post">
Name: <input type="text" name = "name"><br><br>
Password: <input type="password" name="password"><br><br>
PROFESSION:
<select name="profession">
<option value="engineer">ENGINEER</option>
<option value="teacher">TEACHER</option>
<option value="businessman">BUSINESSMAN</option>
</select><br><br>
<input type="submit" value="REGISTER">
</form>
</center>
</body>
</html>
web.xml
<web-app>
<welcome-file-list>
<welcome-file>register.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>RegistrationServletOne</servlet-name>
<servlet-class>RegistrationServletOne</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegistrationServletOne</servlet-name>
<url-pattern>/registerone</url-pattern>
</servlet-mapping>
<servlet>

<servlet-name>RegistrationServletTwo</servlet-name>
<servlet-class>RegistrationServletTwo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RegistrationServletTwo</servlet-name>
<url-pattern>/registertwo</url-pattern>
</servlet-mapping>
</web-app>

RegistrationServletOne.java:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegistrationServletOne extends HttpServlet
{
public void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException
{
String name = request.getParameter("name");
String password = request.getParameter("password");
String profession = request.getParameter("profession");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body bgcolor = wheat>");
out.println("<center>");
out.println("<h1>COMPLETE THE REGISTRATION</h1>");
out.println("<form action = ./registertwo method = post");
out.println("<input type = hidden name = name value =" + name +
">");
out.println("<input type = hidden name = password value =" +
password + ">");
out.println("<input type = hidden name = profession value =" +
profession + ">");
out.println("EMAIL ID:<input type =text name = email><br><br>");
out.println("PHONE NO:<input type =text name = cell><br><br>");
out.println("<input type =submit value=registernow>");
out.println("</center>");
out.println("</body></html>");
out.close();
}
}
RegistrationServletTwo.java
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RegistrationServletTwo extends HttpServlet
{
public void doPost(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException
{
String name = request.getParameter("name");
String password = request.getParameter("password");
String profession = request.getParameter("profession");
String email = request.getParameter("email");
String cell = request.getParameter("cell");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body bgcolor = wheat>");
out.println("<center>");
out.println("<h1>REGISTRATION SUCCESSFUL..........</h1>");
out.println("</center>");
out.println("</body></html>");
out.close();
}
OUTPUT:
RESULT:
Thus the Java program for Session Tracking using hidden
form fields has been executed successfully.
EX.NO:6 CREATION OF INFORMATION RETREIVEL
DATE: SYSTEM USING WEB,PHP,AND MYSQL

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

ALGORITHM:
Step:1 Design the database schema for the information retrieval
system.Determine the tables,fields and relationship between the
tables.
Step:2 Create a database using MySQL and populate it with sample
data.
Step:3 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.
Step:4 Write PHP code to handle the user input from the search form.
The PHP code 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 a score based on factors like
the frequence of the search terms in the database and the proximity of
the search terms to each other.
Step:6 Implement pagination to display search result across multiple
pages.
Step:7 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.
Step:9 Deploy the system to a web server and make it accessible to
users.
Step:10 Monitor the system for performance and security issues and
make updates as needed to improve the system over time.

PROGRAM:
1.Create a MySQL database and table to store the information we
want to retrieve:
CREATE DATABASE
example_db;USE example_db;

CREATE TABLE example_table( id INT(6) UNSIGNED


AUTO_INCREMENT PRIMARY KEY,name VARCHAR(30) NOT
NULL,email VARCHAR(50) NOT NULL,phone VARCHAR(20)
NOT NULL);

2.Create a PHP script to connect to the database and retrieve the


information:
<?php
// Connect to database
$servername = “localhost”;
$username=”username”;
$password=”password”;
$dbname=”example_db”;
$conn=new mysqli($servername,$username,$password,$dbname);
//Check connection
if($conn->connect_error) {
die(“Connection failed:”.$conn->connect_error);
}
//Retrieve information from database
$sql=”SELECT * FROM example_table”;
$result=$conn->query($sql);
//Close database connection
$conn->close();
?>

3.Create a web interface using HTML and CSS to display the


retrieved information:
<!DOCTYPE html>
<html>
<head>
<title>Information Retrieval System</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>Information Retrieval System</h1>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<?php
// Output retrieved information in table rows
if($result->num_row >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 “0 results”;
}
?></table>
</body>
</html>

OUTPUT:

ID | Name | Email | Phone


………………………………………………………….
1 | John Doe | johndoe@example.com | 555-1234
2 | Jane Doe | janedoe@example.com | 555-5678
3 | Bob Smith | bob.smith@example.com | 555-9876

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

You might also like