Đồ án Website quản lý đặt món trực tuyến

Xây dựng một hệ thống bán bánh trực tuyến đơn giản, thân thiện, dễ sử dụng, cho phép khác hàng xem thông tin và đặt hàng qua mạng, người quản trị quản lý các thông tin về sản phẩm cũng n

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

BÁO CÁO MÔN HỌC

Đồ án 2

Đề tài: Website quản lý đặt món trực tuyến

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

, ngày tháng ……… năm 2020

Người nhận xét (Ký tên và ghi rõ họ tên)

LỜI CẢM ƠN

Trong quá trình làm bài báo cáo, em đã nhận được sự giúp đỡ,đóng góp ý kiến và chỉ bảo nhiệt tình của thầy cô, gia đình và bạn bè

Em xin gửi lời cảm ơn chân thành đến cô Nguyễn Thị Thanh Trúc

- giảng viên khoa Công nghệ phần mềm - Trường ĐH CNTT- ĐHQG

Tp HCM người đã tận tình hướng dẫn, góp ý và chỉ bảo em trong suốtquá trình làm báo cáo

Ngoài ra, em cũng xin gửi lời cảm ơn đến những thầy cô giáotrong trường ĐH CNTT- ĐHQG Tp HCM nói chung, các thầy cô trongKhoa Công nghệ phần mềm nói riêng đã dạy dỗ cho em kiến thức về lậptrình, qua đó em có được cơ sở lý thuyết vững vàng và từ đó hoàn thànhtốt đồ án

Cuối cùng, em xin chân thành cảm ơn gia đình và bạn bè, đã luôn tạođiều kiện, quan tâm, giúp đỡ, động viên em trong suốt quá trình hoànthành đồ án

Thành phố Hồ Chí Minh, ngày 19 tháng 12 năm 2020

