Xây dựng website bán hàng MVC 4

Xây dựng website bán hàng MVC Bài : Say Hello MỤC TIÊU   Biết cách tạo project Hiểu thành phần Model, View, Controller nguyên lý hoạt động ứng dụng MVC4 MÔ TẢ   Trong bạn phải tạo ứng dụng MVC4 có hoạt động theo mô tả giao diện sau THỰC HIỆN       Bước 1: Mở project mẫu Bước 2: Tạo HomeController Bước 3: Thiết kế View Index.cshtml Bước 4: Xây dựng lớp UserInfo Bước 5: Thêm Action SayHello() Bước 6: Thiết kế View SayHello.cshtml Bước 1: Mở project mẫu Để tập trung vào phần việc khai thác Entity Framework nên buổi học hôm cho sẵn project mẫu Các bạn việc mở bổ sung thêm mã theo yêu cầu Phải chuột vào file solution sau chọn VS2012 để chạy hướng dẫn hình sau: Để thêm Controller vào project, bạn việc phải chuột lên thư mục Controllers sau chọn Add>>Controller>>Đặt tên cho controller Tên Controller phải có phần tiếp cuối ngữ Controller Ví dụ: HomeController, ProductController, SupplierController tên hợp lệ Bước 2: Tạo HomeController Bước 3: Thiết kế View Index.cshtml Để thêm view cho action controller vào project, bạn việc mở controller phải chuột lênaction>>Add View>> Đặt tên (nên giữ nguyên tên gợi ý hộp thoại) Cần lưu ý nhấp nút Say Hello liệu form chuyển đến Action SayHello() HomeController Bước 4: Xây dựng lớp UserInfo Để tiếp nhận thông tin từ form Index.cshtml chứa thông tin để trình bày trang kết sau nhập nút [SayHello], bạn cần định nghĩa lớp UserInfo gồm thuộc tính cần thiết sau Name Gender thuộc tính dùng để nhận thông tin từ form Greeting Photo sử dụng để chứa thông tin trình bày trang kết Bước 5: Thêm Action SayHello() Action gọi nhấp nút [Say Hello] form Index.cshtml Với MVC4 tham số tự động chuyển vào thuộc tính tên tham số model action SayHello() Việc lại phân tích giới tính để đưa lời chào hình ảnh phù hợp để chuyển cho view kết (cùng tên với action –SayHello.cshtml) Bước 6: Thiết kế View SayHello.cshtml SayHello.cshtml view sử dụng để hiển thị thông tin (model) chuyển từ action SayHello() Bạn phải tạo view thiết kế mã sau: Tải project để thực hành nha : https://www.dropbox.com/s/sddxivoraxpb86d/ProjectMVC_HocLapTrinhWeb.com.rar Xây dựng website bán hàng MVC - BÀI 2: ÁNH XẠ CSDL MỤC TIÊU    Biết cách khai báo chuỗi kết nối web.config Biết cách định nghĩa thực thể ánh xạ với bảng CSDL Biết cách định nghĩa lớp DbContext để ánh xạ thực thể với CSDL MÔ TẢ Trong bạn phải ứng dụng mô hình code-first EF để xây dụng lớp thực thể để làm việc với CSDL gồm bảng: Products, Categories Suppliers mô tả sau: Xây dựng website bán hàng MVC – BÀI 4: Trình bày phân trang sản phẩm MỤC TIÊU   Biết cách trình bày hàng hóa Biết cách sử dụng phương thức mở rộng Take() Skip() để phân trang hàng hóa với LINQ MÔ TẢ Trong ban phải xây dựng trang web với MVC4 để trình bày mặt hàng có phân trang mô tả hình sau Trình bày: Thông tin hiển thị mặt hàng gồm: tên, hình, giá hình ảnh biểu tượng trang trí Mỗi hàng gồm mặt hàng Phân trang: trang mặt hàng nhóm gồm trang THỰC HIỆN    Bước 1: Tạo ProductController thêm Action Search() Bước 2: Thiết kế View Search.cshtml Bước 3: Phân trang Bước 1: Tạo ProductController Action Search() Tạo ProductController thêm action Search vào Sau viết mã để cấp danh sách hàng hóa cho view Search.cshtml Mã sau: Bước 2: Thiết kế View Search.cshtml Thêm view Search.cshtml thiết kế để hiển thị danh sách hàng hóa sau Bước 3: Phân trang  Để phân trang, bạn cần hiệu chỉnh mã action Search() view Search.cshtml Trong action Search() bạn cần hiệu chỉnh lại sau:  Ý nghĩa tham số phương thức Pager.Set()       “pager1”: định danh phân trang – trang đặt với định danh khác số lượng hàng hóa trình bày trang số trang nhóm Products.Count tổng số ghi đưa vào để phân trang Trong view Search.cshtml, bạn cần bổ sung điều hướng phân trang vào đầu cuối danh sách Xây dựng website bán hàng MVC BÀI 5: MASTER-DETAILS MỤC TIÊU  Khai thác quan hệ thực thể kết hợp để trình bày dạng master-details MÔ TẢ Trong ban phải xây dựng trang web với MVC4 để trình bày chi tiết mặt hàng thông qua thực thể kết hợp để lấy trình bày mặt hàng loại hàng nhà cung cấp Trang web mô tả hình sau Giao diện gồm phần:   Phần trên: trình bày thông tin chi tiết hàng hóa xem Phần dưới: trình bày mặt hàng loại nhà cung cấp THỰC HIỆN   Bước 1: Thêm Action Detail() vào ProductController Bước 2: Thiết kế View Detail.cshtml Bước 1: Thêm Action Detail() vào ProductController Bổ sung action Detail() vào ProductController để nhận vào tham số mã hàng hóa sau tìm hàng hóa chuyển thông tin cho view Detail.cshtml Bước 2: Thiết kế View Detail.cshtml View Detail.cshtml việc khai thác model chia sẻ từ action Detail() để hiển thị thông tin chi tiết View hiển thị mặt hàng loại nhà cung cấp cách khai thác thực thể kết hợp EF Khi nhấp chuột vào mặt hàng loại hay nhà cung cấp chi tiết mặt hàng trình bày thay cho mặt hàng xem Xây dựng website bán hàng MVC – BÀI 6: HOÀN THIỆN PARTIALVIEW MỤC TIÊU  Sử dụng EF để bổ sung cho phần giao diện thiếu liệu Layout MÔ TẢ Trong ban phải hoàn thiện mã để hiển thị liệu đầy đủ cho số PartialView Layout Cụ thể bạn phải hiển thị chủng loại _Category.cshtml, nhà cung cấp _Supplier.cshtml math hàng ngẫu nhiên _Promotion.cshtml Sau PartailView cấp liệu đầy đủ THỰC HIỆN    Bước 1: Hoàn thiện _Category.cshtml Bước 2: Hoàn thiện _Supplier.cshtml Bước 3: Hoàn thiện _Promotion.cshtml Bước 1: Hoàn thiện _Category.cshtml Mở partial view _Category.cshtml Views/Shared hiệu chỉnh mã razor sau để hiển thị tất nhà cung cấp nhấp vào nhà cung cấp gọi action Search() ProductController với tham số CategoryId Bước 2: Hoàn thiện _Supplier.cshtml Mở partial view _Supplier.cshtml Views/Shared hiệu chỉnh mã razor sau để hiển thị tất nhà cung cấp nhấp vào nhà cung cấp gọi action Search() ProductController với tham số SupplierId Bước 3: Hoàn thiện _Promotion.cshtml Mở partial view _Promotion.cshtml Views/Shared hiệu chỉnh mã razor sau để hiển thị mặt hàng ngẫu nhiên Khi nhấp chuột vào mặt hàng gọi action Detail() ProductController với tham số mã hàng hóa chọn Xây dựng website bán hàng MVC - BÀI 7: Tìm kiếm sẩn phẩm với nhiều tùy chọn MỤC TIÊU  Biết cách xây dựng trang Action tiếp nhận phân biệt tham số vào để xây dựng kết tìm kiếm phù hợp với điều kiện mong muốn MÔ TẢ Trong bạn phải hiệu chỉnh mã nguồn Action Search ProductController để tiếp nhận yêu cầu từ:    Nhấp loại: xem hàng theo chủng loại Nhấp nhà cung cấp: xem hàng theo nhà cung cấp Nhấp chuỗi tìm kiếm: xem hàng có tên chứa chuỗi tìm kiếm Sau trang hàng hóa nhấp liên kết chủng loại Cameras THỰC HIỆN   Bước 1: Hoàn thiện _Search.cshtml Bước 2: Nâng cấp mã Action Search ProductController Bước 1: Hoàn thiện _Search.cshtml Mở _Search.cshtml Views/Shared hoàn thiện mã nguồn sau để submit form gọi action Search() ProductController truyền theo tham số Search Bạn hoàn thiện Layout với _Category.cshtml _Supplier.cshtml gọi action Search() ProductController với mẫu liên kết:   @c.Name @s.Name Bước 2: Nâng cấp mã Action Search ProductController Để tạo kết tìm kiếm khác dựa vào tham số yêu cầu (Search, CategoryId SupplierId), bạn cần hiệu chỉnh mã action Search() sau: BÀI : Kiểm tra lỗi trước sau đưa lên server lưu vào Database MỤC TIÊU  Biết cách kiểm lỗi liệu vào MVC4 MÔ TẢ Trong bạn phải tạo trang web thêm mặt hàng Nếu nhập liệu sai trang web thông báo lỗi tức với Jquery Trang web kiểm lỗi phía client mà kiểm lỗi server phòng ngừa hacker vượt qua tường rào JavaScript Sau hình ảnh trang web nhập liệu không THỰC HIỆN     Bước 1: Bổ sung Annotation vào Model Bước 2: Bổ sung action Validate()-GET vào ProductController Bước 3: Tạo View Validate.cshtml Bước 4: Bổ sung Validate()-POST vào ProductController Bước 1: Bổ sung Annotation vào Model Trong MVC4, Model sử dụng để tiếp nhận liệu vào từ giao diện Nó đồng thời quản lý thực thể CSDL Bây bạn cọn biết nhiệm vụ khác kiểm loại liệu vào Với Annotation đánh dấu thuộc tính kết nối với trường form, bạn kiểm lỗi cách hiệu phía client server Sau annotation sử dụng để kiểm lỗi:  Không không để trống Name Image    UnitPrice phải số dương Image chấp nhận ảnh gif, jpg hay png Description không vượt 2000 ký tự Bước 2: Bổ sung action Validate() - GET vào ProductController Action GET action phép gọi với phương thức GET web để hiển thị form nhập liệu Action chuyển selectlist để hiển thị lên DropDownList view Validate.cshtml Bước 3: Tạo View Validate.cshtml View Validate.cshtml form nhập liệu có kiểm soát lỗi liệu đầu vào dựa vào qui luật kiểm lỗi cài đặt sẵn Model Bước 4: Bổ sung Validate() - POST vào ProductController Khi bạn nhấp vào nút [Create] form kiểm lỗi phía client trước Nếu tất điều hợp lệ liệu form chuyển đến action Validate() – POST để xử lý Tại liệu kiểm tra lại lần công việc kiểm lỗi thực   ValidateAntiForgeryToken: ngăn chặn yêu cầu giả ModelState.IsValid: kiểm lỗi liệu tham số model [...]... thư mục Models một lớp với tên MVC4 SerminarDB Sau đó viết mã cho lớp này như sau Xây dựng website bán hàng MVC 4 - BÀI 3: ỨNG DỤNG CRUD MỤC TIÊU    Biết cách xây dựng ứng dụng CRUD (Create, Read, Update và Delete) với EF trong MVC4 Biết cách upload hình lên server Biết cách trang trí trang web với Jquery MÔ TẢ Trong bài này ban sẽ phải xây dựng một trang web với MVC4 sử dụng EF để quản lý bảng Suppliers... việc với CSDL MVC4 Seminar CSDL sẽ được tự động tạo ra khi bạn có thao tác đến CSDL lần đầu tiên Tuy nhiên trong bài này, chúng ta cần dữ liệu để minh họa, nên bạn cần tạo CSDL trước với file MVC4 Seminar.sql được đặt trong thư mục Database Bạn chỉ cần chạy SQL Server -> mở file -> nhấn F5 là CSDL MVC4 Seminar được tạo ra gồm 3 bảng như mô tả ở trên Xây dựng website bán hàng MVC 4 – BÀI 4: Trình bày và... Views/Shared và hiệu chỉnh mã razor như sau để hiển thị 3 mặt hàng ngẫu nhiên Khi nhấp chuột vào mỗi mặt hàng sẽ gọi action Detail() của ProductController với tham số là mã hàng hóa được chọn Xây dựng website bán hàng MVC 4 - BÀI 7: Tìm kiếm sẩn phẩm với nhiều tùy chọn MỤC TIÊU  Biết cách xây dựng trang Action tiếp nhận và phân biệt tham số vào để xây dựng kết quả tìm kiếm phù hợp với điều kiện mong muốn... bày hàng hóa Biết cách sử dụng các phương thức mở rộng Take() và Skip() để phân trang hàng hóa với LINQ MÔ TẢ Trong bài này ban sẽ phải xây dựng một trang web với MVC4 để trình bày các mặt hàng có phân trang được mô tả như các hình sau đây Trình bày: Thông tin được hiển thị của mỗi mặt hàng gồm: tên, hình, giá và các hình ảnh biểu tượng trang trí Mỗi hàng gồm 3 mặt hàng Phân trang: mỗi trang 6 mặt hàng. .. cùng loại và cùng nhà cung cấp bằng cách khai thác thực thể kết hợp trong EF Khi nhấp chuột vào một mặt hàng cùng loại hay cùng nhà cung cấp thì chi tiết của mặt hàng đó được trình bày thay cho mặt hàng đang xem Xây dựng website bán hàng MVC 4 – BÀI 6: HOÀN THIỆN PARTIALVIEW MỤC TIÊU  Sử dụng EF để bổ sung cho các phần giao diện còn thiếu dữ liệu trên Layout chính MÔ TẢ Trong bài này ban sẽ phải hoàn... master-details MÔ TẢ Trong bài này ban sẽ phải xây dựng một trang web với MVC4 để trình bày chi tiết một mặt hàng và thông qua thực thể kết hợp để lấy và trình bày các mặt hàng cùng loại và hàng cùng nhà cung cấp Trang web được mô tả như các hình sau đây Giao diện gồm 2 phần:   Phần trên: trình bày thông tin chi tiết hàng hóa được xem Phần dưới: trình bày các mặt hàng cùng loại và cùng nhà cung cấp THỰC... trang – mỗi trang được đặt với 1 định danh khác nhau 6 là số lượng hàng hóa được trình bày trên mỗi trang 5 là số trang trên mỗi nhóm Products.Count là tổng số bản ghi được đưa vào để phân trang Trong view Search.cshtml, bạn chỉ cần bổ sung thanh điều hướng phân trang vào đầu và cuối danh sách là được Xây dựng website bán hàng MVC 4 BÀI 5: MASTER-DETAILS MỤC TIÊU  Khai thác quan hệ thực thể kết hợp... dễ hiểu hơn Bước 2: Thiết kế View Crud.cshtml Thêm view Crud.cshtml và thiết kế giao diện như sau: Bước 3: Hoàn thiện mã xử lý cho Crud  Để làm việc được với CSDL, bạn cần dòng mã lệnh: o MVC4 SeminarDB db = new MVC4 SeminarDB();  Đề biết được có tham số cmdInsert hay không, bạn cần o if (Request["cmdInsert"] != null) {…}  Để kiểm tra xem có upload file hay không: o if (Uploader.HasFile("uplLogo")){}... ProductController để nhận vào tham số mã hàng hóa sau đó tìm hàng hóa và chuyển thông tin cho view Detail.cshtml Bước 2: Thiết kế View Detail.cshtml View Detail.cshtml chỉ việc khai thác model chia sẻ từ action Detail() để hiển thị thông tin chi tiết View này cũng hiển thị các mặt hàng cùng loại và cùng nhà cung cấp bằng cách khai thác thực thể kết hợp trong EF Khi nhấp chuột vào một mặt hàng cùng loại hay cùng nhà... bạn phải hiệu chỉnh mã nguồn của Action Search trong ProductController để có thể tiếp nhận các yêu cầu từ:    Nhấp 1 loại: xem hàng theo chủng loại Nhấp 1 nhà cung cấp: xem hàng theo nhà cung cấp Nhấp chuỗi tìm kiếm: xem hàng có tên chứa chuỗi tìm kiếm Sau đây là trang hàng hóa khi nhấp liên kết chủng loại Cameras THỰC HIỆN   Bước 1: Hoàn thiện _Search.cshtml Bước 2: Nâng cấp mã Action Search của ... với tên MVC4 SerminarDB Sau viết mã cho lớp sau Xây dựng website bán hàng MVC - BÀI 3: ỨNG DỤNG CRUD MỤC TIÊU    Biết cách xây dựng ứng dụng CRUD (Create, Read, Update Delete) với EF MVC4 Biết... Server -> mở file -> nhấn F5 CSDL MVC4 Seminar tạo gồm bảng mô tả Xây dựng website bán hàng MVC – BÀI 4: Trình bày phân trang sản phẩm MỤC TIÊU   Biết cách trình bày hàng hóa Biết cách sử dụng phương... mặt hàng loại nhà cung cấp cách khai thác thực thể kết hợp EF Khi nhấp chuột vào mặt hàng loại hay nhà cung cấp chi tiết mặt hàng trình bày thay cho mặt hàng xem Xây dựng website bán hàng MVC