LẬP TRÌNH WEB BÁO CÁO ĐỒ ÁN MÔN HỌC

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP. HỒ CHÍ MINH

ĐỒ ÁN MƠN HỌC LẬP TRÌNH WEB

WEB QUẢN LÍ BÁN HÀNG
“MỸ PHẨM”

Ngành

: CƠNG NGHỆ THƠNG TIN

Chun ngành : CÔNG NGHỆ PHẦN MỀM

Sinh viên thực hiện

:
MSSV:

Lớp: 1

Giảng viên hướng dẫn :

TP. Hồ Chí Minh, Năm 2018


ĐỀ TÀI WEB BÁN MỸ PHẨM

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP. HCM

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

WEB QUẢN LÍ BÁN HÀNG
“MỸ PHẨM”

Ngành

: CƠNG NGHỆ THÔNG TIN

Chuyên ngành : CÔNG NGHỆ PHẦN MỀM

Sinh viên thực hiện

:
MSSV:

Lớp:

Giảng viên hướng dẫn :

40

TP. Hồ Chí Minh,Năm 2018

2


ĐỀ TÀI WEB BÁN MỸ PHẨM

Mục lục

LỜI NÓI ĐẦU
Chương 1: TỔNG QUAN ĐỀ TÀI-----------------------------------------------------------6
1. Giới thiệu đề tài và mô tả đề tài-----------------------------------------------------------6
-

1.1. Giới thiệu đề tài-------------------------------------------------------------------------- 6

-

1.2. Mô tả đề tài------------------------------------------------------------------------------- 6

2. Khảo sát ứng dụng liên quan---------------------------------------------------------------7
3. Kết quả mong muốn đạt được-------------------------------------------------------------- 8
-

3.1. Đối tượng và mục tiêu nghiên cứu-----------------------------------------------------8

-

3.1.1. Đối tượng nghiên cứu---------------------------------------------------------------8

-

3.1.2. Mục tiêu nghiên cứu----------------------------------------------------------------8

-

3.1.3. Mục tiệu đề tài----------------------------------------------------------------------- 8

Chương 2: CƠ SỞ LÝ THUYẾT-------------------------------------------------------------9

1. Giới thiệu về ngơn ngữ ASP.NET mơ hình MVC 5-------------------------------------9
-

1.1. Sơ lược về ASP.NET-------------------------------------------------------------------- 9

-

1.2. Lịch sử phất triển của ASP.NET-------------------------------------------------------9

-

1.3. Kiến trúc của MVC 5------------------------------------------------------------------ 10

-

1.4. Sự khác biệt giữa ASP.NET Wedform và ASO.NET MVC-----------------------12

-

1.5. Ưu điểm và nhược điểm---------------------------------------------------------------13

2. Các công nghệ sử dụng--------------------------------------------------------------------- 14
-

2.1. Ngôn ngữ HTML 5--------------------------------------------------------------------- 14

-

2.2. Ngôn ngữ CSS 3------------------------------------------------------------------------ 16

-

2.3. Thư viện JQuery------------------------------------------------------------------------ 17

-

2.4. Giới thiệu về Ajax---------------------------------------------------------------------- 18

-

2.5. Giới thiệu về Bootstrap---------------------------------------------------------------- 19

3. Môi trường sử dụng để phát triển Website---------------------------------------------20
4. Tính thực tiễn của Website----------------------------------------------------------------21

40

Chương 3: PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG---------------------------------22

3


ĐỀ TÀI WEB BÁN MỸ PHẨM
1. Phân tích yêu cầu đề tài------------------------------------------------------------------- 22
-

1.1. Đối với khách hàng truy cập website------------------------------------------------22

-

1.2. Đối với người quản trị website-------------------------------------------------------23

2. Thiết kế DataBase theo u cầu của đề tài---------------------------------------------24
-

2.1. Các mơ hình thiết kế dữ liệu----------------------------------------------------------24

-

2.1.1. Mơ hình tổng thể------------------------------------------------------------------- 24

-

2.1.2. Mơ hình ERD----------------------------------------------------------------------- 25

-

2.1.3. Mơ hình BFD----------------------------------------------------------------------- 25

-

2.1.4. Mơ hình ngữ cảnh------------------------------------------------------------------ 26

-

2.1.5. Mơ hình DFD----------------------------------------------------------------------- 26

-

2.2. Các sơ đồ thiết kế Database-----------------------------------------------------------27

-

2.2.1. Sơ đồ Use Case--------------------------------------------------------------------- 27

-

2.2.2. Thứ tự thực hiện Use Case--------------------------------------------------------28

-

2.3. Mơ hình CSDL trên SQL server 2012-----------------------------------------------28

-

2.4. Xác định kiểu dữ liệu cho từng thuộc tính của bảng-------------------------------29

Chương 4: KẾT QUẢ ĐẠT ĐƯỢC---------------------------------------------------------31
1. Giao diện chức năng và công nghệ thực hiện------------------------------------------31
-

1.1. Giao diện trang người dùng-----------------------------------------------------------31

-

1.2. Giao diện trang quản trị---------------------------------------------------------------34

Chương 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN-----------------------------------38
1. Kết quả nhận được------------------------------------------------------------------------- 38
-

1.1. Những điểm làm được----------------------------------------------------------------- 38

-

1.2. Những điểm chưa làm được----------------------------------------------------------38

