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

II. Khảo sát và đánh giá Website 3

1. Khảo sát hiện trạng

2. Đánh giá Website

3. Điểm tương đồng và điểm nổi bật của trang web nhóm

III. Các giai đoạn xây dựng Website 7

1. Thiết kế bằng HTML

2. Thiết kế bằng JAVASCRIPT

3. Thiết kế bằng ASP, JAVASCRIPT kết nối với cơ sở dữ liệu

IV. Những khó khăn và thuận lợi khi thực hiện trang Web 14

1. Khó khăn

2. Thuận lợi

Chương 2: GIỚI THIỆU TỔNG QUAN VÀ HƯỚNG DẪN SỬ DỤNG WEBSITE

I. Giới thiệu trang Web 16

1. Cấu trúc tổng quan của Website

2. Giới thiệu chi tiết từng trang Web

II. Hướng dẫn sử dụng Website 25

3

Chương 1:

QUÁ TRÌNH XÂY DỰNG TRANG WEB

I. LỰA CHỌN ĐỀ TÀI:

Việt Nam là 1 nước có 60% dân số là người trẻ ở độ tuổi dưới 30. Xu hướng

thói quen xem tivi, đọc sách trong thanh niên trước kia giờ đã giảm, mà thay vào đó là

sự gia tăng của việc thích chơi game và lướt net. Không giống như trước đây khi muốn

nghe nhạc,xem phim hay tìm kiếm thông tin… người ta phải nghe qua radio, truyền

hình hoặc cần thông tin trên sách báo. Ngày nay, công nghệ thông tin phát triển, một

người tiêu dùng biết sử dụng internet có thể truy cập vào các website để thư giãn, giải

trí.. Chúng ta có thể kể đến các trang web giải trí đang được nhiều bạn trẻ yêu thích

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)

Hình 2

5

3. Điểm tương đồng và những ưu điểm nổi bật của trang web nhóm so với

kenh14.vn:

a. Tương đồng:

-Mục tiêu: thiết kế một website phục vụ nhu cầu giải trí cho người dùng.

-Giao diện:

+ Thanh menu ngang nằm cố định ở trên (Hình 3)

Hình 3

+ Các chuyên mục nằm phân bố rõ ràng ở trang chủ để người dùng có thể bao

quát toàn bộ nội dung website (Hình 4)

6

Hình 4

b. Điểm nổi bật khác:

-Giao diện:

+Thanh menu ngang phía trên khi trỏ tới sẽ hiển thị đầy đủ tất cả các danh mục

của chuyên mục đó, tạo sư thuận tiện cho người dùng. (Hình 5)

Hình 5

+Luôn hiển thị những nội dung mới nhất được cập nhật và những nội dung được

xem nhiều nhất.

+Không đưa vào quá nhiều hình quảng cáo như kenh14.vn để tránh làm rối mắt

người sử dụng.

-Nội dung:

+Chuyên mục nghe nhạc, xem phim cho phép người dùng có thể nghe xem trực

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.

2. Thiết kế bằng JAVASCRIPT:

- Dùng Javascript để hiển thị thứ, ngày, tháng và giờ hiện tại (bằng tiếng Việt), đặt phía

cuối ở tất cả các trang web.

function start()

{

var time = new Date()

8

var arrday = new Array("Chủ Nhật", "Thứ Hai", "Thứ Ba",

"Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy");

var ngay = time.getDate();

var thang = time.getMonth() + 1;

var nam = time.getFullYear();

var date = time.getDay();

var thu = arrday[date];

var hours = time.getHours()

var minutes = time.getMinutes()

minutes = ((minutes < 10) ? "0" : "") + minutes

var seconds = time.getSeconds()

seconds = ((seconds < 10) ? "0" : "") + seconds

var clock = hours + ":" + minutes + " GMT+7"

var chuoi = "" + thu + ", " + ngay + "/" + thang + "/" + nam

+ ", " + clock;

document.getElementById("time").innerHTML = chuoi

timer = setTimeout("start()", 1000)

}

function onLoadTime()

{

start();

}

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()

return false

10

}

else

{

return true

}

}

Nếu tất cả đều hợp lệ hệ thống sẽ tiếp tục xử lý bằng ngôn ngữ asp để lưu trữ dữ

liệu (sẽ đề cập ở phần tiếp theo)

- Trang gửi mail liên hệ với các thành viên của nhóm: xử lý chủ yếu bằng asp, có một

số xử lý nhỏ bằng javascript cũng tương tự như ở trang đăng ký: cũng có phần kiểm tra

