ỨNG DỤNG MÔ HÌNH MVC TRONG DỰ ÁN

Mục lục
I.

GIỚI THIỆU SƠ LƯỢC VỀ CÔNG TY HỆ THỐNG THÔNG TIN FPT............1
Tóm tắt về công ty hệ thống thông tin FPT........................................................................1

II. NHIỆM VỤ CHÍNH ĐƯỢC GIAO.......................................................................2
III. NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT QUẢ THU ĐƯỢC...........................3
1. Tìm hiểu về ngôn ngữ C#, Mô hình MVC, Entity Framework...................................3
2. Tìm hiểu ngôn ngữ Javascript.......................................................................................7
3. Tìm hiểu ngôn ngữ Html, Css........................................................................................8
4. Project: Xây dựng website thương mại điện tử theo mô hình MVC........................14

IV.

KẾT QUẢ ĐẠT ĐƯỢC QUA ĐỢT THỰC TẬP.............................................25

1. Kiến thức lý thuyết được cũng cố................................................................................25
2. Kỹ năng thực hành được trao dồi...............................................................................25
3. Ba bài học có ý nghĩa nhất trong đợt thực tập...........................................................26

V.

TỔNG KẾT......................................................................................................27


I.

GIỚI THIỆU SƠ LƯỢC VỀ CÔNG TYHỆ THỐNG THÔNG TIN FPT.
Tóm tắt về công ty hệ thống thông tin FPT.
a. Tổng quan:

Công ty TNHH Hệ thống Thông tin FPT (FPT IS) là một thành viên của Tập đoàn
FPT - Tập đoàn Công nghệ thông tin và Viễn thông hàng đầu Việt Nam. Được thành
lập năm 1994, đến nay, FPT IS đã sát cánh cùng khách hàng trong hơn 20 năm, cung
cấp cho thị trường các giải pháp và dịch vụ công nghệ thông tin tiên tiến thuộc nhiều
lĩnh vực: chính phủ, tài chính công, ngân hàng, viễn thông, y tế, giao thông, dịch vụ
công, giáo dục, truyền hình và doanh nghiệp. Cùng với quá trình đó, hàng nghìn tài
năng công nghệ thông tin đã cùng FPT IS phát triển, trưởng thành và xây dựng sự
nghiệp thành công. FPT IS giữ tốc độ tăng trưởng ổn định và không ngừng mở rộng
thị trường ngoài biên giới Việt Nam.
FPT IS quan niệm: Công nghệ luôn thay đổi và con người chính là yếu tố quan trọng
nhất để làm chủ các công nghệ đó. Công ty hiện có hơn 2700 kỹ sư lành nghề, trong
đó có trên 1500 người trực tiếp phát triển các phần mềm ứng dụng đẳng cấp quốc tế
và chuyên sâu theo nghiệp vụ mỗi ngành. Năng lực của đội ngũ chuyên gia FPT IS
đã được công nhận bằng những chứng chỉ công nghệ quốc tế được cấp bởi các nhà
cung cấp giải pháp và dịch vụ dẫn đầu thế giới.
Trở thành một thành viên của FPT IS, bạn có cơ hội được tiếp cận và với những xu
hướng công nghệ tiên tiến, được làm việc và học hỏi những người dẫn đầu, được
đóng góp sức mình vào hàng trăm hệ thống công nghệ thông tin phục vụ cho các
ngành kinh tế xương sống trong và ngoài nước.
FPT IS luôn khuyến khích và tạo điều kiện để mỗi người phát triển tối đa khả năng
của bản
thân và gắn bó lâu dài với tổ chức. Công ty coi trọng sáng tạo, học hỏi và mong
muốn mỗi
cá nhân sẽ cùng gìn giữ và thực hiện các cam kết với khách hàng. Các quyền lợi lao
động, xây dựng môi trường làm việc tốt nhất cho từng cán bộ nhân viên luôn là mối
quan tâm hàng đầu của ban lãnh đạo công ty.
Văn hóa làm việc Chuyên nghiệp, Đúng hạn, Nắm vững công nghệ và Am hiểu
nghiệp vụ, văn hóa vui chơi Nhiệt huyết - Máu lửa và Hết mình. FPT IS tự hào là
ngôi nhà chung lý tưởng cho những người đam mê công nghệ, sẵn sàng cống hiến vì
sự phát triển của nền công nghệ thông tin Việt Nam.

