webmatrix doc

Upload: huy-tran-nguyen-duc

Post on 08-Jul-2015

844 views

Category:

Documents


0 download

DESCRIPTION

Tài liệu về công cụ lập trình web WebMatrix của Microsoft

TRANSCRIPT

Trn Nguyn c Huy [email protected]

1

PHN I: LM QUEN VI WEBMATRIX1. 2. 3. 4. WebMatrix l g? Ci t WebMatrix Xy dng ng dng WebMatrix lm quen WebMatrix Stack

22 2 8 10

PHN II: DO QUANH WEBMATRIX1. 2. 3. 4. 5. Khi ng WebMatrix Tm hiu v Web Application Gallery Cch to mt trang web bng cch s dng Web Application Gallery To mt trang web bng cch s dng template Tm hiu v WebMatrix workbench

1414 15 17 19 21

PHN III: LP TRNH VI WEBMATRIX1. 2. Tm hiu v server programming Gi d liu n server

3636 44

PHN IV: S DNG HNH NH TRONG WEBMATRIX1. 2. 3. 4. To mt trang web s dng hnh nh To nh minh ha v lin kt Lp trnh vi th Image S dng WebImage helper

4747 50 52 54

PHN V: S DNG VIDEO TRONG WEBMATRIX1. 2. S dng video trong trang web ca bn S dng Video helper

6060 63

Trn Nguyn c Huy [email protected]

2

Phn I: Lm quen vi WebMatrix1. WebMatrix l g? WebMatrix tp hp cc cng c pht trin web tinh gin v min ph, cung cp cho ngi s dng y cc tnh nng v d dng xy dng website ca mnh mt cch nhanh chng. N bao gm IIS Express, ASP.NET v SQL Server Compact. N cng bao gm mt cng c gip n gin ha vic pht trin website v cho php khi u vic xy dng cc website t cc ng dng m ngun m nh Joomla!, Drupal, Umbraco, Wordpress

Cc trang web m bn to ra khi s dng WebMatrix c th linh ng, ngha l bn c th thay th, chnh sa ni dung hoc cu trc da trn d liu u vo ca ngi dng hoc thng tin khc, chng hn thng tin t c s d liu (CSDL). lp trnh cc trang web ng, bn nn s dng ASP.NET kt hp c php Razor cng vi s h tr ca cc ngn ng lp trnh nh C# hoc VB. 2. Ci t WebMatrix WebMatrix c th c ti v v ci t t trang http://www.microsoft.com/web/webmatrix/

hoc t trang http://www.asp.net/webmatrix.

Trn Nguyn c Huy [email protected]

3

WebMatrix c ci t thng qua cng c Web Platform Installer (Web PI) ca Microsoft.

(Cc yu cu h thng: h tr cc h iu hnh Windows 7, Windows Vista SP2, Windows XP SP3+, Windows Server 2003 SP2+, Windows Server 2008, Windows Server 2008 R2)

Sau khi chn Install Now nh nh trn, phn ci t ca WebMatrix s c ti v my ca bn vi tn tp tin l webmatrix.exe, double click vo tp tin ny bt u tin hnh ci t.

Trn Nguyn c Huy [email protected]

4

Chn Items to be installed xem cc thnh phn s c ci t.

Chn Options hin th cc ty chn khc.

Trn Nguyn c Huy [email protected]

5

Chn Install tin hnh ci t WebMatrix. Mt hp thoi s hin th cha thng tin cc thnh phn s c ci t, chn I Accept xc nhn bt u ci t.

Qu trnh ti v v ci t bt u.

Trong qu trnh ti v v ci t, s c li pht sinh c th gy nh hng n ton b tin trnh ci t, chng hn bn c th gp li nh sau:

Trn Nguyn c Huy [email protected]

6

Li ny l do khng tm thy c server cha tp tin ci t ca thnh phn , c th l do mng hoc firewall ca bn chn lin kt n ng link . Bn hon ton c th kim tra li qu trnh ci t bng cch chn View log here xem. Lc ny s quay li mn hnh chnh ca Web PI.

Sau khi kim tra li v tin hnh ci li bng cch double click li tp tin webmatrix.exe c ti v lc ban u.

Trn Nguyn c Huy [email protected]

7

Mn hnh hin th thng bo vic ci t WebMatrix thnh cng, chn Finish hon tt v quay tr li mn hnh ca Web PI, hoc chn Launch m WebMatrix ln ngay.

Sau khi ci t xong, trn Start Menu ca Windows s xut hin biu tng ca WebMatrix, ng thi cng to mt th mc ca WebMatrix trn bn tin truy xut sau ny.

Trn Nguyn c Huy [email protected]

8

3. Xy dng ng dng WebMatrix lm quen a. Khi ng WebMatrix, bn s thy mn hnh cho mng nh hnh bn di. Bn hon ton c th tt mn hnh ny khng hin th cho nhng ln k tip bng cch nh du vo Do not show this screen on start-up.

b. Chn Site From Template, bn s thy mt danh sch cc template c sn i km trong WebMatrix. Trong v d ny, ti chn Bakery template, t tn cho trang web l My Bakery Shop v chn OK.

Trn Nguyn c Huy [email protected]

9

c. Chn nt Run trn thanh ribbon ca ca s WebMatrix, nhng chc nng c th bn trong s c trnh by trong nhng phn sau. Trang web Bakery s hin th trn trnh duyt mc nh ca bn nh hnh bn di.

Trn Nguyn c Huy [email protected]

10

y l mt v d v mt trang web ng chy trn phn server-side code. iu ny c ngha rng nhng chi tit cho tng sn phm ca ca hang s c lu tr trong mt CSDL, vi cc thuc tnh nh m t (description), gi c (price), v khi ngi dng chn mt sn phm, trang web ng s t ng to ra trang web m ni dung ly t ni dung CSDL . V d, nu bn chn Order Now trong khi xem mt sn phm, bn s c dn n trang chi tit phn order tng t nh sau:

cch URL hin th trn thanh a ch ca trnh duyt vn gi (tr con s pha cui), khng phn bit sn phm no m bn chn. l bi v y l trang web ng, con s pha cui ca URL ch ra cho page bit sn phm no cn ly. Page s ly nh, phn m t v gi ca sn phm ny t CSDL. Chi tit v cch thc hin s c trnh by trong nhng phn sau. 4. WebMatrix Stack Khi bn ci t WebMatrix th Web Installer cng ci t IIS Express server, SQL Server Compact Database v ASP.NET Web Pages framework. Stack ny c m t nh sau:

Trn Nguyn c Huy [email protected]

11

WebMatrix cu hnh tt c cc thnh phn chy cng nhau, c th cung cp s tri nghim n gin nh bn c th thy to mt trang web t mt template v thc thi n. Bn khng phi lm bt c thao tc no kt ni CSDL n trang web hoc trin khai trang web ln server; WebMatrix lm tt c chuyn cho bn. IIS Express Server IIS Express l mt phin bn rt gn ca IIS c ti u ha cho cc developer. N c thit k n gin ha vic s dng phin bn hin ti ca IIS pht trin v kim th cc website. Khng nh phin bn y ca IIS, bn khng cn cc quyn qun tr ci t n, v n khng chy nh mt service trn my. Nhiu cng ty khng cung cp cho ngi dung cc quyn qun tr ci t phn mm ln my tnh v nhng l do bo mt, v th vic s dng phin bn y ca IIS pht trin rt l kh. Ngoi ra, IIS Express khng chy nh mt service ngha l n d dng s dng v bn ch vic khi ng n v s dng. xem IIS Express hot ng, m li trang web Bakery to trn v nhn xung phn system tray trn my tnh. Bn s thy stacked blocked icon ca WebMatrix. Nu n khng xut hin , chn nt Show Hidden Icons.

Click phi vo biu tng , bn s thy ca s pop-up cc ty chn cho IIS Express server ca bn v cc ng dng ang chy trn .

Trn Nguyn c Huy [email protected]

12

Bt k trang web no ang chy u c lit k trn View Sites. Bn c th duyt trc tip n trang web trn trnh duyt mc nh, hoc c th dng vic chy trang web ngay trn menu. Nu bn dng trang web m l trang web duy nht ang hot ng th IIS Express s t ng tt i. SQL Server Compact Database Thng thng mi web stack u c mt thnh phn CSDL. Trong WebMatrix stack, l SQL Server Compact 4, phin bn mi nht ca CSDL nhng t dng SQL Server. Tnh cht nhng c xem xt la chn v n l mt CSDL da trn tp tin m khng i hi phi c mt server ring bit chy, v v cc tp tin dng runtime h tr CSDL thc thi trong cng tin trnh vi ng dng ca bn. Mt vn ph bin trong vic pht trin website l vic qun l cc server ring bit v kt ni chng li chy cc CSDL. Nhng vi SQL Server Compact, tin trnh ny n gin nh vic trin khai mt tp tin gm d liu ca bn km vi phn cn li ca cc tp tin trong trang web ca bn. Click nt Databases pha bn tri ca ca s WebMatrix thy khu vc hot ng ca Database. Bn s thy tp tin bakery.sdf cha tt c d liu ca bn.

