web development

Giáo viên: Trần Tuấn Toàn

1

Lập trình WebLập trình Web

Giáo viên: Trần Tuấn ToànGiáo viên: Trần Tuấn Toàn

22Wednesday, April 06, 2011Wednesday, April 06, 2011

Mục đích và yêu cầu của môn họcMục đích và yêu cầu của môn học

Mục đích:Mục đích:

Giới thiệu chung về mạng InternetGiới thiệu chung về mạng Internet

Xây dựng phần mềm Web based (Client/Server)Xây dựng phần mềm Web based (Client/Server)

Yêu cầu:Yêu cầu:

Môn học trước: Xem trong quy chếMôn học trước: Xem trong quy chế

Hình thức thi: Làm bài tập lớnHình thức thi: Làm bài tập lớn


2


Tài liệu tham khảoTài liệu tham khảo

Internet toàn tập Internet toàn tập –– Millennium EditionMillennium EditionNXB Đà Nẵng, Trịnh Anh Toàn, Hồng OanhNXB Đà Nẵng, Trịnh Anh Toàn, Hồng Oanh

Giáo trình hệ thống mạng máy tính CCNA 1 + 2Giáo trình hệ thống mạng máy tính CCNA 1 + 2NXB Giáo dục, Nguyễn Hồng SơnNXB Giáo dục, Nguyễn Hồng Sơn

Làm chủ Microsoft Làm chủ Microsoft Windows 2000 ServerWindows 2000 ServerNXB Giáo dục, Phạm Hoàng Dũng NXB Giáo dục, Phạm Hoàng Dũng –– Hoàng Đức HảiHoàng Đức Hải

PHP and MySQL PHP and MySQL –– Web DevelopmentWeb DevelopmentWelling and ThomsonWelling and Thomson


Chương trình học Chương trình học (Lý thuyết)(Lý thuyết)

Nội dung:Nội dung:� Tổng quan về Internet

� Các khái niệm cơ bản

� IP Address

� Domain name

� Domain name system (DNS)

� HTML, HTTP, WWW, URL, Web Server,Web Browser,…


3


Nội dung (Nội dung (tiếp theotiếp theo))� Các mô hình xử lý thông tin trên mạng:

� Mô hình với máy tính trung tâm

� Mô hình với máy tính phục vụ tệp

� Mô hình Client / Server



Nội dung (Nội dung (tiếp theotiếp theo))� World Wide Web:

� Các khái niệm cơ bản: WWW, HTML, WebBrowser

� Mô hình hoạt động Client / Web Server

� Căn bản HTML

� Tạo FORM với HTML

� Một số công cụ trực quan hỗ trợ soạn thảo HTML



4


Nội dung Nội dung (tiếp theo)(tiếp theo)� Ngôn ngữ lập trình WEB

� PHP Hypertext Preprocessor ?

� Cài đặt – Cấu hình WebSERVER + PHP + mySQL

� Ngôn ngữ lập trình PHP:

o Cú pháp cơ bản

o Kiểu dữ liệu

o Sử dụng biến, hằng, biểu thức


o Các toán tử trong PHP


Nội dung Nội dung (tiếp theo)(tiếp theo)

� Ngôn ngữ lập trình WEB

o Cấu trúc điều khiển

o Hàm

� Ngôn ngữ lập trình PHP: (tiếp(tiếp theo)theo)


o Lập trình hướng đối tượng trong PHP (OOP)


5


Chương trình học Chương trình học (Thực hành)(Thực hành)

Nội dung:Nội dung:

� Tìm hiểu, cấu hình địa chỉ IP

� Truy cập Internet

� Tìm hiểu, tham khảo một số website thương mại

� Thiết kế HTML qua các thẻ

� Ví dụ về xây dựng site hiển thị, site nhập dữ liệu, …

� Thiết kế Website động sử dụng PHP & mySQL


��

Các khái niệm cơ bảnCác khái niệm cơ bản

Tổng quan về InternetTổng quan về Internet

Tổng quan về lập trình ứng dụng WebTổng quan về lập trình ứng dụng Web�� Tổng quanTổng quan

�� Các bước thực hiệnCác bước thực hiện

�� Giới thiệu 1 số Website về các lĩnh vực khác nhauGiới thiệu 1 số Website về các lĩnh vực khác nhau

�� Giới thiệu các Host FreeGiới thiệu các Host Free

World Wide WebWorld Wide Web


6


Internet là gì?Internet là gì?

Giới thiệu chung về InternetGiới thiệu chung về Internet


Giới thiệu chung về Internet Giới thiệu chung về Internet ((cont.cont.))

Mạng nối kết tất cả các máy tính trên thế giớiMạng nối kết tất cả các máy tính trên thế giới

Internet là gì?Internet là gì?

Sử dụng giao thức TCP/IPSử dụng giao thức TCP/IP

Cung cấp cho người dùng các dịch vụ đa dạng:Cung cấp cho người dùng các dịch vụ đa dạng:

oo EmailEmail

oo Mailing lists, Usenet newsgroupsMailing lists, Usenet newsgroups

oo Online chat (IRC), Voice and video conferencingOnline chat (IRC), Voice and video conferencing

oo File transferFile transfer

oo ……


7