b. Tầm nhìn:
FPT IS quan niệm: Công nghệ luôn thay đổi và con người chính là yếu tố quan trọng
nhất để làm chủ các công nghệ đó. Công ty hiện có hơn 2700 kỹ sư lành nghề, trong
đó có trên 1500 người trực tiếp phát triển các phần mềm ứng dụng đẳng cấp quốc tế
và chuyên sâu theo nghiệp vụ mỗi ngành. Năng lực của đội ngũ chuyên gia FPT IS
đã được công nhận bằng những chứng chỉ công nghệ quốc tế được cấp bởi các nhà
cung cấp giải pháp và dịch vụ dẫn đầu thế giới.
Trang 1


II.

NHIỆM VỤ CHÍNH ĐƯỢC GIAO
Thời gian

Nội dung
- Tìm hiểu và thực hiện các project căn bản bằng ngôn ngữ

Tuần 1-Tuần 3

C#.

(1/9-15/9/2016)

- Tìm hiểu về mô hình ASP.NET MVC.

Tuần 3-Tuần 5

- Tìm hiểu Entity Framework 5.0
- Tìm hiểu về ngôn ngữ HTLM – CSS.

(16/9 – 30/9/2016) - Tìm hiểu về SQL Server 2014.
- Tìm hiểu về ngôn ngữ Jquery, Javascript.

Tuần 5-Tuần7
(1/10

– - Củng cố lại kiến thức cần thiết để tiến hành thực hiện

15/10/2016)

project.
- Project: Xây dựng website thương mại điện tử theo mô hình

Tuần 7-Tuần 9
(16/10
30/10/2016)
Tuần 9-Tuần 13
(1/11-1/12/2016)

–

MVC.
-Tìm hiểu thư viện Enterprise Library của Microsoft:
Dependency Injection, Logging, Validation.
-Project: Xây dựng website thương mại điện tử theo mô hình
MVC.
- Tiếp tục tìm hiểu về Enterpsire Library.
Bảng 1 – Nội dung được giao tại Công Ty.

Trang 2


III.

NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT QUẢ THU ĐƯỢC

1. Tìm hiểu về ngôn ngữ C#, Mô hình MVC, Entity Framework.
a. Ngôn ngữ C#.
 Tổng quan:
- C# là một ngôn ngữ lập trình đơn giản, hiện đại, mục đích tổng quát, hướng đối
tượng được phát triển bởi Microsoft và được phê chuẩn bởi European Computer
Manufacturers Association (ECMA) và International Standards Organization
-

(ISO).
C# được thiết kế cho Common Language Infrastructure (CLI), mà gồm
Executable Code và Runtime Environment, cho phép chúng ta sử dụng các ngôn
ngữ high-level đa dạng trên các nền tảng và cấu trúc máy tính khác nhau.

-

Dưới đây là các lý do làm C# là ngôn ngữ lập trình chuyên nghiệp được sử dụng
rộng rãi:
o Nó là một ngôn ngữ lập trình hiện đại, mục đích tổng quát.
o Nó là hướng đối tượng.
o Nó dễ dàng để học.
o Nó là một ngôn ngữ được cấu trúc.
o Nó tạo các chương trình hiệu quả.
o Nó có thể được biên dịch trên nhiều nền tảng máy tính khác nhau.

o Nó là một phần của .Net Framework.

-

Cấu trúc C# khá gần với các ngôn ngữ high-level truyền thống, C và C++, và là
một ngôn ngữ lập trình hướng đối tượng. Nó có sự giống nhau mạnh mẽ với
Java, nó có nhiều đặc điểm lập trình mạnh mẽ mà làm cho nó trở nên ưa thích với
các lập trình viên trên toàn thế giới. Dưới đây là các đặc điểm quan trọng của C#:

Trang 3


o Điều kiện Boolean
o Tự động dọn rác bởi Garbage-Collector (GC)
o Thư viện chuẩn (Standard Library)
o Assembly
o Property và sự kiện (Event)
o Delegate Quản lý sự kiện
o Dễ dàng để sử dụng Generic
o Indexer
o Biên dịch có điều kiện (Conditional Compilation)
o Đa luồng dễ dàng (Multithreading)
o LINQ và Lambda Expression
o Tích hợp với Windows
b. Mô hình MVC.
 Tổng quan:
- Kiến trúc MVC (Model – View – Controller) chia ứng dụng thành ba thành phần
chính: Model, View và Controller. Bộ framework ASP.NET MVC cung cấp thêm
một lựa chọn để tạo các ứng dụng web dựa bên mô hình MVC. Bộ framework
ASP.NET MVC được tích hợp với các chức năng sẵn có của ASP.NET, chẳng hạn

như các master page và khả năng xác thực khách hàng dựa trên membership.
Framework MVC được định nghĩa trong không gian tên System.Web.Mvc và được
hỗ trợ bởi không gian tên System.Web.
Trang 4


Hình 1: Cấu trúc MVC.
- Bộ framework MVC bao gồm các thành phần sau:
o Models. Các đối tượng Model là các phần của ứng dụng sẽ thực hiện phần logic
cho vùng dữ liệu chính của ứng dụng. Thông thường, các đối tượng model nhận
và lưu trữ trong một cơ sở dữ liệu.
Ví dụ, một đối tượng Product có thể nhận thông tin từ một CSDL, thực hiện
các thao tác xử lý dữ liệu trên đối tượng đó, và sau đó update thông tin đã thay
đổi ngượi trở lại cho một bảng Product trong SQL Server.
o Views. Các View là các thành phần hiển thị giao diện khách hàng của ứng dụng.
Và giao diện khách hàngđược tạo ra từ dữ liệu trong các đối tượng Model. Ví dụ,
có thể chỉnh sửa phần hiển thị của một bảng Products để hiển thị trên các Text
box, các drop-down lists, và các Check box trên trạng thái hiện tại của một đối
tượng Products.
o Controllers. Các Controllers là các thành phần sẽ điều khiển sự tương tác của
khách hàng, sau đó làm việc với các đối tượng model tương ứng, và cuối cùng sẽ
-

chọn một đối tượng View phù hợp để trả lại và hiển thịgiao diện khách hàng.
Trong một ứng dụng MVC, đối tượng View chỉ hiển thị thông tin, Controller điểu
khiển và trả lại dữ liệu tương ứng với các tương tác và dữ liệu khách hàng nhập
vào.
Ví dụ, Controller điều khiển các giá trị Query-string, và truyền các giá trị đó

cho đối tượng Model, và lần lượt truy vấn CSDL bằng cách sử dụng các giá trị đó.

 Lợi ích của mô hình MVC.
- Có tính mở rộng do có thể thay thế từng thành phần một cách dễ dàng.
- Không sử dụng viewstate, điều này làm các nhà phát triển dễ dàng điều khiển ứng
-

dụng của mình.
Hệ thống định tuyến mới mạnh mẽ.
Trang 5


-

Hỗ trợ tốt hơn cho test-driven development (TDD) cài đặt các unit tests tự động,

-

xác định và kiểm tra lại các yêu cầu trước khi bắt tay vào viết code.
Hỗ trợ kết hợp rất tốt giữa người lập trình và người thiết kế giao diện.
Sử dụng các tính năng tốt nhất đã có của ASP.NET.

 Nhược điểm của ASP.NET MVC.
- Không hướng đến sự kiện làm cho các nhà phát triển ASP.NET webform khó khăn.
- Yêu cầu hiểu biết về HTTP, HTML, CSS và JavaScript.
- Thư viện của nhà phân phối thứ ba không mạnh bằng.
c. Entity Framework.
 Tổng quan:
- Microsoft ADO.NET Entity Framework là một khuôn khổ đối tượng Object/ Bảng
đồ quan hệ Relational Mapping (ORM) cho phép các nhà phát triển dể dàng làm
việc với dữ liệu quan hệ như là các đối tượng domain-specific, loại bỏ đi sự khó
khăn trong việc truy cập dữ liệu trước đây. Bằng cách sử dụng Entity Framework,

truy vấn LINQ, thì việc lấy và thao tác dữ liệu như các đối tượng trở nên mạnh mẽ
hơn. Entity Framework ORM cung cấp các dịch vụ như change tracking, idenity
resolution, lazay loading, và truy vấn dữ liệu tập trung vào business logic của ứng
-

dụng.
Entity Framework là một bộ ánh xạ đối tượng – quan hệ cho phép người lập
trình .NET làm việc với dữ liệu quan hệ qua các đối tượng (object) nó giúp lập
trình viên không cần viết mã cho (hầu hết) những gì liên quan đến truy cập dữ

