1 TRƯỜNG ĐẠI HỌC KINH TẾ - LUẬT
KHOA TIN HỌC QUẢN LÝ
 ĐỒ ÁN MÔN HỌC THIẾT KẾ & LẬP TRÌNH WEB
KINH DOANH 1
XÂY DỰNG TRANG WEB GIẢI TRÍ

Giảng viên hướng dẫn:
ThS Hồ Trung Thành
CH Trần Thị Ánh

Sinh viên thực hiện:
Vạn Thị Kim Chi (K084061039)
Trần Dương Minh Chuyên (K084061040)
Lê Thị Kim Hiền (K084061055)
Châu Thanh Tùng (K084061134)
Thành phố Hồ Chí Minh, năm 2010
2

MỤC LỤC
trang
Chương 1: QUÁ TRÌNH XÂY DỰNG TRANG WEB
I. Lựa chọn đề tài 3

hiện nay như : kenh14.vn, mp3.zing.vn,…. Nhận thấy tầm quan trọng trong việc cung
cấp thông tin đáp ứng nhu cầu giải trí của người dùng, nhóm đã chọn đề tài :Thiết kế
một website cung cấp thông tin giải trí bao gồm các chuyên mục: du lịch, đọc truyện,
xem phim, ẩm thực, nghe nhạc….
II. KHẢO SÁT VÀ ĐÁNH GIÁ WEBSITE:
1. Khảo sát hiện trạng:
Hiện nay, các website giải trí tồn tại khá nhiều nhưng hầu hết chưa cung cấp đủ
các loại hình giải trí cho giới trẻ mà thường là thiên về một mặt nào đó. VD: trang web
chuyên về nghe nhạc, trang web chuyên về xem phim….Điều này gây không ít khó
khăn cho người sử dụng khi muốn xem phim thì phải nhớ địa chỉ trang web này, muốn
nghe nhạc thì phải tìm đến trang web kia. Vì vậy, việc đưa ra một trang web cung cấp
nhiều chuyên mục thông tin thiên về giải trí là vô cùng cần thiết.
Trong quá trình khảo sát các trang web được nhiều bạn trẻ ưa chuộng hiện nay,
nhóm đã quyết định chọn website http://kenh14.vn để tham khảo về mặt thiết kế giao
diện và các chuyên mục nội dung.
2. Đánh giá website:
Trang web http://kenh14.vn được thiết kế với giao diện trực quan, dễ sử dụng,
hỗ trợ đầy đủ chức năng cho một người sử dụng bình thường. Với giao diện bắt mắt,
sinh động, thông tin cung cấp kịp thời là những điều mà các trang web trên đã làm
được để thu hút rất đông đảo người dùng. Chúng ta có thể xem qua một phần giao diện
trang chủ của website này (Hình 1):
4 Hình 1
Menu chính của website được đặt nằm ngang ở phía trên, sử dụng hiệu màu sắc
rất đẹp nổi bật, thuận tiện cho ngưới sử dụng. Ở bất kì vị trí nào trong trang web người
sử dụng cũng có thể quay lại trang chủ hay bất cứ vị trí nào mà họ muốn.
Nội dung từng chuyên mục được bố trí logic rõ ràng,người dùng có thể nhìn bao
quát được những nội dung mà trang web muốn truyền đạt. (Hình 2)

tiếp, khác hẳn với kenh14.vn chỉ dừng ở việc cung cấp thông tin.
+Chuyên mục sức khỏe không chỉ giới hạn cho tuôi học đường mà bao quát tất
cả: sức khỏe sơ sinh, sức khỏe sinh sản,….
7

