Giaotrinh Makeby Nguyen

Lưu hành nội bộ

TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015

2

Table of Contents

1. Giới thiệu môn học ............................................................................................................................... 5

2. Ngôn Ngữ HTML ................................................................................................................................. 6

2.1. HTML Là Gì? ............................................................................................................................... 6

2.2. Website Tĩnh ................................................................................................................................. 6

2.3. Ai Làm Web Tĩnh ......................................................................................................................... 7

2.4. Cấu trúc một website .................................................................................................................... 8

2.5. Thẻ (tag) và thuộc tính của thẻ .................................................................................................... 10

2.6. Các thẻ thường gặp ..................................................................................................................... 11

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

2.6.2. Thẻ Chú Thích Trong HTML ............................................................................................. 12

2.6.3. Thẻ Paragraph ..................................................................................................................... 13

2.6.4. Thẻ Phân Đoạn Br và Hr ..................................................................................................... 14

2.6.5. Thẻ Trình Bày Văn Bản ...................................................................................................... 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. Một số bài tập về HTML............................................................................................................. 23

3. Sơ Lược Về CSS ................................................................................................................................. 23

3.1. CSS Là Gì? ................................................................................................................................. 23

3.2. Đặc Tính Cơ Bản Của CSS ......................................................................................................... 23

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

3.4. Cú Pháp Của CSS ....................................................................................................................... 26

3.5. Chèn CSS Vào Website .............................................................................................................. 27

3.6. Các CSS Thường Dùng ............................................................................................................... 29

3.6.1. Định Nghĩa Cho Đoạn Văn Bản ......................................................................................... 29

3.6.2. Định Nghĩa Font.................................................................................................................. 32

3.6.3. Đường Viền Và Các Thuộc Tính ........................................................................................ 33

3.6.4. Thuộc Tính Margin ............................................................................................................. 35

3.6.5. Thuộc Tính Padding ............................................................................................................ 36

3.6.6. Thuộc Tính Overflow .......................................................................................................... 37

3.6.7. Thuộc Tính Opacity/Transparent ........................................................................................ 37

3.6.8. Thuộc Tính Position ............................................................................................................ 37


3

3.6.9. Thuộc Tính Display ............................................................................................................ 38

3.6.10. Thuộc Tính Float, Clear ...................................................................................................... 38

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

3.8. Bài Tập Về CSS .......................................................................................................................... 40

4. JavaScript ............................................................................................................................................ 40

4.1. Khái Niệm ................................................................................................................................... 40

4.2. Cách Nhúng Javascript Vào HTML ............................................................................................ 40

4.3. Thẻ Noscript ................................................................................................................................ 41

4.4. Hộp Thoại Trong Javascript ........................................................................................................ 42

4.5. Biến Trong Javascript ................................................................................................................. 43

4.6. Toán Tử Trong Javascript ........................................................................................................... 44

4.7. Biểu Thức Regular ...................................................................................................................... 46

4.8. Các Lệnh Điều Kiện, Lặp ........................................................................................................... 47

4.9. Hàm ............................................................................................................................................. 50

4.10. Mảng ....................................................................................................................................... 53

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

4.12. Bài Tập Về Javascript ............................................................................................................. 62

5. PHP ..................................................................................................................................................... 62

5.1. PHP Là Gì? ................................................................................................................................. 62

5.2. Cách Viết Comment .................................................................................................................... 63

5.3. Biến Và Kiểu Giá Trị .................................................................................................................. 64

5.4. Hằng Số ....................................................................................................................................... 65

5.5. Toán Tử ....................................................................................................................................... 66

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

5.7. Biến Toàn Cục Trong PHP ......................................................................................................... 70

5.8. Toán Tử Điều Kiện Toán Tử So Sánh ........................................................................................ 71

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

5.10. Lặp Trong PHP ....................................................................................................................... 74

5.11. Mảng Trong PHP .................................................................................................................... 74

5.12. Hàm Trong PHP ...................................................................................................................... 78

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

5.14. Session Và Cookie .................................................................................................................. 83

6. PHP Và MySQL ................................................................................................................................. 86

6.1. Khái Niệm Về MySQL ............................................................................................................... 86


4

6.2. Kết Nối PHP Và MySQL ............................................................................................................ 89

7. Từng Bước Xây Dựng Ứng Dụng Shopping Cart .............................................................................. 91

7.1. Chuẩn Bị ..................................................................................................................................... 91

7.2. Xây Dựng Trang BackEnd (Admin) ........................................................................................... 91

Trang Login Của Admin ..................................................................................................................... 91

Trang Quản Lý Sản Phẩm ................................................................................................................... 92

Trang Quản Lý Đơn Hàng .................................................................................................................. 92

Xây Dựng Trang FrontEnd (Trang Sản Phẩm) ................................................................................... 92

7.3. Xây Dựng Giỏ Hàng ................................................................................................................... 92

8. Giới Thiệu Về YII Framework ........................................................................................................... 92

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

8.2. Mô Hình MVC ............................................................................................................................ 94

8.3. Các component, extension .......................................................................................................... 95


5

1. Giới thi ệu môn học

Môn học xây dựng ứng dụng web bằng ngôn ngữ PHP và MySQL.

Qua khóa học, chúng ta sẽ hiểu được khái niệm web tĩnh, web động, quá trình xây dựng một

trang web. Cũng như hiểu được vai trò của từng người như Design, Html, Dev, QC. Từ đây,

ta có thể xây dựng cho mình một trang web đơn giản. Việc này giúp ta có tiền đề dễ dàng học

thêm những framework như YII, Zend, Codeigniter, Laravel,...

Trong khóa học chúng ta sẽ học qua các phần cơ bản như:

� HTML

� CSS

� Javascript

� Mysql

� PHP

Và một số phần nâng cao như

� Jquery

� Bootstrap

� MVC Framework

Ngoài ra còn làm quen một số tool dùng để phát triển ứng dụng web như: Netbean, Sublime

Text, Apache, Navicat, ...

Yêu cầu học viên:

� Cài đặt Web Server : xampp hay wamp. Xampp 1.8

http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.8.3/

� Cài đặt IDE: Sublime Text 3 hay Netbean. Sublime text 3

http://www.sublimetext.com/3


6

2. Ngôn Ngữ HTML

2.1. HTML Là Gì?

- HTML (tiếng Anh, viết tắt cho HyperText Markup Language, hay là "Ngôn ngữ

Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên

các trang web với các mẩu thông tin được trình bày trên World Wide Web. HTML

được định nghĩa như là một ứng dụng đơn giản và được sử dụng trong các tổ chức cần

đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn Internet do tổ

chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới nhất của

HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển đã thay thế nó

bằng XHTML. Hiện nay, HTML đang được phát triển tiếp với phiên bản HTML5 hứa

hẹn mang lại diện mạo mới cho Web.

- HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn ngữ sử

dụng các thẻ html để biểu diễn các trang web.

- Một tài liệu html tương đương với một trang web. Một tài liệu html diễn tả một trang

web.

- Các thẻ html còn được gọi là các phần tử html ( hay các element ).

2.2. Website Tĩnh

� Khái ni ệm:

- Website tĩnh (static web) là những website không có hệ thống quản lý nội dung, mà

nội dung được gán cứng. Hiện nay web tĩnh hầu như ít tồn tại hoặc chỉ tồn tại với

những công ty chuyên về thiết kế website.

- Về kiến thức cơ bản thì web tĩnh thường được xây dựng từ CSS, HTML,

JAVASCRIPT (DHTML), hiện nay có thêm công nghệ HTML5 & CSS3.

- Website tĩnh thường được dùng để thiết kế các trang web có nội dung ít cần thay đổi

và cập nhật.

- Website tĩnh là website chỉ bao gồm các trang web tĩnh và không có cơ sở dữ liệu đi

kèm.

- Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làm quen

với môi trường Internet.


7

� Ưu điểm:

- Thiết kế đồ hoạ đẹp: Trang Web tĩnh thường được trình bày ấn tượng và cuốn hút hơn

trang web động về phần mỹ thuật đồ hoạ vì chúng ta có thể hoàn toàn tự do trình bày

các ý tưởng về đồ hoạ và mỹ thuật trên toàn diện tích từng trang web tĩnh.

- Tốc độ truy cập nhanh: Tốc độ truy cập của người dùng vào các trang web tĩnh nhanh

hơn các trang web động vì không mất thời gian trong việc truy vấn cơ sở dữ liệu như

các trang web động.

- Thân thiện hơn với các máy tìm kiếm (search engine) : Bởi vì địa chỉ URL của các

.html, .htm,… trong trang web tĩnh không chứa dấu chấm hỏi (?) như trong web

động.

- Chi phí đầu tư thấp: Chi phí xây dựng website tĩnh thấp hơn nhiều so với website

động vì không phải xây dựng các cơ sở dữ liệu, lập trình phần mềm cho website và

chi phí cho việc thuê chỗ cho cơ sở dữ liệu, chi phí yêu cầu hệ điều hành tương thích

(nếu có).

� Nhược điểm:

- Khó khăn trong việc thay đổi và cập nhật thông tin: Muốn thay đổi và cập nhật nội

dung thông tin của trang website tĩnh Bạn cần phải biết về ngôn ngữ html, sử dụng

được các chương trình thiết kế đồ hoạ và thiết kế web cũng như các chương trình cập

nhật file lên server.

- Thông tin không có tính linh hoạt, không thân thiện với người dùng: Do nội dung trên

trang web tĩnh được thiết kế cố định nên khi nhu cầu về thông tin của người truy cập

tăng cao thì thông tin trên website tĩnh sẽ không đáp ứng được.

- Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp một website tĩnh hầu

như là phải làm mới lại website.

2.3. Ai Làm Web T ĩnh

- Những công ty chuyên thiết kế giao diện web sẽ làm web tĩnh theo yêu cầu của khách

hàng. Sau đó web tĩnh sẽ được bàn giao cho bên bộ phận phát triển để tiếp tục xây

dựng một website hoàn chỉnh.


8

- Yêu cầu để làm web tĩnh chỉ cần nắm vững HTML, CSS và Javascript. Ngoài ra đòi

hỏi một chút thẩm mỹ và chịu đựng để vừa lòng khách.

- Những người làm web tĩnh thường được gọi là HTML. Khác với những người

Designer, Designer là sẽ vẽ phát thảo trao web bằng Photoshop theo yêu cầu của

khách hàng.

2.4. Cấu trúc một website

Cấu trúc một website sẽ có thẻ HTML bao ngoài cùng. Kế đến là hai thẻ con <head> và

<body>. Thẻ <head> thường chứa thông tin về CSS hay Javascript của trang web, còn thẻ

<body> chứa nội dung trang web.

Việc tạo cấu trúc một trang web cũng rất quan trong. Yêu cầu phải hài hòa cân đối và đặc

biệt có thể liên quan đến SEO (Google Search Engine).

Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng

có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2

cột để layout.

- Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết,

các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...


9

- Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những

trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết

con (sub navigation).

- Phần thân của trang: page body, phần này chứa phần nội dung chính (content)

và phần nội dung phụ (sidebar).

- Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho

người dùng xem.

- Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang

(local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để

chứa các liên kết quảng cáo,...

- Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công

ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa

các liên kết toàn trang, các banner liên kết,...


10

2.5. Thẻ (tag) và thuộc tính của thẻ

� Thẻ (Tag):

- Khi trình duyệt Web đọc một file HTML, nó sẽ tìm trong file đó các tag hay

những đoạn mã đặc biệt để biết cách hiển thị file HTML đó. Ví dụ: Khi trong file

HTML có đoạn <h3> Cấu trúc của file HTML </h3>

thì sẽ hiển thị đoạn "Cấu trúc của file HTML" lên trên màn hình với kích thước

của heading h3 (sẽ nói kỹ ở phần sau).


11

- Các tag HTML báo cho trình duyệt biết cách khi nào thì in đậm một dòng văn

bản, in nghiêng, biến dòng văn bản thành một siêu liên kết tới các trang Web

khác, hiển thị ảnh...

- Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau. Có 2 loại thẻ: thẻ đóng

và thẻ mở. Cách viết thẻ:

Thẻ mở: <tên_thẻ> Ví dụ: <u>, <p>, <img>…

Thẻ đóng tương ứng: </tên_thẻ> Ví dụ: </u>, </p>

- Chú ý: luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng. Ví dụ: <img>

không có thẻ đóng .

� Thuộc tính của thẻ:

- Một thẻ có thể có các thuộc tính nhằm bổ sung tác dụng cho thẻ

- Mỗi thuộc tính có tên thuộc tính (attribute)

- Viết thẻ có thuộc tính: <tên_thẻ attribute1=“value1” attribute2=“value2”…

></tên_thẻ>

Ví dụ: <font size="5" color="red">đây là thẻ font</font>

Chú ý:

- Có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra lỗi cú pháp

- Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ giống nhau ở các

thẻ, thuộc tính cơ bản.

2.6. Các thẻ thường gặp

2.6.1. Thẻ Heading H1->H6

HTML có 6 mức chuẩn cho Tiêu đề (heading). Xác lập bằng các 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>


12

2.6.2. Thẻ Chú Thích Trong HTML

- Có 3 loại chú thích (comment): comment inline, comment line và comment multi line.

Dùng cặp thẻ  để chú thích một dòng này.

Ví dụ:

Hình trên thể hiện 3 loại comment.

- Mục đích của comment thường để làm rõ ràng hơn code của mình.

- Nội dung bị comment sẽ không hiện ra website.


13

2.6.3. Thẻ Paragraph

- Tag mở và tag đóng <p>……</p>

- Paragraphs có thể chứa text và các element khác: <b>, <i>, <span>,…

- Thẻ p là block element, không có chứa block element khác và cả paragraphs khác.

- Độ dài của text hiển thị phụ thuộc vào browser.

Browsers sẽ tự động thêm 2 empty line trước và sau paragraph.

Định dạng 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>

Thuộc tính:

ALIGN=left/center/right:

Ví dụ:

<P ALIGN=LEFT> ... </P> Có nghĩa: Tất cả text trong paragraph này sẽ được canh

về bên trái lề trang. Đây cũng là mặc định.

<P ALIGN=CENTER> ... </P> Canh giữa

<P ALIGN=RIGHT> ... </P> Canh phải


14

2.6.4. Thẻ Phân Đoạn Br và Hr

� Thẻ br dùng để ngắt một đoạn văn và xuống hàng mới.

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 gạch ngang để phân cách các đoạn trong trang web.

Thuộc tính:

<hr size=number>: chỉ định kích thước.

<hr width=number/percent>: chỉ định độ rộng

<hr align=left/right/center>: so lề

<hr noshade>: không bóng

<hr color>=name/#rrggbb: chỉ định màu giống bgcolor

Ví dụ:

<hr>

<hr size="5">

<hr width="50%">

<hr width="50%" align="right">

<hr width="50%" align="center" noshade>


15

2.6.5. Thẻ Trình Bày Văn Bản

� Thẻ font

- Thành phần chính là <font size=value>.

- Giá trị values từ 1-7. Mặc nhiên font size là 3.

- Giá trị thay đổi tương đối là '+' hay '-' so với giá trị chuẩn.

Ví dụ:

<font size=4>changes the font size to 4</font>

<font size=+2>changes the font size to basefont size ... +2</font>

Thuộc tính:

color = #rrggbb hay color = color: xác lập màu giống như bgcolor

Ví dụ:

<font color="#ff0000">this text is red.</font>

hay

<font color="red">this text is also red.</font>


16

face=name [,name] [,name]: chỉ định font chữ khi hiển 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 văn bản

Thẻ i: in nghiêng văn bản

Thẻ sup:

Thẻ sub:

Thẻ small: văn bản chữ nhỏ.

Thẻ big: văn bản chữ to

Thẻ strong:

� Các thẻ khác

- Pre

- Tt

- Cite

- dfn

- code


17

- kbd

- var

- q

- blockquote

- address

2.6.6. HTML List

� UL tag

Bắt đầu là <ul> và kết thúc </ul>

Có nhiều item, mỗi item <li>….</li>

Attribute type=“disc” , “circle”, “ square”

Default type=“disc”


18

� OL tag

- Bắt đầu là <ol> và kết thúc </ol>

- Có nhiều item, mỗi 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, ...

- Mặc định, bắt đầu là 1 cho type=“1”, nếu muốn bắt đầu là một số khác, ta dùng

attribute start=“4” trong <ol>.

Ex.: <ol start="4">

� DL, DT, DD tag

- Definition List là một bộ gồm 3 thẻ:

- <dl></dl> viết tắt của chữ "definition list" là cặp thẻ bắt đầu và kết thúc cho một

definition list.

- <dt></dt> viết tắt của chữ "defines an item" có nghĩa là xác định (hay định nghĩa)

một mục trong một definition list.


19

- <dd></dd> viết tắt của chữ "defines describe an item" có nghĩa là xác định (hay định

nghĩa) một mô tả của một mục.

2.6.7. Thẻ IMG

- Image format: GIF, JPEG, PNG, BMP, TIFF, PCX

- Thẻ mở và đóng: <img>…</img>

- Thuộc tính:

o src: đường dẫn – tương đối hoặc tuyệt đối .

o alt: text hiển thị nếu không có ảnh.

o align: Bottom, Middle, Top, Left, Right – không còn sử dụng trong

HTML5.

o width: image length in pixels.

o height: image height in pixels.

o hspace, vspace – không còn sử dụng trong HTML5

2.6.8. HTML Link


20

Cú pháp: <a href=“url” title=“Link title” target="_blank" >Link text</a>

• href: Chỉ đến trang cần liên kết url

• title: Title của tag

• Link text: text hiển thị

- Href: có 2 loại url tuyệt đối và tương đối. Ví dụ href="www.google.com" và

href="index.php".

- Target: Cách thức open link.

- Name: cho phép nhảy đến một vị trí đã được chỉ định. Ví dụ: <a name="top"

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

2.6.9. HTML table

Các thẻ dùng trong table: <table>, <thead> , <tbody>, <td>, <tr>

Tạo bảng trong trang Web.

Thuộc tính:

- BORDER="value": Điều khiển việc hiển thị và kích thước đường viền. Nếu giá trị =0

là không có viền.

- CELLSPACING="value": Chỉ định khoảng cách giửa các ô. Giá trị mặc định là 2.

- CELLPADDING="value": Chỉ định khoảng trắng giửa đường viền và ô. Giá trị mặc

định là 1

- WIDTH="value or percent": Chỉ định độ rộng bảng tính theo pixels, hay % của cửa sổ

hiển thị.

- HEIGHT="value or percent": Chỉ định độ cao bảng.

- ALIGN="left/right": Canh lề trái, phải.

- VALIGN="top/bottom": Canh lề trên, dưới.

- BGCOLOR="#rrggbb|colour name": Chỉ định màu nền cho bảng.

- BORDERCOLOR="#rrggbb|colour name": Chỉ định màu cho đường viền của bảng.


21

- BORDERCOLORLIGHT="#rrggbb|colour name": Chỉ định màu cho phần được

chiếu sáng của đường viền.

- BORDERCOLORDARK="#rrggbb|colour name": Chỉ định màu cho phần bị tối của

đường viền.

- BACKGROUND="URL of image": Chỉ định file hình ảnh dùng làm nền cho bảng.

- FRAME: Đòi hỏi thuộc tính BORDER phải được hiệu lực khi sử dụng thuộc tính này.

Có các giá trị sau:

o void Gở bỏ tất cả viền ngoài.

o Above Chỉ hiển thị đướng viền phiá trên bảng.

o Below Chỉ hiển thị đướng viền phiá dưới bảng.

o Hsides Hiển thị các đường viền ngang trong bảng, kể cả đướng trên và dưới

bảng.

o Lhs Chỉ hiển thị đường viền bên trái.

o Rhs Chỉ hiển thị đường viền bên phải.

o Vsides Hiển thị các đường viền đứng trong bảng, kể cả đướng trái và phải

bảng.

o Box Chỉ hiển thị đường viền bao chung quanh bảng.


22


23

2.7. Một số bài tập về HTML

3. Sơ Lược Về CSS

3.1. CSS Là Gì?

- CSS = Casscading Style Sheets

- Dùng để mô tả cách hiển thị các thành phần trên trang WEB

- Sử dụng tương tự như dạng TEMPLATE

- Có thể sử dụng lại cho các trang web khác

- Có thể thay đổi thuộc tính từng trang hoặc cả site nhanh chóng (cascading)

3.2. Đặc Tính Cơ Bản Của CSS

- CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của

các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính

của thẻ vào trong một file riêng có phần mở rộng là ".css" CSS nó phá vỡ giới hạn

trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và

layout trên nhiều trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc

tính của một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác.

- Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn

phía trong thẻ <head>...</head>, hoặc ghi nó ra file riêng với phần mở rộng ".css",

ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt.Tuy nhiên tùy từng

cách đặt khác nhau mà độ ưu tiên của nó cũng khác nhau. Mức độ ưu tiên của CSS sẽ

theo thứ tự sau:

o Style đặt trong từng thẻ HTML riêng biệt

o Style đặt trong phần <head>

o Style đặt trong file mở rộng .css

o Style mặc định của trình duyệt

o Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.

- CSS có tính kế thừa: giả sử rằng bạn có một thẻ <div id="vidu"> đã được khai báo ở

đầu file css với các thuộc tính như sau:


24

#vidu {

width: 200px;

height: 300px;

}

o Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ <div

id="vidu"> với các thuộc tính.

#vidu {

width: 400px;

background-color: #CC0000;

}