2. Hướng phát triển---------------------------------------------------------------------------- 39
Chương 6: TÀI LIỆU THAM KHẢO------------------------------------------------------40
-

40

-

4


ĐỀ TÀI WEB BÁN MỸ PHẨM

LỜI NÓI ĐẦU
Ngày nay, khi mà ngành công nghệ thông tin ngày càng phát triển không ngừng, việc
quản lý trở nên dễ dàng hơn. Công nghệ thông tin giúp việc quản lý thông tin, truy cập
thơng tin nhanh chóng để giúp tiết kiệm thời gian, chi phí và nâng cao hiệu quả quản lý,
trong khi đó mạng internet được xem là một sản phẩm có giá trị hết sức lớn lao và ngày
càng trở thành một công cụ không thể thiếu,là nền tảng trong việc trao đổi và truyền tải
thơng tin trên tồn cầu. Đồng thời khi thị trường càng lúc càng phát triển, nhu cầu của
người dùng ngày càng tăng cao, làm thế nào để có thể đáp ứng hết những yêu tố mà
khách hàng đưa ra giúp cho khách hàng dễ dàng hơn trong việc chọn lựa cũng như tiết
kiệm thời gian và chi phí, những trang web bán hàng ngày càng phổ biến hơn, giờ đây

mọi việc liên quan đến thông tin trở nên thật dễ dàng đối với người sử dụng, chỉ cần có
một thiết bị kết nối internet và một dịng dữ liệu thì cả thế giới hầu như có thể hiện ra
trước mắt. Dựa vào yếu tố đó nên việc mua bán thông qua internet ngày càng trở nên phổ
biến hơn, đối với một cửa hàng hay shop việc quảng bá và giới thiệu đến khách hàng các
sản phẩm mới đáp ứng được nhu cầu của khách hàng là rất cần thiết. Vậy để quảng bá thế
nào đó là việc xây dựng một website cho cửa hàng để giới thiệu tất cả những sản phẩm
mình có nhằm đáp ứng nhu cầu của người dùng.

40

SINH VIÊN THỰC HIỆN

5


ĐỀ TÀI WEB BÁN MỸ PHẨM

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI
1. Giới thiệu đề tài và mô tả đề tài
1.1.Giới thiệu đề tài
Internet ngày nay đã khơng cịn xa lạ đối với bất cứ ai. Internet phát triển với tốc
độ chóng mặt và ngày càng đi sâu vào mọi mặt của xã hội. Sử dụng internet trong các
hình thức kinh doanh giờ đã trở thành một khâu tất yếu. Internet đã thay đổi thói quen
kinh doanh cũng như mua sắm truyền thống. Sử dụng website để thực hiện các giao dịch
mà không cần đến cửa mang đến rất nhiều lợi ích cho người mua cũng như người bán.
Chính vì những lí do đó, em quyết định xây dựng một website bán hàng nhằm mục đích
giới thiệu và cung cấp các mỹ phẩm cao cấp. Đây là một trong những trào lưu mua sắm
hiện nay trong giới trẻ, các sản phẩm được nhập khẩu từ nước ngồi có các chứng nhận
rõ rang nguồn hàng uy tín. Khách hàng thơng qua website có thể đặt hàng cũng như tìm
hiểu về các dịng mỹ phẩm cao cấp.

1.2.Mô tả đề tài
Website xây dựng dựa trên nhu cầu của khách hàng về các dòng mỹ phẩm cao cấp
có xuất xứ cũng như uy tín cao. Cung cấp các thông tin về sản phẩm, tạo điều kiện để
khách hàng của có thể trải nghiệm tốt nhất về mua sắm trên website. Từ đó, khách hàng
sẽ chọn được các sản phẩm phù hợp với sở thích và mục đính của mình. Khơng chỉ từ
phía khách hàng, thơng qua website ban quản lí có thể nhanh chóng tiến hành các giao
dịch, phân phối sản phẩm đến tay người mua hàng. Khơng chỉ dừng ở đó từ các thơng tin
mua hàng trên website, sẽ được tổng hợp thống kê và liên tục cập nhật nhằm cải thiện
sản phẩm cũng như hình thức tổ chức kinh doanh. Nhờ vậy sẽ mang lại sự tương tác hai
chiều giữa khách hàng và đơn vị kinh doanh. Dẫn đến sự tin tưởng của khách hàng ngày

40

cang nâng cao cũng như giúp hoạt động quản lí ngày càng hồn thiện hơn.

6


ĐỀ TÀI WEB BÁN MỸ PHẨM

2. Khảo sát ứng dụng liên quan
2.1.Dunahouse.weebly.com

Trang web sửa dụng công cụ Weebly. Nhưng vẫn chưa đầu tư vào phần thiết kế giao diện.
Trang chủ được thiết kế khá giống với một blog cá nhân. Chức năng hotline vẫn chưa
được hiện thực.

40

2.2.Hame.vn

7


ĐỀ TÀI WEB BÁN MỸ PHẨM
Trang web này hoàn thiện hơn và cụng đạt top SEO của google. Cách thiết kê chuyên
nghiêp, có nhiều chức năng để cho người dùng trải nghiệm. Khơng chỉ cung cấp các sản
phẩm móc len, web cung cấp cả về các dụng cụ cũng như các bài hướng dẫn để tạo ra sản
phẩm.

