báo cáo đồ án cơ sở ngành xây dựng hệ thống website quản lý bán điện thoai

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

HỌC VIỆN HÀNG KHÔNG VIỆT NAMKHOA CÔNG NGHỆ THÔNGTIN

BÁO CÁO

ĐỒ ÁN CƠ SỞ NGÀNH XÂY DỰNG HỆ THỐNG WEBSITE QUẢN LÝ BÁN ĐIỆN THOAI

HỌC KỲ II. – NĂM HỌC: 2023 - 2024MÃ LỚP HỌC PHẦN: 010100085104

Giảng viên hướng dẫn: Nguyễn Ngọc ThanhNhóm sinh viên thực hiện:

Đặng Hoàng Phương Uyên(2254810214) Phạm Ngọc Nhi (2254810092)

Phạm Trần Lan Anh (2254810094) Thái Xuân Hoàng(2254810085) Võ Quốc Huy(2254810079)

TP. HCM, tháng ..2.. năm 2024….

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

PHIẾU CHẤM ĐIỂM

1 Đặng Hồng Phương Un -Làm css, js

-Tìm kiếm sản phẩm ,hình ảnh

-Đăng ký đăng nhập2 Phạm Ngọc Nhi -Giao diện trang chủ

-Trang tin tức -Trang tuyển dụng 3 Phạm Trần Lan Anh Giỏ hàng ,

-Đăng ký, đăng nhập -Đăng xuất

Giảng viên chấm 1:

Giảng viên chấm 2:

Lời cảm ơn

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

Trước khi nghiên cứu đồ án môn học, chúng em xin chân thành cảm ơn đến các Thầy Cô trong khoa Công nghệ Thông tin Học viện Hàng Không Việt Nam đã tận tình chỉ dạy và hướng dẫn những mơn học để đặt nền tảng cho đồ án môn học của chúng em.

Chúng em xin chân thành cảm ơn Cô Nguyễn Ngọc Thanh đã tận tình giúp đỡ và hướng dẫn cho chúng em trong suốt thời gian làm đồ án môn học.

Do kiến thức cịn có hạn nên chúng em có thể khơng tránh những sai sót trong q trình thựchiện đồ án môn học, mong quý Thầy Cô trong hội đồng bảo vệ có thể hướng dẫn và gợi ý để chúng em có hướng phát triển các đồ án sau.

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

<small>T/p Hồ Chí Minh, ngày ….. tháng …. năm 2024</small>SINH VIÊN THỰC HIỆN

<small>(Ký và ghi rõ họ tên)</small>

Mục lục Lời cảm ơn

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

CHƯƠNG I. GIỚI THIỆU1. Lý do chọn đề tài2. Đối tượng nghiên cứu3. Đối tượng khảo sát4. Mục tiêu nghiên cứ5. Muc tiêu đạt được

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

1. Khái quát Microsof Visual Studio 2019, Xampp1.1. Khái niệm Microsof Visual Studio 20191.2. Khái quát Xampp

2. Khái quát HTML, CSS2.1. HTML

3.1. Khái niệm tổng quát3.2. Hoạt động của PHP3.3. Các loại thẻ PHP3.4. Ưu/Nhược điểm 4. Khái quát BOOTTRAP

4.1. Khái niệm tổng quát4.2. Lịch sử

4.3. Cấu trúc4.4. Ưu /Nhược điểm5. Khái quát MYSQL

5.1. Khái niệm 5.2. Lịch sử 6. Khái quát JAVASCRIPT

6.1. Khái niệm6.2. Lịch sử

6.3. Cách thức hoạt động 6.4. Ưu/Nhược điểm

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

7. Khái quát SVG7.1. Khái niệm7.2. Ưu/Nhược điểmCHƯƠNG III. SẢN PHẨM

I. Phân tích 1. Khảo sát yêu cầu 2. Chức năng hệ thống

2.1. Tác nhân hệ thống (người sử dụng)2.2. Biểu đồ chức năng (biểu đồ use case)2.3. Đặc tả chức năng

CHƯƠNG V. KẾT LUẬN1. Đề tài làm được những gì2. Ưu nhược điểm3. Hướng phát triển

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

Chương 1:Giới thiệu

1. Lý do chọn đề tài

Công nghệ thông tin không chỉ là một trong những lĩnh vực cần thiết mà còn là động lực quan trọng đẩy mạnh sự phát triển kinh tế của nhiều quốc gia, đặc biệt là trong bối cảnh nền kinh tế đang phát triển mạnh mẽ như Việt Nam ngày nay. Việc cập nhật thơng tin đóng vai trị quan trọng đối với nhà quản lý và nhà kinh doanh trong ngành này.Để truyền thông sản phẩm, nhiều doanh nghiệp lớn đã chọn chiến lược quảng cáo trên các phương tiện truyền thơng đại chúng như báo chí, đài phát thanh, và truyền hình. Trong đó, việc quảng cáo trên website đã chứng minh là một trong những giải pháp hiệu quả nhất. Đây không chỉ là phương thức truyền tải thơng tin nhanh chóng ,hiệu quả mà cịn tiết kiệm chi phí đáng kể.

Khách hàng ngày càng có nhu cầu mua sắm ngày càng lựa chọn mua hàng trực tuyến thơng qua website vì sự tiện lợi và tốc độ. Một vài "click" chuột, một vài thao tác đơn giản, và họ đã sở hữu được sản phẩm mình mong muốn ngay tại nhà.

Với những thành công đáng kể, công nghệ thông tin đã được áp dụng rộng rãi trong nhiều lĩnh vực, trở thành một trong những yếu tố chủ chốt của sự phát triển kinh tế-xã hội và an ninh-quốc phòng. Sự đẩy mạnh ứng dụng công nghệ thông tin sẽ thúc đẩy sựtiến bộ trong tác phong làm việc, nâng cao năng suất lao động và dẫn đến sự nâng cao dân trí.

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

