142353240 TTCN Web NguyenHoangAn Ngo Van Viet DoVanThanhNho DangNgocTrung

7/27/2019 142353240 TTCN Web NguyenHoangAn Ngo Van Viet DoVanThanhNho DangNgocTrung

1/22

ti: Nghin cu v xy dng Web mobile nghe nhc bng Jquery Mobile

Mc LcMc Lc 1

Chng I: C s l thuyt............................................................................5

I.Ngn ng HTML v CSS:........................................................................................ 5

II.Ngn ng PHP&MySQL:.......................................................................................5

III.Tng quan v javascript:.....................................................................................6

Chng II: Tng quan v JQuery................................................................8

I.Gii thiu v JQuery...............................................................................................8

I.1. Khi nim v JQuery:...................................................................................... 8

I.3. Ti sao phi dng JQuery................................................................................9

I.4. JQuery lm c nhng g..............................................................................9

II. Nguyn l hot ng ca JQuery.......................................................................10

II.1. C php v i tng..................................................................................10

II.2. iu khin CSS ca i tng.....................................................................10

II.3. Gn s kin v x l s kin........................................................................ 11

II.4. Mt vi hm API ph bin thng dng.......................................................11

Chng III: Tng quan v Jquery Mobile................................................12

I.c trng ca Web Mobile hin nay:...................................................................12

II. Gii thiu v Jquery Mobile :.............................................................................. 13

III.Khi nim v Jquery Mobile:..............................................................................14

IV.Cc tnh nng c bn ca Jquery Mobile:..........................................................14

V.H tr trnh duyt Jquery Mobile:.......................................................................15

VI.Tm hiu v Jquery Mobile.................................................................................15

VI.1. Jquery lm c nhng g:.........................................................................15

VI.2. Cc thnh phn trong Jquery Mobile:.........................................................16

Chng IV: Phn tch yu cu v trin khai h thng xy dng Demo..18

I.Phn tch yu cu h thng:................................................................................ 18

SVTH: Nguyn Hong An- ng Ngc Trung- Ng Vn Vit- Vn Thanh NhoPage 1


2/22


II.Trin khai h thng:...........................................................................................19

III.Chng trnh Demo...........................................................................................19

Chng V : Tng kt 21

I.u nhc im:...................................................................................................21

II. Hng pht trin:..............................................................................................21

III. Bng phn cng cng vic................................................................................22

Danh mc Bng - Hnh

Mc Lc 1

Chng I: C s l thuyt............................................................................5



3/22


I.Ngn ng HTML v CSS:........................................................................................ 5

II.Ngn ng PHP&MySQL:.......................................................................................5

III.Tng quan v javascript:.....................................................................................6

Chng II: Tng quan v JQuery................................................................8

I.Gii thiu v JQuery...............................................................................................8

I.1. Khi nim v JQuery:...................................................................................... 8

Hnh 1: Cc a ch c th s dng trc tip JQuery...............................................................................8

I.3. Ti sao phi dng JQuery................................................................................9

I.4. JQuery lm c nhng g..............................................................................9

II. Nguyn l hot ng ca JQuery.......................................................................10

II.1. C php v i tng..................................................................................10

Hnh 2: Bng lit k cc tiu ch chn i tng..................................................................................10

II.2. iu khin CSS ca i tng.....................................................................10

II.3. Gn s kin v x l s kin........................................................................ 11

II.4. Mt vi hm API ph bin thng dng.......................................................11

Chng III: Tng quan v Jquery Mobile................................................12

I.c trng ca Web Mobile hin nay:...................................................................12

II. Gii thiu v Jquery Mobile :.............................................................................. 13

III.Khi nim v Jquery Mobile:..............................................................................14

IV.Cc tnh nng c bn ca Jquery Mobile:..........................................................14

V.H tr trnh duyt Jquery Mobile:.......................................................................15

VI.Tm hiu v Jquery Mobile.................................................................................15

VI.1. Jquery lm c nhng g:.........................................................................15

Hnh 3: Bng tm tt cc thnh phn giao din.....................................................................................16

VI.2. Cc thnh phn trong Jquery Mobile:.........................................................16

Hnh 4: Cch s dng cc thuc tnh data-*............................................................................... ..........17

Hnh 5 : Mt s phng thc c trng ca $.mobile...........................................................................18



4/22


Chng IV: Phn tch yu cu v trin khai h thng xy dng Demo..18

I.Phn tch yu cu h thng:................................................................................ 18

II.Trin khai h thng:...........................................................................................19

III.Chng trnh Demo...........................................................................................19

Hnh 6 : Demo trn localhost................................................................................................................20

Hnh 7 : Demo trn phn mm gi lp mobile sau khi up ln host........................................................21

Chng V : Tng kt 21

I.u nhc im:...................................................................................................21

II. Hng pht trin:..............................................................................................21

III. Bng phn cng cng vic................................................................................22



5/22


Chng I: C s l thuyt

I. Ngn ng HTML v CSS:

