Trong quá trình nghiên cứu, xây dựng và phát triển đề tài, em đã gặp nhiều khókhăn và phương án để giải quyết vấn đề là: tham khảo, hỏi ý kiến từ các forum, xin ýkiến đóng góp của giảng
TỔNG QUAN
GIỚI THIỆU TỔNG QUAN
Ngày nay, với sự phát triển vượt bậc của công nghệ thông tin, Microsoft đã giới thiệu nền tảng ứng dụng thế hệ mới - WEB APPLICATION (WAPP) Được phát triển trên nền tảng NET Framework, WAPP cho phép người dùng truy cập qua trình duyệt một cách đơn giản và tiện dụng trên mọi thiết bị hỗ trợ kết nối internet Công nghệ này đáp ứng nhu cầu công việc ngày càng tăng, đồng thời nâng cao khả năng quản lý và tính tiện dụng đa nền tảng, đa thiết bị WAPP có khả năng thay thế hoàn toàn Winform, nền tảng phát triển ứng dụng truyền thống trên hệ điều hành Windows, mà nhiều người vẫn đang sử dụng và học tập.
LÝ DO CHỌN ĐỀ TÀI
Tôi đã chọn xây dựng một website bán cà phê vì nhận thấy tiềm năng lớn của thị trường cà phê trực tuyến Cà phê là sản phẩm phổ biến với nhu cầu cao, nhưng khách hàng thường gặp khó khăn trong việc tiếp cận các loại cà phê chất lượng từ nguồn đáng tin cậy Mục tiêu của tôi là tạo ra một nền tảng chuyên nghiệp, giúp người tiêu dùng dễ dàng khám phá và mua sắm cà phê chất lượng cao, đồng thời hỗ trợ các nhà sản xuất cà phê địa phương tiếp cận với khách hàng rộng rãi hơn Website không chỉ là công cụ kinh doanh mà còn là cơ hội để tôi phát triển kỹ năng lập trình, thiết kế và quản lý dự án.
Hình TỔNG QUAN.1 Sản phẩm Caffe VIET
MỤC ĐÍCH CHỌN ĐỀ TÀI
Trang web bán Caffe hướng đến việc tạo ra một nền tảng toàn diện để đáp ứng nhu cầu mua sắm của khách hàng, cung cấp thông tin hữu ích và xây dựng cộng đồng gắn kết, từ đó thúc đẩy doanh số và phát triển thương hiệu bền vững.
PHẠM VI NGHIÊN CỨU
Phân tích sản phẩm: Đánh giá các sản phẩm nội thất được bán trên trang web, bao gồm chất lượng, giá cả, và sự phổ biến.
Phân tích trải nghiệm người dùng là quá trình đánh giá các yếu tố quan trọng khi sử dụng trang web, bao gồm giao diện người dùng thân thiện, tốc độ tải trang nhanh chóng và tính tương tác cao Những yếu tố này đóng vai trò quyết định trong việc nâng cao sự hài lòng của người dùng và cải thiện hiệu suất trang web.
Phân tích chiến lược kinh doanh: Đánh giá chiến lược quảng cáo, giá cả, chính sách bán hàng, và dịch vụ khách hàng của trang web.
Phân tích xu hướng thị trường là việc theo dõi và đánh giá các xu hướng mới trong ngành nội thất và thị trường trực tuyến, từ đó điều chỉnh chiến lược kinh doanh một cách hiệu quả Việc nắm bắt những thay đổi này giúp doanh nghiệp tối ưu hóa sản phẩm và dịch vụ, đáp ứng nhu cầu của khách hàng và nâng cao khả năng cạnh tranh trên thị trường.
PHƯƠNG PHÁP NGHIÊN CỨU
Phân tích thị trường: Nghiên cứu thị trường để hiểu nhu cầu và xu hướng của người tiêu dùng trong lĩnh vực đồ uống
Phân tích đối thủ cạnh tranh là quá trình nghiên cứu các trang web hoặc cửa hàng của đối thủ để nắm bắt chiến lược kinh doanh của họ Qua việc tìm hiểu điểm mạnh và điểm yếu của họ, doanh nghiệp có thể xác định cơ hội và thách thức trong thị trường, từ đó điều chỉnh chiến lược của mình cho phù hợp.
Khảo sát khách hàng: Tổ chức các khảo sát để hiểu ý kiến, mong muốn và hành vi mua sắm của khách hàng.
Phân tích dữ liệu: Sử dụng các công cụ phân tích dữ liệu để hiểu về hành vi truy cập và mua sắm trên trang Web.
CƠ SỞ LÝ THUYẾT
CÔNG NGHỆ ASP.NET MVC5
Vào những năm 70 của thế kỷ 20, tại phòng thí nghiệm Xerox PARC ở Palo Alto, sự phát triển của giao diện đồ họa (GUI) và lập trình hướng đối tượng (Object Oriented Programming) đã mở ra khả năng cho lập trình viên làm việc với các thành phần đồ họa như những đối tượng có thuộc tính và phương thức riêng Hơn nữa, các nhà nghiên cứu tại Xerox PARC còn phát triển kiến trúc MVC (Model – View – Controller), đánh dấu một bước tiến quan trọng trong lĩnh vực lập trình.
MVC, hay Mô hình - View - Bộ điều khiển, được phát minh bởi Trygve Reenskaug tại Xerox Parc vào những năm 70 Lần đầu tiên, MVC được giới thiệu công khai trong Smalltalk-80 Các tài liệu quan trọng đầu tiên về MVC là "A Cookbook for Using the Model-View-Controller User Interface Paradigm in Smalltalk-80", được viết bởi Glenn Krasner và Stephen Pope, xuất bản vào tháng 8/9 năm 1988.
Thế hệ tiếp theo của MVC xuất hiện cùng với hệ điều hành NeXT và các phần mềm của nó.
Kiến trúc phần mềm đang ngày càng được cải tiến để giải quyết hiệu quả các vấn đề phát sinh và cung cấp các giải pháp tối ưu cho quá trình phát triển.
Vì vậy sau đó, lần lượt các MVC framework ra đời dựa trên mô hình MVC như: CodeIgniter, Zend, ASP.NET MVC ….
2.1.2 Sự khác nhau giữa MVC và webform
Thành phần ASP.net MVC chia ra làm 3 phần:
Các mô hình trong kiến trúc MVC bao gồm Models, Views và Controllers Mọi tương tác của người dùng với Views sẽ được xử lý thông qua các action trong Controllers, giúp loại bỏ hiện tượng postback, lifecycle và events.
ASP.NET WebForms utilize ViewState to manage the lifecycle of pages, handle postbacks, and employ web controls and events for user interface actions However, due to user interactions, ASP.NET WebForms often experience slower performance.
(debug) Đố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
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.
BẢNG 1.1 Sự khác nhau giữa MVC và Webform
2.1.3 Kiến trúc sử dụng ASP.NET MVC
ASP.NET MVC là một framework nhẹ nhàng, giúp đơn giản hóa quá trình phát triển ứng dụng web bằng cách chia thành ba tầng: Model, View và Controller Sự phân chia này không chỉ giúp lập trình viên dễ dàng quản lý các thành phần trong quá trình phát triển, mà còn mang lại lợi ích lâu dài cho việc kiểm tra, bảo trì và nâng cấp ứng dụng.
Model là thành phần quan trọng trong ứng dụng, chứa và thể hiện các đặc tính cùng logic cốt lõi Nó đại diện cho dữ liệu, bao gồm các lớp (class) chứa thông tin về các đối tượng mà người dùng cần thao tác Ví dụ, Model "Sản phẩm" lưu trữ các thông tin thiết yếu như "Tên sản phẩm", "Loại sản phẩm", và "Đơn giá".
View là thành phần chịu trách nhiệm hiển thị một hoặc nhiều Model một cách trực quan, nhận thông tin từ các Model và trình bày chúng trên trang web.
- Controller: Controller nằm giữa tầng View và Model, làm nhiệm vụ tìm kiếm, xử lý một hoặc nhiều Model, sau đó gửi Model tới View để View hiển thị.
Hình CƠ SỞ LÝ THUYẾT.2 Mô hình MVC
Continuing to support features in ASP.NET, the framework enables the use of file types such as ASPX, ASCX, and Master as view components Additionally, it fully supports ASP.NET's security features, including Form and Windows authentication, URL authorization, membership and roles management, as well as output and data caching, section and profile state management, a robust configuration system, and a provider architecture.
Việc tách rõ ràng các mối liên quan trong ứng dụng giúp mở ra khả năng kiểm thử theo phương pháp TDD (Test Driven Development) Điều này cho phép thực hiện kiểm thử đơn vị mà không cần phải chạy Controllers cùng với tiến trình của ASP.NET, đồng thời có thể sử dụng bất kỳ framework kiểm thử đơn vị nào như NUnit, MBUnit, hay MS Test.
MVC được thiết kế với khả năng mở rộng cao, cho phép dễ dàng thay thế và tùy biến các thành phần Hệ thống ánh xạ URL mạnh mẽ giúp xây dựng ứng dụng với các URL sạch và thân thiện với người dùng.
- Không sử dụng mô hình post-back từ giao diện gửi đến server Thay vào đó, chủ động đưa những post-back từ View đến thẳng lớp Controller.
Hỗ trợ nhiều công cụ tạo View cho phép người dùng chọn lựa view engine phù hợp Trong hộp thoại New Project, người dùng có thể xác định view engine mặc định cho dự án của mình, giúp tối ưu hóa quá trình phát triển Các loại view engine đa dạng mang đến sự linh hoạt và tiện ích cho lập trình viên.
Hay một view engine nguồn mở như Spark, NHaml, NDjango.
ASP.NET MVC Framework sở hữu một bộ máy ánh xạ URL mạnh mẽ, cho phép định tuyến linh hoạt giữa các URL và các lớp Controller Người dùng có thể dễ dàng thiết lập các quy tắc và đường đi, từ đó ASP.NET sẽ xác định Controller và action cần thực hiện dựa trên các quy tắc này Ngoài ra, ASP.NET còn có khả năng phân tích URL, chuyển đổi các thông số trong URL thành các tham số trong lời gọi hàm của Controller.
Model Binding là một tính năng nổi bật của ASP.NET MVC, hiện cũng được áp dụng cho Web Forms trong phiên bản ASP.NET 4.5 Tính năng này hỗ trợ lập trình viên viết các phương thức nhận đối tượng tùy chỉnh làm tham số Nhờ vào Model Binding, bạn có thể tập trung vào việc triển khai các nghiệp vụ logic mà không cần lo lắng về việc ánh xạ dữ liệu từ người dùng sang các đối tượng NET.
Filters là một tính năng mạnh mẽ trong ASP.NET MVC, giúp kiểm tra tính hợp lệ trước khi một phương thức hành động được gọi hoặc sau khi phương thức hành động đã thực thi.
- Razor View o Từ ASP.net MVC 3 đi kèm với một công cụ View mới có tên là Razor với những lợi ích sau:
Cú pháp Razor là sạch sẽ và súc tích, đòi hỏi một số lượng tối thiểu các tổ hợp phím.
Việc tìm hiểu Razor tương đối dễ dàng vì nó dựa trên ngôn ngữ C# và Visual Basic.
Visual Studio bao gồm IntelliSense và mã cú pháp Razor được màu hóa.
Với Razor views có thể kiểm tra từng đơn vị mà không đòi hỏi bạn phải chạy các ứng dụng hoặc phải chạy website.
MÔ HÌNH MVC5
2.2.1 Các tính năng của mô hình MVC3 và MVC4
- So với phiên bản ASP.NET MVC2 thì MVC3 được hỗ trợ thêm HTML5 và CSS3.
- Hỗ trợ 2 View Engine: RAZOR, ASPX, kể cả Open source trong khi ASP.NET MVC2 chỉ có ASPX.
- Controller được cải tiến hơn như thuộc tính ViewBag và kiểu ActionResult
Enhancing Dependency Injection with IDependencyResolver in ASP.NET MVC3 involves two key components: DependencyResolver and the IDependencyResolver interface This implementation follows the Service Locator pattern, enabling the framework to access the DIContainer when it needs to interact with a specific implementation of a type.
- Cách tiếp cận với JavaScript được hạn chế.
- - Hỗ trợ caching trong Partial page.
- ASP.NET Web API ra đời, nhằm đơn giản hoá việc lập trình với HTML hiện đại và đây là một cải tiến mới thay cho WCF Web API.
- Mặc định của dự án được cải thiện hơn về hình thức bố trí, giúp dễ nhìn hơn.
- Mẫu Empty Project là project trống, phù hợp cho những developer muốn nâng cao khả năng lập trình với ASP.NET MVC4.
- Giới thiệu jQuery Mobile và mẫu Mobile Project cho dự án.
- Kiểm soát Bundling và Minification thông qua web.config.
- Hỗ trợ cho việc đăng nhập OAuth và OpenID bằng cách sử dụng thư viện DotNetOpenAuth Cho phép Logins từ Facebook và những tài khoản khác.
- Phiên bản mới Windows Azure SDK 1.6 được phát hành.
2.2.2 Các cải tiến của MVC5
- Với MVC5 thì cải tiến hơn so với ASP.NET MVC4, Bootstrap được thay thế mẫu MVC mặc định.
- Chứng thực người dùng Authentication Filter được tuỳ chỉnh hoặc chứng thực từ hãng thứ 3 cung cấp.
- Với Filter overrides, chúng ta có thể Filter override trên Method hoặc Controller.
- Thuộc tính Routing được tích hợp vào MVC5.
Bootstrap là một framework CSS do Twitter phát triển, giúp web designer tiết kiệm thời gian bằng cách cung cấp bộ chọn, thuộc tính và giá trị sẵn có Nó giảm thiểu việc lặp lại khi tạo class CSS và mã HTML trong các dự án web Bên cạnh CSS, Bootstrap còn hỗ trợ các chức năng tiện ích dựa trên JQuery như Carousel, Tooltip và Popovers.
Sử dụng Bootstrap mang lại nhiều lợi ích, bao gồm việc được phát triển bởi những chuyên gia có kinh nghiệm, đảm bảo tính tương thích trình duyệt và thiết bị, giúp tiết kiệm thời gian và chi phí cho dự án Người dùng chỉ cần kiến thức cơ bản về HTML, CSS, Javascript, Jquery để tạo ra trang web sang trọng mà không cần viết quá nhiều mã CSS Giao diện mặc định màu xám bạc cùng với các component phổ biến hỗ trợ cho việc thiết kế website Bootstrap là mã nguồn mở, cho phép người dùng tùy chỉnh theo ý thích Với hệ thống lưới (Grid System), Bootstrap hỗ trợ tính năng Responsive, ưu tiên giao diện trên thiết bị di động, giúp website hoạt động tốt trên mọi kích thước màn hình mà không cần xây dựng trang riêng cho mobile Cuối cùng, tính năng Customizer được bổ sung giúp designer lựa chọn các thuộc tính và component phù hợp với dự án mà không cần tải toàn bộ mã nguồn.
Một trong những vấn đề bảo mật quan trọng nhất là đảm bảo chỉ những người dùng hợp lệ được phép truy cập vào hệ thống Trong ASP.NET, điều này được thực hiện thông qua hai khái niệm chính: Xác thực (Authentication) và Phân quyền (Authorize).
- Authentication là xác thực người dùng, trong MVC5 Authentication Filter được tuỳ chỉnh hoặc chứng thực từ hãng thứ 3 cung cấp.
- Khi tạo 1 Project MVC5, người dùng được lựa chọn 4 loại security:
No Authentication Ứng dụng không hỗ trợ security
Individual User Accounts Ứng dụng sử dụng tài khoản được quản lý bởi SQL Server hoặc từ gmail, facebook
Organizational Accounts Ứng dụng sử dụng tài khoản được quản lý bởi Active Directory hoặc Windows
Windown Authentication Ứng dụng chạy trên intranet tức sử dụng tài khoản windows để đăng nhập
BẢNG CƠ SỞ LÝ THUYẾT.2 Các loại security trong MVC5
Mỗi loại bảo mật phù hợp với các ứng dụng khác nhau Khi lựa chọn Tài Khoản Người Dùng Cá Nhân, ứng dụng sử dụng Internet và SQL Server để lưu trữ thông tin thành viên hoặc cho phép đăng nhập từ các hệ thống bên ngoài như Google và Facebook Người dùng có thể thực hiện các thao tác như đăng ký, đăng nhập, đổi mật khẩu và đăng xuất bằng tài khoản cục bộ hoặc tài khoản từ các nền tảng bên ngoài như Google và Facebook.
Code của AccountController có hai điểm khác biệt quan trọng: đầu tiên, annotation [Authorize] được sử dụng để ngăn chặn mọi hành động trong controller truy cập khi chưa đăng nhập, trừ khi hành động đó được đánh dấu bằng annotation [AllowAnonymous] Thứ hai, thuộc tính UserManager được khởi tạo trong constructor để quản lý các thành viên, cho phép thực hiện các chức năng bảo mật như đăng ký, đăng nhập và đổi mật khẩu.
GIỚI THIỆU ENTITY FRAMEWORK
Entity Framework (EF) là một framework ORM dành cho ADO.NET trong NET Framework, cho phép các nhà phát triển Web tương tác với dữ liệu quan hệ theo phương pháp hướng đối tượng Lợi ích lớn nhất của EF là giảm thiểu mã nguồn cần thiết để truy cập và tương tác với cơ sở dữ liệu Được Microsoft hỗ trợ phát triển bền vững, EF hiện là một trong những framework mạnh nhất cho phát triển ứng dụng Web, nhận được sự ủng hộ rộng rãi từ cộng đồng lập trình viên.
Hình CƠ SỞ LÝ THUYẾT.3 Mô hình kiến trúc Entity Framework
Ứng dụng là tầng chứa giao diện trang web bao gồm HTML, CSS, Javascript, hình ảnh, và các đoạn mã nguồn như C# và VB, cho phép tương tác dữ liệu với các tầng khác trong mô hình thông qua Object Services.
Dịch vụ đối tượng (Object Services) là tầng trung gian giữa ứng dụng và cơ sở dữ liệu, cho phép truy cập và trả kết quả dữ liệu về giao diện Nó cung cấp tiện ích để theo dõi thay đổi và quản lý danh tính, cũng như các mối quan hệ và biến động trong cơ sở dữ liệu Các lớp trong dịch vụ đối tượng được tự động sinh ra dựa trên mô hình dữ liệu.
ObjectContext là đại diện cho một cơ sở dữ liệu, có nhiệm vụ quản lý kết nối và định nghĩa mô hình dữ liệu thông qua metadata Lớp này không chỉ thực hiện thao tác với cơ sở dữ liệu mà còn cho phép thêm các phương thức đại diện cho các stored procedure có trong cơ sở dữ liệu.
ObjectSet là một tập hợp các thực thể, với mỗi thực thể tương ứng với một bảng trong cơ sở dữ liệu Người dùng có thể truy cập các thực thể này thông qua các thuộc tính tương ứng của ObjectContext.
- EntityObject, ComplexObject là các lớp tương ứng cho một dòng dữ liệu của table trong database Khác biệt chính giữa hai loại này là ComplexObject không chứa primary key.
EntityCollection and EntityReference are objects that represent the relationship between two entity classes Each of these objects can be accessed through the properties of the entity class.
- Sự ánh xạ tương đương được thể hiện bảng sau:
Database Object Entity Framework Object
BẢNG CƠ SỞ LÝ THUYẾT.3 Bảng ánh xạ tương đương giữa các đối tượng trong database và EF
EntityClient là một nhà cung cấp dữ liệu mới trong ADO.NET, cho phép truy xuất cơ sở dữ liệu một cách hiệu quả Được phát triển dựa trên các nhà cung cấp dữ liệu ADO.NET cơ bản, EntityClient không trực tiếp truy cập dữ liệu mà sử dụng các nhà cung cấp dữ liệu khác thông qua thông tin từ Entity Data Model.
EntityClient includes classes similar to other ADO.NET data providers, with class names prefixed by "Entity." For instance, you can establish a connection using EntityConnection, construct queries with EntityCommand, and read results using EntityDataReader.
EntityClient distinguishes itself from other data providers by utilizing Entity SQL for data queries The Entity SQL commands are transformed into a command tree structure, which is then passed on to other data providers.
2.3.5 Tầng ADO.NET Data Providers Đây là tầng thấp nhấp để dịch các truy vấn L2E (LINQ to Entity) thông qua cây lệnh thành các câu lệnh SQL và thực thi các câu lệnh trong hệ thống DBMS (database management system – hệ quản lý dữ liệu) nào đó Tầng này kết với database sử dụng ADO.NET.
EntityClient là một nhà cung cấp dữ liệu mới trong ADO.NET, được thiết kế để truy xuất dữ liệu từ cơ sở dữ liệu Khác với các nhà cung cấp dữ liệu truyền thống, EntityClient hoạt động thông qua các nhà cung cấp dữ liệu khác, sử dụng thông tin từ mô hình dữ liệu thực thể (Entity Data Model) để thực hiện các truy vấn.
The EntityClient includes classes similar to other ADO.NET data providers, with class names prefixed by "Entity." For instance, you can establish a connection using EntityConnection, construct queries with EntityCommand, and read results through EntityDataReader.
EntityClient distinguishes itself from other data providers by utilizing Entity SQL for data querying The Entity SQL commands are transformed into a command tree structure before being passed on to other data providers.
2.3.6 Tầng EDM (Entity Data Model)
Mô hình dữ liệu thực thể (EDM) được định nghĩa thông qua các ngôn ngữ chuẩn XML và được chia thành ba lớp: Conceptual, Mapping và Logical Mỗi lớp này có ngôn ngữ riêng biệt theo định dạng XML để mô tả các khía cạnh khác nhau của dữ liệu.
- Conceptual – Conceptual Schema Definition Language (CSDL): là ngôn ngữ định nghĩa các entity, relationship, hàm trong tập tin với phần mở rộng csdl.
Có thể tạo được các entity class (object layer).
- Mapping – Mapping specification language (MSL): định nghĩa các ánh xạ giữa lớp conceptual và logical, nội dung này được lưu trong tập tin msl.
- Logical – Store Schema Definition Language (SSDL): định nghĩa mô hình lưu trữ của dữ liệu, lưu trữ trong tập tin ssdl.
Hình CƠ SỞ LÝ THUYẾT.4 Lưu đồ Entity Mapping Model
2.3.7 Cách sử dụng trong Entity Framework
Entity Data Model (EDM) là cầu nối giữa ứng dụng và cơ sở dữ liệu, giúp mô tả và liên kết giữa nguồn dữ liệu vật lý và các đối tượng kinh doanh trong ứng dụng Ứng dụng Entity Framework (EF) có thể áp dụng một trong ba phương pháp: Database First, Model First và Code First, tùy thuộc vào lựa chọn của thành phần được tạo ra trước.
TỔNG QUAN VỀ SQL SERVER
SQL Server là hệ quản trị cơ sở dữ liệu quan hệ được phát triển bởi Microsoft, hoạt động theo mô hình khách-chủ Hệ thống này cho phép nhiều người dùng truy xuất dữ liệu đồng thời, đồng thời quản lý quyền truy cập và quyền hạn của từng người dùng trên mạng.
TỔNG QUAN VỀ NGÔN NGỮ GIAO DIỆN
HTML, viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu chính dùng để tạo các trang web trên World Wide Web Kết hợp với CSS và JavaScript, HTML tạo thành bộ ba công nghệ nền tảng cho sự phát triển của web Hiện tại, HTML5 đang được phát triển, hứa hẹn mang lại diện mạo mới và cải tiến cho các trang web.
Trong ASP.NET, bạn có thể sử dụng các thẻ HTML kết hợp với các khối lệnh ngôn ngữ C# thông qua việc khai báo @{…} hoặc @, nhằm tạo ra một mẫu view (file cshtml).
Kể từ phiên bản Asp.net MVC 3, Microsoft đã chọn Razor View Engine làm View Engine mặc định Khi có yêu cầu View từ Http Request, Razor View Engine sẽ thực hiện biên dịch trang View tương ứng.
Khi sử dụng Razor View Engine, lập trình viên không cần học ngôn ngữ lập trình mới, vì Razor kết hợp cú pháp HTML với ngôn ngữ như C# và VB trong các trang View Điều này giúp các lập trình viên quen thuộc với C# hoặc VB dễ dàng tiếp cận và làm quen với Razor View Engine.
2.5.2.2 Cú pháp Razor Để thông dịch các đoạn mã được viết bởi các ngôn ngữ như C#, VB trong các trang View, Razor đưa ra những quy tắc nhằm để xác định các đoạn mã đó được biên dịch ở phía Server (server-side code) và các đoạn mã đánh dấu (markup code) được thực hiện biên dịch ở phía client (như javascript, css, html, …), Razor sử dụng ký tự @ nhằm phân biệt giữa server-side code và markup code.
Khi tạo ra các Razor view chúng ta cần chú ý như sau :
- Sử dụng @{ code } để viết một khối mã lệnh.
- Để viết một biểu thức inline (Viết biểu thức Razor trực tiếp trong đoạn mã của markup code, lập trình viên chỉ cần sử dụng @.
- Sử dụng từ khóa var để khai báo biến.
- Sử dụng ; để kết thúc một câu lệnh.
- Với các Razor view sử dụng ngôn ngữ C#, các file có đuôi mở rộng là cshtml.
- Với các Razor view sử dụng ngôn ngữ VB, các file có đuôi mở rộng là vbhtml.
Razor là một công cụ hữu ích cho lập trình viên, cho phép họ viết các khối mã lệnh trực tiếp trong các View Những khối mã lệnh này được phát triển bằng các ngôn ngữ lập trình C# hoặc VB, giúp tăng cường khả năng tương tác và linh hoạt trong việc xây dựng giao diện người dùng.
- code : là các đoạn mã code được viết bởi ngôn ngữ C# hoặc VB và được biên dịch ở phía Server
Hình CƠ SỞ LÝ THUYẾT.6 Minh họa khối mã lệnh Razor View
CSS, viết tắt của Cascading Style Sheets, là tập hợp các lệnh text dùng để định dạng các phần tử HTML như màu sắc, kích thước và font chữ Nhờ có CSS, giao diện và nội dung của trang web trở nên rõ ràng và hấp dẫn hơn đối với người đọc.
Hình CƠ SỞ LÝ THUYẾT.7 Vai trò CSS với Website
Bootstrap là framework phổ biến nhất hiện nay, hỗ trợ phát triển giao diện website cho cả thiết bị di động và máy tính, sử dụng HTML, CSS và JavaScript Phiên bản mới nhất hiện tại là 3.3.2, được cập nhật qua nhiều phiên bản để cải thiện tính năng và hiệu suất.
Bootstrap là một framework phổ biến nhờ vào khả năng tạo giao diện website tương thích với mọi thiết bị như smartphone, tablet và máy tính để bàn, nhờ vào tính năng tự động co giãn kích thước Với các module hỗ trợ sẵn, Bootstrap giúp người dùng dễ dàng tìm hiểu và xây dựng giao diện một cách nhanh chóng và hiệu quả.
JavaScript (.js) là ngôn ngữ lập trình kịch bản dựa trên đối tượng, phát triển từ các ý niệm nguyên mẫu, được sử dụng phổ biến trên các trang web và để viết script cho các ứng dụng Mặc dù có cú pháp tương tự như Java, JavaScript lại gần giống với Self hơn Hiện nay, nhiều framework và thư viện được xây dựng bằng JavaScript, bao gồm jQuery - thư viện mạnh mẽ và thông dụng, AngularJS - thư viện cho ứng dụng Single Page, NodeJS - thư viện phát triển phía Server cho ứng dụng realtime, và Firebase - nền tảng di động lưu trữ dữ liệu theo thời gian thực.
- 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 giúp đơn giản hóa việc xử lý HTML, sự kiện, tạo hiệu ứng động và tương tác Ajax, từ đó thúc đẩy khái niệm Phát triển Web Nhanh (Rapid Web Development) trở nên phổ biến hơn.
jQuery là một bộ công cụ JavaScript hữu ích giúp đơn giản hóa nhiều tác vụ với ít mã hơn Một số tính năng quan trọng của jQuery bao gồm: thao tác DOM dễ dàng thông qua việc lựa chọn và chỉnh sửa các phần tử bằng Sizzle; xử lý sự kiện hiệu quả, giúp cải thiện tương tác với người dùng mà không làm rối mã HTML; hỗ trợ phát triển các trang web phong phú và phản hồi tốt nhờ công nghệ AJAX; cung cấp nhiều hiệu ứng đẹp mắt cho trang web; và được hỗ trợ rộng rãi trên các trình duyệt hiện đại như IE 6.0+, Firefox 2.0+, Safari 3.0+, Chrome và Opera 9.0+ Ngoài ra, jQuery cũng cập nhật và hỗ trợ các công nghệ mới nhất, bao gồm CSS3.
Selector và cú pháp XPath cơ bản.
AJAX, viết tắt của Asynchronous JavaScript and XML, là một kỹ thuật tiên tiến giúp phát triển các ứng dụng web tương tác, nhanh chóng và mượt mà hơn Kỹ thuật này sử dụng XML, HTML, CSS và JavaScript để cải thiện trải nghiệm người dùng trên các trang web.
AJAX không phải là một ngôn ngữ lập trình mới; tên gọi này không yêu cầu bạn phải học XML trước khi tiếp cận AJAX, điều này hoàn toàn không cần thiết.
AJAX cho phép cập nhật trang web một cách không đồng bộ bằng cách trao đổi dữ liệu nhỏ với máy chủ, giúp thay đổi các phần cụ thể trên trang mà không cần tải lại toàn bộ trang Nếu bạn chưa rõ, các thông tin tiếp theo sẽ giúp bạn hiểu rõ hơn về cách thức hoạt động của AJAX.
THIẾT KẾ HỆ THỐNG
MÔ HÌNH CƠ SỞ DỮ LIỆU
Hình THIẾT KẾ HỆ THỐNG.8 Mô hình cơ sở dữ liệu SQL
TỔ CHỨC BẢNG DỮ LIỆU
Hình THIẾT KẾ HỆ THỐNG.9 Bảng dữ liệu Article
Hình THIẾT KẾ HỆ THỐNG.10 Bảng dữ liệu Authorized
Hình THIẾT KẾ HỆ THỐNG.11 Bảng dữ liệu Category
Hình THIẾT KẾ HỆ THỐNG.12 Customer
Hình THIẾT KẾ HỆ THỐNG.13 Bảng dữ liệu Details
- Mã chi tiết đơn đặt hàng
Hình THIẾT KẾ HỆ THỐNG.14 Bảng dữ liệu Group
Hình THIẾT KẾ HỆ THỐNG.15 Bảng dữ liệu Member
Hình THIẾT KẾ HỆ THỐNG.16 Bảng dữ liệu Order
Hình THIẾT KẾ HỆ THỐNG.17 Bảng dữ liệu Product
Hình THIẾT KẾ HỆ THỐNG.18 Bảng dữ liệu Role
PHÂN TÍCH MỐI QUAN HỆ DỮ LIỆU GIỮA CÁC THỰC THỂ
- Article và Product liên kết với Category (Danh mục): Nhiều bài viết/sản phẩm thuộc một danh mục.
- Order liên kết với Customer: Nhiều đơn hàng thuộc một khách hàng.
- Details liên kết với Order và Product: Nhiều chi tiết đơn hàng thuộc một đơn hàng và một sản phẩm.
- Authorized liên kết với Role và Member: Nhiều ủy quyền thuộc một vai trò và một thành viên.
- Role và Member liên kết với Group: Nhiều vai trò/thành viên thuộc một nhóm.
Category (Danh mục) là thực thể trung tâm, kết nối với cả Article (Bài viết) và Product (Sản phẩm).
Details (Chi tiết) là thực thể kết nối giữa Order (Đơn hàng) và Product
Role (Vai trò) và Group (Nhóm) là trung tâm của việc ủy quyền, quản lý quyền truy cập của Member (Thành viên) và các vai trò của họ.
DEMO VÀ TRIỂN KHAI DỰ ÁN
GIAO DIỆN CHÍNH
Giao diện hiển thị trên Máy tính
4.1.1 Giao diện chính của trang Web
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.19 Giao diện trang chủ
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.20 Giao diện trang chủ
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.21 Giao diện trang chủ
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.22 Các sản phẩm của Menu
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.23 Các dịch vụ mà Web có
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.24 Nội dung của trang Blog
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.25 Nội dung của trang About
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.26 Nội dung của trang Shop
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.27 Nội dung của trang Contact
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.28 Nội dung của trang Cart
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.29 Nội dung của trang Cart
GIAO DIỆN CHÍNH
Giao diện chính hiển thị trên SmartPhone
4.2.1 Trang chính của trang Web
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.30 Giao diện trang chính
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.31 Giao diện chính
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.32 Nội dung của Trang Menu
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.33 Nội dung của trang Services
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.34 Nội dung của trang Blog
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.35 Nội dung của trang About
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.36 Nội dung của trang Shop
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.37 Nội dung trang Contact
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.38 Nội dung trang Cart
GIAO DIỆN TRANG LOGIN
Đăng nhập trên Máy tính
4.3.1 Giao diện đăng nhập của Admin
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.39 Giao diện đăng nhập
4.3.2 Giao diện và chức năng của Admin
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.40 Các chức năng chính của Admin
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.41 Danh mục
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.42 Thêm sản phẩm trong danh mục
Chức năng thêm sản phẩm trong dah nh mục
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.43 Danh mục thêm tin tức
Chức năng thêm tin tức trong danh mục
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.44 Nghiệp vụ
Trong nghiệp vụ hiển thị và quản lý đơn đặt hàng
Khách hàng đã thanh toán và chưa thanh toán
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.45 Đơn đặt hàng và thanh toán
Hiển thị chi tiết khách mua sản phẩm, số lượng sản phẩm, vận chuyển và hóa dơn
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.46 Thống kê
Trang thống kê doanh thu theo tháng
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.47 Nhóm quyền
Hệ thống nhóm quyền và thành viên
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.48 Phân quyền
Tính năng của phân quyền của Admin chon các thành viên, Cập nhật, Xem danh sách,Xóa, Lưu.
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.49 Phân quyền của Admin
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.50 Phân quyền cho Thành viên
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.51 Giao diện quản lý thành viên
Phân quyền cấp quyền cho thanh viên
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.52 Thêm thành viên
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.53 Thêm thành viên và xóa
Cập nhật và xóa thành viên
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.54 Đăng xuất
GIAO DIỆN TRANG LOGIN
4.4.1 Giao diện đăng nhập của Admin
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.55 Giao diện đăng nhập của Admin
4.4.2 Giao diện và các chức năng
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.56 Giao diện và chức năng
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.57 Danh mục
Gồm có Chuyên mục, Sản phẩm, Tin tức
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.58 Chuyên mục
Danh mục có chức năng Chuyên mục Thêm, Cập nhật, Xóa
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.59 Sản phẩm
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.60 Tin tức
Thêm, sửa, xóa, tin tức
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.61 Nghiệp vụ
Nghiệp vụ có chức năng quản lý đơn hàng
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.62 Quản lý đơn hàng
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.63 Chi tiết đơn hàng
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.64 Thống kê
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.65 Doanh thu theo tháng
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.66 Nhóm quyền
Chức năng thêm sửa xóa, phân quyền cho thành viên
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.67 Thành viên
Thêm sửa xóa thành viên
Hình DEMO VÀ TRIỂN KHAI DỰ ÁN.68 Đăng xuất
KẾT QUẢ VÀ KINH NGHIỆM
- Đã xây dựng được website bán hàng nền tảng ASP.NET MVC với các tính năng cơ bản cần thiết
- Rèn luyện kỹ năng tự học và giải quyết vấn đề.
- Củng cố kiến thức về lập trình web (HTML, ASP.NET.CORE.MVC C#, Sql Server.
- Kiến thức về MVC còn hạn chế.
- Chưa khắc phục được những lỗi cơ bản của Web Còn phụ thuộc nhiều vào giảng viên hướng dẫn.
- Phương thức code và tổ chức code chưa được tối ưu.
- Nhiều chức năng của Admin và giao diện Web chưa hoàn thiện hoàn toàn.
HƯỚNG PHÁT TRIỂN .78 TÀI LIỆU THAM KHẢO
- Cố gắng hoàn thiện hơn về các tính năng nâng cao của Website và các tính năng cần quản lý của Admin.
- Rèn luyện hơn về kĩ năng khắc phục Code và Sql.