1 Phân tích đánh giá hướng nghiên cứu của các tác giả khác (Now,

4 Các vấn đề cần tập trung nghiên cứu và giải quyết của đề tài 19

5.5 Thành phần cơ bản của SQL Server 50

tử nơi khách hàng chỉ cần truy cập trang web, xem sản phẩm, thêm nó vào giỏ hàng và trả tiền Sau đó, các đơn đặt hàng đã mua sẽ được

chuyển đến đích được đề cập đúng hạn

Ngoài ra, ứng dụng web thương mại điện tử cho phép khách hàng đăng

và gửi phản hồi của họ về một số yếu tố như về sản phẩm, dịch vụ giao hàng và dịch vụ thương mại điện tử Bằng cách cung cấp loại phản hồi này, công ty sẽ có thể cải thiện dịch vụ của họ và cải thiện họ tốt hơn, vì việc giữ liên lạc với khách hàng là rất cần thiết để biết thời gian ý kiến của khách hàng

2 Đặt vấn đề:

Cửa hàng thức ăn nhanh Bakery là một cửa hàng chuyên phục vụ các loại thức ăn nhanh cho người bận rộn như Pizza, Hamburger, Chicken Fried, … với những nguyên liệu chất lượng và vệ sinh Cơ cấu công ty gồm: Ban quản lí, Bộ phận kế toán, bộ phận bán hàng, bộ phận sản xuất,

bộ phận kho và chuyển hàng

Khách hàng của cửa hàng gồm hai loại chính: khách hàng thành viên (khách hàng đã làm thẻ thành viên của cửa hàng) và khách hàng vãng lai Đối với khách hàng thành viên sẽ có những ưu đãi riêng

Với nhu cầu mở rộng thị trường đặc biệt là với mảng kinh doanh online cũng như quảng bá sản phẩm và nâng cao chất lượng, tăng doanh thu là vấn đề đáng quan tâm của cửa hàng Vì vậy ban quản lý cửa hàng mong muốn một website giới thiệu sản phẩm và bán bánh trực tuyến, cũng như

hỗ trợ khách hàng các thông tin cần thiết

3.1 Đối tượng của website

Website được xây dựng phục vụ hai đối tượng chính là Admin (nhà quản trị) và Khách hàng với các chức năng sau:

Website được thiết kế với

● Giao diện hài hoà, thân thiện, giúp người dùng dễ dàng sử dụng

● Trang chủ sẽ hiển thị danh sách các sản phẩm mới nhất và bán chạy nhất giúp cho người dùng có thể dễ dàng hơn trong việc tìm kiếm

● Khách hàng có thể dễ dàng tìm thấy thông tin chi tiết các loại bánh mà họ quan tâm

● Khách hàng có thể chọn mua các loại bánh mà họ cần dựa trên khả năng tài chính và chức năng cần thiết bằng cách thêm vào giỏ hàng

● Có chức năng đăng ký, đăng nhập.

Khách hàng có thể gửi ý kiến phản hồi, góp ý đến Website để góp phần làm Website thêm phong phú và phát triển

Xây dựng một hệ thống bán bánh trực tuyến đơn giản, thân thiện, dễ sử dụng, cho phép khác hàng xem thông tin và đặt hàng qua mạng, người quản trị quản lý các thông tin về sản phẩm cũng như người dùng

Các module:

● Module sản phẩm

Hiển thị thông tin và phân loại sản phẩm trong gian hàng ảo Sản phẩm hiển thị lên website sẽ được hiển thị đầy đủ thông tin về sản phẩm đó như: hình ảnh, tên sản phẩm, đặc điểm nổi bật của sản phẩm,  giá,

● Module giỏ hàng

Khi tham khảo đầy đủ thông tin về sản phẩm khách hàng có thể đặt mua sản phẩm ngay tại Website thông qua chức năng giỏ hàng mà không cần phải đến địa điểm giao dịch, giỏ hàng được làm mô phỏng như giỏ hàng trong thực tế có thể thêm, bớt, thanh toán tiền các sản phẩm đã mua Khichọn thanh toán giỏ hàng khách hàng phải ghi đầy đủ các thông tin cá nhân, thông tin này được hệ thống lưu trữ và xử lý

● Module đăng ký thành viên và đăng nhập hệ thống

Mỗi khách hàng giao dịch tại Website sẽ được quyền đăng ký môt tài khoản riêng Tài khoản này sẽ được sử dụng khi hệ thống yêu cầu Một tài khoản do khách hàng đăng ký sẽ lưu trữ các thông tin cá nhân của khách hàng

● Module tìm kiếm sản phẩm, tin tức, tư vấn

Khách hàng sẽ được cung cấp chức năng tìm kiếm trên Website

● Trang tin tức:

Tư vấn cho khách hàng muốn tìm hiểu về công thức và cách thức làm bánh…

● Trang giới thiệu:

Giới thiệu các thông tin về về cửa hàng, phương châm bán hàng…

● Trang liên hệ:

Khách hàng có thể liên hệ với nhân viên bán hàng về các thắc mắc, ý kiến của mình

● Module quản lý sản phẩm, đơn hàng

Người quản trị có thể cập nhật thông tin các mặt hàng, loại hàng, quản lýthông tin đơn hàng

● Module khác

3 Đối tượng nghiên cứu

- Đối tượng nghiên cứu: các chức năng cần có của một website đặt món

- Khách thể nghiên cứu: Các ứng dụng và đặt món như Now, GrabFood, Baemin, Go-Food

5 Phương phát nghiên cứu:

Sử dụng phương phát nghiên cứu thu thập thông tin:

⮚ Đọc tài liệu về các vấn đề và cách giải quyết cùng đề tài nghiên cứu của các tác giả khác

⮚ Đọc về công nghệ được áp dụng để giải quyết các vấn đề

⮚ Khảo sát người dân xung quanh về các vấn đề của nghiên cứu

1.1.2 Thanh toán

Ứng dụng sẽ liên kết với các loại ví điện tử như momo, airpay, hoặc liên kết tài khoản ngân hàng để thanh toán trực tuyến Tích hợp thêm hình thích Cash on delivery (COD) để tạo sự đa dạng Nếu có thể tạo thêm một ví điện tử riêng cho ứng dụng như ví Moca của Grab

1.1.3 Quản lí các loại dữ liệu của người sử dụng

Ứng dụng sẽ yêu cầu người dùng tiến hành đăng ký tài khoản để tạo cơ

sở dữ liệu để lưu trư các thông tin như thông tin cá nhân, thông tin thanhtoán, thông tin hóa đơn và các phản hồi của người dùng Đối với người dùng là khách vãng lai có thể sử dụng bộ nhớ đệm (cache) để tiến hành lưu thông tin đặt món

1.1.4 Gửi phản hồi

Người dùng có thể phản hồi định danh hoặc nặc danh (nếu muốn) về cácvấn đề như chất lượng sản phẩm, thái độ nhân viên, ý kiến đóng góp, …

1.1.5 Xử lí hóa đơn

Ứng dụng sẽ gửi thông tin hóa đơn cho bộ phận xử lí thông tin để tiến hành kiểm tra và liên lạc đến các quán ăn, cửa hàng để lên món đồng thời liên lạc đến bộ phần vận chuyển

1.1.6 Vận chuyển

Bộ phận vận chuyển sẽ gửi thông tin hóa đơn cho nhân viên để nhân viên tiến hành tiếp nhận món và di chuyển đến chỗ khách hàng

1.2 Những phương pháp nghiên cứu đã được sử dụng

1.2.1 Phương pháp thu thập thông tin:

⮚ Tiến hành khảo sát về sự thay đổi về hành vi tiêu dùng của khách hàng

⮚ Đọc tài liệu về sự phát triển công nghệ, về sự tăng trưởng kinh tế trong lĩnh vực đặt hàng online

⮚ Nắm bắt xu hướng của xã hội

1.2.2 Phương pháp xử lý thông tin:

⮚ Phân tích các dữ liệu về người tiêu dùng như thu nhập bình quân, nhu cầu sinh hoạt, ăn uống, … để đưa ra mức giá dịch vụ hợp lí

⮚ Phân tích các dữ liệu về sự tăng trưởng kinh tế của lĩnh vực nhằm đưa ra quy mô triển khai, kinh phí quảng cáo, các loại ưu đãi đưa

ra nhằm thu hút khách hàng, tiềm năng phát triển của ứng dụng, …

1.3 Kết quả đạt được:

- Kết quả đạt được của các ứng dụng khá tương đồng nên báo cáo chỉ nêu ra những điểm nổi bật của các ứng dụng

⮚ Giao diện app trực quan, người dùng có thể ghi chú, hoặc thêm topping theo từng món.

⮚ Có nhiều phương thức thanh toán như ví điện tử AirPay, thanh toán thẻ.

⮚ Thường xuyên có nhiều ưu đãi riêng cho từng quán

⮚ Hỗ trợ đặt nhóm

⮚ Khung giờ hoạt động 24/7

⮚ Xây dựng đội ngũ shipper chuyên nghiệp (thùng giữ nhiệt, đồng phục, )

⮚ Có thể sử dụng ở nhiều quốc gia trong khu vực Đông Nam Á

⮚ Có tích hợp liên kết ví điện tử Moca ngay trong app

⮚ Có nhiều chương trình khuyến mãi dành cho từng thành viên, cấp

độ khác nhau

⮚ Xử lí và giải quyết, chăm sóc khách hàng tốt khi gặp vấn đề

⮚ Nhằm thu hút được nhiều người dùng, mức phí giao hàng của Grabkhá rẻ so với thị trường

⮚ Shipper có trách nhiệm với đơn, ở Grab là đa phần tài xế là người lớn tuổi, đối xử với khách hàng tốt, khi giao có trách nhiệm với đơn, chất lượng món ăn khi giao đến cũng được đảm bảo hơn

⮚ Bạn có tích điểm sau mỗi lần sử dụng dịch vụ và dùng điểm để đổi quà hay voucher

⮚ Khung giờ hoạt động 24/7

1.3.3 Go-Food

⮚ Số lượng quán ăn nhiều, dễ lựa chọn

⮚ Công cụ tìm kiếm của app rất linh hoạt, bạn thèm món gì, nhập tênmón đó, app sẽ tìm ra những quán bán đúng món bạn cần tìm Thích hợp với những người lớn tuổi

1.3.4 Baemin

⮚ Giao diện dễ dùng, biểu tượng mình hoạ đẹp

⮚ Nhiều ưu đãi lớn chất lượng, giảm 50-60%, giảm tối đa 50.000 - 80.000

⮚ Thông báo cập nhật đơn hàng đẹp

⮚ Thời gian xác nhận đơn còn chậm, shipper vẫn còn tình trạng lựa đơn Để mình nói rõ hơn về việc lựa đơn, vì giá ship cho từ 1-5km

là 15.000đ, dù nhận đơn 1km hay 3km thì giá vẫn như nhau, nên rất nhiều shipper lựa đơn gần

⮚ Ví AirPay theo mình thì quá nhiều bước và rườm rà, bạn cần phải cài đặt app thanh toán của Now và liên kết thẻ Điều mình không thích là khi đặt đơn ứng dụng sẽ trừ tiền ngay, nên lúc quán hết món hay phát sinh thêm phí thì không thể chỉnh sửa lại giá, và phảiđợi một khoảng thời gian để được hoàn tiền vào thẻ Về điều này thì Grab làm tốt hơn, trừ tiền sau khi đã hoàn thành đơn

2.2 GrabFood:

⮚ Ưu đãi không đồng đều giữa các thiết bị, người dùng Bạn không thể chia sẻ cũng như lấy code của người khác Tuỳ vào phân khúc khách hàng, Grab sẽ có những chương trình khuyến mãi dành riêng

⮚ Dữ liệu quán không nhiều, đa số quán có trên ứng dụng là các quán

ký hợp đồng chiết khấu Và mình thì khó có thể tìm được quán mình thích trên ứng dụng

⮚ Do shipper linh hoạt lựa chọn đơn Food hoặc Bike nên đa phần tài

xế không được trang bị thùng giữ nhiệt

2.3 Go-Food

⮚ Hình ảnh món ăn không thực tế

⮚ Không hỗ trợ thanh toán thẻ, ví điện tử

⮚ Thường xuyên bị huỷ đơn

⮚ Chương trình khuyến mãi không đa dạng

⮚ Không đặt được nhiều đơn cùng lúc

⮚ Shipper không được trang bị thùng giữ nhiệt

2.4 Baemin

⮚ Chưa có nhiều dữ liệu quán

⮚ Không có hình ảnh minh hoạ

⮚ Độ phủ sóng chưa tốt, chỉ tập trung ở các khu vực trung tâm

⮚ Không có phần chatbox để liên lạc khi có nhu cầu chỉnh sửa đơn hàng với shipper

3 Tóm tắt so sánh về kết quả và hạn chế của các nghiên cứu trước

4 Các vấn đề cần tập trung nghiên cứu và giải quyết của đề tài

- Đặt món: hợp tác với các ứng dụng đặt món khác đồng bộ cơ sợ dữ liệu nhằm tăng số lượng món ăn, nếu được nên tạo ra một hệ thống gợi ýkhách hàng sẽ nhập các thông tin như loại hình thức ăn (mì, cơm, ăn vặt, ), hình thức chế biến (chiên, xào, hấp, …), mức giá, …

- Vận chuyển: liên kết với cái ứng dụng đặt xe trực tuyến để tìm ra tài xếtiềm năng về thời gian vận chuyển, quãng đường vận chuyển nhằm giảmchi phí phát sinh cho cả khách hàng và người bán

- Phản hồi: khách hàng có thể gửi phản hồi hoặc ý kiến đóng góp định danh hoặc nặc danh về người quản lý để tiến hành khắc phục

- Giao diện: giao diện và các biểu tượng nên sinh động, đẹp tuy nhiên vẫn phải đảm bảo tính trực quan để người dùng dễ sử dụng

- Hình thức thanh toán: nên có nhiều hình thức thanh toán như qua các

ví điện tử (momo, airpay, viettelpay, zalopay, …), qua liên kết ngân hàng, nếu có thể thì phát triển một ví điện tử riêng cho ứng dụng

- Phần danh sách món: nên có phần nhận xét của khách hàng để có

người dùng có cái nhìn tổng quản nhất về món ăn và nhà hàng

- Hệ thống tri ân khách hàng: tích điểm đổi quà, đổi mã giảm giá, …

Phiên bản ASP.Net đầu tiên được triển khai là 1.0 và phiên bản ASP.Netmới nhất là phiên bản 4.6 ASP.Net được thiết kế để tương thích vớigiao thức HTTP HTTP là giao thức chuẩn được sử dụng trên tất cả cácứng dụng web.

Các ứng dụng ASP.Net có thể được viết bằng nhiều ngôn ngữ Net khácnhau Trong đó có các kiểu ngôn ngữ như C #, VB.Net và J # Một sốnền tảng cơ bản của ASP.NET sẽ được trình bày trong mục dưới đây

ASP viết đầy đủ là Active Server Pages, và NET là viết tắt của NetworkEnabled Technologies

1.2 Cấu trúc của NET framework

⮚ Language/Ngôn ngữ: Có rất nhiều ngôn ngữ lập trình khác nhau tồn

tại trong net framework Các ngôn ngữ này là VB.net và C #, có thểđược sử dụng để phát triển các ứng dụng web

⮚ Library/Thư viện: .NET Framework gồm có một bộ các lớp library

chuẩn Library phổ biến nhất được sử dụng cho các ứng dụng webtrong net là Web library Web library bao gồm tất cả các thành phầncần thiết sử dụng trong phát triển các ứng dụng web-based

⮚ Common Language Runtime/Thời gian chạy ngôn ngữ lập trình

thông thường hay CLR: Common Language Infrastructure - Cơ sở

hạ tầng ngôn ngữ lập trình phổ thông hay CLI là một nền tảng dùng

để chạy các chương trình Net Trong đó, CLR sẽ thực hiện các tác

vụ chính bao gồm xử lý các trường hợp cá biệt và thu gom rác

1.3 Một số đặc điểm của ASP NET framework:

⮚ Code Behind Mode/ Trạng thái code rời

Đây là khái niệm về tách rời thiết kế và mã code Bằng cách tách rời nhưvậy, việc duy trì ứng dụng ASP.Net trở nên dễ dàng hơn Loại file thôngdụng của ASP.Net là aspx Giả sử chúng ta có một trang web có tên làMyPage.aspx, sẽ có một tệp khác có tên là MyPage.aspx.cs biểu thị chophần mã code của trang Bởi vậy, Visual Studio mới tạo ra các tập tinriêng biệt cho mỗi trang web, một cho phần thiết kế và một dành cho mãcode

⮚ State Management/Quản lý trạng thái

ASP.Net có các phương tiện để kiểm soát quản lý trạng thái, trong khiHTTP được biết đến là một giao thức "không trạng thái" Lấy một ví dụ

về ứng dụng giỏ hàng: khi một user đã chọn lựa xong những gì mình

muốn mua và đưa ra đưa ra quyết định mua hàng trên trang web, người

đó sẽ nhấn nút gửi

Ứng dụng cần ghi nhớ các mục mà người dùng đã chọn mua Đây làhành động ghi nhớ trạng thái của một ứng dụng tại một thời điểm tronghiện tại Vì HTTP là giao thức không trạng thái nên khi user truy cập cácweb bán hàng, HTTP sẽ không lưu trữ thông tin trên các giỏ hàng

Do đó, sẽ cần thêm một số thao tác coding bổ sung để đảm bảo các giỏhàng sẽ được chuyển đến trang bán hàng Việc triển khai như vậy có thểtrở nên phức tạp tại một vài thời điểm Nhưng ASP.Net có thể quản lýtrạng thái thay cho bạn nhờ tính năng ghi nhớ giỏ hàng và chuyển cácmục đã được chọn mua qua trang bán hàng

⮚ Caching – Bộ nhớ Cache

ASP.Net cũng có thể thực hiện chức năng của Caching, qua đó cải thiệnhiệu suất làm việc cho ứng dụng Với việc lưu bộ nhớ đệm cache, cáctrang thường xuyên được người dùng yêu cầu có thể được lưu trữ ở một

vị trí tạm thời Các trang này có thể được truy xuất nhanh hơn và ngườidùng có thể nhận được các phản hồi tốt hơn Nhờ vậy, bộ nhớ đệm cóthể giúp cải thiện đáng kể hiệu suất của ứng dụng

Về mặt tổng quan, ASP.Net là một ngôn ngữ phát triển được sử dụng đểxây dựng các ứng dụng web-based và được cấu trúc để hoạt động tươngthích với giao thức HTTP chuẩn

2 Công nghệ ASP NET Webforms

2.1 Thuật ngữ:

Trước khi nói về lý do chọn WebForms, chúng ta cần phải biết sự khác nhau giữa các công nghệ của Microsoft

⮚ NET Framework - Một công nghệ được giới thiệu vào năm 2002,

bao gồm khả năng tạo ra các file thực thi, các ứng dụng web, và các service sử dụng C#, Visual Basic, và F#

⮚ ASP.NET - Một server-side web application framework mã nguồn

mở, là một tập con của NET Framework tập trung cụ thể vào việc xây dựng ứng dụng web, các trang web và web services

⮚ ASP.NET Web Forms - (2002 - đến nay) là một kỹ thuật độc

quyền được phát triển bởi Microsoft để quản lý state và form data trên nhiều trang Bản chất của các trang web là stateless nhưng Microsoft đã chuyển thành các trang stateful bằng cách tạo ra kỹ thuật Web Forms

⮚ ASP.NET MVC - (2008 - đến nay) là một web application

framework mã nguồn mở tuân theo design pattern Controller

Model-View-2.2 Sự khác nhau giữa ASP NET Webforms và ASP NET MVC

Mặc dù các công nghệ này đã có tuổi đời lớn, nhưng chúng đều có

những điểm thuận lợi và bất lợi của nó. 

⮚ Web Forms có ViewState, MVC thì không

Như đã đề cập ở trên, ViewState là một cơ chế quản lý trạng thái cấp trang Nếu bạn có nhiều server-side web control trên một trang,

ViewState của bạn sẽ trở nên cực kỳ lớn Phần mã HTML trả về cho client nên nhỏ nhất có thể, bởi vậy không nên có kích thước biến

ViewState lớn

MVC không có một ViewState Nó sử dụng model/ViewModels để chuyển dữ liệu qua lại giữa các Views

⮚ Web Forms có một Code-Behind Model, MVC chỉ có các

model

Code-Behind là một cách để đính kèm code C# hoặc VB với một trang web và hoạt động dựa trên những hành động cụ thể khi chúng xuất hiện trên trang Khi bạn biên dịch một Web Form có chứa code-behind, nó trở thành một phần của assembly (hay DLL) để tạo ra chức năng của trang web đó

⮚ Web Forms có các Web Control, MVC không có

Có rất nhiều lập trình viên đã phàn nàn rằng MVC không có bất kỳ

server-side control nào cả Điều này là bởi vì họ đã quen thuộc với cách Web Forms làm việc trên một trang Các control luôn có sẵn cho họ sử dụng Cuối cùng, họ bắt đầu xây dựng các custom server control của riêng mình

Trong khi Web Forms có một số lượng lớn các server control, thì MVC lại có một cách tiếp cận khác Sau một thời gian phát triển, các lập trình viên bắt đầu hiểu rõ mô hình MVC và đòn bẩy bởi JavaScript, nơi họ có thể xây dựng các custom control riêng của họ hoặc thậm chí sử dụng một thư viện của bên thứ ba như Bootstrap cho giao diện người dùng

⮚ Web Forms có các thành phần State-aware, MVC sử dụng

hướng tiếp cận template

Đây là lý do tại sao rất khó để chuyển đổi một ứng dụng Web Forms sang một ứng dụng MVC

Trong Web Forms, các lập trình viên đặt các control lên một trang web

và có thể thao tác với những control này trên máy chủ trong

code-behind Các server-side control thậm chí còn giữ được trạng thái của chúng khi ViewState được bật (turned on)

Với MVC, bạn không làm việc với các controls, dữ liệu được xử lý rồi hiển thị lên View Cú pháp Razor trong một View là cực kỳ mạnh mẽ

⮚ Web Forms không có sự tách biệt các mối quan tâm

(separation of concerns), MVC thì ngược lại!

Các lập trình viên tạo ra một Web Form, kéo thả control và viết code xử

lý sự kiện cho control đó Và khi viết như vậy thì logic nghiệp vụ đó sẽ không thể sử dụng lại được cho một ứng dụng khác

Triết lý của MVC với logic nghiệp vụ là "Thin Controllers, Fat Models",

có nghĩa là các model sẽ chứa tất cả các logic nghiệp vụ của bạn trong khi các controller chuyển kết quả dữ liệu từ model tới view

⮚ Web Forms và MVC đều có thể sử dụng Session

Cũng giống như ViewState, Session cũng có nhiều mặt nhược điểm của

nó Trong MVC, có một số cách truyền dữ liệu qua lại giữa các View màkhông cần phải sử dụng đến session. 

⮚ Web Forms không dễ để sử dụng unit-test, MVC được xây

dựng hỗ trợ test

Các lập trình viên web form thường gặp phải một vấn đề Trừ khi các business object của họ được viết cẩn thận, còn nếu không sẽ rất khó viết unit-test

Với MVC, bạn có thể xây dựng test đối với các controller, routes, action results  

⮚ Web Forms có một thẻ Form lớn, MVC có thể có nhiều thẻ

form trên một trang

Web Forms chỉ cho phép có một thẻ form duy nhất ôm lấy tất cả nội dung trang Còn MVC cho phép bạn có nhiều thẻ form trên một trang

2.3 Thuật toán sử dụng:

2.3.1 Kết nối SQL:

File Web.config: Thiết lập kết nối với CSDL

    <add name="Constr" connectionString="Data Source=localhost;Initial Ca talog=Bakery;Integrated Security=SSPI"/>

    <add name="BakeryConnectionString" connectionString="Data Source=loca lhost;Initial Catalog=Bakery;Integrated Security=SSPI"

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStr ings["Constr"].ConnectionString);

      string[] account1 = (string[])Session["Account"];       }

        warningLevel="4" compilerOptions="/langversion:default /

nowarn:1659;1699;1701"/>

      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb"         type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodePr ovider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0 0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

        warningLevel="4" compilerOptions="/langversion:default /

nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+"/>

    </compilers>

  </system.codedom>

    <add name="Constr" connectionString="Data Source=localhost;Initial Ca talog=Bakery;Integrated Security=SSPI"/>

    <add name="BakeryConnectionString" connectionString="Data Source=loca lhost;Initial Catalog=Bakery;Integrated Security=SSPI"

oId, @ProName, @Price, @Status, @ImgUrl, @Description, @CategoryId, @Quan tity)", conn);

3 Công cụ thiết kế giao diện (Bootstrap)

3.1 Giới thiệu

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript

template dùng để phát triển website chuẩn responsive

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…

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 hoà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

3.2 Lịch sử phát triển của Bootstrap

Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter Nó

được xuất bản như là một mã nguồn mở vào ngày 19/8/2011

trên GitHub Tên gọi ban đầu là Twitter Blueprint.

Đến ngày 31/1/2012, Bootstrap phiên bản 2 đã được phát hành

Bootstrap 2 được bổ sung bố cục lưới 12 cột với thiết kế tùy chỉnh đáp ứng cho nhiều màn hình kích thước Tiếp nối sự thành công của phiên bản 2, Bootstrap 3 ra đời vào ngày 19/8/2013 với giao diện tương thích với smartphone

Chỉ 3 năm sau ngày ra mắt, Bootstrap đã trở thành No.1 project trên GitHub Vào tháng 10/2014, Mark Otto công bố phiên bản Bootstrap 4 đang được phát triển Phiên bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào tháng 8/2015 Phiên bản mới nhất của Bootstrap được giớithiệu đến người dùng là Bootstrap 4.3.1 Cho đến nay, Bootstrap vẫn là một trong những framework thiết kế website có lượng người dùng lớn nhất

3.3 Lý do sử dụng Bootstrap

Hiện nay có nhiều ứng dụng thiết kế website tuy nhiên Bootstrap vẫn có khả năng cạnh tranh cao là nhờ những đặc điểm nổi bật sau:

⮚ Dễ dàng thao tác

án họ đang theo đuổi. CDN Boostrap còn giúp bạn tiết kiệm dung lượng

vì không cần tải mã nguồn về máy

3.3.3 Chất lượng sản phẩm đầu ra hoàn hảo

Bootstrap là sáng tạo của các lập trình viên giỏi trên khắp thế giới

Bootstrap đã được nghiên cứu và thử nghiệm trên các thiết bị Được kiểm tra nhiều lần trước khi đưa vào sử dụng Do đó, khi chọn

Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những sản phẩm với chất lượng tốt nhất

