ỨNG DỤNG FRAMEWORK LARAVEL 5 X THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI GIAO DIỆN METRO UI - Full 10 điểm

UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGHỆ THÔNG TIN -----  ----- VÕ DUY PHƯỚC ỨNG DỤNG FRAMEWORK LARAVEL 5 X THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI GIAO DIỆN METRO UI KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC Qu ả ng Nam, tháng 5 n ă m 2017 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: CÔNG NGỆ THÔNG TIN -----  ----- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: ỨNG DỤNG FRAMEWORK LARAVEL 5 X THIẾT KẾ WEBSITE THƯƠNG MẠI ĐIỆN TỬ VỚI GIAO DIỆN METRO UI Sinh viên thực hiện HỌ TÊN: VÕ DUY PHƯỚC MSSV: 2113021020 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA: 2013 – 2017 Cán bộ hướng dẫn ThS TRẦN THỊ DIỆU LINH MSCB:…… Qu ả ng Nam, tháng 5 n ă m 2017 LỜI CẢM ƠN Được sự phân công của Khoa Công Nghệ Thông Tin Trường Đại Học Quảng Nam và sự đồng ý của Cô giáo hướng dẫn ThS Trần Thị Diệu Linh em đã thực hiện đề tài “ Ứng dụng Framework Laravel 5 x thiết kế website thương mại điện tử với giao diện Metro UI ” Để hoàn thành đề tài này, em xin chân thành cảm ơn các thầy cô giáo đã tận tình hướng dẫn, giảng dạy trong suốt quá trình học tập, nghiên cứu và rèn luyện ở Trường Đại học Quảng Nam Em xin chân thành cảm ơn Cô giáo hướng dẫn ThS Trần Thị Diệu Linh đã tận tình, chu đáo hướng dẫn em thực hiện đề tài này Mặc dù, đã có nhiều cố gắng để thực hiện đề tài một cách hoàn chỉnh nhất, song do buổi đầu mới làm quen với công tác nghiên cứu cũng như hạn chế về kiến thức và kinh nghiệm nên không thể tránh khỏi những thiếu sót nhất định mà bản thân chưa thấy được Em rất mong được sự góp ý của quý Thầy, Cô giáo để khoá luận được hoàn chỉnh hơn Em xin chân thành cảm ơn! DANH MỤC CÁC KÍ HIỆU, CÁC CHỮ VIẾT TẮT Từ viết tắt/kí hiệu Tiếng Việt Tiếng Anh CSDL Cở sở dữ liệu Database SQL Ngôn ngữ truy vấn Structured Query Language HTML Ngôn ngữ đánh dấu siêu văn bản Hypertext Markup Language PHP Ngôn ngữ lập trình Hypertext Preprocessor MVC Mô hình đa tầng Model View Controller UC Ca sử dụng Use Case PK Khóa chính PrimaryKey FK Khóa ngoại Foreign Key TMĐT Thương mại điện tử E-commerce MỤC LỤC PHẦN 1 MỞ ĐẦU 1 1 1 Lý do chọn đề tài 1 1 2 Mục tiêu của đề tài 1 1 3 Đối tượng và phạm vi nghiên cứu 1 1 4 Phương pháp nghiên cứu 2 1 5 Lịch sử nghiên cứu 2 1 6 Đóng góp của đề tài 2 1 7 Cấu trúc đề tài 2 PHẦN 2 NỘI DUNG NGHIÊN CỨU 3 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 3 VÀ NỀN TẢNG XÂY DỰNG HỆ THỐNG WEBSITE 3 1 1 Tổng quan về thương mại điện tử 3 1 1 1 Khái niệm thương mại điện tử 3 1 1 2 Lợi ích của thương mại điện tử 3 1 1 3 Hệ thống thanh toán điện tử tự động 3 1 2 Ngôn ngữ lập trình PHP 3 1 2 1 Giới thiệu ngôn ngữ PHP 3 1 2 2 Cấu trúc của một trang PHP 4 1 2 3 Hoạt động của PHP 5 1 3 Hệ quản trị cơ sở dữ liệu MYSQL 6 1 3 1 Khái niệm 6 1 3 2 Một số đặc điểm của MySQL 6 1 3 3 Hướng dẫn cài đặt Xampp 7 1 3 4 Tạo cơ sở dữ liệu MySQL với Xampp 9 1 4 Framework Laravel 5 x 11 1 4 1 Khái niệm 11 1 4 2 Cấu trúc của Laravel 5 x 12 1 4 3 Composer - công cụ quản lý thư viện hữu ích 13 1 4 4 Cài đặt 14 1 4 5 Mô hình MVC 18 1 4 5 1 Tổng quan về mô hình MVC 18 1 4 5 2 Mô hình MVC trong Laravel 20 1 5 Thiết kế website với giao diện MetroUI 20 1 5 1 Website metro UI là gì ? 20 1 5 2 Đặc điểm thiết kế website Metro UI 21 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 22 2 1 Các nhóm chức năng của hệ thống 22 2 2 Các tác nhân của hệ thống 22 2 3 Xác định UC của các tác nhân 22 2 3 1 Tác nhân khách thăm 22 2 3 2 Tác nhân khách hàng 22 2 3 3 Tác nhân người quản trị (Super Admin) 23 2 3 4 Tác nhân người quản trị (Bộ phận kinh doanh) 23 2 3 5 Tác nhân người quản trị (Bộ phận kho) 23 2 3 6 Tác nhân hệ thống thanh toán 23 2 3 7 Tác nhân bộ phận chuyển phát hàng 23 2 4 Biểu đồ UC hệ thống 24 2 5 Đặc tả các UC 25 2 5 1 Đăng ký thành viên 25 2 5 2 Đăng nhập hệ thống 26 2 5 3 Tìm kiếm sản phẩm 27 2 5 4 Xem thông tin sản phẩm 28 2 5 5 Quản lý thông tin cá nhân 29 2 5 6 Thêm vào giỏ hàng 30 2 5 7 Thanh toán 30 2 5 8 Kiểm tra đơn hàng 32 2 5 9 Giao hàng 33 2 6 Biểu đồ UC chi tiết 34 2 6 1 Biểu đồ UC đăng kí, đăng nhập 34 2 6 2 Biểu đồ UC tìm kiếm 34 2 6 3 Biểu đồ UC nhập-xuất hàng 35 2 6 4 Biểu đồ UC mua hàng 35 2 7 Biểu đồ hoạt động 36 2 7 1 Đăng ký thành viên 36 2 7 2 Đăng nhập hệ thống 36 2 7 3 Tìm kiếm sản phẩm 37 2 7 4 Xem sản phẩm 37 2 7 5 Xem giỏ hàng 38 2 7 6 Quản lý thông tin cá nhân 38 2 7 7 Giao hàng 39 2 8 Biểu đồ tuần tự 39 2 8 1 Đăng ký thành viên 39 2 8 2 Tìm kiếm 40 2 8 3 Thanh toán 40 2 8 4 Nhập hàng 41 2 8 5 Giao hàng 41 2 9 Biểu đồ lớp 42 2 10 Thiết kế CSDL 42 2 10 1 Xác định các thực thể 42 2 10 2 Mô tả chi tiết các thực thể 43 2 11 Lược đồ liên kết giữa các bảng 47 CHƯƠNG 3: CHƯƠNG TRÌNH THỬ NGHIỆM 48 3 1 Cài đặt hệ thống 48 3 2 Một số giao diện chính 48 PHẦN 3 KẾT LUẬN 57 1 1 Kết quả đạt được 57 1 2 Hạn chế 57 1 3 Hướng phát triển của đề tài 57 PHẦN 4 TÀI LIỆU THAM KHẢO 58 NHẬN XÉT CỦA GIẢNG VIÊN 59 1 PHẦN 1 MỞ ĐẦU 1 1 Lý do chọn đề tài Trong những năm gần đây với sự phát triển vượt trội của khoa học kỹ thuật đặc biệt là công nghệ thông tin, với những ứng dụng của nó vào nhiều lĩnh vực đã đóng góp một phần to lớn cho sự nghiệp phát triển của xã hội Trong các lĩnh vực đó thì lĩnh vực quản lý là thật sự giúp ích được rất nhiều cho con người với việc áp dụng quản lý và mua bán bằng máy tính thay cho quản lý và mua bán bằng thủ công ở các doanh nghiệp, công ty, cá nhân thật sự cần thiết Với sự phát triển mạnh mẽ đó không thể phủ nhận sự đóng góp của thương mại điện tử Vì thế việc trao đổi mua bán cũng như quản lý hàng hóa cần phải có sự thay đổi từ thủ công sang hiện đại hơn Vài năm trở lại đây, một php framework khá mới là Laravel ra đời dùng để xây dựng web application, được thiết kế dựa trên mô hình MVC (Model, Controller, View) Ngay từ khi ra mắt, Laravel đã được chú ý đến bởi nhiều đặc điểm “nhẹ mà hay” như Eloquent ORM, localization, models and relationships, routing, caching, sessions, views … Đến tháng 8 năm 2014, Laravel Framework được xem như là một dự án PHP phổ biến nhất trên Github Với các xu hướng thiết kế website, các yếu tố phổ biến nhất trong sự thay đổi đó là cập nhật công nghệ Khi thiết kế website mang phong cách cổ điển đang dần lạc hậu thì thay vào đó là sự lên ngôi của phong cách thiết kế website Metro UI Những giao diện web Metro UI mang phong cách thanh lịch, đơn giản mang đến sự khác biệt cho trải nghiệm người dùng , dễ dàng tương tác giữa người dùng và website Vì vậy em đã chọn đề tài “ Ứng dụng Framework Laravel 5 x thiết kế website thương mại điện tử với giao diện Metro UI ” làm đề tài thực tập tốt nghiệp cho mình 1 2 Mục tiêu của đề tài Tìm hiểu về ngôn ngữ lập trình PHP và MYSQL Tìm hiểu về Framework Laravel 5 x Tìm hiểu thiết kế website với giao diện Metro UI Xây dựng website thương mại điện tử 1 3 Đối tượng và phạm vi nghiên cứu 2 Đối tượng nghiên cứu Ngôn ngữ lập trình PHP, hệ quản trị cơ sở dữ liệu MYSQL, Framework Laravel 5 x, Metro UI Phạm vi nghiên cứu Nghiên cứu các vấn đề xoay quanh lập trình website thương mại điện tử 1 4 Phương pháp nghiên cứu Thu thập thông tin, nghiên cứu tài liệu liên quan đến đề tài Tham khảo phân tích - thiết kế UML 1 5 Lịch sử nghiên cứu 1 6 Đóng góp của đề tài Cung cấp kiến thức về website, ngôn ngữ lập trình PHP, MYSQL, Framework Laravel 5 x và Metro UI Cung cấp một website thương mại điện tử giúp tiết kiệm thời gian cho người tiêu dùng cũng như nhà quản lý trong việc tham gia vào hoạt động mua bán hàng; người tiêu dùng có được giá cả và hình ảnh mặt hàng một cách chính xác; nhà quản lý dễ dàng hơn trong việc theo dõi, quản lý sản phẩm một cách nhanh và thuận tiện nhất 1 7 Cấu trúc đề tài Ngoài phần mở đầu và kết luận, phần nội dung gồm ba chương:  Chương 1: Cơ sở lý thuyết và nền tảng xây dựng hệ thống website  Chương 2: Phân tích và thiết kế hệ thống  Chương 3: Chương trình thử nghiệm 3 PHẦN 2 NỘI DUNG NGHIÊN CỨU CHƯƠNG 1: CƠ SỞ LÝ THUYẾT VÀ NỀN TẢNG XÂY DỰNG HỆ THỐNG WEBSITE 1 1 Tổng quan về thương mại điện tử 1 1 1 Khái niệm thương mại điện tử Thương mại điện tử (TMĐT) là việc tiến hành một phần hay toàn bộ hoạt động thương mại bằng những phương tiện điện tử TMĐT vẫn mang bản chất như các hoạt động thương mại truyền thống Tuy nhiên, thông qua các phương tiện điện tử mới, các hoạt động thương mại được thực hiện nhanh hơn, hiệu quả hơn, giúp tiết kiệm chi phí và mở rộng không gian kinh doanh TMĐT cũng được biết tới như một phương thức kinh doanh hiệu quả từ khi Internet hình thành và phát triển Chính vì vậy, nhiều người hiểu TMĐT theo nghĩa cụ thể hơn là giao dịch thương mại, mua sắm qua Internet và mạng 1 1 2 Lợi ích của thương mại điện tử Đối với người tiêu dùng, TMĐT đem lại lợi ích rất phong phú Mua sắm trực tuyến tiết kiệm thời gian, cung cấp một lựa chọn sản phẩm lớn hơn và cho phép tiết kiệm chi phí , giá sản phẩm và chi phí đi lại Đối với các nhà kinh doanh, TMĐT giúp người kinh doanh sử dụng môi trường mạng trong việc tìm kiếm đối tác, nắm bắt được thông tin trên thị trường, giảm chi phí tiếp thị và giao dịch nhằm mở rộng qui mô sản xuất hoạt động kinh doanh và nâng cao lợi nhuận 1 1 3 Hệ thống thanh toán điện tử tự động Thương mại điện tử chỉ có thể thực hiện một cách trọn vẹn nếu có một hệ thống thanh toán điện tử tự động Nếu không có hệ thống này thì tính cách thương mại sẽ bị giảm thấp và chỉ mang tính ứng dụng trao đổi thông tin Vì vậy, việc tích hợp hệ thống thanh toán tự động là hết sức cần thiết 1 2 Ngôn ngữ lập trình PHP 1 2 1 Giới thiệu ngôn ngữ PHP PHP là một ngôn ngữ lập trình được sử dụng để viết ở phía máy chủ (lập trình web) Hiện nay có rất nhiều ngôn ngữ có thể viết ở máy chủ như C#, Java, Python và PHP chính là một trong những ngôn ngữ của nhóm này 4 PHP có cú pháp đơn giản, tốc độ nhanh và nhỏ gọn, dễ học và thời gian để tiếp cận PHP ngắn hơn so với các ngôn ngữ lập trình khác nên hiện nay PHP đang chiếm số lương lập trình viên tương đối lớn Hiện PHP có rất nhiều các CMS mã nguồn mở như WordPress, OpenCart, NukeViet nên nó rất đa dạng và đáp ứng hầu hết các website thông thường từ blog cá nhân cho đến website giới thiệu công ty và bán hàng 1 2 2 Cấu trúc của một trang PHP Trang PHP đơn giản là một trang văn bản với phần mở rộng là php, gồm có 3 phần:  Văn bản (text)  HTML (Hypertext Markup Language) là ngôn ngữ định dạng văn bản siêu liên kết Sự định dạng dựa trên các Tag hoặc các đoạn mã đặc biệt để đánh dấu một văn bản, một file ảnh,…giúp cho web Browser thông dịch và hiển thị chúng lên màn hình của bạn HTML có những phần mở rộng rất quan trọng cho phép những liên kết Hypertext từ một tài liệu này đến một tài liệu khác(có thể là một đoạn text, cũng có thể là một văn bản,…) Cấu trúc cơ bản của một file HTML như sau: Tiêu đề … Theo cấu trúc đã trình bày như trên ta thấy một file HTML chia thành hai phần cơ bản: Phần đầu: Được tạo bởi Tag , : tại đây định nghĩa trên tiêu đề của trang web Phần này được hiển thị trên thanh tiêu đề của trang web được khai báo giữa hai Tag , 5 Phần thân: Được khai báo bởi Tag , : Trình bày nội dung thể hiện trên trang web Các nội dung cần hiển thị hoặc xử lý trên trang web sẽ được định nghĩa trong phần Body của HTML Để cho các trang web được sinh động hơn ngôn ngữ HTML còn bao gồm rất nhiều Tag dùng cho việc định trang, liên kết các trang với nhau, chèn hình ảnh vào trang…HTML quy định cú pháp không phân biệt chữ hoa và chữ thường và không có khoản trắng trong định nghĩa tên thẻ  Các đoạn script PHP Hi Như vậy phần mã PHP được đặt trong thẻ Ta cũng có thể thấy rằng một trang PHP cũng chính là một trang HTML có nhúng mã PHP ở bên trong, có phần mở rộng là php Khi thêm một đoạn script vào HTML, PHP dùng dấu chấm phân cách để phân biệt giữa đoạn HTML và đoạn PHP 1 2 3 Hoạt động của PHP Khi người sử dụng gọi trang PHP, Web Server sẽ triệu gọi PHP Engine để thông dịch dịch trang PHP và trả kết quả cho người dùng như hình bên dưới : 6 1 3 Hệ quản trị cơ sở dữ liệu MYSQL 1 3 1 Khái niệm MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở rất phổ biến và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,… MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL) MySQL được sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngôn ngữ khác, nó làm nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl 1 3 2 Một số đặc điểm của MySQL MySQL là một phần mềm quản trị CSDL dạng server-based (gần tương đương với SQL Server của Microsoft) MySQL quản lý dữ liệu thông qua các CSDL, mỗi CSDL có thể có nhiều bảng quan hệ chứa dữ liệu MySQL có cơ chế phân quyền người sử dụng riêng, mỗi người dùng có thể được quản lý một hoặc nhiều CSDL khác nhau, mỗi người dùng có một tên truy cập (user name) và mật khẩu tương ứng để truy xuất đến CSDL Khi ta truy vấn tới CSDL MySQL, ta phải cung cấp tên truy cập và mật khẩu của tài khoản có quyền sử dụng CSDL đó Nếu không, chúng ta sẽ không làm được gì cả giống như quyền chứng thực người dùng trong SQL Server vậy Tốc độ: MySQL rất nhanh Những nhà phát triển cho rằng MySQL là cơ sở dữ liệu nhanh nhất mà bạn có thể có Dễ sử dụng: MySQL tuy có tính năng cao nhưng thực sự là một hệ thống cơ sở dữ liệu rất đơn giản và ít phức tạp khi cài đặt và quản trị hơn các hệ thống lớn 7 Giá thành: MySQL là miễn phí cho hầu hết các việc sử dụng trong một tổ chức Hỗ trợ ngôn ngữ truy vấn: MySQL hiểu SQL là ngôn ngữ của sự chọn lựa cho tất cả các hệ thống cơ sở dữ liệu hiện đại, có thể truy cập MySQL bằng cách sử dụng các ứng dụng mà hỗ trợ ODBC (Open Database Connectivity - một giao thức giao tiếp cơ sở dữ liệu được phát triển bởi Microsoft) Năng lực: Nhiều client có thể truy cập đến server trong cùng một thời gian Các client có thể sử dụng nhiều cơ sở dữ liệu một cách đồng thời Bạn có thể truy cập MySQL tương tác với sử dụng một vài giao diện để bạn có thể đưa vào các truy vấn và xem các kết quả: các dòng yêu cầu của khách hàng, các trình duyệt Web… Kết nối và bảo mật: MySQL được nối mạng một cách đầy đủ, các cơ sở dữ liệu có thể được truy cập từ bất kỳ nơi nào trên Internet do đó bạn có thể chia sẽ dữ liệu của bạn với bất kỳ ai, bất kỳ nơi nào Nhưng MySQL kiểm soát quyền truy cập cho nên người mà không nên nhìn thấy dữ liệu của bạn thì không thể nhìn được Tính linh động: MySQL chạy trên nhiều hệ thống UNIX cũng như không phải UNIX chẳng hạn như Windows hay OS/2 MySQL chạy được các với mọi phần cứng từ các máy PC ở nhà cho đến các máy server Sự phân phối rộng: MySQL rất dễ dàng đạt được, chỉ cần sử dụng trình duyệt web của bạn Nếu bạn không hiểu làm thế nào mà nó làm việc hay tò mò về thuật toán, bạn có thể lấy mã nguồn và tìm tòi nó Nếu bạn không thích một vài cái, bạn có thể thay đổi nó Sự hỗ trợ: Bạn có thể tìm thấy các tài nguyên có sẵn mà MySQL hỗ trợ Cộng đồng MySQL rất có trách nhiệm Họ trả lời các câu hỏi trên mailing list thường chỉ trong vài phút Khi lỗi được phát hiện, các nhà phát triển sẽ đưa ra cách khắc phục trong vài ngày, thậm chí có khi trong vài giờ và cách khắc phục đó sẽ ngay lập tức có sẵn trên Internet 1 3 3 Hướng dẫn cài đặt Xampp Bước1 : Download tại https://www apachefriends org/download và tiến hành cài đặt như các chương trình thông thường Bước 2 : Sau khi tải file cài đặt về xong, hãy chạy nó, sau đó chọn Next 8 Ở phần chọn đường dẫn, bạn hãy chọn đường dẫn cần lưu cài đặt của XAMPP Lưu ý rằng đường dẫn này bạn phải nhớ vì khi cài đặt web lên localhost, bạn phải truy cập vào thư mục này Bạn nên để mặc định là c:\xampp Tiếp tục ấn Next Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP“ Và ấn Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP Sau khi cài xong, ấn nút Finish để kết thúc cài đặt và mở bảng điều khiển của XAMPP Tuy nhiên, hãy khởi động lại máy sau khi cài đặt xong để tránh tình trạng không khởi động được localhost 9 Start Apache và MySQL trong XAMPP control panel Sau khi khởi động xong, bạn hãy truy cập vào website với địa chỉ là http://localhost sẽ thấy nó hiển thị ra trang giới thiệu XAMPP như hình dưới 1 3 4 Tạo cơ sở dữ liệu MySQL với Xampp Khi nhắc đến database, bạn phải nhớ là nó bao gồm 3 thành phần chính là:  Tên user của database  Mật khẩu của user database 10  Tên database Database Host (thường thì điền là localhost, bất kể là bạn dùng ở localhost hay host bình thường) Đối với localhost, chúng ta không cần tạo user cho database mà sẽ sử dụng thông tin user như sau: Sau đó ở phần Create databsae, bạn nhập tên database cần tạo vào ô Database name, phần Collation bạn hãy chọn là utf8_unicode_ci như hình dưới rồi ấn nút Create kế bên Tạo xong hãy nhìn bên menu tay trái, nếu nó xuất hiện tên database vừa tạo là thành công Vậy bây giờ, chúng ta tạm có một databse với các thông tin :  Database Host: localhost  Database user: root  Database password: trống  Database name: QuanLyBanHang  Ví dụ : Vào thư mục XAMPP/htdocs và tạo file test php với nội dung như sau: 11 1 Gõ trên trình duyệt địa chỉ localhost/test php Nếu hiện ra dòng chữ Hello World nghĩa là ứng dụng PHP đầu tiên đã chạy thành công 1 4 Framework Laravel 5 x 1 4 1 Khái niệm Laravel là một PHP framework mã nguồn mở, được phát triển bởi Taylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiến trúc model-view-controller (MVC) Những tính năng nổi bật của Laravel bao gồm cú pháp dễ hiểu, rõ ràng, một hệ thống đóng gói modular và quản lý gói phụ thuộc, có nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng 12 1 4 2 Cấu trúc của Laravel 5 x Mục đích, vai trò của các thư mục được mô tả chi tiết như sau:  app là thư mục chứa tất cả các thư mục, các tập tin php, các class php, thư viện, models để xây dựng project o Console thư mục chứa các tập tin định nghĩa các lệnh thực thi trên Artisan o Exception thư mục chứa các tập tin quản lý, điều hướng lỗi o Http  Controllers là thư mục chứa các tập tin controllers  Middleware là thư mục chứa các tập tin lọc và ngăn chặn các requests  Kernel php là tập tin cấu hình, định nghĩa Middleware hoặc nhóm Middleware o routes php lưu trữ toàn bộ route trong ứng dụng để giúp Laravel biết cách kết nối khi có yêu cầu, theo hàm khai sẵn, controller và action o Providers chứa các providers nâng cao 13  bootstrap thư mục chứa tập tin điều hướng khởi động hệ thống, thường thì chúng ta sẽ không làm gì đến nó  config chứa mọi tập tin cấu hình của Laravel  database chứa các thư mục tập tin về CSDL o migrations chứa các tập tin định nghĩa khởi tạo và sử dụng bảng o seeds chứa các tập tin định nghĩa dữ liệu insert vào database  public nơi chứa các tập tin css, js, image  resources o views chứa những file mẫu HTML của bạn mà được sử dụng bởi controller hay route o lang chứa những file PHP chứa mãng của những chuỗi cho phép dễ dàng xác định vị trí của ứng dụng Mặc định thư mục này chứa những dòng ngôn ngữ cho việc phân trang và chứng thực form người dùng  storage chứa các tập tin hệ thống như upload, cache, session, cookie, log  tests chứa các tập tin định nghĩa tests  vendor thư mục của composer  env và env example là 2 tập tin cấu hình chính của laravel như key app, tên app, url app, email, env mode, CSDL hay bật tắt debug  composer json tập tin của composer  server php là tập tin để artisan trỏ đến tạo server khi gõ lệnh php artisan serve  artisan tập tin thực thi lệnh của Laravel, cũng là tập tin mà chúng ta tương tác rất nhiều 1 4 3 Composer - công cụ quản lý thư viện hữu ích a) Composer là gì ? Composer là một công cụ quản lý các thư viện trong PHP, công cụ này giúp ta tiết kiệm khá nhiều thời gian với các gói thư viện cần thiết mà project của bạn cần sử dụng, bạn chỉ cần khai báo nó, composer sẽ tự động tải code của các thư viện về thông qua một server cộng đồng b) Lợi ích của composer 14 Trước kia, khi không có composer, mỗi khi muốn sử dụng thư viện nào, bạn sẽ phải download code của thư viện đó về đặt vào project, điều này sinh ra những bất lợi sau: 1 Dung lượng project của bạn sẽ lớn vì cần phải cộng thêm code của các thư viện 2 Nếu bạn sử dụng git thì khi update các thư viện, bạn phải tạo các commit, mà thực sự các commit đó không phải của bạn 3 Khó khăn trong việc update version của các thư viện 4 Nếu thư viện A, có sử dụng thư viện B, thư viện B sử dụng thư viện C, thì nếu một trong các thư viện này có update, bạn sẽ phải tự mình lần mò về nguồn cội của nó để update, rất phức tạp Composer ra đời để giải quyết các vấn đề này Với composer, bạn sẽ cần khai báo tên và version của các thư viện mà bạn có sử dụng mà không cần phải tự tay chép code của nó vào project, composer sẽ tự động tìm và tải thư viện mà bạn cần, nếu trong thư viện đó có dùng các thư viện khác thì nó cũng sẽ tải các thư viện khác về, nó đệ quy cho đến khi tải đủ các thư viện 1 4 4 Cài đặt a) Yêu cầu cấu hình khi cài đặt Laravel Để có thể cài Laravel, yêu cầu bắt buộc như sau:  PHP >= 5 4  OpenSSL PHP Extension  PDO PHP Extension  Mbstring PHP Extension  Tokenizer PHP Extension b) Download và cài đặt Laravel trên windows Bước 1 : Kiểm tra cài đặt biến môi trường cho php và composer hay chưa? Bạn mở cmd lên và gõ 2 lệnh php -v và composer -v nếu hiện lên thông báo ‘"***’ is not recognized as an internal or external command, operable program or batch file " có nghĩa là máy của bạn chưa được cài đặt và bạn cần làm những bước phía dưới và ngược lại thì không cần Bước 2 : Cài đặt biến môi trường cho php 15 Thiết lập môi trường : Để thiết lập biến môi trường chúng ta làm như sau:  Nhấn Windows R, nhập vào SystemPropertiesAdvanced rồi enter  Trong hộp thoại hiện ra, chọn nút Enviroment Variables  Trong hộp thoại mới, nhìn vào khung System variables , tìm Variable Path , chọn và nhấn nút Edit :  Trong hộp thoại mới, nhập vào vị trí cuối cùng chứ không được ghi đè Cài đặt môi trường : Chúng ta có hai cách sau : Cách 1 : Cài đặt biến môi trường cho composer từ file Composer-Setup exe Bạn vào đường dẫn https://getcomposer org/ Composer-Setup exe để tải file về, sau đó chạy lên và thực hiện các bước sau: 16 Giao diện lúc chạy lên : Chọn như trong hình rồi click Next Chọn đường dẫn đến folder PHP của bạn và click Next để cài đặt Cách 2: Cài đặt Composer từ file composer phar 17 Bạn vào https://getcomposer org/composer phar để download về, sau đó lưu vào thư mục chứa file php exe, tiếp theo mở cmd và cd đến thư mục chứa file php exe và gõ lệnh: echo @php "%~dp0composer phar" %*>composer bat Bước 3 : Download và cài đặt laravel : có 2 cách Cách 1: Tự download và cài đặt: Trước hết truy cập đường dẫn https://github com/laravel/laravel/releases chọn phiên để tải về và giải nén vào thư mục cần tạo, sau đó mở cmd rồi cd vào thư mục chứa laravel và chạy lệnh: composer install Sau khi cài đặt hoàn tất chạy tiếp lệnh : php artisan key:generate Cách 2: Sử dụng composer Bạn chạy lệnh sau: composer create-project laravel/laravel “đường dẫn đến thư mục sẽ chứa project" "phiên bản" --prefer-dist Bước 4 : Chạy laravel : Hiện tại có 3 cách chạy chính: Cách 1 : Chạy bằng đường dẫn localhost Ví dụ source của bạn nằm trong thư mục htdocs/laravel của xampp thì chạy http://localhost/laravel/public/ Nhưng cách này không được khuyến khích Cách 2 : Sử dụng command line của laravel hỗ trợ, bạn cd tới thư mục Laravel và chạy lệnh sau: php artisan serve Bạn sẽ nhận được thông báo tương tự như sau: Laravel development server started on http://localhost:8000 Ở ví dụ trên đường dẫn sẽ là http://localhost:8000 , bạn sẽ truy cập trên trình duyệt bằng đường dẫn này Cách 3 : Sử dụng lệnh của php hỗ trợ, bạn cd tới thư mục public của laravel và chạy lệnh sau php -S domain:port 18 Sau đó vào theo đường dẫn http://domain:port Đây có lẽ cách này là ngắn gọn nhất, làm việc được với cả những khi bạn chỉ cài php, mysql mà không qua phần mềm nào Và đây là kết quả: 1 4 5 Mô hình MVC 1 4 5 1 Tổng quan về mô hình MVC Mô hình MVC nói đơn giản và dễ hiểu là một mô hình tổ chức lập trình theo một quy cách tách biệt giữa giao diện, cơ sở dữ liệu và các phương thức xử lý code Đơn giản hơn bạn có thể hình dung một ứng dụng nhỏ được viết bởi mô hình MVC được tách biệt ra làm 3 phần cụ thể để xử lý và thao tác người lập trình có thể chỉnh sửa code từng phần riêng biệt mà không sợ bị nhầm lẫn khi làm việc 19 Chi tiết hơn MVC chính là 3 chữ viết tắt đầu tiên của :  M chính là Model: Nơi sẽ tương tác trực tiếp với các cở sở dữ liệu như MySql chẳng hạn, các thao tác gọi cơ sở dữ liệu của một ứng dụng sẽ được viết tại đây  V chính là View: Nơi này đơn giản chỉ là giao diện được người dùng nhìn thấy, hiểu xa hơn một chút là những dòng code HTML và CSS được thiết lập tạo ra những giao diện cho ứng dụng và là chỗ để echo sau khi xử lý tại Controller và Model  C chính là Controller: Hiểu đơn giản nó là bộ xử lý trung tâm, nơi phân phối các kết quả trở về từ Model và echo ra View 20 1 4 5 2 Mô hình MVC trong Laravel Source code trong Laravel được tổ chức theo mô hình MVC giúp cho việc quản lý source code trở lên có hệ thống Như hình trên, ta có thể thấy luồng đi của mô hình MVC trong Laravel như sau: – Người dùng sử dụng trình duyệt web để truy cập vào địa chỉ website – Router sẽ phân tích xem đường dẫn truy cập đến Controller nào – Controller sẽ truy cập vào Model để lấy dữ liệu từ Database, sau đó trả về Controller – Controller đổ dữ liệu đó ra view cho người dùng 1 5 Thiết kế website với giao diện MetroUI 1 5 1 Website metro UI là gì ? Ngày nay khi thiết kế website mang phong cách cổ điển đang dần lạc hậu thì thay vào đó là sự lên ngôi của phong cách thiết kế website metro UI Những giao diện web metro UI mang phong cách thanh lịch, đơn giản và hiện đại Nó mang đến sự khác biệt cho trải nghiệm người dùng, dễ dàng tương tác giữa người dùng và website Đó là những thiết kế giao diện vuông đơn giản Giống như giao diện web metro UI của Windows 8 với nguyên tắc thiết kế chính là tập trung vào các nội dung của ứng dụng, dựa nhiều hơn vào kiểu chữ và ít hơn về đồ họa 21 1 5 2 Đặc điểm thiết kế website Metro UI Đơn giản, hiện đại: Trong thiết kế này sẽ loại bỏ hết tất cả những yếu tố thừa không truyền tải được thông tin Các thứ được loại bỏ bao gồm cả những hình ảnh đồ họa đẹp mắt, đường viền, hiệu ứng 3d Một thiết kế website metro UI nên đơn giản sử dụng các yếu tố: hình ảnh , đường viền,… Chuyển động mượt mà: Các chuyển động không cần phải quá nhanh mà cần có sự mượt mà và chiều sâu giúp người dùng cảm giác được nó một cách sống động Typography: Cảm hứng thiết kế dựa trên sự sắp đặt các font chữ một cách nghệ thuật Đảm bảo sự truyền tải thông tin một cách hiệu quả nhất, nhấn mạnh những nội dung cần nhấn mạnh Tập trung vào nội dung: Nó là kết quả của nguyên lý thứ nhất và nguyên lý thứ ba Loại bỏ những bước trung gian và những gì không đem lại giá trị thiết thực giúp cho người dùng giao tiếp trực tiếp với nội dung 22 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2 1 Các nhóm chức năng của hệ thống - Nhóm chức năng đăng ký, đăng nhập - Nhóm chức năng xem thông tin: xem thông tin sản phẩm, giỏ hàng, thông tin cá nhân, tình trạng đơn hàng - Nhóm chức năng quản lý thông tin: quản lý thông tin cá nhân, danh sách thành viên, quản lý danh mục sản phẩm, quản lý đơn hàng, giao dịch - Nhóm chức năng nhập, xuất hàng và cập nhật thông tin lên website - Nhóm chức năng mua hàng, tiếp nhận - xử lý và thanh toán đơn hàng 2 2 Các tác nhân của hệ thống - Khách thăm: là người ghé qua website, xem thông tin sản phẩm - Khách hàng: là những khách thăm đã đăng kí thành viên của website - Người quản trị (Super admin) : điều hành, quản lý và theo dõi mọi hoạt động của hệ thống - Người quản trị (Bộ phận kinh doanh) : tiếp nhận đơn hàng, kiểm tra thông tin, liên hệ với khách hàng để khẳng định các thông tin trên đơn hàng - Người quản trị (Bộ phận kho) : kiểm tra hàng trong kho, nhập-xuất hàng và cập nhật lên website - Hệ thống thanh toán: nơi khách hàng thực hiện thanh toán - Bộ phận chuyển phát hàng : nhận hàng từ bộ phận kho và chuyển hàng đến cho khách hàng theo đơn hàng 2 3 Xác định UC của các tác nhân 2 3 1 Tác nhân khách thăm - Đăng ký - Tìm kiếm, xem, mua hàng - Xem, sửa, xóa giỏ hàng - Thanh toán 2 3 2 Tác nhân khách hàng - Đăng nhập, đăng xuất - Tìm kiếm, xem, mua hàng ,theo dõi đơn hàng - Xem, sửa thông tin cá nhân - Xem, sửa, xóa giỏ hàng 23 - Thanh toán 2 3 3 Tác nhân người quản trị (Super Admin) - Đăng nhập, đăng xuất - Thêm, sửa, xóa thông tin tài khoản khách hàng, admin 2 3 4 Tác nhân người quản trị (Bộ phận kinh doanh) - Đăng nhập, đăng xuất - Kiểm tra đơn hàng - Xác nhận thông tin đơn hàng - Quản lý các giao dịch 2 3 5 Tác nhân người quản trị (Bộ phận kho) - Đăng nhập, đăng xuất - Kiểm tra hàng trong kho - Nhập-xuất hàng, cập nhật lên website 2 3 6 Tác nhân hệ thống thanh toán - Thanh toán 2 3 7 Tác nhân bộ phận chuyển phát hàng - Nhận hàng từ bộ phận kho - Chuyển hàng cho khách 24 2 4 Biểu đồ UC hệ thống 25 2 5 Đặc tả các UC 2 5 1 Đăng ký thành viên Tên Use-Case: Đăng ký ID: 1 Mức độ quan trọng: Cao Tác nhân chính:Khách thăm Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách thăm Mô tả vắn tắt: Khách thăm đăng ký thành viên trên website Kh ở i s ự : Khách ghé thăm website Các m ố i quan h ệ : Kết hợp (Association): Khách thăm Mở rộng (Extend): Khách đăng ký trên website Các lu ồ ng s ự ki ệ n chính: 1 Khách thăm chọn mục đăng ký thành viên 2 Form đăng ký thành viên hiển thị 3 Khách thăm nhập thông tin cá nhân vào form và đăng ký 4 Hệ thống báo kết quả quá trình nhập thông tin cá nhân Nếu thông tin nhập không chính xác thì thực hiện luồng rẽ nhánh Nếu nhập chính xác hệ thống thông báo thành công và cập nhật thông tin của khách xem vào CSDL 5 UC kết thúc Các luồng sự kiện con: Các luồng sự kiện thay thế/ngoại lệ: Nếu có sai sót khi nhập thông tin hệ thống báo lỗi và yêu cầu nhập lại Nếu không đồng ý, chọn hủy UC kết thúc 26 2 5 2 Đăng nhập hệ thống Tên Use-Case: Đăng nhập ID: 2 Mức độ quan trọng: Cao Tác nhân chính:Khách hàng, SuperAdmin ,Admin Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách hàng, Superadmin, Admin Mô tả vắn tắt: Khách hàng đăng nhập vào website xem, mua, quản lý đơn hàng Super Admin, Admin đăng nhập để quản lý hệ thống Khởi sự: Khách hàng, Superadmin, Admin chưa đăng nhập vào hệ thống Các mối quan hệ: Bao hàm (Include):Khách, Admin, SuperAdmin Các luồng sự kiện chính: 1 Khách hàng, Superadmin, Admin chọn chức năng đăng nhập 2 Form đăng nhập hiển thị 3 Nhập tên đăng nhập, mật khẩu vào form 4 Hệ thống kiểm tra tên đăng nhập, mật khẩu, cấp độ tương ứng, nếu tồn tại trên hệ thống sẽ báo đăng nhập thành công Nếu nhập sai thì chuyển sang luồng rẽ nhánh 5 UC kết thúc Các luồng sự kiện con: Các luồng sự kiện thay thế/ngoại lệ: - Hệ thống thông báo quá trình đăng nhập không thành công - Yêu cầu nhập lại tên và mật khẩu - Nếu đồng ý thì quay về bước 2 của luồng sự kiện chính, nếu không đồng ý UC kết thúc 27 2 5 3 Tìm kiếm sản phẩm Tên Use-Case: Tìm kiếm ID:3 Mức độ quan trọng: Cao Tác nhân chính:Khách thăm, Khách hàng Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách thăm ,Khách hàng Mô tả vắn tắt: Cho phép khách tìm kiếm các sản phẩm Khởi sự: Khách ghé thăm website Các mối quan hệ: Kết hợp (Association): Khách hàng, Admin Mở rộng (Extend): Khách hàng ,admin đăng nhập trên website Các luồng sự kiện chính: 1 Người sử dụng gõ thông tin vào ô tìm kiếm 2 Nhấn nút 3 Hệ thống báo kết quả tìm kiếm 4 UC kết thúc 28 2 5 4 Xem thông tin sản phẩm Tên Use-Case: Xem thông tin sản phẩm ID:4 Mức độ quan trọng: Cao Tác nhân chính:Khách thăm, Khách hàng Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách thăm, Khách hàng Mô tả vắn tắt: Cho phép khách xem chi tiết các sản phẩm có trên website Khởi sự: Khách ghé thăm website Các mối quan hệ: Kết hợp (Association): Khách thăm, khách hàng, admin Các luồng sự kiện chính: 1 Khách chọn sản phẩm cần xem 2 Trang xem thông tin sản phẩm xuất hiện, hệ thống hiển thị thông tin chi tiết về sản phẩm đã chọn 3 UC kết thúc Các luồng sự kiện con: Các luồng sự kiện thay thế/ngoại lệ: 29 2 5 5 Quản lý thông tin cá nhân Tên Use-Case: Quản lý thông tin cá nhân ID:5 Mức độ quan trọng:Cao Tácnhânchính:Kháchhàng, SuperAdmin, Admin Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách hàng, SuperAdmin, Admin Mô tả vắn tắt: Cho phép khách hàng, SuperAdmin ,Admin xem, thay đổi thông tin cá nhân Khởi sự: Khách hàng, SuperAdmin, Admin đã đăng nhập vào hệ thống Các mối quan hệ: Kết hợp (Association): Khách hàng, Admin Các luồng sự kiện chính: 1 Khách hàng, SuperAdmin, Admin chọn chức năng xem thông tin cá nhân 2 Hệ thống hiển thị form với các thông tin của thành viên hiện tại 3 Nếu khách hàng, SuperAdmin, Admin chọn chức năng sửa thông tin cá nhân 4 Hệ thống hiển thị form với các thông tin cũ của thành viên hiện tại 5 Thành viên nhập các thông tin mới 6 Nhấn nút sửa thông tin 7 Nếu việc cập nhật thành công thì thực hiện bước 6 Nếu sai thì thực hiện luồng rẽ nhánh 8 Lưu thông tin 9 UC kết thúc Các luồng sự kiện con: Các luồng sự kiện thay thế/ngoại lệ: 1 Hệ thống báo việc nhập dữ liệu không hợp lệ 2 Yêu cầu nhập lại thông tin 3 Quay lại bước 5 của luồng sự kiện chính 30 2 5 6 Thêm vào giỏ hàng Tên Use-Case: Thêm vào giỏ hàng ID:6 Mức độ quan trọng: Cao Tác nhân chính:Khách thăm ,Khách hàng Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách thăm ,Khách hàng Mô tả vắn tắt: Cho phép khách hàng đưa sản phẩm đã chọn vào giỏ hàng Khởi sự: Khách chọn được sản phẩm cần mua Các mối quan hệ: Kết hợp (Association): Khách thăm, khách hàng Các luồng sự kiện chính: 1 Chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã chọn vào lưu trữ trong giỏ hàng 2 Hệ thống hiển thị thông tin sản phẩm đưa vào giỏ hàng 3 UC kết thúc 2 5 7 Thanh toán Tên Use-Case: Thanh toán ID: 7 Mức độ quan trọng: Cao Tác nhân chính: Khách thăm, Khách hàng Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách thăm ,Khách hàng Mô tả vắn tắt: Cho phép khách tạo đơn hàng để tiến hành thanh toán các sản phẩm trong giỏ hàng Khởi sự: Khách đã chọn sản phẩm vào giỏ hàng Các mối quan hệ: Kết hợp (Association): Khách hàng, khách thăm 31 Các luồng sự kiện chính: 1 Tại trang thanh toán form xuất hiện với thông tin đơn hàng 2 Khách thăm phải cập nhật các thông tin: Email, SĐT, địa chỉ giao hàng Nếu đã là khách hàng thông tin sẽ được cập nhật tự động, có thể thay đổi địa chỉ nếu muốn 3 Khách chọn một trong hai phương thức thanh toán 4 Chọn đặt hàng Nếu nội dung hợp lệ thì thực hiện bước 5, nếu sai thì thực hiện sáng luồng rẽ nhánh 5 Hệ thống thông báo đặt hàng thành công và chờ xác nhận thanh toán Nếu chọn thức nhận hàng-giao tiền thì sẽ chờ admin xác nhận và chuyển sang trạng thái ”Xác nhận thanh toán-chờ giao hàng” Nếu chọn thanh toán là chuyển khoản, sau khi chuyển khoản thành công trạng thái “Xác nhận thanh toán-chờ giao hàng” sẽ tự động cập nhật 6 UC kết thúc Các luồng sự kiện con: Các luồng sự kiện thay thế/ngoại lệ: 1 Hệ thống hiển thị lại form nhập thông tin và các trường nhập sai 2 Khách hàng nhập lại thông tin 3 Quay lại bước 4 của luồng sự kiện chính 4 UC kết thúc 32 2 5 8 Kiểm tra đơn hàng Tên Use-Case: Kiểm tra đơn hàng ID:8 Mức độ quan trọng: Cao Tác nhân chính: Admin(Bộ phận kinh doanh) Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Admin(Bộ phận kinh doanh) Mô tả vắn tắt: Cho phép nhân viên kinh doanh kiểm tra và xác nhận thông tin đơn hàng Khởi sự: Khách đã đặt hàng Các mối quan hệ: Kết hợp (Association): Admin Các luồng sự kiện chính: 1 Nhân viên kinh doanh kiểm tra đơn hàng 2 Hệ thống hiển thị thông tin đơn hàng 3 Nhân viên xác nhận thông tin trên đơn hàng 4 Kết thúc UC Các lu ồ ng s ự ki ệ n con: Các lu ồ ng s ự ki ệ n thay th ế /ngo ạ i l ệ : 33 2 5 9 Giao hàng Tên Use-Case: Giao hàng ID: 9 Mức độ quan trọng: Cao Tác nhân chính: Bộ phận chuyển hàng Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Bộ phận chuyển hàng Mô tả vắn tắt: : Cho phép nhân viên nhận đơn hàng và thực hiện giao hàng theo yêu cầu Khởi sự: Tình trạng đơn hàng đã được xác nhận thanh toán Các mối quan hệ: Kết hợp (Association): Bộ phân chuyển hàng Các luồng sự kiện chính: 1 Nhân viên nhận được đơn hàng cần thực hiện 2 Lấy xác nhận của khách hàng 3 Kết thúc UC 34 2 6 Biểu đồ UC chi tiết 2 6 1 Biểu đồ UC đăng kí, đăng nhập 2 6 2 Biểu đồ UC tìm kiếm 35 2 6 3 Biểu đồ UC nhập-xuất hàng 2 6 4 Biểu đồ UC mua hàng 36 2 7 Biểu đồ hoạt động 2 7 1 Đăng ký thành viên 2 7 2 Đăng nhập hệ thống 37 2 7 3 Tìm kiếm sản phẩm 2 7 4 Xem sản phẩm 38 2 7 5 Xem giỏ hàng 2 7 6 Quản lý thông tin cá nhân 39 2 7 7 Giao hàng 2 8 Biểu đồ tuần tự 2 8 1 Đăng ký thành viên 40 2 8 2 Tìm kiếm 2 8 3 Thanh toán 41 2 8 4 Nhập hàng 2 8 5 Giao hàng 42 2 9 Biểu đồ lớp 2 10 Thiết kế CSDL 2 10 1 Xác định các thực thể - Users (ID, name, username, password, remember_token level, address, phone, email) - Transactions (ID, status, user_id, user_email, user_phone, user_address, amount, payment ) - Orders (ID, transaction_id, product_id, product_name, product_qty, product_price, amount, status) - Slides (ID, name, image, description, user_id) - Contacts (ID, address, email, hotline) - Cates (ID, name, alias, description) - Products (ID, name, alias, price, description, image, discount, discount_percent buyed, total, user_id, cate_id) - Product_images (ID, image, product_id) - Gadget_cates (ID, name, alias, description) 43 - Gadgets (ID, name, alias, price, description, image, discount, discount_percent, buyed, total, user_id, cate_id) - Gadgets _images (ID, image, gadget_id) 2 10 2 Mô tả chi tiết các thực thể Table : Users Key Field name Type Lenght Description Constraint PK ID Int 10 name Varchar 255 Họ tên user username Varchar 255 Tên đăng nhập password Varchar 60 Mật khẩu đăng nhập level Varchar 255 Cấp độ user email Varchar 255 Email user address Varchar 255 Địa chỉ user phone Varchar 255 Số điện thoại user remember_token varchar 60 Dùng để chứng thực user Table : Transactions Key Field name Type Lenght Description Constraint PK ID int 10 status int 11 Trạng thái giao dịch user_id int 11 ID của khách hàng user_name Varchar 255 Tên khách user_email Varchar 255 Email khách user_phone varchar 11 SDT khách user_address Varchar 255 Địa chỉ khách amount int 255 Tổng tiền thanh toán payment int 255 Hình thức thanh toán 44 Table : Orders Key Field name Type Lenght Description Constraint PK ID int 10 FK transaction_id int 100 Giao dịch tương ứng FK product_id Varchar 255 Id sản phẩm product_name Varchar 255 Tên sản phẩm product_image Varchar 255 Ảnh sản phẩm product_qty int 11 Số lượng sản phẩm product_price int 255 Giá sản phẩm amount int 255 Tiền của đơn hàng status int 11 Trạng thái đơn hàng Table : Slides Key Field name Type Lenght Description Constraint PK ID int 10 name Varchar 255 Tên slide image Varchar 255 Ảnh slide description Varchar 255 Mô tả về slide FK user_id int 10 Admin đã nhập Table : Contacts Key Field name Type Lenght Description Constraint PK ID int 10 address Varchar 255 email Varchar 255 hotline Varchar 255 45 Table : Cates Key Field name Type Lenght Description Constraint PK ID int 10 name Varchar 255 Tên loại sản phẩm alias Varchar 255 Tên không dấu description Varchar 255 Mô tả thêm Table : Products Key Field name Type Lenght Description Constraint PK ID int 10 name Varchar 255 Tên sản phẩm alias Varchar 255 Tên không dấu price int 11 Giá sản phẩm description Varchar 255 Mô tả chi tiết image Varchar 255 Ảnh chính sản phẩm discount int 11 Giảm giá theo số tiền discount_percent int 11 Giảm giá theo phần trăm buyed int 11 Tổng lượt khách đã mua total int 11 Tổng sản phầm FK user_id int 10 Admin xử lý FK cate_id int 10 Thể loại tương ứng Table : Product_images Key Field name Type Lenght Description Constraint PK ID int 10 image Varchar 255 Ảnh chi tiết FK product_id int 10 Sản phẩm tương ứng 46 Table : Gadget_cates Key Field name Type Lenght Description Constraint PK ID int 10 name Varchar 255 Tên loại phụ kiện alias Varchar 255 Tên không dấu description Varchar 255 Mô tả thêm Table : Gadgets Key Field name Type Lenght Description Constraint PK ID int 10 name Varchar 255 Tên phụ kiện alias Varchar 255 Tên không dấu price int 11 Giá phụ kiện description Varchar 255 Mô tả chi tiết image Varchar 255 Ảnh chính phụ kiện discount int 11 Giảm giá theo số tiền discount_percent int 11 Giảm giá theo phần trăm buyed int 11 Tổng lượt khách đã mua total int 11 Tổng phụ kiện FK user_id int 10 Admin xử lý FK cate_id int 10 Thể loại tương ứng Table : Gadget_images Key Field name Type Lenght Description Constraint PK ID int 10 image Varchar 255 Ảnh chi tiết FK product_id int 10 Phụ kiện tương ứng 47 2 11 Lược đồ liên kết giữa các bảng 48 CHƯƠNG 3: CHƯƠNG TRÌNH THỬ NGHIỆM 3 1 Cài đặt hệ thống Hệ thống được chạy trên môi trường web, được viết bằng Framework Laravel 5 x với giao diện Metro UI và CSDL được quản lý và lưu trữ bằng MySQL 3 2 Một số giao diện chính 3 2 1 Giao diện trang chủ 49 3 2 2 Giao diện trang thể loại 3 2 3 Giao diện trang chi tiết 50 3 2 4 Giao diện trang tìm kiếm 3 2 5 Giao diện trang giỏ hàng 51 3 2 6 Giao diện trang thanh toán trực tuyến 3 2 7 Giao diện trang thông tin khách hàng 52 3 2 8 Giao diện trang theo dõi đơn hàng 3 2 9 Giao diện trang quản lý thành viên 53 3 2 10 Giao diện trang quản lý khách hàng 3 2 11 Giao diện trang quản lý giao dịch 54 3 2 12 Giao diện trang quản lý đơn hàng 3 2 13 Giao diện trang xuất hóa đơn 55 3 2 14 Giao diện trang quản lý sản phẩm 3 2 15 Giao diện trang quản lý phụ kiện 56 3 2 16 Giao diện trang quản lý slide 3 2 17 Giao diện trang quản lý liên hệ 57 PHẦN 3 KẾT LUẬN 1 1 Kết quả đạt được - Đã sử dụng được các công cụ hổ trợ phát triển hệ thống StarUML, EA, các công cụ hổ trợ lập trình - Chương trình demo đã đáp ứng được các nhu cầu của việc phân tích và thiết kế - Xây dựng được website thương mại điện tử, có thể phát triển chương trình trong thực tế 1 2 Hạn chế Mặc dù đã hệ thống đã hoàn thành, nhưng nó vẫn còn nhiều mặt hạn chế và vấn đề tồn tại Trong thời gian tới em sẽ cố gắng khắc phục các hạn chế và bổ sung thêm những chức năng mới cho hệ thống 1 3 Hướng phát triển của đề tài Với tính cần thiết của đề tài, trong thời gian tới có thể nghiên cứu xây dựng hoàn chỉnh hệ thống website thương mại điện tử hoàn chỉnh 58 PHẦN 4 TÀI LIỆU THAM KHẢO [1] Trang chủ của Laravel https://laravel com/ [2] Trang học lập trình trực tuyến stackoverflow https://stackoverflow com/ [3] Trang học lập trình trực tuyến W3School https://www w3schools com/ [4] Trang web http://php net/ [5] Trang web http://www uml-diagrams org/ [6] Trang web https://metroui org ua/ [7] Ebook: “Learning UML 2 0” 59 NHẬN XÉT CỦA GIẢNG VIÊN Giảng viên hướng dẫn Sinh viên thực hiện ThS Trần Thị Diệu Linh Võ Duy Phước Giảng viên chấm 1 Giảng viên chấm 2 ThS Hồ Tuấn Anh ThS Đỗ Quang Khôi

