PHẦN MỞ ĐẦU 1. Mục đích Công ty Cổ phần An Cường hoạt động trong lĩnh vực kinh doanh nội thất được một thời gian. Hoạt động chủ yếu của họ là tư vấn, thiết kế nội thất, thi công các sản phẩm gỗ công nghiệp, cung cấp thiết bị, phụ kiện nhà bếp cao cấp các sản phẩm trang trí đi kèm theo thiết kế, đồ trang trí cho không gian nội thất gia đình Do nhận thấy mô hình hoạt động còn chưa tiếp cận được nhiều đối tượng khách hàng, lãnh đạo công ty có ý định mở rộng mô hình kinh doanh theo hướng thương mại điện tự. Cụ thể, họ muốn đưa những sản phẩm sách được nhập khẩu lên Internet, khách hàng có thể xem và đặt mua nội thất, thiết bị.
Trước nhu cầu thực tiễn đó, dự án xây dựng Website bán nội thất lấy tên là “A55” được sinh ra nhằm mục đích hướng dẫn, định hướng cho việc phát triển và kế hoạch quản lý dự án, xây dựng kiến trúc và phát triển cơ sở dữ liệu cho hệ thống một cách tổng quát, cụ thể chi tiết từng giai đoạn, dòng thời gian. Từ đó sản phẩm hoàn thiện sẽ là một hệ thống người quản lý sẽ đăng tải các sản phẩm, quản lý, phê duyệt các đơn đặt hàng, người mua hàng có thể truy cập Website xem nội dung về nội thất, giá thành cũng như đặt mua sản phẩm một cách tiện lợi, dễ dàng 2. Đối tượng và phạm vi nghiên cứu Đối tượng sử dụng, tham gia trực tiếp vào hệ thống Website được chia ra gồm hai đối tượng. Thứ nhất là những người mua hàng – họ được quyền trực tiếp truy cập Website, theo dõi thông tin về các sản phẩm, đưa ra những nhận xét về sản phẩm và đặt hàng.
Thứ hai là người quản lý – người thêm, sửa, xóa thông tin về các sản phẩm và phê duyệt đơn hàng. Cụ thể những chức năng của các nhóm đối tượng được phân tích, nghiên cứu chi tiết trong phần phân tích dự án bên dưới. Để có thể xây dựng hệ thống Website chúng ta cũng cần nghiên cứu về công nghệ sử dụng, ngôn ngữ lập trình và các công cụ phát triển khác. Phương pháp nghiên cứu Lý thuyết: - Tìm hiểu kỹ thuật xây dựng giao diện Website: HTML, CSS, JS, ReactJS - Tìm hiểu kỹ thuật xây dựng hệ thống bằng NodeJS, Framwork NestJS - Hiểu cách thức hoạt động của mô hình API, Website SPA - Hiểu các dữ liệu lưu trữ vào MongoDB.
Thực hành: 11 - Xây dựng hệ thống Website sử dụng NodeJS và hệ cơ sở dữ liệu MongoDB 4. Quy trình hoạt động cơ bản của hệ thống Hệ thống sẽ chia gồm hai phần cơ bản: - Trang cho người quản trị (chỉ những người quản lý được cấp tài khoản cố định mới truy cập được vào đây) - Trang cho người mua hàng (tất cả mọi người đều có quyền truy cập) 4.1 Trang quản trị Người quản lý sẽ được cấp tài khoản và địa chỉ để truy cập. Tại đây người quản lý có thể thực hiện các thao tác quản lý về: - Dự án (thêm, sửa, xóa thông tin dự án): Bao gồm thông tin về các dự án lớn đã lắp đặt trước đó - Danh mục sản phẩm (thêm, sửa, xóa thông tin danh mục) - Sản phẩm (thêm, sửa, xóa thông tin sản phẩm) bao gồm tên, giá thành, chất liệu, mô tả, hình ảnh của sản phẩm. - Đơn hàng (xem , phê duyệt đơn hàng): đơn hàng được đặt bởi người mua sẽ được hiển thị tại đây.
Người quản lý kiểm kê lại đơn hàng trước khi phê duyệt.2 Trang xem và mua hàng Bất kể người dùng Internet nào cũng có thể truy cập xem thông tin về sản phẩm, thông tin giới thiệu các dự án trước đó. Các danh mục sản phẩm, thông tin sản phẩm được hiển thị lên sau khi người quản trị thêm vào. Người mua sau khi truy cập có thể tìm kiếm, xem thông tin sản phẩm cần mua, thông tin về cửa hàng, thông tin liên hệ. Sau khi xem xong sản phẩm người mua có thể thêm sản phẩm vào giỏ hàng, lựa chọn số lượng sản phẩm.
Sau khi lựa chọn hết, người mua xem giỏ hàng rồi tiến hành đặt hàng. Sau khi đặt hàng thành công thì nội dung đơn hàng sẽ trực tiếp gửi đến người quản trị để phê duyệt. TÌM HIỂU VỀ CÁC KHÁI NIỆM 1. Công nghệ và ngôn ngữ xây dựng giao diện Website 1.1 HTML (HyperText Markup Language) HTML hay là "Ngôn ngữ Đánh dấu Siêu văn bản" 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.
Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript. Các trình duyệt Web nhận tài liệu HTML từ một Web server hoặc một kho lưu trữ cục bộ và render tài liệu đó thành các trang Web đa phương tiện. HTML mô tả cấu trúc của một trang Web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu. Các phần tử HTML là các khối xây dựng của các trang HTML.
Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào trang được hiển thị. HTML cung cấp một phương tiện để tạo tài liệu có cấu trúc bằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như tiêu đề, đoạn văn, danh sách, đường dẫn, chú thích và các mục khác. Các phần tử HTML được phân định bằng các thẻ, được viết bằng dấu ngoặc nhọn. Các thẻ như <img /> và <input /> giới thiệu trực tiếp nội dung vào trang.
Các thẻ khác như <p> bao quanh và cung cấp thông tin về văn bản tài liệu và có thể bao gồm các thẻ khác làm phần tử phụ. Các trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để diễn giải nội dung của trang. HTML có thể nhúng các chương trình được viết bằng kịch bản như JavaScript, điều này ảnh hưởng đến hành vi và nội dung của các trang Web. Việc bao gồm CSS xác định giao diện và bố cục của nội dung.
World Wide Web Consortium (W3C), trước đây là đơn vị bảo trì HTML và là người duy trì hiện tại của các tiêu chuẩn CSS, đã khuyến khích việc sử dụng CSS trên HTML trình bày rõ ràng kể từ năm 1997. Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang Web. Chúng ta có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên Website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, kiểu chữ, thay đổi cấu trúc… CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang Web. 13 Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác.
Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó. Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ đánh dấu (nền tảng của trang Web) và CSS định hình phong cách (tất cả những gì tạo nên giao diện Website), chúng là không thể tách rời. Lợi ích CSS đem lại: - Giải quyết một vấn đề lớn: Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mọi trang Web.
Đây là một quá trình rất dài tốn thời gian và công sức. Ví dụ: Nếu chúng ta đang phát triển một trang Web lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là một khuyến cáo của W3C.
Nhờ CSS mà mã nguồn của trang Web sẽ được tổ chức gọn gàng hơn, trật tự hơn. Nội dung trang Web sẽ được tách bạch hơn trong việc định dạng hiển thị. Từ đó, quá trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm rối cho mã HTML. - Tiết kiệm rất nhiều thời gian: Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể thay đổi toàn bộ trang Web bằng cách thay đổi chỉ một tệp.
Sử dụng CSS sẽ giúp chúng ta không cần thực hiện lặp lại các mô tả cho từng thành phần. Từ đó, chúng ta có thể tiết kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm soát dễ dàng hơn các lỗi không đáng có. CSS tạo ra nhiều phong cách khác nhau nên có thể được áp dụng với nhiều trang Web, từ đó giảm tránh việc lặp lại các định dạng của các trang Web giống nhau. - Cung cấp thêm các thuộc tính: CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang Web.
CSS giúp người dùng nhiều phong cách trên một trang Web HTML nên khả năng điều chỉnh trang của chúng ta trở nên vô hạn.3 Javascript JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang Web (phía người dùng) cũng như phía máy chủ (với Nodejs). Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java.js) là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.
Phiên bản mới nhất của JavaScript là ECMAScript 12. ECMAScript là phiên bản chuẩn hóa của JavaScript. Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợ không 14 đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357. Trên trình duyệt, rất nhiều trang Web sử dụng JavaScript để thiết kế trang Web động và một số hiệu ứng hình ảnh thông qua DOM.
JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,. Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dùng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA.