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 AdjustmentsCurves – Di chuyển đường thẳng để xem sự thay đổi Th – Image AdjustmentsReplace 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 FilterPixelate: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à
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
- ...
- ...
- ...
• 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
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 websiteNext chấp
website
nhận các option mặc địnhnextfinish
‐ 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
Tài liệu liên quan
Tài liêu mới
Chịu trách nhiệm nội dung: Nguyễn Công Hà. ©2025 Công ty TNHH Tài Liệu trực tuyến Vi Na. Địa chỉ: 54A Nơ Trang Long, P. Bình Thạnh, TP.HCM - Điện thoại: 0283 5102 888 - Email: info@tailieu.vn Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015
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 nh-nh-
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 websiteNext chấp
website
nhận các option mặc địnhnextfinish
‐ 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
Tài liệu liên quan
Tài liêu mới
Chịu trách nhiệm nội dung: Nguyễn Công Hà. ©2025 Công ty TNHH Tài Liệu trực tuyến Vi Na. Địa chỉ: 54A Nơ Trang Long, P. Bình Thạnh, TP.HCM - Điện thoại: 0283 5102 888 - Email: info@tailieu.vn Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015
nh-ng chocho chÝnh gigi÷÷aa --
ThÎThÎ
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
}
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:
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" %>
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 websiteNext chấp
website
nhận các option mặc địnhnextfinish
‐ 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
– 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 (
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
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
Tài liệu liên quan
Tài liêu mới
Chịu trách nhiệm nội dung: Nguyễn Công Hà. ©2025 Công ty TNHH Tài Liệu trực tuyến Vi Na.
Địa chỉ: 54A Nơ Trang Long, P. Bình Thạnh, TP.HCM - Điện thoại: 0283 5102 888 - Email: info@tailieu.vn
Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015