Internet hoạt động như thế nào?Internet hoạt động như thế nào?


Một số thuật ngữMột số thuật ngữ

Là 1 con số (32 bits nhị phân), chia thành 4 octetsLà 1 con số (32 bits nhị phân), chia thành 4 octets

��IP Address IP Address –– Đia chỉ IP:Đia chỉ IP:

Ví dụ: 203.162.19.71Ví dụ: 203.162.19.71

Xác định đối tượng gửi và nhận thông tin trên InternetXác định đối tượng gửi và nhận thông tin trên Internet

Là tên giao dịch của 1 tổ chức trên InternetLà tên giao dịch của 1 tổ chức trên Internet

�� Domain Name Domain Name –– Tên miền:Tên miền:

Ví dụ: www.thanglong.edu.vnVí dụ: www.thanglong.edu.vn

Ánh xạ 1Ánh xạ 1--1 giữa tên miền và địa chỉ IP1 giữa tên miền và địa chỉ IP

�� Domain Name System Domain Name System –– Hệ thống ánh xạ tên miền:Hệ thống ánh xạ tên miền:

Có địa ch ỉ IP: 203.162.19.71, có tên máy ch ủ là wwwCó địa ch ỉ IP: 203.162.19.71, có tên máy ch ủ là www


8


Một số thuật ngữ Một số thuật ngữ ((cont.cont.))

WWorld orld WWide ide WWebeb

�� WWW:WWW:

Cho phép cung cấp và truy cập thông tin trên Cho phép cung cấp và truy cập thông tin trên Internet thông qua siêu văn bảnInternet thông qua siêu văn bảnSử dụng giao thức HTTP và ngôn ngữ đặc tả HTMLSử dụng giao thức HTTP và ngôn ngữ đặc tả HTML

HHyperyperTText ext MMarkup arkup LLanguageanguage

�� HTML:HTML:

Ngôn ngữ đặc tả siêu văn bảnNgôn ngữ đặc tả siêu văn bản

HHyperyperTText ext TTransfer ransfer PProtocolrotocol

�� HTTP:HTTP:

Giao thức truyền Giao thức truyền HHyperyperTText (siêu văn bản)ext (siêu văn bản)



UUniform niform RResource esource LLocatorocator

�� URL:URL:

Tương ứng với một địa chỉ trên InternetTương ứng với một địa chỉ trên Internet

Ví dụ: http://www.thanglong.edu.vnVí dụ: http://www.thanglong.edu.vn

Là 1 trang web có chứa văn bản, hình ảnh,Là 1 trang web có chứa văn bản, hình ảnh,âm thanh…âm thanh…

�� Web Page:Web Page:

Webpage được cấu thành bởi các thẻ HTMLWebpage được cấu thành bởi các thẻ HTML


9



Máy chủ chứa trang WebMáy chủ chứa trang Web

�� Web Server:Web Server:

Một số Web Server Softs: IIS, Apache, …,PWS,…Một số Web Server Softs: IIS, Apache, …,PWS,…

Trình duyệt WebTrình duyệt Web

�� Web Browser:Web Browser:

Internet Explorer, Nescape Navigator, Mozilla, …Internet Explorer, Nescape Navigator, Mozilla, …


Các dịch vụ trên InternetCác dịch vụ trên Internet

Cho phép gửi các thông tin cá nhân, file Cho phép gửi các thông tin cá nhân, file Attach file (Attach file (MIMEMIME -- MMultipurpose ultipurpose IInternet nternet MMail ail EExtensionsxtensions))

�� Email:Email:

Sử dụng giao thức Sử dụng giao thức SMTPSMTP để gửi thưđể gửi thư((Simple Mail Transfer ProtocolSimple Mail Transfer Protocol))

Sử dụng giao thức Sử dụng giao thức POP3POP3//IMAP4IMAP4 để nhận thưđể nhận thư((Post Office Protocol Version 3Post Office Protocol Version 3

Internet Message Access Protocol Version 4Internet Message Access Protocol Version 4))

[email protected]@[email protected]@thanglong.edu.vn


10


Các dịch vụ trên InternetCác dịch vụ trên Internet

Cho phép nhóm người thảo luận thông qua EmailCho phép nhóm người thảo luận thông qua Email

�� Mailing lists:Mailing lists:

Cho phép Cho phép downloaddownload hay hay uploadupload file.file.

�� File transfer:File transfer:

Bảo đảm 2 hoặc nhiều người nghe, nhìn thấy nhauBảo đảm 2 hoặc nhiều người nghe, nhìn thấy nhau

�� Voice and video conferencing:Voice and video conferencing:

VoIP (Voice over IP)VoIP (Voice over IP)

Internet telephonyInternet telephony

Sử dụng giao thức FTP (Sử dụng giao thức FTP (FFile ile TTransfer ransfer PProtocol)rotocol)


��


Tổng quan về lập trình ứng dụng WebTổng quan về lập trình ứng dụng Web

�� Tổng quanTổng quan






11


��


Tổng quan về lập trình ứng dụng WebTổng quan về lập trình ứng dụng Web

�� Tổng quanTổng quan