Chúng tơi, nhóm 13, trong q trình học tập và áp dụng những kiến thức đã học , nhóm chúng em đã xây dựng hệ thống "Website điện thoại thông minh" với sự hướng dẫn tận tình của giáo viên. Việc làm báo cáo chuyên đề này không chỉ giúp chúng em nâng cao kiến thức về lập trình mà còn giúp chúng em rút ra nhiều kinh nghiệm quý báu cho những dự án web sắp tới.

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

Người dùng: mọi người có nhu cầu mua điện thoại thông minh Công cụ: Microsof Visual Studio 2019, Xampp

3. Đối tượng khảo sát

Người cung cấp thông tin: Quản lý và nhân viên tại cửa hàng bán điện thoại thông minh

4. Mục tiêu nghiên cứu

Giới thiệu , quảng bá cửa hàng đến với mọi người

Giúp khách hàng tìm được sản phẩm điện thoại ưng ý theo sở thích và phù hợp với mục đích của mình

Tiếp nhận phản ánh của khách hàng về sản phẩm cũng như phương pháp làm việc của cửa hàng thông qua website.

Chương 2: CƠ SỞ LÝ THUYẾT1. Khái quát Microsof Visual Studio 2019, XAMPP

1.1. Khái niệm Microsof Visual Studio 2019

Visual studio là một trong những công cụ hỗ trợ lập trình và thiết kế website rất nổi tiếngnhất hiện nay của Mcrosoft và chưa có một phần mềm nào có thể thay thế được nó. Visual Studio được viết bằng 2 ngơn ngữ đó chính là C# và VB+. Đây là 2 ngơn ngữ lập trình giúp người dùng có thể lập trình được hệ thống một các dễ dàng và nhanh chóng

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

nhất thông qua Visual Studio. Visual Studio là một phần mềm lập trình hệ thống được sản xuất trực tiếp từ Microsoft. Từ khi ra đời đến nay, Visual Studio đã có rất nhiều các phiên bản sử dụng khác nhau. Điều đó, giúp cho người dùng có thể lựa chọn được phiên bản tương thích với dịng máy của mình cũng như cấu hình sử dụng phù hợp nhất. Bên cạnh đó, Visual Studio cịn cho phép người dùng có thể tự chọn lựa giao diện chính cho máy của mình tùy thuộc vào nhu cầu sử dụng

Hình 1: Visual Studio 1.2. XAMPP

Xampp là ứng dụng dùng để thiết lập và điều hành máy chủ nội bộ (localhost). Đây còn là chương trình tạo máy chủ Web (Web server) được tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin. Xampp cho phép bạn giả lập môi trường server hosting, để chạy thử (demo) một website ngay trên máy tính cá nhân mà khơng cần phải mua hosting hay VPS.

Một số thông tin cơ bản :

Nhà phân phối: thuộc bản quyền của GNU General Public Licence, do Apache Friends phân phối và phát triển.

Ngôn ngữ lập trình: tích hợp nhiều ngơn ngữ lập trình khác nhau.

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

Các phiên bản: Phiên bản Xampp mới nhất là phiên bản 7.2.11 phát hành năm 2018

Hình 2: Biểu tượng của phần mềm Xampp

2. Khái quát HTML, CSS2.1. HTML

2.1.1. Khái niệm và lịch sửa. Khái niệm

Trang Web là sự kết hợp giữa văn bản và các thẻ HTML. HTML là chữ viết tắt của HyperTextMarkup Language được hội đồng World Wide Web Consortium (W3C) quy định. Một tập tinHTML chẳng qua là một tập tin bình thường, có đi .html hoặc .htm.

HTML giúp định dạng văn bản trong trang Web nhờ các thẻ. Hơn nữa, các thẻ html có thểliên kết từ hoặc một cụm từ với các tài liệu khác trên Internet. Đa số các thẻ HTML có dạng thẻđóng mở. Thẻ đóng dùng chung từ lệnh giống như thẻ mở, nhưng thêm dấu xiên phải (/). Ngôn ngữHTML qui định cú pháp không phân biệt chữ hoa chữ thường. Ví dụ, có thể khai báo <html> hoặc<HTML>. Khơng có khoảng trắng trong định nghĩa thẻ.

b. Lịch sử

Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet). Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C).

Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML. Phiên bản HTML 4.01 được xuất bản năm 1999. Sau đó, các nhà phát triển đã thay thế HTML bằng XHTML vào năm 2000.

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

Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêm vào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví dụ như: <article>, <header>, <footer>,…).

Theo Mozilla Developer Network thì HTML Element Reference hiện nay có khoảng hơn 140 tag. Tuy nhiên một vài tag trong số đó đã bị tạm ngưng (do khơng được hỗ trợ bởi các trình duyệt hiện hành).

2.1.2. Cấu trúc chung của một trang HTML

<html> <head>

<title> Tiêu đề của trang Web </title> </head>

1. Thẻ <head>...</head>: Tạo đầu mục trang

2. Thẻ <title>...</title>: Tạo tiêu đề trang trên thanh tiêu đề, đây là thẻ bắt buộc. Thẻ titlecho phép bạn trình bày chuỗi trên thanh tựa đề của trang Web mỗi khi trang Web đó được duyệttrên trình duyệt Web.

3. Thẻ <body>...</body>: Tất cả các thông tin khai báo trong thẻ <body> đều có thể xuấthiện trên trang Web. Những thơng tin này có thể nhìn thấy trên trang Web.

4. Các thẻ định dạng khác. Thẻ <p>…</p>:Tạo một đoạn mới. Thẻ <font>... </font>:Thay đổi phơng chữ, kích cỡ và màu kí tự…

5. Thẻ định dạng bảng <table>…</table>: Đây là thẻ định dạng bảng trên trang Web. Saukhi khai báo thẻ này, bạn phải khai báo các thẻ hàng <tr> và thẻ cột <td> cùng với các thuộc tínhcủa nó.

6. Thẻ hình ảnh <img>: Cho phép bạn chèn hình ảnh vào trang Web. Thẻ này thuộc loại thẻkhơng có thẻ đóng.

