8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

THIẾT KẾ VÀ TRIỂN KHAI WEBSITE

• Phân phối tiết học

Trường Đại học Thương mại Khoa HTTT Kinh tế và THMĐT Bộ môn Công nghệ thông tin

− Lý thuyết:  27 tiết − Thảo luận: 6 tiết − Thực hành: 12 tiết Thực hành: 12 tiết

• Đánh giá kết quả

Bài giảng học phần: Thiết kế và triển khai Website

• • •

‐ Điểm chuyên cần: 10% ‐ K/Tra + T/Hành+T/luận: 30% ‐ Thi cuối kỳ: 60%

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 2 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 1 8/9/2017

MỤC TIÊU CỦA MÔN HỌC

MỤC TIÊU CỤ THỂ

• Cung cấp những kiến thức cơ bản về Internet, World wide web, giao thức HTTP, giao thức FTP, ngôn ngữ đánh dấu HTML,...

• Một số ngôn ngữ và công cụ trợ giúp thiết kế và xây

dựng website.

• Qui trình triển khai, nâng cấp, bảo trì, Phương thức

quảng bá trang web trên mạng.

• Môn học cung cấp những kiến thức cơ bản về world wide web, các giao thức, ngôn ngữ đánh dấu và một số ngôn ngữ khác dùng để tạo web Thông qua việc giới thiệu một số tạo web. Thông qua việc giới thiệu một số công cụ thiết kế và trợ giúp việc xây dựng website, giúp học viên nắm được những yêu cầu, qui trình thiết kế và triển khai một website thực tế.

• Quy trình thiết kế và triển khai một website TMĐT

8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 3 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 4

TÀI LIỆU THAM KHẢO

NỘI DUNG CHƯƠNG TRÌNH

• TLTK bắt buộc: •

•

[1] Harvey & Paul, Internet & World Wide Web: How to Program (4th Edition), Deitel & Associates (Paperback), 2010 [2] Gerry McGovern, The Website Manager’s Handbook, ISBN:  978‐1‐4116‐8529‐1,

• Shane Diffily, 2014 •

hì h i h h

Si h Thiết kế W b bằ

Chương 1. Tổng quan về thiết kế và triển khai website  Chương 2. Thiết kế và xử lý đồ họa trên website Chương 3. Một số ngôn ngữ xây dưng Website Chương 4. Triển khai Website

•

•

•

[3] N [3] Nguyễn Trường Sinh, Thiết kế Web bằng hình minh hoạ, NXB  NXB ễ T ờ Minh Khai, 2007 [4] Phạm Hữu Khang, Xây dựng và triển khai ứng dụng TMĐT,  NXB Thống kê, 2006 [5] Lê Tuấn Hùng, Huỳnh Quyết Thắng, Kỹ thuật đồ họa, NXB  KH&KT, 2005 [6] Giáo trình tự học Photoshop CS6,  Internet

Bài giảng Thiết kế và triển khai Website

1

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 5 8/9/2017 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 6

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Nội dung

Chương 1

1.1. Một số khái niệm cơ bản 1.2. Nguyên tắc và quy trình thiết kế Website 1.3 Nguyên tắc và quy trình triển khai Website

Tổng quan về thiết kế và Tổng quan về thiết kế và triển khai website triển khai website

7 8/9/2017 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

1.1. Một số khái niệm cơ bản

1.1.1. Cơ bản về Internet

• Mạng máy tính – phân loại theo

phạm vi địa lý

1.1.1. Cơ bản về Internet 1.1.2. World wide web ‐ Website 1.1.3. Giao thức truyền nhận Client/Server

ô hì h

/

• Hệ điều hành mạng • Mô hình TCP/IP • Dịch vụ tên miền

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 9 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 10 8/9/2017 8/9/2017

Chồng giao thức TCP/IP

4 lớp của mô hình TCP/IP

• Layer 4: Application (ứng dụng) • Layer 3: Transport (vận chuyển) • Layer 2: Internet  • Layer 1: Network access (truy

cập mạng)

Bài giảng Thiết kế và triển khai Website

2

8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 11 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 12

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

DNS: nhớ tên thay vì địa chỉ IP

Hệ thống quản lý tên miền

• DNS server là một máy trên mạng có nhiệm vụ quản lý tên miền và đáp ứng các yêu cầu của client

• Có nhiều DNS server liên kết với nhau, chia sẻ

và quản lý truy vấn đến CSDL tên miền

• CSDL tên miền có cấu trúc phân cấp

DNS: không gian tên miền

..

Cấu trúc CSDL tên miền • Kiến trúc tên miền không bắt buộc các tên miền phải tuân theo quy cách đặt tên, tuy nhiên, chúng được quản lý một cách tập trung

• Cú pháp của tên không cho biết đối tượng được đặt tên là gì: ví dụ www ptithcm edu vn là một máy tính tên là gì: ví dụ www.ptithcm.edu.vn là một máy tính,  trong khi ptithcm.edu.vn lại là tên miền

8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 13 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 14

comcom

eduedu

govgov

vnvn

frfr

ukuk

vnnvnn

comcom

eduedu

govgov

DSN

• ví dụ:

yêu cầu truy cập đến www.cs.purdue.edu.vn từ it‐ lab.ptithcm.edu.vn sẽ theo tiến trình như sau: vn  edu  purdue  cs

8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 15 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 16

1.1.2. World wide web - Website

Bài giảng Thiết kế và triển khai Website

3

8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 17 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 18

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

WWW

1.1.3. Giao thức truyền nhận trong Client/Server

• World Wide Web là một bước tiến lớn trong quá trình tìm kiếm thông tin nhanh, đa dạng và mạnh mẽ. Các server WWW khác nhau sẽ thực hiện các trình duyệt (browser) khác nhau.

yệ

g g

ị

• Các trình duyệt khác nhau sẽ có những giả định khác nhau về kết xuất và máy tính của bạn, tuy nhiên tùy thuộc vào thói quen và sở thích bạn có thể dùng chương trình duyệt Web cho thích hợp. Hiện nay các chương trình duyệt Web rất nhiều và đa dạng chẳng hạn như :

•

Internet Explorer, Fire Fox, …

Mô hình Client/Server

Mô hình Client/Server • Việc giao tiếp giữa client và server được thực hiện dưới hình thức trao đổi các thông điệp (Message).

• Để được phục vụ, client sẽ gửi một thông điệp yêu cầu (Request Message) mô tả về công việc muốn server thực hiện.

• Khi nhận được thông điệp yêu cầu, server tiến hành phân tích để xác định công việc cần phải thực thi. phân tích để xác định công việc cần phải thực thi • Nếu việc thực hiện yêu cầu này có sinh ra kết quả trả

• Trong mô hình này, chương trình ứng dụng được chia thành 2 thành phần: – Quá trình chuyên cung cấp một số phục vụ nào đó, chẳng hạn: phục vụ tập tin, phục vụ máy in, phục vụ thư điện tử, phục vụ Web... máy in, phục vụ thư điện tử, phục vụ Web... Các quá trình này được gọi là các trình phục vụ hay Server.

về, server sẽ gởi nó cho client trong một thông điệp trả lời (Reply Message).

– Một số quá trình khác có yêu cầu sử dụng

• Dạng thức (format) và ý nghĩa của các thông điệp trao đổi giữa client và server được qui định rõ bởi giao thức (protocol) của ứng dụng.

các dịch vụ do các server cung cấp được gọi là các quá trình khách hàng hay Client.

8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 19 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 20

Chế độ nghẽn

g

g ệ

• Trong chế độ này, khi quá trình client hay server phát ra lệnh gởi dữ liệu, (thông thường bằng lệnh send) , sự thực thi của nó sẽ bị tạm dừng cho đến khi quá trình nhận phát ra lệnh nhận số dữ liệu đó (thường là lệnh receive).

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 21 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 22 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

4

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 24 23 8/9/2017 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Chế độ không nghẽn

1.2. Nguyên tắc và quy trình thiết kế Website 1.2.1. Các nguyên tắc trong thiết kế website 1.2.2. Quy trình chung thiết kế Website

ự

• Trong chế độ này, khi quá trình client hay server phát ra lệnh gởi dữ liệu, sự thực thi của nó vẫn được tiếp tục mà ế không quan tâm đến việc có quá trình nào phát ra lệnh nhận số dữ liệu đó hay không.

1.2.1. Các nguyên tắc trong thiết kế website

1.2.1. Các nguyên tắc trong thiết kế website

1. Khái quát 2. Các bước tổ chức thông tin 3. Các kiểu cấu trúc thiết kế

• Tổ chức website chặt chẽ và dễ sử dụng • Sử dụng từ ngữ dễ hiểu.  • Dễ dàng khám phá các đường link.  • Thời gian tải về nhanh.  • Tương thích với đa số trình duyệt web.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 25 8/9/2017 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 26

1. Khái quát

2. Các bước tổ chức thông tin

• Cần phải chia nhỏ các khối thông tin lớn. • Các nhà tâm lý học nhận thức

• Phân chia thông tin thành các đơn vị logic • Thiết lập hệ thống phân cấp thông tin • Tạo mối quan hệ giữa các hệ thống phân cấp

• Giúp ghi nhớ dễ hơn bằng việc sử dụng kết hợp giữa thiết kế đồ hoạ, qui ước lớp và biên tập thông tin thành các đơn vị riêng rẽ

thông tin g

• Thực tế với độc giả các tin ngắn gọn, riêng biệt sẽ chức năng

• Phân tích sự thành công về chức năng và thẩm

hoá hơn và dễ định vị hơn khối thông tin dài

mỹ của các hệ thống thông tin

• Tổ chức các đoạn tin nhỏ thành các khối thông tin riêng để tạo nên hệ thống đồng nhất, hình thành nên cơ sở các liên kết hypertext.

27 28 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

Bài giảng Thiết kế và triển khai Website

5

29 30 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Sơ đồ hệ thống phân cấp của một website

Sơ đồ phân bố thông tin của website Ngân Hàng Công Thương

31 32 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

33 34 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

Bài giảng Thiết kế và triển khai Website

6

35 36 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

37 38 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

a. Cấu trúc nối tiếp (Sequence)

3. Các kiểu cấu trúc thiết kế

a. Cấu trúc nối tiếp (Sequence) b. Cấu trúc phân cấp (Hierarchy) c. Cấu trúc ô lưới (Grid) ) d. Cấu trúc mạng nhện (Web)  ệ ( ạ g

 Thể hiển thị thông tin một cách tuần tự, tiếp nối nhau  Thể hiển thị thông tin một cách tuần tự tiếp nối nhau

như một bản tường thuật, theo thời gian

 Ví dụ như một chuỗi logic các chủ đề được phát triển từ tổng quát đến cụ thể, hoặc cũng có thể theo thứ tự abc, như các chỉ số, tự điển bách khoa, từ điển thuật ngữ

39 40 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

Bài giảng Thiết kế và triển khai Website

7

41 42 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

b. Cấu trúc phân cấp (Hierarchy)

c. Cấu trúc ô lưới (Grid)

• Ưu điểm:

– Cấu trúc là cách tốt để phản ánh tương quan các biến số như

sự kiện, công nghệ , văn hoá, …

– Các chủ đề không có sự phân cấp về mức độ quan trọng – Rất tốt với các độc giả có kinh nghiệm, những người đã có

sẵn kiến thức về chủ đề và hệ thống ẵ

ú

– Các sơ đồ tổng quát có thể rất hữu ích đối với các site kiểu

lưới • Nhược điểm:

– Khó hiểu với độc giả khi độc giả chưa xác định được mối liên

quan giữa các loại thông tin

• Là một trong những cách tốt nhất để tổ chức các khối thông tin  phức hợp. • Cấu trúc phân cấp đặc ấ đặ hâ Cấ biệt thích hợp cho các website vì các website  luôn được thực hiện rẽ nhánh từ một trang chủ duy nhất.

d. Cấu trúc mạng nhện

Sơ đồ tổng quan cấu trúc ô lưới

• Ưu điểm:

‐ Khai thác triệt để năng lực của các trang web trong việc liên kết và kết hợp. ‐ Ý tưởng liên kết giống nhau và tự do.

• Nhược điểm: • Nhược điểm:

‐ Các khối thông tin dễ phát triển thành một mớ hỗn độn, lộn xộn.  ‐ Nhằm vào các độc giả chuyên nghiệp tìm kiếm những kiến thức chuyên sâu.

43 44 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

Kết luận

Nguyên tắc sử dụng hiệu ứng

1. Các nguyên tắc nghệ thuật 2. Các nguyên tắc sử dụng hình ảnh, đồ hoạ,

* Đa số các website đều sử dụng cả 4 kiểu cấu trúc thông tin trên.

text

p

* Tuy nhiên hệ thống thông tin vẫn phải trình bày một y ộ cách minh bạch, nhất quán để hỗ trợ cho các mục đích của website.

Sơ đồ phản ánh mối tương quan giữa 4 kiểu cấu trúc

45 46 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

Bài giảng Thiết kế và triển khai Website

8

48 47 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

1. Các nguyên tắc nghệ thuật

1. Các nguyên tắc nghệ thuật

a. Tính đồng nhất về mặt hình ảnh:

b. Phá vỡ các quy tắc thiết kế ‐ sự cân bằng:

‐ Sự cân bằng đối xứng:

Không có tính đồng  nhất về mặt hình  ảnh Chỉ có tính đồng  nhất về mặt trí tuệ

1. Các nguyên tắc nghệ thuật

2. Nguyên tắc sử dụng hình ảnh, đồ hoạ, text

c. Cung cấp một tiêu điểm: ‐ Sử dụng sự tương phản:

• Nên kết hợp giữa đồ họa và văn bản • Điều chỉnh kích cỡ sao cho hợp lý

Thỏ 1 năm tuổi

49 50 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

1.2.2. Quy trình chung thiết kế Website

• Khái quát chung

• Thiết kế giao diện

• Thiết kế nội dung • Thiết kế nội dung

51 52 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

Bài giảng Thiết kế và triển khai Website

9

53 54 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

1.2.2. Quy trình chung thiết kế Website

Các ứng dụng trên công nghệ Web

• Thiết kế Website không chỉ chú trọng đến ngôn ngữ HTML, các công cụ phát triển Web mà còn phải tập trung vào việc thiết kế thiết kế đồ hoạ, giao diện người sử dụng hay những kiến thức về cách thức tổ chức thông tin,…

• • • •

Đào tạo Dạy học Giáo dục Giá d Tham khảo

• Trước khi xây dựng một Website, chúng ta cần phải:

– Xác định đối tượng độc giả của website – Xác định mục đích của Website – Thiết lập các chủ đề chính của website – Thiết kế các khối thông tin chủ yếu mà website cung cấp

TK giao diện hướng người sử dụng

• Mục tiêu giúp người sử dụng tự điều khiển

được máy tính của họ

8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 55/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 56/55

Thiết kế giao diện • Giao diện người dùng đồ hoạ (GUI) của hệ thống tạo nên nét đặc trưng "nhìn thấy và cảm nhận" của các trang web

• Không được đặt bất cứ cản trở nào cho người

• Không thể hoàn toàn tách rời thiết kế đồ hoạ với thiết

sử dụng g

kế giao diện kế giao diện

• Cần các kiến thức về tâm lý học khách hàng

• Trả lời các câu hỏi:

– Ai? – Cái gì? – Khi nào? – Nơi nào?

Tương thích với các trình duyệt khác nhau

8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 57/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 58/55

Thiết kế nội dung

• Các phần nội dung cơ bản trong 1 Webiste • Một số chức năng thường gặp của website và

• Nhiều độc giả không có chương trình duyệt đồ hoạ • Làm thế nào để các độc giả với web browser không có khả

năng đồ hoạ vẫn hiểu được chức năng của hình ảnh trên trang web (sử dụng nhãn ALT)

ộ

• Nội dung cơ bản của một số website TMĐT

• Giúp các độc giả khiếm thị có thể nghe các thông báo thay thế • Giúp các độc giả khiếm thị có thể nghe các thông báo thay thế mà chúng ta cho hỗ trợ cùng hình ảnh đồ hoạ, do đó không hoàn toàn mất hẳn nội dung của bức ảnh, phím đồ hoạ đi kèm trang web

mục đích sử dụng g ộ – Trang chủ (home page)  – Trang liên hệ (contact us)  – Trang thông tin giới thiệu về doanh nghiệp (about us) – Trang giới thiệu về sản phẩm dịch vụ (products/services)  – Trang hướng dẫn hoặc chính sách (Policies)

•

Bài giảng Thiết kế và triển khai Website

10

8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 59/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 60/55

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Thiết kế nội dung

1.3 Nguyên tắc và quy trình triển khai Website

• Nội dung cơ bản của một số website

• 1.3.1. Các nguyên tắc trong triển khai Website • 1.3.2. Quy trình chung triển khai Website

TMĐT: – Giới thiệu về Cty – Quảng cáo sản phẩm p g – Đặt hàng – Thanh toán trực tuyến – Đấu giá trực tuyến – Liên kết với các site thành viên – Liên hệ với doanh nghiệp – …

1.3.2. Quy trình chung triển khai  Website

1.3.1. Các nguyên tắc trong triển khai  Website • Kiểm tra thật kỹ website trước khi triển khai • Thuê không gian lưu trữ web đủ lớn và nên

• Đưa website lên Internet • Quảng bá website • Cập nhật và bảo trì website

• Nên có quá trình thử nghiệm trước khi đưa

ớ khi đ

hiệ

ó

ê

mua ở các tổ chức đáng tin cậy á ì h hử trang web hoạt động chính thức

• Nâng cấp và bảo trì trang web thường xuyên

8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 61/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 62/55

2.1.1. Khái niệm chung

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 63 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 64 8/9/2017 8/9/2017

Chương 2. Thiết kế và xử lý đồ họa  trên website

• 2.1. Tổng quan về đồ họa • 2.2. Thiết kế đồ họa cho website • 2.3. Công cụ photoshop cho xử lý đồ họa

• Đồ họa máy tính là một trong những lĩnh vực  hấp dẫn và phát triển rất mau lẹ, nó làm thay  đổi hoàn toàn việc tương tác giữ người và  máy.

• Nhờ vào đồ họa máy tính mà một loạt các ứng  dụng máy tính ra đời, đồ họa giúp cho việc  giao tiếp với máy tính trở nên dễ dàng hơn, nó  được ứng dụng trong nhiều lĩnh vực như khoa  học công nghệ, y học, kiến trúc, giải trí….

Bài giảng Thiết kế và triển khai Website

11

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 65 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 66 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

2.1.2. Phân loại về đồ họa máy tính

Phân loại theo các lĩnh vực của đồ hoạ máy  tính

• Kiến tạo đồ họa:

• Phân loại theo các lĩnh vực của đồ hoạ máy

– Các hệ CAD/CAM (Computer Aided Design/Computer

Aided Manufacture System): kỹ thuật đồ hoạ tập hợp các  công cụ, các kỹ thuật trợ giúp cho thiết kế các chi tiết và  các hệ thống khác nhau: hệ thống cơ, hệ thống điện, hệ  thống điện tử…. thống điện tử….

tính – Kiến tạo đồ họa – Xử lý đồ họa. Xử lý đồ họa

– Đồ hoạ minh hoạ (Presentation Graphics): gồm các công cụ  giúp hiển thị các số liệu thí nghiệm một cách trực quan,  dựa trên các mẫu đồ thị hoặc các thuật toán có sẵn.

• Phân loại theo hệ toạ độ – Tọa độ 2 chiều(2D)  – Tọa độ 3 chiều(3D)

– Đồ hoạ hoạt hình và nghệ thuật: bao gồm các công cụ giúp  cho các hoạ sĩ, các nhà thiết kế phim hoạt hình chuyên  nghiệp làm các kỹ xảo hoạt hình, vẽ tranh... Ví dụ: phần  mềm 3D Studio, 3D Animation, 3D Studio Max.

Phân loại theo các lĩnh vực của đồ hoạ  máy tính

• Xử lý đồ họa:

– Kỹ thuật xử lý ảnh (Computer Imaging): sau quá trình xử lý  ảnh cho ta ảnh số của đối tượng. Trong quá trình xử lý ảnh  sử dụng rất nhiều các kỹ thuật phức tạp: kỹ thuật khôi  phục ảnh, kỹ thuật làm nổi ảnh, kỹ thuật xác định biên ảnh.

Phân loại theo hệ toạ độ:tọa độ 2  chiều(2D) và 3 chiều(3D) • Kỹ thuật đồ hoạ hai chiều: là kỹ thuật đồ hoạ  máy tính sử dụng hệ toạ độ hai chiều (hệ toạ  độ phẳng), sử dụng rất nhiều trong kỹ thuật  xử lý bản đồ, đồ thị. xử lý bản đồ đồ thị

• Kỹ thuật đồ hoạ ba chiều: là kỹ thuật đồ hoạ  máy tính sử dụng hệ toạ độ ba chiều, đòi hỏi  rất nhiều tính toán và phức tạp hơn nhiều so  với kỹ thuật đồ hoạ hai chiều.

– Kỹ thuật nhận dạng (Pattern Recognition): từ những ảnh  mẫu có sẵn ta phân loại theo cấu trúc, hoặc theo các tiêu  trí được xác định từ trước và bằng các thuật toán chọn lọc  để có thể phân tích hay tổng hợp ảnh đã cho thành một  tập hợp các ảnh gốc, các ảnh gốc này được lưu trong một  thư viện và căn cứ vào thư viện này ta xây dựng được các  thuật giải phân tích và tổ hợp ảnh.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 67 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 68 8/9/2017 8/9/2017

2.1.3. Ứng dụng của đồ họa máy tính

• Hỗ trợ thiết kế (CAD – Computer‐Aided

Design)

Hỗ trợ thiết kế (CAD – Computer‐ Aided Design) • Hỗ trợ thiết kế được xem như một ứng dụng  chính của đồ họa tương tác đối tượng không  gian, trong đó đối tượng được xây dựng trực  tiếp như là mô hình thiết kế.  tiếp như là mô hình thiết kế

i

iể diễ

• Giao diện người dùng và máy tính • Biểu diễn thông tin hô • Lĩnh vực giải trí, nghệ thuật • Giáo dục và đào tạo • Bản đồ học

• Ngày nay CAD đã được sử dụng hầu hết trong  việc thiết kế các cao ốc, ô tô, máy bay, tàu  thủy, tàu vũ trụ, máy tính, trang trí mẫu vải, và  rất nhiều sản phẩm khác.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 69 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 70 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

12

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 71 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 72 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Giao diện người  dùng và máy tính

• Giao diện đồ họa thực sự là một cuộc cách mạng mang

lại sự thuận tiện và thoải mái cho người dùng ứng  dụng. Các ứng dụng dựa trên hệ điều hành MS  Windows là một minh họa rất trực quan của giao diện  đồ họa. Các chức năng của các ứng dụng này được  thiết kế cho người dùng làm việc thông qua các biểu thiết kế cho người dùng làm việc thông qua các biểu  tượng mô tả chức năng đó. Ví dụ, chức năng lưu tập  tin được hiểu thông qua biểu tượng đĩa mềm, chức  năng in ấn được hiểu thông qua biểu tượng máy in, …

• Các ứng dụng có giao diện đồ họa cho phép người

dùng khả năng làm việc dễ dàng với nhiều cửa sổ với  nhiều dạng tài liệu khác nhau cùng một lúc

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 73 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 74 8/9/2017 8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 75 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 76 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

13

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 77 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 78 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

2.2. Thiết kế đồ họa cho website

2.2.1. Xử lý đối tượng đồ họa

• 2.2.1. Xử lý đối tượng đồ họa • 2.2.2. Xử lý ảnh trong website

• Ảnh tạo bởi máy tính bao giờ cũng được cấu

trúc từ tập các đối tượng đơn giản hơn

Các đối tượng đồ họa cơ sở

2.2.2. Xử lý ảnh trong website

• Điểm

• Khi lựa chọn hình ảnh để xử lý đưa lên website

– Thông tin: tọa độ (x, y) – Thuộc tính: mầu sắc

• Đoạn thẳng, đường gấp khúc

– Thông tin: điểm đầu (x1, y1) điểm cuối (x2, y2) – Đường gấp khúc là tập các đoạn thẳng nối với nhau một cách  ộ á h

ấ khú là ậ

ối ới h

á đ

hẳ

ờ tuần tự

cần trả lời 03 câu hỏi sau: – Nó có liên quan không? – Nó có thú vị không? Nó có thú vị không? – Nó có hấp dẫn không?

– Thuộc tính: mầu sắc, độ rộng nét vẽ, kiểu nét vẽ

• Lưu ý:

• Vùng tô

– Thông tin: đường biên và vùng bên trong – Thuộc tính: mầu tô và mẫu tô

• Ký tự, chuỗi ký tự

– Nguồn ảnh hợp pháp – Luôn chú ý đến hướng dẫn sử dụng hình ảnh – Trích dẫn nguồn ảnh sử dụng nếu lấy từ nguồn khác

– Thuộc tính: Font chữ, mầu sắc, kích thước, khoảng cách ký tự …

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 79 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 80 8/9/2017 8/9/2017

2.3. Công cụ photoshop cho xử lý đồ họa

2.3.1. Giới thiệu về photoshop

• Adobe Photoshop • Phiên bản mới nhất hiện nay là Adobe Photoshop CC.

– Chỉnh sửa ảnh cho các ấn phẩm, – Thiết kế trang web, – Vẽ các loại tranh (matte painting và nhiều thể loại khác), – Vẽ texture cho các chương trình 3D... – Mọi hoạt động liên quan đến ảnh bitmap.

ế

• 2.3.1. Giới thiệu về photoshop • 2.3.2. Các thao tác cơ bản • 2.3.3. Các hiệu ứng cơ bản • 2.3.4. Xuất dữ liệu và tích hợp lên website

• Adobe Photoshop có khả năng tương thích với hầu hết

các chương trình đồ họa khác của Adobe – Adobe Illustrator, – Adobe Premiere, – After After Effects – Adobe Encore.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 81 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 82 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

14

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 83 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 84 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

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

1. Hình ảnh vector và raster 2. Độ phân giải ảnh 3. Quan hệ giữa kích thước ảnh và độ phân

giải ảnh iải ả h

4. Độ phân giải màn hình 5. Các chế độ hình ảnh (image modes)

Hình bên trái có độ phân giải 72 ppi, hình bên phải 300 ppi

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 85 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 86 8/9/2017 8/9/2017

Hình ảnh bitmap

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 87 88 8/9/2017 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Bài giảng Thiết kế và triển khai Website

15

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 89 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 90 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Hình ảnh RGB có 3 kênh màu R, G, B

Hình ảnh CMYK có 4 kênh màu C, M, Y, K

2.3.2. Các thao tác cơ bản

• Vùng làm việc • Làm việc với vùng chọn • LAYER • Chỉnh sửa ảnh

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 91 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 92 8/9/2017 8/9/2017

2. CHỌN CÔNG CỤ (Toolbox)

THAO TÁC VỚI LAYER

• Hiển thị/tắt thanh công cụ (toolbox):

• Layer / New / Layer Via Copy: Copy vùng

chọn đặt trên 1 layer mới (Ctrl‐J)

– Vào windows tools

• Layer / New / Layer Via Cut: Cắt vùng

• Chọn công cụ:

hí

Nhấ

ô

chọn đặt trên 1 layer mới (Shift Ctrl J) chọn đặt trên 1 layer mới (Shift‐Ctrl‐J) • Nhân bản layer: Chọn layer vào menu

– Nhấn phím tắt của công cụ hoặc h ặ ắ ủ – Sử dụng chuột chọn công cụ  – Click chuột phải vào công cụ có tam giác nhỏ phía

dưới để hiển thị các công cụ ẩn.

layer Duplicate Layer (click chuột phải vào  layer Duplicate Layer )

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 93 94 8/9/2017 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Bài giảng Thiết kế và triển khai Website

16

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 95 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 96 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

CHỈNH SỬA ẢNH

CHỈNH SỬA ẢNH

• Sử dụng bộ lọc để tạo sự tương phản của

• Điều chỉnh màu cho ảnh với lệnh Curves:

biên – Menu Filter / Sharper / Unsharp Mask – Amount: Định gi trị độ sắc nét cho ảnh,

thế

• Thay thế màu trong ảnh: ả h

à t

Radius: các điểm biên chịu tác động, Threshold : xác định mức độ khác biệt về độ nét

– Image AdjustmentsCurves – Di chuyển đường thẳng để xem sự thay đổi Th – Image AdjustmentsReplace Color – Sử dụng công cụ chọn màu cần thay đổi – Kéo các thanh trượt để thay đổi

NHÓM CÁC BỘ LỌC

2.3.4. Xuất dữ liệu và tích hợp lên  website

• Các định dạng ảnh:

• Nhóm Filter Artistic:

– JPEG: định dạng này có thể thể hiện với hàng triệu

– Colored Pencil : Làm cho ảnh hay phần được chọn giống như phần được vẽ bằng chì phấn bằng chì phấn

mầu – GIF: ảnh này thể hiện với 256 mầu và hỗ trợ ảnh GIF: ảnh này thể hiện với 256 mầu và hỗ trợ ảnh  trong suốt

– …

– PNG: có tác dụng nén ảnh có các mảng mầu đặc

và giữ được độ sắc nét chi tiết

• Nhóm Filter Blur: tạo độ nhòe • Nhóm FilterPixelate:Phá vở hình ảnh thành

nhiều mảnh

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 97 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 98 8/9/2017 8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 99 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 100 8/9/2017 8/9/2017

Chương 3. Một số ngôn ngữ xây dưng  Website

3.1. HTML (Hyper Text Makup Language)

• 3.1. HTML (Hyper Text Makup Language) • 3.2. PHP,  Javascript         • 3.3. Môi trường ASP.NET • 3.4. Một số công cụ soạn thảo mã nguồn

• 3.1.1. Tổng quan về HTML • 3.1.2. Các thẻ cơ bản của HTML    • 3.1.3. Sử dụng Frontpage • 3.1.4. Định dạng bằng CSS

Bài giảng Thiết kế và triển khai Website

17

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 101 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 102 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

3.1.1. Tổng quan về HTML

3.1.2. Các thẻ HTML

• HTML=HyperText Markup Language – Ngôn ngữ đánh dấu

• Cấu trúc chung của một siêu văn bản

siêu văn bản – Ngôn ngữ để viết các trang web.

• Do Tim Berner Lee phát minh và được W3C (World Wide

Web Consortium) đưa thành chuẩn năm 1994

• Các trang Web đầy sinh động mà bạn thấy trên WWW là

các trang siêu văn bản được viết bằng HTML

• HTML cho phép bạn tạo ra các trang phối hợp hài hoà

 Tiêu đề trang  ... Các khai báo khác ở đây Các khai báo khác ở đây ... Nội dung cần thể hiện ở đây

giữa văn bản thông thường với hình ảnh, âm thanh, video,  các mối liên kết đến các trang siêu văn bản khác

103

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

104

3.1.2. Các thẻ HTML

Font & Color

• Các lớp thẻ

• Thẻ

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 8/9/2017

- font

Arial

• Thuộc tính

Size 1

Size 7

- face

Red

- size

Blue

- color

– Cấu trúc (structure) – Định dạng (formatting) – Ảnh (image) – Danh sách (list) – Bảng (table) – Form – Khung hiển thị (frame)

72pt

- style

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

105

8/9/2017

106

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Lớp thẻ âm thanh, hiện ảnh

Link & URL & Bookmark

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

• Thẻ

– thẻ  không có thẻ kết thúc, gồm các thuộc

- a

+ WEB Resource + WEB Resource

• Thuộc tính Th ộ tí h

+ File System

- href - title - name

+ Bookmark

tính: • Src: Đường dẫn đến file ảnh Src: Đường dẫn đến file ảnh • Alt: Đoạn văn bản hiển thị khi không có ảnh • Width, height: Độ rộng, chiều cao của ảnh khi hiển thị • Border: Độ đậm của đường viền xung quanh ảnh • Vspace, hspace: Khoảng cách theo chiều dọc và theo

chiều ngang của ảnh với các phần tử khác

107

8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

108

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Bài giảng Thiết kế và triển khai Website

18

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Lớp thẻ tạo danh sách

List

• Gồm các loại danh sách

• Ds các định nghĩa

• Ds không thứ tự

- dl (definition lists)

- ul (unordered lists)

- dt (title)

- li

• Ds có thứ tự

- dd (detail)

- ol (ordered lists)

- li

•

–

 ... :           Danh sách thư mục –
 ... 
:             Danh sách được định nghĩa –  ... : Danh sách thực đơn : Danh sách thực đơn –
     ... 
:             Danh sách có thứ tự –
     ...  
:            Danh sách không có thứ tự Các loại danh sách có thể lồng nhau

• Thuộc tính

DISC | CIRCLE | SQUARE

- type

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

109

8/9/2017

110

A | a | I | i | 1 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Lớp thẻ tạo bảng

Table

• Bao gồm các thẻ

TAG/Attribute TAG/Attribute

Mô tảMô tả

TABLE -- bbắắtt ®Çu®Çu b¶ngb¶ng.. TABLE

xung khung næinæi 33DD xung

BORDER -- ®Æt®Æt khung BORDER quanh b¶ngb¶ng.. quanh

> HEIGHT=n%>> HEIGHT=n% HEIGHT=n%

BGCOLOR -- ®Æt®Æt mμumμu nÒnnÒn cñacña b¶ngb¶ng BGCOLOR

Đặc tả các dòng của bảng Đặc tả ô dữ liệu của bảng Đặc tả ô dữ liệu của bảng Đặc tả ô tiêu đề của bảng

table dßng cñacña b¶ngb¶ng -- table

BắtBắt ®Çu®Çu métmét dßng rowrow..

–

 ...
: Giới hạn bảng –  ... :  –  ...:  : –  ...:  –  ...:  Đặc tả tên bảng

b¶ng(B33//44tt ®Çu®Çu

BắtBắt ®Çu®Çu métmét «« cñacña b¶ng(B cétcét trong

hµng).. trong métmét hµng)

gièng

gièng nh-nh-

nh-ng

nh-ng chocho chÝnh gigi÷÷aa --

ThÎThÎ chch÷÷ inin ®Ëm®Ëm vµvµ cc¨¨nn chÝnh (heading).. (heading)

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

111

8/9/2017

112

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Form

Các thẻ trong form

•

• Sử dụng để chứa mọi đối tượng khác • Không nhìn thấy khi trang web được hiển thị • Quy định một số thuộc tính quan trọng như

method, action. method action

• Thẻ tạo form:

– Trường nhập dữ liệu • – Danh sách chọn h á h h •

…

– Mục chọn trong danh sách •

• Có thể có nhiều form trong một tài liệu • Form không được lồng nhau

– Trường nhập dữ liệu nhiều dòng

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

113

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

114

Bài giảng Thiết kế và triển khai Website

19

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Flash

Một số thẻ meta thông dụng

– Đặt ở giữa … – Thường dùng quy định thuộc tính cho trang web – Có tác dụng lớn với Search Engine Có tác dụng lớn với Search Engine – 2 cách viết thẻ :

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

115

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

116

Lớp thẻ tạo khung

 …

• Chia vùng hiển thị của trang web thành nhiều

• Frameset: dùng để phân vùng hiển thị trên trình

vùng con theo chiều dọc, ngang

• Mỗi vùng con là một frame có đặc điểm:

duyệt – Cols = n | * | n% – Rows = n | * | n% – Border, bordercolor – Border bordercolor

• Frame: Nằm trong frameset dùng để định nghĩa

– Có thể truy cập tới một URL độc lập với frame khác Có thể truy cập tới một URL độc lập với frame khác. – Mỗi frame có thể được đặt tên. – Có thể thay đổi kích thước khung nhìn, cho phép hay  không cho phép người dùng thay đổi kích thước này

từng vùng – Src: URL chứa nội dung của vùng – Name, bordercolor, noresize, marginwidth,

marginheight

• Tài liệu có cấu trúc frame, không có phần tử body

– Scrolling = ‘yes|no|auto’

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

117

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

118

3.2. PHP,  Javascript

Nội dung

• 3.2.1.  PHP (Hypertext Preprocessor) • 3.2.2. Javascript trong xây dựng website

• Lập trình Web tĩnh và Web động • Cài đặt Apache • MySQL • Ngôn ngữ PHP

Bài giảng Thiết kế và triển khai Website

20

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 119 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 120 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Trang web tĩnh

Trang web động

URL yêu cầu

URL yêu cầu

Web Server

Network

Network

HTML

HTML

URL yêu cầu

URL yêu cầu

Web Server

Biên dịch, Thực thi

Trang web động

HTML HTML

HTML HTML

• Mọi người sử dụng nhận được kết quả giống

• Mỗi người sử dụng có thể nhận được nội dung khác nhau

nhau.

phụ thuộc vào kết quả chạy chương trình.

Client

Client

•

•

Trang web được viết bằng HTML, chỉ thay đổi  khi có sự thay đổi của người xây dựng

Trang web viết bằng HTML + Ngôn ngữ lập trình phía  server. Có thể được thay đổi bởi người sử dụng

•

Khả năng tương tác yếu

•

Khả năng tương tác mạnh

• Webserver hoạt động giống 1 file server.

Một số công nghệ viết web động

Cài đặt và cấu hình các phần mềm

• Web server: Chọn 1 trong 2

– IIS (Internet Information Service) – tích hợp trong Win 2000, XP,

• Động phía client:

2003, Vista.

– JavaScript, VBScript được chạy ở client.  – Applet – Flash

• Động phía server:

• • •

– Apache: http://www.apache.org Biên dịch: PHP: http://www.php.net Hệ quản trị CSDL: MySQL www.mysql.com Hỗ trợ quản lý CSDL MySql

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 121 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 122 8/9/2017 8/9/2017

y q

y

– CGI: Common Gateway Interface – Java Server Pages – ASP, ASP.NET: Microsoft

•

• Viết bằng VBScript, JavaScript chạy phía server.  • Sử dụng web server IIS.

– PHP: Mã nguồn mở

– MySql Control – PHPMyAdmin (web) – SQL Manager – Navicat MySQL Hỗ trợ soạn thảo: – PSpad, Ediplus – Macromedia Dreamweaver

•

Phần mềm khác:

• Ngôn ngữ lập trình PHP, chạy phía server. • Webserver: Apache, IIS • Bộ biên dịch: PHP

– Perl

– Bộ gõ: Unikey, Vietkey bản đầy đủ – Adobe Photoshop – Xara3D…

Cài đặt Apache 2.x (Windows)

Trang PHP đầu tiên

•

Soạn thảo: – Mở trình soạn thảo gõ nội dung dưới đây – Ghi lại với tên “CHAO.PHP” trong thư mục gốc của web (Nếu sử dụng Wamp thì thường là

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 123 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 124 8/9/2017 8/9/2017

C:\Wamp\www)

• Để cài đặt Apache trong Windows bằng chương trình cài đặt tự động, cần  download chương trình này về từ website của Apache. Thông thường  những chương trình dạng này sẽ không hỗ trợ giao thức https.

• Quá trình cài đặt sẽ tự động sao chép tất cả các file cần thiết vào thư mục

chỉ định.

dau e

a g

/

• Có thể sử dụng chương trình quản lý ở mức dịch vụ để start, stop, restart,  • Có thể sử dụng chương trình quản lý ở mức dịch vụ để start stop restart

reload Apache hoặc khởi động bằng tay.

Trang PHP dau tien e e

echo "Chào mừng các bạn đến với PHP";

?>

Bài giảng Thiết kế và triển khai Website

21

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 125 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 126 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Trang PHP đầu tiên (tt)

Cài đặt MySQL 5.x

• Download phiên bản mới nhất

• Thử nghiệm: Mở IE, gõ địa chỉ:

http://localhost/chao.php

RPM (.rpm)

Linux

Source code (.tar.gz)

MySQL

Program install (.msi)

Windows

Source code (.zip)

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

Cú pháp cơ bản

• PHP mỗi khi thông dịch một file sẽ chỉ thi hành những khối lệnh nằm giữa

2 cặp thẻ 

• Mọi ký tự nằm ngoài các cặp thẻ trên đều được giữ nguyên và thêm vào  trong luồng siêu văn bản trả về cho môi trường bên ngoài theo đúng thứ  tự ban đầu.

ộ g, g

ậ

g

,

• Là ngôn ngữ lập trình dạng server‐side, vì vậy PHP  ngoài các khả năng của một ngôn ngữ lập trình  thuần túy còn có đầy đủ các chức năng cần thiết  của một CGI chuẩn như: Lấy dữ liệu từ form, sinh  các trang web động, gửi nhận cookie, hỗ trợ  ợ session, thao tác với biến của WEB Server.

• Nói chung cú pháp trong PHP được thừa kế từ cú pháp của C C++ và Perl • Nói chung, cú pháp trong PHP được thừa kế từ cú pháp của C, C++ và Perl.  Tuy nhiên, cũng có một số kết hợp và thay đổi từ các cú pháp gốc tạo ra  nét đặc thù riêng cho PHP.

• PHP cũng có hệ thống thư viện hàm đồ sộ giúp  cho các lập trình viên có nhiều lựa chọn trong  việc sửa dụng PHP để kết nối với nhiều phần  mềm khác nhau như: Oracle, MySQL, ODBC,  LDAP, Mail (SMTP, POP3), COM, .Net…

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 127 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 128 8/9/2017 8/9/2017

Cú pháp cơ bản (tt)

Biến

• Để tạo ra các kết xuất trả về cho môi trường bên ngoài (trình duyệt) ta có thể sử

• Định nghĩa biến

dụng các cách sau:

– Biến trong PHP được bắt đầu bởi ký tự $, sau đó là tên biến được định nghĩa

theo văn phạm sau:

– Viết kết xuất bên ngoài cặp thẻ  – Dùng lệnh echo hoặc print

• Để tạo ra chú thích, có thể dùng cú pháp dạng C như sau:

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 129 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 130 8/9/2017 8/9/2017

[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]* – Tên biến có phân biệt hoa thường. Có thể gán giá trị vào biến mà không cần

khai báo. Nhưng chỉ có thể truy cập nội dung biến đã có giá trị. khai báo Nhưng chỉ có thể truy cập nội dung biến đã có giá trị

Để chú thích dòng Để chú thích khối

– Để xác định biến tồn tại hay không có thể dùng hàm isset() và để hủy biến có

•

thể dùng hàm unset()

– Để xác định kiểu hiện tại của biến có thể sử dụng hàm gettype(), var_dump()

•

hoặc các hàm is_var_type().

– //  – /*   */ Lệnh của PHP kết thúc bởi dấu chấm phẩy (;) và có thể viết nhiều lệnh trên một  dòng. Lưu ý không giống C, C++ trình thông dịch của PHP chỉ phân biệt hoa thường với  tên biến, tên hằng. Còn tên hàm (có sẵn hoặc do người dùng định nghĩa) và từ  khóa thì không phân biệt.

Bài giảng Thiết kế và triển khai Website

22

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 131 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 132 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Biến (tt)

Biến (tt)

•

• 4.2.4 Biến bên ngoài PHP:

Truy cập giá trị biến: – Để truy cập giá trị biến chỉ cần dùng cú pháp $var_name. Biến kiểu mảng cần

thêm cặp ký tự [ ] để truy cập vào giá trị các phần tử trong mảng.

– Tuy nhiên trong nhiều trường hợp phải sử dụng thêm cặp ngoặc nhọn { } hoặc

– Biến form: Được truy cập thông qua các biến mảng siêu toàn cục được định  nghĩa trước là $_POST, $_GET, $_COOKIE, $_REQUEST, $_FILES. Nếu khai báo  register_global được bật trong php.ini thì tự động các biến có tên tương ứng  cũng được tạo ra.

ký tự & để có thể xác định chính xác tên biến cần truy cập

– Biến session: Được truy cập thông qua các biến mảng siêu toàn cục được định

$b = every ; $b = ‘every’;

nghĩa trước là $_SESSION.

$d = ‘b’;

– Biến server: Được truy cập thông qua các biến mảng siêu toàn cục được định

nghĩa trước là $_SERVER, $_ENV.

echo “$a ${b}one.”;

$a = ‘hello’; $a = hello ; $c = &$b; echo “$a $bone.”; echo “$a {$c}one.”; echo “$a $$d”; echo “$a {$$d}one.”;echo “$a

${$d}one.”;

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

Cấu trúc điều khiển (tt)

• Rẽ nhánh với switch … case

• Rẽ nhánh với if … else

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 133 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 134 8/9/2017 8/9/2017

switch ($a) {

if ($a > $b) {

ifif (($a$a > > $b$b):):

case 0:

echo "a > b"; $a = $b;

echoecho "a > b" echoecho a > ba > b ;; "a > b";; $a$a = = $b$b;;

} else {

elseelse::

echo "a = 0"; break; case 1:

echoecho "a <= b" "a <= b";; $b$b = = $a$a;;

echo "a <= b"; $b = $a;

endif;; endif

}

switch (($a$a):): switch case 0: case 0: echoecho "a = 0" "a = 0";; break break;; case 1: case 1: echoecho "a = 1" "a = 1";; break break;; endswitch;; endswitch

echo "a = 1"; break;

}

Cấu trúc điều khiển (tt)

Cấu trúc điều khiển (tt)

•

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 135 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 136 8/9/2017 8/9/2017

Lặp với for & foreach

• Lặp với while & do … while

for ($i=1; $i<=10; $i++) print $i;

while ($i++ < 5) { switch ($i) {

case 2:

echo "At 2"; break 1; /* Exit only switch. */

y

* 2

l

case 5:

$arr = array(1, 2, 3, 4); foreach ($arr as $value) { $ $value = $value * 2; l $ print $value;

echo "At 5"; break 2; /* Exit switch and while.

*/

}

default: break;

$arr = array("one", "two", "three"); foreach ($arr as $key => $value) {

echo "Key: $key; Value: $value";

} while (1) continue 2; echo "This never gets.";

}

}

Bài giảng Thiết kế và triển khai Website

23

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 137 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 138 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Kết nối với MySQL

Hàm (tt)

• Ví dụ:

function foo() {

echo "In foo() ";

} function bar($arg = '') {

echo "In bar(); argument:

'$arg'";

} function echoit($string) {

echo $string; echo $string;

} $func = 'foo';

$func(); // This calls

foo()

$func = 'bar'; $func('test');// This calls

$db = mysql_connect('Máy chủ','username', 'pwd') or die(‘Không kết nối được với máy chủ'); mysql_query("SET NAMES 'utf8'"); mysql_query("SET CHARACTER SET 'utf8'"); mysql_select_db('CSDL', $db) or die('Không tìm thấy CSDL'); thấy CSDL ); $sql = ‘Câu lệnh truy vấn SQL’; $rs = mysql_query($sql); for ($i = 0; $i < mysql_num_rows($rs); $i++) {

bar()

$func = 'echoit';$func('test');// This calls

echoit()

$rc = mysql_fetch_array($rs); echo $rc[‘Trường thứ nhất’];//Cột đầu tiên echo $rc[1];//Cột thứ hai echo $rc[‘Trường thứ ba’];//Cột thứ 3

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 139 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 140 8/9/2017

} 8/9/2017

JavaScript

Khả năng của Javascript

•

• JavaScript có thể tăng cường tính động và tính

•

• •

tương tác của các trang web. – Cung cấp sự tương tác người dùng – Thay đổi nội dung động Thay đổi nội dung động – Xác nhận tính hợp lệ của dữ liệu

JavaScript là ngôn ngữ kịch bản dùng để tạo các  client‐side scripts và server‐side scripts. JavaScript làm cho việc tạo các trang Web động và tương tác  dễ dàng hơn JavaScript là một ngôn ngữ kịch bản được hãng Sun JavaScript là một ngôn ngữ kịch bản được hãng Sun  Microsystems và Netscape phát triển. JavaScript được phát triển từ Livescript. Của Netscape

• • Các ứng dụng client chạy trên một trình duyệt như Netscape

Navigator hoặc Internet Explorer.

Công cụ và môi trường thực thi

Chèn Javascript vào HTML

• Sử dụng thẻ SCRIPT:

• Các công cụ sinh mã JavaScript

• Sử dụng một file JavaScript ở ngoài

• Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của thẻ • Sử dụng trong các  trình điều khiển sự kiện

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 141 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 142 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

24

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 143 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 144 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Ví dụ

Ví dụ

Cấu trúc lặp

Lệnh rẽ nhánh • Câu lệnh điều kiện được dùng để kiểm tra điều kiện. Kết quả

xác định câu lệnh hoặc khối lệnh được thực thi.

• Cấu trúc điều khiển lặp trong chương trình là

• Các câu lệnh điều kiện bao gồm:

các lệnh lặp.

– If (<ĐK>) Lệnh 1

• Các kiểu lệnh lặp bao gồm:

else Lệnh 2; – switch (Biến) { switch (Biến) {

case : ; break; case : ; break; ... case : ; break;

}

f– for – do …. while – while – break & continue – with

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 145 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 146 8/9/2017 8/9/2017

Hàm

Xử lý sự kiện

•

JavaScript có sẵn các hàm đinh nghĩa trước dùng trong script.

• Một vài hàm định nghĩa trước trong JavaScript bao gồm:

– Hàm eval,...

• Hàm do người dùng tự tạo

g ự ạ

g

• onClick • onChange • onFocus • onBlur onBlur • onMouseOver

• onMouseOut • onLoad • onSubmit • onMouseDown onMouseDown • onMouseUp

function funcName(argument1,argument2,…){

statements;

}

• Gọi hàm

• Câu lệnh Return

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 147 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 148 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

25

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 149 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 150 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

DOM (Document Object Models)

Một vài ứng dụng

• Một tính năng quan trọng của JavaScript là

ngôn ngữ dựa trên đối tượng.

• Giúp người dùng phát triển chương trình theo

môđun và có thể sử dụng lại.  môđun và có thể sử dụng lại

• Thay đổi thanh trạng thái, tiêu đề • Tự động refresh • Kiểm tra tính hợp lệ của dữ liệu form • Hộp thoại tự tạo

• Đối tượng được định nghĩa là một thực thể  đơn nhất bao gồm các thuộc tính và phương  thức.

• Thuộc tính là giá trị của một đối tượng.

Tham khảo

g

y

Hiệu ứng chữ chạy trên trình thanh  trạng thái của trình duyệt

• http://www.javascriptkit.com • http://www.dynamicdrive.com • http://www.javascriptbank.com • http://www.dhtmlcentral.com

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 151 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 152 8/9/2017 8/9/2017

Giải thuật

Mã lệnh

• Ý tưởng giải thuật

– Để có được cảm giác chữ chạy trên thanh trạng thái ta cần thay đổi

Bài giảng Thiết kế và triển khai Website

26

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 155 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 156 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Phát triển

Đối tượng window

• Thay bằng nhiều dòng chữ chạy khác nhau (sử

dụng mảng để lưu trữ)

hữ h

h

• Chữ chạy theo nhiều cách khác nhau • Cho chữ chạy trên thanh tiêu đề h h iê đề ê • Cho chữ chạy trên một đối tượng khác

• Tập hợp: frames[] • Thuộc tính: – document hi– history – Location – Opener – status:

Đối tượng document

3.3. Môi trường ASP.NET

• Truy xuất đến các form:

– window.document.tên_form

• Truy xuất các đối tượng trong form:

• 3.3.1. Giới thiệu về ASP.NET • 3.3.2. Xây dựng trang  bằng ASP.NET  • 3.3.3. Kết hợp ASP.NET Objects với VB.NET

– objForm.Tên_ĐT • Thuộc tính đối tượng:

– value

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 157 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 158 8/9/2017 8/9/2017

Các components Web Application

Static Web Pages (Web tĩnh)

Note

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 159 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 160 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

27

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 161 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 162 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Các  trạng thái của ASP.Net

Dynamic Web Pages (Web động)

Note

GIỚI THIỆU VỀ ASP.NET

GIỚI THIỆU VỀ ASP.NET

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 163 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 164 8/9/2017 8/9/2017

.NET Framework

Web services Web services

Web Forms Web Forms

Windows Forms Windows Forms

Data and XML Class Data and XML Class (ADO.NET, SQL, XSLT, Xpath (ADO.NET, SQL, XSLT, (ADO NET SQL XSLT (ADO NET SQL XSLT Xpath

XML,etc)) Xpath XML etc Xpath, , XML,etc XML etc))

• NET Framework là một tập hợp những giao diện lập trình và là tâm điểm của nền tảng .NET của Microsoft. Nó cung cấp cơ sở hạ tầng để xây dựng và chạy các dịch vụ Web. để xây dựng và chạy các dịch vụ Web

Framework Base Class Framework Base Class (IO, string net, security, threading, text, reflection, collection, ect) (IO, string net, security, threading, text, reflection, collection, ect)

Visual Studio.Net Visual Studio.Net

Common Language Runtime Common Language Runtime (debug, exception, type checking, NT compilers) (debug, exception, type checking, NT compilers)

.NET Framework .NET Framework

.NET Enterprise .NET Enterprise Sevices Sevices

.NET Building .NET Building Block Services Block Services

Windows Platform Windows Platform

Operating system on services, desktops and devices Operating system on services, desktops and devices

GIỚI THIỆU VỀ ASP.NET

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 165 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 166 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

28

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 167 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 168 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

GIỚI THIỆU VỀ ASP.NET

KIẾN TRÚC ỨNG DỤNG WEB

Một ứng dụng thường được chia thành 3 lớp phân biệt

chính:

.NET Framework Class Library Support .NET Framework Class Library Support

COM Marshaler COM Marshaler COM Marshaler COM Marshaler

Thread Support Thread Support Thread Support Thread Support

• Tầng trình diễn (Presentation Tier – FrontEnd) • Tầng logic (Logical Tier – Middleware) • Tầng dữ liệu (Data Tier – BackEnd) B kE d)

dữ liệ (D t Ti

Tầ

Type Checker Type Checker

Exception Manager Exception Manager

Debug Engine Debug Engine

Security Engine Security Engine

MSIL to Native Compilers MSIL to Native Compilers

Code Manager Code Manager

Garbage Collector Garbage Collector

Class Loader Class Loader

GIỚI THIỆU VỀ WEBSERVER

Cấu trúc của ứng dụng

•

•

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 169 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 170 8/9/2017 8/9/2017

Thư mục App_Data Là nơi chứa dữ liệu của ứng dụng, được sử dụng trong ASP.NET 2.0 để lưu trữ dữ liệu cục bộ của ứng dụng Thư mục App_Code App_Code là nơi chứa source code cho lớp tiện ích  và các đối tượng nghiệp vụ (ví dụ: các file .cs, .vb,  và .jsl)

3.3.2. Xây dựng trang  bằng ASP.NET

Cấu trúc của ứng dụng

• Cách viết code trong chương trình • Các thành phần trong trang • Cách tạo và chạy ứng dụng

Cấu trúc tập tin Web.config: g /

pp

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 171 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 172 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

29

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 173 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 174 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Cách viết code trong chương trình

Cách viết code trong chương trình

•

Có 2 cách viết code trong chương trình: • Cách viết Code Inline  • Cách viết Code Behind

Cách viết code inline Trong cách viết Code inline, mã vẫn được viết trong các trang ASP.NET nhưng không trộn lẫn với HTML dành cho phần nội dung, khi đó code client và code server cách nhau bởi cặp tag <% %>

Ví dụ:

<%String strName=”Hello World”;%>

<%=strName%>

Cách viết code trong chương trình

Cách viết code trong chương trình

• Cách viết Code Behind

• Xuất dữ liệu cho client:

Cú pháp:

Là hình thức viết code trong một tập tin khác. Khi đó  trong tập tin .aspx cần phải khai báo rõ nơi chứa  code với cú pháp sau:

p p

<%=VariableName%> bl

%

%

AutoEventWireup=”true”

<%@Page Language=”C#” CodeFile=”FileNameCode” Inherits=”ClassContainCode”%>

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 175 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 176 8/9/2017 8/9/2017

Cách viết code trong chương trình

Cách viết code trong chương trình

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 177 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 178 8/9/2017 8/9/2017

VD.aspx

<%@ Page Language="C#" AutoEventWireup="true"

• Trong đó: FileNameCode là tên tập tin code. Tập tin này có phần mở rộng là .aspx.cs, .aspx, .vb, … tuỳ theo ngôn ngữ sử dụng để viết code

• Ví dụ: • Ví dụ:

CodeFile="VD.aspx.cs" Inherits="VD" %> Untitled Page Untitled Page

Bài giảng Thiết kế và triển khai Website

30

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 179 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 180 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Cách viết code trong chương trình

Cách viết code trong chương trình

• Cơ chế làm việc của Code‐Behind

VD.aspx.cs

– Tạo các file riêng biệt cho giao diện người dùng và

protected void Button1_Click(object sender,

luận lý – Sử dụng dẫn hướng @ Page để liên kết 2 file Sử dụng dẫn hướng @ Page để liên kết 2 file – Pre‐compile

EventArgs e) EventArgs e) {

Label1.Text = "Hello Word";

}

CÁC THÀNH PHẦN TRONG TRANG

CÁC THÀNH PHẦN TRONG TRANG

•

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 181 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 182 8/9/2017 8/9/2017

Không gian tên (Namespaces)

• Một số NAMESPACE và chức năng

Collections

NameSpace là một tập hợp Logic các nhóm thư viện có liên quan đến nhau, giúp người lập trình dễ sử dụng và dễ tìm kiếm. sử dụng và dễ tìm kiếm

é

ứ

á ớ

ComponentModel

System là một NameSpace gốc của framework.NET. Nó chứa tất cả các kiểu dữ liệu nguyên thuỷ (Primitives) và các NameSpace khác.

Configuration

Chứa các đối tượng như Danh sách, hàng đợi và bảng băm Chứa các lớp cho phép thay đổi ổ các control và component trong cả lúc chạy và lúc thiết kế. Cung cấp các phương thức và đối tượng cho phép truy cập đến các thông số cấu hình cho .NET

CÁC THÀNH PHẦN TRONG TRANG

CÁC THÀNH PHẦN TRONG TRANG

• Khai báo Namespace

Data

Chứa các lớp cho phép tương tác với nguồn dữ liệu, Hình thành nên ADO.NET

<%@Import NameSpace=%>

Math Math

Chứa các hàm và hằng số liên quan đến xử lý toán học. ử lý t á h

Ví dụ:

Web

<%@import Namespace = "System.Data" %>

<%@import Namespace = "System.Data.OleDb" %>

XML

Drawing

Cung cấp cơ chế truyền thông giữa Client/Browser; Nó mô tả các đối tượng được sử dụng với ASP.NET Chứa các lớp để xử lý dữ liệu XML Chứa các lớp cho phép sử dụng khả năng về đồ hoạ

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 183 8/9/2017 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 184

Bài giảng Thiết kế và triển khai Website

31

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 186 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

CÁC THÀNH PHẦN TRONG TRANG

CÁC THÀNH PHẦN TRONG TRANG

• @import: cho phép chỉ ra không gian tên được

Ví dụ:

import vào trang aspx

<%@ Page Language="C#" CodeFile=“login.aspx.cs“

Ví dụ:

Inherits=“login" %>

g

<%@import namespace=“System.Data” %> %@import namespace System.Data  %

<%@ import namespace=“System.Data” %>

<%@ Register Src=“Calendar.ascx“

TagName=“Calendar" TagPrefix="ucPMT" %>

• @Register: kết hợp alias với namespace và tên lớp cho ký hiệu trong cú pháp của server control. Chỉ thị này được sử dụng khi drag và drop một user control vào trang aspx

Cách tạo và chạy ứng dụng

Cách tạo và chạy ứng dụng

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 187 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 188 8/9/2017 8/9/2017

Cấu hình IIS 1. Mở ControlPanel  Administrative Tool – chọn

Internet Information Services (IIS)

Tạo ứng dụng web trong Visual Studio.NET Khởi động Visual Studio.NET Chọn File – New – Website  Trong hộp thoại New Website

2. Click Phải Default Web Sites – chọn New – chọn VirtualDirectory Next nhập tên thư mục ảo Next.

‐ Template: chọn ASP.NET Web site. ‐ Location: file system click Brows chọn vị trí lưu

3. Click Browse chọn thư mục websiteNext chấp

website

nhận các option mặc địnhnextfinish

‐ Language: C# OK

Cách tạo và chạy ứng dụng

Cách tạo và chạy ứng dụng

thêm

sau

đó

lưu ở thư mục

root

và

• Trong phần Location : nếu để theo mặc định http://localhost/ website http://localhost/MyWeb thì ứng dụng MyWeb sẽ được : tạo ra c:\InetPub\wwwroot\.

• Nếu sử dụng Virtual Directory đã tạo ở trên http://localhost/Projects/MyWeb thì ứng dụng MyWeb sẽ được tạo ra và lưu ở thư mục đã xác định trong Virtual Directory

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 189 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 190 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

32

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 191 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 192 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Cách tạo và chạy ứng dụng

3.3.3. Kết hợp ASP.NET Objects với  VB.NET

• Ứng dụng web đã được tạo ra và có 1 trang

mặc định là Default1.aspx và các file khác như  Web.Config, Styles.css…

• Mỗi một trang .aspx trong project đều có 1 file  • Mỗi một trang aspx trong project đều có 1 file

• Thêm các web controls lên form • Thiết lập thuộc tính WebControl • Các sự kiện điều khiển trong WebControl • Các control validation • Thiết kế trang DemoWeb

code behind. VD: Default1.aspx.cs riêng để viết code.

Dùng ở chế độ hiển thị HTML

Thiết kế trang DemoWeb

• Có thể thêm server control bằng cách chỉ định  code ASP.Net trực tiếp trong chế độ hiển thị  HTML của file .aspx

• RequiredFieldValidator dùng kiểm tra giá trị  của control có hợp lệ hay không. Bảng thuộc  tính:

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 193 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 194 8/9/2017 8/9/2017

Thiết kế trang DemoWeb

• Code

• Code HTML

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 195 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 196 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

33

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 197 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 198 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

3.4.1. Công cụ Macromedia

3.4. Một số công cụ soạn thảo mã  nguồn

• Macromedia Dreamwaver là công cụ dùng để  thiết kế website đơn giản, nhanh và mạnh

• 3.4.1. Công cụ Macromedia • 3.4.2. Công cụ Dreamwaver

• Macromedia Flash là công cụ để phát triển các

úng dụng, phần mềm mô phỏng. Flash sử  úng dụng phần mềm mô phỏng Flash sử dụng ngôn ngữ lập trình ActionScrip để tạo  các tương tác, các hoạt cảnh.

NỘI DUNG

3.4.2. Công cụ Dreamwaver

• Giới thiệu về Macromedia Dreamweaver. • Thiết kế Web bằng một số công cụ cơ bản. • Cách tạo liên kết (Hyperlink). • Kỹ thuật thiết kế Frame. • Kỹ thuật Layout. • Sử dụng CSS để tạo một số hiệu ứng trong

trang Web.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 199 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 200 8/9/2017 8/9/2017

MỤC TIÊU

GIỚI THIỆU DREAMWEAVER

Giao diện chính của Dreamweaver:

Sử dụng phần mềm DreamWeaver để: • Thiết kế các trang Web tĩnh, động. • Tạo các hiệu ứng trong trang Web. • Quản lý một Website cục bộ.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 201 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 202 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

34

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 203 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 204 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

GIỚI THIỆU DREAMWEAVER

GIỚI THIỆU DREAMWEAVER

4) Chức năng các thành phần:   Thanh công cụ Document:

4) Chức năng các thành phần:   Thanh công cụ Insert:  Common:

Thể hiện lỗi khi thiết kế

Thiết kế bằng HTML

Thiết kế bằng công cụ

Tiêu đề của trang hiện hành

Ảnh

Ngày

Mẫu

Tạo liên kết

Tạo điểm neo

Quản lý file

Các tùy chọn khi thiết kế

Bảng (table)

Flash, ActiveX

Chú thích

Thẻ lựa chọn

Thiết kế bằng HTML và bằng công cụ

Tạo liên kết đến địa chỉ mail

Xem thử kết quả bằng trình duyệt

GIỚI THIỆU DREAMWEAVER

THIẾT KẾ TRANG WEB

1) Tạo và lưu một trang Web:  Tạo mới một trang Web: click HTML

(Create New)

Hoặc chọn menu File  New

4) Chức năng các thành phần:   Thanh công cụ Insert: Ngoài ra còn có các nhóm công cụ khác: + Layout: cách bố trí, sắp xếp các thành phần. + Forms: biểu mẫu + Forms: biểu mẫu. + Text: định dạng văn bản. + HTML: các thẻ HTML. + Application: những ứng dụng trong Web động. + Flash elements: các thành phần của Flash.

Xuất hiện cửa sổ thiết kế

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 205 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 206 8/9/2017 8/9/2017

