You are on page 1of 97

Lu hnh ni b

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Table of Contents
1.

Gii thiu mn hc ............................................................................................................................... 5

2.

Ngn Ng HTML ................................................................................................................................. 6


2.1.

HTML L G? ............................................................................................................................... 6

2.2.

Website Tnh ................................................................................................................................. 6

2.3.

Ai Lm Web Tnh ......................................................................................................................... 7

2.4.

Cu trc mt website .................................................................................................................... 8

2.5.

Th (tag) v thuc tnh ca th.................................................................................................... 10

2.6.

Cc th thng gp ..................................................................................................................... 11

2.6.1.

Th Heading H1->H6.......................................................................................................... 11

2.6.2.

Th Ch Thch Trong HTML ............................................................................................. 12

2.6.3.

Th Paragraph ..................................................................................................................... 13

2.6.4.

Th Phn on Br v Hr ..................................................................................................... 14

2.6.5.

Th Trnh By Vn Bn ...................................................................................................... 15

2.6.6.

HTML List .......................................................................................................................... 17

2.6.7.

Th IMG.............................................................................................................................. 19

2.6.8.

HTML Link ......................................................................................................................... 19

2.6.9.

HTML table ........................................................................................................................ 20

2.7.
3.

Mt s bi tp v HTML............................................................................................................. 23

S Lc V CSS ................................................................................................................................. 23
3.1.

CSS L G? ................................................................................................................................. 23

3.2.

c Tnh C Bn Ca CSS ......................................................................................................... 23

3.3.

Selector, Class, ID....................................................................................................................... 24

3.4.

C Php Ca CSS ....................................................................................................................... 26

3.5.

Chn CSS Vo Website .............................................................................................................. 27

3.6.

Cc CSS Thng Dng ............................................................................................................... 29

3.6.1.

nh Ngha Cho on Vn Bn ......................................................................................... 29

3.6.2.

nh Ngha Font.................................................................................................................. 32

3.6.3.

ng Vin V Cc Thuc Tnh ........................................................................................ 33

3.6.4.

Thuc Tnh Margin ............................................................................................................. 35

3.6.5.

Thuc Tnh Padding ............................................................................................................ 36

3.6.6.

Thuc Tnh Overflow.......................................................................................................... 37

3.6.7.

Thuc Tnh Opacity/Transparent ........................................................................................ 37

3.6.8.

Thuc Tnh Position ............................................................................................................ 37


2

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

4.

5.

6.

3.6.9.

Thuc Tnh Display ............................................................................................................ 38

3.6.10.

Thuc Tnh Float, Clear ...................................................................................................... 38

3.7.

Pseudo-classes............................................................................................................................. 39

3.8.

Bi Tp V CSS .......................................................................................................................... 40

JavaScript ............................................................................................................................................ 40
4.1.

Khi Nim ................................................................................................................................... 40

4.2.

Cch Nhng Javascript Vo HTML............................................................................................ 40

4.3.

Th Noscript................................................................................................................................ 41

4.4.

Hp Thoi Trong Javascript........................................................................................................ 42

4.5.

Bin Trong Javascript ................................................................................................................. 43

4.6.

Ton T Trong Javascript ........................................................................................................... 44

4.7.

Biu Thc Regular ...................................................................................................................... 46

4.8.

Cc Lnh iu Kin, Lp ........................................................................................................... 47

4.9.

Hm ............................................................................................................................................. 50

4.10.

Mng ....................................................................................................................................... 53

4.11.

DOM Element ......................................................................................................................... 57

4.12.

Bi Tp V Javascript ............................................................................................................. 62

PHP ..................................................................................................................................................... 62
5.1.

PHP L G? ................................................................................................................................. 62

5.2.

Cch Vit Comment .................................................................................................................... 63

5.3.

Bin V Kiu Gi Tr .................................................................................................................. 64

5.4.

Hng S ....................................................................................................................................... 65

5.5.

Ton T ....................................................................................................................................... 66

5.6.

String Trong PHP ........................................................................................................................ 68

5.7.

Bin Ton Cc Trong PHP ......................................................................................................... 70

5.8.

Ton T iu Kin Ton T So Snh ........................................................................................ 71

5.9.

GET, POST, REQUEST ............................................................................................................. 73

5.10.

Lp Trong PHP ....................................................................................................................... 74

5.11.

Mng Trong PHP .................................................................................................................... 74

5.12.

Hm Trong PHP ...................................................................................................................... 78

5.13.

File Upload.............................................................................................................................. 80

5.14.

Session V Cookie .................................................................................................................. 83

PHP V MySQL ................................................................................................................................. 86


6.1.

Khi Nim V MySQL ............................................................................................................... 86


3

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


6.2.
7.

Kt Ni PHP V MySQL ............................................................................................................ 89

Tng Bc Xy Dng ng Dng Shopping Cart .............................................................................. 91


7.1.

Chun B ..................................................................................................................................... 91

7.2.

Xy Dng Trang BackEnd (Admin) ........................................................................................... 91

Trang Login Ca Admin ..................................................................................................................... 91


Trang Qun L Sn Phm ................................................................................................................... 92
Trang Qun L n Hng .................................................................................................................. 92
Xy Dng Trang FrontEnd (Trang Sn Phm) ................................................................................... 92
7.3.
8.

Xy Dng Gi Hng ................................................................................................................... 92

Gii Thiu V YII Framework ........................................................................................................... 92


8.1.

YII Framework............................................................................................................................ 92

8.2.

M Hnh MVC ............................................................................................................................ 94

8.3.

Cc component, extension .......................................................................................................... 95

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


1. Gii thiu mn hc
Mn hc xy dng ng dng web bng ngn ng PHP v MySQL.
Qua kha hc, chng ta s hiu c khi nim web tnh, web ng, qu trnh xy dng mt
trang web. Cng nh hiu c vai tr ca tng ngi nh Design, Html, Dev, QC. T y,
ta c th xy dng cho mnh mt trang web n gin. Vic ny gip ta c tin d dng hc
thm nhng framework nh YII, Zend, Codeigniter, Laravel,...
Trong kha hc chng ta s hc qua cc phn c bn nh:
HTML
CSS
Javascript
Mysql
PHP
V mt s phn nng cao nh
Jquery
Bootstrap
MVC Framework
Ngoi ra cn lm quen mt s tool dng pht trin ng dng web nh: Netbean, Sublime
Text, Apache, Navicat, ...
Yu cu hc vin:
Ci t Web Server : xampp hay wamp. Xampp 1.8
http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.8.3/
Ci t IDE: Sublime Text 3 hay Netbean. Sublime text 3
http://www.sublimetext.com/3

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