nhập đầy đủ thông tin và kiểm tra email người dùng đã hợp lệ hay chưa.

3. Thiết kế bằng ASP và JAVASCRIPT kết nối với cơ sở dữ liệu Access:

- Trang global.asa:

+ Chứa biến Application lưu trữ số lượt truy cập vào trang web, khởi tạo bằng 0

và tăng lên 1 mỗi khi có 1 yêu cầu gọi trang web.

+Chứa biến Session user mang giá trị true hoặc false đẻ kiểm tra việc đăng nhập

của người dùng, giá trị khởi tạo là false, tức là khi người dùng chưa đăng nhập thì chưa

có quyền user, khi đăng nhập thành công giá trị sẽ được gán bằng true, khi đó người

dùng có thể tự do thao tác trên tất cả các trang thành viên. (Code cụ thể xem trong

trang global.asa)

- Trang đăng ký: sau khi đã kiểm tra thông tin đăng ký của người dùng hợp lệ bằng

Javascript thì hệ thống tiền hành thao tác bằng ngôn ngữ ASP, kiểm tra tên người dùng

đã có trong cơ sở dữ liệu hay chưa, nếu đã có sẽ yêu cầu người dùng chọn tên khác,

nếu chưa có sẽ tiến hành lưu trữ tất cả thông tin vào cơ sở dữ liệu, thông báo cho người

dùng biết đã đăng ký thành công. Sau đó kết hợp với Javascript sử dụng hàm

setTimeout để chuyển qua trang đăng nhập sau 3 giây. (Code cụ thể xem trong trang

regist.asp)

- 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

con (các trang còn lại tương tự).

Trang du lịch có thêm 2 trang con đó là: dulich_chuyenmuc.asp và

dulichchitiet.asp. Ở trang dulich_chuyenmuc.asp nhận vào 2 biến được truyền thông

qua URL là biến ct và cm:

12

+ Biến ct: tức là mã chuyên trang (tương ứng với mã chuyên trang lưu

trong cơ sở dữ liệu, để cho server biết người dùng đang yêu cầu gọi đến trang nào)

+ Biến cm: tức là mã chuyên mục (cũng tương ứng với mã chuyên mục

trong cơ sở dữ liệu)

Code nhận giá trị của 2 biến trên và truyền vào trang dulich_chuyenmuc.asp cụ

thể như sau:

dim mact, macm

mact = request.QueryString("ct")

macm = request.QueryString("cm")

set conn = Server.CreateObject("ADODB.Connection")

conn.Provider = "Microsoft.Jet.OLEDB.4.0"

conn.Open Server.MapPath("csdl/data.mdb")

set rs = Server.CreateObject("ADODB.recordset")

if macm <> "" then

sql = "SELECT TENCM FROM CHUYENMUC WHERE

MACM='" & macm & "'"

else

sql = "SELECT TENCT FROM CHUYENTRANG WHERE MACT

='" & mact & "'"

end if

Có sự khác biệt về giá trị của 2 biến này khi người dùng click vào thanh menu

ngang phía trên và khi click vào thanh menu dọc bên trái. Vì mục du lịch chia làm 4

tiểu mục là: Danh lam thắng cảnh, Van hóa – Lễ hội, Tour du lịch, Cẩm nang, trong

từng tiểu mục này lại có các tiểu tiểu mục (tức là các mục con nhỏ nữa), mà trong

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

set conn = Server.CreateObject("ADODB.Connection")

conn.Provider = "Microsoft.Jet.OLEDB.4.0"

conn.Open Server.MapPath("csdl/data.mdb")

set rs = Server.CreateObject("ADODB.recordset")

sql = "SELECT * FROM DULICH WHERE MADL = '" & madl & "'"

Ở câu lệnh sql sẽ lấy ra dòng thông tin chứa nội dung có mã trùng với id được

truyền vào để hiển thị thông tin đó ra màn hình cho người sử dụng. Toàn bộ đoạn code

trong trang dulichchitiet.asp để lấy dữ liệu, định dạng và hiển thị kết quả được xử lý và

nêu chi tiết từ dòng 162 đến dòng 193 trong trang dulichchitiet.asp.

Các trang còn lại cũng có cơ chế xử lý và tương tác với người dùng tương tự như trang

du lịch đã nêu trên đây (tham khảo code cụ thể ở từng trang tương ứng). Có một điểm

nhỏ khác biệt ở tiểu tiểu mục Truyện dài của chuyên mục Đọc truyện, khi người dùng

click vào một truyện cụ thể, trình duyệt sẽ gọi đến trang doctruyenchitiet.asp và kết quả

