báo cáo xây dựng web bán hoa bằng công nghệ MVC 5

 Phần khách hàng (Customer): Là những người có nhu cầu mua sắm, họ sẽ tìm kiếm các mặt hàng từ hệ thống và đặt mua các mặt hàng .Vì vậy trang web phải có các chức năng sau: • Hiển thị mẫu hoa của shop để khách hàng xem, lựa chọn và mua • Khách hàng có thể xem được các thông tin , tin tức , khuyến mãi trên shop • Sau khi khách hàng chọn và đặt hàng trực tiếp trên trang web thì phải hiện được thông tin mua hàng và xem được hóa đơn.

Trang 1

TRƯỜNG ĐẠI HỌC THÔNG TIN LIÊN LẠC KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP

ĐỀ TÀI: Xây Dựng Trang Web Bán Hoa Bằng Công Nghệ

MVC5

Giảng viên hướng dẫn : Nguyễn Hồng Giang Sinh viên thực hiện : Dương Thị Thanh Dung Lớp : ĐHCN1C

MSSV : 14ĐC015

Trang 2

BÁO CÁO THỰC TẬP TỐT NGHIỆP

ĐỀ TÀI: Xây Dựng Trang Web Bán Hoa Bằng

Công Nghệ MVC5

Giảng viên hướng dẫn : Nguyễn Hồng Giang Sinh viên thực hiện : Dương Thị Thanh Dung Lớp : ĐHCN1C

MSSV : 14ĐC015

Trang 3

em xin chân thành cảm ơn thầy Nguyễn Hồng Giang, giáo viên phụ trách và hướng dẫn

em tận tình trong suốt thời gian làm đề tài này

Em cũng xin được cảm ơn những người bạn đã gắn bó, chia sẻ rất nhiều kinh nghiệm vànhững kiến thức và nhất là trong thời gian thực hiện thựctập Để đề tài của em có thểhoàn thành một cách thành công tốt đẹp nhất

Nha Trang, 2 tháng 5 năm 2018

Sinh viên thực hiệnDương Thị Thanh Dung

Trang 4

NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN

(Nhận xét này ghi riêng cho từng sinh viên)

Họ và tên cán bộ hướng dẫn:

Học hàm:

Học vị:

Chức vụ:

Nhận xét báo cáo thực tập của sinh viên:………

Lớp: Khoá:

Tên đề tài: Nội dung nhận xét:

Điểm:

Bằng số:

Bằng chữ:

XÁC NHẬN CỦA LÃNH ĐẠO KHOA

(Chức vụ, ký, ghi rõ họ tên) GIÁO VIÊN HƯỚNG DẪN(Ký, ghi rõ họ tên)

Trang 5

MỤC LỤC

MỞ ĐẦU 1

+ Công cụ dành cho trang web: 3

CHƯƠNG 1 4

1.1 Giới thiệu công ty 4

1.2 Quy mô, chức năng : 5

1.3 Mô tả: 5

1.4 Nội dung thực tập: 6

CHƯƠNG 2 7

2.1/ Cơ sở lý thuyết: 7

2.1.1 Giới thiệu về ASP.NET MVC 5: 7

CHƯƠNG 3 11

3.1/Phân tích yêu cầu: 11

3.1.1.Chức năng: 11

3.1.2.Yêu cầu đặt ra: 11

3.2/Thiết kế cơ sở dữ liệu: 12

3.3/ Giới thiệu trang website Shop Hoa, mô tả chức năng chính GUI customer (giao diện khách hàng) 17

CHƯƠNG 4 69

TÀI LIỆU THAM KHẢO 71

- PagedList : http://khiemnguyen.xyz/phan-trang-asp-net-mvc-pagedlist/ 71

Trang 7

Language Integrate Query (LINQ) Ngôn ngữ truy vấn tích hợp

Trang 8

Hình 2-2: Mô hình tuần tự của MVC.

