Báo cáo Đồ Án thiết kế web của hàng bán Điện thoại apple

Xin chân thành cảm ơn ban giám hiệu nhà trường, các thầy cô trong Khoa Công Nghệ Thông Tin và các phòng ban nhà trường đã tạo điều kiện tốt nhất cho em cũng như các bạn khác trong suốt

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

Báo Cáo Đồ Án Thiết Kế Web:

Của Hàng Bán Điện Thoại APPLE

Lời Cảm Ơn Hiện nay trên thế giới thương mại điện tử đang phát triển rất mạnh

mẽ Kỹ thuật số giúp chúng ta tiết kiệm đáng kể các chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch và đặc biệt là giúp tiết kiệm thời gian để con người đầu tư vào các hoạt động khác Hơn nữa thương mại điện tử còn giúp con người có thế tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thông tin theo nhu cầu

và sở thích của con người Giờ đây, con người có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn và các website bán hàng trên mạng sẽ giúp ta làm được điều đó Chính vì vậy trong đồ án này em chọn đề tài về: "Xây dựng Website bán hàng thông minh" Trong lời đầu tiên của báo cáo đồ án "Xây dựng Website bán điện thoại Apple" em muốn gửi những lời cám ơn và biết ơn chân thành nhất của mình tới tất cả những người đã hỗ trợ, giúp đỡ em về kiến thức và tinh thần trong quá trình thực hiện đồ án Trước hết em xin chân thành cám ơn Cô Nguyễn Thị Hoài Thu, Giảng Viên Khoa Công Nghệ Thông Tin, Trường Đại học Nguyễn Tất Thành, người đã trực tiếp hướng dẫn, nhận xét, giúp đỡ

em trong suốt quá trình thực hiện đồ án Xin chân thành cảm ơn ban giám hiệu nhà trường, các thầy cô trong Khoa Công Nghệ Thông Tin

và các phòng ban nhà trường đã tạo điều kiện tốt nhất cho em cũng như các bạn khác trong suốt thời gian học tập Cuối cùng em xin gửi lời cảm ơn đến gia đình, bạn bè, người thân đã giúp đỡ động viên em rất nhiều trong quá trình học tập và làm Đồ án Do thời gian thực hiện

có hạn kiến thức còn nhiều hạn chế nên Đồ án thực hiện chắc chắn không tránh khỏi những thiếu sót nhất định Em rất mong nhận được

ý kiến đóng góp của thầy cô giáo và các bạn để em có thêm kinh nghiệm và tiếp tục hoàn thiện đồ án của mình

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

Sinh viên thực hiện:

Nam Bùi Đức Nam

NHẬN XÉT CỦA GIẢNG VIÊN

Điểm Đồ Án : - Điểm 1:

- Điểm 2:

- Điểm tổng kết:

TPHCM, Ngày … tháng … năm 2024

Giảng viên 1 Giảng viên 2

Mục Lục Phần 1 Tổng quan

1 Giới Thiệu Tổng Quan Về Các Thành Phần

1.1 Lý Do Chọn Đề Tài

1.2 Mục Đích Phát Triển Đề Tài

2 Cơ Sở Lý Thuyết Về HTML, CSS, BOXTRAP và JAVASCRIPT

2.1 Khái Niệm Về HTML

2.2 Khái Niệm Về CSS

2.3 Khái Niệm Về Boxtrap

2.4 Khái Niệm Về JavaScript

Phần 2 Các biểu đồ phân nhánh của các thành phần 2.1 Bảng Phân Quyền Truy Cập

2.2 Bảng Phân Quyền Chức Năng

Phần 3 Tìm hiểu một số công nghệ xây dựng website 3.1 ASP.NET và MVC

3.1.1 ASP.NET

3.1.2 MVC

3.2 Hệ Cơ Sở Dữ Liệu SQL Server

3.3 Truy Vấn LinQ

3.3.1 Các Thành Phần Của LINQ

3.3.2 LINQ và ADO.NET

3.4 Bảng Danh Mục Sản Phẩm

Phần 4 Triển Khai Phát Triền Hệ Thống

1 Hệ thống danh mục

1.1 bảng danh mục sản phẩm

1.2 danh mục khách hàng

1.3 danh mục nhân viên

1.4 danh mục đại lý bán hàng

1.5 danh mục nhà sản xuất/ cung cấp

1.6 cơ sở dữ liệu

1.7 microsoft project

2 cơ sở dữ liệu

3 thực hiện các bước kiểm thử

4 microsoft

5 Hướng Dẫn Sự Dụng Website

5 Phần Thiết kế đoạn code html/css 5.1 Trang đầu

