Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
Bài giảng Thiết kế và triển khai Website 1
Trường ĐạihọcThương mại
Khoa HTTTKinh tếvà THMĐT
Bộmôn Công nghệthông tin
Bài giảng họcphần:
Thiếtkếvà triểnkhaiWebsite
1BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT8/9/2017
THIẾTKẾVÀTRIỂNKHAIWEBSITE
•Phânphốitiếthọc
−Lýthuyết:27tiết
−Thảoluận:6tiết
−
Thựchành:
12
tiết
Thực
hành:
12
tiết
•Đánhgiákếtquả
•‐Điểmchuyêncần:10%
•‐K/Tra+T/Hành+T/luận:30%
•‐Thicuốikỳ:60%
8/9/2017 2Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
MỤCTIÊUCỦAMÔNHỌC
•Môn học cung cấpnhững kiếnthứccơbảnvề
worldwideweb,cácgiaothức, ngôn ngữ
đánh dấuvàmộtsốngôn ngữkhác dùng để
tạo
web
Thông
qua
việc
thiệu
một
số
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT3
tạo
web
.
Thông
qua
việc
thiệu
một
số
công cụthiếtkếvà trợgiúp việcxâydựng
website, giúp họcviênnắmđượcnhững yêu
cầu, qui trình thiếtkếvà triểnkhaimột
website thựctế.
MỤCTIÊUCỤTHỂ
•Cung cấpnhững kiếnthứccơbảnvềInternet, World
wide web, giao thứcHTTP,giaothứcFTP,ngônngữ
đánh dấu HTML,...
•Mộtsốngôn ngữvà công cụtrợgiúp thiếtk
ế
và xây
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT4
dựng website.
•Qui trình triển khai, nâng cấp, bảotrì,Phương thức
quảng bá trang web trên mạng.
•Quy trình thiếtkếvà triểnkhaimộtwebsiteTMĐT
TÀILIỆUTHAMKHẢO
•TLTKbắtbuộc:
•[1]Harvey&Paul,Internet&WorldWideWeb:HowtoProgram
(4thEdition),Deitel &Associates(Paperback),2010
•[2]GerryMcGovern,TheWebsiteManager’sHandbook,ISBN:
978‐1‐4116‐8529‐1,
•ShaneDiffily,2014
[
3
]
Nễ
Tờ
Si h
Thiết
kế
Wb
bằ
hì h
ih
h
NXB
•
[
3
]
N
guy
ễ
n
T
rư
ờ
ng
Si
n
h
,
Thiết
kế
W
e
b
bằ
ng
hì
n
h
m
i
n
h
h
oạ,
NXB
MinhKhai,2007
•[4]PhạmHữu Khang,Xây dựng và triển khai ứng dụng TMĐT,
NXBThống kê,2006
•[5]Lê Tuấn Hùng,Huỳnh QuyếtThắng,Kỹthuậtđồ họa,NXB
KH&KT,2005
•[6]Giáo trình tựhọcPhotoshopCS6,Internet
8/9/2017 5Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
NỘIDUNGCHƯƠNGTRÌNH
Chương 1.Tổng quan vềthiếtkếvà triển khai
website
Chương 2.Thiếtkếvà xửlý đồ họatrênwebsite
Chương 3.Mộtsốngôn ngữxây dưng Website
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT6
Chương 4.TriểnkhaiWebsite
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
Bài giảng Thiết kế và triển khai Website 2
Tổng quan vềthiếtk
ế
vàTổng quan vềthiếtk
ế
và
Chương1
triểnkhaiwebsitetriểnkhaiwebsite
8/9/2017 7
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
Nội dung
1.1.Mộtsốkhái niệmcơbản
1.2.Nguyên tắc và quy trình thiếtkếWebsite
1.3Nguyên tắc và quy trình triểnkhaiWebsite
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT8
1.1.Mộtsốkhái niệmcơbản
1.1.1.CơbảnvềInternet
1.1.2.Worldwideweb‐ Website
1.1.3.Giao thứctruyềnnhận Client/Server
8/9/2017 9Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
1.1.1.CơbảnvềInternet
•Mạng máy tính – phân loạitheo
phạmviđịalý
•Hệđiềuhànhmạng
hì h
/
•M
hì
n
h
TCP
/
IP
•Dịch vụtên miền
8/9/2017 10Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
4lớpcủamôhìnhTCP/IP
•Layer4: Application(ứngdụng)
•Layer3: Transport(vậnchuyển)
•Layer2: Internet
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT11
•Layer1: Networkaccess(truy
cậpmạng)
ChồnggiaothứcTCP/IP
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT12
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
Bài giảng Thiết kế và triển khai Website 3
DNS:nhớtênthayvìđịachỉIP
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT13
Hệthốngquảnlýtênmiền
•DNSserverlà mộtmáytrênmạng có nhiệmvụ
quảnlýtênmiềnvàđáp ứng các yêu cầucủa
client
•Có nhiềuDNSserverliên kếtvới nhau,chia sẻ
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT14
và quảnlýtruyvấnđếnCSDLtên miền
•CSDLtên miềncócấu trúc phân cấp
CấutrúcCSDLtênmiền
•Kiếntrúctênmiền không bắtbuộccáctênmiềnphải
tuân theo quy cách đặt tên,tuy nhiên,chúng được
quảnlýmộtcáchtập trung
•Cú pháp của tên không cho biếtđốitượng đượcđặt
tên
là
gì
:
ví
dụ
www ptithcm edu vn
là
một
máy
tính
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT15
tên
là
gì
:
ví
dụ
www
.
ptithcm
.
edu
.
vn
là
một
máy
tính
,
trong khi ptithcm.edu.vn lạilàtênmiền
DNS: khônggiantênmiền
..
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT16
vnnvnn comcom eduedu govgov
comcom eduedu govgov ukukfrfrvnvn
DSN
•vídụ:
yêucầutruycậpđếnwww.cs.purdue.edu.vntừit‐
lab.ptithcm.edu.vnsẽtheotiếntrìnhnhưsau:
vnedupurduecs
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT17
1.1.2. World wide web -
Website
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT18
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
Bài giảng Thiết kế và triển khai Website 4
WWW
• World Wide Web là mộtbướctiếnlớn trong quá trình tìm
kiếm thông tin nhanh, đadạng và mạnh mẽ. Các server
WWW khác nhau sẽthựchiện các trình duyệt (browser)
khác nhau.
• Các trình du
yệ
t khác nhau sẽcó nhữn
g
g
iảđ
ị
nh khác
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT19
yệ
g
g
ị
nhau vềkếtxuất và máy tính củabạn, tuy nhiên tùy
thuộc vào thói quen và sởthích bạncó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ềuvàđadạng chẳng hạnnhư:
• Internet Explorer, Fire Fox, …
1.1.3. Giao thứctruyềnnhận
trong Client/Server
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT20
MôhìnhClient/Server
• 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ụcvụthư điệntử,phụcvụ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.
–Một số quá trình khác có yêu cầu sử 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 21Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
MôhìnhClient/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ệccầnphảithựcthi
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ả
về, server sẽ gởi nó cho client trong một thông điệp trả
lời (Reply Message).
•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.
8/9/2017 22Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT23
Chếđộnghẽn
• Trong chế độ này, khi
quá trình client hay
server phát ra lệnh
gởi dữ liệu, (thông
thườn
g
bằn
g
l
ệ
nh
g g ệ
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).
8/9/2017 24Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
Bài giảng Thiết kế và triển khai Website 5
Chế độ không nghẽn
• 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.
8/9/2017 25Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
1.2. Nguyên tắc và quy trình thiếtkếWebsite
1.2.1. Các nguyên tắctrongthiếtkếwebsite
1.2.2. Quy trình chung thiếtkếWebsite
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT26
1.2.1. Các nguyên tắctrongthiếtkếwebsite
•Tổchứcwebsitechặtchẽvà dễsửdụng
•Sửdụng từngữdễhiểu.
•Dễdàng khám phá các đường link.
•Thờigiantảivềnhanh.
•Tương thích vớiđasốtrình duyệtweb.
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT27
1. Khái quát
2. Các bướctổchức thông tin
3. Các kiểucấutrúcthiếtkế
1.2.1. Các nguyên tắctrongthiếtkếwebsite
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT28
1.Khái quát
•Cầnphảichianhỏcác khối thông tinlớn.
•Các nhà tâm lý họcnhậnthức
•Giúp ghi nhớdễhơnbằng việcsửdụng kếthợpgiữathiếtkế
đồ hoạ, qui ướclớpvàbiêntập thông tin thành các đơnvị
riêng rẽ
•Thựctếvớiđộcgiảcác tin ngắngọn, riêng biệtsẽchứcnăng
hoá hơnvàdễđịnh vịhơnkhối thông tin dài
•Tổchứccácđoạntinnhỏ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.
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT29
2.Cácbướctổchứcthôngtin
•Phân chia thông tinthành các đơnvịlogic
•Thiếtlậphệthống phân cấp thông tin
•Tạomối quan hệgiữacáchệthống phân cấp
thôn
g
tin
8/9/2017 BộmônCNTT‐ KhoaHTTTKinhtếvàTMĐT
g
•Phân tích sựthành công vềchứcnăng và thẩm
mỹcủacáchệthống thông tin
30