Nhằm mục đích giúp mọi người có thể tiếp cận cũng như hiểu biết hơnvề những món đồ công nghệ mới và những lợi ích nó mang lại thì chúng em đãtạo ra một website có khả năng tương t c cũng
Trang 1HỌC VIỆN KỸ THUẬT MẬT MÃ
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO CÔNG NGHỆ PHẦN MỀMĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆNHÓM 7
Giảng viên hướng dẫn: Trần Anh TúSinh viên thực hiện:
- Bùi Sỹ Thủy – AT170149- Nguyễn Cao Phi – AT170136- Chu Đức Anh – AT170203- Nguyễn Ngọc Anh – AT170103
Hà Nội, 2023
Trang 2HỌC VIỆN KỸ THUẬT MẬT MÃ
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO CÔNG NGHỆ PHẦN MỀMĐỀ TÀI:
XÂY DỰNG WEBSITE BÁN ĐỒ CÔNG NGHỆ
Nhận xét của c n bô # hướng dẫn:
Trang 32.1 Yêu cầu chức năng 7
2.2 Yêu cầu phi chức năng 8
3 C=c công cụ sử dụng 8
3.1 HTML 8
3.2 CSS 9
3.3 Ngôn ngữ lập trình web Javascript 10
3.4 Thư viện ReactJS 11
3.5 NestJS 11
3.6 Hệ quản trị cơ sở dữ liệu MySQL 12
CHƯƠNG 2 : PHÂN TÍCH, THIẾT KẾ HỆ THỐNG WEBSITE BÁN ĐỒ CÔNG NGHỆ 13
1 Biểu đồ Use case 13
1.1 Biểu đồ Use case tổng quát 13
1.2 Phân rã biểu đồ Use case 13
1.2.1 Use case đăng ký 13
1.2.2 Use case đăng nhập 14
1.2.3 Use case tìm kiếm 15
1.2.4 Use case mua hàng 16
1.2.5 Use case quản lí sản phẩm 16
1.2.6 Use case xem tin tức 17
2 Biểu đồ tuần tự 17
2.1 Biểu đồ tuần tự đăng nhập, đăng ký tài khoản 17
2.2 Biểu đồ tuần tự tìm kiếm 19
2.3 Biểu đồ tuần tự xem tin tức 20
Trang 42.4 Biểu đồ tuần tự thêm sản phẩm 21
2.5 Biểu đồ tuần tự thêm danh mục sản phẩm 21
3 Thiết kế cơ sở dữ liệu 23
3.2.7 Bảng giá trị thuộc tính của sản phẩm 28
3.2.8 Bảng chứa giá trị về các biến thể của một đối tượng, sản phẩm.293.2.9 Bảng chứa giá trị của giỏ hàng 29
3.3.10 Bảng chứa giá trị của đơn đặt hàng 29
3.2.11 Bảng chứa các giá trị thuộc tính của các biến thể (variant) 30
CHƯƠNG 3: TRIỂN KHAI HỆ THỐNG WEBSITE BÁN ĐỒ CÔNG NGHỆ 31
1 Qu= trình triển khai hệ thống 31
1.1 Cài đặt môi trường và tạo dự án 31
1.1.1 Cài đặt Visual Studio Code (VSCode) 31
1.1.2 Cài đặt thư viện ReactJS 31
1.2 Xây dựng hệ thống website bán đồ công nghệ 37
1.2.1 Tạo cơ sở dữ liệu 37
2 GiCi thiệu một số giao diện của hệ thống 44
2.1 Giao diện trang chủ 44
2.2 Giao diện trang sản phẩm 45
2.3 Giao diện trang giỏ hàng 46
Trang 52.6 Giao diện quản lý danh mục 49
2.7 Giao diện quản lý sản phẩm 49
2.8 Giao diện quản lý đơn hàng 50
2.9 Giao diện quản lý nhân viên 51
KẾT LUẬN 52
Kết quả đạt được 52
Hạn chế: 52
HưCng ph=t triển : 53
Trang 6LỜI NÓI ĐẦU
Trước sự ph t triển nhanh chóng của Công Nghệ thông tin cụ thể hơn làlĩnh vực Mạng và Truyền thông đang ph t triển mạnh mẽ Đi kèm với sự ph ttriển đó là c c dịch vụ, tiện ích để phục vụ đời sống, công việc, giải trí,… củacon người Nhu c0u mua sắm c c thiết bị công nghệ như điện thoại thông minh,m y tính x ch tay ngày càng tăng cao, t0m quan trọng của c c thiết bị điện tửthông minh cùng c c món đồ công nghệ ngày càng lớn nhất là trong thời kì côngnghệ số Nhằm mục đích giúp mọi người có thể tiếp cận cũng như hiểu biết hơnvề những món đồ công nghệ mới và những lợi ích nó mang lại thì chúng em đãtạo ra một website có khả năng tương t c cũng như là phục vụ cho việc muahàng của mọi người được diễn ra trực tuyến không mất thời gian phải đi tới c ccửa hàng để xem, để tìm hiểu về c c món đồ công nghệ mới.
Trong b o c o này, chúng em sẽ giới thiệu qu trình ph t triển một hệthống website b n đồ công nghệ, bao gồm việc lựa chọn công nghệ phù hợp,thiết kế giao diện hợp lý, cung cấp c c tính năng quan trọng và quản lý nội dungtrên trang web Ngoài ra, chúng em cũng sẽ trình bày c c kết quả đạt được saukhi đã triển khai thành công website
Trang 7CHƯƠNG 1 PHÂN TÍCH YÊU CẦU CỦA HỆ THỐNG WEBSITE BÁNĐỒ CÔNG NGHỆ
1 Tổng quan hệ thống
- Hệ thống website b n đồ công nghệ là hệ thống cho phép người sử dụngtruy cập vào website để tìm hiểu, xem xét về mẫu mã cũng như cập nhật c c tintức về công nghệ, mua hàng trực tuyến và thanh to n trong hệ thống Hệ thốnglưu trữ những thông tin cơ bản của sản phẩm, c c tính năng mới và mẫu mã kiểud ng mới của c c món đồ công nghệ tiên tiến.
- Hệ thống có 2 lớp sử dụng cơ bản là người sử dụng và người quản trị hệthống Người sử dụng có thể sử dụng c c chức năng của hệ thống như mua đồcông nghệ, tìm kiếm mẫu hàng mong muốn với nhu c0u và gi cả hợp lí, xemmẫu mã thông số chi tiết của c c món đồ công nghệ c0n tìm, Người quản trị hệthống có thể quản lý thông tin kh ch hàng, upload c c bài h t,
- Mục đích phạm vi xây dựng hệ thống :
+ Người sử dụng có thể thoải m i tìm hiểu về c c đồ công nghệ mới, tínhnăng thông số kĩ thuật mà không c0n phải đi tới c c cửa hàng tiết kiệm chi phí đilại của người sử dụng và có thể tìm hiểu mọi lúc mọi nơi kết nối với internet.
- C c hoạt động nghiệp vụ cơ bản của hệ thống :
+ Người sử dụng có thể đăng ký tài khoản và đăng nhập bất cứ lúc nào đểmua hàng và thanh to n trực tuyến.
+ Có thể tìm c c mặt hàng theo đúng nhu c0u mẫu mã thông số kỹ thuật.
2 Yêu cầu hệ thống
2.1 Yêu cầu chức năng
Yêu c0u chức năng đối với hệ thống website công nghệ :
- Hệ thống chạy trên mọi nền tảng website có thể sử dụng mọi lúc mọi nơi.- Quản lý thông tin c c mặt hàng, cho phép thêm, sửa, xóa c c sản phẩm.- Cho phép đặt hàng trực tuyến và thanh to n trực tuyến.
- Cho phép tìm kiếm c c sản phẩm phù hợp với nhu c0u.- Quản lý thông tin kh ch hàng và hóa đơn mua hàng.
Trang 8Yêu c0u chức năng đối với kh ch hàng :
- Cho phép kh ch hàng đăng nhập, xem, tìm kiếm sản phẩm, - Kh ch hàng có thể mua hàng, thanh to n trực tuyến.
2.2 Yêu cầu phi chức năng
- Thiết kế giao thân thiện với người dùng và dễ sử dụng.
- Trang web công nghệ c0n được tối ưu hóa để sử dụng trên mọi thiết bịnhư điện thoại di động, m y tính bảng,
- Trang web phải bảo mật thông tin c nhân của người sử dụng bao gồmthông tin đăng nhập và thông tin thanh to n.
- Trang web công nghệ c0n đảm bảo tốc độ tải nhanh và hiệu suất cao đểđ p ứng nhu c0u của người sử dụng.
3 C=c công cụ sử dụng
3.1 HTML
HTML (HyperText Markup Language) là ngôn ngữ đ nh dấu sử dụng đểxây dựng và cấu trúc c c trang web Được ph t triển bởi Tim Berners-Lee vàonhững năm 1990, HTML là một ph0n quan trọng trong việc tạo ra c c trang webvà liên kết chúng thành mạng lưới World Wide Web.
HTML sử dụng cú ph p đơn giản và dựa trên c c thẻ (tags) để x c định vàđịnh dạng nội dung trên trang web Mỗi thẻ HTML được đặt trong dấu ngoặcnhọn ‘<tag>’ và ‘</tag>’ để x c định ph0n bắt đ0u và kết thúc của ph0n tử C cph0n tử HTML có thể chứa văn bản, hình ảnh, liên kết, bảng, biểu đồ và nhiềuthành ph0n kh c để hiển thị thông tin và tương t c với người dùng.
HTML cho phép cấu trúc trang web bằng c ch sử dụng c c ph0n tử nhưtiêu đề, đoạn văn bản, danh s ch, bảng và vùng chứa nội dung kh c Bên cạnhđó, có thể tạo liên kết đến c c trang web kh c, thêm hình ảnh, âm thanh, videovà x c định c c thuộc tính cho c c ph0n tử như màu sắc, kích thước, vị trí vàhành vi tương t c.
HTML không chỉ đơn thu0n là ngôn ngữ định dạng, mà nó còn là cơ sở choc c ngôn ngữ và công nghệ kh c như CSS (Cascading Style Sheets) để địnhdạng giao diện và JavaScript để thêm tính năng động và tương t c cho trang
Trang 9Với HTML, có thể tạo ra c c trang web tĩnh, nội dung động, giao diệnngười dùng phong phú và trải nghiệm tương t c đa dạng HTML là một công cụquan trọng cho việc xây dựng và ph t triển c c trang web hiện đại và nó là mộtph0n không thể thiếu trong việc truyền tải thông tin và tương t c trên Internet.
3.2 CSS
CSS (Cascading Style Sheets) là một ngôn ngữ đ nh dấu được sử dụng đểđịnh dạng và trình bày giao diện của c c trang web Nó được sử dụng cùng vớiHTML để x c định c ch mà c c ph0n tử HTML hiển thị trên trình duyệt web.
CSS cho phép x c định c c thuộc tính và gi trị cho c c ph0n tử HTML,như màu sắc, kích thước, căn chỉnh, khoảng c ch, phông chữ và nhiều thuộc tínhkh c Bằng c ch t ch riêng ph0n lớp định dạng ra khỏi ph0n nội dung trongHTML, CSS giúp tạo ra giao diện linh hoạt và dễ bảo trì cho trang web.
Cú ph p của CSS dựa trên cặp thuộc tính và gi trị, ví dụ như ‘property:value;’ Có thể p dụng CSS vào c c ph0n tử HTML thông qua việc sử dụng c c
bộ chọn (selectors) Bộ chọn có thể là tên ph0n tử, lớp, ID, hoặc c c thuộc tínhkh c của ph0n tử Khi một trình duyệt web tải một trang HTML, nó cũng tải c ctệp CSS liên quan để p dụng c c quy tắc định dạng.
CSS cung cấp nhiều công cụ và khả năng để tạo ra giao diện đẹp và linhhoạt cho trang web C c kh i niệm quan trọng trong CSS bao gồm:
Lớp và ID: Định danh c c ph0n tử để p dụng c c quy tắc định dạng.Kết hợp và kế thừa: X c định quan hệ giữa c c ph0n tử và quy tắc địnhdạng.
Bố cục (layout): X c định vị trí và c ch bố trí c c ph0n tử trên trang.Đa phương tiện (media): Định dạng và hiển thị phù hợp với c c loại thiếtbị và kích thước màn hình kh c nhau.
Hiệu ứng và chuyển động: Tạo hiệu ứng động và chuyển động cho c cph0n tử trên trang.
CSS là một công cụ quan trọng cho việc tạo giao diện đẹp, thân thiện vớingười dùng và tăng tính tương t c của trang web Nó cho phép tùy chỉnh màusắc, kiểu chữ, khoảng c ch và nhiều yếu tố kh c, giúp trang web của trở nên độcđ o và phù hợp với ý tưởng thiết kế
Trang 103.3 Ngôn ngữ lập trình web Javascript
JavaScript là một ngôn ngữ lập trình phía client (client-side) được sử dụngrộng rãi để thêm tính năng động và tương t c cho c c trang web Với JavaScript,bạn có thể tạo ra c c hiệu ứng động, thao t c với dữ liệu, xử lý sự kiện và tươngt c với người dùng trên trình duyệt web.
JavaScript được tích hợp trực tiếp vào trình duyệt web và thực thi trên m ytính của người dùng Điều này cho phép nó trực tiếp tương t c với c c ph0n tửHTML và CSS của trang web, và thay đổi nội dung và giao diện của trang dựatrên hành vi và sự tương t c của người dùng.
JavaScript cung cấp một loạt c c tính năng và chức năng để ph t triển c cứng dụng web phong phú, bao gồm:
Xử lý sự kiện: JavaScript cho phép bạn phản ứng và xử lý c c sự kiện nhưnhấp chuột, nhập liệu từ bàn phím và tương t c với c c ph0n tử trên trang web.
Thao t c với DOM: JavaScript có khả năng truy cập và thay đổi cấu trúcvà nội dung của trang web thông qua DOM (Document Object Model) Điều nàycho phép bạn thêm, xóa, sửa đổi và tìm kiếm c c ph0n tử trên trang.
Giao tiếp với m y chủ: Bằng c ch sử dụng XMLHttpRequest hoặc APIFetch, JavaScript có thể tương t c với m y chủ để lấy và gửi dữ liệu, cho phéptạo ra c c ứng dụng web động và cập nhật nội dung mà không c0n tải lại toàn bộtrang.
Điều khiển luồng logic: JavaScript hỗ trợ c c cấu trúc điều khiển như rẽnh nh (if-else), vòng lặp (for, while) và hàm để thực hiện c c t c vụ và xử lýlogic phức tạp.
Đối tượng và lập trình hướng đối tượng: JavaScript cho phép bạn tạo rađối tượng và sử dụng c c tính năng của lập trình hướng đối tượng như kế thừa,đa hình và đóng gói.
JavaScript không chỉ được sử dụng trong trình duyệt web, mà còn ph ttriển mạnh mẽ trên nhiều nền tảng kh c như ứng dụng di động, m y chủ vàInternet of Things (IoT) Với JavaScript, bạn có thể tạo ra c c ứng dụng web đadạng, từ c c trang web tĩnh đơn giản đến c c ứng dụng web phức tạp và tươngt c.
Trang 113.4 Thư viện ReactJS
- Framework ReactJS được sử dụng để xây dựng c c ứng dụng web độngvà tương t c ReactJS cho phép lập trình viên tạo ra c c giao diện người dùngđộng và phản hồi nhanh chóng, giúp cải thiện tính tương t c và trải nghiệmngười dùng của c c ứng dụng web.
- ReactJS cho phép lập trình viên xây dựng c c thành ph0n (components)độc lập và có thể t i sử dụng, giúp tăng tính linh hoạt và dễ bảo trì của c c ứngdụng Nó cũng sử dụng Virtual DOM để cải thiện hiệu suất và tốc độ render củaứng dụng.
- ReactJS cung cấp c c tính năng như JSX, một ngôn ngữ đặc biệt cho phépviết HTML và JavaScript trong cùng một tệp, và Flux, một kiến trúc quản lýtrạng th i dữ liệu của ứng dụng Nhờ vào c c tính năng này, lập trình viên có thểtạo ra c c ứng dụng web động, dễ bảo trì và dễ mở rộng.
- Trong bài to n xây dựng website công nghệ, thư viện react được sử dụngđể xây dựng giao diện người dùng đ p ứng c c yêu c0u của ứng dụng
3.5 NestJS
- NestJS là một framework Node.JS cho phép xây dựng ứng dụng phíaserver Nest mở rộng c c framework Node.js như Express hay Fastify để bổsung thêm nhiều module hay thư viện hỗ trợ việc xử lý t c vụ Đây là mộtframework mã nguồn mở, sử dụng TypeScript và rất linh hoạt để xây dựng c chệ thống backend Bên cạnh đó, NestJS còn giúp mở rộng c c server Node để hỗtrợ những cơ sở dữ liệu như MongoDB, Redis hay Apache Cassandra
- Cho phép develop nhanh và hiệu quả hơn Khả năng mở rộng tốt, dễ bảotrì ứng dụng Là framework Node.js ph t triển mạnh nhất trong 3 năm trở lạiđây Cộng đồng hỗ trợ lớn, tích cực Kết hợp ph t triển front-end và mid-tier,một đặc điểm vượt trội so với h0u hết c c ngôn ngữ kh c Sử dụng TypeScript,cho phép thích ứng nhanh chóng với c c thay đổi khi JavaScript đang ngày càngph t triển mạnh mẽ Nguồn tài liệu hướng dẫn phong phú, chi tiết Qu trình unittesting trở nên đơn giản hơn Được xây dựng chuyên dùng cho c c ứng dụngdoanh nghiệp có quy mô lớn
- Cung cấp kiến trúc ứng dụng độc lập, cho phép c c developer tạo ranhững ứng dụng dễ test, dễ mở rộng và dễ bảo trì Cho phép xây dựng ứng dụngRest API, MVC, microservices, GraphQL, Web Socket hay CRON job Cấu trúcchủ yếu dựa vào Angular – rất đơn giản và cho phép tập trung vào việc thiết kế
Trang 12endpoint thay vì cấu trúc của ứng dụng Cung cấp c c module, dịch vụ vàcontroller giống Angular, cho phép ứng dụng có khả năng mở rộng và test tốthơn so với Express hay Koa Có tính chất kết nối lỏng, do đó những lỗi cũ trongdự n không ảnh hưởng đến cấu trúc của codebase sau này
3.6 Hệ quản trị cơ sở dữ liệu MySQL
- MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở được sử dụng rộngrãi trên c c ứng dụng web để lưu trữ và quản lý dữ liệu Nó được ph t triển bởiOracle Corporation và được cung cấp miễn phí cho c c lập trình viên và c c tổchức.
- MySQL sử dụng ngôn ngữ truy vấn SQL để tương t c với cơ sở dữ liệuvà hỗ trợ c c tính năng như lưu trữ dữ liệu trên đĩa, bảo mật dữ liệu và quản lýngười dùng MySQL cũng hỗ trợ c c tính năng nâng cao như lập lịch sao lưu vàphục hồi dữ liệu, sao chép cơ sở dữ liệu và nhân bản cơ sở dữ liệu.
- Trong bài to n xây dựng website b n đồ công nghệ, cơ sở dữ liệu MySQLsử dụng để lưu trữ, quản lý và truy xuất c c dữ liệu sản phẩm Cở sở dữ liệuMySQL cho phép tạo và quản lý c c bảng cơ sở dữ liệu, thêm, sửa, xóa dữu liệuvà thực hiện c c truy vấn phức tạp trên cơ sở dữ liệu đó.
Trang 13CHƯƠNG 2 : PHÂN TÍCH, THIẾT KẾ HỆ THỐNG WEBSITE BÁNĐỒ CÔNG NGHỆ
1 Biểu đồ Use case
1.1 Biểu đồ Use case tổng quát
Trên cơ sở phân tích yêu c0u hệ thống websitec b n đồ công nghệ ởchương 1, ta thấy được hệ thống có 2 t c nhân chính là : User, Admin cùng vớic c chức năng chính được biểu diễn trong hình 2.1
Hình 2.1.Biểu đồ Use case tổng qu=t của hệ thống
1.2 Phân rã biểu đồ Use case1.2.1 Use case đăng ký
Use case đăng ký tài khoản được thực hiện bởi người dùng có thể đượcbiểu diễn như sau (Hình 2.2).
Trang 14Hình 2.2 Use case đăng ký tài khoản
1.2.2 Use case đăng nhập
Use case đăng nhập tài khoản được thực hiện bởi người dùng có thể đượcbiểu diễn như sau (Hình 2.3).
Hình 2.3 Use case đăng nhập của kh=ch hàng
Use case đăng nhập tài khoản được thực hiện bởi nhân viên có thể đượcbiểu diễn như sau (Hình 2.4).
Trang 15Hình 2.4 Use case đăng nhập của nhân viên
1.2.3 Use case tìm kiếm
Use case tìm kiếm được thực hiện bởi kh ch hàng có thể được biểu diễnnhư sau (Hình 2.5).
Hình 2.5 Use case tìm kiếm của kh=ch hàng
Use case tìm kiếm được thực hiện bởi quản lí hệ thống có thể được biểu diễn như sau (Hình 2.6).
Trang 16Hình 2.6 Use case tìm kiếm của quản lí hệ thống
1.2.4 Use case mua hàng
Use case mua hàng được thực hiện bởi người dùng có thể được biểu diễnnhư sau (Hình 2.7).
Hình 2.7 Use case mua hàng
1.2.5 Use case quản lí sản phẩm
Use case quản lý sản phẩm được thực hiện bởi quản trị hệ thống có thểđược biểu diễn như sau (Hình 2.8).
Trang 17Hình 2.8 Use case quản lí sản phẩm
1.2.6 Use case xem tin tức
Use case xem tin tức được thực hiện bởi người dùng có thể được biểu diễnnhư sau (Hình 2.9).
Hình 2.9 Use case xem tin tức2 Biểu đồ tuần tự
2.1 Biểu đồ tuần tự đăng nhập, đăng ký tài khoản
Biểu đồ tu0n tự thể hiện qu trình đăng ký tài khoản của user (Hình 2.10).
Trang 18dev: Run `next dev` để run app trong development modebuild: Run `next build` để run app trong production modestart: Run `next start` để bắt đ0u chạy ứng dụng trên serverlint: Run `next lint` để thiết lập cấu hình ESLint trong config
2 Cài đặt NestJS.+ Install NestJS CLI.
Nest CLI là một tiện ích giao diện dòng lệnh, cho phép nhanh chóng tạoproject từ với c c base files và dependencies c0n thiết Với Nest CLI, bạn cũngcó thể cấu trúc nhiều artifacts kh c nhau như components và modules; servingcho app đang develop và xây dựng app cuối cùng sẵn sàng cho production NestCLI dựa trên pakage Angular Devkit và sử dụng nodemon để xem c c thay đổitrên file.
Hãy bắt đ0u bằng c ch cài đặt Nest CLI Mở new terminal và chạy lệnhsau:
npm install -g @nestjs/cli
Sau khi cài đặt CLI, Có thể nhanh chóng tạo project Nest.js và developngay rồi.
+ Tạo Nest Project trong Nest.js
Sau khi cài đặt CLI, có thể sử dụng nó để nhanh chóng tạo project Sau khicài đặt CLI, mở terminal chạy lệnh sau:
nest new kmaStore