NỘI DUNG NGHIÊN CỨU

VÀ NỀN TẢNG XÂY DỰNG HỆ THỐNG WEBSITE 1.1 Tổng quan về thương mại điện tử

1.1.1 Khái niệm thương mại điện tử

Thương mại điện tử (TMĐT) là việc tiến hành một phần hay toàn bộ hoạt động thương mại bằng những phương tiện điện tử TMĐT vẫn mang bản chất như các hoạt động thương mại truyền thống Tuy nhiên, thông qua các phương tiện điện tử mới, các hoạt động thương mại được thực hiện nhanh hơn, hiệu quả hơn, giúp tiết kiệm chi phí và mở rộng không gian kinh doanh

TMĐT cũng được biết tới như một phương thức kinh doanh hiệu quả từ khi Internet hình thành và phát triển Chính vì vậy, nhiều người hiểu TMĐT theo nghĩa cụ thể hơn là giao dịch thương mại, mua sắm qua Internet và mạng

1.1.2 Lợi ích của thương mại điện tử Đối với người tiêu dùng, TMĐT đem lại lợi ích rất phong phú Mua sắm trực tuyến tiết kiệm thời gian, cung cấp một lựa chọn sản phẩm lớn hơn và cho phép tiết kiệm chi phí , giá sản phẩm và chi phí đi lại Đối với các nhà kinh doanh, TMĐT giúp người kinh doanh sử dụng môi trường mạng trong việc tìm kiếm đối tác, nắm bắt được thông tin trên thị trường, giảm chi phí tiếp thị và giao dịch nhằm mở rộng qui mô sản xuất hoạt động kinh doanh và nâng cao lợi nhuận

1.1.3 Hệ thống thanh toán điện tử tự động

Thương mại điện tử chỉ có thể thực hiện một cách trọn vẹn nếu có một hệ thống thanh toán điện tử tự động Nếu không có hệ thống này thì tính cách thương mại sẽ bị giảm thấp và chỉ mang tính ứng dụng trao đổi thông tin Vì vậy, việc tích hợp hệ thống thanh toán tự động là hết sức cần thiết

1.2 Ngôn ngữ lập trình PHP

1.2.1 Giới thiệu ngôn ngữ PHP

PHP là một ngôn ngữ lập trình được sử dụng để viết ở phía máy chủ (lập trình web) Hiện nay có rất nhiều ngôn ngữ có thể viết ở máy chủ như C#, Java, Python và PHP chính là một trong những ngôn ngữ của nhóm này.

CƠ SỞ LÝ THUYẾT

Tổng quan về thương mại điện tử

1.1.1 Khái niệm thương mại điện tử

Thương mại điện tử (TMĐT) là việc tiến hành một phần hay toàn bộ hoạt động thương mại bằng những phương tiện điện tử TMĐT vẫn mang bản chất như các hoạt động thương mại truyền thống Tuy nhiên, thông qua các phương tiện điện tử mới, các hoạt động thương mại được thực hiện nhanh hơn, hiệu quả hơn, giúp tiết kiệm chi phí và mở rộng không gian kinh doanh

