CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 TÌM HIỂU VỀ DJANGO Django là một framework miễn phí mã nguồn mở được viết bằng Python. Django sử dụng mô hình Model-View-Controler. Django là một web framework miễn phí mã nguồn mở được viết bằng Python. Django sử dụng mô hình Model-View-Control (MVC).
Django được phát triển bởi Django Software Foundation(DSF) – một tổ chức phi lợi nhuận độc lập. Mục tiêu chính của Django là đơn giản hóa việc tạo các website phức tạp có sử dụng cơ sở dữ liệu. Django tập trung vào tính năng “có thể tái sử dụng” và “có thể tự chạy” của các component, tính năng phát triển nhanh, không làm lại những gì đã làm. Một số website phổ biến được xây dựng từ Django là Pinterest, Instagram, Mozilla, và Bitbucket.
Ưu điểm của Django: - Nhanh: Django được thiết kế với triết lý làm sao để các lập trình viên đưa các ý tưởng trở thành một sản phẩm nhanh nhất có thể (trong một vài giờ đồng hồ chẳng hạn) - Có đầy đủ các thư viện/module cần thiết: Django có sẵn các thư viện về user authentication, content admin, site maps. - Đảm bảo về tính bảo mật: Không còn các nỗi lo về các lỗi bảo mật thông thường như SQL Injection, cross-site scripting, cross-site request forgery hay clickjacking nữa. Django cũng cung cấp cả phương pháp để lưu mật khẩu an toàn. - Khả năng mở rộng tốt: Django có thể đáp ứng lượng traffic lớn, nghĩa là bạn không cần phải lo lắng về khả năng scale sản phẩm của mình nữa.
- Tính linh hoạt: Xây dựng CMS, hoặc Ecommerce Website, hay kể cả Social Network, Scientific Computing Platforms, tất cả đều có thể với Django. - Tự động tạo SQL tables. Django sẽ thay bạn làm công việc này khi bạn đã xác định được cấu trúc. 15 - Tạo forms khi bạn đã tạo đưuọc form class trong django và linked đến model, form genertor trong django sẽ đảm nhậ render form, xác minh và lưu trữ data.
Tương tự SQL table, khi bạn đã xác định được cấu trúc, Django sẽ tạo một admin interface cho phép bạn quản lý database (không khác gì PhpMyAdmin được build-in trong Django cả. Python shell, ngay trong môi trường của Django project, chính là lợi thế mà Django shell mang lại. Tính năng này rất hữu hiệu khi debug.2 TÌM HIỂU VỀ DJANGO REST FRAMEWORK REST là viết tắt của REpresentational State Transfer (dịch nôm na là chuyển trạng thái đại diện) là một kiểu kiến trúc lập trình, nó định nghĩa các quy tắc để thiết kết các web service chú trọng vào tài nguyên hệ thống. Trong kiến trúc REST mọi thứ đều được coi là tài nguyên, chúng có thể là: tệp văn bản, ảnh, trang html, video, hoặc dữ liệu động… REST server cung cấp quyền truy cập vào các tài nguyên, REST client truy cập và thay đổi các tài nguyên đó.
Ở đây các tài nguyên được định danh dựa vào URI, REST sử dụng một vài đại diện để biểu diễn các tài nguyên như văn bản, JSON, XML Django REST framework là một công cụ rất mạnh mẽ hỗ trợ đắc lực cho việc xây dựng webAPI. Các tính năng của Django REST Framework – Gọi là API duyệt được trên nền web (browsable API) rất tuyệt vời – Công cụ Serialization (sắp hàng) hỗ trợ cả dữ liệu ORM và non-ORM – Có thể tùy biến rất cao – Tài liệu phong phú và cộng đồng rộng lớn – Được tin dùng bởi những công ty lớn như Mozilla và Eventbrite Giới thiệu một số tính năng của django rest framework 1.3 TÌM HIỂU VỀ REACTJS React ( Hay ReactJS, React.js) là một thư viện Javascrip mã nguồn mở để xây dựng các thành phần giao diện có thể tái sử dụng. Nó được tạo ra bởi Jordan Walke, một ký sưu phần mềm tại Facebool. Người ảnh hưởng bởi XHP ( Một nền tảng thành phần HTML 16 cho PHP).
React lần đầu tiên được triển khai cho ứng dụng Newsfeed của Facebook năm 2011, sau đó được triển khai cho Instagram. Nó được mở mã nguồn(open_ sourced) tại JSConf US tháng 5 năm 2013. Mã nguồn của React được mở trên GitHub: https://github.com/facebook/react React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được. React được sử dụng tại Facebook trong production, và www.com được viết hoàn toàn trên React.
Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. chúng ta sẽ đi đến một số khái niệm cơ bản: Virtual DOM: Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý.
React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. ReactJS sẽ sử dụng một DOM ảo và nó là một Object Javascript chứa đầy đủ thông tin của trang web giống như DOM thật, khi các bạn có sự tác động đến 1 thành phần của trang web thì ReactJS sẽ so sánh DOM ảo với DOM thật để biết được node nào sẽ thay đổi và tạo ra 1 ‘bản vá’ nhằm thay đổi dữ liệu ở node đó trên DOM thật. Nói đến đây các bạn đã hiểu, với ReactJS khi có sự thay đổi ở 1 thành phần, thì trang web sẽ không load lại từ đầu mà chỉ thay đổi ở thành phần mà bạn yêu cầu, dẫn đến trang web của chúng ta sẽ hoạt động nhanh hơn và phía server cũng đỡ mất công phải query lại các dữ liệu của những thành phần khác. Virtal DOM ( DOM ảo) [1] React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều.
Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi. One-way data binding ( Luồng dữ liệu 1 chiều ) [1] Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện.
Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi đó React sẽ rất hữu ích để sử dụng. 18 Giới thiệu về JSX JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn.
JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically- typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++.
Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch. Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng Giới thiệu về Components React được xây dựng xung quanh các component, chứ không dùng template như các framework khác.
Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component.
Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo. Props và State: Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render.
Prop là bất biến. State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI. 19 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 KHẢO SÁT HIỆN TRẠNG Hiện trạng Qua quá trình khảo sát và tìm hiểu thì việc bán hàng hóa trực tuyến ở nước ta đang là mô hình rất được ưa chuộng, chiếm được nhiều sự quan tâm của người tiêu dùng. Tuy nhiên vẫn còn nhiều người tiêu dùng ở độ tuổi 40 trở về sau chưa thực sự tin tưởng vào việc mua bán online nên nhiều trang web bán hàng chỉ giúp họ tham khảo về sản phẩm nhưng chưa thực sự hiệu quả về vấn đề doanh số.
Khách hàng muốn sự trải nghiệm thực tế về sản phẩm và yêu cầu cao về việc tư vấn sản phẩm, do đó họ vẫn ưa chuộng hình thức mua tại các cửa hàng. Việc mua hàng online gây khó khăn trong hình thức thanh toán, vận chuyển, có thể xảy ra sai sót trong khâu gói hàng hóa, thời gian chờ sản phẩm không cố định và việc đổi trả cũng là một trong những khó khăn cần được khắc phục. Mặc dù như vậy, giới trẻ hiện nay lại khá thích thú trong việc mua bán sản phẩm online vì tiết kiệm cho họ thời gian đi lại và có nhiều mẫu sản phẩm hơn. Với sự phát triển mạnh mẽ của thiết bị di động, mạng internet thì việc hướng đến một hình thức kinh doanh online là điều cần thiết giúp đẩy mạnh nền kinh tế cho đất nước.
Khảo sát Nhằm xác định những công việc cần phải làm, cũng như xác định được hướng phát triển, xây dựng một website bán hàng, nhóm đã khảo sát một số website hiện nay. Dưới đây là một số website tiêu biểu đã được tiến hành khảo sát: 20 Website bán hàng Phong Vũ Hình 2-1. Giao diện trang chủ của website Phong Vũ Hình 2-2. Giao diện của website Phong Vũ 21 Hình 2-3.
Giao diện của website Phong Vũ Hình 2-4.