Advanced Programming Web Programming

Advanced ProgrammingWeb Programming

Rabie A. Ramadan

2

"A complex system that works is invariably found to have evolved from a simple system that worked....

A complex system designed from scratch never works and cannot be patched up to make it work.

You have to start over with a working simple system." - John Gall in Systemantics: How Systems

Really Work and How They Fail

The problem

3

Knowledge of these simple mechanisms does not come easy.

It usually resides in the minds of experienced developers and architects.

It is an important part of the tacit knowledge they bring to projects.

Patterns for Building Enterprise Solutions

4

What Is A Pattern?

Pattern Descriptions Help Architects And Designers By…

5

Documenting simple mechanisms that work

Providing a common vocabulary and taxonomy

Enabling solutions to be described concisely as combinations of patterns

Enabling reuse of architecture, design, and implementation decisions

Example

6

You are building a quote application, which contains a class that is responsible for managing all of the quotes in the system. It is important that all quotes interact with one and only one instance of this class. How do you structure your design so that only one instance of this class is accessible within the application?

A simple solution to this problem is to create a QuoteManager class with a private constructor so that no other class can instantiate it. This class contains a static instance of QuoteManager.

Patterns at Different Levels

8

You are designing a Web-based quote application containing a great deal of business and presentation logic, which, in turn, depends on numerous platform software components to provide a suitable execution environment. How do you organize your system at a high level to be flexible, loosely coupled, and yet highly cohesive?

One solution to this problem involves organizing your system into a series of layers.

one layer each for presentation, business logic, and data access.

Patterns at Different Levels (layers pattern)

9

Three-Layered Application pattern

11

In addition to managing complexity by decomposition (the essential problem solved by Layers), business solution developers also need to organize for effective reuse of business logic and conserve valuable connections to expensive resources such as databases.

One way to solve this problem is by using the Three-Layered Application pattern.

Organizing Patterns

13

Today there are dozens of patterns related to software with more emerging daily.

This abundance of patterns creates a new set of challenges.

How can a developer identify those patterns that are most relevant to the task at hand?

Is the collection of patterns sufficient to describe complete solutions?

Pattern of Patterns

14

The base element of object-oriented programming is a class.

However, a single class is not very meaningful apart from its relationship to other classes that make up the solution.

Each pattern typically describes a cluster of classes, highlighting the relationships and interactions between them.

Pattern of Patterns

15

To begin organizing patterns according to relationship, visualize a set of patterns as small circles

Pattern of Patterns

16

If you draw a line between each pair of patterns that share some relationship, you get a picture like this

Pattern Clusters

17

Charting the relationships between patterns helps you navigate from one pattern to a set of related patterns.

However, it does not yet tell you where to start.

Example: if you are building a Web application, should

you read the Model-View-Controller pattern first or should you look at Page Cache instead? Should you look at a Broker as well?

Pattern Clusters (microsoft.net)

18

Different Levels of Abstraction

19

Architecture Patterns • provides a set of predefined

subsystems, specifies their responsibilities, and includes rules and guidelines for organizing the relationships between them.

Design Patterns • "A design pattern provides a

scheme for refining the subsystems or components of a software system, or the relationships between them


20

Design Patterns • "A design pattern provides a

scheme for refining the subsystems or components of a software system, or the relationships between them.


21

Implementation Patterns :• refers to more detailed,

programming-language-specific patterns.

• The scope of this guide is not just software, but software-intensive systems, including the deployment of the software onto hardware processing nodes to provide a holistic business solution.

Viewpoints

22

Viewpoints

23

Web Presentation Cluster

24

Model-View-Controller

25

How do you modularize the user interface functionality of a Web application so that you can easily modify the individual parts?

• User Interface changes more frequently

• Same data displayed different ways

• Different skill sets required for UI design and App dev

Separate the modeling of the domain, the presentation, and the actions based on user input into separate classes

Model - manages the behavior and data of the application domain

View - display of information Controller - interprets the mouse

and keyboard inputs

Behavior of the passive model (Example)

26

The controller modifies the model and then informs the view that the model has changed and should be refreshed.

In HTTP: • There is no simple way in the browser to

get asynchronous updates from the server.

• The browser displays the view and responds to user input, but it does not detect changes in the data on the server.

• Only when the user explicitly requests a refresh is the server interrogated for changes.

Behavior of the active model

27

The model changes state without the controller's involvement.

Other sources are changing the data and the changes must be reflected in the views.

Example: • Consider a stock-ticker display. You receive stock data from an external

source and want to update the views (for example, a ticker band and an alert window) when the stock data changes. Because only the model detects changes to its internal state when they occur, the model must notify the views to refresh the display.

28

HTML Basics HTML Basics

Basic HTML Document Format

29

<HTML><HEAD> <TITLE>WENT'99</TITLE></HEAD><BODY> Went'99 </BODY> </HTML>

<HTML><HEAD> <TITLE>WENT'99</TITLE></HEAD><BODY> Went'99 </BODY> </HTML>

See what it looks like:

HTML 5 Parsing

30

Reverse engineering current browsers Compatible with existing browsers and web

pages Thoroughly defines error handling

<header>

<footer>

<section><nav> <aside>

<article>

<div id="header">

<div id="footer">

<div id="content"><divid="nav">

<divid="right">

<div class="article">

New Structures

<progress>

<canvas>

Rating:

<meter>

<dialog><time><m><menu><command><embed><figure><details>And many more…

New Semantics

<datagrid>

<input type="datetime">

<input type="number"><input type="range"><input type="email"><input type="url">

And many more…

<input type="text" list="list"><datalist id="list"> <option value="Mr"> ...</datalist>

New Controls

Repetition Model

Add Team MemberAdd Team Member

Team Members

NameRank

