Lecture 5 Introduction to Electronics Rabie A. Ramadan [email protected]
Advanced Programming Web Programming Rabie A. Ramadan.
-
Upload
kelly-anthony -
Category
Documents
-
view
227 -
download
3
Transcript of Advanced Programming Web Programming Rabie A. Ramadan.
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.
7
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
10
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.
12
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
Different Levels of Abstraction
20
Design Patterns • "A design pattern provides a
scheme for refining the subsystems or components of a software system, or the relationships between them.
Different Levels of Abstraction
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>
<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>
startDocument
endDocument
Parsing Event
Sample Data
<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>
startElement
endElement
Sample Data
<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>
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