Web Technology Lab Manual

Assignment No. : 1
TITLE

Title: Case study: 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 in following format.
Sr. No Website URL Purpose Of Things liked Things Overall
Website in the website disliked in evaluation of
the website the website
(Good/Bad)

OBJECTIVES
From the evaluation, students should learn and conclude different website design issues,
Which should be considered while developing a website

PROBLEM STATEMENT

Case Study

OUTCOME

Students will be able to,

students should learn and conclude different website design issues,Which should be considered
while developing a website

THEORY-CONCEPT

Sr. No 1 Website URL : https://www.narendradwivedi.org

Purpose Of Website : Coding Solutions & Articles Related To Programming, Ethical Hacking &
Reverse Engineering
Things Liked In The Website :
 User Interface
 Day/Dark Mode Available
 Interactive
Things Disliked In The Website :
 No Automatic Dark/Day Theme Switching According To Time
 No Live Chat Support
Overall Evaluation Of The Website : Good

Sr. No 2 Website URL : https://www.pcmag.com

Purpose Of Website : Provide Reviews Of Applications , Games & Gadgets
Things Liked In The Website :
 User Interface
 Content
Things Disliked In The Website :
 Blank Space After Footer
Overall Evaluation Of The Website : Good

Sr. No 3 Website URL : https://github.com

Purpose Of Website : Provide Space For Hosting Codes & Applications
Things Liked In The Website :
 Easy To Explore Codes
 Search Feature
Things Disliked In The Website :
 Home Page Lags On Low End Devices
Overall Evaluation Of The Website : Good

Sr. No 4 Website URL : https://stackoverflow.com

Purpose Of Website : Question & Answer Website For Programmers
Things Liked In The Website :
 Interactive
 Easy To Copy Codes
Things Disliked In The Website :
 No Dark Mode
Overall Evaluation Of The Website : Good

Sr. No 5 Website URL : https://www.quora.com

Purpose Of Website : Question Answer Forum Type Website Related To Everything
Things Liked In The Website :
 User Interface
 Color Combination
Things Disliked In The Website :
 Text Advertisements Between Answers
 Asks To Subscribe To View Top Answers
Overall Evaluation Of The Website : Good

CONCLUSION/ANALYSIS

Hence, we have Study different website design issues,also good Things and Bad Things.
 Assignment No. : 2
TITLE

Title: HTML, CSS

OBJECTIVES

1. Understand about basic concepts of html

2. Understand the basic concepts of CSS

PROBLEM STATEMENT

Write a program to design a website 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
 Web Technology Lab Manual

 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

 HTML Versions:

HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
Table.1: HTML Versions

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 understandand 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
 Web Technology Lab Manual

 Animations
 2D/3D Transformations
 Multiple Column Layout
 User Interface

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: yellow ;}
h1 {color: blue;}
p {color: red;}
</style>

 External - by using an external CSS file. An external style sheet is used to define
thestyle 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.

ORAL QUESTIONS

1. What is the difference between HTML and HTML5?

2. What is the difference between html elements and tags?
3. What is marquee?
4. What is the use of span tag? Give an example?
5. What is the use of ‘required ’attribute in HTML5?
6. What is External stylesheet? What are the advantages and disadvantages?
7. What is CSS selector?
8. What are the components of CSS style?
9. What are browser safe color?
 Assignment No. : 3

TITLE
Title: XML,DTD and XSLT.

PROBLEM STATEMENT
Write a program to design XML page for student and validate the structure using DTD and show
The output using in HTML format using XSLT.

OUTCOMES

Students will be able to,

1. Design static webpage using XML.
2. Apply DTD to XML pages.
3. Apply XSLT to XML pages

SOFTWARE & HARDWARE REQUIREMENTS

Software: Notepad, Any Browser, Eclipse(for DTD)

THEORY-CONCEPT

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 −
 Web Technology Lab Manual

 XML is extensible − XML allows you to create your own self-descriptive tags, or
language, that suits your application.

 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) and is available as an open standard.

TECHNOLOGY/TOOL

The XML document have an XML declaration, but it is optional, and it is written as−
<? xml version = "1.0" encoding = "UTF-8"?>
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 attributes. For example −

<a href = "http://www.google.com/">XMLTutorial</a>

Here href is the attribute name and http://www.google.com/ is attribute value.

DTD

A DTD is a Document Type Definition.