-Đối tượng : nếu như đối tượng sử dụng của kenh14.vn là hướng đến giơi trẻ thì trang
web giải trí của nhóm muốn hướng đến nhiều nhóm đối tượng khác nhau: giới trẻ,
trung niên,….vì vây các chuyên mục được thiết kế phù hợp để tất cả các đối tượng trên
đều hài lòng.
III. CÁC GIAI ĐOẠN XÂY DỰNG WEBSITE:
1. Thiết kế bằng HTML:
- Trang chủ: Logo của nhóm, tên nhóm, tên trang web và background được thiết kế
bằng công cụ Photoshop. Thanh menu ngang phía trên được viết bằng CSS (code chi
tiết xem trong file trangchu.css). Công cụ tìm kiếm sẽ giúp người dùng tìm thấy những
thông tin hữu ích từ người “khổng lồ” Google, tạo sự thuận tiện cho người sử dụng.
Khung hình của nhóm ở giữa được xây dựng bằng flash, do nhóm tự thiết kế. Tất cả
các khung nội dung và tin tức khác được canh chỉnh bằng CSS và thiết kế tĩnh bằng
HTML vì trang chủ được xây dựng từ giai đoạn đầu tiên, những trang khác được nâng
lên thành trang .asp để tải được những nguồn thông tin phong phú khác nhau (sẽ được
nêu chi tiết ở phần Thiết kế bằng ASP)
- Trang đăng ký, đăng nhập và liên hệ: cũng được thiết kế thông qua ngôn ngữ chính là
HTML. Trang đăng ký và đăng nhập chủ yếu lầy thông tin truyền vào từ phía người
dùng nên cần có giao diện đơngiản, dễ sử dụng, không gây nhầm lẫn giữa các yêu cầu
nhập liệu khác nhau. Trang liên hệ hiển thị thông tin cá nhân của nhóm và các thành
viên trong nhóm, giao diện cần sinh động, đẹp mắt và phù hợp với toàn trang web.
- HTML là một ngôn ngữ cơ bản hình thành nên trang web do đó nó không chỉ được sử
dụng để thiết kế một vài trang đã nêu trên, mà nó được sử dụng xuyên suốt trong toàn
bộ quá trình xây dựng trang web. Vì thế, trong những giai đoạn tiếp theo đây của quá
trình thiết kế, ngôn ngữ HTML vẫn được sử dụng và đóng một vai trò quan trọng
nhưng sẽ ít được đề cập đến.

onLoadTime();
9

