(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng(Đồ án tốt nghiệp) Xây dựng Website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM -□□ □□ - NGUYỄN ANH SANG: 16110440 Đề tài: XÂY DỰNG WEBSITE TÌM KIẾM ĐỊA ĐIỂM THÚ Y, CỬA HÀNG DỊCH VỤ CHĂM SÓC THÚ CƯNG KHOÁ LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN Ts LÊ VĂN VINH KHÓA 2016-2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM -□□ □□ - NGUYỄN ANH SANG: 16110440 Đề tài: XÂY DỰNG WEBSITE TÌM KIẾM ĐỊA ĐIỂM THÚ Y, CỬA HÀNG DỊCH VỤ CHĂM SÓC THÚ CƯNG KHOÁ LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN Ts LÊ VĂN VINH KHÓA 2016-2020 LỜI CÁM ƠN Trong trình nghiên cứu đề tài, giảng viên hỗ trợ, hướng dẫn sinh viên Với tất kính trọng, nhóm thực đề tài xin bày tỏ lòng biết ơn đến quý thầy cô theo dõi hướng dẫn suốt thời gian thực đề tài Đầu tiên, nhóm xin gửi lời cảm ơn sâu sắc đến Ban giám hiệu trường Đại học Sư phạm Kỹ Thuật Thành phố Hồ Chí Minh tạo điều kiện, mơi trường học tập chất lượng, hiệu cho nhóm phát huy cách tốt nghiên cứu Đồng thời, nhóm xin gửi lời cảm ơn đến Ban Chủ nhiệm khoa Công nghệ Thông tin thầy cô khoa Công nghệ Thông tin - trường Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh tạo mơi trường học tập làm việc chuyên nghiệp, nhiệt tình giảng dạy nhóm thực đề tài nói riêng sinh viên khoa Cơng nghệ Thơng tin nói chung trình học tập làm việc trường Đặc biệt, xin gửi lời cảm ơn chân thành đến thầy Lê Văn Vinh – giáo viên hướng dẫn Khoá luận tốt nghiệp – Khoa công nghệ thông tin – Đại học Sư phạm Kỹ thuật Tp Hồ Chí Minh, hướng dẫn, quan tâm, góp ý ln đồng đồng hành nhóm giai đoạn khó khăn đề tài Với kinh nghiệm thực tiễn cịn thiếu sót kinh nghiệm chun mơn cịn non yếu, báo cáo có thiếu sót hạn chế định Kính mong nhận phản hỏi, đóng góp ý kiến bảo thêm q thầy để nhóm đạt kiến thức hữu ích nhất, nâng cao ý thức để phục vụ cho kỹ sau Xin chân thành cảm ơn! TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ****** ĐỀ CƯƠNG KHOÁ LUẬN TỐT NGHIỆP Họ tên Sinh viên : Nguyễn Anh Sang MSSV: 16110440 Thời gian làm khoá luận từ 15/03/2020 đến 20/06/2020 Ngành: Công nghệ thông tin Chuyên ngành: Công nghệ phần mềm Tên đề tài: XÂY DỰNG WEBSITE TÌM KIẾM ĐỊA ĐIỂM THÚ Y, CỬA HÀNG DỊCH VỤ CHĂM SÓC THÚ CƯNG Họ tên Giáo viên hướng dẫn: Ts Lê Văn Vinh Nhiệm vụ thực hiện: Tìm hiểu quy trình xây dựng ứng dụng website sử dụng thư viện REACT Tìm hiểu thư viện REACT kết hợp hệ quản trị sở liệu MongoBD ứng dụng vào đồ án Xây dựng website tìm kiếm địa điểm thú y, cửa hàng dịch vụ chăm sóc thú cưng Đề cương viết luận văn: MỤC LỤC Phần MỞ ĐẦU Tính cấp thiết đề tài Mục tiêu đề tài Kết cấu đề tài Phần NỘI DUNG Chương 1: Cơ sở lý thuyết 1.1 ReactJS 1.2 NodeJS + ExpressJS 1.3 MongoDB Chương 2: Khảo sát trạng 2.1 Khảo sát số trang web 2.2 Kết luận tiêu chí mà website cần đạt Chương 3: Mơ hình hóa thiết kế sở liệu 3.1 Usecase Diagram 3.2 Chi tiết actor 3.3 Sơ đồ luồng liệu sở liệu nghiệp vụ 3.4 Cơ sở liệu Chương 4: Thiết kế hình giao diện xử lý 4.1 Các hình giao diện guest 4.2 Các hình giao diện user 4.3 Các hình giao diện admin Chương 5: Thiết kế phần mềm 5.1 Sơ đồ lớp 5.2 Mô tả chi tiết lớp 5.3 Trích dẫn thuật tốn hay Chương 6: Cài đặt kiểm thử 6.1 Cài đặt phần mềm 6.2 Kế hoạch kiểm thử quy trình kiểm thử Phần KẾT LUẬN Tài liệu tham khảo KẾ HOẠCH THỰC HIỆN Tuần 1+2+3 Ngày 15/03-04/03 05/04-11/04 5+6+7+8 - Khảo sát trạng - Dựng use case, class diagram, sequence - Thiết lập mơ hình CSDL - Tìm hiểu ReactJS - Tìm hiểu NodeJS - Tìm hiểu MongoDB - Xây dựng giao diện với ReactJS - Xây dựng back-end với NodeJS - Kết hợp phần làm (giao diện, database) - Phát triển, tích hợp API cho sản phẩm - Kết hợp tất phần, hoàn thiện sơ sản phẩm - Kiểm thử chương trình, tiến hành khắc phục lỗi - Chỉnh sửa báo cáo - Hồn tất chương trình 12/04-09/05 9+10+11 10/05-30/05 12 31/05-06/06 13 07/06-13/06 14 14/06-20/06 15 Nhiệm vụ 21/06-28/06 Ý kiến Giáo viên hướng dẫn Ngày …… tháng… … năm 2020 (Ký ghi rõ họ tên) Người viết đề cương MỤC LỤC PHẦN MỞ ĐẦU 19 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 19 MỤC TIÊU CỦA ĐỀ TÀI 19 KẾT CẤU CỦA ĐỀ TÀI 20 PHẦN NỘI DUNG 21 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 21 1.1 ReactJS 21 1.1.1 Khái niệm 21 1.1.2 Các đặc trưng 21 1.2 NodeJS ExpressJS 22 1.2.1 NodeJS 22 1.2.2 ExpressJS 22 1.3 MongoDB 22 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 24 2.1 KHẢO SÁT MỘT SỐ TRANG WEB 24 2.1.1 https://www.now.vn/ (website tìm kiếm địa điểm ăn uống) 24 2.1.2 https://phongtro123.com/ (website tìm kiếm phịng trọ) 25 2.1.3 https://diadiemanuong.com/ (website tìm kiếm địa điểm ăn uống) 26 2.2 KẾT LUẬN VỀ NHỮNG TIÊU CHÍ WEBSITE CẦN ĐẠT ĐƯỢC 26 CHƯƠNG 3: MƠ HÌNH HĨA YẾU CẦU VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU 28 3.1 USECASE DIAGRAM 28 3.2 CHI TIẾT CÁC ACTOR 28 3.2.1 Guest 28 3.2.1.1 Các nghiệp vụ 28 3.2.1.2 Các quy định 30 3.2.1.3 Danh sách biểu mẫu 33 3.2.2 User 35 3.2.2.1 Các nghiệp vụ 35 10 3.2.2.2 Các quy định 36 3.2.2.3 Các biểu mẫu 39 3.2.3 Admin 41 3.2.3.1 Các nghiệp vụ 41 3.2.3.2 Các quy định 42 3.2.4 Editor 44 3.2.4.1 Các nghiệp vụ 44 3.2.4.2 Các quy định 46 3.3 Sơ đồ luồn liệu sở liệu nghiệp vụ 49 3.3.1 Xét nghiệp vụ Guest 49 3.3.1.1 Xét nghiệp vụ đăng ký 49 3.3.1.2 Xét nghiệp vụ đăng nhập 50 3.3.1.3 Xét nghiệp vụ quên mật 51 3.3.1.5 Xét nghiệp vụ xem chi tiết địa điểm 52 3.3.1.6 Xét nghiệp vụ đổi mật 52 3.3.1.7 Xét nghiệp vụ xem bình luận viết 53 3.3.2 Các nghiệp vụ User 54 3.3.2.1 Xét nghiệp vụ sửa thông tin người dùng 54 3.3.2.2 Xét nghiệp vụ đăng địa điểm 55 3.3.2.3 Xét nghiệp vụ sửa địa điểm 56 3.3.2.4 Nghiệp vụ tạo bình luận 57 3.3.3 Các nghiệp vụ Admin 58 3.3.3.1 Xét nghiệp vụ Xem danh sách người dùng 58 3.3.3.2 Xét nghiệp vụ Xem thống kê 59 3.3.4 Các nghiệp vụ Editor 60 3.3.4.1 Xét nghiệp vụ Đăng viết 60 3.3.4.1 Xét nghiệp vụ Sửa viết 61 3.4 CƠ SỞ DỮ LIỆU 62 3.4.1 Lược đồ sở liệu 62 11 3.4.2 Mô tả sở liệu 63 3.4.2.1 Bảng Users 63 3.4.2.2 Places 64 3.4.2.3 Comment 64 3.4.2.4 Sub_Comment 65 3.4.2.5 News 65 3.4.2.6 Rate 66 CHƯƠNG 4: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 67 4.1 CÁC MÀN HÌNH GIAO DIỆN GUEST 67 4.1.1 Màn hình đăng nhập 67 4.1.1.1 Thiết kế giao diện 67 4.1.1.2 Thiết kế xử lý 68 4.1.2 Màn hình đăng ký tài khoản 68 4.1.2.1 Thiết kế giao diện 68 4.1.2.2 Thiết kế xử lý 69 4.1.3 Màn hình trang chủ 70 4.1.3.1 Thiết kế giao diện 70 4.1.3.2 Thiết kế xử lý 71 4.1.4 Màn hình địa điểm 71 4.1.4.1 Màn hình giao diện 71 4.2 CÁC MÀN HÌNH GIAO DIỆN CỦA USER 72 4.2.1 Màn hình tạo địa điểm 72 4.2.1.1 Màn hình giao diện 72 4.2.2.2 Màn hình xử lý 74 4.2.3 Màn hình edit profile 75 4.2.3.1 Màn hình giao diện 75 4.2.3.2 Màn hình xử lý 75 4.2.4 Màn hình bình luận 76 4.2.4.1 Màn hình giao diện 76 12 4.2.4.2 Màn hình xử lý 77 4.3 CÁC MÀN HÌNH ADMIN 77 4.3.1 Màn hình quản lý địa điểm 77 4.3.1.1 Màn hình giao diện 77 4.3.1.2 Màn hình xử lý 78 4.3.1 Màn hình quản lý viết 79 4.3.2.1 Màn hình giao diện 79 4.3.2.2 Màn hình xử lý 79 4.4 CÁC MÀN HÌNH EDITOR 80 4.4.1 Màn hình thêm viết 80 4.4.1.1 Màn hình giao diện 80 4.4.1.2 Màn hình xử lý 80 4.4.2 Màn hình quản lý viết đăng 82 4.4.2.1 Màn hình giao diện 82 4.4.2.2 Màn hình xử lý 82 CHƯƠNG 5: THIẾT KẾ PHẦN MỀM 83 5.1 SƠ ĐỒ LỚP 83 5.2 MÔ TẢ TỪNG LỚP 83 5.2.1 Class Rate 83 5.2.1.1 Atributes 83 5.2.1.2 Methods 83 5.2.2 Place 84 5.2.2.1 Atributes 84 5.2.2.2 Methods 84 5.2.3 SubComment 85 5.2.3.1 Atributes 85 5.2.3.2 Methods 85 5.2.4 Comment 86 5.2.4.1 Atributes 86 13 { resources:'/News/deleteNews', permissions:'delete' }, { resources:'/user/deleteUser', permissions:'delete' }, ], roles: 'editor', allows: [ { resources:'/News/createNewsbyUser', permissions:'post' }, { resources:'/News/deleteNews', permissions:'delete' }, { resources:'/News/editNews', permissions:'put' } ] } ]); Aclclass.setAcl = ACL } Xác thực ADMIN phía front-end shouldComponentUpdate(nextProps, nextState){ if( this.props.isLogin != nextProps.isLogin){ var decoded = jwt.verify(sessionStorage.getItem("token"), 'jwtCode_PS AS'); this.setState({isAdmin : decoded.isAdmin}) } return true; } componentDidMount(){ if(this.props.isLogin){ var decoded = jwt.verify(sessionStorage.getItem("token"), 'jwtCode_PS AS'); 90 this.setState({isAdmin : decoded.isAdmin}) } } Lấy toạ độ googleMap từ người dùng, thông qua click chuột onMarkerClick = (props, marker, e) => { this.setState({ selectedPlace: props, activeMarker: marker, showingInfoWindow: true }); } //get location handleMapClick = (ref, map, ev) => { const location = ev.latLng; const lat = ev.latLng.lat(); const lng = ev.latLng.lng(); this.setState(prevState => ({ locations: [location], showingInfoWindow: false, activeMarker: null, LAT : lat, LNG : lng, })); // store lat, lng this.props.storeTemplatLng(this.state.LAT, this.state.LNG); map.panTo(location); }; render() { return (Xác nhận vị trí đồ để người tìm kiếm dễ dàng
{this.state.locations.map((location, i) => { return ( ); })} {this.state.selectedPlace.name} ); } Lưu trữ liệu text, hình ảnh //Back-end const createPlace = (req, res, next) => { var form = new formidable.IncomingForm(); form.uploadDir = "./pics/"; form.multiples = true; form.keepExtensions = true; 92 form.parse(req, function(err, fields, files) { const newPlace = new Place(fields) var listImage = files.listPics; if (listImage) { var listPathImage = []; if (Array.isArray(listImage)) { listImage.forEach(element => { listPathImage.push('/pics/'+element.path.toString().slice(5)); }); } else { listPathImage.push('/pics/'+listImage.path.toString().slice(5)); } newPlace.picture = listPathImage; } newPlace.save((error) => { if (error) { res.status('200').json({ data: null, message: "Không cập nhật được!", success: false }); } else { res.status('200').json({ data: { picture: newPlace.picture }, message: 'Đăng địa điểm thành công!', success: true }); } }); }); } //Font-end let formData = new FormData(); formData.set("name_place",this.props.namePlace); formData.set("phone",this.props.tel); formData.set("stress",this.props.stress); 93 formData.set("dictrict",this.props.district); formData.set("city",this.props.city); formData.set("id_type_place",this.props.typePlace); formData.set("lat",this.props.lat); formData.set("lng",this.props.lng); formData.set("decription",this.props.decription); formData.set("createBy", sessionStorage.getItem("userID")); for(let i=0;i