Lec 1-2. Tong Quan Ve Cong Nghe Lap Trinh Web

8/12/2019 Lec 1-2. Tong Quan Ve Cong Nghe Lap Trinh Web

1/14

1/22/2014

1

Bi gingCng nghWeb v Dchvtrctuyn

Cng nghlptrnh Web

Gingvin: TS. Nguyn Bnh [email protected]

Nidung

Kintrc ng dng web client-serverCng nghlptrnh pha client Javascript, Flash, Applet

Cng nghlptrnh pha server CGI, Server page, Servlet

M hnh lptrnh MVCLptrnh Ajax

Bi ging Cng nghWeb v dch vtrc tuyn2

M hnh Client-Server ngdngServer

Qunl v duy tr dliubao gmDliu ngidng

Dliu ng dng Cung cpcc dchvxl dliu Tptrung ha dliu Qunl xc thc,phn quyntruy cp

dliuthng qua cchlogin
mailto:[email protected]:[email protected]:[email protected]:[email protected]


2/14

1/22/2014

2

ngdngClient

Cung cpgiao dinngi dng

C thlutrmt sdliunh(dng cookie) C thxl dliu(v dkimtra

tnh hp lcadliudo ngidng nhp)Thin-Client: chcung cp giao din,

x l d liu hon ton tp trung

Thick-Client: thchin c cc thaotc x l dliu nghip vti client

C thtruy cpmi ni khng cnci tng dng

uimcaClient-Server

Lutr,xl dliutptrung. Gimthiuchiph pht trinv duy tr hthng

Khng c dthadliu Tng cng khnng chia sdliu

Nu d liu cphn chia nhiu h thng ngidng th kh nng chia s d liu ph thuc nhiuvo thit k d liu ti mi h thng khc nhau.

Kintrc 3 tng (3-Tiered Systems)

Database Tier(Database Server)

Lutrv truy cpd

liumcthp Server Tier

(Application Server)

Qunl cc ktnicangdngv xl dliu

Client Tier

Cung cpgiao dinvmtsxl

uimkintrc 3 tng

Csdliutptrung c thc truy cpbinhiuserver ng dng khc nhau

Cho php phn tiqunl ktni ngi dngtrn nhiuserver ng dng

Database Server c thitkvi phncngcth cho cng viccan Thao tc dliu:Update, Insert, Remove, etc. Cnnhiucngc tin cyv bnhxl

Application Servers c thitkhtrktni ngi dng v chynhiung dng khcnhau Cnnhiuscmnhtnh ton caCPU


3/14

1/22/2014

3

Ngn nglp trnh

Client Server Database

Html Java, Ruby SQL

JavaScript Visual Basic NoSQL

Flash PHP, Perl

Python

JavaScript Programming

Event Handling

Statements (like C / Java)

OperatorsVariables global (default)

Or local (e.g. var x = 1)

Types can change Eg. x = 1; x = Hello

Function definition (reuse)

Message Alerts

Page element access with Document Object Model Views HTML page as a tree of elements

Hello World Example

This provides an annoying popup try it!

Search on Google

'Follow link to search on Google')

What Are Applets?

An applet is a special Java program that can beembedded in HTML documents.

It is automatically executed by (applet-enabled)

web browsers.In Java, non-applet programs are called

applications.

12
http://www.google.co.uk/http://www.google.co.uk/


4/14

1/22/2014

4

Application vs. Applet

Application Trusted (i.e., has full access to system resources) Invoked by Java Virtual Machine (JVM, java), e.g.,

java HelloWorld

Should contain a main method, i.e.,public static void main(String[])

Applet Not trusted (i.e., has limited access to system resource to

prevent security breaches)

Invoked automatically by the web browser Should be a subclass of class java.applet.Applet

13

Examples

HelloWorld.java

public class HelloWord {public static void main(String[] args) {

System.out.println(Hello, World!);

}

}

HelloWorldApplet.java

14

First Java Applet

Java source in HelloWorldApplet.java

import ja va.awt.*;import java.applet.Applet;public class HelloWorldApplet extends Applet {

public void paint(Graphics g) {Dimension d = getSize();g.setColor(Color.BLACK);g.fillRect(0, 0, d.width, d.height); // paint backgroundg.setFont(new Font("San-serif", Font.BOLD, 24));g.setColor(new Color(255, 215,0));g.drawString("Hello, world!", 60, 40);g.drawImage(getImage(getCodeBase(), Rabbit.jpg"),

20, 60, this);}

}

15

Ngn nglp trnh pha server

Java uses Java servlets, Java Server Pages(JSP) and Java beans.

Ruby on Rails uses ruby programs and

Embedded Ruby (ERB). Visual Basic Uses VB programs and Active

