ĐỒ á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 Hà Nội, 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 chức đăng nhập .- 20 Hình 2.0.5 Sơ đồ luồng liệu mức chức giao dịch - 20 Hình 2.0.6 Sơ đồ luồng liệu mức chức quản lý thông tin người dùng - 21 Hình 2.0.7 Sơ đồ luồng liệu mức chức quản lý thông tin sản phẩm - 22 Hình 2.0.8 Sơ đồ luồng liệu mức chứ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 - 24 Bảng 2.0.2 Bảng danh mục sản phẩm (Categories) - 26 Bảng 2.0.3 Bảng sản phẩm (Products) .- 26 Bảng 2.0.4 Bảng người dùng (User) - 27 Bảng 0.5 Bảng giỏ hàng (Cart) - 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, JS… 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 hoà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: 1.2.3 Bố cục thành phần Các thuộc tính: width, height, float, clear Thuộc tính phơng nền: Background-color, Background-image, Background-repeat, Background-attachment, Background-position Thuộc tính ID CSS : Cú pháp : Id= “ Tên_ID ” Cú pháp triệu gọi ID CSS : #Tên_ID {thuộc_tính_1:giá_trị; … thuộc_tính_N:giá_trị; } Thuộc tính Class CSS : Cú pháp : Class= “Tên_class_1 Tên_class_2… Tên_class_N” Cú pháp triệu gọi Class CSS: Tên_class { thuộc_tính_1: giá trị; … thuộc_tính_2: giá_trị; } Thuộc tính font chữ CSS: font-family, font-style, font-weight, font-size Thuộc tính text CSS: color, text-indent, text-align, letter-spacing, word-spacing, line-height, text-decoration, text-transfrom Điều khiển css, kiện: link, hover, active, visited Cú pháp: a:link { thuộc_tính_1: giá_trị; … thuộc_tính_N: giá trị; } Trong CSS, BOX MODEL (mơ hình hộp) mơ tả cách mà CSS định dạng khối khơng gian bao quanh thành phần Nó bao gồm padding ( vùng đệm), border (viền), margin (canh lề) tùy chọn 1.3 Bootstrap 1.3.1 Bootstrap gì? Bootstrap một Font-end Framework, là một thư viện mạnh mẽ tích hợp nhiều CSS có sẵn giúp cho việc lập trình HTML & CSS trở nên đơn giản dễ dàng 1.3.2 Class Bootstrap Class container, class chỉnh text, class biến đổi Class .form-control tự động nhận số style chung 10 (10), (12), (21), (23) T.T sách (17) T.T SL (22) T.T lập báo cáo (19) Báo cáo doanh thu 2.3.3 Sơ đồ luồng liệu mức a Chức Hình 2.4 Sơ đồ luồng liệu mức chức đăng nhập Sơ đồ mức chức mô tả Hình 2.4 Cụ thể: (1), (3), (4), (5), (8) T.T KH (2), (6) T.T PH b Chức 17 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 18 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 19 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 20 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 21 Sách Hóa đơn 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 hóa đơn Ngày đặt hàng Ngày nhận hàng Phương thức toán Tổng tiền Khách hà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 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 22 Admin 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ì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 dữ liệu Chiều dài  Giá trị mẫu  23 Mô tả  Ghi ch ú  Id INT    Name  VARCHAR  255 Ngơ Vũ Hồng Date_of_birth DATE 2000-02-02  Phone_number VARCHAR  255 0866961200 Email  VARCHAR  255 nvh@gmail.com Position VARCHAR  255 Manager Avatar TEXT  http://localhost:8000/ da/files/ 6%20%2814%29.PN G     Tên thuộc tính  Kiểu dữ liệu Chiều dài    Giá trị mẫu  Id INT  Name  VARCHAR  255 Gender VARCHAR 255  Male Email VARCHAR  255 nvh@gmail.com Phone_number VARCHAR  255 0866961200 Date_of_birth DATE  2000-02-02 Address VARCHAR  255 Hanoi Position VARCHAR  255 Manager Experience VARCHAR 255  None Id nhân viên NOT NULL  Tên nhân viên NOT NULL  Ngày tháng năm NOT sinh nhân viên NULL  Số điện thoại nhân NOT viên NULL  Email nhân viên NOT NULL  Vị trí NOT nhân viên NULL  Ảnh đại diện nhân NOT viên NULL  Mơ tả  Id ứng viên Tên ứng viên Tên thuộc tính  Kiểu dữ liệu Chiều dài  Giới tính ứng viên Giá trị mẫu  24 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 NULL  NOT NULL  NOT NULL  NOT NULL  NOT NULL  NOT NULL  NOT NULL  NOT NULL  NOT NULL  Ghi ch ú  Id INT    Username VARCHAR  255 ad Password VARCHAR 255  ad Id người quản trịNOT NULL  Tên đăng nhập NOT người quản trị NULL  Mật ứng với NOT tên đăng nhập NULL  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 25 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: 26 27 28 29 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 hoà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 30  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 Quá 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 hồ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 cô để chúng em tiến đường học tập TÀI LIỆU THAM KHẢO [1] https://vi.wikipedia.org/wiki/HTML, truy cập cuối ngày 31/01/2020 [2] https://vi.wikipedia.org/wiki/CSS, truy cập cuối ngày 31/01/2020 [3] https://vi.wikipedia.org/wiki/PHP, truy cập cuối ngày 31/01/2020 [4] https://vi.wikipedia.org/wiki/JavaScript, truy cập cuối ngày 31/01/2020 [5] https://imta.edu.vn/cach-cai-dat-va-su-dung-xampp/, truy cập cuối ngày 31/01/2020 [6] https://monamedia.co/mvc-la-gi-ung-dung-cua-mo-hinh-mvc-trong-lap-trinh/, truy 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 31 ... 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 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,... 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. .. Kiểu dữ liệu Chiều d? ?i? ? Gi? ?i tính ứng viên Giá trị mẫu  24 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