THIẾT KẾ TRANG WEB

THIẾT KẾ TRANG WEB

2) Định dạng tổng quát cho trang Web: + Appearance: Định dạng Font, Size, màu chữ cho toàn trang Web

1) Tạo và lưu một trang Web:  Lưu trang Web: chọn menu File  Save (Ctrl + S) Xuất hiện hộp thoại Save As

1. Chọn đường dẫn nơi lưu file

Đị h d Định dạng màu nền à ề hoặc sử dụng hình ảnh để làm nền

Canh lề trái, trên

2. Đặt tên file và phần mở rộng

Canh lề phải, dưới

3.Chọn loại file

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 207 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 208 8/9/2017 8/9/2017

4. Sau khi đã chọn đầy đủ thì click Save 209

Sau khi đã định dạng, click nút Apply

Bài giảng Thiết kế và triển khai Website

35

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 210 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

THIẾT KẾ TRANG WEB

THIẾT KẾ TRANG WEB

2) Định dạng tổng quát cho trang Web: + Title/Encoding:

Tiêu đề của trang Web

2) Định dạng tổng quát cho trang Web: + Links: Định dạng Font, size, màu chữ cho các liên kết

Mà liê kết Màu liên kết sau khi đã click

Màu liên kết khi active

Màu liên kết khi di chuyển chuột trên liên kết