o Sau đoạn khai báo này thì thẻ <div id="vidu"> sẽ có thuộc tính:

#vidu {

width: 400px; /* Đè lên khai báo cũ */

height: 300px;

background-color: #CC0000;

}

3.3. Selector, Class, ID

Khái niệm: Cho đến bây giờ bạn đã thấy được CSS có thể thay đổi các đối tượng html như

thế nào. Ví dụ khi bạn viết code CSS cho thẻ h1 hoặc p, thì bạn sẽ thấy nó được áp dụng cho

tất cả các thẻ trong html. Nhưng không phải lúc nào bạn cũng muốn tất cả các thẻ p trong

phần code của bạn đều bị ảnh hưởng. Có thể bạn muốn đoạn này chữ màu xanh, đoạn kia chữ

màu đỏ và đậm. Chính vì thế Class và ID được thêm vào thẻ html để bạn có thể hướng tới

một đối tượng cụ thể hơn trong code HTML của bạn. Do đó cho bạn thêm một lựa chọn nữa

để thiết kế trang web.

Các loại selector:

- Universal Selector: là selector yếu nhất, sẽ apply cho tất cả các element trong html.

Ví dụ: *{ margin: 0; padding:0; }


25

- Selector ID: trong một trang html, selector id là duy nhất. Kí hiệu: #ten_id. Ví dụ:

#header{ color: red; } thì sẽ apply cho element nào có id là header.

- Selector Class: khi bạn muốn định dạng một nhóm cái element bằng một chuẩn css

thì bạn nên dùng class. Ví dụ: các thẻ h2 có class tiêu đề thì sẽ có chung một format

css.

h2.tieude { font-size: 20px, color: red, font-weight: 400; } thì sẽ apply cho tất cả các

thẻ h2 có class tieude

<h2 class="tieude">this is tag h2</h2>

- Child Selector: loại selector này sẽ apply cho con của element được chọn.

Ví dụ:


26

- Group Selector: một group các selector sẽ được apply theo một css đã được định

nghĩa.

Ví dụ: h1, b, .tieude{ color:red; }

- Attribute Selector

Cú pháp: [ten_attribute]{ css_attr: css_value; }

3.4. Cú Pháp Của CSS

Sau khi hiểu là nắm bắt được một số đặc tính của CSS chúng ta tiếp tục đi tìm hiểu về cú

pháp và cách khai báo của các thẻ CSS.

Cú pháp của CSS được chia làm 3 phần. phần thẻ chọn (selector), phần thuộc tính (property),

phần nhãn (value).


27

selector {property: value}

Nếu nhãn của bạn có nhiều từ bạn nên đặt nhãn của bạn vào trong dấu nháy kép

p {font-family: "sans serif"}

Trong trường hợp thẻ chọn của bạn nhiều thuộc tính thì các thuộc tính sẽ được ngăn cách bởi

dấu (;).

p {text-align:center; color:red}

Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng

biệt.

p {

text-align: center;

color: black;

font-family: arial

}

3.5. Chèn CSS Vào Website

Bạn đã có một file CSS của bạn, bây giờ công việc tiếp theo là làm thế nào để chèn những

đoạn CSS của bạn vào trong trang, Và xem chúng hoạt động như thế nào. Trong phần này

chúng ta sẽ đi tìm hiểu chi tiết về cách chèn một đoạn style trong trang HTML hay liên

kết tới một file CSS viết sẵn.

Khi trình duyệt đọc đến CSS, thì toàn bộ Website sẽ được định dạng theo các thuộc tính

đã được khai báo trong phần CSS. Có ba cách cho phép chúng ta chèn định dạng CSS vào

trong Website.

� CSS được khai báo trong file riêng.


28

Toàn bộ mã CSS được chứa trong file riêng có phần mở rộng .css là một ý tưởng được

dùng khi một file CSS sẽ được áp dụng cho nhiều trang khác nhau. Bạn có thể thay đổi

cách hiển thị của toàn bộ site mà chỉ cần thay đổi một file CSS. Trong cách này thì file

CSS sẽ được chèn vào văn bản HTML thông qua thẻ <link>...</link>. Ta có cú pháp như

sau:

<html>

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" medial="all" />

</head>

<body>

</body>

</html>

Trình duyệt sẽ đọc toàn bộ các định dạng được quy định trong file mystyle.css và định

dạng cho văn bản HTML.

File CSS có thể được soạn thảo bằng một số trình duyệt khác nhau. Trong file không

được chứa mã HTML, khi ghi lại chúng ta bắt buộc phải ghi lại với phần mở rộng là .css.

Giả sử chúng trong file mystyle.css ở trên chứa đoạn mã sau:

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

� Chèn CSS trong tài liệu HTML

Chèn thẳng CSS trong tài liệu được áp dụng trong trường hợp những định dạng CSS này

chỉ giành riêng cho tài liệu HTML đó. Khi bạn chèn trực tiếp thì đoạn mã của bạn phải

đặt trong thẻ <style> và đặt trong phần <head>.

<head>

<style type="text/css">

hr {color: sienna}


29

p {margin-left: 20px}

body { background-image: url("images/back40.gif"); font-size: ‘12pt’; }

</style>

</head>

� Chèn trực tiếp vào thẻ của HTML(inline style)

Inline style được sử dụng nhiều trong trường hợp một thẻ HTML nào đó cần có style

riêng cho nó.

Inline style được áp dụng cho chính thẻ HTML đó, cách này sẽ có độ ưu tiên lớn nhất so

với hai cách trên. Dưới đây là một ví dụ mà chúng ta dùng Inline style

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

3.6. Các CSS Thường Dùng

3.6.1. Định Nghĩa Cho Đoạn Văn Bản

- Màu văn bản: để đặt màu cho một đoạn văn bản ta dùng thuộc tính color:#mã màu.

Ví dụ: <p style=”color: red”>đoạn văn bản có màu đỏ</p>

- Màu nền cho văn bản:

Cú pháp:

Background-color: #mã màu //tên màu

Ví dụ: <p style="background-color: blue">đoạn văn bản màu nền màu xanh</p>

- Khoảng cách giữa các kí tự:

Khoảng cách giữa các ký tự trong một đoạn văn bản có thể được tăng hoặc giảm bởi

thuộc tính letter-spacing: khoảng cách;


30

h3 {

letter-spacing: 2em;

}

h1 {

letter-spacing: -3em;

}

- Khoảng cách giữa các dòng:

Thuộc tính line-height: khoảng cách; sẽ giúp bạn căn chỉnh khoảng cách giữa các

dòng trong một đoạn văn bản.

p {

line-height: 150%; // line-height: 15px;

}

- Dóng hàng:

Để gióng hàng cho một đoạn văn bản chúng ta sẽ dùng thuộc tính text-align: vị trí;

p {

text-align: left; /* left | center | right */

}

- Điều chỉnh nội dung văn bản:

Một đường gạch chân hoặc đường gạch ngang dòng văn bản sẽ làm cho đoạn văn bản

của bạn thêm sinh động. Để tô điểm thêm cho đoạn văn bản chúng ta sẽ dùng thuộc

tính text-decoration: thuộc tính;

h3 {

text-decoration: underline; /* Gạch chân */

}


31

h2 {

text-decoration: line-through; /* Gạch ngang */

}

h1 {

text-decoration: overline; /* kẻ trên */

}

Bạn có thể điều khiển toàn bộ đoạn văn bản là chữ hoa hay chữ thường bởi thuộc tính