Jack O'NeillJack O'Neill RemoveColonelColonel

RemoveSam CarterSam CarterMajorMajor

RemoveDaniel JacksonDaniel JacksonCivilianCivilian Remove

ContinueRemoveTeal’cTeal’cAlienAlien

<tr repeat-template="member" repeat="0"> <td><input type="text" name="member0.rank"></td> <td><input type="text" name="member0.name"></td> <td><button type="remove">Remove</button></td></tr><tr repeat-template="member" repeat="1"> <td><input type="text" name="member1.rank"></td> <td><input type="text" name="member1.name"></td> <td><button type="remove">Remove</button></td></tr><tr id="member" repeat="template" repeat-start="2"> <td><input type="text" name="member[member].rank"></td> <td><input type="text" name="member[member].name"></td> <td><button type="remove">Remove</button></td></tr>

<tr id="member" repeat="template" repeat-start="2"> <td><input type="text" name="member[member].rank"></td> <td><input type="text" name="member[member].name"></td> <td><button type="remove">Remove</button></td></tr>

<button type="add" template="member">Add Team Member</button>

Required Fields<input type="email" required="required">

Regular Expressions<input type="text" pattern="[A-Za-z0-9_\-]+">

Minimum and Maximum Values<input type="range" min="20" max="80">

MaxLength for textarea<textarea maxlength="2000"></textarea>

And many more…

Client-Side Form Validation

XML Technologies and Applications

36

Sample XML Data

37

<orders>

<order>

<onum>1020</onum>

<takenBy>1000</takenBy>

<customer>1111</customer>

<recDate>10-DEC 94</recDate>

<items>

<item>

<pnum>10506</pnum>

<quantity>1</quantity>

</item>

<item> <pnum>10507</pnum> <quantity>1</quantity> </item> <item> <pnum>10508</pnum> <quantity>2</quantity> </item> <item> <pnum>10509</pnum> <quantity>3</quantity> </item> </items></order>...</orders>

Sample Data

<orders>

<order>

<onum>1020</onum>



<recDate>10-DEC 94</recDate>

<items>

<item>

<pnum>10506</pnum>


</item>


startDocument

endDocument

Parsing Event

Sample Data

<orders>

<order>

<onum>1020</onum>



<recDate>10-DEC-94</recDate>

<items>

<item>

<pnum>10506</pnum>


</item>


startElement

endElement

Sample Data

<orders>

<order>

<onum>1020</onum>



<recDate>10-DEC-94</recDate>

<items>

<item>

<pnum>10506</pnum>


</item>


characters

XML-Parsing Standards

41

Two parsing methods that implement W3C standards for accessing XML

SAX (Simple API for XML)

• event-driven parsing

• “serial access” protocol

• Read only API

DOM (Document Object Model)

• convert XML into a tree of objects

• “random access” protocol

• Can update XML document (insert/delete nodes)

SAX Parsers

SAX Parser

When you see the start of the document do …

When you see the start of an element do … When you see

the end of an element do …

<?xml version="1.0"?>...

The DOM Tree

43

Document

countries

country

Asia

continent

Israel

name

year

2001

6,199,008

population

city

capital

yes

name

Jerusalem

country

Europe

continent

France

nameyear

2004

60,424,213

population

city

capital

no

name

Ashdod

Using a DOM Tree

44

DOM Parser DOM TreeXML File

API

Application

Node Navigation

45

getFirstChild()

getPreviousSibling()

getChildNodes()

getNextSibling()

getLastChild()

getParentNode()

SAX vs DOM Parsing: Efficiency

46

The DOM object built by DOM parsers is usually complicated and requires more memory storage than the XML file itself

A lot of time is spent on construction before use

For some very large documents, this may be impractical

SAX parsers store only local information that is encountered during the serial traversal

Hence, programming with SAX parsers is, in general, more efficient

Servlet

47

What is a Servlet?

48

A Servlet is a Java program that extends the capabilities of servers.

Inherently multi-threaded.• Each request launches a new thread.

Input from client is automatically parsed into a Request variable.

Servlet Life Cycle

49

Servlet Instantiation: Loading the servlet class and creating a new instance

Servlet Initialization: Initialize the servlet using the init() method

Servlet processing: Handling 0 or more client requests using the service()

method Servlet Death:

Destroying the servlet using the destroy() method

Handler Functions

50

Each HTTP Request type has a separate handler function.

• GET -> doGet(HttpServletRequest, HttpServletResponse)

• POST -> doPost(HttpServletRequest, HttpServletResponse)

• PUT -> doPut (HttpServletRequest, HttpServletResponse)

• DELETE -> doDelete (HttpServletRequest, HttpServletResponse)

• TRACE -> doTrace (HttpServletRequest, HttpServletResponse)

• OPTIONS -> doOptions (HttpServletRequest, HttpServletResponse)

A Servlet Template

51

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;

public class ServletTemplate extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Use "request" to read incoming HTTP headers // (e.g. cookies) and HTML form data (e.g. data the user // entered and submitted). // Use "response" to specify the HTTP response status // code and headers (e.g. the content type, cookies). PrintWriter out = response.getWriter(); // Use "out" to send content to browser }}

Hello World Servlet

52

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;

public class HelloWWW extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html");

PrintWriter out = response.getWriter();out.println("<HTML>\n" + "<HEAD><TITLE>Hello WWW</TITLE></HEAD>\n" + "<BODY>\n" + "<H1>Hello WWW</H1>\n" + "</BODY></HTML>");

}}

Reference

53

• http://msdn.microsoft.com/en-us/library/ff647095.aspx

• Assignment • Use the code presented in section “19.12 Session Tracking” to show how to

create sessions using servelte

Advanced Programming Web Programming

Documents

Transcript of Advanced Programming Web Programming