KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2009

Authored by: Lương Vĩ Minh – Lê Huỳnh Châu Pha – Nguyến Đức Huy

Bài 1 : HTML với Notepad++

Môn : Lập trình và Thiết kế Web 1

1

1

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

Bài 1 : HTML với Notepad++ Môn : Lập trình và Thiết kế Web 1

Contents 1 Qui định bài thực hành và định dạng file nộp bài .................................................................... 22 Cấu trúc cơ bản của một trangWeb (Webpage) ...................................................................... 23 Mô tả cấu trúc của một thẻ (tag) HTML: .................................................................................. 4

3.1 Cú pháp: ........................................................................................................................... 43.2 Một số ký tự đặc biệt trong HTML: ................................................................................... 4

4 Định dạng trang web: ............................................................................................................... 54.1 Thẻ bgcolor Thiết lập thuộc tính màu nền cho trang ....................................................... 54.2 Thẻ background Thiết lập thuộc tính ảnh nền cho trang ................................................. 54.3 Cá thẻ topmargin,leftmargin, rightmargin, bottommargin Thiết lập thuộc tính mép lề trên, trái, phải, dưới của trang ..................................................................................................................... 54.4 Thẻ <bgsound src="URL" loop="Number"> Đặt nhạc nền cho trang .............................. 5

5 Định dạng văn bản: .................................................................................................................. 55.1 Định dạng tiêu đề cỡ 1 đến 6. Tiêu đề 1 là lớn nhất. ....................................................... 55.2 Thẻ <b>…… </b> Định dạng chữ in đậm ........................................................................ 65.3 Thẻ <i>…… </i> Định dạng chữ in nghiêng .................................................................... 65.4 Thẻ <p>…… </p> Định dạng 1 đoạn văn bản ................................................................. 65.5 Thẻ <br> Xuống hàng ...................................................................................................... 65.6 Thẻ <hr> Đường kẻ ngang .............................................................................................. 65.7 Thẻ <!-- --> Ký hiệu ghi chú. Nội dung trong tag này sẽ không hiển thị lên trang web. . 6

6 Định dạng danh sách (List): ..................................................................................................... 76.1 Thẻ <li> … </li> Định nghĩa các thành phần trong danh sách ......................................... 76.2 Thẻ <ul> … </ul> Định nghĩa danh sách không có thứ tự ............................................... 76.3 Thẻ <ol>… </ol> Định nghĩa danh sách không có đánh số thứ tự .................................. 8

7 Định dạng bảng (table): ........................................................................................................... 87.1 Thẻ <table>……</table> Khởi tạo 1 bảng ...................................................................... 87.2 Thẻ <tr>…… </tr> Tạo một dòng. Thẻ <tr> phải nằm trong thẻ <table> ......................... 87.3 Thẻ <th>…… </th> Tạo một ô tiêu đề. Thẻ <th> phải nằm trong thẻ <tr> ...................... 97.4 Thẻ <td>…… </td> Tạo một ô. Thẻ <td> phải nằm trong thẻ <tr> .................................. 97.5 Thuộc tính Border Thiết lập độ dầy của đường kẻ khung. .............................................. 97.6 Thuộc tính Colspan Thiết lập ô có độ rộng bằng bao nhiêu cột. ..................................... 97.7 Thuộc tính Rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng ................................. 107.8 Thuộc tính Cellpadding Khoảng cách từ border đến văn bản trong 1 ô ........................ 107.9 Thuộc tính Cellspacing Khoảng cách giữa các ô trong một bảng ................................. 107.10 Thuộc tính Background Thiết lập ảnh nền cho thẻ <table>, <td>, <tr> ......................... 117.11 Thuộc tính Bgcolor Thiết lập màu nền cho thẻ <table>, <td>, <tr> ............................... 11

8 Chèn hình ảnh (Image): ......................................................................................................... 119 Liên kết trang web (Hyperlink): .............................................................................................. 1210 Bài tập .................................................................................................................................... 13

10.1 Bài tập cá nhân .............................................................................................................. 1310.2 Bài tập nhóm .................................................................................................... 13

2

2

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

1 Qui định bài thực hành và định dạng file nộp bài - Mỗi bài tập sẽ được lưu theo định dạng sau: <MSSV>_<Mã bài tập>.html - Ví dụ: MSSV = 07TH123, bài tập 001 định dạng file bài làm là 07TH123_001.html - Công cụ sử dụng để lập trình và thiết kế web: Notepad++, EditPlus. - Link download Notepad++: http://nchc.dl.sourceforge.net/sourceforge/notepad-

plus/npp.5.2.Installer.exe - Yêu cầu bài tập coi ở mục 10.

Các trường hợp không lưu qui định và sử dụng không đúng công cụ qui định để làm bài sẽ bị coi như là không làm.

2 Cấu trúc cơ bản của một trangWeb (Webpage) - Cấu trúc cơ bản của 1 trang web gồm các phần sau:

<HTML>

<Head> <title> </title> </Head>

<Body> Nội dung chính của trang web </Body>

</HTML>

- Trong đó:

• Thẻ <Html></Html>: Định nghĩa phạm vi của văn bản HTML • Thẻ <Head></Head>: Định nghĩa các mô tả về trang HTML. Các thông tin trong thẻ • này không được hiển thị trên màn hình cửa sổ trang web. • Thẻ <title></title>: Mô tả tiêu đề trang web. Thông tin trong phần này sẽ hiển • thị trên thanh tiêu đề của cửa sổ trang web. • Thẻ <Body></Body>: Xác định vùng thân của trang web. Đây là nơi chứa các thông tin

sẽ hiển thị trong trang web.

- Ví dụ:

• Soạn nội dung file web1.htm bằng Notepad++

3

3

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

• Kết quả hiển thị trên trên trình duyết web Internet Explorer (IE)

Lưu ý: Khi soạn thảo nội dung một file HTML trên Notepad++ - Lưu file dưới phần mở rộng (đuôi) là .html hoặc .htm trước. Hoặc chọn menu

Language HTML. - Trong quá trình soạn thảo code, sử dụng tổ hợp phím Ctrl + Spacebar để hiển thị các từ

khóa tự động. - Lưu nội dung file trước khi Deploy trên trình duyệt web. - Deploy file HTML trên trình duyệt web:

o Trình duyệt IE: menu Run lauch in IE o Trình duyệt Firefox: menu Run lauch in Firefox

4

4

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

3 Mô tả cấu trúc của một thẻ (tag) HTML:

3.1 Cú pháp: Cấu trúc: <Tên_thẻ [tên_tt_1 = gt1] [tên_tt_2 = gt2]… > Dữ liệu hiển thị </Tên_thẻ>

Mô tả: Thẻ mở. Thẻ đóng

- Trong đó: o tên_tt : là tên thuộc tính của thẻ. o gt1: là giá trị của thuộc tính tương ứng. o Một thẻ, có thể có 1 hoặc nhiều thuộc tính hoặc không có thuộc tính nào. o Tác dụng của thẻ chỉ ảnh hưởng đến Dữ liệu hiện thị nằm trong giữa thẻ đóng

và thẻ o mở của thẻ đó. o Các thẻ HTML có thể lòng nhau được.

- Ví dụ:

3.2 Một số ký tự đặc biệt trong HTML: Mã HTML Mô tả

&nbsp; Ký tự khoảng trắng

&lt; <

&gt; >

&amp; &

Bài tập 01: Viết trang web hiển thị chính xác dòng sau lên màn hình:

Function Converter(int &a, int &b) { /*<Begin convert>*/ int c; b = a; a = b; b = c; /*

<finish convert> */ }

GVLT: Lâm Quang Vũ – lqvu@fit.hcmuns.edu.vn - Lương Hán Cơ – lhco@fit.hcmuns.edu.vn

5

5

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

GVHDTH: Lương Vĩ Minh – lvminh@fit.hcmuns.edu.vn - Trần Thị Bích Hạnh – ttbhanh@fit.hcmuns.edu.vn

4 Định dạng trang web:

4.1 Thẻ bgcolor Thiết lập thuộc tính màu nền cho trang

Chú ý: Giá trị của thuộc tính bgcolor có thể là tên của màu bằng tiếng

anh (red, blue, green, …) hoặc là tổ hợp số thập lục phân của 3 màu

(đỏ, xanh lá, xanh dương) .

4.2 Thẻ background Thiết lập thuộc tính ảnh nền cho trang

Giá trị của thuộc tính này đường dẫn đến một file hình ành. Chú ý đến

khái niện đường dẫn tuyệt đối, đường dẫn tương đối trong HTML.

4.3 Cá thẻ topmargin,leftmargin, rightmargin, bottommargin Thiết lập thuộc tính mép lề trên, trái, phải, dướ i của trang

Mặc định, giá trị của các thuộc tính này khác 0.

4.4 Thẻ <bgsound src="URL" loop="Number"> Đặt nhạc nền cho trang

- src : đường dẫn đến file nhạc - loop= -1: lặp vô hạn

Bài tập 02: Hãy viết trang web có - Màu nền là màu có tổ hợp số thập lục phân là #FFFFCC, - topmargin = 20 - Có nội dung là: Welcome to University of Science

5 Định dạng văn bản:

5.1 Định dạng tiêu đề cỡ 1 đến 6. Tiêu đề 1 là lớn nhất.

6

6

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

Kết quả hiển thị trên trình duyệt IE

5.2 Thẻ <b>…… </b> Định dạng chữ in đậm

5.3 Thẻ <i>…… </i> Định dạng chữ in nghiêng

5.4 Thẻ <p>…… </p> Định dạng 1 đoạn văn bản

5.5 Thẻ <br> Xuống hàng

Chú ý: Thẻ này không có thẻ đóng

5.6 Thẻ <hr> Đường kẻ ngang

5.7 Thẻ <!-- --> Ký hiệu ghi chú. Nội dung trong tag này sẽ không hiển thị lên trang web.

7

7

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

Bài tập 03: Viết trang web có nội dung như hình sau:

Thông số màu nền là: #7DBEFF

6 Định dạng danh sách (List):

6.1 Thẻ <li> … </li> Định nghĩa các thành ph ần trong danh sách

6.2 Thẻ <ul> … </ul> Định nghĩa danh sách không có th ứ tự

8

8

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

6.3 Thẻ <ol>… </ol> Định nghĩa danh sách không có đánh s ố thứ tự

Ví dụ tổng hợp:

7 Định dạng bảng (table):

7.1 Thẻ <table>……</table> Khở i tạo 1 bảng

7.2 Thẻ <tr>…… </tr> Tạo một dòng. Thẻ <tr> phả i nằm trong thẻ <table>

9

9

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

7.3 Thẻ <th>…… </th> Tạo một ô tiêu đề . Thẻ <th> phải nằm trong thẻ <tr>

7.4 Thẻ <td>…… </td> Tạo một ô. Thẻ <td> phải nằm trong thẻ <tr> Ví dụ:

7.5 Thuộc tính Border Thiết lập độ dầy của đường kẻ khung. Giá trị mặc định của thuộc tính border (khi khôngkhai báo) là 0 là Bảng không có đường kẻ khung.

7.6 Thuộc tính Colspan Thiết lập ô có độ rộng bằng bao nhiêu cột.

10

10

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

7.7 Thuộc tính Rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng

7.8 Thuộc tính Cellpadding Khoảng cách từ border đến văn bản trong 1 ô

7.9 Thuộc tính Cellspacing Khoảng cách giữa các ô trong một bảng

11

11

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

7.10 Thuộc tính Background Thiết lập ảnh nền cho thẻ <table>, <td>, <tr>

7.11 Thuộc tính Bgcolor Thiết lập màu nền cho thẻ <table>, <td>, <tr>

8 Chèn hình ảnh (Image): Thẻ <img> không có thẻ đóng

Cú pháp:

<img src="URL" alt="Description" width="Number" height="Number">

Mô tả giá trị của các thuộc tính của thẻ <img>

- src: đường dẫn đến file hình ảnh. - alt: dòng chữ thay thế cho ảnh khi trình duyệt không thể hiện thị ảnh, ví dụ do sai

đường dẫn - width: Chiều dài của hình khi hiển thị. - height: Chiều rộng của hình khi hiển thị.

12

12

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

Chú ý: Giá trị mặc định của 2 thuộc tính width, height là kích thước thực sự của file hình ảnh.

Ví dụ:

9 Liên kết trang web (Hyperlink): Thẻ <a>…. </a>

Cú pháp:

<a href="url" [target="values"] [name="values"]> Text to be displayed </a>

Mô tả giá trị của các thuộc tính:

- href: Đường dẫn đến địa chỉ cần liên kết tới. o Nếu đây là liên kết đến địa chỉ email thì giá trị của thuộc tính href có dạng sau:

href = “mailto:youremail@yahoo.com” o Nếu đây là liên kết bên trong cùng một trang web (được định nghĩa bởi thuộc

tính name của thẻ <a>) thì giá trị của href có dạng sau: href=“#tên_name” (xem ví dụ ở dưới)

- target: Chỉ định liên kết được mở ra tại đâu. Thuộc tính target có 2 giá trị: o _blank: liên kết được mở ra trong một cửa sổ mới. o _self : liên kết được mở ra ngay tại trang hiện hành. o Giá trị mặc định của thuộc tính target (nếu không định nghĩa) là _self.

- name: Định nghĩa vị trí liên kết tới trong cùng một trang web.

Ví dụ: Liên kết đến một trang web bất kỳ

Ví dụ: Liên kết đến địa chỉ email:

Ví dụ: Liên kết mở ra một cửa sổ mới

13

13

Bài 1

: H

TML

với N

otep

ad++

| 1/

1/20

09

Ví dụ: Liên kết nội trong cùng một trang web.

10 Bài tập

10.1 Bài tập cá nhân Làm tất cả các bài tập 01, 02, 03 và các bài tập sau:

Bài tập 04: Sử dụng Notepad++ để thiết kế trang web cá nhân, trình bày các thông tin sau:

- Họ và tên - Mã số sinh viên - Hình cá nhân - Địa chỉ liên lạc - Điện thoại - Email - Trang web trường đang học. - Thời khóa biểu học tập

Bài tập 05: Sử dụng Notepad++ để thiết kế trang web Tổng hợp, có các đường link

tới các bài tập 01, 02, 03, 04.

10.2 Bài tập nhóm Mỗi nhóm sẽ tạo một trang thông tin nhóm có các tên các thành viên trong nhóm. Click vô tên của mỗi thành viên sẽ link tới trang thông tin cá nhân của thành viên đó. Toàn bộ Website phải được upload lên host của nhóm.

Chú ý: Các bài làm phải có màu sắc hài hòa và hình ảnh phong phú. Các bài không có giao diện sẽ coi như không làm.

14

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2007 Authored by: Lương Vĩ Minh – Ngô Bá Nam Phương

Bài 2 : Dreamweaver MX

Môn : Lập trình và Thiết kế Web 1

15

1

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

Bài 2 : Dreamweaver MX Môn : Lập trình và Thiết kế Web 1

Table of Contents I. Môi trường làm việc của Dreamweaver CS3 ................................................. 3

1. Các thành phần chính trong cửa sổ DW .................................................... 32. Các chế độ View ........................................................................................ 4

a) Chế độ hiển thị Code View ...................................................................... 4b) Chế độ hiển thị Design View ................................................................... 4c) Chế độ hiển thị Split View .................................................................... 5

II. Các thao tác chính trên trang web trong DW ................................................. 61. Tạo 1 Website mới ..................................................................................... 62. Mở một website đã tạo ............................................................................... 73. Tạo một trang web mới cho Website .......................................................... 84. Thiết lập thông tin chung của trang web mới .............................................. 95. Chèn ngày tháng vào trang web ............................................................... 116. Chèn đường kẻ ngang vào trang web ...................................................... 117. Kiểm tra kết quả thiết kế bằng trình duyệt ................................................ 11

III. Làm việc với hình ảnh trong DW .............................................................. 121. Chèn hình ảnh vào trang web .................................................................. 122. Thay đổi các thuộc tính của hình ảnh ....................................................... 133. Tạo Image Map ........................................................................................ 13

IV. Làm việc với danh sách trong DW ........................................................... 151. Tạo danh sách mới .................................................................................. 152. Tạo danh sách từ nội dung có sẳn ........................................................... 153. Thay đổi định dạng của danh sách ........................................................... 164. Bỏ định dạng danh sách ........................................................................... 16

V. Làm việc với liên kết trong DW ................................................................. 171. Tạo liên kết ngoại ..................................................................................... 172. Tạo liên kết nội ......................................................................................... 18

16

2

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

VI. Làm việc với bảng biểu trong DW ............................................................ 201. Chức năng của bảng ................................................................................ 202. Tạo bảng trong DW .................................................................................. 203. Vẽ bảng trong DW .................................................................................... 204. Thay đổi các thuộc tính của bảng ............................................................. 215. Thay đổi thuộc tính của ô trong bảng ....................................................... 216. Các thao tác trên ô ................................................................................... 22

a) Merge nhiều ô thành 1 ô ....................................................................... 22b) Tách 1 ô thành nhiều ô ......................................................................... 22

VII. Bài tập ...................................................................................................... 23

17

3

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

I. Môi trường làm việc của Dreamweaver CS3

1. Các thành phần chính trong cửa sổ DW

Các thành phần này được kích hoạt thông qua menu Windows. Sau đây là một số thành phần chính trong cửa sổ làm việc của Dreamweaver :

(A) Insert Bar : Thanh công cụ chung : chứa nhiều loại đối tượng để đưa vào trang web, như : Hình ảnh (img), bảng (table), …..

(B)

Document Toolbar : Thanh công cụ dành cho tài liệu hiện hành. Cho phép người lập trình di chuyển qua lại giữa các chế độ hiển thị của trang web.

Ngoài ra, còn có nhiều chức năng khác như hiện thị thử nghiệm trên các loại trình duyệt web, các tùy chọn hiển thị, chức năng kiểm tra cú pháp HTML, …

(C) Document Windows : Cửa sổ màn hình cho trang web hiện hành. Tùy vào chế độ hiển thị trên thanh công cụ mà màn hình có thể khác nhau.

(D) Panal Group : Nhóm cửa sổ danh sách các loại thuộc tính định dạng của trang Web (Danh sách CSS, danh sách thẻ, … có xuất hiện trong trang web).

(E) Tag Selector : Thanh trạng thái hiện thị thẻ HTML hiện thời đang được lựa chọn

(F) Property Inspector : Cửa sổ thuộc tính của đối tượng (thẻ HTML) đang được chọn

(G) File panel : Cửa sổ quản lý hệ thống tập tin của website.

18

4

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

2. Các chế độ View Với một trang web, Dreamweaver cung cấp cho người lập trình 3 giao diện hiển thị

a) Chế độ hiển th ị Code View Chỉ hiển thị mã lệnh HTML, CSS, Javascript, ….. Phù hợp với việc lập trình và chỉnh sửa những chi tiết trên trang web.

b) Chế độ hiển th ị Design View Hiện thị trang web trực quan, phù hợp với việc thiết kế giao diện. Đây là chế độ thiết kế WYSIWYG (What you see is what you get).

19

5

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

c) Chế độ hiển th ị Split View Chia màn hình thiết kế thành 2 phần, phần trên hiện thị mã lệnh (code), phần dưới hiện thị kết quả thiết kế dưới dạng Design. Chế độ này sẽ hạn chế tầm nhìn thiết kế giao diện. Phù hợp với việc dùng để kiểm chứng một số thành phần trong giao diện khi thiết kế.

20

6

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

II. Các thao tác chính trên trang web trong DW

1. Tạo 1 Website mới - Từ màn hình chính của DW, trong vùng cửa sổ File Panel (G), tại combo box

đầu tiên, chọn chức năng Manage Site Chọn New (trong cửa sổ Manage Sites) Site.

- Chuyển qua chể độ Advanced trong cửa sổ Site Definition.

21

7

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

- Thiết lập các thông tin cho website rồi xác nhận OK.

Category Thuộc tính Giá trị

Local Info Site name Tên của website “Lập trình web 1”

Local root folder Thư mục chứa website [Tùy ý sinh viên]

Default Images Folder

Thư mục chứa hình ảnh nên chọn thư mục Images là thư mục con của thư mục Local root folder

Links relative to Chọn Documents

Cache Đánh dấu check

- Sau khi quay lại cửa sổ Manage Sites, chọn website vừa mới tạo nhấn Done. - Lúc này, cửa sổ File Panal (G) sẽ chứa cây thư mục của website vừa mới tạo.

- Lưu ý,

2. Mở một website đã t ạo

mọi thao tác sửa tên file (HTML, image, ..), di chuyển file giữa các thư mục con, ĐỀU PHẢI thực hiện trong cửa sổ (G) này. Với việc thực hiện vậy, DW sẽ tự động cập nhật đường dẫn liên kết, đường dẫn của các đối tượng trong cả website một cách TỰ ĐỘNG.

- Nếu website chưa được add vào DW, thì thực hiện như phần 1 - Nếu Website đã được add vào DW, thì thực hiện các bước sau:

o Từ cửa sổ File Panel (G) mở combo box chọn Manage Sites. o Trong cửa sổ Manage Sites, chọn Website cần mở Done.

22

8

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

3. Tạo một trang web mớ i cho Website - Từ menu File New - Trong cửa sổ xuất hiện, chọn Blank Page - Trong mục Page Type, chọn HTML. - Trong mục Layout, chọn <none>. - Nhấn nút Create

- Lưu ý:

Sau khi tạo xong, phải Save trang web mới + đặt tên thì trang web mới chính thức xuất hiện trong File Panal (G). Lời khuyên – Nên save trang web ngay sau khi tạo.

23

9

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

4. Thiết lập thông tin chung của trang web mớ i

- Từ menu Modify Page Properties

Cách 1:

- Nhấn phím tắt : Ctrl + J Cách 2 :

- Chuyển qua chế độ Design. Cách 3 :

- R-Click chọn Page Properties - Trong cửa sổ Page Properties, thiết

lập các thông số cho webpage sau:

Category Thuộc tính Giá trị

Apprearance

Page Font Chọn font chữ cho trang web

Size Kích thước font chữ mặc định cho trang web

Text Color Màu chữ mặc định cho trang web

Background Color Màu nền cho trang web (thẻ <body>)

Background Image Ảnh nền cho trang web (thẻ <body>)

Repeat Chế độ lập lại khi chọn ảnh nền cho webpage

Left, right, Top, Bottom Margin

Khoảng cách nội dung của thẻ <body> so với biên của cửa sổ trình duyệt web.

Links Link fonts, Size, Color, …

Thiết lập màu của liên kết, cở chữ, màu các trạng thái của liên kết, …

Title Encoding

Title Nội dung title của trang web (tag <Title>)

Encoding Chọn UTF-8 : Mã chữ mặc định khi trang web được nạp vào trình duyệt.

Tracing Image

Tracing Image / Transparency

24

10

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

Ví dụ :

- Thay đổi màu nền, màu chữ trang web

- Thay đổi tiêu đề, Mã chữ của trang web

- Thay đổi ảnh nền cho trang web

25

11

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

5. Chèn ngày tháng vào trang web - Vào chế độ Design View - Chọn vị trí cần đặt ngày tháng trong vùng thiết kế. - Từ menu Insert Date - Chọn kiểu ngày tháng cần chèn vào web.

6. Chèn đường kẻ ngang vào trang web - Vào chế độ Design View - Chọn vị trí cần đặt ngày tháng trong vùng thiết kế. - Từ menu Insert HTML Horizontal rule - Sau khi đã chèn được đường kẻ ngang vào webpage, sử dụng cửa sổ Property

Inspector (F) để thay đổi các thuộc tính của Đường kẻ ngang

7. Kiểm tra kết quả thiết kế bằng trình duyệt - Trên thanh công Document Bar (B) chọn button Preview/Debug in Browser Chọn trình duyệt để kiểm tra trang web (Phím tắt cho IE là F12)

26

12

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

III. Làm việc với hình ảnh trong DW

1. Chèn hình ảnh vào trang web

- Chọn menu Insert Image

Cách 1:

- Khi cửa số Open Image xuất hiện, chọn đường dẫn đến file hình ảnh

- Lưu ý:

o Select File name From chọn File System

o URL : hiện thị đường dẫn tương đối của file ảnh so với trang web hiện

hành (nếu trang web chưa được save lần nào thì URL sẽ chỉ định đường

dẫn tuyệt đốt Không nên vậy)

o Relative to chọn Document - Điền thêm thông tin cho hình ảnh (Tool tip [Alternative text], ….)

27

13

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

- Chọn button Image trên thanh công cụ Inserted Bar (A) Cách 2:

- Chọn đường dẫn đến file image cần chèn (như cách 1)

2. Thay đổ i các thuộc tính của hình ảnh - Trong chế độ Design View - Chọn hình cần thay đổi thước tính - R-Click Properties - Thay đổi các thuộc tính của ảnh cửa sổ Properties Inspector (F)

3. Tạo Image Map - Vào chế độ Design View - Chọn hình ảnh cần tạo Image Map R-Click Properties - Trong cửa sổ Properties Inspector (F) sử dụng các hotspot hyperlink - Sử dụng 1 trong 3 button để tạo hình dạng hotspot

- Sau khi chọn được kiểu Hotspot, vẽ hình hotspot tương ứng trên vùng hình ảnh đã được chọn ban đầu.

28

14

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

- Với mỗi vùng hotspot, chỉ định đường dẫn đến tập tin sẽ liên kết khi người sử dụng click vào thông qua của sổ Properties của Hotspot.

- Xem thêm phần Liên kết ở dưới.

29

15

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

IV. Làm việc với danh sách trong DW

1. Tạo danh sách mới - Vào chế độ Design View. - Đặt con trỏ nhập liệu vào vị trí cần chèn danh sách - Từ menu Text List chọn loại danh sách cần tạo (Ordered List, Unordered

List, Definition List)

- Trong vùng nhập liệu của màn hình, nhập các item trong List, nhấn Enter để tạo ra 1 item mới trong List.

- Để kết thúc việc tạo danh sách, nhấn Enter 2 lần. - Lưu ý : Trên vùng cửa sổ Properties Inspector (F), sử dụng các công cụ định

dạng Danh sách (như hình v ẽ dưới) để điều chính cấp độ danh sách, chuyển kiểu danh sách, …

2. Tạo danh sách từ nộ i dung có sẳn - Vào chế độ Design View. - Chọn vùng văn bản cần tạo danh sách. - Từ menu Text List chọn loại danh sách cần tạo (Ordered List, Unordered

List, Definition List)

30

16

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

3. Thay đổ i định dạng của danh sách - Vào chế độ Design View. - Chọn danh sách cần thay đổi

định dạng - Thực hiện 1 trong 2 cách sau :

o Từ menu Text List Properties

o R-Click List Properties

- Trong cửa sổ List Properties, thay đổi các thuộc tính định dạng của List

4. Bỏ định dạng danh sách - Vào chế độ Design View. - Chọn danh sách cần thay đổi định dạng - Vào menu Text List chọn None

31

17

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

V. Làm việc với liên kết trong DW

1. Tạo liên kết ngoại - Vào chế độ Design View. - Thực hiện 1 trong 2 cách sau : - Cách 1

o Trên thanh công cụ Insert Bar (A) Chọn tab Common click vào công cụ HyperLink

:

- Cách 2 o Đặt con trỏ tại vị trí cần chèn liên kết (hoặc chọn đoạn văn bản sẽ làm liên

kết trên màn hình web).

:

o Từ menu Insert Hyperlink o Khi cửa sổ Hyperlink xuất hiện, điền các thông tin cần thiết để tạo liên kết

Text (Nội dung của tag <a>) Link (Nội dung thuộc tính href của tag <a>) Target Title (Tooltip của tag <a>) Access Key (Phím tắt của liên kết)

- Cách 3o Chọn đoạn văn bản cần tạo liên kết ngoại

:

o Trong cửa sổ Properties Inspector (F) Điền thông tin cho combo box Link và combo box Target

32

18

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

o Hoặc sử dụng công cụ thông minh trỏ đến File cần liên kết đến trong cửa sổ File Panal (G) (Xem hình dưới)

- Lưu ý:

2. Tạo liên kết nội

Trước khi thực hiện liên kết, trang web phải được save trước. Nếu không, DW sẽ tạo liên kết tuyệt đối cho liên kết.

- Vào chế độ Design View. - Tạo vị trí liên kết (trong DW gọi là anchor)

o Chọn một vị trí (hoặc văn bản) trong cửa sổ thiết kết o Trên thanh công cụ Insert Bar (A) Chọn tab Common click vào

công cụ Named Anchor

o Đặt tên cho Anchor (lưu ý, tên anchor không nên có khoảng trắng và phân

biệt chữ hoa thường)

33

19

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

o Lưu ý

- Tạo liên kết nội đến anchor đã tạo.

: Trong chế độ Design View, vị trí Anchor sẽ được đặt trưng bằng hình mũi neo . Trong chế độ Code View thì vị trí Anchor sẽ đại diện bằng tag <a> với thuộc tính name.

o Tương tự như tạo liên kết ngoại, nhưng trong phần combo box Link, đặt tên liên kết theo đúng cú pháp tạo liên kết nội #NamedAnchor

34

20

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

VI. Làm việc với bảng biểu trong DW

1. Chức năng của bảng - Dùng để hiện thị các nội dung được trình bày dư ới dạng bảng (Thời khóa biểu,

danh mục hàng hóa, Danh sách sinh viên, …) - Thiết lập layout cho trang web. - Canh lề cho văn bản và các control trong Form……

2. Tạo bảng trong DW - Vào chế độ Design View. - Chọn vị trí cần chèn bảng trong vùng thiết kế. - Thực hiện 1 trong 2 cách sau :

o Từ menu Insert Table (Phím tắt Ctrl+Alt+T) o Từ thanh công cụ Insert Bar (A) tab Common chọn công cụ Table.

- Xác định các thuộc tính của bảng trong cửa sổ Table

Thuộc tính Ý nghĩa

Rows Số dòng của bảng

Columns Số cột của bảng

Cell padding Khoảng cách giữa biên của các ô trong bảng

Cell spacing Khoảng cách giữa đường biên của ô với nôi dung của ô

Caption Phần tiêu đề của bảng

Align Caption Vị trí phần tiêu đề của bảng

3. Vẽ bảng trong DW - Vào chế độ Design View. - Từ menu View Table Mode chọn Layout Mode. - Trong thanh công cụ Insert Bar (A) tab Layout Sử dụng 2 công cụ Draw

Layout Table và Draw Layout Cell để vẽ table

35

21

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

4. Thay đổ i các thuộc tính của bảng - Vào chế độ Design View. - Nhấn F6 để chuyển qua chế độ Expanded Tables Mode - Chọn bảng cần thay đổi thuộc tính (lưu ý, ch ọn ngay đường biên bên ngoại của

bảng) - Thay đổi các thuộc tính của bảng trong cửa sổ Properties Inspector (G).

Thuộc tính Ý nghĩa

Table ID

W Chiều rộng của cả table

CellPad Cell Padding

CellSpace Cell Spacing

Bg color Màu nền của toàn table

Brdr color Màu viền của toàn table

Bg Image Ảnh nền cho table

5. Thay đổ i thuộc tính của ô trong bảng - Vào chế độ Design View. - Nhấn F6 để chuyển qua chế độ Expanded Tables Mode - Chọn ô trong bảng cần thay đổi thuộc tính - Thay đổi các thuộc tính của ô trong cửa sổ Properties Inspector (G).

36

22

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

6. Các thao tác trên ô a) Merge nhiều ô thành 1 ô - Vào chế độ Design View. - Chọn nhiều ô trên bảng cần merge lại. - Trong cửa sổ Properties Inspector (G) của ô, chọn chức năng Merge Selected

Cells using spans

b) Tách 1 ô thành nhiều ô - Vào chế độ Design View. - Chọn 1 ô trong bảng cần tách ra thành nhiều ô khác nhau (double click vào ô) - Trong cửa sổ Properties Inspector (G) của ô, chọn chức năng Split cell into

Rows or Columns.

- Trong cửa sổ Split Cell, o Chọn thao tác tách ô theo dòng hay theo cột o Chọn số lượng ô được tách ra

37

23

Bài 2

: D

ream

wea

ver M

X |

9/26

/200

7

VII. Bài tập

38

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2008

Authored by: Lương Vĩ Minh

Lab2.0 - Dreamweaver CS3

Môn : Lập trình và Thiết kế Web 1

39

1

Lab

2.0

- D

ream

wea

ver

CS

3 | 1

/1/2

008

Lab2.0 - Dreamweaver CS3

Môn : Lập trình và Thiết kế Web 1

Bài tập Lab2.0 :

I. Quy định : - Bài tập làm theo cá nhân

- Thời gian làm bài : 2 tiếng

- Nộp bài trên moodle

- Đặt tên thư mục gốc [1] : Lab20_MSSV_DW1

- Sử dụng phần mềm Dreamweaver CS3 (version full hay vesion Portable)

- Sử dụng hình ảnh được cung cấp theo bài tập lab2.0

- Hủy toàn bộ bài làm trước khi rời khỏi phòng thực hành

- Bài giống nhau : 0 điểm

II. Nội dung : 1. Tạo website mới trong Dreamweaver với tên Lab20_MSSV_DW1 tương ứng với thư

mục đã tạo Lab20_MSSV_DW1.

2. Tạo 2 thư mục con trên thư mục đã gốc [1] sau : Image, Html

3. Copy các hình đã được cung cấp vào thư mục Image. Sinh viên được phép tạo thêm

thư mục con trong thư mục quy định (tùy vào sự linh hoạt và sắp xếp hợp lý).

4. Trong thư mục Html, tạo và lưu các trang web sau có tên sau :

a. Index.htm

b. MSSV_Salary.htm

c. MSSV_Chessboard.htm

d. MSSV_Chart.htm

e. MSSV_News.htm

f. MSSV_ChineseChessboard.htm

Tất cả các trang Web trên, đề có chung một đặt điểm sau :

Title của trang web : MSSV – Tên trang web

Encoding : utf-8

Phần chính của trang gồm 3 phần sau : Menu + Nội dung chính + Bản quyền

Home Salary Chessboard Chart News

[Nội dung chính – Xem các phần sau để xây dựng thêm]

2008© Bản Quyền của [Điền Họ tên SV]

Lớp LTWeb 1 – [Điền tên GVTH]

40

2

Lab

2.0

- D

ream

wea

ver

CS

3 | 1

/1/2

008

Tạo liên kết trên Menu đến các trang của website. [Điền Họ tên SV]cho liên

kết email đến account mail của sinh viên và [Điền tên GVTH] cho liên kết

email đến account mail của giáo viên tương ứng

(webprogramming1@gmail.com).

5. Xây dựng nội dung chính cho trang index.htm có nội dung sau : Xây dựng nội dung

theo yêu cầu của bài tập Lab1.0, Lab1.1 mà sinh viên đã thực hiện tuần trước (Yêu cầu

sử dụng tool Deamweaver để xây dựng lại).

6. Xây dựng nội dung chính cho trang MSSV_Salary.htm có nội dung sau :

7. Xây dựng nội dung chính cho trang MSSV_Chessboard.htm có nội dung sau : Sử dụng

hình đã được cung cấp, để xây dựng bàn cờ có giao diện sau :

41

3

Lab

2.0

- D

ream

wea

ver

CS

3 | 1

/1/2

008

8. Xây dựng nội dung chính cho trang MSSV_Chart.htm có nội dung sau : Sử dụng hình

đã được cung cấp, để xây dựng biểu đồ sau :

9. Xây dựng nội dung chính cho trang MSSV_News.htm có nội dung sau : Mỗi sinh viên,

chọn cho mình 1 website (trong danh sách sau) để rút ra 7 tin tức (không cần hình ảnh)

để xây dựng phần nội dung chính của trang này theo cấu trúc đề nghị sau :

a. Danh sách Website :

i. www.tuoitreonline.com

ii. http://vnexpress.net

iii. www.dantri.com.vn

iv. www.thanhnien.com.vn

b. Cấu trúc đề nghị :

Danh sách tin mới trong ngày 1/10/2018: (Đặt ở kiểu chữ H1)

1. Tiêu đề tin 1 (Tạo liên kết đến phần nội dung tin ở dưới)

2. Tiêu đề tin 2 3. Tiêu đề tin 3 4. …. 5. …. 6. …. 7. ….

Tiêu đề tin 1 (Đặt ở kiểu chữ H2) Nội dung Tóm tắt tin 1 (Đặt ở kiểu chữ in nghiêng + H4) Nội dung chính của tin 1 (Đặt ở kiểu chữ bình thường)

Quay về danh sách tin tức (Tạo liên kết quay lên lại danh sách tin tức)

42

4

Lab

2.0

- D

ream

wea

ver

CS

3 | 1

/1/2

008

Tiêu đề tin 2 (Đặt ở kiểu chữ H2) Nội dung Tóm tắt tin 2 (Đặt ở kiểu chữ in nghiêng + H4) Nội dung chính của tin 2 (Đặt ở kiểu chữ bình thường) Quay về danh sách tin tức (Tạo liên kết quay lên lại danh sách tin tức)

Tiêu đề tin 3 (Đặt ở kiểu chữ H2) Nội dung Tóm tắt tin 3 (Đặt ở kiểu chữ in nghiêng + H4) Nội dung chính của tin 3 (Đặt ở kiểu chữ bình thường)

Quay về danh sách tin tức (Tạo liên kết quay lên lại danh sách tin tức)

8. (Không bắt buộc – Phần tìm hiểu kỹ thuật sử dụng Dreamweaver cho SV) Xây dựng nội

dung chính cho trang MSSV_ChineseChessboard.htm có nội dung sau : Sử dụng hình

đã được cung cấp, để xây dựng bàn cờ có giao diện sau :

43

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2008 Authored by: Lương Vĩ Minh

Bài 3 : Slicing trong Photoshop

Môn : Lập trình và Thiết kế Web 1

44

1

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

Bài 3 : Slicing trong Photoshop Môn : Lập trình và Thiết kế Web 1

Contents I. Slicing ảnh ................................................................................................................. 2II. Bước 1 – Load ảnh .................................................................................................... 3III. Bước 2 – Tạo GuideLine cho hình ......................................................................... 4IV. Bước 3 - Xén ảnh (Slicing) ..................................................................................... 6V. Bước 4 : Chỉnh sửa tên ảnh Slice ........................................................................... 12VI. Bước 5 : Kết xuất Ảnh slice thành Webpage ....................................................... 13VII. Bước 6 : Loại bỏ các thành phần dư thừa, chỉnh sửa ......................................... 20

45

2

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

I. Slicing ảnh - Đây là giai đoạn thứ 2, sau khi đã phát họa giao diện website bằng các phần mềm xử lý

ảnh (Photoshop, CorelPhotopaint).

- Đầu vào của giai đoạn Slicing ảnh : Là giao diện của Website ở dạng thô o Là 1 File Photoshop o Hoặc 1 File hình (jpg, png, bitmap, ..)

- Đầu ra của giai đoạn Slicing ảnh :

o Hình ban đầu được cắt thành các mảnh nhỏ o Một trang web kết nối các hình đó thành 1 trang web hoàn chỉnh

- Các bước khi slicing ảnh bằng Photoshop :

o Bước 1 : Load 1 ảnh JPG o Bước 2 : Tạo các đường Guideline trên ảnh o Bước 3 : Tiến hành xén ảnh (slicing) o Bước 4 : Chỉnh sửa tên cho ảnh Slice o Bước 5 : Kết xuất (Export) ảnh thành một webpage hoàn chỉnh o Bước 6 : Loại bỏ các thành phần dư thừa, và chỉnh sửa o Bước 7 : Đưa vào sử dụng làm template cho Website

46

3

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

II. Bước 1 – Load ảnh - Mở chương trình Adobe Photoshop CS3 (hoặc phiên bản cũ hơn) - Mở file Photoshop hoặc file hình về giao diện của Website sẽ xây dựng. Trong bài

hướng dẫn này, ta mở file : booksonline.jpg

- Một số phím tắt khi sử dụng Photoshop CS2 (đối với phiên bản cũ, phím tắt có thể khác):

o Ctrl _ + : Zoom in (Phóng to) o Ctrl _ - : Zoom out (Thu nhỏ) o Ctrl _ R : Ẩn hay hiện thước kẻ (phần lớn, nên hiển thị thước kẻ khi slicing) o Ctrl _ Shift _ ; : Mọi thao tác sẽ snap và đường kẻ hướng dẫn (Guideline), lưới

(Grid) o Ctrl _ ; : Hiện / ẩn đường kẻ hướng dẫn Guideline o Ctrl _ ‘ : Hiện / ẩn lưới (Grid) o Mọi thao tác ẩn hiện, đều có thể thực hiện trên menu : View ….

47

4

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

III. Bước 2 – Tạo GuideLine cho hình - Trong giai đoạn này, cần hiện thị thước kẻ (Ruler) để tạo GuideLine - Mặc định, khi có Guideline thì Photoshop sẽ bật Hiển thị Guideline (Ctrl - ;)

- Mục tiêu của bước này : Tạo ra các đường kẻ trước khi sang bước slicing. Các đường