3.3.4 Độ tương thích cao

Điểm cộng lớn nhất của Bootstrap là khả năng tương thích với mọi trình duyệt và nền tảng Đây là một điều cực kì quan trọng và cần thiết trong trải nghiệm người dùng Sử dụng Grid System cùng với hai bộ tiền xử lýLess và Sass, Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện trên thiết bị di động hơn Bootstrap có khả năng tự động điều chỉnh kích thước trang website theo khung browser Mục đích để phù hợp với màn hình của máy tính để bàn, tablet hay laptop

3.4 Cấu trúc và tính năng của Bootstrap

Bootstrap chứa các tập tin JavaScript, CSS và fonts đã được biên dịch vànén lại Ngoài ra, Bootstrap được thiết kế dưới dạng các model Do

đó, dễ dàng tích hợp với hầu hết các mã nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến nhiều chức năng nổibật:

⮚ Bootstrap cho phép người dùng truy cập vào thư viện lớn các thành

tố dùng để tạo nên giao diện của một website hoàn chỉnh như font, typography, form, table, grid…

⮚ Bootstrap cho phép bạn tùy chỉnh framework của website trước khitải xuống và sử dụng nó tại trang web của khung

⮚ Tái sử dụng các thành phần lặp đi lặp lại trên trang web

