Tài liệu Báo cáo bài tập lớn lập trình web danh bạ website

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC BÁCH KHOA BÁO CÁO BÀI TẬP LỚN LẬP TRÌNH WEB DANH BẠ WEBSITE Sinh viên thực hiện: Giáo viên hướng dẫn: Nguyễn Hữu Hiếu Nguyễn Hoàng Đức 51100867 Trần Nguyễn Thiên Huy 51101388 05/2014 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY MỤC LỤC I. GIỚI THIỆU...............................................................................................................................................................4 II. CẤU TRÚC MÃ NGUỒN:..........................................................................................................................................5 1. Thư mục chính:...............................................................................................................................................5 2. Folder Category:............................................................................................................................................. 5 3. Folder Css:...................................................................................................................................................... 5 4. Folder Function:............................................................................................................................................. 5 5. Folder Images:................................................................................................................................................ 5 6. Folder Js:.........................................................................................................................................................5 III. CẤU TRÚC WEBSITE............................................................................................................................................... 6 1. Header:........................................................................................................................................................... 6 2. Main 1:............................................................................................................................................................6 3. Main 2:............................................................................................................................................................7 4. Main 3:............................................................................................................................................................8 5. Footer:............................................................................................................................................................ 8 IV. CƠ SỞ DỮ LIỆU:.....................................................................................................................................................9 1. Website_info:................................................................................................................................................. 9 2. Tag_mean:...................................................................................................................................................... 9 3. Tag_info:.......................................................................................................................................................10 4. User_db:....................................................................................................................................................... 10 V. CHỨC NĂNG:........................................................................................................................................................ 11 1. Register:........................................................................................................................................................11 2. Login:............................................................................................................................................................ 13 3. Logout:..........................................................................................................................................................13 4. Forgot password:..........................................................................................................................................13 5. View-profile:................................................................................................................................................. 14 6. Admin panel:................................................................................................................................................ 14 7. Popular websites:......................................................................................................................................... 15 8. My favorite websites:...................................................................................................................................15 2 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY 9. Module Thời tiết - Giá vàng - Tỷ giá:............................................................................................................ 15 10. Module Báo mới:........................................................................................................................................15 11. Module Facebook:......................................................................................................................................16 12. Button Top Arrow:......................................................................................................................................16 13. Tìm kiếm:.................................................................................................................................................... 16 14. View all:...................................................................................................................................................... 17 VI. PHÂN CÔNG CÔNG VIỆC:.................................................................................................................................... 18 VII. KẾT QUẢ:............................................................................................................................................................ 18 1. Ưu điểm:.......................................................................................................................................................18 2. Nhược điểm:.................................................................................................................................................18 3. Khó khăn:......................................................................................................................................................18 VIII. DEMO:............................................................................................................................................................... 19 IX. TÀI LIỆU THAM KHẢO:......................................................................................................................................... 20 3 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY I. GIỚI THIỆU Trong thời đại công nghệ thông tin phát triển như hiện nay, việc truy cập các website để tra cứu thông tin, học tập, giải trí... là nhu cầu rất cần thiết của mỗi người. Website Directories ra đời để giải quyết vấn đề đó. Đây là một trang web tổng hợp địa chỉ và thông tin của nhiều website nổi tiếng, được phân chia theo từng danh mục cụ thể. Điều này sẽ giúp người dùng: - Duyệt web nhanh chóng với thao tác click đơn giản. Không cần phải nhớ hay gõ tên miền của từng website. - Trang web của giới thiệu những website uy tín, chất lượng đã được chọn lọc nên rất an toàn. - Dễ dàng tra cứu những tiện ích hàng ngày như tỉ giá, thời tiết, tin tức... một cách nhanh chóng. 4 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY II. CẤU TRÚC MÃ NGUỒN: 1. Thư mục chính: Chứa các thư mục con bên dưới và các file: - index.php: Trang chủ - register.php: Đăng ký thành viên - logout.php: Đăng nhập - logout.php: Đăng xuất - forgotpass:php: Lấy lại password mới khi quên - search.php: Tìm kiếm website - view-profile.php: Xem thông tin cá nhân của thành viên - admin.php: Trang quản trị của admin 2. Folder Category: Chứa các file .php của từng danh mục website. Khi truy cập vào các file này, trình duyệt sẽ hiển thị tất cả các website thuộc danh mục tương ứng. 3. Folder Css: Chứa các file css liên quan để định dạng website 4. Folder Function: Chứa các hàm php cần thiết như tăng lượng visit; thêm-sửa-xóa trang web, thành viên... 5. Folder Images: Chứa các folder ảnh của icon website, background, các button login, search... 6. Folder Js: Chứa các file javascripts để làm menu slide cho Top 5 sites, cuộn trang, cập nhật lượt visit... 5 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY III. CẤU TRÚC WEBSITE 1. Header: Demo: Gồm ba phần: Website logo (#logo), khung tìm kiếm (#search1), khung đăng nhập (#loginContainer). - Website logo: Ảnh đại diện của Website - Khung tìm kiếm: Cho phép người dùng thực hiện chức năng tìm kiếm Website - Login: Người dùng đăng nhập để có thể thực hiện những chức năng cao hơn. Giao diện khi click vào nút login: 2. Main 1: Demo: Gồm 2 phần chính: Menu (#cssmenu) và Top 5 sites (#featured) - Menu: Hiển thị các danh mục website, khi người dùng click vào tên từng danh mục, website sẽ tự động chuyển đến vị trí thích hợp - Top 5 sites: Hiển thị 5 website có xếp hạng cao nhất do trang Alexa bình chọn. 6 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB 3. ĐỀ TÀI 5: WEBSITE DIRECTORY Main 2: Demo: Gồm 3 phần cơ bản: - Popular sites (#popularsite): Hiển thị websites có lượng visit cao nhất, sắp xếp theo thứ tự visit giảm dần. - Favorite sites (#favsite): Chỉ hiển thị khi người dùng đăng nhập. Ban đầu các website sẽ được chọn theo lượt visit cao nhất, sau đó người dùng có thể tùy chỉnh websites ưa thích bằng button có hình dấu [+] - Các tabs: + Có 8 tabs chính, mỗi tab tương ứng với một danh mục trên menu. Khi người dùng click vào danh mục trên menu, trình duyệt sẽ dẫn người dùng đến địa chỉ tương ứng. + Ứng với mỗi tab chính sẽ có một vài tabs phụ có chung chủ đề hoặc liên quan. Người dùng click từng tabs phụ để hiển thị danh mục các website tương ứng. 7 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB 4. ĐỀ TÀI 5: WEBSITE DIRECTORY Main 3: Demo: Gồm 2 phần cơ bản: - Khung thời tiết - tỷ giá (#RSS): Hiển thị thời tiết của từng địa phương, giá vàng, tỷ giá hối đoái của các đơn vị tiền tệ trên thế giới. - Khung Báo mới (#baomoi): Một widget của Baomoi.com dùng để hiển thị các tin tức mới nhất trong ngày 5. Footer: Demo: Chứa thông tin của người lập trình websites 8 IV. CƠ SỞ DỮ LIỆU: 1. Website_info: Cơ sở dữ liệu này dùng để chứa tất cả thông tin về Website, gồm có: ID, Name, Description, Visit Trong đó: ID: Con số duy nhất ứng với mỗi website Name: Tên cả website Description: Mô tả tổng quan về website Visit: Số lượt khách ghé thăm website. Visit sẽ tự động tăng khi người dùng click vào website. Demo: 2. Tag_mean: Tag: danh mục từng website. Ví dụ: Tin tức, thể thao, giáo dục... Cơ sở dữ liệu này định nghĩa tên tag với ID tương ứng, gồm có: ID, Name Demo: 9 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB 3. ĐỀ TÀI 5: WEBSITE DIRECTORY Tag_info: Cơ sở dữ liệu này chứa dữ liệu website của từng tag, ta sẽ biết được website nào thuộc những tag nào hoặc tag nào chứa website gì. Một tag có thể chứa nhiều website, và một site có thể ở trong nhiều tag. Demo: 4. User_db: Cơ sở dữ liệu này chứa thông tin của các thành viên đã đăng ký, gồm ID, User ID, Pass, Hovaten, Email, Sex, Birthday, Phone_number. Demo: 10 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY V. CHỨC NĂNG: 1. Register: - Người dùng click LOGIN trên thành Header, một pop-up sẽ hiển thị như hình dưới: - Click vào chữ Register để đến trang đăng ký (/register.php) - Nhập đầy đủ thông tin và click nút đăng ký. Nếu không đúng định dạng email: 11 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY - Nếu tên tài khoản quá ngắn, sẽ có thông báo: The length must between 2 to 20 - Nếu trùng email/tên tài khoản hoặc sai xác nhận mật khẩu sẽ có thông báo: Đăng kí không hợp lệ. 12 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY 2. Login: - Nhập thông tin vào form login và nhấn nút LOGIN: - Nếu đăng nhập thành công, trên thanh Header nút login sẽ biến mất và thay bằng: - Nếu đăng nhập thất bại sẽ hiện thông báo sai mật khẩu hoặc pass và yêu cầu đăng nhập lại. 3. Logout: Người dùng click nút LOGOUT để đăng xuất. 4. Forgot password: Người dùng click nút Forgot password để cập nhật lại mật khẩu mới. 13 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY 5. View-profile: Người dùng click vào tên của mình ở dòng “HELLO, Username ^^” để vào trang chỉnh sửa thông tin cá nhân. 6. Admin panel: Khi admin đăng nhập, website sẽ tự động chuyển đến trang /admin.php để quản lý người dùng và website: * Chức năng ADD WEBSITE: Lần lượt nhập tên Website, địa chỉ, tag, miêu tả và nhấn submit để add 1 site vào cơ sở dữ liệu * Chức năng DELETE WEBSITE: Nhập tên hoặc địa chỉ và ấn submit để xóa 1 site khỏi cơ sở dữ liệu * Chức năng DELETE USER: 14 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY Nhập username và ấn delete để xóa 1 user khỏi cơ sở dữ liệu 7. Popular websites: Thanh này dùng để hiện thị danh sách các website có lượt truy cập cao nhất. Lượt truy cập của 1 site được tự động tăng lên khi người dùng hoặc khác click vào site đó. 8. My favorite websites: Người dùng click vào nút [+] để tùy chỉnh website yêu thích. 9. Module Thời tiết - Giá vàng - Tỷ giá: Hiển thị thời tiết của từng địa phương bằng cách click nút mũi tên đen để hiện ra list các địa phương. Giá vàng và tỷ giá được cập nhật hằng ngày. Đây là widget lấy từ trang vnexpress.net. 10. Module Báo mới: 15 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY Hiện thị các tin mới nhất trong ngày. Người dùng click vào tiêu đề của bài viết, 1 tab trình duyệt mới sẽ mở ra và dẫn đến link bài viết. Công cụ này giúp người dùng cập nhật tin tức nhanh chóng và hiệu quả (các tin hiển thị là các tin mới và nóng hổi nhất) Module này cung cấp bới baomoi.com. 11. Module Facebook: Khi click vào button “facebook” bên tay phải, một module sẽ hiện ra như hình trên. Người dùng có thể like Fanpage của Website Directories để cập nhật những tin tức mới nhất và giao lưu kết bạn với bạn bè trên toàn thế giới. 12. Button Top Arrow: Một button nhỏ hình mũi tên màu xanh góc phải màn hình cho phép chúng ta trở lên đầu trang một cách tiện lợi nhất. 13. Tìm kiếm: Nhập tên website cần tìm trên thanh tìm kiểm ở Header: 16 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY Kết quả sẽ trả về các website có tên hoặc mô tả tương ứng: 14. View all: Mỗi danh mục website đều có một button View all. Người dùng click vào đó để hiển thị tất cả các website thuộc danh mục đó. Trình duyệt sẽ load đến trang tương ứng. Ví dụ với View all của NEWS (dẫn đến trang /news.php): 17 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY VI. PHÂN CÔNG CÔNG VIỆC: Nguyễn Hoàng Đức: phụ trách các phần PHP, Javascripts, Ajax, Database Trần Nguyễn Thiên Huy: phụ trách các phần HTML, CSS, Database, Báo cáo, Up web lên host VII. KẾT QUẢ: 1. Ưu điểm: - Lập được một website directories với các chức năng cơ bản - Website chạy ổn định, giao diện khá thân thiện - Đáp ứng được yêu cầu quan trọng của đề bài: Dùng các kiến thức đã được học: HTML/CSS, Javascript, PHP và MySQL, sử dụng Ajax. 2. Nhược điểm: - Chưa có một số chức năng quan trọng như chỉnh sửa thông tin cá nhân, đổi password - Chưa tránh được các lỗi bảo mật căn bản 3. Khó khăn: - Dữ liệu website khá lớn, mất nhiều thời gian cho việc tạo cơ sở dữ liệu - Các kiến thức mới học nên chưa sử dụng thành thạo - Nhóm chỉ có 2 thành viên nhưng khối lượng công việc khá lớn và khoảng thời gian này các môn học khác cũng đến giai đoạn deadline Assignment nên không hoàn thành tốt 18 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY VIII. DEMO: http://www.websitedirectories.tk/ Hoặc http://shinichikudo_121.byethost7.com/ 19 BÁO CÁO ASSIGNMENT LẬP TRÌNH WEB ĐỀ TÀI 5: WEBSITE DIRECTORY IX. TÀI LIỆU THAM KHẢO: [1] Slide bài giảng của www.webstepbook.com [2] Các video về PHP, MY SQL của IZWEB [3] Website W3School 20