Hình 3.1: Sơ đồ mô hình quan hệ trong database

Hình 3.2: Giao diện trang chủ

Hình 3.4: Menu ngang phân theo chủ đề Thiệp

Hình 3.5: Footer trang web

Hình 3.6: Khung tìm kiếm ở header trang

Hình 3.7: Kết quả hiển thị ở body trang

Hình 3.8: Nút đăng ký cho khách hàng chưa có accout

Hình 3.9: GUI đăng ký

Hình 3.10: Lỗi khi khách hàng nhập không đúng trường hoặc không đủ trường.Hình 3.11: Mẫu đăng ký đủ trường

Hình 3.12: GUI login (Đăng nhập) sau khi đăng ký thành công

Hình 3.13: Lời chào hiển thị người đang đăng nhập

Hình 3.14: Nút xem chi tiết một mặt hàng

Hình 3.15: Nút đặt hàng ngay trong trang xem chi tiết

Hình 3.16: Hiển thị ở icon giỏ hàng số sản phẩm khách hàng đã đặt

Hình 3.17: GUI hiển thị giỏ hàng

Hình 3.18 + 3.19: Nút đặt ngay không cần xem chi tiết hoa

Hình 3.20: Trường hợp đặt 2 sản phẩm khác loại giỏ hàng tăng lên 2

Hình 3.21: Cập nhập giỏ hàng với 2 sản phẩm

Hình 3.22: Nút “ + “ và “ –“ số lượng sản phẩm

Hình 3.23: Nút tăng sản phẩm cập nhập lại ngay trên GUI giỏ hàng

Trang 9

Hình 3.24: Số lượng sản phẩm hiển thị tương tác với nút tăng.

Hình 3.25: Nút giảm sản phẩm cập nhập lại ngay trên GUI giỏ hàng

Hình 3.26: Số lượng sản phẩm hiển thị tương tác với nút giảm

Hình 3.27: Nút xóa hoàn toàn sản phẩm đó khỏi giỏ hàng

Hình 3.28: Sau khi xóa một sản phẩm khác loại trong giỏ hàng có 2 sản phẩmHình 3.29: Khung Total (tổng tiền)

Hình 3.30: Tổng total sau khi cập nhập lại giỏ hàng

Hình 3.32: GUI thanh toán cho khách hàng có accout

Hình 3.33: Chọn phương thức thanh toán

Hình 3.34: Review (xem lại) hóa đơn đã đặt

Hình 3.35: Nút nhận báo giá gửi đơn về admin

Hình 3.36: GUI đăng ký thành công sau khi khách hàng điền đủ thông tin.Hình 3.37: Đơn hàng đã được cập nhập và lưu trong db

Hình 3.38: Nhận diện Id khách có Accout đã đăng ký

Hình 3.39: Thông tin khách hàng không có accout lưu ở User2

Hình 3.40: Nhận diện Id khách không có accout User2

Hình 3.41: Gui Admin

Hình 3.42: Danh sách đơn hàng đã được gửi về admin

Hình 3.43: Danh sách hóa đơn cho một đơn hàng

Trang 12

MỞ ĐẦU

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

Hiện nay việc thiết kế một trang web ASP.NET rất dễ dàng, chúng ta có thể tìmtài liệu trên mạng, tham khảo các project để nghiên cứu và xây dựng Bởi vì doMicrosoft muốn tạo ra một công cụ để người sử dụng có thể dễ dàng làm việc và xâydựng một trang web nhanh chóng nhất, ASP.NET MVC Webform được thiết kế để thựchiện những điều đó

ASP.NET Webform được thiết kế để người dùng cảm thấy như mình đang thiết

kế một chương trình Windows Form vậy , bằng cách kéo thả các button, tự sinh codeHTML, đơn giản, dễ hiểu, … Chính vì thế nền tảng ASP.NET Webform dù đã ra đờicách đây hơn 10 năm nhưng hiện nay vẫn đang sử dụng rộng rãi

