BÁO CÁO THỰC TẬP CHUYÊN NGÀNH CÔNG NGHỆ THÔNG TIN ( MÔ HÌNH MVC)

Kiến trúc mô hình MVC: Trong kiến trúc MVC, một đối tượng đồ họa người dùngGUI Compone nt bao gồm 3 thành phần cơ bản: Model, View, và Controller..  Các đặc trưng chính của Model, View

Để làm việc tốt đối với MVC, chúng ta cần nắm thật vững kiến thức OOP Bản chất của các framework khác cũng được hình thành trên lý thuyết MVC Do vậy nếu chúng

ta nắm tốt MVC Thì ở những framework khác chắc chắn sẽ không cảm thấy khó hiểu

 Model: Là thành phần chịu trách nhiệm xử lý các thao tác trên database Và gởi trả kết

quả thông qua view

 View: Là phần hiển thị thông tin trên website, sau khi đi qua controller và nhận kết quả

từ phía model thì view là bước cuối cùng để chuyển thông tin tới người dùng

 Controller: Là phần điều hướng các request tới những tác vụ tương ứng Controller là

một phần không thể thiếu ở bất cứ framework nào Vì nó có trách nhiệm gởi và nhận

request từ hệ thống tới người sử dụng.

2 Kiến trúc mô hình MVC:

Trong kiến trúc MVC, một đối tượng đồ họa người dùng(GUI Compone nt) bao gồm

3 thành phần cơ bản: Model, View, và Controller Model có trách nhiệm đối với toàn

bộ dữ liệu cũng như trạng thái của đối tượng đồ họa View chính là thể hiện trực quan của Model, hay nói cách khác chính là giao diện của đối tượng đồ họa Và Controller điều khiển việc tương tác giữa đối tượng đồ họa với người sử dụng cũng như những đốitượng khác

Khi người sử dụng hoặc những đối tượng khác cần thay đổi trạng thái của đối tượng

đồ họa, nó sẽ tương tác thông qua Controller của đối tượng đồ họa Controller sẽ thựchiện việc thay đổi trên Model Khi có bất kỳ sự thay đổi nào xảy ra ở Model, nó sẽ phátthông điệp ( broadcast message) thông báo cho View và Controller biết Nhận đượcthông điệp từ Model, View sẽ cập nhật lại thể hiện của mình, đảm bảo rằng nó luôn làthể hiện trực quan chính xác của Model Còn Controller, khi nhận được thông điệp từModel, sẽ có những tương tác cần thiết phản hồi lại người sử dụng hoặc các đối tượngkhác

 Các đặc trưng chính của Model, View và Controller trong mẫu thiết kế chuẩn

MVC:

 Models : Các đối tượng Models là một phần của ứng dụng, các đối tượng này thiết lập

logic của phần dữ liệu của ứng dụng Thông thường, các đối tượng model lấy và lưutrạng thái của model trong CSDL Ví dụ như, một đối tượng Employee (nhân viên) sẽlấy dữ liệu từ CSDL, thao tác trên dữ liệu và sẽ cập nhật dữ liệu trở lại vào bảng

Eployees ở SQL Server Trong các ứng dụng nhỏ, model thường là chỉ là một kháiniệm nhằm phân biệt hơn là được cài đặt thực thụ, ví dụ, nếu ứng dụng chỉ đọc dữ liệu

từ CSDL và gởi chúng đến view, ứng dụng không cần phải có tầng model và các lớpliên quan Trong trường hợp này, dữ liệu được lấy như là một đối tượng model (hơn làtầng model)

 Views: Views là các thành phần dùng để hiển thị giao diện người dùng (UI) Thông

thường, view được tạo dựa vào thông tin dữ liệu model Ví dụ như, view dùng để cậpnhật bảng Employees sẽ hiển thị các hộp văn bản, drop-down list, và các check box

dựa trên trạng thái hiện tại của một đối tượng Employee.

 Controllers: Controller là các thành phần dùng để quản lý tương tác người dùng, làm