Server Pages (ASP).

Others

PHP (Personal Home Pageoriginally) CGI (Common Gateway Interface) Perl (Named after the parable of the pearl) Python (Named for the Monty Python skits) Tcl (Tool Command Language)


5/14

1/22/2014

5

PHP

Hacky, but (also?) very c-like

Classes, etc., work very much like c/c++

Designed to work in the world of HTML

Is run-time interpreted by the web server

Exception: those running Zend Cache

We sure wontbe

Reminder: itshacky

Simple PHP

PHP is meant to be invoked inline with content

Pageescapesinto and out of a regular html

documentFile extension is .php (was .php3 for version 3)

A quick example

Test page

The time is now

A quick example

Test page

The time is now

here wejump intophp

here wejumpback out


6/14

1/22/2014

6

Java

Developed by James Gosling atSun Microsystems in 1991.

Java servlets on the servercontrol the flow between theclient and the database.

JSP (Java Server Pages) can beembedded in the html on theweb page. They are compiledinto servlets before they areexecuted.

Java server pages are connectedto Java beans on the server.The beans handle the requestsand responses.

Hello World

HelloJSP

HelloWorld:

See also: Date_jsp.javathe Servlet this pageis translated to

Date_jsp.java (extract)

This extract shows the part that produces the output compare it with the JSP:

out = pageContext.getOut();

_jspx_out = out;

out.write("\r\n");out.write(" ");

out.write(" Hello JSP ");

out.write(" ");

out.write("\r\n");

out.write(" \r\n");