Tuy nhiên ưu điểm của ASP.NET Webform đôi khi lại chính là nhược điểm của

nó, chính là không có sự phân rõ rang giữa giao diện và code xử lý, nên ngay trongtrang giao diện lại có câu lệnh truy vấn sql Chính cái tiện lợi là một tính năng nào đóđược xây dựng thì trong đó có cả mã HTML, CSS, Javascript, lệnh xử lý sự kiện….Đến khi chúng ta cần thay thế hoặc nâng cấp một chức năng nào đó thì rất rắc rối Đểgọi là khắc phục những nhược điểm của ASP.NET Webform, năm 2007 Microsoft đãcho ra đời nền tảng ASP.NET MVC

ASP.NET MVC là một lựa chọn thay thế cho ASP.NET Webform, được xâydựng với 3 lớp chính, lớp giao diện (Views), lớp điều khiển(Controllers) và lớp dữ liệu(Models) Việc chia một trang web thành nhiều lớp như thế này giúp cho những lậptrình viên có kinh nghiệm có thể xây dựng một trang website với cấu trúc chặt chẽ, rõrang Với cấu trúc 3 lớp như thế này, việc nâng cấp hoặc thay thế một chức năng nào

đó trở nên hết sức dễ dàng, đồng thời việc kiểm thử cũng trở nên đơn giản hơn

Với những ưu điểm trên, trong tương lai chắc chắn ASP.NET MVC sẽ là mộtnền tảng chính trong việc xây dựng và phát triển một trang website ASP.NET Tuynhiên vì đây là một công nghệ mới, nên tại Việt Nam hầu như chưa được áp dụng

Trang 13

nhiều, cũng có rất ít bạn sinh viên biết tới mô hình này Chính vì thế, em đã mạnh dạnchọn đề tài nghiên cứu về MVC 5 để học hỏi kinh nghiệm ở nơi thực tập và chọn làmbài báo cáo kết quả thực tập.

 Mục đích nghiên cứu:

Em nghiên cứu ASP.NET MVC5 nhằm những mục đích sau:

- Học được những kiến thức mới

- Trong quá trình tìm hiểu sẽ giúp em nâng cao khả năng tự học của mình

- Phục vụ cho việc xây dựng trang website mua sách, nhằm mục đích là áp dụngđược những gì đã học được đưa vào thực tế

- Tạo nguồn tài liệu ASP.NET MVC 5 tiếng việt cho những ai cần tìm hiểu

Đối tượng và phạm vy nghiên cứu

Nghiên cứu ASP.NET MVC 5, nghiên cứu các kiến thức liên quan

Phương pháp nghiên cứu:

Nghiên cứu lý thuyết thông qua các ebook được phát hành bởi Microsoft Tìmhiểu những ví dụ trên mạng, từng bước áp dụng vào các chương trình thử nghiệm Sau

đó tổng hợp lại kiến thức và hoàn thành báo cáo và sản phẩm demo

 Ý nghĩa khoa học và thực tiễn của đề tài

- Hiện nay ASP.NET MVC là một công nghệ còn mới tại Việt Nam , có rất nhiềubạn sinh viên chưa được biết đến công nghệ này, đặc biệt là các bạn sinh viên tạitrường thông tin liên lạc Chính vì thế việc hoàn thành bản báo cáo và chươngtrình ứng dụng sẽ giúp ích rất nhiều cho các bạn sinh viên muốn tiếp cận côngnghệ mới một cách nhanh nhất, tại vì hiện tại tài liệu tiếng việt cho ASP.NETMVC là rất hiếm, đồng thời có sẵn một ứng dụng demo sẽ giúp các bạn dễ hiểu

và áp dụng hơn