Hệ thống WWW tĩnh:Hệ thống WWW tĩnh:�� Tập hợp các trang HTMLTập hợp các trang HTML�� Không tương tác được với người sử dụngKhông tương tác được với người sử dụng�� Khó khăn khi cập nhật thông tin Khó khăn khi cập nhật thông tin

Ứng dụng Web:Ứng dụng Web:�� Có thể tương tác với người sử dụng (lấy t.tin)Có thể tương tác với người sử dụng (lấy t.tin)�� Có thể tương tác với ứng dụng khácCó thể tương tác với ứng dụng khác�� Chạy trên nền Web ServerChạy trên nền Web Server


12



HHyperyperTText ext MMarkark--up up LLanguage anguage -- HTML:HTML:�� Ngôn ngữ biểu diễn trang web qua các thẻ (tags)Ngôn ngữ biểu diễn trang web qua các thẻ (tags)�� Có thể định dạng cách hiển thị thông tin lên Có thể định dạng cách hiển thị thông tin lên

trang web qua các thẻtrang web qua các thẻ�� 1 trang HTML có thể chứa văn bản, hình ảnh, 1 trang HTML có thể chứa văn bản, hình ảnh,

âm thanh, … và có thể liên kết đến các trang âm thanh, … và có thể liên kết đến các trang HTML khác.HTML khác.


Các khái niệm cơ bản Các khái niệm cơ bản (cont.)(cont.)

Web PageWeb Page�� Là một File HTMLLà một File HTML

�� Web tĩnh (.html, .htm,…): không kết nối CSDLWeb tĩnh (.html, .htm,…): không kết nối CSDL

�� Web động (.asp, .php,…): có kết nối đến CSDLWeb động (.asp, .php,…): có kết nối đến CSDL

Web Brower:Web Brower:�� Phần mềm dùng để hiển thị và thao tác với Web pagesPhần mềm dùng để hiển thị và thao tác với Web pages

�� Có thể hiển thị văn bản đơn giản, đồ họa, multimedia.Có thể hiển thị văn bản đơn giản, đồ họa, multimedia.


13


Các khái niệm cơ bản Các khái niệm cơ bản (cont.)(cont.)

Web Server:Web Server:�� Phần mềm chạy trên một máy chủPhần mềm chạy trên một máy chủ�� Đáp ứng lại các yêu cầu từ máy ClientĐáp ứng lại các yêu cầu từ máy Client

Hosting Provider:Hosting Provider:�� Nhà cung cấp tên miền và không gian nhớ cho Web Nhà cung cấp tên miền và không gian nhớ cho Web

ServerServer�� www.brinkster.comwww.brinkster.com ; ; www.goddady.comwww.goddady.com

Home Page:Home Page:�� Trang chủ Web: index.html, default.html, index.php,..Trang chủ Web: index.html, default.html, index.php,..�� Thường được mặc định là trang đầu tiênThường được mặc định là trang đầu tiên


Mô hình hoạt động Client/Web ServerMô hình hoạt động Client/Web Server

Web Browers:

• IE

• Netscape

• Mozilla

• …

Web Servers:

• IIS

• Apache

• Tomcat

• …


14


Cơ bản về HTMLCơ bản về HTML

Giới thiệu chung về HTMLGiới thiệu chung về HTML�� Phần mềm soạn thảo HTMLPhần mềm soạn thảo HTML

�� HTML TagHTML Tag

�� Cấu trúc trang HTMLCấu trúc trang HTML

�� Một số thẻ HTML thường dùngMột số thẻ HTML thường dùng


Phần mềm soạn thảo HTMLPhần mềm soạn thảo HTML

NotepadNotepad

UltraEditUltraEditVisual InterDevVisual InterDev

FrontPageFrontPage

DreamWeaverDreamWeaver

Notepad ++Notepad ++

Bất kỳ 1 trình soạn thảo nào (PSPad Editor).Bất kỳ 1 trình soạn thảo nào (PSPad Editor).


15


Phần mềm soạn thảo NotepadPhần mềm soạn thảo Notepad

NotepadNotepad�� Không hỗ trợ chế độ PreviewKhông hỗ trợ chế độ Preview

�� Không phân biệt các thẻ HTML khác nhauKhông phân biệt các thẻ HTML khác nhau

�� Không phân biệt các ngôn ngữ lập trình WebKhông phân biệt các ngôn ngữ lập trình Web

�� Không phải là công cụ chuyên nghiệpKhông phải là công cụ chuyên nghiệp


Phần mềm soạn thảo UltraEditPhần mềm soạn thảo UltraEdit

UltraEditUltraEdit�� SharewareShareware

�� Không hỗ trợ chế độ PreviewKhông hỗ trợ chế độ Preview

�� Phân biệt các thẻ HTML khác nhauPhân biệt các thẻ HTML khác nhau

�� Hỗ trợ UnicodeHỗ trợ Unicode


16


Phần mềm Visual InterdevPhần mềm Visual Interdev

Visual InterdevVisual Interdev�� Nằm trong bộ Visual StudioNằm trong bộ Visual Studio

�� Phục vụ cho ngôn ngữ ASPPhục vụ cho ngôn ngữ ASP

�� Phân biệt các thẻ HTML khác nhauPhân biệt các thẻ HTML khác nhau

�� Có chế độ PreviewCó chế độ Preview