- Trang đăng ký: viết hàm javascript kiểm tra việc nhập thông tin đăng ký của người
dùng, nếu người dùng không nhập đầy đủ thông tin sẽ hiển thị thông báo lỗi và phải
nhập lại:
function kiemtra()
{
var un = document.getElementById('username').value
var pw = document.getElementById('password').value
var ht = document.getElementById('ten').value
var mail = document.getElementById('email').value
if(un == "" || pw == "" || ht == "" || mail == "")
{
alert("Bạn phải nhập đầy đủ thông tin")
return false
}
return CheckMail(mail)
}
Sau khi đã nhập đầy đủ vào tất cả các textbox của trang đăng ký, hệ thống sẽ
tiến hành kiểm tra email mà người dùng nhập vào đã hợp lệ hay chưa bằng cách sử
dụng hàm RegExp():
function CheckMail(email)
{
var rs = new RegExp("([A-Za-z0-9_ ]){2,}@([A-Za-z0-9_
]){2,}.([A-Za-z0-9_ ]){2,}");
if(email.match(rs) == null)
{
alert("Địa chỉ mail không hợp lệ")
document.getElementById('email').select()

- Trang đăng nhập: Sau khi bạn đã nhập username và password vào các textbox tương
ứng, trình duyệt sẽ gửi thông tin của bạn đến server và tiến hành kiểm tra với dữ liệu
có trong access, nếu tìm thầy username và password của bạn sẽ báo thành công và
chuyển hướng đến trang chủ, nếu không thành công sẽ báo lỗi và yêu cầu bạn đăng
nhập lại. (Code cụ thể xem trong trang thanhcong.asp)
- Trang chủ: nhận giá trị trả về của biến Application lưu trữ số lượt truy cập (đã khởi
tạo trong trang global.asa) và hiển thị kết quả ở vùng Lượt truy cập phía cuối thanh bên
11

phải. Đoạn code sau được đặt trong vùng Lượt truy cập để hiển thị kết quả nhận được
từ biến Application: <%=Application("truycap")%>
- Các trang thành viên: Có tất cả là 5 trang thành viên, các trang chủ của từng trang
thành viên bao gồm: nhac.asp, phim.asp, dulich.asp, doctruyen.asp, suckhoe.asp.
Trong giai đoạn đầu khi thiết kế trang web, 5 trang trên được xây dựng bằng
ngôn ngữ HTML, là trang hoàn toàn tĩnh, có giao diện tương đồng nhau ở phần trên,
bên phải và phần dưới. Nội dung của từng trang được thiết kế phù hợp với chủ đề của
trang đó. Sau khi được học về ASP, cả 5 trang trên được nâng lên thành trang ASP và
có một số bổ sung để tương tác với cơ sở dữ liệu Access. Cụ thể là mục “Các tin khác”
ở cuối mỗi trang được lấy từ cơ sở dữ liệu và được sắp xếp theo thứ tự thời gian
(những tin mới cập nhật sẽ được hiển thị trước) để người sử dụng dễ theo dõi những tin
mới ở từng chuyên mục. Đồng thời, vì dữ liệu khá nhiều cho nên ở khung “Các tin
khác” được xử lý phân trang bằng ASP để mỗi trang chỉ hiển thị 10 mục, khi muốn
xem tiếp thì click vào các trang tiếp theo (Hình 6 – minh họa mục “Các tin khác” trong
trang dulich.asp). (Code tải dữ liệu và xử lý phân trang xem chi tiết trong trang chủ của
từng trang thành viên)

Hình 6
Đó là các trang chủ của từng trang thành viên, còn đối với nội dung từng trang
con của các trang thành viên được thiết kế theo một cơ chế khác, hoàn toàn bằng ASP.
Sau đây xin lấy đại diện là trang du lịch để trình bày cơ chế thành lập của từng trang

thanh menu ngang chúng ta chỉ thấy hiển thị 4 tiểu mục của trang du lịch (Hình 7).

Hình 7
Vì vậy khi người dùng clich vào thanh menu ngang thì nội dung hiển thị trong
trang dulich_chuyenmuc.asp phải bao gồm thông tin của tất cả các tiểu tiểu mục của
13

phần đó. Do đó, giá trị của biến cm và ct lúc này phải là mã chuyên mục và chuyên
trang tương ứng trong cơ sở dữ liệu.
Còn đồi với thanh menu dọc (Hình 8)

Hình 8
Do là thanh menu dọc chứa đường link liên kết đến các tiểu tiểu mục nên khi
người dùng click vào sẽ không cần truyền mả cm, khi đó biến này sẽ chưa giá trị rỗng
(trong đoạn code xử lý đẽ nêu phía trên cũng có kiểm tra điều này), giá trị của biến ct
phải tương ứng với mã chuyên trang trong cơ sở dữ liệu.
Nội dung hiển thị ở giữa được gọi từ cơ sở dữ liệu đúng với tiểu mục và tiểu
tiểu mục mà người dùng đã click vào, kết quả hiển thị và định dạng được nêu chi tiết
trong trang dulich_chuyenmuc.asp (bắt đầu từ dòng 161 đến hết dòng 247). Do nội
dung phong phú nên trang dulich_chuyenmuc.asp cũng được phân thành nhiều trang
bằng ngôn ngữ ASP.
Tiếp theo là việc xây dựng trang dulichchitiet.asp, trang này sẽ hiển thị đầy đủ
và chi tiết một thông tin mà người dùng muốn tìm hiểu kỹ bằng cách click v ào đường
link của thông tin đó. Giá trị nhận vào của trang dulichchitiet.asp là chỉ số id tương ứng
với mã du lịch trong cơ sở dữ liệu, code cụ thể như sau: dim madl
madl = request.QueryString("id")
14

Do nội dung gửi đến người dùng hoàn toàn bằng tiếng Việt nên để hiển thị được đúng
kiểu chữ thì cần phải có đoạn code sau để chữ không bị bể:
<%Session.CodePage=65001%>
Trên đây là toàn bộ quá trình xây dựng nên trang web của cả nhóm, trong khi
thực hiện đồ án, nhóm nhận được sự hỗ trợ, giúp đỡ từ phía giảng viên và sự phấn đấu
hết mình, không ngừng học hỏi của mỗi cá nhân, tuy nhiên vẫn không tránh khỏi một
số hạn chế và khó khăn, xin nêu ra sau đây.
15

IV. NHỮNG KHÓ KHĂN VÀ THUẬN LỢI KHI THỰC HIỆN TRANG WEB:
1. Khó khăn:
-Tìm kiếm đề tài, mục tiêu mà đồ án muốn hướng đến Phải xem xét xem có thể đạt
được tất cả các mục tiêu đó hay không. Mục tiêu nào cần được ưu tiên hơn.
-Sau khi xác định ý tưởng, đến việc triển khai ý tưởng gặp khó khăn do lịch học khá
dày đặc, thời gian lại hạn chế và nơi ở cách xa nhau nên các thành viên thường xuyên
phải họp nhóm online, khiến cho việc đưa ra ý kiến đôi khi không thống nhất.
-Do kiến thức về thiết kế web còn hạn chế, buộc phải tìm kiếm học hỏi nhiều trên
internet nhưng việc cung cấp internet ở nơi trọ còn gặp nhiều thiếu thôn, trở ngại.
-Trang web đưa ra nhiều chuyên mục nhằm thu hút nhiều đối tượng người dùng, vì vậy
việc tìm kiếm được dữ liệu phù hợp cho từng nội dung là một vấn đề vô cùng khó khăn
và tốn thời gian
-Một trang web không phải chỉ thỏa mãn về nội dung mà còn phải lôi cuốn về hình
thức, khó khăn ở đây là không phải tất cả các thành viên đều có năng khiếu về thiết kế
và phối màu., do vậy trang web vẫn chưa thực sự bắt mắt.
- Vấn đề tài chính cũng là một yếu tố gây trở ngại lớn trong quá trình thực hiện trang
web, có rất nhiều chi phí phát sinh như: chi phí hội họp, đi lại, liên lạc, văn phòng
phẩm, online tìm kiếm thông tin…
2. Thuận lợi:
-Tinh thần trách nhiệm và tự học hỏi của mỗi cá nhân đều cao nên tuy họp nhóm online
nhưng luôn có một deadline cho từng phần công việc, và các thành viên đều hoàn

10):