out.write("

Hello World:\r\n ");

out.print( new java.util.Date() );

out.write("\r\n");

out.write("
\r\n");
out.write("\r\n");

out.write("\r\n");

Produced


7/14

1/22/2014

7

Ruby on Rails

Ruby was developed byYukihiro Matsumoto in1993 and publicallyreleased in 1995.

It is a scripting languageand is fully objectoriented.

It combines Perl syntaxwith Smalltalk-likefeatures.

It is said to follow theprinciple of leastsurprise.

Ruby on Rails

Rails was developedby David

HeinemeierHansson andreleased as opensource in July 2004.

It is based on theMVC (model, view,controller) pattern.

Rails

Rails relies on a number of conventions.

JSP and Java beans have some conventions, butrails has a lot more.

Rails translates commands into SQL, savingprogrammers many hassles.

Somepiecesare stored separately and added toweb pages when required.

This includes web page headers, CSS (CascadingStyle Sheets) and JavaScript.

Connecting to a database

Most databases are standalone programs and sorequire that each time they are accessed, youmust set up a new connection.

For Java, the connection issun.jdbc.odbc.JdbcOdbcDriver

Odbc stands for open database connection,

Odbc is a protocol from Microsoft that is based on the X/OpenSQL specification.

InstantRails comes with SQLite3. It is part of theapplication and does not require a newconnection for each query.


8/14

1/22/2014

8

M hnh lp trnh MVC

14/04/2011

Model, View, Controller

Model - Database

Requests sent using SQL, Structured Query

Language. Response is either an array of data or a confirmation.

View Web page Requests sent using Html or embedded programming

code (JSP, ERB, ASP)

Controller Program on server Sits between the model and view. Receives requests from the view, sends them on to

the model and sends a response back to the view.

Most critical software and trickiest to write.

MVC in Rails

14/04/2011

How does it work?

Rails application is an application , not a set ofmostly static pages with a bit of script added in.

Rails apps generate the web pages they serve

Controller classes handle web requestsThe URL of a visitor's request maps to a controller

class and a method within the class

14/04/2011


9/14

1/22/2014

9

Non AJAX

Synchronous

AJAX

Asynchronous

Mastering AJAX in 5 min

DHTML + XmlHttpRequest + XML? = Ajax

Most people familiar with DHTML, XML, JS

XmlHttpRequest the new guy?

Very like a ServletRequest

Widely support: Internet Explorer 5.5+,Safari 1.2, Mozilla 1.0 / Firefox, andJavaScript cross browser defactostandard

Mastering AJAX in 5 min(cont)

Creating an XMLHttpRequest Object

For Mozilla, Firefox, Safari, IE 7:

var xmlhttp=new XMLHttpRequest() For Internet Explorer 5.5, 6, 7:

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Or

var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")


10/14

1/22/2014

10


if (xmlhttp)

{

xmlhttp.onreadystatechange=xmlhttpChange;xmlhttp.open("GET","http://www.somehost.com/test.htm",true);

xmlhttp.send();

}

function xmlhttpChange()

alert("Problem retrieving }

XML data");

{ //ifxmlhttp shows "loaded"

if(xmlhttp.readyState==4) { // if "OK"

if (xmlhttp.status==200) { // ...some code here... }

else {


The XMLHttpRequest Object Reference

Methods

void open(String method, String url, Boolean async) void send(String body)

void setHeader(String header, String value)

String getResponseHeader(String header)

String getAllResponseHeaders()

void abort()


Properties

Number readyState

Function onreadystatechange

String responseText

XmlDocument responseXML

Number status

String statusText

onreadystatechange is a function pointer


Understanding the readyState

0 = uninitialized

1 = loading

2 = loaded

3 = interactive

4 = complete Normally our logic is here

/ /
http://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htmhttp://www.somehost.com/test.htm


11/14

1/22/2014

11


GET/POST in AJAX

var postContent = "name=" +

encodeURIComponent("Jacky Liu") + "&email=" +encodeURIComponent("[email protected]");

GET

xmlhttp.open("GET", "somepage" + "?" + postContent, true);

POST(content in body and set header)

xmlhttp.open("POST", "somepage", true);

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//application/x-www-form-urlencoded; charset=UTF-8

xmlhttp.send(postContent);

Advanced Javascript - var

Everything can be a var

Primitive elements

ObjectAnd even function (this what the callbacks)

Eg:

Built in: window.alert(msg);

Var alertf = window.alert;

Alertf(msg);

Advanced Javascript Create Object

Method 1: flat array style quick object define

var myObject = {

username : beansoft ",

age : 24,

test : function() {alert(this.age);}

};


Method 2: using/extends JSObject

var myObject = new Object();

myObject.username = "beansoft";

myObject.age = 24;

/ /
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]


12/14

1/22/2014

12


Method 3: using constructor

function MyObject(username, age) {this.username = username;this.age = age;

this.test = function() {alert(this.age);};}

var myObject = new MyObject("beansoft", 24);

A member could be a function

Advanced Javascript Using Object

var myObject = new MyObject("beansoft", 24);

// Using: myObject.username,myObject["username"], myObject[0]

myObject.test();// Will display alert window, valueis age

myObject.username = "Hello";// Will asign theusername property to "Hello"

AJAX FRAMEWORKS & TOOLS

Frameworks

Why need frameworks (specifically for AJAX)?

Browser incompatibilities

Maintaining large pieces of common JavaScript code

Lack of standard (reusable) component

Lack of development tools

Many AJAX frameworks available

2006 Accenture. All rights 51

Atlas AjaxFaces (commercial*) Backbase (commercial)

Flash/JavaScriptIntegrationKit

Google AJAXSLT Java Studio Creator 2

Dojo Rico SACK


Frameworks

Backbase

Features:

Formalized UI declaration language: BXML

Single page interface (no page flipping)

Cross browser / cross platform

Based on W3C

Plug-ins available to Eclipse, Visual Studio & Dreamweaver

Expensive $1000s/CPU

2006 Accenture. All rights reserved.52

1/22/2014


13/14

1/22/2014

13


Frameworks

Backbase

How it works:

Backbase presentation client (BPC) loaded at page start up(boot.js)

BPC interprets



Frameworks

Java Studio Creator 2

BluePrints AJAX Components

Auto-CompleteText Field

Map Viewer Select ValueText Field

2006 Accenture. All rights reserved. 54


Frameworks

Atlas (Microsoft)

Integrated with ASP .NET 2.0

Not restricted to .NETclient centric

Free

Google AJA XSLT

Implementation of XSL-T in JavaScript

Fetch XMLs from server and transfer them into HTML

Flash/JavaScript Integration Kit

Access Flash



Frameworks

Dojo - Small, stable

Ricodrag & drop

SACKsmall wrapper / very light-weight

many more


1/22/2014


14/14

1/22/2014

14


Tools

JSDoc

a tool written in Perl that generates javadoc-like documents from JavaScript withjavadoc-like comments

Firefox 1.5:

HTML Validator, CSS Validator, DOM Inspector and more

JSLint

JavaScript validator: www.jslint.com

Obfuscation / compression tools

Make JavaScript hard to copy

Reduce network traffic

MemTronic's HTML/JavaScript Cruncher-Compressorhttp://hometown.aol.de/_ht_a/memtronic/


Cu hi

[email protected]

Bmn HTTT, VinCNTT&TT
http://www.jslint.com/http://www.jslint.com/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/mailto:[email protected]:[email protected]://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://hometown.aol.de/_ht_a/memtronic/http://www.jslint.com/http://www.jslint.com/http://www.jslint.com/http://www.jslint.com/http://www.jslint.com/http://www.jslint.com/http://www.jslint.com/http://www.jslint.com/http://www.jslint.com/

Documents

Lec 1-2. Tong Quan Ve Cong Nghe Lap Trinh Web