A DTD defines the structure and the legal elements and attributes of an XML document.
 Web Technology Lab Manual

With a DTD, independent groups of people can agree on a standard DTD for interchanging data.

An application can use a DTD to verify that XML data is valid.

An Internal DTD Declaration

If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE> definition:

XML document with an internal DTD

<?xml version="1.0"?>

<!DOCTYPE note [

<!ELEMENT note (to,from,heading,body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

]>

<note>

<to>Neha</to>

<from>Amit</from>

<heading>Reminder</heading>

</note>

The DTD above is interpreted like this:

!DOCTYPE note defines that the root element of this document is note

!ELEMENT note defines that the note element must contain four elements: "to,from,heading"

!ELEMENT to defines the to element to be of type "#PCDATA"

!ELEMENT from defines the from element to be of type "#PCDATA"

!ELEMENT heading defines the heading element to be of type "#PCDATA"

 Web Technology Lab Manual

An External DTD Declaration

If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a reference
to the DTD file:

<?xml version="1.0"?>

<!DOCTYPE note SYSTEM "note.dtd">

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

</note>

XSLT

XSL (eXtensible Stylesheet Language) is a styling language for XML.

XSLT stands for XSL Transformations.

The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or
<xsl:transform>.

Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used!

The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is:

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Create an XSL Style Sheet

Then you create an XSL Style Sheet ("stud.xsl") with a transformation template:

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

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
 Web Technology Lab Manual

<h2>Student</h2>
<table border="1">
<tr> <th>RollNo</th>
<th>Name </th>
</tr>
<xsl:for-each select="Student/stud">
<tr>
<td><xsl:value-of select="rno"/></td>
<td><xsl:value-of select="name"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Link the XSL Style Sheet to the XML Document

Add the XSL style sheet reference to your XML document ("student.xml"):

<?xml version="1.0" ?>

<?xml-stylesheet type="text/xsl" href="stud.xsl"?>

If you have an XSLT compliant browser it will nicely transform your XML into XHTML.

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 DTD in notepad and save with .dtd extension (For external DTD)
3. Write a XSLT code in notepad and save using .xsl extension.
4. Open XML page in the browser for running simple XML or XML using XSLT.
5. To run internal/external dtd open Eclipse and run the code using validate.

TEST CASES

Manual testing is used to check whether XSLT gets applied or not.

Eclipse validate function used to check whether DTD gets applied or not.
 Web Technology Lab Manual

CONCLUSION/ANALYSIS

Hence, we have designed static web pages using XML ,XSLT and DTD

ORAL QUESTIONS

1. Explain difference between HTML and XML?

2. What is XML DOM?
3. Explain difference between CDATA and PCDATA?
4. What is mean by simple element and complex element?
5. What is DTD?
6. Explain XSL and XSL
 Assignment No. - 4
TITLE

HTML, Java Script

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, Name,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-CONCEPT

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.
 Web Technology Lab Manual

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 must include appropriate logic to test correctness of data.

TECHNOLOGY/TOOL

JavaScript can be implemented using JavaScript statements that are placed within the <script>.

You can place the <script> tags, containing your JavaScript, anywhere within your web page,
but it is normally recommended that you should keep it within the <head> tags.

The script tag takes two important attributes:

 Language − This attribute specifies what scripting language you are using. Typically, its
value will be JavaScript. Although recent versions of HTML (and XHTML, its
successor) have phased out the use of this attribute.

 Type − This attribute is what is now recommended to indicate the scripting language in
use and its value should be set to "text/javascript".
 Web Technology Lab Manual

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. First Program is of Login- if uname and password is correct it will redirect to enquiry form and
if incorrect will give alert message.
3. Write the function for validation of name, email id and phone no and enclosed this
function in script in enquiry.html.
4. Call this function on ‘onsubmit’ event of submit button.
5. Open HTML page in the browser.

TEST CASES

Manual testing is used to check following validations

 All the fields like Name, Address, Phone number,DOB,Gender and email id are
mandatory fields.

 Name should be characters only.

 Phone no. should be numbers only.
 Email id should be in proper format like [email protected]

CONCLUSION/ANALYSIS

Hence, we applied validate the data using JavaScript.

ORAL QUESTIONS

1. Name some Java Script features.

2. How to define anonymous function?
3. What is callback?
4. What is the difference between undefined and not-defined in JavaScript?
5. What is ‘closure’ in JavaScript?
6. What are JavaScript data types?
7. What are all the types of Pop up boxes available in JavaScript?
 Assignment No. - 05
TITLE

Servlet

OBJECTIVES

1. Understand about basic concepts of html, CSS

2. Understand the basic functionalities of Servlets

PROBLEM STATEMENTS

1. Design and Build Student/Employee information form using Servlet.

OUTCOMES

Students will be able to,

1. Develop a dynamic webpage using HTML and Servlet.
2. Write a server side java application called Servlet to catch the data sent from client,
process it and show the output.

SOFTWARE NEEDED

1. Any Operating System

2. JDK 7or later
3. Editors; Eclipse
4. Web browser
5. Tomcat 7 or later
 Web Technology Lab Manual

THEORY - CONCEPT

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.

Java Servlets are Java classes run by a web server that has an interpreter that supports the
Java Servlet specification.
Servlets can be created using the packages
• javax.servlet
• javax.servlet.http

Servlet Life Cycle

• The servlet is initialized by calling the init() method.

• The servlet calls service() method to process a client's request.
• The servlet is terminated by calling the destroy() method.
• Finally, servlet is garbage collected by the garbage collector of the JVM.

Figure.3: Functions of Servlet

 Web Technology Lab Manual

TECHNOLOGY/TOOL IN BRIEF

How to configure tomcat server in Eclipse ? (One time Requirement)

• If you are using Eclipse IDE first time, you need to configure the tomcat server
First.
• For configuring the tomcat server in eclipse IDE,
• click on servers tab at the bottom side of the IDE -> right click on blank area ->
New -> Servers -> choose tomcat then its version -> next -> click on Browse
button -> select the apache tomcat root folder previous to bin -> next -> addAll
-> Finish.

Steps to run servlet in Eclipse

• Create a Dynamic web project

• create a servlet
• add servlet-api.jar file
• Run the servlet

Methods

• doGet-
A GET request results from a normal request for a URL or from an HTML
form that has no METHOD specified and it should be handled by doGet()
method.
• doPost-
A POST request results from an HTML form that specifically lists POST as
the METHOD and it should be handled by doPost() method

Reading HTML Form Data using Servlet

• getParameter() − You call request.getParameter() method to get the value of

a form parameter.
• getParameterValues() − Call this method if the parameter appears more than
once and returns multiple values, for example checkbox.
• getParameterNames() − Call this method if you want a complete list of all
parameters in the current request.
 Web Technology Lab Manual

DESIGN / EXECUTION STEPS

Following steps are used to Create and Execute web applications,

1. Design html and servlet files with an extension of.html and .java
2. Start the Tomcat Server with port number

CONCLUSION / ANALYSIS

Hence, we have performed the dynamic web application using Servlet and MySQL.

ORAL Questions

1. What is Servlet?
2. What is the life-cycle of a servlet?
3. What is difference between Get and Post method?
4. What is difference between GenericServlet and HttpServlet?
5. What is session tracking?
6. What are Cookies?
 Assignment No. - 06
TITLE

JSP, and MySQL(Backend)

OBJECTIVES

3. Understand about basic concepts of html, CSS

4. Understand the basic functionalities of JSP
5. Having the knowledge of SQL query to create the database

PROBLEM STATEMENTS

Design and Build Student/Employee Page using JSP and MySQL.

OUTCOMES

Students will be able to,

3. Develop a dynamic webpage using JSP, HTML .
4. Write a server side application called JSP to catch the data sent from client, process it and
store it on database (MySQL).

SOFTWARE NEEDED

6. Any Operating System

7. JDK 7or later
8. Editors:Eclipse
9. Web browser
10. Tomcat 7 or later
11. Connector: Java MySQL Connector
 Web Technology Lab Manual

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.

Advantage of JSP over Servlet

1) Extension to Servlet
2) Easy to maintain
3) Fast Development: No need to recompile and redeploy
4) Less code than Servlet

Architecture of JSP
1. The request / response part of a JSP is defined in below architecture
2. The client initiated request for a JSP file using browser
3. Webs server (i.e, JSP Engine) invokes the JSP file and interpret the JSP file produce a
java code. The created java code will be a Servlet.
4. Once Servlet is created, JSP engine compiles the servlet. Compilation errors will be
detected in this phase.
5. Now servlet class is loaded by the container and executes it.
6. Engine sends the response back to the client.
 Web Technology Lab Manual

Figure. Architecture of JSP

Syntax of JSP:
JSP declarations is used to declare variables and methods as shown below,
<% text %>
Following is the simple and first example for JSP:
//Hello.jsp
<html>
<body>
<% out.println("Welcome to JSP Class"); %>
</body>
</html>

Output:
Welcome to JSP Class

Elements of JSP
Scripting Element Example

Comment <%-- comment --%>

Directive <%@ directive %>
Declaration <%! declarations %>
Scriptlet <% scriplets %>
Expression <%= expression %>
 Web Technology Lab Manual

JDBC
Java JDBC is a java API to connect and execute query with the database. JDBC API uses jdbc
drivers to connect with the database.
JDBC Driver is a software component that enables java application to interact with the database.
There are 4 types of JDBC drivers:
1. JDBC-ODBC bridge driver
2. Native-API driver (partially java driver)
3. Network Protocol driver (fully java driver)
4. Thin driver (fully java driver)

TECHNOLOGY/TOOL IN BRIEF

1. JSP
2. IDE: Eclipse
3. Databases: MySQL

MySQL: MySQL is a freely available open source Relational Database Management System
(RDBMS). It uses the Structured Query Language (SQL).

SQL is the most popular language for adding, accessing and managing data in a database. It is
most noted for its quick processing, proven reliability, ease and flexibility of use. MySQL is an
essential part of almost every open source PHP application. Good examples for PHP & MySQL-
based scripts are WordPress, Joomla, Magento and Drupal.

DESIGN / EXECUTION STEPS

Web Technology Lab Manual
Page 24
 Following steps are used to Create and Execute web applications,
3. Design html and jsp files with an extension of.html and .jsp
4. Write database connection code in jsp file
5. Set MySQL username, password and database name in database connection page
6. Start the Tomcat Server with port number

CONCLUSION / ANALYSIS

Hence, we have performed the dynamic web application using JSP and MySQL

ORAL QUESTIONS

1. What is JSP?
2. What are the life-cycle methods for a JSP?
3. What are elements of JSP?
4. What is JDBC?

Page 25
 Assignments no: 07
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.

Page 26
 Web Technology Lab Manual

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 bolsters a substantial number of real conventions, for example, POP3, IMAP, and LDAP.
PHP4 included help for Java and conveyed question designs (COM and CORBA), making n-
level improvement a plausibility out of the blue. PHP is excusing: PHP dialect tries to be as
pardoning as would be prudent. PHP Syntax is C-Like.

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.

You include, erase, adjust components inside your database through PHP. Access treats factors
and set treats. Utilizing PHP, you can confine clients to get to a few pages of your site. It can
encode information.

Page 27
 Web Technology Lab Manual

Example:

"Hello World" Script in PHP

To get a feel for PHP, first start with simple PHP scripts. Since "Hello, World!" is an essential
example, first we will create a friendly little "Hello, World!" script.

As mentioned earlier, PHP is embedded in HTML. That means that in amongst your normal
HTML (or XHTML if you're cutting-edge) you'll have PHP statements like this –

<html>
<body>
<?php
echo “Hello Php”) ;
?>
</body>
</html>

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

Web Server – PHP is server side scripting language so it requires Web server to execute(eg.
Apache Tomcat)

Database − PHP will work with for all intents and purposes all database programming,
including Oracle and Sybase yet most regularly utilized is uninhibitedly accessible MySQL
database.
PHP Parser − keeping in mind the end goal to process PHP content directions a parser must be
introduced to create HTML yield that can be sent to the Web Browser. This instructional
exercise will manage you how to introduce PHP parser on your PC.

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

Page 28
 Web Technology Lab Manual

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.

TECHNOLOGY/TOOL

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.
DESIGN/EXECUTION STEPS

For the design purpose html and CSS is to be used. For this design part contains the GUI of web
applications, how its looks like? When users going to use the web application.
Steps to install XAMPP and configure the PHP, MYSQL server.
1. Download the XAMPP using following link (download latest version as per your Operating
system Windows/ Linux). https://www.apachefriends.org/download.html
Page 29
 Web Technology Lab Manual

2. Install XAMPP by running .exe file

3. Go to start->Xampp-> Xampp control panel. Start Apache and Mysql.
4. Goto Web browser(eg. Firefox) and write localhost and see Xampp has been started or not. If it is started
then you will see in browser like shown in following image.