3. Kết quả mong muốn đạt được
3.1.Đối tượng và mục tiêu nghiên cứu
3.1.1. Đối tượng nghiên cứu
Đối tượng nghiên cứu của đề là Web bán hàng cung cấp các dòng mỹ phẩm cao
cấp. Website sẽ là môi trường trung gian thực hiện các giao dịch giữa khách hàng và đơn
vị cung cấp.
3.1.2. Mục tiêu nghiên cứu
Xây dựng website bán hàng trên nên tảng ASP.NET MVC5 . Thiết kế Full-Stack
trên công cụ Visual Studio 2015.
3.1.3. Mục tiêu đề tài
Thiết kế website bán hàng với sản phẩm chính là các dịng mỹ phẩm cao cấp, thực
hiện đầy đủ các chức năng của một web bán hàng. Tạo ra môi trường thân thiện nhằm
nâng cao trải nghiệm người dùng với sản phẩm. Đồng thời cung cấp các chức năng giúp
quản trị web như thống kê các đơn hàng, quản lí sản phẩm,đăng tin tức liên quan đến sản

40

phẩm.

8


ĐỀ TÀI WEB BÁN MỸ PHẨM

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
1. Giới thiệu về ngơn ngữ ASP.NET mơ hình MVC 5(Model-ViewController)
1.1.Sơ lược về ASP.NET
ASP.NET sử dụng .NET Framework, .NET Framework là sự tổng hợp tất các
các kỷ thuật cần thiết cho việc xây dựng một ứng dụng nền desktop, ứng dụng web,
web services...
ASP.NET là một 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. Lần đầu tiên được đưa ra
thị trường vào tháng 2 năm 2002 cùng với phiên bản 1.0 của .NET framework, là công
nghệ nối tiếp của Microsoft's Active Server Pages(ASP). ASP.NET được biên dịch
dưới dạng Common Language Runtime (CLR), cho phép những người lập trình viết
mã ASP.NET với bất kỳ ngơn ngữ nào được hỗ trợ bởi .NET language.

1.2.Lịch sử phát triển của ASP.NET
Từ khoảng cuối thập niên 90, ASP (Active Server Page) đã được nhiều lập trình
viên lựa chọn để xây dựng và phát triển ứng dụng web động trên máy chủ sử dụng hệ
điều hành Windows. ASP đã thể hiện được những ưu điểm của mình với mơ hình lập
trình thủ tục đơn giản, sử dụng hiệu quả các đối tượng COM: ADO (ActiveX Data
Object) - xử lý dữ liệu, FSO (File System Object) - làm việc với hệ thống tập tin…, đồng
thời, ASP cũng hỗ trợ nhiều ngôn ngữ: VBScript, JavaScript. Chính những ưu điểm đó,
ASP đã được yêu thích trong một thời gian dài.
Tuy nhiên, ASP vẫn cịn tồn đọng một số khó khăn như Code ASP và HTML lẫn
lộn, điều này làm cho quá trình viết code khó khăn, thể hiện và trình bày code khơng
trong sáng, hạn chế khả năng sử dụng lại code. Bên cạnh đó, khi triển khai cài đặt, do

khơng được biên dịch trước nên dễ bị mất source code. Thêm vào đó, ASP khơng có hỗ
trợ cache, khơng được biên dịch trước nên phần nào hạn chế về mặt tốc độ thực hiện.

40

Q trình xử lý Postback khó khăn,…

9


ĐỀ TÀI WEB BÁN MỸ PHẨM
Đầu năm 2002, Microsoft giới thiệu một kỹ thuật lập trình Web khá mới mẻ với
tên gọi ban đầu là ASP+, tên chính thức sau này là ASP.Net. Với ASP.Net, khơng những
khơng cần địi hỏi bạn phải biết các tag HTML, thiết kế web, mà nó cịn hỗ trợ mạnh lập
trình hướng đối tượng trong quá trình xây dựng và phát triển ứng dụng Web.

1.3.Kiến trúc của MVC 5
Mẫu kiến trúc Model – View – Controller được sử dụng nhằm chi ứng dụng thành
ba thành phần chính: model, view và controller. Nền tảng ASP.NET MVC giúp cho
chúng ta có thể tạo được các ứng dụng web áp dụng mơ hình MVC thay vì tạo ứng dụng
theo mẫu ASP.NET Web Forsm. Nền tảng ASP.NET MVC có đặc điểm nổi bật là nhẹ
(lighweigt), dễ kiểm thử phần giao diện (so với ứng dụng Web Forms), tích hợp các tính
năng có sẵn của ASP.NET. Nền tảng ASP.NET MVC được định nghĩa trong namespace
System.Web.Mvc và là một phần của name space System.Web.
MVC là một mẫu thiết kế (design pattern) chuẩn mà nhiều lập trình viên đã quen thuộc.
Một số loại ứng dụng web sẽ thích hợp với kiến trúc MVC. Một số khác vẫn thích hợp

với ASP.NET Web Forms và cơ chế postbacks. Đơi khi có những ứng dụng kết hợp cả hai
kiến trúc trên.
Nền tảng MVC bao gồm các thành phần dưới đây:

Models: Các đối tượng Models là một phần của ứng dụng, các đối tượng này thiết lập
logic của phần dữ liệu của ứng dụng. Thông thường, các đối tượng model lấy và lưu

40

trạng thái của model trong CSDL. Ví dụ như, một đối tượng Product (sản phẩm) sẽ lấy

10