Hình 10
19

- Khi bạn muốn xem các tin tức nổi bật nhất ở từng trang, bạn không cần phải tìm
ở đâu xa, trang chủ có link giúp bạn truy cập trực tiếp đến những vùng tin HOT này.
- Khung bên phải của trang chủ, là các tin tức nổi bật của từng trang chủ đề, bạn
có thể nhanh chóng xem những tin Hot trong từng chủ đề riêng như: âm nhạc , ẩm
thực… mà không cần phải tìm đâu xa. (Hình 11)

Hình 11
- Bên dưới khung Top Tin là khung tin tức giải trí, cung cấp cho bạn các tin tức
giải trí nóng bỏng đang diễn ra trong nước và quốc tế. (Hình 12)

Hình 12
- Khung bên phải cũng chứa các đường link liên kết đến các trang web khác ứng
với nhiều chủ đề nằm trong tổng thể trang web. (Hình 13)
20 Hình 13
- Trang chủ cũng là nơi cung cấp cho bạn biết số lượt truy cập của trang, bằng
một thống kê nằm ở cuối khung bên phải của trang web. (Hình 14)

Hình 14
- Phần menu cuối trang (giống nhau ở tất cả các trang): có các link liên kết đến
từng trang chủ đề: trang chủ, âm nhạc, sức khỏe, phim truyện, du lịch, ẩm thực. Đồng
thời có hiển thị ngày giờ hiện tại và địa chỉ liên lạc của nhóm.


phim hành động, phim kinh dị, phim hoạt hình
 Phần trung tâm của trang giới thiệu các bộ phim nổi bật, bao gồm: Phim
hot trong tuần, Phim bộ mới cập nhật, Phim lẻ mới cập nhật. Phía dưới là
mục các phim khác, giới thiệu các bộ phim có trong trang web (Hình
17).

Hình 17
 Bên phải là mục Toptin chứa các liên kết đến các phim hot như: đẹp từng
centimet, cảnh sát tương lai… và các liên kết đến các trang khác nổi tiếng
cùng chủ đề.
- Trang du lịch: (Hình 18)
23 Hình 18
 Bên trái là menu chứa các mục chính của trang gồm: Danh lam thắng
cảnh, văn hóa- lễ hội, tour du lịch, cẩm nang du lịch.
 Phần trung tâm của trang giới thiệu các tin tức nổi bật, bao gồm: Danh
lam thắng cảnh, Văn hóa – lễ hội vùng miền, Cẩm nang du lịch. Phía
dưới là mục các tin khác, giới thiệu các bài viết khác có trong trang web.
 Bên phải là mục Toptin chứa các liên kết đến các tin du lịch hot như:
Những điều cần biết khi đi du lịch Sapa, 5 địa điểm trăng mật lý tưởng…
và các liên kết đến các trang khác nổi tiếng cùng chủ đề như:
dulichphuonghoang.com…
- Trang đọc truyện: (Hình 19)

Hình 19
 Bên trái là menu chứa các mục chính của trang gồm: Tác phẩm văn học,
truyện cổ tích, sống đẹp. Bên dưới là mục “Sách trong tuần”: giới thiệu
24

Lẫu lá rừng, món ốc bươu của người Pháp… và các liên kết đến các trang
khác nổi tiếng cùng chủ đề như: amthhuc.com.vn…
- Trang liên hệ: (Hình 22)

Hình 22