�� Có thư viện phong phú các đối tượng cho ASPCó thư viện phong phú các đối tượng cho ASP


Phần mềm soạn thảo FrontPagePhần mềm soạn thảo FrontPage

FrontPageFrontPage�� Nằm trong bộ Microsoft OfficeNằm trong bộ Microsoft Office

�� Hỗ trợ nhiều ngôn ngữ lập trình WebHỗ trợ nhiều ngôn ngữ lập trình Web

�� Hỗ trợ chế độ PreviewHỗ trợ chế độ Preview

�� Hỗ trợ Unicode rất tốtHỗ trợ Unicode rất tốt


17


Phần mềm soạn thảo DreamWeaverPhần mềm soạn thảo DreamWeaver

DreamWeaverDreamWeaver�� Công cụ soạn thảo Web chuyên nghiệpCông cụ soạn thảo Web chuyên nghiệp

�� Nằm trong bộ MacroMediaNằm trong bộ MacroMedia

�� Hỗ trợ nhiều ngôn ngữ lập trình Web (asp, php,…)Hỗ trợ nhiều ngôn ngữ lập trình Web (asp, php,…)

�� Hỗ trợ chế độ Preview tốtHỗ trợ chế độ Preview tốt



Phần mềm soạn thảo PSPadPhần mềm soạn thảo PSPad

PSPad EditorPSPad Editor�� FreewareFreeware

�� Hỗ trợ nhiều ngôn ngữ lập trình Web (asp, php,…)Hỗ trợ nhiều ngôn ngữ lập trình Web (asp, php,…)

�� Hỗ trợ chế độ PreviewHỗ trợ chế độ Preview



18


HTMLs & FORMsHTMLs & FORMs

HTML Tag: Thẻ HTMLHTML Tag: Thẻ HTML

<<Tên thẻTên thẻ>Nội dung hiển thị<>Nội dung hiển thị</Tên thẻ/Tên thẻ>>

<<Tên thẻTên thẻ Thuộc tính=Giá trịThuộc tính=Giá trị>Nội dung<>Nội dung</Tên thẻ/Tên thẻ>>

Mục đích của HTML Tag:Mục đích của HTML Tag:

Định dạng và hiển thị nội dung lên trang web.Định dạng và hiển thị nội dung lên trang web.

Ví dụ:Ví dụ:

<<H3H3>Tag HTML là gì?<>Tag HTML là gì?</H3/H3>>


Cấu trúc của một trang HTMLCấu trúc của một trang HTML

<HTML> <HEAD>…

</HEAD> <BODY>…</BODY>

</HTML>

Phần giới thiệu trang Web

(không hiển thị lên trang Web)

Phần nội dung trang Web

(hiển thị lên trang Web)


19


Ví dụ trang HTMLVí dụ trang HTML

<HTML> <HEAD>

<TITLE>The first my webpage</TITLE>

</HEAD> <BODY>

Xin chao lop Lap trinh Web</BODY>

</HTML>


Một số thẻ HTML cơ bảnMột số thẻ HTML cơ bản

H Tag: thẻ tiêu đềH Tag: thẻ tiêu đề�� <Hn>Tiêu đề thứ n</Hn>, trong đó: n=1<Hn>Tiêu đề thứ n</Hn>, trong đó: n=1�� 66

P Tag: thẻ phân đoạnP Tag: thẻ phân đoạn�� <P>Đoạn văn bản</P><P>Đoạn văn bản</P>

B, I, U Tag: thẻ định dạng văn bảnB, I, U Tag: thẻ định dạng văn bản�� <B><B>Văn bản in đậmVăn bản in đậm</B></B>�� <I><I>Văn bản in nghiêngVăn bản in nghiêng</I></I>�� <U><U>Văn bản gạch chânVăn bản gạch chân</U></U>

Ví dụVí dụH@T2

H@T2 ftp://192.168.6.5/subjects/ltweb/vidu1.htmlTran Tuan Toan - H@T, 12/5/2004


20


Một số thẻ HTML cơ bản (Một số thẻ HTML cơ bản (cont.cont.))

Br Tag: thẻ ngắt dòngBr Tag: thẻ ngắt dòng�� Văn bản<Br>Văn bản<Br>

Pre Tag: thẻ giữ nguyên định dạngPre Tag: thẻ giữ nguyên định dạng�� <Pre><Pre>

Dòng văn bản 1Dòng văn bản 1Dòng văn bản 2Dòng văn bản 2

�� </Pre></Pre>

Sub, Sup Tag: thẻ chỉ sốSub, Sup Tag: thẻ chỉ số�� H<sub>2</sub>OH<sub>2</sub>O �� HH22OO�� 5<sup>th</sup> December5<sup>th</sup> December �� 55thth DecemberDecember

Ví dụVí dụ H@T3


Một số thẻ HTML cơ bản (Một số thẻ HTML cơ bản (cont.cont.))

Big Tag: thẻ chữ lớnBig Tag: thẻ chữ lớn�� <Big><Big>Văn bảnVăn bản</Big></Big>

Small Tag: thẻ chữ nhỏSmall Tag: thẻ chữ nhỏ�� <Small><Small>Văn bảnVăn bản</Small></Small>

Hr Tag: thẻ kẻ dòngHr Tag: thẻ kẻ dòng�� <Hr><Hr>

