(Đồ án hcmute) 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

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ PHẦN MỀM 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 GVHD:Ts LÊ VĂN VINH SVTH:NGUYỄN ANH SANG MSSV:16110440 SKL 0 Tp Hồ Chí Minh, năm 2020 an 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 KHỐ 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 an 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 KHỐ 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 an PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên : Nguyễn Anh Sang MSSV: 16110440 Ngành: Công nghệ Thơng tin 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 NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm Đề nghị cho bảo vệ hay không?: an Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày…tháng…năm 2020 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên : Nguyễn Anh Sang MSSV: 16110440 Ngành: Công nghệ Thông tin 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 phản biện: ThS Nguyễn Trần Thi Văn NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm Đánh giá loại: an Điểm: Tp Hồ Chí Minh, ngày…tháng…năm 2020 Giáo viên phản biện (Ký & ghi rõ họ tên) an 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 q thầy 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 chun 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 q 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 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 quý 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! an 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 an 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 an { 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 an 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 an 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 an 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