Xây dựng và quản lý website review phim bằng công nghệ react và node js đồ án tốt nghiệp

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á ĐỒ ÁN TỐT NGHIỆP TÊN ĐỀ TÀI: XÂY DỰNG QUẢN LÝ WEBSITE RIVIEW PHIM BẰNG CÔNG NGHỆ REACT + NODE JS Sinh viên thực hiên Ngày sinh Lớp Khoa Mã sinh viên Giáo viên hướng dẫn : : : : : : Trần Thị Phương Lan 01/07/2000 DCCNTT9.10.IT1 Công Nghệ Thông Tin 187480201164 ThS Nguyễn Đức Thiện Bắc Ninh, năm 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á TRẦN THỊ PHƯƠNG LAN TÊN ĐỀ TÀI: XÂY DỰNG QUẢN LÝ WEBSITE RIVIEW PHIM BẰNG CÔNG NGHỆ REACT + NODE JS Giáo viên hướng dẫn: ThS Nguyễn Đức Thiện Bắc Ninh, năm 2022 LỜI CẢM ƠN Trong suốt trình học tập trường Đại học công nghệ Đông Á, em nhận nhiều quan tâm giúp đỡ từ thầy cô giáo trường Em xin cảm ơn tất thầy trường tận tình giúp đỡ em lúc học tập Em xin cảm ơn ban lãnh đạo trường Đại học công nghệ Đông Á giúp đỡ chúng em suốt năm học qua Em xin gửi lời cảm ơn đặc biệt đến thầy cô thuộc khoa Công nghệ thông tin Các thầy cô trực tiếp giúp đỡ chúng em tiếp thu nhiều kiến thức bổ ích q trình học tập trường Các thầy khoa người đặt móng cho kiến thức chúng em, giúp chúng em đem kiến thức áp dụng sống Đặc biệt, em xin bày tỏ lòng biết ơn sâu sắc đến thầy ThS.Nguyễn Đức Thiện, thầy giúp em nhiều học tập Thầy giúp em học nhiều kiến thức mới, giúp em tìm hướng đắn cho tương lai Đối với đồ án tốt nghiệp, thầy tận tình hướng dẫn, giúp đỡ em nhiều để hoàn thiện đề tài “XÂY DỰNG QUẢN LÝ WEBSITE RIVIEW PHIM BẰNG CÔNG NGHỆ REACT + NODE JS” Một lần nữa, em xin cảm ơn thầy nhiều Do điều kiện thời gian có hạn kinh nghiệm làm báo cáo chưa có nhiều nên em khơng thể tránh khỏi thiếu sót lúc trình bày làm báo cáo, kính mong nhận ý kiến đóng góp từ q thầy Em xin chân thành cảm ơn! LỜI CAM ĐOAN Em xin cam đoan đề tài: “XÂY DỰNG QUẢN LÝ WEBSITE RIVIEW PHIM BẰNG CƠNG NGHỆ REACT + NODE JS” cơng trình nghiên cứu độc lập hướng dẫn giáo viên hướng dẫn: ThS Nguyễn Đức Thiện Ngoài khơng có chép người khác Đề tài, nội dung báo cáo sản phẩm mà em nỗ lực nghiên cứu trình học tập trường Các số liệu, kết trình bày báo cáo hoàn toàn trung thực, em xin chịu hồn tồn trách nhiệm, kỷ luật mơn nhà trường đề có vấn đề xảy MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC DANH MỤC KÍ HIỆU HOẶC CHỮ VIẾT TẮT DANH MỤC HÌNH ẢNH MỞ ĐẦU Lý chọn đề tài Đối tượng nghiên cứu 10 Phạm vi nghiên cứu 10 Mục tiêu nghiên cứu 10 Phương pháp thực 10 Cấu trúc đề tài 10 CHƯƠNG I: Cơ sở lý thuyết 11 1.1 Giới thiệu chung phim, rạp chiếu phim .11 1.1.1 Một số khái niệm .11 1.1.2 Thực trạng xem phim chiếu rạp Việt Nam 12 1.2 Tổng quan tảng Web .12 1.2.1 Internet 12 1.2.2 Website .13 1.3 Hệ thống thông tin 14 1.3.1 Khái niệm hệ thống: 14 1.3.2 Dữ liệu thông tin 14 1.3.3 Khái niệm hệ thống thông tin .14 1.3.4 Những tiêu chuẩn HTTT 14 1.4 Tổng quan ngơn ngữ lập trình công nghệ sử dụng .15 1.4.1 Mơ hình Web Services .15 1.4.2 Web API 17 1.4.3 ReactJS 18 1.4.4 NodeJS 19 1.4.5 MongoDB .20 1.5 Kết luận chương .21 CHƯƠNG II: XÂY DỰNG HỆ THỐNG 23 2.1 Giới thiệu toán 23 2.1.2 Mơ tả tốn 23 2.1.2 Mục tiêu toán .24 2.2 Khảo sát hệ thống web riview phim 24 2.2.1 Khảo sát thị trường phim chiếu rạp Việt Nam 24 2.2.2 Khảo sát hệ thống web riview phim 26 2.3 Phân tích hệ thống 27 2.3.1 Các đối tượng tham gia Website 27 2.3.2 Sơ đồ Website 27 2.3.3 Sơ đồ User Case 29 2.3.4 Các chức hệ thống .32 2.3.5 Biểu đồ hoạt động 32 2.3.6 Đặc tả chức .51 2.4 Thiết kế sở liệu .75 2.4.1 Các liệu cần quản lý 75 2.4.1 Bảng liệu: .76 2.5 Lập trình Front-end 78 2.5.1 Công cụ sử dụng 78 2.5.2 Luồng xử lý, cấu trúc file 78 2.5.3 Xây dựng project .79 2.6 Lập trình Back-end 80 2.6.1 Công cụ sử dụng 80 2.6.2 Luồng xử lý, cấu trúc file 80 2.6.3 Xây dựng project .81 2.7 Kết luận chương .81 CHƯƠNG III: KẾT QUẢ ĐẠT ĐƯỢC .82 3.1 Giới thiệu kết đạt 82 3.1.1 Trang Người dùng .82 3.1.2 Trang Quản trị viên 84 3.2 Kết luận chương 86 PHỤ LỤC 87 KẾT LUẬN 101 TÀI LIỆU THAM KHẢO 102 DANH MỤC KÍ HIỆU HOẶC CHỮ VIẾT TẮT STT Từ viết tắt Giải nghĩa UX User Experience UI User Interface UML Unified Modeling Language WWW World Wide Web HTML HyperText Markup Languages CSS Cascading Style Sheets EU End-User FE Front-end BE Back-end 10 DB Database 11 HTTT Hệ thống thông tin 12 URL Uniform Resource Locators 13 URI Uniform Resource Identifier 14 XML eXtensible Markup Language 15 HTTP HyperText Transfer Protocol 16 API Application Programming Interface 17 CSDL Cơ sở liệu 18 UC User-Case 19 RDBMS Relational Database Management System Hệ quản trị sở liệu quan hệ DANH MỤC HÌNH ẢNH Hình 0.1: Sơ đồ tương tác thành phần 13 Hình 0.2: Tiến trình biến đổi liệu thành thông tin 14 Hình 0.3: Quy trình xử lý thông tin 14 Hình 0.4: Mơ hình hoạt động thành phần 16 Hình 0.5: Mơ hình hoạt động thành phần 17 Hình 0.1: Biểu đồ khảo sát nguồn thơng tin 25 Hình 0.2: Biểu đồ khảo sát xu hướng lựa chọn rạp chiếu phim 26 Hình 0.3: Sơ đồ Website 27 Hình 0.4: Sơ đồ trang người dùng 28 Hình 0.5: Sơ đồ trang quản trị 29 Hình 0.6: Sơ đồ User-Case người dùng 30 Hình 0.7: Sơ đồ User-Case quản trị viên 31 Hình 0.8: Biểu đồ hoạt động chức tìm kiếm 33 Hình 0.9: Biểu đồ hoạt động chức xem danh sách phim 34 Hình 0.10: Biểu đồ hoạt động chức xem thông tin liên hệ 34 Hình 0.11: Biểu đồ hoạt động chức xem thông tin phim 35 Hình 0.12: Biểu đồ hoạt động chức chọn rạp 36 Hình 0.13: Biểu đồ hoạt động chức đăng nhập 36 Hình 0.14: Biểu đồ hoạt động chức thêm phim 37 Hình 0.15: Biểu đồ hoạt động chức sửa phim 38 Hình 0.16: Biểu đồ hoạt động chức xóa phim 39 Hình 0.17: Biểu đồ hoạt động chức thêm trạng thái phim hot 40 Hình 0.18: Biểu đồ hoạt động chức xóa trạng thái phim hot 41 Hình 0.19: Biểu đồ hoạt động chức thêm trạng thái phim 42 Hình 0.20: Biểu đồ hoạt động chức xóa trạng thái phim 43 Hình 0.21: Biểu đồ hoạt động chức xử lý trạng thái phim chiếu phim chiếu 44 Hình 0.22: Biểu đồ hoạt động chức xóa phim chiếu 45 Hình 0.23: Biểu đồ hoạt động chức thêm rạp 46 Hình 0.24: Biểu đồ hoạt động chức sửa rạp 47 Hình 0.25: Biểu đồ hoạt động chức xóa rạp 48 Hình 0.26: Biểu đồ hoạt động chức thêm diễn viên 49 Hình 0.27: Biểu đồ hoạt động chức sửa diễn viên 50 Hình 0.28: Biểu đồ hoạt động chức xóa diễn viên 51 MỞ ĐẦU Lý chọn đề tài Thực trạng Hiện nay, với bùng nổ hệ thống mạng tồn cầu Internet lợi ích vơ to lớn mang lại, thực thu hút chinh phục người Thực tế cho thấy, diễn đàn mạng xã hội có khơng viết nói dịch vụ số rạp chiếu phim với nội dung giá dịch vụ q đắt, chi phí phát sinh q nhiều, khơng tư vấn ưu đãi rạp… lan truyền với tốc độ chóng mặt, gây nhiều tranh cãi Hay khó khăn việc lại khơng nắm vị trí rạp chiếu phim Và thân người xem không nắm rõ thông tin phim nên dẫn đến tình trạng khơng hài lịng xem phim, khơng biết phim muốn xem chiếu rạp nào… Vậy lên cần xây dựng website tổng hợp tất yếu tố cần thiết, đáp ứng cầu cho khách hàng web cập nhật liên tục phim chiếu rạp bao gồm tất rạp nước, khách hàng tư vấn ưu đãi rạp chiếu, thông tin phim hiển thị cho khách hàng, vị trí rạp chiếu nước Do đó, em lựa chọn đề tài: “XÂY DỰNG QUẢN LÝ WEBSITE RIVIEW PHIM BẰNG CÔNG NGHỆ REACT + NODE JS” để giải vấn đề Lựa chọn công nghệ Sự phát triển công nghệ nằm mức thay đổi ngày Chính phát triển khơng ngừng địi hỏi phải có hình thành, tiên tiến thay thể cũ Từ 2020, JavaScript Framework phát triển mạnh mẽ liên quan đến khía cạnh UX (User Experience), UI (User Interface), thử nghiệm quản lý sản phẩm Về mặt kỹ thuật, JavaScript Framework Framework ứng dụng, tạo ngơn ngữ lập trình JavaScript dựa tích hợp thư viện (cả trực quan chức năng) Trong số React NodeJS đánh giá cao với tiện ích đem lại nhà phát triển yêu thích Từ nghiên cứu trên, việc xây dựng hệ thống thông tin giới thiệu phim rạp làm kênh cung cấp thơng tin hữu ích với người sử dụng cần thiết Do đó, em chọn đề tài “XÂY DỰNG QUẢN LÝ WEBSITE RIVIEW PHIM BẰNG CÔNG NGHỆ REACT + NODE JS” làm đề tài khóa luận Hệ thống xây dựng có sử dụng cơng nghệ React, ngôn ngữ NodeJS, kết hợp tạo sở liệu với MongoDB áp dụng mơ hình Web Services, Web API để xây dựng Website Đối tượng nghiên cứu Hệ thống thông tin giới thiệu phim rạp chiếu phim, Quy trình, phương pháp, phát triển Website công nghệ sử dụng để xây dựng Website Phạm vi nghiên cứu Xây dựng hệ thống thông tin giới thiệu phim rạp chiếu phim tảng web Nghiên cứu công nghệ react, node js hệ quản trị sở liệu MongoDB Nghiên cứu web service cách tích hợp vào hệ thống Mục tiêu nghiên cứu Tìm hiểu rạp chiếu phim công nghệ liên quan đến lập trình web Xây dựng website với chức phù hợp với đề tài Sản phẩm đáp ứng nhu cầu sử dụng với giao diện thân thiện hỗ trợ đa tảng Phương pháp thực Nghiên cứu, tìm hiểu hệ thống thơng tin có tổng hợp phân tích chức chúng Phân tích, thiết kế hệ thống theo hướng tiếp cận đối tượng UML Lập trình kiểm thử Cấu trúc đề tài Ngoài phần mở đầu phần kết luận, khóa luận tổ chức thành chương Cụ thể: Chương 1: Cơ sở lý thuyết Chương 2: Xây dựng hệ thống Chương 3: Hệ thống giới thiệu phim kết 10 }); return ( {showData} ); } } Component phần thông tin phim:

Đạo diễn: {this.state.Director}

Biên kịch: {this.state.Writer}

Nhà sản xuất: {this.state.Production}

Quốc gia: {this.state.National}

Ngày rạp: {dateTime && dateTime[0]}

Thời lượng: {this.state.RunningTime} phút

Độ tuổi: {this.state.Rated}

Thể loại:{' '} {this.state.Genres && this.state.Genres.map((genres, keyGenres) => ( 88 {`${String.fromCharCode(160)}${genres}`}, ))}

{this.state.Score && ( -IMDB: {this.state.Score[0].IMDB} RottenTomato: {this.state.Score[0].RottenTomato} )} Component phẩn review phim: const reviewImage = this.props.filmDetail?.ReviewImage; let reviewContent; if (this.props.filmDetail) { reviewContent = { html: marked(this.props.filmDetail?.ReviewContent), }; } return (

review :

); Sử dụng CSS để xây dựng giao diện: film-detail actor-title { display: flex; flex-direction: column; align-items: flex-end; padding: 150px; } film-detail actor-title h2 { color: #fff; padding: 5px 10px 30vw; border-bottom: 1px solid #4d4d4d; margin-bottom: 50px; width: 100%; text-align: right; } film-detail film-content { 90 display: flex; width: 100%; justify-content: space-between; padding: 150px; } film-detail film-content film-review { flex-basis: 50%; text-align: left; display: flex; flex-direction: column; justify-content: center; padding: 50px 100px; height: 100vh; overflow: auto; align-items: center; position: relative; border-radius: 10px; } film-detail film-content film-review overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(21, 22, 23, 0.55); z-index: 1; border-radius: 10px; } Reducer trang phim chi tiết: const DetailFilmReducer = (state = DEFAULT_STATE, action = {}) => { switch (action.type) { 91 case Constants.GET_FILM_DETAIL_REQUEST: return { state, isFetching: true, }; case Constants.GET_FILM_DETAIL_SUCCESS: return { state, isFetching: false, dataFetched: true, error: false, errorMessage: null, filmDetail: action.payload, }; case Constants.GET_FILM_DETAIL_FAILURE: return { state, isFetching: false, error: true, errorMessage: action.payload, }; default: return state; } }; Xử lý Saga: function* getFilmDetail(action) { try { const dataSend = { 92 path: `/film/${action.payload}`, method: types.GET, }; const result = yield getFilmDetailAPI(dataSend); yield put(actions.getFilmDetailSuccess(result)); } catch (error) { yield put(actions.getFilmDetailFailure(error.message)); } } takeEvery(types.GET_FILM_DETAIL_REQUEST, getFilmDetail), Gọi API file Fetch API: export default function getFilmDetailAPI(data) { const objFetch = { method: data.method }; return new Promise((resolve, reject) => { const url = Constants.DOMAIN + data.path fetch(url, objFetch).then((res) => resolve(res.json())) catch((err) => reject(err)) }) } Một số đoạn code xây dựng Back-end chương Một số API đc tạo file Route: API phim: app.route('/films').get(film_controller.get_film); app route('/film') post(film_controller.add_film) delete(film_controller.delete_film); 93 app.route('/film/live').delete(film_controller.delete_in_theate r_film); app.route('/film/search').get(film_controller.search_film); app route('/film/:film_id') get(film_controller.get_film_by_id) put(film_controller.update_film); app.route('/film/add_hot').post(film_controller.update_hot_film ); app.route('/film/add_new').post(film_controller.update_new_film ); app route('/film/film_image/:film_id') post(film_controller.upload_film_image) put(film_controller.upload_film_image); Xử lý Controller: Thêm phim: exports.add_film = async (req, res) => { req.files.map(async (file) => { if (file.fieldname === 'filmData') { const newFilm = JSON.parse(fs.readFileSync(file.path)); fs.unlinkSync(file.path); console.log(newFilm); const film = await Film.create(newFilm); res.redirect(307, `/film/film_image/${film._id}`); } }); }; 94 Cập nhật phim: exports.update_film = (req, res) => { let updateFilm; const id = req.params.film_id; req.files.map((file) => { if (file.fieldname === 'filmData') { updateFilm = JSON.parse(fs.readFileSync(file.path)); fs.unlinkSync(file.path); } }); Film.findByIdAndUpdate(id, updateFilm, { new: true, useFindAndM odify: false }) then(() => { res.redirect(307, `/film/film_image/${id}`); }) catch((err) => { console.log(err); }); }; Xóa phim: exports.delete_film = (req, res) => { const listId = req.body; const deletePromise = listId.map( (filmId) => new Promise((resolve, reject) => { Film.findByIdAndUpdate(filmId, { isDeleted: true }, { new : true }) then((result) => { 95 resolve(result); }) catch((err) => { reject(err); }); }), ); Promise.all(deletePromise) then((result) => { res.send({ result }); }) catch((err) => { res.send({ err }); }); }; Mô bảng với file Model: Bảng phim var mongoose = require('mongoose'); var Schema = mongoose.Schema; var FilmSchema = new Schema({ FilmName: { type: String, required: [true, 'nhap ten phim'], }, Director: { type: String, }, 96 Writer: { type: String, }, Production: { type: String, }, Actors: [ { type: Schema.Types.ObjectId, ref: 'actor', require: [true, 'Khong co dien vien'], }, ], Cinemas: [ { type: Schema.Types.ObjectId, ref: 'cinemaCluster', require: [true, 'Khong co rap'], }, ], Genres: [ { type: String, require: [true, 'Khong co the loai'], }, ], RunningTime: { type: Number, required: [true, 'Nhap thoi gian phim'], 97 }, ReleaseDate: { type: Date, required: [true, 'nhap mat nao'], }, ReviewContent: { type: String, required: [true, 'Khong co review a ????'], }, Rated: { type: String, }, CoverImage: { type: Schema.Types.ObjectId, ref: 'image', default: null, }, PosterImage: { type: Schema.Types.ObjectId, ref: 'image', require: [true, 'anh dau ???'], }, Images: [ { type: Schema.Types.ObjectId, ref: 'image', default: null, }, ], 98 ReviewImage: { type: Schema.Types.ObjectId, ref: 'image', }, Score: [ { IMDB: { type: String, }, RottenTomato: { type: String, }, }, ], TrailerUrl: { type: String, require, }, National: { type: String, }, isHotFilm: { type: Boolean, default: false, }, isNewFilm: { type: Boolean, default: false, }, 99 isShowing: { type: Boolean, default: true, }, isDeleted: { type: Boolean, default: false, }, }); module.exports = mongoose.model('film', FilmSchema); 100 KẾT LUẬN Kết luận Công nghệ lĩnh vực thay đổi phát triển, công nghệ cập nhật với tính vượt trội Đối với cơng nghệ thơng tin nói riêng, địi hỏi lập trình viên phải ln trau dồi kiến thức mới, tìm phương pháp tối ưu để phù hợn với xu hướng xã hội Chính việc áp dụng mơ hình Web Services Web API với React tảng NodeJS, kết hợp với công nghệ NoSQL – MongoDB xu đánh giá cao nhà phát triển tính mà chúng đem lại Đi đôi với phát triển cơng nghệ phát triển đời sống người Nhu cầu giải trí tăng, rạp chiếu phim trở thành lựa chọn khơng thể thiếu Vì vậy, để người xem có lựa chọn tốt phù hợp với thân, hệ thống giới thiệu phim rạp chiếu phim trở nên cần thiết Để tiếp cận dễ dàng với người dùng bùng nổ Internet tảng web lựa chọn mà em hướng tới Những điểm đạt được: Giao diện bắt mắt, thân thiện với người dùng, chức thể rõ ràng, dễ nắm bắt Xây dựng Front-end React nên việc phân chia Component giúp giao diện trở nên dễ quản lý lập trình viên Đã xây dựng chức Website giới thiệu phim với thông tin cần thiết giúp người dùng có lựa chọn hợp với nhu cầu thân Đối với quản trị viên, chức quản lý phim, rạp danh mục liên quan thuận tiện, dễ sử dụng Những điểm hạn chế: Tuy cố gắng nhận giúp đỡ tận tình giảng viên hướng dẫn, song thời gian, trình độ kinh phí có hạn nên Website mà em xây dựng tồn số hạn chế sau: Chưa có chức để người dùng tương tác, đánh giá bình luận phim Các chức admin tồn hạn chế, chưa thực linh động việc xử lý 101 TÀI LIỆU THAM KHẢO [1] , w3schools.com [2] , nodejs.org [3] , reactjs.org [4] , mongodb.com [5] , cucdienanh.vn [6] , Trần Thị Song Minh (2019), Hệ thống thông tin quản lý – Nhà xuất Đại học Kinh tế quốc dân [7] , Đoàn Văn Ban, Nguyễn Thị Tĩnh (2012), Phân tích thiết kế hướng đối tượng UML, Nhà xuất Đại học Sư phạm [8] , Anthony Accomazzo, Ari Lerner, Nate Murray, Clay Allsopp, David Gutman Tyler McGinnis (2017), Fullstack React The Complete Guide to ReactJS and Friends, Được xuất San Francisco - California Fullstack.io [9] , Tutorials Point (2018), E-book: MongoDB NoSQL Document Database 102