ĐỀ TÀI WEB BÁN MỸ PHẨM
dữ liệu từ CSDL, thao tác trên dữ liệu và sẽ cập nhật dữ liệu trở lại vào bảng Products ở
SQL Server.
Trong các ứng dụng nhỏ, model thường là chỉ là một khái niệm nhằm phân biệt hơn là
được cài đặt thực thụ, ví dụ, nếu ứng dụng chỉ đọc dữ liệu từ CSDL và gởi chúng đến
view, ứng dụng khong cần phải có tầng model và các lớp lien quan. Trong trường hợp
này, dữ liệu được lấy như là một đối tượng model (hơn là tầng model).
Views: Views là các thành phần dùng để hiển thị giao diện người dùng (UI). Thông
thường, view được tạo dựa vào thơng tin dữ liệu model. Ví dụ như, view dùng để cập
nhật bảng Products sẽ hiển thị các hộp văn bản, drop-down list, và các check box dựa
trên trạng thái hiện tại của một đối tượng Product.
Controllers: Controller là các thành phần dùng để quản lý tương tác người dùng, làm việc
với model và chọn view để hiển thị giao diện người dùng. Trong một ứng dụng MVC,
view chỉ được dùng để hiển thị thông tin, controller chịu trách nhiệm quản lý và đáp trả
nội dung người dùng nhập và tương tác với người dùng. Ví dụ, controller sẽ quản lý các
dữ liệu người dùng gởi lên (query-string values) và gởi các giá trị đó đến model, model
sẽ lấy dữ liệu từ CSDL nhờ vào các giá trị này.
Mẫu MVC giúp bạn tạo được các ứng dụng mà chúng phân tách rạch rịi các khía cạnh
của ứng dụng (logic về nhập liệu, logic xử lý tác vụ và logic về giao diện). Mẫu MVC chỉ
ra mỗi loại logic kể trên nên được thiếp lập ở đâu trên ứng dụng. Logic giao diện (UI

logic) thuộc về views. Logic nhập liệu (input logic) thuộc về controller. Và logic tác vụ
(Business logic – là logic xử lý thông tin, mục đích chính của ứng dụng) thuộc về model.
Sự phân chia này giúp bạn giảm bớt được sự phức tạp của ứng dụng và chỉ tập trung vào
mỗi khía cạnh cần được cài đặt ở mỗi thời điểm. Ví dụ như bạn chỉ cần tập trung vào giao
diện (views) mà không phải quan tâm đến logic xử lý thông tin của ứng dụng.
Để quản lý sự phức tạp của ứng dụng, mẫu MVC giúp cho chúng ta có thể kiểm thử ứng
dụng dễ dàng hơn hẳn so với khi áp dụng mẫu Web Forms. Ví dụ, trong một ứng dụng
ASP.NET Web Forms, một lớp thường được sử dụng để hiển thị thông tin xuất ra cho

40

người dùng và đồng thời xử lý thông tin người dùng nhập. Việc xây dựng các bộ test tự

11


ĐỀ TÀI WEB BÁN MỸ PHẨM
động cho ứng dụng Web Forms là rất phức tạp, bởi để kiểm thử mỗi trang web, bạn phải
khởi tạo đối tượng trang, khởi tạo tất cả các control được sử dụng trong trang và các lớp
phụ thuộc trong ứng dụng. Và bởi vì có quá nhiều lớp cần được khởi tạo để chạy được
trang, thật khó để có thể viết các test chỉ tập trung vào một khía cạnh nào đó của ứng
dụng. Và vì thế, kiểm thử đối với các ứng dụng dứa trên nền tảng Web Forms sẽ khó
khăn hơn nhiều so với khi áp dụng trên ứng dụng MVC. Hơn thế nữa, việc kiểm thử trên
nền tảng Web Forms yêu cầu phải sử dụng đến web server. Nền tảng MVC phân tách các
thành phần và sử dụng các interface (khái niệm giao diện trong lập trình hướng đối
tượng), và nhờ đó có thể kiểm thử các thành phần riêng biệt trong tình trạng phân lập với
các yếu tố cịn lại của ứng dụng.
Sự phân tách rạch ròi ba thành phần của ứng dụng MVC cịn giúp cho việc lập trình diễn
ra song song. Ví dụ như một lập trình viên làm việc với view, lập trình viên thứ hai lo cài
đặt logic của controller và lập trình viên thứ ba có thể tập trung vào logic tác vụ của

model tại cùng một thời điểm.

1.4.Sự khác biệt giữa ASP.NET Webform và ASP.NET MVC
ASP.net WebForm sử dụng ViewState để quản lý, các trang ASP.net đều có lifecycle,
postback và dùng các web controls, các event để thực hiện các hành động cho UI (User
Interface) khi có sự tương tác với người dùng nên hầu hết ASP.net WebForm xử lý chậm.
ASP.net MVC chia ra làm 3 phần: Models, View, Controller. Mọi tương tác của người
dùng với Views sẽ được thực hiện hành động trong Controllers, khơng cịn postback,
lifecycel và events.
Việc kiểm tra (test), gỡ lỗi (debug) với ASP.net WebForm đều phải chạy tất cả các tiến
trình của ASP.net, và sự thay đổi ID của bất kỳ Controls nào cũng ảnh hưởng đến ứng
dụng. Đối với MVC thì việc đó có thể sử dụng các unit test có thể thẩm định rất dễ dàng
các Controllers thực hiện như thế nào.

40