HTML l vit tt ca Hyper Text Markup Language (Ngn ng nh du siuvn bn). Mt ti liu HTML thng c ui m rng l .html hoc .htm v tt nhin l 1 trang web. Cc trang HTML ni ring v cc trang web ni chung (.php,.asp, ...) c tnh cht ca mt vn bn nh cc file txt hay .doc ch c iu n phc tpv a dng hn. Cc trang web HTML c th c c bng cc trnh duyt web(Web Browse) khc nhau v ph bin nht l Internet Explorer (IE). Ngn ng HTMLc u im l rt n gin v c th chy tt vi nhiu h iu hnh v nhiu trnhduyt web khc nhau. Tuy mi trnh duyt do 1 hng khc nhau sn xut v c 1 cchbin dch trang web khc nhau nhng ni chung u cho 1 kt qu tng t nhau.Ngai ra HTML c san tho rt n gin, khng cn chng trnh chuyn dng,ch cn notepad hoc bt k chng trnh son tho vn bn no.

CSS l ch vit tt ca Cascading Style Sheets, n ch n thun l mt dng filetext vi phn tn m rng l .css. Trong Style Sheet ny cha nhng cu lnh CSS.Mi mt lnh ca CSS s nh dng mt phn nht nh ca HTML v d nh: fontca ch, ng vin, mu nn, cn chnh hnh nh v.v.. Trc y khi cha c CSS,nhng ngi thit k web phi trn ln gia cc thnh phn trnh by v ni dung vinhau. Nhng vi s xut hin ca CSS, ngi ta c th tch ri hon ton phn trnhby v ni dung. Gip cho phn code ca trang web cng gn hn v quan trng hnc l d chnh sa hn. C 3 cch nh dng trang web :

- Cc b code CSS c chn trc tip vo trong th HTM- Nhng vo trang web- Lin kt n mt file bit lp

II. Ngn ng PHP&MySQL:

PHP (vit tt hi quy "PHP: Hypertext Preprocessor") l mt ngn ng lp trnhkch bn hay mt loi m lnh ch yu c dng pht trin cc ng dng vit chomy ch, m ngun m, dng cho mc ch tng qut. N rt thch hp vi web v cth d dng nhng vo trang HTML. Do c ti u ha cho cc ng dng web, tc nhanh, nh gn, c php ging C v Java, d hc v thi gian xy dng sn phmtng i ngn hn so vi cc ngn ng khc nn PHP nhanh chng tr thnh mtngn ng lp trnh web ph bin nht th gii.

Hin nay phin bn tip theo ca PHP ang c pht trin, PHP 6 bn s dng

th c th c download ti a ch http://snaps.php.net. Phin bn PHP 6 ck vng s lp y nhng khim khuyt ca PHP phin bn hin ti, v d: h trnamespace (hin ti cc nh pht trin vn cha cng b r rng v vn ny); htrUnicode; s dng PDO lm API chun cho vic truy cp c s d liu, cc API cs b a ra thnh th vin PECL...

Rt nhiu nh pht trin ng dng v qun l d n c quan im rng PHP vncha sn sng cho cp doanh nghip (enterprise) v trn thc t, PHP vn cha xm

http://snaps.php.net/http://vi.wikipedia.org/wiki/Namespacehttp://vi.wikipedia.org/wiki/Unicodehttp://vi.wikipedia.org/w/index.php?title=PDO&action=edit&redlink=1http://vi.wikipedia.org/wiki/APIhttp://vi.wikipedia.org/wiki/APIhttp://vi.wikipedia.org/w/index.php?title=PECL&action=edit&redlink=1http://snaps.php.net/http://vi.wikipedia.org/wiki/Namespacehttp://vi.wikipedia.org/wiki/Unicodehttp://vi.wikipedia.org/w/index.php?title=PDO&action=edit&redlink=1http://vi.wikipedia.org/wiki/APIhttp://vi.wikipedia.org/wiki/APIhttp://vi.wikipedia.org/w/index.php?title=PECL&action=edit&redlink=1


6/22


nhp su c vo th trng ny. Chnh v th, Zend tin hnh nhiu bin phpnhm chun ha PHP, to c s tin cy hn cho gii ngi dng cao cp.

Zend Platform l mt b sn phm gip qun l h thng ng dng PHP,nng cao hiu sut, tng tc ca ng dng PHP.

Zend Framework l mt tp hp cc lp, cc th vin lp trnh vit bngPHP (PHP 5) nhm cung cp mt giao din lp trnh chun cho cc nh phttrin ng dng.

Ngoi ra, mt s frameworkkhc cng c pht trin nhm h tr lp trnhPHP cp doanh nghip, trong ng ch c th k n l CodeIgniter, CakePHP,Symfony, Seagull...

MySQL l h qun tr c s d liu t do ngun mph bin nht th gii vc cc nh pht trin rt a chung trong qu trnh pht trin ng dng. V MySQLl c s d liu tc cao, n nh v d s dng, c tnh kh chuyn, hot ng trnnhiu h iu hnh cung cp mt h thng ln cc hm tin ch rt mnh.Vi tc v tnh bo mt cao, MySQL rt thch hp cho cc ng dng c truy cp CSDL trn

internet. MySQL min ph hon ton cho nn bn c th ti v MySQL t trang ch.N c nhiu phin bn cho cc h iu hnh khc nhau: phin bn Win32 cho cc hiu hnh dng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, NovellNetWare, SGI Irix, Solaris, SunOS, ...

Do PHP kt hp vi MySQL l nn tng cho. Bn c th pht trin trongWindows v phc v trn nn tng Unix. PHP chy trn nhiu nn tng khc nhau:windows, Linux, Unix, PHP tng thch vi hu ht cc my ch c s dngngy nay.Min ph ti v t cc ngun ti nguyn chnh ca PHP. D dng tm hiu vchy pha my ch.