việc với model và chọn view để hiển thị giao diện người dùng Trong một ứng dụngMVC, view chỉ được dùng để hiển thị thông tin, controller chịu trách nhiệm quản lý vàđáp trả nội dung người dùng nhập và tương tác với người dùng Ví dụ, controller sẽquản lý các dữ liệu người dùng gửi lên (query-string values) và gửi các giá trị đó đếnmodel, model sẽ lấy dữ liệu từ CSDL nhờ vào các giá trị này

3 Đặc điểm của mô hình MVC:

Cái lợi ích quan trọng nhất của mô hình MVC là nó giúp cho ứng dụng dễ bảo trì,module hóa các chức năng, và được xây dựng nhanh chóng MVC tách các tác vụ củaứng dụng thành các phần riêng lẻ model, view, controller giúp cho việc xây dựng ứngdụng nhẹ nhàng hơn Dễ dàng thêm các tính năng mới, và các tính năng cũ có thể dễdàng thay đổi MVC cho phép các nhà phát triển và các nhà thiết kế có thể làm việcđồng thời với nhau MVC cho phép thay đổi trong 1 phần của ứng dụng mà không ảnhhưởng đến các phần khác

Sở dĩ như vậy vì kiến trúc MVC đã tách biệt (decoupling) sự phụ thuộc giữa cácthành phần trong một đối tượng đồ họa, làm tăng tính linh động (flexibility) và tính tái

sử dụng (reusebility) của đối tượng đồ họa đó Một đối tượng đồ họa bấy giờ có thể dễdàng thay đổi giao diện bằng cách thay đổi thành phần View của nó trong khi cách

và thư viện đồ họa khác nhau Tiêu biểu là bộ thư viện đồ họa của ngôn ngữ lập trìnhhướng đối tượng SmallTalk (cũng do Xerox PARC nghiên cứu và phát triển vào thậpniên 70 của thế kỷ 20) Các Swing Components của Java cũng được xây dựng dựa trênkiến trúc MVC Đặc biệt là nền tảng ASP.NET MVC Frame work.

II Mô hình MVC trong ASP.NET:

1) Khái quát chung:

Mô hình MVC với những ưu điểm đã được ứng dụng nhiều trên các nền tảng(framework) khác nhau, trong đó có một nền tảng (framework) nổi tiếng được nhiềungười biết đến và sử dụng đó là nền tảng (framework) ASP.NET MVC Vậy ASP.NETMVC là gì ?

ASP.NET MVC là một nền tảng (framework) phát triển ứng dụng web mới củaMicrosoft, nó kết hợp giữa tính hiệu quả và nhỏ gọn của mô hình Models – Views -Controllers(MVC), những ý tưởng và công nghệ hiện đại nhất, cùng với những thànhphần tốt nhất của nền tảng ASP.NET hiện thời Là một lựa chọn khác bên cạnh nềntảng WebForm khi phát triển 1 ứng dụng web sử dụng ASP.NET

a Lịch sử phát triển của ASP.NET:

 Tất cả bắt đầu vào những năm 70 của thế kỷ 20, tại phòng thí nghiệm Xerox PARC ở Palo Alto Sự ra đời của giao diện đồ họa (Graphical User Interface) và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 những thành phần đồ họa như những đối tượng đồ họa có thuộc tính và phương thức riêng của nó Không dừng lại ở đó, những nhà nghiêncứu ở Xerox PARC còn đi xa hơn khi cho ra đời cái gọi là kiến trúc MVC ( viết tắt của Model – Vie w – Controller)

 MVC được phát minh tại Xerox Parc vào những năm 70, bởi TrygveReenskaug.MVC lần đầu tiên xuất hiện công khai là trong Smalltalk-80 Sau đó trong mộtthời gian dài hầu như không có thông tin nào về MVC, ngay cả trong tài liệu 80Smalltalk Các giấy tờ quan trọng đầu tiên đƣợc công bố trên MVC là “ACookbook for Using the Model-View-Controller User Interface Paradigm inSmalltalk – 80”, bởi Glenn Krasner và Stephen Pope, xuất bản trong tháng 8 /tháng 9 năm 1988.ASP.NET truyền thống:

 ASP.NET đã là 1 bước nhảy vọt khi lần đầu tiên xuất hiện, nhằm thu hẹpkhoảng cách giữa phát triển Window Form hướng đối tượng (có trạng thái) và