Sau đây là bảng so sánh các tính năng của ASP.net WebForm với ASP.net MVC:

12


ĐỀ TÀI WEB BÁN MỸ PHẨM
Các tính năng
ASP.net WebForm
ASP.net MVC
Kiến trúc chương Kiến trúc mơ hình WebForm – Kiến trúc sử dụng việc phân
trình

> Bussiness –> Database

Cú pháp chương Sử

dụng

cú

pháp

chia

chương

trình

thành:

Models, Views, Controllers
của Các sự kiện được điều khiển

trình

WebForm, tất cả các sự kiện và bởi controllers, các controls

Truy cập dữ liệu

controls do server quản lý
không do server quản lý.
Sử dụng hầu hết các công nghệ Phần lớn dùng LINQ và SQL
truy cập dữ liệu trong ứng class để tạo mô hình truy cập
dụng

đối tượng.
Debug phải thực hiện tất cả Debug có thể sử dụng các

Debug

bao gồm các lớp truy cập dữ unit test để kiểm tra các
liệu, sự hiển thị, điều khiển các phương
Tốc độ phân tải

thức

trong

controls.
controllers.
Tốc độ phân tải chậm khi trong Phân tải nhanh hơn do khơng
trang có quá nhiều các controls phải quản lý ViewState để
vì ViewState quá lớn

Tương

tác

quản lý các controls trong

trang.
với Tương tác với JavaScript khó Tương tác với JavaScript dễ

JavaScript

khăn vì các controls được điều dàng vì các đối tượng khơng

URL address

khiển bởi server

do server quản lý điều khiển

Cấu trúc địa chỉ URL có dạng:

khơng khó
Cấu trúc địa chỉ rành mạch

<filename>.aspx?&số>

dạng

Controllers/Action/ID

1.5.Ưu điểm và nhược điểm
Ưu điểm :


Các dự án có thể áp dụng ngay mơ hình MVC mà khơng phụ thuộc mơi
trường, nền tảng xây dựng hay ngơn ngữ lập trình phát triển;



Quy hoạch các class/ function vào các thành phần riêng biệt Controller –

Model – View, khi đó sẽ dễ dàng xây dựng – phát triển – quản lý – vận hành và
bảo trì một dự án, tạo sự rõ ràng, trong sáng trong q trình phát triển dự án,
kiểm sốt được các luồng xử lý và tạo ra các thành phần xử lý nghiệp vụ

40

chuyên biệt hóa.

13


ĐỀ TÀI WEB BÁN MỸ PHẨM


Tạo thành mơ hình chuẩn cho nhiều dự án, các chuyên gia sẽ tiếp cận – tìm
hiểu những dự án đó một cách nhanh chóng và hiệu quả . Nếu bạn nắm rõ mơ
hình MVC của một dự án nào đó, thì khi tiếp cận với một dự án khác mà bạn
chưa từng biết hoặc tiếp xúc, nhưng nó lại được xây dựng với mơ hình MVC
thì sẽ khơng khó khăn gì mà cực kỳ dễ dàng. Học một nhưng có thể hiểu và sử
dụng được mười.



Giúp các chuyên gia lập trình, nhà quản lý, nhà đầu tư, PM… có thể hiểu được
dự án hoạt động ra sao hoặc giúp các lập trình viên dễ dàng quản lý – phát
triển dự án. Nó khơng phải ngơn ngữ, nhưng khi họ cùng nhìn vào nó thì sẽ tự
hiểu nó là gì, khi đó họ có thể trao đổi các yêu cầu và bàn bạc công việc.



Đây là một mơ hình chuẩn, nó tối ưu nhất hiện nay so với nhiều mơ hình khác
và được sử dụng trong nhiều dự án và nhiều lĩnh vực, đặc biệt trong công nghệ
sản xuất ứng dụng – phần mềm. Các lập trình viên sử dụng mơ hình chuẩn
MVC để có thể dễ dàng phân phối và chuyển giao công nghệ.



Đây là mơ hình đơn giản, xử lý những nghiệp vụ đơn giản, và dễ dàng triển
khai với các dự án nhỏ.

Nhược điểm:


u cầu về chun mơn khá cao, có kiến thức vững về các mơ hình chuẩn;Khó
triển khai với những dự án yêu cầu phúc tạp hơn. Hiện nay đang có một khái
niệm mơ hình mới đó là HMVC đang dần thay thế cho MVC

2. Các công nghệ sử dụng
2.1.Ngôn ngữ HTML 5
HTML 5 là một ngôn ngữ được thiết kế để thiết lập nội dung web. Nó nhằm
làm cho việc thiết kế web và phát triển web dễ dàng hơn bằng cách tạo một giao diện
ngôn ngữ đánh dấu chuẩn hóa và trực quan. HTML5 cung cấp các phương tiện phân
tích và phân định các trang của bạn, và nó cho phép bạn tạo các thành phần rời rạc
khơng chỉ được thiết kế để cấu tạo trang web một cách hợp lý mà còn được tạo ra để
cung cấp cho trang web các khả năng thơng tin. HTML5 có thể được gọi là “cách tiếp
cận thông tin thông qua thiết kế” do nó kết hợp yếu tố cơ bản về lập bản đồ thông tin,
phân chia và ghi nhãn thông tin giúp dễ dàng sử dụng và hiểu thông tin. Đây là nền
tảng của tiện ích ngữ nghĩa và thẩm mỹ gây ấn tượng sâu sắc của HTML5. HTML5