2. Ngn Ng HTML
2.1. HTML L G?
- HTML (ting Anh, vit tt cho HyperText Markup Language, hay l "Ngn ng
nh du Siu vn bn") l mt ngn ng nh du c thit k ra to nn
cc trang web vi cc mu thng tin c trnh by trn World Wide Web. HTML
c nh ngha nh l mt ng dng n gin v c s dng trong cc t chc cn
n cc yu cu xut bn phc tp. HTML tr thnh mt chun Internet do t
chc World Wide Web Consortium (W3C) duy tr. Phin bn chnh thc mi nht ca
HTML l HTML 4.01 (1999). Sau , cc nh pht trin thay th n
bng XHTML. Hin nay, HTML ang c pht trin tip vi phin bn HTML5 ha
hn mang li din mo mi cho Web.
- HTML khng phi l mt ngn ng lp trnh my tnh m n l mt ngn ng s
dng cc th html biu din cc trang web.
- Mt ti liu html tng ng vi mt trang web. Mt ti liu html din t mt trang
web.
- Cc th html cn c gi l cc phn t html ( hay cc element ).
2.2. Website Tnh
Khi nim:

- Website tnh (static web) l nhng website khng c h thng qun l ni dung, m
ni dung c gn cng. Hin nay web tnh hu nh t tn ti hoc ch tn ti vi
nhng cng ty chuyn v thit k website.
- V kin thc c bn th web tnh thng c xy dng t CSS, HTML,
JAVASCRIPT (DHTML), hin nay c thm cng ngh HTML5 & CSS3.
- Website tnh thng c dng thit k cc trang web c ni dung t cn thay i
v cp nht.
- Website tnh l website ch bao gm cc trang web tnh v khng c c s d liu i
km.
- Website tnh thch hp vi c nhn, t chc, doanh nghip va v nh mi lm quen
vi mi trng Internet.

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


u im:
- Thit k ho p: Trang Web tnh thng c trnh by n tng v cun ht hn
trang web ng v phn m thut ho v chng ta c th hon ton t do trnh by
cc tng v ho v m thut trn ton din tch tng trang web tnh.
- Tc truy cp nhanh: Tc truy cp ca ngi dng vo cc trang web tnh nhanh
hn cc trang web ng v khng mt thi gian trong vic truy vn c s d liu nh
cc trang web ng.
- Thn thin hn vi cc my tm kim (search engine) : Bi v a ch URL ca cc
.html, .htm, trong trang web tnh khng cha du chm hi (?) nh trong web
ng.
- Chi ph u t thp: Chi ph xy dng website tnh thp hn nhiu so vi website
ng v khng phi xy dng cc c s d liu, lp trnh phn mm cho website v
chi ph cho vic thu ch cho c s d liu, chi ph yu cu h iu hnh tng thch
(nu c).
Nhc im:
- Kh khn trong vic thay i v cp nht thng tin: Mun thay i v cp nht ni
dung thng tin ca trang website tnh Bn cn phi bit v ngn ng html, s dng
c cc chng trnh thit k ho v thit k web cng nh cc chng trnh cp
nht file ln server.
- Thng tin khng c tnh linh hot, khng thn thin vi ngi dng: Do ni dung trn
trang web tnh c thit k c nh nn khi nhu cu v thng tin ca ngi truy cp
tng cao th thng tin trn website tnh s khng p ng c.
- Kh tch hp, nng cp, m rng: Khi mun m rng, nng cp mt website tnh hu
nh l phi lm mi li website.

2.3. Ai Lm Web Tnh


- Nhng cng ty chuyn thit k giao din web s lm web tnh theo yu cu ca khch
hng. Sau web tnh s c bn giao cho bn b phn pht trin tip tc xy
dng mt website hon chnh.
7

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- Yu cu lm web tnh ch cn nm vng HTML, CSS v Javascript. Ngoi ra i
hi mt cht thm m v chu ng va lng khch.
- Nhng ngi lm web tnh thng c gi l HTML. Khc vi nhng ngi
Designer, Designer l s v pht tho trao web bng Photoshop theo yu cu ca
khch hng.

2.4. Cu trc mt website

Cu trc mt website s c th HTML bao ngoi cng. K n l hai th con <head> v


<body>. Th <head> thng cha thng tin v CSS hay Javascript ca trang web, cn th
<body> cha ni dung trang web.
Vic to cu trc mt trang web cng rt quan trong. Yu cu phi hi ha cn i v c
bit c th lin quan n SEO (Google Search Engine).

Mi trang web u c cch th hin cu trc khc nhau, c trang 1 ct, c trang 2 v cng
c trang cha nhiu ct, bn di y chng ta tham kho mt trang n gin s dng 2
ct layout.
- Phn u: header, c th cha logo, cu slogan, cc lin kt, cc banner lin kt,
cc button, on flash, hoc cc form ngn nh form tm kim,...

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- Phn lin kt ton cc: global navigation, dng cha cc lin kt n nhng
trang quan trng trong ton b trang, trong phn ny c th cha thm cc lin kt
con (sub navigation).
- Phn thn ca trang: page body, phn ny cha phn ni dung chnh (content)
v phn ni dung ph (sidebar).
- Phn ni dung chnh: content, phn ny cha ni dung chnh cn th hin cho
ngi dng xem.
- Phn ni dung ph: sidebar, phn ny c th cha lin kt ph ca tng trang
(local navigation), hoc cc banner cha lin kt lin quan, hoc c th dng
cha cc lin kt qung co,...
- Phn cui trang web: footer, phn ny thng cha phn lin h nh: tn cng
ty, a ch, s in thoi, mail lin h,... v c bit l copyright, hoc c th cha
cc lin kt ton trang, cc banner lin kt,...

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

2.5. Th (tag) v thuc tnh ca th

Th (Tag):
- Khi trnh duyt Web c mt file HTML, n s tm trong file cc tag hay
nhng on m c bit bit cch hin th file HTML . V d: Khi trong file
HTML c on <h3> Cu trc ca file HTML </h3>
th s hin th on "Cu trc ca file HTML" ln trn mn hnh vi kch thc
ca heading h3 (s ni k phn sau).

10

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- Cc tag HTML bo cho trnh duyt bit cch khi no th in m mt dng vn
bn, in nghing, bin dng vn bn thnh mt siu lin kt ti cc trang Web
khc, hin th nh...
- C nhiu th, mi th c 1 tn v mang ngha khc nhau. C 2 loi th: th ng
v th m. Cch vit th:
Th m: <tn_th> V d: <u>, <p>, <img>
Th ng tng ng: </tn_th> V d: </u>, </p>
- Ch : lun c th m nhng c th khng c th ng tng ng. V d: <img>
khng c th ng .

Thuc tnh ca th:


- Mt th c th c cc thuc tnh nhm b sung tc dng cho th
- Mi thuc tnh c tn thuc tnh (attribute)
- Vit th c thuc tnh: <tn_th attribute1=value1 attribute2=value2
></tn_th>
V d: <font size="5" color="red">y l th font</font>

Ch :
- C th thay i th t, s lng cc thuc tnh m khng gy ra li c php
- S h tr cc th, thuc tnh mi trnh duyt l khc nhau. Ch ging nhau cc
th, thuc tnh c bn.

2.6. Cc th thng gp
2.6.1. Th Heading H1->H6

HTML c 6 mc chun cho Tiu (heading). Xc lp bng cc th t <H1> cho


n <H6>.
V d:
<H1>This is a first level heading heading</H1>
<H2>This is a second level heading</H2>

11

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

2.6.2. Th Ch Thch Trong HTML


- C 3 loi ch thch (comment): comment inline, comment line v comment multi line.
Dng cp th <!-- ni dung ch thch --> ch thch mt dng ny.

V d:

Hnh trn th hin 3 loi comment.


- Mc ch ca comment thng lm r rng hn code ca mnh.
- Ni dung b comment s khng hin ra website.

12

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


2.6.3. Th Paragraph
- Tag m v tag ng <p></p>
- Paragraphs c th cha text v cc element khc: <b>, <i>, <span>,
- Th p l block element, khng c cha block element khc v c paragraphs khc.
- di ca text hin th ph thuc vo browser.
Browsers s t ng thm 2 empty line trc v sau paragraph.
nh dng cho 1 paragraph.

V d:
<H1>The Paragraph element</H1>
<P>The paragraph element is used to denote paragraph blocks</P>
<P>This would be the second paragraph.</P>

Thuc tnh:
ALIGN=left/center/right:
V d:
<P ALIGN=LEFT> ... </P> C ngha: Tt c text trong paragraph ny s c canh
v bn tri l trang. y cng l mc nh.
<P ALIGN=CENTER> ... </P> Canh gia
<P ALIGN=RIGHT> ... </P> Canh phi

13

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

2.6.4. Th Phn on Br v Hr

Th br dng ngt mt on vn v xung hng mi.


th d:
<p>
mary had a little lamb<br>
it's fleece was white as snow<br>
everywhere that mary went<br>
she was followed by a little lamb. </p>

Th Hr:
ng gch ngang phn cch cc on trong trang web.
Thuc tnh:
<hr size=number>: ch nh kch thc.
<hr width=number/percent>: ch nh rng
<hr align=left/right/center>: so l
<hr noshade>: khng bng
<hr color>=name/#rrggbb: ch nh mu ging bgcolor
V d:
<hr>
<hr size="5">
<hr width="50%">
<hr width="50%" align="right">
<hr width="50%" align="center" noshade>
14

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

2.6.5. Th Trnh By Vn Bn
Th font
- Thnh phn chnh l <font size=value>.
- Gi tr values t 1-7. Mc nhin font size l 3.
- Gi tr thay i tng i l '+' hay '-' so vi gi tr chun.

V d:
<font size=4>changes the font size to 4</font>
<font size=+2>changes the font size to basefont size ... +2</font>
Thuc tnh:
color = #rrggbb hay color = color: xc lp mu ging nh bgcolor

V d:
<font color="#ff0000">this text is red.</font>
hay
<font color="red">this text is also red.</font>

15

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


face=name [,name] [,name]: ch nh font ch khi hin th text.

V d:
<font face=".vntime, .vnarial"> this text will be displayed in either .vntime hay
.vnarial, depending on which fonts are installed on the browsers system. </font>

Th b, i, u, del, sup, sub, em, big, strong, small


Th b: in m vn bn
Th i: in nghing vn bn
Th sup:
Th sub:
Th small: vn bn ch nh.
Th big: vn bn ch to
Th strong:

Cc th khc
- Pre
- Tt
- Cite
- dfn
- code
16

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- kbd
- var
- q
- blockquote
- address

2.6.6. HTML List


UL tag
Bt u l <ul> v kt thc </ul>
C nhiu item, mi item <li>.</li>
Attribute type=disc , circle, square
Default type=disc

17

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

OL tag
- Bt u l <ol> v kt thc </ol>
- C nhiu item, mi item <li>.</li>
- Attribute type:
o type="1" - style: 1, 2, 3, ...
o type="i" - style: i, ii, iii, iv, ...
o type="I" - style: I, II, III, IV, ...
o type="a" - style: a, b, c, ...
o type="A" - style: A, B, C, ...
- Mc nh, bt u l 1 cho type=1, nu mun bt u l mt s khc, ta dng
attribute start=4 trong <ol>.
Ex.:

<ol start="4">

DL, DT, DD tag


- Definition List l mt b gm 3 th:
- <dl></dl> vit tt ca ch "definition list" l cp th bt u v kt thc cho mt
definition list.
- <dt></dt> vit tt ca ch "defines an item" c ngha l xc nh (hay nh ngha)
mt mc trong mt definition list.

18

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- <dd></dd> vit tt ca ch "defines describe an item" c ngha l xc nh (hay nh
ngha) mt m t ca mt mc.

2.6.7. Th IMG
- Image format: GIF, JPEG, PNG, BMP, TIFF, PCX
- Th m v ng: <img></img>
- Thuc tnh:
o src: ng dn tng i hoc tuyt i .
o alt: text hin th nu khng c nh.
o align: Bottom, Middle, Top, Left, Right khng cn s dng trong
HTML5.
o width: image length in pixels.
o height: image height in pixels.
o hspace, vspace khng cn s dng trong HTML5

2.6.8. HTML Link

19

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


C php: <a href=url title=Link title target="_blank" >Link text</a>

href: Ch n trang cn lin kt url

title: Title ca tag

Link text: text hin th

- Href: c 2 loi url tuyt i v tng i. V d href="www.google.com" v


href="index.php".
- Target: Cch thc open link.
- Name: cho php nhy n mt v tr c ch nh.

V d: <a name="top"

></a> <a href="#top"> return top</a>

2.6.9. HTML table

Cc th dng trong table: <table>, <thead> , <tbody>, <td>, <tr>


To bng trong trang Web.
Thuc tnh:
- BORDER="value": iu khin vic hin th v kch thc ng vin. Nu gi tr =0
l khng c vin.
- CELLSPACING="value": Ch nh khong cch gia cc . Gi tr mc nh l 2.
- CELLPADDING="value": Ch nh khong trng gia ng vin v . Gi tr mc
nh l 1
- WIDTH="value or percent": Ch nh rng bng tnh theo pixels, hay % ca ca s
hin th.
- HEIGHT="value or percent": Ch nh cao bng.
- ALIGN="left/right": Canh l tri, phi.
- VALIGN="top/bottom": Canh l trn, di.
- BGCOLOR="#rrggbb|colour name": Ch nh mu nn cho bng.
- BORDERCOLOR="#rrggbb|colour name": Ch nh mu cho ng vin ca bng.

20

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- BORDERCOLORLIGHT="#rrggbb|colour name": Ch nh mu cho phn c
chiu sng ca ng vin.
- BORDERCOLORDARK="#rrggbb|colour name": Ch nh mu cho phn b ti ca
ng vin.
- BACKGROUND="URL of image": Ch nh file hnh nh dng lm nn cho bng.
- FRAME: i hi thuc tnh BORDER phi c hiu lc khi s dng thuc tnh ny.
C cc gi tr sau:

o void G b tt c vin ngoi.


o Above Ch hin th ng vin phi trn bng.
o Below Ch hin th ng vin phi di bng.
o Hsides Hin th cc ng vin ngang trong bng, k c ng trn v di
bng.
o Lhs Ch hin th ng vin bn tri.
o Rhs Ch hin th ng vin bn phi.
o Vsides Hin th cc ng vin ng trong bng, k c ng tri v phi
bng.
o Box Ch hin th ng vin bao chung quanh bng.

21

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

22

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


2.7. Mt s bi tp v HTML

3. S Lc V CSS
3.1. CSS L G?
- CSS = Casscading Style Sheets
- Dng m t cch hin th cc thnh phn trn trang WEB
- S dng tng t nh dng TEMPLATE
- C th s dng li cho cc trang web khc
- C th thay i thuc tnh tng trang hoc c site nhanh chng (cascading)

3.2. c Tnh C Bn Ca CSS


- CSS quy nh cch hin th ca cc th HTML bng cch quy nh cc thuc tnh ca
cc th (font ch, mu sc). cho thun tin bn c th t ton b cc thuc tnh
ca th vo trong mt file ring c phn m rng l ".css" CSS n ph v gii hn
trong thit k Web, bi ch cn mt file CSS c th cho php bn qun l nh dng v
layout trn nhiu trang khc nhau. Cc nh pht trin Web c th nh ngha sn thuc
tnh ca mt s th HTML no v sau n c th dng li trn nhiu trang khc.
- C th khai bo CSS bng nhiu cch khc nhau. Bn c th t on CSS ca bn
pha trong th <head>...</head>, hoc ghi n ra file ring vi phn m rng ".css",
ngoi ra bn cn c th t chng trong tng th HTML ring bit.Tuy nhin ty tng
cch t khc nhau m u tin ca n cng khc nhau. Mc u tin ca CSS s
theo th t sau:
o Style t trong tng th HTML ring bit
o Style t trong phn <head>
o Style t trong file m rng .css
o Style mc nh ca trnh duyt
o Mc u tin s gim dn t trn xung di.
- CSS c tnh k tha: gi s rng bn c mt th <div id="vidu"> c khai bo
u file css vi cc thuc tnh nh sau:
23

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


#vidu {
width: 200px;
height: 300px;
}
o mt ch no trong file css bn li khai bo mt ln na th <div
id="vidu"> vi cc thuc tnh.
#vidu {
width: 400px;
background-color: #CC0000;
}
o Sau on khai bo ny th th <div id="vidu"> s c thuc tnh:
#vidu {
width: 400px; /* ln khai bo c */
height: 300px;
background-color: #CC0000;
}

3.3. Selector, Class, ID


Khi nim: Cho n by gi bn thy c CSS c th thay i cc i tng html nh
th no. V d khi bn vit code CSS cho th h1 hoc p, th bn s thy n c p dng cho
tt c cc th trong html. Nhng khng phi lc no bn cng mun tt c cc th p trong
phn code ca bn u b nh hng. C th bn mun on ny ch mu xanh, on kia ch
mu v m. Chnh v th Class v ID c thm vo th html bn c th hng ti
mt i tng c th hn trong code HTML ca bn. Do cho bn thm mt la chn na
thit k trang web.
Cc loi selector:
- Universal Selector: l selector yu nht, s apply cho tt c cc element trong html.
V d: *{ margin: 0; padding:0; }

24

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- Selector ID: trong mt trang html, selector id l duy nht. K hiu: #ten_id. V d:
#header{ color: red; } th s apply cho element no c id l header.
- Selector Class: khi bn mun nh dng mt nhm ci element bng mt chun css
th bn nn dng class. V d: cc th h2 c class tiu th s c chung mt format
css.
h2.tieude { font-size: 20px, color: red, font-weight: 400; } th s apply cho tt c cc
th h2 c class tieude
<h2 class="tieude">this is tag h2</h2>
- Child Selector: loi selector ny s apply cho con ca element c chn.
V d:

25

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- Group Selector: mt group cc selector s c apply theo mt css c nh
ngha.
V d: h1, b, .tieude{ color:red; }

- Attribute Selector
C php: [ten_attribute]{ css_attr: css_value; }

3.4. C Php Ca CSS


Sau khi hiu l nm bt c mt s c tnh ca CSS chng ta tip tc i tm hiu v c
php v cch khai bo ca cc th CSS.
C php ca CSS c chia lm 3 phn. phn th chn (selector), phn thuc tnh (property),
phn nhn (value).
26

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


selector {property: value}
Nu nhn ca bn c nhiu t bn nn t nhn ca bn vo trong du nhy kp
p {font-family: "sans serif"}
Trong trng hp th chn ca bn nhiu thuc tnh th cc thuc tnh s c ngn cch bi
du (;).
p {text-align:center; color:red}
Khi th chn c nhiu thuc tnh th chng ta nn mi thuc tnh trn mt dng ring
bit.
p{
text-align: center;
color: black;
font-family: arial
}

3.5. Chn CSS Vo Website


Bn c mt file CSS ca bn, by gi cng vic tip theo l lm th no chn nhng
on CSS ca bn vo trong trang, V xem chng hot ng nh th no. Trong phn ny
chng ta s i tm hiu chi tit v cch chn mt on style trong trang HTML hay lin
kt ti mt file CSS vit sn.
Khi trnh duyt c n CSS, th ton b Website s c nh dng theo cc thuc tnh
c khai bo trong phn CSS. C ba cch cho php chng ta chn nh dng CSS vo
trong Website.
CSS c khai bo trong file ring.

27

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Ton b m CSS c cha trong file ring c phn m rng .css l mt tng c
dng khi mt file CSS s c p dng cho nhiu trang khc nhau. Bn c th thay i
cch hin th ca ton b site m ch cn thay i mt file CSS. Trong cch ny th file
CSS s c chn vo vn bn HTML thng qua th <link>...</link>. Ta c c php nh
sau:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" medial="all" />
</head>

<body>
</body>
</html>
Trnh duyt s c ton b cc nh dng c quy nh trong file mystyle.css v nh
dng cho vn bn HTML.
File CSS c th c son tho bng mt s trnh duyt khc nhau. Trong file khng
c cha m HTML, khi ghi li chng ta bt buc phi ghi li vi phn m rng l .css.
Gi s chng trong file mystyle.css trn cha on m sau:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

Chn CSS trong ti liu HTML


Chn thng CSS trong ti liu c p dng trong trng hp nhng nh dng CSS ny
ch ginh ring cho ti liu HTML . Khi bn chn trc tip th on m ca bn phi
t trong th <style> v t trong phn <head>.
<head>
<style type="text/css">
hr {color: sienna}
28

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


p {margin-left: 20px}
body { background-image: url("images/back40.gif"); font-size: 12pt; }
</style>
</head>

Chn trc tip vo th ca HTML(inline style)