text-transform: ki ểu chữ;

p.uppercase {

text-tranform: uppercase;

}

p.lowercase {

text-tranform: lowercase;

}

p.capitalize {

text-tranform: capitalize;

}

Khoảng cách giữa các từ có thể được tăng bởi thuộc tính word-spacing: khoảng

cách;

word-spacing: 30px;


32

3.6.2. Định Nghĩa Font

- Font-family: để đặt một loại font chữ nào đó cho đoạn văn bản thì chúng ta sẽ sử

dụng thuộc tính font-family:

p {

font-family: Arial, Tahoma, Verdana, sans-serif;

}

Thông thường bạn cần phải khai báo họ của font ở cuối (trong ví dụ trên thì sans-serif

là chỉ tới 1 họ font) để trong trường hợp máy của người duyệt Web không có các font

như mình đã đặt thì nó sẽ lấy font mặc định của họ font trên.

- Font-size: định nghĩa kích thước của chữ trong văn bản.

h1 {

font-size: 20px;

}

h3 {

font-size: 12px;

}

- Font-style:

Chữ đậm, chữ nghiêng,... được đặt với thuộc tính font-style:

p {

font-style: italic; /* normal | italic | oblique */

}

- Font-weight:

Khi chúng ta muốn thay đổi độ đậm nhạt của văn bản chúng ta sẽ dùng thuộc tính

font-weight:. Chúng ta có thể đặt giá 3 loại giá trị cho thuộc tính này 1. Normal (bình

thường), 2. Bold (đậm), 3. 300 (đặt dạng số)


33

h3 {

font-weight: bold;

}

3.6.3. Đường Viền Và Các Thuộc Tính

Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn

viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho

các thẻ HTML như <div>, <li>, <table>,...

Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là:

- border-color:

- border-width:

- border-style:

� Thuộc tính màu của đường viền

Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-

color:

div.color {

border-color: #CC0000;

}

� Đặt chiều rộng cho đường viền (border)

Nếu muốn đặt chiều rộng của đường viền chúng ta sẽ đặt giá trị cho thuộc tính

border-width:

div.borerwidth {

border-width: 2px;

}

STT Giá tr ị

1 thin


34

2 medium

3 thick

4 length

� Chọn kiểu của đường viền

Bạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúng ta có

thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác

nhau.

div.borderstyle {

border-style: solid;

}

STT border-style

1 none

2 hidden

3 dotted

4 dashed

5 solid

6 double

7 groove

8 ridge

9 inset

10 outset

Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng:

- border-top:

- border-right:

- border-bottom:

- border-left:


35

Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)

STT Phía Thuộc tính

1 top

border-top-color:

border-top-width:

border-top-style:

2 right

border-right-color:

border-right-width:

border-right-style:

3 bottom

border-bottom-color:

border-bottom-width:

border-bottom-style:

4 left

border-left-color:

border-left-width:

border-left-style:

Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc

tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ <div> với

độ rộng bằng 1, kiểu solid và màu là #CC0000

div.border {

border: 1px solid #CC0000;

}

3.6.4. Thuộc Tính Margin

Thuộc tính margin sẽ định nghĩa khoảng trắng bao quanh một phần tử HTML. Nó có

thể dùng giá trị âm để lồng nội dung vào với nhau. Tương ứng với 4 phía của một

phần tử chúng ta có 4 thuộc tính tương ứng. Mặt khác để viết cho gọn chúng ta cũng

có thể dùng cách viết giản lược để định nghĩa các giá trị cho thuộc tính margin.


36

Đối với các trình duyệt Netcape và IE thì giá trị mặc định của thuộc tính margin là

8px. Nhưng Opera thì không hỗ trợ như vậy. Để cho thống nhất chúng ta có thể đặt

margin mặc định cho toàn bộ các phần tử.

Các giá trị mà thuộc tính margin có thể nhận được đó là: auto, length, %. Chúng ta

đặt giá trị nào là tùy thích cộng với việc tương ứng tỉ lệ với các phần tử khác.

Tương ứng với 4 phía ta có 4 thuộc tính:

- margin-top:

- margin-right:

- margin-bottom:

- margin-left:

Để cho gọn chúng ta cũng có thể việt thuộc tính margin dưới dạng shorthand

div.margin {

margin: 10px 4px 5px 9px; /* top | right | bottom | left*/

}

3.6.5. Thuộc Tính Padding

CSS padding sẽ định nghĩa khoảng trống giữa mép của các phần tử tới các phần tử

con hoặc nội dung bên trong. Chúng ta không thể gán giá trị âm cho thuộc tính này.

Cũng giống như margin thuộc tính padding cũng tương ứng với 4 phía của phần tử.

Tương ứng với 4 phía của phần tử chúng ta có 4 thuộc tính padding tương ứng đó là:

- padding-top:

- padding-right:

- padding-bottom:

- padding-left:

Các giá trị có thể gán cho các thuộc tính này là : % hoặc length

Để viết cho gọn chúng ta cũng có thể viết thuộc tính padding dưới dạng shorthand.


37

div.padding {

padding: 5px 3px 2px 8px;

}

3.6.6. Thuộc Tính Overflow

Thuộc tính overflow xác định điều gì sẽ xảy ra nếu một thành phần box tràn nội dung.

Cú pháp:

tag {

overflow: giá trị;

}

Giá trị: visible, hidden, scroll, auto, inherit

Ví dụ: với overflow: hidden thì khi text tràn ra khỏi box thì text đó sẽ bị ẩn đi.

3.6.7. Thuộc Tính Opacity/Transparent

Thuộc tính opacity hiển thị cấp độ trong suốt cho thành phần.

tag {

opacity: giá trị;

}

Ví dụ: h1{opacity: 0,5; }

Hoặc

img { opacity: 0,7; }

img:hover{ opacity:1; }

3.6.8. Thuộc Tính Position

Thuộc tính position xác định loại của phương pháp định vị trí cho thành phần.

Thuộc tính position thường dùng kèm với các thuộc tính định vị

trí: left, right, bottom, top

tag {


38

position: giá trị;

}

Giá trị:

- static: Thành phần sẽ nằm theo thứ tự trong văn bản, đây là dạng mặc định.

- relative: Định vị trí tuyệt đối cho thành phần.

- absolute: Định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài

(thành phần định vị trí tương đối position: relative;) hoặc theo cửa sổ trình

duyệt.

- fixed: Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt.

- inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao

ngoài).

3.6.9. Thuộc Tính Display

Thuộc tính display xác định loại hiển thị của thành phần.

tag {

display: giá trị;

}

Giá trị:

- none: không hiển thị

- inline: Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng),

đây là dạng mặc định.

- block: Thành phần hiển thị như một khối, khi sử dụng giá trị block thành phần

sẽ đứng một hàng độc lập so với thành phần trước và sau nó.

- inline-block: Thành phần sẽ hiển thị như một khối, nhưng là một khối nội

tuyến.

- ...

3.6.10. Thuộc Tính Float, Clear

Thuộc tính float xác định có hay không một thành phần được float (trôi nổi).

tag {

float: giá trị;

}


39

Giá trị: left, right, none, inherit

Thuộc tính clear xác định 2 bên của phần tử (left, right), nơi mà phần tử float không

được cho phép (ngăn cản thành phần không được float trái, phải 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ử dụng để viết CSS cho một trạng thái nào đó của một

phần tử. Ví dụ viết CSS đổi màu các liên kết khi rê chuột vào, đổi thuộc tính một phần tử

khi nhấp vào,….Các pseudo class được khai báo tại vùng chọn, đặt đằng sau vùng chọn

và có dấu hai chấm (:) ngăn cách. Ví dụ: #link:hover (vùng chọn của #link khi rê chuột

vào).

Trong bài viết này, vì nó thuộc CSS căn bản nên mình chỉ nói qua một số pseudo class

đơn giản nhất mà cũng thường gặp nhất khi viết CSS cho website

Một số Pseudo Class thông dụng

- :hover – Chọn trạng thái khi rê chuột vào một phần tử.

- :visited – Được sử dụng cho liên kết, chọn liên kết khi đã được truy cập (dựa vào

History trên trình duyệt).

- :link – Được sử dụng cho liên kết, chọn liên kết khi chưa nhấp vào.

- :active – Chọn phần tử khi họ chọn/nhấp vào.


40

3.8. Bài Tập Về CSS

4. JavaScript

4.1. Khái Ni ệm

Javascript là một ngôn ngữ thông dịch, chương trình nguồn của nó được nhúng hoặc tích

hợp vào tập tin HTML. Khi trang web được tải trong trình duyệt hỗ trợ javascript, Trình

duyệt sẽ thông dịch và thực hiện các lệnh Javascipt.

JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất thể giới, nó là ngôn ngữ cho

HTML, web, server, PC, laptop, tablet, smart phone…

- JavaScript là một ngôn ngữ kịch bản. Ngôn ngữ kịch bản là một ngôn ngữ lập trình

nhỏ.

- JavaScript là mã lập trình có thể được chèn vào các trang HTML.

- JavaScript được chèn vào các trang web có thể được chạy bởi tất cả các trình duyệt

web hiện đại.

- JavaScript là một ngôn ngữ lập trình dễ học.

Đặc tính của Javascript:

- Đơn giản

- Động

- Hướng đối tượng

Một trong những đặc tính quan trọng của ngôn ngữ javascript là khả năng tạo và sử dụng các

đối tượng (Object). Các Object này cho phép người lập trình sử dụng để phát triển ứng dụng.

Trong javascript ,các Object được nhìn theo 2 khía cạnh:

- Các Object đã tồn tại: Date, Array

- Các Object do người lập trình xây dựng.

4.2. Cách Nhúng Javascript Vào HTML

Có 2 cách để nhúng Javascript vào trong tập tin HTML


41

� Viết chưong trình Javascript trực tiếp trong file HTML

<script type=”text/javascript”> //Các lệnh Javascript</script>

Ví dụ:

<script type="text/javascript">

function getTime()

{

document.write( new Date() );

}

</script>

� Sử dụng tập tin javascript bên ngoài :

Cũng giống như CSS ngoại tuyến, chúng ta cũng có thể nhúng Javascript vào tập tin

HTML bằng cách liên kết đến một tập tin bên ngoài, đây cũng là phương thức được

sử dụng nhiều nhất.

Với phương pháp này, các lệnh Javascrip sẽ được viết trong một file riêng biệt có

phần mở rộng là .js(Ví dụ ta có tập tin my.js)

Để nhúng tập tin my.js vào tập tin HTML ta sử dụng đoạn mã sau:

<script type=”javascript” src=”my.js” type="text/javascript"></script>

4.3. Thẻ Noscript

Cặp thẻ này dùng để định rõ nội dung thông báo cho người sử dụng

biết trình duyệt không hỗ trợ JavaScript. Khi đó trình duyệt sẽ không hiểu thẻ

<NOSCRIPT> và nó bị lờ đi, còn đoạn mã nằm trong cặp thẻ này sẽ được Navigator

hiển thị. Ngược lại, nếu trình duyệt có hỗ trợ JavaScript thì đoạn mã trong cặp thẻ

<NOSCRIPT> sẽ được bỏ qua. Tuy nhiên, điều này cũng có thể xảy ra nếu người

sử dụng không sử dụng JavaScript trong trình duyệt của mình bằng cách tắt nó đi

trong hộp Preferences/Advanced.

Ví dụ:

<noscript>Trang web này có hỗ trợ javascript. Bạn vui lòng enable javascript</noscript>


42

4.4. Hộp Thoại Trong Javascript

Lệnh alert('message'): hiển thị hộp thoại có nội dung là message lên cho người dùng.

Lệnh confirm('Are you sure?'): hiển thị hộp thoại có tùy chọn Yes/No cho người dùng

chọn.

Lệnh window.prompt('hello what is your name?',''): nhắc người dùng nhập vào hộp thoại.


43

4.5. Biến Trong Javascript

� Biến toàn cục: xử dụng toàn cục, có thể gọi ở bất cứ đâu

� Biến cục bộ: xử dụng trong nội bộ function.

� Kiểu dữ liệu: kiểu số nguyên, kiểu dấu phẩy động, kiểu logic và kiểu chuỗi.

Các toán tử:

Kiểu gán thông thường Kiểu rút gọn Miêu tả

X=x+y X+=y Cộng 2 số trong

javascript

X=x-y x-=y Trừ 2 số

X=x*y X*=y Nhân 2 số

X=x/y x/=y Chia lấy phần nguyên

X=x%y X%=y Chia lấy phần dư

Các phép so sánh:

Phép so sanh Miêu tả

== So sánh bằng

!= So sánh không bằng

> So sánh lớn hơn

>= So sánh lớn hơn hoặc bằng

< So sánh bé hơn

<= So sánh bé hơn hoặc bằng


44

&& Toán tử và

|| Toán tử hoặc

� Hằng trong javascript: Hằng là những giá trị cố định mà ta có thể dùng trong script.

Giá trị của hằng không bị thay đổi trong quá trình thực hiện script. Chúng ta có thể

tạo ra một hằng số chỉ đọc cùng với tên của nó bằng cách sử dụng từ khóa const. Quy

ước đặt tên cho hằng giống như cho tên biến, tức là nó phải được bắt đầu với một chữ

cái hoặc dấu gạch dưới và các ký tự còn lại có thể bao gồm các ký tự thuộc bảng chữ

cái, các số hay dấu gạch dưới.

Ví dụ: const prefix = ‘212’;

Một hằng số không thể thay đổi giá trị qua phép gán hoặc được khai báo lại trong khi

script đang thi hành. Các quy tắc về phạm vi cho các hằng số giống như cho các biến,

ngoại trừ từ khóa const luôn luôn được yêu cầu, ngay cả các hằng số toàn cục. Nếu từ

khóa này bị bỏ quên thì đó được xem như là một biến. Lưu ý là chúng ta không thể

khai báo một hằng số có tên trùng với tên hàm hoặc biến trong cùng một phạm vi.

4.6. Toán Tử Trong Javascript

Toán tử chuỗi: Các toán tử so sánh có thể được sử dụng cho các giá trị chuỗi, toán tử nối

(+) nối hai giá trị chuỗi với nhau, và trả về một chuỗi mới là sự hợp nhất của hai chuỗi

toán hạng.

Ví dụ: “my” + “string” trả về chuỗi “mystring”

Toán tử gán viết gọn += có thể cũng được sử dụng để nối các chuỗi. Ví dụ, nếu biến