40

cung cấp khả năng xuất bản tất cả mọi thứ trên thế giới từ nội dung văn bản đơn giản

14


ĐỀ TÀI WEB BÁN MỸ PHẨM
đến đa phương tiện phong phú, tương tác cho các nhà thiết kế website và các nhà
phát triển ở mọi trình độ.
HTML5 cung cấp:


Các thẻ mơ tả chính xác những gì chúng được thiết kế để chứa đựng.



Tăng cường khả năng truyền thông trên mạng.



Cải thiện khả năng lưu trữ chung.



Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền.



Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú

và máy chủ.


Truy vấn dữ liệu đã được lưu trữ tốt hơn.



Cải thiện tốc độ nạp và lưu trang trên một website chuyên nghiệp.



Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có nghĩa

là HTML5 có thể được định hướng nội dung.


Cải thiện xử lý biểu mẫu trình duyệt.



Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy

khách..


Canvas và video, để thêm đồ họa và video mà không cần cài đặt các plug-in

của bên thứ ba.


Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị

của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám mây di
động.


Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho

phép truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện tốn
đám mây.
Các thẻ mới trong HTML5 có tính hấp dẫn cao, bao gồm cả vai trị và cách sử

40

dụng của chúng. Các phiên bản trước của HTML thường dùng các thẻ khơng có gì nổi

15


ĐỀ TÀI WEB BÁN MỸ PHẨM
bật cả. Tuy nhiên, HTML5 có các nhãn trực quan, có khả năng mơ tả cao. Nó cung
cấp các nhãn nội dung phong phú ngay lập tức xác định nội dung. Ví dụ, thẻ <div> đã
được bổ sung bằng các thẻ<section> và <article>. Ngoài ra các
thẻ <video>, <audio>, <canvas>, và <figure> cũng đưa ra sự mơ tả chính xác hơn về
các kiểu nội dung cụ thể.

2.2.Ngôn ngữ CSS 3
CSS3 là một chuẩn mới nhất của CSS, hay nói cách khác nó là một Version mới
của CSS. Nó được chia ra làm nhiều module và mỗi module sẽ có những nhiệm vụ khác
nhau, khi kết hợp chúng với nhau sẽ tạo nên những hiệu ứng tuyệt vời.

Với CSS3 nếu bạn kết hợp với jQuery nữa thì website của bạn sẽ trở nên sinh
động, điển hình là các hiệu ứng Paralax, Landing Page, …
CSS3 không phải là một thành phần của HTML5 nhưng lại có quan hệ mật thiết
với HTML5 do được phát triển song song với HTML5:












Thành phần của CSS3
Backgrounds, borders, RGAa color, gradeint
Image Values and Replaced Content
Text Effects
Selectors
Box Model
2D/3D Transformations
CSS Animations
Multiple Column Layout
User Interface
Những ưu điểm của CSS3

CSS3 được phát triển nhằm tăng sự tương thích với HTML5 trong việc bố cục
trình bày nội dung. Giờ đây, những tài liệu HTML đã có một bố cục hết sức rõ ràng và dễ

hiểu, các thuộc tính CSS và các thẻ HTML giờ đã khơng cịn bị chồng lấn mà được phân
tách bằng các hàng “class” và “id”.
Media Queries mới được ra mắt trong CSS3 hỗ trợ tính tương thích với nhiều kích
thước màn hình khác nhau mà không cần chỉnh sửa nội dung hiển thị, làm tăng tính uyển
chuyển của ứng dụng
Ngồi việc hỗ trợ về giao diện thì CSS3 cịn giúp bạn loại bỏ những đoạn code
thừa trong HTML khi việc sử dụng những thẻ thuộc tính trong HTML khơng cịn cần

40

thiết nữa.

16


ĐỀ TÀI WEB BÁN MỸ PHẨM
Bằng việc sử dụng duy nhất một file css, bạn sẽ luôn chắc chắn về sự đồng bộ về
giao diện giữa những trang khác nhau trong cùng một website. Ngoài ra, khi muốn thay
đổi giao diện của website thì bạn cũng chỉ cần thay đổi một lần duy nhất trong file css đó.
Css3 là ngơn ngữ được hỗ trợ bởi hầu hết các trình duyệt trên thế giới. Và nó thể
hiện một website trên nhiều trình duyệt khác nhau cũng khá nhất quán. Tuy nhiên, người
thiết kế web vẫn cần xác định rõ trình duyệt được người dùng sử dụng nhiều nhất để có
sự điều chỉnh tốt nhất cho trình duyệt đó.
Kết hợp cùng HTML5, CSS3 làm cho những ứng dụng web và bản thân trang web
trở nên hấp dẫn và chuyên nghiệp hơn nhờ những đặc điểm nổi bật so với các thế hệ ngơn
ngữ trước đó.

2.3.Thư viện Jquery
jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm
2006 với một phương châm tuyệt vời: Write less, do more.

jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động
và tương tác Ajax. Với jQuery, khái niệm Rapid Web Development đã khơng cịn q xa
lạ.
jQuery là một bộ cơng cụ tiện ích JavaScript làm đơn giản hóa các tác vụ đa dạng
với việc viết ít code hơn. Dưới đây liệt kê một số tính năng tối quan trọng được hỗ trợ
bởi jQuery:


Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM
để traverse một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của
chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi



là Sizzle.
Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc
xử lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên với