phát triển web hướng HTML (không có trạng thái) Hình dưới minh họa côngnghệ Asp.net WebForm trong lần đầu xuất hiện năm 2002.

 Bằng cách dùng mô hình giao diện như một đố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ạngthái qua các yêu cầu (request) (sử dụng tính năng ViewState), tự động tạo ra mãHTML khi cần thiết, và tự động kết nối với các sự kiện phía client (ví dụ nhưclick) với mã hồi đáp phía server Kết quả WebForm là một lớp trừu tượng lớnnhằm chuyển giao diện có xử lý sự kiện thông qua Web

b Nhược điểm của ASP.NET

ASP.NET truyền thống đã từng là một ý tưởng hay, nhưng 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ó một số nhược điểm:

ViewState (trạng thái hiển thị): Kĩ thuật lưu giữ trạng thái qua các yêu cầu (request)thường mang lại kết quả là những khối dữ liệu lớn được chuyển qua lại giữa client vàserver Nó có thể đạt hàng trăm kilobytes trong nhiều dữ liệu thực, và nó đi qua đi lạivới mỗi lần yêu cầu (request), làm những người truy cập vào trang web phải chờ mộtthời gian dài khi họ click một button hoặc cố gắng di chuyển đến trang kế tiếp.ASP.NET bị tình trạng này rất tồi tệ, Ajax là một trong các giải pháp được đưa ra đểgiải quyết vấn đề này

Page life cycle (chu kỳ sống của một trang web): Kĩ thuật kết nối sự kiện phía clientvới mã xử lý sự kiện phía server là một phần của page life cycle, có thể cực kì rắc rối

và mỏng manh Chỉ có một số ít lập trình viên thành công trong việc xử lý hệ thống đốitượng điều khiển (control) trong thời gian thực mà không bị lỗi ViewState hoặc hiểuđược rằng một số trình xử lý sự kiện không được kích họat một cách bí hiểm

Limited control over HTML (giới hạn kiểm soát HTML): Server control tự tạo ra nónhư là mã HTML, nhưng không phải là mã HTML mà bạn muốn Ngoài việc mãHTML của chúng thường không tuân theo tiêu chuẩn web hoặc không sử dụng tốt CSS

mà hệ thống các server control còn tạo ra các giá trị ID phức tạp và không đoán trướcđược, làm khó khăn trong việc sử dụng JavaScript

(test) tự động.

c Các thành phần của ASP.NET MVC

ASP.NET MVC cũng chia nhỏ một ứng dụng thành ba thành phần để cài đặt, mỗi

thành phần đóng một vai trò khác nhau và ảnh hưởng lẫn nhau, đó là models, views, vàcontrollers

Models trong các ứng dụng dựa trên MVC là những thành phần có nhiệm vụ lưu trữthông tin, trạng thái của các đối tượng, thông thường nó là một lớp được ánh xạ từ mộtbảng trong CSDL Lấy ví dụ, chúng ta có lớp Chức năng được sử dụng để mô tả dữliệu từ bảng Chức năng trong SQL, bao gồm Mã chức năng, Tên chức năng

Views chính là các thành phần chịu trách nhiệm hiển thị các thông tin lên cho ngườidùng thông qua giao diện Thông thường, các thông tin cần hiển thị được lấy từ thànhphần Models

Ví dụ, lớp Quy hoạch có một "Edit" view bao gồm các textbox, các dropdown vàcheckbox để chỉnh sửa các thuộc tính thông tin của chức năng quy hoạch

Controllers trong các ứng dụng kiểu MVC chịu trách nhiệm xử lý các tác động vềmặt giao diện, các thao tác đối với models, và cuối cùng là chọn một view thích hợp đểhiển thị ra màn hình Trong kiến trúc MVC, View chỉ có tác dụng hiển thị giao diện màthôi, còn điều kiển dòng nhập xuất của người dùng vẫn do Controllers đảm trách

d Lợi ích, ưu điểm, nhược điểm của mô hình ASP.NET MVC

o Hỗ trợ kết hợp rất tốt giữa người lập trình và người thiết kế giao diện

o Sử dụng các tính năng tốt nhất đã có của ASP.NET

 Ưu điểm

Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế Do được chia thành cácthà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 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

e So sánh ASP.NET Webform với ASP.NET MVC

ASP.Net Webform sử dụng Viewstate để quản lý các trang web đều có lifecycle,post back, dùng các web controls, các events để thực hiện các hành động UI khi có sự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 3 phần: Models, Views, Controllers Mọi tươngtác với Views sẽ thực hiện hành động trong Controller, không còn lifecycle, post back

và các events

Việc kiểm tra test lỗi, debug với Asp.net đều phải chạy tất cả các tiến trình củaAsp.net và mọi thay đổi ID của control nào cũng ảnh hưởng tới ứng dụng Đối vớiAsp.net MVC Framework thì việc có thể sử dụng unit test để thẩm định các Controllersthực hiện thế nào

2) Cài đặt

Trước hết để tạo một ứng dụng ASP.NET MVC bạn cần phải đáp ứng các điều kiệnsau:

- Máy tính cần đáp ứng cấu hình tối thiểu: còn trống 5Gb bộ nhớ, Ram 2G

- Sau đó chúng ta cần phải cài đặt bộ Visual Studio 2013 hoặc 2015

- Sau khi chúng đã cài đặt xong bộ Visual Studio, để khởi tạo một dự án MVC, tachọn File -> New Project (hoặc sử dụng phím tắt Ctrl + Shift + N) Ta có thể tùychọn ngôn ngữ Visual Basic hoặc C#, ta chọn tiếp ứng dụng Web -> ASP.NETMVC Web application, chọn template MVC

Hình 1.2: Giao diện tạo Project mới

Hình 1.3: Giao diện chọn template mới

Ta nhấn button Ok, chươnng trình sẽ tạo cho chúng ta một ứng dụng Web MVC mẫu như sau:

Hình 1.4: Giao diện solution của MVC

Nhấn F5 để chạy chương trình

Hình 1.5: Giao diện website ứng dụng mô hình MVCNhư vậy là chúng ta đã tạo một trang Web ứng dụng mô hình MVC, trong các phần sauchúng ta sẽ tìm hiểu rõ hơn cách thức hoạt động của mô hình MVC trong ASP.NET

CHƯƠNG 2: KẾT QUẢ THỰC HIỆN

I Cơ sở dữ liệu

Chương trình sử dụng cơ sở dữ liệu SQLServer có trong Visual 2013

1 Quan hệ giữa các bảng

 Quan hệ:

Hình 1.6: Quan hệ giữa các bảng

 Các bảng dữ liệu:

- Bảng sản phẩm:

- Bảng tin tức:

2 Đặc tả yêu cầu

 Yêu cầu với người sử dụng: Có các chức năng để người dùng xem được các

mục Quần áo, Phụ kiện, Mỹ phẩm, Tin tức Sau khi chọn chức năng, hệ thống