Address Tag: thẻ định dạng địa chỉAddress Tag: thẻ định dạng địa chỉ�� <Address>Số 123 Lý Thái Tổ<Address><Address>Số 123 Lý Thái Tổ<Address>

Ví dụVí dụ

H@T3 ftp://192.168.6.5/subjects/ltweb/vidu2.htmlTran Tuan Toan - H@T, 12/5/2004


21


Danh sách trong HTMLDanh sách trong HTML

Danh sách không sắp xếp:Danh sách không sắp xếp:�� <ul><ul>

<li>Văn bản</li> <li>Văn bản</li> ……

�� </ul></ul>

Danh sách được sắp xếp:Danh sách được sắp xếp:�� <ol><ol>

<li>Văn bản</li> <li>Văn bản</li> ……

�� </ol></ol>

Ví dụVí dụ


Các ký tự đặc biệtCác ký tự đặc biệt


22


Links and Navigation Links and Navigation

A Tag: thẻ siêu liên kếtA Tag: thẻ siêu liên kết�� <A Href=“path_to_file”>Văn bản</A><A Href=“path_to_file”>Văn bản</A>�� Thuộc tính TITLEThuộc tính TITLE�� Thuộc tính NAME, IDThuộc tính NAME, ID�� Tạo liên kết gửi mailTạo liên kết gửi mail

Ví duVí du


Địa chỉ tương đối và tuyệt đốiĐịa chỉ tương đối và tuyệt đối

Địa chỉ tuyệt đối:Địa chỉ tuyệt đối:�� <A Href=“http://www.test.com/index.html”><A Href=“http://www.test.com/index.html”>

Địa chỉ tương đối: Địa chỉ tương đối: �� So với trang web hiện hànhSo với trang web hiện hành�� ..: Quay ra thư mục cha..: Quay ra thư mục cha�� <A href=“../../admin/login.php”>Login</A><A href=“../../admin/login.php”>Login</A>


23


ColorsColors

Color: RGBColor: RGB�� Màu được cấu tạo bởi 3 cặp số HexMàu được cấu tạo bởi 3 cặp số Hex�� #000000#000000 -- #FFFFFF#FFFFFF�� #123456#123456�� #00CC00#00CC00�� #00FF00#00FF00�� … … …… … …


ColorsColors

Màu sắc tương phản Màu sắc tương phản với văn bảnvới văn bảnVí dụVí dụ


24


ColorsColors

Màu sắc trái ngược nhauMàu sắc trái ngược nhauVí dụVí dụ


ImagesImages

IMG Tag: thẻ imageIMG Tag: thẻ image�� <IMG Src=“path_to_image”><IMG Src=“path_to_image”>�� Thuộc tính: Width, HeightThuộc tính: Width, Height�� Thuộc tính: AltThuộc tính: Alt

Ví dụVí dụ


25


TableTable

Table, Tr, Td Tag: thẻ tạo bảng, hàng, cộtTable, Tr, Td Tag: thẻ tạo bảng, hàng, cột�� <Table <Table BorderBorder=“1”>=“1”>

<Tr><Tr><Td><Td>Col1 Row1Col1 Row1</Td></Td><Td><Td>Col2 Row1Col2 Row1</Td></Td>

</Tr></Tr><Tr><Tr>

<Td><Td>Col1 Row2Col1 Row2</Td></Td><Td><Td>Col2 Row2Col2 Row2</Td></Td>

</Tr></Tr></Table></Table>

Ví dụVí dụ


TableTable

HeadsHeads, , bodiesbodies, and , and footersfooters�� theadthead TagTag : thẻ tạo Header bảng: thẻ tạo Header bảng�� tbodytbody TagTag : thẻ tạo phần nội dung bảng: thẻ tạo phần nội dung bảng�� tfoottfoot TagTag : thẻ tạo Footer: thẻ tạo Footer

Thuộc tính Thuộc tính CellpaddingCellpadding, , CellspacingCellspacingThuộc tính Thuộc tính AlignAlign, , BorderBorder, , bgColorbgColor, , WidthWidthVí dụVí dụ


26


Trộn hàng, trộn cộtTrộn hàng, trộn cột

Thuộc tính Colspan:Thuộc tính Colspan:�� Trộn cột cho thẻ TdTrộn cột cho thẻ Td�� <Td <Td ColspanColspan=“3”>: Trộn 3 cột vào thành 1 cột=“3”>: Trộn 3 cột vào thành 1 cột

Ví dụVí dụThuộc tính Rowspan:Thuộc tính Rowspan:�� Trộn hàng cho thẻ TrTrộn hàng cho thẻ Tr�� <Tr <Tr RowspanRowspan=“2”>: Trộn 2 hàng vào thành 1=“2”>: Trộn 2 hàng vào thành 1

Ví dụVí dụ


FramesetFrameset

<<framesetframeset rows="150, *, 100">rows="150, *, 100"><<frameframe src="top_frame.html" />src="top_frame.html" /><<frameframe src="main_frame.html" />src="main_frame.html" /><<frameframe src="bottom_frame.html" />src="bottom_frame.html" /><<noframesnoframes>>

<body>Web browser does not support frame <body>Web browser does not support frame </body></body>