hiển thị sẽ là một file flash chứa nội dung của truyện đó, file flash này được chuyển từ

định dạng .pdf sang định dạng .swf bằng phần mềm “Aiseesoft PDF To SWF

Converter”, mục đích của việc chuyển đổi này vì nội dung của truyện dài thường sẽ

chiếm một không gian rất lớn, việc chuyển tải nội dung lên từ file .pdf làm cho trang

web trở nên phong phú, không gây nhàm chán và tiết kiệm không gian hơn.

- Trang liên hệ và gửi mail cho các thành viên của nhóm: Trong trang liên hệ có mục

gửi mail phản hồi của người dùng đến nhóm hoặc liên hệ với mỗi thành viên trong

nhóm, khi click vào email trong trang liên hệ thì địa chỉ mail tương ứng sẽ được

chuyển đến trang noidung_mail.asp và được nhận bởi một thẻ input có kiểu là hidden

(thẻ này sẽ không được hiển thị trên trang web). Ở trang noidung_mail.asp, người dùng

nhập vào địa chỉ mail của mình, nội dung muốn gửi và bấm nút send để chuyển nội

dung đến người nhận, nếu địa chỉ mail không hợp lệ thì trình duyệt sẽ thông báo và yêu

cầu nhập lại, nếu tất cả đều hợp lệ thì toàn bộ thông tin của trang noidung_mail.aspl sẽ

được chuyển đến trang sned_mail.asp, trang này tiếp nhận thông tin, xử lý và gửi nội

dung đó đến mail của người nhận theo đúng yêu cầu của người dùng.

- Một số lưu ý khác: Các trang ASP được viết hoàn toàn bằng ngôn ngữ VBSCRIPT.

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

thành đúng hạn, giúp tiến độ công việc không bị trì trệ.

-Công việc được phân chia cụ thể cho từng cá nhân, tuy nhiên mỗi thành viên đều nắm

rõ được từng bước và qui trình trong việc thực hiện đồ án của cả nhóm. Các thành viên

có sự hỗ trợ lẫn nhau, cùng giúp nhau giải quyết một vấn đề khó khăn nào đó.

-Nhóm trưởng biết cách phân chia công việc, tổ chức công việc, hướng các thành viên

vào mục tiêu chung của nhóm.

-Được sự hỗ trợ từ giảng viên, sự hỗ trợ giữa các thành viên với nhau nên tiến độ công

việc thực hiện sớm hơn thời hạn qui định. Các thành viên đều cảm thấy hài lòng và tự

16

hào với kết quả mà nhóm đã thực hiện được vì đó là công sức không chỉ của riêng bất

kì một cá nhân nào mà đó là sự nỗ lực không ngừng nghỉ của cả nhóm.

17

Chương 2:

GIỚI THIỆU TỔNG QUAN VỀ TRANG WEB

VÀ HƯỚNG DẪN SỬ DỤNG WEBSITE

I. GIỚI THIỆU TRANG WEB:

1. Cấu trúc tổng quan của website: được mô tả chi tiết theo sơ đồ dưới đây:

2. Giới thiệu chi tiết từng trang web:

a. Trang chủ: (Hình 9)

18

Hình 9

- Đây là trang giới thiệu tổng quan về toàn bộ các trang web con, có phần giới

