chuong6 hung hethongweb&html

7/28/2019 Chuong6 HUNG HeThongWeb&HTML

1/78

H thng World Wide Web& Lp trnh Web chy pha clientdng DHTML v JavaScript

Nguyn Quang HngE-mail: [email protected]

Website: www.dit.hcmut.edu.vn/~hungnq/courses.htm
mailto:[email protected]:[email protected]


2/78

Faculty of Information Technology, HCM University of Technology

Mc tiu bui hc (3 tit)

1. Tm hiu v h thng World Wide Web:a. M hnh hot ng: Web browser/Web server

b. HyperText TransferProtocol (HTTP)

c.

HyperText Markup Language (HTML)2. Lp trnh Web chy pha client bng

DHTML v Javascript, Java Applet, XML

3.

Bi tp: to ng dng VnIE cho phpduyt Web nh mt trnh duyt thngthng.


3/78


Gii thiu mng Internet

Mng LAN (Local Area Network) Mng cc b c bn knh gii hn v mt a l Tc truyn d liu cao

Mng WAN (Wide Area Network)

Mng ni kt cc mng LANs, khng gii hn v mta l. C tc truyn tng i thp

Mng Internet l mng my tnh ton cu, kt nicc mng ca cc t chc, c nhn trn th gii Cc dch v ph bin trn Internet: web, e-mail, chat,

FTP,


4/78


Gii thiu h th ng World Wide Web(WWW)

M hnh hot ng: Web client/Web server

Web client Web serverHTTP


5/78


H thng WWW gc nhn lp trnh

Web server lng nghe port 80 (port mcnh)

Web browser v web

server s to 1 cu ni

TCP trao i thng tin;v dng giao thc HTTP(HyperText Transfer

Protocol) truyn ti

nguyn web (web page,

image, order data, credit

card).


6/78


Cc phn t trong h thng WWW

Web server:chng trnh qun l mt cy th bc cctrang Web v phc v yu cu truy xut chng t cc clientt xa. VD: Apache Http server, IIS, PWS

Web Browser:chng trnh giao tip vi ngi dng, nhn

yu cu t user ri truy xut trang Web server tng ng phn gii v hin th ni dung ln mn hnh. VD:firefox, IE, Mozilla

Web page:n v gi nhn gia Web server v Web client,n l 1 file vn bn c vit bng ngn ng HTML,DHML, XML


7/78


CU TRC MT GIAO DCH HTTP 1.x

Bc 1: HTTP client m kt ni n HTTPserver Bc 2: HTTP client gi request message

n HTTP server Bc 3: HTTP server trresponse mesagev cho HTTP client, cha resource m

HTTP client yu cu Bc 4: HTTP server ng kt ni Lu : HTTP 1.1 cn cho php keep-alive

trn cu ni TCP ny


8/78


V d v mt HTTP request/response Client: GET http://www.w3c.org/index.html HTTP/1.1

From: [email protected]

User-Agent: HTTPTool/1.0

[blank line here]

Server: HTTP/1.0 200 OK

Date: Fri, 31 Dec 1999 23:59:59 GMT

Content-Type: text/html

Content-Length: 1354

[blank line here]


9/78


Uniform Resource Locator (URL)

a ch URL bao gm 3 phn: protocol, host vpath

V d:

http://www.hcmut.edu.vn/index.htm


10/78


Cc lnh trong HTTP 1.x

GET Ly ton b mt trang web.

POST

Gi d liu t web client v server. HEAD

Ch ly phn header ca mt trang web (phnth ) m khng cn ly nidung.

etc


11/78


Tham kho

RFC 1945-HTTP 1.0 RFC 2616-HTTP 1.1

www.jmarshall.com/easy/http/

www.w3.org
http://www.jmarshall.com/easy/http/http://www.jmarshall.com/easy/http/http://www.jmarshall.com/easy/http/http://www.w3.org/http://www.w3.org/http://www.jmarshall.com/easy/http/http://www.jmarshall.com/easy/http/http://www.jmarshall.com/easy/http/


