Báo Cáo Lập Trình Web Bán Hàng Điện Tử (C#)

Chương 1: Giới Thiệu Về Đề Tài.
Trong thời địa ngày nay, thời đại mà công nghệ thông tin càng ngày càng phát
triển bên cạnh với thị trường thương mại điện tử đang ngày càng phát triển, cạnh
tranh hơn, khốc liệt hơn thì việc có một có một website để quảng bá cơng ty hay
một cá nhân khơng cịn là điều xa xỉ nữa. Thông qua việc tiếp cận với website
khách hàng có thể lựa chọn những sản phẩm mà mình cần một cách nhanh chóng
và hiệu quả hơn.
Ngồi việc đáp ưng nhu cầu mua hàng của khách hàng, wibsite bán hàng còn
cho Shop quảng bá sản phẩm tốt đến người tiêu dùng thông qua việc đăng sản
phẩm mới mỗi ngày, hỗ trợ việc mua bán qua mạng một cách nhanh chóng, hiệu
quả, tiết kiệm chi phí, thời gian. Giúp khách hàng có thể lựa chọn cho mình sản
phẩm ưng ý mà không phải như trước đây phải đến tận nơi để xem và mua hàng,
thì bây giờ khách hàng có thể xem hoặc mua trực tiếp trên website giúp Shop có
lượng khách hàng tiếp cận ngày càng đơng và nhanh hơn với phương thức bán
hàng truyền thống.
Với lý do được nêu trên và được sự hướng dẫn, giúp đỡ tận tình của giảng viên
Thầy Võ Tấn Dũng đã tạo động lực rất nhiều để nhóm em chọn để tài: “Xây dụng
một website bán hàng điện tử cho Ahiho Shop” làm đề tài đồ án mơn học Lập
Trình Web


Chương 2: Các Công Nghệ Sử Dụng.
1 HTML.
a Html là gì?

HTML viết tắt của chữ HyperText Markup Language (ngơn ngữ đánh dấu siêu
văn bản), nó được dùng để tạo ra các tài liệu hiện thị được trên trình duyệt. HTML
gọi là ngơn ngữ nhưng nó khơng giống như các ngơn ngữ kịch bản, ngơn ngữ lập
trình (sử dụng các kịch bản để thi hành các tác vụ), ngôn ngữ đánh dấu (Markup)
HTML lại sử dụng các THẺ để xác định nội dung của trang.
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). Bạn có thể kiểm tra tình trạng
mới nhất của ngơn ngữ này bất kỳ lúc nào trên trang W3C’s website.
b Html hoạt động ra sao:

Khi bạn gõ ra 1 tên miền, trình duyệt mà bạn đang sử dụng (chẳng hạn như
Chrome) sẽ kết nối tới 1 máy chủ web, bằng cách dùng 1 địa chỉ IP, vốn được thấy
bằng cách phân giải tên miền đó (DNS). Máy chủ web chính là 1 máy tính được
kết nối tới internet và nhận các yêu cầu tới trang web từ trình duyệt của bạn. Máy
chủ sau đó sẽ gửi trả thơng tin về trình duyệt của bạn, là 1 tài liệu HTML, để hiển
thị trang web!
Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi
mở rộng là .html hoặc .htm. Khi một tập tin HTML được hình thành, việc xử lý nó
sẽ do trình duyệt web đảm nhận. Trình duyệt sẽ đóng vai trị đọc hiểu nội dung
HTML từ các thẻ bên trong và sẽ chuyển sang dạng văn bản đã được đánh dấu để
đọc, nghe hoặc hiểu (do các bot máy tính hiểu).
Bạn có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào (như
Google Chrome, Safari, hay Mozilla Firefox). Trình duyệt đọc các files HTML
này và xuất bản nội dung lên internet sao cho người đọc có thể xem được nó.
Thơng thường, trung bình một web chứa nhiều trang web HTML, ví dụ như:
trang home, trang product, trang blog…
c Ưu nhược điểm:

Ư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à hoà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…
•
•
•
•

Khuyết điểm:
Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động như update
hay realtime thời gian thực, bạn cần sử dụng JavaScript hoặc ngôn ngữ
backend bên thứ 3 như PHP.
• Một số trình duyệt chậm hỗ trợ tính năng mới.
•

2 CSS.
a Css là gì?

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…
b Bố cục của một đoạn Css:

Bố cục CSS thường chủ yếu dựa vào hình hộp và mỗi hộp đều chiếm những
khoảng trống trên trang của bạn với các thuộc tính như:
Padding: Gồm khơng gian xung quanh nội dung (ví dụ: xung quanh đoạn văn
bản).
• Border: Là đường liền nằm ngay bên ngồi phần đệm.
• Margin: Là khoảng cách xung quanh bên ngồi của phần tử.
•

