Tài liệu Xây dựng website bán hàng điện tử

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC ---------- BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI XÂY DỰNG WEBSITE BÁN HÀNG ĐIỆN TỬ Sinh viên thực hiện: Trần Hữu Thắng Lớp:18CNTT3 Giảng viên hướng dẫn: TS Trần Văn Hưng Đà Nẵng -2020 Lời Cảm Ơn Đầu tiên, em xin chân thành cảm ơn các thầy các cô trong khoa Tin học đã trang bị những kiến thức cho em trong suốt quá trình học tập tại Trường Đại học Sư phạm Đà Nẵng vừa qua. Chính nhờ công lao giảng dạy, chỉ bảo tận tình của các thầy các cô mà em mới có được những kiến thức chuyên ngành công nghệ thông tin để có thể thực hiện tiếp chặng đường học tập, vận dụng và sáng tạo ra những sản phẩm hữu ích góp phần phục vụ các lĩnh vực khác nhau. Thứ hai, em xin chân thành cảm ơn cán bộ hướng dẫn thầy Trần Văn Hưng người đã tận tình hướng dẫn, chỉ bảo cho em trong suốt quá trình thực hiện đề tài này. Mặc dù đã có nhiều cố gắng để hoàn thành đồ án nhưng trong phạm vi và khả năng cho phép, chắc chắn đồ án không tránh khỏi những thiếu sót. Em rất mong nhận được sự thông cảm, góp ý và tận tình chỉ bảo của quý thầy cô. Em xin chân thành cảm ơn mọi người! SVTH: 2 1. NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… …………………………………………………………………………… . Đà nẵng . Ngày… Tháng… Năm Giảng viên hướng dẫn (Ký và ghi rõ họ tên) SVTH: 3 2. LỜI CAM ĐOAN “Em xin cam đoan đề tài: “Thiết Kế Website Bán Hàng Điện Tử” là một công trình nghiên cứu độc lập dưới sự hướng dẫn của giáo viên hướng dẫn:TS Trần Văn Hưng . Ngoài ra không có bất cứ sự sao chép của người khác. Đề tài, nội dung báo cáo thực tập là sản phẩm mà em đã nỗ lực nghiên cứu trong quá trình học tập tại trường và trong công việc. Các số liệu, kết quả trình bày trong báo cáo là hoàn toàn trung thực, em xin chịu hoàn toàn trách nhiệm, kỷ luật của bộ môn và nhà trường đề ra nếu như có vấn đề xảy ra. SVTH: 4 3 MỤC LỤC LỜI CẢM ƠN…………………………………………………………………........2 1. NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN…………………………...….3 2. LỜI CAM ĐOAN……………………….……………………………………….4 3. MỤC LỤC……………...………………….………………………………….....5 4. MỞ ĐẦU…………………………………..………………………..………….10 1. Lý Do Chọn đề tài………………………………………………..……...11 2. Mục Tiêu của đề tài…………………………………………………..…12 3. Đối tượng và phạm vi đề tài…………………………………………….12 a. Đối tượng nghiên cứu……….……………………………………...12 b. Phạm vi đề tài……………………………………………………....12 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT………………………………………………13 1.1 Khái niệm fontend……………………………………..…………………….. 13 1.2 Khái niệm backend……………………………………..………………….….13 1.3 HTML…………………………………………………....……………………13 1.4 CSS & SCSS……………………………………………………………….....13 1.4.1 CSS……………………………….…………….…………………………..13 1.4.2 SCSS…………………………….…………….……………………………13 1.5 Bootstrap……….……………………………………………………….….....14 1.5.1 Khái niệm…………………………....……………..……………………….14 1.5.2 Vì sao nên sử dụng…….……..…….…………..…………………………...14 1.5.3 Cài đặt………………………………………..……………………………..14 1.6 Javascript……………………………………………………………….…….15 1.6.1 Khái niệm……………………………………..…………………………15 1.6.2 DOM………………………………………..……………………………15 1.6.3 Các kiểu dữ liệu……………………………...…....……………………..16 1.6.4 Biến và khai báo biến……………………..….…………………….........16 1.6.5 Function……………………………………...…………………………..17 SVTH: 5 1.6.6 Các Framework………………………..…………..……………………..17 1.7 Laravel Framework………………………………………………………….18 1.7.1 Khái Niệm về Framework………..……………………………………...18 1.7.2 Laravel Là gì…………………………………………..………...………18 1.7.3 Ưu điểm nhược điểm…………..…………...………….………......……18 1.7.4 Cài đặt………………………………..……...………….……...……..…18 1.7.5 Mô Hình MVC………………………...……..………….……...……….19 1.7.6 Routing và Router………………….…...…..…………………...………19 1.7.7 Nguyên lý hoạt động MVC…………..…....…………………...………..19 1.7.8 MiddleWare……………………………..………………………...……..21 1.7.9 Query Builder…………………………..…………………….…...……..23 1.7.10 Eloquent ORM…...………………………………………....…..….…..25 1.7.11 RelationShip……...………………………………………......………...26 1.7.12 Migration………...……………………………...…………..….………30 1.7.13 Pagination………...……………………...……....……..……….……...31 1.7.14 Restful API…………………………...…………..………..…….……..32 1.8 Vue Js Trong laravel…………………………………………………………..34 1.8.1 Khái niệm vue Js………….......….………………………………………34 1.8.2 Instance Lifecycle Hook……...……….…………………………………34 1.8.3 Template Syntax……………...……….………………………………....35 1.8.4 Watcher………………………...……….………………………………..36 1.8.5 Components…………………..………….………………………………37 1.8.6 Props………………………….......……………………………………...37 1.8.7 Vue Router trong laravel……....………..……………....……………….38 1.8.8 Rest API with Axios Setup ……………….……………………………..39 SVTH: 6 1.9 Mysql workbench……………………………………..………………………39 1.9.1 Mysql là gì ?...............................................................................................39 1.9.2 Mysql workbench là gì ?............................................................................39 1.9.3 Các tính năng………………………………………………….…….........39 1.9.4 Tại sao nên dùng mysql workbench…………………………..………….41 1.9.5 Cài đặt…………………………………………………………………….42 1.10 Visual Studio Code…………..…………..…………………………………..42 1.10.1 Visual Studio code là gì ?.........................................................................42 1.10.2 Tại sao phải dùng……………….......….………………………………..42 1.10.3 Cài đặt…………………...………….....……………..………………….42 1.11 Docker……………………………………………………………………….43 1.11.1 Docker là gì……………………………………………………………..43 1.11.2 Lợi ích của docker…………………………….……………………….. 43 1.11.3 Cài đặt………………………………………….………………………..45 CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ WEBSITE…………...……………...46 2.1 Phân tich yêu cầu của hệ thống………………………………………….........46 2.1.1 Mô tả hệ thống…………….……………….……………………………..46 2.1.2 Yêu cầu chức năng của hệ thống……….……..…………………….……46 2.1.3 Yêu cầu phi chức năng của hệ thống….………..……….………….…….46 2.2 Mô hình hóa chức năng…..….……………………..……..……….…...…….48 2.2.1 Sơ đồ usecase tổng quát………………….….……………………………48 2.2.2 Sơ đồ usecase đăng ký……..…….……….………………………………49 2.2.3 Sơ đồ usecase quản lý đăng nhập.………….………..…………………...50 2.2.4 Sơ đồ usecase quản lý đơn hàng..………………………………………...50 2.2.5 Sơ đồ usecase quản lý danh mục..………………………………………..51 SVTH: 7 2.2.6 Sơ đồ usercase quản lý sản phẩm………………………………………..51 2.2.7 Sơ đồ usecase quản lý người dùng ……………………………………..52 2.2.8 Sơ đồ usecase xem sản phẩm…………………………………………....52 2.2.9 Sơ đồ usecase quản lý giỏ hàng…………………………………………53 2.2.10 Sơ đồ usecase đăng xuất……………………………………………….53 2.3 Đặc tả usecase…………………………………………………………………53 2.3.1 Usecase quản lý khách hàng……………………………………………..53 2.3.2 Usecase quản lý đăng nhập………………………………………………54 2.3.3 Usecase quản lý đăng xuất…………………………………....………….55 2.3.4 Usecase quản lý sản phẩm……………………………………………….55 2.3.5 Usecase quản lý người dùng……………………………………………..56 2.3.6 Usecase quản lý danh mục ……………………………………………....57 2.3.7 Usecase quản lý đơn hàng ………………………….……………………58 2.4 Mô tả các bảng cơ sở dữ liệu………………………………………………….59 2.4.1 Bảng khách hàng…………………………………….…………………..59 2.4.2 Bảng sản phẩm…………………………………………………………..60 2.4.3 Bảng người dùng………………………………………………………...60 2.4.4 Bảng danh mục……………….………………………………………….61 2.5.5 Bảng phân quyền……………………………………….………………..61 CHƯƠNG 3: CÀI ĐẶT WEB SHOP PROJECT……...…………...……………..63 3.1 Triển khai môi trường làm việc………...……………………………………..63 3.1.1 Yêu Cầu…………………………..…………………….………………..63 3.1.2 Cài môi trường……………….…..…....……………...….…….…….......63 3.2 Thực hiện…………..………………………………………………………….63 3.2.1 Register………………………......……….……………………………...63 3.2.2 Login…………………………......………………….…………………...63 SVTH: 8 3.2.3 Logout.………………………...……...……………….…………………65 3.2.4 Change Password……………...……...………………..………………...66 3.2.5 Product Interface……………...……...………………...………………...66 3.2.6 Manage CartList.……….……...…….......………………..……….……..67 3.2.7 Manage Product………….……...…….......……………..…………...…..71 3.2.8 Manage Category…………………………...…………..………………...81 3.2.9 ManageUser & Roles………………………...………..………………….86 3.2.10 Category Filter……………………………...………..………………….93 3.2.11 Product Detail …………………...….……....………..…………………93 3.2.12 Product Order & Dashboad……...…….………………………………...94 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN…………………………………….…..95 1 Các kết quả đạt được……………………………………………………….…...95 2 Nhận xét và đề xuất……………………………………………………..…..…..95 3 Hướng phát triển………………………………………………………………..95 TÀI LIỆU THAM KHẢO……………………………………………...……..…..96 PHỤ LỤC MÃ NGUỒN……………………………………………………….…97 SVTH: 9 4. MỞ ĐẦU Ngày nay, với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng dụng của nó trong đời sống. Máy tính điện tử không còn là một thứ phương tiện lạ lẫm đối với mọi người mà nó dần trở thành một công cụ làm việc và giải trí thông dụng và hữu ích của chúng ta, không chỉ ở công sở mà còn ngay cả trong gia đình. Với sự phát triển của công nghệ 4.0 hiện nay đã bao trùm cả thế giới , việc sử dụng những phương tiện, công cụ, web, app đã xuất hiện rộng rãi.Trong nền kinh tế hiện nay, với xu thế toàn cầu hoá nền kinh tế thế giới, mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu trao đổi hàng hoá của con người ngày càng tăng cả về số lượng và chất lượng.Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa trên Internet. Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và tính tất yếu của thương mại điện tử. Với những thao tác đơn giản trên máy có nối mạng Internet bạn sẽ có tận tay những gì mình cần mà không phải mất nhiều thời gian. Bạn chỉ cần vào các trang dịch vụ thương mại điện tử, làm theo hướng dẫn và click vào những gì bạn cần. Các nhà dịch vụ sẽ mang đến tận nhà cho bạn. Để tiếp cận và góp phần đẩy mạnh sự phổ biến của thương mại điện tử ở Việt Nam. Chúng em đã tìm hiểu và lựa chọn đề tài Nghiên cứu khoa học “ Xây Dựng website bán hàng điện tử KATSU” SVTH: 10 1. Lý Do Chọn Đề Tài Ngày này, cùng với sự phát triển của kinh tế, đời sống con người ngày càng được nâng cao, của cải tạo ra ngày càng có xu hướng tăng, con người từ nhu cầu ăn no mặc ấm nay đã hướng đến nhu cầu ăn ngon mặc đẹp. Cùng với đó nhu cầu mua sắm con người ngày càng cao. Của cải vật chất trong ngày càng nhiều đồng nghĩa với việc con người bị kéo theo những bộn bề của công việc, con người không còn nhiều thời gian tìm kiếm những bộ đồ đẹp cho bản thân và người thân, những địa điểm có giá cả phù hợp với số tiền mình đang có. Những bộ trang phục đẹp, phù hợp, chất liệu dễ chịu thoải mái với mỗi người đem đến cho người mặc sự tự tin, sự thoải mái dễ chịu và từ đó đem đến sự thuận lợi trong công việc, học tập… Kinh tế ngày càng phát triển cùng với sự bùng nổ của mạng Internet đặc biệt trong lĩnh vực Thương mại điện tử (Tiki ,shoppe, larada )là một thương hiệu đang được nhiều bạn trẻ yêu thích hiện nay với phong cách trẻ trung, năng động đầy cá tính nhằm đáp ứng như cầu mua sắm của khách hàng, ngoài việc xây dựng hệ thống cửa hàng quần áo trên địa bàn Hà Nội còn áp dụng bán hàng thông qua các trang mạng xã hội như Facebook, Zalo…có số lượng người dùng đông đảo nhằm thu hút nhiều khách hàng tiềm năng hơn nữa. Mặc dù các trang mạng xã hội có nhiều chính sách hỗ trợ cho việc marketing online nhưng việc chưa có một trang web chính thống và sự quản lý về nguồn cơ sở dữ liệu (CSDL) hợp lý, vì vậy việc áp dụng của cửa hàng có kết quả nhưng chưa cao, cần có thời gian để đạt được những kết quả nhất định. Xuất phát từ những suy nghĩa trên, thành viên trong nhóm mong rằng sẽ xây dựng được một trang web với sự quản lý về CSDL một cách hiệu quả sẽ đem đến nhiều tiện ích hơn đối với các bạn trẻ cũng như nhiều đối tượng khách hàng có nhu cầu mua sắm đang hướng đến Shop Bán hàng điện tử hiện nay. SVTH: 11 2. Mục tiêu đề tài. Xây dựng một hệ thống bán hàng điện tử với các chức năng cơ bản để phục vụ con người trong thời đại 4.0 , các chức năng phải có sự gắn bó chặt chẽ, đủ các thông tin cần thiết. Hệ thống hướng đến việc mở rộng đến các nước. 3. Đối tượng, phạm vi, ý nghĩa của nghiên cứu. a. Đối tượng nghiên cứu Báo cáo tập trung nghiên cứu về các vấn đề chính. - Cơ sở dữ liệu của web bán hàng - Thiết kế xây dựng các chức năng cơ bản của shop b. Phạm vi nghiên cứu Xây dựng trong phạm vi nghiên cứu tại 3 cơ sở của shop bán hàng trên địa bàn Đà Nẵng c. Ý nghĩa của nghiên cửu  Ý nghĩa lý luận: Dùng làm tài liệu tham khảo cho các cửa hàng, doanh nghiệp khi bước đầu xây dựng Website cho riêng mình.  Ý nghĩa thực tiễn: Báo cáo nghiên cứu cho thấy được những bước phải làm khi xây dựng Website, từ đó tạo nền tảng cho cửa hàng triển khai website, ứng dụng trong bán hàng SVTH: 12 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Khái Niệm Fontend Phần front-end của một trang web là phần tương tác với người dùng. Tất cả mọi thứ bạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tới các menu xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, và JavaScript được điều khiển bởi trình duyệt máy tính của bạn. 1.2 Khái Niệm Backend Phần back end của một trang web bao gồm một máy chủ, một ứng dụng, và một cơ sở dữ liệu. Một lập trình viên back-end xây dựng và duy trì công nghệ mà sức mạnh của những thành phần đó, cho phép phần giao diện người dùng của trang web có thể tồn tại được. 1.3 HTML HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Cùng với CSS và JavaScript, HTML là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website. 1.4 CSS & SCSS 1.4.1 CSS CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language. Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ. Ngoài ra nó còn tên gọi SASS bản chất cũng giống nhau 1.4.2 SCSS SCSS sử dụng cú pháp giống với Ruby (vì đơn giản nó được thiết kế bởi các lập trình viên Ruby). Có phần mở rộng là .scss , SCSS ra đời sau SASS và có cú pháp viết tương tự như cách viết CSS. Cú pháp này được tạo ra nhằm thu hẹp khoảng cách giữa SASS và CSS bằng cách mang lại một thứ gì đó thân thiện với CSS. Ta phân biệt nó trong hình dưới đây SVTH: 13 Bên trái SCSS , Bên phải CSS 1.5 Bootstrap 1.5.1 Khái Niệm Bootstrap là một front-end framework miễn phí giúp quá trình phát triển web được nhanh và dễ dàng hơn. Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography, forms, buttons, tables, navigation, modals, image carousels… cũng như các plugin JavaScript tùy chọn. Bootstrap cũng cung cấp cho bạn khả năng tạo ra các responsive designs một cách dễ dàng. 1.5.2 Vì sao nên sử dụng - Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap. - Các tính năng đáp ứng (Responsive features): responsive CSS của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn. - Cách tiếp cận Mobile-first: Trong Bootstrap 3, mobile-first styles là một phần của core framework. - Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera). 1.5.3 Cài đặt Có 2 cách để có thể sử dụng Bootstrap trên web của bạn. 1. Download Bootstrap packet từ getbootstrap.com 2. Thêm Bootstrap từ CDN SVTH: 14 href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap- 1.6 Javascript 1.6.1Khái niệm Javascript JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động. Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng 1.6.2 DOM 1.6.2.1 DOM là gì ? DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML. mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha - con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ, ... 1.6.2.2 Các loại DOM trong JS - DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website - DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML SVTH: 15 - DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của các thẻ HTML - DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML - DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các thẻ HTML - DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML đó - DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha - con của các thẻ HTML - DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng (Object) 1.6.3 Các Kiểu dữ liệu trong JS Trong JS có 6 kiểu dữ liệu cơ bản: - Number Boolean String Null Undefined Object 1.6.4 Biến và khai báo biến 1.6.4.1 Khái niệm về biến Giống như nhiều ngôn ngữ lập trình khác, JavaScript có các biến. Các biến có thể được coi là các thùng chứa có tên. Bạn có thể đặt dữ liệu vào các vùng chứa này và sau đó tham khảo dữ liệu chỉ bằng cách đặt tên vùng chứa. 1.6.4.2 Khai Báo biến Để khai báo một biến ta sử dụng từ khóa const, let, var. const được sử dụng để khai báo 1 hằng số, và giá trị của nó không thay đổi trong suốt chương trình. let khai báo biến chỉ có thể truy cập được trong block bao quanh nó được xác định bằng cặp {}. var khai báo biến có thể truy cập ở phạm vi hàm số hoặc bên ngoài hàm số, toàn cục. Giống như ngôn ngữ khác, cách đặt tên biến của JS cũng phải tuân theo 1 số quy tắc sau : SVTH: 16 - Tên biến phải là các chữ không dấu viết hoa hoặc viết thường, các chữ số từ 0-9 và dấu gạch dưới () và kí hiệu $. - Tên biến bắt đầu phải là chữ hoặc dấu gạch dưới (_), nếu bắt đầu bằng số là sai. - Không thể sử dụng các từ dành riêng (như từ khóa JavaScript) làm tên. - Các tên có phân biệt chữ hoa chữ thường Ví dụ khai báo biến đúng var person; var _person; var __person; var __person1; 1.6.5 Function Function JavaScript (hàm số) là một thành phần không thể thiếu trong cấu trúc chương trình. Function giúp cho chương trình trở nên rõ ràng, dễ hiểu bằng cách gộp những đoạn code lặp lại thành một hàm số. Nhờ vậy mà việc bảo trì phần mềm cũng dễ dàng hơn 1.6.6 Các Framework JS - React : React được xem là framework đứng đầu trong thế giới JavaScript. Framework này dùng cách tiếp cận phản ứng và cũng đưa ra nhiều ý tưởng riêng cho việc phát triển web front-end. Muốn sử dụng React, bạn phải học cách dùng một loạt các công cụ bổ sung để có thể linh hoạt tối đa trong phát triển web front-end. Danh sách chưa đầy đủ các thư viện mà bạn có thể dùng với React, gồm: Redux, MobX, Fluxy, Fluxible, hay RefluxJS. Ngoài ra, React cũng có thể được dùng với jQuery AJAX, fetch API, Superagent, và Axios. - Vue Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). - Angular hay AngularJS là một web framework JavaScript được phát triển và tài trợ bởi Google và cộng đồng để giải quyết các vấn đề gặp phải trong việc phát triển ứng dụng đơn trang. Ngoài ra, AngularJs còn có các thành phần bổ sung cho Cordova, framework sử thường dùng để viết các ứng dụng di động. SVTH: 17 1.7 Laravel Framework 1.7.1 Khái niệm về Framework Framework chính là một thư viện với các tài nguyên có sẵn cho từng lĩnh vực để lập trình viên sử dụng thay vì phải tự thiết kế. Có Framework, lập trình viên chỉ tìm hiểu và khai thác những tài nguyên đó, gắn kết chúng lại với nhau và hoàn chỉnh sản phẩm của mình. Đối với lập trình viên trong mỗi một lĩnh vực, họ cần phải xây dựng các lớp chương trình để xây dựng nên những phần mềm, ứng dụng thành phẩm. 1.7.2 Laravel Là gì ? Laravel là một PHP framework, có mã nguồn mở và miễn phí, được xây dựng nhằm hỗ trợ phát triển các phần mềm, ứng dụng, theo kiến trúc MVC. 1.7.3 Ưu điểm và nhược điểm của Laravel 1.7.3.1 Ưu điểm -Sử dụng các tính năng mới nhất của PHP Sử dụng Laravel 5 giúp các lập trình viên tiếp cận những tính năng mới nhất mà PHP cung cấp, nhất là đối với Namespaces, Interfaces, Overloading, Anonymous functions và Shorter array syntax. -Nguồn tài nguyên vô cùng lớn và sẵn có Nguồn tài nguyên của Laravel rất thân thiện với các lập trình viên với đa dạng tài liệu khác nhau để tham khảo. Các phiên bản được phát hành đều có nguồn tài liệu phù hợp với ứng dụng của mình. -Tích hợp với dịch vụ mail Lavarel là framework được trang bị API sạch trên thư viện SwiftMailer, do đó, bạn có thể gửi thư qua các dịch vụ dựa trên nền tảng đám mây hoặc local. 1.7.3.2 Nhược điểm So với các PHP framework khác, Laravel bộc lộ khá ít nhược điểm. Vấn đề lớn nhất có thể kể đến của framework này là thiếu sự liên kết giữa các phiên bản, nếu cố cập nhật code, có thể khiến cho ứng dụng bị gián đoạn hoặc phá vỡ. Bên cạnh đó, Lavarel cũng quá nặng cho ứng dụng di động, khiến việc tải trang trở nên chậm chạp. 1.7.4 Cài đặt Bạn mở Terminal (CMD hoặc Git Bash), gõ dòng lệnh sau: “composer global require “laravel/installer””. SVTH: 18  Đối với Windows, đường dẫn là “%appdata%Composervendorbin”.  Đối với macOS và Linux, đường dẫn là “~/.composer/vendor/bin”. Sau khi cài đặt xong, bạn di chuyển vào thư mục htdocs của XAMPP. Sau đó mở cửa sổ lệnh (đối với windows thì nhấp Shift + chuột phải và chọn Command Window Here hoặc Git Bash Here) và gõ: “laravel new blog”. Trong đó blog chính là tên thư mục laravel project của bạn. Vậy là chúng ta đã cài đặt xong Laravel Cài đặt theo composer Di chuyển thẳng vào thư mục htdocs của XAMPP,, tại đây mở cửa sổ lệnh và gõ “composer create-project –prefer-dist laravel/laravel blog” Trong đó blog chính là tên thư mục laravel project của bạn. 1.7.5 Mô hình MVC MVC (Model-View-Controller) là mẫu kiến trúc phần mềm trên máy tính nhằm mục đích tạo lập giao diện cho người dùng. Theo đó, hệ thống MVC được chia thành ba phần có khả năng tương tác với nhau và tách biệt các nguyên tắc nghiệp vụ với giao diện người dùng. Ba thánh phần ấy bao gồm:  Controller: Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng.  Model: Là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các Class, hàm xử lý…  View: Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất cả các đối tượng GUI như textbox, images… Bằng cách này, thông tin nội hàm được xử lý tách biệt với phần thông tin xuất hiện trong giao diện người dùng. Bảo đảm các nguyên tắc nghề nghiệp của lập trình viên. 1.7.6 Routing và Router 1.7.6.1 Routing là gì ? Khi nhận được một URL request của người dùng gửi tới, Laravel sẽ phân tích địa chỉ URL để quyết định request này cần được xử lý tiếp như thế nào. Quá trình trên được gọi là Routing. SVTH: 19 Việc các URL sẽ được xử lý tiếp như thế nào sẽ được quy định bởi các quy luật và quy luật này gọi là một route. Ví dụ chúng ta có một route như sau dùng để xử lý request gửi tới trang chủ: Route::get('/', function() { return 'Hello World'; }); 1.7.6.2 Router là gì ? Các route trong Laravel được định nghĩa sử dụng class Route. Class này cung cấp các phương thức theo kiểu static như GET, POST, PUT, DELETE... dùng để quy định route sẽ được dùng để xử lý URL được gửi tới sử dụng phương thức HTTP tương ứng. Route::post('/', function() { return 'Post request'; }); 1.7.6.3 Sử dụng Router POST : dùng để gửi dữ liệu lên server (gửi form) GET : để lấy các địa chỉ request Cú pháp Route::get($uri, $action); //trong đó $action có thể là 1 mảng, hàm hoặc 1 chuỗi Tương tự post cũng vậy Chắc hẳn không ít bạn sẽ thắc mắc sao 2 cái giống nhau đến thế thì khi nào nên dùng get khi nào nên dùng post? Nếu vậy thì tiện đây mình cũng giải đáp luôn, như ở trên mình đã nói get và post nhận 2 request hoàn toàn khác nhau là GET và POST. Bạn nên sử dụng get cho việc lấy dữ liệu như hiển thị bài viết, lấy dữ tiệu bằng ajax, ... Nên sử dụng post khi có thao tác thay đổi cơ sở dữ như thêm, xóa, hay sửa dữ liệu. 1.7.7 Nguyên lý hoạt động MVC 1.7.7.1 Router với controller Để gọi đến một controller trong laravel thì ta dùng cú pháp như sau Route::get($uri, $namerouter); Ví dụ Route::get('/home', 'HomeController@index')->name('home'); SVTH: 20