</</noframesnoframes>></</framesetframeset>>

Ví dụVí dụ


27


Liên kết giữa các FrameLiên kết giữa các Frame

Thuộc tính Name:Thuộc tính Name:�� <Frame Src=“…” <Frame Src=“…” NameName=“=“name_of_framename_of_frame”>”>

Thuộc tính Target:Thuộc tính Target:�� <A Href=“…” <A Href=“…” TargetTarget=“=“name_of_framename_of_frame”>”>

Ví dụVí dụ


Inline FrameInline Frame

Iframe Tag:Iframe Tag:�� <<iframeiframe name=“inlframe”>Văn bản</name=“inlframe”>Văn bản</iframeiframe>>

Ví dụVí dụFootball players in inline frame Football players in inline frame


28


FORMFORM

Mục đích: gửi thông tin từ Client Mục đích: gửi thông tin từ Client →→ ServerServerSử dụng thẻ FORM: Sử dụng thẻ FORM: �� <<FORMFORM Thuộc tínhThuộc tính=“giá trị thuộc tính”>=“giá trị thuộc tính”>

<Các thẻ nhập dữ liệu><Các thẻ nhập dữ liệu></</FORMFORM>>

�� <<FORMFORM action=“vidu14.html”action=“vidu14.html”>><H3>List of example</H3><H3>List of example</H3><Input Type=“Submit” Value=“OK”><Input Type=“Submit” Value=“OK”>

</</FORMFORM>>

Ví dụVí dụ


Các thuộc tính của FORMCác thuộc tính của FORM

Name: tên của FORMName: tên của FORM�� Name=“name_of_form”Name=“name_of_form”�� <FORM <FORM NameName=“inputForm”>=“inputForm”>

Action:Action:�� Action=“file_xử_lý_dữ_liệu”Action=“file_xử_lý_dữ_liệu”�� <FORM <FORM ActionAction=“checkdata.php”>=“checkdata.php”>�� <FORM <FORM ActionAction=“../admin/login.html”>=“../admin/login.html”>�� <FORM <FORM ActionAction=“http://www.test.com/search.php”>=“http://www.test.com/search.php”>�� <FORM><FORM>


29



Method: phương thức truyền dữ liệuMethod: phương thức truyền dữ liệu�� Method=“Method=“GETGET””

Dữ liệu được truyền cho URL Action theo cách:Dữ liệu được truyền cho URL Action theo cách:�� URLURL??namevar1namevar1 ==value1value1&&namevar2namevar2 ==value2value2

Dữ liệu không được chứa các ký tự không chuẩnDữ liệu không được chứa các ký tự không chuẩnDữ liệu không được vượt quá 100 ký tựDữ liệu không được vượt quá 100 ký tự

�� Method=“Method=“POSTPOST””Dữ liệu được truyền ẩn cho URL ActionDữ liệu được truyền ẩn cho URL Action



Enctype: Enctype: �� hình thức mã hóa nội dung FORMhình thức mã hóa nội dung FORM�� sử dụng khi thực hiện Upload dữ liệu lên Serversử dụng khi thực hiện Upload dữ liệu lên Server�� multipart/formmultipart/form--datadata�� <FORM <FORM ActionAction=“”enctype=“=“”enctype=“multipart/formmultipart/form--datadata”>”>

<Input Type=“File” Name=“fileUpload”><Input Type=“File” Name=“fileUpload”><Input Type=“submit” Value=“Send File”><Input Type=“submit” Value=“Send File”>

</FORM></FORM>

Target: _blank, _self, _parent, _topTarget: _blank, _self, _parent, _top


30


Thẻ nhập dữ liệuThẻ nhập dữ liệu

INPUT Tag: thẻ nhập dữ liệuINPUT Tag: thẻ nhập dữ liệu�� <Input <Input Thuộc tính=“giá trị thuộc tính”>Thuộc tính=“giá trị thuộc tính”>

Các thuộc tính:Các thuộc tính:�� TYPETYPE : kiểu thẻ nhập: Text, List, Button,…: kiểu thẻ nhập: Text, List, Button,…�� NAMENAME : tên thẻ nhập: tên thẻ nhập�� VALUEVALUE : giá trị hiện tại của thẻ nhập: giá trị hiện tại của thẻ nhập�� SIZESIZE : kích thước thẻ nhập: kích thước thẻ nhập�� MAXLENGTHMAXLENGTH : độ dài tối đa của giá trị: độ dài tối đa của giá trị�� CHECKEDCHECKED : dùng cho Checkbox: dùng cho Checkbox�� DISABLEDDISABLED : ngăn tác dụng của thẻ nhập: ngăn tác dụng của thẻ nhập�� ……


Các loại thẻ nhập liệuCác loại thẻ nhập liệu

<INPUT <INPUT TypeType=“type_of_input”>=“type_of_input”>Các loại:Các loại:�� TextText [Default][Default]�� PasswordPassword�� ButtonButton�� SubmitSubmit�� ResetReset�� RadioRadio�� CheckboxCheckbox�� DropdownDropdown list, scrolling list, scrolling selectselect boxbox


31


Text & PasswordText & Password

NameNameValueValueSizeSizeLengthLength