7. Thẻ liên kết <a>... </a>: Là loại thẻ dùng để liên kết giữa các trang Web hoặc liên kếtđến địa chỉ Internet, Mail hay Intranet(URL) và địa chỉ trong tập tin trong mạng cục bộ (UNC).

8. Các thẻ Input: Thẻ Input cho phép người dùng nhập dữ liệu hay chỉ thị thực thi một hànhđộng nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit, button, reset, checkbox,radio, image.

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

9. Thẻ Textarea: < Textarea>.... < \Textarea>: Thẻ Textarea cho phép người dùng nhậpliệu với rất nhiều dòng. Với thẻ này bạn không thể giới hạn chiều dài lớn nhất trên trang Web.

10. Thẻ Select: Thẻ Select cho phép người dùng chọn phần tử trong tập phương thức đãđược định nghĩa trước. Nếu thẻ Select cho phép người dùng chọn một phần tử trong danh sách phầntử thì thẻ Select sẽ giống như combobox. Nếu thẻ Select cho phép người dùng chọn nhiều phần tửcùng một lần trong danh sách phần tử, thẻ Select đó là dạng listbox.

11. Thẻ Form: Khi bạn muốn submit dữ liệu người dùng nhập từ trang Web phía Client lênphía Server, bạn có hai cách để làm điều nàu ứng với hai phương thức POST và GET trong thẻform. Trong một trang Web có thể có nhiều thẻ Form khác nhau, nhưng các thẻ Form này khôngđược lồng nhau, mỗi thẻ form sẽ được khai báo hành động (action) chỉ đến một trang khác.

2.1.4. Ưu /nhược điểma. Ưu điểm:

Được sử dụng rộng rãi, có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng lớn.Học đơn giản và dễ hiểu.

Mã nguồn mở và hồn tồn miễn phí.Markup gọn gàng và đồng nhất.

Tiêu chuẩn thế giới được vận hành bởi World Wide Web Consortium (W3C).Dễ dàng tích hợp với các ngôn ngữ backend như PHP, Python…

2.2.1.1. Khái niệm tổng quát

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngơn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngơn ngữ tạo phong cách cho trang web. Bạn 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ữ, font 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.

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

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ữ markup (nền tảng của site) 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

2.2.1.2. Khái niệm SCSS

SCSS (Sassy CSS) là một phần mở rộng của ngôn ngữ CSS (Cascading Style Sheets) giúptăng cường khả năng sáng tạo và quản lý mã CSS của bạn một cách hiệu quả hơn. Nó cung cấp các tính năng mạnh mẽ như biến số, lồng ghép, mixins, và nhiều tính năng khác mà CSS truyền thống khơng có.

Dựa trên cú pháp của CSS, SCSS cho phép bạn viết mã CSS một cách gọn gàng hơn và dễ đọc hơn bằng việc sử dụng các tính năng như biến số (variables), nesting, và modules.

2.2.1.3. Khái niệm Less

LESS cũng là một ngôn ngữ mở rộng của CSS, nhưng có một số cú pháp và tính năng khác biệt so với SCSS. LESS cho phép sử dụng biến số, nesting, mixins và cảm biến (cảmbiến dựa trên kiểu của thuộc tính CSS). LESS được phát triển để giúp viết mã CSS một cách gọn gàng và dễ dàng hiểu hơn.

2.2.2. Mối quan hệ CSS và HTML

Như đã đề cập, CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website.Nếu HTML là các thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng vàmàu sắc của chiếc xe.

Một trang web có thể chạy mà khơng cần CSS, nhưng nó chắc chắn sẽ khơng có tình thẩmmỹ. CSS làm cho giao diện người dùng của một trang web tỏa sáng và mang đến trảinghiệm người dùng tuyệt vời. Nếu khơng có CSS, các trang web sẽ kém bắt mắt hơn vàcó thể khó điều hướng hơn nhiều. Ngoài bố cục và định dạng, CSS chịu trách nhiệm vềmàu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa.

2.2.3.Bố cục và cấu trúc CSSa. Bố cục

Bố cục của một đoạn CSS chủ yếu dựa vào hình hộp với mỗi hộp chiếm những khoảng trống trên trang web với các thuộc tính chính như:

Padding: Là các khơng gian xung quanh nội dung (ví dụ: khơng gian xung quanh đoạn văn bản).

Border: Là các đường nằm ngoài phần đệm.

Margin: Là khoảng cách bao quanh phía ngồi của phần tử.b. Cấu trúc

Thông thường, một đoạn CSS sẽ bao gồm các phần:

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

vùng chọn {thuộc tính: giá trị; thuộc tính: giá trị;….. }

Đoạn CSS sẽ được khai báo bằng vùng chọn, các thuộc tính, giá trị nằm trong dấu ngoặcnhọn. Mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của các giá trị đã cótrong danh sách của CSS.

Quy tắc khai báo đó chính là: thuộc tính và giá trị cần cách nhau bằng dấu hai chấm, mỗidịng khai báo thuộc tính cần có dấu chấm phẩy cuối cùng. Các thuộc tính khơng bị giớihạn ở một vùng chọn.

Thuộc tính id, class của phần tử.

Các phần tử có mối liên quan với các phần tử khác trong hệ thống cây phân cấp tài liệu.

Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo và chúng được phân tách với nhau bằng dấu chấm phẩy. Mỗi khai báo lại bao gồm tên & giá trị đặc tính CSS, dược phân tách với nhau bằng dấu phẩy. Quy tắc khai báo CSS là chúng luôn phải kết thúc bằng dấu chấm phẩy, và khối khai báo phải nằm trong các dấu ngoặc móc.

Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo kiểu cho mộtphần tử HTML. Vì vậy, với CSS, bạn chỉ cần lựa chọn thuộc tính mà bạn muốn tác động nhất trong bộ quy tắc bạn đã tạo ra.

Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính. Việc lựa chọn một thuộc tính trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính.

2.2.4. Ưu/nhược điểm

a. Ưu điểm:

. Giải quyết một vấn đề lớn.. Tiết kiệm rất nhiều thời gia . Cung cấp thêm các thuộc tínhb. Nhược điểm:

Margins khơng đúng :

Margin sụp đổ là, trong khi cũng như các tài liệu và hữu ích, cũng phức tạp và thường không dự kiến của các tác giả, và khơng có cách nào tác dụng phụ phí đơn giản là có sẵn để kiểm sốt nó.

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

Thiếu các biến :

CSS không chứa biến. Điều này làm cho nó cần thiết để làm một "thay thế tất cả" khi một trong những mong muốn thay đổi một hằng số cơ bản, chẳng hạn như màu sắc hoặc độ cao khác nhau và độ rộng.

Hỗ trợ trình duyệt khơng nhất qn :

Các trình duyệt khác nhau sẽ làm cho CSS bố trí khác nhau như là một kết quả của lỗitrình duyệt hoặc thiếu sự hỗ trợ cho các tính năng CSS. Nhiều cái gọi là CSS "hack"phải được thực hiện để đạt được bố trí phù hợp giữa các trình duyệt phổ biến nhất haythường được sử dụng. Pixel bố trí chính xác đơi khi có thể khơng thể đạt được trên cáctrình duyệt.

3. Khái quát PHP3.1. Khái niệm

PHP là chữ viết tắt của “Personal Home Page” do Rasmus Lerdorf tạo ra năm 1994. Vìtính hữu dụng của nó và khả năng phát triển, PHP bắt đầu được sử dụng trong mơi trường chunnghiệp và nó trở thành “PHP: Hypertext Preprocessor”

Thực chất PHP là ngôn ngữ kịch bản nhúng trong HTML, nói một cách đơn giản đó là một trangHTML có nhúng mã PHP, PHP có thể được đặt rải rác trong HTML.

PHP là một ngơn ngữ lập trình được kết nối chặt chẽ với máy chủ, là một công nghệ phíamáy chủ (Server-Side) và khơng phụ thuộc vào mơi trường (cross-platform). Đây là hai yếu tố rấtquan trọng, thứ nhất khi nói cơng nghệ phía máy chủ tức là nói đến mọi thứ trong PHP đều xảy ratrên máy chủ, thứ hai, chính vì tính chất khơng phụ thuộc môi trường cho phép PHP chạy trên hầuhết trên các hệ điều hành như Windows, Unix và nhiều biến thể của nó... Đặc biệt các mã kịchbản PHP viết trên máy chủ này sẽ làm việc bình thường trên máy chủ khác mà không cần phảichỉnh sửa hoặc chỉnh sửa rất ít.

Khi một trang Web muốn được dùng ngôn ngữ PHP thì phải đáp ứng được tất cả các qtrình xử lý thơng tin trong trang Web đó, sau đó đưa ra kết quả ngơn ngữ HTML.

Khác với ngơn ngữ lập trình, PHP được thiết kế để chỉ thực hiện điều gì đó sau khi một sự kiệnxảy ra (ví dụ, khi người dùng gửi một biểu mẫu hoặc chuyển tới một URL).

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

Máy khách Yêu cầu URL Máy chủ hàng HTML Web HTML

Gọi mã kịch bản

Khi người dùng truy cập Website viết bằng PHP, máy chủ đọc mã lệnh PHP và xử lí chúngtheo các hướng dẫn được mã hóa. Mã lệnh PHP yêu cầu máy chủ gửi một dữ liệu thích hợp (mãlệnh HTML) đến trình duyệt Web. Trình duyệt xem nó như là một trang HTML têu chuẩn. Như tađã nói, PHP cũng chính là một trang HTML nhưng có nhúng mã PHP và có phần mở rộng làHTML. Phần mở của PHP được đặt trong thẻ mở <?php và thẻ đóng ?> .Khi trình duyệt truy cậpvào một trang PHP, Server sẽ đọc nội dung file PHP lên và lọc ra các đoạn mã PHP và thực thi cácđoạn mã đó, lấy kết quả nhận được của đoạn mã PHP thay thế vào chỗ ban đầu của chúng trong filePHP, cuối cùng Server trả về kết quả cuối cùng là một trang nội dung HTML về cho trình duyệt.

3.3. Các loại thẻ PHP

Có 4 loại thẻ khác nhau mà bạn có thể sử dụng khi thiết kế trang PHP:- Kiểu Short: Thẻ mặc định mà các nhà lập trình PHP thường sử dụng. Ví dụ: <? Echo Well come to PHP “ . ” ;?>

- Kiều đinh dạng XML: Thẻ này có thể sử dụng với văn bản đinh dạng XML Ví dụ: <? Php echo “Well come to PHP with XML”;>?

- Kiểu Script: Trong trường hợp bạn sử dụng PHP như một script tương tự khai báoJavaScipt hay VBScript:

Ví dụ: <script language= “php”>echo “Php Script”;</script>

- Kiểu ASP: Trong trường hợp bạn khai báo thẻ PHP như một phần trong trang ASP. Ví dụ: <% echo “PHP – ASP”; %>

*PHP và HTML là các ngôn ngữ khơng “nhạy cảm “với khoảng trắng, khoảng trắng có thểđược đặt xung quanh để các mã lệnh để rõ ràng hơn. Chỉ có khoảng trắng đơn có ảnh hưởng đếnsự thể hiện của trang Web (nhiều khoảng trắng liên tiếp sẽ chỉ thể hiện dưới dạng một khoảngtrắng đơn).

3.4. Ưu nhược điểm

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

Để thiết kế Web động có rất nhiều ngơn ngữ lập trình khác nhau để lựa chọn, mặc dù cấu hìnhvà tính năng khác nhau nhưng chúng vẵn đưa ra những kết quả giống nhau. Chúng ta có thể lựachọn cho mình một ngơn ngữ: ASP, PHP, Java, Perl... và một số loại khác nữa. Vậy tại sao chúngta lại nên chọn PHP. Rất đơn giản, có những lí do sau mà khi lập trình Web chúng ta không nênbỏ qua sự lựa chọn tuyệt vời này.

