Báo cáo thực tập tốt nghiệp đề tài ứng dụng reactjs, nodejs vào xây dựng website bán điện thoại

Là mộtphần của công nghệ thông tin, công nghệ web đang có được sự phát triển mạnh mẽ vàphổ biến rất nhanh bởi những lợi ích mà nó mang lại cho cộng đồng là rất lớn.Hiện nay, hầu hết tại

TRƯỜNG ĐẠI HỌC SƯ PHẠM KHOA TIN HỌC



BÁO CÁO THỰC TẬP TỐT NGHIỆP

ĐỀ TÀI ỨNG DỤNG REACTJS, NODEJS VÀO XÂY DỰNG

WEBSITE BÁN ĐIỆN THOẠI

Giảng viên hướng dẫn: ThS Hồ Ngọc Tú

Sinh viên thực hiện: Cao Khả Hiếu

Đà Nẵng, 04/2022

NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN

Đà Nẵng, ngày … tháng … năm …

Cán bộ hướng dẫn

NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN

Đà Nẵng, ngày … tháng … năm …

Hội đồng phản biện

LỜI CAM ĐOAN

Em tên là Cao Khả Hiếu, sinh viên lớp 18CNTT1 Em xin cam đoan đây là đềtài do em thực hiện Các nội dung và kết quả nghiên cứu được trình bày trong Đồ ántốt nghiệp này là trung thực và mọi tham khảo đều được trích dẫn, chỉ rõ nguồn thamkhảo theo đúng quy định

Sinh viên thực hiện

Cao Khả Hiếu

LỜI CẢM ƠN

Đầu tiên, em xin chân thành cảm ơn Quý Thầy/Cô trong khoa Tin học đã trang

bị những kiến thức cho em trong suốt quá trình học tập tại Trường Đại học Sư phạm –Đại học Đà Nẵng vừa qua Chính nhờ công lao giảng dạy, chỉ bảo tận tình của QuýThầy/Cô mà em mới trang bị được kiến thức chuyên ngành công nghệ thông tin để cóthể thực hiện tiếp chặng đường học tập, vận dụng và sáng tạo ra những sản phẩm hữuích g óp phần phục vụ các lĩnh vực khác nhau

Với lòng kính trọng và biết ơn sâu sắc, em xin gửi lời cảm ơn đến giảng viênhướng dẫn, TS.Hồ Ngọc Tú đã tận tình giúp đỡ em từ những bước đầu tiên khi xâydựng ý tưởng nghiên cứu, đề cương cũng như trong suốt quá trình thực hiện và hoànthiện Đồ án tốt nghiệp này

Em cũng xin gửi lời cảm ơn chân thành tới các bạn ở Khoa Tin học, Trường Đạihọc Sư phạm đã tạo mọi điều kiện thuận lợi và giúp đỡ em trong thời gian học tập vànghiên cứu thực hiện Đồ án này

Mặc dù em đã rất cố gắng và nổ lực để hoàn thành Đồ án tốt nghiệp này nhưngtrong phạm vi và khả năng cho phép, chắc chắn Đồ án sẽ không tránh khỏi nhữngthiếu sót Em rất mong nhận được sự thông cảm, góp ý và tận tình chỉ bảo của QuýThầy/Cô để báo cáo được hoàn thiện nhất

Em xin chân thành cảm ơn!

Sinh viên thực hiện

Cao Khả Hiếu

MỤC LỤC

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 10

1 Khái ni m c b n v Internet ệ ơ ả ề 10

1.1 Gi i thi u chung ớ ệ 10

1.2 Phân lo i ạ 10

1.3 World Wide Web 10

1.4 Ngôn ng s d ng ữ ử ụ 10

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 10

2.1 Phân tích yêu c u đ tài ầ ề 10

2.1.1 Phát bi u bài toán ể 10

2.1.2 Yêu c u bài toán ầ 10

2.2 Nghiên c u hi n tr ng ứ ệ ạ 10

2.3 Đ c t h th ng ặ ả ệ ố 10

2.4 S đ use-case ơ ồ 11

2.4.1 S ơ đồ use-case c a khách hàn ủ g 12

2.4.2 S đ use-case c a khách hàng – thành viên ơ ồ ủ 13

2.4.3 S đ use-case c a ng ơ ồ ủ ườ i qu n lí ả 14

2.5 Bi u ể đ tu n t ồ ầ ự 15

2.5.1 Bi u ể đồ tu n t đăng nh p ầ ự ậ 15

2.5.2 Bi u đ tu n t đăng kí thành viên ể ồ ầ ự 15

2.5.3 Bi u đ tu n t tìm ki m ể ồ ầ ự ế đi n tho i ệ ạ 16

2.5.4 Bi u đ tu n t đ t ể ồ ầ ự ặ hàng 16

2.5.5 Bi u đ tu n t xem thông tin ể ồ ầ ự đi n tho i ệ ạ 17

2.5.6 Bi u đ tu n t bình lu n ể ồ ầ ự ậ 17

2.5.7 Bi u đ tu n t hi n th danh sách ể ồ ầ ự ể ị đi n tho i ệ ạ 18

2.5.8 Bi u đ tu n t thêm ể ồ ầ ự đi n tho i ệ ạ 19

2.5.9 Bi u đ tu n t xóa ể ồ ầ ự đi n tho ệ ạ 20 i 2.5.10 Bi u đ tu n t xem đ n hàng ể ồ ầ ự ơ 21

2.5.11 Bi u đ tu n t xoá thành viên ể ồ ầ ự 22

2.5.12 Bi u đ tu n t xoá đ n hàng ể ồ ầ ự ơ 23

2.6 Thi t k c s d li u ế ế ơ ở ữ ệ 23

CHƯƠNG 3 CÀI ĐẶT CHƯƠNG TRÌNH VÀ KẾT QUẢ 27

6

LỜI MỞ ĐẦU

1 Đặt vấn đề