-

liệu.
Các thành phần trong Entity Framework:.
o Code là mã lệnh tạo thành các lớp đối tượng dữ liệu cho phép thao
tác với dữ liệu.
o Model là sơ đồ gồm các hộp mô tả các thực thể và các đường nối kết
mô tả các quan hệ.
o Database là cơ sở dữ liệu (có thể là SQL Server, Compact SQL
Server, Local database, MySQL, Oracle,…).

Trang 6


-

Có 3 cách sử dụng Entity Framework: Code First, Models First, Database First.

Hình 2: 3 cách sử dụng EF.
-

Database first: là phương pháp chỉ nên dùng khi ta đã có sẵn CSDL (không
phải tạo), EF Wizard sẽ tạo Model và Code cho ta.

-

Models first: nên dùng khi ta bắt đầu thiết kế CSDL từ đầu (từ chưa có gì).
Ta sẽ thiết kế mô hình CSDL (Model) EF sẽ tự tạo code cho ta, sau đó nhờ
EF Wizard tạo CSDL.

-

Code first: nên dùng khi đã có mô hình CSDL, ta sẽ chỉ viết code từ đó tạo
Database.

2. Tìm hiểu ngôn ngữ Javascript
-

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.

-

Cú pháp của Javascript.

-

JavaScript có thể được thực hiện bởi sử dụng các lệnh JavaScript mà được đặt trong

thẻ HTML <script>... </script> trong một trang web.

-

Bạn có thể đặt các thẻ <script>, chứa JavaScript của bạn, bất cứ đâu trong trang của
bạn, nhưng được đề nghị là bạn nên giữ nó trong các thẻ <head>.
Trang 7


-

Thẻ <script> báo cho chương trình trình duyệt bắt đầu phiên dịch tất cả văn bản ở
giữa các thẻ này như là một script. Một cú pháp đơn giản của JavaScript sẽ xuất hiện
như sau:
<script...>
JavaScript code
</script>
Bảng 2: Cú pháp Javascript

-

Thẻ script nhận hai thuộc tính quan trọng sau:
-

Language − Thuộc tính này xác định ngôn ngữ scripting nào bạn đang sử
dụng. Giá trị của nó sẽ là javascript. Mặc dù các phiên bản gần đây của
HTML (và XHTML) đã thôi dần không sử dụng thuộc tính này nữa.

-

Type − Thuộc tính này là những gì bây giờ được đề nghị sử dụng và giá trị
của nó nên được thiết lập là “text/javascript”.

3. Tìm hiểu ngôn ngữ Html, Css.
3.1. Ngôn ngữ HTML
a. Tổng quan HTML.
- HTML viết tắt của từ HyperText Markup Language là là ngôn ngữ đánh dấu siêu văn
bản. Được dùng để trình bày nội dung cho một trang web. Phiên bản hiện tại là
HTML5.
-

Phân loại thẻ HTML:
o None: Khối những thẻ này không hiển thị nội dung bên trong.
o Block Level: Khối những thẻ này hiển thị nội dung bên trong và
chiều ngang tràn hết trình duyệt.
o Inline: Khối những thẻ này hiển thị nội dung bên trong và chiều
ngang tùy thuộc vào kích thước của các đối tượng bên trong khối.

-

Và nó nằm trên một dòng.
Các thẻ HTML trong cặp thẻ <body></body> thường là kiểu block và inline.
Trang 8


b. Cấu trúc một trang HTML.
- Một trang html bất kỳ đều có cấu trúc như sau:

Hình 3: Cấu trúc html.
- Kết quả của ví dụ trên:

.
- Như các bạn thấy: Ở ví dụ trên: "<font>" là một thẻ html có các thành phần:
o Tên thẻ: font.
o Thuộc tính color( thể hiện màu chữ) Giá trị của thuộc tính là red.
o Thuộc tính size( thể hiện màu chữ) Giá trị của thuộc tính là 12.
c. Nguyên tắc khai báo một thẻ HTML.
- Thẻ html có hai loại: Thẻ đơn và thẻ kép.
- Đối với một thẻ đơn thì kết thúc mỗi thẻ đơn ta phải có dấu đóng thẻ: Ví dụ:
,
<hr/>, <meta/>
- Đối với một thẻ kép: Đối với một thẻ html kép( cặp thẻ) luôn bắt đầu bằng một thẻ
mở và kết thúc bằng một thẻ đóng Ví dụ:

, <font></font>, <div></div>
- Đối với bất kỳ thẻ html nào đều có thuộc tính và giá trịVậy cho dù có những thẻ html
mà bạn chưa bao giờ sử dụng thì việc tuân thủ theo những nguyên tắc trên bạn hoàn
toàn có thể sử dụng và điều khiển được nó.

d. Các thẻ HTML căn bản.
Tên thẻ
<html>Nội dung</html>
<head>Nội dung</head>

Chức năng
Là thẻ mở đầu của bất kỳ một trang web.
Là thẻ chứa các thẻ trong phần đầu của trang

<title>Nội dung</title>

web.
Là thẻ thể hiện tiêu đề của trang web.

<meta name="" content="" /><meta>

Luôn nằm trong cặp thẻ HEAD
Là thẻ chứa thông tin mô tả của một trang Web.

<body>Nội dung</body>

Thẻ meta luôn nằm trong cặp thẻ HEAD.
Là thẻ chưa toàn bộ nội dung của trang web.
Trang 9





Bên trong thẻ body chứa rất nhiều thẻ html khác.
Là thẻ đặc biệt, nên đóng thẻ trên chính nó. Được

<b>Nội dung</b>

dùng để xuống dòng.
Dùng để in đậm văn bản.

<strong>Nội dung</strong>

Dùng để in đậm văn bản.

<i>Nội dung</i>

Dùng để in nghiêng văn bản

<u>Nội dung</u>

href="link"

Dùng để gạch chân văn bản.
target="value" Thuộc tính href: Liên kết tới đâu ( bắt buộc ).

title="nội dung">Nội dung</a>

Thuộc tính targer quy định về việc mở cửa sổ
trình duyệt như thế nào.
Thuộc tính title là nội dung hiển thị lên khi horver

Nội dung

Nội dung

chuột vào.
Thể hiện nội dung theo từng đoạn.
Dùng để canh giữa nội dung nằm bên trong thẻ

<hr/>

Nội dung</pre>

center.
Là thẻ đặc biệt được dùng để tạo đường kẻ ngang.
Dùng để định dạng nội dung bên trong. Khi
người
dùng gõ code thế nào thì hiện thị lên trình duyệt



theo định dạng thế đó.
Được dùng để nhúng file ảnh vào trang web.

height=""alt=""/>

src: là đường dẫn đến file ảnh cần nhúng.width
qui định độ rộng của ảnh.height qui định chiều
cao của ảnh.

<div>Nội dung</div>

alt chứa nội dung mô tả thông tin cho ảnh.
Thẻ Div là thẻ HTML thuộc kiểu Block. Có nghĩa

<span>Nội dung</span>

là chiều rộng của thẻ bằng toàn màn hình. Chiều
cao bằng nội dung mà nó chứa.
Thẻ Span là thẻ HTML có kiểu Inline. Có nghĩa
là chiệu rộng bằng nội dung nó chứa. Chiều cao
cũng bằng nội dung nó chứa.
Thẻ danh sách bất tuần tự.

<ul></ul>
<ol></ol>

action=""

Thẻ danh sách tuần tự.

name="" Form là thành phần quan trọng của một trang
Trang 10


method="">
//Code html

web.
Thẻ Form cho phép tạo ra các vùng cho phép
khách hàng có thể nhập liệu và tương tác với

</form>

Server.
Thuộc tính name qui định tên của Input ( Tên tự
size="" />
định nghĩa ).
Thuộc tính Value qui định giá trị của Input đó
( Thường để trống ).
Thuộc tính size qui định độ rộng của thẻ Input.

Bảng 3: Thẻ html căn bản

3.2. Ngôn ngữ CSS.
a. CSS là gì.
- CSS là ngôn ngữ cơ bản để thiết kế website.
- Hiểu đơn giản: chúng ta học CSS để tô màu cho website. Về định nghĩa:
o CSS là viết tắt của từ Cascading Style Sheets.
o Được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996.