PHP được sử dụng làm Web động vì nó nhanh, dễ dàng, tốt hơn so với các giải pháp khác. PHP có khả năng thực hiện và tích hợp chặt chẽ với hầu hết các cơ sở dữ liệu có sẵn, tính linhđộng, bền vững và khả năng phát triển không giới hạn.

Đặc biệt PHP là mã nguồn mở do đó tất cả các đặc tính trên đều miễn phí, và chính vì mã nguồn mở sẵn có nên cộng đồng các nhà phát triển Web ln có ý thức cải tiến nó, nâng cao để khắc phục các lỗi trong các chương trình này

PHP vừa dễ với người mới sử dụng vừa có thể đáp ứng mọi yêu cầu của các lập trình viên chuyênnghiệp, mọi ý tuởng của các bạn PHP có thể đáp ứng một cách xuất sắc.

Cách đây không lâu ASP vốn được xem là ngôn ngữ kịch bản phổ biến nhất, vậy mà ây giờ bPHP đã bắt kịp ASP, bằng chứng là nó đã có mặt trên 12 triệu Website.

4. Khái quát BOOTTRAP4.1. Khái niệm

Bootstrap một Framework bao gồm 3 thành phần cơ bản, đó là: HTML, CSS và JavaScript. Framework này được sử dụng để phát triển trang web chuẩn theo Responsive. Sử dụng Bootstrap giúp việc thiết kế web tiết kiệm nhiều thời gian và đơn giản hơn. Bootstrap là một bộ sưu tập hoàn tồn miễn phí. Bộ sưu tập này bao gồm các mã nguồnmở và các cơng cụ giúp bạn có thể tạo thành một website với đầy đủ các thành phần. Bootstrap sẽ quy định sẵn các thuộc tính về kích thích, màu sắc và các chiều dài, chiều rộng của các vùng website…. Thơng qua đó, designer có thể dễ dàng sáng tạo ra các website theo mong muốn nhưng vẫn đảm bảo tính thẩm mỹ. Đồng thời, sử dụng Bootstrap sẽ giúp tiết kiệm rất nhiều thời gian<small>.</small>

bản cũ, phiên bản số 2 được bổ sung thêm 12 cột giúp người dùng có thể dễ dàng tùy chỉnh và thiết kế với nhiều kích thước màn hình khác nhau.

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

Đến ngày 19/8/2013, phiên bản thứ 3 của Bootstrap được ra đời. Đây là phiên bản đầu tiên có giao diện dành cho điện thoại thơng minh. Chính nhờ sự thay đổi này đã giúp Bootstrap tạo nên sự đột phá và đứng thứ 1 trên Bảng xếp hạng các dự án của GitHub. Vào tháng 10/2014, các nhà phát triển tiếp tục nâng cấp và công bố phiên bản thứ 4 của

Tháng 8/2015, Bootstrap 4 giới thiệu phiên bản Alpha đầu tiên.

Hiện nay, Bootstrap đang ở phiên bản 4.5. Trải qua gần 10 năm phát triển, Bootstrap vẫn luôn là framework nổi tiếng nhất trong lĩnh vực thiết kế web. Lượng người dùng và tìm hiểu Bootstrap ln cực kỳ cao.

4.3. Cấu trúc

Gồm 3 File chính :Bootstrap.CSS

Bootstrap CSS là một framework có dạng CSS, được sử dụng để quản lý và sắp xếp bố cục của website mà bạn đang thiết kế. Nếu HTML quản lý cấu trúc của website và nội dung webthì CSS lại có nhiệm vụ xử lý bố cục. Vì thế, trong Bootstrap, hai cấu trúc này ln đi kèm với nhau, giúp việc thiết kế web của designer dễ dàng hơn rất nhiều.

Với Bootstrap CSS, bạn sẽ không cần mất nhiều thời gian hay chỉnh sửa thủ cơng cho các thiết kế nhỏ. Thay vào đó, chỉ với vài thao tác đơn giản, bạn đã có thể tạo ra giao diện thống nhất trên nhiều trang web khác nhau. Bootstrap không giới hạn vấn đề này. Đặc biệt, CSS hiện đã cho phép bạn định dạng cả bảng và bố cục hình. Cùng với đó là việc định dạng kiểu văn bản. Vì thế, bạn có thể sẽ mất thời gian để chờ đợi CSS ghi nhớ và khai báo các bộ chọnBootstrap.JS

Nếu Bootstrap CSS có nhiệm vụ quản lý bố cục Website thì Bootstrap JS lại có trách nhiệm chứa file JavaScript. Đây là thành phần phụ trách việc tương tác của website và là phần có vai trị quan trọng hàng đầu, là cốt lõi của công cụ Bootstrap.

Để giúp người dùng nhanh chóng thiết kế thành cơng và tiết kiệm thời gian hơn, các nhà sáng lập đã sử dụng jQuery. Đây là một mã nguồn mở, bao gồm thư viện JavaScript, giúp người dùng có thể dễ dàng thêm các chức năng vào website mình đang thiết kế. Cụ thể, sử dụng jQuery sẽ giúp người dùng:

Loại trừ dữ liệu từ các vị trí được cài đặt.Tạo ra các tiện ích thơng qua Plugin JavaScript. Tạo hình động thơng qua các thuộc tính CSS.

Giúp người giúp có thể thêm các tính năng động vào website.

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

Glyphicons là một bộ biểu tượng vector được tích hợp sẵn trong Bootstrap để sử dụng làmbiểu tượng hoặc hình ảnh nhỏ cho các thành phần như nút hoặc thanh điều hướng. Cungcấp các biểu tượng nhỏ và dễ nhận biết. Tạo điểm nhấn và tăng tính thẩm mỹ của giao diệnngười dùng.

4.4. Ưu nhược điểm

-Không linh hoạt tuyệt đối: Đôi khi việc tùy chỉnh Bootstrap để đạt được một thiết kế độcđáo và phức tạp có thể gặp khó khăn.

