Đồ Án Môn Học Lập Trình Web Xây Dựng Ứng Dụng Web Bán Điện Thoại.pdf

Trong trường hợp này, trang web sử dụng kiểu dữ liệu PagedList để hiển thị danh sách sản phẩm, với mỗi trang chứa một phần của dữ liệu.. Phần hiển thị danh sách sản phâm: Đoạn mã sử dụng

LAP TRINH WEB

Tên đề tài: Xây dựng ứng dụng web bán điện thoại

Giảng viên hướng dẫn:SỬ NHẬT HẠ Sinh viên thực hiện: NGUYÊN KHÁNH HUY - CAO VIỆT ĐỨC MSSV: 2200007017 - 2200004323

Khoá: 2022 Ngành/ chuyên ngành: MẠNG MAY TINH VA TRUYEN THONG

Tp HCM, thang 01 nam 2024

LAP TRINH WEB

Tên đề tài: Xây dựng ứng dụng web bán điện thoại

Giảng viên hướng dẫn:SỬ NHẬT HẠ Sinh viên thực hiện: NGUYÊN KHÁNH HUY - CAO VIỆT ĐỨC MSSV: 2200007017 - 2200004323

Khoá: 2022 Ngành/ chuyên ngành: MẠNG MAY TINH VA TRUYEN THONG

Tp HCM, thang 01 nam 2024

LOI MO DAU

Ngày nay công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cả chiều rộng và chiều sâu Máy tính điện tử không còn là một thứ phương tiện quý hiểm mà đang ngày càng trở thành một công cụ làm việc và giải trí thông dụng của con người không chỉ ở công sở mà ngay cả trong gia đình Đứng trước vai trò của thông tin hoạt động cạnh tranh gay gắt, các tô chức và các doanh nghiệp đều tìm mọi

biện pháp để xây dựng và hoàn thiện hệ thống thông tin của mình nhằm tin học hóa các hoạt động tác vụ của đơn vỊ

Trong thời đại Công nghệ 4.0, với sự tiên tiễn của trí tuệ nhân tạo và dịch vụ

tư vấn thông minh, trang web cung cấp trải nghiệm mua sắm trực tuyến tối ưu, giúp người dùng dễ dàng tìm kiếm, so sánh và lựa chọn những sản phâm điện thoại phù hợp Không chỉ vậy, thông tin sản phẩm, đánh giá từ cộng đồng, và các bài viết chuyên sâu về công nghệ cũng được chia sẻ một cách chân thực, giúp người dùng hiểu rõ hơn về sản phẩm trước khi quyết định mua Trang web bán điện thoại HeavePhone là một ví dụ nỗi bật về cách công nghệ và thương mại trực tuyến đã thay đôi cách chung ta mua sam

Tat cả chúng ta đều cần một chiếc điện thoại di động đề giữ liên lạc, làm việc và giải trí Việc lựa chọn một chiếc điện thoại phủ hợp không chỉ đáp ứng nhu cầu cá

nhân mà còn phản ánh phong cách và sở thích của mỗi người Trên thị trường hiện nay, có rất nhiều sự lựa chọn với đa dạng về tính năng, mẫu mã và giá cả Việc tìm

kiếm và mua sắm điện thoại trở nên dễ đàng hơn bao giờ hết với sự hỗ trợ của các

trang web bán hàng trực tuyến uy tín Trang web bán điện thoại HeavePhone thê

hiện sự tương tác mạnh mẽ giữa công nghệ và thương mại Nó là một mình chứng rõ ràng cho việc thương mại điện tử không chỉ là xu hướng mà còn là một phan không thê thiếu của cuộc sống hiện đại Với sự hướng dẫn tận tình của thay: Sử Nhật Hạ em

đã hoàn thành cuốn báo cáo đồ án này Tuy đã cô găng hết sức tìm hiểu, phân tích

thiết kế và cài đặt hệ thống nhưng chắc chắn không tránh khỏi dược những thiếu sót

Em rất mong được sự thông cảm và góp ý của các quý thầy cô

các thầy cô để em học thêm được nhiều kinh nghiệm và sẽ hoàn thành tốt hơn trong

những bài báo cáo sau Sau cùng em xin kính chúc quý thầy cô đồi dào sức khỏe, niềm tin để tiếp tục thực hiện sử mệnh cao đẹp truyền đạt kiến thức cho thế hệ mai sau và luôn thành công tốt đẹp

trong công việc

Sinh viên thực hiện

Nguyễn Khánh Huy & Cao Việt Đức

BM-ChT-