kẻ này sẽ giúp cho việc slicing dễ dàng và chính xác hơn.

- Cách tạo ra 1 Guideline: o Sử dụng chuột, Click và kéo một đường từ thước kẻ (Ruler) vào màn hình chính

o Có thể sử dụng công cụ Move Tool - (phím tắc V) trên thanh công cụ (Toolbar) để thay đổi vị trí của các Guideline có sẳn

o Để xóa một Guideline : Chọn và kéo Guideline vào thước kẻ bằng dụng cụ Move Tools.

- Lưu ý : o Guideline chỉ có thể là đường thẳng, đường ngang

o Phải quyết định kỹ sẽ xén ảnh (slicing) kỹ để từ đó, tạo Guideline đúng.

, không có đường chéo (mặc dù có Guideline đường chéo).

o Do slicing là giai đoạn tạo ra các hình ảnh nhỏ (hình chữ nhật), vì vậy, khi tạo các đường Guideline như thế nào, thì sẽ dẫn đến việc slicing như thế đó. Chú ý, khi kẻ Guideline, tốt nhất nên chọn kích thước CHẴN trên thước kẻ theo đơn vị Pixel. VD : Kéo một đường Guidline ngang ở vị trí 200 pixel, không nên tạo ở vị trí 201 pixel

o Cách đổi đơn vị trên thước kẻ : Double-Click vào thước kẻ và đổi đơn vị.

48

5

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

o Tạo Guideline đến đâu, slicing (xén) ảnh đến đó. o Sau khi tạo các Guideline xong, nên lưu lại thành file photoshop (*.psd) để chỉnh

sửa sau này.

49

6

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

IV. Bước 3 - Xén ảnh (Slicing) - Bật chế độ snap vào đường Guideline để hỗ trợ quá trình slicing (Ctrl + Shift + ; ) - Sử dụng thanh công cụ Slice Tool – (phím tắt K) để tiến hành xén ảnh theo đường

kẻ Guideiline. - Chú ý, cố gắng cảm nhận khi kéo thả Slice Tool , vì khi kéo giữa các góc giao nhau

giữa các đường Guideline, sẽ bị hút nhẹ vào gốc giao. - Tiếp tục tạo GuideLine và Slicing cho đến khi hoàn tất quá trình Slicing

50

7

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

- Xóa Slice đã tạo : Click phải lên vùng quản lý của slice (nằm gốc trái trên của Slice)

Chọn Delete

51

8

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

- File ảnh booksOnline.jpg

52

9

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

- Kết quả Guideline và Slicing cuối cùng cho file ảnh booksOnline.jpg

53

10

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

- Kết quả Guideline và Slicing cuối cùng cho file ảnh booksOnline.jpg

54

11

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

- Kết quả Slicing cuối cùng cho file ảnh booksOnline.jpg

55

12

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

V. Bước 4 : Chỉnh sửa tên ảnh Slice - Mỗi ảnh nhỏ slice sẽ có một số thứ tự và một tên. Tên mặc định là

TênFileẢnh_STTFile. - Tuy nhiên, nhưng ảnh slide quan trọng thì cần đổi tên để sau khi export ở bước sau,

phát sinh các ảnh nhỏ sẽ dễ nhận biết hơn. - Tại control điều khiển của ảnh slice cần đổi tên Chọn Edit Slice Options…

- Trong hộp thoại Slide Option, chỉnh sửa tên của slice tại mục Name.

56

13

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

VI. Bước 5 : Kết xuất Ảnh slice thành Webpage - Từ menu File Save For Web and Device… - Trong hộp thoại xuất hiện, tùy yêu cầu Webpage như thế nào mà tùy chỉnh các tham số

cho hợp lý o GIF JPEG o Quanlity : 60 100 o …

- Chọn Save Trong hộp thoại Save Optimize As, tùy chỉnh các tham số : o File name : o Save as Type : HTML and Image (*.html)

- Chọn Save. - Kết quả sẽ được một file HTML và một thư mục hình

57

14

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

58

15

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

- Kết quả trang HTML

- Kết quả mã nguồn file HTML

59

16

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

60

17

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

61

18

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

62

19

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

63

20

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

VII. Bước 6 : Loại bỏ các thành phần dư thừa, chỉnh sửa - Sử dụng phần mềm Adobe Dreamweaver CS3 để chỉnh sửa một số phần trên website

đã tạo. Tùy vào quan niệm và kỹ thuật, có thể cần phải thay đổi kích cỡ hình, và một số kỹ thuật khác

- Đây là Webpage gốc, toàn bộ nội dung trên đầy là hình ảnh slice.

64

21

Bài 3

: Sl

icin

g tro

ng P

hoto

shop

| 1

/1/2

008

- Đây là kết quả webpage đã được chỉnh sửa thay thế :

o Phần nội dung, bỏ bớt đi o Một số vùng chuyển từ thẻ <img> thành background của <td>

65

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2007

Authored by: Nguyễn Hoàng Anh - Lương Vĩ Minh

Bài 3 : Template trong Dreamweaver MX

Môn : Lập trình và Thiết kế Web 1

66

1

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

Bài 3 : Template trong Dreamweaver MX Môn : Lập trình và Thiết kế Web 1

Contents 1. Tạo Site ................................................................................................................. 2

2. Tạo một Template .................................................................................................. 4

3. Tạo vùng có thể chỉnh sửa (Editable Region) cho trang Template .......................... 6

4. Tạo một trang mới từ Template .............................................................................. 8

5. Cập nhật Template ............................................................................................... 10

67

2

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

1. Tạo Site

Trên menu chọn Site New Site...

Các thông tin cơ bản cần cung cấp là:

Tên Site (Site name) Đường dẫn đến thư mục gốc (Local root folder) Thư mục chứa hình ảnh (Default images folder)

68

3

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

Sau đó chọn OK, Site mới được tạo.

69

4

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

2. Tạo một Template

Bước 1: Thiết kế trang Html như hình sau để làm trang Template:

Các vùng Template trong trang Html vừa tạo

Hình vẽ Ý nghĩa

Vùng cố định (Locked – Non Editable)

Vùng có thể chỉnh sửa ( Editable)

70

5

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

Bước 2: Save as trang html trên thành trang Template.

o Sau khi thiết kế xong trang html ở bước 1, Trên menu của Dreamweaver vào File Save as

o Chọn kiểu save là Template files (*.dwt)

o Chọn Save , trang Template đã được tạo.

71

6

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

3. Tạo vùng có thể chỉnh sửa (Editable Region) cho trang Template

• Sau khi lưu trang dạng template ở trên, tất cả các vùng trong trang đều ở dạng không thể chỉnh sửa ở các trang được tạo từ trang Template vừa tạo ( Locked – Non Editable).

• Trong bài Bookstore chúng ta đang xây dựng, tất cả các vùng đều ở dạng cố định (Locked) cho tất cả các trang ngoại trừ vùng (main content) là khác nhau ở các trang.

• Để tạo vùng có thể chỉnh sửa cho các trang sinh từ trang Template, ta làm theo các bước sau:

Bước 1: Chọn vùng cần tạo

Bước 2: Trên thanh menu chọn InsertTemplate ObjectsEditable Region hoặc nhấn tổ hợp phím Ctr+Atl+V

Vùng có khả năng chỉnh sửa (Editable

Region)

72

7

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

• Sau đó đặt tên cho vùng này là Main_Content

• Kế tiếp chọn Ok, hoàn thành tạo vùng có thể chỉnh sửa trong trang Template (Editable Region)

73

8

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

4. Tạo một trang mới từ Template

Trên thanh menu vào File New , chọn tab Templates , sau đó chọn Templates main trên site Bookstore Template

Sau đó chọn Create, trang mới được tạo ra giống như trang Template main.

74

9

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

Trong vùng Main_Content, ta thiết kế trang như sau:

Tương tự ta tạo các trang còn lại từ trang Tempalte:

75

10

Bài 3

: Te

mpl

ate

trong

Dre

amw

eave

r MX

| 9/

26/2

007

5. Cập nhật Template

• Mở file main.dwt . • Ta tạo link cho Home là ../index.html

Nhấn Ctr+S hoặc vào FileSave để lưu lại main.dwt. Khi đó Dreamweaver sẽ hiện dialog yêu cầu cập nhật thông tin lại cho tất cả các trang được phát sinh từ trang main.dwt

Chọn Update, khi đó tất cả các trang của chúng ta đều được cập nhật đồng nhất.

76

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2007 Authored by: Trần Duy Hoàng - Lương Vĩ Minh

Bài 4 : Sử dụng CSS + Javascript

Môn : Lập trình và Thiết kế Web 1

77

1

Bài 4

: Sử

dụ

ng C

SS +

Java

scrip

t | 9

/26/

2007

Bài 4 : Sử dụng CSS + Javascript Môn : Lập trình và Thiết kế Web 1

Contents 1. Lợi ích khi sử dụng CSS trong thiết kế web: ..................................................... 22. CSS (Cascading Style Sheet): ............................................................................ 23. CSS dạng Linked: .............................................................................................. 3

Cú pháp : ............................................................................................................ 3Cách định nghĩa css trong Dreamweaver .......................................................... 3Liên kết (link) file css vào file web .htm từ Dreamweaver: .............................. 6Áp dụng Mẫu định dạng trong file css cho nội dung trang web: ...................... 6

4. Bài tập ................................................................................................................ 8Bài tập 1 : .............................................................................................................. 8Bài tập 2 : .............................................................................................................. 8Bài tập 3 : .............................................................................................................. 8

78

2

Bài 4

: Sử

dụ

ng C

SS +

Java

scrip

t | 9

/26/

2007

1. Lợi ích khi sử dụng CSS trong thiết kế web: Hãy thiết kế trang web về các bảng Thời khóa biểu của 1 trường Đại học:

TKB của Khoa CNTT:

Thứ 2 Thứ 3 Thư 4 Thứ 5 Thứ 6 Thứ 7 CN Tiết 1 TKWeb 1 LTĐT TK CSDL Tiết 2 HĐH TK CSDL TKWeb 1 TKWeb 1 CSDL Tiết 3 CSDL LTĐT HĐH TK CSDL LTĐT TKWeb 1 Tiết 4 CSDL HĐH

TKB của khoa Hóa, khoa Lý, khoa Toán, khoa Sinh, …

Với ví dụ trên, ta cần định dạng văn bản nhiều nơi. Khi có nhu cầu thay đổi định dạng (VD: thay màu s ắc cho từng môn khác nhau) thì phải tốn nhiều công sức và thời gian. Trước nhu cầu vậy, ta cần tạo ra các mẫu định dạng chung (cho từng môn) rồi áp dụng các mẫu định dạng cho từng môn học. Khi có nhu cầu thay đổi, ta chỉ cần thay đổi trên mẫu. Do các định dạng đã được định nghĩa trong tập tin css, nên phần mã HTML của trang web được thu gọn lại nhiều, giúp cho việc kiểm soát mã HTML được dễ dàng hơn.

2. CSS (Cascading Style Sheet): Là một dạng tài liệu chứa các thông tin về các mẫu định dạng mà tài liệu thông tin

này có thể được nhiều trang web sử dụng. Các mẫu này dùng để định nghĩa cách thức hiển thị (đường kẻ khung, khoảng cách giữa các dòng, …) và đ ịnh dạng (màu chữ, kiểu chữ, màu nền, …) của phần nội dung của trang web. Chú ý: Có một số trình duyệt không hỗ trợ CSS.

Các loại CSS: (gồm 3 loại)

Loại Định nghĩa – Cú pháp – Ví dụ Độ ưu tiên Format Định dạng bình thường. 1

CSS

Inline Được định nghĩa ngay tại thẻ HTML cần định dạng. Phạm vi sử dụng: Tại thẻ HTML được định nghĩa. Cú pháp, VD (Xem thêm trong trang 2 Bài 3 - HDTH).

2

Embeded Được định nghĩa ở bên trong thẻ <head> </head>. Phạm vi sử dụng: Trong file .htm đã định nghĩa. Cú pháp, VD (Xem thêm trong trang 3 Bài 3 - HDTH).

3

Linked

Được định nghĩa ở trong 1 file .css riêng lẽ. Phạm vi sử dụng: Áp dụng cho các trang web liên kết đến file .css này. Đây là dạng css được sử dụng nhiều nhấtCú pháp, VD (Xem phần tiếp theo)

. 4

Chú ý: Nếu cùng một nội dung trên trang web mà sử dụng nhiều kiểu định dạng thì nội dung đó sẽ áp dụng định dạng có độ ưu tiên cao nhất.

79

3

Bài 4

: Sử

dụ

ng C

SS +

Java

scrip

t | 9

/26/

2007

3. CSS dạng Linked: Đây là loại css được sử dụng nhiều nhất. Nó dùng để định nghĩa các mẫu định dạng và

lưu trong một file riêng lẽ (có phần mở rộng .css). Chỉ những trang web cần sử dụng các mẫu thì sẽ liên kết đến file css có chứa mẫu đó.

Cú pháp : Cú pháp Giải thích Ví dụ

.Selector1 { Property1: Value; Property2: Value; } .Selector2 { Property1: Value; Property2: Value; }

Selector: + Tên thẻ HTML (nếu mẫu này định dạng cho thẻ). + Tên mẫu mới do người dùng định nghĩa (các tên này không được trùng lập nhau trong cùng một file css).

VD1p

: Định nghĩa mẫu cho thẻ HTML