sẽ đưa ra danh sách, người dùng tiếp tục lựa chọn các thành phần để xemthông tin chi tiết của từng loại chức năng đó.Đối với các chức năng Quần áo,Phụ kiện, Mỹ phẩm, người dùng có thể cập nhật giỏ hàng, xóa giỏ hàng vàđặt hàng

 Yêu cầu hệ thống: Người dùng chọn một chức năng( gửi yêu cầu đến hệ

thống), hệ thống tiếp nhận và kiểm tra thông tin trong kho dữ liệu Dữ liệu cótrong kho, sẽ xuất ra dữ liệu đúng yêu cầu người dùng chọn Yêu cầu đượclấy từ kho sẽ chuyển tiếp qua một tiến trình và xuất ra dữ liệu cần thiết chongười dùng

3 Phân tích thiết kế

 Biểu đồ luồng dữ liệu

Khi thông tin đi qua phần mềm nó bị thay đổi bởi một loạt các phép biến đổi Biểu

đồ luồng dữ liệu (Data Flow Diagram - DFD) là một kỹ thuật vẽ ra luồng dữ liệu dichuyển trong hệ thống và những phép biến đổi được áp dụng lên dữ liệu Các ký hiệu

cơ bản của biểu đồ luồng dữ liệu được minh họa như hình

Hình 1.7: Các ký hiệu DFD được phân hoạch thành nhiều mức biểu diễn cho chi tiết chức năng và luồngthông tin

DFD mức 0

DFD mức 1

Hình 1.8: Biểu đồ luồng dữ liệu

II Các giao diện phần mềm, module xử lý

1 Xây dựng controllers

Mỗi lần có một yêu cầu được gởi đến trang web ASP.MET MVC của bạn thì nó sẽđược giải quyết bởi controller Controllers có trách nhiệm điều khiển các tương tác củangười dùng bên trong ứng dụng MVC Controllers quyết định cái gì sẽ được chuyển vềcho người dùng khi tạo một yêu cầu (request) trên trình duyệt (browser)

Controller có trách nhiệm cho các ứng dụng logic, bao gồm tiếp nhận thông tinngười dùng nhập vào, ra lệnh, lấy dữ liệu từ Model và cuối cùng là xử lý

2 Các lớp Controller cơ bản:

 Action methods: hành động của chúng ta được chia thành nhiều phương thức,

Các chức năng Xem thông tin

Đưa dữ liệu cho người

dùng Người dùng

năng

Phân tích yêu cầu

Kiểm tra dữ liệu

Xuất thông

method khác…) và nó sẽ thực hiện cho chúng ta Việc tách bạch giữa xác địnhkết quả với việc thực thi sẽ đơn giản hóa việc kiểm thử một cách đáng kể.

 Filters: ta có thể rút gọn các hành vi sử dụng lại được như bộ lọc, và sau đó khóamỗi hành vi vào một hoặc nhiều controller hay action method bằng cách đặt một[thuộc tính] trong mã nguồn của chúng ta

 Một controllers là một lớp (Class) (C# class hoặc VB class)

 Các controller để điều khiển trong web:

- HomeController.cs

Hình 1.9: HomeController.cs

- AdminController.cs

- Lớp SanPham.cs được tạo ra khi ta ánh xạ CSDLvào model:

Hình 1.12: ánh xạ CSDLvào model

- Lớp TinTuc.cs được tạo ra khi ta ánh xạ CSDLvào model:

4 Tạo giao diện người dùng với Views

Chúng ta sẽ thực hiện giao diện người dùng HTML bằng cách cài đặt “ View “ đểtạo ra một giao diện người dùng thích hợp khi gọi RenderView()

- Tạo một danh sách SanPham View

Hình 1.14: Danh sách sản phẩm

5 Các công cụ hỗ trợ

a CSS

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để

tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ nhưHTML)

Các css được sử dụng chủ yếu trong 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% màn 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: là khoảng trống nằm giữa nội dung và viền (đường viền)

phải (left – right) được canh tự động

 Position: xác định loại của 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 là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website.

Các javascript được sử dụng chủ yếu trong web như:

 focus(): Xử lý một sự kiện focus, hoặc kích hoạt sự kiện focus cho thành phần