5.2 Trang đăng nhập apple

5.3 Tạo ID apple

5.4 Đặt lại mật khẩu apple

5.5 Trang bán hàng macbook

5.6 Trang bán hàng ipad

Phần 6: Giao diện hệ thống 6.1 Login

6.2 Trang Chủ

6.3 Chi Tiết Sản Phẩm

6.4 Giỏ Hàng

6.5 Tìm Kiếm

Kết Luận

Tài Liệu Tham Khảo

I TỔNG QUAN

1 Giới Thiệu

Organicfood:Chuyên buôn bán các thực phẩm sạch sẽ an toàn

Organicfood: là website thương mại điện tử với mô hình B2C Khách

hàng xem các sản phẩm được nhà cung cấp đăng lên trên trang web, chọn

một sản phẩm và đặt hàng

Organicfood: là một website chuyên kinh doanh về các mặt hàng thực

phẩm trực tuyến Website được chia thành các trang web gồm có:

a Trang chủ: Hiển thị các danh mục sản phẩm

b Đăng nhập : Cho phép người dùng đăng nhập

c Đăng kí :Cho phép người dùng đăng kí

d Shop: Hiển Thị Các Sản Phẩm

e Chi Tiết Sản Phẩm: Hiện thị thông tin chi tiết của sản phẩm

được chọn( đơn giá, mô tả, hình ảnh sản phẩm,… )

f Giỏ Hàng: Hiển thị các sản phẩm khách hàng chọn mua

g Thanh Toán: Hiển thị thông tin giỏ hàng và lấy thông tin cần

thiết cho khách khi tiến hành thanh toán

h Blog:Các bài viết hay về thực phẩm

i Liên hệ với chúng tôi:Khách hàng liên hệ với chúng tôi

j Thanh toán:Nơi người mua sẽ thanh toán đơn hàng

1.1 Lý do chọn đề tài:

Khi internet ra đời, không ai nghĩ rằng nó sẽ phát triển đến ngày hôm nay,

nó len lỏi đến mọi ngõ ngách trong cuộc sống, trở thành 1 phần không thể thiếu Chỉ cần ngồi nhà và cả thế giới trong tầm tay bạn Cũng như vậy, khi internet đã trở nên phố biến, việc mua bán qua mạng internet phát triển cũng phát triển theo đó Xong bên cạnh đó, việc nắm bắt tìm hiểu, phân tích nhu cầu tiêu dùng là một phần vô cùng quan trọng, nó giúp

người tiêu dùng dễ dàng chọn lựa sản phẩm phù hợp, giúp các nhà kinh doanh quyết định đón đầu xu thế của khách hàng Bên cạnh đó, việc phát triển website đi kèm những tính năng nâng cao giúp tối ưu hóa việc trải nghiệm website của người dùng cũng là cách giúp website phát triển 1 cách bền vững và có hiệu quả

1.2 mục đích phát triển đề tài:

tài được phát triển nhằm mục đích thương mại điện tử, quản lý việc mua bán thông qua mạng internet, nâng cao trải nghiệm sử dụng website của người dùng qua đó đưa thương hiệu đến rông rãi với người dùng hơn

▪ + Đị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

b 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

▪ Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp

c Bootstrap (Bootstrap 3 và Bootstrap 4):

▪ Bootstrap là một khung công tác mặt trước miễn phí để 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 mẫu, nút, 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 như các plugin JavaScript tùy chọn

▪ 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 4 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 4 hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính Tuy nhiên, Internet Explorer 9 trở xuống không được hỗ trợ

d JavaScript

▪ JavaScript là một ngôn ngữ kịch bản (scripting language) được dùng để tạo các script

ở máy client (client-side script) và má server (server-side script) Các script ở máy client được thực thi tại trình duyệt, các script ở máy server được thực hiện trên server Chương này sẽ giới thiệu cho chúng ta về ngôn ngữ Javascript, và cách chèn một script vào trong tài liệu HTML

▪ HTML lúc đầu được phát triển như là một định dạng của tài liệu có thể chuyển dữ liệu

trên Internet Tuy nhiên, không lâu sau đó, trọng tâm của HTML nặng tính hàn lâm và khoa học dần chuyển hướng sang người dùng thường nhật vì ngày nay người dùng xem Internet như là một nguồn thông tin và giải trí Các trang Web ngày càng mang tính sáng tạo và đẹp mắt hơn nhằm thu hút nhiều người dùng hơn Nhưng thực chất kiểu dáng và nội dung bên trong vẫn không thay đổi Và người dùng hầu như không thể điều khiển trên trang Web mỗi khi nó được hiển thị