{ color : #008000; font-weight : bold } VD2.Mau1

: Định nghĩa mẫu mới

{ color : #008000; font-weight : bold }

Cách định nghĩa css trong Dreamweaver - Bước

File

1: Tạo file css mới hoặc mở file css có sẳn để chèn thêm mẫu định dạng mới.

New… Basic page Chọn CSS

80

4

Bài 4

: Sử

dụ

ng C

SS +

Java

scrip

t | 9

/26/

2007

- Bước

Chọn Menu Window - CSS Style

2: Định nghĩa mẫu định dạng mới.

Chọn nút Add

Class : định nghĩa một mẫu định dạng mới (có thể áp dụng cho bất kì thẻ Tag nào) Tag : định nghĩa lại mẫu định dạng cho 1 Tag nhất định Advanced : định nghĩa mẫu định dạng cho những Taq có ID nhất định. Name : tên của định dạng.

81

5

Bài 4

: Sử

dụ

ng C

SS +

Java

scrip

t | 9

/26/

2007

Nhập các thông tin định dạng.

Kết quả ta được một định nghĩa mẫu mới.

- Bước 3-

: Định nghĩa thêm các mẫu mói nếu cần (quay lại bước 2). Bước 4

: Lưu file css (File Save).

82

6

Bài 4

: Sử

dụ

ng C

SS +

Java

scrip

t | 9

/26/

2007

Liên kết (link) file css vào file web .htm từ Dreamweaver: Chú ý: Phần này chỉ thực hiện khi file css chưa từng được liên kết vào file web.htm. Nếu file css đã liên kết vào file web htm, ta bỏ qua bước này.

- Bước 1-

: Mở trang web.htm cần tạo liên kết đến file .css Bước 2

Áp dụng Mẫu định dạng trong file css cho nộ i dung trang web:

: Tạo liên kết. Từ menu Text CSS Style Attach Style Sheet Chọn file .css cần liên kết.

(áp dụng cho định dạng ô trong bảng Thời khóa biểu)

Thứ 2 Thứ 3 Thư 4 Thứ 5 Thứ 6 Thứ 7 CN Tiết 1 TKWeb 1 LTĐT TK CSDL Tiết 2 HĐH TK CSDL TKWeb 1 TKWeb 1 CSDL Tiết 3 CSDL LTĐT HĐH TK CSDL LTĐT TKWeb 1 Tiết 4 CSDL HĐH

- Bước 1-

: Chọn ô trên bảng cần áp dụng mẫu Mau1 trong file formatTable.css Bước 2

- : Chọn cell cần định dạng. Vào cửa sổ Property chọn style : style1

Bước 3

: Từ cửa sổ Modify Style, chọn tên mẫu cần áp dụng trong danh sách Class Ok

- Bước 4: Kiển tra lại kết quả áp dụng mẫu. Chọn ô vừa mới áp dụng mẫu, chuyển qua chế độ Code.

83

7

Bài 4

: Sử

dụ

ng C

SS +

Java

scrip

t | 9

/26/

2007

Bảng so sánh mã lệnh HTML cho 1dòng trong thời khóa biểu:

Không sử dụng css, chỉ sử dụng định dạng bình thường

Sử dụng CSS linked

84

8

Bài 4

: Sử

dụ

ng C

SS +

Java

scrip

t | 9

/26/

2007

4. Bài tập

Bài tập 1 : Hoàn thành bài ví dụ Thời khóa biểu

Bài tập 2 : Làm highline menu cho trang web (kết hợp Java script)

Tham khảo đoạn mã lệnh sau.

<html> <head> <title>HightLight MENU</title> <link href="main.css" rel="stylesheet" type="text/css"> <Script language="JavaScript"> function HightLight(what, onoff) { var className = ((onoff == 1) ? 'mainmenu_over' : 'mainmenu'); what.className = className; } </Script> </head> <body>

<table> <tr>

<a href="www.fit.hcmuns.edu.vn"> <td width="200" class="mainmenu"

OnMouseOver="HightLight(this, 1)" OnMouseOut="HightLight(this, 0)">Khoa CNTT - Truong DHKHTN</td>

</a> </tr> <tr>

<a href="www.w3schools.com"> <td width="200" class="mainmenu"

OnMouseOver="HightLight(this, 1)" OnMouseOut="HightLight(this, 0)">W3Schools</td>

</a> </tr>

</table> </body> </html>

Bài tập 3 : Sử dụng CSS cho tất cả trang web đã làm.

Tổ chức thư mục lưu file css. Mỗi loại định dạng (VD: Định dạng cho table, định dạng cho font, định dạng cho paragraph, định dạng border cho hình, ….) lưu trong một file css riêng.

85

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2009

Authored by: Lương Vĩ Minh – Nguyễn Đức Huy

Bài 5 : Sử dụng Java Script trong Form và thiết kế Menu

Môn : Lập trình và Thiết kế Web 1

86

1

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

Bài 5 : Sử dụng Java Script trong Form và thiết kế Menu

Môn : Lập trình và Thiết kế Web 1

Mục lục

1 DÙNG JAVASCRIPT KIểM TRA CÁC ĐIềU KIệN TRÊN FORM .............................................. 2

1.1 YÊU CầU ................................................................................................................ 2

1.2 HƯớNG DẫN THIếT Kế FORM ................................................................................... 2

1.2.1 BƯớC 1: TạO NềN CHO FORM ........................................................................... 2

1.2.2 BƯớC 2 : THIếT Kế TABLE ............................................................................... 3

1.2.3 BƯớC 3: TạO CÁC CONTROLS VÀ TEXT THEO MẫU ĐÃ YÊU CầU. ....................... 4

1.2.4 BƯớC 4: KIểM TRA KếT QUả THựC HIệN. ........................................................... 5

1.3 HƯớNG DẫN Sử DụNG JAVASCRIPT .......................................................................... 6

1.4 BÀI TậP THựC HÀNH: .............................................................................................. 8

2 Sử DụNG JAVASCRIPT Để LÀM CÁC HIệU ứNG MENU ....................................................... 8

2.1 THIếT Kế HIệU ứNG MENU DọC ................................................................................ 8

2.1.1 YÊU CầU ......................................................................................................... 8

2.1.2 HƯớNG DẫN THIếT Kế MENU DọC ..................................................................... 9

2.1.3 HƯớNG DẫN Sử DụNG JAVASCRIPT ................................................................. 12

2.2 THIếT Kế HIệU ứNG MENU NGANG ........................................................................ 12

2.2.1 YÊU CầU ....................................................................................................... 12

2.2.2 HƯớNG DẫN THIếT Kế MENU NGANG ............................................................. 13

2.2.3 HƯớNG DẫN Sử DụNG JAVASCRIPT ................................................................. 15

87

2

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

1 Dùng JavaScript kiểm tra các điều kiện trên Form

1.1 Yêu cầu

Thiết kế form có nội dung sau:

Sử dụng Javascript để kiểm tra thông tin nhập :

Tên đăng nhập không được phép rỗng

Mật khẩu phải chứa ít nhất 5 ký tự

Mật khẩu nhập lại phải trùng với mật khẩu

1.2 Hướng dẫn thiết kế Form

1.2.1 Bước 1: Tạo nền cho form

88

3

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

Từ menu

Insert Form

chọn Form.

Mã lệnh HTML tương ứng cho việc tạo một Form:

<form method="POST">

</form>

1.2.2 Bước 2 : Thiết kế table

Từ menu Insert

Table

* Table phải

nằm trong Form

89

4

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

1.2.3 Bước 3: Tạo các controls và text theo mẫu đã yêu cầu.

TEXT BOX Control

<input type="text" name="……">

STT TextField Char

width

Type HTML Code

1 textTenDN 20 Single line <input type="text"

name="textTenDN">

2 textMatKhau 15 Password <input type="password"

name="textMatKhau">

3 textMatKhauGoLai 15 Password <input type="password"

name="textMatKhauGoLai">

… … … … …

BUTTON Control

<input type="submit" value="……" name="……">

STT Button Value Action HTML Code

90

5

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

name

1 btDangky Đăng ký Submit <input type="submit" value="Đăng ký"

name="btDangky">

2 btXoa Xóa Reset <input type="reset" value="Xóa"

name="btXoa">

Kết quả :

1.2.4 Bước 4: Kiểm tra kết quả thực hiện.

Lưu trang web lại. Nhấn F12 để xem trang web bằng trình duyệt web IE.

91

6

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

1.3 Hướng dẫn sử dụng Javascript

Bước 1 : Thống nhất tên các controls sử dụng trong form trên.

STT Tên control Loại control

1 textTenDN

Textbox

2 textMatkhau Textbox

3 textMatkhaugolai Textbox

4 btDangky Button

5 btXoa Button

Bước 2 : Tạo một trang web bất kỳ có tên Dangkythanhcong.htm. Trang web này sẽ

hiện thị khi người dùng nhấn vào nút “Đăng ký” và việc kiểm tra dữ liệu thành công.

Bước 3 : Đặt tên cho Form là DKUser

Bước 4 : Nhập đoạn Javascript vào trong tab <head>

<form name="DKUser" method="POST">

92

7

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

Bước 5 : gọi hàm kiểm tra khi bấm vào nút submit. Tại phần khai báo thẻ <form> của

trang web, sửa lại mã lệnh sau:

<form name="DKUser" method="POST">

<form name="DKUser" method="POST" action="Dangkythanhcong.htm"

onsubmit="return KiemTra()">

Thuộc tính name: Đặt tên cho form đang sử dụng.

Thuộc tính method: Chọn hình thức truyền dữ liệu với server (Post/Get)

Thuộc tính action: Chỉ định địa chỉ URL được gọi khi button (có thuộc tính submit) được

nhấn.

Thuộc tính onsubmit: Chỉ định hàm KiemTra() sẽ được gọi khi button (có thuộc tính

submit) được nhấn. Nếu hàm trả về giá trị False thì thuộc tính action bị bỏ qua và ngược

lại.

Bước 6 : Kiểm tra kết quả trang web

Lưu trang web lại.

Nhấn F12 để mở trang web bằng IE.

93

8

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

Tạo các trường hợp nhập dữ liệu khác nhau để kiểm tra kết quả trang web:

Lần 1: Tên đăng nhập bị bỏ trống.

Lần 2: Mật khẩu bị bỏ trống.

Lần 3: Mật khẩu ngắn hơn 5 ký tự.

Lần 4: Gõ lại mật khẩu bị bỏ trống.

Lần 5: Nhập đầy đủ, đúng các thông tin cần thiết.

1.4 Bài tập thực hành:

Tìm hiểu thêm các control khác (listbox, combo box, radio Button, checkbox, …) và

thuộc tính của nó. Hoàn thành đầy đủ form đăng ký theo yêu cầu.

2 Sử dụng JavaScript để làm các hiệu ứng Menu

2.1 Thiết kế hiệu ứng Menu dọc

2.1.1 Yêu cầu

Thiết kế hệ thống Menu dọc 3 cấp giống hình như sau:

Hệ thống Menu có 3 cấp với các đề mục như sau:

Thể thao o Bóng đá o Bơi lội o Bóng bàn

94

9

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

Vi tính o Sản phẩm mới o Kinh nghiệm o Tin tức công nghệ

Tin trong nước Tin nước ngoài

Giới thiệu

2.1.2 Hướng dẫn thiết kế Menu dọc

Định dạng các Class CSS có nội dung như sau:

95

10

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

Tạo một website có nội dung đoạn mã HTML như sau:

96

11

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

97

12

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

2.1.3 Hướng dẫn sử dụng JavaScript

Soạn đoạn Code JavaScript có nội dung như sau:

Dùng thuộc tính visibility của CSS để cho hiện hoặc ẩn một tab HTML. Lợi dụng điểm

này để làm hiệu ứng menu

Bắt sự kiện mouseOver (khi con trỏ chuột đang nằm trong phạm vi của tab HTML) và

sự kiện mouseOut (khi con trỏ chuột vừa mới rời khỏi vùng phạm vi của tab HTML) để

gọi đến hàm showMenu để set thuộc tính visibility của tab HTML đó lại thành ẩn hay

hiện.

2.2 Thiết kế hiệu ứng Menu ngang

2.2.1 Yêu cầu

Thiết kế hệ thống Menu ngang 2 cấp như sau:

98

13

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

Hệ thống Menu ngang 2 cấp với các đề mục như sau:

Trang chủ

o Mục 1.1

o Mục 1.2

o Mục 1.3

o Mục 1.4

Asp.net

o Mục 2.1

o Mục 2.2

o Mục 2.3

C#

2.2.2 Hướng dẫn thiết kế Menu ngang

Định dạng các Class CSS có nội dung như sau:

Tạo một website có nội dung đoạn mã HTML như sau:

99

14

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

100

15

Bà

i 5

: S

ử d

ụn

g J

ava

Script tr

on

g F

orm

và

th

iết kế

Me

nu

| 8

/14

/200

9

2.2.3 Hướng dẫn sử dụng JavaScript

Soạn đoạn Code JavaScript có nội dung như sau:

Dùng thuộc tính visibility của CSS để cho hiện hoặc ẩn một tab HTML. Lợi dụng điểm

này để làm hiệu ứng menu

Bắt sự kiện mouseOver (khi con trỏ chuột đang nằm trong phạm vi của tab HTML) và

sự kiện mouseOut (khi con trỏ chuột vừa mới rời khỏi vùng phạm vi của tab HTML) để

gọi đến hàm showMenu để set thuộc tính visibility của tab HTML đó lại thành ẩn hay

hiện.

101

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2007 Authored by: Trần Duy Hoàng - Lương Vĩ Minh

Bài 6 : PHP cơ bản

Môn : Lập trình và Thiết kế Web 1

102

1

Bài 6

: PH

P c

ản

| 9/

26/2

007

Bài 6 : PHP cơ bản Môn : Lập trình và Thiết kế Web 1

Table of Contents 1. Cài đặt Wamp ............................................................................................................ 22. Tạo thư mục ảo ......................................................................................................... 23. BT1: ............................................................................................................................. 34. BT2: ............................................................................................................................. 45. BT3: ............................................................................................................................. 56. PHP và form .............................................................................................................. 6

Tạo 2 trang web PHP có nội dung sau: .................................................................... 6Một số lưu ý về Form trong trang PHP: .................................................................... 6Phương thức Get – đối tượng $_GET : .................................................................... 6Phương thức Post – đối tượng $_POST : ................................................................ 7Một số lưu ý khi truyền dữ liệu: .................................................................................. 8

7. Bài tập mở rộng ........................................................................................................... 9Bài tập 1 ..................................................................................................................... 9Bài tập 2 – Mở rộng cho bài tập 1: ......................................................................... 9

8. Mục lục 1 : Cài đặt WAMP .................................................................................... 10Download bản cài đặt ................................................................................................ 10Quá trình cài đặt ......................................................................................................... 10

Lựa chọn cách thức khởi động ............................................................................. 10Chọn thư mục gốc để lưu Website ...................................................................... 11Khai báo tham số hỗ trợ việc gửi mail ................................................................. 11Khai báo địa chỉ mail để người nhận biết bạn là ai ........................................... 12Hoàn tất việc cài đặt và chạy thử ......................................................................... 12

Để chạy thử Web bạn làm như sau: ........................................................................ 12

103

2

Bài 6

: PH

P c

ản

| 9/

26/2

007

1. Cài đặt Wamp - Wamp là một gói phần mềm Web Server tất cả trong một gồm: Apache, MySQL, PHP

chạy trên nền Windows và miễn phí. - Xem hướng dẫn cài đặt ở phần mục lục 1.

2. Tạo thư mục ảo - Khi cài đặt Wamp mặt định sẽ tạo cho bạn thư mục gốc lưu trữ web dùng chung (www

directory), mặt định thường là C:/wamp/www - Khi muốn chạy 1 trang index.php trong thư mục MyWeb bạn phải chép thư mục

MyWeb vào thư mục gốc lưu trữ web (mặc định C:/wamp/www). Vào trình duyệt gõ http://localhost/MyWeb/index.php

- Để có thể để chạy trang PHP trên một thư mục khác bạn phải tạo một Alias Directory o Vào biểu tượng Wamp Alias Directories Add an alias

o Enter your Alias : Nhập myweb o Enter the destination of your alias : d:/myweb (thư mục lưu trang web) o Vào trình duyệt nhập http://localhost/myweb/index.php

104

3

Bài 6

: PH

P c

ản

| 9/

26/2

007

3. BT1: Viết trang PHP hiển thị dãy số từ 1 đến 100 sao cho số chẵn là chữ in đậm, số lẽ là chữ

in thường. Kết quả: 1 2 3 4….., 100 Hướng dẫn: Sử dụng vòng lập for, 1 biến đếm i, toán tử % Mã lệnh :

105

4

Bài 6

: PH

P c

ản

| 9/

26/2

007

4. BT2: Viết trang PHP hiển thị thông tin sau:

STT Tên sách Nội dung sách 1 Tensach1 Noidung1 2 Tensach2 Noidung2 … … … … … … … … …

100 Tensach100 Noidung100 Hướng dẫn: Sử dụng vòng lập for, thẻ <table> Mã lệnh:

106

5

Bài 6

: PH

P c

ản

| 9/

26/2

007

5. BT3: - Nhập dữ liệu cho một listbox chứa danh sách năm từ 1900 đến năm hiện tại.

Hướng dẫn: Sử dụng các thẻ sau: + Thẻ tạo listbox: <select>, <option>, + Tạo biến Date, hàm getYear(), vòng lập for.

Mã lệnh:

107

6

Bài 6

: PH

P c

ản

| 9/

26/2

007

6. PHP và form

Tạo 2 trang web PHP có nộ i dung sau:

Trang1.php

Form( name=“ABC” ) Textbox( name= “fFirstname” value=“Hong” ) Textbox( name= “fLastname” value=“Nguyen Thi” ) Button( type=“submit” value =“Submit” name=“fSubmit” ) Button( type=“reset” value =“Reset” name=“fReset” )

Trang2.php

Hiển thị thông tin trong textbox(Firstname) của Trang1.php tại vị trí (1) Hiển thị thông tin trong textbox(Lastname) của Trang1.php tại vị trí (2)

Một số lưu ý v ề Form trong trang PHP: - Dữ liệu từ Form được truyền đến trang PHP (được khai báo trong thuộc tính ACTION

của Form) sau khi người dùng nhấn vào nút có kiểu submit. - Phương thức dữ liệu từ Form truyền đến trang PHP được quy định bởi thuộc tính

METHOD của Form. Có 2 phương thức: Get và Post. - Trang PHP truy xuất dữ liệu của Form thông qua 2 đối tượng $_GET, $_POST

o $_GET : lấy dữ liệu trong form khi phương thức truyền là GET o $_POST : lấy dữ liệu trong form khi phương thức truyền là POST

- BT: Hãy khai báo thuộc tính Action của Form ABC trong Trang1.php là “Trang2.php”.

Phương thức Get – đối tượng $_GET : - Phương thức GET : Là phương thức dùng để truyền dữ liệu của Form:

<form action=“URL” method=“GET”> … </form> - Đối tượng $_GET: Dùng để truy xuất giá trị của control trong Form ABC khi được

truyền đến trang PHP bằng phương thức GET: $_GET[“Tên Control”]; VD: Mã lệnh HTML của Trang2.php (truy xuất dữ liệu từ form ABC của Trang1.php)

Trang2.PHP Trang kết quả HTML phát sinh tương ứng <HTML> <Head> </Head> <Body> <?php $FName = $_GET[“fFirstname”]; $LName = $_GET[“fLastname”]; ?> <p> Your First name is : <?php echo $FName; ?> </p>

<HTML> <Head> </Head> <Body> <p> Your First name is : Huong </p> <p> Your Last name is : Nguyen Thi </p> </Body> </HTML>

108

7

Bài 6

: PH

P c

ản

| 9/

26/2

007

<p> Your Last name is : <?php echo $LName; ?> </p> </Body> </HTML>

- Đặc điểm khi sử dụng phương thức GET:

o Các giá trị của control khi truyền đi sẽ hiển thị trên thanh Address của trình duyệt web. Trong ví dụ trên, sau khi nhấn nút Submit tại trong Trang1.php, thanh address của IE có giá trị sau:

http://localhost/MyWebSite/trang2.php?fFirstname=Hong&fLastname=Nguyen+Thi&Submit=Submit

o Chỉ có thể truyền đi một lượng thông tin nhỏ.

Phương thức Post – đối tượng $_POST : - Phương thức POST: Là phương thức dùng để truyền dữ liệu của Form

<form action=“URL” method=“POST”> … </form> - Phương thức Request.Form: Dùng để truy xuất giá trị của control trong Form ABC khi

được truyền đến trang PHP bằng phương thức POST: $_POST[“Tên Control”]; VD: Mã lệnh HTML của Trang2.php (truy xuất dữ liệu từ form ABC của Trang1.php)

Trang2.PHP Trang kết quả HTML tương ứng <HTML> <Head> </Head> <Body> <?php $FName = $_POST[“fFirstname”]; $LName = $_POST[“fLastname”]; ?> <p>Your First name is : <?php echo FName; ?> </p> <p>Your Last name is : <?php echo LName; ?> </p> </Body> </HTML>

<HTML> <Head> </Head> <Body> <p>Your First name is : Huong </p> <p>Your Last name is : Nguyen Thi </p> </Body> </HTML>

- Đặc điểm khi sử dụng phương thức POST:

o Các giá trị của control khi truyền đi sẽ KHÔNG ĐƯỢC hiển thị trên thanh Address của trình duyệt web. Trong ví dụ trên, sau khi nhấn nút Submit tại trong Trang1.php, thanh address của IE có giá trị sau:

http://localhost/MyWebSite/trang2.php

109

8

Bài 6

: PH

P c

ản

| 9/

26/2

007

o KHÔNG giới hạn lượng dữ liệu truyền đi.

Một số lưu ý khi truy ền dữ l iệu: - Nếu không xác định được phương thức truyền dữ liệu của trang PHP trước, sử dụng

đối tượng $_REQUEST[“Ten control”] để truy xuất giá trị của control. - Control Checkbox: if (IsSet($_GET["checkbox"])) echo "Được chọn"; - Control Nhóm Radiobutton: Trả về giá trị thuộc tính value của Radiobutton được chọn.

VD(name=“Loai” value=“L1”) (name=“Loai” value=“L2” checked) (name=“Loai” value=“L3”)

: Có 3 radiobutton có giá trị thuộc tính tương ứng sau:

Ở đây, radiobutton giữa được chọn. Vậy: $_GET[“Loai”]; trả về giá trị “L2”

- Control DropDown-Box: Trả về giá trị của item được chọn (giá trị thuộc tính value của thẻ <option value= “Giá trị trả về”>. Nếu thẻ <option> không có thuộc tính value thì sẽ trả về chuổi nằm giữa thẻ <option>Giá trị trả về</option>).

110

9

Bài 6

: PH

P c

ản

| 9/

26/2

007

7. Bài tập mở rộng

Bài tập 1 - Yêu cầu : Viết trang web thực hiện phép tính trên 2 số.

Trang Nhập liệu: Cho người dùng chọn phép tính, nhập giá trị 2 số. Trang Kết quả: Hiện phép tính đã chọn, giá trị của 2 số và kết quả của phép tính. Trong trang này, có link cho người dùng quay về trang trước đó.

- Hướng dẫn : Viết các hàm cộng, trừ, nhân, chia cho 2 số. Sử dụng CSS cho định dạng màu chữ, Canh lề chữ trong textbox. Sử dụng đối tượng window.history trong javascript để quay lại trang trước đó. <a href="javascript:window.history.back(-1);">Tro ve trang truoc</a>

- Mẫu của 2 trang web. Trang Nhập liệu

Trang kết quả

Bài tập 2 – Mở rộng cho bài tập 1: - Mở rộng cho bài tập 1. - Viết hàm kiểm tra dữ liệu nhập vào (kiểm tra ở trang kết quả). Nếu dữ liệu là chuỗi ký tự

hay không hợp lệ (phép chia cho 0, …), tự động quay lại trang web trước đó. - Xử lý trường hợp là số thực và điều khiển xuất dữ liệu.

111

10

Bài 6

: PH

P c

ản

| 9/

26/2

007

8. Mục lục 1 : Cài đặt WAMP

Download bản cài đặt

Download bản cài đặt tại địa chỉ http://www.wampserver.com/en/download.php

Quá trình cài đ ặt

Trong quá trình cài đặt các bạn lưu ý các bước sau

Lựa chọn cách thức khởi động

Nếu đánh dấu vào ô kiểm: WAMP sẽ được khởi động cùng Windows như một dịch vụ (bạn nên chọn)

112

11

Bài 6

: PH

P c

ản

| 9/

26/2

007

Chọn thư mục gốc để lưu Website

Theo mặc định thư mục gốc lưu trữ Web: C:/wamp/www, tuy nhiên bạn nên chọn một vị trí khác, chẳng hạn:

D:/www

Khai báo tham số hỗ trợ việc gử i mail

113

12

Bài 6

: PH

P c

ản

| 9/

26/2

007

Khai báo địa ch ỉ mail để ngườ i nhận biết bạn là ai

Chỉ có tác dụng nếu bạn đã khai báo đúng trong bước ở trên

Hoàn tất việc cài đặt và chạy thử

Sau khi bạn cài đặt thành công, bạn sẽ thấy biểu tượng của WAMP ở góc màn hình như dưới đây:

Để chạy thử Web bạn làm như sau: Tạo một file index.php

<?php echo('Welcome to VINAORA.COM');

?>

trong thư mục lưu trữ Web (D:/www/)

Nhấn vào mục "Localhost" của Menu WAMP hoặc mở trình duyệt và gõ "http://localhost/"

Để quản lý Cơ s ở dữ liệu MySQL

để kiểm tra kết quả

Bạn nhấn vào dòng phpMyadmin của Menu WAMP hoặc mở trình duyệt và gõ: http://localhost/phpMyadmin/

114

13

Bài 6

: PH

P c

ản

| 9/

26/2

007

115

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2007

Authored by: Ngô Bá Nam Phương - Lương Vĩ Minh

Bài 7 : PHP kết nối CSDL MySQL

Môn : Lập trình và Thiết kế Web 1

116

1

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

Bài 7 : PHP kết nối CSDL MySQL Môn : Lập trình và Thiết kế Web 1

Table of Contents 1. CấU TRÚC THƯ MụC : ................................................................................................ 2

2. CấU TRÚC CSDL : ................................................................................................... 2

3. TạO KếT NốI ĐếN CSDL : ........................................................................................... 3

4. SƠ Đồ Hệ THốNG WEBSITE CầN XÂY DựNG: .................................................................. 5

4.1. TRANG CHủ ( TRANGCHU.PHP ) .......................................................................... 5

4.2. TRANG ĐĂNG NHậP ( DANGNHAP.PHP ) ............................................................... 6

4.3. TÌM SÁCH (TIMSACH.PHP) & Xử LÝ TÌM SÁCH (XLTIMSACH.PHP) ............................. 9

4.4. TRANG Xử L‎Y XOA SACH ( XLXOA.PHP ) ............................................................... 0

4.5. TRANG THEM MộT DầU SACH MớI ( THEMSACH.PHP ) ............................................ 1

4.6. TRANG CậP NHậT THONG TIN SACH (CAPNHAT.PHP) ............................................. 5

117

2

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

Yêu cầu: Trong ứng dụng BookStore Online, xây dựng các chức năng Tìm kiếm, Thêm, Xóa, Cập nhật thông tin sách

1. Cấu trúc thư mục : Tạo thư mục có cấu trúc như sau trong thư mục C:\wamp\www\ để lưu website BookStoreOnline:

C:\wamp\www\BookStoreOnline\ C:\wamp\www\BookStoreOnline\script\ : Chứa các file javascript C:\wamp\www\BookStoreOnline\css\ : Chứa các file định dạng css C:\wamp\www\BookStoreOnline\BookImages\ : Chứa ảnh bìa của các cuốn sách C:\wamp\www\BookStoreOnline\ : Chứa các trang .php, .html

2. Cấu trúc CSDL : Sử dụng MySQL, tạo CSDL gồm 3 bảng Book, Category, Publisher có cấu trúc như sau:

a- Bảng Book :

b- Bảng Category :

c- Bảng Publisher :

118

3

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

3. Tạo kết nối đến CSDL : Do đa số các trang web đều kết nối đến CSDL, do đó ta sẽ đóng gói việc kết nối với

CSDL trong 1 class riêng để dễ dàng hơn trong việc sử dụng

Tạo file DataProvider.php

Lưu DataProvider.php trong thư mục C:\wamp\www\BookStoreOnline\

Khai báo class DataProvider trong DataProvider.php

<?php class DataProvider { public static function ExecuteQuery($sql) { $connection = mysql_connect("localhost","root","") or die ("couldn't connect to localhost"); // ebookDB : Tên CSDL mysql_select_db("ebookDB",$connection); mysql_query("set names 'utf8'"); $result = mysql_query($sql,$connection); mysql_close($connection); return $result; } } ?>

Các trang nào cần sử dụng class DataProvider sử dụng khai báo sau:

<?php include_once("DataProvider.php"); ?>

119

4

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

Để thực thi hàm static trong vsphp:

Trong VS.PHP, từ cửa sổ Solution Explorer, chọn PHP Project R-Click Properties

Chọn Configuration Manager

Trong mục Active solution platform, chọn PHP 5:

120

5

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

4. Sơ đồ hệ thống website cần xây dựng:

4.1. Trang chủ ( TrangChu.php )

TrangChu.php

TimSach.php DangNhap.php

xlTimSach.php

ThemSach.php xlXoa.php CapNhat.php

121

6

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

4 .2. Trang đăng nhập ( DangNhap.php )

Mã lệnh

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dang nhap he thong</title> </head> <body> <form name="formDangnhap" method="post" action="DangNhap.php"> <table width="400" border="0"> <tr> <td>Tên đăng nhập</td> <td> <input type="text" name="txtTenDangNhap"/> </td> </tr> <tr> <td>Mật khẩu</td> <td> <input type="password" name="txtMatKhau" /> </td> </tr> <tr> <td align="right">

<input type="submit" name="btnDangNhap" value="Đăng nhập" /> </td> <td>

122

7

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

<input type="reset" name="btnLamLai" value="Làm lại" />

</td> </tr> <tr> <td ><a href="#">Trở về trang chủ</a></td> <td>&nbsp;</td> </tr> </table> </form> </body> </html>

Bổ sung mã lệnh php xử lý việc đăng nhập trong trang DangNhap.php:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dang nhap he thong</title> </head> <body> <?php $tenDangNhap = $_REQUEST["txtTenDangNhap"]; $matKhau = $_REQUEST["txtMatKhau"]; $ketQuaDangNhap = false; include_once("DataProvider.php"); $dsNguoiDung = DataProvider::ExecuteQuery("Select * From User"); if($dsNguoiDung != false) { while($row = mysql_fetch_array($dsNguoiDung,MYSQL_ASSOC)) { if($tenDangNhap == $row["UserName"] && $matKhau == $row["Password"]) { $ketQuaDangNhap = true; } } } if($ketQuaDangNhap == false)

123

8

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

{ ?> <form name="formDangnhap" method="post" action="DangNhap.php"> <table width="400" border="0"> <tr> <td>Tên đăng nhập</td> <td> <input type="text" name="txtTenDangNhap" /> </td> </tr> <tr> <td>Mật khẩu</td> <td><input type="password" name="txtMatKhau" /></td> </tr> <tr> <td align="right">

<input type="submit" name="btnDangNhap" value="Đăng nhập" /></td> <td

<input type="reset" name="btnLamLai" value="Làm lại" /></td> </tr> <tr> <td ><a href="#">Trở về trang chủ</a></td> <td>&nbsp;</td> </tr> </table> </form> <?php } else { echo ("Xin chào " . $tenDangNhap); ?> <a href="TrangChu.php" >Trở về trang chủ</a> <?php } ?> </body> </html>

124

9

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

4 .3. Tìm sách (TimSach.php) & Xử lý tìm sách (xlTimsach.php)

1.

Tìm sách

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tim sach</title> </head> <body> <form name="form1" method="post" action="xlTimSach.php"> <table width="400" border="0"> <tr> <td>Tên sách</td> <td><input type="text" name="txtTenSach" id="txtTenSach" /></td> </tr> <tr> <td align="right">

<input type="submit" name="btnTim" id="btnTim" value="Tìm sách" /> </td> <td>

<input type="reset" name="btnTimLai" value="Tìm lại" /> </td> </tr> <tr>

125

10

Bài 7

: PH

P kế

t nố

i CSD

L M

ySQL

| 9

/26/

2007

<td ><a href="#">Trở về trang chủ</a></td> <td>&nbsp;</td> </tr> </table> </form> </body> </html>

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

Dựa vào file 01_FashionShop.mwb thực hiện các câu truy vấn sau

:

( Để mở file 01_FashionShop.mwb cần cài MySQL Workbench).

1) Lấy 10 sản phẩm có ngày nhập kho mới nhất.

2) Giả sử SanPham_Ma ( bảng SanPham) có mã số tăng dần ( từ 1

→ 100 ). Hãy lấy 10 sản phẩm bắt đầu từ mã số 15.

( Kết quả : Lấy được 10 sản phẩm có mã từ 15 → 24 ).

3) Tìm kiếm sản phẩm theo nhiều tiêu chí ( Tên sản phẩm, Mô tả,

Nhà sản xuất, chất liệu ).

4) Tìm kiếm sản phẩm có giá trong khoảng 1.000.000 đến