Định dạng kiểu mã hóa

Sau khi đã định dạng, click nút Apply

THIẾT KẾ TRANG WEB

THIẾT KẾ TRANG WEB

3) Định dạng Text trên trang Web:  Thêm Font vào danh sách các font:

3) Định dạng Text trên trang Web:  Bỏ Font trong danh sách các font:

Thêm 1 nhóm font mới

Bỏ bớt 1 nhóm font

Nhóm font hiện hành

1.Chọn nhóm font có font cần bỏ

1.Chọn font cần thêm

2.Chọn font cần bỏ

2.Thêm font vào nhóm font hiện hành

3.Click nút >> để bỏ

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 211 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 212 8/9/2017 8/9/2017

THIẾT KẾ TRANG WEB

THIẾT KẾ TRANG WEB

3) Định dạng Text trên trang Web: + Size:

3) Định dạng Text trên trang Web: + Color:

Chọn Size trong thanh Chọn Size trong thanh công cụ Properties

Chọn Text Color trong Chọn Text Color trong thanh công cụ Properties

Hộp thoại màu và Hộp thoại màu và thông tin màu được chọn

Các kích thước có thể có của font

Chọn màu mặc định (màu đen)

Các loại đơn vị của kích thước font

Mã của màu được chọn

Chọn nhiều màu