12/78

HyperText Markup Language& Lp trnh trang web ng bngDHTML v Javascript

Nguyn Quang Hng

E-mail: [email protected]

http://www.dit.hcmut.edu.vn/~hungnq/courses.htm

Trch t tp slide mn Lp trnh mng ca T.S Nguyn Vn Hip Bmn CNPMKhoa CNTT HBK TPHCM


13/78


Mc tiu

Gii thiu v lp trnh web Tm hiu v ngn ng nh du siu vn

bn (HTML HyperText Markup

Language)


14/78


Mc lc

Lch s Cc th (tag) cn bn

Hng pht trin


15/78


Gii thiu v lp trnh web

Cc c im ca ng dng web Khng phi l mt ng dng c lp, l ng

dng chy trn nn web-server.

Ngi lp trnh c th thc hin cc thao tctrn ng dng web nh vi mt ng dng clp.

C th ly thng tin t user.


16/78


Lch s v HTML

1989: d n ngh ca CERN v WWW 1992: phn cc lp c bn

[email protected]

Cc trnh duyt ban u rt kh ci t

1993: NCSA Mosaic released, Web ctcnh bay xa


17/78


The Internet Engineering Task Force (IETF)

07/93: Internet Draft for HTML+ 11/95: RFC1866 - HTML 2.0

11/95: RFC1867 - Form-based file Upload

03/95: HTML 3.0 Draft n nh hn HTML2.0

05/96: RFC1942 - HTML Tables

01/97: RFC2070 - Internationalization of

HTML

Sau 96: IETF HTML WG ng li


18/78


W3C tip qun chun HTML

12/95: W3C hp cc nh cung cp chnh yu. Cng vic ban u trn tiu ch m hnh i tng

thng thng:

Tip ni a ra cc nt c bn ca HTML.

01/97: W3C cng b HTML 3.2 (khuyn co).

12/97: W3C cng b HTML 4.0 (khuyn co).

05/98: W3C workshop v tng lai ca HTML. 02/99: XHTML draft


19/78


Cc thch thc ca HTML

Thiu h thng trong ngn ng ny. Nhiu dng trnh duyt mi nh: Digital

TV, Handheld, phone v car

Cc client n gin cn tp con ca HTML Cc client phc tp cn m rng HTML

HTML c kt hp vi tp cc th khv Ton, ha, E-Commerce, Metadata.

XHTML, XML, DHTML

yper ex ar up anguage


20/78


yper ex ar up anguage(HTML)

L mt ngn ng nh du siu vn bn. S dng cc th (tag) nh dng: vn bn,

on vn, hnh nh, file m thanh, Java

applet, i tng nh file Word, Excel,JavaBean

Cho php chn cc on m script nh

JavaScript thc thi ti trnh duyt (browser). L nh dng chun cho trang web.

M rng: XML, WSDL/SOAP


21/78


HyperText Markup Language (tip)

Cc trang web l ti liu dng HTML khitn file vt l l:

*.html, *.htm

V d: index.html, index.htm, courses.htm

Lu :

Cc ti nguyn Web c yu cu bng HTTP requestc th l mt file nh phn, mt trang JSP/Servlet hay

ASP.NET


22/78


Mt s th c bn ca HTML


23/78


Mt s th c bn ca HTML (tip)


24/78


V d: mt trang hello.htmn gin1.

2. 3.

4. Hello World

5.

6.

7.

8. Hello world !!! Welcome to HyperText Markup Language(HTML) world !!!

9.

This is a paragraph. You can type any text here.

10.

11.

Show Me
http://localhost/var/www/apps/conversion/tmp/scratch_10/hello.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_10/hello.htm


25/78


V d: th 1.

2. V d v th TABLE 3.

4. Row 1, column 1

5. Row 1, column 2

6. Row 1, column 3

7. 8. Row 2, column 1

9. Row 2, column 2