- ASP.NET MVC có rất nhiều ưu điểm vượt trội, em nghĩ tương lai ASP.NETMVC sẽ dần thay thế ASP.NET Webform trong việc xây dựng website Cho nênviệc tìm hiểu công nghệ này sẽ có tính thực tiễn rất cao, có thể áp dụng ngaybây giờ hoặc trong tương lai

Trang 14

 Phương pháp nghiên cứu:

+ Công cụ dành cho trang web:

 Hiển thị mẫu hoa của shop để khách hàng xem, lựa chọn và mua

 Khách hàng có thể xem được các thông tin , tin tức , khuyến mãi trênshop

 Sau khi khách hàng chọn và đặt hàng trực tiếp trên trang web thì phảihiện được thông tin mua hàng và xem được hóa đơn

Trang 15

CHƯƠNG 1

Giới thiệu về đơn vị thực tập

- Tên công ty: Công ty Công ty TNHH Infodation Việt Nam

- INFOdation Company là công ty cung cấp các giải pháp phần mềm cho

khách hàng và chuyển đổi ý tưởng kinh doanh của khách hàng thành hiện thực

- INFOdation Co., Ltd (IFD), thành lập năm 2008 bởi Jan Bouw, Chi

Mai và Gerrit Mulder, với văn phòng chính tại Bodegraven (Hà Lan) và chi nhánh tại Nha Trang (Việt Nam)

- Giám đốc công ty: Nguyễn Duy Thông

- Logo công ty:

Hình 1.1: logo cty

- Địa chỉ công ty: : 50 Lê Thánh Tôn, Lộc Thọ, Thành phố Nha Trang, KhánhHòa

Trang 16

- Thời gian làm việc của công ty:

- Lương thưởng cạnh tranh theo năng lực

- Cơ hội thăng tiến rộng mở

- Các chương trình đào tạo xuất sắc

- Đánh giá nhân viên công bằng

- BHXH, BHYT & BH thất nghiệp

- Môi trường làm việc tiện nghi, thoải mái

- Đội ngũ nhân viên năng động, làm việc với tinh thần đồng đội cao

Trang 17

Hình 1.2: Mô hình phân cấp các phòng ban.

 Phòng kỹ thuật:

- Phân tích và thiết kế các chức năng của các dự án tùy theo nhu cầu của kháchhàng

- Lập trình website với các ngôn ngữ như c#, Java, Php, Ruby, lập trình mobile

- Sửa lỗi phản hồi từ nhóm testing

Trang 18

- Thực hiện một số chức năng khác khi được Giám đốc giao.

Tên đề tài: Xây Dựng Trang Web Bán Hoa Bằng Công Nghệ MVC5

 Nôi dung :

- Tìm hiểu về công nghệ ASP.NET MVC5

- Xây dựng cơ sở dữ liệu trên Microsoft SQL Server 2012

- Xây dựng một trang web sử dụng công nghệ ASP.NET MVC5

- Upload Website chạy bằng Localhost

- Sản Phẩm : WebSite Bán Hoa

 Rút ra một số hoạt động trong quá trình thực tập

- Thời gian làm việc của công ty: buổi sáng từ 7h30 đến 11h30, buổi chiều từ13h30 đến 17h

- Buổi sáng các nhân viên sẽ bắt đầu phiên làm việc theo quy định số giờ chomột mục bất kì của dự án đang code team khi song từng phần thì họ sẽ đẩylên kho dự án mã nguồn mở của team nhân viên đó ( thông thường 1 team có

5 -6 người chuyên biệt về nhiệm vụ của team đó trong dự án)

- Trong quá trình học hỏi và tìm hiểu sinh viên thực tập sẽ có cơ hội làm việc,cũng như định hướng cho việc mình sẽ theo sau khi ra trường

- Hiểu được vai trò của các team trong một dự án chung (dev, tester, PM,…)làm về những mảng nào , áp dụng kiến thức chuyên ngành của sinh viên chotừng mảng một cách hiệu quả