Double click vo bng Products, WebMatrix databse designer s m ra v bn c th s dng n xem v chnh sa d liu bn trong.

Trn Nguyn c Huy [email protected]

13

Bn cng c th dng WebMatrix chnh sa CSDL ca bn bng vic to mi, thit lp ch mc v qun l cc mi quan h. ASP.NET Web Pages framework ASP.NET Web Pages framework cung cp programmable layer m website ca bn c th s dng to ra cc trang web ng v hng d liu (data-driven). Trang web Bakery s dng layer ny mt cch m rng cho cc page template, data access V d, bn c th c ni dung t mt CSDL, lp n qua cc kt qu v to HTML t n. Di y l on m server-side c trong trang Bakery.

Nu bn quen vi HTML, bn s bit cc th

  • ,
  • v lm g chng nh ngha cch trang web hin th trn trnh duyt. Nhng phn bt u bng k hiu @, l m nh ngha ASP.NET Web Pages (trong trng hp ny l C#) s dng c php tn l Razor. ASP.NET Web Pages c thit k d dng hc v s dng. Trong nhng phn sau, bn s s dng chng nm nhng phn c bn ca lp trnh server.

    Trn Nguyn c Huy [email protected]

    14

    Phn II: Do quanh WebMatrixTrong phn ny, chng ta s tm hiu chi tit hn v mi trng pht trin WebMatrix gm ni dung sau: Cch khi ng WebMatrix. Tm hiu v Web Application Gallery. Cch to mt trang web bng cch s dng Web Application Gallery. To mt trang web bng cch s dng template. Tm hiu v WebMatrix workbench.

    1. Khi ng WebMatrix Nu bn thc hin theo phn hng dn ci t WebMatrix trong Phn I, bn s thy n nm trong th mc Microsoft WebMatrix trn Start menu.

    Trong th mc ny c 2 mc, l Learn about WebMatrix online v Microsoft WebMatrix. Mc u tin s dn bn n trang web http://www.microsoft.com/web/webmatrix/learn, ni cung cp rt nhiu video v tutorial m bn c th tm hiu nhiu hn v WebMatrix. Trong ln u tin bn khi ng WebMatrix, bn s thy mn hnh cho mng.

    My Sites: chn ty chn ny hin th danh sch cc trang web m bn to trc s dng WebMatrix. Site From Web Gallery: chn ty chn ny d hin th danh sch cc ng dng m ngun m chy trn Microsoft Web Platform. T danh sch ny, bn cng c th ti v v ci t cc ng dng ny. Nhng ng dng ny c vit theo nhiu loi

    Trn Nguyn c Huy [email protected]

    15

    ngn ng khc nhau, bao gm PHP v ASP.NET. Khi bn chn mt trong nhng ng dng ny, WebMatrix s tm bt k dependency no bn cn s dng chng. V d, nhiu ng dng PHP s dng CSDL MySQL, v th WebMatrix s ti v v ci t n cho bn nu bn cn. Site From Template: ty chn ny cho php bn to mt ng dng web da trn mt template c sn. WebMatrix km theo mt s template c sn v d dng cho bn s dng to mt trang web cho mnh. Site From Folder: ty chn ny cho php bn chuyn n bt k th mc no cha website. V d, nu bn ti v v ci t mt ng dng web m ngun m, bn c th m root directory t y v s dng n trong WebMatrix.

    2. Tm hiu v Web Application Gallery Chn ty chn Site From Web Gallery t mn hnh cho mng, bn s thy Web Application Gallery cha mt s ng dng m ngun m m bn c th s dng nh nn tng cho website ca bn v c th n gin ha thao tc to mt trang web.

    pha bn tri mn hnh, bn s thy phn danh mc c trong Web Application Gallery s dng cho cc loi ng dng khc nhau. Cng ng m ngun m xy dng nhiu ng dng theo nhiu ng cnh, nhng thng thng th chng gp li trong cc danh mc sau: Blogs: t Blog c chuyn th t cm t web log, thng thng l mt trang web ni ngi dng lu cc bi vit trong mt quyn nht k online. Nhng ngi dng khc sau d th bnh lun trn cc bi vit ny, v nhng bi vit ny c th c tng hp bng vic s dng mt cng ngh c gi l really simple syndication hoc RSS. Mt trang blog thng thng c dng cp nht v status hoc thng tin cho ngi c. CMS (content management systems): Mt h qun tr ni dung l mt website c xy dng t mt vi khi (block), mi khi c th d dng c to ra bi mt ngi dng khng rnh hoc khng bit g v k thut. Nhng khi ny c th

    Trn Nguyn c Huy [email protected]

    16

    c sp xp bi mt designer theo mt cch no cun ht ngi dng cui; chng thng c t bn ngoi trong mt vi mc, chng hn nh l tp ch hay bi bo. Nhng ngi ch trang web a thng tin mi hoc thng tin cp nht vo mn hnh qun tr, v CMS t ng kt hp cc khi v a ra thnh cc trang web hon thin. Nhng h thng CMS c th rt bin ha, mt s tnh nng c th a ra chng hn nh h tr vic ng k ca ngi dng, cc th vin ti liu, blog Forums: Mt forum l mt phn ca phn mm cung cp nhng tnh nng bn tin (bulletin board) ni ngi dng c th gi nhng thng ip ln nhiu ch khc nhau, tr li nhng thng ip khc v tng tc bng nhng cch khc, chng hn nh thng qua cc thng ip ring t. Nhiu ng dng CMS bao gm c phn forum trong , nhng i khi bn li ch mun lm mt forum t chnh n m khng phi ln sang thnh mt CMS. Cc ng dng cho forum cung cp tnh ny. Galleries: Galleries l nhng website tp hp hnh nh hoc cc loi media khc. Mt gallery mang n cho ngi dng cui tri nghim trong vic d dng di chuyn khi xem media, cng nh cung cp cc chc nng chng hn nh h thng ng k ngi s dng v cho ngi dng ng k c quyn ti ln v qun l media ca h, chia s kt qu vi nhng ngi dng khc trong cng gallery. Wiki: Mt trang wiki l mt kiu website ni m ngi dng c th chnh sa cc trang, cho php cc trang cung cp cc tnh nng cng tc mnh m. Mt trang wiki c mt s im tng t vi mt CMS nhng v mt tng th l n cung cp giao din n gin hn tp trung vo vic cung cp nhng kh nng chnh sa cho ngi dng. Wikipedia l mt trang wiki ni ting, ni hng ngn ngi dng cng tc to ra mt cun bch khoa ton th trc tuyn ln nht th gii bng cch vit, chnh sa v lin kt ni dung hon ton min ph. eCommerce: Mt ng dng eCommerce c th l tp hp nhiu loi ng dng trn li vi nhau, tp trung vo chc nng cho php bn to mt ca hng trc tuyn. V th, mt trang eCommerce s c cc tnh nng c bn ca CMS v gallery cng nh l mt gi hng (shopping cart) cho php ngi dng mua hng ha t ca hng ca bn.

    Web Application Gallery c cp nht lin tc, v th bn s thy rt rt nhiu ng dng c thm vo theo thi gian. Trong phn tip theo, chng ta s thc hin vic ci t b engine v blog ph bin l BlogEngine.NET.

    Trn Nguyn c Huy [email protected]

    17

    3. Cch to mt trang web bng cch s dng Web Application Gallery BlogEngine.NET l mt d n v blog ASP.NET m ngun m c thit k vi mc ch cung cp s n gin v kh nng m rng cao cho ngi s dng. Bn c th tm thy n trong mc Blogs ca Web Application Gallery.

    ci t BlogEngine.NET, n gin bn ch vic chn n trong Web Application Gallery, t tn trang blog trong mc Site Name v chn nt Next. Bn s thy End User License Agreement (EULA) cho phn mm, theo l a ch ti v v kch thc.

    Trn Nguyn c Huy [email protected]

    18

    BlogEngine.NET l mt ng dng nh, v th n s ti v v ci t rt nhanh chng. Khi vic ci t hon tt, bn s thy mn hnh sau:

    Chn nt OK hon tt. WebMatrix workbench s m ra. Trong nhng mc sau, chng ta s i vo c th workbench, tm hiu tng tnh nng ca n, nhng by gi, bn ch cn chn nt Run trong th Home ca thanh ribbon. Sau , trang BlogEngine.NET m bn va to s c hin th trn trnh duyt mc nh.

    Trn Nguyn c Huy [email protected]

    19

    4. To mt trang web bng cch s dng template Trong mn hnh cho mng ca WebMatrix, mt ty chn khc to mt trang web l s dng mt template c sn. WebMatrix cung cp mt s template bao gm Starter Site, eCommerce site n gin (Bakery template), gallery site n gin (Photo Gallery template) v link directory site n gin (Link Directory template). Bn hon ton c th to cc template mi v thm chng vo WebMatrix. Cc template c thm vo ti mi thi im, v th mn hnh ca bn c th trng khc hn sao vi ban u n c.

    Vic to mt trang web t mt template c sn thc hin rt n gin bng cch chn kiu template bn mun v chn OK. WebMatrix s to trang web cho bn v ti n vo workbench. Minh ha bn di cho thy workbench c hin th ngay lp tc sau khi mt trang web c to ra theo Starter Site template.

    Trn Nguyn c Huy [email protected]

    20

    Chn nt Run trn thanh ribbon duyt trang web va to.

    Mc d trang web ny trng n iu, tuy nhin ng sau , n thc thi mt h thng kim tra quyn y (role-based authentication) cho php ngi dng ng k vo trang web ca bn, ngoi ra cn cho php ngi qun tr ch nh cc vi tr cho nhng ngi trong site. Vai tr g v chng s c s dng nh th no do bn quyt nh.

    Trn Nguyn c Huy [email protected]

    21

    5. Tm hiu v WebMatrix workbench WebMatrix bao gm cc khu vc hot ng (workspace) c thit k gip bn tp trung vo nhng khu vc khc nhau ca website. Mi workspace c truy xut thng qua cc tab nm pha bn tri ca mn hnh. Lu rng, khi bn chn cc tab th thanh ribbon cng s thay i h tr cng vic hin ti ca bn. Site workspace: nh tn gi ca n, cung cp cho bn nhng cng c qun l trang web ca bn, bao gm URL, ni trang web ca bn c lu trn my tnh Files workspace: h tr bn truy xut n cc tp tin ngun v cc CSDL m trang web ca bn s dng, bao gm mt trnh bin tp m ngun y h tr hin th mu sc ca c php cho nhiu kiu tp tin, gm ASP.NET, HTML, CSS v PHP. Databases workspace: cung cp cc cng c to, chnh sa v qun l cc CSDL m trang web ca bn s dng. Reports workspace: h tr bn truy xut cc bo co ti u ha b my tm kim (SEO) m WebMatrix c th thc thi trn trang web ca bn. Trong nhng mc tip theo, chng ta s i vo chi tit 4 workspace ny. Trang web m bn va to ra vi WebMatrix t Starter Site template bao gm mt s CSDL m bn s theo di trong Databases workspace. Site Workspace Khi bn chn Site workspace, bn s thy mn hnh tng t nh bn di y. Bn s tm hiu chi tit v Site workspace trong mc ny.

    Mn hnh Site workspace c chia lm 3 phn chnh. Trn cng l thanh ribbon cung cp cho bn kh nng truy xut nhanh n cc lnh (command) khc nhau t mn hnh ny. bn tri bn s thy c cc tab cho php bn m nhng workspace khc v mt danh sch bao gm nhng mc (section) khc nhau ca workspace hin ti. Trong hnh

    Trn Nguyn c Huy [email protected]

    22

    trn, nhng mc ny l Requests v Settings. Phn cn li ca mn hnh l khu vc mn hnh chnh. Tm hiu v thanh ribbon trong WebMatrix Thanh ribbon cung cp cc cng c lin quan vic qun l trang web ca bn.

    u tin l nt My Sites cung cp cc chc nng tng t nh nt My Sites trn mn hnh cho mng m bn thy trc . My Sites cung cp mt danh sch cc trang web m bn to ra bng WebMatrix c sp xp thnh theo cc trang m bn lm vic gn y nht tr i. n gin bn ch vic chn mt trang web m bn mun m v chn OK, chn Cancel quay tr li trang hin ti.

    Nt k tip trn thanh ribbon l nt Publish. Nu bn thm mt cht, bn s thy rng n c mt mi tn nh pha di. S d c mi tn ny l v y l mt nt kt hp v menu control, v ang l mt chun vi Microsoft Office v cc giao din Windows.

    Trn Nguyn c Huy [email protected]

    23

    y l mt phn trong quan im thit k ca WebMatrix. N c th thit k tr thnh mt gii php tt c trong mt, end-to-end, t m ngun c c thng qua vic xut bn trang web ca bn ln Internet. V th, nh mt phn ca Publish workflow, bn c th cn phi cu hnh cc thit lp ca bn, hoc c th cn tm mt ni trn Internet s host ng dng ca bn. WebMatrix c thit k mang tt c tnh nng ny vo mt ni. Nt Run trn thanh ribbon cng bao gm mt menu nhng cho php bn mt trnh duyt chy trang web ca bn.

    Nh bn c th thy trong hnh trn, nt Run cng cung cp ty chn chy ng dng ca bn trong tt c cc trnh duyt c ci t trn h thng ca bn, v th bn c th kim tra trang web ca bn trn nhiu trnh duyt khc nhau ti cng mt thi im vi ch mt click. Chn nt Run m khng s dng menu th WebMatrix s chy trang web trn trnh duyt mc nh c ci t trn my ca bn.

    Trn Nguyn c Huy [email protected]

    24

    Bn phi ca nt Run, bn s thy 3 nt nh hn: Start, Stop v Restart. Nhng control ny l cc control c cung cp sn ca IIS web server. Khi bn khi ng server bng tay, bn nn lu 2 iu sau s xy ra. u tin, giao din WebMatrix cp nht hin th tnh trng server bng vic s dng mt thanh thng bo cp nht nh di cng ca ca s nh hnh bn di.

    Ngoi ra, system tray s hin th mt icon th hin IIS Express ang chy. Bn c th click phi vo icon ny qun l cc i tng ca trang web ca bn.

    Nt cui cng trn thanh ribbon l Requests. Chn Requests s m cc cng c qun l Requests trong workspace ca bn. Qun l cc request ca trang web Bn c th truy cp n phn qun l Requests ca Sites workspace bng cch chn nt Requests nm bn tri ca ca s hoc chn nt Requests trn thanh ribbon. Requests l nhng li gi t trnh duyt n trang web ca bn ly ni dung. Bt k khi no bn chy trn trnh duyt kim tra trang web, bn s to ra mt request n trang mc nh s to ra cc request n cc tp tin khc trong trang web ca bn, chng hn nh cc hnh nh hoc cc tp tin nh dng.

    Trn Nguyn c Huy [email protected]

    25

    Kh nng xem cc request l cc k hu ch trong vic chn on cc li thng gp trong trang web ca bn. Chng hn, mt li kinh in m mi lp trnh vin web no cng co th gp phi l li missing images xut hin sau khi bn to mt trang web s dng th ca HTML xc nh mt hnh nh. Th tag ny cha mt thuc tnh src xc nh ng dn n hnh nh thc s. Nu ng dn trong src khng ng, trnh duyt khng th hin th hnh nh , khi , trnh duyt s hin th hnh nh broken mc nh thay th. Bn c th s dng cc cng c Requests ny thu hp vn mt cch nhanh chng. Nh hnh trn, th Requests bao gm cc bt cho php bn lc cc request c theo di ch hin th cc li, mn hnh khng b trn bi cc request thnh cng. Ty chn lc khc l b qua cc request lin quan n hnh nh gip bn theo di cc vn quan trng khc hn l cc li missing image. Bn thn cc request c lit k trong workspace chnh nh trong hnh di y. Mi request cho bn thy HTTP status ca li gi km theo mt icon i din cho kt qu ca li gi ny, HTTP verb c dng thc hin li gi (GET hoc POST), URL cho ngun c request, thi gian thc hin li gi n lc hon thnh, v time-stamp ca n.

    Phn hin th ny ch cho thy thng tin request mc cao (high level request), nhng bn c th chn bt k request no ly thm thng tin chi tit v request . V d, request u trong danh sch trn c mt icon thng tin (information icon) trong ct Status. Ct bn phi ca workspace cp nht chi tit cho request u tin m bn c th thy nh hnh di y.

    Trn Nguyn c Huy [email protected]

    26

    Qun l cc thit lp ca trang web Kih bn chn Settings t danh sch nm bn tri mn hnh, bn s thy mc Site Settings cho php bn cu hnh mt s th m trang web ca bn cn khi chy trn my ca bn.

    phn trn cng, bn c th t URL m WebMatrix s s dng chy trang web trn my ca bn. URL ny s phi tun th theo c php http://localhost:. Trong hnh trn th URL l http://localhost:35790. Con s ny l s port t local web server phc v cho cc trang web ca bn. Trn hu ht cc web server, thng thng s port s l 80, l cng TCP/IP chun chy cc trang s dng giao thc HTTP. Tuy nhin, trn my pht trin web ca bn, bn c th c nhiu site khc nhau, do , WebMatrix cung cp cho mi trang mt s port khc nhau chng tch bit nhau trn IIS Express server. Nu bn khng mun s dng s port t ng c cp (trong trng hp ny l 35790), bn c th d dng thay i n ti y.

    Trn Nguyn c Huy [email protected]

    27

    S dng SSL: Mt s trang s dng giao thc HTTPS (HTTP Secure) khi chng ang trao i thng tin nhy cm chng hn nh mt m ng nhp email hoc ngn hng. Giao thc ny s dng cc dch v m ha v bo mt c xy dng vo c trnh duyt v server. Cc trang Secure Lockets Layer (SSL) yu cu server nh danh chnh n bng vic s dng mt chng thc c kim nh bi mt bn kim nh c lp (chng hn nh VeriSign). iu ny c phn tng t nh vic s dng passport khi bn vo mt t nc khc; bn cn mt passport c cp bi t nc ca bn xc thc danh tnh ca bn. Cc bo mt duyt cc trang web ny c thc hin bng giao thc SSL. IIS Express server i kem vi WebMatrix h tr SSL, do , nu bn cn cung cp s bo mt da trn SSL, bn c th nh du chn vo Enable SSL. Mn hnh thay i cung cp mt port mi bn c th kim tra phin bn SSL ca trang web ca bn.

    Trang web ca bn phi c mt chng ch nh danh n khi chy ch SSL, v v bn cha c chng thc, bn s gp mt s vn khi chy trang ny. Mi trnh duyt x l cc vn theo nhng cch khc nhau. Hnh bn di m t cch trnh duyt Internet Explorer response khi duyt mt trang s dng SSL m khng c chng ch.

    Khi li ny xut hin, ngi dng vn c cho la chn tip tc xem trang web vi li khuyn l h khng nn tip tc. Nh rng, li ny xut hin v trnh duyt ang c yu cu n mt trang bo mt, nhng trang ny li khng c chng thc chng minh nh danh ca n. Nu bn ang lm vic trn mt my chy Windows Server v c th cu hnh chng thc cho localhost, bn c th vt qua c vn ny.

    Trn Nguyn c Huy [email protected]

    28

    Tng t nh vy, bn c th trnh li ny khi bn trin khai ln mt nh cung cp hosting v mua mt chng thc t nh cung cp ny, km theo l phn cu hnh cho server tng ng. Qun l cc trang mc nh: thit lp cui cng trong mn hnh Settings cho php bn qun l cc trang mc nh (default pages). y l mt danh sch cc trang m server s tr v khi khng c trang no c ch nh trong request URL. Server ch tr v trang u tin m n tm thy trong danh sch. Nu n khng tm thy trang no c th server s tr v mt li. Trong v d ny, root ca trang web l http://localhost:35790. Khi bn request trang ny, lu rng request khng xc nh mt trang c th no. Server tm trong ng dn c yu cu v thy rng trang Default.htm l mt trang mc nh, v th n tr v trang ny trong response n request. Bn c th thm hoc xa cc trang mc nh t trang web mt cch d dng bng cch s dng mn hnh Site Settings ny.

    Files Workspace Nh tn gi ca n th hin phn no ngha, File workspace c dng qun l tt c cc tp tin trong website ca bn, bao gm cc tp tin cha m HTML, code, hnh nh, CSDL hoc bt k kiu tp tin no khc. Khi bn chn Files workspace, bn s lu rng thanh ribbon cha thay i mt ln na, ln ny cung cp cc chc nng tng thch lm vic vi cc tp tin.

    Khu vc Site pha bn tri l phn qun l cc website ca bn. Bng vic s dng cc nt trn , bn c th xem c tt c cc trang hin c trn my ca bn, xut bn trang web, chy trang web trn bt k trnh duyt c ci t, v khi ng/dng/thit lp li IIS Express.

    Trn Nguyn c Huy [email protected]

    29

    Phn cn li ca thanh ribbon th bn thn n th hin ngha ca n. Tuy nhin, nt Visual Studio l phn bn nn . Nu nh bn ci t Visual Studio, nt ny s khi ng n, v m project hin ti ca bn trong . Nu bn cha ci t Visual Studio, n s cho bn ty chn ti v v ci t phin bn min ph Microsoft Visual Studio Web Developer 2010 Express. Mc d phin bn Visual Studio ny l min ph, song n cung cp y tnh nng, cho bn kh nng pht trin cc website, ng dng web v cc ng dng RIA da trn Microsoft Silverlight. To cc tp tin mi Chn mi tn trn nt New cung cp cho bn cc ty chn to mt tp tin hoc th mc mi. Nu bn m menu v chn New File, bn s thy hp thoi sau:

    JScript: y l tp tin cha m JavaScript. JavaScript l ngn ng lp trnh m cc trnh duyt c th hiu c. M JavaScript chy bn trong trnh duyt, do JavaScript cho bn kh nng vit m ngun chy trn my ca ngi dng cui. CSHTML: y l loi tp tin mi m WebMatrix s dng. y l mt vit m ngun chy trn server ca bn nhng to ra m HTML a vo cc trnh duyt ca ngi dng cui. Cc trang CSHTML s dng ngn ng lp trnh C# kt hp vi HTML to nn thut ng CSHTML. VBHTML: tng t CSHTML, nhng s dng ngn ng lp trinh Visual Basic thay v C#. ASPX (C#): nn tng ASP.NET h tr cc trang web s dng phn m rng ASPX. Nhng trang ny tng t nh cc trang CSHTML v VBHTML nhng c kh nng tng thch ngc vi cc phin bn trc ca ASP v ASP.NET.

    Trn Nguyn c Huy [email protected]

    30

    Mt tnh nng thun li ca WebMatrix l khi bn to mt trang mi, n s pht sinh cng mt s thng tin c bn m bn s cn th trang bn va to c th hot ng c. V d, khi bn to mt trang HTML mi, bn khng phi nhn mt trang rng m thay vo l mt tp tin c mt s on m sau:

    Bt k tp tin no m bn to ra u c m trc tip trong WebMatrix, do cho php bn chnh sa tp tin ngay trong WebMatrix. Bn cng c th thy phn hin th mu sc c php gip bn d dng hiu v chnh sa tp tin. Mt ngoi l l nu bn m mt tp tin SDF (SQL Database File), thay v m tp tin ny trong File workspace, WebMatrix s m n trong Datase workspace v tp tin SDF c s dng bi phin bn Microsoft SQL Server Compact (i km vi WebMatrix) lu tr v qun l CSDL. Bn s thy mn hnh ny trong phn k tip. Databases Workspace Database workspace cho bn kh nng to, chnh sa, cp nht v xa cc CSDL c s dng trong cc ng dng web ca bn. Mc nh, cc CSDL m bn to ra l nh dng tp tin SDF ca SQL Server Compact, nhng bn khng phi l v gii hn ca tp tin ny. V d, nu bn s dng CSDL MySQL, hoc nu bn ci t mt ng dng t Web Application Gallery s dng MySQL, bn s vn c th chnh sa n trong WebMatrix m khng phi dng mt trnh bin tp CSDL khc.

    Pha bn tri vn l cc cng c gip bn qun l cc trang web v server ca mnh. Ngoi ra, bn s thy 3 nhm chc nng khc: nhm Database cho php bn to hoc kt ni n cc CSDL cng nh to cc bng mi; nhm Query cho php bn nh ngha v thc thi cc cu truy vn vi CSDL ca bn; nhm SQL Server h tr vic m rng t phin bn SQL Server Compact sang phin bn SQL Server y . Nhm chc nng cui ny cng c nt Install cho php bn nng cp ln phin bn min ph Microsoft SQL Server Express.

    Trn Nguyn c Huy [email protected]

    31

    To mt CSDL Nt New Database cho php bn to mt CSDL mi. Khi bn chn n, mt CSDL s c thm vo workspace vi tn l .sdf. V d, nu bn ang s dng Stater Site template v to mt trang web tn l Starter Site, chn nt New Database s to mt tp tin CSDL tn l Starter Site.sdf. iu ny c th gy ra mt cht nhm ln v template hin ti cng c mt CSDL tn l StarterSite.sdf

    Mc d nhng ci tn ny c th gy nhm ln cho bn, nhng ng lo, my tnh hiu s khc bit ny. Tuy nhin, y khng phi l mt cch lm tt khi bn c nhiu CSDL trong ng dng m s dng cng tn nhau. Bn nn lu rng bn khng th xa mt CSDL s dng Databases workspace, bi v ton b CSDL l mt tp tin, v v th bn nn s dng File workspace nu bn quan tm n vic ny. Bn c th xa cc bng, ct v cc database artifact khc. S dng cc bng Thng thng cc CSDL c chia thnh cc bng ring bit, mi bng cha mt tp d liu quan h. V d, gi s bn c mt website bn sch. Bn c th c mt bng lu cc cun sch m bn bn, mt bng khc lu nhng ln giao dch khc nhau c thc hin v bng cn li lu d liu ng k ca ngi dng. N s gy nhm ln khi lu tt c thng tin trn thnh cc record ring bit trong cng bng. Bn c th s dng nt New Table to mt bng mi trong CSDL hin ti. Khi bn chn nt New Table, bn s thy mt giao din database editor ni bn c th nh ngha tn ct trong bng, kiu d liu cho tng ct v c cho php tn ti gi tr null hay khng.

    Trn Nguyn c Huy [email protected]

    32

    Chnh sa d liu trong mt bng Nu bn double click vo mt bng trong Database workspace, WebMatrix m bng ny trong Data View vi giao din spreadsheet bn c th s dng v chnh sa d liu. Trnh editor xc thc gi tr m bn g vo vi kiu ca ct. V d, chng hn ta c bng vi cc ct v kiu gi tr nh hnh trn, khi nhp d liu vo cho bng, thay v phi nhp s theo kiu int cho ct Age th bn li nhp mt chui theo kiu string. Khi , trnh editor s hin th thng ip Invalid Data cho bn bit vn g v u l ni n xy ra, gip bn xc nh ng v tr chnh sa.

    Truy vn d liu WebMatrix cng cung cp kh nng chnh sa v chy cc truy vn s dng Structured Query Language (SQL), mt cch chun truy vn v qun l cc CSDL. V d y, bn cn truy vn trong bng Information nhng ngi c Age l 21, bn c th s dng cu truy vn nh hnh sau v kt qu truy vn c hin th bn di

    Trn Nguyn c Huy [email protected]

    33

    Reports Workspace Reports workspace cho php bn chy cc bo co v trang web ca bn. Trong phin bn u ca WebMatrix, kiu bo co duy nht l bo co v Search Engine Optimization (SEO). Bo co ny xem xt trang web ca bn bng cch tng t nh cc c my tm kim khc thc hin. Nhiu cng ty chi ra hng nghn dollar cho cc chuyn gia nng v tr trang web ca h trong cc c my tm kim. Cc chuyn gia ny tm v sa cc violation ca cc quy lut ca c my tm kim ni ting. Chy mt SEO report bng cch s dng WebMatrix thc hin vic tng t - nhng hon ton min ph. chy mt SEO violations report, bn m Reports workspace v chn New trn thanh ribbon.

    Khi bn chn nt New, bn s thy mt hp thoi ni bn c th nh ngha cc thuc tnh c bn v nng cao cho report

    Trn Nguyn c Huy [email protected]

    34

    Khi bn chn OK, WebMatrix thu thp thng tin thng qua cc trang trong website ca bn, tm cc SEO violations. Khi quy trnh hon tt, WebMatrix cho bn thy mt bo co chi tit v cc vn m n tm thy bao gm URL ca trang c vn , s lng li tm thy trong trang

    Vi danh sch cc request c lit k ra trn,WebMatrix cho php bn chn mt violation bt k xem chi tit v nhng li khuyn sa violation .

    Trn Nguyn c Huy [email protected]

    35

    Ngoi ra, mi mn hnh chi tit ca violation cung cp mt lin kt dn bn n trc tip trang c vn bn c th chnh sa ngay tc th. Bn cng s tm thy lin kt khc ni bn c th c nhiu thng tin hn v vn ang gp gip bn hiu r vn hn. Lin kt m mt hp thoi cha chi tit vn , cung cp cho bn kh nng theo di header ca trang, phn tch t ng c bn

    Trn Nguyn c Huy [email protected]

    36

    Cui cng, Reports workspace t ng lu cc report ny, cho php bn theo di tnh trng SEO ca trang web ca bn theo thi gian. Tt nhin, bn cng c th xa bt k report vo bt k lc no.

    Phn III: Lp trnh vi WebMatrix1. Tm hiu v server programming Nu bn l ngi mi lm quen vi cc ng dng hng server, ng lo, WebMatrix c thit k n gin ha cho bn xy dng cc website s dng cc server c th lp trnh c. C th bn quen vi lp trnh client, chng hn nh xy dng cc ng dng chy trn thit b di ng, desktop, hoc thm ch l cc ng dng JavaScript chy trn trnh duyt. im khc bit mu cht vi lp trnh server l nhiu m ngun trong ng dng ca bn khng chy trn thit b client. Thay vo , cc thao tc ca ngi dng cui khi to mt page request n server, v nu trang l mt active page, server thc thi m ngun v s dng m ngun to ra m HTML v cc gi tr chuyn xung cho trnh duyt pha client. Trnh duyt sau phn tch m HTML ny v hin th kt qu cho ngi dng. To trang web c lp trnh theo hng server Trong v d ny, bn s khi u bng vic to mi mt trang web rng, thm mt s m HTML vo v sau chnh sa m HTML . Quy trnh ny s gip bn hiu r v cch server hot ng khi n chy trang web ca bn. a. Khi ng WebMatrix. T mn hnh cho mng, chn Site From Template. Chn Empty Site Template v t tn l StartSite. WebMatrix s to trang web mi cho bn v workbench s hin th nh sau

    Trn Nguyn c Huy [email protected]

    37

    b. Chuyn n Files workspace, bn s thy rng v trang web ca bn c to ra da trn Empty Site template, WebMatrix to mt tp tin trong trang web ca bn. Tp tin gi l robots.txt. Bn c th xa tp tin ny bng cch chn n trong Files workspace, click phi ln tp tin v chn Delete t pop-up menu.

    Trn Nguyn c Huy [email protected]

    38

    c. By gi thm mt tp tin mi bng cch chn nt New trn thanh ribbon. Bn s thy mt hp thoi hin ra vi rt nhiu loi tp tin cho bn la chn. Trong v d ny, chn tp tin HTML v t tn cho tp tin l index.html.

    d. Chn OK. WebMatrix s to trang index.html ngay sau , v cha trong l mt s dng code khi to ban u nh sau

    e. i code c m WebMatrix to ra bng nhng dng code sau

    Trn Nguyn c Huy [email protected]

    39

    f.

    Chy ng dng ca bn bng cch chn nt Run trn thanh ribbon. Bn s thy trang web ca mnh tng t nh sau

    rng tiu trang web trn thanh tiu ca trnh duyt by gi i thnh My first page in WebMatrix. l do phn thit lp trong gi tr ca th m chng ta thm vo bn trn, nhng bn s thy rng trang web vn trng bi v th cha ni dung m trnh duyt s hin th vn cha c g. g. By gi bn s thay i trang web bng cch thm ni dung vo th . Bn c th nh ngha cc kiu heading khc trong HTML bng cch s dng cc th . Chng hn, bn c th to mt top-level header bng cch s dng th , mt second-level header bng cch s dng th on vn mc nh trong trang web c th c thay th trong cc th . By gi chnh sa ni dung trang web li thnh nh sau

    Trn Nguyn c Huy [email protected]

    40

    h. Chy ng dng. Bn s thy ni dung ca trang web s c hin th nh chnh sa trong HTML

    Server n gin ha vic a m HTML ca bn n trnh duyt, v trnh duyt hin th n. Nu bn nhn vo m ngun m trnh duyt nhn c, bn s thy rng i vi cc trang HTML, on m m trnh duyt nhn v hin th l ging ht vi nhng g bn vit.

    Trn Nguyn c Huy [email protected]

    41

    Bn va to ra trang u tin ca mnh. Nhng i vi trang web cha thng tin c kh nng thay i nh th ny, chng hn l ngy v gi, th vic vit m ngun nh th ny l iu khng nn. Bn th hnh dung trng hp ni dung trong th mi pht, mi ngy u thay i v vic cp nht theo ng vi thi gian ca trnh duyt ca ngi dng cui s nh th no! y l xut pht im ca t tng lp trnh hng server. Thay v to HTML tnh (static HTML), bn c th to mt chng trnh chy trn server v to chnh xc HTML ti thi im bn request. Phn di y s cho bn hng thc hin iu ny. To tnh ng cho trang ca bn u tin, tp tin hin ti ca bn (index.html) s khng thc hin vic . l mt tp tin HTML, server nhn ra cc tp tin vi phn m rng .html nh HTML tnh. Khi ngi dng duyt n tp tin ny, server s ch hin th n ln m khng thc thi on m no c. server chy mt chng trnh, bn phi s dng mt loi tp tin m server nhn ra nh mt loi tp tin cha cc cu trc lp trnh m n s chy. l trang CSHTML (hoc VBHTML). Trong phn tip theo, bn s to mt tp tin CSHTML in ngy v thi gian mt cch t ng. a. Dng nt New to mt tp tin CSHTML mi, t tn l timedate.cshtml

    b. Chnh sa trang CSHTML ny n cha nhng phn nh du (markup) tng t nh tp tin index.html m bn to ra trc .

    Trn Nguyn c Huy [email protected]

    42

    c. m bo rng timedate.cshtml c m trong trnh code editor ca WebMatrix v sau chn nt Run. WebMatrix gip n gin ha vic ny v n u tin m active page hn l trang mc nh ca website. Khi bn chn Run, bn s c duyt thng n trang CSHTML

    d. .NET Framework h tr mt i tng gi l DateTime m bn c th s dng lu ngy v thi gian. Thuc tnh DateTime.Now tr v ngy v thi gian hin ti. C rt nhiu cch bn c th nh dng ngy v thi gian. Hm DateTime.Now.ToLongDateString() tr v ngy theo kiu long format v d Tuesday August 30th, 2011. Bn s s dng chng trong m ngun trong trang CSHTML ca bn. Bn cn cho server bit lm th no phn bit ni dung tnh, chng hn nh HTML, v ni dung ng (active content), chng hn nh m ngun. thc hin vic ny, nhng g bn cn lm l t du @ trc phn m ngun ca bn cho server bit rng phn pha sau l m ngun. C php nh vy c gi l Razor. y, thay v hin th DateTime.Now.ToLongDateString() ln trnh duyt, WebMatrix s thc thi m Razor v xut ra kt qu ln trnh duyt.

    Trn Nguyn c Huy [email protected]

    43

    By gi bn chy trang ny, bn s thy ngy v thi gian chnh xc. Bn va vit mt trang server ng to m HTML thay v n gin l static HTML. T by gi, bt c khi no ngi dng vo trang web ca bn, h s thy trang tng t nh th ny

    e. By gi bn m phn m ngun trong trnh duyt ln, bn s thy rng lnh @DateTime.Now khng cn xut hin trong . l bi v on m chy trn server v server s dng n to ra m HTML tng ng. Trnh duyt khng bit g v thi gian v ngy thng hin ti, n ch hin th nhng g m server gi.

    Trn Nguyn c Huy [email protected]

    44

    Trc khi hnh trn c chp li, trnh duyt c refresh v thi gian c cp nht t 5:07 thnh 5:15. Mc khc, vic refresh trang web to ra mt li gi mi n server thc thi li cc lnh DateTime.Now v to ra HTML mi. 2. Gi d liu n server Vi giao thc HTTP, thng thng trnh duyt ca bn to cc request n server bng vic s dng phng thc GET t giao thc HTTP ly thng tin t server. Bn va thc hin vic ny xong trong nhng phn hng dn trn nhng c th l cha nhn ra n v vic s dng GET ngm nh theo cch m trnh duyt request cc trang web. Nh cc ng dng s dng HTML form. Khi bn chn Submit, trnh duyt gi thng tin trong cc trng ca form n server bng vic s dng phng thc POST trong giao thc HTTP. Khi gi d liu n server, bn s s dng phng thc POST. Mt ln na, tt c u din ra ngm nh bn trong, bn khng cn lm iu g c bit s dng POST, nhng nu m ngun ca bn nm pha server bit loi phng thc no m mt request ang s dng, server c th theo phn hi li. Bn s hiu c cch thc thc hin trong phn ny. Bn s bt u bng vic to mt form cho php ngi dng nhp vo mt s d liu. a. bt u, bn to mt trang web rng mi v t tn l StartSite2. b. Nh trong phn trc, thm vo mt trang mi t tn l index.cshtml. Chnh sa ni dung ca trang li nh sau

    u tin l th . Th ny cho trang web bit rng ni dung trong cc th form s c dng nh l d liu c truyn n server bng vic s dng phng thc POST bt c khi no ngi dng chn nt Submit. Nu khng c nt Submit, form s b b qua. Bn s dng thuc tnh action ca th form xc nh trang web s x l d liu c a ln no. Nu, nh trong v d ny, bn khng nh ngha mt thuc tnh action c th, trnh duyt s chuyn trang n cng URL m ban u trang c duyt n. Trong th , bn s thy rng c 3 control trong . Hai trong s c kiu text. y l nhng control hin th nh cc textbox c bn nhp d liu. Mi textbox c mt ci tn (fName v lName) s c dng xc nh d liu m ngi dng nhp vo cc textbox khi h chn nt Submit. Control th ba

    Trn Nguyn c Huy [email protected]

    45

    chnh l bn thn nt Submit c mt thuc tnh type, cn value th hin on text hin th bn ngoi, khng phi l Submit. c. Chy trang web, n s hin th trng nh th ny

    d. Nh thng thng vn lm, chn nt Add me. Bn s thy rng thanh progress di chuyn nhng trang web khng c g thay i. iu ny l do, u tin khi bn chy trang web, bng vic m trnh duyt v chuyn n trang , bn ang pht i mt GET request ly index.cshtml. Khi bn chn nt Submit, trnh duyt ca bn pht i mt POST request nhng v thuc tnh action ca form c c thit lp, POST chuyn n trang gc. V khng c m ngun no trong trang web x l thng ip POST, server n gin tr v m ngun v gi trang ny li trnh duyt, v do , bn s khng thy bt k thay i no c. e. Tip theo, hy x l thng ip POST bng cch thm vo hai ci tn v tr v kt qu. Chnh sa m ngun ca bn nh sau

    Ti phn u trang, c mt phn m ngun mi bt u vi k hiu @. Cng s dng k hiu ny trong nhng phn trn, nhng v trong v d ny s dng nhiu dng m ngun, do bn bao nhng dng ny li trong { } cho server bit l tt c nhng g trong l phn m ngun.

    Trn Nguyn c Huy [email protected]

    46

    Phn m ngun ny rt minh bch, r rng. u tin, n to ra mt s bin (nhng dng bt u vi t kha var). Bin u tin s lu chui kt hp ca hai chui c nhp vo. Hai bin k tip lu cc chui c nhp vo. Phn th v nm dng m sau: Nh trnh by trc , ln u tin bn gi trang web, bng cch g a ch vo trnh duyt (hoc chn Run m tp tin), trnh duyt ca bn yu cu cc trang bng vic s dng phng thc GET ly trang web. Sau , khi bn chn nt Submit, v thuc tnh action c trng, phng thc POST ch gi li trang gc trc . x l phng thc POST, n gin bn s dng biu thc iu kin if(IsPost) m khi n l true, ngha l ngi dng s dng form chuyn thng tin. Khi bn gi mt form n server vi HTML, cc gi tr ca form (c nhp vo bi ngi dng) c lu tr trong thng ip Request. ly chng, n gin bn ch cn s dng bin Request l mt chui cc gi tr. Khi bn to cc textbox, bn t tn chng l fName v lName. Hn na, cc gi tr m ngi dng nhp vo c chuyn n server trong POST request v c hiu lc trong m ngun ca bn, y l Request[fName] v Request[lName].

    Sau , thc hin vic cng hai bin li v lu vo vo trong bin fullName. Bn c th d dng xut gi tr ca bt k bin no ra trang ca bn n gin bng cch bng cch t tn ca bin sau k hiu @ ( y l @fillName). f. By gi bn chy ng dng. Bn s thy cc kt qu ca GET request form rng s khng cho kt qu. g. G vo hai ci tn v chn nt Submit. Vic ny s thc hin mt POST request. Trang web nhn ra rng request ny l POST, do n ly d liu ngi dng nhp vo, cng li, to ra chui kt qu v nhng n vo trong trang web.

    h. Vn by gi l mc d bn c kt qu, nhng nhng trng bn nhp vo li bin mt khi textbox. Cu tr li rt n gin. Bn c th s dng thuc tnh value ca th input ghi li gi tr ca hai bin fName v lName, khi POST request hon tt v trang c to ra, nhng bin ny c ghi vo li cc textbox.

    Trn Nguyn c Huy [email protected]

    47

    i.

    Chy li ng dng v bn s thy mn hnh tng t.

    Phn IV: S dng hnh nh trong WebMatrixTrong phn ny bn s bt u bng vic tm hiu th ca HTML v cch s dng n cho cc hnh nh tnh v ng. Sau bn s c mt s tri nghim trong vic vit mt ng dng ti cc hnh nh ln server, thay i kch thc v hin th chng trong HTML. Ni dung trong phn ny: To mt trang web s dng hnh nh. To cc hnh minh ha v lin kt. Lp trnh vi th Image. S dng WebImage helper thm hnh nh vo mt trang web.

    1. To mt trang web s dng hnh nh s dng mt hnh nh trong mt trang web, bn c th dng th ca HTML. Th ny thng thng c 2 thuc tnh, mt cho ng dn ca hnh nh, v mt cho on vn hin th cho ngi duyt web bit rng khng th hin th hnh nh c. Hy cng xem cch xy dng mt trang web s dng mt th trong WebMatrix. a. Khi ng WebMatrix v to mi mt website theo Empty Site template. t tn website, sau chuyn n Files workspace. Trn thanh ribbon, chn Add Existing thm tp tin c sn.

    Trn Nguyn c Huy [email protected]

    48

    b. Duyt n hnh nh trn my ca bn v chn hnh . Sau khi hnh c thm vo, bn hon ton c th t li tn cho hnh . Lu rng khng phi tt c trinh duyt u h tr tt c cc nh dng hnh nh. y, n gin, bn nn s dng nh dng JPEG (hoc JPG). c. Chnh li tp tin index.cshtml thm vo mt th tr n hnh m bn va thm vo website ca bn.

    d. Chy trang web ca bn, trnh duyt s hin th tng t nh th ny.

    Trn Nguyn c Huy [email protected]

    49

    Nh bn thy trong hnh trn, hnh nh hin th vn cn kh ln v gn nh ra ngoi phm vi ca trnh duyt. e. gim kch thc ca hnh, s dng cc thuc tnh height v width ca th nh di y

    By gi bn refresh li trang web xem kt qu

    Bn nn lu y rng bn cha thay i kch thc tht ca hnh nh m ch thay i kch thc vo thi im bn yu cu trnh duyt hin th hnh nh ny. Khi xy dng trang web, bn c mong mun to cc hnh minh ha ca nhng hnh nh ca bn cho cc phin bn nh hn, v s dng chng lin kt n cc phin bn ln hn.

    Trn Nguyn c Huy [email protected]

    50

    2. To nh minh ha v lin kt Trong phn trn, chng ta bit cch thm mt hnh nh vo mt trang web v s dng cc thuc tnh height v width t kch thc khi hin th ln trnh duyt. Cch ny hot ng tt vi nhng hnh c kch thc nh (chng hn nh 640 x 480), nhng khi bn mun hin th hnh nh ln hn, bn phi buc ngi dng ti v nguyn bc hnh hin th n v n thng b nn li cho va vi mn hnh. Trong phn ny, bn s tm hiu cch to mt hnh thu nh, hin th n trn trang web v sau to lin kt n nh ln hn. a. Trn my ca bn, duyt n nh c kch thc ln, chng hn nh nh t my chp hnh k thut s. b. Double click vo hnh ny, n s c m trong Windows Photo Viewer. Trong , bn chn Open trn thanh menu v chn Paint.

    c. Trong Paint, chn nt Resize trn thanh ribbon

    Trn Nguyn c Huy [email protected]

    51

    Khi chnh kch thc, tt nht l gi hnh nh cng t l vi phin bn gc, ngha l nh nh hn trng cng t l vi t l v chiu cao v chiu rng vi nh ln trnh lm ko dn hay chn ni dung ca n. d. Ti phn trn cng ca hp thoi, chn Pixels. Horizontal v Vertical dng thay i chiu rng v chiu cao ca bc nh. Chc chn rng Maintain aspect ratio phi c nh du, v g 200 vo Vertical th t ng Horizontal c t gi tr l 361. Chn OK, by gi bn s thy hnh nh li trong Paint. (Bn nn lu li vi tn khc trnh ghi ln nh gc) e. Trong WebMatrix, chn Add Existing vo thm nh va thu nh vo. f. Chnh li trang index.cshtml thm th tr n hnh thu nh g. By gi hy thm mt siu lin kt (hyberlink) n hnh ny khi ngi dng chn hnh ny, hnh y s c hin th.

    By gi refresh li trang web xem kt qu. rng by gi hnh thu nh c mt vin xanh bao quanh n. y l mt mc nh ca trnh duyt cho bit rng hnh ny l mt lin kt, tng t nh cho bit on vn l lin kt bng cch gch chn n.

    Trn Nguyn c Huy [email protected]

    52

    3. Lp trnh vi th Image Trong hai phn trn, chng ta s dng thuc tnh src vi ng dn cng tr n hnh nh. Trong v d ny, bn s tm hiu cch to cc tham s trn trang web xc nh tn ca hnh nh v cho d bn c mun s dng hnh thu nh hay khng. Nhng tham s trong cc trang WebMatrix c cha trong Request collection. s dng mt tham s, n gin bn ch vic kim tra xem n c null hay khng bng Request[tn_tham_s]. Nu cc tham s tn ti, bn c th c n nh mt chui. Chng hn, nu bn mun to mt trang s dng cc tham s cho hnh nh v hnh thu nh, bn c th s dng mt URL nh th ny http://server/page/cshtml?imagename=whatever&thumb=yes Cc tham s trong mt URL bt u vi k t ? ch ra rng danh sch tham s l pha sau; cc tham s c tch bit nhau bng cc k t &. Di y l on m cho mt trang s dng cc tham s v ly hnh nh chnh xc da trn cc thit lp ca chng

    Hy cng i vo chi tit on m. u tin, c mt bin gi l srcPath c t l mt chui rng. Tip theo l cc biu thc iu kin, nu c mt tham s l imagename th gi tr ca n c ch nh cho srcPath. Nu khng, srcPath mc nh l Imagine-Cup2012-Australia. Lu rng, nu ngi dng khng nh ngha tham s imagename, th

    Trn Nguyn c Huy [email protected]

    53

    Request[imagename] s l null, v th on m phi kim tra xem c tham s khng trc khi ch nh n cho srcPath, ngc li trang web s c mt li nu tham s ny cha c thit lp. Tip theo, mt biu thc iu kin kim tra xem ngi dng c mun hnh thu nh khng. Nu ngi dng b qua tham s ny hoc tr li bt k iu g khng phi yes, hnh thu nh s khng c s dng. hin th hnh nh y , on m phi thm vo .jpg; hin th hnh thu nh phi thm vo _thumb.jpg. By gi c hnh y v hnh thu nh u c tuyn vo bin srcPath. hin th hnh nh, bin srcPath phi t vo thuc tnh src ca th thay v on m cng nh trc. Bn c th thy kt u cui cng trong hnh di y. URL trong trnh duyt ni n xc nh c yu cu hin th hnh thu nh hay khng.

    Trn Nguyn c Huy [email protected]

    54

    4. S dng WebImage helper WebMatrix cung cp mt i tng helper gi l WebImage cho php bn thc hin mt s thao tc tnh ton v hnh nh phc tp hn, chng hn nh thay i kch thc, trn server. V d, trong trng hp nh trnh by trong phn trc, mt hnh gc c kch thc ln v bn mun s dng nhng hnh thu nh, bn s khng phi s dng Paint hoc chng trnh tng t thay i n bn c th n gin ha bng vic cho ngi dng ti nh ln server v server thanh i thanh hnh nh hn ngi dng cui xem. Trong phn ny chng ta s tm hiu cch thc hin vic ny vi vic s dng WebImage helper. u tin, hy i qua cc bc ti hnh ln thng qua trnh duyt n server v cch server lu n. a. Khi ng WebMatrix v to mt website rng, sau to mt th mc mi tn l images trong website. b. Thm mt tp tin upload.cshtml v thm on m sau vo th ca tp tin .

    on m ny to ra mt form vi file input control gm 1 textbox cng mt nt Browse bn cnh . Khi ngi dng chn nt Browse, mt hp thoi hin ra c s dng tm mt tp tin ti ln. form ny c kiu l multipart/form-data ngha l n s submit d liu kiu nh phn. Thuc tnh action y trng v thc hin phng thc POST. c. in on m sau vo phn u ca tp tin upload.cshtml

    on m ny thit lp ba bin, mt bin WebImage c dng lu hnh nh, v hai chui, mt cho tn tp tin hnh nh v mt cho ng dn trn server ni hnh nh s c tm thy. Tip theo, on m kim tra nu c mt phng thc POST c hnh thnh khi nt Submit ca form c nhn. Khi bn ti ln mt hnh nh, thng th n s b chia thnh nhiu phn v s c ghp li sau . y, WebImage c th thc

    Trn Nguyn c Huy [email protected]

    55

    hin vic ny cho bn, ch cn thc hin li gi hm GetImagerequest. By gi bn c mt hnh nh c lu. d. Cui cng, sau khi hnh nh c ti ln, bn cn hin th n, do , quay li th v thm vo nhng dng m sau

    Khi trang web thc thi mt phng thc POST, bin strImgPath s c t l g , do th s c thit lp v trang web s hin th hnh nh. Khi ln u tin bn chy trang web, bn chy n nh mt phng thc GET v ng dn hnh nh cha c thit lp, do bn s khng thy g c. e. Chy trang web v bn s thy mn hnh tng t nh sau

    f.

    Chn nt Browse v tm tp tin Imagine-Cup-2012-Australia_thumb.jpg to trc (trong v d ny). Chn Ti ln v hnh nh s hin th cho bn

    g. Bn ti ln mt tp tin v lu n trn server. Vo Files workspace ca WebMatrix v m th mc images, bn s thy tp tin trong .

    Trn Nguyn c Huy [email protected]

    56

    h. By gi th ti ln mt tp tin ln hn, bn c th gp li Maximum Request Length Exceeded nh sau

    Bn gp li ny v ln ti a ca mt item c th c a vo mt Request mc nh l 4MB, nhng hnh nh va ti ln ln hn kch thc cho php . V di y l cch chnh li ny. S dng Web.Config thay i kch thc hnh nh mc nh cho php Gii php cho li Maximum Request Length Exceeded l d dng mt tp tin cu hnh cho trang web ca bn. n gin l bn ch vic cho trang web cho php kch thc ln hn trong request. thc hin vic ny, bn thm mt tp tin Web.config vo trang web ca bn. a. T Files workspace, chn nt New. Trong hp thoi Choose A File Type, chc chn rng bn chn All bn tri. Bn s thy Web.config nh mt trong nhng loi tp tin m bn c th to.

    Trn Nguyn c Huy [email protected]

    57

    b. Chn OK. Tp tin web.config c thm vo trang web ca bn. l mt tp tin XML gn nh l rng tng t nh th ny

    c. Thit lp kch thc request ln nht l mt phn trong thit lp , do bn chnh sa Web.config ca bn thm n vo nh sau

    Thit lp va ri cho php bn ti ln tp tin c dung lng ti a l 1GB. Lu , trong thc t, kch thc tht thng rt ln nhng n s t bn v trng hp b tn cng t chi dch v (Denial of Service) khi mt ngi ti ln mt tp tin rt ln lm nghn server ca bn.

    Trn Nguyn c Huy [email protected]

    58

    d. Sau khi thm vo v thay i Web.config, khi ng li server ca bn bng cch chn nt Restart trn thanh ribbon. By gi duyt n trang ti hnh ca bn v th ti ln mt tp tin ln. Bn c th n thnh cng.

    Bn thnh cng trong vic xy dng mt trang web cho php ngi dng cui ti ln hnh nh ln v WebImage helper lm cho vic lp trnh tr nn n gin hn. Tuy nhin, hnh nh vn rt ln v bn khng mun ngi dng phi to hnh nh thu nh cho mnh, hy WebImage lm iu . Thay i kch thc hnh nh vi WebImage WebImage helper h tr lnh Resize cho php bn thay i kch thc ca hnh nh. Bn c th lu li hnh thay i kch thc lm hnh thu nh. a. Khi u bng vic to mt th mc con tn l thumbnails trong th mc images. b. Chnh li m ngun thm mt bin mi cho ng dn n hnh thu nh. c. Sau khi m ngun ca bn c th lu hnh nh trn server, thm mt s dng m mi thay i kch thc hnh nh v lu cc kt qu vo th mc thumbnails.

    Bn c th thy rng hnh nh c thay i li kch thc chiu rng v/hoc chiu cao l 200 pixel. Gi tr preserveAspectRatio c t l true cho bit rng t l s c gi so vi bn gc; v gi tr preventEnlarge c t l true cho bit rng nu hnh nh hin ti nh hn 200 th kch thc s khng b thay i. Hnh ny c lu vo trong th mc thumbnails.

    Trn Nguyn c Huy [email protected]

    59

    d. Cui cng, thay i m ngun trong th hin th hnh thu nh thay v hnh y .

    Bn c th thy kt qu tng t nh sau

    y l m ngun y ca trang ny

    Trn Nguyn c Huy [email protected]

    60

    Phn V: S dng video trong WebMatrixNgi dng Internet rt l ln v ngy cng tng ln theo thi gian. Tuy nhin, vic chuyn video thng qua Internet n cc trnh duyt c rt nhiu thch thc, v th c nhiu phng php c a ra gip vic ny. Trong phn ny, bn s tm hiu qua mt s kh nng pht trin xy dng cc trang web video. Bn s bt u bng phng php n gin nht mt siu lin kt n tp tin media trn server m ngi dng chn m bng trnh player mc nh ca h. Sau , bn s tm hiu cch cc helper mi ca WebMatrix c th n gin ha cng vic gi video ny. 1. S dng video trong trang web ca bn Trong nhng nm qua, s lng nh dng video c a ra rt nhiu, nhng y, chng ta tp trung vo ba loi nh dng ph bin nht: WMV: nh dng Windows Media, c s dng bi Windows Media Player, Silverlight SWF v FLV: da9inh5 dng Flash Video, c s dng bi Flash v xut hin trn nhiu trang web. MP4: mt nh dng ph bin v c h tr trong HTML5. Trong mc ny, bn s s dng phng php n gin nht l a vo cc ng dn trong trang web ca bn, cho ngi dng chn chng v pht trn trnh duyt mc nh ca h. To mt trang web video n gin trong WebMatrix a. To mt trang web rng mi, sau to mi mt tp tin t tn l index.cshtml, mt th mc mi tn l media v a vo mt tp tin video. b. M tp tin index.cshtml t Files workspace v thm mt siu lin kt n tp tin video nh sau

    Trn Nguyn c Huy [email protected]

    61

    c. Chy trang web, chn lin kt trn trang web m trnh pht media ca bn v xem video .

    Nhng Media Player bng cch s dng th HTML cung cp th cho php bn nhng cc i tng vo trong mt trang web. Th ny xc nh kiu i tng bng vic s dng b nh dng bn trong ca n v gm mt tp cc tham s c dng thit lp cho i tng c nhng . a. nhng Windows Media Player vo trang web, chnh m HTML ca bn n s dng th .

    b. Chy trang web v th n trn Windows Internet Explorer. Bn s thy video ang pht, c nhng vo trong trang web tng t nh hnh sau. Lu rng vic ny ch hot ng nu Windows Media Player 10 c ci t trn my ca bn, bi v classID c xc nh trong m ngun ch nh phin bn .

    Trn Nguyn c Huy [email protected]

    62

    Nu bn th chy trang ny trn trnh duyt khc, chng hn nh Opera hay Safari, bn c th khng c c kt qu nh trn, v cc trnh duyt khc c th yu cu bn ci plug-in cho php media c pht.

    c. Th ci thin bng on m ny, thay th on vn bng th .

    Trn Nguyn c Huy [email protected]

    63

    Hnh bn di cho thy kt qu khi chy on m trn. Mc d trang web vn khng hot ng, t nht n cng cho ngi dng cui bit h cn lm g. Trong trng hp ny, h cn ci t Windows Media Player plug-in.

    By gi, khi ngi dng nhn ra vn , c c th theo nh ch dn v ci t plug-in. Sau h c th xem video nh bnh thng. 2. S dng Video helper Chc nng Video helper h tr pht nhiu loi khc nhau ca cc tp tin Windows Media, bao gm cc tp tin WMV video v WMA audio, cng nh l cc tp tin MP3. N cng h tr chy trn cc ng dng Silverlight hoc Flash. N rt d s dng, n gin bn ch vic gi @Video.MediaPlayer helper, truyn vo n mt s thuc tnh nh ngha hnh vi ca trnh player. Cc thuc tnh bao gm: path: v tr tp tin media. width: chiu rng ca trnh player tnh theo pixel. height: chiu cao ca trnh player tnh theo pixel. autoStart: true hoc false. Nu l true, video s t ng c pht. playCount: s ln video s c pht. uiMode: xc nh mc giao din ca trnh player s hin th. Gi tr c th l invisible, none, mini hoc full. stretchToFit: xc nh trnh player s co khp vi phn cha n.

    Trn Nguyn c Huy [email protected]

    64

    enableContextMenu: true hoc false. Nu l true, ngi dng c th click phi vo video ly trnh n ng cnh. mute: true hoc false. Nu l true, m thanh s khng c pht. volume: mt s nguyn t 1 n 100, vi 100 l ln nht.

    a. To mt trang mi v chnh sa tp tin index.cshtml nh sau

    b. Chy trang web, bn s thy rng n hot ng tng t nh th , trong v d trc bao gm c th nh mt fallback cho cc trnh duyt khng phi l Internet Explorer.

    c. Xem m ngun ca trang t trnh duyt, bn s thy rng Video helper to mt th vo ng v tr m bn thc hin bng tay trc .

    Trn Nguyn c Huy [email protected]

    65

    C th bn cng s gp phi li nh sau khi chy trang web.

    l do helper ca WebMatrix cha nhn ra c i tng Video theo c php Razor. WebMatrix hiu c v hin th ng khng ch Video helper m cc ASP.NET helper khc, bn phi ci t b th vin h tr. Ci t ASP.NET Web Helpers Library vo trang web ca bn a. Trong Site workspace ca WebMatrix, trong content panel gia mn hnh, chn ASP.NET Web Pages Administration.

    Trn Nguyn c Huy [email protected]

    66

    b. Trang qun tr s c ti ln trong trnh duyt ca bn. V y c th l ln u tin bn vo trang ny, n s nhc bn to mt mt khu mi.

    c. Sau khi bn chn Create Password, mt trang kim tra bo mt nh sau s hin th nhc bn t li tn cho tp tin mt khu v nhng l do bo mt.

    Trn Nguyn c Huy [email protected]

    67

    d. Quay tr li WebMatrix, vo Files workspace, click phi ln th mc gc ca trang web ca bn v chn Refresh. Trong danh sch cc tp tin v th mc by gi s xut hin thm th mc App_Data. M th mc ny v bn s thy th mc Admin nm bn trong, mt tp tin mi c to ra l _Password.config nm trong th mc Admin ny. By gi bn thc hin vic i tn tp tin ny thnh Password.config v lu li. e. Quay li trang kim tra tnh bo mt lc trc trn trnh duyt, chn lin kt Click here cui thng ip.

    f.

    ng nhp vo trang qun tr vi mt khu m bn nhp trn. Trang web s hin th Package Manager gm danh sch cc gi ci t h tr cho WebMatrix.

    Trn Nguyn c Huy [email protected]

    68

    g. Tm gi ASP.NET Web Helpers Library, chn phin bn m bn mun ci t v chn nt Install.

    Trn Nguyn c Huy [email protected]

    69

    h. Quay li Files workspace trong WebMatrix, bn refresh li th mc gc ca trang web, lc ny bn s thy nhng th mc v tp tin mi c to trong .

    i.

    Chy li trang web ca bn v xem kt qu.