Inline style c s dng nhiu trong trng hp mt th HTML no cn c style
ring cho n.
Inline style c p dng cho chnh th HTML , cch ny s c u tin ln nht so
vi hai cch trn. Di y l mt v d m chng ta dng Inline style
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

3.6. Cc CSS Thng Dng


3.6.1. nh Ngha Cho on Vn Bn
- Mu vn bn: t mu cho mt on vn bn ta dng thuc tnh color:#m mu.
V d: <p style=color: red>on vn bn c mu </p>

- Mu nn cho vn bn:
C php:
Background-color: #m mu //tn mu
V d: <p style="background-color: blue">on vn bn mu nn mu xanh</p>

- Khong cch gia cc k t:


Khong cch gia cc k t trong mt on vn bn c th c tng hoc gim bi
thuc tnh letter-spacing: khong cch;

29

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


h3 {
letter-spacing: 2em;
}

h1 {
letter-spacing: -3em;
}

- Khong cch gia cc dng:


Thuc tnh line-height: khong cch; s gip bn cn chnh khong cch gia cc
dng trong mt on vn bn.
p{
line-height: 150%; // line-height: 15px;
}

- Dng hng:
ging hng cho mt on vn bn chng ta s dng thuc tnh text-align: v tr;
p{
text-align: left; /* left | center | right */
}
- iu chnh ni dung vn bn:
Mt ng gch chn hoc ng gch ngang dng vn bn s lm cho on vn bn
ca bn thm sinh ng. t im thm cho on vn bn chng ta s dng thuc
tnh text-decoration: thuc tnh;
h3 {
text-decoration: underline; /* Gch chn */
}
30

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


h2 {
text-decoration: line-through; /* Gch ngang */
}

h1 {
text-decoration: overline; /* k trn */
}

Bn c th iu khin ton b on vn bn l ch hoa hay ch thng bi thuc tnh


text-transform: kiu ch;
p.uppercase {
text-tranform: uppercase;
}

p.lowercase {
text-tranform: lowercase;
}

p.capitalize {
text-tranform: capitalize;
}

Khong cch gia cc t c th c tng bi thuc tnh word-spacing: khong


cch;
word-spacing: 30px;

31

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


3.6.2. nh Ngha Font
- Font-family: t mt loi font ch no cho on vn bn th chng ta s s
dng thuc tnh font-family:
p{
font-family: Arial, Tahoma, Verdana, sans-serif;
}
Thng thng bn cn phi khai bo h ca font cui (trong v d trn th sans-serif
l ch ti 1 h font) trong trng hp my ca ngi duyt Web khng c cc font
nh mnh t th n s ly font mc nh ca h font trn.
- Font-size: nh ngha kch thc ca ch trong vn bn.
h1 {
font-size: 20px;
}

h3 {
font-size: 12px;
}

- Font-style:
Ch m, ch nghing,... c t vi thuc tnh font-style:
p{
font-style: italic; /* normal | italic | oblique */
}
- Font-weight:
Khi chng ta mun thay i m nht ca vn bn chng ta s dng thuc tnh
font-weight:. Chng ta c th t gi 3 loi gi tr cho thuc tnh ny 1. Normal (bnh
thng), 2. Bold (m), 3. 300 (t dng s)

32

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


h3 {
font-weight: bold;
}

3.6.3. ng Vin V Cc Thuc Tnh


Cc thuc tnh ca ng vin (border) s cho php t cc gi tr c bit cho n
vin nh kiu ng vin, kch thc, mu sc. Thuc tnh ny s c p dng cho
cc th HTML nh <div>, <li>, <table>,...
Trong thuc tnh ng vin (border) chng ta c 3 gi tr c bn l:
- border-color:
- border-width:
- border-style:
Thuc tnh mu ca ng vin
t mu cho ng vin chng ta s t thng s mu cho thuc tnh bordercolor:
div.color {
border-color: #CC0000;
}
t chiu rng cho ng vin (border)
Nu mun t chiu rng ca ng vin chng ta s t gi tr cho thuc tnh
border-width:
div.borerwidth {
border-width: 2px;
}
STT
1

Gi tr
thin
33

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


2

medium

thick

length

Chn kiu ca ng vin


Bn c th s dng thuc tnh border-style t kiu cho ng vin. Chng ta c
th gn cho thuc tnh ny 9 gi tr khc nhau tng ng vi 9 kiu ng vin khc
nhau.
div.borderstyle {
border-style: solid;
}
STT border-style
1

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

10

outset

Vi 4 pha ca i tng ta c 4 thuc tnh border tng ng:


- border-top:
- border-right:
- border-bottom:
- border-left:

34

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


ng vi ng vin ca mi pha chng ta u c 3 gi tr (color, width, style)
STT Pha

Thuc tnh
border-top-color:

top

border-top-width:
border-top-style:
border-right-color:

right

border-right-width:
border-right-style:
border-bottom-color:

bottom border-bottom-width:
border-bottom-style:
border-left-color:

left

border-left-width:
border-left-style:

Chng ta c th dng phng php vit m gin lc (shorthand) vit cc thuc


tnh ca ng vin gn hn. Gi s chng ta t thuc tnh border ca th <div> vi
rng bng 1, kiu solid v mu l #CC0000
div.border {
border: 1px solid #CC0000;
}

3.6.4.

Thuc Tnh Margin

Thuc tnh margin s nh ngha khong trng bao quanh mt phn t HTML. N c
th dng gi tr m lng ni dung vo vi nhau. Tng ng vi 4 pha ca mt
phn t chng ta c 4 thuc tnh tng ng. Mt khc vit cho gn chng ta cng
c th dng cch vit gin lc nh ngha cc gi tr cho thuc tnh margin.

35

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


i vi cc trnh duyt Netcape v IE th gi tr mc nh ca thuc tnh margin l
8px. Nhng Opera th khng h tr nh vy. cho thng nht chng ta c th t
margin mc nh cho ton b cc phn t.
Cc gi tr m thuc tnh margin c th nhn c l: auto, length, %. Chng ta
t gi tr no l ty thch cng vi vic tng ng t l vi cc phn t khc.
Tng ng vi 4 pha ta c 4 thuc tnh:
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
cho gn chng ta cng c th vit thuc tnh margin di dng shorthand
div.margin {
margin: 10px 4px 5px 9px; /* top | right | bottom | left*/
}

3.6.5. Thuc Tnh Padding


CSS padding s nh ngha khong trng gia mp ca cc phn t ti cc phn t
con hoc ni dung bn trong. Chng ta khng th gn gi tr m cho thuc tnh ny.
Cng ging nh margin thuc tnh padding cng tng ng vi 4 pha ca phn t.
Tng ng vi 4 pha ca phn t chng ta c 4 thuc tnh padding tng ng l:
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
Cc gi tr c th gn cho cc thuc tnh ny l : % hoc length
vit cho gn chng ta cng c th vit thuc tnh padding di dng shorthand.
36

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


div.padding {
padding: 5px 3px 2px 8px;
}

3.6.6. Thuc Tnh Overflow


Thuc tnh overflow xc nh iu g s xy ra nu mt thnh phn box trn ni dung.
C php:
tag {
overflow: gi tr;
}
Gi tr: visible, hidden, scroll, auto, inherit
V d: vi overflow: hidden th khi text trn ra khi box th text s b n i.

3.6.7. Thuc Tnh Opacity/Transparent


Thuc tnh opacity hin th cp trong sut cho thnh phn.
tag {
opacity: gi tr;
}
V d: h1{opacity: 0,5; }
Hoc
img { opacity: 0,7; }
img:hover{ opacity:1; }

3.6.8. Thuc Tnh Position


Thuc tnh position xc nh loi ca phng php nh v tr cho thnh phn.
Thuc tnh position thng dng km vi cc thuc tnh nh v
tr: left, right, bottom, top
tag {

37

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


position: gi tr;
}
Gi tr:
- static: Thnh phn s nm theo th t trong vn bn, y l dng mc nh.
- relative: nh v tr tuyt i cho thnh phn.
- absolute: nh v tr tuyt i cho thnh phn theo thnh phn bao ngoi
(thnh phn nh v tr tng i position: relative;) hoc theo ca s trnh
duyt.
- fixed: nh v tr tng i cho thnh phn theo ca s trnh duyt.
- inherit: Xc nh tha hng thuc tnh t thnh phn cha (thnh phn bao
ngoi).

3.6.9. Thuc Tnh Display


Thuc tnh display xc nh loi hin th ca thnh phn.
tag {
display: gi tr;
}
Gi tr:
- none: khng hin th
- inline: Thnh phn s hin th nh mt ni tuyn (inline, khng ngt dng),
y l dng mc nh.
- block: Thnh phn hin th nh mt khi, khi s dng gi tr block thnh phn
s ng mt hng c lp so vi thnh phn trc v sau n.
- inline-block: Thnh phn s hin th nh mt khi, nhng l mt khi ni
tuyn.
- ...
3.6.10. Thuc Tnh Float, Clear
Thuc tnh float xc nh c hay khng mt thnh phn c float (tri ni).
tag {
float: gi tr;
}
38

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Gi tr: left, right, none, inherit

Thuc tnh clear xc nh 2 bn ca phn t (left, right), ni m phn t float khng


c cho php (ngn cn thnh phn khng c float tri, phi hay c hai).
tag {
clear: gi tr;
}
Gi tr: left, right, both, none.

3.7. Pseudo-classes
:active

:first-child

:focus

:hover

:lang(word)

:last-child

:link

:visited

Pseudo Class trong CSS c s dng vit CSS cho mt trng thi no ca mt
phn t. V d vit CSS i mu cc lin kt khi r chut vo, i thuc tnh mt phn t
khi nhp vo,.Cc pseudo class c khai bo ti vng chn, t ng sau vng chn
v c du hai chm (:) ngn cch. V d: #link:hover (vng chn ca #link khi r chut
vo).
Trong bi vit ny, v n thuc CSS cn bn nn mnh ch ni qua mt s pseudo class
n gin nht m cng thng gp nht khi vit CSS cho website
Mt s Pseudo Class thng dng
-

:hover Chn trng thi khi r chut vo mt phn t.

:visited c s dng cho lin kt, chn lin kt khi c truy cp (da vo
History trn trnh duyt).

:link c s dng cho lin kt, chn lin kt khi cha nhp vo.

:active Chn phn t khi h chn/nhp vo.


39

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


3.8. Bi Tp V CSS

4. JavaScript
4.1. Khi Nim
Javascript l mt ngn ng thng dch, chng trnh ngun ca n c nhng hoc tch
hp vo tp tin HTML. Khi trang web c ti trong trnh duyt h tr javascript, Trnh
duyt s thng dch v thc hin cc lnh Javascipt.

JavaScript l mt trong nhng ngn ng lp trnh ph bin nht th gii, n l ngn ng cho
HTML, web, server, PC, laptop, tablet, smart phone
- JavaScript l mt ngn ng kch bn. Ngn ng kch bn l mt ngn ng lp trnh
nh.
- JavaScript l m lp trnh c th c chn vo cc trang HTML.
- JavaScript c chn vo cc trang web c th c chy bi tt c cc trnh duyt
web hin i.
- JavaScript l mt ngn ng lp trnh d hc.
c tnh ca Javascript:
- n gin
- ng
- Hng i tng
Mt trong nhng c tnh quan trng ca ngn ng javascript l kh nng to v s dng cc
i tng (Object). Cc Object ny cho php ngi lp trnh s dng pht trin ng dng.

Trong javascript ,cc Object c nhn theo 2 kha cnh:


- Cc Object tn ti: Date, Array
- Cc Object do ngi lp trnh xy dng.

4.2. Cch Nhng Javascript Vo HTML


C 2 cch nhng Javascript vo trong tp tin HTML
40

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Vit chong trnh Javascript trc tip trong file HTML
<script type=text/javascript> //Cc lnh Javascript</script>
V d:
<script type="text/javascript">
function getTime()
{
document.write( new Date() );
}
</script>

S dng tp tin javascript bn ngoi :


Cng ging nh CSS ngoi tuyn, chng ta cng c th nhng Javascript vo tp tin
HTML bng cch lin kt n mt tp tin bn ngoi, y cng l phng thc c
s dng nhiu nht.
Vi phng php ny, cc lnh Javascrip s c vit trong mt file ring bit c
phn m rng l .js(V d ta c tp tin my.js)
nhng tp tin my.js vo tp tin HTML ta s dng on m sau:
<script type=javascript src=my.js type="text/javascript"></script>

4.3. Th Noscript
Cp th ny dng nh r ni dung thng bo cho ngi s dng
bit trnh duyt khng h tr JavaScript. Khi trnh duyt s khng hiu th
<NOSCRIPT> v n b l i, cn on m nm trong cp th ny s c Navigator
hin th. Ngc li, nu trnh duyt c h tr JavaScript th on m trong cp th
<NOSCRIPT> s c b qua. Tuy nhin, iu ny cng c th xy ra nu ngi
s dng khng s dng JavaScript trong trnh duyt ca mnh bng cch tt n i
trong hp Preferences/Advanced.
V d:
<noscript>Trang web ny c h tr javascript. Bn vui lng enable javascript</noscript>

41

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

4.4. Hp Thoi Trong Javascript


Lnh alert('message'): hin th hp thoi c ni dung l message ln cho ngi dng.
Lnh confirm('Are you sure?'): hin th hp thoi c ty chn Yes/No cho ngi dng
chn.
Lnh window.prompt('hello what is your name?',''): nhc ngi dng nhp vo hp thoi.

42

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

4.5. Bin Trong Javascript

Bin ton cc: x dng ton cc, c th gi bt c u


Bin cc b: x dng trong ni b function.
Kiu d liu: kiu s nguyn, kiu du phy ng, kiu logic v kiu chui.