Trang 19

CHƯƠNG 2

Tổng quan về hướng thực tập, cơ sở lý thuyết của báo cáo thực tập

2.1/ Cơ sở lý thuyết:

2.1.1 Giới thiệu về ASP.NET MVC 5:

Asp.Net MVC là một Framework sử dụng Net Framework cho việc phát triển ứng dụng web động, trước khi Asp.Net MVC ra đời, lập trình viên sử dụngcông nghệ Asp.Net Web Form trên nền tảng Net Framework để phát triển ứng dụng web động

Asp.Net MVC phát triển trên mẫu thiết kế chuẩn MVC, cho phép người

sử dụng phát triển các ứng dụng phần mềm MVC là tên một mẫu phát triển ứng

dụng, phương pháp này chia nhỏ một ứng dụng thành ba thành phần để cài đặt, mỗi thành phần đóng một vai trò khác nhau và ảnh hưởng lẫn nhau, đó là

models, views, và controllers

 Kiến trúc của mô hình MVC

Trong kiến trúc MVC, một đối tượng đồ họa người dùng (GUIComponent) bao gồm 3 thành phần cơ bản: Model, View, và Controller.Model

có trách nhiệm đối với toàn bộ dữ liệu cũng như trạng thái của đối tượng đồ họa.View chính là thể hiện trực quan của Model, hay nói cách khác chính là giaodiện của đối tượng đồ họa Và Controller điều khiển việc tương tác giữa đốitượng đồ họa với người sử dụng cũng như những đối tượng khác

Trang 20

Hình 2.2: Các thành phần chính của mô hình MVCKhi người sử dụng hoặc những đối tượng khác cần thay đổi trạng thái của đốitượng đồ họa, nó sẽ tương tác thông qua Controller của đối tượng đồ họa.Controller sẽ thực hiện việc thay đổi trên Model Khi có bất kỳ sự thay đổi nàoxảy ra ở Model, nó sẽ phát thông điệp (broadcast message) thông báo cho view

và Controller biết Nhận được thông điệp từ Model, View sẽ cập nhập lại thểhiện của mình, đảm bảo rằng nó luôn là thể hiện trực quan chính xác của Model.Còn Controller, khi nhận được thông điệp từ Model, sẽ có những tương tác cầnthiết phản hồi lại người sử dụng hoặc các đối tượng khác

Trang 21

Hình 2.3: Mô hình tuần tự của MVC

Ví dụ:

Lấy ví dụ một GUI Component (thành phần đồ họa người dùng) đơn giản

là Checkbox Checkbox có thành phần Model để quản lý trạng thái của nó làcheck hay uncheck, thành phần Controller để xử lý những sự kiện khi có sựtương tác của người sử dụng hoặc các đối tượng khác lên Checkbox

Khi người sử dụng nhấn chuột vào Checkbox, thành phần Controller củaCheckbox sẽ xử lý sự kiện này, yêu cầu thành phần Model thay đổi dữ liệu trạngthái Sauk hi thay đổi trạng thái, thành phần Model phát thông điệp đến thànhphần View và Controller Thành phần View của Checkbox nhận được thông điệp

sẽ cập nhập lại thể hiện của Checkbox, phản ánh chính xác trạng thái Checkbox

do Model lưu giữ Thành phần Controller nhận được thông điệp do Model gởitới sẽ có những tương tác phản hồi với người sử dụng nếu cần thiết

 Đặc điểm của mô hình MVC

Cái lợi ích quan trọng nhất của mô hình MVC là nó giúp cho ứng dụng dễ bảotrì, module hóa các chức năng, và được xây dựng nhanh chóng MVC tách cáctác vụ của ứng dụng thành các phần riêng lẽ model, view, controller giúp cho

Trang 22