▪ Javascript được phát triển như là một giải pháp cho vấn đề nêu trên Javascript là một ngôn ngữ kịch bản được Sun Microsystems và Netscape phát triển Nó được dùng để tạo các trang Web động và tương tác trên Internet Đối với những người phát triển HTML, Javascript rất hữu ích trong việc xây dựng các hệ thống HTML có thể tương tác với người dùng

Công cụ thực hiện đồ án: Edit Plus, Photoshop, …

Phần 2 Các biểu đồ phân nhánh của các thành phần

1 Bảng phân quyền truy cập:

3.1 ASP.NET và MVC

- ASP.NET Là gì ? nền tảng ứng dụng web (web application framework) được phát triển

và cung cấp bởi Microsoft, cho phép những người lập trình tạo ra những trang web động, những ứng dụng web và những dịch vụ web

kỹ thuật thiết kế giao diện cho phần mềm Ba từ viết tắt của MVC là 3 thành phần sử dụng chính ở đây

3.2 Hệ cơ sở SQL

SQL là một công cụ quản lý dữ liệu được sử dụng phố biển ở nhiều lĩnh vực Đầu tiên SQL được sử dụng trong các ngôn ngữ quản lý CSDL và chạy trên máy đơn

lẻ Do sự phát triển nhanh chóng của nhu cầu xây dựng những CSDL lớn theo

mô hình khách/chủ (Client/Server), nhiều phần mềm sử dụng ngôn ngữ SQL đã

ra đời mà điển hình là MS SQL Server, Oracle, Sybase Trong mô hình khách/chủ, toàn bộ CSDL được tập trung lưu trữ trên máy chủ (Server), mọi thao tác xử lý dữ liệu được thực hiện trên máy chủ bằng các lệnh SQL Máy trạm (Client) chỉ dùng để cập nhật dữ liệu cho máy chủ hoặc lấy thông tin từ máy chủ Trên lĩnh vực đang phát triển hiện nay là Internet, ngôn ngữ SQL lại càng đóng vai trò quan trọng hơn Nó được sử dụng để nhanh chóng tạo ra các trang Web động (Dynamic Web Page) Trang Web động thường có nội dung được lấy ra từ CSDL SQL có thể được sử dụng như một chất keo kết dính giữa CSDL và trang Web Khi người dùng yêu cầu, SQL sẽ thực hiện việc truy cập thông tin trong CSDL trên máy chủ và hiển thị kết quả trên trang Web Và SQL cũng là công cụ

để cập nhật thông tin cho CSDL đó

3.3 Truy Vấn

LING là gì ? Để giảm gánh nặng thao tác trên nhiều ngôn ngữ khác nhau và cải thiện năng suất lập trình, Microsoft đã phát triển giải pháp tích hợp dữ liệu cho NET Framework có tên gọi là LINQ (Language Integrated Query), đây là thư viện

mở rộng cho các ngôn ngữ lập trình C# và Visual Basic.NET (có thể mở rộng cho các ngôn ngữ khác) cung cấp khả năng truy vấn trực tiếp dữ liệu Object, cơ sở

dữ liệu và XML Điểm mạnh của LINQ là "viết truy vấn cho rất nhiều các đối tượng

dữ liệu" Từ cơ sở dữ liệu, XML, Data Object thậm chí là viết truy vấn cho một biến mảng đã tạo ra trước đó Vì thế ta có các khái niệm như là LinQ to SQL, LinQ to XML,

3.3.1 Các thành phần của LINQ

- LINQ to Objects:

"LINQ to Objects" ở đây có nghĩa là nói đến cách sử dụn LINQ đối với các đối tượng Collection mà đã được thực thi giao diện IEnumerable hoặc IEnumerable<T> tức những collection có thể "liệt kê" ra được Đây là trường hợp

sử dụng đơn giản nhất của LINQ khi làm việc với dữ liệu

mô hình dữ liệu của bạn

- LINQ to XML:

Sử dụng LINQ với mục đích truy vấn file XML và truy vấn tiện lợi hơn nhiều so với việc dùng XmlDocument, Xpath và Xquery như trước kia

- LINQ to Datasets:

DataSet trong ADO.NET là một bước phát triển lớn trong việc phát triển ứng dụng

cơ sở dữ liệu đa hệ Khi lấy và chỉnh sửa dữ liệu, duy trì liên tục kết nối tới Data Source trong khi chờ user yêu cầu thì rõ ràng là tốn tài nguyên máy rất nhiều DataSet giúp ích ở đây rất lớn Vì DataSet cho phép lưu trữ dữ liệu và chỉnh sửa