các Event Handler.
Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính



năng và phản hồi tốt bởi sử dụng công nghệ AJAX.
Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt

40

mà bạn có thể sử dụng trong các Website của mình.

17


ĐỀ TÀI WEB BÁN MỸ PHẨM


Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB



(gzipped).
Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ
hầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+,



Safari 3.0+, Chrome và Opera 9.0+
Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3
Selector và cú pháp XPath cơ bản.

2.4.Giới thiệu về Ajax
AJAX khơng phải là một cơng nghệ. Nó là tập hợp của nhiều cơng nghệ với thế
mạnh của riêng mình để tạo thành một sức mạnh mới. AJAX bao gồm:



Thể hiện Web theo tiêu chuẩn XHTML và CSS;
Nâng cao tính năng động và tương tác bằng DOM (Document

Object Model);

Trao đổi và xử lý dữ liệu bằng XML và XSLT;

Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng
XMLHttpRequest;

Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng JavaScript

Ajax là từ viết tắt của các từ Asynchronous JavaScript và XML nói nơm na là một
cơng nghệ hoạt động kết hợp giữa JavaScript, XML và môi trường hoạt động bất đồng
bộ, những ai mớ.
Khi bạn có sự tương tác với website mà chỉ có một phần của website đó thay đổi
mà khơng load lại hết trang web người tao gọi đó là bất đồng bộ, ngược lại là đồng bộ vì
nó làm tồn trang web load lại. Ví dụ như khi bạn comment trên facebook thì chỉ có
comment được hiển thị và ai đó comment cũng thấy hiển thị lên mà cả trang facebook
khơng load lại hồn tồn người ta gọi đó là mơi trường bất đồng bộ.
Ứng dụng và ưu điểm của Ajax
Do cách thức hoạt động của nó bất đồng bộ nên cho ứng dụng web chúng ta load
nhanh hơn rất nhiều, thay vì load lại tồn trang thì bây giờ chỉ có phần nào chúng ta

40

tương tác mà thơi, ví dụ chúng ta đăng nhập khi nhập tên pass và submit thì sẽ hiện lên

18


ĐỀ TÀI WEB BÁN MỸ PHẨM

ngay khung đăng nhập kết quả thay vì load lại trang, hoặc bình chọn một sự kiện nào đó,
khi mình bình chọn hiển thị ln … rất nhiều ứng dụng của Ajax vào thiết kế web.
Mặt khác Ajax là một công cụ truyền tải dữ liệu ngầm giữ máy con duyệt web và
server do vậy nó tương thích với mọi ngơn ngữ lập trình web: PHP, ASP.Net hay JSP …
đều kết hợp với Ajax được cả.

2.5.Giới thiệu về Bootstrap
Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ
dàng hơn
Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra những cái
cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image
carousels và nhiều thứ khác. Trong bootstrap có thêm các plugin Javascript trong nó.
Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn.
Lịch sử Bootstrap
Bootstrap là dược phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Nó được xuất
bản như là một mã nguồn mở vào tháng 8 năm 2011 trên GitHub. Tính ra đến thời điểm
mình viết bài viết này nó cũng đã phát triển được 3 năm rồi. Bản bootstrap mới nhất bây
giờ là bootstrap 3.
Ưu điểm khi sử dụng Bootstrap
Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript
chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt.
Tính năng Responsive: Bootstrap’s xây dựng sẵn reponsive css trên các thiết bị phones,
tablets, và desktops
Mobile: Trong Bootstrap 3 mobile-first styles là một phần của core framework
Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox,
Internet Explorer, Safari, and Opera)

3.

Mơi trường sử dụng để phát triển Website

Website được xây dựng trên trình biên dịch Visual Studio phiên bản 2015.
Microsoft Visual Studio là một mơi trường phát triển tích hợp từ Microsoft. Nó

40

được sử dụng để phát triển chương trình máy tính cho Microsoft Windows, cũng như các

19


ĐỀ TÀI WEB BÁN MỸ PHẨM
trang web, các ứng dụng web và các dịch vụ web. Visual Studio sử dụng nền tảng phát
triển phần mềm của Microsoft như Windows API, Windows Forms, Windows
Presentation Foundation, Windows Store và Microsoft Silverlight. Nó có thể sản xuất cả
hai ngơn ngữ máy và mã số quản lý.
Visual Studio bao gồm một trình soạn thảo mã hỗ trợ IntelliSense cũng như cải
tiến mã nguồn. Trình gỡ lỗi tích hợp hoạt động cả về trình gỡ lỗi mức độ mã nguồn và gỡ
lỗi mức độ máy. Cơng cụ tích hợp khác bao gồm một mẫu thiết kế các hình thức xây
dựng giao diện ứng dụng, thiết kế web, thiết kế lớp và thiết kế giản đồ cơ sở dữ liệu. Nó
chấp nhận các plug-in nâng cao các chức năng ở hầu hết các cấp bao gồm thêm hỗ trợ
cho các hệ thống quản lý phiên bản (như Subversion) và bổ sung thêm bộ công cụ mới
như biên tập và thiết kế trực quan cho các miền ngôn ngữ cụ thể hoặc bộ công cụ dành
cho các khía cạnh khác trong quy trình phát triển phần mềm.
Visual Studio hỗ trợ nhiều ngơn ngữ lập trình khác nhau và cho phép trình biên tập
mã và gỡ lỗi để hỗ trợ (mức độ khác nhau) hầu như mọi ngôn ngữ lập trình. Các ngơn
ngữ tích hợp gồm có C, C++ và C++/CLI (thông qua Visual C++), VB.NET (thông qua
Visual Basic.NET), C thăng (thông qua Visual C#) và F thăng (như của Visual Studio
2010[2]). Hỗ trợ cho các ngôn ngữ khác như J++/J thăng, Python và Ruby thông qua dịch
vụ cài đặt riêng rẽ. Nó cũng hỗ trợ XML/XSLT, HTML/XHTML, JavaScript và CSS.
4.