5.000.000

5) Lấy ngày hiện tại.

6) Giả sử 1 sản phẩm có giá là NULL. Hãy viết câu câu truy vấn

tính thành tiền khi biết giá và số lượng mua. Do bảng SanPham

không có số lượng nên mặc định số lượng = 5.

( Thành tiền = giá* 5 ) . Lưu ý : giá có giá trị NULL, không

phải là 0.

7) Lấy ra sản phẩm có giá cao nhất được nhập kho tháng 10.

8) Lấy danh sách khách hàng ( bảng TaiKhoan) đặt hàng trong

tháng 10 và có tổng có tổng tiền đơn đặt hàng lớn hơn

5.000.000.

( Hướng dẫn : tổng tiền đơn đặt hàng = Tổng GiaMua trong

bảng ChiTietDonDatHang ).

9) Lấy danh sách khách hàng mua các sản phẩm nhập kho tháng 10

và có tổng tiền đơn đặt hàng lớn hơn 5.000.000.

10) Lấy danh sách sản phẩm nhập kho tháng 10 chưa được

khách hàng “ Nguyễn Văn A “ đặt hàng.

141

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2009 Authored by: – Nguyễn Đức Huy

Bài 8 : PHP nâng cao

Môn : Lập trình và Thiết kế Web 1