việc xây dựng ứng dụng nhẹ nhàng hơn Dễ dàng thêm các tính năng mới, vàcác tính năng cũ có thể dễ dàng thay đổi MVC cho phép các nhà phát triển vàcác nhà thiết kế có thể làm việc đồng thời với nhau MVC cho phép thay đổitrong 1 phần của ứng dụng mà không ảnh hưởng đến các phần khác.

Sở dĩ như vậy vì kiến trúc MVC đã tách biệt (decoupling) sự phụ thuộcgiữa các thành phần trong một đối tượng đồ họa, làm tăng tính linh động(flexibility) và tính tái sử dụng (reusebility) của đối tượng đồ họa đó Một đốitượng đồ họa bấy giờ có thể dễ dàng thay đổi giao diện bằng cách thay đổi thànhphần View của nó trong khi cách thức lưu trữ (Model) cũng như xử lý(Controller) không hề thay đổi

Tương tự, ta có thể thay đổi cách thức lưu trữ (Model) hoặc xử lý(Controller) của đối tượng đồ họa mà những thành phần còn lại vẫn giữ nguyên

Chính vì vậy mà kiến trúc MVC đã được ứng dụng để xây dựng rất nhiềuframework và thư viện đồ họa khác nhau Tiêu biểu là bộ thư viện đồ họa củangôn ngữ lập trình hướng đối tượng SmallTalk (cũng do Xerox PARC nghiêncứu và phát triển vào thập niên 70 của thế kỷ 20) Các Swing Components củaJava cũng được xây dựng dựa trên kiến trúc MVC Đặc biệt là nền tảngASP.NET MVC Framework sẽ được em trình bày ở chương này

CHƯƠNG 3

Kết quả thực tế tại nơi thực tập

3.1/Phân tích yêu cầu:

3.1.1.Chức năng:

Trang 23

Là một trang web bán hoa và giới thiệu các sản phẩm của shop đến khách hàng với giá cả hợp lý, shop có các chức năng như sau:

- Cho phép cập nhập mẫu hoa vào CSDL

- Danh sách số lượng hoa theo từng loại

- Hiển thị các mẫu hoa mà khách hàng đã chọn mua

- Hiển thị thông tin khách hàng

- Quản lý đơn đặt hàng

- Xử lý đơn đặt hàng

- Thống kê số lượng khách hàng mua trong ngày

3.1.2.Yêu cầu đặt ra:

a Yêu cầu của trang web :

 Phần khách hàng :

- Là những người có nhu cầu mua sắm, họ sẽ tìm kiếm các mặt hàng từ hệ thống và đặt mua các mặt hàng Vì vậy trang web phải có các chức năng sau:

 Hiển thị mẫu hoa của shop để khách hàng xem, lựa chọn và mua

 Khách hàng có thể xem được các thông tin , tin tức , khuyến mãi trên shop

 Sau khi khách hàng chọn và đặt hàng trực tiếp trên trang web thì phải hiện được thông tin mua hàng và xem được hóa đơn

 Phần quản trị :

Trang 24

- Kiểm soát mọi hoạt động của trang web, Admin phải cung cấp UserName,PassWord để đăng nhập và đăng xuất vào hệ thống,chức năng của hệ thống

- Thực hiện các chức năng thêm, sửa, xóa ………

3.2/Thiết kế cơ sở dữ liệu:

MoTaChiTiet Nvarchar(200) No Mô tả chi tiết

Trang 25

thanh toán

- Table hóa đơn :

Trang 26

Email Varchar(50) No Email nhà cung

cấp

hàng / sản phẩm

- Table User2( khách vãng lai)

Trang 27

- Table tin bài

- Table tin tức :

- Mô hình EF:

Trang 28

Hình 3.1: Sơ đồ mô hình quan hệ trong database

Bảng HoaDonDonHang là tượng chưng cho mối quan hệ một nhiều của bảng HoaDon và bảng DonHang

