đồ á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 b Sơ đồ liệu III Thiết kế hệ thống a Tổng quan kiến trúc Client/Server 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 qn II Phân tích hệ thống a Các chức website i Chức phía Fontend STT Chức Mơ tả Đăng nhập Đăng ký Người dùng đăng kí tài khoản cá nhân email, đăng nhập băng tên User mật Tạo viết Người dùng sau đăng nhập tạo viết Người dùng bình luận viết thân người dùng khác Bình luận Thích bình luận Nhấn biểu tượng trái tim để tương tác thích bình luận Theo dõi người Theo dõi người dùng khác.Số dùng khác người theo dõi thể qua hồ sơ Dịch ngôn ngữ Chuyển viết sang ngôn ngữ tiếng việt hoặt tiếng anh Thay đổi thơng Người dùng thay đổi anh đại tin diện, tên tài khoản, mật  Đă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 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 Chức Quản lý người Thêm, xóa tài khoản người dùng dùng Quản lý bình Thay đổi, xóa bình luận viết luận Quản lý viết Thay đổi, xóa nội dung viết Mô tả  Đăng nhập  Bài viết  Chỉnh sửa thơng tin  Đổi mật  Bình luận  Bài viết  Đổi tên tài khoản  Người dùng Backend  BÌnh luận 6Quản trị danh mục Quản trị nghiệp vụ  Đổi ảnh đại diện Quản trị hệ thống Đánh giá người Người dùng xếp hạng dựa thông dù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 Sơ đồ liệu 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)… Nhược điểm mơ hình client server Một vấn đề nảy sinh mơ hình tính an tồn bảo mật thơng tin mạng Do phải trao đổi liệu máy khu vực khác dễ dàng xảy tượng thông tin truyền mạng bị lộ b Ngơn ngữ lập trình iii HTML  HTML(HyperText Markup Language – ngôn ngữ siêu văn bản) loại ngôn ngữ sử dụng lập trình web Khi truy cập trang web cụ thể click vào đường link, bạn dẫn tới nhiều trang nhau, trang gọi tài liệu HTML (tập tin HTML) iv CSS  CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngôn ngữ đánh dấu (HTML) Nói ngắn gọn ngơn ngữ tạo phong cách cho trang web Ta hiểu đơn giản rằng, HTML đóng vai trị định dạng phần tử website việc tạo đoạn văn bản, tiêu đề, bảng,…thì CSS giúp thêm style vào phần tử HTML đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… v Javascript  Javascript ngơn ngữ lập trình kịch dựa vào đối tượng phát triển có sẵn tự định nghĩa Javascript sử dụng rộng rãi ứng dụng Website Javascript hỗ trợ tất 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 c Xử lý chứ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 Yêu cầu thông tin người dùng qua lệnh post (“/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.passwor 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 Post.findByIdAndUpdate(req.params.id, {  $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 Post.findByIdAndUpdate(req.params.id, { $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 User.findByIdAndUpdate(req.params.id, {  $push: { followers: req.body.userId }  }, { new: true }).select('-password')   const follower = await User.findByIdAndUpdate(req.body.userId, {  $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); // get allpost and user to update rank const [statePost] = useContext(AllPostContext) const { allPost } = statePost const { user } = useContext(Context) const { data: allUser } = useFetch('/users/alluser', '', 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 Set(b?.likes).size) return -1 } 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 'i18next-browserlanguagedetector'; 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 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à