142

Bài 8

: PH

P nâ

ng c

ao |

1/1

/200

9

Bài 8 : PHP nâng cao Môn : Lập trình và Thiết kế Web 1

Mục lục 1 Kỹ thuật Upload File ............................................................................. 2

1.1 Tạo thư mục chưa file UPLOAD ...................................................... 21.2 Tạo Form upload file ........................................................................ 31.3 Tạo file xử lý File PHP upload lên server ........................................ 41.4 Một số cấu hình php.ini .................................................................... 5

2 Kỹ thuật Paging ..................................................................................... 53 Kỹ thuật Session ................................................................................... 8

143

Bài 8

: PH

P nâ

ng c

ao |

1/1

/200

9

1 Kỹ thuật Upload File

1.1 Tạo thư mục chưa file UPLOAD Tạo thư mục upload trong thư mục web. Nơi các file upload lên sẽ được lưu trữ tại

đây.

Ví dụ: c:\wamp\www\carshop\ upload

Và thực hiện phân quyền cho chư mục upload này để wamp có thể ghi file lên thư mục này.

Ta phần quyền lại cho thư mục c:\wamp\CarShop\upload với 2 quyền đăng nhập Everyone và IUSR (trong XP là Internet Guest Account) với permission là FULL control.

Trong trường hợp lỗi không upload file lên được server các bạn nên xem lại lỗi này.

144

Bài 8

: PH

P nâ

ng c

ao |

1/1

/200

9

1.2 Tạo Form upload file Tạo file FormUpload.php là giao diện để người dùng chọn file upload lên server.

File sẽ có nội dung như sau:

File FormUpload.php sẽ có giao diện như sau:

Khi click vào button Upload thì thông tìn của file và nội dung file sẽ được chuyển sang file XuLyUpload.php để thực hiện việc kiển tra, xử lý và đ ịnh lại vị trí lưu trữ của file upload này.

145

Bài 8

: PH

P nâ

ng c

ao |

1/1

/200

9

1.3 Tạo file xử lý File PHP upload lên server Tạo file XuLyUpload.php để thực hiện upload nội dung của file được upload lên

server ở c:\wamp\tmp (theo thông tin trong file c:\wamp\bin\php\php5.2.8\php.ini) và sau đó kiểm tra, xử lý và định lại đường dẫn của file vừa mới được upload lên server. File XuLyUpload.php sẽ có nội dung như sau:

Trong phần trên, có hàm move_upload_file có chức năng sẽ di chuyển file upload lên server ở thư mục tmp vào địa chỉ của thư mục upload trong thư mục website.

146

Bài 8

: PH

P nâ

ng c

ao |

1/1

/200

9

1.4 Một số cấu hình php.ini Trong file file c:\wamp\bin\php\php5.2.8\php.ini sẽ có một số biến lưu lại các

cấu hình của việc upload file lên server. Trong đó có một số biến hệ thống như sau:

upload_max_filesize = 2M Kích thước tối đa file được upload (mặt định là 2M). Ta có thể sửa lại thông số của biến này để có thể upload file lớn hơn.

upload_tmp_dir = "c:/wamp/tmp" Quy định thư mục temp để upload file tạm lên server.

2 Kỹ thuật Paging <?php ?> <body> <table width="200" border="0" cellpadding="0" cellspacing="0" align="center"> <?php //Phần set các thông số của paging $rowsPerPage = 2; //Số dòng trên một trang $pageNum = 1; //Số thứ tự trang đang hiển thị, mặt định là 1 //Kiểm tra xem nếu có tham số $_GET['page'] (truyền số thứ tự trang cần xem) thì set lại $pageNum if(isset($_GET['page'])) { $pageNum = $_GET['page']; } //Xác định số mẫu tin cần hiển thị lên $offset = ($pageNum - 1) * $rowsPerPage; //Ví trí của mẫu tin đầu tiên trong số các kết quả trả về của câu SELECT //Câu truy vấn với từ khóa LIMIT xác định số record sẽ hiển thị ra trong kết quả tìm được $strSQL = "SELECT * FROM Xe LIMIT ".$offset.",".$rowsPerPage; //Phần load dữ liệu từ csdl liên trên website include_once("DataProvider.php"); $result = DataProvider::ExecuteQuery($strSQL); while ($row = mysql_fetch_array($result,MYSQL_ASSOC))

147

Bài 8

: PH

P nâ

ng c

ao |

1/1

/200

9

{ if (!isset($row["MaNhaSanXuat"])) { break; } ?> <tr> <td> <a href="DanhSachXe.php?manxs=<?php echo $row["MaNhaSanXuat"];?>"> <table border="1" align="center"> <tr> <td rowspan="2"> <img src="<?php echo $row["Hinh"];?>" /> </td> <td width="100"> <?php echo $row["TenXe"];?> </td> </tr> <tr> <td> Gia: <?php echo $row["Gia"];?> </td> </tr> </table> </a> </td> </tr> <?php } //Phần xử lý tính toán hiển thị các chỉ mục của trang //Ví dụ: page: Trang đầu | Trang trước | 1 | 2 | 3 | 4 | Trang kế | Trang cuối //Đếm số mẫu tin trong CSDL $strSQL = "SELECT COUNT(*) AS numrows FROM Xe"; $result = DataProvider::executeQuery($strSQL); $row = mysql_fetch_array($result, MYSQL_ASSOC);

148

Bài 8

: PH

P nâ

ng c

ao |

1/1

/200

9

$numrows = $row['numrows']; //Số mẫu tin trong cở sở dữ liệu hiện có sau khi thực hiện câu truy vấn SELECT //Tính tổng số trang cần hiển thị $maxPage = ceil($numrows/$rowsPerPage); //Phần hiển thị liên kết đến từng trang $self = $_SERVER['PHP_SELF']; //Lấy địa chỉ trực tiếp của file PHP đang mở $nav = ''; //Chuỗi các liên kết đến các trang con for($page = 1; $page <= $maxPage; $page++) { if ($page == $pageNum) { $nav .= " $page "; //Không cần tạo link liên kết cho trang hiện hành } else { $nav .= " <a href=\"$self?page=$page\">$page</a> "; } } // Tạo liên kết cho: Trang đầu | Trang trước | Trang kế | Trang cuối if ($pageNum > 1) { $page = $pageNum - 1; $prev = " <a href=\"$self?page=$page\">[PREVIOUS]</a> "; $first = " <a href=\"$self?page=1\">[FIRST]</a> "; } else { $prev = '&nbsp;'; //Đang ở trang 1, không cần in link đến trang trước $first = '&nbsp;'; //và link đến trang đầu } if ($pageNum < $maxPage)

149

Bài 8

: PH

P nâ

ng c

ao |

1/1

/200

9