Tính thực tiễn của ứng dụng
Đáp ứng nhu cầu mua sắm trên Internet của khách hàng. Cung cấp các sản phẩm

móc len – Arigurumi với giá thành hợp lí, chất lượng. Đem đến sự trải nghiệm chuyên
nghiệp cho khách hàng ghé thăm website. Hỗ trợ hoạt động kinh doanh của nhà cung cấp.
Thực hiện các chức năng quản lí sản phẩm cũng như đơn hàng. Tạo ra mơi trường thực

40

hiện các giao dịch giữa nhà cung cấp và tiêu dùng một cách nhanh chóng và tiện lợi.

20


ĐỀ TÀI WEB BÁN MỸ PHẨM

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ WEBSITE
1. Phân tích yêu câu đề tài
1.1.Đối với khách hàng truy cập website
Khách hàng có thể tìm kiếm theo tên sản phẩm hay mã sản phẩm bằng cách gõ
vào thanh tìm kiếm hoặc có thể tìm kiếm trong các danh mục sản phẩm.
Sau khi chọn vào sản phẩm khách hàng sẽ được cung cấp những thông tin chi tiết
về sản phẩm như:


Tên sản phẩm.



Kích thước



Mơ tả về sản phẩm.



Tình trạng sản phẩm



Giá bán( Giá bán và Giá khuyến mãi)

Khi khách hàng tiến hành đặt hàng thì sản phẩm sẽ được thêm vào giỏ hàng. Giỏ
hàng sẽ được thiết thế kế như 1 danh sách sản phẩm
Giỏ hàng gồm:




Danh sách sản phẩm thể hiên:
o

Tên sản phẩm.

o

Kích thước

o

Số lượng mua

Tiền Thanh Tốn

Khách hàng có thể tiến hành thanh tốn ln hoặc tiếp tục mua các sản phẩm
khác. Nhằm làm tang trải nghiệm của khác hàng khi sửa dụng web.Khi khách hàng tiến
hành thanh toán các sản phẩm trong giỏ. Trang web sẽ yêu cầu khách hàng điền các

40

thông tin để xác nhận đơn hàng. Biểu mẫu Xác nhận đơn hàng gồm các thông tin:

21


ĐỀ TÀI WEB BÁN MỸ PHẨM


Họ và tên



Số điện thoại



Địa chỉ



Tỉnh/Thành phố

Sau khi điền các thông tin xác thực đơn hàng. Khách hàng sẽ tiến đến bước xác
nhận thông tin đơn hàng-kiểm tra đơn hàng đã đặt gồm:


Mã đơn hàng



Thời gian lập



Giá trị đơn hàng



Phương thức thanh toán

1.2.Đối với người quản trị website
Thêm mới sản phẩm
Khi xuất hiện những sản phẩm mới thì yêu cần thiết là phải đưa sản phẩm mới lên
trang web. Các thông tin của sản phẩm mới phải đồng bộ với các sản phẩm có sẵn. Trang
web sẽ cung cấp 1 trang chuyên dùng để đăng sản phẩm cho cơng tác admin. Những

40

thơng tin cần có để đăng 1 sản phẩm bao gồm:



Danh mục chứa sản phẩm



Mã sản phẩm



Tên sản phẩm



Giá bán thường.



Giá bán khuyến mãi.



Mô tả sản phẩm

22


ĐỀ TÀI WEB BÁN MỸ PHẨM



Hình đại diện sản phẩm.



Những hình ảnh chi tiết sản phẩm.



Tình trạng sản phẩm.



Kích thước



Giới thiệu ngắn về sản phẩm

Qn lí đơn hàng
Trong q trình hoạt động để tiên cho việc quản lí các đơn hàng trên web, cần phải
có 1 cơng cụ để admin theo dõi được hoạt động của website.
Công cụ này sẽ giúp thông kê:


Đơn hàng được đặt hàng



Đơn hàng đã thanh tốn



Sản phẩm bán chạy



Sản phẩm ứ đọng

Quản lý bình luận
Khi khách hàng để lại phản hồi.Để giải các thắc mắc cũng như tiếp nhận ý kiến
của khách hàng về sản phẩm, cần đến cơng cụ quản lí comment.
Admin cần được thấy tồn bộ bình luận của khách hàng, và Admin có tồn
quyền duyệt phản hồi trước khi hiển thị trên website.

40

2. Thiết kế Database theo yêu cầu của đề tài
2.1.Các mơ hình thiết kế dữ liệu
2.1.1. Mơ hình tổng thể website

23


ĐỀ TÀI WEB BÁN MỸ PHẨM

2.1.2. Mơ hình ERD

40

2.1.3. Mơ hình BFD

24


ĐỀ TÀI WEB BÁN MỸ PHẨM

2.1.4. Mơ hình ngữ cảnh

40

2.1.5. Mơ hình DFD

25