Web Tech Apps June 2015

Application based teaching
in Web Technologies
K. Shirisha
Assoc. Professor, Dept. of C.S.E.
SreeNidhi Institute of Science & Technology,
Hyderabad
Outline
1. HTML Static web pages

2. JavaScript To add dynamism to web
pages
3. XML DESC (Describe, Exchange, Store,
Carry) data
4. Java Beans Reusable Components
5. Servlets Server-side Programming
6. JSPs Simplified Server-side Programming
Web Technologies 2
The World Wide Web
It is a collection of information
stored on the networked
computers over the world.
The WWW was proposed in 1991

by Tim Berners-Lee at CERN.
Web Technologies 3
Web or Internet?
They are not the same things.
The Internet is a collection of computers or

networking devices connected together.
The Web is a collection of documents that

are interconnected by hyper-links.
These documents are accessed by web
browsers and provided by web servers.
Web Technologies 4
Web connection
Web Technologies 5
The HTTP
Request/Response Model
HTML Codes
<html>

Request </html>
Response
Client Server
Program /
Scripts
Web Technologies 6
Static Web-page designing using
HTML
Develop the home page including the following
tags:
1. table
2. Frameset and frame (to create Menu-driven
content)
3. Radio buttons and check boxes
4. Text boxes
5. Hyperlinks to other pages
6. Buttons submit
7. Audio-Video clips
8. Image components
Case Studies
1. Website for World Cup Tournament
2. Website for medical Pharmacy (to get
medicines online)
3. Online Book Store (Ex. Amazon)
4. IT Consultancy (Ex. Visu Consultancy)
5. University Portal (Ex. IIT Delhi, JNTU
Hyderabad)
6. Online Public Examinations (Ex. GATE)
7. UI based DBMS (Employee Management
System)
Static Home-page for the World Cup
To find out the travel distances Members Login New

between the host cities: Users ?
Register
Select your starting point Here
Hyderabad
Mumbai
Delhi
Kolkata
Chennai
Select your destination
Hyderabad
Delhi
Mumbai
Kolkata
Chennai
Hyderabad Mumbai 703 km

2. Online Pharmacy
3. Online Book Store
7. UI based DBMS
JavaScript: Adding Dynamism to the
static web pages
Creating the Registration page (for new
entry/user) with appropriate
validations by using the following:
1. Regular Expressions
2. Events like onChange, onClick,
OnSubmit, onLoad,..
3. Functions in Javascript
1. World Cup Tournament
Regular Expression
Email:
^[_a-z]+(\.[_a-z0-9-]+)*@[a-z]+(\.[a-z]
+)*(\.[a-z]{2,4})$
Ex: _snist2014@gmail.com
JavaScript for onChange
Event
<html><head><script>
function myFunction() {
var x = document.getElementById("fname");
Input
x.value = x.value.toUpperCase();}
</script></head><body>
Enter your name: <input type="text"

id="fname" onchange="myFunction()">
<p>When you leave the input field, a function is
triggered which transforms the input text to
Output
upper case.</p>
</body></html>
XML- DESC (Describe,
Exchange, Store, Carry)
data
Create XML file as a database using
either of the following elements:
1. DTD (Document Type Definition)
2. XML Schema
DTD syntax for Online
Book Store
<!ELEMENT bookstoreAmazon (book+)>
<!ELEMENT book (title, chapter+)>
<!ELEMENT chapter (heading, paragraph*)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT paragraph (#PCDATA)>
<!ATTLIST book
language CDATA #REQUIRED Store this file
author CDATA #REQUIRED as
>
bookstore.dtd
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE bookstoreAmazon SYSTEM
bookstore.dtd >
<bookstoreAmazon>
<book language="en" author="Ernest Hemingway">
<title>A Farewell to Arms</title>
<chapter>
<heading>Chapter One</heading>
<paragraph> ... <paragraph>
</chapter>
<chapter> XML file
<heading>Chapter Two</heading>
<paragraph> ... <paragraph>for the
</chapter>
Online
</book>
..
Book
</ bookstoreAmazon>
Java Beans
reusable software components for
Java.
They are serializable, have a 0-

argument constructor, and allow
access to properties using getter and
setter methods.
JavaBean- Access textbox
value
package newpackage;
public String
getUsername()
public class NewClass
{return bookname;}
{
private String
bookname; public String name()
{String str=
getUsername() ;
public NewClass()
System.out.println("Sur
{bookname = null;} name"+ str);
return str;
public void }
setUsername( String
name )
Accept value from the user
entered in the textbox (Used in login)
<%@ page language="java"
import="java.sql.*" %>
<jsp:useBean id="mybean"
scope="page"
class="newpackage.NewClass" />
<jsp:setProperty name="mybean"
Username
property="*" />
Servlets Server side
programming
To assist the user to interact (through data retrieval) with the UI
Example Functions and Servlets for Online Book Store.

JSP - A JSP page is "translated" into
java code and then compiled into a
servlet.
Use jsp when you have some (html or
other) display component
More specific
Thank You

Web Tech Apps June 2015

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Tech Apps June 2015

Hochgeladen von

Copyright:

Verfügbare Formate

Application based teaching

1. HTML Static web pages

The WWW was proposed in 1991

The Internet is a collection of computers or

The Web is a collection of documents that

To find out the travel distances Members Login New

Hyderabad Mumbai 703 km

Enter your name: <input type="text"

They are serializable, have a 0-

Example Functions and Servlets for Online Book Store.

Das könnte Ihnen auch gefallen