Ví Dụ: Khách hàng A mua một bó hoa ngày đầu , cũng anh A lại mua lần 2,3…những lần mua shop sẽ xuất ra một hóa đơn tương ứng với số lần mua nhưng

để có thể thuận tiện cho Admin giải quyết đơn hàng thì sẽ có một đơn hàng gồm nhiều hóa đơn chỉ cho anh A

3.3 Giới thiệu trang website Shop Hoa, mô tả chức năng chính GUI customer (giao

diện khách hàng)

Trang 29

Hình 3.2: Giao diện trang chủ.

* Trong giao diện Home (Trang chủ) có phần

+ Header chứa thông tin shop như:

- Email: hòm thư điện tử của shop dùng để liên hệ cho khách hàng và đối tác(mục đích khi khách hàng muốn liên hệ đặt hoa cho các event lớn khách hàng sẽgửi thư để hẹn trước lịch, chọn loại hoa trước hoặc với đối tác ở các farm hoanhập khẩu hoa từ nước ngoài)

- Số điện thoại: đường dây nóng cho khách hàng đặt hàng online muốn hủy đơngấp mà không liên hệ được với chủ shop qua hòm thư hay nhắn tin hoặc điềuchỉnh thông tin chuyển hàng

- Icon thương hiệu của shop

- Menu ngang đường tắt tới trang chủ, trang liên hệ, trang giới thiệu shop, menudọc giới thiệu nhóm sản phẩm hoa hướng tới đối tượng mua hàng theo ngày lễcần tham khảo và tư vấn về giá

- Banner quảng cáo bằng hình ảnh các mặt hàng đang được sale trong các ngày

<headerid="header">

<! header >

<divclass="header_top">

<! header_top >

Trang 30

<divclass="container">

<divclass="row">

<divclass="col-sm-6">

<divclass="contactinfo">

<ulclass="nav nav-pills">

<li><ahref="#"><iclass="fa

<divclass="row">

<divclass="logo pull-left">

<ahref="index.html"><img

<divclass="shop-menu pull-right">

<ulclass="nav navbar-nav">

<li><ahref="@Url.Action("Checkoutbill", "Checkout")"><i

class="fa fa-shopping-cart"></i> Giỏ hàng</a><span>@Session["count"]</span></li>

<li>@Html.ActionLink("Đăng Ký", "SignUp", "Admin")</li>