10. Row 2, column 3

11.

12. Row 3, column 113. Row 3, column 2

14. Row 3, column 3

15.

16.

17.Show Me
http://localhost/var/www/apps/conversion/tmp/scratch_10/thetable.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_10/thetable.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_10/thetable.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_10/thetable.htm


26/78


Mt s th HTML khcy l mt nh

y l dng ch bnh thng.

y l on in m. y l on innghing. y l on gch di.

y l mt list box control:

List item 1

List item 2List item 3


27/78


Mt s th HTML khc (tip)

Th to lin kt:


28/78


Mt s th d v trang web


29/78


Mt s th d v trang web (tip)


30/78


Dng cng c to cc trang Web

Microsoft Visual InterDev 6:

HTML, ASP

Microsoft Visual Studio.NET 2003:

HTML, ASP.NET, ASP.NET Webservice, C#, C++

Microsoft Frontpage

HTML

Jbuilder

HTML, JSP, Java Servlet, Java EJB

Macromedia Dreamweawer MX 2004

HTML, ASP, JSP, ASP.NET

EditPlus

Notepad/Wordpad/Unix VIM

.


31/78


o rang e ng sua n er ev6

To trang Web b ng Visual Studio NET


32/78


To trang Web b ng Visual Studio.NET2003


33/78


To trang Web bng EditPlus

Bi tp - ng dng trnh duyt Web n


34/78


Bi tp - ng dng trnh duyt Web ngin

Bi tp ny nhm gip bn lm quen vi quy trnh pht

trin ng dng dng Single Document Interface - SDI bngVC++.

Vit 1 trnh duyt Web n gin c giao din sau:


35/78


URL encoding

V d:This

is

atext

Sau khi URL encoding l: This%0D%0Ais%0D%0Aa%0D%0Atext%0D

%0A


36/78


HTML FORM

Cu trc c bn ca mt HTML FORM


37/78


HTML FORM (tip)

Cc loi (type) INPUT

SUBMIT: truyn d liu form n ng dng web

C php: RESET:a ni dung ca form tr v gi tr ban u

C php:


38/78


HTML Formmt v d1.

2. A SIMPLE HTML FORM SAMPLE

3.

4.

5.

6. First name:

7. Last name:
8. email:

9.


39/78


HTML FORM (tip)

Cc loi (type) INPUT RATIO: chn la mt trong nhiu

C php:

Option 1

Option 2

Option 3


40/78


Cc loi (type) INPUT CHECKBOX: la chn mt hoc nhiu

C php:

V d:


41/78


Cc loi (type) INPUT HIDDEN: d liu khng hin th

C php:

Nhp vng vn bn: TEXTAREA default text

HTML FORM (tip)


42/78


La chn listbox: SELECT

[


43/78


Cc trang HTML c th c lp trnh thchin cc thao tc thc thi trn web client.

Cc phng php ph bin lp trnh hin nay:

Script (Javascript, Vbscript)

Java Applet

ActiveX Control

XML

AJAX

Lp trnh Web pha client


44/78


C php cho mt on code Javascript

//cc khai bo bin[varvariable;]*

//cc lnh gi hm v cc hmfunctionfunction-name([agrv]*){

//cc cu lnh khai bo v thc thi[return [value];]

}

S dng file Javascript (*.js) c

Lp trnh Web pha client (tip)


45/78


Cc i tng c xy dng sn trongJavaScript

window: cha cc thuc tnh lin quan n ca

s hin thi document: cha cc thuc tnh trong trang web

location: cc thuc tnh v a ch trang web

history: cc thuc tnh v v tr m web browser n



46/78



Mi phn t trong trang HTMLu cth coi l mt i tng, c th khai bo skin gi hm Javascript.

C php


47/78


Cc s kin c th dng onClick: click chut vo i tng.

onFocus: focus vo i tng trong form.

onMouseOver: di chuyn chut vo trn i tng. onMouseOut: di chuyn chut ra khi i tng.

