THIẾT KẾ WEBSITE GIỚI THIỆU VÀ BÁN ÁO MĂNG TÔ CHO SHOP BẢO MINH

MỤC LỤC BẢNG KÝ HIỆU CÁC CỤM TỪ VIẾT TẮT CHƯƠNG 1: TỔNG QUAN 1.1 Lý mục tiêu chọn đề tài 1.1.1 Lý chọn đề tài 1.1.2.Mục tiêu đề tài .8 1.1.3.Giới hạn phạm vi đề tài CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1.Nền tảng xây dựng 2.1.1 Trình bày phân tích thiết kế hướng đối tượng UML .9 2.1.1.1 Khái niệm phân tích thiết kế hướng đối tượng vấn đề liên quan 2.1.1.2 Khái niệm UML vấn đề liên quan 2.1.2 Trình bày HTML, CSS 11 2.1.2.1 HTML ? 11 2.1.2.2 CSS ? 12 2.1.3 Trình bày Javascript jQuery .14 2.1.3.1 Javascript 14 2.1.4 Trình bày PHP, mơ hình MVC 15 2.1.4.1 PHP ? .15 2.1.4.2 Mô hình MVC .17 2.1.5 Tìm hiểu Framework Bootstrap 18 2.1.6 Trình bày MYSQL 19 2.1.6.1 Tìm hiểu SQL số vấn đề liên quan 19 2.1.6.2 MySQL số vấn đề liên quan .21 2.2 Công cụ sử dụng 23 2.2.1 Tìm hiểu phầm mềm hỗ trợ phân tích thiết kế Rational Rose 23 2.2.2 Phần mềm hỗ trợ code Sublime Text 23 2.2.3 Chương trình tạo máy chủ Web XAMPP 24 2.3.Quy trình xây dựng 24 CHƯƠNG 3: NỘI DUNG THỰC HIỆN 25 3.1.Khảo sát hệ thống 25 3.1.1.Giới thiệu đơn vị 25 3.1.2.Chức 25 3.1.3 Mục tiêu 25 3.1.4.Xác định yêu cầu chức hệ thống 25 3.1.5.Xác định yêu cầu phi chức hệ thống 27 3.2 Phân tích hệ thống 27 3.2.1 Biểu đồ chức (Use-case diagram) .27 3.2.1.1 Xác định phân loại tác nhân 28 3.2.1.2 Xây dựng biểu đồ Use-case 30 3.2.1.3 Nhóm use-case quản lý giỏ hàng 41 3.2.1.4 Nhóm use-case quản lý người dùng .48 3.2.1.5 Nhóm use-case quản lý đơn hàng 52 3.2.1.6 Quản lý use-case quản lý danh mục .56 3.2.1.7 Quản lý use-case quản lý sản phẩm 61 3.2.1.8 Quản lý use-case quản lý tin tức .66 3.2.1.9 Quản lý use-case quản lý hỗ trợ .70 3.2.2 Thiết kế hệ thống .74 3.2.2.1 Biểu đồ (Sequence Diagram) 74 3.2.2.2 Biểu đồ hoạt động (Active Diagram) 84 3.2.2.3 Biểu đồ lớp (Class Diagram) 94 3.2.3 Thiết kế sở liệu 95 3.2.4 Thiết kế giao diện 99 3.2.5 Cài đặt triển khai 100 KẾT LUẬN .108 TÀI LIỆU THAM KHẢO .109 MỤC LỤC HÌNH ẢNH Hình Use-case tổng qt .30 Hình Use-case quản lý giỏ hàng 42 Hình 3 Use-case quản lý người dùngĐặc tả Use-case: 48 Hình Use-case quản lý đơn hàng 52 Hình Use-case quản lý danh mục 56 Hình Use-case quản lý sản phẩm 61 Hình Use-case Quản lý tin tức 66 Hình 8.Use-case quản lý hỗ trợ .71 Hình Biểu đồ đăng nhập 75 Hình 10 Biểu đồ đăng ký 76 Hình 11 Biểu đồ đăng xuất 76 Hình 12 Biểu đồ thêm sản phẩm 77 Hình 13 Biểu đồ sửa sản phẩm 77 Hình 14 Biểu đồ xóa sản phẩm 78 Hình 15 Biểu đồ thêm danh mục 78 Hình 16 Biểu đồ sửa danh mục 79 Hình 17 Biểu đồ xóa danh mục 79 Hình 18 Biểu đồ thêm người dùng .80 Hình 19 Biểu đồ sửa người dùng .80 Hình 20 Biểu đồ xóa người dùng .81 Hình 21 Biểu đồ thêm tin tức .81 Hình 22 Biểu đồ sửa tin tức .82 Hình 23 Biểu đồ xóa tin tức .82 Hình 24 Biểu đồ xóa tin hỗ trợ 83 Hình 25 Biểu đồ thêm sản phẩm vào giỏ hàng 83 Hình 26 Biểu đồ xóa sản phẩm giỏ 84 Hình 27 Biểu đồ toán giỏ hàng 84 Hình 28 Biểu đồ gửi tin hỗ trợ 85 Hình 29 Biểu đồ tìm kiếm 85 Hình 30 Biểu đồ hoạt động đăng nhập 86 Hình 31 Biểu đồ hoạt động đăng ký .86 Hình 32 Biểu đồ hoạt động đăng xuất 86 Hình 33 Biểu đồ hoạt động thêm danh mục .87 Hình 34 Biểu đồ hoạt động sửa danh mục 88 Hình 35 Biểu đồ hoạt động xóa danh mục 88 Hình 36 Biểu đồ hoạt động thêm sản phẩm .89 Hình 37 Biểu đồ hoạt động sửa sản phẩm 90 Hình 38 Biểu đồ hoạt động xóa sản phẩm 90 Hình 39 Biểu đồ hoạt động thêm người dùng 91 Hình 40 Biểu đồ hoạt động sửa người dùng 92 Hình 41 Biểu đồ hoạt động xóa người dùng 92 Hình 42 Biểu đồ hoạt động thêm tin tức 93 Hình 43 Biểu đồ hoạt động sửa tin tức 94 Hình 44 Biểu đồ hoạt động xóa tin tức 94 Hình 45 Biểu đồ hoạt động xóa tin hỗ trợ 95 Hình 46 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng .95 Hình 47 Biểu đồ hoạt động xóa sản phẩm khỏi giỏ hàng .96 Hình 48 Biểu đồ hoạt động tốn giỏ hàng 96 Hình 49 Biểu đồ hoạt động gửi tin hỗ trợ .97 Hình 50 Biểu đồ hoạt động tìm kiếm 97 Hình 51 Giao diện trang chủ 102 Hình 52 Giao diện gửi phản hồi 103 Hình 53 Giao diện đăng nhập 103 MỤC LỤC BẢ Bảng Xác định Actor Use-case 28 Bảng Đặc tả Use-case quản lý giỏ hàng 30 Bảng 3 Đặc tả Use-case Quản lý đơn hàng 32 Bảng Đặc tả Use-case quản lý danh mục 33 Bảng Đặc tả Use-case quản lý sản phẩm 34 Bảng Đặc tả Use-case quản lý tin tức 36 Bảng Đặc tả Use-case quản lý hỗ trợ 37 Bảng Đặc tả Use-case đăng nhập .38 Bảng Đặc tả Use-case đăng xuất 40 Bảng 10 Đặc tả Use-case đăng ký 41 Bảng 11 Đặc tả Use-case em giỏ hàng 42 Bảng 12 Đặc tả Use-case xóa giỏ hàng 43 Bảng 13 Đặc tả Use-case xóa sản phẩm giỏ hàng 44 Bảng 14 Đặc tả Use-case toán giỏ hàng 45 Bảng 15 Đặc tả Use-case thêm sản phẩm vào giỏ hàng 46 Bảng 16 Đặc tả Use-case cập nhập giỏ hàng 47 Bảng 17 Đặc tả Use-case thêm người dùng 49 Bảng 18 Đặc tả Use-case sửa người dùng .50 Bảng 19 Đặc tả Use-case xóa sản phẩm 51 Bảng 20 Đặc tả Use-case hủy đơn hàng 52 Bảng 21 Đặc tả Use-case xóa đơn hàng 53 Bảng 22 Đặc tả Use-case giao hàng 54 Bảng 23 Đặc tả Use-case xem đơn hàng 55 Bảng 24 Đặc tả Use-case thêm danh mục 56 Bảng 25 Đặc tả Use-case sửa danh mục 57 Bảng 26 Đặc tả Use-case xóa danh mục 58 Bảng 27 Đặc tả Use-case xem danh mục .59 Bảng 28 Đặc tả Use-case chọn danh mục 60 Bảng 29 Đặc tả Use-case thêm sản phẩm 61 Bảng 30 Đặc tả Use-case sửa sản phẩm 62 Bảng 31 Đặc tả Use-case xóa sản phẩm 63 Bảng 32 Đặc tả Use-case xem sản phẩm 64 Bảng 33 Đặc tả Use-case tìm kiếm sản phẩm 65 Bảng 34 Đặc tả use-case thêm tin tức 67 Bảng 35 Đặc tả Use-case sửa tin tức .68 Bảng 36 Đặc tả Use-case xóa tin tức .69 Bảng 37 Đặc tả Use-case xem tin tức .70 Bảng 38 Đặc tả Use-case xóa tin hỗ trợ 72 Bảng 39 Đặc tả Use-case xem tin hỗ trợ 73 Bảng 40 Đặc tả Use-case gửi tin hỗ trợ 73 Bảng 41 Bảng sở liệu sản phẩm 98 Bảng 42 Bảng sở liệu danh mục 99 Bảng 43 Bảng sở liệu chi tiết hóa đơn 100 Bảng 44 Bảng sở liệu tin tức 100 Bảng 45 Bảng sở liệu hóa đơn 101 Bảng 46 Bảng sở liệu hỗ trợ .101 Bảng 47 Bảng sở liệu người dùng 102 Y BẢNG KÝ HIỆU CÁC CỤM TỪ VIẾT TẮT Ký hiệu MYSQL CSS Viết tắt My Structured Giải thích MySQL khơng phải ngơn ngữ truy vấn mà Query hệ quản lý sở liệu Nó phần mềm dùng để lưu trữ Cascading Style quản lý sở liệu Trong tin học, tập tin định kiểu theo tầng – dịch Sheet từ tiếng Anh Cascading Style Sheets (CSS) – dùng để miêu tả cách trình bày tài liệu viết ngôn UML Unified ngữ HTML XHTML Modeling Là ngơn ngữ mơ hình gồm ký hiệu đồ họa mà Language phương pháp hướng đối tượng sử dụng để thiết kế hệ HTML Hyper Text Markup thống thơng tin cách nhanh chóng Là ngôn ngữ thiết kế để tạo nên trang web Javascript Language Java Script JavaScript ngơn ngữ lập trình kịch Ngơn ngữ dùng rộng rãi cho trang web, dùng để tạo khả viết script sử dụng đối JQuery MVC Jquery Model-View- tượng nằm sẵn ứng dụng Thư viện Javascript Mơ hình thiết kế phần mềm CSDL Controller Cơ sở liệu Là tập hợp thơng tin có cấu trúc Dữ liệu trì dạng tập hợp tập tin hệ điều PHP Personal Home hành hay lưu trữ hệ quản trị sở liệu Là ngơn ngữ lập trình kịch hay loại mã Page lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở Nó thích hợp với web dễ dàng nhúng vào trang HTML CHƯƠNG 1: TỔNG QUAN 1.1 Lý mục tiêu chọn đề tài 1.1.1 Lý chọn đề tài Cuộc cách mạng công nghiệp 4.0 giai đoạn khởi phát tác động đến lĩnh vực kinh tế - xã hội Trên thực tế, cách mạng công nghiệp 4.0 lĩnh vực bán lẻ âm thầm diễn mở nhiều hội phát triển cho Việt Nam, tạo nên thay đổi đột phá từ tiêu chuẩn dịch vụ đa dạng, hiệu nhanh chóng dựa tảng công nghệ số Đối với người tiêu dùng Việt cửa hàng bán lẻ truyền thống có bất tiện mà biết việc mua sắm ln phải tự đến cửa hàng xem sản phẩm lựa chọn Thậm chí phải ngồi đường trời mưa hay nắng đến tận cửa hàng để mua đồ cần gấp Chính em chọn đề tài “Thiết kế website giới thiệu bán áo măng tô cho shop Bảo Minh” với mục đích nghiên cứu, tìm hiểu ngơn ngữ lập trình PHP, HTML, CSS 1.1.2.Mục tiêu đề tài Xây dựng website giới thiệu bán áo măng tô cho shop Bảo Minh , tiện lợi cho người dùng xem mua hàng trực tuyến mà đến hàng 1.1.3.Giới hạn phạm vi đề tài - Xây dựng chương trình dựa ngôn ngữ đánh dấu siêu văn (HTML), CSS, JS, JQUERY - Hệ quản trị sở liệu MySQL tích hợp webserver XAMPP CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1.Nền tảng xây dựng Ứng dụng quản lý nhân xây dựng dựa HTML, CSS, JavaScript, PHP hệ quản trị sở liệu MySQL 2.1.1 Trình bày phân tích thiết kế hướng đối tượng UML 2.1.1.1 Khái niệm phân tích thiết kế hướng đối tượng vấn đề liên quan Phân tích và thiết kế hướng đối tượng (OOAD – Object Oriented Analysis and Design): phân tích xem hệ thống gồm đối tượng trong hệ thống chúng tương tác, liên kết với nào, từ việc mô tả tất đối tượng tương tác chúng giúp hiểu rõ hệ thống cài đặt Ưu điểm: - Gần gũi với giới thực - Tái sử dụng dễ dàng - Đóng gói, che dấu thông tin làm cho hệ thống tin cậy - Thừa kế giảm chi phí, hệ thống có tính mở cao - Với hệ thống lớn phức tạp, có nhiều luồng liệu khác nhau, sử dụng phương pháp hướng đối tượng giúp tận dụng khả bảo vệ giữ liệu ngồi còn tiết kiệm cơng sức tài nguyên Nhược điểm: Phương pháp phức tạp, khó theo dõi luồng liệu có nhiều luồng liệu đầu vào Các giai đoạn phân tích thiết kế hướng đối tượng: - Phân tích hướng đối tượng (Object Oriented Analysis) - Thiết kế hướng đối tượng (Object Oriented Design) - Lập trình hướng đối tượng (Object Oriented Programming) 2.1.1.2 Khái niệm UML vấn đề liên quan UML (Unified Modeling Language) ngơn ngữ mơ hình hóa tổng qt, trực quan hình ảnh, dùng để đặc tả (Specifying), mơ hình hóa trực quan (Visualizing), hình dung xây dựng (Constructing) tài liệu hóa (Documenting), nhân tố hệ thống phần mềm UML sử dụng để vẽ cho nhiều lĩnh vực khác phần mềm, khí, xây dựng v… phạm vi đồ án nghiên cứu cách sử dụng UML cho phân tích thiết kế hướng đối tượng ngành phần mềm OOAD sử dụng UML bao gồm thành phần sau: - View (góc nhìn) - Diagram (bản vẽ) - Notations (ký hiệu) - Mechanisms (qui tắc, chế) Bảng 2.1: Các vấn đề liên quan đến UML STT Biểu đồ Use Case Lớp Chức - Mô tả yêu cầu chức hệ thống - Mô tả tương tác người sử dụng với hệ thống Mô tả cấu trúc lớp mối quan hệ lớp - Bao gồm thành phần mối quan hệ chúng hệ thống Thành phần - Một thành phần đại diện cho yếu tố cài đặt vật lý môi trường: Mã nguồn, tập tin, sở liệu … Thể mối quan hệ vật lý thành phần phần Triển khai cứng phần mềm hệ thống Bao gồm: - Biểu đồ tuần tự: Mô tả tương tác đối tượng theo trình tự thời gian thơng điệp truyền Tương tác lớp - Biểu đồ cộng tác: Không theo thứ tự biểu diễn tổng quát giao tiếp đối tượng Mô tả hoạt động, luồng xử lý bên hệ thống Nó sử dụng để mơ tả qui trình nghiệp Hoạt động vụ hệ thống, luồng chức hoạt động đối tượng Trạng thái - Mô tả vòng đời đối tượng từ tạo tới 10 Bảng 46 Bảng sở liệu hỗ trợ Thuộc tính Idht Chude Noidung Hoten Dienthoai Email Ngaygui Kiểu Độ liệu int Ý nghĩa rộng 11 Varchar Text Varchar Int Varchar Date Khóa bảng hotro Tên chủ đề Nội dung Họ tên Điện thoại Email Ngày gửi 255 50 11 50 Bảng 47 Bảng sở liệu người dùng Thuộc tính Idnd Tend Username Password Ngaysinh Gioitinh Email Dienthoai Diachi Ngaydangky Phanquyen Kiểu Độ liệu int rộng 11 Varchar Varchar Varchar Data Varchar Varchar Int Varchar Data Int 255 50 50 11 50 11 100 11 91 Ý nghĩa Khóa bảng nguoidung Tên người dùng Tên tài khoản Mật Ngày sinh Giới tính Email Số điện thoại Địa Ngày đăng ký Phân quyền 3.2.4 Thiết kế giao diện Hình 51 Giao diện trang chủ Hình 52 Giao diện gửi phản hời 92 Hình 53 Giao diện đăng nhập 3.2.5 Cài đặt triển khai Bạn cần Web Server để triển khai ứng dụng quản lý website bán oto online bao gồm Apache, PHP MySQL Apache webserver thơng dụng có khả sử lý nội dung động (dynamic content) PHP cách tuyệt vời PHP ngôn ngữ kịch chủ yếu sử dụng để phát triển ứng dụng viết máy chủ MySQL hệ quản trị sở diệu dùng để lưu trữ sở liệu ứng dụng Cách dễ dàng để cài đặt Web Server cài đặt từ cài bao gồm Apache, PHP MySQL WampServer2, XAMPP3… thay cài đặt cấu hình thành phần XAMPP phân phối Apache miễn phí, dễ cài đặt bao gồm Mysql, PHP Perl Vì XAMPP dễ cài đặt sử dụng nên bước cài đặt XAMPP cấu hình ứng dụng Để bắt đầu, bạn cần tải cài đặt phần mềm XAMPP Bạn tải cài đặt từ Apache Friends4 Đây tập tin lớn, khoảng 110 mb, vài phút tùy thuộc kết nối bạn Chạy tập tin vừa tải để khởi chạy trình cài đặt XAMPP Tùy thuộc vào cấu hình hệ điều hành, bạn nhận vài nhắc nhở User Account Control (UAC – kiểm soát người dùng) Chỉ bạn cho phép thông qua ứng dụng, hình cài đặt hiển thị: 93 Chọn Next để tiếp tục Trên hình bạn chọn thành phần để cài đặt Để cài đặt XAMPP ứng dụng, bạn không cần chọn tất thành phần đưa Ngoài tất thành phần bắt buộc, bạn cần chọn: 94  PHP  MySQLBỏ chọn tất thành phần còn lại ấn Next Bây bạn chọn thư mục để cài đặt XAMPP: Trên hình cho bạn lời nhắc nhở yêu cầu bạn cài đặt Bitnami for XAMPP Bạn không cần cài đặt chúng cho XAMPP ứng dụng, cần bỏ chọn checkbox: 95 96 Bạn chon Next để tiếp tục cài đặt Quá trình cài đặt diễn vài phút: 97 Khi q trình cài đặt hồn tất bạn khởi chạy bảng điều khiển để làm việc với XAMPP Để khởi chạy Web Server ứng dụng, bạn cần chạy hai mô- đun Apache MySQL Bạn kích vào Start hai mơ-đun từ bảng điều khiển XAMPP: 98 Khi khởi chạy chúng bạn thấy trạng thái chúng chuyển sang màu xanh Bây bạn kiểm tra cách truy cập vào http://localhost/ từ máy cài http://ip-máy-server/ từ máy khác Khi nhận kết hình trên, bạn cài đặt thành công XAMPP 99 Giải nén mã nguồn ứng dụng vào vào thư mục htdocs thư mục bạn cài XAMPP Bạn truy cập http://localhost/quanlynhansu để kiểm tra 100 Từ bảng điều khiển XAMPP, khởi chạy PHPMyAdmin: KẾT LUẬN Đồ án đạt kết sau: - Đã phân tích trạng hệ thống để đưa sơ đồ phân cấp chức hệ thống mới, đưa biểu luồng liệu trình tự, hoạt động hệ thống - Đáp ứng yêu cầu mà khách hàng đặt tiêu chí, hoạt động được, dễ sử dụng, đầy đủ chức cần thiết - Thiết kế mơ hình sở liệu cho website - Thiết kế giao diện website thân thiện, dễ sử dụng cho người dùng - Thiết kế giao diện quản lí Admin Những mặt hạn chế: - Chưa phục vụ chức báo cáo tổng kết - Cấu trúc chương trình chưa tối ưu - Thời gian thực chương trình hồn chỉnh còn thiếu nên chưa thể tạo sản phầm hoàn chỉnh - Vẫn còn số vấn đề tồn đọng chưa thể giải dứt điểm 101 Hướng phát triển: - Xây dựng hoàn thiện chức tổng kết (tổng kết hàng tồn, doanh thu, khách hàng, nhân viên, nhà cung cấp) - Xây dựng chế bảo mật an toàn liệu - Xây dựng thêm chế tích điểm cho khách hàng thường xuyên mua hàng online để hưởng ưu đãi công ty 102 TÀI LIỆU THAM KHẢO Tiếng Việt: [1] Nguyễn Tuệ, “Giáo trình nhập mơn hệ sở liệu”, Nhà xuất Giáo dục, 2007 [2] Phạm Hữu Khang, “Giáo trình nhập mơn PHP MySQL”, Nhà xuất Phương Đông, 2007 Tiếng Anh : [3] Dayle Rees, “Code Smart – The Laravel framwork version for Biginners”, Nhà xuất LearnPub , xuất 4/2016, cập nhật lần cuối 7/2016 103 ... tài ? ?Thiết kế website giới thiệu bán áo măng tô cho shop Bảo Minh? ?? với mục đích nghiên cứu, tìm hiểu ngơn ngữ lập trình PHP, HTML, CSS 1.1.2.Mục tiêu đề tài Xây dựng website giới thiệu bán áo măng. .. hành vào ngày 19/08/2013 Ở phiên thành phần thiết kế lại theo phong cách thiết kế phẳng (flat design) Và lần đầu tiên, phiên 3.0 Bootstrap hỗ trợ thiết bị mobile ● Bootstrap 4.0: phát hành vào... tiêu đề tài Xây dựng website giới thiệu bán áo măng tô cho shop Bảo Minh , tiện lợi cho người dùng xem mua hàng trực tuyến mà đến hàng 1.1.3 .Giới hạn phạm vi đề tài - Xây dựng chương trình dựa