�� Username: <Input Type=“Username: <Input Type=“TextText” Name=“” Name=“usrnameusrname” ” Value=“Value=“ltwebltweb” Size=“” Size=“2020” Maxlength=“” Maxlength=“5050”><BR>”><BR>

�� Password: <Input Type=“Password: <Input Type=“PasswordPassword” Name=“” Name=“passpass” ” Value=“Value=“ltweb2009ltweb2009” Size=“” Size=“2020”>”>


TextareaTextarea

Textarea Tag: cho phép tạo Textbox Textarea Tag: cho phép tạo Textbox ((dữ liệu nhập được trên nhiều dòngdữ liệu nhập được trên nhiều dòng))

�� <Textarea Name=“feedb” Rows=“5” Cols=“50”><Textarea Name=“feedb” Rows=“5” Cols=“50”>Enter your feedback here.Enter your feedback here.</Textarea></Textarea>


32


Button, Submit & ResetButton, Submit & Reset

NameNameTypeTypeValueValue�� <Input Type=“<Input Type=“submitsubmit” Name=“” Name=“acSubacSub” ”

Value=“Value=“LoginLogin”>”>�� <Input Type=“<Input Type=“resetreset” Name=“” Name=“acResacRes” ”

Value=“Value=“ResetReset” >” >�� <Input Type=“<Input Type=“buttonbutton” Name=“” Name=“acButacBut” ”

Value=“Value=“ChangeChange” >” >

Ví dụVí dụ


RadioRadio

NameNameTypeTypeCheckedCheckedValueValue

Các Radio cùng tên sẽ cùng trong 1 nhómCác Radio cùng tên sẽ cùng trong 1 nhómVí dụVí dụ

Gender: <Input Type=“Radio” Name=“gender” Checked Value=“M”> Male<Input Type=“Radio” Name=“gender” Value=“F”> Female


33


CheckboxCheckbox

NameNameTypeTypeCheckedCheckedValueValue

Language: <Input Type=“Checkbox” Name=“lang” Checked Value=“EN”> English<Input Type=“Checkbox” Name=“lang” Value=“FR”> French<Input Type=“Checkbox” Name=“lang” Value=“JP”> Japanese


Dropdown listDropdown list

NameNameTypeTypeSizeSizeSelectedSelected

Ví dụVí dụ

Jobs: <SELECT Size=“1” Name=“job”>

<Option Value=“0”>Select job</Option><Option Value=“1”>Worker</Option><Option Value=“2”>Doctor</Option><Option Value=“3” Selected>Teacher</Option><Option Value=“4”>Other</Option>

</SELECT>


34


Scrolling select boxScrolling select box

NameNameTypeTypeSizeSizeSelectedSelectedMultipleMultiple

Ví dụVí dụ

Days:<SELECT Size="4" Name="selDay“ Multiple>

<Option value="Mon">Monday</Option><Option value="Tue">Tuesday</Option><Option value="Wed">Wednesday</Option><Option value="Thu">Thursday</Option><Option value="Fri">Friday</Option><Option value="Sat">Saturday</Option><Option value="Sun">Sunday</Option>

</SELECT>


Option GroupOption Group

Optgroup Tag: thẻ tạo nhóm lựa chọnOptgroup Tag: thẻ tạo nhóm lựa chọn�� <SELECT name="selInformation"><SELECT name="selInformation">

<<OptgroupOptgroup label="Hardware">label="Hardware"><Option value="Desktop">Desktop computers</Option><Option value="Desktop">Desktop computers</Option><Option value="Laptop">Laptop computers</Option><Option value="Laptop">Laptop computers</Option>

</</OptgroupOptgroup>><<OptgroupOptgroup label="Software">label="Software">

<Option value="OfficeSoftware">Office software</Option><Option value="OfficeSoftware">Office software</Option><Option value="Games">Games</Option><Option value="Games">Games</Option>

</</OptgroupOptgroup>><<OptgroupOptgroup label="Peripherals">label="Peripherals">

<Option value=" Monitors ">Monitors</Option><Option value=" Monitors ">Monitors</Option><Option value=" InputDevices ">Input Devices</Option><Option value=" InputDevices ">Input Devices</Option>

</</OptgroupOptgroup>>

Ví dụVí dụ


35


Hidden TextHidden Text

Dùng khi muốn truyền dữ liệu lên Server Dùng khi muốn truyền dữ liệu lên Server nhưng không cho NSD nhìn thấy trên WBrnhưng không cho NSD nhìn thấy trên WBr

�� <<InputInput TypeType=“hidden” =“hidden” NameName=“sess” =“sess” ValueValue=“abcd”>=“abcd”>


Lập trình Web phía ClientLập trình Web phía Client

ScriptScript (Javascript, VBScript)(Javascript, VBScript)Java AppletJava AppletActiveX ControlActiveX Control

Chạy trên Chạy trên Web ClientWeb Client, được hỗ trợ trên nhiều , được hỗ trợ trên nhiều Web BrowerWeb BrowerKhông tương tác với Không tương tác với Web ServerWeb Server


36


JavaScriptJavaScript

Code được xen kẽ vào các thẻ HTMLCode được xen kẽ vào các thẻ HTMLCú pháp câu lệnh giống C:Cú pháp câu lệnh giống C:�� <<ScriptScript Language=“Language=“JavaScriptJavaScript”>”>