PHIEU CHAM THI TIEU LUAN/DO AN

Nhóm sinh viên thực hiện : 02 sinh viên

dung 2.Cao Việt Đức Tham gia đóng góp: Làm Code website Đề tài tiêu luận/báo cáo của sinh viên : Xây dựng ứng dụng web bán điện thoại

Phân đánh giá của giảng viên (căn cứ trên thang rubrics của môn học):

Chuong 1.Téng quan 1.1 Mô tả tóm tắt về website

-_ HeavePhone là một trang web chuyên về những thiết bị điện tử phố biến là điện

thoại di động Điện thoại di động đã trở thành một phan không thể thiểu trong

cuộc sống hàng ngày của chúng ta Với sự phát triển của công nghệ, điện thoại

không chỉ đơn thuần là một phương tiện liên lạc mà còn trở thành một trợ thủ

đắc lực trong việc làm việc, giải trí và kết nôi với thê giới xung quanh

HeavePhone cam kết mang đên sự tiện lợi cho người dùng khi mua săm các sản

phâm chất lượng

- _ Xác định yêu câu, thu thập thông tin và các dữ liệu liên quan

Yêu cầu chức năng: Xác định thông tin người dùng, quản lý các sản phẩm, yêu cầu giỏ hàng và thanh toán

Yêu cầu phi chức năng: Bảo mật, hiệu xuất, tương thích, Nguồn thông tin và dữ liệu: Dữ liệu sản phẩm, thông tin người dùng, dữ liệu đơn hàng, dữ liệu tài khoản vào bảo mật,

1.2 Cơ sở lý thuyết

1.2.1 HTML, ® HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn ban,

ding dé tao ra các trang web ® - HTML bao gồm một tập hợp các thẻ dùng đề:

Định nghĩa câu trúc của trang web Định dạng nội dung của trang web Tạo các siêu liên kết đề liên kết đến những trang web khác Chèn âm thanh, hình ảnh, video, vào trang web CSS

CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phân tử HTML (Ví dụ: chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền,

hình nền, đường viên, ) dựa trên các cặp thuộc tính, giá trị thuộc tính Voi viéc su dung CSS, ta co thé dinh dang ra cac phan tử HTML thật đặc biệt

và chuyên nghiệp 1.2.3 Bootstrap (Bootstrap 5)

Bootstrap là một khung công tác mặt trước miễn phí dé phát triển web nhanh hơn và dễ dàng hơn

Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, biêu mau, nut, bảng, điều hướng, phương thức, băng chuyền hình ảnh và nhiều mẫu khác, cũng nhu cac plugin JavaScript tuy chon

Bootstrap cũng cung cấp cho bạn khả năng dễ dàng tạo ra các thiết kế đáp ứng Bootstrap 5 là phiên bản mới nhất của Bootstrap; với các thành phần mới, biểu

định kiểu nhanh hơn và phản ứng nhanh hơn Bootstrap 5 hỗ trợ các bản phát hành ôn định, mới nhất của tat cả các trình

duyệt và nền táng chính

1.2.4 C# Ngôn ngữ lập trình C# (C Sharp) là một ngôn ngữ lập trình đa mục đích được phát triển bởi Microsoft C# thường được sử dụng đề phát triển ứng dụng Windows, ứng dụng web, và các ứng dụng dựa trên NET Framework

1.2.5 SQL SQL (Structured Query Language) là một ngôn ngữ lập trình được sử dụng đề quản lý và tương tác với cơ sở dữ liệu quan hệ SQL được sử dụng đề truy vấn, cập nhật, và quản lý dữ liệu trong các hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) nhu Microsoft SQL Server, MySQL, Oracle, PostgreSQL va nhiéu hệ thống khác

1.2.6 LINQ

"Language Integrated Query" là một tính năng trong các ngôn ngữ lập trình

huéng d6i tong nhu C# (C Sharp) va VB.NET (Visual Basic NET) LINQ

cho phép thực hiện truy vấn dữ liệu và xử lý dữ liệu một cách dễ dàng và linh hoạt bằng cách sử dụng cú pháp tương tự SQL (Structured Query Language) trong mã nguồn

LINQ co thê thực hiện các hoạt động như lọc, sắp xếp, nhóm, và kết hợp dữ

liệu từ các nguồn khác nhau như danh sách, mảng, cơ sở dữ liệu, XML, va cac

nguồn dữ liệu khác LINQ có thể được sử dụng đề truy vấn dữ liệu từ các

nguồn này và trả về kết quả dưới dạng các tập hợp (có thể là danh sách, mảng, hoặc tập hợp LINQ khác)

