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&aacute;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 [...]... đâ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 ) 19 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... và tự 15 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 16 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) 17 Hình... truy cập để hiển thị kết quả nhận được từ biến Application: - 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... 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: 11 + Biến... 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... 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 ) 22 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... 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 18 - 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. .. 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,... 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... 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 16 1 đế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 . 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. Array("Chủ Nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ S&aacute;u", "Thứ Bảy");