c Tại sao sử dụng Css?
•

Giải quyết một vấn đề lớn
Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp
phần tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là
một quá trình rất dài tốn thời gian và cơng sức. Ví dụ: Nếu bạn đang phát triển một
trang web lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở
thành một q trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này.
Đó là một khuyến cáo của W3C.


Nhờ CSS mà source code của trang Web sẽ được tổ chức gọn gàng hơn, trật
tự hơn. Nội dung trang web sẽ được tách bạch hơn trong việc định dạng hiển thị.
Từ đó, q trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm
rối cho mã HTML.
•

Tiết kiệm rất nhiều thời gian
Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể
thay đổi tồn bộ trang web bằng cách thay đổi chỉ một tệp. Sử dụng CSS sẽ giúp

bạn không cần thực hiện lặp lại các mô tả cho từng thành phần. Từ đó, bạn có thể
tiết kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm soát
dễ dàng hơn các lỗi khơng đáng có.
CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web, từ
đó giảm tránh việc lặp lại các định dạng của các trang web giống nhau.

•

Cung cấp thêm các thuộc tính
CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện
của trang web. CSS giúp người dùng nhiều styles trên một trang web HTML nên
khả năng điều chỉnh trang của bạn trở nên vô hạn.

3 JAVASCRIPT
a Javascript là gì?

JavaScript là một ngơn ngữ lập trình của HTML và WEB. Nó là nhẹ và
được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành
của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các
trang web động. Nó là một ngơn ngữ chương trình thơng dịch với các khả năng
hướng đối tượng.
JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript,
nhưng cơng ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến như
là một hiện tượng của Java lúc bấy giờ. JavaScript xuất hiện lần đầu trong
Netscape 2.0 năm 1995 với tên LiveScript. Core đa năng của ngôn ngữ này đã
được nhúng vào Netscape, IE, và các trình duyệt khác.
b Các lợi thế của javascrip:

Sự tương tác Server ít hơn: Bạn có thể xác nhận đầu vào (input) người sử dụng
trước khi gửi trang tới Server. Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa

là Server của bạn tải ít hơn.
Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một trang
web tải lại để thấy xem nếu họ đã qn nhập cái gì đó.


Khả năng tương tác tăng lên: Bạn có thể tạo các giao diện mà phản ứng lại khi
người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thơng qua bàn phím.
Giao diện phong phú hơn: Bạn có thể sử dụng JavaScript để bao gồm những
mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider) để cung
cấp một Rich Interface (Giao diện giàu tính năng) tới site khách truy cập của bạn.
c Hạn chế của Javascript:

Chúng ta không thể đối xử JavaScript như là một ngôn ngữ chương trình
chính thức (full-fledged). Nó thiếu các tính năng quan trọng sau:
Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảo mật.
JavaScript khơng được sử dụng cho việc kết nối mạng các ứng dụng bởi vì
khơng có những hỗ trợ có sẵn.
JavaScript khơng có bất kỳ khả năng đa luồng hoặc đa xử lý.
4 C#.
a C# là gì?

C# (hay C sharp) là một ngơn ngữ lập trình đơn giản, được phát triển bởi đội
ngũ kỹ sư của Microsoft vào năm 2000. C# là ngôn ngữ lập trình hiện đại, hướng
đối tượng và được xây dựng trên nền tảng của hai ngôn ngữ mạnh nhất là C++ và
Java.
b Các đặc điểm chính của ngơn ngữ C#:

Hiện đại và dễ dàng
C# là một ngôn ngữ lập trình hướng đối tượng đơn giản, hiện đại. Mục đích
của C # là phát triển ngơn ngữ lập trình khơng chỉ dễ học mà còn hỗ trợ chức năng

hiện đại cho mọi loại hình phát triển phần mềm.
Nếu bạn nhìn vào lịch sử của các ngơn ngữ lập trình và các tính năng của
chúng, mỗi ngơn ngữ lập trình được thiết kế cho một mục đích cụ thể để giải quyết
một nhu cầu cụ thể tại thời điểm đó.
Tuy nhiên ngơn ngữ lập trình C# được thiết kế cho các doanh nghiệp để xây
dựng tất cả các loại phần mềm bằng cách sử dụng một ngơn ngữ lập trình duy
nhất.
Mã nguồn mở và nhanh
C# là ngơn ngữ lập trình mã nguồn mở .NET Foundation, được quản lý và điều
hành độc lập với Microsoft. Thông số kỹ thuật ngôn ngữ C#, trình biên dịch và các
cơng cụ liên quan là các dự án mã nguồn mở trên Github. Trong khi thiết kế các


