giaotrinh makeby nguyen
DESCRIPTION
Giaotrinh Makeby NguyenGiaotrinh Makeby NguyenGiaotrinh Makeby NguyenGiaotrinh Makeby NguyenGiaotrinh Makeby NguyenGiaotrinh Makeby NguyenTRANSCRIPT
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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,...
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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,...
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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).
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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>
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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ẻ <!-- nội dung chú thích --> để 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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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>
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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>
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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”
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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; }
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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ụ:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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).
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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}
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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;
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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 */
}
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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;
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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ố)
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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 {
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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ị;
}
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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>
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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;
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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à
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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">
<!--
emp = new Array(3)
emp[0] = "Ryan Dias"
emp[1] = "Graham Browne"
emp[2] = "David Greene";
document.writeln(emp[0]);
document.writeln(emp[1]);
document.writeln(emp[2]);
//-->
</script>
</head>
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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">
<!--
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
56
emp = new Array(3)
emp[0] = "Ryan Dias"
emp[1] = "Graham Browne"
emp[2] = "David Greene";
emp.sort();
document.writeln(emp[0]);
document.writeln(emp[1]);
document.writeln(emp[2]);
//-->
</script>
</head>
</html>
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";
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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,
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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).
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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ộ
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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].
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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 ,
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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 :
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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...
Tên Ký hiệu Mô tả Ví dụ
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
68
Tên Ký hiệu Mô tả Ví dụ
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:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
}
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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ụ:
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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 :
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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ệ";
}
?>
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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";
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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 .
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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>
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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).
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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")
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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";
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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, …
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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()
TrungtamđaotaoITP-GiaotrınhWebDeveloper 2015
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.