-Cần kiến thức về HTML/CSS/JS: Mặc dù Bootstrap giúp đỡ rất nhiều, nhưng vẫn cần mộtsố kiến thức cơ bản về HTML, CSS, và JavaScript để sử dụng hiệu quả.

-Tính tương thích ngược: Có thể có một số vấn đề về tương thích ngược khi sử dụngBootstrap với các phiên bản trình duyệt cũ hơn.

-File size: Để sử dụng Bootstrap, bạn cần tải các file CSS và JS, điều này có thể làm tăng thờigian tải của trang web, đặc biệt là trên kết nối chậm

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

5. Khái quát MYSQL5.1. Khái niệm

MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt độngtheo mơ hình client-server. Với RDBMS là viết tắt của Relational Database ManagementSystem. MySQL được tích hợp apache, PHP. MySQL quản lý dữ liệu thông qua các cơ sởdữ liệu. Mỗi cơ sở dữ liệu có thể có nhiều bảng quan hệ chứa dữ liệu. MySQL cũng có cùngmột cách truy xuất và mã lệnh tương tự với ngơn ngữ SQL.

5.2. Lịch sử

MySQL lịch sử hình thành được tóm gọn sau

MySQL được Cơng ty Thuy Điển MySQL AB phát triển MySQL vào năm 1994. Phiênbản đầu tiên của MySQL phát hành năm 1995

Công ty Sun Microsystems mua lại MySQL AB trong năm 2008

Năm 2010 tập đoàn Oracle thâu tóm Sun Microsystems. Ngay lúc đó, đội ngũ phát triểncủa MySQL tách MySQL ra thành 1 nhánh riêng gọi là MariaDB. Oracle tiếp tục phát triển MySQL lên phiên bản 5.5.

2013 MySQL phát hành phiên bản 5.62015 MySQL phát hành phiên bản 5.7MySQL đang được phát triển lên phiên bản 8.0

MySQL hiện nay có 2 phiên bản miễn phí (MySQL Community Server) và có phí(Enterprise Server)

6. Khái qt JAVASCRIPT6.1. Khái niệm

JavaScript là một ngơn ngữ lập trình thơng dịch (interpreted) và đa mục đích purpose). Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động hơn. Chúng cũng đóng vai trị tương tự như một phần của website, cho phép Client-side Script (mã nguồn) từ người dùng tương tự máy chủ (Nodejs) để tạo ra những website động. Là một trong những ngơn ngữ lập trình phổ biến nhất trên thế giới

(multi-6.2. Lịch sử

Brendan Eich chính là người đã phát triển Javascript tại Netscape với tiền thân là Mocha. Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới đổi thành JavaScript.Năm 1998,JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành và đến năm 1999 thì ECMAScript 3 được ra mắt. Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng, đồng thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với lậptrình viên

6.3. Cách thức hoạt động

JavaScript sẽ được nhúng trực tiếp vào một website hoặc chúng được tham chiếu qua file .js hoặc .JavaScript.

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

Đây là một ngơn ngữ đến từ phía Client nên Script sẽ được download về máy client khi truy cập.

Tại đây, chúng sẽ được hệ thống xử ý. Không cần phải tải về máy server rồi chờ cho chúngxử lý xong mới phản hồi được kết quả đến client.

6.4. Ưu/Nhược điểma. Ưu điểm

JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau.

Được các chuyên gia đánh giá là một loại ngơn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngơn ngữ lập trình khác.

JS cịn có thể được gắn trên một số các element hoặc những events của các trang web. Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng.

Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những input thay vì cách kiểm tra thủ cơng thơng qua hoạt động truy xuất database.

Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop, Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tính năng).

Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau.

b. Nhược điểm:

JS Code Snippet (mã ngắn) khá lớn.

JS dễ bị các hacker và scammer khai thác hơn.

JS cũng khơng có khả năng đa luồng hoặc đa dạng xử lý.

Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng. Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự khơng đồng nhất.

Vì tính bảo mật và an tồn nên các Client-Side Javascript sẽ khơng cho phép đọc hoặc ghi các file.

JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối mạng<small>.</small>

7. Khái quát SVG7.1. Khái niệm

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

SVG là viết tắt của Scalable Vector Graphics. SVG là một ngơn ngữ dạng XML, dùng đểmiêu tả hình ảnh đồ họa vector 2 chiều, tĩnh và hoạt hình. Bạn cũng có thể hiểu là nó mộtđịnh dạng hình ảnh (tương tự như ảnh bitmap JPG, PNG…). Chỉ khác là chúng sử dụngcấu trúc XML để hiển thị hình ảnh dưới dạng vector còn ảnh bitmap sử dụng cấu trúc matrận pixel. Tập tin có đi .svg được mặc định hiểu là tập tin SVG.

7.2. Ưu/nhược điểm

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

a. Ưu điểm

Kích thước file nhỏ, dễ nén:Hình ảnh SVG, XML, chứa nhiều mảnh lặp đi lặp lại của vănbản, vì vậy chúng rất thích hợp cho các thuật tốn nén lossless dữ liệu. Khi một hình ảnhSVG đã được nén bằng thuật tốn tiêu chuẩn gzip, nó được gọi là một hình ảnh "svgz" vàsử dụng phần mở rộng tên tập tin .svgz tương ứng.

Hiển thị đẹp trên màn hình retina:SVGs giống với tất cả các đồ họa vector, có thể đượcthu nhỏ đến kích thước bất kỳ mà không mất đi sự rõ ràng (trừ rất nhỏ). Có thể làm ảnhđộng

Sử dụng thẻ SVG để nhúng các hình ảnh trên trang web cho phép chúng ta định dạng mộtcách dễ dàng thông qua CSS, giống như cách làm với thẻ HTML thơng thường. Ta có thểthay đổi thuộc tính đối tượng như màu nền, độ mờ đục, vị trí, chiều rộng,... Ngồi ra, tacũng có thể thêm các hiệu ứng hình ảnh động ấn tượng bằng cách sử dụng sự kết hợp củacác thư viện JS và CSS.