1.2.7 Razor Helper MVC helper là các phương thức có thê được sử dụng trong các trang ASP.NET MVC để tạo HTML Chúng giúp giảm bớt việc viết mã HTML thủ công Helper có thê được sử dụng đề tạo các phần tử HTML phô biến, chăng hạn như hộp văn bản, hộp kiêm và danh sách thả xuống Chúng cũng có thê được sử

dụng để tạo các định đạng nội dung phức tạp hơn, chăng hạn như biểu đồ và

bảng 1.2.8 Jquery

JQuery là một thư viện JavaScript mã nguồn mở, được sử dụng để đơn giản hóa việc tương tác với HTML/CSS trên các trang web jQuery cung cap cac API

giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác AJAX đơn

giản hơn

1.2.9 Ajax

AJAX (Asynchronous JavaScript and XML), la mét tap hop các kỹ thuật phát trién web sir dung két hop HTML, CSS, JavaScript va XMLHttpRequest (XHR) để thực hiện các yêu cầu HTTP không đồng bộ từ một trang web Điều này có nghĩa là một trang web có thê giao tiếp với máy chủ mà không cần tải lại toàn bộ trang, điều này có thê tạo ra trải nghiệm phản hồi và thân thiện với người dùng hơn

Céng cu thuc hién dé an: Visual Studio 2022, Visual Studio Code 2022, PhotoShop, SQL Server Management Studio,

Chương 2.Phân tích và hoạch định

2.1 Các module chức năng: Trình bày sơ đồ chức năng ® _ Người dùng:

® Xem tìm, lọc sản phâm ¢ Thêm, xóa sản phần trong mục yêu thích, giỏ hàng ® Đăng nhập, đăng ký

e Thanh toán, xác nhận, theo dõi đơn hàng e Admin:

® - Quản lý sản phẩm, người dùng, đơn hàng ® Cấp quyên truy cập

® Thông báo © Sơ đồ chức năng:

| Danh mục sản | | Giỏ hàng | | Tìm kiếm | | Đăng nhập | | Trang cá |

Danh Xem giỏ Đăng ký Thông tin

2.2 Site map: Trinh bay so do lién két

Trang chỉ tiết sản phẩm

| Quản lý tài khoản | | Giới thiệu

Bảng 2: Sơ đồ liên kết 2.3 Database diagram: Mô tả lược đồ quan hệ 2.4 GUI: Mô tả giao diện các các nhóm trang web của website

Giao dién danh muc san pham: Trong trang danh muc san pham, danh sach san pham

Chuong 3.Trién khai trang web

3.1 Thiết kế giao diện: Trình bày các bước thiết kế, công cụ sử dụng và kết quả © Doi voi trang chi

1.`@{ ViewBag Tile = "Home Page”; }`: Day la cu phap cua Razor đề thiết lập một biến ViewBag có tén la Title véi giá trị là "Home Page" ViewBag là một cách để truyền dữ liệu từ Controller sang VIew trong ASP.NET MVC

2 `<div id="page-content" class="home-page"> </điv>`: Đoạn mã này tạo ra một phần tử `<div>` với id là "page-content" và class là "home-page" Đây là phần tử chứa toàn bộ nội dung của trang chủ

3 Phần Carousel: Đoạn mã nay tao ra m6t carousel str dung Bootstrap Carousel

Component Nó bao gồm một danh sách các hình ảnh được hiển thị dưới dạng carousel, cho phép người dùng chuyển đổi giữa các hình ảnh bằng cách nhấp vào các nút điều

khiển

4 Phần Banner Quảng cáo: Đoạn mã này tạo ra một phân hiền thị các banner quảng cáo Mỗi banner được hiện thị trong một cột (column) của lưới (grid) sử dụng Bootstrap Grid System