thiệu những tin tức nổi bật của từng trang thành viên. Minh họa ở hình dưới đây (Hình

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.

b. Các trang thành viên:

Cấu trúc chung của các trang thành viên:

Các trang thành viên có cấu trúc ngang giống như đã giới thiệu ban đầu.

Phần khung nội dung ở tất cả các trang thành viên có cấu trúc chung theo chiều dọc

gồm 3 phần như sau:

Phần khung bên trái: là menu chứa các mục chính của từng trang.

21

Phần trung tâm: giới thiệu những tin tức, sự kiện nổi bật nhất của từng trang,

minh họa bằng hình ảnh và lời giới thiệu khái quát, có đường link ở mỗi mục để

thuận tiện khi bạn muốn xem chi tiết mục đó.

Phần khung bên phải: Đây là mục top tin, là các link liên kết đến từng bài viết

chi tiết có trong từng trang thành viên. Phía bên dưới của khung này có các liên

kết đến các trang bên ngoài, nổi tiếng, thuộc cùng thể loại.

Cụ thể ở từng trang như sau:

- Trang âm nhạc: (Hình 15)

Hình 15

Bên trái là menu chứa các mục chính của trang gồm: Nhạc trẻ, nhạc

phim,nhạc trữ tình, nhạc không lời, nhạc dân tộc.

Phần trung tâm của trang giới thiệu các ca khúc nổi bật, bao gồm: Ca khúc

Hot trong tuần, ca khúc mới, và ca khúc do các ca sĩ Hot thể hiện.

Bên phải là mục Toptin chứa các liên kết đến các bài hát hot như: yêu lại

từ đầu, Hoa anh đào trong gió…

- Trang phim truyện: (Hình 16)

22

Hình 16

Bên trái là menu chứa các mục chính của trang gồm: Phim bộ, Phim hài,

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

đến bạn đọc những cuốn sách hay, chọn lọc trong tuần thuộc nhiều thể

loại khác nhau như: Tình yêu, tình cảm gia đình, truyện thiếu nhi…

Phần trung tâm của trang giới thiệu các sách truyện nổi bật, như: Bước

qua hai thế giới, vì sao tớ yêu bố…

Bên phải là mục Toptin chứa các liên kết đến các tập truyện hot như:

Tình muộn, café muối… và các liên kết đến các trang khác nổi tiếng

cùng chủ đề.

- Trang sức khỏe: (Hình 20)

Hình 20

Bên trái là menu chứa các mục chính của trang gồm: Sức khỏe cộng

đồng, Sức khỏe giới tính, Sức khỏe sinh sản.

Phần trung tâm của trang giới thiệu các tin tức nổi bật như: Ăn uống hợp

lý ở người cao tuổi, thực phẩm cho một trái tim khỏe.. 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 sức khỏe hot như:

Hiểu được bệnh cảm cúm, lưu ý khi chăm sóc trẻ ốm… và các liên kết

đến các trang khác nổi tiếng cùng chủ đề.

- Trang ẩm thực: (Hình 21)

25

Hình 21

Bên trái là menu chứa các mục chính của trang gồm: Món ăn Việt, Quán

ngon, Góc khéo tay, Món ăn nước ngoài.

Phần trung tâm của trang giới thiệu các tin tức nổi bật, bao gồm: Cả nhà

vào bếp, Ẩm thực bốn phương. 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 ẩm thực hot như:

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

26

Trang liên hệ chủ yếu có giao diện đẹp, giới thiệu về nhóm và các thành

viên của nhóm: thông tin cá nhân, địa chỉ mail liên lạc…

Nếu bạn muốn liên hệ với bất kì thành viên nào, bạn chỉ việc click vào

mail của người đó, sau đó hệ thống sẽ chuyển trang nội dung mail (Hình

23) đến cho bạn để ghi những lời góp ý bạn muốn gửi gắm đến chúng tôi,

bạn chỉ việc click nút Gửi đi là thư của bạn sẽ tự động được gửi mà

không cần bạn phải tốn công đăng nhập vào yahoo mail.

Hình 23

II. HƯỚNG DẪN SỬ DỤNG WEBSITE:

- Bước 1: truy cập vào địa chỉ trang chủ: www.thugian4c.webng.com

- Bước 2: Khi bạn nhấn vào bất kỳ mục nào của trang chủ (nếu là lần truy cập đầu

tiên), hệ thống website sẽ chuyển trang đăng nhập (Hình 24) đến cho bạn, bạn phải

nhập vào đúng User và pass thì mới login và xem được các tin tức mà bạn muốn xem.

27

Hình 24

Sau khi bạn đăng nhập thành công, hệ thống sẽ chuyển đến trang chủ và bây giờ

bạn có thể tha hồ xem mục yêu thích của mình rồi. ^^

Trong trường hợp bạn chưa có tài khoản ở trang này, thì bạn có thể đăng ký mới

bằng cách “Click vào đây”. Trang đăng ký mới sẽ hiện ra (Hình 25)

Hình 25

Chú ý là bạn phải nhập đúng và đầy đủ thông tin nha, không là sẽ hiện ra báo lỗi

đó. Ví dụ lỗi nè (Hình 26):

Hình 26

+ Nếu đăng ký thành công sẽ hiện ra thông báo thành công (Hình 27):

28

Hình 27

Và hệ thống sẽ chuyền hướng đến trang đăng nhập. Qúa trình đăng nhập diễn ra

như mô tả ở trên.

Bước 3: Hiện giờ bạn đã là thành viên của trang web và bạn có thể tha hồ xem bất

cứ trang nào bạn muốn. Nhiệm vụ của bạn bây giờ là click chuột và tận hưởng giây

phút thư giãn thoải mái với âm nhạc, phim truyện… hoặc những thông tin du lịch

bổ ích mà chúng tôi mang đến cho bạn .

-------------------HẾT------------------