@if(string.IsNullOrWhiteSpace(HttpContext.Current.User.Identity.Name)) {

<li>@Html.ActionLink("Đăng Nhập", "Login", "Admin")</li>

Trang 31

<divclass="row">

<divclass="navbar-header">

<buttontype="button"class="navbar-toggle"data-toggle="collapse"

data-target=".navbar-collapse">

<spanclass="sr-only">Toggle navigation</span>

<spanclass="icon-bar"></span>

</button>

</div>

<divclass="mainmenu pull-left">

<ulclass="nav navbar-nav collapse navbar-collapse">

<li><ahref="@Url.Action("Index", "Home")"class="active">Trang Chủ</a></li>

<li><ahref="@Url.Action("Introduce", "Home")"class="active">Giới thiệu</a></li>

@*<li><a href="">Giới thiệu</a></li>*@

<liclass="dropdown">

<ahref="#">Danh Mục<iclass="fa fa-angle-down"></i></a>

<ulrole="menu"class="sub-menu">

Trang 32

<li>@Html.ActionLink("Hoa Tặng Bố Mẹ", "ListCustomer", "Product", new

<divclass="search_box pull-right">

@using (Html.BeginForm("ListCustomer", "Product", FormMethod.Get))// lệnh tạo form từ razor view

+ Body chứa danh sách sản phẩm theo chủ đề, theo nhóm

- Theo hoa nổi bật: hoa được tiêu thụ nhiều trong tuần, trong tháng, trong ngày

- Theo hoa sale off: hoa đang được giảm giá

Ngoài ra còn có body left chứa menu theo chủ đề Bó, hộp, Thiệp, Giỏ kiểusản phẩm tùy theo sở thích của khách hàng

Trang 33

Hình 3.3: Menu ngang phân theo chủ đề Bó.

 Lọc theo chủ đề sản phẩm

Hình 3.4: Menu ngang phân theo chủ đề Thiệp

Lọc theo phụ kiện đi kèm với hoa tạo thuận lợi cho khách hàng

Code demo:

Trang 34

<divclass="row">

<divclass="left-sidebar">

<divclass="panel-group category-products"id="accordian">

<! category-productsr >

<divclass="panel panel-default">

<divclass="panel-heading">

Trang 35

<imgsrc="images/home/shipping.jpg"alt=""/>

<divclass="col-sm-9 padding-right">

<divclass="features_items">

@foreach (var item in Model)

{

<divclass="product-image-wrapper">

<divclass="single-products">

<divclass="productinfo text-center">

<imgsrc="~/Upload/@item.Image"alt=""/>

<h2>@Html.DisplayFor(modelItem => item.Gia)</h2>

<p><b>Mã SP :</b> @Html.DisplayFor(modelItem =>

item.Ma)</p>

<p><spanstyle="color:

blue"><strong>@Html.DisplayFor(modelItem =>

item.Ten)</strong></span></p>

<ahref="@Url.Action("Add", "Checkout",item)"class="btn btn-default add-to-cart"><iclass="fa fa-shopping-cart"></i>Đặt Hàng</a>

<divclass="btn btn-default add-to-cart"><iclass="fa

fa-info"></i>@Html.ActionLink("Xem Chi Tiết", "ProductDetail", "Product",

new { sanphamId = item.Id }, null)</div>

</div>

Trang 36

</div>

} <divclass="pagination">

Hình 3.5: Footer trang web

 Code demo:

<! Footer >

<divclass="footer-top">

<divclass="row">

<divclass="companyinfo">

<h2><span>The</span>Flower Shop</h2>

<p>Thế giới muôn hoa :) Shop tin rằng flower làm nên cuộc sống, Còn bạn ? ===> WELCOME THE FLOWER SHOP</p>

</div>

<divclass="video-gallery text-center">

<ahref="https://www.youtube.com/watch?v=M03tfDEAijc">

<divclass="iframe-img">

<imgsrc="~/Content/Customer/images/home/anh1.jpg"alt=""/>

</div>

Trang 37

<divclass="overlay-icon">

<iclass="fa fa-play-circle-o"></i>

<ahref="https://youtu.be/5J8eqWyOCec">

</div>

<ahref="https://youtu.be/kbF3wmw9Jnk">

<imgsrc="~/Content/Customer/images/home/anh3.png"alt=""/>

</div>

Trang 38

<ahref="https://youtu.be/3SCs8VYw2vw">

</div>

<divclass="address">

<imgsrc="~/Content/Customer/images/home/map.png"alt=""/>

<p>FLOWER IN THE WORLD</p>

<divclass="footer-widget">

<divclass="row">

</div>

<divclass="footer-bottom">

<divclass="row">

<pclass="pull-right">Designed by <span><atarget="_blank"

href="http://www.themeum.com">Themeum</a></span></p>

</div>

Trang 39

</footer><! /Footer >

 Chức năng tìm kiếm sản phẩm :

- Lọc theo tên tùy biến x

Hình 3.6: Khung tìm kiếm ở header trang

Trang 40

Hình 3.7: Kết quả hiển thị ở body trang.

 Code demo:

+ Controller: ProductController

public ActionResult ListCustomer(int chuDeId = 0, string searchText = "", int

NhomSanPhamId = 0, int page = 1)

<divclass="search_box pull-right">

@using (Html.BeginForm("ListCustomer", "Product", FormMethod.Get))// lệnh tạo form từ razor view

Định dạng
Số trang	82
Dung lượng	5,66 MB