⮚ Bootstrap được tích hợp jQuery Bạn chỉ cần khai báo chính xác các tính năng trong quá trình lập trình web của bạn

⮚ Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làmbiểu tượng và tăng tốc độ tải trang

3.5 Bootstrap 4 Grid System

3.5.1 Giới thiệu

Bootstrap 4 Grid System là mấu chốt cho khả năng tương thích giao diện (web responsive) của Bootstrap Khi khởi động Bootstrap, giao diệncủa nó sẽ hiển thị dưới dạng lưới (grid). Bootstrap được chia thành 12 cột đặt trong một class row Trong đó, mỗi cột sẽ bao gồm

các Padding tương ứng với từng độ phân giải của mỗi thiết bị (điện

thoại, tablet, máy tính)

Mô hình Grid System của Bootstrap 4:

Bootstrap 4 Grid System có 5 lớp:

⮚ col- (extra small devices – chiều rộng màn hình < 576px)

⮚ col-sm- (small devices – chiều rộng màn hình >= 576px)

⮚ col-md- (medium devices – chiều rộng màn hình >= 768px)

⮚ col-lg- (large devices – chiều rộng màn hình >= 992px)

⮚ col-xl- (xlarge devices – chiều rộng màn hình >= 1200px)

3.5.2 Cấu trúc Bootstrap 4 Grid System

<! Control the column width, and how they should appear on

different devices >

<div   class = "row" >

   <div   class = "col-*-*" ></div>

   <div   class = "col-*-*" ></div>

</div>

<div   class = "row" >

   <div   class = "col-*-*" ></div>

   <div   class = "col-*-*" ></div>

   <div   class = "col-*-*" ></div>

</div>

<! Or let Bootstrap automatically handle the layout >

<div   class = "row" >

   <div   class = "col" ></div>

   <div   class = "col" ></div>

   <div   class = "col" ></div>

<meta charset = "UTF-8" >

<title> Bootstrap example </title>

<meta name = "viewport" content = "width=device-width,

     <script src = "https://code.jquery.com/jquery.min.js" ></script>

     <script src = "js/bootstrap.min.js" ></script>

</body>

</html>