III. Tng quan v javascript:- JavaScript l ngn ng da trn i tng, c ngha l bao gm nhiu kiu i

tng, v d i tng Math vi tt c cc chc nng ton hc. Tuy vy JavaScriptkhng l ngn ng hng i tng nh C++ hay Java do khng h tr cc lp hay tnhtha k.

- JavaScript c th p ng cc s kin nh ti hay loi b cc form. Kh nngny cho php JavaScript tr thnh mt ngn ng script ng.

- Ging vi HTML v Java, JavaScript c thit k c lp vi h iu hnh. Nc th chy trn bt k h iu hnh no c trnh duyt h tr JavaScript. Ngoi ra

JavaScript ging Java kha cnh an ninh: JavaScript khng th c v vit vo file cangi dng.

- Cc trnh duyt web nh Nescape Navigator 2.0 tr i c th hin th nhng culnh JavaScript c nhng vo trang HTML. Khi trnh duyt yu cu mt trang, servers gi y ni dung ca trang , bao gm c HTML v cc cu lnh JavaScript quamng ti client. Client s c trang t u n cui, hin th cc kt qu ca HTMLv x l cc cu lnh JavaScript khi no chng xut hin.

http://www.zend.com/products/zend_platform/http://framework.zend.com/http://vi.wikipedia.org/w/index.php?title=Framework&action=edit&redlink=1http://vi.wikipedia.org/wiki/CodeIgniterhttp://vi.wikipedia.org/w/index.php?title=CakePHP&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Symfony&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Seagull&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Seagull&action=edit&redlink=1http://vi.wikipedia.org/wiki/H%E1%BB%87_qu%E1%BA%A3n_tr%E1%BB%8B_c%C6%A1_s%E1%BB%9F_d%E1%BB%AF_li%E1%BB%87uhttp://vi.wikipedia.org/wiki/T%E1%BB%B1_do_ngu%E1%BB%93n_m%E1%BB%9Fhttp://vi.wikipedia.org/wiki/Microsoft_Windowshttp://vi.wikipedia.org/wiki/Linuxhttp://vi.wikipedia.org/wiki/Mac_OS_Xhttp://vi.wikipedia.org/wiki/Unixhttp://vi.wikipedia.org/wiki/FreeBSDhttp://vi.wikipedia.org/w/index.php?title=NetBSD&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Novell_NetWare&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Novell_NetWare&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=SGI_Irix&action=edit&redlink=1http://vi.wikipedia.org/wiki/Solarishttp://vi.wikipedia.org/w/index.php?title=SunOS&action=edit&redlink=1http://www.zend.com/products/zend_platform/http://framework.zend.com/http://vi.wikipedia.org/w/index.php?title=Framework&action=edit&redlink=1http://vi.wikipedia.org/wiki/CodeIgniterhttp://vi.wikipedia.org/w/index.php?title=CakePHP&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Symfony&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Seagull&action=edit&redlink=1http://vi.wikipedia.org/wiki/H%E1%BB%87_qu%E1%BA%A3n_tr%E1%BB%8B_c%C6%A1_s%E1%BB%9F_d%E1%BB%AF_li%E1%BB%87uhttp://vi.wikipedia.org/wiki/T%E1%BB%B1_do_ngu%E1%BB%93n_m%E1%BB%9Fhttp://vi.wikipedia.org/wiki/Microsoft_Windowshttp://vi.wikipedia.org/wiki/Linuxhttp://vi.wikipedia.org/wiki/Mac_OS_Xhttp://vi.wikipedia.org/wiki/Unixhttp://vi.wikipedia.org/wiki/FreeBSDhttp://vi.wikipedia.org/w/index.php?title=NetBSD&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Novell_NetWare&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=Novell_NetWare&action=edit&redlink=1http://vi.wikipedia.org/w/index.php?title=SGI_Irix&action=edit&redlink=1http://vi.wikipedia.org/wiki/Solarishttp://vi.wikipedia.org/w/index.php?title=SunOS&action=edit&redlink=1


7/22


- Cc cu lnh JavaScript c nhng trong mt trang HTML c th tr li chocc s kin ca ngi s dng nh kch chut, nhp vo mt form v iu hng trang.V d bn c th kim tra cc gi tr thng tin m ngi s dng a vo m khng cnn bt c mt qu trnh truyn trn mng no. Trang HTML vi JavaScript c nhngs kim tra cc gi tr c a vo v s thng bo vi ngi s dng khi gi tr avo l khng hp l.



8/22


Chng II: Tng quan v JQuery

I. Gii thiu v JQuery

I.1. Khi nim v JQuery:

Vi s pht trin rt mau l ca Internet, ngi dng ngy cng quan tm hn nhnh thc ca mt trang web. Trc y mt trang web ch cn c banner, ni dung v t

footer hi ht l c cho l mt trang web hon chnh. Nhng by gi trang web phi c banner bt mt, ni dung hay v cn nhiu hiu ng l mt khc na th mic th thu ht c ngi c.

Chnh v th nhng web designer bt u ch n cc th vin JavaScript m nhjQuery to ra cc hiu ng c th tng tc trc tip vi ngi c mt cchnhanhchng v d dng hn rt nhiu l s dng thun JavaScrip

JQuery l mt Javascript Framework. N l mt b th vin c xy dng h trcc nh lp trnh web to ra cc tng tc trn website mt cch nhanh nht. JQuery thmtng tc Ajax vo trong trang web ca bn, n gin ha cch vit Javascript v tng tc

x l cc s kin trn trang web, gip tit kim thi gian v cng sc so vi cch vitjavascript thng thng.

JQuery c pht trin bi John Resigvo nm 2006 v sau 6 nm gi n tr thnh mt b th vin ni ting vi hng chc nghn plugin hay, hng triu ngisdng, v hu ht cc website hin nay u ng dng n.

JQuery c m ngun m v hon ton min ph, bn c th download n tihttps://jQuery.com.

Hoc c th s dng trc tip JQuery lu tr ti jQuery hay Google t 2 a ch sau

Hnh 1: Cc a ch c th s dng trc tip JQuery

I.2. S dng JQuery cn bit nhng g:

JQuery khng phi l mt ngn ng mi m ch l th vin hm javascript. jQueryhng ti mc ch lm n gin ha nhng cng vic phc tp trc y khidng javascript iu khin DOM, CSS, Do vy, hc jQuery bn cn ti thiunm bt c nhng kin thc sau:

- HTML

- JAVASCRIPT

- CSS

https://jquery.com/https://jquery.com/


9/22


I.3. Ti sao phi dng JQuery

jQuery n gin ha cch vit Javascript v tng tc x l cc s kin trn trangweb, gip tit kim thi gian v cng sc so vi cch vit javascript thng thng. Bncnh , vic s dng jQuery gip gii quyt tt vn xung t gia cc trnh duytweb.

Hc jQuery rt n gin, nu nh bn nm vng CSS, bn c th tip cn v s dngjQuery nhanh chng.

Ngoi jQuery cn c cc th vin javascript ni ting khc nh mooTools, Prototype,Dojo... th nhng jQuery c v thu ht cc web designer hn l v n c cc u im.

u im ca jQuery:- H tr tt vic x l cc vn thng gp (DOM, AJAX)

- Tng thch nhiu trnh duyt web ph bin.

- Nh gn, d dng, c nhiu ti liu hng dn s dng chi tit.

- t xung khc vi cc th vin Javascript khc.

- Plugin phong ph.

I.4. JQuery lm c nhng g

- Hng ti cc thnh phn trong ti liu HTML: Nu khng s dng th vinJavaScript ny, bn phi vit rt nhiu dng code mi c th t c mc tiu l dichuyn trong cu trc cy (hay cn gi l DOM = Document Object Model) ca mt tiliu HTML v chn ra cc thnh phn lin quan. Jquery cho php bn chn bt cthnh phn no ca ti liu vc mt cch d dng nh s dng CSS.

- Thay i giao din ca mt trang web: CSS l cng c rt mnh nh dng mt

trang web nhng n c mt nhc im l khng phi tt c cc trnh duyt u hin thging nhau. Cho nn jQuery ra i lp ch trng ny, v vy cc bn c th s dng n gip trang web c th hin th tt trn hu ht cc trnh duyt. Hn na jQuery cng cth thay i class hoc nhng nh dng CSS c p dng ln bt c thnh phn noca ti liu HTML ngay c khi trang web c trnh duyt load thnh cng.

- Thay i ni dung ca ti liu: Jquery khng phi ch c th thay i b ngoi catrangweb, n cng c th thay i ni dung ca chnh ti liu ch vi vi dng code.N c th thm hoc bt ni dung trn trang, hnh nh c th c thm vo hoc isang hnh khc, danh sch c th c sp xp li hoc thm ch c cu trc HTML camt trang web cng c th c vit li v m rng. Tt c nhng iu ny bn hon

ton c th lm c nh s gip ca API (Application Programming Interface =Giao din lp trnh ng dng).

- Tng tc vi ngi dng: Cho d cng c bn dng c mnh m n my, nhngnu bn khng c quyn quyt nh khi no n c s dng th cng c cng coi nhb. Vi th vin javaScript nh jQuery, n cho bn nhiu cch tng tc vi ngidng v d nh khi ngi dng nhp chut vo ng link th s c g xy ra. Nhng cihay ca n l khng lm cho code HTML ca bn ri tung ln chnh l nh cc Event



10/22


Handlers. Hn na Event Handler API s bo m rng trang web ca bn tng thchhu ht vi cc trnh duyt, iu ny v ang lm au u rt nhiu cc web designer.

- To hiu ng ng cho nhng thay i ca ti liu: tng tc tt vi ngidng, cc web designer phi cho ngi dng thy c hiu ng g s xy ra khi h lmmt tc v no . Jquery cho php bn s dng rt nhiu hiu ng ng nh m dn,chy dc chy ngang v.v.. v nu vn cha , n cn cho php bn t to ra cc hiu

ng ca ring mnh.- Ly thng tin t server m khng cn ti li trang web: y chnh l cng ngh

ngy cng tr nn ph bin Asynchronous JavaScript And XML (AJAX), n gip ngithit k web to ra nhng trang web tng tc cc tt v nhiu tnh nng. Thvin jQuery loi b s phc tp ca trnh duyt trong qu trnh ny v cho php ngipht trin web c th tp trung vo cc tnh nng u cui. n gin ho cc tc vjavaScript. Ngoi nhng tnh nng nh nu trn, jQuery cn cho php bn vit codejavaScript n gin hn nhiu so vi cch truyn thng nh l cc vng lp v iu khinmng.