Cc ton t:
Kiu gn thng thng

Kiu rt gn

Miu t

X=x+y

X+=y

Cng 2 s trong
javascript

X=x-y

x-=y

Tr 2 s

X=x*y

X*=y

Nhn 2 s

X=x/y

x/=y

Chia ly phn nguyn

X=x%y

X%=y

Chia ly phn d

Cc php so snh:
Php so sanh

Miu t

==

So snh bng

!=

So snh khng bng

>

So snh ln hn

>=

So snh ln hn hoc bng

<

So snh b hn

<=

So snh b hn hoc bng

43

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


&&

Ton t v

||

Ton t hoc

Hng trong javascript: Hng l nhng gi tr c nh m ta c th dng trong script.


Gi tr ca hng khng b thay i trong qu trnh thc hin script. Chng ta c th
to ra mt hng s ch c cng vi tn ca n bng cch s dng t kha const. Quy
c t tn cho hng ging nh cho tn bin, tc l n phi c bt u vi mt ch
ci hoc du gch di v cc k t cn li c th bao gm cc k t thuc bng ch
ci, cc s hay du gch di.
V d: const prefix = 212;
Mt hng s khng th thay i gi tr qua php gn hoc c khai bo li trong khi
script ang thi hnh. Cc quy tc v phm vi cho cc hng s ging nh cho cc bin,
ngoi tr t kha const lun lun c yu cu, ngay c cc hng s ton cc. Nu t
kha ny b b qun th c xem nh l mt bin. Lu l chng ta khng th
khai bo mt hng s c tn trng vi tn hm hoc bin trong cng mt phm vi.

4.6. Ton T Trong Javascript


Ton t chui: Cc ton t so snh c th c s dng cho cc gi tr chui, ton t ni
(+) ni hai gi tr chui vi nhau, v tr v mt chui mi l s hp nht ca hai chui
ton hng.
V d: my + string tr v chui mystring
Ton t gn vit gn += c th cng c s dng ni cc chui. V d, nu bin
mystring c gi tr l alpha, th biu thc mystring += bet c gi tr l alphabet v
gn gi tr ny cho bin mystring.

Ton t iu kin: Ton t iu kin l mt ton t ca JavaScript cn ba ton hng .


Ton t c th c mt trong hai gi tr ty thuc vo iu kin.
C php: condition ? val1 : val2

44

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Nu iu kin l true, th ton t c gi tr l val1. Nu khng th n c gi tr l
val2.
V d: status = (age >= 18) ? adult : minor
Cu lnh ny gn gi tr adult cho bin status nu age >= 18. Ngc li, n gn cho
bin ny gi tr minor.

Ton t du phy: Ton t du phy (,) nh gi tr cho c hai ton hng ca n v tr v


gi tr ca ton hng th hai. Ton t ny c s dng ch yu trong vng lp for,
cho php nhiu bin c gn gi tr ban u hoc nhiu bin c cp nht li gi tr
thng qua mi bc lp.
V d: Xt bi ton tnh tng cc s t 1 n 10 dng vng lp for. Ta s khi to gi tr
ban u cho hai bin, bin dem=1 v bin tong=0, lc ny ta s s dng ton t du phy.
for (var dem=1,tong=0;dem<=10;dem++)
tong += dem;
Ton t new: Chng ta c th s dng ton t new to ra mt th hin (instance) ca
kiu i tng c nh ngha bi ngi s dng hoc mt kiu i tng c nh
ngha trc nh Array, Boolean, Date, Function, Image, Number, Object, option,RegExp,
hoc String. Trn server ta cng c th s dng n vi DbPool, Lock, File, hoc
SendMail.
C php ca ton t ny nh sau:
objectName= new objectType (param1 [,param2] [,paramN])
Ton t typeof: Ton t typeof tr v chui cho bit tn kiu d liu ca ton hng. Ton
hng c
th l mt chui, mt bin, t kha, hoc i tng.
C php: typeof (operand)
Trong du ngoc n khng bt buc.
V d: Gi s ta c cc bin:
var x = 5;

45

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


var shape = round;
Ton t typeof tr v cc kt qu sau cho cc bin ny:
typeof x is number
typeof shape is string.
Vi t kha true v null, ton t typeof tr v cc kt qu sau:
typeof true is boolean
typeof null is object
Ton t this: Cu lnh this ch ra i tng hin hnh v c th c cc thuc tnh chun
chng hn nh tn, di v gi tr c p dng ph hp. Cu lnh this ch c dng
trong phm vi ca mt hm hay cc tham chiu khi gi hm.
C php: this [.property]
Nu khng c i s th n s thng qua i tng hin hnh. Tuy nhin, chng ta nn
gn vo mt thuc tnh hp l a ra kt qu.

4.7. Biu Thc Regular


Biu thc regular l cc mu c s dng so khp cc lin kt k t trong cc chui. Vi
biu thc regular, ta c th tm kim theo mu trong cc chui k t do ngi dng nhp vo.
V d, ta to mt mu tm kim gm t cat v s tm kim tt c cc xut hin ca t ny
trong mt xu no . Trong JavaScript, cc biu thc regular cng l cc i tng. Cc
biu thc regular c s dng vi cc phng thc test v exec ca i tng RegExp v
cc phng thc match, replace, search, v spilit ca i tng String.

46

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

dng mt phng thc, chng ta phi xc nh i tng c s dng.


C php l: objectname.method = funtion_name
Sau chng ta c gi phng thc trong ng cnh ca i tng.
C php l: Objectname.methodname(parameters)
Chng ta c th dng cc c vi biu thc regular. Hai c g v i c chn ty , c
th dng ring hoc dng c hai c. C g c dng ch dn tm kim ton cc. C
i dng ch dn tm kim c phn bit ch hoa v ch thng.
Chng hn:
re=/Time/
Re.test(Time and Tide wait for none);
4.8. Cc Lnh iu Kin, Lp

If..else..: Cu lnh ny dng kim tra iu kin, n thc thi vic tnh ton trn mt
biu thc, n kim tra iu kin l ng hay sai thc hin khi lnh tng ng. Mt
cu lnh if n gin c c php lnh nh sau:

47

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


if (iu kin )
{
// cc cu lnh ng vi iu kin ng
}

y l c php lnh n gin, n s kim tra nu iu kin sau theo sau if l ng th khi
lnh s c thc thi.

Switch: Khi c nhiu ty chn ifelse th tt hn ta nn s dng lnh switch. Lnh ny


cn c xem l lnh case. Cu lnh switch cho php mt chng trnh nh gi tr
mt biu thc v th so khp gi tr ca biu thc vi tng trng hp. Nu so khp
tha mn th chng trnh thi hnh cu lnh tng ng. Nu khng tm thy mt gi tr
no trong danh sch cc case ca n, khi lnh trong phn default s c thc hin.
Lnh break dng thot ra khi cu lnh switch.
Cu lnh switch c dng nh sau:
switch (expression)
{
case label: statements; break;
case label: statements; break;
defaul: statements;
}

u tin chng trnh tm mt nhn trng khp vi gi tr biu thc v thi hnh cu lnh
tng ng nu so khp thnh cng. Nu nhn so khp khng c tm thy, chng trnh
s tm n khi lnh trong la chn default, v nu tm thy s thc hin cu lnh tng
ng. Nu khng tm thy cu lnh default, th chng trnh tip tc thi hnh cu lnh tip
theo sau cu lnh switch.
48

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Cu lnh ty chn break kt hp vi mi trng hp m bo rng chng trnh s thot
khi lnh switch khi cu lnh so khp c thi hnh v tip tc thc thi cu lnh tip theo
cu lnh switch. Nu khng s dng cu lnh break th chng trnh vn tip tc thi hnh
lnh k tip trong cu lnh switch.

For: Vng lp for s thc hin lp i lp li khi lnh cho n khi iu kin l false.
S ln thc hin ca vng lp thng c iu khin thng qua mt bin m.
Cu lnh for bao gm ba thnh phn, c phn cch nhau bi du chm phy
(;). C ba thnh phn ny u khng bt buc phi c, v chng iu khin vic thc
hin ca vng lp for. Nu c nhiu cu lnh thc hin trong thn ca vng lp,
chng trnh phi s dng cp du ngoc mc ({}) cha cc cu lnh
C php lnh nh sau: for([initialExpression];[condition];[incrementExpresion]){
statements; }
Trong :
- initialExpression: Lnh khi to, c thc hin duy nht mt ln v thng
dng khi to bin m.
- condition: iu kin ca vng lp.
- incrementExpression: Lnh tng, thay i gi tr bin m ca vng lp.
- statements: Cc lnh bn trong vng lp.

Do..while: Cu lnh dowhile lp cho ti khi mt iu kin c th c gi tr l false. C


php lnh nh sau:
do { statement } while (condition)
Trc ht, cu lnh ny thi hnh statement mt ln. Ti lc kt thc ca mi ln thi hnh
vng lp, condition c kim tra: Nu condition l true, th cu lnh tip tc c thi
hnh mt ln na, ngc li, nu iu kin l false, th thi hnh ngng v iu khin c
chuyn ti cu lnh k tip cu lnh dowhile.
While: Lnh while l mt cu trc lp khc trong JavaScript. N c dng thc hin
mt khi cc cu lnh chng no iu kin l true. Nu c nhiu cu lnh thc hin
trong thn ca vng lp, chng trnh phi s dng cp du ngoc mc ({}) cha
49

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


cc cu lnh .
Khc bit chnh gia vng lp while v dowhile l cc lnh trong thn vng
lp while c th khng c thc hin mt ln no v n kim tra iu kin trc, v
c th ngay t ban u iu kin l false. Tuy nhin vng lp dowhile bao gi
cng c thc hin t nht mt ln.
C php lnh nh sau:
while (condition) { statement; }
Nu iu kin l false, th cc cu lnh trong vng lp dng thi hnh v iu khin c
chuyn ti cu lnh sau vng lp. Vic kim tra iu kin xy ra trc khi cc cu lnh
trong vng lp c thi hnh. Nu iu kin tr v l true, th cc cu lnh trong vng lp
c thi hnh v iu kin c kim tra li mt ln na. Nu iu kin tr v l false, th
dng thi hnh v iu khin c chuyn ti cu lnh k tip cu lnh while.

4.9. Hm
Hm l mt trong nhng khi c bn c xy dng trong JavaScript. Mt hm
trong JavaScript kh ging vi mt th tc hay chng trnh con trong ngn ng lp
trnh. Mt hm c nh ngha l mt tp cc cu lnh, thc hin mt nhim v c
th no .

Mc d khng nht thit phi c, song cc hm c th c mt hay nhiu tham s truyn vo


v mt gi tr tr v. Bi v JavaScript l ngn ng c tnh nh kiu thp nn khng cn nh
ngha kiu tham s v gi tr tr v ca hm. Hm c th l thuc tnh ca mt i tng,
trong trng hp ny n c xem nh l phng thc ca i tng . JavaScript h tr
nhiu hm nh ngha sn m chng ta s s dng trong cc script. Ngoi ra, ngi dng c
th t nh ngha cc hm khc s dng.
Nh ta bit, JavaScript c nhiu hm c nh ngha sn m khi cn chng ta ch vic
gi. V d, nu chng ta mun kim tra gi tr m ngi dng nhp vo c phi l mt s hay
khng, chng ta c th s dng hm isNaN (NaN: Not a Number) thc hin iu ny.
Trong phn ny chng ta s tm hiu v mt s hm thng dng c h tr bi JavaScript
nh sau:
50

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- Hm eval
- Hm isFinite
- Hm isNaN
- Hm parseInt v parseFloat
- Hm Number v String
Eval: c dng nh gi mt chui m khng cn tham chiu n bt k
mt i tng c th no.
C php ca hm nh sau: eval (string)
Vi string l chui cn c nh gi. Chui ny c th l mt biu thc
JavaScript, mt cu lnh, hay mt nhm cc cu lnh. Trong biu thc c th bao gm
cc bin v thuc tnh ca mt i tng.
Nu chui i din cho mt biu thc th hm eval nh gi tr biu thc . Nu
i s i din cho mt hoc nhiu cu lnh JavaScript, th hm eval thc hin cc cu
lnh ny. Khng dng hm eval nh gi tr mt biu thc s hc, v JavaScript
nh gi tr cc biu thc s hc mt cch t ng.

isFinite: nh gi tr mt i s xc nh xem n c phi l mt s hu


hn hay khng.
C php ca hm nh sau: isFinite(number)
Vi number l s c nh gi tr.
Nu i s l NaN, dng v cng hoc m v cng th phng thc ny tr v
false, ngoi ra n tr v true.
on m ngun sau kim tra i s ClientInput xc nh xem n c phi l s
hu hn khng: if (isFinite(ClientInput) == true) { /* cc bc c th */ }

isNaN: nh gi tr mt i s xc nh xem n c phi l NaN (Not a


Number) hay khng.
C php ca hm nh sau: isNaN(testValue)
Vi testValue l gi tr bn mun nh gi tr.
Cc hm parseInt v parseFloat tr v NaN khi chng nh gi tr mt gi tr
khng phi l mt s. Hm isNaN tr v true nu n c truyn gi tr NaN v
51

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


ngc li l false.
on m ngun sau nh gi tr floatValue xc nh xem n c phi l mt s
hay khng v sau gi mt th tc ph hp:
floatValue = parseFloat (toFloat) ;
if (isNaN (floatValue))
{
notFloat()
} else {
isFloat()
}

ParseInt() v ParseFloat() tr v mt gi tr s khi i s l mt chui.