5. By Clicking on phpmyAdmin you can create database, table and insert values in MySQL.
6. Open a note pad write a PHP code and save this file in Xampp->htdoc->create a folder here(eg.PHP1 )
and save file in this folder with name index.php
7. To run the code goto Firefox or any web browser and type in address bar - localhost/PHP1 your code
will get run.
8. If file name is other that index.php then to run type in address bar – localhost/PHP1/hello.php (file name)

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.

PROGRAM CODE WITH OUTPUT

Here we have created “emp” directory in htdocs directory contain following files
1. index.php
2. insert.html
3. database.sql

 insert.html is used to take values from user using HTML form and submit it to index.php.
 index.php will access this values and store in MySQL table and also show the data of table .

Page 30
 Web Technology Lab Manual

ORAL QUESTIONS

1. What is the use of "echo" in php?

2. How to include a file to a php page?

3. Differences between GET and POST methods ?

4. What is the use of 'print' in php?

5. What is the difference between Session and Cookie?

6. What are the different errors in PHP?

7. How to print current date and time?

8. What is the difference between sql and Mysql?

9. Why do we use GROUP BY and ORDER BY function in mysql?

10. What is JOIN in MySQL? What are the different types of join?

Page 31
 Assignments no: 08
TITLE

Add dynamic web application essence using AJAX,HTML and JSP.

OBJECTIVES

To understand the use of AJAX .

PROBLEM STATEMENT

Design and develop dynamic web application using AJAX,HTML and JSP.

OUTCOMES

Students should be able to,

Develop web based application using suitable client side and server side web technologies with
essence of AJAX.

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.
Web Technology Lab Manual

Page 32
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 non concurrently 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 XMLHttpRequest question. How about we endeavor to
comprehend the stream of ajax or how ajax functions by the picture showed beneath.

AJAX communicates with the server using XML Http Request object. Let's try to understand the
flow of ajax or how ajax works by the image displayed below:

Figure: AJAX communication with the server using XML Http Request object

As you can see in the above example, XML Http Request object plays an important role.

Page 33
 Web Technology Lab Manual

TECHNOLOGY/TOOL

AJAX, JSP and HTML

DESIGN/EXECUTION STEPS

 Create an HTML page to take input from user in number format.

 When it click on ShowTable button the output will be shown on same page instead of showing on
next page(using AJAX Technology client side)
 Ajax code is embedded into HTML file.
 JSP page to write the code server side code.
 You require Eclipse and Tomcat to run this application.

CONCLUSION/ANALYSIS

In this assignment, we have studied how to design and develop small web application using Ajax,
HTML and JSP

ORAL QUESTIONS

1. What is AJAX?
2. What are Ajax applications?
3. What are the advantages and disadvantages of Ajax?
4. What are all the technologies used by Ajax?
5. What are the difference between AJAX and Javascript?

Page 34
 Assignment No: 09
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 Students 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

Page 35
 Web Technology Lab Manual

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 to-
keep up web applications.
Core Features:

Figure.7: Architecture of AngularJS

1. Data-authoritative: It is the programmed synchronization of information amongst model
and view parts.

Page 36
 Web Technology Lab Manual

2. Scope: These are objects that allude to the model. They go about as paste amongst
controller and view.

3. Controller: These are JavaScript capacities bound to a specific degree.

4. Services: AngularJS accompanies a few implicit administrations, for example, $http to

make aXMLHttpRequests. These are singleton objects which are instantiated just once in
application.

5. Filters: These select a subset of things from a cluster and restore another exhibit.

6. Directives: Directives are markers on DOM components, for example, components,

characteristics, css, and that's only the tip of the iceberg. These can be utilized to make
custom HTML labels that fill in as new, custom gadgets. AngularJS has worked in
mandates, for example, ngBind, ngModel, and so on.

7. Templates: These are the rendered see with data from the controller and model. These
can be a solitary record, (for example, index.html) or different perspectives in a single
page utilizing partials.

8. Routing: It is idea of exchanging sees.

9. Model View Whatever: MVW is an outline design for isolating an application into
various parts called Model, View, and Controller, each with unmistakable obligations.
AngularJS does not actualize MVC in the conventional sense, yet rather something nearer
to MVVM (Model-View-ViewModel). The Angular JS group alludes it cleverly as
Model View Whatever.

