báo cáo công nghệ phần mềm đề tài xây dựng website bán đồ công nghệ

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.43 MB, 37 trang )

Trang 1<div class="page_container" data-page="1">

HỌ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

</div>Trang 2<div class="page_container" data-page="2">

HỌ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:...

</div>Trang 3<div class="page_container" data-page="3">

2.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

</div>Trang 4<div class="page_container" data-page="4">

2.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

</div>Trang 5<div class="page_container" data-page="5">

2.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

</div>Trang 6<div class="page_container" data-page="6">

LỜ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. Ngồ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.

</div>Trang 7<div class="page_container" data-page="7">

CHƯƠ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.

</div>Trang 8<div class="page_container" data-page="8">

Yê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

</div>Trang 9<div class="page_container" data-page="9">

Vớ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ế..

</div>Trang 10<div class="page_container" data-page="10">

3.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 tồ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.

</div>Trang 11<div class="page_container" data-page="11">

3.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ế

</div>Trang 12<div class="page_container" data-page="12">

endpoint 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 đó.

</div>Trang 13<div class="page_container" data-page="13">

CHƯƠ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).

</div>Trang 14<div class="page_container" data-page="14">

Hì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).

</div>Trang 15<div class="page_container" data-page="15">

Hì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).

</div>Trang 16<div class="page_container" data-page="16">

Hì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).

</div>Trang 17<div class="page_container" data-page="17">

Hì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).

</div>Trang 18<div class="page_container" data-page="18">

dev: 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

</div>