TMĐT cũng được biết tới như một phương thức kinh doanh hiệu quả từ khi Internet hình thành và phát triển Chính vì vậy, nhiều người hiểu TMĐT theo nghĩa cụ thể hơn là giao dịch thương mại, mua sắm qua Internet và mạng

1.1.2 Lợi ích của thương mại điện tử Đối với người tiêu dùng, TMĐT đem lại lợi ích rất phong phú Mua sắm trực tuyến tiết kiệm thời gian, cung cấp một lựa chọn sản phẩm lớn hơn và cho phép tiết kiệm chi phí , giá sản phẩm và chi phí đi lại Đối với các nhà kinh doanh, TMĐT giúp người kinh doanh sử dụng môi trường mạng trong việc tìm kiếm đối tác, nắm bắt được thông tin trên thị trường, giảm chi phí tiếp thị và giao dịch nhằm mở rộng qui mô sản xuất hoạt động kinh doanh và nâng cao lợi nhuận

1.1.3 Hệ thống thanh toán điện tử tự động

Thương mại điện tử chỉ có thể thực hiện một cách trọn vẹn nếu có một hệ thống thanh toán điện tử tự động Nếu không có hệ thống này thì tính cách thương mại sẽ bị giảm thấp và chỉ mang tính ứng dụng trao đổi thông tin Vì vậy, việc tích hợp hệ thống thanh toán tự động là hết sức cần thiết.