//Variables declaration//Variables declaration[[varvar var_name;var_name;]]//Functions declaration & functions call//Functions declaration & functions callfunctionfunction func_namefunc_name ([([argvargv]) {]) {

<<body functionbody function>>[[returnreturn [[valuevalue];]];]

}}</</ScriptScript>>

Sử dụng file JavaScript (.js) đã có (thư viện):Sử dụng file JavaScript (.js) đã có (thư viện):�� <<ScriptScript Language=“Language=“JavaScriptJavaScript” ” SrcSrc=“=“libraryTest.jslibraryTest.js”></”></ScriptScript>>


Các đối tượng được xây dựng sẵnCác đối tượng được xây dựng sẵn

window: window: chứa thuộc tính liên quan đến cửa sổ hiện thờichứa thuộc tính liên quan đến cửa sổ hiện thời

�� window.locationwindow.location

document: document: chứa thuộc tính trong trang webchứa thuộc tính trong trang web

�� document.bgColordocument.bgColor=“#FFCCDD”=“#FFCCDD”

location: location: chứa thuộc tính về địa chỉ trang webchứa thuộc tính về địa chỉ trang web

�� location.pathnamelocation.pathname::

history: history: chứa thuộc tính về vị trí mà trang web đã lướt quachứa thuộc tính về vị trí mà trang web đã lướt qua

�� history.gohistory.go((--1)1)


37


Đối tượng trong JavaScriptĐối tượng trong JavaScript

Mỗi phần tử trong HTML đều được coi là đối Mỗi phần tử trong HTML đều được coi là đối tượngtượng⇒⇒ có thể khai báo sự kiện để gọi hàm Jscó thể khai báo sự kiện để gọi hàm Js�� <Tag_name [<Tag_name [propertiesproperties] ]

[[event_nameevent_name=“=“func_name()func_name()”]>”]>

�� <Tr bgColor=“#FFFF00” <Tr bgColor=“#FFFF00” onmouseoveronmouseover=“mOver()” =“mOver()” onmouseoutonmouseout=“mOut()”>=“mOut()”>


Các sự kiện có thể dùngCác sự kiện có thể dùng

onclickonclick: kích chuột vào đối tượng: kích chuột vào đối tượngonfocusonfocus: chuyển tiêu điểm vào đối tượng: chuyển tiêu điểm vào đối tượngonbluronblur: chuyển tiêu điểm ra khỏi đối tượng: chuyển tiêu điểm ra khỏi đối tượngonmouseoveronmouseover: di chuyển chuột vào đ.tượng: di chuyển chuột vào đ.tượngonmouseoutonmouseout: di chuyển chuột ra khỏi đ.tg: di chuyển chuột ra khỏi đ.tgonchangeonchange: thay đổi giá trị : thay đổi giá trị onselectonselect: chọn phần tử trong Listbox: chọn phần tử trong Listbox……


38


Truy xuất các đối tượng trên FORMTruy xuất các đối tượng trên FORM

windowwindow..documentdocument..form_nameform_name.obj_name..obj_name.propro�� usr=usr=windowwindow..documentdocument.frmLogin.username..frmLogin.username.valuevalue�� documentdocument.frmRegister.chkSex..frmRegister.chkSex.checkedchecked==truetrue

�� fullName=fullName=documentdocument.frmRegister.FullName..frmRegister.FullName.valuevalue�� if (fullName==‘’)if (fullName==‘’)

alert(‘Tên đăng ký không được để trống!’);alert(‘Tên đăng ký không được để trống!’);


Ví dụ JavaScriptVí dụ JavaScript

Checkbox: (dùng nhiều check cùng tên)Checkbox: (dùng nhiều check cùng tên)�� var check_len = form_name.check_name.length;var check_len = form_name.check_name.length;

for(i=0; i<check_len; i++) {for(i=0; i<check_len; i++) {form_name.check_name[i].checked=true;form_name.check_name[i].checked=true;

}}

Option button:Option button:�� form_name.option_name[index].checkedform_name.option_name[index].checked


39



SelectSelect�� form_name.select_name.options[idx].selectedform_name.select_name.options[idx].selected�� form_name.select_name.selectedIndexform_name.select_name.selectedIndex

Textbox:Textbox:�� form_name.text_name.valueform_name.text_name.value



Kiểm tra phần tử trong SELECTKiểm tra phần tử trong SELECT�� varvar select_value;select_value;

functionfunction dropdownMenu() {dropdownMenu() {varvar myIdx = myIdx = documentdocument.form[0].menu..form[0].menu.selectedIndexselectedIndex;;ifif (myIdx==0)(myIdx==0)

alertalert(“(“You must select from the dropYou must select from the drop--down Menudown Menu”);”);elseelse

select_value =select_value =documentdocument.form[0].menu..form[0].menu.optionsoptions[myIdx].[myIdx].valuevalue;;

returnreturn select_value;select_value;}}


40


Tham khảoTham khảo

http://www.w3schools.comhttp://www.w3schools.comhttp://www.google.com.vnhttp://www.google.com.vn


Kỹ thuật thiết kế HTML nâng caoKỹ thuật thiết kế HTML nâng cao

web development

Documents