Ngày nay, chúng ta đang sống trong một xã hội hiện đại với công nghệ pháttriển như vũ bão thì việc đưa nó vào trong đời sống không còn quá xa lạ Ứng dụngcông nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mangtính quyết định trong hoạt động của các chính phủ, tổ chức cũng như của các công ty

Nó đóng vai trò hết sức quan trọng có thể tạo ra những bước đột phá mạnh mẽ Là mộtphần của công nghệ thông tin, công nghệ web đang có được sự phát triển mạnh mẽ vàphổ biến rất nhanh bởi những lợi ích mà nó mang lại cho cộng đồng là rất lớn.Hiện nay, hầu hết tại các cửa hàng điện thoại đã sử dụng rộng rãi ứng dụngcông nghệ thông tin, giúp người dùng dễ dàng mua hàng, dễ dàng quản lí thông tin cánhân,… Bên cạnh đó, sự hỗ trợ mạnh mẽ của các ngôn ngữ lập trình, cùng với sự ra

đời của các framework đã thúc đẩy em chọn đề tài “Ứng dụng Reactjs, Nodejs vào

xây dựng website bán điện thoại” để thực hiện đồ án chuyên ngành nhằm đáp ứng

theo chương trình đào tạo đồng thời mong muốn ứng dụng công nghệ đó vào việc tìmhiểu và đưa ra một giải pháp tốt nhằm giải quyết công việc bán vé xem phim trựctuyến cho rạp chiếu phim Với đề tài này, website sẽ cho phép người sử dụng thực hiệnmột cách nhanh chóng, chính xác việc tìm kiếm thông tin, loại điện thoại, giá cả vàtiến hành việc đặt hàng,… với giao diện làm việc thân thiện, tiện dụng với người sửdụng hệ thống, người tiêu dùng

Được sự hướng dẫn tận tình của TS Hồ Ngọc Tú, em đã chọn đề tài “Ứng

dụng Reactjs, Nodejs vào xây dựng website bán điện thoại” sử dụng ngôn ngữ

Javascript với hai framework tương ứng là Reactjs và Nodejs và hệ quản trị cơ sở dữliệu MongoDB làm đề tài cho môn này

2 Mục tiêu nghiên cứu

Mục tiêu của đồ án là tìm ra giải pháp hiệu quả để giải quyết công việc bánhàng cho ác cửa hàng điện thoại Các mục tiêu cụ thể của đồ án gồm:

-Tìm ra phương pháp hiệu quả trong việc đặt hàng cho khách hàng và việc quản líthông tin các điện thoại

-Ứng dụng Reactjs, Nodejs và xây dựng website quản lí bán điện thoại

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

Đối tượng nghiên cứu gồm:

- Các khách hàng của cửa hàng điện thoại

- Vai trò của người quản lí cửa hàng.

- Các loại điện thoại trên thị trường

- Các chi nhánh của cửa hàng

Giới hạn phạm vi nghiên cứu trong đồ án gồm:

- Tập trung xây dựng hệ thống giúp người dùng đặt hàng trực tuyến và quản lí thôngtin của các điện thoại

- Đề tài được xây dựng bởi các ngôn ngữ lập trình như: Javascript, HTML, CSS và sửdụng hệ quản trị cơ sở dữ liệu MongoDB

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

- Phương pháp tài liệu: Nghiên cứu các tài liệu liên quan đến các nội dung nghiêncứu: Tài liệu về các ngôn ngôn ngữ lập trình, các framework Reactjs và Nodejs, cácnhu cầu của người dùng, tài liệu về thông tin các điện thoại

- Phương pháp thực nghiệm: Nghiên cứu, xây dựng các phương pháp đặt hàng vàquản lí điện thoại hiệu quả cho cửa hàng Phát triển phần mềm quản lí bán điện thoạicho cừa hàng và đánh giá kết quả

5 Nhiệm vụ và kết quả đạt được

- Nghiên cứu và tìm hiểu một số phần mềm bán điện thoại trực tuyến

- Phân tích yêu cầu và đề xuất của phần mềm

Chương 1 Cơ sở lý thuyết Chương này trình bày các cơ sở lí thuyết về internet

và website; trình bày kết quả nghiên cứu, tìm hiểu về các ngôn ngữ lập trình:Javascript, Reactjs, và Nodejs được sử dụng trong việc xây dựng đề tài

Chương 2: Phân tích và thiết kế hệ thống Chương này giới thiệu bài toán và

đưa ra các mô hình hệ thống; đề xuất các ý tưởng, chức năng cho phần mềm; trình bàycác mô hình thực thể quan hệ, sơ đồ phân cấp chức năng Phân tích chi tiết các chức

8

năng của người sử dụng và người quản lí; thiết kế giao diện người dùng và thiết dữliệu, chức năng cho hệ thống.

Chương 3: Cài đặt chương trình và kết quả Trong chương này, nêu kết quả

thực hiện được của đề tài và trình bày cách cài đặt chương trình

7 Đóng góp của đồ án

Trong đồ án tốt nghiệp này, em đã vận dụng linh hoạt những kiến thức đã đượchọc trên giảng đường để thực hiện đề tài Bên cạnh đó, em cũng tự tìm tòi, học hỏi,nghiên cứu thêm các kiến thức mới, ngôn ngữ lập trình mới nhằm xây dựng đồ ánngày một nhanh chóng, hoàn thiện hơn Những đóng góp chính của đồ án:

-Phân tích rõ ràng vai trò của người trong hệ thống Đối với người quản lí, khách

hàng đã đăng nhập hay chưa đăng nhập đều được giới hạn một số chức năng nhất định

-Đưa ra các chức năng điều khiển dành cho người quản lí Nghiên cứu và triển khai

thực nghiệm các chức năng nhằm đáp ứng nhu cầu cho người quản lí như quản lí cácthông tin điện thoại, thông tin các người dùng của cửa hàng

-Đưa ra chức năng đặt hàng cho khách hàng Nghiên cứu và triển khai thực nghiệm

chức năng đặt hàng trực tuyến với đầy đủ các thông tin liên quan như tên điẹn thoại,dung lượng pin, màn hình hay các thông số kĩ thuật khác để khách hàng nắm bắt đượcthông tin đó và đặt hàng phù hợp với họ

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT

1 Khái niệm cơ bản về Internet

1.1 Giới thiệu chung

Internet là hệ thống thông tin toàn cầu có thể truy nhập công cộng gồm cácmạng máy tính được liên kết với nhau Nguồn gốc của Internet bắt nguồn từ sự pháttriển của chuyển mạch gói và nghiên cứu của bộ quốc phòng Hoa Kỳ ủy quyền thựchiện vào những năm 1960 để cho phép chia sẻ thời gian của máy tính[1]

Vào mạng Internet, bạn có tìm thấy các tài liệu để nghiên cứu, học tập, trao đổithư từ, mặt hàng, mua bán, … Một trong những mục tiêu của Internet là chia sẻ thôngtin giữa những người dùng trên nhiều lĩnh vực khác nhau

1.2 Phân loại

Các máy tính trên mạng được chia làm 2 nhóm Client và Server.

- Client: Máy khách trên mạng, chứa chương trình Client

- Server: Máy phục vụ-máy chủ Chứa các chương trình Server, tài nguyên (tập tin,tài liệu, …) dùng chung cho nhiều máy khách Server luôn ở trạng thái chờ yêu cầu vàđáp ứng yêu cầu của Client

Các dịch vụ thường dùng trong Internet:

 Dịch vụ World Wide Web (gọi tắt Web)

 Dịch vụ Electronic Mail (gọi tắt là Mail)

 Dịch vụ FPT

Để truyền thông với những máy tính khác, mọi máy tính trên Internet phải hỗtrợ giao thức chung TCP/IP (Transmission Control Protocol/Internet Protocol - giaothức điều khiển truyền dữ liệu và giao thức Internet), là một giao thức đồng bộ, chotruyền thông điệp từ nhiều nguồn và tới nhiều đích khác nhau Ví dụ có thể vừa lấy thư

từ trong hộp thư, đồng thời vừa truy cập vào trang web TCP đảm bảo tính an toàn dữliệu, IP là giao thức chi phối phương thức vận chuyển dữ liệu trên Internet [1]

1.3 World Wide Web

Các khái niệm cơ bản về World Wide Web

World Wide Web (WWW) hay còn gọi là Web là một dịch vu phổ biến nhấthiện nay trên Internet, 85% các giao dịch trên Internet ước lượng thuộc về WWW.Ngày nay số Website trên thế giới đã đạt tới con số khổng lồ WWW cho bạn truy xuấtthông tin văn bản, hình ảnh, âm thanh, video trên toàn thế giới Thông qua Website,

10

các quý công ty có thể giảm thiểu tối đa chi phí in ấn và phân phát tài liệu cho kháchhàng ở nhiều nơi [2].

Cách tạo trang web

Có nhiều cách để tạo trang Web:

 Có thể tạo trang web trên bất kì chương trình xử lý văn bản nào

 Tạo web bằng cách viết mã nguồn bởi một trình soạn thảo văn bản như:

- Notpad, Wordpad, v.v là những chương trình soạn thảo có sẵn trong window

- Thiết kế bằng các phần mềm chuyên nghiệp như: Fronpage, Dreamweaver, visualstudio…

Để xây dựng một ứng dụng Web hoàn chỉnh và có tính thương mại, bạn cần kếthợp cả Client Script (Kịch bản trình khách) và Server Script (Kịch bản trình chủ) vớimột loại cơ sở dữ liệu nào đó, chẳng hạn như: MS Access, SQL Server, Oracle, ở đây

em dùng MYSQL

Khi bạn muốn triển khai ứng dụng Web trên mạng, ngoài các điều kiện về cấuhình phần cứng, bạn cần có trình chủ web thường gọi là Web Server

Trình duyệt web (Web Client hay Web Browser)

Trình duyệt web là công cụ truy xuất dữ liệu trên mạng, là phần mềm giao diệntrực tiếp với người sử dụng Nhiệm vụ của web browser là nhận dữ liệu từ người dùng,gửi các yêu cầu đó qua mạng tới các web Server và nhận các dữ liệu cần thiết từServer để hiển thị lên màn hình Để sử dụng dịch vụ WWW, Client cần có một chươngtrình duyệt Web, kết nối vào Internet thông qua một ISP Các trình duyệt thông dụnghiện nay là Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, … [2]

WebServer

WebServer: Là một máy tính được nối vào Internet và chạy các phần mềm đượcthiết kế WebServer đóng vai trò một chương trình xử lý các nhiệm vụ xác định, nhưtìm trang thích hợp, xử lý tổ hợp dữ liệu, kiểm tra dữ liệu hợp lệ,… WebServer cũng lànơi lưu trữ cơ sở dữ liệu, là phần mềm đảm nhiệm vai trò Server cung cấp dịch vụ Web[2]

WebServer hỗ trợ các công nghệ khác nhau:

 IIS (Internet Information Server): Hỗ trợ ASP, mở rộng hỗ trợ PHP

 Apache: Hỗ trợ PHP

 Tomcat: Hỗ trợ JPS (Java Servlet Page)

Phân loại Website

 Website tĩnh

- Tài liệu được phân phát rất đơn giản từ hệ thống file Server.

- Định dạng các trang web tĩnh là các siêu liên kết, các trang định dạng Text, cáchình ảnh đơn giản

Ưu điểm: CSDL nhỏ nên việc phân phát dữ liệu có hiệu quả rõ ràng, Server có

thể đáp ứng nhu cầu Client một cách nhanh chóng Ta nên sử dụng Web tĩnh khi khôngthay đổi thông tin trên đó [3]

Nhược điểm: không đáp ứng được yêu cầu phức tạp của người sử dụng, không

Để tạo được website động, chúng ta thường sử dụng đến các ngôn ngữ phíaserver (server-side), chẳng hạn như Servlet, JSP, PHP, Python, C# [3]

Một website động thường được đặt trên một máy chủ dịch vụ web (WebServer) Website động sử dụng kịch bản lập trình phía máy khách (Client) hoặc máychủ (Server) hoặc cả hai để tạo ra nội dung động [3]

