đồ án xây DỰNG hệ THỐNG WEBSITE COFFEE SHOP

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA VIỄN THÔNG - BÁO CÁO TIỂU LUẬN Họ tên: LÊ CƠNG TIẾN B18DCVT359 NGUYỄN NGỌC TỒN B17DCVT363 CAO QUỐC TUẤN B17DCVT386 NGUYỄN MINH TUẤN B17DCVT382 Tên đồ án: XÂY DỰNG HỆ THỐNG WEBSITE COFFEE SHOP MÔN HỌC: INTERNET VÀ GIAO THỨC GIẢNG VIÊN NGUYỄN ĐÌNH LONG HÀ NỘI 2021 MỤC LỤC Mục lục I Khảo sát hệ thống a Tổng quan website coffee shop b Mục tiêu xây dựng website coffee shop II Phân tích hệ thống a Các chức website .4 b Sơ đồ liệu .8 III Thiết kế hệ thống a Tổng quan kiến trúc Client/Server .8 b Ngơn ngữ lập trình c Xử lý chức 10 Kết luận Tài liệu tham khảo LỜI MỞ ĐẦU Ngày này, với phát triển công nghệ, đặc biệt thương mại điện tử giúp cá nhân, tổ chức tiếp cận người tiêu dùng cách dễ dàng.Họ đề có cho website để giới thiệu doanh nghiệp Đứng trước nhu cầu thiết kế website đam mê lập trình ứng dụng web,chúng em chọn đề tài “ Xây dựng hệ thống website coffee shop” đề làm tiểu luận môn học Internet giao thức.Nội dung tiểu luận gồm phần:    Phần 1: Khảo sát hệ thống Phần 2: Phân tích hệ thống Phần 3: Thiết kế hệ thống Thực tiểu luận hội để chúng em áp dụng, tổng hợp kiến thức lớp thúc đẩy khả tìm tịi kiến thức, đúc kết kinh nghiệm phục vụ cho công việc sau này.Do hạn chế lực, thời gain, chúng em hoàn thành khả có thể, hệ thống cịn nhiều thiết xót, mong thầy thông cảm.Qua đây, em xin gửi lời cảm ơn tới thầy Nguyễn Đình Long nhiệt tình hướng dẫn, giảng dạy, bảo chúng me trình làm tiểu luận Hà Nội, ngày 29 tháng 12 năm 2021 I Khảo sát hệ thống a Tổng quan website coffee shop  Stay coffee quán cà phê specialty coffee nằm số 17, ngõ 198 Thái Thịnh,Láng Hạ, Đống Đa, Hà Nội.Quán phục vụ cà phê pha máy pha thủ cơng, mang đến nhiều loại cà phê giới đến khách hàng  Website quán trang bao gồm viết cung kiến thức cà phê, giúp người bán hàng hiểu mong muốn khách hàng, khách hàng giao lưu, chia sẻ kiến thức với b Mục tiêu xây dựng website coffee shop  Website Stay coffee phải nơi khách hàng tìm thấy kiến thức cà phê, nơi chia sẻ đam mê cà phê thân  Website giúp khách hiểu phong cách, tiêu chí làm việc đội ngũ nhân viên, loại đồ uống quán từ cà phê đến không cà phê, bầu khơng khí vui vẻ, hịa đồng đến quán II Phân tích hệ thống a Các chức website i Chức phía Fontend STT Chức Đăng nh Đăng ký Tạo 4  Đăng nhập, đăng kí: Đầu vào: Thông tin tên tài khoản, email, mật Xử lý: Lưu vào database Đầu : Tạo tài khoản cá nhân cho người dùng  Tạo viết Đầu vào: Nội dung viết, hình ảnh Xử lý: Lưu vào database Đầu : Tạo viết  Bình luận Đầu vào: Bình luận viết người dùng Xử lý: Lưu vào database Đầu : Hiển thị bình luận viết  Thích bình luận Đầu vào: Nhấn chuột biểu tượng trái tim bên cạnh bình luận Bình luậ Thích b Theo dõ dùng kh Dịch ng Thay đổ tin Xử lý: Lưu vào database Đầu ra: Trái tim đổi màu đỏ  Theo dõi người dùng khác Đầu vào: Thông tin tên người dùng, số người theo dõi, số viết Xử lý: Lưu vào database Đầu ra: Thêm người theo dõi vào số người theo dõi  Thay đổi thông tin Đầu vào: Thông tin tên người dùng, mật khẩu,ảnh đại diện Xử lý :Lưu vào database Đầu ra: Thay đổi tên người dùng, mật khẩu,ảnh đại diện ii Chức phía người quản trị website STT   Bài viết Đăng nhập  Bình luận  Đổi mật  N gười dùng Backend  Đổi tên tài khoản  Đổi ảnh đại diện Quản trị hệ thống Quản trị danh mục  BÌnh luận  Chỉnh sửa thông tin  Bài viết Quản trị nghiệp vụ Đánh giá người dùng  Người dùng xếp hạng dựa thông số cá nhân Quản lý người dùng Đầu vào: Thông tin tên tài khoản, email cá nhân, mật Xử lý: Khi nhận thông tin người dùng, cập nhật database, tạo tài khoản cho người dùng theo thơng tin đăng kí Đầu ra: Đăng nhập tài khoản cá nhân người dùng, thông tin người dùng thay đổi  Quản lý bình luận Đầu vào: Quản lý thơng tin bình luận nội dung, lượt thích.Có chức thêm, xóa bình luận Xử lý:Thơng tin bình luận lưu vào database, chuyển vào viết bình luận Đầu ra:Nội dung bình luận  Quản lý viết Đầu vào: Quản lý thông tin viết nội dung, người viết.Có chức thêm, xóa viết Xử lý: Thông tin viết lưu vào database, chuyển vào viết viết Đầu ra:Nội dung viết, tên người viết  Đánh giá người dùng Đầu vào:Số lượng người theo dõi,bài viết cá nhân người dùng Xử lý:Tổng hợp, so sánh số người theo dõi, viết tất người dùng Đầu ra:Đánh giá người dùng theo số hạng b liệu Sơ đồ Website Khách hàng Tài khoản, viết,bình luận Coffee Khách hàng Xếp hạng, lượt thích, kết tìm kiếm Shop Quản trị Quản trị viên Thơng tin người dùng, bìa viết, bình luận III viên Thiết kế hệ thống a Tổng quan kiến trúc Client/Server – Mơ hình client server hay cịn gọi mơ hình khách – chủ – Trong mơ hình client server máy khách máy tính, thiết bị điện tử máy in, máy fax,….các máy khách client gửi yêu cầu đến máy chủ server máy chủ server tiếp nhận yêu cầu, xử lý yêu cầu trả kết Ưu điểm mơ hình client server Ưu điểm mơ hình client server với mơ hình client server thứ dường nằm bàn người sử dụng, truy cập liệu từ xa (bao gồm cơng việc gửi nhận file, tìm kiếm thơng tin,…) với nhiều dịch vụ đa dạng mà mơ hình cũ khơng thể làm Mơ hình client/server cung cấp tảng lý tưởng cho phép tích hợp kỹ thuật đại mơ hình thiết kế hướng đối tượng, hệ chuyên gia, hệ thông tin địa lý (GIS)… trình duyệt Firefox, Chrome, máy tính lẫn điện thoại  Nhiệm vụ Javascript xử lý đối tượng HTML trình duyệt Nó can thiệp với hành động thêm / xóa / sửa thuộc tính CSS thẻ HTML cách dễ dàng Hay nói cách khác, Javascript ngơn ngữ lập trình trình duyệt phía client Tuy nhiên, với xuất NodeJS giúp cho Javascript làm việc backend vi MongoDB  MongoDB hệ quản trị sở liệu mã nguồn mở, CSDL thuộc NoSql hàng triệu người sử dụng  MongoDB database hướng tài liệu (document), liệu lưu trữ document kiểu JSON thay dạng bảng CSDL quan hệ nên truy vấn nhanh  Với CSDL quan hệ có khái niệm bảng, sở liệu quan hệ (như MySQL hay SQL Server ) sử dụng bảng để lưu liệu với MongoDB dùng khái niệm collection thay bảng  Các collection MongoDB cấu trúc linh hoạt, cho phép liệu lưu trữ không cần tuân theo cấu trúc định  Thông tin liên quan lưu trữ để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB Xử lý chức c  Chức đăng nhập   //LOGIN router.post("/login", async (req, res) => {  try {  const user = await User.findOne({ username: req.body.username });  !user && res.status(400).json("Wrong credentials!");   const validated = await bcrypt.compare(req.body.password, user.password);  !validated && res.status(400).json("Wrong credentials!");   const { password, others } = user._doc; 10  res.status(200).json(others);  } catch (err) {  res.status(500).json(err);  } o post Yêu cầu thông tin người dùng qua lệnh (“/login,async(req,res) o Nếu nhập không yêu cầu, báo lỗi status (500), hiển o o Nếu nhập thành công, thông báo status (200), hiển thị tên người dùng, không hiển thị mật  Chức đăng kí tài khoản  //REGISTER  router.post("/register", async (req, res) => {  try {  const salt = await bcrypt.genSalt(10);  const hashedPass = await bcrypt.hash(req.body.password, salt);  const newUser = new User({  username: req.body.username,  email: req.body.email,  password: hashedPass,  });    const user = await newUser.save(); // await emailService.sendSimpleEmail(user.email)     res.status(200).json(user); } catch (err) { res.status(500).json(err); }  o Req.body.username,Req.body.email,Req.body.pa sswor d yều cầu nhập thông tin tương ứng o Lưu vào sở liệu o Nếu thành công trả status(200).Ngược lại trả status(500)  Chức tạo viết 11   //CREATE POST router.post("/", async (req, res) => {  const newPost = new Post(req.body);  try {  const savedPost = await newPost  populate('postedBy', 'username profilePic')  save();  res.status(200).json(savedPost);  } catch (err) {  res.status(500).json(err);  } o Khai báo newPost = new Post(req.body) gồm nội dung postedBy, username profilepic o Lưu vào sở liệu o Nếu thành công trả status(200).Ngược lại trả status(500)    Chức bình luận //CREATE COMMENTS router.put('/comment/:id', async (req, res) => {  try {  const comments = {  text: req.body.text,  postedBy: req.body.userId  }  const newComment = await   }, {  $push: { comments } new: true  }).populate('comments.postedBy', 'username profilePic')  populate('postedBy', 'username profilePic')  res.status(200).json(newComment)  } catch (err) {  res.status(500).json(err)  }  Chức thích bìa viết, bình luận   //LIKE router.put('/like/:id', async (req, res) => { 12  try {  const likePost = await  $push: { likes: req.body.userId }  }, { new: true })  populate('postedBy', 'username profilePic')  res.status(200).json(likePost)  } catch (error) {  res.status(500).json(error)  }  }) o Khai báo likePost= await, yều cầu req.body,userId o Nội dung bao gồm postedBy, username profilepic o Lưu vào sở liệu o Nếu thành công trả status(200).Ngược lại trả status(500)    Chức theo dõi /FOLLOW router.put('/follow/:id', async (req, res) => {  try {  const followerEd = await  $push: { followers: req.body.userId }  }, { new: true }).select('-password')   const follower = await  $push: { following: req.params.id }  }, { new: true }).select('-password')  res.status(200).json({ followerEd, follower })  } catch (err) {  res.status(500).json(err)  } o Khai báo followEd= await, follower=await, yêu cầu userId o Lưu vào sở liệu 13 o Nếu thành công trả status(200).Ngược lại trả status(500)  Chức tìm kiếm người dùng, viết         //SEARCH router.post('/search', async (req, res) => { try { const matchResult = {  $regex: req.body.query, $options: 'i' } const users = await User.find({  username: matchResult }) const posts = await Post.find({  $or: [{ desc: matchResult }, { title: matchResult }]  })  res.status(200).json({ users, posts })  } catch (err) { console.log(err) }  })   module.exports = router o Khai báo matchResult o Tìm kiếm viết, người dùng User.find o Nếu thành công trả status(200)  Chức đánh giá người dùng  const Ranking = () => {   const [tabIndex, setTabIndex] = useState(+localStorage.getItem('tab-index') || 0);       user', // get allpost and user to update rank const [statePost] = useContext(AllPostContext) const { allPost } = statePost const { user } = useContext(Context) const { data: allUser } = useFetch('/users/all'', user)   // sort first post/user  const compareFollowers = (a, b) => {  if (a?.followers?.length > b?.followers?.length) return -1 14  }  const comparePostLikes = (a, b) => {  if (new Set(a?.likes).size > new  }  const comparePostComments = (a, b) => {  if (a?.comments?.length > b?.comments?.length) return -1  }  const sortedUser = allUser?.sort(compareFollowers).slice(0, 4)  const sortedPostLike = allPost?.sort(comparePostLikes).slice(0, 4)  const sortedPostComment = allPost?.sort(comparePostComments).slice(0, 4)   const handleSelect = (index) => {  setTabIndex(index)  localStorage.setItem('tab-index', (index))  }  o Dùng hàm compare để sánh số người bình luận, theo dõi, thích để đánh giá o Sử dụng câu lệnh If  Chức dịch ngôn ngữ   import i18n from 'i18next'; import { initReactI18next } from 'react-i18next';  import Backend from 'i18next-http-backend';   import LanguageDetector from 'i18nextbrowser-languagedetector'; Sử dụng thư viện i18n 15  Giao diện số trang website 16 17 KẾT LUẬN Trên toàn nội dung đề tài “Xây dựng webiste coffee shop”, xây dựng hệ thống ngôn ngữ HTMl, CSS,Javascript tảng api Do thời gian, khả hạn chế nên hệ thống nhiều thiếu xót.Cụ thể, website chưa bảo mật tốt, cịn số lỗi, chưa sát thực tế sử dụng.Việc triển khai website nhiều vấn đề so với thời gian thực tế.Nhóm chúng em mong nhận đánh giá, nhận xét thầy để hệ thống hoàn thiện hơn.Một lần nữa, em xin chân thành cảm ơn! Tài liệu tham khảo 18 ... Khảo sát hệ thống a Tổng quan website coffee shop b Mục tiêu xây dựng website coffee shop II Phân tích hệ thống a Các chức website .4 b Sơ đồ liệu ... “ Xây dựng hệ thống website coffee shop? ?? đề làm tiểu luận môn học Internet giao thức.Nội dung tiểu luận gồm phần:    Phần 1: Khảo sát hệ thống Phần 2: Phân tích hệ thống Phần 3: Thiết kế hệ. .. Nội, ngày 29 tháng 12 năm 2021 I Khảo sát hệ thống a Tổng quan website coffee shop  Stay coffee quán cà phê specialty coffee nằm số 17, ngõ 198 Thái Thịnh,Láng Hạ, Đống Đa, Hà Nội.Quán phục vụ cà