mystring có giá trị là “alpha”, thì biểu thức mystring += “bet” có giá trị là “alphabet” và

gán giá trị này cho biến mystring.

Toán tử điều kiện: Toán tử điều kiện là một toán tử của JavaScript cần ba toán hạng .

Toán tử có thể có một trong hai giá trị tùy thuộc vào điều kiện.

Cú pháp: condition ? val1 : val2


45

Nếu điều kiện là true, thì toán tử có giá trị là val1. Nếu không thì nó có giá trị là

val2.

Ví dụ: status = (age >= 18) ? “adult” : “minor”

Câu lệnh này gán giá trị “adult” cho biến status nếu age >= 18. Ngược lại, nó gán cho

biến này giá trị “minor”.

Toán tử dấu phẩy: Toán tử dấu phẩy (,) định giá trị cho cả hai toán hạng của nó và trả về

giá trị của toán hạng thứ hai. Toán tử này được sử dụng chủ yếu trong vòng lặp for, để

cho phép nhiều biến được gán giá trị ban đầu hoặc nhiều biến được cập nhật lại giá trị

thông qua mỗi bước lặp.

Ví dụ: Xét bài toán tính tổng các số từ 1 đến 10 dùng vòng lặp for. Ta sẽ khởi tạo giá trị

ban đầu cho hai biến, biến dem=1 và biến tong=0, lúc này ta sẽ sử dụng toán tử dấu phẩy.

for (var dem=1,tong=0;dem<=10;dem++)

tong += dem;

Toán tử new: Chúng ta có thể sử dụng toán tử new để tạo ra một thể hiện (instance) của

kiểu đối tượng được định nghĩa bởi người sử dụng hoặc một kiểu đối tượng được định

nghĩa trước như Array, Boolean, Date, Function, Image, Number, Object, option,RegExp,

hoặc String. Trên server ta cũng có thể sử dụng nó với DbPool, Lock, File, hoặc

SendMail.

Cú pháp của toán tử này như sau:

objectName= new objectType (param1 [,param2]… [,paramN])

Toán tử typeof: Toán tử typeof trả về chuỗi cho biết tên kiểu dữ liệu của toán hạng. Toán

hạng có

thể là một chuỗi, một biến, từ khóa, hoặc đối tượng.

Cú pháp: typeof (operand)

Trong đó dấu ngoặc đơn không bắt buộc.

Ví dụ: Giả sử ta có các biến:

var x = 5;


46

var shape = “round”;

Toán tử typeof trả về các kết quả sau cho các biến này:

typeof x is number

typeof shape is string.

Với từ khóa true và null, toán tử typeof trả về các kết quả sau:

typeof true is boolean

typeof null is object

Toán tử this: Câu lệnh ‘this’ chỉ ra đối tượng hiện hành và có thể có các thuộc tính chuẩn

chẳng hạn như tên, độ dài và giá trị được áp dụng phù hợp. Câu lệnh ‘this’ chỉ được dùng

trong phạm vi của một hàm hay các tham chiếu khi gọi hàm.

Cú pháp: this [.property]

Nếu không có đối số thì nó sẽ thông qua đối tượng hiện hành. Tuy nhiên, chúng ta nên

gán vào một thuộc tính hợp lệ để đưa ra kết quả.

4.7. Biểu Thức Regular

Biểu thức regular là các mẫu được sử dụng để so khớp các liên kết ký tự trong các chuỗi. Với

biểu thức regular, ta có thể tìm kiếm theo mẫu trong các chuỗi ký tự do người dùng nhập vào.

Ví dụ, ta tạo một mẫu tìm kiếm gồm từ “cat” và sẽ tìm kiếm tất cả các xuất hiện của từ này

trong một xâu nào đó. Trong JavaScript, các biểu thức regular cũng là các đối tượng. Các

biểu thức regular được sử dụng với các phương thức test và exec của đối tượng RegExp và

các phương thức match, replace, search, và spilit của đối tượng String.


47

Để dùng một phương thức, chúng ta phải xác định đối tượng được sử dụng.

Cú pháp là: objectname.method = funtion_name

Sau đó chúng ta có gọi phương thức trong ngữ cảnh của đối tượng.

Cú pháp là: Objectname.methodname(parameters)

Chúng ta có thể dùng các cờ với biểu thức regular. Hai cờ “g” và “i” được chọn tùy ý, có

thể dùng riêng hoặc dùng cả hai cờ. Cờ “g” được dùng để chỉ dẫn tìm kiếm toàn cục. Cờ

“i” dùng để chỉ dẫn tìm kiếm có phân biệt chữ hoa và chữ thường.

Chẳng hạn:

re=/Time/

Re.test(‘Time and Tide wait for none’);

4.8. Các Lệnh Điều Ki ện, Lặp

If..else..: Câu lệnh này dùng để kiểm tra điều kiện, nó thực thi việc tính toán trên một

biểu thức, nó kiểm tra điều kiện là đúng hay sai để thực hiện khối lệnh tương ứng. Một

câu lệnh if đơn giản có cú pháp lệnh như sau:


48

if (điều kiện )

{

// các câu lệnh ứng với điều kiện đúng

}

Đây là cú pháp lệnh đơn giản, nó sẽ kiểm tra nếu điều kiện sau theo sau if là đúng thì khối

lệnh sẽ được thực thi.

Switch: Khi có nhiều tùy chọn if…else thì tốt hơn ta nên sử dụng lệnh switch. Lệnh này

còn được xem là lệnh case. Câu lệnh switch cho phép một chương trình định giá trị

một biểu thức và thử so khớp giá trị của biểu thức với từng trường hợp. Nếu so khớp

thỏa mãn thì chương trình thi hành câu lệnh tương ứng. Nếu không tìm thấy một giá trị

nào trong danh sách các case của nó, khối lệnh trong phần default sẽ được thực hiện.

Lệnh break dùng để thoát ra khỏi câu lệnh switch.

Câu lệnh switch có dạng như sau:

switch (expression)

{

case label: statements; break;

case label: statements; break; …

defaul: statements;

}

Đầu tiên chương trình tìm một nhãn trùng khớp với giá trị biểu thức và thi hành câu lệnh

tương ứng nếu so khớp thành công. Nếu nhãn so khớp không được tìm thấy, chương trình

sẽ tìm đến khối lệnh trong lựa chọn default, và nếu tìm thấy sẽ thực hiện câu lệnh tương

ứng. Nếu không tìm thấy câu lệnh default, thì chương trình tiếp tục thi hành câu lệnh tiếp

theo sau câu lệnh switch.


49

Câu lệnh tùy chọn break kết hợp với mỗi trường hợp đảm bảo rằng chương trình sẽ thoát

khỏi lệnh switch khi câu lệnh so khớp được thi hành và tiếp tục thực thi câu lệnh tiếp theo

câu lệnh switch. Nếu không sử dụng câu lệnh break thì chương trình vẫn tiếp tục thi hành

lệnh kế tiếp trong câu lệnh switch.

For: Vòng lặp for sẽ thực hiện lặp đi lặp lại khối lệnh cho đến khi điều kiện là false.

Số lần thực hiện của vòng lặp thường được điều khiển thông qua một biến đếm.

Câu lệnh for bao gồm ba thành phần, được phân cách nhau bởi dấu chấm phẩy

(;). Cả ba thành phần này đều không bắt buộc phải có, và chúng điều khiển việc thực

hiện của vòng lặp for. Nếu có nhiều câu lệnh thực hiện trong thân của vòng lặp,

chương trình phải sử dụng cặp dấu ngoặc móc ({}) để chứa các câu lệnh đó

Cú pháp lệnh như sau: for([initialExpression];[condition];[incrementExpresion]){

statements; }

Trong đó:

- initialExpression: Lệnh khởi tạo, được thực hiện duy nhất một lần và thường

dùng để khởi tạo biến đếm.

- condition: điều kiện của vòng lặp.

- incrementExpression: Lệnh tăng, thay đổi giá trị biến đếm của vòng lặp.

- statements: Các lệnh bên trong vòng lặp.

Do..while: Câu lệnh do…while lặp cho tới khi một điều kiện cụ thể có giá trị là false. Cú

pháp lệnh như sau:

do { statement } while (condition)

Trước hết, câu lệnh này thi hành statement một lần. Tại lúc kết thúc của mỗi lần thi hành

vòng lặp, condition được kiểm tra: Nếu condition là true, thì câu lệnh tiếp tục được thi

hành một lần nữa, ngược lại, nếu điều kiện là false, thì thi hành ngừng và điều khiển được

chuyển tới câu lệnh kế tiếp câu lệnh do…while.

While: Lệnh while là một cấu trúc lặp khác trong JavaScript. Nó được dùng để thực hiện

một khối các câu lệnh chừng nào điều kiện là true. Nếu có nhiều câu lệnh thực hiện

trong thân của vòng lặp, chương trình phải sử dụng cặp dấu ngoặc móc ({}) để chứa


50

các câu lệnh đó.

Khác biệt chính giữa vòng lặp while và do…while là các lệnh trong thân vòng

lặp while có thể không được thực hiện một lần nào vì nó kiểm tra điều kiện trước, và

có thể ngay từ ban đầu điều kiện đã là false. Tuy nhiên vòng lặp do…while bao giờ

cũng được thực hiện ít nhất một lần.

Cú pháp lệnh như sau:

while (condition) { statement; }

Nếu điều kiện là false, thì các câu lệnh trong vòng lặp dừng thi hành và điều khiển được

chuyển tới câu lệnh sau vòng lặp. Việc kiểm tra điều kiện xảy ra trước khi các câu lệnh

trong vòng lặp được thi hành. Nếu điều kiện trả về là true, thì các câu lệnh trong vòng lặp

được thi hành và điều kiện được kiểm tra lại một lần nữa. Nếu điều kiện trả về là false, thì

dừng thi hành và điều khiển được chuyển tới câu lệnh kế tiếp câu lệnh while.

4.9. Hàm

Hàm là một trong những khối cơ bản được xây dựng trong JavaScript. Một hàm

trong JavaScript khá giống với một thủ tục hay chương trình con trong ngôn ngữ lập

trình. Một hàm được định nghĩa là một tập các câu lệnh, thực hiện một nhiệm vụ cụ

thể nào đó.

Mặc dù không nhất thiết phải có, song các hàm có thể có một hay nhiều tham số truyền vào

và một giá trị trả về. Bởi vì JavaScript là ngôn ngữ có tính định kiểu thấp nên không cần định

nghĩa kiểu tham số và giá trị trả về của hàm. Hàm có thể là thuộc tính của một đối tượng,

trong trường hợp này nó được xem như là phương thức của đối tượng đó. JavaScript hỗ trợ

nhiều hàm định nghĩa sẵn mà chúng ta sẽ sử dụng trong các script. Ngoài ra, người dùng có

thể tự định nghĩa các hàm khác để sử dụng.

Như ta đã biết, JavaScript có nhiều hàm được định nghĩa sẵn mà khi cần chúng ta chỉ việc

gọi. Ví dụ, nếu chúng ta muốn kiểm tra giá trị mà người dùng nhập vào có phải là một số hay

không, chúng ta có thể sử dụng hàm isNaN (NaN: Not a Number) để thực hiện điều này.

Trong phần này chúng ta sẽ tìm hiểu về một số hàm thông dụng được hỗ trợ bởi JavaScript

như sau:


51

- Hàm eval

- Hàm isFinite

- Hàm isNaN

- Hàm parseInt và parseFloat

- Hàm Number và String

Eval: được dùng để đánh giá một chuỗi mà không cần tham chiếu đến bất kì

một đối tượng cụ thể nào.

Cú pháp của hàm như sau: eval (string)

Với string là chuỗi cần được đánh giá. Chuỗi này có thể là một biểu thức

JavaScript, một câu lệnh, hay một nhóm các câu lệnh. Trong biểu thức có thể bao gồm

các biến và thuộc tính của một đối tượng.

Nếu chuỗi đại diện cho một biểu thức thì hàm eval định giá trị biểu thức đó. Nếu

đối số đại diện cho một hoặc nhiều câu lệnh JavaScript, thì hàm eval thực hiện các câu

lệnh này. Không dùng hàm eval để định giá trị một biểu thức số học, vì JavaScript

định giá trị các biểu thức số học một cách tự động.

isFinite: định giá trị một đối số để xác định xem nó có phải là một số hữu

hạn hay không.

Cú pháp của hàm như sau: isFinite(number)

Với number là số được định giá trị.

Nếu đối số là NaN, dương vô cùng hoặc âm vô cùng thì phương thức này trả về

false, ngoài ra nó trả về true.

Đoạn mã nguồn sau kiểm tra đối số ClientInput để xác định xem nó có phải là số

hữu hạn không: if (isFinite(ClientInput) == true) { /* các bước cụ thể */ }

isNaN: định giá trị một đối số để xác định xem nó có phải là “NaN” (Not a

Number) hay không.

Cú pháp của hàm như sau: isNaN(testValue)

Với testValue là giá trị bạn muốn định giá trị.

Các hàm parseInt và parseFloat trả về “NaN” khi chúng định giá trị một giá trị

không phải là một số. Hàm isNaN trả về true nếu nó được truyền giá trị “NaN” và


52

ngược lại là false.

Đoạn mã nguồn sau định giá trị floatValue để xác định xem nó có phải là một số

hay không và sau đó gọi một thủ tục phù hợp:

floatValue = parseFloat (toFloat) ;

if (isNaN (floatValue))

{

notFloat()

} else {

isFloat()

}

ParseInt() và ParseFloat() trả về một giá trị số khi đối số là một chuỗi.

Cú pháp của hàm parseFloat là: parseFloat(str)

Hàm parseFloat phân tích đối số của nó là chuỗi str, và cố gắng trả về một số dấu

chấm động. Nếu nó gặp phải một ký tự khác với một dấu (+ hoặc -), một số (0-9), một

dấu chấm thập phân, hoặc một số mũ, thì nó trả về giá trị cho đến vị trí đó và bỏ qua.

Cú pháp của hàm parseInt là: parseInt (str [, radix])

Hàm parseInt phân tích đối số đầu tiên của nó là chuỗi str và cố gắng trả về một

số nguyên của cơ số radix chỉ định, được chỉ ra bởi đối số tùy chọn thứ hai là radix.

Ví dụ, một cơ số mười được chỉ ra để chuyển đổi chuỗi thành một số thập phân,

cơ số 8 – hệ bát phân để chuyển đổi chuỗi thành một số bát phân, cơ số 16 – thập lục