12

Hình 1 Cách hoạt động của trang web tĩnh

Khi người dùng sử dụng máy tính của mình thao tác trên trang web sẽ tạo ramột yêu cầu (request) tới máy chủ Phía máy chủ nhận và xử lý yêu cầu máy kháchdựa vào kịch bản trên máy chủ để tạo ra một trang đơn giản và gửi lại tới người dùng.Trình duyệt trên máy khách tải xuống và xử lý mã trong trang để hiển thị thông tin chongười dùng [3].

Hoạt động của Web động được thể hiện như sau:

1.4 Ngôn ngữ sử dụng

Javascript là gì?

Javascript chính là một ngôn ngữ lập trình với khả năng đem tới sự sinh động khi thiết kế website Đây là dạng ngôn ngữ theo kịch bản, dựa trên chính đối trượng phát triển có sẵn, hoặc là tự định nghĩa ra Chính vì tính tiện lợi, hiệu quả ứng dụng cao mà ngôn ngữ lập trình này được tin dùng ngày càng nhiều, ứng dụng rộng rãi trongcác website hiệu quả

Việc sử dụng ngôn ngữ JS có thể ứng dụng cho mọi trình duyệt khác nhau, hiện được sử dụng phổ biến như Chrome, hay Firefox,… Hơn nữa, đây còn là ngôn ngữ lập trình hoạt động hiệu quả, được hỗ trợ đầy đủ trên các trình duyệt của thiết bị diđộng Bởi thế mà việc sử dụng đa dạng, có thể đáp ứng tốt cho nhiều nhu cầu, những đòi hỏi khác nhau của người dùng

Nhìn chung, ngôn ngữ lập trình Javascript khi sử dụng được đánh giá dễ học, được phát triển bởi Netscape và sử dụng trong hơn 92% các website ngày nay Việc sử dụng JS có thể gắn trong một element trong website, hoặc có thể trong một sự kiện củatrang web tiện lợi và hiệu quả Chính việc có thể hoạt động nhanh, nhẹ và mượt mà,… nên ngôn ngữ lập trình này càng được tin tưởng và ứng dụng nhiều hơn cho nhu cầu

Hình 2 Cách hoạt động của trang web động

của người dùng Chúng ta có thể thêm trực tiếp JS trực tiếp với HTML, cũng có thể lưu lại trên một files hoàn toàn riêng biệt và sử dụng khi cần thiết.

Javascript là ngôn ngữ lập trình dễ dàng sử dụng

Đơn giản, dễ dàng tìm hiểu và sử dụng là đặc điểm nổi bật của ngôn ngữ lập

trình này Với những cú pháp khá tương đồng với tiếng Anh thì việc sử dụng

Javascript trở nên dễ dàng, dễ tiếp cận hơn rất nhiều Thông qua mô hình DOM được

sử dụng, cung cấp tới nhiều tính năng hữu ích, được viết sẵn đem lại khả năng đáp ứngtốt cho những nhu cầu, những đòi hỏi khác nhau từ phía người dùng

Với nhiều tính năng hữu ích mà ngôn ngữ lập trình Javascript mang lại thì việc có thể phát triển kịch bản nhằm giải quyết yêu cầu, mục đích nào đó trở nên dễ dàng hơn Những mục đích tùy chính của con người được đáp ứng hiệu quả với sự hỗ trợ của JS

Sử dụng JS đảm bảo dễ học, dễ dàng phát hiện lỗi khi xuất hiện, đồng thời nó hoạt động nhanh chóng và nhẹ nhàng hơn nhiều ngôn ngữ lập trình khác Bởi thế, quá trình

sử dụng có thể thích hợp với nhiều đối tượng người dùng, đem lại hiệu quả cao và tránh những ảnh hưởng không mong muốn có thể xảy ra

Java sở hữu giao diện thân thiện, nhiều tính năng

Nếu so sánh với nhiều ngôn ngữ lập trình khác thì việc sử

dụng Javascript mang tới ưu điểm ở giao diện thân thiện, có thể phù hợp với mọi đối tượng người dùng Đem tới tính tương tác cao giúp quá trình ứng dụng của mỗi người

có được kết quả tốt đẹp Cùng với nhiều tính năng mà ngôn ngữ này mang tới chắc chắn sẽ giúp website chúng ta tạo ra có được hiệu quả sử dụng lý tưởng

Có thể kể tới như việc tiến hành thêm slider, hay slideshow, thực hiện hiệu ứng cuộn trang khi chuột di tới, tính năng kéo thả,… đều được cung cấp đầy đủ Từ đó giúp việc

sử dụng ngôn ngữ này trong lập trình đem lại lợi ích lớn, thiết thực

So sánh Javascript với các ngôn ngữ lập trình khác

Mỗi ngôn ngữ lập trình khác nhau mang những đặc điểm khác biệt nhất định

Đó là điều hiển nhiên mà chúng ta có thể tìm hiểu và xác định cụ thể và chính xác Theo đó, ngôn ngữ Javascript nếu đem ra so sánh với những ngôn ngữ khác thì điểm khác biệt lớn, tạo nên tính phổ biến của nó chính là tính linh hoạt Bởi thế, có khá nhiều các lập trình viên lựa chọn Javascript trở thành ngôn ngữ chính, sử dụng các ngôn ngữ khác là phụ, bổ sung khi cần thiết

 Ngôn ngữ Javascript: Với ngôn ngữ lập trình này đảm bảo giúp tăng hiệu quả tương tác trên website ở mức tốt nhất Với Script này khi hoạt động trên các trình

14

duyệt của người dùng, thay vì sử dụng trên các server hiệu quả Không chỉ vậy,

nó thường được dùng trên thư viện của một bên thứ ba, từ đó giúp tăng thêm chứcnăng cho website dễ dàng, thay vì việc phải thông qua code ngay từ ban đầu

 Ngôn ngữ HTML: HTML – Hypertext Markup Language là một trong những ngôn ngữ lập trình phổ biến, được tin dùng nhiều hiện nay trên các website, giúp việc xây dựng các khối chính của trang web được thực hiện hiệu quả

 Ngôn ngữ PHP: Đây là ngôn ngữ ở phía server, nó hoàn toàn khác biệt so với JS được sử dụng chạy trên các máy client Ngôn ngữ này được ứng dụng chủ yếu trong các hệ quản trị nội dung nền PHP, tiêu biểu như WordPress Ngoài ra, sử dụng PHP còn được ứng dụng trong việc lập trình back-end, giúp tạo ra những kênh để truyền thông tin hiệu quả nhất từ database

 Ngôn ngữ CSS: CSS – Cascading Style Sheets có nhiệm vụ chính là việc giúp webmaster có thể xác định được styles, cũng như định nghĩa tốt nhiều loại nội dung khác nhau Người dùng có thể tiến hành thực hiện những công việc hoàn toàn thủ công, với những yếu tố có trong HTML Tuy nhiên, nếu thực hiện theo cách này đòi hỏi chúng ta phải lặp đi lặp lại các thành phần đó, để sử dụng ở nhiều nơi khác nhau

Nói tóm lại, tìm hiểu về bản chất của từng ngôn ngữ lập trình giúp chúng ta có cái nhìntổng quan nhất, cơ bản nhất về những ngôn ngữ thông dụng này Nếu chúng ta nhìn nhận việc lập trình như là xây dựng một căn nhà thì trong đó: HTML có nhiệm vụ chính là định dạng được kiến trúc của ngôi nhà, CSS có nhiệm vụ là thảm và tường giúp căn nhà được trang trí đẹp hơn, trong khi đó Javascript có nhiệm vụ giúp tăng cường tương tác của ngôi nhà như hệ thống cửa, hay hệ thống đèn chiếu sáng.Chúng ta hoàn toàn có thể lập trình, tạo nên một trang web mà không cần tới sự hỗ trợ,

sử dụng ngôn ngữ JS Tuy nhiên, một thực tế cho thấy là khi ngôn ngữ Javascript không được ứng dụng thì nguy cơ chúng ta sẽ tạo ra một website lỗi thời, không đem tới tính ứng dụng cao như những ở thập niên 90 của thế kỷ 20 là điều hoàn toàn có thể xảy ra Điều này vô tình gây ra tác động tiêu cực tới quá trình ứng dụng web, đáp ứng cho nhu cầu, đòi hỏi ngày càng nhiều, càng cao của người dùng

Hạn chế còn tồn tại của ngôn ngữ Javascript:

Tồn tại song song với những ưu điểm là hạn chế mà ngôn ngữ lập trình Javascript đang phải đối mặt Việc tìm hiểu và xác định được những hạn chế giúp chúng ta chủ động trong đánh giá, đưa ra quyết định sử dụng sao cho thích hợp nhất

 Là ngôn ngữ lập trình dễ bị khai thác: Việc dễ dàng bị khai thác, với nhiều đối tượng người dùng khác nhau vô tình khiến việc bảo mật cho ngôn ngữ lập trình này không được đánh giá cao Bởi thế, quá trình sử dụng luôn tồn tại những nguy

cơ nhất định cần chúng ta tìm hiểu và chủ động chú ý cẩn trọng

 Một hạn chế của ngôn ngữ JS chính là việc chúng ta có thể sử dụng để thực thi

mã độc trên máy tính của người dùng Tình trạng này vô tình gây ra những thiệt hại, những ảnh hưởng không hề nhỏ tới công việc mà chúng ta đang thực hiện

 Trong một số trường hợp, trong một vài trình duyệt cụ thể việc sử dụng ngôn ngữ

lập trình Javascript không thể thực hiện được Nó gây ra ảnh hưởng tới việc

ứng dụng, đáp ứng cho nhu cầu của từng người

 Sử dụng ngôn ngữ lập trình này có một hạn chế khác khi có JS code snippets khá lớn

 Khi có khả năng triển khai khác nhau tùy từng thiết bị, nó vừa là ưu điểm song cũng tồn tại những hạn chế nhất định Chính điều này khiến nguy cơ không đồng nhất có thể xảy ra, gây ảnh hưởng tới quá trình thực hiện mục tiêu cuối cùng

 Tổng quan về React:

Giới thiệu React

React (Hay ReactJS, React.js) là một thư viện Javascript mã nguồn mở để xâydựng các thành phần giao diện có thể tái sử dụng Nó được tạo ra bởi Jordan Walke,một kỹ sư phần mềm tại Facebook Người bị ảnh hưởng bởi XHP (Một nền tảng thànhphần HTML cho PHP) React lần đầu tiên được triển khai cho ứng dụng Newsfeedcủa Facebook năm 2011, sau đó được triển khai cho Instagram.com năm 2012 Nóđược mở mã nguồn (open-sourced) tại JSConf US tháng 5 năm 2013

Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt độngtrên phía client, mà còn được render trên server và có thể kết nối với nhau React sosánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ítthay đổi nhất trên DOM

Virtual DOM

- Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới cótrạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM treecũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý React JS sửdụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một objectJavascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu

16

thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoáviệc re-render DOM tree thật.

- Cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parentđến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soátcũng như sửa lỗi Với đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà

dữ liệu của chúng thay đổi liên tục theo thời gian Dữ liệu thay đổi thì hầu hết kèmtheo sự thay đổi về giao diện Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ

có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi.Khi đó React sẽ rất hữu ích để sử dụng

JSX

- JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm:Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript.Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viếttrực tiếp bằng Javascript Safer: an toàn hơn Ngược với Javascript, JSX là kiểustatically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++ Vìthế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cungcấp tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trênJavascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng

Components

- React được xây dựng xung quanh các component, chứ không dùng template nhưcác framework khác Trong React, chúng ta xây dựng trang web sử dụng những thànhphần (component) nhỏ

- Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc cácthuộc tính khác nhau, trong một component lại có thể chứa thành phần khác

- Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽthực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ Reactđều là component

- Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react componentđơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác,nhưng render là method chủ đạo

Props và State

- Props: giúp các component tương tác với nhau, component nhận input gọi là props,

và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến

- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thờirender lại để cập nhật UI.

Giới thiệu về Nodejs

Node.js là một JavaScript runtime được build dựa trên Chrome’s V8 JavaScriptengine Node.js sử dụng mô hình event-driven, non-blocking I/O khiến nó trở nên nhẹ

và hiệu quả

V8 engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệtChrome, Opera và Vivaldi Nó được thiết kế tập trung vào hiệu năng và chịu tráchnhiệm cho việc dịch mã JavaScript sang mã máy để máy tính có thể hiểu và chạyđược Nhưng bạn cũng nên tránh nhầm lẫn rằng Node chạy trên trình duyệt Cha đẻcủa Node dựa trên V8 engine, cải tiến một số tính năng chẳng hạn file system API, thưviện HTTP và một số phương thức liên quan đến hệ điều hành Điều đó có nghĩa làNode.js là một chương trình giúp ta có thể chạy code JavaScript trên máy tính, nóicách khác nó là một JavaScript runtime

Mô hình hoạt động của Nodejs:

Để cho dễ hiểu, khi bạn connect đến một server truyền thống, chẳng hạn Apache, nó sẽ sinh ra một thread mới để xử lý request Ở các ngôn ngữ như PHP hay Ruby, mỗi một phép toán I/O (ví dụ truy cập database) sẽ chặn execution trên code củabạn cho đến khi phép toán đó hoàn thành Nói cách khác, server sẽ đợi cho đến khi database được duyệt xong mới xử lý kết quả Nếu có những request mới, server lại tiếptục sinh những thread mới để xử lý chúng Điều này dẫn đến nguy cơ kém hiệu quả, khi một lượng lớn thread được tạo ra sẽ khiến cho hệ thống trở nên chậm chạp, tệ hơn nữa có thể khiến site bị sập Cách thông thường để giải quyết tình trạng này là bổ sung thêm server

Node.js, mặt khác là single-threaded Nó cũng thuộc dạng event-driven hay nói cách khác tất cả những gì xảy ra trong Node là để phản hồi lại với một sự kiện Ví dụ, khi một request được gửi đến, server bắt đầu xử lý nó Nếu nó gặp phải phép toán I/O, thay vì đợi cho phép toán này kết thúc, nó sẽ đăng ký một callback trước khi tiếp tục

xử lý event tiếp theo Khi phép toán I/O kết thúc, server sẽ chạy callback và tiếp tục làm việc trên request ban đầu Ở tầng bên dưới, Node sử dụng thư viện libuv để thực hiện hoạt động asynchronous (non-blocking) này Mô hình hoạt động này của Node giúp server có thể xử lý một lượng lớn kết nối đến đồng thời Quan điểm truyền thống

để scale một Node app là clone nó và để instance được clone chia sẻ công việc Node.js thậm chí có module buit-in sẵn để giúp bạn thực hiện chiến lược clone này trên một server duy nhất

18

Ưu điểm của Nodejs

-Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking) Bạn có thể dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất

-Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website.Ứng dụng về các sựkiện và lắng nghe

-Nhận và xử lý nhiều kết nối chỉ với một single-thread Nhờ đó, hệ thống xử lý sẽ sửdụng ít lượng RAM nhất và giúp quá trình xử Nodejs lý nhanh hơn rất nhiều

-Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất

-Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất

Nhược điểm của Nodejs

- Nodejs gây hao tốn tài nguyên và thời gian Nodejs được viết bằng C++ và JavaScript nên khi xử lý cần phải trải qua một quá trình biên dịch Nếu bạn cần xử lý những ứng dụng tốn tài nguyên CPU thì không nên sử dụng Nodejs

- Nodejs so với các ngôn ngữ khác như PHP, Ruby và Python sẽ không có sự chênhlệch quá nhiều Nodejs có thể sẽ phù hợp với việc phát triển ứng dụng mới Tuy nhiênkhi xây dựng và triển khai dự án quan trọng thì Nodejs không phải là sự lựa chọn hoànhảo nhất

 Giới thiệu chung về ngôn ngữ TYPESCRYPT

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thểđược coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh

và lớp hướng đối tượng mà điều này không có ở Javascript TypeScript có thể sử dụng

để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side (NodeJS) [6].TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) nhưclasses, modules Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì mình tinchắc rằng TypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng mọi kỹthuật mới nhất từ ECMAScript Thực ra TypeScript không phải ra đời đầu tiên màtrước đây cũng có một số thư viện như CoffeScript và Dart được phát triển bởiGoogle, tuy nhiên điểm yếu là hai thư viện này sư dụng cú pháp mới hoàn toàn, điềunày khác hoàn toàn với TypeScript, vì vậy tuy ra đời sau nhưng TypeScript vẫn đangnhận được sự đón nhận từ các lập trình viên [6]

Tại sao nên sử dụng TYPESCRYPT

 Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình

hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một cách dễdàng

 Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần khuyến

khích nên sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0 và Ionic 2.0

 Hỗ trợ các tính năng của Javascript phiên bản mới nhất: TypeScript luôn đảm

bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiệntại là ECMAScript 2015 (ES6)

 Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể sử

dụng mà không mất phí, bên cạnh đó còn được cộng đồng hỗ trợ

 TypeScript là Javscript: Bản chất của TypeScript là biên dịch tạo ra các đoạn mã

Javascript nên ban có thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript.Ngoài ra bạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript,điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn

Những ưu điểm của TypeScript

 TypeScript miễn phí và có sự thuận tiện

Một loại ngôn ngữ lập trình tĩnh như TypeScript cùng với tất cả số liệu và thông

số của bạn sẽ được lấy một cách dễ dàng nhờ IDE cùng trình biên dịch Hỗ trợ chochính quá trình tìm kiếm giúp tiết kiệm về thời gian hơn cho việc kiểm tra lại code,hay như không cần thông qua bất cứ ai để tìm hiểu thông tin dữ liệu Cạnh đóTypeScript còn giúp giảm về phần trăm của việc va chạm tại thời gian vận hành [6]

 Thực hiện đơn giản và thao tác nhanh

