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