Hỗ trợ đầy đủ :Sau nhiều năm khơng tương thích trình duyệt, SVGs cuối cùng đã có thể.Chúng được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm IE9. Bạn thậm chí có thểsử dụng Fallbacks nếu bạn vẫn còn quan tâm đến IE8.

Thời gian tải tốt hơn:SVGs tuyệt vời cho thiết kế web, vì nó có độ phân giải vơ hạn vàkích thước file rất nhỏ. Nó có thể được nhúng trực tiếp vào một tài liệu HTML với thẻsvg, do trình duyệt khơng cần phải tải về đồ họa. Điều này có nghĩa rằng trang web củabạn sẽ được tải nhanh hơn!

Khả năng Hỗ Trợ Có Thể Khơng Đồng Nhất:Mặc dù SVG được hỗ trợ trên hầu hết cáctrình duyệt hiện đại, có thể có một số vấn đề tương thích trên các trình duyệt cũ hơn hoặcthiết bị không phổ biến.

Phức Tạp với Animation Phức Tạp:Trong khi SVG hỗ trợ animation, việc tạo ra cácanimation phức tạp có thể yêu cầu kiến thức sâu về CSS hoặc JavaScript..

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

Khó Điều Chỉnh Trên Giao Diện Người Dùng:So với các hình ảnh bitmap, việc điềuchỉnh các hình ảnh SVG trên giao diện người dùng có thể phức tạp hơn đối với ngườikhông chuyên.

III. Sản phẩm

1. Khảo sát yêu cầu1.1. Yêu Cầu Chức Năng:1.1.1. Hiển Thị Sản Phẩm:

Hiển thị danh sách các điện thoại di động với thông tin như hình ảnh, tên sản phẩm, giá cả, mơ tả ngắn, ...

Có thể sắp xếp và lọc sản phẩm theo giá, thương hiệu, loại, ...

Trang chi tiết sản phẩm cung cấp thông tin đầy đủ về sản phẩm bao gồm hình ảnh, mơ tả chitiết, thơng số kỹ thuật, đánh giá từ người dùng, ...

1.1.2. Tìm Kiếm Sản Phẩm:

Cho phép người dùng tìm kiếm sản phẩm theo từ khóa.

Kết quả tìm kiếm hiển thị các sản phẩm phù hợp với từ khóa tìm kiếm.1.1.3. Giỏ Hàng và Thanh Tốn:

Cho phép người dùng thêm sản phẩm vào giỏ hàng.Hiển thị thông tin giỏ hàng với tổng số lượng, tổng giá cả.Quản lý số lượng sản phẩm trong giỏ hàng.

1.1.4. Đăng Nhập và Đăng Ký:

Người dùng có thể đăng ký tài khoản mới để quản lý thông tin cá nhân lịch sử mua hàng, ...Đăng nhập bảo vệ thông tin cá nhân và giao dịch.

1.1.5. Quản Lý Tài Khoản Người Dùng:

Cho phép người dùng quản lý thông tin cá nhân, thay đổi mật khẩu, cập nhật địa chỉ, ...Xem lịch sử mua hàng

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

Quản lý sản phẩm (thêm, sửa, xóa sản phẩm).Quản lý danh mục sản phẩm.

Thống kê doanh số bán hàng, lượt truy cập, ...1.1.8. Quản Lý Tin Tức (Admin):

Thêm xóa tin tức Hiện thị tổng số tin 1.2. Yêu Cầu Giao Diện:

Giao diện thân thiện, trực quan và dễ sử dụng.

Thiết kế đẹp, chuyên nghiệp với màu sắc hài hịa, hình ảnh chất lượng.

Responsive Design: Trang web phải hiển thị tốt trên mọi thiết bị, từ máy tính đến điện thoại di động và máy tính bảng.

Menu dễ dàng, rõ ràng để người dùng dễ tìm kiếm và chuyển đến các trang cần thiết.1.3. Yêu Cầu Bảo Mật:

Mã hóa mật khẩu của người dùng trước khi lưu vào cơ sở dữ liệu.

Xác thực người dùng trước khi thực hiện các thao tác quan trọng như đặt hàng, thay đổi thông tin cá nhân, ...

Sử dụng HTTPS để bảo vệ thông tin truyền tải.1.4. Yêu Cầu Kỹ Thuật:

Sử dụng ngơn ngữ lập trình như PHP, Python, Ruby, ...

Sử dụng framework phổ biến như Laravel (PHP), Django (Python), Ruby on Rails (Ruby), ...

Sử dụng cơ sở dữ liệu MySQL hoặc PostgreSQL.

Sử dụng HTML/CSS/JavaScript cho phần giao diện người dùng.Tích hợp các cơng cụ và dịch vụ như cổng thanh toán trực tuyến2. Chức năng hệ thống

2.1. Tác nhân hệ thống

2.1.1. Trình duyệt Web (Web Browsers):

Người dùng sẽ truy cập vào trang web của bạn thơng qua các trình duyệt web như Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera, và các trình duyệt khác.

Đảm bảo trang web hoạt động một cách mượt mà và đúng đắn trên các trình duyệt phổ biến là một phần quan trọng của quá trình phát triển.

2.1.2. Thiết bị Di động (Mobile Devices):

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

Với trang web bán điện thoại, người dùng có thể truy cập thơng qua điện thoại di động hoặc máy tính bảng của họ.

Responsive design là yếu tố cần thiết để đảm bảo trang web hiển thị đúng trên mọi kích thước màn hình, từ điện thoại thơng minh đến máy tính bảng.

2.1.3. Hệ điều Hành (Operating Systems):

Hệ điều hành của thiết bị cũng ảnh hưởng đến trải nghiệm người dùng.

Đối với điện thoại di động, điều này bao gồm iOS cho iPhone và iPad, cũng như Android cho các điện thoại Android.

2.1.5. Kết nối Internet (Internet Connection):