Ngôn ngữ lập trình PHP

1.2.1 Giới thiệu ngôn ngữ PHP

PHP là một ngôn ngữ lập trình được sử dụng để viết ở phía máy chủ (lập trình web) Hiện nay có rất nhiều ngôn ngữ có thể viết ở máy chủ như C#, Java, Python và PHP chính là một trong những ngôn ngữ của nhóm này

PHP có cú pháp đơn giản, tốc độ nhanh và nhỏ gọn, dễ học và thời gian để tiếp cận PHP ngắn hơn so với các ngôn ngữ lập trình khác nên hiện nay PHP đang chiếm số lương lập trình viên tương đối lớn Hiện PHP có rất nhiều các CMS mã nguồn mở như WordPress, OpenCart, NukeViet nên nó rất đa dạng và đáp ứng hầu hết các website thông thường từ blog cá nhân cho đến website giới thiệu công ty và bán hàng

1.2.2 Cấu trúc của một trang PHP

Trang PHP đơn giản là một trang văn bản với phần mở rộng là php, gồm có 3 phần:

 HTML (Hypertext Markup Language) là ngôn ngữ định dạng văn bản siêu liên kết Sự định dạng dựa trên các Tag hoặc các đoạn mã đặc biệt để đánh dấu một văn bản, một file ảnh,…giúp cho web Browser thông dịch và hiển thị chúng lên màn hình của bạn HTML có những phần mở rộng rất quan trọng cho phép những liên kết Hypertext từ một tài liệu này đến một tài liệu khác(có thể là một đoạn text, cũng có thể là một văn bản,…)