Màu được chọn

Con trỏ chọn màu 216

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 213 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 214 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

36

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 215 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

THIẾT KẾ TRANG WEB

THIẾT KẾ TRANG WEB

4) Paragraph: Phân biệt giữa có Paragraph và không có Paragraph

3) Định dạng Text trên trang Web: + Các định dạng khác:

Canh trái

Canh giữa Canh phải Canh đều

Định dạng in đậm

Định dạng in nghiêng

Đây là 3 paragraph

Outdent

Indent

THIẾT KẾ TRANG WEB

THIẾT KẾ TRANG WEB

5) Danh sách: chọn text cần tạo danh sách + Sử dụng thanh Properties:

5) Danh sách: chọn text cần tạo danh sách + Có thể định nghĩa danh sách riêng theo yêu cầu: Menu Text  List  Properties…

Unordered List (Bullet List)

Ordered List (Numbering List)

+ Sử dụng menu Text: Menu Text  List  Unordered List/Ordered List

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 217 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 218 8/9/2017 8/9/2017

THIẾT KẾ TRANG WEB

THIẾT KẾ TRANG WEB

6) Hình ảnh:  Kết quả:

6) Hình ảnh: đặt con trỏ tại vị trí cần chèn + Thanh công cụ Insert: Chọn tab Common  Image

