NGHIÊN CỨU, THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG WEBSITE DATA4KID

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP NGHIÊN CỨU, THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG WEBSITE DATA4KID Giáo viên hướng dẫn: Sinh viên thực hiện: Ths Mai Anh Thơ Lê Thị Tuyết Vân - 09130100 Lưu Minh Triết - 09130088 TP.HỒ CHÍ MINH, tháng năm 2013 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP NGHIÊN CỨU, THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG WEBSITE DATA4KID Ngành : Công Nghệ Thơng Tin Niên khố : 2009-2013 Lớp : DH09DT Sinh viên thực hiện: Lê Thị Tuyết Vân - 09130100 Lưu Minh Triết – 09130088 TP.HỒ CHÍ MINH, tháng năm 2013 CƠNG TRÌNH HỒN TẤT TẠI TRƯỜNG ĐẠI HỌC NƠNG LÂM TP HCM Cán hƣớng dẫn: ThS Mai Anh Thơ Cán phản biện: ThS Phan Võ Minh Thắng Luận văn cử nhân đƣợc bảo vệ HỘI ĐỒNG CHẤM LUẬN VĂN CỬ NHÂN TRƢỜNG ĐẠI HỌC NÔNG LÂM TP HCM ngày….tháng….năm… Bộ Giáo Dục Đào Tạo CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Trường ĐH NÔNG LÂM TpHCM Độc Lập-Tự Do-Hạnh Phúc NHIỆM VỤ LUẬN VĂN CỬ NHÂN Họ tên sinh viên: LÊ THỊ TUYẾT VÂN Ngày tháng năm sinh: 28/08/1991 Chuyên ngành: Công Nghệ Thông Tin Phái: Nữ Nơi sinh: An Giang Ngành: Công Nghệ Thông Tin Họ tên sinh viên: LƯU MINH TRIẾT Phái: Nam Ngày tháng năm sinh: 1982 Nơi sinh: Nình Thuận Chuyên ngành: Công Nghệ Thông Tin Ngành: Công Nghệ Thông Tin I TÊN ĐỀ TÀI: NGHIÊN CỨU, THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG WEBSITE DATA4KID II NHIỆM VỤ VÀ NỘI DUNG - Tìm hiểu nắm vững kiến thức Struts2framework - Tìm hiểu nắm vững kiến thức Hibernate framework - Tìm hiểu yêu cầu khách hàng chức hệ thống Data4Kid - Nghiên cứu giải pháp lƣu trữ tƣ liệu, tài liệu, thiết kế liệu để dễ dàng truy xuất - Xây dựnghệ thống Website Data4kid dựa yêu cầu khách hàng - Đƣa hệ thống vào sử dụng thực tế III NGÀY GIAO NHIỆM VỤ: 15/02/2012 IV NGÀY HOÀN THÀNH NHIỆM VỤ: 15/08/2013 V HỌ VÀ TÊN CÁN BỘ HƢỚNG DẪN: ThS Mai Anh Thơ Ngày…./…./… Ngày…./…./… Ngày…./…./… CÁN BỘ HƢỚNG DẪN CHỦ NHIỆM CHUYÊN NGÀNH KHOA CNTT Chúng em xin chân thành cảm ơn thầy cô khoa Công Nghệ thông tin trường Đại học Nông Lâm TP.HCM, với kiến thức quý báu nhiệt huyệt, tận tụy mà thầy cô truyền đạt cho chúng em suốt năm học Chúng xin gởi đến cha mẹ lời ghi ơn sâu sắc, người sinh dạy bảo chúng trưởng thành đến ngày hôm Đặc biệt, chúng em xin cảm ơn ThS.Mai Anh Thơ tận tình hướng dẫn chúng em suốt thời gian qua để chúng em hoàn thành luận văn Xin chân thành cảm ơn anh Cường đưa yêu cầu rõ ràng, hỗ trợ để chúng em làm u cầu hoàn thành luận văn Mặc dù chúng em cố gắng hoàn thành tốt luận văn phạm vi khả cho phép chắn khơng tránh khỏi thiếu sót định Chúng em kính mong nhận cảm thơng tận tình bảo quý thầy cô bạn Chúng em kính gửi lời chúc sức khỏe dồi thành đạt đến quý thầy cô bạn Xây dựng hệ thống Data4Kid DANH SÁCH CHỮ VIẾT TẮT CSDL Cơ Sở Dữ Liệu GUI Graphic User Interface JVM Java Virtual Machine MVC Model-View-Controller UI User Interface POJO Plain Old Java Object OGNL Object Graph Notation Language CLR Common Language Runtime MSIL Microsoft Intermediate Language LGPL Lesser GNU Public License EL Express Language XML Extensible Markup Language JSTL JSP Standard Tag Library JSP Java Server Pages GVHD: THS MAI ANH THƠ I SVTH: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid MỤC LỤC HÌNH ẢNH Hình Trang Chủ Violet.com Hình 2 Trang chủ socnhi.com Hình Trang chủ NXBTRE.COM.VN Hình Trang chủ NXBKIMDONG.COM.CN Hình Quy trình nghiệp vụ Data4Kid Hình Yêu cầu phi chức DATA4KID 15 Hình 3 Use case Actor 17 Hình Use case Admin 18 Hình Use case cho khách 19 Hình Use case Thành viên 20 Hình Toàn Use case 21 Hình Kiến trúc hệ thống 80 Hình Kiến trúc phần mềm 81 Hình 10 Class diagram 82 Hình 11 Trang Chủ 83 Hình 12 Trang Tin tức – Tài Liệu Bài Tập 84 Hình 13 Trang hiển thị viết 85 Hình 14 Trang Xem Tài Liệu Sách Bài Tập 86 Hình 15 Trang Trò Chơi 87 Hình 16 Trang Chơi Game 88 Hình 17 Trang Xem Video 89 Hình 18 Trang Liên Hệ Đến Data4Kid 90 Hình Cơ chế hoạt động Struts2 96 Hình Cơ chế xử lý yêu cầu Struts2 97 Hình Các thành phần cửa Struts2 98 Hình 4 Kiến trúc Hibernate 115 GVHD: THS MAI ANH THƠ II SVTH: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid DANH MỤC CÁC LƯỢC ĐỒ Lƣợc đồ 1: Thêm tài khoản 23 Lƣợc đồ 2: Xóa tài khoản 25 Lƣợc đồ 3: Chỉnh sửa tài khoản 27 Lƣợc đồ 4: Tìm kiếm lọc tài khoản 29 Lƣợc đồ 5: Thêm viết 31 Lƣợc đồ 6: Xóa viết 33 Lƣợc đồ 7: Chỉnh sửa viết 35 Lƣợc đồ 8: Tìm kiếm lọc viết 37 Lƣợc đồ 9: Thêm Video 39 Lƣợc đồ 10: Xóa Video 41 Lƣợc đồ 11: Chỉnh sửa Video 43 Lƣợc đồ 12: Tìm kiếm lọc Video 45 Lƣợc đồ 13: Thêm Trò chơi 47 Lƣợc đồ 14: Xóa Video 49 Lƣợc đồ 15: Chỉnh sửa trò chơi 51 Lƣợc đồ 16: Tìm kiếm lọc trò chơi 53 Lƣợc đồ 17: Đăng Kí Tài Khoản 56 Lƣợc đồ 18: Liên hệ Data4Kid 57 Lƣợc đồ 19: Đăng Nhập 59 Lƣợc đồ 20: Download tài liệu, sách 61 Lƣợc đồ 21: Yêu cầu cung cấp mật 63 Lƣợc đồ 22: Thay đổi thông tin cá nhân 65 Lƣợc đồ 23: Nâng cấp tài khoản 67 Lƣợc đồ 24: Xem tin tức, tài liệu, sách 69 Lƣợc đồ 25: Tìm kiếm tin tức, tài liệu, sách khách thành viên 71 Lƣợc đồ 26: Lọc tin tức, tài liệu, viết 73 Lƣợc đồ 27: Sắp xếp tin tức, tài liệu, viết 75 Lƣợc đồ 28: Xem video 77 Lƣợc đồ 29: Chơi trò chơi 79 GVHD: THS MAI ANH THƠ III SVTH: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid DANH MỤC CÁC BẢNG Bảng So sánh khác Struts1 Struts2 94 GVHD: THS MAI ANH THƠ IV SVTH: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid Bấm Install để mở Netbeans IDE Installer, bấm Next bấm accept license agreement Khởi động lại Netbeans Bước 2: Tạo ứng dụng Web Netbeans Vào New>Project Đặt tên cho ứng dụng “LoginApp”.Bấm Next Chọn Server Apache Tomcat Nếu chƣa có Apache Tomcat, ta download http://tomcat.apache.org/download-70.cgi#7.0.41, sau bấm Add > chọn Apache Tomcat > bấm Next > Bấm Browse… > Chọn nơi đặt Apache Tomcat vừa download bỏ check “Create user if it does not exists”> Bấm Finish Sau hoàn chọn Apache Tomcat Bấm Next GVHD: THS MAI ANH THƠ SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid Chọn Struts2 Bấm Finish Bước 3: Vào Project Nhấp phải vào Web Page chon New > Jsp Đặt tên cho trang “login.jsp” GVHD: THS MAI ANH THƠ SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid Login.jsp Login - Struts2 errorMessage { color:red; } Struts - Login Application Enter user name and password rỏ sau bấm Submit yêu cầu đƣợc chuyển tới action có tên login đƣợc định nghĩa file struts.xml Bước 4: Mở file web.xml edit lại sau: GVHD: THS MAI ANH THƠ SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid struts2 org.apache.struts2.dispatcher.FilterDispatcher struts2 /* 30 login.jsp Dựa vào dòng code ta giải thích nhƣ sau: sau ta chạy ứng dụng, hệ thống hiển thị trang login.jspnhƣ welcome-file Bước 5: Tạo lớp Action: Chúng ta cần lớp Action để kiểm tra xem giá trị username password có hay khơng Ta tạo file tên LoginAction đặt action package GVHD: THS MAI ANH THƠ SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid LoginAction.java /* * To change this template, choose Tools | Templates * and open the template in the editor */ package action; import com.opensymphony.xwork2.ActionSupport; /** * * @author tuyetvanleit */ public class LoginAction extends ActionSupport{ private String error; private String username; private String password; public String execute() { if (this.username.equals("admin") &&this.password.equals("adminadmin")) { return SUCCESS; } else { error="username and password wrong!"; return INPUT; } } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getError() { return error; } public void setError(String error) { this.error = error; } } Lớp LoginAction.java chứa ba thuộc tính username, password error(dùng để báo lỗi username password không đúng).Phƣơng thức GVHD: THS MAI ANH THƠ SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid execute() đƣợc gọi bấm Submit Trong ví dụ ta kiểm tra xem username có phải admin password adminadmin hay không Bước 6: Tạo file Validator xml Validator file đảm bảo field nhƣ usename password không null Khi ngƣời dùng nhập giá trị rỗng hệ thống báo lỗi Và quay trang login.jsp (theo ta qui định file struts.xml – thực bƣớc sau) Nhấp phải vào action package chọn New > other Trong cửa sổ chọn XML Categories > chọn XML Document Bấm Next Đặt tên cho file XML LoginAction-validation.xml Bấm Next Chọn Well-formed Document Bấm Finish Điền nội dung LoginAction-validation.xml nhƣ sau: username username is required. password password is required. Trong dòng lênh xml qui định liệu đƣợc nhập.username password tên trùng với username, password field form trang login.jsp requiredstringlà yêu cầu phải nhập – không đƣợc để field rỗng.Nếu field rỗng hệ thống quay trang login.jsp thông báo lỗi đƣợc hiển thị.Ngƣợc lại, hệ thống chuyển đến LoginAction.java để thực kiểm tra username password Bước 7: Cài đặt file struts.xml với nội dung sau: GVHD: THS MAI ANH THƠ SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid /hello.jsp /login.jsp Khi phƣơng thức execute() lớp LoginAction.java trả SUCCESS hệ thống chuyển trang hello.jsp Ngƣợc lại, trả INPUT hệ thống quay lại trang login.jsp.name=”login” tên action mà ta đƣợc dùng form trang login.jsp Bước 8: Nội dung trang hello.jsp sau: Login Successful Hello Admin! Login Successfully! Bước 9: Kiểm tra ứng dụng kết quả: Khi ta bỏ trống hệ thống hiển thị lỗi nhƣ sau: GVHD: THS MAI ANH THƠ SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid Nếu Username Password đƣợc điền đầy đủ nhƣng khơng trùng khớp với tài khoản u cầu hệ thống báo lỗi nhƣ sau: Và điền username password hệ thống chuyển trang hello.jsp GVHD: THS MAI ANH THƠ SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid GVHD: THS MAI ANH THƠ 10 SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid PHỤ LỤC B CÀI ĐẶT ỨNG DỤNG Để chạy ứng dụng ta cần cài đặt môi trường sau: - JDK - Apache Tomcat 1.7 - MySql Navicat Hướng dẫn cài đặt JDK 1.7 - - Đầu tiên ta vào trang sau để download JDK: http://www.oracle.com/technetwork/java/javase/downloads/jdk-7-netbeansdownload-432126.html Tiếp theo ta thực việc khai báo biến môi trƣờng JAVA_HOME trỏ tới thƣ mục chứa JDK vừa cài đặt theo bƣớc nhƣ sau:  Đầu tiên vào Control Panel > System > Advanced system settings > Enviroment Variables… > Bấm New  Hiển thị cửa sổ điền Variable Name JAVA_HOME Variable value đƣờng dẫn đến JDK cài đặt “C:\Program Files\Java\jdk1.7.0_02”  Bấm OK GVHD: THS MAI ANH THƠ 11 SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid Hướng dẫn tạo CSDL để chạy ứng dụng - Download MySQL đây: http://dev.mysql.com/downloads/ tiến hành cài đặt Download Navicat đây: http://www.navicat.com/download/navicat-formysql tiến hành cài đặt Sau cài đặt xong, ta mở Navicat tiến hành tạo sở liệu theo bƣớc sau:  Tạo sở liệu mang tên data4kid_new nhƣ hình sau: GVHD: THS MAI ANH THƠ 12 SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid  Nhấp phải vào Database vừa tạo bấm chọn Execute SQL file… nhƣ hình sau: GVHD: THS MAI ANH THƠ 13 SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid  Cửa sổ hiển thị lên hình Ta chọn file Sql cần thực execute:  Bấm Start Hướng dẫn chạy ứng dụng - - Chép file data4kid.war data4kidAdmin.war vào thƣ mục chứa ApacheTomcat mà bạn vừa cài đặt Ví dụ nhƣ: E:\software\apachetomcat-7.0.27 Sau vào thƣ mục E:\software\apache-tomcat-7.0.27\bin chạy file có tên startup.bat GVHD: THS MAI ANH THƠ 14 SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid - Cuối ta mở trình duyệt gỏ vào đƣờng dẫn http://localhost:8080/data4kid1.5 hệ thống hiển thị lên trang chủ Data4Kid nhƣ hình sau: GVHD: THS MAI ANH THƠ 15 SVTD: TUYẾT VÂN, MINH TRIẾT Xây dựng hệ thống Data4Kid Ngƣời dùng admin đăng nhập với email: tuyetvanleit@gmail.com, mật khẩu: vanle GVHD: THS MAI ANH THƠ 16 SVTD: TUYẾT VÂN, MINH TRIẾT ... hàng chức hệ thống Data4Kid - Nghiên cứu giải pháp lƣu trữ tƣ liệu, tài liệu, thiết kế liệu để dễ dàng truy xuất - Xây dựnghệ thống Website Data4kid dựa yêu cầu khách hàng - Đƣa hệ thống vào sử...BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NÔNG LÂM TP HCM KHOA CÔNG NGHỆ THÔNG TIN LUẬN VĂN TỐT NGHIỆP NGHIÊN CỨU, THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG WEBSITE DATA4KID Ngành : Công Nghệ Thông Tin Niên... Chun ngành: Cơng Nghệ Thông Tin Ngành: Công Nghệ Thông Tin I TÊN ĐỀ TÀI: NGHIÊN CỨU, THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG WEBSITE DATA4KID II NHIỆM VỤ VÀ NỘI DUNG - Tìm hiểu nắm vững kiến thức Struts2framework