Thao tác của TypeScript rất đơn giản, tiết kiệm thời gian mà kết quả nhận đượclại là sự bất ngờ khi khắc phục được lỗi và giúp người đọc dễ hiểu Thay vì như mộtngôn ngữ thường sẽ cần thực hiện rất nhiều bước: bắt đầu từ việc restart lại hàm, đổi

số để hoàn thành đoạn mã và tiếp đó khi apply hoàn tất và có đủ công cụ thì vận hành,cuối cùng khi vận hành có lỗi thì sửa lại [6]

 Giúp tái cấu trúc

Tất nhiên lỗi xảy ra trong quá trình làm việc của các lập trình viên là thườngxuyên với những lỗi nhỏ Khi đó việc sử dụng TypeScript sẽ giúp cho việc chỉnh sửacode dễ hơn qua lệnh Rename Symbol hoặc Find All Occurrences Còn về các ngônngữ khác khi muốn sửa thì sẽ cần thay đổi cả về các tập tin đặc biệt là có sự liên quanhay sử dụng RegEx [6]

20

Nếu bạn muốn sử dụng TypeScript cho việc nâng cấp hệ thống thì chắc chắnngôn ngữ sẽ giúp tái cấu trúc lại phù hợp theo nhu cầu về tìm kiếm Hơn nữa khônggây sự hỗn loạn và khi code của bạn dùng không match được bất cứ dữ liệu nào thì sẽđược báo đến ngay để xử lý.

 Giảm về tỷ lệ mắc lỗi

Thông qua việc cảnh báo về lỗi khi bắt đầu viết code từ đó giúp tỷ lệ mắc lỗigiảm xuống mức thấp nhất và bạn sẽ được TypeScript trả lại giá trị null hay với mộtgợi ý thay đổi sửa Một lần chỉnh sửa đó hệ thống hoạt động sẽ không phải mắc lại lỗi

từ đó tiết kiệm về chính thời gian sửa lỗi

 Thử nghiệm về boilerpalte được hạn chế

Đối với các quy trình kiểm tra cũng như việc báo lỗ tự động khi code sẽ giúpbạn có thể chắc chắn hơn về việc các biến dữ liệu được đặt đúng chỗ Từ đó giúp bạnkhông cần lo lắng về hệ thống không cần vận hành hay như kiểm tra lại tạo sự ưu tiênhơn cho kiểm tra chất lượng logic Hay như các bước thử nghiệm cũng được giảm đi

mà hiệu quả công việc nhận được luôn luôn cao

 Tạo sự hợp nhất mã đơn giản hơn

Khi hoàn thiện về một đoạn code chúng ta đã có thể chạy thử nghiệm dù là tại

đó mọi thứ đều chạy trơn tru Tuy nhiên, khi áp dụng tổng thể thì liệu rằng bạn có chắcrằng đoạn code đó sẽ hoạt động tốt hơn khi áp dụng cho môi trường khác Có lẽ đâychính là điểm mạnh mà TypeScript đem lại vì tạo nên sự hợp nhất mã đơn giản và dễdàng cho việc đánh giá đoạn mã mới qua kiểm tra biên dịch

 Giúp tối ưu cho quy trình làm việc

Tuy là tối ưu những TypeScript sẽ không bao giờ khuyến khích người dùng có

sự nhảy bước và thực hiện sai các thao tác chung Mà TypeScript sẽ chỉ khuyến khíchngười dùng đưa ra các quyết định về một kiểu dữ liệu chuẩn bị cho việc sử dụng ngônngữ tĩnh Từ chính quy luật đó mà giúp lập trình viên có thể đem lại hiệu quả cho quátrình làm việc của chính mình

Các nhược điểm còn tồn tại của TypeScript

Có thể với các lập trình viên đã quen thuộc với Javascript thì bạn cũng có thểhiểu được những khó khăn khi làm việc Nhưng đối với một số người mới bắt đầu sẽchưa quá nắm bắt được khó khăn mà TypeScript đem lại

- Cần có sự bắt buộc về dụng biên dịch để có thể vận hành TypeScript cùng đuôi jskhi trên nền tảng Node.js cho việc tái sử dụng

- Bước thiết lập cũng sẽ cồng kềnh hơn vì khi dùng TypeScript bạn sẽ cần đảm bảo

về máy chủ Node.js hay trình thử nghiệm, webpack đều có thể hoạt động được vớiTypeScript Hay như mỗi khi apply hoặc thêm về library bất kỳ thì cũng cần thêm vềTypedef vào

- Mang tính năng mở trong việc sử dụng nên sẽ gây sự khó khăn phần nào đó về việckiểm soát các thay đổi và cập nhật

- Những ứng dụng phức tạp sẽ cần tới sự đòi hỏi rất nhiều về file source cũng nhưtách thành nhiều thư mục riêng mới đảm bảo về sự thống nhất nhưng lại tốn nhiềucông sức vì thao tác bằng tay

- Có thể là Javascript có sự hỗ trợ về OOP tuy nhiên khi áp dụng lại khó khăn và việctriển khai code lại không hề đơn giản như các ngôn ngữ bậc cao khác

22

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

2.1 Phân tích yêu cầu đề tài

2.1.1 Phát biểu bài toán

Tên bài toán: “Ứng dụng Reactjs và Nodejs vào xây dựng website quản lí bánđiện thoại”