C php ca hm parseFloat l: parseFloat(str)
Hm parseFloat phn tch i s ca n l chui str, v c gng tr v mt s du
chm ng. Nu n gp phi mt k t khc vi mt du (+ hoc -), mt s (0-9), mt
du chm thp phn, hoc mt s m, th n tr v gi tr cho n v tr v b qua.

C php ca hm parseInt l: parseInt (str [, radix])


Hm parseInt phn tch i s u tin ca n l chui str v c gng tr v mt
s nguyn ca c s radix ch nh, c ch ra bi i s ty chn th hai l radix.
V d, mt c s mi c ch ra chuyn i chui thnh mt s thp phn,
c s 8 h bt phn chuyn i chui thnh mt s bt phn, c s 16 thp lc
phn chuyn i chui thnh mt s thp lc phn Vi cc c s trn 10, cc ch
ci ca bng k t ch ra cc ch s ln hn 9. V d, vi cc s thp lc phn (base
16), cc ch t A n F c s dng.
Nu hm parseInt gp phi mt k t khng phi l mt ch s trong h c s ch
nh, th n s b qua s v tt c cc k t theo sau v tr v gi tr s nguyn

52

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


c phn tch n v tr . Nu k t u khng th c chuyn i thnh mt s
trong h c s ch nh, th n tr v NaN. Hm parseInt rt ngn chui thnh cc
gi tr s nguyn

Cc hm Number v String: cho php bn chuyn i mt i tng thnh mt s


hay thnh mt chui.
C php ca cc hm ny l: Number (objRef) String (objRef)
Vi objRef l mt tham chiu i tng.
V d sau chuyn i i tng Date thnh mt chui c th c c.
D = new Date (430054663215) // tr v kt qu di y
// Thu Aug 18 18:37:43 UTC+0700 1983
4.10.

Mng

C nhng lc ta mun lu nhiu gi tr vo trong mt bin. Khi ta s dng mng.


Mng c dng lu mt tp hp cc bin c cng tn. Ch s ca mng dng phn
bit cc bin ny. Trong JavaScript ch s ca mng bt u t 0.
Tuy nhin, JavaScript khng c kiu d liu mng. Nhng n c mt i tng mng
c xy dng sn. dng mng trong chng trnh, ta phi s dng i tng mng v
cc phng thc ca n.
To mng
Cu php sau y dng to mt mng:

arrayObjectName = new Array([element0, element1, ..., elementN])

Trong arrayObjectName l tn ca i tng mng, ,v elementN l danh sch cc gi


tr ca cc phn t mng. Mng c khi to vi cc gi tr xc nh nh l cc phn t ca
n. Thuc tnh length lu s lng cc phn t c trong mng.

53

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Thm cc phn t
Chng ta c th a cc phn t vo mt mng ngay khi chng ta to n. Chng ta cng c
th a d liu vo mt mng bng cch gn gi tr cho cc phn t ca n.
emp[0] = "Ryan Dias"
emp[1] = "Graham Browne"
emp[2] = "David Greene"

Ryan Dias

Graham Browne David Greene

on m trn to ra mt mt mng v gn gi tr cho tng phn t ca n.

<html>
<head>
<script language="JavaScript">
<!-emp = new Array(3)
emp[0] = "Ryan Dias"
emp[1] = "Graham Browne"
emp[2] = "David Greene";
document.writeln(emp[0]);
document.writeln(emp[1]);
document.writeln(emp[2]);
//-->
</script>
</head>

54

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


</html>

S dng cc phng thc ca mng:


thao tc trn mng, chng ta phi dng cc phng thc ca i tng mng.
Phng thc

M t

Join

Kt hp cc phn t ca mng thnh mt chui

Pop

Tr v phn t cui cng ca mng, sau khi xo n t mng.


Thm mt hoc nhiu phn t vo cui mng. Tr li phn t cui cng

Push

thm vo.

Reverse

o ngc cc phn t ca mng: phn t u tin ca mng tr thnh


phn t cui cng v phn t cui cng tr thnh phn t u tin.

Shift

Xo phn t u tin ca mng v tr v phn t .

Sort

Sp xp cc phn t ca mng.

Phng thc sort


Phng thc emp.sort () s sp xp mng di y

<html>
<head>
<script language="JavaScript">
<!--

55

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


emp = new Array(3)
emp[0] = "Ryan Dias"
emp[1] = "Graham Browne"
emp[2] = "David Greene";

emp.sort();
document.writeln(emp[0]);
document.writeln(emp[1]);
document.writeln(emp[2]);

//-->
</script>
</head>
</html>

Mng nhiu chiu


Mt mng c th c nhiu hn mt chiu.
on m di y to ra mt mng hai chiu v cho hin th gi tr ca mt trong nhng
phn t trong mng.
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
MyArray = new Array(5,5);
MyArray[0, 0] = "Ryan Dias";

56

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


MyArray[0, 1] = 1;
MyArray[1, 0] = "Mike Donne";
MyArray[1, 1] = 2;
MyArray[2, 0] = "Joe Dean";
MyArray[2, 1] = 3;
MyArray[3, 0] = "Robert Matey";
MyArray[3, 1] = 4;
document.write ("The name is " + MyArray[3, 0]);
document.write("and the code is " + MyArray[3,1]);
</SCRIPT>
</HEAD>
</HTML>

4.11.

DOM Element

i vi lp trnh web, kin thc v DOM v kh nng thao tc DOM thnh tho l hai
yu t quan trng nht. n gin l v DOM cho bn sc mnh thay i mi th ca trang
web, khi m mi ni dung u c th c thm bt xa sa mang li tri nghim v ni
dung tt nht.
DOM l tn gi tt ca (Document Object Model tm dch M hnh i tng Ti
liu), l mt chun c nh ngha bi W3C dng truy xut v thao tc trn cc ti liu
c cu trc dng HTML hay XML bng cc ngn ng lp trnh thng dch (scripting
language) nh Javascript, PHP, Python.
Ngoi ra, DOM gip thao tc d liu theo m hnh hng i tng. Cc phn t bn
trong 1 ti liu c cu trc c nh ngha thnh cc i tng, phng thc v thuc
tnh c th truy xut d dng m vn m bo tnh cu trc: mi phn t l mt i tng,
s hu cc thuc tnh v cc phng thc lm vic vi cc thuc tnh nh thm, xa,

57

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


sa, cp nht. Bn cnh , bn cng c th thm bt cc phn t ty thch, gip cho ni
dung v cu trc ca trang web lun cp nht ng.

Webpage = DOM + Javascript


y khng hn l cng thc tuyt i, v ngoi Javascript, ta c th tng tc vi DOM bng
PHP, Python Tuy nhin, Javascript theo sut lch s pht trin ca DOM, nn s dng
DOM Javascript bt u pht trin web l mt la chn tt.

Cy cu trc DOM
Nt
i vi HTML DOM, mi thnh phn u c xem l 1 nt (node), c biu din trn 1
cy cu trc dng cy gi l DOM Tree. Cc phn t khc nhau s c phn loi nt khc
nhau nhng quan trng nht l 3 loi: nt gc (document node), nt phn t (element node),
nt vn bn (text node).
- Nt gc: chnh l ti liu HTML, thng c biu din bi th <html>.
- Nt phn t: biu din cho 1 phn t HTML.
- Nt vn bn: mi on k t trong ti liu HTML, bn trong 1 th HTML u l
1 nt vn bn. c th l tn trang web trong th <title>, tn mc trong th
<h1>, hay mt on vn trong th <p>.
- Ngoi ra cn c nt thuc tnh (attribute node) v nt ch thch (comment
node).

Quan h gia cc nt
- Nt gc (document) lun l nt u tin.
- Tt c cc nt khng phi l nt gc u ch c 1 nt cha (parent).
- Mt nt c th c mt hoc nhiu con, nhng cng c th khng c con no.
- Nhng nt c cng nt cha c gi l cc nt anh em (siblings).
- Trong cc nt anh em, nt u tin c gi l con c (firstChild) v nt cui
cng l con t (lastChild).

58

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Thuc tnh v phng thc thng gp
C th tham kho thm ti: http://www.w3schools.com/jsref/dom_obj_all.asp
Thuc tnh

ngha

id

nh danh l duy nht cho mi phn t nn thng c dng


truy xut DOM trc tip v nhanh chng.

className

Tn lp Cng dng truy xut trc tip nh id, nhng 1


className c th dng cho nhiu phn t.

tagName

Tn th HTML.

innerHTML

Tr v m HTML bn trong phn t hin ti. on m HTML ny


l chui k t cha tt c phn t bn trong, bao gm cc nt phn
t v nt vn bn.

outerHTML

Tr v m HTML ca phn t hin ti. Ni cch khc,outerHTML


= tagName + innerHTML.

textContent

Tr v 1 chui k t cha ni dung ca tt c nt vn bn bn


trong phn t hin ti.

attributes

Tp cc thuc tnh nh id, name, class, href, title

style

Tp cc thit lp nh dng ca phn t hin ti.

value

Ly gi tr ca thnh phn c chn thnh mt bin.

Phng thc

ngha

getElementById(id)

Tham chiu n 1 nt duy nht c thuc tnh id ging vi id cn


tm.

getElementsByTagName(tag

Tham chiu n tt c cc nt c thuc tnh tagName ging vi

name)

tn th cn tm, hay hiu n gin hn l tm tt c cc phn t


DOM mang th HTML cng loi. Nu mun truy xut n ton b

59

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


th trong ti liu HTML th hy s
dng document.getElementsByTagName('*').
getElementsByName(name)

Tham chiu n tt c cc nt c thuc tnh name cn tm.

getAttribute(attributeName)

Ly gi tr ca thuc tnh.

setAttribute(attributeName,

Sa gi tr ca thuc tnh.

value)
appendChild(node)

Thm 1 nt con vo nt hin ti.

removeChild(node)

Xa 1 nt con khi nt hin ti.

Mt khc, cc phn t DOM u l cc nt trn cy cu trc DOM. Chng s hu thm cc


thuc tnh quan h biu din s ph thuc gia cc nt vi nhau. Nh cc thuc tnh quan
h ny, chng ta c th truy xut DOM gin tip da trn quan h v v tr ca cc phn t.

Truy xut DOM


Truy xut gin tip
Thao tc truy xut cc nt gin tip theo v tr trn cy DOM cn c gi l duyt cy
DOM (DOM Tree traversal).
Mi nt trn cy DOM u c 6 thuc tnh quan h gip bn truy xut gin tip theo v tr
ca nt:
-

Node.parentNode: tham chiu n nt cha ca nt hin ti, v nt cha ny l duy


nht cho mi nt. Do , nu bn cn tm ngun gc su xa ca 1 nt, bn phi ni
thuc tnh nhiu ln, v d Node.parentNode.parentNode.

Node.childNodes: tham chiu n cc nt con trc tip ca nt hin ti, v kt qu l


1 mng cc i tng. Lu rng, cc nt con khng b phn bit bi loi nt, nn
kt qu mng tr v c th bao gm nhiu loi nt khc nhau.

Node.firstChild: tham chiu n nt con u tin ca nt hin ti, v tng ng


vi vic gi Node.childNodes[0].
60

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


-

Node.lastChild: tham chiu n nt con cui cng ca nt hin ti, v tng ng


vi vic gi Node.childNodes[Element.childNodes.length-1].

Node.nextSibling: tham chiu n nt anh em nm lin k sau vi nt hin ti.

Node.previousSibling: tham chiu n nt anh em nm lin k trc vi nt hin ti.

Truy xut trc tip


Truy xut trc tip s nhanh hn, v n gin hn khi bn khng cn phi bit nhiu v quan
h v v tr ca nt. C 3 phng thc bn truy xut trc tip c h tr mi trnh
duyt:
-

document.getElementById('id_cn_tm')

document.getElementsByTagName('div')

document.getElementsByName('tn_cn_tm')

To thm hoc di chuyn DOM vi appendChild


Nh bn bit, mi nt trn cy cu trc DOM u bt ngun su xa t nt gc v bt buc
phi c 1 nt cha. Do , v bn cht, khi 1 DOM mi c to ra, n c n 1 mnh v
khng th s dng c nh cc phn t DOM thng thng. Ch sau khi bn tm 1 nt khc
trn cy DOM lm cha a b (s dng nt_cha.appendChild(nt_con)) th qu trnh to
thm DOM hon tt.

Loi b DOM vi removeChild


Khi bn loi b 1 nt, nt vn s tn ti trong b nh m ca my tnh. Bn s khng th
truy xut n nt c na, tr khi bn lu tham chiu n nt bng 1 bin.
Khi loi b DOM, nt cha s s dng phng thc removeChild() t mt 1 hoc nhiu nt
con

DOM Event
S kin v cc hm x l s kin DOM l mt phn quan trng ca Javascript. S kin s
xy ra khi c s tng tc t ngi dng (nh s kin onclick khi ngi dng nhn chut ,
61

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


onmousemove khi chut di chuyn..) hoc t chnh trang web (s kin onload khi mt phn
t DOM no c ti xong hay khi ca s b thay i kch thc). Bn c th tham
kho thm danh sch s kin rt gn http://www.w3schools.com/jsref/dom_obj_event.asp

Cch 1: Chn trc tip vo th HTML


Cch 2: Chn vo thuc tnh s kin ca DOM
Cch 3: Dng phng thc addEventListener()

4.12.

Bi Tp V Javascript

5. PHP
5.1. PHP L G?
PHP (vit tt hi quy "PHP: Hypertext Preprocessor") l mt ngn ng lp trnh kch bn hay
mt loi m lnh ch yu c dng pht trin cc ng dng vit cho my ch, m ngun
m, dng cho mc ch tng qut. N rt thch hp vi web v c th 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 phm tng i ngn hn so vi cc ngn
ng khc nn PHP nhanh chng tr thnh mt ngn ng lp trnhweb ph bin nht th
gii.
on m sau minh ha gip cch vit PHP lng vo cc trang HTML d dng nh th no