phân để chuyển đổi chuỗi thành một số thập lục phân… Với các cơ số trên 10, các chữ

cái của bảng ký tự chỉ ra các chữ số lớn hơn 9. Ví dụ, với các số thập lục phân (base

16), các chữ từ A đến F được sử dụng.

Nếu hàm parseInt gặp phải một ký tự không phải là một chữ số trong hệ cơ số chỉ

định, thì nó sẽ bỏ qua số đó và tất cả các ký tự theo sau và trả về giá trị số nguyên


53

được phân tích đến vị trí đó. Nếu ký tự đầu không thể được chuyển đổi thành một số

trong hệ cơ số chỉ định, thì nó trả về “NaN”. Hàm parseInt rút ngắn chuỗi thành các

giá trị số nguyên

Các hàm Number và String: cho phép bạn chuyển đổi một đối tượng thành một số

hay thành một chuỗi.

Cú pháp của các hàm này là: Number (objRef) String (objRef)

Với objRef là một tham chiếu đối tượng.

Ví dụ sau chuyển đổi đối tượng Date thành một chuỗi có thể đọc được.

D = new Date (430054663215) // trả về kết quả dưới đây

// “Thu Aug 18 18:37:43 UTC+0700 1983”

4.10. Mảng

Có những lúc ta muốn lưu nhiều giá trị vào trong một biến. Khi đó ta sử dụng mảng.

Mảng được dùng để lưu một tập hợp các biến có cùng tên. Chỉ số của mảng dùng để phân

biệt các biến này. Trong JavaScript chỉ số của mảng bắt đầu từ 0.

Tuy nhiên, JavaScript không có kiểu dữ liệu mảng. Nhưng nó có một đối tượng mảng

được xây dựng sẵn. Để dùng mảng trong chương trình, ta phải sử dụng đối tượng mảng và

các phương thức của nó.

Tạo mảng

Cấu pháp sau đây dùng để tạo một mảng:

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

Trong đó arrayObjectName là tên của đối tượng mảng, ,và elementN là danh sách các giá

trị của các phần tử mảng. Mảng được khởi tạo với các giá trị xác định như là các phần tử của

nó. Thuộc tính length lưu số lượng các phần tử có trong mảng.


54

Thêm các phần tử

Chúng ta có thể đưa các phần tử vào một mảng ngay khi chúng ta tạo nó. Chúng ta cũng có

thể đưa dữ liệu vào một mảng bằng cách gán giá trị cho các phần tử của nó.

emp[0] = "Ryan Dias"

emp[1] = "Graham Browne"

emp[2] = "David Greene"

Ryan Dias Graham Browne David Greene

Đoạn mã trên tạo ra một một mảng và gán giá trị cho từng phần tử của nó.

<html>

<head>

<script language="JavaScript">



</script>

</head>


55

</html>

Sử dụng các phương thức của mảng:

Để thao tác trên mảng, chúng ta phải dùng các phương thức của đối tượng mảng.

Phương thức Mô tả

Join Kết hợp các phần tử của mảng thành một chuỗi

Pop Trả về phần tử cuối cùng của mảng, sau khi xoá nó từ mảng.

Push Thêm một hoặc nhiều phần tử vào cuối mảng. Trả lại phần tử cuối cùng

thêm vào.

Reverse Đảo ngược các phần tử của mảng: phần tử đầu tiên của mảng trở thành

phần tử cuối cùng và phần tử cuối cùng trở thành phần tử đầu tiên.

Shift Xoá phần tử đầu tiên của mảng và trả về phần tử đó.

Sort Sắp xếp các phần tử của mảng.

Phương thức sort

Phương thức emp.sort () sẽ sắp xếp mảng dưới đây

<html>

<head>

<script language="JavaScript">



</script>

</head>

</html>

Mảng nhiều chiều

Một mảng có thể có nhiều hơn một chiều.

Đoạn mã dưới đây tạo ra một mảng hai chiều và cho hiển thị giá trị của một trong những

phần tử trong mảng.

<HTML>

<HEAD>

<SCRIPT LANGUAGE = "JavaScript">

MyArray = new Array(5,5);

MyArray[0, 0] = "Ryan Dias";


57

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 với lập trình web, kiến thức về DOM và khả năng thao tác DOM thành thạo là hai

yếu tố quan trọng nhất. Đơn giản là vì DOM cho bạn sức mạnh thay đổi mọi thứ của trang

web, khi mà mọi nội dung đều có thể được thêm bớt xóa sửa để mang lại trải nghiệm và nội

dung tốt nhất.

