ĐỒ án THIẾT kế i đề tài xây DỰNG WEBSITE bán SÁCH

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI VIỆN ĐIỆN TỬ - VIỄN THƠNG ĐỊ ÁN THIẾT KẾ I ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN SÁCH Giảng viên hướng dẫn: Phạm Thành Cơng Nhóm Sinh viên thực Lớp MSSV Nguyễn Đình Hùng Điện tử 11 20182555 Lê Hồng Anh Điện tử xx 2018xxx Trần Minh Chiến Điện tử 09 20182387 Hà Đức Trường Điện tử xx 2016xxx 2021 _ộ, 7- MỤC LỤC MỤC LỤC - LỜI NÓI ĐẦU .- DANH MỤC HÌNH VẼ - DANH MỤC BẢNG BIỂU - TÓM TẮT ĐỒ ÁN - CHƯƠNG LÝ THUYẾT - 1.1 HTML - 1.1.1 HTML gì? - 1.1.2 Cấu trúc HTML - 1.1.3 Các thẻ HTML - 1.2 CSS - 1.2.1 CSS gì? - 1.2.2 Cú pháp sử dụng CSS - 1.2.3 Bố cục thành phần .- 10 1.3 Bootstrap - 10 1.3.1 Bootstrap gì? - 10 1.3.2 Class Bootstrap .- 10 1.4 Javascript - 11 1.4.1 Javascript gì? .- 11 1.4.2 Làm Việc Với Javascript Trong Môi Trường Html: - 11 - 1.5 JQuery- 11 1.6 PHP - 11 1.6.1 PHP gì? - 11 1.6.2 Làm việc với PHP - 11 - 1.7 XAMPP - 12 1.8 Mơ hình mvc - 13 1.8.1 Mơ hình MVC gì? Các thành phần MVC - 13 1.8.2 Luồng mơ hình MVC nào? - 13 1.8.3 Ưu nhược điểm mơ hình mvc - 14 CHƯƠNG THIẾT KẾ HỆ THỐNG .- 14 2.1 Phân tích yêu cầu đề tài - 14 2.1.1 Yêu cầu - 14 2.1.2 Yêu cầu đặt - 15 2.2 Sơ đồ phân cấp chức - 16 2.3 Sơ đồ luồng liệu .- 18 2.3.1 Sơ đồ luồng liệu mức ngữ cảnh .- 18 2.3.2 Sơ đồ luồng liệu mức đỉnh - 19 2.3.3 Sơ đồ luồng liệu mức - 20 2.4 Chuẩn hóa - 24 2.5 Mô hình thực thể liên kết - 24 2.6 Cơ sở liệu - 25 2.6.1 Sơ đồ quan hệ sở liệu .- 25 2.6.2 Các bảng sở liệu - 26 2.7 Kết sản phẩm: .- 28 2.8 Định hướng phát triển - 32 KẾT LUẬN - 32 TÀI LIỆU THAM KHẢO - 32 - LỜI NÓI ĐẦU Ngày Internet trở thành dịch vụ phổ biến, thiết yếu có ảnh hưởng sâu rộng tới nhiều lĩnh vực sống người thói quen, sinh hoạt giải trí Cùng với phát triển nhanh chóng Internet, hình thức mua bán hàng hóa ngày đa dạng phát triển Các ứng dụng Web ngày trở nên phổ biến Trước nhu cầu đó, với u cầu mơn học, nhóm chúng em định chọn đề tài: Xây dựng Website bán hàng trực tuyến, cụ thể xây dựng trang web đồ trang trí sân vườn Với đề tài mơn học này, nhóm xin chân thành cảm ơn giúp đỡ hướng dẫn tận tình Đinh Thị Nhung anh Vương Xuân Hiếu Do nhiều hạn chế kiến thức kỹ nên q trình thực đề tài nên nhóm khơng tránh khỏi thiếu sót Rất mong anh đóng góp ý kiến để sản phẩm nhóm ngày hồn thiện Nhóm chúng em xin trân trọng cảm ơn! DANH MỤC HÌNH VẼ Hình 2.0.1 Sơ đồ phân cấp chức - 16 Hình 2.0.2 Sơ đồ luồng liệu mức ngữ cảnh - 18 Hình 2.0.3 Sơ đồ luồng liệu mức đỉnh - 19 Hình 2.0.4 Sơ đồ luồng liệu mức 1của chức đăng nhập .- 20 Hình 2.0.5 Sơ đồ luồng liệu mức 1của chức giao dịch - 20 Hình 2.0.6 Sơ đồ luồng liệu mức 1củachức quản lý thơng tin người dùng - 21 Hình 2.0.7 Sơ đồ luồng liệu mức 1củachức quản lý thơng tin sản phẩm - 22 Hình 2.0.8 Sơ đồ luồng liệu mức 1củachức quản lý giỏ hàng - 22 Hình 2.0.9 Sơ đồ luồng liệu mức chức tìm kiếm - 23 Hình 2.0.10 Sơ đồ luồng liệu mức chức phản hồi - 23 Hình 2.0.11 Mơ hình thực thể liên kết - 24 Hình 0.12 Sơ đồ quan hệ sở liệu - 25 - DANH MỤC BẢNG BIỂU Bảng 0.1 Chuẩn hóa Bảng 2.0.2 Bảng danh mục sản phẩm (Categories) Bảng 2.0.3 Bảng sản phẩm (Products) Bảng 2.0.4 Bảng người dùng (User) Bảng 0.5 Bảng giỏ hàng (Cart) - 24 26 26 27 27 TĨM TẮT ĐỊ ÁN Đồ án trình bày lý thuyết bước thực đề tài xây dựng website bán sách Đồ án chia thành chương: chương phần tóm tắt lý thuyết công cụ sử dụng số ngơn ngữ lập trình: HTML, CSS, PHP, ,IS phần mềm MongoseDB để tạo server chạy web Chương phần tóm tắt giai đoạn thực sản phẩm gồm phân tích yêu cầu đề tài, tạo sơ đồ chức năng, chuẩn hóa, tạo sở liệu, trình bày kết sản phẩm, đưa hướng phát triển CHƯƠNG LÝ THUYÉT Chương trình bày tóm tắt phần lý thuyết các ngơn ngữ lập trình sử dụng q trình hồn thành đồ án HTML, CSS, JS, PHP, mô hình MVC 1.1 HTML 1.1.1 HTML gì? HTML viết tắt từ HyperText Markup Language có nghĩa ngơn ngữ đánh dấu siêu văn bản.Là ngôn ngữ dùng để xây dựng trang web.Chứa thành phần định dạng để báo cho trình duyệt web biết cách để hiển thị trang web Một trang web thông thường gồm thành phần chính: • Dữ liệu trang web (văn bản, âm thanh, hình ảnh, ) • Các thẻ (tag) HTML dùng để định dạng mô tả, cách thức liệu hiển thị trình duyệt 1.1.2 Cấu trúc HTML Dưới cấu trúc câu lệnh HTML: My test page 1.1.3 Các thẻ HTML - Thẻ xuống dòng Br dùng để ngắt phần nội dung xuống dòng - Thẻ chia đoạn p dùng để phân chia đoạn văn thành hai đoạn văn riêng biệt Cú pháp:

Nội dung cần phân chia .

- Cặp thẻ định dạng kiểu chữ : , , , - Để định dạng danh sách khơng có trật tự ta sử dụng cặp thẻ

lồng bên cặp thẻ

- Để định dạng danh sách khơng có trật tự ta sử dụng cặp thẻ

lồng bên cặp thẻ

- Thẻ phân vùng div sử dụng để phân chia khu vực (vùng) , phân chia giúp trình duyệt hiểu rõ phân bố (bố cục ) trang web - Thẻ tiêu đề sử dụng cặp thẻ từ đến - Sử dụng cặp thẻ để đưa phần nội dung vào vị trí so với phần bao ngồi - Để tạo liên kết văn HTML ta sử dụng cặp thẻ với thuộc tính để định dạng cho liên kết - Để đưa hình ảnh vào văn HTML ta sử dụng thẻ với thuộc tính - Cặp thẻ : Khai báo bảng: • Cặp thẻ : Khai báo dịng bảng • Cặp thẻ : Khai báo cột dòng bảng - Để khai báo vùng làm việc Form ta sử dụng cặp thẻ Trong Form có thuộc tính : name, action, method (Phương thức truyền liệu Form có giá trị GET POST) - Khai báo phần tử textbox: sử dụng thẻ - Cú pháp: - Khai báo phần tử checkbox, radio, password: sử dụng thẻ - Khai báo phần tử file, submit, reset: sử dụng thẻ - Khai báo danh sách mà người dùng muốn lựa chọn ta sử dụng phần tử selectbox với cặp thẻ: 1.2 CSS 1.2.1 CSS gì? CSS từ viết tắt cụm từ Cascading Style Sheets, ngơn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG hay UML, 1.2.2 Cú pháp sử dụng CSS Quá trình viết file CSS riêng biệt (định dạng css) sau triệu gọi vào file HTML Để triệu gọi file CSS vào file HTML ta sử dụng cú pháp sau: Hình 2.5 Sơ đồ luồng liệu mức chức quản lí khách hàng (1) T.T khách hàng đăng kí (3) , (5), (6) T.T KH (2) , (4) T.T PH c Chức Hình 2.6 Sơ đồ luồng liệu mức chức quản lý thông tin sách Sơ đồ mức chức mơ tả Hình 3.5 Cụ thể: (1), (2), (5), (7), (8), (10), (11) T.T sách (3) , (4) T.T PH (6) T.T SL sách d Chức Hình 2.7 Sơ đồ luồng liệu mức chức quản lý xuất/nhập hóa đơn Sơ đồ mức chức mơ tả Hình 2.7 Cụ thể: (1) , (6) T.T PH (2) T.T phiếu nhập (3) , (4), (5) T.T HĐ (7), (8) T.T sách e Chức Hình 2.8 Sơ đồ luồng liệu mức chức quản lý tìm kiếm Sơ đồ mức chức mơ tả Hình 2.8 Cụ thể: (1) , (3), (6), (8), (10), (11), (13), (15), (17) T.T PH (2) , (18) T.T KH (4) , (16) T.T phiếu nhập hóa đơn (5) , (7), (14) T.T sách (9), (12) T.T yêu cầu e Báo cáo Hình 2.9 Sơ đồ luồng liệu mức chức báo cáo Sơ đồ mức chức mơ tả Hình 3.8 Cụ thể: (1) Báo cáo hệ thống (2), (3), (4), (6), (8), (9) T.T lập báo cáo (5) T.T phiếu nhập/ HĐ (7), (10) T.T sách 2.4 Chuẩn hóa Bảng 2.1 Chuẩn hóa Sá ch Khách hàng ID sách Tên sách Thể loại Hình minh họa Tác giả Số lượng Số lượng ID khách hàng Tên khách hàng Ngày sinh Số điện thoại Địa Giới tính Email Account Password Hóa đơn ID hóa đơn Ngày đặt hàng Ngày nhận hàng Phương thức tốn Tổng tiền 2.5 Mơ hình thực thể liên kết Hình 2.0.10 Mơ hình thực thể liên kết Ad ID admin Tên Ngày sinh Số điện thoại Email Account Password 2.6 Cơ sở liệu 2.6.1 Sơ đồ quan hệ sở liệu hóa đon id hóa đon INT o ngày đặt hàng DATETIME ngày nhận hàng DAĨETIME phirang thúc toái VARCHAR(50) ■ x o tong tiền INT I sách_id sách INT khách hàngjd khách hàng INT I L ‘èadminjd admin INT I khách hàng id khách hàng IMT Otên VARCHAR(5Ũ) adrnin id admin INI Otên VARCHAR(5Ũ) ngày sinh DATEĨ1ME Sũ điện thoại INT Oemail VARCHAR(50) Oaccount VARCHAR(50) Opassmord VARCHAR(50) ngày sinh DATETIME sơ điện thoại It-ÍT Oemail VARCHAR(50) I ,1 I I I Ousername VARCHAR(50) OPassword VARCHARÍ50) =F I sách id sách INT Otén sách VARCHAR(45) Ohinh minh họa VARCHAR(2Ũ0) Otác giá VAROdAR(50) số lượng INT o loại VARCHAR(5Ũ) Hình 0.11 Sơ đồ quan hệ sở liệu 2.6.2 Các bảng sở liệu Bảng 2.0.1 Bảng danh mục sản phẩm (Categories) Tên thuộc tính Kiểu liệu Chiều dài Giá trị mẫu Mô tả Ghi ch ú Id INT Name VARCHA R DATE 255 255 0866961200 255 nvh@gmail.com 255 Manager Avatar VARCHA R VARCHA R VARCHA R TEXT Tên thuộc tính Id Kiểu liệu INT Chiều dài Name VARCHA R VARCHA R VARCHA R VARCHA R DATE 255 VARCHA R VARCHA R VARCHA R 255 Hanoi 255 Manager 255 None Kiểu liệu Chiều dài Date_of_birth Phone_number Email Position Gender Email Phone_number Date_of_birth Address Position Experience Tên thuộc tính Id nhân viên Ngơ Vũ Hoàng 2000-02-02 http://localhost:8000 / da/files/ 6%20%2814%29.P N Giá trị mẫu NOT NUL L Tên nhân viên NOT NUL L Ngày tháng năm NOT NUL sinh nhân viên L Số điện thoại nhân NOT NUL viên L Email nhân viên NOT NUL L Vị trí NOT NUL nhân viên L Ảnh đại diện nhân NOT viên NUL L Mô tả Id ứng viên Tên ứng viên 255 Male 255 nvh@gmail.com 255 0866961200 2000-02-02 Giá trị mẫu Giới tính ứng viên Email ứng viên Số điện thoại ứng viên Ngày tháng năm sinh ứng viên Ảnh đại diện ứng viên Vị trí ứng viên Kinh nghiệm ứng viên Mô tả Ghi ch ú NOT NUL L NOT NUL L NOT NUL L NOT NUL L NOT NUL L NOT NUL L NOT NUL L NOT NUL L NOT NUL L Ghi ch ú Id INT Username VARCHA R VARCHA R Password 255 ad 255 ad Id người quản trị Tên đăng nhập người quản trị Mật ứng với tên đăng nhập người quản trị Bảng 2.0.2 Bảng sản phẩm (Products) Tên trường Kiểu liệu Tên thuộc tính id* int(11) Id Name varchar(255) Tên sản phẩm Id_category varchar(255) Danh mục sản phẩm Provider varchar(255) Hãng sản xuất Avatar varchar(255) Ảnh đại diện Images varchar(255) Ảnh chi tiết Price varchar(255) Giá Sale varchar(255) Giảm giá Short_description varchar(255) Mô tả ngắn Description Text Mô tả Status varchar(255) Trạng thái sản phẩm NOT NUL L NOT NUL L NOT NUL L Bảng 2.0.3 Bảng người dùng (User) Tên trường Kiểu liệu Tên thuộc tính id* int(255) Id Password varchar(255) Mật Name varchar(255) Tên Email varchar(255) Thư điện tử Phone_number int(255) Số điện thoại Avatar varchar(255) Ảnh đại diện Address varchar(255) Địa Role int(255) Quyền Bảng 0.4 Bảng giỏ hàng (Cart) Tên trường Kiểu liệu Tên thuộc tính id* int(255) id Name varchar(255) Tên sản phẩm Quantity int Số lượng Price int(255) Giá Payment varchar(255) Tiền 2.7 Kết sản phẩm: -ỳ o A Not secure I mvc/adíĩiin/calegory/list QlaAdmin = o Wewlargermap 9ẾCJalan Senang singapore 418483 J +65 6876 0079 s sales@impressgift.com.sg 2' - B „-“Síchỉ, — 5a a Rrst na me: Bách Khoa Hả ■9~ DẠt HỌC BÁCH T s KHOA CỐNG TRAN Last name: ọ Q Kí Túc Xá ^V17 Giái Phơng H1 1ĩo a Email: ▼ khoa Trung ương -4 Học Xạỵ Dựng Phone: _> 1s ’ _ _ (TI MI Cay SEOUL íTLDâM I s„ Trường Oai ▼ 91 Trân Đại Nghĩ ▼ Trướng Cao đáng nghèCy Bầch Khoa Hà Nột ▼ ,SB2ÍD ■ Khoa Chấn thưong(J) Chinh htnh Cột ▼ Request Detail Đa, □ □ LỄ ThatF I Q Bệnh Viện Bạch Mai © í_ h r sitalGarden in Cnmnlp* o BS m Vv rGopstsoại Học Bênh Vlèn Tai Mũt í*k « i — MapdsteSKĨI Tetmsoruse R«pon«mepenor SUBMIT REQUEST 2.8 Định hướng phát triển Mặc dù đại yêu cầu đề tài đề ra, để sản phẩm ngày hồn thiện tốt hơn, nhóm em xin đề số hướng phát triển tương lại cho sản phẩm sau: • Cải tiến giao diện để website trở nên đẹp mắt hơn, thu hút khách hàng • Thu thập thơng tin, sở thích khách hàng để cung cấp thêm sản phẩm • • • phù hợp với nhu cầu sở thích khách hàng Thêm nhiều lựa chọn ngôn ngữ để phù hợp với nhiều đối tượng khách hàng Tạo chế độ tối (dark mode) để phù hợp với xu Tạo giao diện chạy tốt thiết bị khác smartphone, tablet, KẾT LUẬN Trên toàn nội dung đồ án thiết kế I với đề tài xây dựng Website bán hàng nhóm chúng em Q trình thực đồ án giúp chúng em hiểu biết quy trình xây dựng lên website theo mơ hình MVC, nắm cách phân tích thiết kế hệ thống, thiết kế sở liệu, công cụ để lập trình ngơn ngữ lập trình PHP, JS, Sản phẩm website hoàn thành trình độ hiểu biết cịn hạn chế nên sản phẩm khơng thể tránh khỏi thiếu sót Trong suốt q trình thực đề tài, nhóm chúng em cố gắng, tích cực tìm hiểu học hỏi để có kết tốt Chúng em mong nhận ý kiến bảo anh để chúng em tiến đường học tập TÀI LIỆU THAM KHẢO https://vi.wikipedia.org/wiki/HTML, truy cập cuối ngày 31/01/2020 https://vi.wikipedia.org/wiki/CSS, truy cập cuối ngày 31/01/2020 https://vi.wikipedia.org/wiki/PHP, truy cập cuối ngày 31/01/2020 https://vi.wikipedia.org/wiki/JavaScript, truy cập cuối ngày 31/01/2020 https://imta.edu.vn/cach-cai-dat-va-su-dung-xampp/, truy cập cuối 31/01/2020 [6] https://monamedia.co/mvc-la-gi-ung-dung-cua-mo-hinh-mvc-trong-lap-trinh/, cập cuối ngày 31/01/2020 [7] Slides giảng lập trình Web phịng thí nghiệm điện tử BKFET [1] [2] [3] [4] [5] ngày truy ... hợp v? ?i xu Tạo giao diện chạy tốt thiết bị khác smartphone, tablet, KẾT LUẬN Trên toàn n? ?i dung đồ án thiết kế I v? ?i đề t? ?i xây dựng Website bán hàng nhóm chúng em Quá trình thực đồ án giúp chúng... em tiến đường học tập T? ?I LIỆU THAM KHẢO https://vi.wikipedia.org/wiki/HTML, truy cập cu? ?i ngày 31/01/2020 https://vi.wikipedia.org/wiki/CSS, truy cập cu? ?i ngày 31/01/2020 https://vi.wikipedia.org/wiki/PHP,... phirang thúc to? ?i VARCHAR(50) ■ x o tong tiền INT I sách_ id sách INT khách hàngjd khách hàng INT I L ‘èadminjd admin INT I khách hàng id khách hàng IMT Otên VARCHAR(5Ũ) adrnin id admin INI Otên VARCHAR(5Ũ)