CHƯƠNG 1. Lý do chọn đề tài ? - Ngày nay, công nghệ thông tin không ngừng phát triển một cách mạnh mẽ và hiện đại. Các ứng dụng của công nghệ thông tin ngày càng đi sâu vào đời sống con người trở thành một bộ phận không thể thiếu của thế giới văn minh. Với xu thế toán càu hóa nền kinh tế thế giới, đặc biệt là nhu cầu trao đổi hàng hóa của con người ngày càng tăng cả về số lượng và chất lượng, nhu cầu sử dụng Internet ngày càng nhiều và các hình thức kinh doanh trên mạng ngày càng đa dạng và trở thành một công cụ không thể thiếu.
Vì vậy, nhiều cửa hàng đồ điện tử đã áp dụng phương pháp bán hàng qua mạng (thương mại điện tử) để khách hàng dễ dạng tìm kiếm thông tin và không cần tốn nhiều thời gian và chi phí. - Đối với một cửa hàng đồ điện tử quy mô lớn như vậy, việc quảng bá và giới thiệu đến khách hàng các cuốn sách hay, cung cấp các thông tin giúp cho khách hàng lựa chọn được một cuốn sách ưng ý. vấn đề đặt ra song song với nó là làm sao khách hàng có thể đặt mua những cuốn sách đã chọn một cách nhanh chóng và tiện lợi, không cần mất thời gian đến tận nơi lựa chọn và thanh toán.Từ những vấn đề đặt ra ở trên, được sự đồng ý và sự hướng dẫn tận tình của thầy cô, em đã chọn đề tài: “THIẾT KẾ WEBSITE BÁN HÀNG NB STORE” .Với mong muốn đề tài sẽ được đưa vào ứng dụng cho cửa hàng điện tử NBSTORE, vì yậy em sẽ cố gắng hết mình và mong nhậnđược những ý kiến đóng góp và chỉ đạo của cácthầy cô. SVTH: Phùng Duy Long 1 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE 1.
Các công nghệ sử dụng trong website 1. Tồng quan về Laravel Laravel là một framework rõ ràng và ưu việt cho việc phát triển web PHP với cú pháp dễ hiểu và tiện lợi. Laravel là một framework PHP 5.3 được miêu tả như “một framework cho web artisan”. Theo tác giả Taylor Otwell, Laravel mang lại niềm vui cho việc lập trình bởi sự đơn giản, súc tích và đặc biệt là trình bày hợp lý.
Laravel có 3 đặc tính nổi trội: o Đơn giản: các chức năng của Laravel rất dễ hiểu và thực hiện. o Ngắn gọn: hầu hết các chức năng của Laravel hoạt động liên tục với cấu hình rất nhỏ, dựa vào các quy tắc chuẩn để giảm bớt code-bloat. o Trình bày hợp lý: hướng dẫn sử dụng Laravel rất đầy đủ và luôn cập nhật. Nhà lập trình, người tạo ra framework luôn cập nhật tài liệu trước khi cho ra một phiên bản mới, đảm bảo những người học lập trình luôn luôn có những tài liệu mới nhất.
Laravel trở nên khác biệt với khác framework khác: Bundles: là dành cho Laravel cũng như PEAR là cho PHP. Ngoài ra laravel đi kèm với công cụ command-line gọi là Artisan, giúp việc cài đặt các gói dễ dàng. Eloquent ORM: là file thực thi PHP Active Record tiên tiến nhất hiện có. Migrations: Trong laravel, migrations được xây dựng trong framework có thể thực hiện thông quan Artisan command-line.
Unit-testing: laravel là 1 framework ổn định để tích hợp PHP Unit. Redis: Laravel hỗ trợ Redis rất ngắn gọn. Lợi ích khi sử dụng Laravel Framework Dễ dàng sử dụng SVTH: Phùng Duy Long 2 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Laravel là một Framework được công nhận là tốt nhất hiện tại và được sử dụng rộng rãi. Đối với người mới bắt đầu làm ứng dụng web thì Laravel là một Framework đáng sử dụng nhất.
Hơn thế nữa là cộng động hỗ trợ với Framework này rất nhiều rất thuận tiện cho việc bất đầu một cách dễ dàng. Có mã nguồn mở Framework Laravel với những mã nguồn mở miễn phí cho phép chúng ta xây dựng ứng dụng web lớn và phức tạp một cách nhanh chóng và dễ dàng hơn. Tất cả những gì chúng ta cần làm chính là cài đặt PHP cùng với một trình soạn thảo văn bản để bắt đầu. Laravel hỗ trợ mô hình MVC Sự hỗ trợ MVC là một trong những yếu tố quan trọng giúp cho Laravel trở thành framework PHP tốt nhất để phát triển.
Hầu hết các nền tảng không cung cấp hỗ trợ MVC, trong khi đó Laravel hỗ trợ mô hình MVC giúp cải thiện hiệu suất tổng thể, tài liệu tốt hơn và cung cấp nhiều chức năng. Điều này làm cho sự phát triển của Laravel khá hấp dẫn và dễ dàng. Hỗ trợ cộng đồng Trong những trường hợp chúng ta gặp những lỗi khó giải quyết, Laravel có một cộng đồng hỗ trợ lớn chúng ta chỉ cần tìm kiếm trên Facebook hoặc lỗi lên Google sẽ được mọi người giúp cách giải quyết. Di chuyển Database dễ dàng Di chuyển Database là một trong những tính năng trọng yếu của Laravel.
Laravel sẽ cho phép chúng ta duy trì cấu trúc cơ sở dữ liệu ứng dụng mà không nhất thiết phải tạo lại. Khi di chuyển Database còn cho phép chúng ta viết các mã PHP để kiểm soát database thay vì phải sử dụng SQL. Laravel cũng cho phép chúng ta khôi phục được những thay đổi gần nhất trong database. Tính năng bảo mật hoàn thiện SVTH: Phùng Duy Long 3 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Các ứng dụng của chúng ta sẽ rất an toàn khi chúng ta sử dụng framework laravel.
Kỹ thuật ORM của laravel sử dụng PDO, chống chèn SOL. Ngoài ra, các tính năng bảo vệ crsf của laravel sẽ giúp ngăn chặn giả mạo từ yêu cầu trang chéo. Đó là một cú pháp tự động thoát bất kỳ HTML nào đang được truyền qua các tham số xem để nhằm ngăn chặn các kịch bản chéo trên trang web và điều chúng ta cần thực hiện ở đây chính là sử dụng các thành phần thích hợp của khuôn khổ. Cách hoạt động của Laravel Hình 1.
Cách hoạt động của Laravel 1. Mô hình MVC SVTH: Phùng Duy Long 4 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Hình 1. Mô hình MVC Mô hình MVC là viết tắt tiếng anh của ba từ: Model + View + Controller. Đây là một mô hình tổ chức code một cách hợp lý và có hệ thống hơn, giúp bóc tách các phần xử lý riêng biệt thuận lợi cho việc phát triển, chỉnh sửa và làm việc theo project.
Model: Đây 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.Hiểu một cách đơn giản là tập hợp các form hoặc các file HTML. 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ý yêu cầu.Chẳng hạn thành phần này sẽ nhận request từ url và form để thao tác trực tiếp với Model. SVTH: Phùng Duy Long 5 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Cơ chế hoạt động của mô hình MVC User tương tác với View, bằng cách click vào button, user gửi yêu cầu đi.
Controller nhận và điều hướng chúng đến đúng phương thức xử lý ở Model. Model nhận thông tin và thực thi các yêu cầu. Khi Model hoàn tất việc xử lý, View sẽ nhận kết quả từ Model và hiển thị lại cho người dùng. Ưu, nhược điểm của MVC: Ưu điểm : Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế.
Do được chia thành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễ nâng cấp, bảo trì. Nhược điểm : Đối với dự án nhỏ việc áp dụng mô hình MVC gây cồng kềnh, tốn thời gian trong quá trình phát triển. Tốn thời gian trung chuyển dữ liệu của các thành phần. Công Nghệ ReactJS 1.
Đôi nét về ReactJS ReactJS là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành phần giao diện nhanh gọn và tiện lợi. Bình thường các lập trình viên sẽ nhúng javascript vào code HTML thông qua các attribute như AngularJS nhưng với Reactjs làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX. Qua đó có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn. Tính năng của ReactJs JSX – JSX là phần mở rộng cú pháp JavaScript.
Không nhất thiết phải sử dụng JSX trong phát triển React. Các Component (Thành phần) – React là tất cả về các Component. Chúng ta cần nghĩ mọi thứ như một Component. Điều này sẽ giúp chúng ta duy trì mã khi làm việc trên các dự án quy mô lớn hơn.
SVTH: Phùng Duy Long 6 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE 1. Ưu điểm và nhược điểm của ReactJS Ưu điểm: Sử dụng DOM ảo là một đối tượng JavaScript. Điều này sẽ cải thiện hiệu suất ứng dụng, vì DOM ảo Javascript nhanh hơn DOM thông thường. Có thể được sử dụng trên máy khách và máy chủ cũng như với các khuôn khổ khác.
Các mẫu thành phần và dữ liệu cải thiện khả năng đọc, giúp duy trì các ứng dụng lớn hơn. Nhược điểm: Chỉ bao gồm lớp xem của ứng dụng, do đó chúng ta vẫn cần chọn các công nghệ khác để có được bộ công cụ hoàn chỉnh để phát triển. Sử dụng khuôn mẫu nội tuyến và JSX, điều này có vẻ khó xử đối với một số nhà phát triển. Tổng quan về Web API Web API hay ASP.NET Web API là một framework dùng để xây dựng và lập trình các dịch vụ web HTTP.
Web API có dạng là một RESTful API hiện đại, hội tụ đủ các điều kiện của REST cũng như các tiêu chuẩn tương tự, được tối ưu cho các dịch vụ trực tuyến cũng như ứng dụng web hiện nay. Framework React-Bootstrap 1. Tổng quan về React-Bootstrap React-Bootstrap cung cấp sẵn một bộ các React component với look-and-feel của Twitter Bootstrap component từ đó giúp việc tạo dựng UI cho React app dễ dàng hơn bao giờ hết. Ví dụ khi ta mô tả một button nhỏ, text là “Something”, click event trigger hàm callback “someCallback”.
SVTH: Phùng Duy Long 7 GVHD: Hoàng Lan Phương Website thương mại điện tử NBSTORE Hình 1. Logo React- Boostrap 1. Những lợi ích khi sử dụng React-Bootstrap a. Hạn chế sự phụ thuộc vào jQuery Bootstrap được đóng gói kèm theo bootstrap.js, thư viện này phụ thuộc vào jQuery và jQuery thực hiện các phép tính toán làm thay đổi DOM thực.
Trong khi đó React không tương tác trực tiếp với DOM thực mà gián tiếp thông qua DOM ảo. Khi chúng ta bất cẩn để jQuery thay đổi DOM thực, React không hề biết đến sự thay đổi đó dẫn đến việc DOM ảo và DOM thực mất tính đồng bộ và phát sinh lỗi conflict.