10. Deep Linking: Deep connecting permits to encode the condition of use in the URL with
the goal that it can be bookmarked. The application would then be able to be re-
established from the URL to a similar state.

Page 37
 Web Technology Lab Manual

11. Dependency Injection: AngularJS has a worked in reliance infusion subsystem that
encourages the designer to make, comprehend, and test the applications effectively.

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.

Model View Controller

Model View Controller or MVC as it is famously called, is a product configuration design for
creating web applications. A Model View Controller design is comprised of the accompanying
three sections.
 Model − It is the most minimal level of the example in charge of looking after
information.
 View − It is in charge of showing all or a part of the information to the client.
 Controller − It is a product Code that controls the connections between the Model and
View.
MVC is mainstream since it secludes the application rationale from the UI layer and
backings detachment of concerns. The controller gets all solicitations for the application and
afterward works with the model to set up any information required by the view.

Page 38
 Web Technology Lab Manual

Figure. 8: Model View Controller

Model

The model is in charge of overseeing application information. It reacts to the demand from see and to the
directions from controller to refresh itself.

The View

An introduction of information in a specific arrangement, activated by the controller's choice to exhibit the
information. They are content based layout frameworks, for example, JSP, ASP, PHP and simple to
incorporate with AJAX innovation.

The Controller

The controller reacts to client enter and performs communications on the information show objects. The
controller gets input, approves it, and afterward performs business operations that alter the condition of the
information demonstrate.

AngularJS is a MVC based structure.

 An AngularJS application comprises of following three essential parts −ng-app − This directive
defines and links an AngularJS application to HTML.

Page 39
Page 40
 Web Technology Lab Manual

 ng-model − This directive binds the values of AngularJS application data to HTML
input controls.
 ng-bind − This directive binds the AngularJS Application data to HTML tags.

DESIGN/EXECUTION STEPS

Steps for AngularJS

1. Either download AngularJS
2. Or Use CDN Method.

ple:
We have included the AngularJS JavaScript file in the HTML page so we can use AngularJS −

<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

1. Point to AngularJS app

Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-
app attribute to the root HTML element of the AngularJS app. You can either add it
to html element or body element as shown below −

<body ng-app="myapp">
</body>

2. View
The view is this part −

<div ng-controller="HelloController">
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller tells AngularJS what controller to use with this view. helloTo.titletells AngularJS
to write the "model" value named helloTo.title to the HTML at this location.

Page 41
 Web Technology Lab Manual

3. Controller
The controller part is −

<script> angular.module("myapp",
[])
.controller("HelloController",function($scope){
$scope.helloTo={};
$scope.helloTo.title="AngularJS";
});
</script>

This code registers a controller function named HelloController in the angular module
named myapp. The controller function is registered in angular via the
angular.module(...).controller(...) function call.

The $scope parameter passed to the controller function is the model. The controller function
adds a helloTo JavaScript object, and in that object it adds a title field.

4. Execution
Save the above code as myfirstexample.html and open it in any browser.
Output as below:

Welcome AngularJS to the world of Tutorialspoint!

5. How AngularJS integrates with HTML

 ng-app directive indicates the start of AngularJS application.
 ng-model directive then creates a model variable named "name" which can be used with
the html page and within the div having ng-app directive.
 ng-bind then uses the name model to be displayed in the html span tag whenever user
input something in the text box.
 Closing</div> tag indicates the end of AngularJS application.

Page 42
 Web Technology Lab Manual

AngularJS directives are used to extend HTML. These are special attributes starting
with ng- prefix. We're going to discuss following directives −
 ng-app − This directive starts an AngularJS Application.
 ng-init − This directive initializes application data.
 ng-model − This directive binds the values of AngularJS application data to
HTML
input controls.
 ng-repeat − This directive repeats html elements for each item in a collection.

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.

ORAL QUESTIONS

1. What is AngularJS and what are some of its advantages?

2. What is the Model View Controller (MVC)?
3. What is data binding in AngularJS? How does it relate to the MVC architecture?
4. Explain the concept of scope. How does scope inheritance work in AngularJS?
5. Explain the difference between a factory and a service in AngularJS.
6. What is dependency injection and how does it work?
7. What are directives? Can you explain the functions of the following directives?
8. Explain the role of $routeProvider in AngularJS.

Page 43
Page 44