Hộp thoại Select Image Source: chọn đường dẫn  nơi lưu file hình ảnh  chọn hình cần chèn  click  OK

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 219 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 220 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

37

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 221 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 222 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

THIẾT KẾ TRANG WEB

THIẾT KẾ TRANG WEB

6) Hình ảnh:  Thuộc tính:

7) Liên kết:  Lưu ý: + URL (Uniform Resource Locator): là địa chỉ của một đối tượng thường được gõ vào vùng Address của các Web Browser. của các Web Browser + Địa chỉ tuyệt đối  Địa chỉ tương đối: Địa chỉ tuyệt đối: là địa chỉ đầy đủ.

Canh biên so với IE

Độ dày khung bao quanh hình ảnh

Canh biên so với text

Vd: http://www.hcmuns.edu.vn/forum/index.htm

Baseline (Default)

Chuỗi Tooltip thể hiện trên hình ảnh

Số khoảng trắng dọc hoặc ngang so với text trên trang Web

Top = TextTop Middle = Absolute Middle Bottom = Absolute Bottom

MỘT SỐ KỸ THUẬT

THIẾT KẾ TRANG WEB

1) Phân vùng liên kết trên một ảnh:

+ Chọn hình ảnh cần phân vùng liên kết. + Chọn loại công cụ dùng để phân vùng.

7) Liên kết:  Các hình thức liên kết: + Mở liên kết bằng một cửa sổ mới.

+ Mở liên kết trên cùng một cửa sổ.

+ Mở liên kết là một địa chỉ mail.

Phân vùng hình elip

Phân vùng hình đa giác