Cấu trúc cơ bản của một file HTML như sau:

Theo cấu trúc đã trình bày như trên ta thấy một file HTML chia thành hai phần cơ bản:

Phần đầu: Được tạo bởi Tag , : tại đây định nghĩa trên tiêu đề của trang web Phần này được hiển thị trên thanh tiêu đề của trang web được khai báo giữa hai Tag ,

Phần thân: Được khai báo bởi Tag , : Trình bày nội dung thể hiện trên trang web Các nội dung cần hiển thị hoặc xử lý trên trang web sẽ được định nghĩa trong phần Body của HTML Để cho các trang web được sinh động hơn ngôn ngữ HTML còn bao gồm rất nhiều Tag dùng cho việc định trang, liên kết các trang với nhau, chèn hình ảnh vào trang…HTML quy định cú pháp không phân biệt chữ hoa và chữ thường và không có khoản trắng trong định nghĩa tên thẻ

Ta cũng có thể thấy rằng một trang PHP cũng chính là một trang HTML có nhúng mã PHP ở bên trong, có phần mở rộng là php Khi thêm một đoạn script vào HTML, PHP dùng dấu chấm phân cách để phân biệt giữa đoạn HTML và đoạn PHP

Khi người sử dụng gọi trang PHP, Web Server sẽ triệu gọi PHP Engine để thông dịch dịch trang PHP và trả kết quả cho người dùng như hình bên dưới :

Hệ quản trị cơ sở dữ liệu MYSQL

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở rất phổ biến và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ Nó có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novell NetWare, SGI Irix, Solaris, SunOS,…

MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL)

MySQL được sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngôn ngữ khác, nó làm nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl

1.3.2 Một số đặc điểm của MySQL

MySQL là một phần mềm quản trị CSDL dạng server-based (gần tương đương với SQL Server của Microsoft)

MySQL quản lý dữ liệu thông qua các CSDL, mỗi CSDL có thể có nhiều bảng quan hệ chứa dữ liệu

MySQL có cơ chế phân quyền người sử dụng riêng, mỗi người dùng có thể được quản lý một hoặc nhiều CSDL khác nhau, mỗi người dùng có một tên truy cập (user name) và mật khẩu tương ứng để truy xuất đến CSDL

Khi ta truy vấn tới CSDL MySQL, ta phải cung cấp tên truy cập và mật khẩu của tài khoản có quyền sử dụng CSDL đó Nếu không, chúng ta sẽ không làm được gì cả giống như quyền chứng thực người dùng trong SQL Server vậy Tốc độ: MySQL rất nhanh Những nhà phát triển cho rằng MySQL là cơ sở dữ liệu nhanh nhất mà bạn có thể có

Dễ sử dụng: MySQL tuy có tính năng cao nhưng thực sự là một hệ thống cơ sở dữ liệu rất đơn giản và ít phức tạp khi cài đặt và quản trị hơn các hệ thống lớn

Giá thành: MySQL là miễn phí cho hầu hết các việc sử dụng trong một tổ chức

Hỗ trợ ngôn ngữ truy vấn: MySQL hiểu SQL là ngôn ngữ của sự chọn lựa cho tất cả các hệ thống cơ sở dữ liệu hiện đại, có thể truy cập MySQL bằng cách sử dụng các ứng dụng mà hỗ trợ ODBC (Open Database Connectivity - một giao thức giao tiếp cơ sở dữ liệu được phát triển bởi Microsoft)

Năng lực: Nhiều client có thể truy cập đến server trong cùng một thời gian Các client có thể sử dụng nhiều cơ sở dữ liệu một cách đồng thời Bạn có thể truy cập MySQL tương tác với sử dụng một vài giao diện để bạn có thể đưa vào các truy vấn và xem các kết quả: các dòng yêu cầu của khách hàng, các trình duyệt Web…

Kết nối và bảo mật: MySQL được nối mạng một cách đầy đủ, các cơ sở dữ liệu có thể được truy cập từ bất kỳ nơi nào trên Internet do đó bạn có thể chia sẽ dữ liệu của bạn với bất kỳ ai, bất kỳ nơi nào Nhưng MySQL kiểm soát quyền truy cập cho nên người mà không nên nhìn thấy dữ liệu của bạn thì không thể nhìn được

Tính linh động: MySQL chạy trên nhiều hệ thống UNIX cũng như không phải UNIX chẳng hạn như Windows hay OS/2 MySQL chạy được các với mọi phần cứng từ các máy PC ở nhà cho đến các máy server

Sự phân phối rộng: MySQL rất dễ dàng đạt được, chỉ cần sử dụng trình duyệt web của bạn Nếu bạn không hiểu làm thế nào mà nó làm việc hay tò mò về thuật toán, bạn có thể lấy mã nguồn và tìm tòi nó Nếu bạn không thích một vài cái, bạn có thể thay đổi nó

Sự hỗ trợ: Bạn có thể tìm thấy các tài nguyên có sẵn mà MySQL hỗ trợ Cộng đồng MySQL rất có trách nhiệm Họ trả lời các câu hỏi trên mailing list thường chỉ trong vài phút Khi lỗi được phát hiện, các nhà phát triển sẽ đưa ra cách khắc phục trong vài ngày, thậm chí có khi trong vài giờ và cách khắc phục đó sẽ ngay lập tức có sẵn trên Internet

1.3.3 Hướng dẫn cài đặt Xampp

Bước1: Download tại https://www.apachefriends.org/download và tiến hành cài đặt như các chương trình thông thường

Bước 2: Sau khi tải file cài đặt về xong, hãy chạy nó, sau đó chọn Next

8 Ở phần chọn đường dẫn, bạn hãy chọn đường dẫn cần lưu cài đặt của XAMPP Lưu ý rằng đường dẫn này bạn phải nhớ vì khi cài đặt web lên localhost, bạn phải truy cập vào thư mục này Bạn nên để mặc định là c:\xampp Tiếp tục ấn Next Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP“

Và ấn Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP

Sau khi cài xong, ấn nút Finish để kết thúc cài đặt và mở bảng điều khiển của XAMPP Tuy nhiên, hãy khởi động lại máy sau khi cài đặt xong để tránh tình trạng không khởi động được localhost

Start Apache và MySQL trong XAMPP control panel

Sau khi khởi động xong, bạn hãy truy cập vào website với địa chỉ là http://localhost sẽ thấy nó hiển thị ra trang giới thiệu XAMPP như hình dưới

1.3.4 Tạo cơ sở dữ liệu MySQL với Xampp

Khi nhắc đến database, bạn phải nhớ là nó bao gồm 3 thành phần chính là:

 Mật khẩu của user database

Framework Laravel 5.x

Laravel là một PHP framework mã nguồn mở, được phát triển bởi Taylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiến trúc model-view-controller (MVC) Những tính năng nổi bật của Laravel bao gồm cú pháp dễ hiểu, rõ ràng, một hệ thống đóng gói modular và quản lý gói phụ thuộc, có nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

Mục đích, vai trò của các thư mục được mô tả chi tiết như sau:

 app là thư mục chứa tất cả các thư mục, các tập tin php, các class php, thư viện, models để xây dựng project o Console thư mục chứa các tập tin định nghĩa các lệnh thực thi trên

Artisan o Exception thư mục chứa các tập tin quản lý, điều hướng lỗi o Http

 Controllers là thư mục chứa các tập tin controllers

 Middleware là thư mục chứa các tập tin lọc và ngăn chặn các requests

 Kernel.php là tập tin cấu hình, định nghĩa Middleware hoặc nhóm Middleware o routes.php lưu trữ toàn bộ route trong ứng dụng để giúp Laravel biết cách kết nối khi có yêu cầu, theo hàm khai sẵn, controller và action o Providers chứa các providers nâng cao

 bootstrap thư mục chứa tập tin điều hướng khởi động hệ thống, thường thì chúng ta sẽ không làm gì đến nó

 config chứa mọi tập tin cấu hình của Laravel

 database chứa các thư mục tập tin về CSDL o migrations chứa các tập tin định nghĩa khởi tạo và sử dụng bảng o seeds chứa các tập tin định nghĩa dữ liệu insert vào database

 public nơi chứa các tập tin css, js, image

 resources o views chứa những file mẫu HTML của bạn mà được sử dụng bởi controller hay route o lang chứa những file PHP chứa mãng của những chuỗi cho phép dễ dàng xác định vị trí của ứng dụng Mặc định thư mục này chứa những dòng ngôn ngữ cho việc phân trang và chứng thực form người dùng

 storage chứa các tập tin hệ thống như upload, cache, session, cookie, log

 tests chứa các tập tin định nghĩa tests

 vendor thư mục của composer

 env và env.example là 2 tập tin cấu hình chính của laravel như key app, tên app, url app, email, env mode, CSDL hay bật tắt debug

 composer.json tập tin của composer

 server.php là tập tin để artisan trỏ đến tạo server khi gõ lệnh php artisan serve

 artisan tập tin thực thi lệnh của Laravel, cũng là tập tin mà chúng ta tương tác rất nhiều

1.4.3 Composer - công cụ quản lý thư viện hữu ích a) Composer là gì ?

Composer là một công cụ quản lý các thư viện trong PHP, công cụ này giúp ta tiết kiệm khá nhiều thời gian với các gói thư viện cần thiết mà project của bạn cần sử dụng, bạn chỉ cần khai báo nó, composer sẽ tự động tải code của các thư viện về thông qua một server cộng đồng b) Lợi ích của composer

Trước kia, khi không có composer, mỗi khi muốn sử dụng thư viện nào, bạn sẽ phải download code của thư viện đó về đặt vào project, điều này sinh ra những bất lợi sau:

1 Dung lượng project của bạn sẽ lớn vì cần phải cộng thêm code của các thư viện

2 Nếu bạn sử dụng git thì khi update các thư viện, bạn phải tạo các commit, mà thực sự các commit đó không phải của bạn

3 Khó khăn trong việc update version của các thư viện

4 Nếu thư viện A, có sử dụng thư viện B, thư viện B sử dụng thư viện C, thì nếu một trong các thư viện này có update, bạn sẽ phải tự mình lần mò về nguồn cội của nó để update, rất phức tạp

Composer ra đời để giải quyết các vấn đề này Với composer, bạn sẽ cần khai báo tên và version của các thư viện mà bạn có sử dụng mà không cần phải tự tay chép code của nó vào project, composer sẽ tự động tìm và tải thư viện mà bạn cần, nếu trong thư viện đó có dùng các thư viện khác thì nó cũng sẽ tải các thư viện khác về, nó đệ quy cho đến khi tải đủ các thư viện

1.4.4 Cài đặt a) Yêu cầu cấu hình khi cài đặt Laravel Để có thể cài Laravel, yêu cầu bắt buộc như sau:

 Tokenizer PHP Extension b) Download và cài đặt Laravel trên windows

Bước 1: Kiểm tra cài đặt biến môi trường cho php và composer hay chưa?

Bạn mở cmd lên và gõ 2 lệnh php -v và composer -v nếu hiện lên thông báo

‘"***’ is not recognized as an internal or external command, operable program or batch file." có nghĩa là máy của bạn chưa được cài đặt và bạn cần làm những bước phía dưới và ngược lại thì không cần

Bước 2: Cài đặt biến môi trường cho php

Thiết lập môi trường: Để thiết lập biến môi trường chúng ta làm như sau:

 Nhấn Windows R, nhập vào SystemPropertiesAdvanced rồi enter

 Trong hộp thoại hiện ra, chọn nút Enviroment Variables

 Trong hộp thoại mới, nhìn vào khung System variables, tìm Variable

Path, chọn và nhấn nút Edit:

 Trong hộp thoại mới, nhập vào vị trí cuối cùng chứ không được ghi đè

Cài đặt môi trường: Chúng ta có hai cách sau :

Cách 1: Cài đặt biến môi trường cho composer từ file Composer-Setup.exe

Bạn vào đường dẫn https://getcomposer.org/ Composer-Setup.exe để tải file về, sau đó chạy lên và thực hiện các bước sau:

Giao diện lúc chạy lên:

Chọn như trong hình rồi click Next

Chọn đường dẫn đến folder PHP của bạn và click Next để cài đặt

Cách 2: Cài đặt Composer từ file composer.phar

Bạn vào https://getcomposer.org/composer.phar để download về, sau đó lưu vào thư mục chứa file php.exe, tiếp theo mở cmd và cd đến thư mục chứa file php.exe và gõ lệnh: echo @php "%~dp0composer.phar" %*>composer.bat

Bước 3: Download và cài đặt laravel : có 2 cách

Cách 1: Tự download và cài đặt:

Trước hết truy cập đường dẫn https://github.com/laravel/laravel/releases chọn phiên để tải về và giải nén vào thư mục cần tạo, sau đó mở cmd rồi cd vào thư mục chứa laravel và chạy lệnh: composer install Sau khi cài đặt hoàn tất chạy tiếp lệnh : php artisan key:generate

Bạn chạy lệnh sau: composer create-project laravel/laravel “đường dẫn đến thư mục sẽ chứa project" "phiên bản" prefer-dist

Bước 4: Chạy laravel : Hiện tại có 3 cách chạy chính:

Cách 1: Chạy bằng đường dẫn localhost Ví dụ source của bạn nằm trong thư mục htdocs/laravel của xampp thì chạy http://localhost/laravel/public/ Nhưng cách này không được khuyến khích

Cách 2: Sử dụng command line của laravel hỗ trợ, bạn cd tới thư mục

Laravel và chạy lệnh sau: php artisan serve Bạn sẽ nhận được thông báo tương tự như sau:

Laravel development server started on http://localhost:8000 Ở ví dụ trên đường dẫn sẽ là http://localhost:8000, bạn sẽ truy cập trên trình duyệt bằng đường dẫn này

Cách 3: Sử dụng lệnh của php hỗ trợ, bạn cd tới thư mục public của laravel và chạy lệnh sau php -S domain:port

Sau đó vào theo đường dẫn http://domain:port Đây có lẽ cách này là ngắn gọn nhất, làm việc được với cả những khi bạn chỉ cài php, mysql mà không qua phần mềm nào Và đây là kết quả:

1.4.5.1 Tổng quan về mô hình MVC

Mô hình MVC nói đơn giản và dễ hiểu là một mô hình tổ chức lập trình theo một quy cách tách biệt giữa giao diện, cơ sở dữ liệu và các phương thức xử lý code Đơn giản hơn bạn có thể hình dung một ứng dụng nhỏ được viết bởi mô hình MVC được tách biệt ra làm 3 phần cụ thể để xử lý và thao tác người lập trình có thể chỉnh sửa code từng phần riêng biệt mà không sợ bị nhầm lẫn khi làm việc

Chi tiết hơn MVC chính là 3 chữ viết tắt đầu tiên của :

Thiết kế website với giao diện MetroUI

1.5.1 Website metro UI là gì ?

Ngày nay khi thiết kế website mang phong cách cổ điển đang dần lạc hậu thì thay vào đó là sự lên ngôi của phong cách thiết kế website metro UI Những giao diện web metro UI mang phong cách thanh lịch, đơn giản và hiện đại Nó mang đến sự khác biệt cho trải nghiệm người dùng, dễ dàng tương tác giữa người dùng và website Đó là những thiết kế giao diện vuông đơn giản Giống như giao diện web metro UI của Windows 8 với nguyên tắc thiết kế chính là tập trung vào các nội dung của ứng dụng, dựa nhiều hơn vào kiểu chữ và ít hơn về đồ họa

1.5.2 Đặc điểm thiết kế website Metro UI Đơn giản, hiện đại: Trong thiết kế này sẽ loại bỏ hết tất cả những yếu tố thừa không truyền tải được thông tin Các thứ được loại bỏ bao gồm cả những hình ảnh đồ họa đẹp mắt, đường viền, hiệu ứng 3d Một thiết kế website metro UI nên đơn giản sử dụng các yếu tố: hình ảnh , đường viền,…

Chuyển động mượt mà: Các chuyển động không cần phải quá nhanh mà cần có sự mượt mà và chiều sâu giúp người dùng cảm giác được nó một cách sống động Typography: Cảm hứng thiết kế dựa trên sự sắp đặt các font chữ một cách nghệ thuật Đảm bảo sự truyền tải thông tin một cách hiệu quả nhất, nhấn mạnh những nội dung cần nhấn mạnh

Tập trung vào nội dung: Nó là kết quả của nguyên lý thứ nhất và nguyên lý thứ ba Loại bỏ những bước trung gian và những gì không đem lại giá trị thiết thực giúp cho người dùng giao tiếp trực tiếp với nội dung

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Các nhóm chức năng của hệ thống

- Nhóm chức năng đăng ký, đăng nhập

- Nhóm chức năng xem thông tin: xem thông tin sản phẩm, giỏ hàng, thông tin cá nhân, tình trạng đơn hàng

- Nhóm chức năng quản lý thông tin: quản lý thông tin cá nhân, danh sách thành viên, quản lý danh mục sản phẩm, quản lý đơn hàng, giao dịch

- Nhóm chức năng nhập, xuất hàng và cập nhật thông tin lên website

- Nhóm chức năng mua hàng, tiếp nhận - xử lý và thanh toán đơn hàng.

Các tác nhân của hệ thống

- Khách thăm: là người ghé qua website, xem thông tin sản phẩm

- Khách hàng: là những khách thăm đã đăng kí thành viên của website

- Người quản trị (Super admin): điều hành, quản lý và theo dõi mọi hoạt động của hệ thống

- Người quản trị (Bộ phận kinh doanh): tiếp nhận đơn hàng, kiểm tra thông tin, liên hệ với khách hàng để khẳng định các thông tin trên đơn hàng

- Người quản trị (Bộ phận kho): kiểm tra hàng trong kho, nhập-xuất hàng và cập nhật lên website

- Hệ thống thanh toán: nơi khách hàng thực hiện thanh toán

- Bộ phận chuyển phát hàng: nhận hàng từ bộ phận kho và chuyển hàng đến cho khách hàng theo đơn hàng.

Xác định UC của các tác nhân

- Tìm kiếm, xem, mua hàng

- Xem, sửa, xóa giỏ hàng

- Tìm kiếm, xem, mua hàng ,theo dõi đơn hàng

- Xem, sửa thông tin cá nhân

- Xem, sửa, xóa giỏ hàng

2.3.3 Tác nhân người quản trị (Super Admin)

- Thêm, sửa, xóa thông tin tài khoản khách hàng, admin

2.3.4 Tác nhân người quản trị (Bộ phận kinh doanh)

- Xác nhận thông tin đơn hàng

- Quản lý các giao dịch

2.3.5 Tác nhân người quản trị (Bộ phận kho)

- Kiểm tra hàng trong kho

- Nhập-xuất hàng, cập nhật lên website

2.3.6 Tác nhân hệ thống thanh toán

2.3.7 Tác nhân bộ phận chuyển phát hàng

- Nhận hàng từ bộ phận kho

Biểu đồ UC hệ thống

Đặc tả các UC

Tên Use-Case: Đăng ký ID: 1 Mức độ quan trọng: Cao

Tác nhân chính:Khách thăm Kiểu Use-Case: Chi tiết, cần thiết

Những người tham gia và quan tâm: Khách thăm

Mô tả vắn tắt: Khách thăm đăng ký thành viên trên website

Khởi sự: Khách ghé thăm website

Kết hợp (Association): Khách thăm

Mở rộng (Extend): Khách đăng ký trên website

Các luồng sự kiện chính:

1 Khách thăm chọn mục đăng ký thành viên

2 Form đăng ký thành viên hiển thị

3 Khách thăm nhập thông tin cá nhân vào form và đăng ký

4 Hệ thống báo kết quả quá trình nhập thông tin cá nhân Nếu thông tin nhập không chính xác thì thực hiện luồng rẽ nhánh Nếu nhập chính xác hệ thống thông báo thành công và cập nhật thông tin của khách xem vào CSDL

Các luồng sự kiện con:

Các luồng sự kiện thay thế/ngoại lệ:

Nếu có sai sót khi nhập thông tin hệ thống báo lỗi và yêu cầu nhập lại Nếu không đồng ý, chọn hủy UC kết thúc

Tên Use-Case: Đăng nhập ID: 2 Mức độ quan trọng: Cao

Tác nhân chính:Khách hàng, SuperAdmin

Kiểu Use-Case: Chi tiết, cần thiết

Những người tham gia và quan tâm: Khách hàng, Superadmin, Admin

Mô tả vắn tắt: Khách hàng đăng nhập vào website xem, mua, quản lý đơn hàng Super Admin, Admin đăng nhập để quản lý hệ thống

Khởi sự: Khách hàng, Superadmin, Admin chưa đăng nhập vào hệ thống

Bao hàm (Include):Khách, Admin, SuperAdmin

1 Khách hàng, Superadmin, Admin chọn chức năng đăng nhập

2 Form đăng nhập hiển thị

3 Nhập tên đăng nhập, mật khẩu vào form

4 Hệ thống kiểm tra tên đăng nhập, mật khẩu, cấp độ tương ứng, nếu tồn tại trên hệ thống sẽ báo đăng nhập thành công Nếu nhập sai thì chuyển sang luồng rẽ nhánh

