chuyen đề tốt nghiệp tìm hiểu xây dựng ứng dụng web với asp net core và react js

Do đó, tốc độ của ứng dụng sẽ không bS gián đoạn.CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU2.1 Khảo sát hiện trạngQua khảo sát hiện trạng một số website bán sách cho thấy website

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

Họ v tên Sinh viên 1: VÕ VĂN PHƯỚC MSSV: 16110426

Ngnh: Công nghệ thông tin

Họ v tên Sinh viên 2: TRƯƠNG PHƯƠNG HẰNG MSSV: 16110534Ngnh: Công nghệ thông tin

Tên đề ti: TÌM HIỂU VÀ XÂY DỰNG ỨNG DỤNG WEB VỚI ASP.NET CORE

Ưu điểm:

KhuyQt điểm:

Đề nghS cho bảo vệ hay không?

Đánh giá loại:

Điểm: ……… (B[ng chữ: )

Tp Hồ Chí Minh, ngy tháng năm 20…

Giáo viên hướng dẫn

PHIẾU NHÂQN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ v tên Sinh viên 1: VÕ VĂN PHƯỚC MSSV: 16110426

Ngnh: Công nghệ thông tin

Tên đề ti: TÌM HIỂU VÀ XÂY DỰNG ỨNG DỤNG WEB VỚI ASP.NET CORE

Ưu điểm:

KhuyQt điểm:

Đề nghS cho bảo vệ hay không?

Đánh giá loại:

Điểm: ……… (B[ng chữ: )

Tp Hồ Chí Minh, ngày tháng năm 20…

Giáo viên phản biện

(Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Lời đầu tiên, nhóm chúng em xin chân thnh cảm ơn khoa Công Nghệ Thông Tin,

bộ môn Hệ Thống Thông Tin, trường Đại Học Sư Phạm Kỹ Thuật TP.HCM đã tạođiều kiện thuận lợi cho chúng em thKc hiện đề ti ny

Đồng thời, nhóm chúng em cũng xin gửi lời cảm ơn chân thnh nhất đQn cô Lê ThSMinh Châu, người đã tận tình chỉ bảo v hướng dẫn nhóm chúng em thKc hiện đềti ny

Bên cạnh đó, nhóm chúng em xin gửi lời cảm ơn chân thnh đQn các thầy cô giảngviên trường Đại Học Sư Phạm Kỹ Thuật nói chung, cũng như các thầy cô giảngviên khoa Công Nghệ Thông Tin nói riêng, những người đã tạo điều kiện chochúng em tích luỹ được những kiQn thức quý báu trong những năm học qua.Mặc dù đã cố gắng hon thnh đề ti tiểu luận đúng yêu cầu, nhưng do thời gianhạn hẹp, khả năng còn hạn chQ nên khó tránh khỏi việc thiQu sót trong bi báo cáo.Chúng em rất mong nhận được sK thông cảm, góp ý cũng như đóng góp của cácthầy cô v các bạn để đề ti hon thiện hơn, có thể phát triển hơn phục vụ chotương lai

Chúng em xin chân thnh cảm ơn

PHẦN MỞ ĐẦU

• Tính cấp thiết của đề tài

Ngy nay, cuộc sống ngy một phát triển, mức sống tăng cao, nhu cầu kQt nốimọi nơi mọi lúc v xu hướng cá nhân hóa trên mạng xã hội, khiQn người dùng chSuchi hơn cho các dòng điện thoại hiệu năng mạnh mẽ Nhu cầu tăng lên, chắc hẳnviệc chọn lưa một sản phẩm cũng kĩ cng v cần có sK tìm hiểu để chọn được sảnphẩm phù hợp với nhu cầu của bản thân Nhận thấy được nhu cầu đó, nhóm nhậnthấy cần thiQt để xây dKng một website cửa hng điện thoại Để người dùng có thểtruy cập vo trang web, tìm kiQm các sản phẩm mình đang quan tâm, xem cácthông tin về điện thoại để nắm rõ hơn về sản phẩm, cũng như việc đặt mua hng

online m không phải tốn thời gian để đi đQn tận cửa hng Vì vậy nhóm đã chọn

đề ti “Tìm hiểu v xây dKng website bán sách với ASP.Net Core kQt hợp vớiReact JS” nh[m cung cấp giải pháp giải quyQt nhu cầu đó

• Mục đích của đề tài

Tìm hiểu về ASP.Net Core v React JS

Ứng dụng công nghệ xây dKng website bán sách

ViQt báo cáo

• Đối tượng và phạm vi nghiên cứu

3.1 Đối tượng nghiên cứu

Back-End: ASP.Net Core

Các công nghệ liên quan như

Các công nghệ v thư viện phía front-end như: Jquery, Bootstrap, Javascript,ReactJs

Lĩnh vKc phát triển website: website bán sách

3.2 Phạm vi nghiên cứu

Tìm hiểu các công nghệ được sử dụng trong đề ti: ASP.Net Core

Tìm hiểu nghiệp vụ cửa hng bán sách

Tìm hiểu các nghiệp vụ liên quan đQn phát triển 1 website hon chỉnh, có tính khả thi cao

4 Phương pháp nghiên cứu

Để thKc hiện mục tiêu v nhiệm vụ nghiên cứu, nhóm đã sử dụng cácphương pháp nghiên cứu sau:

- Phương pháp nghiên cứu ti liệu: đọc ebook, các ti liệu tham khảo, v cácbi viQt liên quan đQn Net Core v React JS

- Phương pháp chuyên gia: nhờ sK góp ý, giúp đỡ, tư vấn từ giáo viên hướngdẫn v các thầy cô trong khoa Công nghệ thông tin trường Đại học Sư phạm kỹthuật TP.HCM

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Tổng quan về ASP.Net Core

1.1.1 Giới thiệu ASP.Net Core

.NET Core l môi trường thKc thi Nó được thiQt kQ lại hon ton của NET

Framework Mục tiêu chính của NET Core l hỗ trợ phát triển ứng dụng đa nềntảng cho ứng dụng NET Nó được hỗ trợ trên Windows, Mac OS v Linux .NETCore l một framework mã nguồn mở được xây dKng v phát triển bởi Microsoftv cộng đồng bao gồm (.NET Core, ASP.NET Core, Entity Framework Core).ASP.NET Core l một open-source mới v framework đa nền tảng (cross-platform) cho việc xây dKng những ứng dụng hiện tại dKa trên kQt nối đám mây,giống như web apps, IoT v backend cho mobile.

Nó bao gồm các thnh phần theo hướng module nh[m tối thiểu ti nguyênv chi phí phát triển, như vậy bạn giữ lại được sK mềm giẻo trong việc xây dKnggiải pháp của bạn Bạn có thể phát triển v chạy những ứng dụng ASP.NET Core

đa nền tảng trên Windows, Mac v Linux.[

• ASP.Net Core hoạt động như thế nào?

Hình 1 Cách thức hoạt động của ASP.Net Core

• Tổng quan về React JS

1.2.1 FrameWork là gì?

Framework l một thư viện các lớp đã được xây dKng hon chỉnh, bộ khung

để phát triển các Phần mềm ứng dụng Có thể ví Framework như tập các “Vật liệu”

ở từng lĩnh vKc cho người lập trình viên, thay vì họ phải mất nhiều thời gian để tKthiQt kQ trước khi dùng Do vậy, người lập trình viên chỉ cần tìm hiểu v khai tháccác vật liệu ny rồi thKc hiện để gắn kQt chúng lại với nhau, tạo ra sản phẩm

1.2.2 React JS là gì?

React l thư viện JavaScript phổ biQn nhất để xây dKng giao diện người dùng (UI) Nó cho tốc độ phản hồi tuyệt vời khi user nhập liệu b[ng cách sử dụng phương pháp mới để render trang web

Components của công cụ ny được phát triển bởi Facebook Nó được ra mắt như một công cụ JavaScript mã nguồn mở vo năm 2013 Hiện tại, nó đã đi trước các đối thủ chính như Angular v Bootstrap, hai thư viện JavaScript bán chạy nhất thờibấy giờ

1.2.3 Tại sao sử dụng React JS?

• Dễ sử dụng

React l một thư viện GUI nguồn mở JavaScript tập trung vo một điều cụ thể; hon thnh nhiệm vụ UI hiệu quả Nó được phân loại thnh kiểu “V” trong mô hình MVC (Model-View-Controller)

L lập trình viên JavaScript, bạn sẽ dễ dng hiểu được những điều cơ bản về React.Bạn thậm chí có thể bắt đầu phát triển các ứng dụng dKa trên web b[ng cách sử dụng react chỉ trong vi ngy

• Hỗ trợ Reusable Component trong Java

React cho phép bạn sử dụng lại components đã được phát triển thnh các ứng dụngkhác có cùng chức năng Tính năng tái sử dụng component l một lợi thQ khác biệt cho các lập trình viên

• ViQt Component dễ dng hơn

React component dễ viQt hơn vì nó sử dụng JSX, mở rộng cú pháp tùy chọn cho JavaScript cho phép bạn kQt hợp HTML với JavaScript

JSX l một sK pha trộn tuyệt vời của JavaScript v HTML Nó lm rõ ton bộ quá trình viQt cấu trúc trang web Ngoi ra, phần mở rộng cũng giúp render nhiều lKa chọn dễ dng hơn

JSX có thể không l phần mở rộng cú pháp phổ biQn nhất, nhưng nó được chứng minh l hiệu quả trong việc phát triển components đặc biệt hoặc các ứng dụng có khối lượng lớn

d Hiệu suật tốt hơn với Virtual Dom

React sẽ cập nhật hiệu quả quá trình DOM (Document Object Model – Mô hình đối tượng ti liệu) Như bạn có thể biQt, quá trình ny có thể gây ra nhiều thất vọngtrong các dK án ứng dụng dKa trên web May mắn l React sử dụng virtual DOMs,

vì vậy bạn có thể tránh được vấn đề ny

Công cụ cho phép bạn xây dKng các virtual DOMs v host chúng trong bộ nhớ Nhờ vậy, mỗi khi có sK thay đổi trong DOM thKc tQ, thì virtual sẽ thay đổi ngay lập tức

Hệ thống ny sẽ ngăn DOM thKc tQ để buộc các bản cập nhật được liên tục Do đó,tốc độ của ứng dụng sẽ không bS gián đoạn

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 Khảo sát hiện trạng

Qua khảo sát hiện trạng một số website bán sách cho thấy website cửa hngđiện thoại l nơi người dùng có thể xem thông tin v hình ảnh của các sản phẩmhiện có của cửa hng, tìm kiQm sản phẩm mình mong muốn, khi xem chi tiQtsản phẩm Khi đó người dùng cũng có thể chọn mua b[ng cách đặt hng v đểlại thông tin giao hng Người dùng có thể tạo ti khoản cá nhân để đăng nhậpvo hệ thống v trở thnh thnh viên chính thức hoặc có thể đăng nhập b[ng tikhoản facebook, google

Với vai trò l thnh viên người dùng có thể tìm kiQm sản phẩm, xem sản phẩm,xem chi tiQt sản phẩm, mua sản phẩm, bình luận về sản phẩm, nhắn tin để được

hỗ trợ v tư vấn, đổi mật khẩu, xem v chỉnh sửa thông tin cá nhân, quản lý giỏ

hng v thanh toán Khi đã đăng nhập vo hệ thống, thnh viên có thể thKc hiệncác nghiệp vụ trên, khi chọn sản phẩm v đặt mua thì sản phẩm sẽ n[m tronggiỏ hng, thnh viên có thể vo giỏ hng để xem lại sản phẩm mình vừa đặtmua, có thể chỉnh sửa hoặc xóa nQu cần, v tiQn hnh đặt hng b[ng cách để lạithông tin giao hng v chọn cách thức thanh toán, thnh viên có thể thanh toánkhi nhận hng hoặc thanh toán trKc sau khi nhận hng

Với vai trò l quản trS viên, sau khi đăng nhập hệ thống quản trS viên có cácnghiệp vụ như quản lý bi đăng, gồm có thêm, xóa, sửa bi đăng, quản lý đơnhng gồm có xác nhận đơn hng khi người dùng đặt hng Quản trS viên cóchức năng trả lời tin nhắn của khách hng khi khách hng cần được hỗ trợ, quản

lý user gồm có xóa user Ngoi ra quản trS viên còn có chức năng thống kêdoanh thu theo tháng để nắm được tình hình kinh doanh của cửa hng

2.2 Xác định yêu cầu:

2.2.1 Yêu cầu chức năng

• Đăng kí ti khoản

• Đăng nhập b[ng ti khoản được tạo trên website hoặc liên kQt đQnfacebook

• Lưu trữ:

• Ti khoản người dùng

• Thông tin người dùng, sản phẩm

• Thông tin hóa đơn thanh toán

• Thông tin chi tiQt sản phẩm

• Thông tin mô tả về sản phẩm

• Truy xuất:

• Danh sách người dùng v thông tin cá nhân

• Danh sách sản phẩm v thông tin chi tiQt sản phẩm

• Danh sách đơn hng v thông tin chi tiQt đơn hng

• Xem, xóa thông tin người dùng

• Thêm, sửa, xem, ngừng kinh doanh sản phẩm

• Xem thông tin đơn hng.

• Đặt hng

2.2.2 Yêu cầu phi chức năng

• Có khả năng lưu trữ lớn, có thể lưu được thông tin, hình ảnh của nhiềusản phẩm

• Đáp ứng lượt truy cập lớn

• Khả năng tìm kiQm, truy xuất dữ liệu lớn v nhanh

• Giao diện đẹp mắt, dễ sử dụng v phù hợp với mọi người dùng

3 Xem chi tiQt Mô phỏng v

tra cứu

Guest v user có thểxem thông tin chi tiQtsản phẩm

4 Xem theo loại Mô phỏng v

tra cứu

Guest v user có thểxem các sản phẩmtheo loại

Guest v user có thểtìm kiQm sản phẩmmình mong muốn

6 Đăng nhập Truy xuất

Guest có thể đăngnhập b[ng ti khoảnfacebook hoặc tikhoản đã đăng ký đểtrở thnh user

7 Bình luận Lưu trữ

Guest v User có thểbình luận về sảnphẩm

8 Đặt hng Lưu trữ v

giao dSch

User có thể đặt sảnphẩm b[ng cung cấpđầy đủ thông tin yêucầu để tiQn hnh đặthng

9 Quản lý giỏ hng Mô phỏng v

tra cứu

User có thể xem vquản lý giỏ hng củamình như thêm, xóa,sửa các sản phẩmtrong giỏ hng

10 Thanh toán Giao dSch User có thể thanh

toán khi nhận hng

11 Quản lý user Tra cứu v

lưu trữ

Admin có thể xemcác user v xóa user

thống kê

Admin có thể xemthống kê doanh thutheo sản phẩm đã bán

cho từng khu vKc.

16 Đăng xuất Truy xuất

User v Admin có thểđăng xuất để thoátkhỏi trang webBảng 1 Mô tả Usecase

2.2.5 Mô tả chi tiết Usecase

2.2.5.1 Đăng Kí

Use Case Đăng Kí

Mô tả Cho phép người dùng đăng kí ti khoản

Tác nhân kích hoạt Người dùng

Yêu cầu

Các bước thKc hiện B1: Truy cập vo website

B2: Bấm vo nút Đăng KíB3: Nhập đầy đủ thông tin yêu cầuB4: Nhấn nút “Đăng Kí”

Bảng 2 Mô tả Usecase Đăng kíHình 6 Sequence diagram Đăng kí

2.2.5.2 Đăng Nhập

Usecase Đăng Nhập

Mô tả Cho phép thnh viên, quản trS viên đăng nhập vo

trang web

Tác nhân kích hoạt Thnh viên , quản trS viên

Tiền điều kiện Người dùng phải có ti khoản

Các bước thKc hiện B1: Truy cập vo website

2.2.5.3 Đăng Xuất

Usecase Đăng xuất

Mô tả Cho phép thnh, quản trS viên đăng xuất khỏi

ứng dụngTác nhân kích hoạt Thnh viên, quản trS viên

Tiền điều kiện Người dùng phải có ti khoản

Các bước thKc hiện Click button “Đăng xuất” trên giao diện

websiteBảng 4 Mô tả Usecase Đăng xuấtHình 8 Sequence diagram Đăng xuất2.2.5.4 Xem sản phẩm

Usecase Xem sản phẩm

Mô tả Cho phép người dùng v thnh viên xem sản

phẩmTác nhân kích hoạt Người dùng, thnh viên

Tiền điều kiện

Các bước thKc hiện B1: Vo website, tại trang chủ người dùng có

thể xem các sản phẩmBảng 5 Mô tả Usecase Xem sản phẩm2.2.5.5 Xem chi tiết sản phẩm

Usecase Xem chi tiQt sản phẩm

Mô tả Cho phép người dùng v thnh viên xem chi

tiQt sản phẩmTác nhân kích hoạt Người dùng, thnh viên

Tiền điều kiện

Các bước thKc hiện B1: Truy cập vo website

B2: Tại trang chủ, di chuyển đQn sản phẩmmuốn xem chi tiQt

B3: Click vo “Chi tiQt” để xem chi tiQt sảnphẩm

Bảng 6 Mô tả Usecase Xem chi tiết sản phẩm

2.2.5.6 Xem sản phẩm theo loại

Usecase Xem sản phẩm theo loại

Mô tả Cho phép người dùng v thnh viên xem sản

phẩm theo loạiTác nhân kích hoạt Người dùng, thnh viên

Tiền điều kiện

Các bước thKc hiện B1: Truy cập vo website

B2: Tại trang chủ, rê chuột vo “Sản phẩm”trên thanh menu

B3: Chọn loại sản phẩmBảng 7 Mô tả Usecase Xem sản phẩm theo loại2.2.5.7 Tìm kiếm sản phẩm

Usecase Tìm kiQm

Mô tả Cho phép người dùng v thnh viên tìm kiQm

sản phẩm theo từ khóa cần tìmTác nhân kích hoạt Người dùng, thnh viên

Tiền điều kiện

Các bước thKc hiện B1: Vo website

B2: Điền từ khóa tìm kiQm vo trong text box

“Tìm kiQm”

B3: Click vo “Tìm kiQm”

B4: Xem kQt quả trả vềBảng 8 Mô tả Usecase Tìm kiếm sản phẩmHình 9 Sequence diagram Tìm kiếm sản phẩm2.2.5.8 Bình luận sản phẩm

Usecase Bình luận

Mô tả Cho phép người dùng v thnh viên bình luận

về sản phẩmTác nhân kích hoạt Người dùng, thnh viên

Tiền điều kiện

Các bước thKc hiện B1: Vo website

B2: Chọn sản phẩm v Click “Chi tiQt” để votrang xem chi tiQt sản phẩm

B3: Di chuyển chuột xuống phần bình luận,

nhập nội dung vo textbox v “Gửi”

Bảng 9 Mô tả Usecase Bình luận sản phẩm

2.2.5.9 Đặt hàng

Mô tả Cho phép người dùng, thnh viên đặt hng các

sản phẩm của websiteTác nhân kích hoạt Người dùng, thnh viên

Tiền điều kiện

Các bước thKc hiện Cách 1

B1: Đăng nhập vo websiteB2: Tại trang chủ, chọn sản phẩm cần đặt hngv click vo “Chi tiQt”

B3: Chọn mu sắc, dung lượng bộ nhớ trong(nQu có nhiều phiên bản) của sản phẩmB4: Nhấn nút “Mua hng” Sản phẩm sẽ đượcchuyển vo Giỏ hng

B5: Click vo “Giỏ hng” để xem lại sản phẩm

đã chọn

B6: Nhập đầy đủ thông tin yêu cầu nQu lngười dùng chưa đăng kí ti khoản NQu đãđăng nhập thì chuyển sang B7

B7: Đặt hng thnh công

Cách 2B1: Đăng nhập vo websiteB2: Tại trang chủ, rê chuột vo “Sản phẩm”trên thanh menu v chọn loại sản phẩmB3: Chọn sản phẩm cần đặt hng v click vo

“Chi tiQt”

B4: Chọn mu sắc, dung lượng bộ nhớ trong(nQu có nhiều phiên bản) của sản phẩmB5: Nhấn nút “Mua hng” Sản phẩm sẽ đượcchuyển vo Giỏ hng

B6: Click vo “Giỏ hng” để xem lại sản phẩm

đã chọn

B7: Nhập đầy đủ thông tin yêu cầu nQu lngười dùng chưa đăng kí ti khoản NQu đãđăng nhập thì chuyển sang B8

B8: Đặt hng thnh công

Bảng 10 Mô tả Usecase Đặt hàngHình 10 Sequence diagram Đặt hàng2.2.5.10 Xem giỏ hàng

Usecase Xem giỏ hng

Mô tả Cho phép người dùng v thnh viên xem sản

phẩm đang có trong giỏ hng

Tác nhân kích hoạt Người dùng, thnh viên

Tiền điều kiện Đã thêm ít nhất 1 sản phẩm vo giỏ hngCác bước thKc hiện B1: Vo website

B2: Click vo icon Giỏ hng để xem sản phẩmtrong giỏ hng

Bảng 11 Mô tả Usecase Xem giỏ hàng2.2.5.11 Thêm sản phẩm vào giỏ hàng

Usecase Thêm sản phẩm vo giỏ hng

Mô tả Cho phép người dùng v thnh viên thêm sản

phẩm vo giỏ hng

Tác nhân kích hoạt Người dùng, thnh viên

Tiền điều kiện

Các bước thKc hiện B1: Truy cập website

B2: Chọn sản phẩm cần thêm vo giỏ hng,click “Chi tiQt” để đi tới trang xem chi tiQt sảnphẩm

B3: Click “Thêm Vo Giỏ Hng” để thêm sảnphẩm vo giỏ hng

Bảng 12 Mô tả Usecase Thêm sản phẩm vào giỏ hàng

2.2.5.12 Xóa sản phẩm trong giỏ hàng

Usecase Xóa sản phẩm trong giỏ hng