Báo cáo phân tích thiết kế và xây dựng website bán mĩ phẩm

Báo Cáo Phân tích thiết kế xây dựng Website bán mĩ phẩm LỜI MỞ ĐẦU Ngày nay, phát triển vượt bậc công nghệ thông tin, đặc biệt lĩnh vực thương mại điện tử, giúp cửa hàng, doanh nghiệp dễ tiếp cận với người dùng, đáp ứng nhu cầu nhanh chóng rộng rãi Hầu hết doanh nghiệp, cửa hàng có website riêng để giới thiệu mặt hàng Trước nhu cầu cần thiết để xây dựng website cho cửa hàng, doanh nghiệp Em chọn đề tài “Phân tích thiết kế xây dựng Website bán mĩ phẩm” Đồ án gồm có chương:  Chương I: Giới thiệu đề tài: Giới thiệu chung đề tài: lý chọn đề tài, mục tiêu đề tài, giới hạn phạm vi, với kết dự kiến đạt đề tài xây dựng  Chương II: Cơ sở lý thuyết: Nêu sở lý thuyết áp dụng hệ thống phần mềm triển khai: ngôn ngữ HTML, CSS, JavaScript, hệ quản trị sở liệu MySQL,  Chương III: Phân tích thiết kế hệ thống: Thực tìm hiểu, khảo sát hệ thống cửa hàng bán mĩ phẩm, từ trình bày sơ đồ, mơ hình UseCase, biểu đồ chức hệ thống Từ phân tích trên, tiến hành thiết kế sở liệu cho hệ thống triển khai Chương IV: Xây dựng phần mềm: Từ phân tích thiết kế hệ thống trên, áp dụng xây dựng  chức hệ thống Trình bày giao diện phần mềm triển khai  Chương V: Tổng kết: Tổng kết kết đạt phần mềm, hạn chế tồn hướng phát triển, tài liệu đề tài tham khảo MỤC LỤC DANH MỤC BẢNG Bảng 3.1 Bảng admin Bảng 3.2 Bảng user Bảng 3.3 Bảng product Bảng 3.4 Bảng categories Bảng 3.5 Bảng keyword Bảng 3.6 Bảng menu Bảng 3.7 Bảng article Bảng 3.8 Bảng slide Bảng 3.9.Bảng comment Bảng 3.10 Bảng order Bảng 3.11 Bảng transaction DANH MỤC HÌNH Hình 2.1 Sự khác HTML CSS Hình 2.2 Mơ hình MVC Hình 2.3 Mơ hình MVC Laravel Hình 3.1 UseCase Tổng quát Hình 3.2 UseCase hệ thống Hình 3.3 UseCase Customer Hình 3.4 UseCase Quản lý từ khóa Hình 3.5 UseCase Quản lý danh mục Hình 3.6 UseCase Quản lý sản phẩm Hình 3.7 UseCase Quản lý thành viên Hình 3.8 UseCase Quản lý menu Hình 3.9 UseCase Quản lý viết Hình 3.10 UseCase Quản lý đơn hàng Hình 3.11 UseCase Quản lý slide Hình 3.14 Biểu đồ Đăng ký Hình 3.15 Biểu đồ Đăng nhập Hình 3.16 Biểu đồ Xem liệu trang quản lý Hình 3.17 Biểu đồ Thêm liệu trang quản lý Hình 3.18 Biểu đồ Cập nhật liệu trang quản lý Hình 3.19 Biểu đồ Xóa liệu trang quản lý Hình 3.20 Biểu đồ Tìm kiếm liệu trang quản lý Hình 3.21 Biểu đồ Đặt hàng Hình 3.22 Biểu đồ Đánh giá sản phẩm Hình 3.23 Biểu đồ lớp Hình 4.1 Giao diện trang chủ Hình 4.2 Giao diện đăng nhập trang quản lý Hình 4.3 Giao diện trang xem chi tiết sản phẩm Hình 4.4 Giao diện trang đặt hàng Hình 4.5 Giao diện trang quản lý sản phẩm Hình 4.6 Giao diện trang quản lý thành viên Hình 4.7 Giao diện trang quản lý menu Hình 4.8 Giao diện trang quản lý viết Hình 4.9 Giao diện trang quản lý đơn hàng Hình 4.10 Giao diện trang toán CHƯƠNG I: GIỚI THIỆU VỀ ĐỀ TÀI: Lý chọn đề tài: Sự phát triển công nghệ thông tin thúc đẩy phát triển hầu hết lĩnh vực, có kinh doanh Với đời internet vươn lên cơng nghệ dẫn đến hình thức kinh doanh online Hình thức kinh doanh online nhiều cửa hàng lựa chọn để tăng doanh thu cửa hàng để giới thiệu sản phẩm đến người tiêu dùng cách nhanh chóng Với phát triển nhanh chóng cơng nghệ độ phủ sóng rộng khắp smartphone, lĩnh vực kinh doanh sản phẩm mĩ phẩm Việt Nam ngày quan tâm nhiều Tuy nhiên, với lĩnh vực kinh doanh nhiều tiềm có hàng trăm, hàng ngàn đơn vị, doanh nghiệm tham gia khiến cho cạnh tranh vơ gay gắt Mỗi cửa hàng có nhiều mức giá chương trình ưu đãi khác dẫn đến khó khăn cho người dùng việc tìm kiếm giá sản phẩm cửa hàng Với mục đích giúp người dùng tiếp cận nhiều chương trình sản phẩm mĩ phẩm làm đẹp, em định chọn đề tài “Phân tích thiết kế xây dựng Website bán mĩ phẩm” Mục tiêu đề tài:  Trình bày vấn đề liên quan đến ngôn ngữ PHP, sở  liệu Mysql, mơ hình MVC Khảo sát thực trạng dịch vụ sửa chữa điện thoại trung tâm sửa chữa thực trạng nhu cầu tìm kiếm dịch vụ sửa  chữa người dùng Phân tích hệ thống chương trình bao gồm giao diện, activity nhằm đáp ứng nhu cầu người dùng  Triển khai cài đặt chương trình Giới hạn phạm vi đề tài:  Xây dựng chương trình dựa vào ngơn ngữ lập trình PHP sở  liệu Mysql Chương trình tập trung chức nghiệp vụ từ khảo sát thực tế Kết dự kiến đạt được:  Tìm hiểu nhu cầu, nghiệp vụ tìm kiếm dịch vụ sửa chữa   giá sửa chữa người dùng Hiểu ngơn ngữ lập trình php áp dụng cho xây dựng website Hoàn thành website quản lý dịch vụ sửa chữa điện thoại online nhà với tính như:  Admin: Thực chức quản trị hệ thống, quản lý dịch vụ sửa chữa, quản lý tin tức, quản lý slide, quản lý người dùng, quản lý thành viên, quản lý liên lệ, quản lý bình luận, xem  thống kê Khách hàng: Có thể thực chức tìm kiếm tin tức, xem thông tin chi tiết dịch vụ, bình luận, đăng ký, đăng nhập tài khoản hệ thống, gửi thông tin liên hệ CHƯƠNG II: CƠ SỞ LÝ THUYẾT: Phân tích thiết kế hướng đối tượng: 1.1 Phân tích thiết kế hướng đối tượng gì? Phân tích thiết kế hướng đối tượng(OOAD) giai đọan phát triển mơ hình xác súc tích vấn đề, có thành phần đối tượng khái niệm đời thực, dễ hiểu người sử dụng  Năm nguyên tắc thiết kế hướng đối tượng: Một lớp nên có lý để thay đổi, tức lớp nên xử lý chức đơn lẻ, Nếu đặt nhiều chức vào lớp dẫn đến phụ thuộc chức với sau thay đổi chức phá  vỡ chức lại Các lớp, module, chức nên dễ dàng Mở(Open) cho việc  thêm chức mới, Đóng(Close) cho việc thay đổi Lớp dẫn xuất phải có khả thay lớp cha Chương trình khơng nên buộc phải cài đặt Interface mà  khơng sử dụng đến Các module cấp cao không nên phụ thuộc vào module cấp  thấp Cả hai nên phụ thuộc thông qua lớp trừu tượng Lớp trừu tượng không nên phụ thuộc vào chi tiết Chi tiết nên phụ thuộc vào trừu tượng 1.2 UML gì? UML(viết tắt Unified Modeling Language) ngơn ngữ mơ hình hố hợp dùng để đặc tả, trực quan hóa tư liệu hóa phần mềm hướng đối tượng, có phần bao gồm ký hiệu hình học, phương pháp hướng đối tượng sử dụng để thể miêu tả thiết kế hệ thống Một số dạng biểu đồ UML:  Biểu đồ lớp(Class Diagram): Class Diagram xương sống hầu hết phương pháp hướng đối tượng, bao gồm UML Chúng mô tả cấu trúc tĩnh hệ thống  Biểu đồ gói(Package Diagram): Package Diagram tập hợp Class Diagram Các ackage diagram thiết lập mối quan hệ pakage, pakage nhóm phần tử hệ thống có mối quan hệ liên quan đến nhâu  Biểu đồ chức năng(UseCase Diagram): UseCase Diagram đưa cách nhìn bao quát(từ xuống) sử dụng hệ thống cách nhìn hệ thống từ bên Hiển thị chức hệ thống lớp tương tác hệ thống với tác nhân UseCase Diagram dùng q trình phân tích hệ thống để nắm bắt yêu cầu hệ thống hiểu vận hành hệ thống  Biểu đồ hoạt động(Activity Diagram): Activity Diagram mơ tả tiến trình xử lý trình tự hành động tiến trình xử lý Activity Diagram giúp hiểu tồn tiến trình hoạt động, hữu ích mơ tả tiến trình song song mơ tả vài tương tác use case  Biểu đồ triển khai(Deployment Diagram): Deployment Diagram mô tả tài nguyên vật lý hệ thống, gồm node, thành phần kết nối Ngôn ngữ thiết kế web HTML CSS: 2.1 HTML: HTML(Hypertext Markup Language) mã dùng để xây dựng nên cấu trúc nội dung trang web Ví dụ, nội dung cấu thành loạt đoạn văn, danh sách liệt kê, sử dụng hình ảnh bảng biểu 2.2 CSS: CSS – dùng để miêu tả cách trình bày tài liệu viết ngơn ngữ HTML XHTML CSS viết tắt Cascading Style Sheets CSS hiểu cách đơn giản cách mà chúng thêm kiểu hiển thị (font chữ, kích thước, màu sắc,…) cho tài liệu Web 2.3 Khác HTML CSS: Hình 2.1 Sự khác HTML CSS “HTML ngôn ngữ đánh dấu để mô tả tài liệu web (trang web)” - W3Schools HTML tạo để giúp lập trình viên mơ tả nội dung trang web HTML sử dụng thẻ để gúp bạn thêm đoạn văn, tiêu đề, hình ảnh, dấu đầu dòng phần cấu trúc khác Giống việc viết tài liệu word, HTML giúp bạn viết trang web “CSS mô tả cách phần tử HTML hiển thị hình, giấy phương tiện khác” - W3Schools CSS thứ làm cho trang web tuyệt vời Trình bày tính dễ sử dụng số phẩm chất mà CSS mang lại cho việc phát triển web Nó liên quan nhiều đến việc thay đổi phong cách trang web, nội dung Giống thay đổi kích thước phơng chữ, màu phơng chữ định vị tài liệu word CSS chịu trách nhiệm giao diện nội dung trang web nội dung khác Ngơn ngữ kịch JavaScript: 3.1 JavaScript gì? JavaScript ngơn ngữ lập trình HTML ứng dụng Web Nó nhẹ sử dụng phổ biến phần trang web, mà thi hành chúng cho phép Client-Side script tương tác với người sử dụng tạo trang web động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng 3.2 Ứng dụng bật JavaScript: Với cải thiện nâng cấp không ngừng, Javascript làm hoạt động tinh vi, phức tạp hơn, giúp tăng tương tác trải nghiệm người dùng:  Sửa lỗi bố cục, cải thiện phần nhìn: Javascript có khả nhận diện thiết bị người dùng chi tiết ứng dụng trình duyệt, độ phân giải hình Những thơng tin góp phần cải thiện phần nhìn, thay đổi bố cục website hợp lý hơn, nhằm phục vụ tốt cho việc thiết kế đáp ứng (responsive design)  Tạo hiệu ứng sinh động bắt mắt: Với website đại hiệu ứng chuyển động phần thiếu hiệu ứng viết, nội dung trang, hoạt cảnh chuyển kênh menu Những hiệu ứng hoạt cảnh đem tới tương tác mẻ thú vị  Cải thiện tính tương tác người dùng: 10 STT Kiểu thể liệu Mơ tả buộc Khóa Khóa bảng Not null Tên Not null Email Not null Số điện thoại Not null Mật Id Name Email Phone Password Log_login text Null Created_at Updated_a timestamp Null nhập Ngày tạo timestamp Null Ngày cập nhật Null Lớp người dùng Null Địa Null Ảnh đại diện t Class 10 Address 11 Avatar bigint (20) Ràng  Tên thực varchar(255 ) varchar(255 ) varchar(255 ) varchar(25 5) varchar(25 5) varchar(25 5) varchar(25 5) Lịch sử đăng Bảng User: Bảng 3.2 Bảng user STT Kiểu Ràng liệu bigint(20) buộc Khóa Khóa Name varchar(25 Not null bảng Tên Email 5) varchar(25 Not null Email Nick_name 5) varchar(25 Null Tên đăng nhập Tên thực thể ID 5) 51 Mô tả STT 10 11 12 13  Kiểu Tên thực thể Ràng Mô tả Password liệu varchar(25 buộc Not null Mật Log_login 5) text Null Lịch sử đăng Created_at Updated_at Address timestamp timestamp varchar(25 Null Null Null nhập Ngày tạo Ngày cập nhật Địa Count_comm 5) tinyint(4) Not null Số lần bình ent Avatar Varchar(25 Null luận Ảnh Phone 5) Varchar(25 Not null Số điện thoại Status 5) tinyint(4) Not null Trạng thái Bảng Product: Bảng 3.3 Bảng product STT 10 Kiểu Ràng liệu bigint(20) buộc Khóa Khóa Pro_name varchar(25 Null bảng Tên Pro_price Pro_content Pro_category_id 5) int(11) int(11) int(11) Not null Not null Khóa Giá Nội dung ID danh mục timestamp timestamp bigint(20) ngoại Null Null Khóa Ngày tạo Ngày cập nhật ID admin tinyint(4) varchar(25 ngoại Not null Null Giảm giá Ảnh Tên thực thể ID Created_at Updated_at Pro_admin_id Pro_sale Pro_avatar 52 Mô tả STT 11 12 13 14 15  Kiểu Ràng liệu buộc Pro_view Pro_hot Pro_active Pro_description 5) int(11) tinyint(4) tinyint(4) varchar(25 Not null Not null Not null Null Xem Nổi bật Hoạt động Mô tả Pro_number_im 5) int(11) Not null Số lượng nhập Tên thực thể Mô tả port Bảng Categories: Bảng 3.4 Bảng categories STT  Tên thực thể Id C_name Kiểu Ràng Mô tả liệu int(11) buộc Khóa Khóa varchar(25 Not null bảng Tên Khóa ID danh mục ngoại cha Null Ảnh Not null Null Not null Null Null Null Loại Hoạt động Nổi bật Ngày tạo Ngày sửa Sắp xếp Null Banner 5) C_parent_id C_Avatar 10 C_type C_active C_hot Created_at Updated_at C_sort 11 C_banner int(11) varchar(25 5) tinyint(4) tinyint(4) tinyint(4) timestamp timestamp tinyint(4) varchar(25 5) Bảng Keyword: Bảng 3.5 Bảng keyword STT Tên thực thể Id Kiểu liệu int(11) 53 Ràng buộc Khóa Mơ tả Khóa STT  Tên thực thể K_name K_description K_hot Created_at Updated_at Kiểu liệu varchar(25 5) varchar(25 5) tinyint(4) timestamp timestamp Ràng Mơ tả buộc Not null bảng Tên Null Mô tả Not null Null Null Nổi bật Ngày tạo Ngày sửa Bảng menu: Bảng 3.6 Bảng menu STT 10  Kiểu Ràng liệu bigint(20) buộc Khóa Khóa Mn_name varchar(25 Not null bảng Tên Mn_admin_id 5) bigint(20) Khóa ID quản trị viên Mn_avatar varchar(25 ngoại Null Ảnh Mn_banner 5) varchar(25 Null Banner Mn_Descriptio 5) varchar(25 Null Mô tả n Mn_hot Mn_Status Created_at Updated_at 5) tinyint(4) tinyint(4) timestamp timestamp Not null Not null Null Null Nổi bật Trạng thái Ngày tạo Ngày sửa Tên thực thể ID Mô tả Bảng Article: Bảng 3.7 Bảng article STT Tên thực thể Id Kiểu Ràng liệu bigint(20) buộc Khóa 54 Mơ tả Khóa STT Kiểu liệu A_Name varchar(25 A_Hot A_Active 5) tinyint(4) tinyint(4) A_Menu_id int(11) A_View A_Description int(11) mediumtex A_Avartar 10 11 A_Content Created_at Updated_at  Tên thực thể t varchar(25 5) text timestamp timestamp Ràng Mô tả buộc Not null bảng Tên Not null Not null Khóa Nổi bật Hoạt động ID danh mục ngoại Not null viết Xem viết Null Mô tả Null Ảnh Null Null Null Nội dung Ngày tạo Ngày cập nhật Bảng Slide: Bảng 3.8 Bảng slide STT  Kiểu Ràng liệu bigint(20) buộc Khóa Khóa Sd_title varchar(25 Null bảng Tiêu đề Sd_link 5) varchar(25 Null Liên kết Sd_image 5) varchar(25 Null Ảnh Sd_target Sd_active Created_at Updated_at Sd_sort 5) tinyint(4) tinyint(4) timestamp timestamp Tinyint(4) Not null Not null Null Null Not null Mục tiêu Hoạt động Ngày tạo Ngày cập nhật Sắp xếp Tên thực thể ID Bảng Comment: Bảng 3.9.Bảng comment 55 Mô tả STT  Tên thực thể ID Cmt_name Cmt_content Cmt_product_ id Kiểu Ràng liệu bigint(20) buộc Khóa Khóa varchar(25 Null bảng Tên Null Khóa Nội dung 5) text int(11) Cmt_user_id int(11) Cmt_like Cmt_disk_like Updated_at Created_at int(11) int(11) timestamp timestamp ngoại Khóa ngoại Not null Not null Null Null Mơ tả ID sản phẩm ID người dùng Thích Khơng thích Ngày cập nhật Ngày tạo Bảng Order: Bảng 3.10 Bảng order STT  Tên thực thể ID Od_transactio n_id Od_Product_id Od_Sale Od_qty Od_price Created_at Updated_at Kiểu Ràng liệu bigint(20) buộc Khóa Khóa int(11) Khóa bảng ID giao dịch int(11) ngoại Khóa ID sản phẩm int(11) tinyint(4) int(11) timestamp timestamp ngoại Not null Not null Not null Null Null Khuyến mại Số lượng Giá Ngày tạo Ngày cập nhật Mô tả Bảng Transaction: Bảng 3.11 Bảng transaction STT Tên thực thể ID Kiểu Ràng liệu bigint(20) buộc Khóa 56 Mơ tả Khóa STT 10 11 12 Tên thực thể Kiểu Mơ tả int(11) buộc Khóa bảng ID người dùng Tst_total_mon int(11) ngoại Not null Tổng tiền ey Tst_name varchar(25 Null Tên Tst_email 5) varchar(25 Null Email Tst_phone 5) varchar(25 Null Số điện thoại Tst_admin_id 5) bigint(20) Khóa ID quản trị viên Tst_address varchar(25 ngoại Null Địa Tst_note 5) varchar(25 Null Ghi Tst_status Created_at Updated_at 5) tinyint(4) timestamp timestamp Not null Null Null Trạng thái Ngày tạo Ngày cập nhật Tst_user_id liệu Ràng CHƯƠNG IV: TRIỂN KHAI PHẦN MỀM: Giao diện trang chủ: 57 Hình 4.1 Giao diện trang chủ Giao diện đăng nhập trang quản lý: Hình 4.2 Giao diện đăng nhập trang quản lý Giao diện trang xem chi tiết sản phẩm: 58 Hình 4.3 Giao diện trang xem chi tiết sản phẩm 59 Giao diện trang đặt hàng: Hình 4.4 Giao diện trang đặt hàng Giao diện trang quản lý sản phẩm: Hình 4.5 Giao diện trang quản lý sản phẩm 60 Giao diện trang quản lý thành viên: Hình 4.6 Giao diện trang quản lý thành viên Giao diện trang quản lý menu: Hình 4.7 Giao diện trang quản lý menu Giao diện trang quản lý viết: 61 Hình 4.8 Giao diện trang quản lý viết Giao diện trang quản lý đơn hàng: Hình 4.9 Giao diện trang quản lý đơn hàng 10.Giao diện trang tốn: 62 Hình 4.10 Giao diện trang toán CHƯƠNG V: TỔNG KẾT: Kết đạt được: 63 Từ hướng dẫn tận tình thầy, học trường, em phân tích xây dựng phần mềm với kết đạt được:  Áp dụng kiến thức học xây dựng website bán mĩ phẩm, phân quyền người dùng người quản trị, với giao diện chức  khác Quản lý thông tin cần thiết cửa hàng sản phẩm, thông tin khách hàng giao dịch mua hàng cửa khách hàng  Có đầy đủ chức để quản lý cửa hàng Hạn chế: Bên cạnh có hạn chế như:  Chưa có nhiều kiến thức thực tế, nên việc xây dựng phần mềm áp dụng vào thực tế cịn nhiều thiếu sót chưa khả quan  Giao diện chưa thật bắt mắt  Một số chức hạn chế Kết luận: Bài báo cáo đề tài “xây dựng website bán mĩ phẩm” xây dựng mơ hình MVC với framework laravel kết hợp với hệ quản trị sở liệu MySQL Với chức sở liệu nghiên cứu, khảo sát từ thực tế, ứng dụng mơ hình cửa hàng kinh doanh mĩ phẩm, giúp cải thiện khó khăn cho người quản lý, thuận tiện cho người dùng Tuy nhiên, thời gian hồn thành đề tài có hạn kinh nghiệm nghiệp vụ chưa sâu nên đề tài em cịn nhiều thiếu sót nghiệp vụ chun mơn Em mong nhận ý kiến, góp ý thầy cô bạn để đề tài em hồn thiện áp dụng tốt thực tế Em xin chân thành cảm ơn! CHƯƠNG VI: TÀI LIỆU THAM KHẢO: 64 [1]: Thạc Bình Cường, 2002, Phân tích thiết kế hệ thống thơng tin, nhà xuất Khoa học Kỹ thuật [2]: Jermy Osborn & Nhóm AGI Creative, HTML5 Và CSS3: Thiết Kế Trang Web Thích Ứng Giàu Tính Năng, nhà xuất Bách Khoa – Hà Nội [3]:https://www.devwork.vn/download-file/57/tai-lieu-hocframework-laravel -tieng-viet-mien-phi [4]: https://vi.wikipedia.org/wiki/HTML [5]: https://www.w3schools.com/css/ [6]: https://vi.wikipedia.org/wiki/JavaScript [7]: https://en.wikipedia.org/wiki/Unified_Modeling_Language 65 ... cửa hàng có website riêng để giới thiệu mặt hàng Trước nhu cầu cần thiết để xây dựng website cho cửa hàng, doanh nghiệp Em chọn đề tài ? ?Phân tích thiết kế xây dựng Website bán mĩ phẩm? ?? Đồ án... tìm kiếm giá sản phẩm cửa hàng Với mục đích giúp người dùng tiếp cận nhiều chương trình sản phẩm mĩ phẩm làm đẹp, em định chọn đề tài ? ?Phân tích thiết kế xây dựng Website bán mĩ phẩm? ?? Mục tiêu... CƠ SỞ LÝ THUYẾT: Phân tích thiết kế hướng đối tượng: 1.1 Phân tích thiết kế hướng đối tượng gì? Phân tích thiết kế hướng đối tượng(OOAD) giai đọan phát triển mơ hình xác súc tích vấn đề, có thành