DOM là tên gọi tắt của (Document Object Model – tạm dịch Mô hình Đối tượng Tài

liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên các tài liệu

có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dịch (scripting

language) như Javascript, PHP, Python.

Ngoài ra, DOM giúp thao tác dữ liệu theo mô hình hướng đối tượng. Các phần tử bên

trong 1 tài liệu có cấu trúc được định nghĩa thành các đối tượng, phương thức và thuộc

tính để có thể truy xuất dễ dàng mà vẫn đảm bảo tính cấu trúc: mỗi phần tử là một đối tượng,

sở hữu các thuộc tính và các phương thức để làm việc với các thuộc tính đó như thêm, xóa,


58

sửa, cập nhật. Bên cạnh đó, bạn cũng có thể thêm bớt các phần tử tùy thích, giúp cho nội

dung và cấu trúc của trang web luôn cập nhật động.

Webpage = DOM + Javascript

Đây không hẳn là công thức tuyệt đối, vì ngoài Javascript, ta có thể tương tác với DOM bằng

PHP, Python… Tuy nhiên, Javascript đã theo suốt lịch sử phát triển của DOM, nên sử dụng

DOM Javascript để bắt đầu phát triển web là một lựa chọn tốt.

Cây cấu trúc DOM

Nút

Đối với HTML DOM, mọi thành phần đều được xem là 1 nút (node), được biểu diễn trên 1

cây cấu trúc dạng cây gọi là DOM Tree. Các phần tử khác nhau sẽ được phân loại nút khác

nhau nhưng quan trọng nhất là 3 loại: nút gốc (document node), nút phần tử (element node),

nút văn bản (text node).

- Nút gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ <html>.

- Nút phần tử: biểu diễn cho 1 phần tử HTML.

- Nút văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là

1 nút văn bản. Đó có thể là tên trang web trong thẻ <title>, tên đề mục trong thẻ

<h1>, hay một đoạn văn trong thẻ <p>.

- Ngoài ra còn có nút thuộc tính (attribute node) và nút chú thích (comment

node).

Quan hệ giữa các nút

- Nút gốc (document) luôn là nút đầu tiên.

- Tất cả các nút không phải là nút gốc đều chỉ có 1 nút cha (parent).

- Một nút có thể có một hoặc nhiều con, nhưng cũng có thể không có con nào.

- Những nút có cùng nút cha được gọi là các nút anh em (siblings).

- Trong các nút anh em, nút đầu tiên được gọi là con cả (firstChild) và nút cuối

cùng là con út (lastChild).


59

Thuộc tính và phương thức thường gặp

Có thể tham khảo thêm tại: http://www.w3schools.com/jsref/dom_obj_all.asp

Thuộc tính Ý nghĩa

id Định danh – là duy nhất cho mỗi phần tử nên thường được dùng

để truy xuất DOM trực tiếp và nhanh chóng.

className Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1

className có thể dùng cho nhiều phần tử.

tagName Tên thẻ HTML.

innerHTML Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này

là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các nút phần

tử và nút văn bản.

outerHTML Trả về mã HTML của phần tử hiện tại. Nói cách khác,outerHTML

= tagName + innerHTML.

textContent Trả về 1 chuỗi kí tự chứa nội dung của tất cả nút văn bản bên

trong phần tử hiện tại.

attributes Tập các thuộc tính như id, name, class, href, title…

style Tập các thiết lập định dạng của phần tử hiện tại.

value Lấy giá trị của thành phần được chọn thành một biến.

Phương thức Ý nghĩa

getElementById(id) Tham chiếu đến 1 nút duy nhất có thuộc tính id giống với id cần

tìm.

getElementsByTagName(tag

name)

Tham chiếu đến tất cả các nút có thuộc tính tagName giống với

tên thẻ cần tìm, hay hiểu đơn giản hơn là tìm tất cả các phần tử

DOM mang thẻ HTML cùng loại. Nếu muốn truy xuất đến toàn bộ


60

thẻ trong tài liệu HTML thì hãy sử

dụng document.getElementsByTagName('*').

getElementsByName(name) Tham chiếu đến tất cả các nút có thuộc tính name cần tìm.

getAttribute(attributeName) Lấy giá trị của thuộc tính.

setAttribute(attributeName,

value)

Sửa giá trị của thuộc tính.

appendChild(node) Thêm 1 nút con vào nút hiện tại.

removeChild(node) Xóa 1 nút con khỏi nút hiện tại.

Mặt khác, các phần tử DOM đều là các nút trên cây cấu trúc DOM. Chúng sở hữu thêm các

thuộc tính quan hệ để biểu diễn sự phụ thuộc giữa các nút với nhau. Nhờ các thuộc tính quan

hệ này, chúng ta có thể truy xuất DOM gián tiếp dựa trên quan hệ và vị trí của các phần tử.

Truy xuất DOM

Truy xuất gián tiếp

Thao tác truy xuất các nút gián tiếp theo vị trí trên cây DOM còn được gọi là duyệt cây

DOM (DOM Tree traversal).

Mỗi nút trên cây DOM đều có 6 thuộc tính quan hệ để giúp bạn truy xuất gián tiếp theo vị trí

của nút:

- Node.parentNode: tham chiếu đến nút cha của nút hiện tại, và nút cha này là duy

nhất cho mỗi nút. Do đó, nếu bạn cần tìm nguồn gốc sâu xa của 1 nút, bạn phải nối

thuộc tình nhiều lần, ví dụ Node.parentNode.parentNode.

- Node.childNodes: tham chiếu đến các nút con trực tiếp của nút hiện tại, và kết quả là

1 mảng các đối tượng. Lưu ý rằng, các nút con không bị phân biệt bởi loại nút, nên

kết quả mảng trả về có thể bao gồm nhiều loại nút khác nhau.

- Node.firstChild : tham chiếu đến nút con đầu tiên của nút hiện tại, và tương đương

với việc gọi Node.childNodes[0].


61

- Node.lastChild: tham chiếu đến nút con cuối cùng của nút hiện tại, và tương đương

với việc gọi Node.childNodes[Element.childNodes.length-1].

- Node.nextSibling: tham chiếu đến nút anh em nằm liền kề sau với nút hiện tại.

- Node.previousSibling: tham chiếu đến nút anh em nằm liền kề trước với nút hiện tại.

Truy xuất tr ực tiếp

Truy xuất trực tiếp sẽ nhanh hơn, và đơn giản hơn khi bạn không cần phải biết nhiều về quan

hệ và vị trí của nút. Có 3 phương thức để bạn truy xuất trực tiếp được hỗ trợ ở mọi trình

duyệt:

- document.getElementById('id_cần_tìm')

- document.getElementsByTagName('div')

- document.getElementsByName('tên_cần_tìm')

Tạo thêm hoặc di chuyển DOM với appendChild

Như bạn đã biết, mọi nút trên cây cấu trúc DOM đều bắt nguồn sâu xa từ nút gốc và bắt buộc

phải có 1 nút cha. Do đó, về bản chất, khi 1 DOM mới được tạo ra, nó cô đơn 1 mình và

không thể sử dụng được như các phần tử DOM thông thường. Chỉ sau khi bạn tìm 1 nút khác

trên cây DOM để làm cha đứa bé (sử dụng nút_cha.appendChild(nút_con)) thì quá trình tạo

thêm DOM hoàn tất.

Loại bỏ DOM với removeChild

Khi bạn loại bỏ 1 nút, nút đó vẫn sẽ tồn tại trong bộ nhớ đệm của máy tính. Bạn sẽ không thể

truy xuất đến nút đó được nữa, trừ khi bạn đã lưu tham chiếu đến nút đó bằng 1 biến.

Khi loại bỏ DOM, nút cha sẽ sử dụng phương thức removeChild() để từ mặt 1 hoặc nhiều nút

con

DOM Event

Sự kiện và các hàm xử lý sự kiện DOM là một phần quan trọng của Javascript. Sự kiện sẽ

xảy ra khi có sự tương tác từ người dùng (như sự kiện onclick khi người dùng nhấn chuột ,


62

onmousemove khi chuột di chuyển..) hoặc từ chính trang web (sự kiện onload khi một phần

tử DOM nào đó đã được tải xong hay khi cửa sổ bị thay đổi kích thước). Bạn có thể tham

khảo thêm danh sách sự kiện rút gọn ở http://www.w3schools.com/jsref/dom_obj_event.asp

Cách 1: Chèn trực tiếp vào thẻ HTML

Cách 2: Chèn vào thuộc tính sự kiện của DOM

Cách 3: Dùng phương thức addEventListener()

4.12. Bài Tập Về Javascript

5. PHP

5.1. PHP Là Gì?

PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập trình kịch bản hay

một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn

mở, dùng cho mục đích tổng quát. Nó rất thích hợp với web và có thể dễ dàng nhúng vào

trang HTML. Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp

giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn

ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trìnhweb phổ biến nhất thế

giới.

Đoạn mã sau minh họa giúp cách viết PHP lồng vào các trang HTML dễ dàng như thế nào


63

Thẻ <?php và thẻ ?> sẽ đánh đấu sự bắt đầu và sự kết thúc của phần mã PHP qua đó máy

chủ biết để xử lý và dịch mã cho đúng. Đây là một điểm khá tiện lợi của PHP giúp cho việc

viết mã PHP trở nên khá trực quan và dễ dàng trong việc xây dựng phần giao diện ứng

dụng HTTP.

Ngôn ngữ, các thư viện, tài liệu gốc của PHP được xây dựng bởi cộng đồng và có sự đóng

góp rất lớn của Zend Inc., công ty do các nhà phát triển cốt lõi của PHP lập nên nhằm tạo ra

một môi trường chuyên nghiệp để đưa PHP phát triển ở quy mô doanh nghiệp.

5.2. Cách Viết Comment

Trong bất cứ ngôn ngữ nào dù đơn giản như HTML hay CSS cho đến phức tạp hơn

chút xíu như PHP thì việc chú thích là điều không thể thiếu. Có chú thích các dòng code của

bạn dễ hiểu hơn, dễ kiểm soát, dễ khắc phục lỗi cũng như tiện cho việc kế thừa hoặc làm việc

nhóm.

Các đoạn chú thích sẽ được máy bỏ qua, không động đến gì cả, bạn có thể viết Tiếng

Việt ở những đoạn này nếu muốn. Thường thì chú thích sẽ bị để mờ hơn những dòng code

trong các chương trình hỗ trợ gõ code PHP - điều này cũng đúng trong hầu hết các ngôn ngữ

và phần mềm khác.

Chú thích trong PHP có 2 kiểu:

Kiểu thứ nhất là chú thích dòng, với 2 dấu gạch chéo như thế này:

// - ưu điểm là đơn giản, nhanh - nhưng bạn chỉ chú thích được duy nhất 1 dòng.

Để chú thích nhiều dòng bạn phải dùng kiểu thứ hai.

Kiểu thứ hai là chú thích khối, bạn có thể để đoạn chú thích trên nhiều dòng bằng cách đưa

nó vào cặp thẻ /* và */

Dưới đây là những ví dụ cụ thể hơn:

Chú thích dòng:


64

<?php

// In ra thông tin tuổi

echo $tuoi;

?>

Chú thích khối:

<?php

/*

In ra đầy đủ thông tin gồm tuổi, tên và giới tính.

Không cần in ra thông tin quê quán và điện thoại.

Thẻ <br/> dùng để ngắt dòng.

*/

echo $tuoi<br/>;

echo $ten<br/>;

echo $gioi<br/>;

?>

5.3. Biến Và Kiểu Giá Tr ị

PHP có các kiểu giá trị:

- boolean

- integer

- float

- String

- array

- object


65

- null

Trong PHP biến được ký hiệu bởi dấu " $ " đi sau là các ký tự bao gồm các chữ cái thường (a

-z) in hoa (A - Z) và các chữ số (0 - 9) và dấu " gạch dưới " ( _ ) . Biến không được viết cách.

Biến không được bắt đầu bằng chữ số

Ví dụ :

<?php

$name = "phpandmysql.net"; // kiểu chuỗi

$Name = 123; // kiểu số nguyên

$num12 = 1.2; // kiểu số thực

$_bien = "giá trị";

$12name = 10; // biến không được bắt đầu bằng chữ số

a = "10"; // biến phải có dấu $ ở trước

?>

- Chú ý : Trong PHP phân biệt chữ in hoa và in thường , biến $a và $A là hai biến hoàn toán

khác nhau.

5.4. Hằng Số

Trong PHP có hai loại hằng, hằng có sẵn trong PHP và hằng do chúng ta tự định nghĩa

- Hằng có sẵn trong PHP, ví dụ như

<?php

TRUE , FALSE ; // có giá trị tương ứng là 1 và 0

PHP_VERSION ; // cho biết phiên bản PHP trong server của bạn

PHP_OS ; // cho biết server của bạn là linux hay window

?>

Và rất nhiều các hằng khác như E_ERROR, E_WARNING.........

- Hằng do chúng ta định nghĩa, để định nghĩa hằng chúng ta dùng cấu trúc sau :


66

<?php

define("NAME","PHPANDMYSQL.NET"); // định nghĩa hằng có tên là

NAME

echo NAME; // xuất ra màn hình "PHPANDMYSQL.NET"

?>

5.5. Toán Tử

Toán tử gán : dễ thấy ngay trong khi ta gán giá trị cho 1 biến, ví dụ

<?php

$name = "haanhdon"; // Gán giá trị "haanhdon" cho bien $name

$number = 10 ; // gán giá trị 10 cho biến $number

?>

Toán tử số học : là các phép toán cơ bản mà các bạn hay thấy như cộng, trừ, nhân, chia...

Tên Ký hiệu Mô tả Ví dụ

Phép cộng + Cộng hai số hạng $a + $b

Phép trừ - Trừ hai số hạng $a - $b

Phép nhân * Nhân hai số hạng $a * b

Phép chia / Chia hai số hạng $a / $b

Phép chia lấy dư % Chi lấy dư 5 % 2 = 1

Toán tử so sánh : các phép toán logic như so sánh bằng, lớn hơn hoặc nhỏ hơn...


So sánh bằng == Hai số hạng bằng nhau $a == $b

So sánh khác != Hai số hạng khác nhau $a != $b

So sánh lớn hơn > So sánh lớn hơn $a > b

So sánh nhỏ hơn < So sánh nhỏ hơn $a < $b


67

Lớn hơn hoặc bằng >= Lớn hơn hoặc bằng $a >= $b

Nhỏ hơn hoặc bằng <= Nhỏ hơn hoặc bằng $a <= $b

Ví dụ : Toán tử số học

<?php

// Toán tử số học

$a = 5;

$b = 10;

$c = $a + $b;

$d = $a * $b;

echo "Tổng $a và $b : ".$c."<br />";

echo "Tích $a và $b : ".$d;

?>

Ví dụ : Toán tử so sánh

<?php

// Toán tử so sánh

$a = 5;

$b = 10;

if($a > $b){

echo "$a lớn hơn $b";

}else{

echo "$a nhỏ hơn $b";

}

?>

Toán tử logic

Toán tử logic là tổ hợp các giá trị boolean có kết quả trả về là TRUE hoặc FALSE


68


Phép và && hoặc and Cả 2 vế phải thoả mãn điều kiện $a > $b && $a >

$c

Phép hoặc || hoặc or Một trong 2 thoả mãn điều kiện là

được $a > $b || $a < $c

Phủ định ! Phủ định 1 điều kiện, giá trị nào

đó $a != b

Ví dụ :

<?php

// Toán tử logic

$diem = 7;

if($diem <= 5){

echo "Bạn dọc dốt quá!";

}elseif($diem > 5 && $diem <= 8){

echo "Bạn học rất khá!";

}else{

echo "Bạn học rất giỏi";

}

?>

5.6. String Trong PHP

Các cách viết String trong PHP

$a = '<p id="idp">paragraph</p>'; //Dấu " nằm trong cặp dấu '_'.

$b = "<a href='google.com'>google</a>"; //cặp dấu '_ ' nằm trong cặp dấu "_".

$c = "<div id=\"divid\"></div>"; //tr ường hợp đặt biệt phải dùng \.

In chuỗi:


69

dùng echo hay print

<?php

$name = 'Marius';

echo "Hy $name"; // Hy Marius

echo 'Hy $name'; // Hy $name

?>

Nối chuỗi:

<?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: loại bỏ khoảng trắng đầu và cuối chuỗi

- strlen: độ dài chuỗi

- str_word_count: đếm số từ

- ucwords: in hoa kí tự đầu của từ dạng tên người


70

- strtolower: chữ thường

- strip_tags: loại bỏ tag html ra khỏi string

- strpos

- str_replace

5.7. Biến Toàn Cục Trong PHP

$_SERVER:

là một biến toàn cục trong PHP

chứa thông tin về PHP Webserver

là một array element.

Một số phần tử trong $_SERVER thường dùng:

- 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


71

- 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 = $_SERVER['REQUEST_TIME'];

$query = $_SERVER['QUERY_STRING'];

$root = $_SERVER['DOCUMENT_ROOT'];

$r = $_SERVER['HTTP_REFERER'];

$rh = $_SERVER['REMOTE_HOST']; //--Hostname của người truy cập

$rp = $_SERVER['REMOTE_PORT']; //--Port mà trình duyệt mở ra

$url = $_SERVER['REQUEST_URI'];

$sname = $_SERVER['SERVER_NAME'

$ips = $_SERVER['SERVER_ADDR'];//--IP của server

$ipc = $_SERVER['REMOTE_ADDR'];//--IP của người truy cập

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

Thông tin về trình duyệt của người truy cập

5.8. Toán Tử Điều Ki ện Toán Tử So Sánh

if statement – tuyên bố này sử dụng để thực hiện một số mã chỉ khi đã xác định một điều

kiện là đúng


72

if…else statement – tuyên bố này sử dụng để thực hiện một số mã, nếu một điều kiện là

đúng sự thật và một mã số, nếu các điều kiện là sai

if…elseif….else statement – tuyên bố này sử dụng để lựa chọn một trong nhiều khối mã sẽ

được thực hiện

switch... case...: khi có nhiều trường hợp cần so sánh, việc thực hiện if..else.. là không tối ưu.

Lúc này ta dùng switch.

Sử dụng các tuyên bố, nếu để thực hiện một số mã chỉ khi đã xác định một điều kiện là đúng.

Cú pháp: if (điều kiện) mã được thực hiện, nếu điều kiện là đúng;

Toán Tử Số Học:

Toán Tử So Sánh:

Toán Tử Logic:


73

Toán tử kết hợp:

5.9. GET, POST, REQUEST

POST method là hình thức đưa cũng như nhận dữ liệu của form lên server (hay nói

cách khác là đưa lên chương trình PHP xử lý). Trong PHP, method này được khai báo bằng

một biến là $_POST['object name']. Trong đó, tên biến _POST là các kí tự viết hoa, object

name là tên của thành phần trong form mà ta cần lấy dữ liệu.

Cũng giống với POST, GET cũng dùng để lấy dữ liệu từ người dùng nhập trên form.

Cách dùng và cú pháp tương tự. Nhưng phương thứcGET không được dùng để lấy dữ liệu

giống phương thức POST. Phương thức GET có cú pháp như sau: $_GET['tên biến'];

Trong đó: tên biến là biến được đưa từ trang này tới trang khác thông qua address bar của

trình duyệt. Tại sao lại như thế? Vì phương thứcGET có tác dụng lấy dữ liệu của các biến

trên thanh address của trình duyệt.


74

Ngoài hai phương thức là GET và POST, trong PHP còn có phương

thức REQUEST. REQUEST không phải là một phương thức được đưa ra trên form trong

HTML, vậy REQUEST có tác dụng như thế nào?

REQUEST là phương thức kết hợp của hai phương thức GET và POST, tức là nó có

thể lấy được tất cả các dữ liệu người dùng đưa vào form và những dữ liệu trên thanh address

bar nữa. Đơn giản là bạn có thể thay thế POST hoặc GET bằng REQUEST ở bất kì chỗ nào

5.10. Lặp Trong PHP

Trong PHP, có những vòng lặp sau đây:

- while – vòng lặp thông qua một khối mã, trong khi chỉ định một điều kiện là đúng

- do…while – vòng lặp thông qua một khối mã một lần, và sau đó lặp trong vòng lặp

như lâu dài như là một điều kiện là đúng quy định

- for: Vòng lặp thông qua một khối mã xác định một số lần

- foreach: Vòng lặp thông qua một khối mã cho mỗi yếu tố trong một mảng

5.11. Mảng Trong PHP

Trong php hỗ trợ một kiểu dữ liệu là dữ liệu kiểu mảng. Mảng hay còn gọi

là array. Mảng là một biến là biến danh sách. Nghĩa là thay vì một biến chỉ có thể lưu trữ

được một giá trị thì với mảng một biến có thể lưu được nhiều giá trị trong một biến.

Chúng ta có thể tạo 1 mãng với các phần tử không đồng nhất về mặt dữ liệu. Đây là

một ưu điểm của PHP so với các loại ngôn ngữ khác như C++ hay Java.

Cấu trúc của một mảng bao gồm khóa và giá trị. Để làm việc được với mảng ta phải

sử dụng các hàm xử lý mảng.

Khởi tạo mảng trong php

Để khởi tạo mảng trong php ta sử dụng cú pháp sau

$ten_bien = array("gia_tri_1","gia_tri_2", "gia_tri_3",...,"gia_tri_n");

Các giá trị trong mảng cách nhau bởi dấu phảy ,

Các giá trị của mảng có thể là kiểu string, kiểu số, kiểu mảng


75

Thêm giá trị vào mảng

Để thêm giá trị vào mảng ta làm như sau

$ten_mang[ ] = 'gia_tri';

$ten_mang['key'] = 'gia_tri';

Trong một số trường hợp chúng ta muốn xem cấu trúc của mảng

ta sử dụng hai lệnh sau: print_r hoặc var_dump

Đếm số phần tử trong mảng

- Để đếm số phần tử của mảng ta dùng hàm count.

Các loại mảng trong PHP

Có hai loại mảng trong php

+ Mảng tuần tự

+ Mảng bất tuần tự

Đối với mảng tuần tự

- Là mảng mà có các chỉ số index hay còn gọi là khóa sử dụng kiểu số, tăng hoặc

giảm dần theo một quy luật.

- Vị trí khóa của mảng thường bắt đầu từ con số 0

Đối với mảng bất tuần tự

- Là mảng sử dụng từ, cụm từ để làm khóa, thay vì thông thường vẫn sử dụng số làm

khóa.

- Dùng foreach( key->value) để duyệt mảng.

Các hàm xử lý mảng

print_r ($array) Được dùng để xem cấu trúc của mảng


76

count ($array) Trả về giá trị kiểu số nguyên là số phần tử của mảng

array_values ($array) Trả về một mảng liên tục có các phần tử có giá trị là giá trị lấy từ các

phần tử của mảng $array

array_keys ($array) Trả về một mảng liên tục có các phần tử có giá trị là khóa lấy từ các

phần tử của mảng $array.

array_pop ($array) Loại bỏ phần tử cuối cùng của mảng. Hàm trả về phần tử cuối cùng đã

được loại bỏ.

array_push ($array, $val1, $val2, ... , $valn) Thêm một hoặc nhiều phần tử vào cuối mảng

$array. Hàm trả về kiểu số nguyên là số lượng phần tử của mảng $array mới

array_shift ($array) Loại bỏ phần tử đầu tiên của mảng. Hàm trả về phần tử đầu tiên đã

được loại bỏ.

array_unshift ($array, $val1, $val2, ... , $valn) Thêm một hoặc nhiều phần tử vào đầu

mảng $array. Hàm trả về kiểu số nguyên là số lượng phần tử của mảng $array mới

array_flip ($array) Trả về một mảng có khóa và giá trị được hoán đổi cho nhau so với

mảng $array (giá trị thành khóa và khóa thành giá trị)

sort ($array) Sắp xếp mảng $array theo giá trị tăng dần

array_reverse ($array) Đảo ngược vị trí các phần tử của mảng


77

array_merge ($array1, $array2, …, $arrayn) Nhập 2 hay nhiều mảng thành một mảng

duy nhất và trả về mảng mới

array_rand ($array, $number) Lấy ngâu nhiên $number phần tử từ mảng $array và đưa

vào màng mới (lấy giá trị khóa)

array_search ($value,$array) Tìm phần tử mang giá trị $value trong mảng $array. Trả về

khóa của phần tử tìm được.

array_slice ($array, $begin. $finish) Trích lấy 1 đoạn phần tử của mảng $array từ vị trí

$begin đến vị trí $finish. Phần tư đầu tiên (chỉ số 0), phần tử cuối cùng (chỉ số -1 hay

count($array) - 1)

array_unique ($array) Loại bỏ những phần tử trùng nhau trong mảng và trả về mảng mới

implode ($str, $array) Chuyển các giá trị của mảng $array thành một chuỗi bao gồm các

phần tử cách nhau bởi ký tự $str

explode ($delimiter, $str) Chuyển một chuỗi thành một mảng. Tách chuỗi dựa vào

$delimiter, mỗi đoàn tách ra sẽ thành một phần tử của mảng mới

serialize ($value) Chuyển chuỗi/mảng/đối tượng $value thành một chuỗi đặc biệt để lưu vào

cơ sở dữ liệu

unserialize ($value) Chuyển chuỗi đặc biệt được tạo từ serialize($value) về trạng thái ban

đầu

array_key_exists ($key, $array) Kiểm tra khóa $key có tồn tại trong mảng $array hay

không? Nếu có trả về giá trị true.


78

in_array ($value, $array) Kiểm tra giá trị $value có tồn tại trong mảng $array hay không?

Nếu có trả về giá trị true.

array_diff ($array1, $array2) Trả về một mảng bao gồm các phần tử có giá trị tồn tại trong

mảng $array1 nhưng không tồn tại trong mảng $array2

array_diff_assoc ($array1, $array2) Trả về một mảng bao gồm các phần tử có khóa tồn tại

trong mảng $array1 nhưng không tồn tại trong mảng $array2

array_intersect ($array1, $array2) Trả về một mảng bao gồm các phần tử giống nhau về

giá trị giữa 2 mảng $array1 và $array2

array_intersect_assoc ($array1, $array2) Trả về một mảng bao gồm các phần tử giống

nhau về khóa và giá trị giữa 2 mảng $array1 và $array2

array_combine ($keys, $values) Tạo một mảng mới có khóa được lấy từ mảng $keys và giá

trị được lấy từ mảng $values theo tuần tự (Yêu cầu số phần tử ở 2 mảng phải bằng nhau)

5.12. Hàm Trong PHP

Hàm là một chương trình thực hiện một tác vụ định nghĩa cụ thể, chúng thực chất là

những đoạn chương trình nhỏ giúp giải quyết một vấn đề lớn. Hàm là một phương pháp lập

trình hướng thủ tục trong ngôn ngữ PHP và các ngôn ngữ bậc cao khác, hiểu được nó các

bạn mới có thể tiếp tục học những kiến thức như lập trình đối tượng.

Cú pháp:

function functiono_name()

{

//Lệnh thực thi

}


79

Tên hàm có thể là một tổ hợp bất kỳ những chứ cái, con số và dấu gạch dưới, nhưng phải bắt

đầu từ chứ cái và dấu gạch dưới.

Hàm tự định nghĩa với các tham số:

Cú pháp:

function function_name($gt1,$gt2)

{

//Hành động

}

Ví dụ:

<?php

function indulieu($text)

{

echo "$text<br>";

}

indulieu("welcome");

indulieu("who are you ?");

?>

Hàm với giá tr ị trả về:

Cú pháp:

function function_name(Có hoặc không có đối số)

{

//Thuc thi

return giatri;

}

Ví dụ:


80

<?php

function tinhtong($a,$b)

{

$total=$a+$b;

return $total;

}

echo tinhtong(19,31)

?>

Include và require, Include_one và require_one:

Để sử dụng lại mã trong nhiều trên web (các script), ta thường viết các hàm, định

nghĩa các hằng hay các đoạn mã và lưu vào một file riêng. Khi đó, một trang php nào cần sử

dụng các đoạn mã đã viết, có hể chèn vào vị trí cần thiết. Để chèn một file có sẵn vào trang

web, ta sử dụng một trong bốn câu lệnh sau: include (filename), require, include_once,

require_once.

Ví dụ: <? Include (“functions.php”)?> sẽ chèn file functions.php từ thư mục cùng cấp với

trang đang viết vào ngay vị trí đặt lệnh include.

5.13. File Upload

Để upload được file, chúng ta cần thêm thuộc tính enctype="multipart/form-data" cho

form, ta dùng thẻ input type="file" để upload file.

Tạo file form.php với nội dung như sau

- Tiếp theo ta sẽ kiểm tra xem người dùng đã nhấn nút submit hay chưa bằng cách kiểm tra sự

tồn tại của biến $_POST['ok'], nếu người dùng đã nhấn submit rồi thì tiến hành kiểm tra xem

họ đã chọn file hay chưa, nếu chưa chọn file thì báo lỗi

- Ta có thể lấy được tên file, kiểu file , cỡ file thông qua các biến :


81

File name : $_FILES['file']['name'];

File type : $_FILES['file']['type'];

File size : $_FILES['file']['size'];

<?php

if(isset($_POST['ok'])){ // Người dùng đã ấn submit

if($_FILES['file']['name'] != NULL){ // Đã chọn file

// thực hiện công việc upload

}else{

echo "Vui lòng chọn file";

}

}

?>

- Khi người dùng đã chọn file thì tiến hành upload ? tùy theo yêu cầu của bài toán mà chúng

ta tiến hành xây dựng chức năng cho nó, ví dụ yêu cầu đặt ra ở đây là chỉ được upload các

file ảnh có kiểu file là jpg , png , gif và cỡ file không được lớn hơn 1mb

- Chúng ta tiến hành kiểm tra kiểu file xem có phù hợp hay không, nếu là file ảnh thì tiến

hành kiểm tra xem cỡ file có phù hợp hay không và ngược lại thì báo lỗi file chọn không phải

file ảnh

<?php

if($_FILES['file']['type'] == "image/jpeg"

|| $_FILES['file']['type'] == "image/png"

|| $_FILES['file']['type'] == "image/gif"){

// là file ảnh

// Tiến hành code upload

}else{

// không phải file ảnh

echo "Kiểu file không hợp lệ";

}

?>


82

- Bước cuối cùng là xem file vừa chọn cỡ có nhỏ hơn 1mb không, file size ở đây được tính

theo byte (1mb = 1*1024 kb * 1024 bytes) . Nếu cỡ file nhỏ hơn 1mb tiến hành upload file

bằng hàm move_uploaded_file , file upload sẽ được lưu trong thư mục data

<?php

if($_FILES['file']['size'] > 1048576){

echo "File không được lớn hơn 1mb";

}else{

// file hợp lệ, tiến hành upload

$path = "data/"; // file lưu vào thư mục 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 "Tên file : ".$name."<br />";

echo "Kiểu file : ".$type."<br />";

echo "File size : ".$size;

}

?>

- Và đây là toàn bộ code của phần upload file

<?php

if(isset($_POST['ok'])){ // Người dùng đã ấn submit

if($_FILES['file']['name'] != NULL){ // Đã chọn file

// Tiến hành code upload file

if($_FILES['file']['type'] == "image/jpeg"

|| $_FILES['file']['type'] == "image/png"

|| $_FILES['file']['type'] == "image/gif"){

// là file ảnh

// Tiến hành code upload

if($_FILES['file']['size'] > 1048576){

echo "File không được lớn hơn 1mb";


83

}else{

// file hợp lệ, tiến hành upload

$path = "data/"; // file sẽ lưu vào thư mục 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 "Tên file : ".$name."<br />";

echo "Kiểu file : ".$type."<br />";

echo "File size : ".$size;

}

}else{

// không phải file ảnh

echo "Kiểu file không hợp lệ";

}

}else{

echo "Vui lòng chọn file";

}

}

?>

5.14. Session Và Cookie

Cookie là 1 đoạn dữ liệu được ghi vào đĩa cứng hoặc bộ nhớ của máy người sử dụng.

Nó được trình duyệt gởi ngược lên lại server mỗi khi browser tải 1 trang web từ server.

Những thông tin được lưu trữ trong cookie hoàn toàn phụ thuộc vào website trên server. Mỗi

website có thể lưu trữ những thông tin khác nhau trong cookie, ví dụ thời điểm lần cuối ta

ghé thăm website, đánh dấu ta đã login hay chưa, v.v...

Cookie được tạo ra bởi website và gởi tới browser, do vậy 2 website khác nhau (cho

dù cùng host trên 1 server) sẽ có 2 cookie khác nhau gởi tới browser. Ngoài ra, mỗi browser


84

quản lý và lưu trữ cookie theo cách riêng của mình, cho nên 2 browser cùng truy cập vào 1

website sẽ nhận được 2 cookie khác nhau.

Thiết lập cookie:

Để thiết lập cookie ta sử dụng cú pháp:

Setcookie("tên cookie","giá trị", thời gian sống)

Tên cookie là tên mà chúng ta đặt cho phiên làm việc.

Giá trị là thông số của tên cookie.

Ví dụ:

Setcookie("username","admin", time() +3600)

Như ví dụ trên ta thấy với tên là username và giá trị là admin, có thời gian sống là 1 giờ tính

từ thời điểm thiết lập.

Chú ý: Kịch bản cookie phải đặt trên mọi giá trị trả về bao gồm thẻ HTML và lệnh echo.

Kịch bản cookie phải đặt trên mọi giá trị trả về bao gồm thẻ HTML và lệnh echo.

Sử dụng cookie:

Để sử dụng lại cookie vừa thiết lập, chúng ta sử dụng cú pháp:

Cú pháp: $_COOKIE["tên cookies"]

Tên cookie là tên mà chúng ta thiết lập phía trên.

Hủy Cookie:

Để hủy 1 cookie đã được tạo ta có thể dùng 1 trong 2 cách sau:

+ Cú pháp: setcookie("Tên cookie")

Gọi hàm setcookie với chỉ duy nhất tên cookie mà thôi

+ Dùng thời gian hết hạn cookie là thời điểm trong quá khứ.

Ví dụ: setcookie("name","Username",time()-3600);

Session: Một cách khác quản lý người sử dụng là session. Session được hiểu là khoảng thời

gian người sử dụng giao tiếp với 1 ứng dụng. Một session được bắt đầu khi người sử dụng

truy cập vào ứng dụng lần đầu tiên, và kết thúc khi người sử dụng thoát khỏi ứng dụng. Mỗi


85

session sẽ có được cấp một định danh (ID) khác nhau và nội dung được lưu trong thư mục

thiết lập trong file php.ini (tham số session.save_path).

Thiết lập session:

Để thiết lập 1 session ta sử dụng cú pháp: session_start()

Đoạn code này phải được nằm trên các kịch bản HTML. Hoặc những lệnh echo, printf.

Để thiết lập 1 giá trị session, ngoài việc cho phép bắt đầu thực thi session. Chúng ta còn phải

đăng ký 1 giá trị session. Để tiện cho việc gán giá trị cho session đó.

Ta có cú pháp sau: session_register("Name")

Ví dụ:

<?php

Session_start();

Session_register("username");

?>

Sử dụng giá trị của session:

Giống với cookie. Để sử dụng giá trị của session ta sử dụng mã lệnh sau:

Cú pháp: $_SESSION["name"]

$_SESSION["name"]

Với Name là tên mà chúng ta sử dụng hàm session_register("name") để khai báo.

Hủy bỏ session:

Để hủy bỏ giá trị của session ta có những cách sau:

session_destroy() // Cho phép hủy bỏ toàn bộ giá trị của session

session_unset()// Cho phép hủy bỏ session .


86

6. PHP Và MySQL

6.1. Khái Ni ệm Về MySQL

Mysql là hệ quản trị dữ liệu miễn phí, được tích hợp sử dụng chung với apache, PHP.

Chính yếu tố phát triển trong cộng đồng mã nguồn mở nên mysql đã qua rất nhiều sự hỗ

trợ của những lập trình viên yêu thích mã nguồn mở. Mysql cũng có cùng một cách truy

xuất và mã lệnh tương tự với ngôn ngữ SQL. Nhưng Mysql không bao quát toàn bộ

những câu truy vấn cao cấp như SQL. Về bản chất Mysql chỉ đáp ứng việc truy xuất đơn

giản trong quá trình vận hành của website nhưng hầu hết có thể giải quyết các bài toán

trong PHP.

Định nghĩa cơ sở dữ liệu, bảng, cột:

Cơ sở dữ liệu: là tên của cơ sở dữ liệu chúng ta muốn sử dụng

Bảng: Là 1 bảng giá trị nằm trong cơ sở dữ liệu.

Cột là 1 giá trị nằm trong bảng. Dùng để lưu trữ các trường dữ liệu.

Định nghĩa 1 số thuật ngữ:

NULL : Giá trị cho phép rỗng.

AUTO_INCREMENT : Cho phép giá trị tăng dần (tự động).

UNSIGNED : Phải là số nguyên dương

PRIMARY KEY : Cho phép nó là khóa chính trong bảng.

Loại dữ liệu trong Mysql:

Ở đây chúng tả chỉ giới thiệu 1 số loại thông dụng: 1 số dữ liệu khác có thể tham khảo

trên trang chủ của mysql.


87

Những cú pháp cơ bản:

Cú pháp tạo 1 cơ sở dữ liệu:

CREATE DATABASE tên_cơ_sở_dữ_liệu;

Cú pháp sử dụng cơ sở dữ liệu: Use tên_database;

Cú pháp thoát khỏi cơ sở dữ liệu: Exit

Cú pháp tạo 1 bảng trong cơ sở dữ liệu:

CREATE TABLE user (<tên_cột> <mô_tả>,…,<tên_cột_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)

);

Hiển thị có bao nhiều bảng: show tables;

Hiển thị có bao nhiêu cột trong bảng: show columns from table;

Thêm 1 cột vào bảng :

ALTER TABLE tên_bảng ADD <tên_cột> <thuộc_tính> AFTER <tên_cột>


88

Ví dụ:

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

Thêm giá trị vào bảng:

Cú pháp:

INSERT INTO Tên_bảng(tên_cột) VALUES(Giá_trị_tương_ứng);

Ví dụ:

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

values("Lanna","12345","[email protected]","F","www.abc.com");

Truy xuất dữ liệu:

Cú pháp:

SELECT tên_cột FROM Tên_bảng;

Ví dụ:

mysql> select id,username from user;

Truy xuất dữ liệu với điều kiện:

Cú pháp:

SELECT tên_cột FROM Tên_bảng WHERE điều kiện;

Ví dụ:

mysql> select id,username from user where user_id=2;

Truy cập dữ liệu và sắp xếp theo trình tự

Cú pháp:

SELECT tên_cột FROM Tên_bảng

WHERE điều kiện (có thể có where hoặc không)

ORDER BY Theo quy ước sắp xếp.

Trong đó quy ước sắp xếp bao gồm hai thông số là ASC (từ trên xuống dưới), DESC (từ

dưới lên trên).


89

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

Truy cập dữ liệu có giới hạn :

Cú pháp:

SELECT tên_cột FROM Tên_bảng

WHERE điều kiện (có thể có where hoặc không)

LIMIT v ị trí bắt đầu, số record muốn lấy ra

Ví dụ:

mysql> select user_id,username from user order by username ASC limit 0,10 ;

Cập nhật dữ liệu trong bảng:

Cú pháp:

Update tên_bảng set tên_cột=Giá trị mới

WHERE (điều kiện).

Nếu không có ràng buộc điều kiện, chúng sẽ cập nhật toàn bộ giá trị mới của các record

trong bảng.

Ví dụ:

mysql> update user set email="[email protected]" where user_id=1 ;

Xóa dữ liệu trong bảng:

Cú pháp:

DELETE FROM tên_bảng WHERE (điều kiện).

Nếu không có ràng buộc điều kiện, chúng sẽ xó toàn bộ giá trị của các record trong bảng.

6.2. Kết Nối PHP Và MySQL

Chúng ta đã cùng nghiên cứu về các cú pháp sql và Mysql cơ bản bao gồm việc tạo

bảng, tạo kết nối, thêm, sửa, xóa các dòng dữ liệu trong cơ sở dữ liệu. Và tiếp theo bài này,

chúng ta sẽ cùng tìm hiểu về cách sử dụng mysql kết hợp với PHP để xuất ra dữ liệu như thế

nào.

Kết nối cơ sở dữ liệu:

Cú pháp: mysql_connect("hostname","user","pass")


90

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

Lựa chọn cơ sở dữ liệu:

Cú pháp:

mysql_select_db("tên_CSDL")

Ví dụ:

$conn=mysql_connect("localhost","root","root") or die(" khong the ket noi");

mysql_select_db("demo");

Thực thi câu lệnh truy vấn:

Cú pháp:

mysql_query("Câu truy vấn ở đây");

Đếm số dòng dữ liệu trong bảng:

Cú pháp:

mysql_num_rows();

Lấy dữ liệu từ bảng đưa vào mảng:

Cú pháp:

mysql_fetch_array();

Đóng kết nối cơ sở dữ liệu:

Cú pháp:

mysql_close();

Ví dụ áp dụng:

<?

$conn=mysql_connect("localhost", "root", "root") or die("can't connect database");

mysql_select_db("demo_mysql",$conn);

$sql="select * from user";


91

$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. Từng Bước Xây Dựng Ứng Dụng Shopping Cart

7.1. Chuẩn Bị

- Bootstrap CSS Framework

- Jquery, jquery block UI

- MySQL

- PHP 5

Tạo table user(id, username, password, email, createdAt)

Tạo table product(id, name, price, content, image, display_order, createdAt,

updatedAt)

Tạo table order(id, order_number, cart_json, total_price, createdAt)

Tạo session cart.

7.2. Xây Dựng Trang BackEnd (Admin)

Trang Login Của Admin

Admin phải login vào để quản lý website

Khi chưa login thì tất cả đều phải chuyển về trang login.


92

Trang Quản Lý Sản Phẩm

Cho phép thêm, sửa, xóa sản phẩm.

Trang Quản Lý Đơn Hàng

Xem đơn hàng chi tiết, xóa đơn hàng.

Xây Dựng Trang FrontEnd (Trang Sản Phẩm)

Trang hiển thị list sản phẩm cho người dùng mua

Trang chi tiết sản phẩm

Trang tìm kiếm sản phẩm

7.3. Xây Dựng Giỏ Hàng

Session Cart cho phép người dùng thêm sản phẩm vào giỏ từ trang list, hay trang chi

tiết

Trang quản lý cart: cho phép xóa sản phẩm khỏi cart.

Trang thanh toán: điền thông tin thanh toán.

8. Giới Thi ệu Về YII Framework

8.1. YII Framework

L ịch sử

Vào tháng 12 năm 2008, một PHP Framework mới được cộng đồng biết đến đó là Yii

Framework với phiên bản 1.0. Có rất nhiều Framework được phát triển vào năm 2008 nhưng

Yii được mọi người nhiệt tình công nhận vì Qiang Xue là người đã thành lập ra Prado

Framework cũng chính là tác giả của Yii Framework. Những năm kinh nghiệm và những

nhận xét của người sử dụng, đang cần một Framework PHP dễ dàng hơn, mở rộng hơn và

hiệu quả hơn để đáp ứng nhu cầu ngày càng tăng của các nhà phát triển ứng dụng Web. Vì

vậy Yii Framework đã ra đời và đáp ứng các yêu cầu trên cho cộng đồng Web.

Yii là một PHP Framework được xây dựng để phát triển các ứng dụng Web quy mô lớn dựa

trên nền tảng component (thành phần sử dụng lại). Yii cho phép tái sử dụng tối đa các thành

phần của hệ thống để tăng tốc độ viết ứng dụng.

Giống như hầu hết các PHP Framework, Yii là một MVC Framework.


93

Yii, nói chung, là một Framework phát triển ứng dụng Web nên có thể dùng để viết mọi loại

ứng dụng Web. Yii rất nhẹ và được trang bị giải pháp cache tối ưu nên nó đặc biệt hữu dụng

cho ứng dụng Web có dung lượng dữ liệu trên đường truyền lớn như web portal, forum,

CMS, e-commerce, v.v.

Để chạy 1 ứng dụng được viết bằng Yii, bạn cần Web Server hỗ trợ PHP 5.1.0 hoặc phiên

bản mới hơn.

Với developer muốn phát triển Yii, kiến thức lập trình hướng đối tượng (OOP) rất hữu ích vì

Yii là một Framework OOP thuần túy.

Yii là một Framework dễ phát tri ển

Để chạy một ứng dụng web Yii, tất cả những gì bạn cần là download Yii Framework phiên

bản mới nhất và một máy chủ hỗ trợ PHP 5.1.0 hoặc cao hơn. Để phát triển với Yii, bạn chỉ

cần biết PHP và lập trình hướng đối tượng (OOP). Bạn không cần phải học bất kỳ hệ điều

hành hoặc ngôn ngữ lập trình mới nào. Xây dựng một ứng dụng Yii chủ yếu liên quan đến

việc viết và duy trì các lớp PHP của riêng bạn, một số trong đó sẽ mở rộng từ các lớp thành

phần chính của Yii Framework.

Yii k ết hợp rất nhiều các ý tưởng tuyệt vời và tích lũy từ các Framework và ứng dụng web

nổi tiếng khác. Vì vậy, nếu bạn đang tìm hiểu Yii sau khi đã sử dụng các Framework phát

triển khác, đây là điều kiện để bạn có thể đánh giá Framework nào ưu điểm hơn và định

hướng cho bản thân.

Yii cũng bao gồm một quy ước cấu hình, góp phần để dễ sử dụng. Điều này có nghĩa rằng Yii

đã quy ước cho hầu như tất cả các hệ thống ứng dụng của bạn. Nếu bạn thực hiện theo các

quy ước, bạn sẽ code ít hơn và tốn ít thời gian phát triển ứng dụng của bạn hơn. Nếu muốn,

Yii cho phép bạn tùy biến và linh hoạt mà không phải theo quy ước của Yii.

Yii có hiệu suất cao

Yii đã được thiết kế cẩn thận để cho phép gần như tất cả đoạn code được phát triển và chỉnh

sửa để đáp ứng bất kỳ yêu cầu nào. Nếu bạn muốn phát triển code mở rộng hơn thành các

công cụ hữu ích cho các nhà phát triển khác sử dụng, Yii cung cấp theo các bước và hướng

dẫn để giúp bạn dễ dàng phát triển. Điều này cho phép bạn đóng góp vào danh sách ngày

càng tăng các tính năng của Yii và tích cực tham gia trong việc mở rộng. Điều gì đáng chú ý

về Yii ? là dễ sử dụng, hiệu suất cao, và chiều sâu mở rộng không tốn kém. Yii được đóng


94

gói với các tính năng giúp bạn đáp ứng những nhu cầu cao trên ứng dụng web hiện nay.

AJAX cho phép web tích hợp các widgets, thực thi của một kiến trúc MVC, DAO và quan hệ

lớp ActiveRecord, kiểm soát truy cập, xem video chuyên nghiệp, quốc tế (I18N),và nội địa

hoá (l10n), đây là các tính năng vượt trội của Yii. Với phiên bản 1.1, Framework chính bây

giờ là được đóng gói với một thư viện mở rộng chính thức được gọi là Zii. Những mở rộng

được phát triển và duy trì bởi các thành viên chủ chốt tiếp tục mở rộng tính năng của Yii.

Ưu Điểm

Yii tốt hơn các Framework khác bởi tính hiệu quả, nhiều tính năng. Yii được thiết kế cẩn thận

từ ban đầu để đáp ứng nhu cầu phát triển ứng dụng Web nghiêm ngặt. Yii là kết quả của sự

kết hợp những gì tốt nhất của các Framework đi trước. Nó là kết quả của kinh nghiệm phát

triển ứng dụng Web lâu năm của các tác giả và sự phân tích kỹ lưỡng, tận dụng những điểm

mạnh của các Framework khác.

Trước đó, Qiang đã từng phát triển PRADO nhiều năm. Những năm kinh nghiệm và đánh giá

của người sử dụng, cần một Framework PHP dễ dàng hơn, mở rộng hơn và hiệu quả hơn để

đáp ứng nhu cầu ngày càng tăng của các nhà phát triển ứng dụng web. Số liệu cực kỳ ấn

tượng khi so sánh với các Framework PHP khác dựa trên hiệu suất của nó ngay lập tức đã

thu hút sự chú ý rất tích cực.

Khả năng tái sử dụng và mở rộng của Yii rất cao. Yii là 1 Framework hoàn toàn hướng đối

tượng. Mọi thứ trong Yii đều có thể tái sử dụng và mở rộng rất dễ dàng.

Yii hỗ trợ trên tất cả các DBMS bởi PDO (PHP Data Object).

Hiệu suất xử lý của ZendFramework khá là chậm, vì kiến trúc của nó quá đồ sộ và phức tạp.

Hiện tại có rất nhiều người ưa thích sử dụng WordPress hay Joomla nhưng chỉ phù hợp xây

dựng các website nhỏ, cần làm nhanh, vì có sẳn nhiều thứ, cộng đồng và tài liệu nhiều… Khi

nâng cấp và bảo trì rất khó khăn, tốn nhiều thời gian.

Hiệu suất xử lý của Framework Yii hiệu quả cao.

8.2. Mô Hình MVC

Model


95

Thông thường trong kiến trúc MVC, Model là phần rất quan trọng trong cả dự án, nó có quan

hệ mật thiết với cơ sở dữ liệu.

Yii có 2 loại model: form model là lớp ( CFormModel ) và active record model là lớp (

CActiveRecord ). Cả hai được mở rộng từ lớp ( CModel ). CFormModel đại diện cho mô

hình dữ liệu do người dùng nhập vào ở dạng HTML. Sau đó lưu dữ liệu này vào bộ nhớ và

thông qua CActiveRecord dữ liệu được lưu vào CSDL.

ActiveRecord (AR) là một mô hình được sử dụng để truy cập cơ sở dữ liệu theo hướng đối

tượng. Mỗi đối tượng AR trong Yii là một thể hiện của CActiveRecord là kết quả của 1 dòng

dữ liệu của bảng được tạo trong CSDL.

View

Thông thường, View là giao diện của người dùng, dựa trên các dữ liệu trong Model.

View chính là PHP bao gồm chủ yếu là các yếu tố của giao diện. Nó có thể chứa câu lệnh

PHP nhưng nó được khuyến cáo không nên thay đổi mô hình dữ liệu nên vẫn còn tương đối

đơn giản. Các câu lệnh PHP trong View thường có các điều kiện và vòng lặp rất đơn giản, và

được hỗ trợ bởi các phương thức HTML và Widget là lớp có thể tái sử dụng nhiều lần.

Controller

Controller là một thể hiện của CController. Nó được tạo ra bởi các ứng dụng khi người dùng

yêu cầu. Controller là thiết bị điều khiển chính cho các yêu cầu từ người sử dụng, và nó sẽ

tương tác với cơ sở dữ liệu. Một lớp trong Controller có tên bắt đầu là “action”. Khi tạo mới

một ứng dụng Yii thì mặc định trong Controller là có lớp actionIndex, actionContact.

8.3. Các component, extension

Layout

Layout là bố cục chung nhất cho một Website. Nó thường chứa các thành phần chung nhất.

Trong Layout có thể chứa các câu lệnh PHP.

Ví dụ như: header, footer, …


96

......header here......

<?php echo $content; ?>

......footer here......

Widget

Widget là một thể hiện của CWidget. Nó là một thành phần chủ yếu cho giao diện của trang

Web. Widget thường được nhúng vào nhằm tạo ra một số giao diện người dùng phong phú

hơn. Widget có thể tái sử dụng nhiều lần trong website. Ví dụ, một Widget lịch có thể làm

cho người dùng một giao diện lịch đẹp hơn.

Để sử dụng widget bạn làm 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 nghĩa mới một Widget chúng ta thừa kế từ CWidget và override lớp init() và run():

class MyWidget extends CWidget

{

public function init()

{

// this method is called by CController::beginWidget()


97

}

public function run()

{

// this method is called by CController::endWidget()

}

}

Component

Ứng dụng Yii được xây dựng dựa trên các Component là các đối tượng văn bản để đặc tả một

cách rõ ràng. Component là một thể hiện của CComponent hoặc lớp dẫn xuất của nó. Sử

dụng một Component chủ yếu liên quan đến việc truy cập vào thuộc tính và nâng cao / xử lý

các sự kiện.

Module

Module là một phần độc lập gồm các model, view, controller và các thành phần hỗ trợ khác.

Trong nhiều khía cạnh, module giống như một ứng dụng. Sự khác nhau chính là module

không thể triển khai một mình mà nó phải nằm bên trong của một ứng dụng. Người dùng có

thể truy cập đến các controller trong một module như một ứng dụng bình thường.

Documents

Giaotrinh Makeby Nguyen