- Hệ thống thông báo quá trình đăng nhập không thành công

- Yêu cầu nhập lại tên và mật khẩu

- Nếu đồng ý thì quay về bước 2 của luồng sự kiện chính, nếu không đồng ý UC kết thúc

Tên Use-Case: Tìm kiếm ID:3 Mức độ quan trọng: Cao Tác nhân chính:Khách thăm, Khách hàng Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách thăm ,Khách hàng

Mô tả vắn tắt: Cho phép khách tìm kiếm các sản phẩm

Kết hợp (Association): Khách hàng, Admin

Mở rộng (Extend): Khách hàng ,admin đăng nhập trên website

1 Người sử dụng gõ thông tin vào ô tìm kiếm

3 Hệ thống báo kết quả tìm kiếm

2.5.4 Xem thông tin sản phẩm

Tên Use-Case: Xem thông tin sản phẩm ID:4 Mức độ quan trọng: Cao

Tác nhân chính:Khách thăm, Khách hàng Kiểu Use-Case: Chi tiết, cần thiết Những người tham gia và quan tâm: Khách thăm, Khách hàng

Mô tả vắn tắt: Cho phép khách xem chi tiết các sản phẩm có trên website

Kết hợp (Association): Khách thăm, khách hàng, admin

1 Khách chọn sản phẩm cần xem

2 Trang xem thông tin sản phẩm xuất hiện, hệ thống hiển thị thông tin chi tiết về sản phẩm đã chọn

2.5.5 Quản lý thông tin cá nhân

Tên Use-Case: Quản lý thông tin cá nhân ID:5 Mức độ quan trọng:Cao

Những người tham gia và quan tâm: Khách hàng, SuperAdmin, Admin

Mô tả vắn tắt: Cho phép khách hàng, SuperAdmin ,Admin xem, thay đổi thông tin cá nhân

Khởi sự: Khách hàng, SuperAdmin, Admin đã đăng nhập vào hệ thống

Kết hợp (Association): Khách hàng, Admin

1 Khách hàng, SuperAdmin, Admin chọn chức năng xem thông tin cá nhân

2 Hệ thống hiển thị form với các thông tin của thành viên hiện tại

3 Nếu khách hàng, SuperAdmin, Admin chọn chức năng sửa thông tin cá nhân

4 Hệ thống hiển thị form với các thông tin cũ của thành viên hiện tại

5 Thành viên nhập các thông tin mới

6 Nhấn nút sửa thông tin

7 Nếu việc cập nhật thành công thì thực hiện bước 6 Nếu sai thì thực hiện luồng rẽ nhánh

1 Hệ thống báo việc nhập dữ liệu không hợp lệ

2 Yêu cầu nhập lại thông tin

3 Quay lại bước 5 của luồng sự kiện chính

Tên Use-Case: Thêm vào giỏ hàng ID:6 Mức độ quan trọng: Cao

Tác nhân chính:Khách thăm ,Khách hàng Kiểu Use-Case: Chi tiết, cần thiết

Những người tham gia và quan tâm: Khách thăm ,Khách hàng

Mô tả vắn tắt: Cho phép khách hàng đưa sản phẩm đã chọn vào giỏ hàng

Khởi sự: Khách chọn được sản phẩm cần mua

Kết hợp (Association): Khách thăm, khách hàng

1 Chọn chức năng thêm vào giỏ hàng để đưa sản phẩm đã chọn vào lưu trữ trong giỏ hàng

2 Hệ thống hiển thị thông tin sản phẩm đưa vào giỏ hàng

Tên Use-Case: Thanh toán ID: 7 Mức độ quan trọng: Cao

Tác nhân chính: Khách thăm, Khách hàng

Những người tham gia và quan tâm: Khách thăm ,Khách hàng

Mô tả vắn tắt: Cho phép khách tạo đơn hàng để tiến hành thanh toán các sản phẩm trong giỏ hàng

Khởi sự: Khách đã chọn sản phẩm vào giỏ hàng

Kết hợp (Association): Khách hàng, khách thăm

1 Tại trang thanh toán form xuất hiện với thông tin đơn hàng

2 Khách thăm phải cập nhật các thông tin: Email, SĐT, địa chỉ giao hàng Nếu đã là khách hàng thông tin sẽ được cập nhật tự động, có thể thay đổi địa chỉ nếu muốn

3 Khách chọn một trong hai phương thức thanh toán

4 Chọn đặt hàng Nếu nội dung hợp lệ thì thực hiện bước 5, nếu sai thì thực hiện sáng luồng rẽ nhánh

5 Hệ thống thông báo đặt hàng thành công và chờ xác nhận thanh toán Nếu chọn thức nhận hàng-giao tiền thì sẽ chờ admin xác nhận và chuyển sang trạng thái ”Xác nhận thanh toán-chờ giao hàng” Nếu chọn thanh toán là chuyển khoản, sau khi chuyển khoản thành công trạng thái “Xác nhận thanh toán-chờ giao hàng” sẽ tự động cập nhật

1 Hệ thống hiển thị lại form nhập thông tin và các trường nhập sai

2 Khách hàng nhập lại thông tin

3 Quay lại bước 4 của luồng sự kiện chính

Tên Use-Case: Kiểm tra đơn hàng ID:8 Mức độ quan trọng: Cao

Tác nhân chính: Admin(Bộ phận kinh doanh)

Những người tham gia và quan tâm: Admin(Bộ phận kinh doanh)

Mô tả vắn tắt: Cho phép nhân viên kinh doanh kiểm tra và xác nhận thông tin đơn hàng

Khởi sự: Khách đã đặt hàng

1 Nhân viên kinh doanh kiểm tra đơn hàng

2 Hệ thống hiển thị thông tin đơn hàng

3 Nhân viên xác nhận thông tin trên đơn hàng

Tên Use-Case: Giao hàng ID: 9 Mức độ quan trọng: Cao Tác nhân chính: Bộ phận chuyển hàng Kiểu Use-Case: Chi tiết, cần thiết

Những người tham gia và quan tâm: Bộ phận chuyển hàng

Mô tả vắn tắt: : Cho phép nhân viên nhận đơn hàng và thực hiện giao hàng theo yêu cầu

Khởi sự: Tình trạng đơn hàng đã được xác nhận thanh toán

Kết hợp (Association): Bộ phân chuyển hàng

1 Nhân viên nhận được đơn hàng cần thực hiện

2 Lấy xác nhận của khách hàng

Biểu đồ UC chi tiết

2.6.1 Biểu đồ UC đăng kí, đăng nhập

2.6.2 Biểu đồ UC tìm kiếm

2.6.3 Biểu đồ UC nhập-xuất hàng

2.6.4 Biểu đồ UC mua hàng

Biểu đồ hoạt động

2.7.6 Quản lý thông tin cá nhân

Biểu đồ tuần tự

Thiết kế CSDL

2.10.1 Xác định các thực thể

- Users(ID, name, username, password, remember_token level, address, phone, email)

- Transactions (ID, status, user_id, user_email, user_phone, user_address, amount, payment )

- Orders(ID, transaction_id, product_id, product_name, product_qty, product_price, amount, status)

- Slides (ID, name, image, description, user_id)

- Contacts (ID, address, email, hotline)

- Cates(ID, name, alias, description)

- Products(ID, name, alias, price, description, image, discount, discount_percent buyed, total, user_id, cate_id)

- Product_images (ID, image, product_id)

- Gadget_cates (ID, name, alias, description)

- Gadgets (ID, name, alias, price, description, image, discount, discount_percent, buyed, total, user_id, cate_id)

- Gadgets _images (ID, image, gadget_id)

2.10.2 Mô tả chi tiết các thực thể

Key Field name Type Lenght Description Constraint

PK ID Int 10 name Varchar 255 Họ tên user username Varchar 255 Tên đăng nhập password Varchar 60 Mật khẩu đăng nhập level Varchar 255 Cấp độ user email Varchar 255 Email user address Varchar 255 Địa chỉ user phone Varchar 255 Số điện thoại user remember_token varchar 60 Dùng để chứng thực user

PK ID int 10 status int 11 Trạng thái giao dịch user_id int 11 ID của khách hàng user_name Varchar 255 Tên khách user_email Varchar 255 Email khách user_phone varchar 11 SDT khách user_address Varchar 255 Địa chỉ khách amount int 255 Tổng tiền thanh toán payment int 255 Hình thức thanh toán

FK transaction_id int 100 Giao dịch tương ứng

FK product_id Varchar 255 Id sản phẩm product_name Varchar 255 Tên sản phẩm product_image Varchar 255 Ảnh sản phẩm product_qty int 11 Số lượng sản phẩm product_price int 255 Giá sản phẩm amount int 255 Tiền của đơn hàng status int 11 Trạng thái đơn hàng

PK ID int 10 name Varchar 255 Tên slide image Varchar 255 Ảnh slide description Varchar 255 Mô tả về slide

FK user_id int 10 Admin đã nhập

PK ID int 10 address Varchar 255 email Varchar 255 hotline Varchar 255

PK ID int 10 name Varchar 255 Tên loại sản phẩm alias Varchar 255 Tên không dấu description Varchar 255 Mô tả thêm

PK ID int 10 name Varchar 255 Tên sản phẩm alias Varchar 255 Tên không dấu price int 11 Giá sản phẩm description Varchar 255 Mô tả chi tiết image Varchar 255 Ảnh chính sản phẩm discount int 11 Giảm giá theo số tiền discount_percent int 11 Giảm giá theo phần trăm buyed int 11 Tổng lượt khách đã mua total int 11 Tổng sản phầm

FK user_id int 10 Admin xử lý

FK cate_id int 10 Thể loại tương ứng

PK ID int 10 image Varchar 255 Ảnh chi tiết

FK product_id int 10 Sản phẩm tương ứng

PK ID int 10 name Varchar 255 Tên loại phụ kiện alias Varchar 255 Tên không dấu description Varchar 255 Mô tả thêm

PK ID int 10 name Varchar 255 Tên phụ kiện alias Varchar 255 Tên không dấu price int 11 Giá phụ kiện description Varchar 255 Mô tả chi tiết image Varchar 255 Ảnh chính phụ kiện discount int 11 Giảm giá theo số tiền discount_percent int 11 Giảm giá theo phần trăm buyed int 11 Tổng lượt khách đã mua total int 11 Tổng phụ kiện

FK user_id int 10 Admin xử lý

FK cate_id int 10 Thể loại tương ứng

PK ID int 10 image Varchar 255 Ảnh chi tiết

FK product_id int 10 Phụ kiện tương ứng

Lược đồ liên kết giữa các bảng

CHƯƠNG TRÌNH THỬ NGHIỆM

Cài đặt hệ thống

Hệ thống được chạy trên môi trường web, được viết bằng Framework Laravel 5.x với giao diện Metro UI và CSDL được quản lý và lưu trữ bằng MySQL.

Một số giao diện chính

3.2.2 Giao diện trang thể loại

3.2.3 Giao diện trang chi tiết

3.2.4 Giao diện trang tìm kiếm

3.2.5 Giao diện trang giỏ hàng

3.2.6 Giao diện trang thanh toán trực tuyến

3.2.7 Giao diện trang thông tin khách hàng

3.2.8 Giao diện trang theo dõi đơn hàng

3.2.9 Giao diện trang quản lý thành viên

3.2.10 Giao diện trang quản lý khách hàng

3.2.11 Giao diện trang quản lý giao dịch

3.2.12 Giao diện trang quản lý đơn hàng

3.2.13 Giao diện trang xuất hóa đơn

3.2.14 Giao diện trang quản lý sản phẩm

3.2.15 Giao diện trang quản lý phụ kiện

3.2.16 Giao diện trang quản lý slide

3.2.17 Giao diện trang quản lý liên hệ

Định dạng
Số trang	68
Dung lượng	3,69 MB