o Là ngôn ngữ định nghĩa cách hiển thị các thẻ html trên website. ( nó sẽ làm
cho các thẻ html có màu sắc, font chữ to nhỏ như Word)
b. Cú pháp CSS.
- Gồm 3 phần: selector (bộ chọn), property (thuộc tính), value (giá trị).
c. Chèn CSS trực tiếp và trong thẻ HTML.

Trang 11


- Sau khi chạy code thì “nội dung sẽ có màu đỏ”.
- Trong đó:
o Cách viết này không có selector (bộ chọn) vì đã sử dụng style trực tiếp trong
thẻ html.
o color là property (thuộc tính).
o red là value (giá trị).
o Thuộc tính và giá trị được ngăn cách bởi dấu “:”

d. Chèn CSS vào cặp thẻ <style>.

- Lưu ý: cặp thẻ <style> phải nằm bên trong cặp thẻ <head> mới đúng chuẩn w3c.
Trong đó:
o Test là selector (bộ chọn).
o color là property (thuộc tính).
Trang 12


o red là value (giá trị).
o Thuộc tính và giá trị được ngăn cách bởi dấu “:” và được bao quanh dấu
ngoặc nhọn “{}”.
e. Tạo file riêng để viết CSS.


Trong đó:
-

Test là selector (bộ chọn).

-

color là property (thuộc tính).

-

red là value (giá trị).

-

Thuộc tính và giá trị được ngăn cách bởi dấu “:” và được bao quanh dấu
ngoặc nhọn “{}”.

f. Thứ tự ưu tiên trong CSS.
-Chèn css trực tiếp > Viết file css riêng > Chèn css trong cặp thẻ style.
4. Project: Xây dựng website thương mại điện tử theo mô hình MVC.
Nội dung: Xây dựng và phát triển dự án Website bán hàng điện tử
trực tuyến áp dụng mô hình MVC, bao gồm các chứ năng: Đăng
nhập, đăng ký, tìm kiếm sản phẩm, giỏ hàng-đặt hàng, quản lý sản
phẩm.
Nội dung công việc và kết quả đạt được:
 Nội dung 1: Thiết kế giao diện Website sử dụng
Photoshop – Cắt PSD sang Html/Css.
-Sử dụng Photoshop để thiết kế các Layout của các trang sau:

+ Form Đăng nhập tài khoản :

Trang 13


Hình 4: Form đăng nhập.

+ Trang chủ:

Trang 14


Hình 5: Trang chủ của Website
+ Trang Sản Phẩm – Xem chi tiết sản phẩm:

Hình 6: Trang sản phẩm.

+ Trang giỏ hàng – Đặt hàng:
Trang 15


Hình 7: Trang giỏ hàng
- Từ các bản thiết kế dùng Photoshop có đuôi mở rộng là PSD, sử
dụng một số công cụ để chuyển đổi sang file .html.
Kết quả đạt được: Hoàn chỉnh các giao diện.

Trang 16


 Nội dung 2: Thiết kế Cơ sở dữ liệu (CSDL) để lưu trữ

thông tin của Website.Thiết kế CSDL :

Trang 17


Trang 18


Entity Framework (EF):
- Sử dụng Entity Framework để kết nối CSDL:

Hình 9: Kết nối CDSL dùng EF
- Sau khi đã thiết kế CSDL, ta sử dụng Entity Framework với phương
pháp “Database first”, EF Wizard sẽ tự động tạo Model và Code.
+ Model: là sơ đồ gồm các hộp mô tả các thực thể và các đối
tượng nối kết mô tả các quan hệ.
+ Code: là mã lệnh tạo thành các lớp đối tượng dữ liệu cho phép
thao tác với dữ liệu.

Trang 19


Kết quả đạt được: Có thể rút ngắn thời gian phát triển Website
do EF đã hỗ trợ sẵn các tính năng cơ bản để truy xuất dữ liệu. Công
việc truy xuất trở nên dễ dàng hơn.

 Nội dung 3: Xây dựng chức năng “Đăng ký – Đăng nhập”
Chức năng đăng ký:

Hình 10: Form chức năng đăng ký

- Khi khách hàng chưa có tài khoản, Click vào “Đăng kí” để đăng kí
tài

khoản

thì

sẽ

chuyển

đến

trang

đăng

ký.

Tại

trang

