KEMBAR78
WT Manual With Code | PDF | Html | Html Element
Scribd
Upload
74 views110 pages

WT Manual With Code

Uploaded by

akx0094
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
74 views110 pages

WT Manual With Code

Uploaded by

akx0094
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/ 110

STES’s

RMD Sinhgad School of Engineering,


Warje-58

Web Technology Lab


Department of Computer Engineering TE (2019 Course)
SINHGAD TECHNICAL EDUCATION SOCIETY’S
RMD SINHGAD SCHOOL OF ENGINEERING
Warje, Pune 411058
Department of Computer Engineering

LABORATORY MANUAL
AY: 2022-23

Web Technology Lab

TE Computer
Engineering Semester –II
Subject Code - 310257

TEACHING SCHEME CRED EXAMINATIO


IT N
Practical: 2 Hrs / Week 01 TW: 25 Marks
Oral: 25 Marks

Prepared By:

Mrs. Madhuri S. Patil


(Assistant Professor, Department of Computer Engineering)
CONTENTS

List of Assignment

1. Case study
Before coding of the website, planning is important, students should visit 4different
websites (Min. 5) for the different client projects and note down the evaluation results for
these websites, either good website or bad website
2. Design and develop any suitable web application using HTML, CSS.
3. Design and develop any suitable web application using XML and CSS.
4. Design and develop any suitable web application using HTML, Java Script for form
validation.
5. Design and develop any suitable web application using JSP, Servlet and
MySQL(Backend)
6. Add dynamic web application essence using PHP, HTML and MySQL.
7. Add dynamic web application essence using PHP, AJAX and MySQL.
8. Design and develop any web application using Struts framework.
9. Design and develop any web application using AngularJS.
10. Design and implement a business interface with necessary business logic for any web
application using EJB.
11. Mini Project
Assignment No:1 Date:

Title: Case Study

Sign: Remark:
ASSIGNMENT 1
TITLE:
Before coding of the website, planning is important,students should visit different websites (Min. 5) for the different client
projects and note down the evaluation results for these websites, either good website or bad website

PROBLEM STATEMENT:
Sr Website Purpose of Things Things Overall
. URL Website liked disliked in evaluation
N in the the website of the
o. website website
(Good/Bad
)

SOFTWARE & HARDWARE REQUIREMENTS: Notepad, Browser.

OUTCOME:

THEORY-CONCEPT:

CONCLUSION / ANALYSIS:

OUTPUT:
Assignment No:2 Date:

Title: Design and develop any suitable web application using


HTML, CSS

Sign: Remark:
ASSIGNMENT 2
TITLE:
Design and develop any suitable web application using HTML, CSS.

OBJECTIVES:
1. Understand about basic concepts of html
2. Understand the basic concepts of XML
3. Understand the basic concepts of CSS

PROBLEM STATEMENT:
Write a program to design registration form for students by using HTML and CSS

OUTCOME
Students will be able to,
1. Design static webpage using HTML.
2. Apply CSS to HTML pages.

SOFTWARE & HARDWARE


REQUIREMENTS Software: Notepad, Browser

THEORY-CONCEPT

HTML: HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages 
HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page

CSS:
CSS stands for Cascading Style Sheet. It is nothing, but design language intended to simplify the
process of making web pages presentable.CSS handles the feel and look part of a web page. By using
CSS, one can control the color of text, style of fonts, spacing between paragraphs, layout designs.
CSS is easy to learn, easy to understand and it provides powerful control on presentation of an HTML
document.

Advantages of CSS:
It saves the time, Pages load faster, Easy maintenance, Superior styles to HTML, Multiple Device
Compatibility, Global web standards, Offline Browsing, Platform Independence. CSS3 Modules:
CSS3 Modules are having old CSS specifications as well as extension features.
 Box Model
 Selectors
 Background
 Border
 Image Values and Replaced Content
 Text Effects
TECHNOLOGY / TOOL:
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
 HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements. An inline CSS is used to apply a
unique style to a single HTML element.
Ex. <h1 style="color:blue;">This is a Blue Heading</h1>
Internal - by using a <style> element in the <head> section. An internal CSS is used to define a
style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.
Example:<style>
body {background-color: powderblue;} h1
{color: blue;}
p {color: red;}
</style>
 External - by using an external CSS file. An external style sheet is used to define the style for
many HTML pages. With an external style sheet, you can change the look of an entire web site, by
changing one file!To use an external style sheet, add a link to it in the
<head> section of the HTML page.
Example: <link rel="stylesheet" href="styles.css">
 Use the HTML <head> element to store <style> and <link> elements
 Use the CSS color property for text colors
 Use the CSS font-family property for text fonts
 Use the CSS font-size property for text sizes
 Use the CSS border property for borders
 Use the CSS padding property for space inside the border
 Use the CSS margin property for space outside the border

DESIGN / EXECUTION STEPS:


Following steps are used to Create and Execute web applications,
1. Write the HTML code in notepad and save with .html extension.
2. Write the CSS code in notepad and save with .css extension.
3. Import CSS file in HTML page.
4. Open HTML page in the browser.

CONCLUSION/ANALYSIS:
Hence, we have designed static web pages using HTML and CSS.

CODE:

Display.css
<html>
<head>
<title> display</title>
</head>
<body>
<h1 style="color:blue;margin-left:30px;"> You have submitted the form successfully </h1>
</body>
</html>
samp.css
.con
{
width:400px; height:400px;
background-color:white;
color:blue;
padding:0px 10px 0px 10px;
margin:auto;
}
.main
{
width:400px;
height:80px;
float:left;
padding:60px 10px 10px10px;
margin: auto;
}
.con1
{
width:200px;
height:30px;
float:left;
margin:auto;
padding:0px 0px 0px0px;
}
.con2
{
width:150px;
height:30px;
float:left;
margin:10px 10px 10px10px;
padding:0px 0px 0px0px;
}

#terms
{

color:blue;
padding-left:400px;
}
two.html

<html>
<head>
<title>regform</title>
<link href="samp.css"
rel="stylesheet"></link> </head>

<body>

<div class="con">
<form action="display.html" method="get" align="center">

<div class="con2">
<imgsrc="/home/sanyuja/Desktop/b.jpg" width=380px height=100px alt="img">
</div>
<div class="main">
<table align="center">
<tr>
<td><h1>Welcome to Registration
Page</h1></td></tr> </table>

<div class="con1">
<table align="center">
<tr>
<td>Full Name:</td>
<td><input type="text" value=""></input></td>
</tr>

<tr>
<td>Select Gender</td>
<td><input type="radio" name="gender"/>Female</input>
<input type="radio" name="gender"/>Male</input></td> </tr>
<br>
<tr>
<td>Class</td>
<td><input type="text" value=""></input></td>
</tr>
<br>
<tr>
<td>Skills</td>
<td><input type="checkbox" value="">C </input>
<input type="checkbox" value="">C++</input> <input
type="checkbox" value="">JAVA</input> <input
type="checkbox" value="">PHP</input> <input
type="checkbox" value="">AJAX</input></td>
</tr>
<br>
<tr>
<td>Department</td>
<td>
<select>
<option value="comp">COMPUTER</option> <option
value="it">Information Technology</option>
<option value="it">Electronics & Telecomunications</option>
<option value="mech">Mechnical</option>
<option value="civil">Civil</option>
</select>
</td>

</tr>

<tr>
<td>email:</td>
<td><input type="text" value=""></input></td>
</tr>
<tr>
<td>phone:</td>
<td><input type="text" value=""></input></td>
</tr>

<tr></tr><tr></tr>
</table>

<table align="center">
<tr>
<td><input type="submit" value="SUBMIT"></td>
<td><input type="reset" value="CANCEL"></td>

</td>
</tr>
</table>

</div>
</div>
</form>

</div>
<br><br><br><br>

<div id="terms">
<span>By clicking Submit you agree to our Terms &
Conditions</span> </div>
</body>

</html>

OUTPUT:
Assignment No:3 Date:

Title: Design and develop any suitable web application using


XML and CSS.

Sign: Remark:
ASSIGNMENT 3
TITLE:
Design and develop any suitable web application using XML and CSS.

PROBLEM STATEMENT:
Write a program to design book catalog by using XML and CSS to display tile, author, price and
year of the book.

OUTCOMES:
Students will be able to,
1. Design static webpage using XML.
2. Apply CSS to XML pages.

SOFTWARE & HARDWARE REQUIREMENTS:


Software: Notepad, Any Browser

THEORY:
XML stands for Extensible Markup Language. It is nothing but the text-based markup
language which is derived from Standard Generalized Markup Language(SGML).
XML tags identify the data and are used to store and organize the data, rather than specifying how to
display it like HTML tags, which are used to display the data. XML is not going to replace HTML in the
near future, but it introduces new possibilities by adopting many successful features of HTML.
There are three important characteristics of XML that make it useful in a variety of systems and solutions

● XML is extensible XML allows you to create your own self-descriptive tags, or language, that suits your applicati

● XML carries the data, does not present it XML allows you to store the data irrespective of how it will be presented

●
XML is a public standard XML was developed by an organization called the World Wide Web Consortium (W3C

TECHNOLOGY/TOOL:
The XML document have an XML declaration, but it is optional, and it is written as <? xml version = "1.0" encoding = "U
Where version is nothing but the version of an XML document and UTF specifies the
character encoding used in the document.
Each XML-element needs to be closed either with start or with end elements as shown below
<element>………</element>
An XML document can have only one root element.
<root>
<x>...</x>
<y>...</y>
</root>

XML Attributes:
Using a name/value pair, an attribute specifies a single property for an element. An XML element can have one or more at
http://www.google.com/">XMLTutorial</a>
Here href is the attribute name and http://www.google.com/ is attribute value.

DESIGN/EXECUTION STEPS:
Following steps are used to Create and Execute web applications,
1. Write the XML code in notepad and save with .xml extension.
2. Write the CSS code in notepad and save with .css extension.
3. Import CSS file in XML page.
4. Open XML page in the browser.

CONCLUSION/ANALYSIS:
Hence, we have designed static web pages using XML and CSS.

CODE:

<?xml version="1.0" encoding="UTF-8"?>


<?xml-stylesheet type="text/css" href="book.css"?>
<CATLOG>
<BOOK>
<TITLE> DATABASE MANAGEMENT SYSTEM</TITLE>
<AUTHOR>ABC</AUTHOR>
<YEAR>1992</YEAR>
<PRICE>3000</PRICE>
</BOOK>
<BOOK>
<TITLE> WEB TECHNOLOGY</TITLE>
<AUTHOR>XYZ</AUTHOR>
<YEAR>1993</YEAR>
<PRICE>4000</PRICE>
</BOOK>
<BOOK>
<TITLE> DATA ANALYSIS</TITLE>
<AUTHOR>PPP</AUTHOR>
<YEAR>1997</YEAR>
<PRICE>7800</PRICE>
</BOOK>
</CATLOG>

BOOK {
Display: block; margin-left:0;
magin-bottom: 30pt;}
CATALOG {
Width:100%;
background-color: #ffffff;
} TITLE {
Color: ff0000; display:
block; font-size: 20pt;}
AUTHOR {
display: block; color:
#0000ff; font-size: 20pt;}
YEAR, PRICE {
Color:#00000;
Display: block;
Margin-left: 20pt;}

OUTPUT:
Assignment No:4 Date:

Title: Design and develop any suitable web application using


HTML, Java Script for form validation.

Sign: Remark:
ASSIGNMENT 4
TITLE:

Design and develop any suitable web application using HTML, Java Script for form validation.

OBJECTIVES:
1. Understand about basic concepts of JavaScript.
2. Use JavaScript for validation of data.

PROBLEM STATEMENT:
Write a program to design registration form for students by using HTML, CSS& Java Script and
perform following validations: all fields mandatory, phone number and email address validation.

OUTCOMES:
Students will be able to,
1. Design static webpage using HTML.
2. Apply JavaScript to HTML pages for validation of data.

SOFTWARE & HARDWARE REQUIREMENTS:


Software’s: Notepad, Any Browser

THEORY:
JavaScript is a programming language of HTML as well web. It is preferred for creating network-
centric applications.It is integrated and complimentary with Java. As JavaScript is integrated with
HTML it is very easy to implement. It is open as well as cross-platform.

Advantages:
The advantages of using JavaScript are
 It requires less server interaction
 Immediate feedback to the visitors
 Increased interactivity
 Richer interfaces

Validation:
When client enters the all necessary data and press the submit button form validation is done at server
side If data entered by a client is incorrect or missing,the server needs to send all data back to the client
and request for resubmission of form with correct information. This is really a lengthy process which
puts a lot of load(burden) on the server.
So, JavaScript provides a way to validate form's data on the client's side itself before sending it to the
web server. Form validation performs two functions-
 Basic Validation –First of all the form must be checked to make sure all the mandatory fields
are filled in. It would require just a loop through each field in the form and check for the data.

Data Format Validation Secondly, the data that is entered must be checked for correct format and its value. The code

DESIGN/EXECUTION STEPS:
Following steps are used to Create and Execute web applications, 1. Write
an HTML code in notepad and save with .html extension.
2. Write the function for validation of email id and phone no and enclosed this function in script.
3. Call this function on ‘onClick’ event of submit button.
4. Open HTML page in the browser.

CONCLUSION/ANALYSIS:
Hence, we applied validate the data using JavaScript.

CODE:

CSS

.one
{
width:400px; height:400px;
background-color:blue;

padding:0px,10px,0px,10px;
margin:auto;
border:solid; border-
color:black;

}
.main{}

JS

<html>
<head>
<title>Javascript</title>
</head>
<body>
<script language="JavaScript">

document.write("Student Registration Form"); document.write("<input


type="text" value=" "></input>");

</script>
</body>
</html>

HTML

<html>
<head>
<titel> </title>
<link href="ass4.css" rel="stylesheet"></link>
<script language="JavaScript">

function validateForm()
{
var x=document.forms["myForm"]
["fname"].value;
if(x=="")
{
alert("Enter the all details. ");
return false;
}

var x=document.forms["myForm"]
["mname"].value;
if(x=="")
{
alert("Enter the all details. ");
return false;
}

var x=document.forms["myForm"]
["lname"].value;
if(x=="")
{
alert("Enter the all details. ");
return false;
}

var y=document.forms["myForm"]
["add"].value;
if(y=="")
{
alert("Enter the all details. ");
return false;
}

var z=document.forms["myForm"] ["email"].value;


if(z=="")
{
alert("Enter the all details. ");
return false;
}

var a=document.forms["myForm"] ["ph"].value;


if(a=="")
{
alert("Enter the all details. ");
return false;
}

document.forms["myForm"].reset()
}
</script>
</head>
<body >
<center>
<div class="main">
<h1>Form Validation Using jQuery</h1>
<div id="form">
<p id="head"></p> <!-- This Segment Displays The Validation Rule -->

<form name="myForm" action="message.html" align="center"


onsubmit="return validateForm()" method="post" >

First Name: <input type="text" name="fname"><br><br> Middle


Name: <input type="text" name="mname"><br><br> Last Name:
<input type="text" name="lname"><br><br> Email: <input
type="email" name="email"><br><br> Phone:<input type="number"
name="ph"><br><br> Country:<select id='s'>
<option> </option>
<option>India</option>
<option>America</option>
<option>Australia</option>
<option>Sweden</option>
<option>Africa</option>

</select>

<br><br><br>
Address:<textarea rows="5" cols="25" value="g" required></textarea><br><br><br>
<br><input type ="submit" value="Submit" >

</form>

</div>
</center>
</body>
</html>
OUTPUT:
Assignment No:5 Date:

Title: Design and develop any suitable web application using


JSP, Servlet and MySQL(Backend)

Sign: Remark:
ASSIGNMENT 5

TITLE:
Design and develop any suitable web application using JSP, Servlet and MySQL(Backend)

OBJECTIVES:
1. Understand about basic concepts of html, CSS
2. Understand the basic functionalities of JSP
3. Having the knowledge of SQL query to create the database

PROBLEM STATEMENTS:
1. Design and Build Student Login Page using JSP, Servlet and MySQL.
2. Design and Build Employee Login Page using JSP, Servlet and MySQL.
.
OUTCOMES: Students will
be able to,
1. Develop a dynamic webpage using JSP, HTML and Servlet.
2. Write a server side java application called Servlet to catch the data sent from client,
process it and store it on database (MySQL).
3. Write a server side java application called JSP to catch form data sent from client and store
it on database (MySQL).

SOFTWARE NEEDED:
1. Any Operating System
2. JDK 7or later
3. Editors; Netbeans/Eclipse
4. Web browser
5. Tomcat 7 or later

THEORY – CONCEPT

Java Server Pages (JSP): It is a server side programming technology that is used to create dynamic
web-based applications. JSP have right to use the complete Java APIs, including the JDBC API to
access the databases.
It is a technology that helps software developers to create dynamic web pages based on HTML,
XML and other document types. It was released in 1999 by Sun Microsystems. It is just like a PHP and
ASP, but it uses the Java programming language.
A JSP element is a type of java servlet that is designed to accomplish the role of a user interface for a
java web application. Web developers write JSPs as text files that combine HTML or XHTML code,
XML elements, and rooted JSP actions and commands.
Using JSP, you can collect input from users through webpage forms, current records from a database
or another source and create web pages dynamically.
JSP tags can be used for different purposes, such as retrieving information from a database or
registering user preferences, accessing JavaBeans components, passing control between pages, and
sharing information between requests, pages etc.
Why we need JSP?
JSP is used for the design of dynamic web page and servlet is used to code the logic that is present i.e.
in the MVC (Model-View-Controller) architecture, the servlet is the controller and the JSP is the
view.

The JSP Architecture

Syntax of JSP:
JSP declarations is used to declare variables and methods as shown below,
<% text %>.

Servlet:
A Servlet is a server side program and written in Java. Servlet is a web component that is deployed on
the server for creating the dynamic web pages. A Java servlet is a Java program that extends the
capabilities of a server. Although servlets can respond to any types of requests, they most commonly
execute applications hosted on Web servers.
DESIGN / EXECUTION STEPS:
Following steps are used to Create and Execute web applications,
1. Design html and jsp files with an extension of.html and .jsp
2. Write database connection page using servlet
3. Set MySQL username, password and database name in database connection page
4. Start the Tomcat Server with port number
5. Open the browser and type localhost:8084

CONCLUSION / ANALYSIS:
Hence, we have performed the dynamic web application using JSP, Servlet and MySQL.

CODE:

Problem Statement: Design and Build Student Login Page using JSP, Servlet and MySQL.

Program:

Index.html Page:

<html>

<head>

<title>Start</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<center><h1 style="background-color:MediumSeaGreen;">Welcome To Sinhgad Academy Of


Engineering</h1></center><br><br>

<a href="Signin.html"><center><input type="button" value="Login" style="width:160px;font-


size:20pt;color:black;

background-color:MediumSeaGreen;"></center></a>
<br>

<a href="registration.html"><center><h2><input type="button"


value="Registration" style="width:160px;font-size:20pt;color:black;

background-color:MediumSeaGreen;"></h2></center></a>

<br><br>

</body>

</html>

Signin.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF- 8">


<title>Sign In JSP</title>

<%@ page import="java.sql.*" %>

<%@ page import="javax.sql.*" %>


<%@ page import="java.io.*" %>

</head>

<body>

<%

String user=request.getParameter("username"); String

pword=request.getParameter("password");

try{

Class.forName("com.mysql.jdbc.Driver");

Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/stud", "root",


"");

String sql="select * from reg where username=? and password=?";

PreparedStatement pst=conn.prepareStatement(sql); pst.setString(1,

user);

pst.setString(2,pword);

ResultSet rs=pst.executeQuery();

if(rs.next())

%>

<jsp:forward page="home.jsp"/>

<%

else

%>
<jsp:forward page="Signin.html"/>

<%

catch(Exception e){

System.out.println(e);

%>

</body>

</html>

Signin.html

<html>

<head>

<title>Login Page</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<form action="Signin.jsp" id="std" method="POST" >

<center>Username : <input type="text" name="username" id="user"


style="width:200px;font-size:15pt;" ><br><br></center>

<center>Password : <input type="password" name="password" id="pass"


style="width:200px;font-size:15pt;" ></center><br>
<center><input type="submit" name="login" value="Login" id="sub"
style="width:160px;font-size:20pt;color:black;

background-color:grey;">&ensp;&ensp;&ensp;&ensp;

<input type="reset" value="Reset" style="width:160px;height:38px;font-


size:20pt;color:black; background-color:grey;"></center>

</form>

</body>

</html>

home.jsp

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Student Information</title>
<%@ page import="java.sql.*" %>

<%@ page import="javax.sql.*" %>

<%@ page import="java.io.*" %>

</style>

</head>

<body style="font-family:Veranda,sans-serif;">

<center>

<div class="header">Student Information</div>

<br><br><br>

<%

try{

Class.forName("com.mysql.jdbc.Driver");

Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/stud", "root",


"");

String sql="select * from info";

PreparedStatement pst=conn.prepareStatement(sql);

ResultSet rs=pst.executeQuery();

out.print("<table border=3px solid red>");

//width=\"100%\">

out.print("<tr style=\"background-color:#ff5b5b;color:white;\">");

out.print("<th colspan=\"5\">C3 Student Information</th>");

out.print("</tr>");

out.print("<tr>");

out.print("<th>Name</th>");

out.print("<th>Address</th>");
out.print("</tr>");

while(rs.next())

out.print("<tr>");

out.print("<td>");

out.print(rs.getString("name"));

out.print("</td>");

out.print("<td>");

out.print(rs.getString("address"));

out.print("</td>");

out.print("</tr>");

catch(Exception e)

System.out.println(e);

%>

<hr/>

<% %>

<a href="index.html" style="hover:green;"><button class="button logout">Logout</button></a>

<hr/>

</body>

</html>
registration.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01


Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Sign Up JSP</title>

</head>

<body>

<%@ page import="java.sql.*" %>

<%@ page import="javax.sql.*" %>

<%@ page import="java.io.*" %>

<%
String name=request.getParameter("name");
String gender=request.getParameter("gender");

String email=request.getParameter("email"); String

college=request.getParameter("college"); String

branch=request.getParameter("branch"); String

mobile=request.getParameter("mobile");

String username=request.getParameter("username");

String pass=request.getParameter("password");

System.out.println(name); try{

Class.forName("com.mysql.jdbc.Driver");

Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/stud", "root",


"");

String sql="insert into


reg(name,gender,email,college,branch,mobile,username,password) values(?,?,?,?,?,?,?,?)";

PreparedStatement pst=conn.prepareStatement(sql);

pst.setString(1, name);

pst.setString(2, gender);

pst.setString(3, email);

pst.setString(4, college);

pst.setString(5, branch);

pst.setString(6, mobile);

pst.setString(7, username);

pst.setString(8, pass);

pst.executeUpdate();
%>

alert('Registered Successfully!');
<jsp:forward page="Signin.html"/>

<%

catch(Exception e)

System.out.println(e);

%>

</body>

</html>

registration.html

<!DOCTYPE html>

<html>

<head>

<title>Registration</title>

</head>

<body>

<center><h1 style="background-color:Tomato;">Student Registration</h1></center>

<hr />
<br>

<form id="fr" action="registration.jsp" method="POST">

<br>

<center> Name* :&ensp; &ensp; <input type="text" name="name" id="name" placeholder="Enter


name" style="width:200px;font-size:12pt;color:black; " ></center>

<br><br>

<center>Gender Type*:&ensp;&ensp; <input type="radio" name="gender" value="male"


>Male&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;

<input type="radio" name="gender" value="female" >Female </center><br><br>

<center>Email id *:&ensp; <input type="text" name="email" id="email" placeholder="Enter email"


style="width:200px;font-size:12pt;color:black;" ></center>

<br><br>

<center>College *:&ensp;&ensp; <input type="text" name="college" id="college"


placeholder="Enter College" style="width:200px;font-size:12pt;color:black;"
></center>

<br><br>

<center>Branch *: &ensp;&ensp;<input type="text" name="branch" id="branch"


placeholder="Enter Branch" style="width:200px;font-size:12pt;color:black;" ></center>

<br><br>

<center>Mobile No *:<input type="text" name="mobile" id="mobile" placeholder="Enter Mobile


no" style="width:200px;font-size:12pt;color:black;" ></center>

<br><br>

<center>Username *: <input type="text" name="username" id="username"


placeholder="Enter username" style="width:200px;font-size:12pt;" ><br><br></center>

<center>Password *: <input type="password" name="password" id="password"


placeholder="Enter Password" style="width:200px;font-size:12pt;" ></center><br>
<center><input type="submit" value="Submit" style="width:100px;font-size:15pt;color:black;
background-color:blue;" >&ensp;

&ensp;&ensp;&ensp;

<input type="reset" value="Reset" style="width:100px;font-size:15pt;color:black; background-


color:blue;"></center>

<br><br>

<hr />

<center><p style="font-size:15pt;color:black;">(*) Field indicates field is mandatory!!</p></center>

</form>

</body>

</html>
Assignment No:6 Date:

Title: Add dynamic web application essence using PHP,


HTML and MySQL.

Sign: Remark:
ASSIGNMENT 6

TITLE:
Add dynamic web application essence using PHP, HTML and MySQL.

OBJECTIVES:
To understand the principles and methodologies of PHP web based applications
development process,

PROBLEM STATEMENT:
Design and develop dynamic web application using PHP and MySQL as a back-end for employee data
with insert, delete, view and update operations.

OUTCOMES:
Students should be able to,
1. Develop web based application using suitable client side and server side web technologies.
2. Develop solution to complex problems using appropriate method,
technologies, frameworks, web services and content management.

SOFTWARE & HARDWARE REQUIREMENTS


Software (Minimum Requirement:):
1. Ubuntu 64 bit / Windows XP.
2. XAMPP Server
Hardware (Minimum Requirement:):
Intel p4 Machine with 1GB ARM and 32GB HDD.

THEORY-CONCEPT
1. PHP:
The PHP Hypertext Preprocessor (PHP) began as a little open source venture that advanced as an ever
increasing number of individuals discovered how valuable it was. Rasmus Lerdorf released the
principal form of PHP route in 1994. PHP is a recursive acronym for "PHP: Hypertext Preprocessor".
PHP is a server side scripting dialect that is installed in HTML. It is utilized to oversee dynamic
substance, databases, session following, even form whole internet business locales. It is incorporated
with various prevalent databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and
Microsoft SQL Server.
PHP is pleasingly zippy in its execution, particularly when gathered as an Apache module on the Unix
side. The MySQL server, once began, executes even extremely complex questions with colossal outcome
sets in record-setting time.
PHP performs framework capacities, i.e. from documents on a framework it can make, open, read,
compose, and close them. PHP can deal with frames, i.e. accumulate information from records, spare
information to a document; through email you can send information, return information to the client.

To create and run PHP Web pages three fundamental parts should be introduced on your PC
framework.
● Web Server

● PHP Parser

● Database
MySQL:
● MySQL is the most famous Open Source Relational SQL Database
Management System.

● MySQL is outstanding amongst other RDBMS being utilized for creating different online
programming applications. MySQL is created, advertised and upheld by MySQL AB, which
is a Swedish organization. This instructional exercise will give you a fast begin to MySQL
and make you OK with MySQL programming.

What is a Database?

● A database is a different application that stores a gathering of information. Every


database has at least one unmistakable APIs for making, getting to, overseeing,
seeking and recreating the information it holds.

● Different sorts of information stores can likewise be utilized, for example, records on the
document framework or vast hash tables in memory yet information get composing would not
be so quick and simple with those kind of frameworks. These days, we utilize social database
administration frameworks (RDBMS) to store and oversee tremendous volume of
information. This is called social database since every one of the information is put away into
various tables and relations are set up utilizing essential keys or different keys known as
Foreign Keys.

MySQL Database:
MySQL is a quick, simple to-utilize RDBMS being utilized for some little and huge
organizations. MySQL is produced, showcased and upheld by MySQL AB, which is a Swedish
organization. MySQL is winding up so famous as a result of numerous great reasons:
 MySQL is discharged under an open-source permit. So you don't have anything to pay to
utilize it.
 MySQL is a capable program in its own particular right. It handles a huge subset of the
usefulness of the most costly and intense database bundles.
 MySQL utilizes a standard type of the outstanding SQL information dialect.
 MySQL takes a shot at many working frameworks and with numerous dialects
including PHP, PERL, C, C++, JAVA, and so forth.
 MySQL works rapidly and functions admirably even with extensive
informational indexes.
 MySQL is amicable to PHP, the most refreshing dialect for web advancement.
 MySQL underpins huge databases, up to 50 million lines or more in a table. The default
document measure restrain for a table is 4GB, yet you can expand this (if your working
framework can deal with it) to a hypothetical utmost of 8 million terabytes (TB).  MySQL is
adaptable. The open-source GPL permit enables developers to alter the MySQL programming to
fit their own particular surroundings.

1. Technology is to be used is PHP (PHP Hypertext Preprocessor) and tool XAMPP server is to be
used to execute PHP web application.
2. XAMPP server embeds the PHP, MySQL and phpmyadmin, these three tools must be
required to run php web application.

CONCLUSION/ANALYSIS
In this assignment, we have studied how to design and develop small web application using PHP
script, XAMPP server with apache server and MySQL as backend.
Problem Statement:Design and develop dynamic web application using PHP and MySQL as a
back-end foremployee data with insert, delete, view and update operations.

Code:

 db_connect.php

<?php

$conn=mysqli_connect('localhost','root','','assignment6');

if(mysqli_connect_errno())

{ echo 'Connection error';

?>

 index.php
<?php

session_start();

if(!isset($_SESSION['email']))

$_SESSION['email']='';

?>

<html>

<head><title>Home Page</title>

<style>

.button {
background-color:white;

color:black; padding:5px;

text-align:center;

padding:15px 30px;

transition-duration:0.4s;

border-radius:4px;

font-size:25px;

.top {

background-color:#ff5b5b;

color:white;

padding:5px; text-

align:center;

padding:15px 30px;

font-size:25px;

float:left; border:none;

width:50%;

</style>

</head>

<body style="font-family:Veranda,sans-serif;">

<div class="top_bar">

<a href="index.php"><button class="top">Home</button></a>

<a href="abt.php"><button class="top">About Us</button></a>

</div>
<center>

<a style="clear:left;" href="s_in.php"><button style="margin-top:10%;"


class="button s_in">Sign-in</button></a>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="s_up.php"><button class="button s_up">Sign-up</button></a>

</center>

</body>

</html>

 s_in.php
<html>

<head><title>Sign-in to your account</title>

<style>

.header { margin-

top:5px;

margin-bottom:10%;

border-left:2px solid #4CAF50;

border-top:2px solid #4CAF50; border-

right:2px solid #008CBA; border-

bottom:2px solid #008CBA;

padding:8px;

font-size:30px; text-

align:center;

.top {

background-color:#ff5b5b;

color:white;
text-align:center;

padding:15px 30px;

font-size:25px;

float:left; border:none;

width:50%;

margin-bottom:10px;

.button {

background-color:white;

color:black;

text-align:center;

padding:10px 15px;

transition-duration:0.4s;

border-radius:4px;

font-size:20px;

</style>

</head>

<body style="font-family:Veranda,sans-serif;">

<div class="top_bar">

<a href="index.php"><button class="top">Home</button></a>

<a href="abt.php"><button class="top">About Us</button></a>

</div>

<center>

<div style="clear:left;" class="header">Sign-in to your Account</div>


<form action="login_validate.php" method="POST">

<table>

<tr><td>Email:</td><td style="text-align:center;"><input type="text" id="email"


name="email" placeholder="Enter your email id" class="login"></td></tr>

<tr><td>Password:</td><td style="text-align:center;"><input type="password" id="pword"


name="pword" placeholder="Enter your password" class="login"></td></tr>

</table>

<br><br>

<button type="submit" name="submit" class="button s_in">Login</button>

&nbsp;&nbsp;&nbsp;&nbsp;

<button type="reset" name="reset" class="button reset">Reset</button>

</form>

</center>

</body>

</html>

 login_validate.php
<?php

require 'db_connect.php';

session_start();

$email=$_POST['email'];

$pword=$_POST['pword'];

$query="select * from registration_details where email='$email' AND pword='$pword' ";

$result=mysqli_query($conn,$query);

if(mysqli_num_rows($result)>0)

$_SESSION['email']=$email;

?>

<script>location.href="s_info.php";</script>
<?php

else {

?>

<script>alert('Please check email id or password');

location.href="s_in.php";

</script>

<?php

?>

 s_up.php
<html>

<head><title>Sign-up for a new account</title>

<style>

.top {

background-color:#ff5b5b;

color:white;

text-align:center;

padding:15px 30px;

font-size:25px;

float:left; border:none;

width:50%;

margin-bottom:10px;

.header { margin-

top:5px;
margin-bottom:5%;

border-left:2px solid #4CAF50;

border-top:2px solid #4CAF50; border-

right:2px solid #008CBA; border-

bottom:2px solid #008CBA;

padding:8px;

font-size:30px; text-

align:center;

.button {

background-color:white;

color:black; padding:10px

15px;

text-align:center; border-

radius:4px; transition-

duration:0.4s; font-

size:20px;

</style>

</head>

<body style="font-family:Veranda,sans-serif;">

<div class="top_bar">

<a href="index.php"><button class="top">Home</button></a>

<a href="abt.php"><button class="top">About Us</button></a>

</div>

<center>
<div style="clear:left;"class="header">Sign-up for a new account</div>

</center>

<div>

<form id="sign_up" action="reg_user.php" method="POST">

<center>

<table>

<tr><td>First Name:</td><td style="text-align:center;"><input type="text"


id="fname" name="fname" placeholder="Saad" class="info"></td></tr>

<tr><td>Last Name:</td><td style="text-align:center;"><input type="text"


id="lname" name="lname" placeholder="Shaikh" class="info"></td></tr>

<tr><td>Gender:</td><td style="text-align:center;"><input type="radio" name="gender"


id="mradio" value="Male" checked>Male &nbsp;&nbsp;&nbsp; <input type="radio"
name="gender" id="fradio" value="Female">Female</td></tr>

<tr><td>Age:</td><td style="text-align:center;"><input type="text" id="age"


name="age" placeholder="20" class="info"></td></tr>

<tr><td>Mobile No.:</td><td style="text-align:center;"><input type="text" id="mno"


name="mno" placeholder="123456789" class="info"></td></tr>

<tr><td>Address:</td><td style="text-align:center;"><input type="text" id="add"


name="add" placeholder="Ganga Savera" class="info"></td></tr>

<tr><td>Email ID:</td><td style="text-align:center;"><input type="email" id="email"


name="email" placeholder="saad@gmail.com" class="info"></td></tr>

<tr><td>Password:</td><td style="text-align:center;"><input type="text" id="pword"


name="pword" placeholder="********" class="info"></td></tr>

</table>

</center>

<br><br>

<center>

<button type="submit" class="button register">Register</button>

&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;
<button type="reset" class="button reset">Reset</button>
</center>

</form>

</div>

</body>

</html>

 reg_user.php
<?php

require 'db_connect.php';

$fname=$_POST['fname'];

$lname=$_POST['lname'];

$gender=$_POST['gender'];

$age=$_POST['age'];

$mno=$_POST['mno'];

$add=$_POST['add'];

$email=$_POST['email'];

$pword=$_POST['pword'];

$query="insert into
registration_detailsvalues('$fname','$lname','$gender','$age','$mno','$add','$email','$pword')";

if(mysqli_query($conn,$query))

?>

<script>alert('Registered Successfully!'); location.href="s_in.php";

</script>

<?php
}

else {

echo 'Error: '.mysqli_error($conn);

?>

 s_info.php
<?php

require 'db_connect.php';

session_start();

if($_SESSION['email']=='')

?>

<script>alert('Please login to the system first!');

location.href="s_in.php";</script>

<?php

else{

$query="select * from s_info";

$result=mysqli_query($conn,$query);

$info=mysqli_fetch_all($result,MYSQLI_ASSOC);

mysqli_free_result($result); mysqli_close($conn);

?>

<html>
<head><title>Student Information</title>
<style>

.header { margin-

top:5px;

margin-bottom:5%;

border-left:2px solid #4CAF50;

border-top:2px solid #4CAF50; border-

right:2px solid #008CBA; border-

bottom:2px solid #008CBA;

padding:8px;

font-size:30px; text-

align:center;

.button {

background-color:white;

color:black;

text-align:center;

padding:10px 15px;

transition-duration:0.4s;

border-radius:4px;

font-size:20px;

tr:nth-child(even) {background-color:#efefef;}

.tablebtn:link, .tablebtn:visited

{ background-color: white;

color: black;
padding: 5px 5px; text-

align: center; text-

decoration: none;

display: inline-block;

transition-duration:0.4s;

border-radius:4px;

border:1px solid #ff5b5b;

</style>

</head>

<body style="font-family:Veranda,sans-serif;">

<center>

<div class="header">Student Information</div>

<br><br><br>

<table width="100%">

<tr>

<thcolspan="6">C3 Student Information</th>

</tr>

<tr style="background-color:#ff5b5b;color:white;">

<th>Roll No.</th>

<th>First Name</th>

<th>Last Name</th>

<th>Gender</th>

<th>Mobile No.</th>

<th>Action</th>

</tr>

<?phpforeach($info as $row){ ?>


<tr>
<td><?php echo $row['rollno']; ?></td>

<td><?php echo $row['first_name']; ?></td>

<td><?php echo $row['last_name']; ?></td>

<td><?php echo $row['gender']; ?></td>

<td><?php echo $row['mobile_number']; ?></td>

<td>

<a href="update.php?rollno=<?php echo $row['rollno']; ?>"

class="tablebtn">Update</a> &nbsp;&nbsp;&nbsp;&nbsp;

<a href="delete.php?rollno=<?php echo $row['rollno']; ?>" class="tablebtn">Delete</a>

</td>

</tr>

<?php }?>

</table>

<a href="insert.php"><button type="button" name="insert" class="button insert" style="margin-


top:5%;">Insert</button></a>

<a href="logout.php"><button style="position:absolute; top:12%; right:3%;" class="button


logout">Logout</button></a>

</center>

</body>

</html>

 insert.php
<?php

session_start();

if($_SESSION['email']=='')

?>

<script>alert('Please login to the sytsem first!');


location.href="s_in.php";</script>
<?php

?>

<html>

<head><title>Insert Student Information</title>

<style>

.header { margin-

top:5px;

margin-bottom:5%;

border-left:2px solid #4CAF50; border-

top:2px solid #4CAF50; border-right:2px

solid #008CBA; border-bottom:2px solid

#008CBA; padding:8px;

font-size:30px; text-

align:center;

.button {

background-color:white;

color:black;

text-align:center;

padding:10px 15px;

transition-duration:0.4s;

border-radius:4px;

font-size:20px;
}

</style>

</head>

<body style="font-family:Veranda,sans-serif;">

<center>

<div class="header">Insert Records to Table</div>

<br><br><br>

<form action="insert_rec.php" method="POST">

<table>

<tr><td>First Name:</td><td style="text-align:center;"><input type="text" id="fname"


name="fname" placeholder="Enter first name" class="addrec"></td></tr>

<tr><td>Last Name:</td><td style="text-align:center;"><input type="text" id="lname"


name="lname" placeholder="Enter last name" class="addrec"></td></tr>

<tr><td>Gender:</td><td style="text-align:center;"><input type="text" id="gender"


name="gender" placeholder="Enter the gender" class="addrec"></td></tr>

<tr><td>Mobile No.:</td><td style="text-align:center;"><input type="text" id="mno"


name="mno" placeholder="Enter the mobile no" class="addrec"></td></tr>

</table>

<br><br>

<button type="submit" name="submit" class="button insert">Insert</button>

&nbsp;&nbsp;&nbsp;&nbsp;
<button type="reset" name="reset" class="button reset">Reset</button>

</form>

</center>

<a href="s_info.php"><button style="position:absolute; top:12%; left:3%;"


class="button back">Back</button></a>

</body>

</html>

 insert_rec.php
<?php

require 'db_connect.php';

session_start();

if($_SESSION['email']=='')

?>

<script>alert('Please login to the system first!');

location.href="s_in.php";</script>

<?php

else{

$fname=$_POST['fname'];

$lname=$_POST['lname'];

$gender=$_POST['gender'];

$mno=$_POST['mno'];

if($fname!='' && $lname!='' && $gender!='' && $mno!='')


{

$query="insert into s_info(first_name,last_name,gender,mobile_number)


values('$fname','$lname','$gender','$mno')";

if(mysqli_query($conn,$query))

?>

<script>alert('Inserted Successfully!');

location.href="s_info.php";

</script>

<?php

else {

echo 'Error: '.mysqli_error($conn);

else {

?>

<script>alert('Please fill in all fields!');

location.href="insert.php";</script>

<?php

?>

 update.php
<?php
require 'db_connect.php';

session_start();

if($_SESSION['email']=='')

?>

<script>alert('Please login to the system first!');

location.href="s_in.php";</script>

<?php

else{

$rollno=$_GET['rollno'];

$query="select * from s_info where rollno='$rollno'";

$result=mysqli_query($conn,$query);

$info=mysqli_fetch_assoc($result);

?>

<html>

<head><title>Update Student Information</title>

<style>

.header { margin-

top:5px;

margin-bottom:5%;

border-left:2px solid #4CAF50; border-

top:2px solid #4CAF50; border-

right:2px solid #008CBA;


border-bottom:2px solid #008CBA;

padding:8px;

font-size:30px; text-

align:center;

.button {

background-color:white;

color:black;

text-align:center;

padding:10px 15px;

transition-duration:0.4s;

border-radius:4px;

font-size:20px;

</style>

</head>

<body style="font-family:Veranda,sans-serif;">

<center>

<div class="header">Update Existing Record</div>

<br><br><br>

<form action="update_rec.php?rollno=<?php echo $rollno; ?>" method="POST">

<table>

<tr><td>First Name:</td><td style="text-align:center;"><input type="text" id="fname"


name="fname" value="<?php echo $info['first_name']; ?>" class="updtrec"></td></tr>

<tr><td>Last Name:</td><td style="text-align:center;"><input type="text" id="lname"


name="lname" value="<?php echo $info['last_name']; ?>" class="updtrec"></td></tr>
<tr><td>Gender:</td><td style="text-align:center;"><input type="text" id="gender"
name="gender" value="<?php echo $info['gender']; ?>" class="updtrec"></td></tr>

<tr><td>Mobile No.:</td><td style="text-align:center;"><input type="text" id="mno"


name="mno" value="<?php echo $info['mobile_number']; ?>"
class="updtrec"></td></tr>

</table>

<br><br>

<button type="submit" name="submit" class="button update">Update</button> &nbsp;&nbsp;&nbsp;&nbsp;

<button type="reset" name="reset" class="button reset">Reset</button>

</form>

</center>

<a href="s_info.php"><button style="position:absolute; top:12%; left:3%;"


class="button back">Back</button></a>

</body>

</html>

 update_rec.php
<?php

require 'db_connect.php';

session_start();

if($_SESSION['email']=='')

?>

<script>alert('Please login to the system first!');


location.href="s_in.php";</script>

<?php

else {

$rollno=$_GET['rollno'];

$fname=$_POST['fname'];

$lname=$_POST['lname'];

$gender=$_POST['gender'];

$mno=$_POST['mno'];

if($fname!='' && $lname!='' && $gender!='' && $mno!='')

$query="update s_info set


first_name='$fname',last_name='$lname',gender='$gender',mobile_number='$mno' where
rollno='$rollno'";

if(mysqli_query($conn,$query))

?>

<script>alert('Updated Successfully!');

location.href="s_info.php";

</script>

<?php

else {

echo 'Error: '.mysqli_error($conn);

else {
?>

<script>alert('Please fill in all fields!'); location.href="update.php?rollno=<?

php echo $rollno; ?>";</script>

<?php

?>

 delete.php
<?php

require 'db_connect.php';

session_start();

if($_SESSION['email']=='')

?>

<script>alert('Please login to the system first!');

location.href="s_in.php";</script>

<?php

else {

$rollno=$_GET['rollno'];

$query="delete from s_info where rollno='$rollno'";

if(mysqli_query($conn,$query))

?>
<script>alert('Deleted Successfully!');

location.href="s_info.php";

</script>

<?php

else {

echo 'Error: '.mysqli_error($conn);

?>

 logout.php
<?php session_start();

session_destroy();

?>

<script>location.href="index.php";</script>

Output:
Assignment No:7 Date:

Title: Add dynamic web application essence using PHP,


AJAX and MySQL.

Sign: Remark:
ASSIGNMENT 7

TITLE:
Add dynamic web application essence using PHP, AJAX and MySQL.

OBJECTIVES:
To understand the principles and methodologies of web based applications
development process.

PROBLEM STATEMENT:
Design and develop dynamic web application using PHP, AJAX and MySQL as a back-end for
employee data with insert and view operations.

OUTCOMES:
Students should be able to,
1. Develop web based application using suitable client side and server side web technologies.
2. Develop solution to complex problems using appropriate method,
technologies, frameworks, web services and content management.

SOFTWARE & HARDWARE REQUIREMENTS:


Software (Minimum Requirement):
1. Ubuntu 64 bit / Windows XP.
2. XAMPP Server
Hardware (Minimum Requirement):
Intel p4 Machine with 1GB ARM and 32GB HDD.

THEORY-CONCEPT:
AJAX remains for Asynchronous JavaScript and XML. AJAX is another procedure for making better,
speedier, and more intelligent dynamic web applications with the assistance of XML, HTML, CSS, and
Java Script. Ajax utilizes XHTML for content, CSS for introduction, alongside Document Object
Model and JavaScript for dynamic substance show.
Customary web applications transmit data to and from the server utilizing
synchronous solicitations.
It implies you round out a frame, hit submit, and get coordinated to another page with new data from
the server. With AJAX, when you hit submit, JavaScript will influence a demand to the server, to
decipher the outcomes, and refresh the present screen. In the purest sense, the client could never
realize that anything was even transmitted to the server.
AJAX instructional exercise covers ideas and cases of AJAX innovation for apprentices and
experts.
AJAX is an acronym for Asynchronous JavaScript and XML. It is a gathering of between related
innovations like JavaScript, DOM, XML, HTML, CSS and so forth.
AJAX enables you to send and get information nonconcurrently without reloading the page. So it is
quick.
AJAX enables you to send just essential data to the server not the whole page. So just profitable
information from the customer side is steered to the server side. It makes your application intuitive and
quicker.
AJAX speaks with the server utilizing XML HttpRequest question. How about we endeavor to
comprehend the stream of ajax or how ajax functions by the picture showed beneath.

TECHNOLOGY/TOOL:
AJAX, PHP and MySQL
CONCLUSION/ANALYSIS:
In this assignment, we have studied how to design and develop small web application using PHP, java
script, ajax, XAMPP server with apache server and MySQL as backend.

CODE:
Problem Statement:Design and develop dynamic web application using PHP, AJAX and MySQL as a
backend for employee data with insert and view operations.

Code:

● getvalues.php

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<?php

$role=$_GET['p'];

if($role==1)

$sel_role="Developer";

} else if($role==2)

$sel_role="Tester";

} else if($role==3)

$sel_role="Technician";

} else if($role==4)

$sel_role="Salesperson";
}

$conn=mysqli_connect("localhost","root","","ajax");

$result=mysqli_query($conn,"select * from employee_data where role='$sel_role'");

echo "<table width='50%'>

<tr style='background-color:#ff5b5b;color:white;'>

<th>id</th>

<th>name</th>

<th>salary</th>

<th>email</th>

</tr>";

while ($row=mysqli_fetch_array($result))

echo "<tr>";

echo "<td>".$row['id']."</td>";

echo "<td>".$row['name']."</td>";

echo "<td>".$row['salary']."</td>";

echo "<td>".$row['email']."</td>";

echo "</tr>";

} echo "</table>";

?>

</body>

</html>

● view_records.php

<!DOCTYPE html>
<html>

<head>
<title></title>

<script type="text/javascript">

functionshowUser(role_val)

varxmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange=function(){

if(this.readyState==4 &&this.status==200)

console.log('Result:'+this.responseText);

document.getElementById("table1").innerHTML=this.responseText;

};

xmlhttp.open("GET","getvalues.php?p="+role_val,true);

xmlhttp.send();

</script>

<style type="text/css">

.header { margin-

top:3%;

margin-bottom:5%;

border-left:2px solid #4CAF50;

border-top:2px solid #4CAF50; border-

right:2px solid #008CBA; border-

bottom:2px solid #008CBA;

padding:8px;

font-size:30px; text-

align:center;
}

table {

text-align:center;

border-collapse:collapse;

font-size:20px;

tr:nth-child(even) {background-color:#efefef;}

select {

width:130px;

height:30px;

</style>

</head>

<body>

<center>

<div class="header">View Employee Details</div>

<form>

<div>

<select name="users" onchange="showUser(this.value)">

<option value="select">Select a person:</option> <option

value="1">Developer</option> <option

value="2">Tester</option>

<option value="3">Technician</option>

<option value="4">Salesperson</option>

</select>
</div>

</form>

<br><br><br>

<div id="table1">

</div>

</center>

</body>

</html>

Output:
Assignment No:8 Date:

Title: Design and develop any web application using Struts


framework.

Sign: Remark:
ASSINMENT 8
TITLE:
Design and develop any web application using Struts framework.

OBJECTIVES:
1. To impart the efficient and available client side and server side technologies.
2. To implement the communication between computing nodes using client side and server
side technologies.
3. To design and implement the web services with content management.

PROBLEM STATEMENT:
Create a login module for the web application using struts framework.

OUTCOMES:
Students should be able to,
1. Implement the effective client side and server side technologies using struts framework.
2. Solve the complex problem of development using MVC framework.

SOFTWARE & HARDWARE REQUIREMENTS:


Software’s: Java 1.7 or Higher, Apache Tomcat 7 or higher, Struts API’s, Eclipse IDE.

THEORY:
The frameworks plays a vital role in industries for manageable and well designed application
development as well as enterprise application development. The core of the Struts framework is a
flexible control layer based on standard technologies like Java Servlets, JavaBeans, Resource
Bundles, and XML, as well as various Jakarta Commons packages. Struts encourages application
architectures based on the Model 2 approach, a variation of the classic Model-View-
Controller(MVC).
Struts gives its own particular Controller segment and incorporates with different advancements to give
the Model and the View. For the Model, Struts can collaborate with standard information get to
advances, as JDBC and EJB, and also most any outsider bundles, as Hibernate, iBATIS, or Object
Relational Bridge. For the View, Struts functions admirably with Java Server Pages, including JSTL
and JSF, and in addition Velocity Templates, XSLT, and other introduction frameworks.

What is Struts?
Struts is a framework that advances the utilization of the Model-View-Controller engineering for
planning substantial scale applications. The structure incorporates an arrangement of custom label
libraries and their related Java classes, alongside different utility classes. The most intense part of the
Struts system is its help for making and preparing electronic structures.

Struts Tags
Common Attributes
Almost all tags provided by the Struts framework use the following attributes:

Attribut Used for


e
Id the name of a bean for temporary use by the tag
name the name of a pre-existing bean for use with the tag
property the property of the bean named in the name attribute for use with the tag
scope the scope to search for the bean named in the name attribute
TECHNOLOGY/TOOL:
1) Eclipse IDE
2) Apache Tomcat 7.0 or higher

CONCLUSION/ANALYSIS:
Hence we have successfully tested the Struts framework and tested the results.

CODE:
Problem Statement: Create a login module for the web application using struts framework.

Program:

login.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF- 8">


<title>JSP Page</title>

</head>

<body>

<h1>Login</h1>

<form action="loginform.do" method="post"> username

<input type="text" name="uname"/><br/> password

<input type="password" name="upass"/><br/> <input

type="submit" value="Login"/>

</form>

</body>

</html>

success.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF- 8">


<title>JSP Page</title>

</head>

<body>

<h1>Success Page</h1>

</body>

</html>

failure.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF- 8">


<title>JSP Page</title>

</head>

<body>

<h1>Failure page</h1>

</body>

</html>

loginbean.java

package com.myapp.struts;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts.action.ActionErrors; import

org.apache.struts.action.ActionMapping; import

org.apache.struts.action.ActionMessage;

/**

* @author hp

*/

public class loginbean extends org.apache.struts.action.ActionForm {

private String uname;

private String upass;

public String getUname()

{ return uname;

public void setUname(String uname)

{ this.uname = uname;

public String getUpass()

{ return upass;

}
public void setUpass(String upass)

{ this.upass = upass;

public loginbean()

{ super();

// TODO Auto-generated constructor stub

public ActionErrors validate(ActionMapping mapping, HttpServletRequest request)

{ ActionErrors errors = new ActionErrors();

return errors;

loginform.java

package com.myapp.struts;

import javax.servlet.http.HttpServletRequest; import

javax.servlet.http.HttpServletResponse; import

org.apache.struts.action.ActionForm; import

org.apache.struts.action.ActionForward; import

org.apache.struts.action.ActionMapping;
public class loginform extends org.apache.struts.action.Action {

/* forward name="success" path="" */ private

static final String SUCCESS = "success"; private

static final String FAILURE = "failure";

@Override

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response) throws

Exception {

loginbean lb = (loginbean)form;

if(lb.getUname().equals("abc") && lb.getUpass().equals("123"))

return mapping.findForward(SUCCESS);

else

return mapping.findForward(FAILURE);

structs-config.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts-config PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"

"http://jakarta.apache.org/struts/dtds/struts-config_1_3.dtd">
<struts-config>

<form-beans>

<form-bean name="loginbean" type="com.myapp.struts.loginbean"/>

</form-beans>

<global-exceptions>

</global-exceptions>

<global-forwards>

<forward name="failure" path="/failure.jsp"/>

<forward name="success" path="/success.jsp"/>

<forward name="welcome" path="/Welcome.do"/>

</global-forwards>

<action-mappings>

<action name="loginbean" path="/loginform" scope="request"


type="com.myapp.struts.loginform" validate="false"/>

<action path="/Welcome"
forward="/welcomeStruts.jsp"/> </action-mappings>

<controller processorClass="org.apache.struts.tiles.TilesRequestProcessor"/>

<message-resources parameter="com/myapp/struts/ApplicationResource"/>

<plug-in className="org.apache.struts.tiles.TilesPlugin" >


<set-property property="definitions-config" value="/WEB-INF/tiles-defs.xml"

/> <set-property property="moduleAware" value="true" />

</plug-in>

<!-- ========================= Validator plugin ================================= -->

<plug-in className="org.apache.struts.validator.ValidatorPlugIn">

<set-property

property="pathnames"

value="/WEB-INF/validator-rules.xml,/WEB-INF/validation.xml"/>

</plug-in>

</struts-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"


xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-
app_3_1.xsd">

<servlet>

<servlet-name>action</servlet-name> <servlet-

class>org.apache.struts.action.ActionServlet</servlet-class> <init-

param>

<param-name>config</param-name> <param-
value>/WEB-INF/struts-config.xml</param-value>

</init-param>

<init-param>

<param-name>debug</param-name>
<param-value>2</param-value>

</init-param>

<init-param>

<param-name>detail</param-name>

<param-value>2</param-value>

</init-param>

<load-on-startup>2</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>action</servlet-name>

<url-pattern>*.do</url-pattern>

</servlet-mapping>

<session-config>

<session-timeout> 30

</session-timeout>

</session-config>

<welcome-file-list>

<welcome-file>login.jsp</welcome-file>

</welcome-file-list>

<jsp-config>

<taglib>

<taglib-uri>/WEB-INF/struts-bean.tld</taglib-uri> <taglib-
location>/WEB-INF/struts-bean.tld</taglib-location>

</taglib>

<taglib>

<taglib-uri>/WEB-INF/struts-html.tld</taglib-uri>
<taglib-location>/WEB-INF/struts-html.tld</taglib-location>

</taglib>

<taglib>

<taglib-uri>/WEB-INF/struts-logic.tld</taglib-uri> <taglib-
location>/WEB-INF/struts-logic.tld</taglib-location>

</taglib>

<taglib>

<taglib-uri>/WEB-INF/struts-nested.tld</taglib-uri> <taglib-
location>/WEB-INF/struts-nested.tld</taglib-location>

</taglib>

<taglib>

<taglib-uri>/WEB-INF/struts-tiles.tld</taglib-uri> <taglib-
location>/WEB-INF/struts-tiles.tld</taglib-location>

</taglib>

</jsp-config>

</web-app>

Output:
Assignment No:9 Date:

Title: Design and develop any web application using


AngularJS.

Sign: Remark:
ASSIGNMENT 9

TITLE:
Design and develop any web application using AngularJS.

OBJECTIVES:
1. Understand the design of single-page applications and how AngularJS facilitates their
Development.
2. Properly separate the model, view, and controller layers of your application and
implement them using AngularJS.
3. Master AngularJS expressions, filters, and scopes
4. Build Angular forms
5. Elegantly implement Ajax in your AngularJS applications
6. Write AngularJS directives

PROBLEM STATEMENT:
Create an application for Bill Payment Record using AngularJS

OUTCOMES:
Students can able to,
1. Implement the effective client side implementation.
2. Solve the complex problem of development using MVC framework.

SOFTWARE & HARDWARE REQUIREMENTS:


Software’s: Eclipse IDE/ Notepad/ Notepad++, Modern Web browser

THEORY-CONCEPT:
AngularJS is an open-source web application framework. It was initially created in 2009 by MiskoHevery
and Adam Abrons. It is presently kept up by Google. Its most recent adaptation is 1.2.21. "AngularJS is
an auxiliary system for dynamic web applications. It gives you a chance to utilize HTML as your layout
dialect and gives you a chance to stretch out HTML's linguistic structure to express your application parts
plainly and compactly. Its information official and reliance infusion take out a significant part of the code
you as of now need to compose. Also, everything occurs inside the program, making it a perfect band
together with any server innovation".
General Features
 AngularJS is a productive system that can make Rich Internet Applications (RIA).
 AngularJS gives designers a choices to compose customer side applications
utilizing JavaScript in a spotless Model View Controller (MVC) way.
 Applications written in AngularJS are cross-program agreeable. AngularJS consequently handles
JavaScript code reasonable for every program.
 AngularJS is open source, totally free, and utilized by a great many engineers the world
over. It is authorized under the Apache permit version2.0.
 By and large, AngularJS is a system to assemble expansive scale, elite, and simple tokeep
up web applications.
Core Features:

Advantages of AngularJS
It gives the ability to make Single Page Application in a spotless and viable way.
It gives information restricting ability to HTML. Along these lines, it gives client a rich and
responsive experience.
 AngularJS code is unit testable.
 AngularJS utilizations reliance infusion and make utilization of partition of concerns.
 AngularJS gives reusable segments.
 With AngularJS, the engineers can accomplish greater usefulness with short code.
In AngularJS, sees are unadulterated html pages, and controllers written in JavaScript do the
business handling.

CONCLUSION/ANALYSIS:
With the help of this assignment it is helpful to understand features of AngularJS. MVC
model structure and its use in advanced web programming is studied.

CODE:

Problem Statement: Create an application for Bill Payment Record using AngularJS.

Program:

<html>

<head>

<script src="angular.js"></script>

</head>

<body>

<hr><br>

<center><h2>Shopping Card Record</h2></center>

<div data-ng-app="myapp" data-ng-controller="CartForm">


<center><br>

<hr>

<br><br>

<table class="table" >

<table border="10" >

<tr>

<th>Description</th>

<th>Qty</th>

<th>Cost</th>

<th>Total</th>

<th>Remove</th>

</tr>

<tr ng:repeat="item in cart.items">

<td><input type="text" ng:model="item.description"></td> <td><input

type="number" ng:model="item.qty" ng:required></td> <td><input

type="number" ng:model="item.cost" ng:required></td>

<td>{{item.qty * item.cost | currency:'Rs '}}</td>

<td>[<a href ng:click="removeItem($index)">X</a>]</td>

</tr>

<tr>

<td><a href ng:click="addItem()">add item</a></td>

<td></td>

<td>Total:</td>

<td>{{total() | currency:'Rs '}}</td>

</tr>

</table>

</center>
</div>
<script>

var app=angular.module('myapp',[]);

app.controller('CartForm', function($scope)

$scope.cart =

items: [{ qty: '', description: '', cost: ''}]

$scope.addItem = function()

$scope.cart.items.push({ qty: '', description: '', cost: ''});

$scope.removeItem = function(index)

$scope.cart.items.splice(index, 1);

$scope.total = function()

var total = 0;

angular.forEach($scope.cart.items, function(item)

total += item.qty * item.cost;

})

return total;

}
);
</script>

</body>

</html>

Output:
Assignment No: 10 Date:

Title: Design and implement a business interface with


necessary business logic for any web application using EJB.

Sign: Remark:
ASSIGNMENT 10

Title:
Design and implement a business interface with necessary business logic for any web
application using EJB.

OBJECTIVES:
To understand Enterprise Java Bean for web application.

PROBLEM STATEMENT:
Design and implement the web application logic for deposit and withdraw amount
transactions using EJB.

OUTCOMES:
Students should be able to,
3. Develop web based application using EJB.
4. Develop application to understand amount transactions in business.

SOFTWARE & HARDWARE REQUIREMENTS


Software (Minimum Requirement:):
3. Ubuntu 64 bit / Windows XP.
4. NetBeans IDE
5. Application Server

Hardware (Minimum Requirement:):


Intel p4 Machine with 1GB ARM and 32GB HDD.

Problem Statement:

Design and implement the web application logic for deposit and withdraw amount
transactions using EJB.

THEORY-CONCEPT

2. Enterprise Java Beans (EJB):


Enterprise Java Beans (EJB) is one of the several Java APIs for standard manufacture of enterprise
software. EJB is a server-side software element that summarizes business logic of an application.
Enterprise Java Beans web repository yields a runtime domain for web related software elements
including computer reliability, Java Servlet Lifecycle (JSL) management, transaction procedure and
other web services.
The EJB enumeration aims to provide a standard way to implement the server-side business software typically found in
enterprise applications. Such machine code addresses the same types of problems, and solutions to these problems are
often repeatedly re-implemented by programmers. Enterprise Java Beans is assumed to manage such common concerns
as endurance, transactional probity and security in a standard way that leaves programmers free to focus on the particular
parts of the enterprise software at hand.
To run EJB application we need an application server (EJB Container) such as Jboss, Glassfish, Weblogic, Websphere
etc. It performs:
1. Life cycle management
2. Security
3. Transaction management
4. Object pooling

Types of Enterprise Java Beans


There are three types of EJB:
1. Session Bean: Session bean contains business logic that can be invoked by local, remote or webservice client. There are
two types of session beans: (i) Stateful session bean and (ii) Stateless session bean.

(i) Stateful Session bean :


Stateful session bean performs business task with the help of a state. Stateful session bean can be used to access various
method calls by storing the information in an instance variable. Some of the applications require information to be stored
across separate method calls. In a shopping site, the items chosen by a customer must be stored as data is an example of
stateful session bean.

(ii) Stateless Session bean :


Stateless session bean implement business logic without having a persistent storage mechanism, such as a state or database
and can used shared data. Stateless session bean can be used in situations where information is not required to used across
call methods.

2. Message Driven Bean: Like Session Bean, it contains the business logic but it is invoked by passing message.
3. Entity Bean: It summarizes the state that can be remained in the database. It is deprecated. Now, it is replaced with JPA
(Java Persistent API). There are two types of entity bean:

(i) Bean Managed Persistence :


In a bean managed persistence type of entity bean, the programmer has to write the code for database calls. It persists across
multiple sessions and multiple clients.

(ii) Container Managed Persistence :


Container managed persistence are enterprise bean that persists across database. In container managed persistence the
container take care of database calls.

When to use Enterprise Java Beans

1. Application needs Remote Access. In other words, it is distributed.


2. Application needs to be scalable. EJB applications supports load balancing, clustering and fail-over.
3. Application needs encapsulated business logic. EJB application is differentiated from demonstration and persistent
layer.

CONCLUSION/ANALYSIS
In this assignment,we have studied how to implement the web application logic for amount
transactions using EJB.

Code:

Index.html

<html>

<head>

<title>Implement Bank Application using EJB</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<form method="post" action="transact">

<h1>Bank Application using EJB </h1>

Enter Amount : <input type="text" name="t1" />

<h3>Select option</h3>

<input type="radio" name="transaction"value="deposite" />Deposite<br/>

<input type="radio" name="transaction"value="withdraw" />withdraw<br/>

<input type="submite" value="submite" />

</form>

</body>

transact.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 transact extends httpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

try {

PrintWriter out = response.getWriter()};

String selectdType=request.getParameter("transact");

int amount=Integer.ParseInt(request.getParameter(t1));

if(selectdType.equals("deposite")){

bankTransact.deposite(amount);

if(selectdType.equals("withdraw")){

int amt=bankTransact.withdraw(amount);

out.println(amount="successfully withdraw. Your Balance is: Rs"+ amt)

}
}

Private BankTransactLocal lookupBankTransactLocal(){

try{

Context c= New initialContext();

return(BankTransactLocal)c.Lookup("java.global/Bank/Bank-ejb/BankTransact!
Bankexamp.Bank/Bank-ejb/BankTransactLocal")

catch (NamingException ne){

Logger.getLogger(getClass().getName().log(Level.SEVERE,"exception caught",ne))

throw new RuntimeException(ne);

BankTransact.java

//this is session Bean

package bankexamp;

inport javax.ejb.Statful;

@Stateful

public class BankTransact implements BankTransactLocal{


int balance=10000;

@override

public int deposit (int amount){

balance=balance+amount;

return balance;

@override

public int withdraw (int amount){

balance=balance-amount

return balance;

Output:

You might also like