Tốc độ kết nối Internet của người dùng cũng ảnh hưởng đến trải nghiệm mua sắm trên trang web.

Trang web cần được tối ưu hóa để tải nhanh và mượt mà, đặc biệt là khi người dùng truy cậptừ các kết nối mạng di động.

2.1.6. Các chức năng Tương tác (Interaction Capabilities):

Người dùng sẽ tương tác với trang web bằng cách sử dụng màn hình cảm ứng trên điện thoại, điều này cần được xem xét trong thiết kế giao diện.

Chức năng như tìm kiếm sản phẩm, thêm vào giỏ hàng, thanh tốn, xem thơng tin chi tiết sản phẩm, đăng ký tài khoản, và quản lý đơn hàng cũng cần được tích hợp một cách trơn tru và dễ dàng sử dụng trên điện thoại di động.

2.1.7. Thiết kế Responsive (Responsive Design):

Đây là một yếu tố quan trọng trong việc phát triển trang web, giúp đảm bảo trải nghiệm tốt nhất trên mọi loại thiết bị.

Thiết kế responsive đảm bảo rằng trang web có thể điều chỉnh kích thước và bố cục để phù hợp với mọi kích thước màn hình.

2.1.8. Chứng thực và Bảo mật (Authentication and Security):

Đảm bảo rằng quy trình đăng nhập, thanh tốn và giao dịch trên trang web của bạn là an toàn và bảo mật.

Sử dụng HTTPS để bảo vệ thông tin cá nhân của người dùng và tích hợp các phương thức thanh tốn an tồn.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

2.1.9. Tối ưu hóa Hiệu suất (Performance Optimization):

Tối ưu hóa trang web để tải nhanh và mượt mà trên điện thoại di động.

Giảm thiểu thời gian tải trang và tối ưu hóa ảnh để giảm lượng dữ liệu cần tải xuống.2.2. Biểu đồ chức năng (biểu đồ use case)

2.3. Đặc tả chức năng

<small>1. Quản lý sản phẩm</small>

Description Usecase bắt đầu khi người quản trị truy cập vào quản lý sản phẩm

Sản phẩmPrecondition _{Người quản trị đã có tài khoản trên hệ thống và đã}

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

C. Xóa sản phẩm

C1. Người quản trị chọn xóa sản phẩm

C2. Hệ thống hiển thị Bạn có chắc muốn xóa sản phẩmnày khơng?”

C3. Người quản trị chọn “đồng ý”C4. Hệ thống xóa danh mục khỏi hệ thốngD. Thêm sản phẩm

D1. Người quản trị chọn thêm sản phẩmD2. Hệ thống hiển thị trang thêm sản phẩmD3. Người quản trị nhập các thông tin sản phẩmD4. Hệ thống kiểm tra các thông tin đã nhậpD5. Hệ thống thêm mới sản phẩm.

Alternative flow B2.1 Hệ thống kiểm tra thông tin sản phẩm thấy không hợp lệ

B2.2 Hệ thống hiển thị “Vui lịng nhập lại thơng tin” B2.3 Người quản trị quay lại bước B3

C3.1 Người quản trị chọn “Hủy”C3.2 Hệ thống quay lại A1.

D4.1 Hệ thống kiểm tra thông tin sản phẩm đã nhập thấy không hợp lệ

D4.2 Hệ thống hiển thị “Vui lịng nhập lại thơng tin”D4.3 Người quản trị quay lại D3.

Error situations - Hệ thống bị lỗi trong lúc thao tác quản lý sản phẩm.System state on

the occurrence of an error.

- Actor không thực hiện được các thao tác quản lý sản phẩm.

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<small>2. Quản lý người dùng hệ thống</small>

Description Usecase bắt đầu khi người quản trị truy cập vào quản lý thành viên quản trị

UsersPrecondition _{Người quản trị đã có tài khoản trên hệ thống và đã}

B3. Hệ thống kiểm tra thông tin phân quyền

B4. Hệ thống cập nhật dữ liệu, và quay về trang liệt kê thành viên quản trị

C. Xóa thành viên quản trị

C1. Người quản trị chọn xóa thành viên quản trịC2. Hệ thống hiển thị Bạn có chắc muốn xóa?”C3. Người quản trị chọn “đồng ý”

C4. Hệ thống xóa thành viên quản trị khỏi hệ thốngAlternative flow B2.1 Hệ thống kiểm tra thông tin sản phẩm thấy không

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

of an error.

<small>3. Usecase Xem giỏ hàng</small>

Description Usecase bắt đầu khi khách hàng muốn kiểm tra giỏ hàng

kiểm tra giỏ hàngPrecondition _{Dữ liệu được cập nhật và sẵn sàng để hiển thị.}

Postcondition Khách hàng kiểm tra thông tin trong giỏ hàngStandard flow 1. Khách hàng truy cập vào giỏ hàng

2. Hệ thống hiển thị các sản phẩm trong giỏ hàng3. Khách hàng có thể thực hiện các thao tác sau:A. Cập nhật số lượng sản phẩm

A1. Khách hàng nhập vào số lượng sản phẩm muốn cập nhật, và nhấn cập nhật

A2. Hệ thống cập nhật số lượng sản phẩmB. Xóa sản phẩm

giỏ hàng, hiển thị giỏ hàng trống

2.2 Hệ thống kiểm tra thấy có sản phẩm, nhưng khách hàng chưa đăng nhập, hiển thị button “Vui lòng đăng nhập”

2.3 Hệ thống kiểm tra thấy khơng có sản phẩm, nhưng khách hàng đã đăng nhập, ẩn button “Tiến hành mua sản phẩm”, vì khơng có sản phẩm nên khơng được tiếnhành thanh toán.

Error situations - Hệ thống bị lỗi trong lúc cập nhật giỏ hàng.System state on

the occurrence of an error.

- Actor không cập nhật được giỏ hàng.

<small>4. Quản lý đơn hàng</small>

Description Usecase bắt đầu khi người quản trị truy cập vào quản lý đơn hàng

</div>