62

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Th <?php v th ?> s nh u s bt u v s kt thc ca phn m PHP qua my
ch bit x l v dch m cho ng. y l mt im kh tin li ca PHP gip cho vic
vit m PHP tr nn kh trc quan v d dng trong vic xy dng phn giao din ng
dng HTTP.
Ngn ng, cc th vin, ti liu gc ca PHP c xy dng bi cng ng v c s ng
gp rt ln ca Zend Inc., cng ty do cc nh pht trin ct li ca PHP lp nn nhm to ra
mt mi trng chuyn nghip a PHP pht trin quy m doanh nghip.

5.2. Cch Vit Comment


Trong bt c ngn ng no d n gin nh HTML hay CSS cho n phc tp hn
cht xu nh PHP th vic ch thch l iu khng th thiu. C ch thch cc dng code ca
bn d hiu hn, d kim sot, d khc phc li cng nh tin cho vic k tha hoc lm vic
nhm.
Cc on ch thch s c my b qua, khng ng n g c, bn c th vit Ting
Vit nhng on ny nu mun. Thng th ch thch s b m hn nhng dng code
trong cc chng trnh h tr g code PHP - iu ny cng ng trong hu ht cc ngn ng
v phn mm khc.

Ch thch trong PHP c 2 kiu:


Kiu th nht l ch thch dng, vi 2 du gch cho nh th ny:
// - u im l n gin, nhanh - nhng bn ch ch thch c duy nht 1 dng.
ch thch nhiu dng bn phi dng kiu th hai.
Kiu th hai l ch thch khi, bn c th on ch thch trn nhiu dng bng cch a
n vo cp th /* v */

Di y l nhng v d c th hn:
Ch thch dng:
63

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


<?php
// In ra thng tin tui
echo $tuoi;
?>
Ch thch khi:
<?php
/*
In ra y thng tin gm tui, tn v gii tnh.
Khng cn in ra thng tin qu qun v in thoi.
Th <br/> dng ngt dng.
*/
echo $tuoi<br/>;
echo $ten<br/>;
echo $gioi<br/>;

?>

5.3. Bin V Kiu Gi Tr


PHP c cc kiu gi tr:
- boolean
- integer
- float
- String
- array
- object
64

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- null
Trong PHP bin c k hiu bi du " $ " i sau l cc k t bao gm cc ch ci thng (a
-z) in hoa (A - Z) v cc ch s (0 - 9) v du " gch di " ( _ ) . Bin khng c vit cch.
Bin khng c bt u bng ch s

V d :
<?php
$name = "phpandmysql.net"; // kiu chui
$Name = 123; // kiu s nguyn
$num12 = 1.2; // kiu s thc
$_bien = "gi tr";
$12name = 10; // bin khng c bt u bng ch s
a = "10"; // bin phi c du $ trc
?>

- Ch : Trong PHP phn bit ch in hoa v in thng , bin $a v $A l hai bin hon ton
khc nhau.
5.4. Hng S

Trong PHP c hai loi hng, hng c sn trong PHP v hng do chng ta t nh ngha

- Hng c sn trong PHP, v d nh

<?php
TRUE , FALSE ; // c gi tr tng ng l 1 v 0
PHP_VERSION ; // cho bit phin bn PHP trong server ca bn
PHP_OS ;

// cho bit server ca bn l linux hay window

?>
V rt nhiu cc hng khc nh E_ERROR, E_WARNING.........
- Hng do chng ta nh ngha, nh ngha hng chng ta dng cu trc sau :

65

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


<?php
define("NAME","PHPANDMYSQL.NET"); // nh ngha hng c tn l
NAME
echo NAME; // xut ra mn hnh "PHPANDMYSQL.NET"
?>

5.5. Ton T
Ton t gn : d thy ngay trong khi ta gn gi tr cho 1 bin, v d

<?php
$name = "haanhdon"; // Gn gi tr "haanhdon" cho bien $name
$number = 10 ; // gn gi tr 10 cho bin $number
?>

Ton t s hc : l cc php ton c bn m cc bn hay thy nh cng, tr, nhn, chia...

Tn

K hiu

M t

V d

Php cng

Cng hai s hng

$a + $b

Php tr

Tr hai s hng

$a - $b

Php nhn

Nhn hai s hng

$a * b

Php chia

Chia hai s hng

$a / $b

Php chia ly d

Chi ly d

5%2=1

Ton t so snh : cc php ton logic nh so snh bng, ln hn hoc nh hn...

Tn

K hiu

M t

V d

So snh bng

==

Hai s hng bng nhau

$a == $b

So snh khc

!=

Hai s hng khc nhau

$a != $b

So snh ln hn

>

So snh ln hn

$a > b

So snh nh hn

<

So snh nh hn

$a < $b

66

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Ln hn hoc bng

>=

Ln hn hoc bng

$a >= $b

Nh hn hoc bng

<=

Nh hn hoc bng

$a <= $b

V d : Ton t s hc

<?php
// Ton t s hc
$a = 5;
$b = 10;
$c = $a + $b;
$d = $a * $b;
echo "Tng $a v $b : ".$c."<br />";
echo "Tch $a v $b : ".$d;
?>

V d : Ton t so snh

<?php
// Ton t so snh
$a = 5;
$b = 10;
if($a > $b){
echo "$a ln hn $b";
}else{
echo "$a nh hn $b";
}
?>

Ton t logic

Ton t logic l t hp cc gi tr boolean c kt qu tr v l TRUE hoc FALSE

67

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Tn

K hiu

M t

Php v

&& hoc and

C 2 v phi tho mn iu kin

Php hoc

|| hoc or

Ph nh

Mt trong 2 tho mn iu kin l


c
Ph nh 1 iu kin, gi tr no

V d
$a > $b && $a >
$c
$a > $b || $a < $c

$a != b

V d :

<?php
// Ton t logic
$diem = 7;

if($diem <= 5){


echo "Bn dc dt qu!";
}elseif($diem > 5 && $diem <= 8){
echo "Bn hc rt kh!";
}else{
echo "Bn hc rt gii";
}
?>

5.6. String Trong PHP


Cc cch vit String trong PHP
$a = '<p id="idp">paragraph</p>'; //Du " nm trong cp du '_'.
$b = "<a href='google.com'>google</a>"; //cp du '_ ' nm trong cp du "_".
$c = "<div id=\"divid\"></div>"; //trng hp t bit phi dng \.

In chui:
68

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


dng echo hay print
<?php
$name = 'Marius';
echo "Hy $name";
echo 'Hy $name';

// Hy Marius
// Hy $name

?>

Ni chui:
<?php
$site1 = 'marplo.net';
$site2 = 'coursesweb.net';
echo 'Web sites: '. $site1. ', '. $site2;

// Web sites: marplo.net,

http://coursesweb.net
?>
<?php
$hy = 'Hy ';
$hy .= 'MarPlo';
echo $hy;

// Hy MarPlo

?>
Function for String:
- trim: loi b khong trng u v cui chui
- strlen: di chui
- str_word_count: m s t
- ucwords: in hoa k t u ca t dng tn ngi
69

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- strtolower: ch thng
- strip_tags: loi b tag html ra khi string
- strpos
- str_replace

5.7. Bin Ton Cc Trong PHP


$_SERVER:
l mt bin ton cc trong PHP
cha thng tin v PHP Webserver
l mt array element.
Mt s phn t trong $_SERVER thng dng:
- PHP_SELF
- REQUEST_METHOD
- REQUEST_TIME
- DOCUMENT_ROOT
- HTTPS
- HTTP_ACCEPT
- HTTP_ACCEPT_CHARSET
- HTTP_POST
- HTTP_REFERER
- HTTP_USER_AGENT
- REMOTE_ADDR
- SCRIPT_FILENAME
- SERVER_ADDR

70

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- SERVER_NAME
- SERVER_PROTOCOL
- SERVER_ADMIN
- SERVER_PORT
- REMOTE_ADDR
- SCRIPT_NAME
- REQUEST_URI

V d:

<?php
$host

$_SERVER['HTTP_HOST'];

$self

$_SERVER['PHP_SELF'];

$time

$query

$_SERVER['REQUEST_TIME'];

= $_SERVER['QUERY_STRING'];

$root

$_SERVER['DOCUMENT_ROOT'];

$r

$_SERVER['HTTP_REFERER'];

$rh

$_SERVER['REMOTE_HOST']; //--Hostname ca ngi truy cp

$rp

$_SERVER['REMOTE_PORT']; //--Port m trnh duyt m ra

$url

$_SERVER['REQUEST_URI'];

$sname = $_SERVER['SERVER_NAME'
$ips

= $_SERVER['SERVER_ADDR'];//--IP ca server

$ipc

= $_SERVER['REMOTE_ADDR'];//--IP ca ngi truy cp

$br

= $_SERVER['HTTP_USER_AGENT'];//--

Thng tin v trnh duyt ca ngi truy cp

5.8. Ton T iu Kin Ton T So Snh


if statement tuyn b ny s dng thc hin mt s m ch khi xc nh mt iu
kin l ng

71

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


ifelse statement tuyn b ny s dng thc hin mt s m, nu mt iu kin l
ng s tht v mt m s, nu cc iu kin l sai
ifelseif.else statement tuyn b ny s dng la chn mt trong nhiu khi m s
c thc hin
switch... case...: khi c nhiu trng hp cn so snh, vic thc hin if..else.. l khng ti u.
Lc ny ta dng switch.
S dng cc tuyn b, nu thc hin mt s m ch khi xc nh mt iu kin l ng.
C php: if (iu kin) m c thc hin, nu iu kin l ng;

Ton T S Hc:

Ton T So Snh:

Ton T Logic:

72

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

Ton t kt hp:

5.9. GET, POST, REQUEST


POST method l hnh thc a cng nh nhn d liu ca form ln server (hay ni
cch khc l a ln chng trnh PHP x l). Trong PHP, method ny c khai bo bng
mt bin l $_POST['object name']. Trong , tn bin _POST l cc k t vit hoa, object
name l tn ca thnh phn trong form m ta cn ly d liu.
Cng ging vi POST, GET cng dng ly d liu t ngi dng nhp trn form.
Cch dng v c php tng t. Nhng phng thcGET khng c dng ly d liu
ging phng thc POST. Phng thc GET c c php nh sau: $_GET['tn bin'];
Trong : tn bin l bin c a t trang ny ti trang khc thng qua address bar ca
trnh duyt. Ti sao li nh th? V phng thcGET c tc dng ly d liu ca cc bin
trn thanh address ca trnh duyt.

73

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Ngoi hai phng thc l GET v POST, trong PHP cn c phng
thc REQUEST. REQUEST khng phi l mt phng thc c a ra trn form trong
HTML, vy REQUEST c tc dng nh th no?
REQUEST l phng thc kt hp ca hai phng thc GET v POST, tc l n c
th ly c tt c cc d liu ngi dng a vo form v nhng d liu trn thanh address
bar na. n gin l bn c th thay th POST hoc GET bng REQUEST bt k ch no
5.10.

Lp Trong PHP

Trong PHP, c nhng vng lp sau y:


- while vng lp thng qua mt khi m, trong khi ch nh mt iu kin l ng
- dowhile vng lp thng qua mt khi m mt ln, v sau lp trong vng lp
nh lu di nh l mt iu kin l ng quy nh
- for: Vng lp thng qua mt khi m xc nh mt s ln

- foreach: Vng lp thng qua mt khi m cho mi yu t trong mt mng


5.11.

Mng Trong PHP

Trong php h tr mt kiu d liu l d liu kiu mng. Mng hay cn gi


l array. Mng l mt bin l bin danh sch. Ngha l thay v mt bin ch c th lu tr
c mt gi tr th vi mng mt bin c th lu c nhiu gi tr trong mt bin.
Chng ta c th to 1 mng vi cc phn t khng ng nht v mt d liu. y l
mt u im ca PHP so vi cc loi ngn ng khc nh C++ hay Java.
Cu trc ca mt mng bao gm kha v gi tr. lm vic c vi mng ta phi
s dng cc hm x l mng.

Khi to mng trong php


khi to mng trong php ta s dng c php sau
$ten_bien = array("gia_tri_1","gia_tri_2","gia_tri_3",...,"gia_tri_n");
Cc gi tr trong mng cch nhau bi du phy ,
Cc gi tr ca mng c th l kiu string, kiu s, kiu mng
74

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Thm gi tr vo mng
thm gi tr vo mng ta lm nh sau
$ten_mang[ ] = 'gia_tri';
$ten_mang['key'] = 'gia_tri';

Trong mt s trng hp chng ta mun xem cu trc ca mng


ta s dng hai lnh sau: print_r hoc var_dump

m s phn t trong mng


- m s phn t ca mng ta dng hm count.

Cc loi mng trong PHP


C hai loi mng trong php
+ Mng tun t
+ Mng bt tun t
i vi mng tun t
- L mng m c cc ch s index hay cn gi l kha s dng kiu s, tng hoc
gim dn theo mt quy lut.
- V tr kha ca mng thng bt u t con s 0
i vi mng bt tun t
- L mng s dng t, cm t lm kha, thay v thng thng vn s dng s lm
kha.
- Dng foreach( key->value) duyt mng.

Cc hm x l mng
print_r ($array) c dng xem cu trc ca mng

75

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


count ($array) Tr v gi tr kiu s nguyn l s phn t ca mng

array_values ($array) Tr v mt mng lin tc c cc phn t c gi tr l gi tr ly t cc


phn t ca mng $array

array_keys ($array) Tr v mt mng lin tc c cc phn t c gi tr l kha ly t cc


phn t ca mng $array.

array_pop ($array) Loi b phn t cui cng ca mng. Hm tr v phn t cui cng
c loi b.

array_push ($array, $val1, $val2, ... , $valn) Thm mt hoc nhiu phn t vo cui mng
$array. Hm tr v kiu s nguyn l s lng phn t ca mng $array mi

array_shift ($array) Loi b phn t u tin ca mng. Hm tr v phn t u tin


c loi b.

array_unshift ($array, $val1, $val2, ... , $valn) Thm mt hoc nhiu phn t vo u
mng $array. Hm tr v kiu s nguyn l s lng phn t ca mng $array mi

array_flip ($array) Tr v mt mng c kha v gi tr c hon i cho nhau so vi


mng $array (gi tr thnh kha v kha thnh gi tr)

sort ($array) Sp xp mng $array theo gi tr tng dn

array_reverse ($array) o ngc v tr cc phn t ca mng

76

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


array_merge ($array1, $array2, , $arrayn) Nhp 2 hay nhiu mng thnh mt mng
duy nht v tr v mng mi

array_rand ($array, $number) Ly ngu nhin $number phn t t mng $array v a


vo mng mi (ly gi tr kha)

array_search ($value,$array) Tm phn t mang gi tr $value trong mng $array. Tr v


kha ca phn t tm c.

array_slice ($array, $begin. $finish) Trch ly 1 on phn t ca mng $array t v tr


$begin n v tr $finish. Phn t u tin (ch s 0), phn t cui cng (ch s -1 hay
count($array) - 1)

array_unique ($array) Loi b nhng phn t trng nhau trong mng v tr v mng mi

implode ($str, $array) Chuyn cc gi tr ca mng $array thnh mt chui bao gm cc


phn t cch nhau bi k t $str

explode ($delimiter, $str) Chuyn mt chui thnh mt mng. Tch chui da vo


$delimiter, mi on tch ra s thnh mt phn t ca mng mi

serialize ($value) Chuyn chui/mng/i tng $value thnh mt chui c bit lu vo


c s d liu
unserialize ($value) Chuyn chui c bit c to t serialize($value) v trng thi ban
u

array_key_exists ($key, $array) Kim tra kha $key c tn ti trong mng $array hay
khng? Nu c tr v gi tr true.

77

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


in_array ($value, $array) Kim tra gi tr $value c tn ti trong mng $array hay khng?
Nu c tr v gi tr true.

array_diff ($array1, $array2) Tr v mt mng bao gm cc phn t c gi tr tn ti trong


mng $array1 nhng khng tn ti trong mng $array2

array_diff_assoc ($array1, $array2) Tr v mt mng bao gm cc phn t c kha tn ti


trong mng $array1 nhng khng tn ti trong mng $array2

array_intersect ($array1, $array2) Tr v mt mng bao gm cc phn t ging nhau v


gi tr gia 2 mng $array1 v $array2

array_intersect_assoc ($array1, $array2) Tr v mt mng bao gm cc phn t ging


nhau v kha v gi tr gia 2 mng $array1 v $array2

array_combine ($keys, $values) To mt mng mi c kha c ly t mng $keys v gi


tr c ly t mng $values theo tun t (Yu cu s phn t 2 mng phi bng nhau)

5.12.

Hm Trong PHP

Hm l mt chng trnh thc hin mt tc v nh ngha c th, chng thc cht l


nhng on chng trnh nh gip gii quyt mt vn ln. Hm l mt phng php lp
trnh hng th tc trong ngn ng PHP v cc ngn ng bc cao khc, hiu c n cc
bn mi c th tip tc hc nhng kin thc nh lp trnh i tng.
C php:
function functiono_name()
{
//Lnh thc thi
}

78

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Tn hm c th l mt t hp bt k nhng ch ci, con s v du gch di, nhng phi bt
u t ch ci v du gch di.

Hm t nh ngha vi cc tham s:
C php:
function function_name($gt1,$gt2)
{
//Hnh ng
}

V d:
<?php
function indulieu($text)
{
echo "$text<br>";
}
indulieu("welcome");
indulieu("who are you ?");
?>

Hm vi gi tr tr v:
C php:
function function_name(C hoc khng c i s)
{
//Thuc thi
return giatri;
}

V d:

79

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


<?php
function tinhtong($a,$b)
{
$total=$a+$b;
return $total;
}
echo tinhtong(19,31)
?>

Include v require, Include_one v require_one:


s dng li m trong nhiu trn web (cc script), ta thng vit cc hm, nh
ngha cc hng hay cc on m v lu vo mt file ring. Khi , mt trang php no cn s
dng cc on m vit, c h chn vo v tr cn thit. chn mt file c sn vo trang
web, ta s dng mt trong bn cu lnh sau: include (filename), require, include_once,
require_once.
V d: <? Include (functions.php)?> s chn file functions.php t th mc cng cp vi
trang ang vit vo ngay v tr t lnh include.

5.13.

File Upload

upload c file, chng ta cn thm thuc tnh enctype="multipart/form-data" cho


form, ta dng th input type="file" upload file.
To file form.php vi ni dung nh sau

- Tip theo ta s kim tra xem ngi dng nhn nt submit hay cha bng cch kim tra s
tn ti ca bin $_POST['ok'], nu ngi dng nhn submit ri th tin hnh kim tra xem
h chn file hay cha, nu cha chn file th bo li
- Ta c th ly c tn file, kiu file , c file thng qua cc bin :
80

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


File name : $_FILES['file']['name'];
File type : $_FILES['file']['type'];
File size : $_FILES['file']['size'];
<?php
if(isset($_POST['ok'])){ // Ngi dng n submit
if($_FILES['file']['name'] != NULL){ // chn file
// thc hin cng vic upload
}else{
echo "Vui lng chn file";
}
}
?>
- Khi ngi dng chn file th tin hnh upload ? ty theo yu cu ca bi ton m chng
ta tin hnh xy dng chc nng cho n, v d yu cu t ra y l ch c upload cc
file nh c kiu file l jpg , png , gif v c file khng c ln hn 1mb
- Chng ta tin hnh kim tra kiu file xem c ph hp hay khng, nu l file nh th tin
hnh kim tra xem c file c ph hp hay khng v ngc li th bo li file chn khng phi
file nh

<?php
if($_FILES['file']['type'] == "image/jpeg"
|| $_FILES['file']['type'] == "image/png"
|| $_FILES['file']['type'] == "image/gif"){
// l file nh
// Tin hnh code upload
}else{
// khng phi file nh
echo "Kiu file khng hp l";
}
?>

81

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


- Bc cui cng l xem file va chn c c nh hn 1mb khng, file size y c tnh
theo byte (1mb = 1*1024 kb * 1024 bytes) . Nu c file nh hn 1mb tin hnh upload file
bng hm move_uploaded_file , file upload s c lu trong th mc data
<?php
if($_FILES['file']['size'] > 1048576){
echo "File khng c ln hn 1mb";
}else{
// file hp l, tin hnh upload
$path = "data/"; // file lu vo th mc data
$tmp_name = $_FILES['file']['tmp_name'];
$name = $_FILES['file']['name'];
$type = $_FILES['file']['type'];
$size = $_FILES['file']['size'];
// Upload file
move_uploaded_file($tmp_name,$path.$name);
echo "File uploaded! <br />";
echo "Tn file : ".$name."<br />";
echo "Kiu file : ".$type."<br />";
echo "File size : ".$size;
}
?>
- V y l ton b code ca phn upload file
<?php
if(isset($_POST['ok'])){ // Ngi dng n submit
if($_FILES['file']['name'] != NULL){ // chn file
// Tin hnh code upload file
if($_FILES['file']['type'] == "image/jpeg"
|| $_FILES['file']['type'] == "image/png"
|| $_FILES['file']['type'] == "image/gif"){
// l file nh
// Tin hnh code upload
if($_FILES['file']['size'] > 1048576){
echo "File khng c ln hn 1mb";
82

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


}else{
// file hp l, tin hnh upload
$path = "data/"; // file s lu vo th mc data
$tmp_name = $_FILES['file']['tmp_name'];
$name = $_FILES['file']['name'];
$type = $_FILES['file']['type'];
$size = $_FILES['file']['size'];
// Upload file
move_uploaded_file($tmp_name,$path.$name);
echo "File uploaded! <br />";
echo "Tn file : ".$name."<br />";
echo "Kiu file : ".$type."<br />";
echo "File size : ".$size;
}
}else{
// khng phi file nh
echo "Kiu file khng hp l";
}
}else{
echo "Vui lng chn file";
}
}
?>
5.14.

Session V Cookie

Cookie l 1 on d liu c ghi vo a cng hoc b nh ca my ngi s dng.


N c trnh duyt gi ngc ln li server mi khi browser ti 1 trang web t server.
Nhng thng tin c lu tr trong cookie hon ton ph thuc vo website trn server. Mi
website c th lu tr nhng thng tin khc nhau trong cookie, v d thi im ln cui ta
gh thm website, nh du ta login hay cha, v.v...
Cookie c to ra bi website v gi ti browser, do vy 2 website khc nhau (cho
d cng host trn 1 server) s c 2 cookie khc nhau gi ti browser. Ngoi ra, mi browser

83

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


qun l v lu tr cookie theo cch ring ca mnh, cho nn 2 browser cng truy cp vo 1
website s nhn c 2 cookie khc nhau.
Thit lp cookie:
thit lp cookie ta s dng c php:
Setcookie("tn cookie","gi tr", thi gian sng)
Tn cookie l tn m chng ta t cho phin lm vic.
Gi tr l thng s ca tn cookie.
V d:
Setcookie("username","admin", time() +3600)
Nh v d trn ta thy vi tn l username v gi tr l admin, c thi gian sng l 1 gi tnh
t thi im thit lp.
Ch : Kch bn cookie phi t trn mi gi tr tr v bao gm th HTML v lnh echo.
Kch bn cookie phi t trn mi gi tr tr v bao gm th HTML v lnh echo.

S dng cookie:
s dng li cookie va thit lp, chng ta s dng c php:
C php: $_COOKIE["tn cookies"]
Tn cookie l tn m chng ta thit lp pha trn.

Hy Cookie:

hy 1 cookie c to ta c th dng 1 trong 2 cch sau:


+ C php: setcookie("Tn cookie")
Gi hm setcookie vi ch duy nht tn cookie m thi
+ Dng thi gian ht hn cookie l thi im trong qu kh.
V d: setcookie("name","Username",time()-3600);

Session: Mt cch khc qun l ngi s dng l session. Session c hiu l khong thi
gian ngi s dng giao tip vi 1 ng dng. Mt session c bt u khi ngi s dng
truy cp vo ng dng ln u tin, v kt thc khi ngi s dng thot khi ng dng. Mi
84

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


session s c c cp mt nh danh (ID) khc nhau v ni dung c lu trong th mc
thit lp trong file php.ini (tham s session.save_path).

Thit lp session:
thit lp 1 session ta s dng c php: session_start()
on code ny phi c nm trn cc kch bn HTML. Hoc nhng lnh echo, printf.
thit lp 1 gi tr session, ngoi vic cho php bt u thc thi session. Chng ta cn phi
ng k 1 gi tr session. tin cho vic gn gi tr cho session .
Ta c c php sau: session_register("Name")

V d:
<?php
Session_start();
Session_register("username");
?>

S dng gi tr ca session:

Ging vi cookie. s dng gi tr ca session ta s dng m lnh sau:


C php: $_SESSION["name"]
$_SESSION["name"]
Vi Name l tn m chng ta s dng hm session_register("name") khai bo.

Hy b session:
hy b gi tr ca session ta c nhng cch sau:
session_destroy() // Cho php hy b ton b gi tr ca session
session_unset()// Cho php hy b session .

85

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


6. PHP V MySQL
6.1. Khi Nim V MySQL

Mysql l h qun tr d liu min ph, c tch hp s dng chung vi apache, PHP.
Chnh yu t pht trin trong cng ng m ngun m nn mysql qua rt nhiu s h
tr ca nhng lp trnh vin yu thch m ngun m. Mysql cng c cng mt cch truy
xut v m lnh tng t vi ngn ng SQL. Nhng Mysql khng bao qut ton b
nhng cu truy vn cao cp nh SQL. V bn cht Mysql ch p ng vic truy xut n
gin trong qu trnh vn hnh ca website nhng hu ht c th gii quyt cc bi ton
trong PHP.
nh ngha c s d liu, bng, ct:
C s d liu: l tn ca c s d liu chng ta mun s dng
Bng: L 1 bng gi tr nm trong c s d liu.
Ct l 1 gi tr nm trong bng. Dng lu tr cc trng d liu.

nh ngha 1 s thut ng:

NULL : Gi tr cho php rng.


AUTO_INCREMENT : Cho php gi tr tng dn (t ng).
UNSIGNED : Phi l s nguyn dng
PRIMARY KEY : Cho php n l kha chnh trong bng.

Loi d liu trong Mysql:


y chng t ch gii thiu 1 s loi thng dng: 1 s d liu khc c th tham kho
trn trang ch ca mysql.

86

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015

Nhng c php c bn:


C php to 1 c s d liu:
CREATE DATABASE tn_c_s_d_liu;
C php s dng c s d liu: Use tn_database;
C php thot khi c s d liu: Exit

C php to 1 bng trong c s d liu:


CREATE TABLE user (<tn_ct> <m_t>,,<tn_ct_n>..<m_t_n>)
V d:
mysql> create table user(
id INT(15) UNSIGNED NOT NULL AUTO_INCREMENT,
username VARCHAR(255) NOT NULL,
email VARCHAR(200) NOT NULL,
PRIMARY KEY (user_id)
);

Hin th c bao nhiu bng: show tables;


Hin th c bao nhiu ct trong bng: show columns from table;
Thm 1 ct vo bng :
ALTER TABLE tn_bng ADD <tn_ct> <thuc_tnh> AFTER <tn_ct>
87

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


V d:
mysql> alter table user add sex varchar(200) NOT NULL after email;

Thm gi tr vo bng:
C php:
INSERT INTO Tn_bng(tn_ct) VALUES(Gi_tr_tng_ng);
V d:

mysql> insert into user(username,password,email,sex,home)


values("Lanna","12345","email@gmail.com","F","www.abc.com");

Truy xut d liu:


C php:
SELECT tn_ct FROM Tn_bng;
V d:
mysql> select id,username from user;

Truy xut d liu vi iu kin:


C php:
SELECT tn_ct FROM Tn_bng WHERE iu kin;
V d:
mysql> select id,username from user where user_id=2;

Truy cp d liu v sp xp theo trnh t


C php:
SELECT tn_ct FROM Tn_bng
WHERE iu kin (c th c where hoc khng)
ORDER BY Theo quy c sp xp.
Trong quy c sp xp bao gm hai thng s l ASC (t trn xung di), DESC (t
di ln trn).
88

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


mysql> select id,username from user order by username ASC ;

Truy cp d liu c gii hn :


C php:
SELECT tn_ct FROM Tn_bng
WHERE iu kin (c th c where hoc khng)
LIMIT v tr bt u, s record mun ly ra
V d:
mysql> select user_id,username from user order by username ASC limit 0,10 ;

Cp nht d liu trong bng:


C php:
Update tn_bng set tn_ct=Gi tr mi
WHERE (iu kin).
Nu khng c rng buc iu kin, chng s cp nht ton b gi tr mi ca cc record
trong bng.
V d:
mysql> update user set email="admin@gmail.com" where user_id=1 ;

Xa d liu trong bng:


C php:
DELETE FROM tn_bng WHERE (iu kin).
Nu khng c rng buc iu kin, chng s x ton b gi tr ca cc record trong bng.
6.2. Kt Ni PHP V MySQL

Chng ta cng nghin cu v cc c php sql v Mysql c bn bao gm vic to


bng, to kt ni, thm, sa, xa cc dng d liu trong c s d liu. V tip theo bi ny,
chng ta s cng tm hiu v cch s dng mysql kt hp vi PHP xut ra d liu nh th
no.

Kt ni c s d liu:
C php: mysql_connect("hostname","user","pass")
89

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


V d: $connect = mysql_connect('localhost', 'root', 'pass');

La chn c s d liu:
C php:
mysql_select_db("tn_CSDL")

V d:
$conn=mysql_connect("localhost","root","root") or die(" khong the ket noi");
mysql_select_db("demo");

Thc thi cu lnh truy vn:


C php:
mysql_query("Cu truy vn y");
m s dng d liu trong bng:
C php:
mysql_num_rows();
Ly d liu t bng a vo mng:
C php:
mysql_fetch_array();
ng kt ni c s d liu:
C php:
mysql_close();

V d p dng:
<?
$conn=mysql_connect("localhost", "root", "root") or die("can't connect database");
mysql_select_db("demo_mysql",$conn);
$sql="select * from user";
90

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


$query=mysql_query($sql);
if(mysql_num_rows($query) == 0)
{
echo "Chua co du lieu";
}
else
{
while($row=mysql_fetch_array($query))
{
echo $row[username] ." - ".$row[password]."<br />";
}
}
mysql_close($conn);
?>

7. Tng Bc Xy Dng ng Dng Shopping Cart


7.1. Chun B
- Bootstrap CSS Framework
- Jquery, jquery block UI
- MySQL
- PHP 5
To table user(id, username, password, email, createdAt)
To table product(id, name, price, content, image, display_order, createdAt,
updatedAt)
To table order(id, order_number, cart_json, total_price, createdAt)
To session cart.
7.2. Xy Dng Trang BackEnd (Admin)
Trang Login Ca Admin
Admin phi login vo qun l website
Khi cha login th tt c u phi chuyn v trang login.
91

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Trang Qun L Sn Phm
Cho php thm, sa, xa sn phm.
Trang Qun L n Hng
Xem n hng chi tit, xa n hng.
Xy Dng Trang FrontEnd (Trang Sn Phm)
Trang hin th list sn phm cho ngi dng mua
Trang chi tit sn phm
Trang tm kim sn phm

7.3. Xy Dng Gi Hng


Session Cart cho php ngi dng thm sn phm vo gi t trang list, hay trang chi
tit
Trang qun l cart: cho php xa sn phm khi cart.
Trang thanh ton: in thng tin thanh ton.

8. Gii Thiu V YII Framework


8.1. YII Framework

Lch s
Vo thng 12 nm 2008, mt PHP Framework mi c cng ng bit n l Yii
Framework vi phin bn 1.0. C rt nhiu Framework c pht trin vo nm 2008 nhng
Yii c mi ngi nhit tnh cng nhn v Qiang Xue l ngi thnh lp ra Prado
Framework cng chnh l tc gi ca Yii Framework. Nhng nm kinh nghim v nhng
nhn xt ca ngi s dng, ang cn mt Framework PHP d dng hn, m rng hn v
hiu qu hn p ng nhu cu ngy cng tng ca cc nh pht trin ng dng Web. V
vy Yii Framework ra i v p ng cc yu cu trn cho cng ng Web.
Yii l mt PHP Framework c xy dng pht trin cc ng dng Web quy m ln da
trn nn tng component (thnh phn s dng li). Yii cho php ti s dng ti a cc thnh
phn ca h thng tng tc vit ng dng.
Ging nh hu ht cc PHP Framework, Yii l mt MVC Framework.
92

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Yii, ni chung, l mt Framework pht trin ng dng Web nn c th dng vit mi loi
ng dng Web. Yii rt nh v c trang b gii php cache ti u nn n c bit hu dng
cho ng dng Web c dung lng d liu trn ng truyn ln nh web portal, forum,
CMS, e-commerce, v.v.
chy 1 ng dng c vit bng Yii, bn cn Web Server h tr PHP 5.1.0 hoc phin
bn mi hn.
Vi developer mun pht trin Yii, kin thc lp trnh hng i tng (OOP) rt hu ch v
Yii l mt Framework OOP thun ty.
Yii l mt Framework d pht trin
chy mt ng dng web Yii, tt c nhng g bn cn l download Yii Framework phin
bn mi nht v mt my ch h tr PHP 5.1.0 hoc cao hn. pht trin vi Yii, bn ch
cn bit PHP v lp trnh hng i tng (OOP). Bn khng cn phi hc bt k h iu
hnh hoc ngn ng lp trnh mi no. Xy dng mt ng dng Yii ch yu lin quan n
vic vit v duy tr cc lp PHP ca ring bn, mt s trong s m rng t cc lp thnh
phn chnh ca Yii Framework.
Yii kt hp rt nhiu cc tng tuyt vi v tch ly t cc Framework v ng dng web
ni ting khc. V vy, nu bn ang tm hiu Yii sau khi s dng cc Framework pht
trin khc, y l iu kin bn c th nh gi Framework no u im hn v nh
hng cho bn thn.
Yii cng bao gm mt quy c cu hnh, gp phn d s dng. iu ny c ngha rng Yii
quy c cho hu nh tt c cc h thng ng dng ca bn. Nu bn thc hin theo cc
quy c, bn s code t hn v tn t thi gian pht trin ng dng ca bn hn. Nu mun,
Yii cho php bn ty bin v linh hot m khng phi theo quy c ca Yii.
Yii c hiu sut cao
Yii c thit k cn thn cho php gn nh tt c on code c pht trin v chnh
sa p ng bt k yu cu no. Nu bn mun pht trin code m rng hn thnh cc
cng c hu ch cho cc nh pht trin khc s dng, Yii cung cp theo cc bc v hng
dn gip bn d dng pht trin. iu ny cho php bn ng gp vo danh sch ngy
cng tng cc tnh nng ca Yii v tch cc tham gia trong vic m rng. iu g ng ch
v Yii ? l d s dng, hiu sut cao, v chiu su m rng khng tn km. Yii c ng
93

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


gi vi cc tnh nng gip bn p ng nhng nhu cu cao trn ng dng web hin nay.
AJAX cho php web tch hp cc widgets, thc thi ca mt kin trc MVC, DAO v quan h
lp ActiveRecord, kim sot truy cp, xem video chuyn nghip, quc t (I18N),v ni a
ho (l10n), y l cc tnh nng vt tri ca Yii. Vi phin bn 1.1, Framework chnh by
gi l c ng gi vi mt th vin m rng chnh thc c gi l Zii. Nhng m rng
c pht trin v duy tr bi cc thnh vin ch cht tip tc m rng tnh nng ca Yii.
u im
Yii tt hn cc Framework khc bi tnh hiu qu, nhiu tnh nng. Yii c thit k cn thn
t ban u p ng nhu cu pht trin ng dng Web nghim ngt. Yii l kt qu ca s
kt hp nhng g tt nht ca cc Framework i trc. N l kt qu ca kinh nghim pht
trin ng dng Web lu nm ca cc tc gi v s phn tch k lng, tn dng nhng im
mnh ca cc Framework khc.
Trc , Qiang tng pht trin PRADO nhiu nm. Nhng nm kinh nghim v nh gi
ca ngi s dng, cn mt Framework PHP d dng hn, m rng hn v hiu qu hn
p ng nhu cu ngy cng tng ca cc nh pht trin ng dng web. S liu cc k n
tng khi so snh vi cc Framework PHP khc da trn hiu sut ca n ngay lp tc
thu ht s ch rt tch cc.
Kh nng ti s dng v m rng ca Yii rt cao. Yii l 1 Framework hon ton hng i
tng. Mi th trong Yii u c th ti s dng v m rng rt d dng.
Yii h tr trn tt c cc DBMS bi PDO (PHP Data Object).
Hiu sut x l ca ZendFramework kh l chm, v kin trc ca n qu s v phc tp.
Hin ti c rt nhiu ngi a thch s dng WordPress hay Joomla nhng ch ph hp xy
dng cc website nh, cn lm nhanh, v c sn nhiu th, cng ng v ti liu nhiu Khi
nng cp v bo tr rt kh khn, tn nhiu thi gian.
Hiu sut x l ca Framework Yii hiu qu cao.

8.2. M Hnh MVC

Model
94

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


Thng thng trong kin trc MVC, Model l phn rt quan trng trong c d n, n c quan
h mt thit vi c s d liu.
Yii c 2 loi model: form model l lp ( CFormModel ) v active record model l lp

CActiveRecord ). C hai c m rng t lp ( CModel ). CFormModel i din cho m