5 `@Html.Partial(” Top4New", HeavenPhone.Models.Bus.HeavenPhoneBus Top4New()) : Doan ma nay str dung Razor để gọi một phân tử gọi là "_Top4New" và truyền kết quả của hàm `Top4New(Q` từ 'HeavenPhoneBus'` vào phân tử này Điều này cho phép hiền thị nội dung động được tạo ra từ dữ liệu trả về từ hàm `Top4NÑewQ`

12

Tong thé, doan ma nay tao ra m6t trang web tryc quan voi carousel va banner quảng cáo, và sử dụng Razor để tạo nội dung động từ nội dung động từ dữ liệu

cep

div class="iten"

img src="~/all/images/banner3.png" alt="Third

div cLass="header-text hidden-xs"

div class="col-md-12 text-center"

d1v

a cLass="Left caro L* href="#carousel-exanpLe-generic" data-sLide="prev* span class="glyphicon glyphicon-chevron-Left"></span

Fy a class="right carousel-control" href="#carousel-example

span class="glyphicon glyphicon-chevron-right" span eneric" data-slide="next"

[DẤU

div class="row' div class="banner"

Ue «ủi ing sre="~/all/images/banner1.png" div

div cLass="col-sa-d" ng src="»/al ges/banner2ip.png" div

div class="col

ng src="=/aLLinages/banner3op.png"

dỉv cÌass="row" (NẠI ) ae

div class="col-sa-6" ing_src="=/aLL/inages/sub-bannerd jpg" v class="col-sa-6"

ges/sub-banner5 png"

13

“0 =<div id="page-content" cLass="hone-paga"

div class="container"

div class="row" div class="col-lg-12"

div id="carousel-example-generic" class="carousel slide" data-ride="carousel" 9L class="carousel-indicators hidden-xs"

1i data-target="#carouse\-exanpLe-generic" data-sLide-to="8" cLass="activa" 1i data-target="#carousel-exanpLe-generich"' data-sLide-te="1"></Li 1

div class="carousel-inner" style="width: 117@px; height: 35@px" dịv class="itam active"

ng src="«/aLUinages/main-banner1.Jpg" aLt="First sLide"

div class="header-text hidden-xs div class="col-md-12 text-center"

img src="~/all/images/banner3.png" alt="Third slide"

div class="headar-text hidden-xs

div class="col-md-12 text-center"

Doan code trén: 1 ‘@model PagedList.[PagedList<HeavenConnection.SanPham>: Day là cách khai báo kiểu dữ liệu mà trang web này sẽ sử dụng Trong trường hợp này, trang web sử dụng kiểu dữ liệu PagedList để hiển thị danh sách sản phẩm, với mỗi trang chứa một phần của dữ

liệu

2 `@using PagedLIst.Mvc;`: Đoạn mã này sử dụng directive `2using' dé import namespace cua thư viện PagedLIst.Mvec, cho phép sử dụng các hàm và lớp từ thư viện này

3 @{ ViewBag Title = "Index"; Layout = "~/Views/Shared/ LayoutChinh.cshtml”; }°: Đoạn mã này thiết lập giá trị cho biến ViewBag Tide và thiết lập layout cho trang web Trong trường hợp này, tiêu đề của trang được đặt là "Index" và layout được sử dụng là " LayoutChinh.cshtml"

4 Phần hiển thị danh sách sản phâm: Đoạn mã sử dụng vòng lặp `foreach` để duyệt qua từng sản phẩm trong danh sách và hiên thị chúng dưới dạng các phần tử HTML Mỗi sản phâm sẽ được hiền thị trong một cột của lưới, bao gồm hình ảnh, nút chức năng và thông tin sản phẩm

15

5 Phân trang: Đoạn mã sử dụng hàm `Html.PagedListPager` để tao ra các nút phân trang dựa trên dữ liệu được truyền vào Điều này cho phép người dùng dễ dàng điều hướng giữa các trang của danh sách sản phẩm

Tổng thê, đoạn mã này tạo ra một trang web hiền thị danh sách sản phẩm và cung cấp tính năng phân trang để người dùng có thể dễ dàng duyệt qua các trang của danh sách sản

Chỉ tiết từng phần của đoạn mã như sau:

1 `@@model HeavenConnection.SanPham': Đây là cách khai bao rằng trang web này sẽ sử

dụng đối tượng `SanPham` từ namespace ` HeavenConnection` để hiển thị dữ liệu

2.`@{ ViewBag TIle = "Details": Layout = "~/Views/Sharcd/_LayoutChinh.cshtml"; }`: Đoạn mã này thiết lập giá trị cho biến ViewBag Tide và thiết lập layout cho trang web

16

Trong trường hợp này, tiêu đề của trang được đặt là "Details" va layout duoc str dung 1a " LayoutChinh.cshtml"

3 Phan hién thị thông tin sản phẩm: Đoạn mã này sử dụng dữ liệu từ đối tượng 'SanPham` đề hiển thị thông tin chỉ tiết của san pham Cu thé:

- Dòng `<ul class=”breadcrumb">` tạo ra một dãy các liên kết dẫn đến trang chủ, danh

sách sản phẩm và tên sản phẩm

- Phần hiên thị hình ảnh sản phâm và các hình ảnh phụ kèm theo

- Hiển thị tên sản phẩm, giá và thông tin cấu hình - Nút thêm sản phâm vào giỏ hàng

17

Tổng thê, đoạn mã này tạo ra một trang web hiền thị chi tiết của một sản phẩm, sử dụng dữ liệu từ đối tượng `SanPham'` đề hiển thị thong tin sản phâm và cung cấp tính năng thêm sản phẩm vào giỏ hàng

Chỉ tiết từng phần của đoạn mã:

1 `@@model PagedLIist.IPagedList<HeavenConnection.SanPham>'`: Đây là cách khai báo kiểu dữ liệu mà trang web này sẽ sử dụng Trong trường hợp này, trang web sử dụng kiểu dữ liệu PagedList để hiển thị danh sách sản phẩm, với mỗi trang chứa một phần của dữ

liệu

2 `@using PagedLIst.Mvc;`: Đoạn mã này sử dụng directive `2using' dé import namespace cua thư viện PagedLIst.Mvec, cho phép sử dụng các hàm và lớp từ thư viện này

3 @{ ViewBag Title = "Index"; Layout = "~/Views/Shared/ LayoutChinh.cshtml”; }°: Đoạn mã này thiết lập giá trị cho biến ViewBag Tide và thiết lập layout cho trang web Trong trường hợp này, tiêu đề của trang được đặt là "Index" và layout được sử dụng là " LayoutChinh.cshtml"

4 Hién thị danh sách sản phâm: Đoạn mã sử dụng vòng lặp `foreach` đề duyệt qua từng sản phẩm trong danh sách và hiển thị chúng dưới dạng các phần tử HTML Mỗi sản phẩm

18

sé duoc hién thị trong một cột của lưới, bao gồm hình ảnh, nút chức năng và thông tin sản

phâm

5 Phân trang: Đoạn mã sử dụng hàm `Html.PagedListPager` để tạo ra các nút phân trang dựa trên dữ liệu được truyền vào Điều này cho phép người dùng dễ dàng điều hướng giữa các trang của danh sách sản phẩm

19

Tổng thê, đoạn mã này tạo ra một trang web hiền thị danh sách sản phẩm và cung cấp tính năng phân trang để người dùng có thể dễ dàng duyệt qua các trang của danh sách sản

phâm Dưới đây là giải thích chỉ tiết từng phần của đoạn mã:

1 `@@model HeavenConnection.SanPham': Đoạn mã này khai báo rằng trang web sẽ sử dụng một đồi tượng của lớp SanPham trong không gian tên HeavenComnection đề hiển thị thông tin chỉ tiết về sản phẩm

2.`@{ ViewBag TIle = "Details": Layout = "~/Views/Sharcd/_LayoutChinh.cshtml"; }`: Đoạn mã này thiết lập giá trị cho biến ViewBag Tide và thiết lập layout cho trang web Trong trường hợp này, tiêu đề của trang được đặt là "Details" và layout được sử dụng là " LayoutChinh.cshtml"

3 Phan hién thị thông tin sản phẩm: Đoạn mã sử dụng các thẻ HTML và Razor đề hiển

thị thông tin chỉ tiết về sản phâm như hình ảnh, tên sản phẩm, giá cả, thông số kỹ thuật và

nút thêm sản phẩm vào giỏ hàng

20

Tổng thê, đoạn mã này tạo ra một trang web hiền thị thông tin chỉ tiết về một sản phẩm cụ thê, bao gồm hình ảnh, thông tin sản phẩm và nút thêm vào giỏ hàng

Giao Diện Trang Chủ:

PHONE Giỏ Hàng

TRANG CHỦ SẲN PHẨM ANG PHÁNLOẠI

SIÊU ƯU ĐÃI CHO SIÊU PHẨM GALAXY S9

Các Loại Sản Phẩm Của Các Loại Hãng Khác Nhau:

item in ModeL)

wef="Qurl Action("Ir F { id-@item.MaLoaisanPham})" eee eT |

Đoạn mã trên là một phân của view trong ứng dụng ASP.NET MVC Nó sử dụng một mô

hình dỡ liệu là một danh sách các loại sản phâm

(IEnumerable<HeavenConnection.LoaiSanPham>) và hiển thị chúng dưới dạng các mục

trong một dropdown menu

Mỗi loại sản phâm sẽ được hiển thị dưới dạng một mục trong dropdown menu, và khi

người dùng nhấp vào một mục, họ sẽ được chuyên hướng đến trang "Index" của loại sản phâm tương ứng thông qua một đường dẫn động được tạo ra bằng Razor syntax

22