Phân vùng hình chữ nhật + Tạo phân vùng trên ảnh.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 223 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 224 8/9/2017 8/9/2017

MỘT SỐ KỸ THUẬT

MỘT SỐ KỸ THUẬT

2) Bảng:

2) Bảng:

Số dòng

Số cột

Tạo bảng:

Thuộc tính:

Chiều cao

Số dòng

Độ dày khung

Chiều rộng

Số cột

Canh biên

Độ rộng cột

Độ dày khung

Màu của khung

Convert Table Heights/Widths to Percents

Màu nền

Ảnh nền

Convert Table Heights/Widths to Pixels

Clear Row Heights/Column Widths

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 225 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 226 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

38

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 227 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 228 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

MỘT SỐ KỸ THUẬT

MỘT SỐ KỸ THUẬT

3) Layout:

3) Layout:

Chế độ Layout View: + Ở chế độ này, bảng giống như bảng ở chế độ

Tạo Layout Table: + Chọn tab Layout trên thanh công cụ Insert. + Click nút Layout, chọn công cụ Layout Table.

Standard.

+ Tạo tùy ý trên cửa sổ thiết kế. + Tạo các ô bên trong Layout Table vừa tạo

+ Cell pading, Cell spacing và Border = 0 + Mỗi ô của bảng sẽ chứa 1 khoảng trắng. + Kích thước các ô/bảng sẽ dễ dàng chỉnh sửa so với bảng ở chế độ Stadard, giúp đáp ứng được yêu cầu của thiết kế.

(sử dụng công cụ Draw Layout Cell)

 Bảng ở chế độ Layout View gọi là: Layout Table

MỘT SỐ KỸ THUẬT

MỘT SỐ KỸ THUẬT

4) Flash:

3) Layer:  Ví dụ:  Tạo hiệu ứng nổi cho hình/text trên trang Web.

Chèn file Flash đã có vào trang Web: + Thanh công cụ Insert: tab Common  Flash

Tạo 1 layer chứa text

Copy thành 1 layer mới

+ Menu Insert: chọn Media  Flash + Ấn tổ hợp phím: Ctrl + Alt + F

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 229 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 230 8/9/2017 8/9/2017

Định dạng màu cho text

Kết quả

MỘT SỐ KỸ THUẬT

MỘT SỐ KỸ THUẬT

5) Rollover Image:

8) CSS (Cascade Style Sheet):

+ Hộp thoại Insert Rollover Image:

 Text:  Thao tác chung: + Chọn text cần định dạng theo mẫu. + Chọn định dạng đã được tạo.

Kết quả

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 231 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 232 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

39

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 233 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 234 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Chương 4. Triển khai Website

4.1.1. Xuất bản website lên mạng  Internet Bước 1: Đăng ký một tên miền cho Web site.

• Thông qua nhà cung cấp dịch vụ ISP (hoặc công ty trung gian có liên kết với ISP), doanh nghiệp hoặc cá nhân sẽ đăng ký một tên miền (Domain name), tên duy nhất xác định một vị trí trên Internet. Internet.

• 4.1. Qui trình chung triển khai website • 4.2. Đưa website lên Internet • 4.3. Quảng bá website • 4.4. Cập nhật và bảo trì website

– tên miền quốc tế www.tencongty.com – tên miền Việt Nam www.tencongty.com.vn

• Nhà cung cấp dịch vụ Internet ISP (hoặc công ty trung  gian) có nhiệm vụ giúp doanh nghiệp hoặc cá nhân  trong việc quản lý tên miền đó

4.1.1. Xuất bản website lên mạng  Internet

4.1.1. Xuất bản website lên mạng  Internet Bước 2: Thuê một không gian lưu trữ Website  trên một máy chủ Web

Bước 3: Thiết kế nội dung và upload Website

• Nhà cung cấp dịch vụ cho thuê không gian trên máy  chủ cung cấp cho doanh nghiệp hoặc cá nhân địa  chỉ máy chủ để điền vào phần địa chỉ máy chủ trong  mục quản lý tên miền.

ề

ả

• Doanh nghiệp hoặc cá nhân sử dụng các phần mềm FTP  ở máy khách và tài khoản FTP đã có để đưa nội dung  trang Web lên không gian đã được thuê trên máy chủ Web.

• Doanh nghiệp hoặc cá nhân có thể đăng ký cho

• Nhà cung cấp dịch vụ cho thuê không gian trên máy  chủ cung cấp cho doanh nghiệp hoặc cá nhân một  tài khoản FTP (địa chỉ FTP, usename, password) để  doanh nghiệp đưa nội dung (upload) Website của  mình lên máy chủ Web đó

mình rất nhiều tên miền nhưng chỉ cần sử dụng một bản thiết kế nội dung Web site trên một máy chủ Web. Tất cả các tên miền của doanh nghiệp đều dẫn tới nội dung này nhờ dịch vụ URL Forwarding.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 235 8/9/2017 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 236/13

4.1.3. Cập nhật và bảo trì website

8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 237/13 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 238/13

4.1.2. Quảng bá website

• Đăng ký Website với các công cụ tìm kiếm

• Thiết lập các liên kết đến trang web

• Các công việc nâng cấp và bảo trì website – Sao lưu thông tin liên quan đến website

• Chiến lược lan truyền (viral marketing)

• Quan hệ đại chúng (Public Relations – PR) • Quan hệ đại chúng (Public Relations PR)

• Các phương tiện thông tin truyền thống

• Cơ sở dữ liệu • Các mẫu mà người dùng tùy chỉnh Các mẫu mà người dùng tùy chỉnh • IMG/ thư mục • Thư mục Plugin nếu sử dụng plugin

• Email

– Nâng cấp các phiên bản hỗ trợ website của bạn

• Trả tiền cho quảng cáo

• Nâng cấp chức năng • Nâng cấp bảo mật

Bài giảng Thiết kế và triển khai Website

40

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 240 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 239/13 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

4.2. Đưa website lên Internet

4.2.1. Domain ‐ Host

• 4.2.1. Domain ‐ Host • 4.2.2. Upload file và kiểm thử

• Host là nơi chứa trang web, là một vùng trên ổ cứng của một cái máy chủ nào đó. Khi tìm host miễn phí, bạn nên xem host này có dung lượng bao nhiêu, 100M, 200M, ..., băng thông bao nhiêu (lượng truy cập tối đa cho phép), có hỗ trợ PHP và MySQL hay không (nếu bạn muốn làm web và MySQL hay không (nếu bạn muốn làm web động).

• Domain name có thể hiểu là địa chỉ dẫn đến trang

web của bạn, như cái URL ấy. – Ví dụ trang web của mình có domain name là tmu.edu.vn, mình gõ domain name vào thanh address của trình duyệt thì mình sẽ đến trang web đó.

Cài đặt FTP Client

4.2.2. Upload file và kiểm thử

• Để sử dụng dịch vụ FTP bắt buộc phải sử dụng

FTP client có hỗ trợ TLS.

• Sử dụng FileZilla FTP Client. Đây là một FTP client

• Cài đặt FTP Client • Thiết lập kết nối FTP server • Download và Upload tài liệu

miễn phí và dễ sử dụng. – Truy cập vào địa chỉ :  – Truy cập vào địa chỉ :

http://sourceforge.net/projects/filezilla/files/FileZilla_ Client/

– Tìm và download phiên bản FileZilla_X_win32.zip mới

nhất.

– Sau khi giải nén, double click file filezilla.exe để chạy

ứng dụng

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 241 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 242 8/9/2017 8/9/2017

Thiết lập kết nối FTP server

Thiết lập kết nối FTP server

• Thiết lập kết nối đến FTP Server như sau: • Vào Menu File --> Site Manager – 1 - Click New Site (chỉ làm lần đầu) – 2 - Nhập tên site (tùy ý) – 3 - Nhập địa chỉ Host: ftp.agu.edu.vn 3 Nhập địa chỉ Host: ftp agu edu vn – 4 - Chọn chế độ mã hóa là “Require explicit FTP

over TLS”

– 5 - Kiểu login: Normal – 6 - User: nhập tên account (UserId) – 7 - Nhập mật khẩu. – 8 - Click Connect.

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 243 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 244 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

41

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 245 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 246 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

Ví dụ thiết lập kết nối

Download và Upload tài liệu

4.3. Quảng bá website

4.3.1. Quảng bá website cá nhân

Thiết lập các liên kết đến trang web

• 4.3.1. Quảng bá website cá nhân • 4.3.2. Quảng bá website của tổ chức

Chiến lược lan truyền (viral marketing)

) Quan hệ đại chúng (Public Relations – PR)

ệ ạ

g (

Email

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 247 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 248 8/9/2017 8/9/2017

4.3.2. Quảng bá website của tổ chức

4.4. Cập nhật và bảo trì website

Đăng ký Website với các công cụ tìm kiếm

• 4.4.1. Cập nhật thông tin và lưu trữ dữ liệu • 4.4.2. Bảo trì website

Thiết lập các liên kết đến trang web

g) Chiến lược lan truyền (viral marketing) y

ợ

(

Quan hệ đại chúng (Public Relations – PR)

Các phương tiện thông tin truyền thống

Email

Trả tiền cho quảng cáo

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 249 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 250 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

42

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 251 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 252 8/9/2017 8/9/2017

8/9/2017

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

4.4.2. Bảo trì website

4.4.1. Cập nhật thông tin và lưu trữ dữ  liệu

• Sao lưu thông tin liên quan đến website

• Nâng cấp các phiên bản hỗ trợ website của bạn

– Cơ sở dữ liệu – Các mẫu mà người dùng tùy chỉnh – IMG/ thư mục IMG/ thư mục – Thư mục Plugin nếu sử dụng plugin

– Nâng cấp chức năng – Nâng cấp bảo mật • Lưu ý: Lư ý – Nên có kế hoạch bảo trì

• Lưu ý:

– Thực hiện việc sao lưu dữ liệu trước khi thực hiện

bất cứ một hành động nào

• Hàng năm • Mỗi ba tháng • Hàng tháng • Hàng tuần

Câu hỏi và bài tập

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 253 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 254 8/9/2017 8/9/2017

Bài giảng Thiết kế và triển khai Website

43

Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 255 8/9/2017