hnh d liu do ngi dng nhp vo dng HTML. Sau lu d liu ny vo b nh v
thng qua CActiveRecord d liu c lu vo CSDL.
ActiveRecord (AR) l mt m hnh c s dng truy cp c s d liu theo hng i
tng. Mi i tng AR trong Yii l mt th hin ca CActiveRecord l kt qu ca 1 dng
d liu ca bng c to trong CSDL.
View
Thng thng, View l giao din ca ngi dng, da trn cc d liu trong Model.
View chnh l PHP bao gm ch yu l cc yu t ca giao din. N c th cha cu lnh
PHP nhng n c khuyn co khng nn thay i m hnh d liu nn vn cn tng i
n gin. Cc cu lnh PHP trong View thng c cc iu kin v vng lp rt n gin, v
c h tr bi cc phng thc HTML v Widget l lp c th ti s dng nhiu ln.
Controller
Controller l mt th hin ca CController. N c to ra bi cc ng dng khi ngi dng
yu cu. Controller l thit b iu khin chnh cho cc yu cu t ngi s dng, v n s
tng tc vi c s d liu. Mt lp trong Controller c tn bt u l action. Khi to mi
mt ng dng Yii th mc nh trong Controller l c lp actionIndex, actionContact.

8.3. Cc component, extension

Layout
Layout l b cc chung nht cho mt Website. N thng cha cc thnh phn chung nht.
Trong Layout c th cha cc cu lnh PHP.
V d nh: header, footer,

95

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


......header here......
<?php echo $content; ?>
......footer here......
Widget
Widget l mt th hin ca CWidget. N l mt thnh phn ch yu cho giao din ca trang
Web. Widget thng c nhng vo nhm to ra mt s giao din ngi dng phong ph
hn. Widget c th ti s dng nhiu ln trong website. V d, mt Widget lch c th lm
cho ngi dng mt giao din lch p hn.
s dng widget bn lm nh sau:

<?php $this->beginWidget('path.to.WidgetClass'); ?>


...body content that may be captured by the widget...
<?php $this->endWidget(); ?>
or

1<?php $this->widget('path.to.WidgetClass'); ?>


nh ngha mi mt Widget chng ta tha k t CWidget v override lp init() v run():

class MyWidget extends CWidget


{
public function init()
{
// this method is called by CController::beginWidget()

96

Trung ta m a o ta o ITP - Gia o trnh Web Developer 2015


}
public function run()
{
// this method is called by CController::endWidget()
}
}
Component
ng dng Yii c xy dng da trn cc Component l cc i tng vn bn c t mt
cch r rng. Component l mt th hin ca CComponent hoc lp dn xut ca n. S
dng mt Component ch yu lin quan n vic truy cp vo thuc tnh v nng cao / x l
cc s kin.
Module
Module l mt phn c lp gm cc model, view, controller v cc thnh phn h tr khc.
Trong nhiu kha cnh, module ging nh mt ng dng. S khc nhau chnh l module
khng th trin khai mt mnh m n phi nm bn trong ca mt ng dng. Ngi dng c
th truy cp n cc controller trong mt module nh mt ng dng bnh thng.

97

You might also like