Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất. So với kinh doanh truyền thống thì thương mại điện tử chi phí thấp hơn, hiệu quả đạt cao hơn. Hơn thế nữa, với lợi thế của công nghệ Internet nên việc truyền tải thông tin về sản phẩm nhanh chóng, thuận tiện. Kết hợp với bộ phận giao hàng tận nơi, là thông qua bưu điện và ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi để loại hình này phát triển. Biết được những nhu cầu đó thì “Xây dựng website bán thời trang trẻ em online” được xây dựng nhằm để đáp ứng cho mọi người tiêu dùng trên toàn quốc và thông qua hệ thống Website này họ có thể đặt mua các mặt hàng hay sản phẩm cần thiết. Do đó, với sự ra đời các website bán hàng qua mạng, mọi người có thể mua mọi thứ hàng hóa mọi lúc mọi nơi mà không cần phải tới tận nơi để mua. Trên thế giới có rất nhiều trang website bán hàng trực tuyến nhưng vẫn chưa được phổ biến rộng rãi. Và khái niệm thương mại điện tử còn khá xa lạ. Trước thực tế đó em đã chọn đề tài: “Xây dựng website bán thời trang trẻ em online” làm đề tài đồ án tốt nghiệp.
TỔNG QUAN
Lý do chọn đề tài
Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất So với kinh doanh truyền thống thì thương mại điện tử chi phí thấp hơn, hiệu quả đạt cao hơn Hơn thế nữa, với lợi thế của công nghệ Internet nên việc truyền tải thông tin về sản phẩm nhanh chóng, thuận tiện Kết hợp với bộ phận giao hàng tận nơi, là thông qua bưu điện và ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi để loại hình này phát triển
Biết được những nhu cầu đó thì “Xây dựng website bán thời trang trẻ em online” được xây dựng nhằm để đáp ứng cho mọi người tiêu dùng trên toàn quốc và thông qua hệ thống Website này họ có thể đặt mua các mặt hàng hay sản phẩm cần thiết Do đó, với sự ra đời các website bán hàng qua mạng, mọi người có thể mua mọi thứ hàng hóa mọi lúc mọi nơi mà không cần phải tới tận nơi để mua Trên thế giới có rất nhiều trang website bán hàng trực tuyến nhưng vẫn chưa được phổ biến rộng rãi Và khái niệm thương mại điện tử còn khá xa lạ Trước thực tế đó em đã chọn đề tài: “Xây dựng website bán thời trang trẻ em online” làm đề tài đồ án tốt nghiệp.
Mục tiêu của đề tài
- Xây dựng thành công website có đầy đủ các chức năng cần thiết và hoạt động hiệu quả, áp dụng công nghệ thông tin vào quản lý các mặt hàng gia dụng cho doanh nghiệp.
- Trình bày được các vấn đề liên quan đến JavaScript,HTML,CSS, ReactJS.
- Phân tích hệ thống chương trình bao gồm giao diện, các user control nhằm đáp ứng nhu cầu người dùng.
- Triển khai và truy cập website trong môi trường web.
- Kiểm chứng những kiến thức đã được học trên giảng đường Đại học, đồng thời trang bị những kiến thức mới, là hành trang chuẩn bị bước vào cuộc sống.
Giới hạn và phạm vi của đề tài
- Xây dựng được phần mềm sử dụng công nghệ HTML thao tác với WEB SERVER trong lập trình website.
- Chương trình tập trung xử lý dữ liệu giải quyết bài toán kinh doanh thời trang trẻ em online.
Kết quả dự kiến đạt được
- Bản báo cáo đặc tả về phân tích, thiết kế hệ thống.
- Website bán đồ gia dụng bao gồm:
Xem danh mục nhóm thời trang
+ Chi tiết danh mục sản phẩm:
Danh sách chi tiết các sản phẩm
Tìm kiếm thông tin sản phẩm
Lưu trữ số lượng, giá thành sản phẩm theo nhu cầu khách hàng.
Chi tiết thông tin đặt hàng: thông tin khách hàng, số lượng sản phẩm, hình thức thanh toán.
+ Quản lý danh mục sản phẩm
Thêm, sửa, xoá danh mục sản phẩm
Tìm kiếm khách hàng, sản phẩm, đơn hàng
Số lượng sản phẩm, ngày đặt hàng, tổng chi phí
Thông tin sản phẩm: số lượng bán, số lượng tồn, ngày nhập, ngày xuất, giá thành, giới thiệu sản phẩm
Thêm, sửa, xoá sản phẩm
Báo cáo chi tiết doanh thu
Thống kê số lượng đơn hàng, sản phẩm
- Xây dựng ứng dụng website bán đồ gia dụng trên môi trường lập trình website.
CƠ SỞ LÝ THUYẾT
Tìm hiểu về ngôn ngữ JavaScript
JavaScript (JS) là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa JavaScript được sử dụng rộng rãi trong các ứng dụng Website. JavaScript được hỗ trợ hấu như trên tất cả các trình duyệt như Firefox, Chrome, Cốc cốc, v.v trên máy tính lẫn điện thoại.
JavaScript được Brendan Eich (đồng sáng lập dự án Mozilla và tập đoàn Mozilla) cho ra mắt vào năm 1995 Lần đầu được biết đến lần đầu tiên với tên Mocha, và sau đó là LiveScript, nhưng công ty Netscape đã đổi tên thành JavaScript bởi vì sự phổ biến như là một hiện tượng của java lúc bấy giờ.
JS cho phép thêm động nội dung HTML vào DOM, tạo khai báo kiểu động, tìm nạp nội dung từ một web khác, v.v Từ đây, JavaScript có khả năng biến các trang web HTML tĩnh trở thành các website tương tác bằng cách tự động cập nhật nội dung, xác thực dữ liệu biểu mẫu, hình ảnh động và rất nhiều thứ khác trên tràng web.
Nhiệm vụ của JavaScript là xử lý những đối tượng HTML trên trình duyệt Nó có thể can thiệp với các hành động như thêm, sửa, xóa thuộc tính CSS và các thẻ HTML một cách dễ dàng Hay nói cách khác, JavaScript là một ngôn ngữ lập trình trên trình duyệt ở phía khách hàng Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho JavaScript có thể làm việc ở backend.
Cách thứ hoạt động của JavaScript: JS được nhúng vào một trang web hoặc nếu không nhúng nó sẽ được đưa vào tệp js riêng JavaScript là ngôn ngữ phí máy khách
“Client-Side”, chúng được tải xuống máy tính của khách truy cập trang web, sau đó được xử lý (JavaScript không phải là ngôn ngữ máy chủ “Sever” và không xử lý trên máy chủ rồi chuyển kết quả đến khách truy cập).
Sức mạnh của JavaScript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều thư viện và framework được viết bằng JavaScript ra đời như: ReactJS, Angular, NodeJS, jQuery, BackboneJS, v.v.
Tệp js trong thư mục có biểu tượng để nhận biết dễ dàng.
Hình 2.1: Biểu trượng của JavaScript.
Một số ví dụ điển hình về các công việc được hỗ trợ bởi JavaScript:
- Hiển thị thông báo bật lên;
- Thêm nội dung bổ sung vào trang;
- Xử lý các sự kiện của phần tử HTML;
- Thêm tính tương tác vào website;
- Trinhg đơn thả xuống nhất thể hiển thị;
- Thay đổi màu sắc của các phần tử trên website;
- Tự động hóa các quy trình mà người dung phải thực thi từng bước;
- Yêu cầu hình ảnh tự tạo hoạt ảnh, ảnh chuyển qua dạng trình chiếu;
- Tạo website, trò chơi, phát triển các ứng dụng di động (Smart phone, Tablet).
Tuy là ngôn ngữ lập trình nổi tiếng, nhưng bản thân JavaScript không thể hoàn hảo được Sau đây là một số ưu điểm và nhược điểm của JavaScript:
- Giảm thiểu sự tương tác với server: Bằng cách xác nhận đầu vào (Input) người sử dụng trước khi gửi trang đến server giúp tiết kiệm lưu lượng máy và giảm tải trên máy chủ;
- Không cần một trình biên dịch: JavaScript hoạt động được trên nhiều trình duyệt, nền tảng và không cần sử dụng trình biên dịch vì trình duyệt web hoàn toàn có thể biên dịch nó bằng HTML;
- JavaScript được đánh giá là ngôn ngữ lập trình dễ học, hoạt động nhanh và nhẹ hơn, dễ phát hiện lỗi và thuận tiện sửa chữa lỗi hơn so với các ngôn ngữ khác;
- Giao diện phong phú: Các yếu tố về thành phần kéo và thả (drag-and-drop), thanh trượt (Sliders) trên JavaScript giúp giao diện trở nên phong phú và sinh động hơn cho khách truy cập vào website;
- Khả năng phản hồi ngay lập tức tới khách truy cập: Với JavaScript, các khách không cần phải tốn thời gian để kiểm tra những sai sót của họ (quên nhập nội dung nào đó, v.v.);
- Tăng khả năng tương tác hơn: Với ưu điểm này, hoàn toàn có thể tạo ra các giao diện phản ứng lại mỗi khi người dùng thực hiện các động tác di chuyển chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím.
- Vì lý do bảo mật, js phía máy khách (Client-Side) không cho phép việc đọc hoặc ghi tệp;
- JS không có những hỗ trợ sẵn có và chúng cũng không được sử dụng trong việc kết nối mạng các ứng dụng;
- Hiện tượng không đồng nhất khi JS có thể bị triển khai khác nhau tùy từng thiết bị;
- JS không có các khả năng đa luồng hoặc đa xử lý nào;
- Ngoài ra, do ngôn ngữ này được sử dụng phổ biến và rộng rãi trên website nên khả năng cao sẽ dễ bị khai thác hoặc được triển khai để thực thi mã độc trên máy tính của người dùng với những hacker, scammer.
Tìm hiểu về ngôn ngữ HTML và CSS
HTML (Hyper Text Markup Language): là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bày trên World WideWeb.
Những HTML không phải là một ngôn ngữ lập trình, HTML giống như một ngôn ngữ được xác định đâu là ý nghĩa, mục đích và cấu trúc của một tài liệu Cùng với CSS và JavaScript, HTML tạo ra bộ ba nên tảng kỹ thuật cho các website.
Một website thường chứa nhiều trang con Mỗi trang con sẽ có một tập tin HTML riêng Dù lập trình bằng bất cứ ngôn ngữ nào, trên bất cứ Framework nào, khi chạy trên nền website đều có hai chế độ xem: HTML và văn bản thường.
Chức năng chính của HTML là xây dựng cấu trúc siêu bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc HTML thường được dùng để phân chia các tiêu đề, đoạn văn, đường dẫn, v.v.
- Thêm tiêu đề, định dạng đoạn văn, ngắt dòng điều khiển;
- Tạo danh sách, nhấn mạnh văn bản, tạo ký tự đặc biệt, chèn hình ảnh, tạo liên kết;
- Xây dựng bảng, điều khiển một số biểu mẫu.
Như đã đề cập ở trên, HTML không phải là ngôn ngữ lập trình Do đó, HTML cũng không thể tạo ra các chức năng động được Hiểu đơn giản, HTML giống như Microsoft Word dùng để bố cục và định dạng trang web.
Tóm lại, HTML là ngôn ngữ đánh dấu, dễ đọc, dễ hiểu, dễ áp dụng Tuy nhiên, một website được viết bằng HTML rất đơn giản, nếu không muốn nhàm chán website cần sự hỗ trợ của CSS và JavaScript.
Nếu HTML cung cấp cấu trúc cơ bản của trang web thì CSS và JavaScript sẽ cải tiến và sửa đổi cho website sinh động hơn.
Cấu trúc cơ bản của HTML:
- Một tài liệu HTML luôn được đóng gói trong cặp thẻ và
- Phần tiêu đề được viết bởi cặp thẻ và Nếu sử dụng cặp thẻ này bắt buộc phải thêm một cặp thẻ nữa là , giữa cặp thẻ này là tên của trang web được hiển thị phía trên cùng của menubar.
- Cặp thẻ và là nơi mô tả những gì có thể nhìn thấy trên trang web.
Hình 2.2: Cấu trúc cơ bản của HTML.
Các thẻ cơ bản trong HTML:
Các thẻ trong HTML được bắt đầu dấu < và kết thúc bằng dấu >, tên thẻ nằm giữa cặp dấu Cặp thẻ được tạo nên từ thẻ mở và thẻ đóng, và nội dung của thẻ được nằm giữa thẻ đóng và thẻ mở Ví dụ: trong đó: là thẻ mở, là thẻ đóng Cũng có một số thẻ chỉ có thẻ mở không có thẻ đóng như , , , v.v.
Các thẻ tiêu đề (HTML Heading): Thường được sử dụng để thể hiện tiêu đề của bài viết, bản tin hay các mục nhấn mạnh Bao gồm các thẻ từ đến , font chữ của nội dung trong các thẻ giảm từ đến ;
Đoạn văn bản trong HTML (HTML Paragraphs): Nội dung được thể hiện trong cặp thẻ
; Liên kết (HTML Links): Dùng cặp thẻ để làm công việc liên các trang web lại với nhau;
Xuống dòng (HTML Line Breaks): Để xuống dòng trong một đoạn văn bản dung thẻ ;
Để tạo một đường kẻ ngang trong trang HTML dùng thẻ ;
Hình ảnh (HTML images): Thẻ để chèn ảnh vào trang web;
Các thẻ định dạng văn bản: o Chữ in đậm (Bold): ; o Chữ gạch chân (Underline): ; o Chữ in nghiêng (italic): ; o Chữ cơ lớn (Big): ; v.v.
CSS (Cascading Style Sheets): định nghĩa về cách hiển thị của một tài liệu HTML. CSS đặc biệt hữu ích trong việc thiết kế Web Nó giúp cho người thiết kế dễ dàng áp đặt các phong cách đã được thiết kế lên bất kì trang nào của website một cách nhanh chóng, đồng bộ.
Có 3 loại phong cách CSS chính:
Style CSS Internal: là phong cách được tải lên mỗi khi website được làm mới;
Style CSS Inline: có thể chỉnh sửa một yếu tố nào đó mà không cần truy cập trực tiếp vào file CSS.
External style: có thể tạo phong cách ở file khác áp dụng CSS vào trang muốn sử dụng External style sẽ cải thiện thời gian tải trang rất nhiều Đặc biệt, có thể sử dụng External style CSS để tạo phong cách cho nhiều trang cùng lúc.
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ư HTML;
Tiết kiệm công sức của lập trình viên nhờ điều khiển định dạng của nhiều trang web;
Phân biệt cách hiển thị của trang web với nội dung chính của trang web bằng cách điều khiển bố cục, màu sắc, font chữ.
Nếu HTML cung cấp các công cụ thô cần thiết để cấu trúc trên một trang web thì CSS sẽ giúp định hình kiểu nội dung này để tràn web xát hiện trước người dùng theo một cách đẹp hơn.
Ví dụ: HTML sẽ đánh dấu từng phần văn bản để biết được đó là yếu tối gì CSS sẽ sử dụng cấu trúc tiếng Anh đơn giản để tạo ra một bộ các quy tắc tao phong cách cho các yếu tố đó.
Có thể thấy, CSS gần như tạo nên bộ mặt của một website và CSS cũng không phải là tất cả Để có một trang web đẹp không chỉ dựa vào CSS mà phải kết hợp với nhiều ngôn ngữ khác Các ngôn ngữ phải được thực hiện dựa trên các bản thiết kế đã thống nhất.
Tìm hiểu về MongoDB
MongoDB là một database hướng tài liệu (document), một dạng NoSQL database.
Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.
- Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nên tính sẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ.
- Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứng nên tốc độ đọc và ghi cao.
- Không ứng dụng được cho các mô hình giao dịch nào có yêu cầu độ chính xác cao do không có ràng buộc.
- Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụng ngân hàng.
- Dữ liệu lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớ RAM lớn.
- Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngay lập tức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rất cao.
Quy trình xây dựng website
Thiết kế website là công việc của các nhà phát triển web nhằm tạo ra một trang web dành cho các công ty, cá nhân hay một tổ chức. Để thiết kế một website hoàn chỉnh cần thực hiện các bước sau:
Bước 1: Thu thập thông tin của khách hàng
- Tìm hiểu yêu cầu thực tế của khách hàng;
- Xác nhận các yêu cầu của khách hang về trang web và các thông tin khách hàng cung cấp.
Bước 2: Giai đoạn phân tích
- Dựa vào những thông tin và yêu cầu thiết kế website của khách hàng, phân tích rõ mục đích, yêu cầu nguyện vọng của khách hàng;
- Lập kế hoạch thực hiện dự án;
- Căn cứ trên kết quả khảo sát, thông tin do khách hàng cung cấp, thiết kế lập cấu trúc cho website và thiết kế chung cho toàn hệ thống.
Bước 3: Lựa chọn tên miền và web hosting
- Xem xét chi tiết yêu cầu và tiến hành thiết kế website;
- Tiến hành xử lý hiệu ứng ảnh, thu thập tài liệu liên quan;
- Kiểm tra sản phẩm để đảm bảo tính thẩm mỹ và thống nhất.
Bước 4: Giai đoạn xây dựng
- Xây dựng cơ sở dữ liệu dựa trên thiết kế;
- Soạn thảo nội dung tài liệu, chỉnh sửa hoàn chỉnh nội dung rồi đưa lên trang web;
- Tích hợp hệ thống: lắp ghép phân tích thiết kế, nội dung lập trình thành một sản phẩm;
- Tiến hành kiểm tra, chỉnh sửa và thực hiện nghiệm thu nội bộ.
Bước 5: Giai đoạn chạy thử
- Tổng hợp nội dung, xây dựng hệ thống theo thiết kế;
- Kiểm tra và sửa lỗi;
- Lắp ghép thiết kế với phần mềm, đảm bảo không sai lệch với thiết kế và phần mềm hoạt động tốt;
- Chạy thử hệ thống trong vòng một tuần;
Bước 6: Giai đoạn nghiệm thu
- Khách hàng duyệt dự án đã hoàn thành;
- Đăng tải nội dung lên website đảm bảo hệ thống vận hành tốt.
Bước 7: Giai đoạn chuyển giao
- Bàn giao cho khách hàng, thanh lý hợp đồng;
- Đào tạo và huấn luyện khách hàng quản trị website một cách hiệu quả.
- Đưa website lên các công cụ tìm kiếm Google, Yahoo, v.v;
- Hỗ trợ khách hàng trong quá trình sử dụng và quản trị website.
Xuất bản website là quá trình đưa website đã được thiết kế xong lên môi trường mạng thực, có thể tương tác với người sử dụng.
Các bước thực hiện xuất bản website:
- Lựa chọn và mua tên miền;
- Lựa chịn và thiết lập web server;
- Cập nhập và chỉnh sửa website;
2.4.3 Lựa chọn và mua tên miền
- Tên miền phải phù hợp với nội dung và mục đích của website;
- Dễ đọc, dễ nhớ và không gây nhầm lẫn;
- Trước khi lựa chọn tên miền cần phải kiểm tra tên miền trước vì mỗi tên miền là duy nhất trên mạng lưới internet toàn thế giới Một số trang web để kiểm tra tên miền như: www.checktenmien.com, www.checkdomain.com, v.v.;
- Đăng ký tên miền với nhà cung cấp;
- Một số nhà cung cấp tên miền như: http://www.digistar.vn, http://tenten.vn, http://vinahost.vn, v.v.;
2.4.4 Lựa chọn và thiết lập web server
- Thường có 3 loại web server: o Tự tạo 1 web server; o Sử dụng các web server miễn phí; o Thuê web server.
- Những thống số của web server cần chú ý: o Dung lượng lưu chữ; o Băng thông; o Số lượng domain chính, subdomain, parked domain; o Số lượng tài khoản database và tài khoản FTP; o Số lượng tài khoản email.
Upload website là quá trình đưa website lên web server Thường được sử dụng dựa trên giao thức FTP.
Có 3 cách đưa website server:
- Sử dụng tiện ích có sẵn đi kèm với công cụ thiết kế web;
- Sử dụng các chương trình FTP client chạy riêng như: CuteFTP, WS_FTP;
- Sử dụng plug-in trên trình duyệt như: FireFTP.
2.4.6 Cập nhật và chỉnh sửa website
Sau khi website được upload nếu có thay đổi hoặc lỗi xảy ra cần phải thực hiện cập nhật và chỉnh sửa lại website.
2.4.7 Quảng bá Để website được nhiều biết đến quảng bá là rất cần thiết có thể quảng bá bằng các hình thức thông dụng như: quảng bá trên các phương tiện thông tin đại chúng, đăng ký website với các công cụ tìm kiếm như google, bing, v.v.
2.4.8 Bảo trì Để cải thiện website sao cho phù hợp với yêu cầu của người sử dụng, lấy ý kiến phản hồi từ người sử dụng là rất cần thiết.
Thường xuyên đo đạc phân tích lưu lượng dữ liệu số lượng người dùng truy cập thời điểm cao và thời điểm thấp của website.
Có thể sử dụng công cụ hỗ trợ bảo trì như sau: HTML Validator, Netmechanic, v.v.
Công cụ hỗ trợ
Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi.
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác.
Một số tính năng của Visual Studio Code
Hỗ trợ nhiều ngôn ngữ lập trình
Visual Studio Code hỗ trợ nhiều ngôn ngữ lập trình như C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, nó dễ dàng phát hiện và đưa ra thông báo nếu chương chương trình có lỗi.
Hỗ trợ đa nền tảng
Các trình viết code thông thường chỉ được sử dụng hoặc cho Windows hoặc Linux hoặc Mac Systems Nhưng Visual Studio Code có thể hoạt động tốt trên cả ba nền tảng trên.
Cung cấp kho tiện ích mở rộng
Trong trường hợp lập trình viên muốn sử dụng một ngôn ngữ lập trình không nằm trong số các ngôn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng Điều này vẫn sẽ không làm giảm hiệu năng của phần mềm, bởi vì phần mở rộng này hoạt động như một chương trình độc lập.
Kho lưu trữ an toàn Đi kèm với sự phát triển của lập trình là nhu cầu về lưu trữ an toàn Với Visual Studio Code, người dùng có thể hoàn toàn yên tâm vì nó dễ dàng kết nối với Git hoặc bất kỳ kho lưu trữ hiện có nào.
Visual Studio Code hỗ trợ nhiều ứng dụng web Ngoài ra, nó cũng có một trình soạn thảo và thiết kế website.
Lưu trữ dữ liệu dạng phân cấp
Phần lớn tệp lưu trữ đoạn mã đều được đặt trong các thư mục tương tự nhau Ngoài ra, Visual Studio Code còn cung cấp các thư mục cho một số tệp đặc biệt quan trọng.
Một số đoạn code có thể thay đổi chút ít để thuận tiện cho người dùng Visual Studio Code sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có.
Hỗ trợ thiết bị đầu cuối
Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác.
Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục – mặc dù chúng không hề liên quan với nhau.
Hầu hết các trình viết mã đều có tính năng nhắc mã Intellisense, nhưng ít chương trình nào chuyên nghiệp bằng Visual Studio Code Nó có thể phát hiện nếu bất kỳ đoạn mã nào không đầy đủ Thậm chí, khi lập trình viên quên không khai báo biến, Intellisense sẽ tự động giúp họ bổ sung các cú pháp còn thiếu.
Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.
Việc để lại nhận xét giúp người dùng dễ dàng nhớ công việc cần hoàn thành.
ReactJS hay react là một thư viện, được viết bằng JavaScript, dùng để xây dựng giao diện người dùng Tính đến thời điểm hiện tại, đã có khoảng 1300 developer và hơn
94000 trang web đang sử dụng ReactJS được hiểu nôm na là một thư viện, có chứa nhiều JavaScript mã nguồn và “cha đẻ” đó chính là Facebook Mục đích chính đó chính là mỗi website sử dụng ReactJS thì phải chạy thật mượt hoặc thật nhanh, có khả năng mở rộng cao và đơn giản thực hiện.
Về cơ bản, các tính năng của ReactJS thường xuất phát từ việc tập trung các phần mềm riêng lẻ, cho phép các lập trình viên có thể phá vỡ giao diện của người dùng từ một cách phức tạp và biến nó trở thành các phần mềm đơn giản Hiểu đơn giản thì các kết xuất dữ liệu không chỉ được thực hiện ở vị trí server mà còn ở vị trí khách hàng khi sử dụng 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 JS vào code HTML thông qua các thuộc tính nhưng AngularJS, nhưng 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àng lồng các đoạn HTML vào trong JSX làm cho các thành phần dễ hiểu và dễ sử dụng hơn.
Trong ReactJS thường dùng JS để thiết kế bố cục cho trang web, nhưng nhược điểm là cấu trúc khá khó Thay vào đó sử dụng JSX và nhúng các đoạn HTML vào JavaScript, từ đó cú pháp sẽ dễ hiểu hiểu hơn và JSX cũng có thể tối ưu mã nguồn khi biên soạn Nhờ đó vừa dễ cho người lập trình mà vừa tiện cho việc biên dịch.
Các thành phần cơ bản của React
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Khảo sát hệ thống
Hình 3.1: Trang web được khảo sát
- Trang web khảo sat: bluekids.vn
- Địa chỉ: 169 Láng Hạ, Đống Đa, Hà Nội b Nội dung khảo sát
- Đối tượng khảo sát: Người quản lý web (chủ cửa hàng), nhân viên, khách hàng
+ Thu thập thông tin, nắm bắt được cách thức vận hành của trang web và nghiệp vụ chuyên môn.
- Phương thức khảo sát: gửi tin nhắn qua email, phỏng ván trực tiếp.
Bảng 3.1: Nội dung khảo sát đối tượng quản lý website
STT Câu hỏi Câu trả lời
1 Chào Quản trị viên, em đang thực hiện đồ án về đề tài xây dựng website bán hàng trực tuyến Mong
Quản trị viên có thể bớt chút thời gian cho em tìm hiểu một vài thông
Chào bạn, mình rất sẵn lòng ạ! tin được không ạ?
2 Website kinh doanh về những mặt hàng nào ạ?
Website kinh doanh về mặt hàng quần áo thời trang trẻ em từ 4-14 tuổi
3 Cách thức hoạt động của website gồm những gì ạ? Đầu tiên người dùng nhập vào trình duyệt địa chỉ website Trình duyệt sẽ gửi yêu cầu đến máy chủ DNS.
Hệ thống DNS trả kết quả phân tích tên miền trong đường dẫn và địa chỉ
Sau khi nhận được địa chỉ IP, trình duyệt sẽ tìm đến địa chỉ IP đã nhận – tức máy chủ chứa nội dung website.
Máy chủ web nhận được yêu cầu truy xuất nội dung website và nó gửi một tập hợp các file bao gồm HTML, CSS, các tập tin đa phương tiện khác như âm thanh, hình ảnh cho trình duyệt.
Trình duyệt dịch các file mà máy chủ đã gửi thành trang web mà chúng ta nhìn thấy trên màn hình.
4 Cho em hỏi là, website của công ty có bao nhiêu người tham gia quản lý trang web ạ?
Website bên mình được quản lý bởi mình và một số bạn nhân viên của cửa hàng.
5 Truy cập website có cần đăng ký tài khoản không?
Website không cần đăng kí tài khoản vẫn có thể truy cập vào bình thường.
6 Thủ tục mua hàng như thế nào ạ? Khách hàng truy cập vào trang web lựa chọn những sản phẩm ưng ý để mua Sau đó nhập đầy đủ thông tin cần thiết và nhấn nút đặt hàng Bên cửa hàng sẽ nhận được đơn hàng và nhân viên sẽ gọi xác nhận đơn hàng, cuối cùng là giao hàng cho khách.
7 Thanh toán bằng hình thức ra sao ạ? Để đảm bảo tính an toàn và khách quan nhất Chúng tôi hỗ trợ khách hàng kiểm tra hàng hóa xong mới thanh toán bằng tiền mặt.
Bảng 3.2: Nội dung khảo sát nhân viên website
STT Câu hỏi Câu trả lời
1 Chào Quản trị viên, em đang thực hiện đồ án về đề tài xây dựng website bán hàng trực tuyến Mong nhân viên có thể bớt chút thời gian cho em tìm hiểu một vài thông tin được không ạ?
Chào bạn, mình rất sẵn lòng ạ!
2 Anh/chị làm việc ở bộ phận nào của cửa hàng?
3 Anh/chị đã làm việc được bao lâu rồi ạ?
4 Đối tượng website hướng đến nhiều nhất là những ai ạ?
Theo mình thấy thì website hướng tới các bà mẹ có con nhỏ, phụ nữ hiện đại.
4 Theo anh/chị cửa hàng có nhất thiết phải có website không?
Theo mình thì có website bán hàng là rất cần thiết đối với các bà mẹ có con nhỏ vì khá là tiện lợi.
Phân tích và thiết kế hệ thống
Khách hàng (đặc biệt là các bà mẹ) có nhu cầu muốn mua quần áo cho trẻ em mà không mất thời gian và không phải đến tận cửa hàng để mua Khách hàng sẽ truy cập vào website bán thời trang trẻ em online là có thể mua được quần áo cho trẻ em Để có thể mua hàng khách hàng phải đăng nhập vào trang web bằng tên tài khoản và mật khẩu đã đăng ký, nếu khách hàng chưa có tài khoản thì có thể đăng ký tài khoản ở phần đăng ký.
Khi đăng ký tài khoản khách hàng cần nhập các thông tin: email, họ tên, số điện thoại, địa chỉ, v.v vào form đăng ký Đăng ký thành công, khách hàng có thể đăng nhập vào trang web bình thường Tại giao diện đầu tiên khách hàng có thể lựa chọn sản phẩm để mua, hoặc khách hàng có thể tìm kiếm sản phẩm theo danh mục (bé trai, bé gái), tìm kiếm theo giá tiền, từ khóa
Khi khách hàng chọn được sản phẩm ưng ý, khách hàng sẽ chọn size và số lượng rồi thêm vào giỏ hàng và có thể tiếp tục mua hàng Tại giỏ hàng, khách hàng có thể chỉnh sửa số lượng sản phẩm muốn mua, chọn lại size cho sản phẩm, hoặc xóa sản phầm tại giỏ hàng và cũng có thể tiếp tục them sản phầm vào giỏ hàng Sau khi đã suy nghĩ kỹ, khách hàng có sẽ tiến hành đặt hàng Tại đây, khách hàng nhập thông tin như: họ tên, số điện thoại, địa chỉ nhận hàng rồi kích nút đặt hàng Khách hàng có thể xem trạng thái đơn hàng của mình: đơn hàng ở trạng thái đang chờ xử lý thì khách hàng có thể hủy đơn hàng, đơn ở trạng thái đang giao hàng thì không thể hủy đơn hàng Sau khi nhận hàng và thanh toán cho nhân viên giao hàng thì đơn hàng sẽ được ở trạng thái đã giao Lúc này, khách hàng có thể nhận xét và đánh giá về sản phẩm ở mục đánh giá.
Nhân viên muốn làm việc thì phải truy cập vào trang web và đăng nhập bằng tài khoản và mật khẩu mà người quản trị của hệ thống cung cấp Lúc đó, nhân viên tiếp nhận đơn hàng của khách hàng đã dặt thì tiến hành kiểm tra đơn hàng (sản phẩm, số lượng, v.v.) và xác nhận lại đơn hàng rồi chuyển cho nhân viên giao hàng, và chuyển trạng thái đơn hàng từ trạng thái đang xử lý sang trạng thái đang giao hàng Nhân viên khi giao hàng cho khách hàng thì nhận tiền thanh toán và chuyển trạng thái đơn hàng từ đang giao thành đã giao hàng Để quản lý được doanh thu, nhân viên có thể xem được sản phẩm nào đang được hiệu xuất bán nhiều nhất, xem được doanh thu theo tuần, tháng, năm Khi có sản phẩm mới, nhân viên có thể thêm sản phẩm, cập nhật sản phẩm và cũng có thể xóa sản phẩm. Để thu hút được khách hàng nhân viên có thể thêm các bài viết về sản phẩm của website.
Quản lý trang web thì không thể thiếu người quản trị hệ thống Quản trị của hệ thống là người có thể cung cấp tài khoản và mật khẩu cho nhân viên, khi họ nghỉ việc cũng có thể xóa tài khoản của họ khỏi hệ thống Các chức năng mà nhân viên đảm nhiệm trên hệ thống thì quản trị cũng có thể đảm nhiệm và tham gia
Chức năng này cho phép khách hàng và nhân viên đăng nhập vào hệ thống khi đã có tài khoản Thông tin đăng nhập gồm có:
Sau khi khách hàng hoặc nhân đã nhấn nút “Đăng nhập”, nếu thông tin đăng nhập không chính xác hệ thống sẽ hiển thị “Tên đăng nhập hoặc mật khẩu sai”. Ngược lại, khách hàng sẽ được chuyển tiếp vào trang chủ của website, nhân viên sẽ được chuyển tiếp vào trang quản lý website.
Chức năng này cho phép admin có quyền cấp tài khoản cho nhân viên khi có nhân viên mới, phân quyền cho nhân viên Khi nhân viên nghỉ việc người quản trị có thể xóa tài khoản của nhân viên Khi người quản trị có phát hiện khách hàng có hành vi không đúng, gây đe dọa cho cửa hành thì người quản trị có thể xóa tài khoản khách hàng khoit hệ thống.
Quản lý danh mục (thể loại) sản phẩm
Nếu cửa hàng có kinh doanh thêm loại sản phẩm mới, người quản trị có thể thêm danh mục mới Khi cửa hàng ngừng kinh doanh loại sản phẩm đó thì quản trị có thể xóa danh mục sản phẩm hoặc sửa danh mục
Quản lý bài viết Để tạo sức hút cho khách hàng, quản trị có thể tạo các bài viết về dòng sản phẩm của mình Hoặc khi ra sản phẩm mới, người quản trị có thể viết bài giới thiệu sản phẩm đó.
Các thông tin sản phẩm bao gồm: tên sản phẩm, ngày thêm sản phẩm, giá thành, hình ảnh, mô tả sản phẩm, size, v.v.
Chức năng quản lý sản phẩm: Thêm sản phẩm, sửa sản phẩm, xóa sản phẩm.
- Thêm sản phẩm: Khi thêm sản phâm mới, người quản trị phải nhập các thông tin liên quan đến sản phẩm Những thông tin của sản phẩm sẽ được lưu trên cơ sở dữ liệu (CSDL) Trước khi thêm, thông tin sẽ được kiểm tra định dạng, nếu sai định dạng hoặc thiếu một thông tin thì khi kích nút thêm sản phẩm hệ thống sẽ thông báo “Thông tin không hợp lệ”, ngược lại hệ thống sẽ thông báo “Thêm sản phẩm thành công” Khi sản phẩm đã được thêm vào CSDL, mỗi sản phẩm sẽ được cấp tự động một mã id riêng để định danh sản phẩm.
- Sửa sản phẩm: Chức năng này được thực hiện khi thông tin đã có sẵn trong CSDL Khi muốn thay đổi thông tin sản phẩm, người quản trị chọn vào sản phẩm muốn thay đổi thì các thông tin về sản phẩm đó sẽ được hiển thị trên giao diện cho phép chỉnh sửa Sau đó nhấn nút sửa sản phẩm, vậy là có thể sửa thông tin sản phẩm trên CSDL.
- Xóa sản phẩm: Chức năng này cho phép người quản trị xóa sản phẩm khỏi hệ thống khi dừng kinh doanh sản phẩm đó.
Khi khách hàng đã đặt hàng, người quản trị có thể thấy được thông tin đơn hàng (tên người nhận, địa chỉ giao hàng, tên sản phẩm, số lượng, tổng giá, v.v.). Người quản trị có thể tiếp nhận xử lý đơn hàng, chuẩn bị đơn hàng xong chuyển cho nhân viên giao hàng, thì người quản trị chuyển trạng thái đơn hàng sang trạng thái đang giao hàng hoặc khi đơn hàng được hoàn thành thì chuyển trạng thái đơn hàng thành đã giao hàng.
Người quản trị có thể thống kê xem trong ngày, tháng, năm đã bán được bao nhiêu đơn hàng, bao nhiêu sản phẩm và tổng thu nhập đạt được là bao nhiêu Ngoài ra người quản trị có thể xem được sản phẩm nào được bán nhiều nhất, sản phẩm nào có hiệu suất kém nhất Từ đó có thể đưa ra các phương án kinh doanh phù hợp.
Đăng nhập: Nhân viên đăng nhập vào trang quản lý website theo tài khoản và mật khẩu mà người quản trị đã cung cấp Hệ thống sẽ kiểm tra định dạng, ký tự xem đỡ khớp với CSDL đã lưu chưa, nếu đúng thì chuyển tới trang quản lý, ngược lại thì thông báo “Tài khoản hoặc mật khẩu sai”
Các chức năng quản lý đơn hàng, quản lý bài viết, quản lý sản phẩm nhân viên có thể thực hiển như người quản trị
Đăng ký: Khách hàng chưa có tài khoản để đăng nhập vào trang web, khách hàng có thể đăng ký tài khoản bằng cách nhấn và phần “Đăng ký”. Khách hàng điền thông tin vào mẫu đăng ký (email, tên, địa chỉ, sổ điện thoại, mật khẩu) sau đó nhấn nút đăng ký Hệ thống sẽ kiểm tra định dạng ở các trường, nếu sai định dạng hoặc để trống hệ thống sẽ thông báo trường nào sai, ngược lại hệ thống sẽ thông báo “đăng ký thành công”.
Khi khách hàng đã có tài khoản thì khách hàng có thể đăng nhập vào website như bình thường.
Thiết kế cơ sở dữ liệu vật lý
Bảng 3.19: Bảng dữ liệu Product (sản phẩm)
Tên cột Ý nghĩa Kiểu Quan hệ
Id Mã sản phẩm Varchar Khóa chính
Name Tên sản phẩm Varchar
Category Tên danh mục Varchar
Category_id Mã danh mục Varchar Khóa ngoại image ảnh sản phẩm Varchar size Kích thước sản phẩm Char
Short_descriptio n Mô tả ngắn Text
Description Mô tả đầy đủ sản phẩm Text
Price Giá thành sản phẩm Int
Bảng 3.20: Bảng dữ liệu customer (khách hàng)
Tên cột Ý nghĩa Kiểu Quan hệ
Id Mã khách hàng Varchar Khóa chính
Name Tên khách hàng Varchar
Email Địa chỉ email Varchar
Address Địa chỉ khách hàng Varchar
Phone Số điện thoại khách hàng int
Bảng 3.21: bảng dữ liệu Staff (nhân viên)
Tên cột Ý nghĩa Kiểu Quan hệ
Id Mã nhân viên Varchar Khóa chính
Name Tên nhân viên Varchar
Email Địa chỉ email Varchar
Address Địa chỉ nhân viên Varchar
Phone Số điện thoại nhân viên int
Bảng 3.22: Bảng dữ liệu User (người dùng)
Tên cột Ý nghĩa Kiểu Quan hệ
Id Mã người dùng Varchar Khóa chính
Usename Tên người dùng Varchar
Bảng 3.23: Bảng dữ liệu categorys_product (danh mục sản phẩm)
Tên cột Ý nghĩa Kiểu Quan hệ
Id Mã thể loại Varchar Khóa chính
Name Tên thể loại Varchar
Bảng 3.24: Bảng dữ liệu purchase_order (đơn hàng)
Tên cột Ý nghĩa Kiểu Quan hệ
ID Mã đơn hàng Int Khóa chính
Product_ID Mã sản phẩm Int Khóa ngoại
Email Email người dùng Varchar
Name Tên khách hàng Varchar
Phone Số điện thoại khách hàng Int
Address Địa chỉ khách hàng Varchar
Price Giá sản phẩm Int
Date Ngày đặt hàng Date
Quantity Số lượng sản phẩm Int
Total Tổng giá trị đơn hàng Varchar
Thiết kế giao diện
Công cụ sử dụng để thiết kế giao diện: Adobe XD
Adobe XD (còn được gọi là Adobe Experience Design) là một công cụ chuyên hỗ trợ về thiết kế website và ứng dụng được phát triển bởi Adobe Inc Adobe XD là một phần mềm rất hữu ích trong việc thiết kế cũng như tạo nguyên mẫu cho nhiều ứng dụng, website khác nhau.
Nói một cách đơn giản thì đây là một phần mềm hỗ trợ rất quan trọng người dùng trong việc thiết kế UX/UI.
Lợi ích khi sử dụng Adobe XD:
Tạo và thiết kế giao diện cho người dùng về App Mobile/Web/Landing Page nhanh chóng.
Giao diện Adobe XD ít công cụ, giúp người dùng dễ dàng tìm thấy các công cụ khác trong lúc thao tác hơn những phần mềm khác nên có thể sử dụng cả khi là một người không chuyên.
Cùng lúc mở nhiều artboard (bản vẽ) cho nhiều giao diện màn hình đáp ứng nhu cầu của bạn việc thiết kế.
Nếu là một coder hoặc đã từng sử dụng và hiểu rõ về X-Code thì việc chuyển hướng qua Adobe XD rất đơn giản bởi phần mềm này có giao diện khá tương tự và điều hướng với phần mềm X-Code (công cụ lập trình iOS).
Sau khi đã hoàn thành thiết kế, có thể chia sẻ trực tuyến với mọi người tiện lợi Sau đây là các bản thiết kế giao diện:
3.4.1 Giao diện của khách hàng
Hình 3.40: Thiết kế giao diện trang chủ của khách hàng
Hình 3.41: Thiết kế xem chi tiết sản phẩm
Hình 3.42: Thiết kế giỏ hàng
Hình 3.43: Thiết kế xem đơn hàng ở trạng thái chờ xử lý
Hình 3.44: Thiết kế xem đơn hàng ở trạng thái đã giao hàng
3.4.2 Giao diện của quản trị và nhân viên
Hình 3.45: Thiết kế giao diện trang chủ của quản trị
Hình 3.46: Thiết kế quản lý sản phẩm
Hình 3.47: Thiết kế quản lý đơn hàng
Hình 3.48: Thiết kế thống kê báo cáo
CÀI ĐẶT VÀ XÂY DỰNG CHƯƠNG TRÌNH
Chuẩn bị môi trường
4.1.1 Tải và cài đặt NodeJS
NodeJS là một môi trường máy chủ mã nguồn mở, được xây dựng trên bộ công cụ V8 Javascript - một bộ công cụ nổi tiếng của Google Nền tảng Node runtime bao gồm mọi thứ mà bạn cần để hoàn thành một chương trình Javascript.
Sau đây là hướng dẫn cài đặt NodeJS cho hệ điều hành windows:
Bước 1: Truy cập vào trang web của NodeJS: https://nodejs.org/en/.
Bước 2: Tải NodeJS tại trang chủ
Bước 3: Sau khi tải về tập tin cài đặt Tiến hành chạy tập tin sẽ có giao diện như bên dưới và chọn Next.
Hình 4.2: Sau khi chạy tập tin cài đặt
Bước 4: Đọc và chấp nhận các yêu cầu của NodeJS về bản quyền Sau đó tiếp tục nhấn Next.
Hình 4.3: Đọc và chấp nhận yêu cầu bản quyền NodeJS
Bước 5: Các mục tiếp theo thực hiện theo mặc định của chương trình cài đặt.
Hình 4.4: Thực hiện hướng dẫn mặc định của NodeJS
Bước 6: Sau khi đã thiết lập, chương trình được cài đặt vào máy tính.
Hình 4.5: Môi trường NodeJS đang cài đặt
Bước 7: Cuối cùng nhấn Finish để hoàn thành cài đặt.
Hình 4.6: Hoàn thành cài đặt NodeJS
VS Code (hay Visual Studio Code) là một trong những trình soạn thảo mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính năng và là mã nguồn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi.
Sau đây là hướng dẫn cài đặt VS Code cho windows:
Bước 1: Tải file cài đặt Visual Studio Code cho Windows.
Bước 2: Lưu file trên thiết bị.
Bước 3: Nhấn đúp vào file vừa tải về để khởi chạy cài đặt VS Code trên Windows. Bước 4: Xác nhận các điều khoản thỏa thuận.
Bước 5: Nhấn vào nút Next.
Bước 6: Sử dụng vị trí cài đặt mặc định và nhấn vào nút Next.
Bước 7: Sử dụng cài đặt menu Start mặc định và nhấp vào nút Next.
Bước 8: (Tùy chọn) Tích vào tùy chọn Add “Open with code” action to Windows
Bước 9: (Tùy chọn) Tích vào tùy chọn Add “Open with code” action to Windows
Hình 4.7: Tích tùy chọn cài đặt VS Code
Bước 10: Tích vào tùy chọn Register Code as an editor for supported types.
Bước 11: Kiểm tra tùy chọn Add to PATH.
Bước 12: Nhấp vào nút Install.
Bước 13: Nhấp vào nút Finish.
Sau khi hoàn thành các bước là có thể sử dụng VS Code trên máy tính windows để đánh giá hoặc viết mã nguốn.
Sau đây là các bước hướng dẫn cài đặt thư viện ReacJS:
Bước 1: Đầu tiền cần cài đặt NodeJS để tạo môi trường chạy React, việc cài đặt này đã được hướng dẫn ở trên.
Bước 2: Tạo một thư nục để chứa thư mục React, vào trong thư mục nhấn giữ Shift và nhấp chuột phải và chọn “Open commad window here”.
Hình 4.8: Kích chuột phải mở Command window
Bước 3: Tiếp theo gõ các dòng lệnh sau để tạo thư mục React
Hình 4.9: Dòng lệnh tạo thư mục React
Lúc này NPM sẽ tự động tạo một thư mục có tên là my-app và cài đặt các module và thư viện cần thiết.
Bước 4: Chạy thư mục này bằng lệnh “npm start” Ta sẽ thấy giao diện trang web như sau:
Hình 4.10: Giao diện đầu tiên trang web dùng thư viện ReactJS
Sửa và tạo các file viết mã nguồn trong thư mục để xây dựng chương trình.
Một số mã nguồn mẫu
Sau đây mà một số mã nguồn mẫu viết bằng ReactJS:
Hình 4.11: Mã nguồn đăng nhập
Thêm sản phẩm vào giỏ hàng
Hình 4.12: Mã nguồn thêm sản phẩm vào giỏ hàng
Hình 4.13: Mã nguồn đặt hàng
Hình 4.14: Mã nguồn thêm bình luận sản phẩm
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
- Xây dựng hệ thống bao gồm các năng:
+ Quản lý : người dùng, sản phẩm, bài viết, danh mục, đơn hàng.
+ Thông tin cá nhân, đổi thông tin cá nhân, lịch sử đặt hàng.
+ Đăng nhập, đăng ký, đăng xuất.
Thuận lợi và khó khăn:
- Tư liệu hỗ trợ phong phú, đa dạng
- Chỉ đăng nhập bằng email
- Chưa có chức năng chat trực tuyến
- Chưa có chức năng thanh toán online
- Thời gian thực hiện hạn hẹp
Xây dựng hoàn thiện các chức năng như: Tích hợp giao diện mobile, đăng nhập thông qua mạng xã hội(facebook, zalo, twitter,…),, chat trực tuyến, ưu hóa hiệu suất và tốc độ của trang web.