tính năng của ngơn ngữ C# được dẫn dắt bởi Microsoft, cộng đồng mã nguồn mở
rất tích cực trong việc phát triển và cải tiến ngôn ngữ.
C # nhanh so với một số ngơn ngữ lập trình cấp cao khác. C# 8 có nhiều cải
tiến về hiệu suất.
Đa nền tảng
C # là ngơn ngữ lập trình đa nền tảng. Bạn có thể xây dựng các ứng dụng .NET
có thể được triển khai trên các nền tảng Windows, Linux và Mac.
An tồn và hiệu quả
C# là một ngơn ngữ an tồn. C# khơng cho phép chuyển đổi kiểu dữ liệu có thể
dẫn đến mất dữ liệu hoặc các vấn đề khác. C# cho phép các nhà phát triển viết
code an toàn. C# cũng tập trung vào việc viết code hiệu quả.
Đa năng
Chúng ta có thể sử dụng C# để xây dựng các ứng dụng phần mềm hiện đại
ngày nay. C# có thể được sử dụng để phát triển tất cả các loại ứng dụng bao gồm
ứng dụng Windows, các thành phần và thư viện, Service và API, ứng dụng Web,
ứng dụng di động, ứng dụng đám mây và video game.
Tiến hóa

C# 8.0 là phiên bản mới nhất của C#. Nếu bạn nhìn vào lịch sử ngơn ngữ C#,
C# đang phát triển nhanh hơn bất kỳ ngôn ngữ nào khác. Dưới sự quản lý của
Microsoft và sự hỗ trợ mạnh mẽ từ cộng đồng. C # ban đầu được thiết kế để viết
các ứng dụng máy khách Windows, nhưng ngày nay, C# có thể làm được khá
nhiều thứ như ứng dụng console, ứng dụng đám mây và phần mềm học máy hiện
đại.
5 BOOTSTRAP.
Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng
hơn dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables,
grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính năng và lợi ích
mang lại cho lập trình viên của Bootstrap là gì nhé!
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng
để tạo ra một mẫu webiste hồn chỉnh. Với các thuộc tính về giao diện được quy
định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo
nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework
này trong quá trình thiết kế giao diện website.


Chương 3: Thiết Kế CSDL.
1 Sơ đồ Erd.

Hình 1. Ảnh sơ đồ Erd.

2 Lược đồ quan hệ
- Admin (UserAdmin, UserName, Email, Password)
- ChiTietHinhAnh (MaHinhAnh, MaSP, MaChiTietHinhAnh)
- GiamGia (MaGiamGia, TenGiamGia)
- XuatXu (MaXuatXu, TenXuatXu)
- SanPham (MaSP, MaLoai, MaThuongHieu, MaXuatXu, MaGiamGia, TenSP,
HinhAnh, Gia, Mota, Soluong, Size, hot_product)

- Loai (MaLoai, TenLoai)
- ThuongHieu (MaThuongHieu, TenThuongHieu)
- ChiTietHoaDon (MaChiTietHoaDon, MaHD, MaSP, Gia, Soluong)
- HoaDon (MaHD, user_id, Tong, Thanhtoan, DiaChi, SDT, Hoten, NgayLap)
- AspNetUsers (id, email, username, name, phone)


3 Sơ đồ tổng quát.

Hình 2. Ảnh sơ đồ tổng quát.


4 Sơ đồ quản lý tổng quát

Hình 3. Ảnh sơ đồ quản lý tổng quát.

5 Sơ đồ quản lý đăng ký/đăng nhập.


Hình 4. Ảnh sơ đồ quản lý đăng ký đăng nhập.

6 Sơ đồ quản lý website.

Hình 5. Ảnh sơ đồ quản lý website.

7 Sơ đồ quản lý đặt hàng.

Hình 6. Ảnh sơ đồ quản lý đặt hàng.

Chương 4: Hướng dẫn sử dụng.
1 Trang Chủ.
Trang chủ là trang mặc định của website, là nơi hiển thị các hình ảnh minh họa
cho của sản phẩm của Ahiho shop kinh doanh. Khách hàng có thể ấn vào từng sản
phẩm để xem chi tiết của từng sản phẩm. Khách hàng muốn mua sản phẩm thì
phải đăng nhập. Khách hàng có thể đăng nhập hoặc tìm kiếm sản phẩm từ bất cứ
trang nào.


Hình 7. Ảnh Trang chủ.