tại "local cache', hay gọi là offline mode Có thể xem xét và xử lý thông tin trong khi ngắt kết nối Sau khi chỉnh sửa và xem xong thì tạo một kết nối và update dữ liệu từ local vào Data Source Dữ liệu trong DataSet được lưu trữ dưới dạng một Collection các Tables và bạn cần phải xử lý thông qua các lớp DataTable (DataRow và DataColumn)

Kiến trúc của một dataset 3.3.2 LINQ và ADO.NET

Nhiều người vẫn hay thắc mắc về mối quan hệ giữa LINQ vs ADO.NET, liệu chúng có đối lập nhau hay hỗ trợ lẫn nhau ? LINQ là tập mở rộng cho phép viết các câu truy vấn ngay trong các ngôn ngữ lập trình Nó cho phép bạn làm việc với các kiểu tập hợp dữ liệu, như XML, collection, array, và cả CSDL ADO.NET là công nghệ cho phép các ứng dụng có thể kết nối và làm việc với các loại CSDL khác nhau (truy vấn, cập nhật, thêm, xóa, gọi thủ tục ) Bản thân LINQ không phải là một công nghệ được tạo ra đề thay thế ADO.NET, bạn có thể làm việc với LINQ mà không cần đến cơ sở dữ liệu Tuy nhiên,

LINQ to SQL, là một phần mở rộng của LINQ, cho phép bạn có thể làm việc được với CSDL SQL Server, trong trường hợp này thì khi viết bạn có thể bỏ qua các câu lệnhADO.NET mà chỉ quan tâm tới cú pháp mà LINQ cung cấp 3.4 Bảng Danh Mục Sản Phẩm :

luong

Nơi Sinh Sống Số Điện Thoại Nhóm khách

hàng

Mã sản phẩm khách hàng mua

Mã thẻ thành viên

Thân Thiết MAC4552

Thân Thiết IP17882222

VIP M.PHUC Hà Mỹ

Phúc

20/10/20

05

Ninh Thuận 0862891234

IPAD231

42222

789

MAC2319

2222 H.HAU Quảng

Thân Thiết IP10082222

1 Thế Giới Di ĐỘNG Điểm bán hàng 128 Trần Quang Khải,

P.Tân Định, Q.1, TP.Hồ Chí Minh

2, Quận 6, TP Hồ Chí Minh, Việt Nam

Oanh, Phường 17, Gò Vấp, Hồ Chí Minh

Phường 10, Gò Vấp, Hồ Chí Minh

Danh mục nhà sản xuất/ cung cấp

STT ĐỐI TÁC NHÀ MÁY SẢN

XUẤT ĐỊA CHỈ PHẦN TRĂM CÔNG TY TẠO RA SẢN PHẨM

1 Foster Electric Bình Dương và Đà Nẵng 30%

2 Hon Hai Precision

(Foxconn)

Lô B7 Xuân Phương Garden, Đường Trịnh Văn Bô, Phường Phương Canh, Quận Nam Từ Liêm, Hà Nội

45%

3 LG Display 208 Đ Nguyễn Trãi,

Phường Phạm Ngũ Lão, Quận 1, Hồ Chí Minh

20%

4 LG Innotek Lô I, 4, Khu công nghiệp

Tràng Duệ, thuộc khu kinh tế Đình Vũ, Xã Hồng Phong, Huyện An

Dương, Hải Phòng

25%

5 Luxshare Precision LÔ E, KHU CÔNG

NGHIỆP QUANG CHÂU,

XÃ QUANG CHÂU, HUYỆN VIỆT YÊN, TỈNH BẮC GIANG, VIỆT NAM

33%

Thạnh, Tân Phú, Hồ Chí Minh

32%

7 Goertek Lô N-1 Khu công nghiệp

Quế Võ (Khu mở rộng), Phường Nam Sơn, Thành phố Bắc Ninh, Tỉnh Bắc Ninh, Việt Nam

20%

2 Cơ sở dự liệu

3 Thực hiện các bước kiểm thử

4 MICROSOFT PROJECT:

<metaname="viewport"content="width=device-width, initial-scale=1.0"/>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

<title>Apple Navbar & iPhone 15 Pro</title>

<style>

body {

margin: 0;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,

"Helvetica Neue", Arial, sans-serif;

background: url("store-card-40-iphone-15-pro-202309.jpeg") no-repeat

centercenter/cover;

}

</style>

</head>

<body>

<divclass="navbar">

<ahref="#"class="logo"><iclass="fab fa-apple"></i></a>

<ahref="democuastore.html">Store</a>

<ahref="mactrongmacdemo2.html">Mac</a>

<ahref="demoipad.html">iPad</a>