Đây là một loại hình kinh doanh ảo qua mạng bằng cách xây dựng một trangweb bán điện thoại để mọi người có thể vào đó xem các loại điện thoại, lựa chọn giữacác hãng, so sánh các loại máy, giá tiền Với trang web bán điện thoại trực tuyến, cửahàng sẽ đưa thông tin các sản phẩm mới ra mắt hoặc sắp ra mắt lên trang web củamình Việc đưa thông tin phải theo một trật tự hợp lý Ví dụ, khi đưa thông tin điệnthoại thì các thông tin phải đầy đủ gồm: Tên hãng, giá tiền, các thông số kĩ thuật nhưcamera, pin, hệ điêu hành, bộ nhớ, màn hình, Người quản trị trang web cũng cóquyền thêm mới, sửa đổi thông tin điện thoại, hoặc xóa đi những điện thoại đã dừngbán hoặc hết hàng Mọi sự thay đổi đều được ghi nhận trong cơ sở dữ liệu để đến vớingười sử dụng

Với khách hàng thì được xem trang web, xem thông tin các loại điện thoại đangbán nhưng không có quyền đặt hàng Để có thể đặt hàng, khách hàng cần phải đăng kí

là thành viên của trang web Khi đã là thành viên, khách hàng đăng nhập vào websitetheo email và mật khẩu của mình Khi đó, khách hàng sẽ có quyền đặt hàng Bên cạnh

đó, khách hàng có thể tìm kiếm điện thoại theo tên hoặc là theo hãng, khi đặt hàngxong thì khách hàng có thể thay đổi số lượng theo ý muốn Khi khách hàng đặt hàngthành công, người quản lí sẽ đối chiếu thông tin đơn hàng của khách và thông tin đượccập nhật trong hệ thống để tiến hành lấy vận chuyển sản phẩm và thanh toán chokhách hàng

Ngoài ra, trang web còn dùng là nơi quảng cáo cho cửa hàng, các loại điện thoạiđang bán và sắp bán tại cửa hàng

2.1.2 Yêu cầu bài toán

Hệ thống có chức năng ủy quyền người dùng, do đó:

Đối với người dùng là khách hàng - không phải thành viên:

 Được xem thông tin các loại điện thoại, xem thông tin sản phẩm, xem giá tiền,xem sản phẩm theo giá thấp đến cao hoặc ngược lại

 Được đăng ký tài khoản, đăng nhập

Đối với người dùng là khách hàng - thành viên:

 Được xem thông tin các loại điện thoại, xem thông tin sản phẩm, xem giá tiền,xem sản phẩm theo giá thấp đến cao hoặc ngược lại

 Được đăng ký tài khoản, đăng nhập

 Được tìm kiếm sản phẩm

 Được quản lí tài khoản thành viên của mình

Đối với người dùng là chủ cửa hàng hoặc quản lý:

 Được thêm thông tin các loại điện thoại: Khi có điện thoại mới, admin sẽ thêmmới thông tin về sản phẩm đó vào các điện thoại sắp bán

 Được chỉnh sửa thông tin các sản phẩm: Khi có sự thay đổi về thông tin điệnthoại, người quản lí có thể thay đổi thông tin để người dùng cập nhật kịp thời

 Được xóa các điện thoại: Có thể vì một lí do nào đó mà bị dừng bán hoặc hếthàng và buộc xóa khỏi hệ thống thì người quản lí cũng có thể xóa được sản phẩmđó

 Được xóa thông tin các thành viên: Khi khách hàng vi phạm các điều luật củarạp chiếu phim hoặc vì một lí do nào đó yêu cầu xóa tài khoản, người quản lí có thểxóa toàn bộ thông tin liên quan đến tài khoản đó

 Được viết bài giới thiệu về sản phẩm Khi ra mắt sản phẩm mới thì người quản

lí có thể viết bài mô tả cho sản phẩm đó, điều này giúp thu hút khách hàng hơn Từ

đó nâng cao chất lượng website hơn

2.2 Nghiên cứu hiện trạng

Sau khi nghiên cứu, khảo sát hiện trạng, em đã nắm bắt được các thông tin sau:

- Quản lí điện thoại: Mỗi điện thoại được quản lý các thông tin sau: Tên điệnthoại, hệ điều hành, màn hình, dung lượng pin, camera, …

- Quản lí thành viên: Mỗi thành viên được quản lí các thông tin như email và mậtkhẩu

- Quản lí đơn hàng: Mỗi đơn hàng cần được quản lí các thông tin sau: thông tincủa các sản phẩm, giá tiền, phương thức thanh toán, trạng thái

- Đặt hàng trực tuyến: Mỗi đơn hàng khi được đặt cần đáp ứng đầy đủ các thôngtin sau: thông tin của đơn hàng (bao gồm thông tin sản phẩm, giá tiền, số lượng vàđịa chỉ giao hàng)

24

2.3 Đặc tả hệ thống

Người quản lí Là người có vai trò cao nhất trong hệ thống, người quản

lí có thể thêm, sửa, xóa mọi thông tin của hệ thống

Khách hàng Không phải

thành viên

Thao tác trực tiếp trên hệ thống người dùng, với cácchức năng: xem danh sách điện thoại, xem thông tin sảnphẩm, xem giá tiền, tìm kiếm sản phẩm, đăng ký tàikhoản, đăng nhập

Thành viên

Vận hành các chức năng của khách hàng - không phảithành viên, ngoài ra khách hàng thành viên có thể đặthàng, xem thông tin đơn hàng

Bảng 1 Đặc tả hệ thống

2.4 Sơ đồ use-case

Sơ đồ ca sử dụng (use-case) là kỹ thuật được dùng trong kỹ thuật phần mềm và

hệ thống nhằm nắm bắt những yêu cầu chức năng của hệ thống Use case mô tả sựtương tác đặc trưng giữa người dùng bên ngoài và hệ thống Use case cũng mô tả cácyêu cầu đối với hệ thống

1.1

2.4.1 Sơ đồ use-case của khách hàng

26

2.4.2 Sơ đồ use-case của khách hàng – thành viên

2.4.3 Sơ đồ use-case của người quản lí

2.5 Biểu đồ phân rã chức năng

Mô hình phân rã chức năng (BFD – Business Function Diagram) là công cụbiểu diễn việc phân rã có thứ bậc đơn giản các công việc cần thực hiện Mỗi công việcđược chia ra làm các công việc con, số mức chia ra phụ thuộc kích cỡ và độ phức tạp

28