onChange: thay i gi tr ca cc i tng cha vnbn.

onBlur: chuyn focus khi i tng trong form. onSelect: chn phn t trong listbox.

onLoad: xy ra khi mt document c load.



48/78


Kim tra phn t SELECTvar select_value;function dropDownMenu() {

varmyindex=document.forms[0].menu.selectedIndex;

if (myindex==0) {alert("\nYou must make a selection from thedrop-down menu.");

document.forms[0].menu.focus();

}

else {select_value=document.forms[0].menu.options[myindex].value;

return true;

}}



49/78


Kim tra thng tin a ch E-mail nhp vofunction isEmail() {

if (document.forms[0].elements[1].value == '') {

alert ("\n The E-Mail field is blank. \n\n +

Please enter your E-Mail address.")

document.forms[0].elements[1].focus();

return false;}

if (document.forms[0].elements[1].value.indexOf ('@',0) ==-1 ||

document.forms[0].elements[1].value.indexOf ('.',0) == -1){

alert ("\n The E-Mail field requires a \"@\" and a \".\""+

"be used. \n\nPlease re-enter your E-Mail address.")document.forms[0].elements[1].select();

document.forms[0].elements[1].focus();

return false;

}

return true;

}



50/78


DHTML l trang HTML c cha cc onm JavaScript to cc hiu ng, thay i ccphn t trong trang HTML.

DHTML kt hp gia HTML, Javascript vCascading Style Sheets(CSS).

CSS l s kt hp gia cc tags HTML v

style. Style c th cha nhiu thuc tnh.

Dynamic HTML (DHTML)


51/78


Mi tags HTML u c style. Javascript cth da trn cc bin c thay i ccthuc tnh ca style.

Mi phn t trong trang HTML u c thc gn ID (khc vi name) v c ccthuc tnh style.

C th dng tag Mi web browser c th thc thi mt s lnh

khc nhau.

DHTML (tip)


52/78


Pht hin loi web browser Dng cc thuc tnh appName v appVersion

ca i tng navigatorvar browser_name= navigator.appName;

var browser_version = navigator.appName;

alert(You use browser +browser_name+ version+ browser_version);

Phn bit hai loi chnhif(document.all){ //IE

the_div=eval(window.document.all.+div_name+.

style);}else if(document.layers){//Netscape

the_div=eval(window.document.all.+div_name);

}

DHTML


53/78


Javascipt example about timer


54/78


Javascipt example about timer


55/78


function get_images(number){

var newNum= Math.floor(number);return "../images/"+newNum+".jpg";

}

-->

Timer :

000seconds

DHTML (tip)


56/78


L mt ng dng c vit bng Java, nhng trongtrang HTML.

Khi trang HTML c cha tag applet c gi, classapplet c ti v my client v thc thi trn my

client.

Mt ng dng applet phi tha k classjava.applet.Applet

C th thc hin cc thao tc nh mt chng trnhJava, tuy nhin b hn ch mt s chc nng v tnh

bo mt cho my client.

Java Applet


57/78


c web browser ti m(byte code) v myclient.

Method init() s c gi khi ng cc thngs.

Method start() c gi thc thi.

Method stop() c gi khi ngi dng thot khiapplet

Method destroy() c thc thi khi applet kt thc.

Hot ng ca mt Applet


58/78


//file SampleApplet.java

import java.applet.*; import java.awt.*;

public class SampleApplet extends Applet {

String text = "error"; int x = 0; int y = 20;

public void init() {

text = getParameter("text");

try { x =Integer.parseInt(getParameter("x"));

y = Integer.parseInt(getParameter("y"));}catch(NumberFormatException ex){ }

}

public void paint(Graphics g) {

g.setFont(new Font("TimesRoman",Font.BOLD+

Font.ITALIC,36));

g.drawString(text,x,y);

}

}

V d v mt Java applet


59/78


Using the Applet Tag

An Applet that Displays Text at a DesignatedLocation

Text displayed by browsers that are not Java-

enabled.

V d v mt Java applet


60/78


ActiveX Control

Cho php to cc hiu ng ng trn trang webchy pha trnh duyt.

Tng t nh Java Applet, c vit bi cc cngngh ca Mircosoft.


61/78


Ti liu tham kho

HTML Homepage on W3c

http://www.w3.org/MarkUp/

HTML ver 4.0:

http://www.w3.org/TR/REC-html40/

HTML Form

http://www.w3.org/TR/REC-html40/interact/forms.html Dave Raggetts Introduction to HTML

http://www.w3.org/MarkUp/Guide/Overview.html

http://www.w3.org/MarkUp/Guide/Advanced

http://www.w3.org/MarkUp/Guide/Style.html

Javascript & DHTML http://javascript.internet.com/

http://www.dynamicdrive.com/
http://www.w3.org/TR/REC-html40/interact/forms.htmlhttp://www.w3.org/MarkUp/Guide/Advancedhttp://www.w3.org/MarkUp/Guide/Style.htmlhttp://www.w3.org/MarkUp/Guide/Style.htmlhttp://www.w3.org/MarkUp/Guide/Advancedhttp://www.w3.org/TR/REC-html40/interact/forms.htmlhttp://www.w3.org/TR/REC-html40/interact/forms.htmlhttp://www.w3.org/TR/REC-html40/interact/forms.html


62/78


Gii thiu h thng Web Gii thiu lp trnh Web

Lp trnh Web pha Client

Javascript

DHTML

Tng kt


63/78


Tho lun

Vi h d W b i


64/78


Vit mt trnh duyt Web n gin

m r n uy e n g n( i )


65/78


uy e g(tip)

Tmenu File.New chnloidn l MFCApplicationv t tn l

VnIE

m r n uy e n g n(ti )


66/78


y g(tip)

Chnloingdng l Single Document Interface (SDI) vishtr

kin trc MFC Doc/View



67/78


y g(tip)

Chnmcnh trong MFC AppWizard bc 2 v 3 ny



68/78


y g(tip)Bc 4: Chn toolbar kiu Internet Exployer ReBars

Bc 5: Mcnh



69/78


y g(tip)

Bc 6: i lpc s ca lpCVnView tCview thnhCHtmlView



70/78


y g(tip)

Bc cui cngxem cc thng tintm tt v chnOKhoc Cancel.



71/78


y g(tip)

Thit k giao din chochng trnh v thitlp cc thuc tnh chocc phntgiao din

Ch h M


72/78


Chnh sa cc Menu

Chn VnIE resources v chnchnhsa Menu ti IDR_MAINFRAME.

Xo hoc thm cc lnh vo menu.

Ch h M (ti )


73/78


Chnh sa cc Menu (tip)

Chnh sa Men Vie


74/78


Chnh sa Menu View

Chn menu View

Chn Fonts c thuc tnhPop-up.

To cc options sau trong

View: Stop c thuc tnh bng

ID=ID_VIEWSTOP, vthuc tnh Caption =Stop

Refresh c thuc tnh bngID=ID_VIEWREFRESHv Caption = Refresh

Chnh sa Menu View


75/78


Chnh sa Menu View

Chn li mc Fonts, thmcc options sau vo menu

con ca n:

Largest: c thuc tnh l

ID_VIEW_FONT_LARGEST v thuc tnh Caption =Largest

Tng t cho Large,Medium, Small v Smallest

c ID_VIEW_FONT_XXX.

Menu Fonts c dng hnhbn.

To menu Go Favorites


76/78


To menu Go, Favorites

Thm menu IDR FONT POPUP


77/78


Thm menu IDR_FONT_POPUP

Chn vo Insert/Resource to mt menu mi.

t tn menu mi lIDR_FONT_POPUP v

copy mc Fonts trongView v dn qua menu

ny.


78/78

Thay i mcAddress:

Tn ca n lComboEx

chuong6 hung hethongweb&html

Documents