<ahref="demoiphone.html">iPhone</a>

<ahref="demowatch.html">Watch</a>

<ahref="demovision.html">Vision</a>

<ahref="demoairpod.html">AirPods</a>

<ahref="demotvvanha.html">TV & Home</a>

<ahref="demoenter.html">Entertainment</a>

<ahref="demoacces.html">Accessories</a>

<ahref="demosupport.html">Support</a>

<ahref="thanhtimkiem.html"class="search"

><iclass="fas fa-search"></i

></a>

<ahref="trangdangnhapapple.html"class="cart"

><iclass="fas fa-shopping-bag"></i

<h1>Cửa Hàng Cách tốt nhất để mua sản phẩm bạn thích.</h1>

</div>

<divclass="products">

<divclass="product-item">

<imgsrc= "thư mụ c không có tiêu đề/machtml.png"alt="Mac">

<div>Mac</div>

</div>

<divclass="product-item">

<imgsrc="thư mụ c không có tiêu đề/iphtml.png"alt="iPhone">

<div>iPhone</div>

</div>

<divclass="product-item">

<imgsrc="thư mụ c không có tiêu đề/ipadhtml.png"alt="iPad">

<div>iPad</div>

</div>

<divclass="product-item">

<imgsrc="thư mụ c không có tiêu đề/applewhtml.png"alt="Apple Watch">

<div>Apple Watch</div>

</div>

<divclass="product-item">

<imgsrc="thư mụ c không có tiêu đề/aiirpodhtml.png"alt="AirPods">

<div>AirPods</div>

</div>

<divclass="product-item">

<imgsrc="thư mụ c không có tiêu đề/airtaghtml.png"alt="AirTag">

<div>AirTag</div>

</div>

<divclass="product-item">

<imgsrc="thư mụ c không có tiêu đề/apple4khtml.png"alt="Apple TV 4K">

<div>Apple TV 4K</div>

</div>

<divclass="product-item">

<imgsrc="thư mụ c không có tiêu đề/phukienhtml.png"alt="Phụ Kiện">

<div>Phụ Kiện</div>

</div>

</div>

</body>

<divclass="main">

<divclass="section-title">Thế hệ mới nhất Xem ngay có gì mới.</div>

<divclass="cards">

<divclass="card">

<imgsrc="thư mụ c không có tiêu đề/ip15prohtml.jpeg"alt="iPhone 15 Pro">

<divclass="card-title">IPHONE 15 PRO</div>

<divclass="card-subtitle">Titan</div>

<divclass="card-text">Từ 28.999.000đ hoặc 1.181.000đ/tháng trong 24 tháng*</div>

</div>

</div>

<divclass="card">

<imgsrc="thư mụ c không có tiêu đề/daihoc.jpeg"alt="Mac iPad Offer">

<divclass="card-content">

<divclass="card-title">ƯU ĐÃI TRONG THỜI GIAN CÓ HẠN</div>

<divclass="card-text">

Tiết kiệm khi mua Mac hoặc iPad để học đại học

<br>Đồng thời nhận thêm AirPods khi mua Mac, Apple Pencil khi mua iPad, giảm 20% AppleCare+ và hơn thế nữa

</div>

</div>

</div>

<divclass="card">

<imgsrc= "thư mụ c không có tiêu đề/ipadpromucmoi.jpeg"alt="iPad Pro">

<divclass="card-content">

<divclass="card-title">IPAD PRO</div>

<divclass="card-subtitle">Mỏng xuất chúng.</div>

<divclass="card-text">Từ 28.999.000đ hoặc 1.181.000đ/tháng trong 24 tháng*</div>

</div>

</div>

<divclass="card">

<imgsrc= "thư mụ c không có tiêu đề/mbair24thang.jpeg"alt="iPad Pro">

<divclass="card-content">

<divclass="card-title">IPAD PRO</div>

<divclass="card-subtitle">Mỏng xuất chúng.</div>

<divclass="card-text">Từ 28.999.000đ hoặc 1.181.000đ/tháng trong 24 tháng*</div>

</div>

</div>

<divclass="card">

<imgsrc= "thư mụ c không có tiêu đề/ipadairmoime24thang.png"alt="iPad Pro">

<divclass="card-content">

<divclass="card-title">IPAD PRO</div>

<divclass="card-subtitle">Mỏng xuất chúng.</div>

<divclass="card-text">Từ 28.999.000đ hoặc 1.181.000đ/tháng trong 24 tháng*</div>

</div>

</div>

<divclass="card">

<imgsrc= "thư mụ c không có tiêu đề/applepencilpro.jpeg"alt="iPad Pro">