II. Nguyn l hot ng ca JQueryII.1. C php v i tng

JQuery s dng cng mt cch nh CSS la chn nhng phn t HTML ( thHTML) v thc hin vi vic g ln nhng i tng c chn. Vic chn i tngc cng c im(nhiu thnh phn). Nguyn tc chn c th nh sau:

C php: $ (doi_tuong)

$ : K t bt u ca JQuery trong vic xc nh i tng.

(doi_tuong): Tiu ch xc nh i tng.

Sau y l bng lit k cc tiu ch chun mu chn i tng :

$ (this) Chn i tng hin ti ( i tng c bit) | n l

$ (document) Chn i tng ton b ti liu ( i tng c bit) |n l

$ (window) Chn i tng v ca s hin hnh (i tng c bit) |n l

$ (p) Chn tt c th

| nhiu thnh phn

$ (.ClassName) Chn tt c th HTML c class=ClassName | nhiuthnh phn

$ (#IdValue) Chn th HTML c id=IdValue | n l

Hnh 2: Bng lit k cc tiu ch chn i tng

II.2. iu khin CSS ca i tng

II.2.1. Ly gi tr ca mt thuc tnh CSS

SVTH: Nguyn Hong An- ng Ngc Trung- Ng Vn Vit- Vn Thanh Nho Page

10


11/22


Khi dng JQuery, vic tc ng trc tip v ly gi tr mt thuc tnh CSS ca itng c chn v cng n gin v bn s s dng tn thuc tnh v gi tr ly c sc nh dng y nh nh ngha CSS thun.

C php: $ (doi_tuong).css(ten_css)

doi_tuong : l tiu ch xc nh i tng

ten_css : l tn thuc tnh css nh font-size, color, II2.2. t gi tr mi cho CSS

Tng t nh ly gi tr ca thuc tnh CSS, vic gn gi tr cho n cng kh l ngin.

C php: $ (doi_tuong). css(ten_css,gia_tri)

doi_tuong : l tiu chun xc nh i tng.

ten_css : l tn ca thuc tnh css nh font-size, color,

gia_tri : l gi tr m bn mun gn cho CSS

II.3. Gn s kin v x l s kin

II.3.1. Gn s kin vo i tng:

Phn ny s trnh by vic dng jQuery gn s kin ln i tng v iu khinx l s kin khi n xy ra. Ni dung y cp n ch bao gm nhng cch dngph thng nht gip bn nm bt v lm quen. Nhng ni dung chi tit hn v cc skin s c cp y trong nhng phn tip theo trong ti liu ny.

C php : $ (doi_tuong).ten_su_kien(ham_dieu_khien);

doi_tuong : tiu ch xc nh i tng nh ni trn.

ten_su_kien : tn ca s kin.ham_dieu_khien : hm iu khin ca s kin khi s kin pht sinh

II.3.2. Hy s kin vo i tng :

Khi gn s kin cho mt i tng ri, nhng trong mt s trng hp hoc vvi l do no m bn mun hy s kin th jQuery gip bn lm vic ny kh ngin

C php : $ (doi_tuong).unbind(ten_su_kien) ;

doi_tuong : tiu ch xc nh i tng.

ten_su_kien : tn s kin theo chun javascript nh click, focus, load,.

Nu mun hy ton b s kin ca mt i tng, ta dng c php sau:

$ (doi_tuong).unbind();

II.4. Mt vi hm API ph bin thng dng

y l danh sch nhng hm API jQuery hay dng nht bn c th tham khonhanh v phc v vi mc ch n gin trong qu trnh lm quen vi jQuery cng nh


11


12/22


lm ci bi tp. Cng nh nhng ni dung bn trn, nhng cch dng lit k trong phnny cng ch l nhng trng hp ph thng nht.

II.4.1 Hm .fadeIn()

Hiu ng hin th dn dn mt i tng t trng thi trong sut. Ngha l trng thiban u ca i tng phi l trong sut (opacity=0).

C php: $ (doi_tuong).fadeIn(thoi_gian, dieu_khien);thoi_gian : thi gian chuyn, c th dng sso(1/1000 giy) hoc chui slow vfast.

dieu_khien : lm hm c thc thi sau khi qu trnh i kt thc. Hm ny cth b trng.

II.4.2. Hm .fadeOut()

Hm ny c tc dng gy hiu ng ngc li vi hm .fadeIn(), ngha l ns lmcho mt i tng tr nn trong sut t t. Cc tham s v cch s dng nh .fadeIn().

II.4.3 Hm .fadeTo()

Hm ny c th s dng cho c hai trng hp .fadeIn() v .fadeOut()khi n hngti mc ch chuyn i t trng thi hin ti n mt trng thi c chnh. Ty vogi tr hin ti v gi tr n m s c hiu ng fadeIn() hay .fadeOut()

C php : $ (doi_tuong).fadeTo(thoi_gian, dich_den, dieu_khien);thoi_gian : thi gian chuyn, c th s dng s (1/1000 giy) hoc chui slow

v fast.dieu_khien : l hm c th thi sau khi qu trnh i kt thc. Hm ny c th b

trng.dich_den : c gi tr t 0-1( tng ng 0% -> 100%) l fade mun chuyn n.

II.4.4. Hm .show()V bn cht nu khng c tham s th hm ny s gi .css('display','block'). Cn nu

c tham s nh c php di y th n hot ng tng t nh .fadeIn().

C php : $ (doi_tuong).show(thoi_gian, dieu_khien);thoi_gian : thi gian chuyn, c th s dng s (1/1000 giy) hoc chui slow

v fast.dieu_khien : l hm c th thi sau khi qu trnh i kt thc. Hm ny c th b

trng.II.4.5 Hm .hide()

Tri ngc vi .show(), nu khng c tham sth hm ny s gi.css('display','none'). Cn nu c tham s nh c php di y th n hot ng tng t nh.fadeOut().

Chng III: Tng quan v Jquery Mobile

I. c trng ca Web Mobile hin nay:

I.1. Ti u chm mn hnh Fingertip Optimization


12


13/22


Khi thc hin mt cuc kho st cho cc web s dng cho in thoi (mobilewebsite), hin nhin tt c u c xy dng iu hng vi chm tay. Mt s yut gm, tm kim v cc hnh nh c lm ln ngn tay c th chm vo.

Mt phn ng khi chm vo mn hnh trn thit b di ng r rng l thi quen cangi dng ngy nay, v th lun ch ti iu ny khi thit k cho mobile website.

I.2. Ti gin

Tm cch thu ht s tp trung ca ngi s dng mobile trn mt mn hnh nh lmt thch thc ln. S phc tp khi s dng ch lm kh ngi dng khi h s dng.

V l do ny, hu ht cc mobile website u c nhng thit k layout n gin. Mtbn rt gn thanh iu hng (so vi web trn pc) c s dng, n ging nh mtphin bn thu nh, gip ngi dng tip cn vi nhng thng tin cn thit nht, ph hpvi thi im ngi dng s dng mobile (nhanh gn, tc th).

I.3. Khng gian trng White Space

Khng gian trng l iu PHI c cho mt thit k web tt, v n c ngha c bit

quan trng trong lnh vc di ng. Bt c trang web no thit k cho mobile m s dngqu nhiu hnh nh, sp xp ln xn, cht chi u b ngi dng b qua ngay lp tc.

I.4. Tng cng video v hnh nh

Vi s pht trin ca cng ngh khng dy, dung lng dn dn s khng phi lmt ro cn ln. Chng ta c th thoi mi vi nhng sng to th gic. Chng ta khngngn ngi pht trin cc dch v trn mobile dnh cho th vin video, hnh nh v cchnh thc khc.

I.5. Tng tc vi mng x hi

Bn cht ca vic dng in thoi l kt ni, v th cc trang web s dng trn

mobile u tm cch lin kt cc mng x hi, kt ni Facebook, Linking, Following trnTwitter. Cc ch doanh nghip khng mun b l c hi kt ni vi khch hng ca hhng ngy, hng gi.

II. Gii thiu v Jquery Mobile :

Ngy nay, vi s pht trin vt bc ca cc smartphone v tablet, chng ta c thtruy cp website bt c lc no. Tuy nhin, mt nhc im rt ln ca cc website(c bit l website Vit Nam) s dng Flash qu nhiu. iu ny lm cho cc thit bdi ng gp kh khn trong qu trnh truy cp (IOS khng h tr chy Flash khi ltweb, nu mun cc bn phi ci t thm plugin. iu ny s rt kh khn i vi mt sngi khng chuyn v tin hc v s lm gim thi lng Pin s dng). Chnh v vyJquery Mobile ra i.

Bn cnh Sencha Touch, Jquery Mobile cng c ng h mnh m v pht trintrn nn tng Jquery. Tuy nhin n d chu hn so vi Sencha Touch v n khng nhhng n vic code chc nng web (PHP, ASP...). Cch s dng nh chng ta dngJquery thng thng.


13


14/22


Jquery Mobile ra i khong thng 8/2010 nhng pht trin rt nhanh dotnh ph bin, m ngun m v c php tng t Jquery, nhiu plugin min ph, hiu ngchuyn ng tt. V quan trng hn ht l tng thch vi tt c cc thit b di ngsmartphone trn nn IOS, Android, Blackberry...

Hin ti Jquery Mobile vn ang c tip tc pht trin v hon thin. Tuynhin.trong tng lai khng xa y s l mt th vin h tr mnh m cng ngh

HTML5 vCSS3 cho cc thit b cm ng.jQuery Mobile, mt khung cng tc giao din ngi dng (UI), cho php bn vit

mt ng dng web di ng chc nng m khng cn vit mt dng m JavaScript.Trong bi ny, hy tm hiu v cc tnh nng ca khung cng tc ny, gm cc trang cbn, cc thanh cng c iu hng, cc nt iu khin biu mu v cc hiu ng chuyntip. tm hiu jQuery Mobile, bn s cn:

- Tm hiu v HTML- Hiu cc iu c bn v JavaScript- Kin thc c bn v Jquery

III. Khi nim v Jquery Mobile:

jQuery Mobile l mt khung cng tc pht trin giao din ngi dng web thnthin vi cm ng cho php bn pht trin cc ng dng web di ng lm vic trn ccmy in thoi thng minh v cc my tnh bng. Khung cng tc jQuery Mobile cxy dng trn nh li jQuery v cung cp mt s phng tin, gm thao tc v chuyndch DOM (M hnh i tng ti liu), HTML v XML, x l cc s kin, thc hintruyn thng my ch bng cch s dng Ajax, cng nh cc hiu ng hnh nh v hnhnh ng cho cc trang web. Bn thn khung cng tc di ng l mt bn ti b sung,ring bit c kch c khong 12KB ( rt gn v nn) t li jQuery c kch c khong

25KB khi rt gn/nn. Cng nh vi phn cn li ca khung cng tc jQuery,jQueryMobile l th vin c cp php kp (MIT v GPL), min ph.

IV. Cc tnh nng c bn ca Jquery Mobile:

- Kh n gin: Khung cng tc d s dng. Bn c th pht trin cc trang chyu bng cch s dng nh du da vo m JavaScript ti thiu hoc khng dng mny.

-Nng cp tng dn v kh nng chu li: Trong khi jQuery Mobile s dng mHTML5, CSS3 v JavaScript mi nht, khng phi tt c cc thit b di ng ucung cp s h tr nh vy. Trit l ca JQuery Mobile l h tr c hai thit b c khnng cp cao v kh nng cp thp hn, chng hn nh nhng thit b khng h trJavaScript v vn cung cp cc tri nghim tt nht c th.

- Tnh d dng: jQuery Mobile c thit k vi ch d dng. N c s h trcho Cc ng dng Internet phong ph c th d dng (WAI-ARIA - Accessible RichInternet Applications) gip lm cho cc trang web c th d dng vi khch truycp b tn tt nh s dng cc cng ngh tr gip.


14


15/22


- Kch c nh: Kch c tng th ca khung cng tc di ng jQuery l tng inh khong 12KB vi th vin JavaScript, 6KB vi CSS, cng vi mt s biu tng.

- To ch : Khung cng tc ny cng cung cp mt h thng ch , cho phpbn a ra kiu dng ng dng ring ca mnh. Khi c dng vi cc b cng cnh l PhoneGap, c s dng cc cng ngh web xy dng cc ng dng c lp,khung cng tc jQuery Mobile c th gip n gin ha vic pht trin ng dng ca

bn.

V. H tr trnh duyt Jquery Mobile:

Chng ti i mt chng ng di vi s h tr trnh duyt ca thit b di ng,nhng khng phi tt c cc thit b di ng u cung cp s h tr cho HTML5, CSS 3v JavaScript. Lnh vc ny l ni s h tr nng cp tng dn v kh nng chu lica jQuery Mobile i vo. Nh nu, jQuery Mobile h tr c hai thit b c kh nngcp cao v cp thp, chng hn nh nhng thit b khng h tr JavaScript. Nng cptng dn c cc nguyn tc ct li sau:

- Tt c cc ni dung c bn nn c th d dng vi tt c cc trnh duyt.- Tt c cc chc nng c bn nn c th d dng vi tt c cc trnh duyt.

- B tr nng cao c cung cp bi CSS lin kt ngoi.

- Hnh vi nng cao c cung cp bi JavaScript lin kt ngoi.

- Cc s thch trnh duyt ca ngi dng cui c tn trng.

- Tt c cc ni dung c bn nn trnh din (nh thit k) trn cc thit b c bn,trong khi nhiu nn tng v cc trnh duyt nng cao hn s dn dn c nngcp bng CSS v JavaScript lin kt ngoi, b sung.

JQuery Mobile hin ang cung cp s h tr cho cc nn tng di ng sau y: Apple iOS: iPhone, iPod Touch, iPad (tt c cc phin bn).

Android: tt c cc thit b (tt c cc phin bn).

Blackberry: Torch (phin bn 6).

Palm: WebOS Pre, Pixi.

Nokia: N900 (ang xy dng).

VI. Tm hiu v Jquery Mobile

VI.1. Jquery lm c nhng g:Query Mobile cung cp s h tr mnh m cho cc loi phn t giao din ngi

dng khc nhau. Hnh di y cho thy mt bn tm tt v cc thnh phn giao dinngi dng ang c h tr hin nay.


15


16/22


Hnh 3: Bng tm tt cc thnh phn giao din

Cc thanh cng c, cc nt n, cc khung nhn danh sch, cc th, cc trnh n btln, cc hp thoi, cc hiu ng chuyn tip, cc ca s chnh sa v cc phn t biumu u c h tr. Hu ht, nu khng phi tt c, cc phn t giao din ngi dngm bn cn cho cc ng dng web di ng ca mnh u c cung cp.

VI.2. Cc thnh phn trong Jquery Mobile:

VI.2.1. Cc thuc tnh data - * ca HTML5

jQuery Mobile da vo cc thuc tnh data-*ca HTML5 h tr cc phn t giaodin ngi dng, cc hiu ng chuyn tip v cu trc trang khc nhau. Cc thuc tnhny ang b cc trnh duyt khng h tr chng lng l loi b. Bng sau cho thy cchs dng cc thuc tnh data-* to ra cc thnh phn giao din ngi dng.

Thnh phn Thuc tnh data-* ca HTML5


16


17/22


Cc thanh cng c u trang(Header)v Chn trang(Footer)

Phn thn ni dung (content)

Cc nt n (button) Button

Cc nt n c nhm li

YesNo

Cc nt nhn trc tip (inline button) AppleLemon

Phn t biu mu (trnh n select) Choose aoption

Option 1Option 2Option 3

Cc khung nhn danh sch c bn OneTwoThree

Cc hp thoi Open dialogOpen dialog

Cc hiu ng chuyn tip (transition) Open dialog

Hnh 4: Cch s dng cc thuc tnh data-*

VI.2.2. $.mobile v s kin phng thc h tr

i tng jQuery ca JavaScript cng lin quan n k hiu $. Khung cng tcjQuery Mobile m rng li jQuery bng cc trnh cm thm di ng, gm mobile hoc$.mobile c nh ngha mt s s kin v phng thc. Mt s phng thc c trngca $.mobile c m t di y.

Phng thc Cch s dng

$.mobile.changePage thay i lp trnh t trang ny sang trangkhc


17


18/22


V d: chuyn n trang weblog.php khi sdng hiu ng slide, s dng$.mobile.changePage(weblog.php,slice)

$.mobile.pageLoading hin th hoc n thng bo np trang

V d: n thng bo s dng

$.mobile.pageLoading(true)

$.mobile.silentScroll cun mt v tr Y c th m khng to racc s kin cun

V d: cun n v tr Y 50, s dng

$.mobile.silentScroll(100)

$.mobile.addResolutionBreakpoints Jquery Mobile nh ngha mt s im ngtcho cc lp min/max. Gi phng thc ny b sung cc im ngt

V d : b sung lp min/max cho cc chiu

rng im nh 800, s dng$.mobile.addResolutionBreakpoints(800)

$.mobile.activePage cp n cc trang ang hot ng hin nay

Hnh 5 : Mt s phng thc c trng ca $.mobile

C mt s s kin m bn c th kt buc chng khi s dng phng thc bind()hoc live(), chng hn nh khi to JQuery Mobile, s kin cm ng, thay i nhhng,cc s kin cun, cc s kin hin/ n trang, cc s kin khi to trang v cc skin hnh nh ng.

Chng IV: Phn tch yu cu v trin khai h thng xy dng Demo

I. Phn tch yu cu h thng:- Yu cu ti : Xy dng web mobile nghe nhc cho thit b cm tay s dngth vin JQuery Mobile.

- Phng php nghin cu:

Xc nh vn

Thu thp thng tin


18


19/22


Phn tch nh gi

Xy dng chng trnh

II. Trin khai h thng:

Thng qua yu cu ca ti, chng em s dng ngn ng PHP, XML, HTML,

javascript, CSS v th vin JQuery Mobile xy dng chng trnh Demo.Cc bc xy dng chng trnh :

- Xy dng giao din cc trang index, playlist bng ng dng Codiqa c sntrn trang web jquerymobile.com.

- Ti cc th vin ca JQuery Mobile.

- To file XML xy dng danh sch.

- S dng javascript hon thin website.- Chy Demo trn localhost vi phn mm Vertrigo.

- Upload website ln host test trc tip trn thit b cm tay.

III. Chng trnh Demo

III.1. Demo trn localhost vi Vertrigo


19


20/22


Hnh 6 : Demo trn localhost

III.2. Demo trn phn mm gi lp sau khi up ln host


20


21/22


Hnh 7 : Demo trn phn mm gi lp mobile sau khi up ln host

Chng V : Tng kt

I. u nhc im:

Xy dng website nghe nhc bng jquery v c bn tha mn cc yu cu camt website nghe nhc trn thit b cm tay bnh thng, bao gm cc chc nng nh: ccc th loi la chn, nghe nhc, dng nhc, d s dng.

Tuy nhin bn cnh website cng vn ang bc l mt s thiu st nh mi chcung ng cc chc nng c bn, cha c nhiu la chn cho ngi nghe, khi cho chybi ht th vn cha c giao din nghe nhc, giao din vn cn cha tt, cha c kt niCSDL qun l, cc chc nng vn cn cha n nh.

Trong sut qu trnh lm vic, chng em t mt s thnh qu nh: hiu rnhng iu c bn v PHP, javascript , CSS, HTML .. b sung kin thc cho chng emv thit k web.

Tuy mc ca bo co cn kh nhiu hn ch, do chng em t c tip xc vilp trnh thit k Website. Nhng chng em hy vng thng qua bo co ny th chng emc th mang li cho mi ngi mt ci nhn khi qut, r rng hn v vic xy dng cctrang web mobile bng vic s dng th vin JQuery Mobile

II. Hng pht trin:

- Xy dng c giao din chuyn nghip, thn thin vi ngi dng

- C cc chc nng upload, download, search,

- To ti khon cho ngi s dng.


21


22/22


III. Bng phn cng cng vic

Thi gian Ni dung cng vic

T 19/12 n 23/12 Tm hiu ngn ng PHP,XML, CSS, HTML, javascript

T 24/12 n 30/12 Tm hiu h thng, dch ti liu Jquery Mobile

T 31/12 n 6/1 Phn tch v thit k giao din website nghe nhc theo yucu

T 7/1 n ht Xy dng v demo chng trnh

Thit k giao din : Vn Thanh Nho Ng Vn Vit

Xy dng website : Nguyn Hong An ng Ngc Trung

Trong sut qu trnh lm vic c nhm u tham kho ng gp kin gip ln nhau,cng nhau hon thnh cc phn, bng phn cng ch mang tnh cht m nhim trongkhu trnh by.

142353240 TTCN Web NguyenHoangAn Ngo Van Viet DoVanThanhNho DangNgocTrung

Documents

Transcript of 142353240 TTCN Web NguyenHoangAn Ngo Van Viet DoVanThanhNho DangNgocTrung