Chương I Tổng quan 1. Lý do chọn đề tài Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, Trang 17 cưng như các công ty, cửa hàng, nó đóng vai trò hết sức quan trọng có thể tạo ra những bước đột phá mạnh mẽ. Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức, công ty thậm chí các cá nhân, ngày nay, không lấy gì làm xa lạ. Đối với lĩnh vực mua bán hàng hóa cũng trở nên ngày càng cấp thiết.
Khách hàng ngày càng có nhiều nhu cầu mua sắm và buôn bán những đồ dùng đã qua sử dụng của mình tuy nhiên để tìm kiếm một địa điểm và giả thành hợp lý xong không phải là chuyện dễ dàng dẫn đến mất quá nhiều công sức và thời gian mà hiệu quả lại không cao. Vì vậy ứng dụng công nghệ vào lĩnh vực này ngày càng phổ biến. Với một vài thao tác đơn giản, nhanh chóng, một người hoặc doanh nghiệp bất kì có thể dễ dàng quản lý mọi công việc mua bán hàng hóa của mình trên mọi thiết bị. Dựa vào kiến thức đã được học, sự cần thiết của vấn đề em đã “Xây dựng Website mua bán giày”.
Tuy việc xây dựng phần mềm còn nhiều khó khăn và thiếu sót nhưng đã giúp chúng em có thêm nhiều kiến thức và sự học hỏi, tạo bước phát triển cho sau này. Mục tiêu ● Nghiên cứu tổng quan về các nghiệp vụ cửa hàng và bán hàng. ● Nghiên cứu trên cơ sở lý thuyết việc phát triển hệ thống thông tin quản lý và thương mại điện tử Website mua bán giày. ● Xây dựng hệ thống thương mại điện tử và quản lý Website mua bán giày giúp cho việc quản lý và buôn bán trở nên đơn giản hơn.
Phạm vi Quy trình quản lý bán hàng, doanh thu và sản phẩm, đổi trả trong Website mua bán giày. Quy trình bán hàng thông qua website. Các vấn đề cần giải quyết trong quá trình quản lý và buôn bán trên Website mua bán giày, ví dụ như: Trang 18 ●Nghiệp vụ bán hàng và thanh toán ●Theo dõi, quản lý lịch sử mua hàng và bán hàng, lịch sử theo dõi của người dùng ●Thêm, xóa, sửa và tra cứu tìm kiếm thông tin của sản phẩm ●Từ đó tiến hành xây dựng cơ sở dữ liệu và khai thác dữ liệu phục vụ công tác quản lý và buôn bán trên website. Người dùng Hệ thống phần mềm hướng về phía người dùng là giúp: khách hàng có địa điểm thuận lợi để mua bán giày tiết kiệm được nhiều rủi ro, chi phí và thời gian tìm kiếm đồng thời tạo độ tin cậy và chính xác cao.
Phương pháp nghiên cứu ● Phương pháp hệ thống, phương pháp tư duy. ● Phương pháp phân tích, tổng hợp. ● Phương pháp tin học hóa bằng công cụ lập trình để giải quyết vấn đề. Trang 19 Chương II Cơ sở lý thuyết & Tổng quan công nghệ 1.
Giới thiệu về React JS ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client. 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.
Trước khi đến cài đặt và cấu hình, 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. 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. Với các đặc điểm ở trên, React dùng để xây dựng các ứng Trang 20 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. - 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 (tham khảo tại https://jsx.io/) - 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: Trang 21 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. - React Redux Redux là một predictable state management tool cho các ứng dụng Javascript. Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test.
Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường dùng kết hợp với React. Các thành phần trong Redux: - Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app đến Redux store.
Những data này có thể là từ sự tương tác của user vs app, API calls hoặc cũng có thể là từ form submission. - Reducers là các function nguyên thủy chúng lấy state hiện tại của app, thực hiện một action và trả về một state mới. Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store. Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào.
Bạn có thể access các state được lưu, update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods. Giới thiệu về MongoDB 2. Các đặc điểm cơ bản của MongoDB ● Mỗi cơ sở dữ liệu bao gồm nhiều collection, mỗi collection lại chứa nhiều Document. Mỗi Document có thể khác nhau về số lượng các trường dữ liệu.
Kích thước và nội dung của mỗi Document đều có thể khác nhau. Trang 22 ● Cấu trúc của Document phù hợp với việc các nhà phát triển xây dựng các class và object bằng các ngôn ngữ lập trình tương ứng. Các nhà phát triển sẽ thường phát biểu rằng cấu trúc của họ không có các hàng và các cột nhưng vẫn có một cấu trúc dữ liệu rõ ràng với các cặp key-value. ● Nếu như các bạn đã biết trước về NoSQL , các hàng (hay có thể là documents được gọi trong MongoDB) không cần phải định nghĩa schema.
Thay vào đó, các trường có thể được tạo linh hoạt. ● Mô hình dữ liệu có sẵn trong MongoDB cho phép bạn biểu diễn quan hệ phân cấp, lưu trữ các mảng, và các cấu trúc phức tạp dễ dàng hơn. Ưu nhược điểm của MongoDB 2.Ưu điểm Open Source: ● MongoDB là phần mềm mã nguồn mở miễn phí, có cộng đồng phát triển rất lớn Hiệu năng cao: ● Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS). ● Thử nghiệm cho thấy tốc độ insert, tốc độ insert của MongoDB có thể nhanh tới gấp 100 lần so với MySQL (So sánh hiệu suất của MongoDB với MySQL) Tại sao MongoDB có hiệu năng cao như thế? có các lý do sau: ● MongoDB lưu dữ liệu dạng JSON, khi bạn insert nhiều đối tượng thì nó sẽ là insert một mảng JSON gần như với trường hợp insert 1 đối tượng.
● Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau như trong RDBMS, khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các bảng liên quan như trong RDBMS. Trang 23 ● Dữ liệu trong MongoDB được đánh chỉ mục (đánh index) nên khi truy vấn nó sẽ tìm rất nhanh. ● Khi thực hiện insert, find… MongoDB sẽ khóa các thao tác khác lại, ví dụ khi nó thực hiện find(), trong quá trình find mà có thêm thao tác insert, update thì nó sẽ dừng hết lại để chờ find() xong đã. Dữ liệu linh hoạt: ● MongoDB là document database, dữ liệu lưu dưới dạng JSON, không bị bó buộc về số lượng field, kiểu dữ liệu… bạn có thể insert thoải mái dữ liệu mà mình muốn.