2 Trang sản phẩm.
Trang sản phẩm là nơi hiển thị tất cả sản phẩm của shop theo danh mục, số
lượng trang sẽ tự sinh dựa theo số lượng sản phẩm mà shop hiện đang có. Khách
hàng có thể đăng nhập hoặc tìm kiếm sản phẩm với tên tương ứng (không cần
nhập đầy đủ tên sản phẩm). Hiển thị sản phẩm theo danh mục các loại sản phẩm.
Tại đây, khách hàng có thể thêm sản phẩm vào giỏ hàng hoặc xem chi tiết sản
phẩm bằng cách ấn vào sản phẩm mà khách hàng mong muốn. Khách hàng có thể
chọn xem nhiều sản phẩm một hàng hoặc xem một sản phẩm một hàng.


Hình 8. Ảnh trang sản phẩm.


3 Trang chi tiết sản phẩm.
Trang chi tiết sản phẩm là nơi hiển thị đầy đủ thông tin của sản phẩm như: hình
ảnh, giá, mơ tả, số lượng tồn kho, tên thương hiệu, … Khách hàng có thể đăng
nhập từ trang chi tiết sản phẩm và đặt mua. Khách hàng cũng có thể thêm sản
phẩm vào giỏ hàng tại trang này.

Hình 9. Ảnh chi tiết sản phẩm.


4 Trang đăng ký đăng nhập.
Trang đăng ký là nơi người dùng đăng ký thành viên của website, nếu tên đăng
nhập đã có sẽ báo lỗi đăng ký, nếu email không đúng định dạng sẽ báo lỗi cho
khách hàng và mật khẩu không trùng khớp cũng báo lỗi cho khách hàng. Khi
khách hàng đăng ký thành cơng thì trả về trang chủ và hiển thị tên khách hàng ở
đầu trang và khách hàng trở thành 1 thành viên của Shop, khách hàng có thể đăng
nhập đặt hàng. Nếu khách hàng đã đăng nhập thì sẽ hiện kèm theo nút đăng xuất.

Hình 10. Ảnh trang đăng ký đăng nhập.



5 Trang giỏ hàng.
Nếu người dùng chưa đăng nhập thì không được truy cập vào trang giỏ hàng,
giỏ hàng sẽ theo chân khách hàng tới bất cứ trang nào trong website, khách hàng
có thể thoải mái, tự do mua sắm. Nếu khách hàng khơng mua bất kỳ món hàng nào
thì sẽ không được đặt hàng. Trang giỏ hàng là nơi hiển thị số lượng món hàng mà
khách đã mua, tổng tiền của món hàng. Nếu khách hàng đổi ý khơng muốn mua
món hàng đó nữa thì khách hàng có thể xóa khỏi giỏ hàng.


Hình 11. Ảnh trang giỏ hàng.


6 Trang thanh toán.
Khi khách hàng ấn nút thanh toán, đơn hàng sẽ được gửi đến trang thanh toán
để khách hàng nhập các thông tin cần thiết như: họ, tên, số điện thoại, email,

địa chỉ. Khi ấn nút đặt hàng tại trang thanh tốn, chủ shop có thể kiểm tra
thơng tin của đơn hàng, kiểm tra địa chị đặt hàng tại trang admin. Sau khi đặt
hàng thành công sẽ trả về trang chủ và reset lại giỏ hàng. Thanh toán trực tuyến
có dùng thư viện paypal của ASP.NET MVC5 và tạo 2 tài khoản sandbox thử
nghiệm là người bán và người mua đã có sẵn tiền, thanh tốn xong thì vào tài
khoản người bán và người mua để xem thay đổi số dư.


Hình 12. Ảnh trang thanh tốn.


Hình 13. Ảnh thanh tốn Paypal


7 Trang tìm kiếm.
Khách hàng tìm kiếm sản phẩm tại bất cứ trang nào trên website thì sẽ được
chuyển đến trang tìm kiếm kèm theo thơng tin về sản phẩm mà khách hàng muốn
tìm kiếm. Khách hàng có thể tìm kiếm theo tên sản phẩm, có thể trả ra kết quả gần
đúng. Nếu lúc bạn search tìm kiếm sản phẩm khơng tìm thấy sẻ trả về danh sách
trống.


Hình 14. Ảnh trang tìm kiếm

8 Trang About Us.
Khách hàng muốn tìm hiểu thêm về cơng ty của chúng tơi cũng như muốn liên
hệ hợp tác thì có thể tham khảo tại trang Về Chúng Tôi.


Hình 15. Ảnh trang About Us

9 Trang Liên hệ.
Khách hàng có thể liên lạc với chúng tơi thơng qua địa chỉ trên google map
hoặc gọi trực tiếp cũng như gửi mail cho chúng tôi tại địa chỉ bên dưới. Chúng tơi
cam đoan sẽ ln ln lắng nghe ý kiến góp ý từ các bạn.


Hình 16. Ảnh trang Liên hệ