CHƯƠNG 1: MƠ HÌNH MVC I Giới thiệu mơ hình lập trình MVC: MVC gì? MVC viết tắt Model – View – Controller Là design pattern Được vận hành để tách mã lệnh thành phần riêng biệt Ở phần MVC có chức đặc thù Để xử lý tác vụ mà request gởi tới MVC làm cho mã lệnh trở nên sáng, dễ phát triển dễ nâng cấp theo thời gian Để làm việc tốt MVC, cần nắm thật vững kiến thức OOP Bản chất framework khác hình thành lý thuyết MVC Do nắm tốt MVC Thì framework khác chắn khơng cảm thấy khó hiểu  Model: Là thành phần chịu trách nhiệm xử lý thao tác database Và gởi trả kết thông qua view  View: Là phần hiển thị thông tin website, sau qua controller nhận kết từ phía model view bước cuối để chuyển thông tin tới người dùng  Controller: Là phần điều hướng request tới tác vụ tương ứng Controller phần thiếu framework Vì có trách nhiệm gởi nhận request từ hệ thống tới người sử dụng Kiến trúc mơ hình MVC: Trong kiến trúc MVC, đối tượng đồ họa người dùng(GUI Compone nt) bao gồm thành phần bản: Model, View, Controller Model có trách nhiệm toàn liệu trạng thái đối tượng đồ họa View thể trực quan Model, hay nói cách khác giao diện đối tượng đồ họa Và Controller điều khiển việc tương tác đối tượng đồ họa với người sử dụng đối tượng khác Khi người sử dụng đối tượng khác cần thay đổi trạng thái đối tượng đồ họa, tương tác thơng qua Controller đối tượng đồ họa Controller thực việc thay đổi Model Khi có thay đổi xảy Model, phát thơng điệp ( broadcast message) thông báo cho View Controller biết Nhận thông điệp từ Model, View cập nhật lại thể mình, đảm bảo ln thể trực quan xác Model Còn Controller, nhận thơng điệp từ Model, có tương tác cần thiết phản hồi lại người sử dụng đối tượng khác  Các đặc trưng Model, View Controller mẫu thiết kế chuẩn MVC:  Models: Các đối tượng Models phần ứng dụng, đối tượng thiết lập logic phần liệu ứng dụng Thông thường, đối tượng model lấy lưu trạng thái model CSDL Ví dụ như, đối tượng Employee (nhân viên) lấy liệu từ CSDL, thao tác liệu cập nhật liệu trở lại vào bảng Eployees SQL Server Trong ứng dụng nhỏ, model thường là khái niệm nhằm phân biệt cài đặt thực thụ, ví dụ, ứng dụng đọc liệu từ CSDL gởi chúng đến view, ứng dụng không cần phải có tầng model lớp liên quan Trong trường hợp này, liệu lấy đối tượng model (hơn tầng model)  Views: Views thành phần dùng để hiển thị giao diện người dùng (UI) Thông thường, view tạo dựa vào thông tin liệu model Ví dụ như, view dùng để cập nhật bảng Employees hiển thị hộp văn bản, drop-down list, check box dựa trạng thái đối tượng Employee  Controllers: Controller thành phần dùng để quản lý tương tác người dùng, làm việc với model chọn view để hiển thị giao diện người dùng Trong ứng dụng MVC, view dùng để hiển thị thông tin, controller chịu trách nhiệm quản lý đáp trả nội dung người dùng nhập tương tác với người dùng Ví dụ, controller quản lý liệu người dùng gửi lên (query-string values) gửi giá trị đến model, model lấy liệu từ CSDL nhờ vào giá trị Đặc điểm mơ hình MVC: Cái lợi ích quan trọng mơ hình MVC giúp cho ứng dụng dễ bảo trì, module hóa chức năng, xây dựng nhanh chóng MVC tách tác vụ ứng dụng thành phần riêng lẻ model, view, controller giúp cho việc xây dựng ứng dụng nhẹ nhàng Dễ dàng thêm tính mới, tính cũ dễ dàng thay đổi MVC cho phép nhà phát triển nhà thiết kế làm việc đồng thời với MVC cho phép thay đổi phần ứng dụng mà không ảnh hưởng đến phần khác Sở dĩ kiến trúc MVC tách biệt (decoupling) phụ thuộc thành phần đối tượng đồ họa, làm tăng tính linh động (flexibility) tính tái sử dụng (reusebility) đối tượng đồ họa Một đối tượng đồ họa dễ dàng thay đổi giao diện cách thay đổi thành phần View cách thức lưu trữ (Model) xử lý (Controller) không thay đổi Tương tự, ta thay đổi cách thức lưu trữ (Model) xử lý (Controller) đối tượng đồ họa mà thành phần lại giữ nguyên Chính mà kiến trúc MVC ứng dụng để xây dựng nhiều framework thư viện đồ họa khác Tiêu biểu thư viện đồ họa ngơn ngữ lập trình hướng đối tượng SmallTalk (cũng Xerox PARC nghiên cứu phát triển vào thập niên 70 kỷ 20) Các Swing Components Java xây dựng dựa kiến trúc MVC Đặc biệt tảng ASP.NET MVC Frame work II Mơ hình MVC ASP.NET: 1) Khái qt chung: Mơ hình MVC với ưu điểm ứng dụng nhiều tảng (framework) khác nhau, có tảng (framework) tiếng nhiều người biết đến sử dụng tảng (framework) ASP.NET MVC Vậy ASP.NET MVC ? ASP.NET MVC tảng (framework) phát triển ứng dụng web Microsoft, kết hợp tính hiệu nhỏ gọn mơ hình Models – Views -Controllers(MVC), ý tưởng công nghệ đại nhất, với thành phần tốt tảng ASP.NET thời Là lựa chọn khác bên cạnh tảng WebForm phát triển ứng dụng web sử dụng ASP.NET a Lịch sử phát triển ASP.NET:  Tất bắt đầu vào năm 70 kỷ 20, phòng thí nghiệm Xerox PARC Palo Alto Sự đời giao diện đồ họa (Graphical User Interface) lập trình hướng đối tượng ( Object Oriented Programming) cho phép lập trình viên làm việc với thành phần đồ họa đối tượng đồ họa có thuộc tính phương thức riêng Khơng dừng lại đó, nhà nghiên cứu Xerox PARC xa cho đời gọi kiến trúc MVC ( viết tắt Model – Vie w – Controller)  MVC phát minh Xerox Parc vào năm 70, TrygveReenskaug MVC lần xuất công khai Smalltalk-80 Sau thời gian dài khơng có thơng tin MVC, tài liệu 80 Smalltalk Các giấy tờ quan trọng đƣợc công bố MVC “A Cookbook for Using the Model-View-Controller User Interface Paradigm in Smalltalk – 80”, Glenn Krasner Stephen Pope, xuất tháng / tháng năm 1988.ASP.NET truyền thống:  ASP.NET bước nhảy vọt lần xuất hiện, nhằm thu hẹp khoảng cách phát triển Window Form hướng đối tượng (có trạng thái) phát triển web hướng HTML (khơng có trạng thái) Hình minh họa cơng nghệ Asp.net WebForm lần đầu xuất năm 2002  Bằng cách dùng mơ hình giao diện đối tượng điều khiển (control) có cấu trúc hoạt động phía server Mỗi đối tượng điều khiển (control) lưu giữ trạng thái qua yêu cầu (request) (sử dụng tính ViewState), tự động tạo mã HTML cần thiết, tự động kết nối với kiện phía client (ví dụ click) với mã hồi đáp phía server Kết WebForm lớp trừu tượng lớn nhằm chuyển giao diện có xử lý kiện thơng qua Web b Nhược điểm ASP.NET ASP.NET truyền thống ý tưởng hay, thực tế lại trở nên rắc rối Qua nhiều năm, sử dụng ASP.NET WebForm cho thấy có số nhược điểm: ViewState (trạng thái hiển thị): Kĩ thuật lưu giữ trạng thái qua yêu cầu (request) thường mang lại kết khối liệu lớn chuyển qua lại client server Nó đạt hàng trăm kilobytes nhiều liệu thực, qua lại với lần yêu cầu (request), làm người truy cập vào trang web phải chờ thời gian dài họ click button cố gắng di chuyển đến trang ASP.NET bị tình trạng tồi tệ, Ajax giải pháp đưa để giải vấn đề Page life cycle (chu kỳ sống trang web): Kĩ thuật kết nối kiện phía client với mã xử lý kiện phía server phần page life cycle, rắc rối mỏng manh Chỉ có số lập trình viên thành cơng việc xử lý hệ thống đối tượng điều khiển (control) thời gian thực mà không bị lỗi ViewState hiểu số trình xử lý kiện khơng kích họat cách bí hiểm Limited control over HTML (giới hạn kiểm soát HTML): Server control tự tạo mã HTML, khơng phải mã HTML mà bạn muốn Ngoài việc mã HTML chúng thường không tuân theo tiêu chuẩn web không sử dụng tốt CSS mà hệ thống server control tạo giá trị ID phức tạp khơng đốn trước được, làm khó khăn việc sử dụng JavaScript Untestable (kiểm chứng): Khi người thiết kế ASP.NET lần giới thiệu tảng này, họ khơng lường trước việc kiểm thử (test) tự động trở thành cơng đoạn việc phát triển phần mềm ngày Không ngạc nhiên, cấu trúc mà họ thiết kế hồn tồn khơng thích hợp với việc kiểm thử (test) tự động c Các thành phần ASP.NET MVC ASP.NET MVC chia nhỏ ứng dụng thành ba thành phần để cài đặt, thành phần đóng vai trò khác ảnh hưởng lẫn nhau, models, views, controllers Models ứng dụng dựa MVC thành phần có nhiệm vụ lưu trữ thơng tin, trạng thái đối tượng, thơng thường lớp ánh xạ từ bảng CSDL Lấy ví dụ, có lớp Chức sử dụng để mô tả liệu từ bảng Chức SQL, bao gồm Mã chức năng, Tên chức Views thành phần chịu trách nhiệm hiển thị thông tin lên cho người dùng thông qua giao diện Thông thường, thông tin cần hiển thị lấy từ thành phần Models Ví dụ, lớp Quy hoạch có "Edit" view bao gồm textbox, dropdown checkbox để chỉnh sửa thuộc tính thơng tin chức quy hoạch Controllers ứng dụng kiểu MVC chịu trách nhiệm xử lý tác động mặt giao diện, thao tác models, cuối chọn view thích hợp để hiển thị hình Trong kiến trúc MVC, View có tác dụng hiển thị giao diện mà thơi, điều kiển dòng nhập xuất người dùng Controllers đảm trách d Lợi ích, ưu điểm, nhược điểm mơ hình ASP.NET MVC  Lợi ích o Có tính mở rộng thay thành phần cách dễ dàng o Không sử dụng Viewstate, điều làm nhà phát triển dễ dàng điều khiển ứng dụng o Hệ thống định tuyến mạnh mẽ o Hỗ trợ tốt cho test-driven development (TDD – mơ hình phát triển kiểm thử) cài đặt kiểm thử đơn vị (unit tests) tự động, xác định kiểm tra lại yêu cầu trước bắt tay vào viết code o Hỗ trợ kết hợp tốt người lập trình người thiết kế giao diện o Sử dụng tính tốt có ASP.NET  Ưu điểm Thể tính chun nghiệp lập trình, phân tích thiết kế Do chia thành thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễ nâng cấp, bảo trì  Nhược điểm Đối với dự án nhỏ việc áp dụng mơ hình MC gây cồng kềnh, tốn thời gian trình phát triển Tốn thời gian trung chuyển liệu thành phần e So sánh ASP.NET Webform với ASP.NET MVC ASP.Net Webform sử dụng Viewstate để quản lý trang web có lifecycle, post back, dùng web controls, events để thực hành động UI có tương tác với người dùng nên hầy hết Asp.net xử lý chậm ASP.Net MVC Framework chia làm phần: Models, Views, Controllers Mọi tương tác với Views thực hành động Controller, khơng lifecycle, post back events Việc kiểm tra test lỗi, debug với Asp.net phải chạy tất tiến trình Asp.net thay đổi ID control ảnh hưởng tới ứng dụng Đối với Asp.net MVC Framework việc sử dụng unit test để thẩm định Controllers thực 2) Cài đặt Trước hết để tạo ứng dụng ASP.NET MVC bạn cần phải đáp ứng điều kiện sau: - Máy tính cần đáp ứng cấu hình tối thiểu: trống 5Gb nhớ, Ram 2G - Sau cần phải cài đặt Visual Studio 2013 2015 - Sau chúng cài đặt xong Visual Studio, để khởi tạo dự án MVC, ta chọn File -> New Project (hoặc sử dụng phím tắt Ctrl + Shift + N) Ta tùy chọn ngôn ngữ Visual Basic C#, ta chọn tiếp ứng dụng Web -> ASP.NET MVC Web application, chọn template MVC Hình 1.2: Giao diện tạo Project Hình 1.3: Giao diện chọn template Ta nhấn button Ok, chươnng trình tạo cho ứng dụng Web MVC mẫu sau: Hình 1.4: Giao diện solution MVC Nhấn F5 để chạy chương trình Hình 1.5: Giao diện website ứng dụng mơ hình MVC Như tạo trang Web ứng dụng mơ hình MVC, phần sau tìm hiểu rõ cách thức hoạt động mơ hình MVC ASP.NET CHƯƠNG 2: KẾT QUẢ THỰC HIỆN I Cơ sở liệu Chương trình sử dụng sở liệu SQLServer có Visual 2013 Quan hệ bảng  Quan hệ: 10 Xem thông tin Người dùng Các chức Đưa liệu cho người dùng DFD mức Người dùng Thông tin chức Phân tích yêu cầu Kiểm tra liệu Xuất thơng tin Người dùng DFD mức Hình 1.8: Biểu đồ luồng liệu II Các giao diện phần mềm, module xử lý Xây dựng controllers Mỗi lần có yêu cầu gởi đến trang web ASP.MET MVC bạn giải controller Controllers có trách nhiệm điều khiển tương tác người dùng bên ứng dụng MVC Controllers định chuyển cho người dùng tạo yêu cầu (request) trình duyệt (browser) Controller có trách nhiệm cho ứng dụng logic, bao gồm tiếp nhận thông tin người dùng nhập vào, lệnh, lấy liệu từ Model cuối xử lý Các lớp Controller bản:  Action methods: hành động chia thành nhiều phương thức, phương thức tương ứng với địa URL khác nhau, gọi với tham số lấy từ yêu cầu 13  Action results: ta tùy chọn để trả đối tượng mô tả dự định kết hành động (ví dụ trả View, đến Action method khác…) thực cho Việc tách bạch xác định kết với việc thực thi đơn giản hóa việc kiểm thử cách đáng kể  Filters: ta rút gọn hành vi sử dụng lại lọc, sau khóa hành vi vào nhiều controller hay action method cách đặt [thuộc tính] mã nguồn  Một controllers lớp (Class) (C# class VB class)  Các controller để điều khiển web: - HomeController.cs Hình 1.9: HomeController.cs 14 - AdminController.cs Hình 1.10: AdminController.cs 15 - GioHangController.cs Hình 1.11: GioHangController.cs Xây dựng models Trong ứng dụng ASP.NET MVC, “ Model ” thành phần có trách nhiệm trì trạng thái đối tượng, thơng thường lớp ánh xạ đến bảng sở liệu 16 - Lớp SanPham.cs tạo ta ánh xạ CSDLvào model: Hình 1.12: ánh xạ CSDLvào model - Lớp TinTuc.cs tạo ta ánh xạ CSDLvào model: Hình 1.13: ánh xạ CSDLvào model 17 Tạo giao diện người dùng với Views Chúng ta thực giao diện người dùng HTML cách cài đặt “ View “ để tạo giao diện người dùng thích hợp gọi RenderView() - Tạo danh sách SanPham View Hình 1.14: Danh sách sản phẩm 18 Các công cụ hỗ trợ a CSS CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngơn ngữ đánh dấu (ví dụ HTML) Các css sử dụng chủ yếu web như:  Width: thiết lập chiều rộng cho thành phần o Ví dụ: width: 95% Thiết lặp chiều rộng 95% hình  Height: thiết lập chiều cao cho thành phần o Ví dụ: width: 20px Thiết lặp chiều cao 20px cho thuộc tính  Padding: khoảng trống nằm nội dung viền (đường viền) o Ví dụ: pading auto Các phần tử (top – bottom) 0px trái phải (left – right) canh tự động  Margin: khoảng trống nằm viền phần tử  Text-align: xếp nội dung theo chiều ngang o Ví dụ: Text-align: center Căn nội dung trang  Position: xác định loại phương pháp định vị trí cho thành phần o Ví dụ: Position: relative Định vị trí tuyệt đối cho thành phần  Các thuộc tính định dạng chữ: o font-family, font-size, font-weight, color,  Các thuộc tính vẽ khung viền: o Border, border-radius, border-background, b Javascript Javascript ngơn ngữ lập trình kịch dựa vào đối tượng phát triển có sẵn tự định nghĩa ra, javascript sử dụng rộng rãi ứng dụng Website Các javascript sử dụng chủ yếu web như:  focus(): Xử lý kiện focus, kích hoạt kiện focus cho thành phần  Jquery: Xác định thành phần có phải jQuery object hay không  History go(): quay trở lại trang trước  $(): công cụ chọn c Bootstrap 19 Bootstrap framework HTML, CSS, Javascript phổ biến cho người phát triển responsive hay phát triển website Trong Bootstrap có class container để bao quanh tồn code website là:  container: Class tạo website responsive có width tồn website cố định  container-fluid: Class tạo website responsive full chiều rộng hình III Giao diện trang web Trang chủ Giới thiệu Quần áo Mỹ phẩm Phụ kiện Tin tức Liên hệ 20 - Các chức a Đối với người dùng Sau người dùng vào website, người dùng xem mẫu quần áo, mỹ phẩm, phụ kiện tin tức thơng qua View có menu Sau chọn lựa, người dùng xem đươc thông tin chi tiết sản phẩm, thêm vào giỏ hàng, cập nhật giỏ hàng, xóa giỏ hàng đặt hàng 21 Hình 1.15: Giao diện người dùng b Đối với người quản trị Hình 1.16: Giao diện người quản trị 22 c Hoạt động website - Trang quần áo: Hình 1.18: Giao diện quần áo - Trang mỹ phẩm: Hình 1.19: Giao diện mỹ phẩm 23 - Trang phụ kiện: Hình 1.20: Giao diện phụ kiện 24 - Trang tin tức: Hình 1.21: Giao diện tin tức 25 CHƯƠNG 3: KẾT LUẬN Mọi người biết ngày kỷ nguyên CNTT lên ngôi, lĩnh vực có cơng nghệ thơng tin, CNTT ứng dụng vào lĩnh vực sống người Chính thế, việc thiết kế web bán hàng giúp quảng bá hình ảnh, sản phẩm cách nhanh chóng đến người tiêu dùng, dù khách hàng bạn có đâu Website bán hàng cầu nối PR hiệu cho dịch vụ, sản phẩm mà quý khách hàng cung cấp Vì nay, người thường có xu hướng tìm hiểu trước sản phẩm qua mạng, qua trang web nhà cung cấp sau đến tận nơi mua sản phẩm, gọi thương mại điện tử Chính thế, việc có trang web bán hàng đẹp, tiện lợi, lôi người tiêu dùng chiêu PR vô quan trọng Măc dù cố gắng hoàn chỉnh yêu cầu báo cáo nhiều thiếu sót em mong bảo hướng dẫn thầy cô giúp đỡ, xem xét cho em ý kiến để báo cáo hoàn thiện Em xin cảm ơn quý thấy cô! 26 TÀI LIỆU THAM KHẢO Professional ASP.NET MVC5 - Jon Galloway, Brad Wilson, K Scott Allen, David Matson 27 ... controls, events để thực hành động UI có tương tác với người dùng nên hầy hết Asp.net xử lý chậm ASP.Net MVC Framework chia làm phần: Models, Views, Controllers Mọi tương tác với Views thực hành động... tượng mô tả dự định kết hành động (ví dụ trả View, đến Action method khác…) thực cho Việc tách bạch xác định kết với việc thực thi đơn giản hóa việc kiểm thử cách đáng kể  Filters: ta rút gọn hành... chuyển giao diện có xử lý kiện thơng qua Web b Nhược điểm ASP.NET ASP.NET truyền thống ý tưởng hay, thực tế lại trở nên rắc rối Qua nhiều năm, sử dụng ASP.NET WebForm cho thấy có số nhược điểm: ViewState