DangKy.cshtml này, các thông tin đăng ký của khách hàng sẽ được
kiểm tra ngay tại Client bằng các thuộc tính của tính năng
Validation được tích hợp sẵn trong mô hình MVC5.
- Nếu thông tin đăng nhập không chính xác thì sẽ đưa ra các thông
báo sai thông tin và yêu cầu khách hàng chỉnh sửa lại thông tin
đăng ký. Ngược lại, nếu thông tin đăng ký chính xác, thì thông tin
này sẽ được gửi tới Server để xử lý và lưu vào Cơ Sở Dữ

Liệu(CSDL) (Cụ thể thông tin đăng ký sẽ được lưu vào bảng
ThanhVien trong CSDL).

Trang 20


Chức năng đăng nhập:
- Khi khách hàng đã đăng ký tài khoản thành công, tiến hành đăng
nhập. Tại Form đăng nhập này, các thông tin “Tên đăng nhập” và
“Tài khoản” sẽ được gửi tới Server để kiểm tra.
- Tại Server, thực hiện các việc kiểm tra, nếu như thông tin “Tên
đăng nhập” và “Tài khoản” mà khách hàng nhập vào chưa tồn tại
trong bảng “ThanhVien” được lưu trong CSDL thì sẽ đưa ra thông
báo “Sai tài khoản hoặc mật khẩu” để khách hàng nhập lại hoặc
đăng ký tài khoản mới. Ngược lại nếu thông tin khách hàng nhập
vào có tồn tại trong bảng “ThanhVien”(đồng nghĩa với việc khách
hàng đã đăng ký tài khoản trước đó) thì sẽ chuyển tới Trang chủ
để khách hàng bắt đầu công Shopping của mình.

Trang 21


Giao diện khi khách hàng đăng nhập thành công:
Hình 11: Giao diện khi khách hàng đăng nhập thành công.
Kết quả đạt được: Xây dựng thành công chức năng “đăng
ký tài khoản mới và chức năng đăng nhập”cho khách hàng.

 Nội dung 4: Xây dựng chức năng “Tìm kiếm sản phẩm”

-Khách hàng nhập từ khóa tìm kiếm theo “tên sản phẩm” vào ô “Tìm

kiếm”
Hình 12: Chức năng tìm kiếm của Website.

- Từ khóa mà khách hàng nhập vào theo “tên sản phẩm” sẽ được
gửi tới Server, tại Server xử lý công việc truy vấn vào CSDL(cụ thể
là truy vấn vào bảng “Product” trong CSDL) để hiển thị cho khách
hàng.

Trang 22


Kết quả đạt được: Xây dựng thành công chức năng “Tìm
kiếm sản phẩm” đáp ứng được nhu cầu của khách hàng.

 Nội dung 5: Xây dựng chức năng “Xem chi tiết sản phẩm”,
“Giỏ hàng – Đặt hàng”
- Trước khi thêm sản phẩm vào giỏ hàng của mình cũng như đặt
hàng, khách hàng có thể kiểm tra về thông tin sản phẩm như

Hình 14: Xem chi tiết sản phẩm.
- Sau khi xem rõ thông tin về sản phẩm, khách hàng có thể thêm sản phẩm cần
mua vào giỏ hàng của mình bằng việc “Click” vào biểu tượng giỏ hàng nằm
ngay dưới mỗi sản phẩm
- Sự kiện “Click” sẽ được gửi tới Server và tại đây sẽ xử lý việc thêm sản phẩm
vào giỏ hàng sau đó hiển thị ra thông tin số lượng sản phẩm mà khách hàng
đãthêm vào giỏ hàng và thành tiền.

Trang 23



Hình 16: Thông tin về giỏ hàng
- Sau khi khách hàng đã lựa chọn “Thỏa thích” các sản phẩm điện tử và thêm vào
giỏ hàng của mình, thì đến bước tiếp theo đó là tiến tới trang “Đặt hàng”. Nếu
như khách hàng chưa thêm bất kì sản phẩm nào giỏ hàng thì Server sẽ xử lý đưa
ra thông báo “Giỏ hàng rỗng”.

- Tại trang này khách hàng có thể chỉnh sửa lại “Giỏ hàng” của mình với các chức
năng: thay đổi số lượng hoặc xóa sản phẩm. Các “request” mà khách hàng đưa
vào sẽ được gửi tới Server để tiến hành xử lý và cập nhật lại “Giỏ hàng” cho
khách hàng.

Trang 24