Mục tiêu đề tài
Là một website thương mại điện tử, chúng tôi tập trung vào việc tạo ra trải nghiệm thân thiện cho người dùng với giao diện bắt mắt Cách trình bày sản phẩm rõ ràng và chi tiết, cùng với mức giá hợp lý, sẽ giúp chúng tôi gây ấn tượng tích cực với khách hàng.
Cả khách hàng và nhà quản lý sẽ cảm thấy thoải mái khi sử dụng một trang web đẹp và dễ truy cập.
Tìm kiếm và lựa chọn sản phẩm cần mua.
Xem chi tiết 1 sản phẩm.
Đăng ký, đăng nhập phục vụ cho việc mua bán online.
Thực hiện việc mua hàng và thanh toán trực tuyến.
Gửi ý kiến phản hồi, bình luận về sản phẩm qua facebook dưới chi tiết các sản phẩm.
Gửi liên hệ cho công ty TTBShop.
Xem nơi bán của shop thông qua Google Map trên trang liên hệ, giới thiệu.
Quản lý trang web của mình thông qua tài khoản Admin rõ ràng, dễ sử dụng, bảo mật cao.
Quản lý tất cả các sản phẩm một cách dễ dàng.
Xem sản phẩm danh sách sản phẩm mới và danh sách sản phẩm bán chạy.
Thêm loại sản phẩm, màu cho loại sản phẩm.
Kiểm tra và xử lý đơn đặt hàng.
Theo dõi và phản hồi ý kiến khách hàng.
2 CHƯƠNG II: TÌM HIỂU VỀ CƠ SỞ LÝ THUYẾT
Tổng quan về ASP.NET
Giới thiệu về ASP.NET
Vào đầu năm 2002, Microsoft đã giới thiệu ASP.Net, một kỹ thuật lập trình web mới mẻ, ban đầu được gọi là ASP+ Kỹ thuật này không yêu cầu người dùng phải có kiến thức về HTML hay thiết kế web, đồng thời hỗ trợ lập trình hướng đối tượng trong phát triển ứng dụng web ASP.Net là công nghệ lập trình và phát triển ứng dụng web phía Server, dựa trên nền tảng Microsoft Net Framework Thường thì, những người mới bắt đầu với lập trình web sẽ tìm hiểu các kỹ thuật phía Client như HTML, JavaScript và CSS.
When a web browser requests a webpage that utilizes client-side technology, the web server locates the requested page and sends it back to the client.
Client nhận kết quả từ Server và hiển thị lên màn hình ASP.Net sử dụng kỹ thuật lập trình phía server, nơi mã lệnh (như mã lệnh trong trang ASP) được biên dịch và thi hành tại Web Server Sau khi Server xử lý xong, kết quả sẽ được chuyển đổi tự động sang HTML/JavaScript/CSS và trả về cho Client Tất cả các xử lý lệnh ASP.Net đều diễn ra tại Server, do đó được gọi là kỹ thuật lập trình phía server.
ASP.NET được Microsoft phát triển qua nhiều phiên bản từ ASP.NET 1.0, 1.1,2.0 và gần đây nhất là phiên bản ASP.NET 5.
Tìm hiểu về mô hình lập trình web MVC của ASP.NET
Mô hình MVC (Model - View - Controller) là một kiến trúc phần mềm quan trọng trong phát triển ứng dụng web, giúp tổ chức mã nguồn thành ba phần riêng biệt: Model, View và Controller Mô hình này không chỉ cải thiện khả năng bảo trì và mở rộng ứng dụng mà còn tạo điều kiện cho việc phân tách các trách nhiệm trong quá trình phát triển.
Controller Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác.
Model là thành phần chịu trách nhiệm xử lý tất cả các nghiệp vụ logic và truy xuất cơ sở dữ liệu, bao gồm các đối tượng mô tả dữ liệu như Class và hàm xử lý Nó cung cấp dữ liệu cho cơ sở dữ liệu và lưu trữ dữ liệu vào các kho chứa Tất cả các nghiệp vụ logic được thực hiện tại Model, nơi dữ liệu từ người dùng được kiểm tra qua View trước khi được lưu vào cơ sở dữ liệu Việc truy xuất, xác nhận và lưu trữ dữ liệu đều nằm trong phạm vi của Model.
View trong ứng dụng đóng vai trò hiển thị thông tin cho người dùng, nhận dữ liệu từ họ và gửi yêu cầu đến bộ điều khiển (Controller) Sau khi nhận phản hồi từ bộ điều khiển, View sẽ hiển thị kết quả cho người dùng Các thành phần như trang HTML, JSP, thư viện thể và file nguồn đều thuộc về View.
Controller là lớp trung gian giữa Model và View, có nhiệm vụ nhận yêu cầu từ người dùng Khi nhận yêu cầu, Controller sẽ thực hiện các chức năng logic từ Model và tạo ra kết quả hiển thị cho người dùng thông qua View Các thành phần chính của Controller bao gồm ActionServlet, Action, ActionForm và struts-config.xml.
Một ứng dụng web được phát triển theo mô hình MVC, có nguyên lý hoạt động xử lý yêu cầu của người dùng như sau:
Khi người dùng (Client) đưa ra yêu cầu, yêu cầu này sẽ được gửi đến Server, nơi mà Controller sẽ tiếp nhận và xử lý yêu cầu đó.
Controller chứa nhiều phương thức (action) tương ứng với từng yêu cầu cụ thể từ người dùng Nó lựa chọn action phù hợp để xử lý yêu cầu và trong quá trình này, Controller tương tác với Model để lấy dữ liệu mà người dùng cần.
Sau khi Controller tương tác với model để lấy dữ liệu cần thiết, nó sẽ gửi Data Model về cho View Nhiệm vụ của View là chuyển đổi Data Model nhận được thành dữ liệu ứng dụng và gửi trả lại Client để hiển thị kết quả theo yêu cầu.
Giới thiệu mô hình lập trình Web bằng ASP.NET MVC5
ASP.NET MVC5 cho phép phát triển ứng dụng web dựa trên mô hình MVC, thay vì sử dụng mẫu ASP.NET Web Forms Nền tảng này nổi bật với tính nhẹ, khả năng kiểm thử giao diện dễ dàng hơn so với Web Forms, và tích hợp các tính năng sẵn có của ASP.NET.
Nền tảng ASP.NET MVC, nằm trong namespace System.Web.MVC, là một mẫu thiết kế phổ biến mà nhiều lập trình viên quen thuộc Kiến trúc MVC phù hợp với một số loại ứng dụng web, trong khi những ứng dụng khác có thể sử dụng ASP.NET Web Forms và cơ chế postbacks Ngoài ra, cũng có những ứng dụng kết hợp cả hai kiến trúc này.
Tách bạch các tác vụ của ứng dụng thành logic nhập liệu, business logic và logic giao diện giúp dễ dàng kiểm thử và áp dụng hướng phát triển TDD Tất cả các tính năng chính của mô hình MVC được cài đặt dựa trên Interface và kiểm thử bằng các đối tượng mocks, cho phép mô phỏng các tính năng của những đối tượng thực sự trong ứng dụng Nhờ đó, bạn có thể thực hiện kiểm thử unit-test cho ứng dụng mà không cần phải chạy Controller trong tiến trình.
ASP.NET hỗ trợ việc áp dụng unit test một cách nhanh chóng và tiện lợi Bạn có thể sử dụng bất kỳ nền tảng kiểm thử đơn vị nào tương thích với hệ thống của mình.
NET MVC là một nền tảng khả mở rộng (extensible) & khả nhúng (pluggable).
Các thành phần của ASP.NET MVC được thiết kế để dễ dàng thay thế và tùy chỉnh, cho phép bạn nhúng thêm view engine, cơ chế định tuyến URL, và cách kết xuất tham số của action-method Hệ thống cũng hỗ trợ Dependency Injection (DI) và Inversion of Control (IoC), giúp gắn các đối tượng vào lớp mà không cần khởi tạo chúng trực tiếp IoC quy định rằng khi một đối tượng cần một đối tượng khác, nó sẽ lấy từ nguồn bên ngoài như tập tin cấu hình, từ đó làm cho việc kiểm thử trở nên dễ dàng hơn.
ASP.NET MVC cung cấp một thành phần ánh xạ URL mạnh mẽ, cho phép xây dựng ứng dụng với địa chỉ URL ngắn gọn và dễ tìm kiếm Các địa chỉ URL này không yêu cầu phần mở rộng của tên tập tin, được thiết kế để tối ưu hóa tìm kiếm và phù hợp với lập địa chỉ theo kiểu REST.
Support for utilizing specifications (tags) of ASP.NET pages (.aspx), user controls (.ascx), and master pages is available You can leverage ASP.NET features such as nesting master pages, using inline expressions (), employing server controls, templates, data binding, localization, and more.
ASP.NET cung cấp nhiều tính năng hữu ích như cơ chế xác thực người dùng, quản lý thành viên và quyền truy cập, cũng như các chức năng như output caching và data caching Ngoài ra, nó hỗ trợ quản lý session, profile người dùng, tình trạng ứng dụng và hệ thống cấu hình, giúp tối ưu hóa hiệu suất và bảo mật cho các ứng dụng web.
ASP.NET MVC introduces a new view engine called Razor View Engine, which enables the quick and easy setup of views, requiring significantly less effort compared to the traditional Web Forms view engine.
Hoạt động của các thành phần chính trong ASP.NET MVC
Khi 1 request phát sinh từ web browser đi đến IIS Web Server thì request đó cuối cùng được đưa đến 1 MVC Handler.
MVC Handler có nhiệm vụ chọn ra đúng 1 Controller để xử lý request đó.
Controller được tạo ra bởi 1 thành phần được gọi là Controller Factory.
After its creation, the Controller identifies which specific Action Method will handle the request and subsequently executes that Action Method The Action Method can interact with Model Classes to retrieve data or perform certain business logic.
Sau khi hoàn tất xử lý Action Method, hệ thống sẽ trả về một Action Result Trong ASP.NET MVC, có nhiều loại Action Result, trong đó View Result là một loại đặc biệt View Result có nhiệm vụ tương tác với một View cụ thể để tạo ra mã HTML, từ đó trả về cho trình duyệt web, giúp người dùng nhận được kết quả xử lý.
View Engine là một thành phần quan trọng trong ASP.NET MVC, cho phép hiển thị các View Cùng với Webform View Engine, người dùng có thể tạo View bằng ngôn ngữ ASPX.
Hình 2.2: Mô tả hoạt động của MVC trong ASP.NET
Tại sao phải sử dụng ASP.NET?
Yêu cầu xây dựng ứng dụng thương mại điện tử ngày càng cao, dẫn đến việc ASP không còn đáp ứng đủ nhu cầu ASP được thiết kế riêng biệt, hoạt động trên tầng trên cùng của hệ điều hành Windows và Internet Information Service, khiến cho các chức năng của nó trở nên rời rạc và hạn chế.
ASP.Net đưa ra một phương pháp phát triển hoàn toàn mới khác hẳn so với ASP trước kia và đáp ứng được các yêu cầu đặt ra.
Ưu điểm và khuyết điểm của ASP.NET
ASP chỉ hỗ trợ VBScript và JavaScript, không cho phép sử dụng các ngôn ngữ lập trình mạnh mẽ khác như Visual Basic hay C++ Ngược lại, ASP.NET cung cấp khả năng viết mã bằng nhiều ngôn ngữ khác nhau, bao gồm VBScript, JavaScript, C#, và Visual Basic.Net.
ASP.Net sử dụng phong cách lập trình mới: Code behide Tách code riêng, giao diện riêng dễ đọc, dễ quản lý và bảo trì
Trong ASP.NET, việc kiểm tra dữ liệu nhập từ người dùng trở nên dễ dàng hơn nhờ vào các validation controls, giúp giảm thiểu việc viết mã thủ công Những công cụ này cho phép lập trình viên xác thực dữ liệu một cách hiệu quả, đảm bảo tính chính xác và an toàn cho ứng dụng.
Hỗ trợ phát triển Web được truy cập trên các thiết bị di động: PocketPC, Smartphone…
Hỗ trợ nhiều web server control.
Hỗ trợ thiết kế và xây dựng MasterPage lồng nhau.
Hỗ trợ bẫy lỗi (debug) JavaScript.
Cho phép người dùng thiết lập giao diện trang Web theo sở thích cá nhân sử dụng Theme, Profile, WebPart.
Tăng cường các tính năng bảo mật (security).
Hỗ trợ kỹ thuật truy cập dữ liệu mới LINQ.
Hỗ trợ kỹ thuật xây dụng các ứng dụng đa phương tiện SilverLight.
Hỗ trợ kỹ thuật bất đồng bộ ASP.Net Ajax.
ASP.Net cung cấp hỗ trợ mạnh mẽ cho bộ thư viện phong phú của Net Framework, cho phép làm việc hiệu quả với XML, dịch vụ web, và truy cập cơ sở dữ liệu thông qua ADO.Net.
ASPX và ASP có thể cùng hoạt động trong 1 ứng dụng.
Kiến trúc lập trình giống ứng dụng trên Windows.
Hỗ trợ quản lý trạng thái của các control.
Tự động phát sinh mã HTML cho các Server control tương ứng với từng loại Browser.
Hỗ trợ nhiều cơ chế Cache.
Triển khai cài đặt: Không cần lock, không cần đăng ký DLL, cho phép nhiều hình thức cấu hình ứng dụng.
Hỗ trợ quản lý ứng dụng ở mức toàn cục: Global.aspx có nhiều sự kiện hơn, quản lý session trên nhiều Server, không cần Cookies.
ASP.Net sử dụng biên dịch trước, cho phép chuyển đổi các trang web động thành tập tin DLL, giúp máy chủ thực thi nhanh chóng và hiệu quả Điều này cải thiện đáng kể tốc độ thực thi so với phương pháp thông dịch của ASP.
Đổi với dự án nhỏ việc áp dụng mô hình MVC gây cồng kềnh, tốn thời gian trong quá trình phát triển.
Tốn thời gian trung chuyển dữ liệu của các thành phần.
Sự khác biệt mô hình lập trình Web ASP.NET MVC và ASP.NET Webform: .11
Các tính năng ASP.NET WebForm ASP.NET MVC
Kiến trúc chương trình Kiến trúc mô hình WebForm –
Kiến trúc sử dụng việc phân chia chương trình thành:
Sử dụng cú pháp của WebForm, tất cả các sự kiện và controls do server quản lý
Các sự kiện được điều khiển bởi controllers, các controls không do server quản lý
Truy cập dữ liệu Sử dụng hầu hết các công nghệ truy cập dữ liệu trong ứng dụng
Phần lớn dùng LINQ và SQL class để tạo mô hình truy cập đối tượng
Debug phải thực hiện tất cả bao gồm các lớp truy cập dữ liệu, sự hiển thị, điều khiển các controls
Debug có thể sử dụng các unit test để kiểm tra các phương thức trong controllers
Tốc độ phân tải Tốc độ phân tải chậm khi trong trang có quá nhiều các controls vì ViewState quá lớn
Phân tải nhanh hơn do không phải quản lý ViewState để quản lý các controls trong trang
Tương tác với JavaScript khó khăn vì các controls được điều khiển bởi server
Tương tác với JavaScript dễ dàng vì các đối tượng không do server quản lý điều khiển không khó
URL address Cấu trúc địa chỉ URL có dạng:
.aspx?&
Cấu trúc địa chỉ rành mạch, dễ hiểu theo dạng
Ajax
Ajax là gì nhỉ?
Ajax là một kỹ thuật quan trọng trong lập trình web, viết tắt của Asynchronous JavaScript and XML, cho phép tạo ra các trang web động mà không cần tải lại trang, mang lại trải nghiệm mượt mà cho người dùng Mặc dù Ajax đóng vai trò quan trọng trong việc làm cho website sinh động, nhưng nó có thể gây khó khăn cho SEO vì các công cụ tìm kiếm như Google gặp khó khăn trong việc index nội dung Tuy nhiên, có những phương pháp để khắc phục vấn đề này, và chúng ta sẽ khám phá thêm trong các bài viết sau.
Ajax là một kỹ thuật được phát triển bằng ngôn ngữ Javascript, cho phép chạy trên client, tức là mỗi máy người dùng hoạt động độc lập mà không ảnh hưởng lẫn nhau Hiện nay, nhiều thư viện Javascript như jQuery và Angular hỗ trợ kỹ thuật này, giúp người dùng thao tác dễ dàng hơn.
Ajax hoạt động thế nào?
Từ lâu, mọi người đã tưởng tượng rằng ứng dụng máy tính sẽ được lưu và chạy hoàn toàn trên web thay vì bị giới hạn trong ổ cứng Tuy nhiên, viễn cảnh này vẫn chưa thành hiện thực do ứng dụng web bị hạn chế bởi nguyên lý HTTP, nơi mọi thao tác của người dùng tạo ra yêu cầu gửi tới server để xử lý Quá trình này, mặc dù hợp lý về mặt kỹ thuật, gây bất tiện và mất thời gian khi người dùng phải chờ đợi Để khắc phục vấn đề này, các chuyên gia phát triển đã giới thiệu cơ chế AJAX, tạo ra một lớp trung gian giữa máy khách và máy chủ, giúp giảm thiểu quá trình truyền tải thông tin và thời gian phản hồi Thay vì tải lại toàn bộ trang, AJAX chỉ nạp những thông tin thay đổi, giúp người dùng không phải nhìn thấy cửa sổ trắng hay biểu tượng đồng hồ cát Ví dụ, trên một website ảnh, với ứng dụng truyền thống, người dùng phải tải lại toàn bộ trang khi có thay đổi, trong khi AJAX cho phép chỉ thay thế phần nội dung cần chỉnh sửa, tạo ra trải nghiệm mượt mà và nhanh chóng.
Nhiều công ty như Flickr và A9.com của Amazon đang theo xu hướng sử dụng công nghệ mới Yahoo dự kiến ra mắt Yahoo Mail Beta 1 toàn cầu trong vài tuần tới, với tính năng AJAX đang được thử nghiệm Hòm thư mới sẽ tích hợp nhiều tính năng Web 2.0 như RSS và chế độ xem thư trước Đồng thời, Microsoft cũng đang triển khai Windows Live Mail và Windows Live Messenger hỗ trợ AJAX.
AJAX là một công nghệ hiện hữu trong thế giới thực, thể hiện rõ qua các dự án từ đơn giản như Google Suggest đến phức tạp như Google Maps.
Thách thức lớn nhất khi tạo ứng dụng AJAX không nằm ở khâu kỹ thuật, mà ở việc các chuyên gia thiết kế cần vượt qua những giới hạn truyền thống của web Alexei White, Giám đốc sản xuất của công ty eBusiness (Mỹ), nhấn mạnh rằng họ nên suy nghĩ sâu hơn về khả năng của công nghệ và sáng tạo theo cách riêng AJAX có tiềm năng làm giảm ảnh hưởng của Microsoft trên thị trường.
Tuy chưa thể lấn át hoàn toàn, nó sẽ mang lại những tính năng thay thế cho hầu hết các sản phẩn như Office”.
Nhược điểm của AJAX?
AJAX đang định hình một thế hệ mới cho ứng dụng web, như colr.org và backpackit.com Tuy nhiên, công nghệ này cũng tiềm ẩn nhiều rủi ro, đặc biệt là về trải nghiệm người dùng Một vấn đề lớn là phím “Back” trong giao diện website truyền thống không hoạt động hiệu quả với Javascript, khiến người dùng không thể quay lại nội dung trước đó Do đó, chỉ cần một sai sót nhỏ có thể dẫn đến việc dữ liệu trên trang bị thay đổi mà không thể khôi phục, điều này là một trong những lý do chính khiến nhiều người không ủng hộ việc sử dụng Javascript.
Người dùng không thể lưu địa chỉ web vào thư mục Favorite (Bookmark) để truy cập sau này do các ứng dụng AJAX sử dụng lớp trung gian trong giao dịch, dẫn đến việc không có địa chỉ cố định cho từng nội dung Sự thiếu sót này khiến AJAX trở nên kém hấp dẫn trong mắt người sử dụng.
AJAX is supported by various web browsers, including Microsoft Internet Explorer 5.0 and later versions, Gecko-based browsers such as Mozilla, Firefox, SeaMonkey, Epiphany, Galeon, and Netscape 7.1, as well as browsers with KHTML API 3.2 or higher, like Konqueror and Apple Safari.
CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để định dạng và trình bày các tài liệu viết bằng HTML, XHTML, XML, SVG, và XUL Các tiêu chuẩn kỹ thuật của CSS được quản lý bởi tổ chức World Wide Web Consortium (W3C).
DOM, hay mô hình đối tượng tài liệu, là một giao diện lập trình ứng dụng (API) quan trọng Nó thường được biểu diễn dưới dạng một cây cấu trúc dữ liệu, cho phép truy xuất các tài liệu HTML và XML Mô hình DOM hoạt động độc lập với hệ điều hành và sử dụng kỹ thuật lập trình hướng đối tượng để mô tả tài liệu một cách hiệu quả.
DHTML, hay còn gọi là HTML động, là một công nghệ kết hợp giữa ngôn ngữ đánh dấu HTML tĩnh, ngôn ngữ lệnh máy khách như Javascript và ngôn ngữ định dạng CSS cùng với DOM Nhờ vào khả năng phong phú, DHTML không chỉ được sử dụng để tạo ra các trang web tương tác mà còn được áp dụng để xây dựng các trò chơi đơn giản trên trình duyệt.
HTML
HTML là gì?
HTML, viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản), là công cụ chính để xây dựng các trang web Mỗi trang trong một website được xem như một tài liệu, tương ứng với một tập tin HTML.
Tim Berners-Lee, the creator of HTML, is also the inventor of the World Wide Web and serves as the chairman of the World Wide Web Consortium (W3C), the organization responsible for establishing standards on the Internet.
Một tài liệu HTML được cấu thành từ các phần tử HTML, được xác định bằng các cặp thẻ bao quanh bởi dấu ngoặc ngọn, thường bao gồm thẻ mở và thẻ đóng Văn bản cần đánh dấu bằng HTML sẽ được đặt bên trong cặp thẻ, như Đây là chữ in đậm Tuy nhiên, một số thẻ đặc biệt không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính, chẳng hạn như thẻ .
Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là html hoặc htm.
HTML được xử lý ra sao?
Khi một tập tin HTML được tạo ra, trình duyệt web sẽ xử lý nội dung của nó Trình duyệt đảm nhiệm việc đọc và hiểu các thẻ HTML, chuyển đổi chúng thành văn bản đã được đánh dấu để người dùng có thể đọc, nghe hoặc để các bot máy tính có thể hiểu.
Dùng chương trình gì để tạo tập tin HTML?
HTML là một loại tập tin siêu văn bản, cho phép bạn tạo ra bằng các chương trình soạn thảo văn bản không cần định dạng Trên hệ điều hành Windows, bạn có thể sử dụng Notepad để tạo tập tin HTML, trong khi trên Mac có thể dùng TextEdit và trên Linux có thể sử dụng Vim Quan trọng là sau khi tạo, bạn cần lưu tập tin với đuôi html và sử dụng trình duyệt web để mở và đọc nội dung.
Mặc dù Notepad có thể được sử dụng để soạn thảo HTML, nhưng nó quá đơn giản và không phù hợp cho mục đích này Thay vào đó, nên sử dụng một chương trình soạn thảo khác tương tự để làm việc với HTML Ngoài ra, không nên chỉnh sửa tập tin HTML bằng Notepad để tránh gặp phải lỗi hiển thị ký tự tiếng Việt.
HTML đóng vai trò gì trong website?
HTML là ngôn ngữ đánh dấu siêu văn bản, đóng vai trò quan trọng trong việc xây dựng cấu trúc siêu văn bản trên website và khai báo các tập tin kỹ thuật số như hình ảnh, video và nhạc.
CSS
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm kiếm và định dạng các phần tử được tạo ra bởi các ngôn ngữ đánh dấu như HTML Trong khi HTML định hình các phần tử trên website như đoạn văn bản, tiêu đề và bảng, CSS cho phép người dùng thêm “phong cách” cho các phần tử HTML, bao gồm việc thay đổi màu sắc trang, màu chữ và cấu trúc.
Hình 2.4: ví dụ CSS trang trí thêm cho văn bản viết bằng HTML
CSS hoạt động bằng cách tìm kiếm các vùng chọn, bao gồm tên thẻ HTML, ID, class và nhiều kiểu khác Sau khi xác định được vùng chọn, CSS sẽ áp dụng các thuộc tính cần thiết để thay đổi kiểu dáng của chúng.
Bootstrap
Bootstrap là gì?
Bootstrap là một framework CSS được phát triển bởi Twitter, giúp web designer tiết kiệm thời gian bằng cách cung cấp các 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 Ngoài 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.
Vì sao phải dùng nó?
Được sáng tạo bởi những người có gu thẩm mỹ và tài năng toàn cầu, trình duyệt đã được kiểm tra kỹ lưỡng về tính tương thích với thiết bị, mang lại kết quả đáng tin cậy mà không cần kiểm tra lại Điều này giúp dự án của bạn tiết kiệm thời gian và chi phí hiệu quả.
Chỉ cần nắm vững những kiến thức cơ bản về HTML, CSS, Javascript và Jquery, bạn có thể dễ dàng sử dụng Bootstrap để thiết kế một trang web chuyên nghiệp và ấn tượng mà không cần phải viết quá nhiều mã CSS.
Giao diện mặc định của nó mang màu xám bạc sang trọng và hỗ trợ nhiều thành phần cần thiết cho các website hiện nay Là một mã nguồn mở, bạn có thể dễ dàng truy cập và tùy chỉnh theo sở thích cá nhân.
Bootstrap hỗ trợ Responsive nhờ vào việc sử dụng Grid System, với thiết kế theo xu hướng Mobile First, ưu tiên giao diện trên thiết bị di động trước.
Sử dụng Bootstrap cho website của bạn đảm bảo tính tương thích với mọi kích thước màn hình, giúp bạn không cần tạo một phiên bản riêng cho di động Đội ngũ phát triển Bootstrap cũng đã tích hợp tính năng Customizer, cho phép các designer lựa chọn các thuộc tính và component phù hợp với dự án của họ.
Chức năng này giúp ta không cần phải tải toàn bộ mã nguồn về máy.
Jquery
HTML5 là vấn đề quan trọng của chúng ta?
HTML5 mang lại nhiều lợi ích cho người dùng web, khắc phục những vấn đề tồn tại trong HTML4 Việc áp dụng HTML5 giúp cải thiện tiêu chuẩn web, nâng cao hiệu quả nội dung và tối ưu hóa hiệu suất Khi HTML5 được sử dụng rộng rãi, các trang web sẽ hoạt động nhanh hơn, tiết kiệm băng thông và kéo dài thời gian sử dụng pin trên các thiết bị di động.
Một lợi ích đáng kể khác của việc sử dụng trình duyệt hiện đại là giảm thiểu sự cần thiết phải cài đặt và cập nhật quá nhiều plugin như Flash và Java Điều này giúp loại bỏ phiền nhiễu khi người dùng phải liên tục cập nhật các addon và plugin cho từng trình duyệt, đồng thời giảm thiểu rủi ro khi một trong số chúng là phiên bản bị lỗi.
Các trang web sẽ không hoạt động cho đến khi bạn thực hiện các cập nhật cần thiết Tình trạng này sẽ được khắc phục khi HTML5 trở thành tiêu chuẩn chính.
Nếu bạn là người sử dụng web thông thường và không có kế hoạch mã hóa hay duy trì trang web riêng, bạn không cần làm gì để tận hưởng những tính năng tuyệt vời của HTML5 Hầu hết các trình duyệt hiện nay đều hỗ trợ HTML5, cho phép bạn khai thác các lợi ích mà không cần biết Chỉ cần đảm bảo rằng trình duyệt của bạn luôn được cập nhật, bạn sẽ nhận được trải nghiệm tốt nhất.
Nếu bạn là một nhà phát triển web, HTML5 sẽ giúp công việc của bạn trở nên đơn giản và dễ dàng hơn Với HTML5, bạn sẽ giảm thiểu rủi ro gặp phải lỗi và trục trặc trong thiết kế web, vì tất cả các trình duyệt đều phải tuân thủ các tiêu chuẩn chung.
CSS3
CSS3 là phiên bản nâng cấp của CSS, mang đến nhiều tính năng mới đáng chú ý, mặc dù chưa được áp dụng rộng rãi Sự ra đời của CSS3 đã phần nào thay thế một số chức năng của Javascript, với HTML đảm nhiệm việc thể hiện nội dung và CSS đảm nhận vai trò trình bày cấu trúc.
Javascript thì tương tác với người dùng Nhưng những tính năng mới của CSS3 như transition và animation phần nào đã làm thay đổi nguyên lý này.
Hiện nay, lập trình viên JavaScript cần xem xét khả năng người dùng không bật JavaScript trên trình duyệt Tuy nhiên, nếu trong tương lai có thể tạo ra các hiệu ứng động đơn giản mà không cần đến JavaScript, điều đó sẽ rất thuận lợi.
CSS3 được thiết kế để cải thiện sự tương thích với HTML5, giúp bố cục nội dung trở nên rõ ràng và dễ hiểu hơn Hiện nay, các tài liệu HTML có cấu trúc tốt hơn, với các thuộc tính CSS và thẻ HTML được phân tách rõ ràng thông qua các hàng "class" và "id".
CSS3 không chỉ cải thiện giao diện mà còn giúp loại bỏ mã thừa trong HTML, khi các thuộc tính trong thẻ HTML không còn cần thiết.
Media Queries trong CSS3 vừa được giới thiệu, cho phép tương thích với nhiều kích thước màn hình khác nhau mà không cần chỉnh sửa nội dung hiển thị, từ đó nâng cao tính linh hoạt của ứng dụng.
CSS3 là ngôn ngữ được hầu hết các trình duyệt trên thế giới hỗ trợ, giúp hiển thị website một cách nhất quán Để tối ưu hóa trải nghiệm người dùng, các nhà thiết kế web cần xác định trình duyệt phổ biến nhất mà người dùng sử dụng, từ đó thực hiện các điều chỉnh phù hợp hoặc áp dụng các hàm fix hỗ trợ CSS3.
3 CHƯƠNG III: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Phân tích thiết kế các chức năng ứng dụng
Mô tả chức năng ứng dụng
Mục đích của đề tài là xây dựng hệ thống phần mềm quản lý bán hàng trên môi trường web, giúp người quản lý dễ dàng theo dõi sản phẩm và kiểm soát doanh thu Hệ thống này không chỉ tạo điều kiện thuận lợi cho việc quản lý bán hàng mà còn mang lại trải nghiệm mua sắm thoải mái cho khách hàng, cho phép họ mua sắm sản phẩm yêu thích mà không cần đến cửa hàng.
Bộ phận quản lý thực hiện các nghiệp vụ sau khi người dùng đăng nhập bằng tài khoản và mật khẩu Nhân viên được phân quyền để thực hiện các chức năng khác nhau, trong khi chỉ người quản lý chính có đầy đủ quyền kiểm soát.
Xem sản phẩm danh sách sản phẩm mới và danh sách sản phẩm bán chạy.
Xem tình trạng sản phẩm còn hàng hay hết hàng, nều hết thì cập nhật sản phẩm cho web bán hàng.
Cập nhật giá mới cho sản phẩm.
Xem danh sách người liên hệ.
Quản lý đơn hàng Trang web còn phục vụ cho khách hàng, với những chức năng sau:
Tìm kiếm sản phẩm theo hãng
Chọn sản phẩm và xem chi tiết sản phẩm.
Thanh toán trực tuyến sản phẩm.
Xem giỏ hàng đã đặt mua những gì.
Cập nhật giỏ hàng (Thêm, xóa, cập nhật, xóa tất cả trong giỏ hàng).
Đặt hàng (chức năng này cần phải đăng nhập trước).
Liên hệ với công ty thông qua trang liên hệ.
Các chức năng chính của hệ thống đối với quản trị(Admin) như sau:
1 Đăng nhập hệ thống để quản lý Hiển thị
2 Xem tình trạng của sản phẩm còn hàng hay hết hàng Nếu hết thì nhập thêm cho sản phẩm Hiển thị
3 Nhập sản phẩm mới Hiển thị
4 Nhập loại sản phẩm Hiển thị
5 Nhập nhà sản xuất Hiển thị
6 Nhập nhà cung cấp Hiển thị
7 Nhập loại khách hàng Hiển thị
8 Xem danh sách tài khoản khách hàng Hiển thị
9 Quản lý đơn hàng Hiển thị
Các chức năng chính của hệ thống đối với nhân viên nhập liệu như sau:
1 Đăng nhập hệ thống để quản lý Hiển thị
2 Nhập nhà sản xuất Hiển thị
4 Nhập số lượng Hiển thị
5 Nhập sản phẩm Hiển thị
6 Thêm giá sản phẩm Hiển thị
7 Xóa sản phẩm Hiển thị
8 Thanh toán đơn đặt hàng Hiển thị
Các chức năng chính của hệ thống đối với khách hàng như sau:
Quy tắc Chức năng Loại
1 Xem sản phẩm Hiển thị
3 Xem giỏ hàng Hiển thị
4 Gửi thông tin liên hệ Hiển thị
5 Thanh toán trực tuyến Hiển thị
6 Quản lý xem giỏ hàng (thêm,xóa, sửa….) Hiển thị
10 Xem thông tin cá nhân Hiển thị
12 Đổi mật khẩu Hiển thị
Sơ đồ Use Case
Hình 3.1: Sơ đồ UseCase mô tả chức năng của người dùng (User)
3.1.2.2 UseCase người dùng (User) tương tác với người quản trị (Admin):
Hình 3.2: Sơ đồ UseCase mô tả sự tương tác giữa người dùng với người quản trị
3.1.2.3 UseCase người quản trị viên (Admin):
Hình 3.3: Sơ đồ UseCase mô tả chức năng người quản trị viên(Admin)
Sơ đồ Activity
3.1.3.1 Activity đăng ký t ài khoản khách hàng:
Hình 3.4: Activity đăng ký tài khoản khách hàng
3.1.3.3 Activity nhân viên thêm sản phẩm:
Sơ đồ Class Diagram
Hình 3.6: Sơ đồ Class Diagram:
Thiết kế dữ liệu
Mô hình vật lý
Danh sách đối tượng
Chi tiết phiếu nhập ChiTietPhieuNhap
Loại thành viên Bình luận Khách hàng
LoaiThanhvien BinhLuan KhachHang Đơn đặt hàng DonDatHang
Chi tiết đơn đặt hàng ChiTietDonDatHang
Mô tả chi tiết các bảng
Giao diện User
Giao diện trang tìm kiếm
4.1.11Giao diện trang giải đáp thắc mắc:
4.1.12Giao diện trang liên hệ:
4.2.1 Giao diện trang đăng nhập phần Admin:
Giao diện trang thống kê
Kết quả đạt được
Qua quá trình thực hiện đồ án môn học lập trình web này, nhóm sinh viên chúng em đã được mốt số kết quả như sau:
-Hiểu biết thêm về ứng dụng web công nghệ asp.net khác biệt so với ứng dụng trên desktop (ứng dụng winform) đã được học.
-Hiểu biết về ngôn ngữ lập trình C# ứng dụng vào Web của Microsoft, cụ thể là ASP.NET MVC5.
-Hiển thêm một số ngôn ngữ như HTML5, CSS3, JQUERY, AJAX, …
LINQ là một ngôn ngữ truy vấn cơ sở dữ liệu hướng đối tượng, giúp lập trình viên dễ dàng tương tác với các loại cơ sở dữ liệu như XML và cơ sở dữ liệu quan hệ Việc hiểu biết về LINQ không chỉ nâng cao khả năng làm việc với dữ liệu mà còn cải thiện hiệu suất lập trình.
Đồ án giúp sinh viên tổng hợp kiến thức từ các môn học cơ sở như CSDL, hệ quản trị CSDL nâng cao, SQL Server, kỹ thuật lập trình, lập trình hướng đối tượng (OOP) và phân tích thiết kế hệ thống thông tin, từ đó nâng cao khả năng ứng dụng thực tiễn.
-Nâng cao khả năng lập trình, cũng như được biết thêm mốt số công nghệ mới như: thanh toan trực tuyến, FaceBook API, Google API,
Dựa trên kiến thức đã học, nhóm chúng em đã phát triển một ứng dụng web cơ bản nhằm phục vụ nhu cầu học tập Mặc dù ứng dụng này còn đơn giản, thiếu nhiều chức năng cần thiết và chưa tối ưu về giao diện, giải thuật hay xử lý lỗi, nhưng đây là bước khởi đầu quan trọng để nhóm có thể phát triển và xây dựng các ứng dụng web thực tế hơn trong tương lai.
Hoàn thành
STT Chức năng Mức độ hoàn thành Ghi chú
3 Thêm sản phẩm vào giỏ hàng Hoàn thành
4 Xem Sản phẩm theo danh mục Hoàn thành
6 Xem chi tiết sản phẩm Hoàn thành
7 Cập nhật giỏ hàng Hoàn thành
9 Thêm sản phẩm Hoàn thành
10 Thêm giá mới cho sản phẩm Hoàn thành
11 Cập nhật đơn đặt hàng Hoàn thành
12 Thêm loại sản phẩm Hoàn thành
13 Xem tài khoản khách hàng Hoàn thành
14 Nh ập hàng Hoàn thành
15 Cập nhật slton Hoàn thành
16 Quản lý đơn hàng Hoàn thành
17 Facebook Api, Google map Api Hoàn thành
Hướng phát triển
Để cải thiện trải nghiệm người dùng, chúng ta cần tối ưu hóa bố cục và thiết kế trang web, tạo sự thân thiện hơn cho người sử dụng Đồng thời, cần điều chỉnh độ tương thích của trang web để nó hoạt động hiệu quả trên cả máy tính để bàn và các trình duyệt di động.
Hiện nay, hầu hết người dùng đều sử dụng tài khoản Facebook hoặc Google, vì vậy việc tích hợp chức năng đăng nhập bằng các tài khoản này là cần thiết Điều này giúp người dùng dễ dàng đăng nhập ngay mà không cần phải đăng ký tài khoản mới trên trang web của chúng ta.
Cần bổ sung chức năng gửi email phản hồi cho người dùng, thay vì yêu cầu họ điền thông tin trên trang web Với tài khoản Yahoo hoặc Gmail, người dùng có thể gửi email nhanh chóng và thuận tiện hơn.
Phương thức thanh toán trực tuyến bằng cách thêm từng sản phẩm có thể tốn nhiều thời gian, đặc biệt khi cơ sở dữ liệu có từ 30 sản phẩm trở lên Do đó, cần xem xét thay đổi hình thức thanh toán hoặc cải tiến quy trình để tăng tốc độ lấy mã nhúng cho từng sản phẩm.
- Cần phải làm thêm về việc các lỗi 404, 500, …
- Thêm các công nghệ Web Service.