ĐỒ á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 Nguyễn Đình Hùng Lê Hoàng Anh Trần Minh Chiến Hà Đức Trường 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.1HTML 1.1.1HTML gì? 1.1.2Cấu trúc HTML 1.1.3Các thẻ HTML 1.2CSS 1.2.1CSS gì? 1.2.2Cú pháp sử dụng CSS 1.2.3Bố cục thành phần 1.3Bootstrap 1.3.1Bootstrap gì? 1.3.2Class Bootstrap 1.4Javascript 1.4.1Javascript gì? 1.4.2Làm Việc Với Javascript Tron 1.5JQuery 1.6PHP 1.6.1PHP gì? 1.6.2Làm việc với PHP 1.7 XAMPP 1.8 Mơ hình mvc 1.8.1 Mơ hình MVC gì? Các thành phần MVC 1.8.2 Luồng mơ hình MVC 1.8.3 Ưu nhược điểm mơ hì CHƯƠNG THIẾT KẾ HỆ THỐNG 2.1 Phân tích yêu cầu đề tài 2.1.1 Yêu cầu 2.1.2 Yêu cầu đặt 2.2 Sơ đồ phân cấp chức 2.3 Sơ đồ luồng liệu 2.3.1 Sơ đồ luồng liệu mức ngữ 2.3.2 Sơ đồ luồng liệu mức đỉnh 2.3.3 Sơ đồ luồng liệu mức 2.4 Chuẩn hóa 2.5 Mơ hình thực thể liên kết 2.6 Cơ sở liệu 2.6.1 Sơ đồ quan hệ sở liệu 2.6.2 Các bảng sở liệu 2.7 Kết sản phẩm: 2.8 Định hướng phát triển KẾT LUẬN TÀI LIỆU THAM KHẢO 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 yê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 Xn Hiếu Do nhiều hạn chế kiến thức kỹ nên 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 Hình 2.0.2 Sơ đồ luồng liệu mức ngữ cảnh Hình 2.0.3 Sơ đồ luồng liệu mức đỉnh Hình 2.0.4 Sơ đồ luồng liệu mức chức đăng nhập Hình 2.0.5 Sơ đồ luồng liệu mức chức giao dịch Hình 2.0.6 Sơ đồ luồng liệu mức chức quản lý thông tin người dùng Hình 2.0.7 Sơ đồ luồng liệu mức chức quản lý thơng tin sản phẩm Hình 2.0.8 Sơ đồ luồng liệu mức chức quản lý giỏ hàng Hình 2.0.9 Sơ đồ luồng liệu mức chức tìm kiếm Hình 2.0.10 Sơ đồ luồng liệu mức chức phản hồi Hình 2.0.11 Mơ hình thực thể liên kết Hình 0.12 Sơ đồ quan hệ sở liệu 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) 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 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 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 Font-end Framework, 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 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 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 Sách ID sách Tên sách Thể loại Hình minh họa Tác giả Số lượng Số lượng Hóa đơn 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 Admin ID admin Tên Ngày sinh Số điện thoại Email Account Password 2.5 Mơ hình thực thể liên kết H ì n h M h ì n h t h ự c t h ể li ê n k ế t 22 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 Tên thuộc tính 23 Id Name Date_of_birth Phone_number Email Position Avatar Tên thuộc tính Id Name Gender Email Phone_number Date_of_birth Address Position Experience Tên thuộc tính Kiểu liệu Chiều dài Giá trị mẫu 24 Id Mô tả Ghi ch ú Username Password Bảng 2.0.2 Bảng sản phẩm (Products) 25 Bảng 2.0.3 Bảng người dùng (User) Tên Pas N E Phone Av Ad R Tên N Qu P Pay 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 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 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 ... 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... 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,... trở nên phổ biến Trước nhu cầu đó, v? ?i yê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,