{ $page = $pageNum + 1; $next = " <a href=\"$self?page=$page\">[NEXT]</a> "; $last = " <a href=\"$self?page=$maxPage\">[LAST]</a> "; } else { $next = '&nbsp;'; //Đang ở trang cuối không cần in link đến trang sau $last = '&nbsp;'; //và link đến trang cuối } //Hiển thị các link liên kết echo "<tr><td><center>Page: ". $first . $prev . $nav . $next . $last . "</center></td></tr>"; ?> </table> </body> <?php ?>

3 Kỹ thuật Session

150

LẬP TRÌNH WEB 1

PHP + MySQL

BÀI M Ở ĐẦU

GVLT:

Ngô Bá Nam Phương

nbnphuong@fit.hcmuns.edu.vn

GHVD:

Nguyễn Hoàng Anh

nhanh@fit.hcmuns.edu.vn Nguyễn Phạm Phương Nam

nppnam@fit.hcmuns.edu.vn

TP.HCM 11-2008

151

1. Tạo cơ sở dữ liệu

Bước 1: Khởi động phpMyAdmin

Bước 2: Tạo CSDL tên Sample

152

Đặt tên CSDL là sample có encoding là utf8_unicode_ci sau đó chọn nút

Create

Bước 3: Tạo bảng tên USER

Đặt tên bảng là User có số cột là 5 sau đó chọn Go

Bước 4: Tạo các cột cho bảng USER

Làm theo hình bên dưới, sau đó chọn Save để lưu bảng USER.

Bước 5: Tạo khóa chính cho bảng USER

153

Chọn username làm thuộc tính khóa chính cho bảng USER

Bước 6: Nhập dữ liệu để test cho bảng USER

Chọn tab Insert sau đó nhập liệu cho 1 user rồi chọn Go.

Bước 7: Xem dữ liệu

154

2. Thao tác PHP với cơ sở dữ liệu sample

2.1 Tạo thư mục chứa website

155

2.2 Tạo website

Vào site chọn New Site

Đặt tên site name là MSSV

Chọn Local root folder là thư mục vừa tạo ở bước 2.1 sau đó chọn OK

156

Kết quả:

157

2.3 Thiết kế trang DangNhap.html

2.3.1 Tạo file DangNhap.html

158

Chọn dạng file là html từ Blank Page. Sau đó chọn create

Trang html được tạo:

159

Nhấn ctr + S để lưu file html trên.

160

Đặt tên là DangNhap.html sau đó chọn Save.

2.3.2 Thiết kế

Thiết kế giao diện như sau:

161

Html tương ứng:

2.4 Thiết kế DataProvider.php

2.4.1 Tạo file

Vào file chọn New File

162

Trên Blank Page chọn tab PHP sau đó chọn Create

163

Sau đó xóa tất cả các nội dung trong file. Lưu file lại với tên DataProvider.php

164

2.4.2 Thiết kế

Cài đặt file DataProvider.php có nội dung như sau:

165

2.5 Thiết kế file XuLyDangNhap.php

Tương tự như DataProvider.php sinh viên tạo file tên là XuLyDangNhap có nội

dung như sau:

166

3. Test

3.1: Chạy từ wampserver

Chọn localhost

167

Chọn thư mục MSSV:

168

Chọn file DangNhap.html

Chọn username là 1, pass là 1 sau đó chọn đăng nhập (tức là username và

password này dưới csdl chưa có).

169

Chọn link: Quay về trang đăng nhập

Gõ username là a và password là a (có dưới csdl) sau đó chọn Đăng Nhập

170

171

Đăng nhập thành công. Sinh viên chọn link Quay về trang đăng nhập.

Gõ username là A và password là A ( dưới csdl có username là a, pass là a) sau

đó chọn Đăng Nhập

Ta thấy rằng hệ thống của chúng ta đã đăng nhập thành công. Như vậy MySQL

không phân biệt hoa thường cho ta.

Muốn phân biệt hoa thường lúc đăng nhập sinh viên sửa lại file

XuLyDangNhap.php như sau:

172

Chúng ta so sánh dạng Binary.

Chạy lại ta thấy với username A, pass là A thì hệ thống đăng nhập thất bại

173

Bài tập:

Tương tự chức năng đăng nhập. Sinh viên xây dựng trang DangKy trong đó

có kiểm tra dữ liệu hợp lệ ở client (javascript)

Hy vọng bài viết step by step này sẽ giúp ích cho các bạn mới làm quen với

PHP & MySQL

Thân,

Nhóm GVHD

174

LẬP TRÌNH WEB 1

PHP + MySQL

BÀI HƯỚNG DẪN 1

GVLT:

Ngô Bá Nam Phương

nbnphuong@fit.hcmuns.edu.vn

GHVD:

Nguyễn Hoàng Anh

nhanh@fit.hcmuns.edu.vn Nguyễn Phạm Phương Nam

nppnam@fit.hcmuns.edu.vn

TP.HCM 11-2008

175

Yêu cầu:

Đã đọc bài hướng dẫn mở đầu.

1. Tạo dữ liệu

Trong cơ sở dữ liệu Sample tạo 2 bảng SanPham và DanhMuc.

Nếu bạn chưa có sẳn cơ sở dữ liệu Sample thì có thể tạo mới. 1.1 Bảng SanPham

Thiết kế như sau:

Chú ý: field HinhAnh có type là varchar (200) điều này có nghĩa là ta không lưu trực tiếp ảnh vào trong cơ sở dữ liệu mà chỉ lưu đường dẫn đến hình ảnh vào cơ sở dữ liệu.

Sau đó chọn MaSanPham làm khóa chính

1.2 Bảng DanhMuc Thiết kế như sau: Chọn MaDanhMuc là auto_increment

176

Sau đó chọn MaDanhMuc làm khóa chính:

1.3 Tạo khóa ngoại

Chọn tab SQL rồi tạo khóa:

1.4 Thu Thập Hình Ảnh

Bước 1: Tạo thư mục images trong C:\Program Files\wamp\www\MSSV

Sau đó bạn tìm 8 hình bất kỳ chép vào thư mục images này như sau:

177

Làm công việc này vì hình ảnh ta không lưu vào cơ sở dữ liệu mà chỉ lưu đường dẫn, đường dẫn ở đây là trong thư mục images của project MSSV.

1.5 Nhập liệu cho bảng DanhMuc

1.6 Nhập liệu cho bảng SanPham.

Hình ảnh cho 1 sản phNm, chú ý ta chỉ lưu đường dẫn tương đối không phải đường dẫn tuyệt đối.

Dữ liệu như sau:

178

179

2. Xây dựng trang SanPham.php

2.1 Giới thi ệu

Xem ngữ cảnh như sau:

Nội dung trang SanPham.php ta cần xây dựng gồm 5 phần:

(1) Logo, Banner: phần tỉnh (html) (2) Các liên kết : Trang Chủ, Sản PhNm, Giỏ Hàng : Phần tỉnh (html) (3) Các danh mục: Sách, Điện Thoại: nội dung này là động được đọc từ cơ sở

dữ liệu (4) Khi người dùng chọn một danh mục trên (3) ví dụ như là danh mục Sách thì

(4) sẽ chịu trách nhiệm hiển thị tất cả các sản phNm thuộc về danh mục sách (5) Footer: Bản Quyền bởi www.abc.com.vn : Phần tỉnh (html)

Như vậy công việc chính là ở phần (3) và (4)

180

2.2 Xây dựng

2.2.1 Thiết kế trang SanPham.php

Tạo mới trang SanPham.php vào trong project MSSV

Có giao diện như sau:

Nội dung html tương ứng:

181

2.2.2 Hiển thị danh mục

182

2.2.3 Hiển thị sản ph�m theo danh mục

3. Yêu cầu

183

- Thiết kế giao diện đẹp hơn

- Khi số sản phNm nhiều ta cần thực hiện phân trang .

184

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2009

Authored by: Lương Vĩ Minh - Ngô Bá Nam Phương – Nguyễn Hoàng Anh Nguyễn Phạm Phương Nam – Nguyễn Đức Huy

Bài tập: JavaScript

Môn : Lập trình và Thiết kế Web 1

185

Bài tập

: Jav

aScr

ipt |

1/1

/200

9

Bài tập: JavaScript Môn : Lập trình và Thiết kế Web 1

Contents 1 BÀI TậP 1 ...................................................................................... 22 BÀI TậP 2 ...................................................................................... 23 BÀI TậP 3 ...................................................................................... 4

186

Bài tập

: Jav

aScr

ipt |

1/1

/200

9

1 Bài tập 1 Thiết kế form đăng nhập với giao diện ngôn ngữ giữa tiếng Việt và tiếng Anh:

Giao diện tiếng Việt có dạng như sau

Hướng dẫn

Dùng đoạn hàm innerHTML để set lại các giá trị bên trong của một Element

document.getElementById("idLogin").innerHTML = "Login";

Với định dạng HTML như sau

<td colspan="3" class="StyleHeader" id="idLogin">Login</td>

2 Bài tập 2 Nhập vào số bảng và số cột. Website sẽ vẻ ra các bảng cửu chương tương ứng

Sự kiện nút Phát sinh: Dùng sự kiện document.write()

187

Bài tập

: Jav

aScr

ipt |

1/1

/200

9

Sự kiện nút Phát sinh mở rộng

188

Bài tập

: Jav

aScr

ipt |

1/1

/200

9

3 Bài tập 3 Xây dựng website quản lý học phòng

189

Bài tập

: Jav

aScr

ipt |

1/1

/200

9

Với yêu cầu của đề như sau:

Với các chức năng sau đây : 1. Khi một TextBox nhận focus, màu nền của nó sẽ được thay đổi. Khi mất focus, màu nền của TextBox đó trở lại bình thường. Phải có ToolTip cho từng TextBox. 2. Kiểm tra tính hợp lệ của dữ liệu khi người dung bấm vào nút Đăng ký a. Mã số, Họ tên, Địa chỉ không được trống b. Số điện thoại có format XXX-XXXXXX (có mã vùng) hoặc XXXXXX(không cần mã vùng). c. Giới tính dùng 2 checkbox Nam và nữ d. Kiểm tra ngày sinh hợp lệ e. Chỉ chấp nhận địa chỉ email của Yahoo hoặc Google. 3. Thiết kế giao diện chọn môn học như trên, xử lý 4 nút button. Khi nhấn button OK, hiển thị MessageBox chứa danh sách tên các môn học được chọn. 4. Bấm đăng ký, nếu dữ liệu hợp lệ sẽ được thêm vào danh sách sinh viên bên dưới.

190

Bài tập

: Jav

aScr

ipt |

1/1

/200

9

5. Khi người dùng di chuyển chuột đến dòng dữ liệu nào, dòng đó sẽ được highlight. Khi người dùng nhấn vào Header ở cột nào thì dữ liệu sẽ được sort theo cột đó(một lần tăng rồi đến một lần giảm).

191

KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN

2009 Authored by: – Nguyễn Đức Huy

Bài 9 : Ôn Tập

Môn : Lập trình và Thiết kế Web 1

192

Bài 9

: Ôn

Tậ

p |

1/1/

2009

Bài 9 : Ôn Tập Môn : Lập trình và Thiết kế Web 1

1 Yêu cầu Nắm vững các kiến thức PHP, kết nối CSDL và truyền nhận dữ liệu giữa các From

và Website.

Sử dụng các kỹ thuật PHP nâng cao như: Paging và Session

Tương tác với CSDL thông qua 4 thao tác: Insert, Select, Update và Delete.

2 Ôn tập kiến thức CSDL

2.1 Câu truy vấn SELECT SELECT [ALL | DISTINCT][TOP n] danh_sách_chọn

[INTO tên_bảng_mới]

FROM danh_sách_bảng/khung_nhìn

[WHERE điều_kiện]

[GROUP BY danh_sách_cột]

[HAVING điều_kiện]

[ORDER BY cột_sắp_xếp]

[COMPUTE danh_sách_hàm_gộp [BY danh_sách_cột]]

Ví dụ:

SELECT * FROM sinhvien WHERE malop = ‘07CTH03’

2.2 Câu truy vấn INSERT INSERT INTO tên_bảng[(danh_sách_cột)]

VALUES(danh_sách_trị)

Ví dụ:

INSERT INTO sinhvien(masv, hodem, ten, gioitinh, malop)

VALUES(‘0241020008’, ‘Nguyễn Công’, ‘Chính’, 1, ‘C24102’)

2.3 Câu truy vấn UPDATE

193

Bài 9

: Ôn

Tậ

p |

1/1/

2009

UPDATE tên_bảng

SET tên_cột = biểu_thức

[, ..., tên_cột_k = biểu_thức_k]

[FROM danh_sách_bảng]

[WHERE điều_kiện]

Ví dụ:

UPDATE monhoc

SET sotinchi = 3

WHERE sotinchi = 2

2.4 Câu truy vấn DELETE DELETE FROM tên_bảng_có_dòng_cần_xóa

[FROM danh_sách_bảng_cần_tham_chiếu]

[WHERE điều_kiện]

Ví dụ:

DELETE FROM sinhvien

WHERE noisinh LIKE ‘%Huế%’

Ví dụ:

DELETE FROM sinhvien

FROM lop

WHERE lop.malop=sinhvien.malop AND tenlop=‘Tin K24’

3 Đề thực hành Cho mô hình cơ sở dữ liệu CarShopOnline.

Thiết kế các trang có PHP có nhiệm vụ như sau:

1. DanhSachNSX.php liệt kê danh sách các nhà sản xuất với cơ chế phân trang là 5 nhà sản xuất/trang. Tương ứng với mõi dòng thông tin của Nhà sản xuất sẽ có 3 đường link như sau:

a. Chi tiết: Chuyển đến trang ChiTietNSX.php cho hiển thị thông tin nhà sản xuất vừa mới được chọn.

194

Bài 9

: Ôn

Tậ

p |

1/1/

2009

b. Xóa: Thực hiện việc xóa dòng dữ liệu đó trong CSDL c. Cập nhật: Chuyển đến trang CapNhatNSX.php cho phép cập nhật thông

của nhà Sản xuất đó. 2. TaoMoiNSX.php là trang cho phép thêm một nhà Sản xuất mới.

195