Mô hình MVC là gì? Giải thích dễ hiểu về MVC (Model – View – Controller)

Ngày nay, trang web có xu hướng tương tác nhiều hơn với người dùng. Các website không chỉ đơn giản là trang HTML, CSS tĩnh nữa.

Việc tương tác hai chiều giữa người dùng và ứng dụng càng nhiều khiến cho website không thể thực hiện chỉ với một trang tĩnh. Để giải quyết vấn đề đó, đã có rất nhiều kỹ thuật mới, mô hình thiết kế ứng dụng ra đời để tăng tính động cho website.

Trong số các mô hình mà bạn có thể đã từng nghe nói tới như MVC, MVVM, MVP… Nhưng nổi bật nhất và cũng là ra đời lâu đời nhất chính là MVC.

Mình tin chắc rằng, khi bạn đi phỏng vấn kiểu gì cũng gặp phải câu hỏi mô hình MVC là gì? Tại sao phải dùng MVC?

Dù chủ đề về MVC không phải là mới, và cũng đã có nhiều bài viết về nó. Nhưng mình vẫn thấy hứng thú và muốn viết về chủ đề này, mong rằng cả nhà đừng ném đá nhé.

MVC là gì? MVC có thực sự quan trọng đáng để học không?

Ở thời điểm hiện tại, câu trả lời chắc chắn là: CÓ

MVC thực sự rất quan trọng. Bởi nó là mô hình cơ bản mà hầu hết các ứng dụng web sử dụng. Kể cả các ứng dụng di động, ứng dụng desktop… cũng sử dụng mô hình MVC này.

Khi bạn hiểu được mô hình MVC, bạn sẽ dễ dàng học và tìm hiểu các mô hình hiện đại hơn. Cũng giống như việc khi học lập trình, mọi người đều khuyên bạn nên học ngôn ngữ C/C++  trước. Khi đã nắm cơ bản ngôn ngữ lập trình C/C++, việc học thêm các ngôn ngữ lập trình khác như JAVA, Python, Ruby… trở nên dễ dàng hơn rất nhiều.

Có rất nhiều biến thể xung quanh ý tưởng cơ bản của MVC. Khái niệm ban đầu được tạo ra vào khoảng năm 1978 bởi Trygve Reenskaug. Nó ra đời nhằm giúp người cuối có thể thao tác và điều khiển một hệ thống máy tính cơ bản theo cách trực quan hơn.

Tư tưởng chính của MVC

Mình sẽ không sử dụng các thuật ngữ chuyên ngành để giải thích về mô hình MVC.  Thay vào đó, mình lấy một ví dụ từ cuộc sống.

Hãy thử tưởng tượng, bạn đi vào cửa hàng bán trà sữa, bạn thấy menu như sau:

Chà! nhìn nhiều món hấp dẫn quá. Bạn quyết định chọn loại Trà sữa truyền thống và báo cho nhân viên cửa hàng.

Nhân viên tiếp nhận yêu cầu. Tất nhiên là anh ta hiểu phải làm gì, phải pha chế loại vị mà bạn chọn ra sao. Anh ta sẽ sử dụng máy pha trà sữa để kết hợp các nguyên liệu pha chế ra cốc trà sữa đúng với yêu cầu của bạn. Sau khi hoàn thành thì bàn giao cho bạn thưởng thức.

🙆 Có ích cho bạn: Dịch vụ tạo web miễn phí – tạo website bán hàng FREE

Trong ví dụ trên, chúng ta thấy được 3 đối tượng riêng biệt, đại diện cho một phần của mô hình MVC:

• Máy pha trà sữa (MODEL)
• Cốc trà sữa mà bạn nhận được (VIEW)
• Nhân viên phục vụ (CONTROLLER)

Giải thích ví dụ MVC

Khi bạn đặt một cốc trà sữa truyền thống, trong đầu bạn đã hình dung ra mình sẽ nhận được cốc trà với vị như nào, màu sắc ra sao…

Điều này cũng giống như khi bạn trên trang web vậy. Ví dụ, bạn mở Facebook, nhấn nút “Bạn bè” để xem danh sách bạn bè của mình. Bạn cũng mong đợi một danh sách bạn bè hiện ra và tất nhiên là bạn cũng phần nào hình dung ra danh sách đó.

Khi bạn nhấn nút “Bạn bè”, tức là bạn yêu cầu máy chủ Facebook xử lý và trả về cho bạn danh sách, giống như bạn yêu cầu nhân viên (Controller) cửa hàng trà sữa vậy.

Khi nhận yêu cầu, máy chủ Facebook sẽ lấy tất cả bạn bè trong cơ sở dữ liệu, giống như máy pha trà sữa (Model) sử dụng các nguyên liệu để làm trà sữa.

Cuối cùng, sau khi hoàn thành thì máy chủ Facebook trả về cho bạn một danh sách bạn bè.

Đến đây bạn đã hiểu MVC là gì rồi đúng không? Đã hiểu vai trò của từng thành phần trong MVC.

Tóm lại MVC là gì?

MVC là viết tắt của Model – View – Controller. Trong đó:

• M là Model: là nơi tương tác với cơ sơ dữ liệu gồm Đọc – Ghi – Cập nhật – Xóa (CRUD).
• V là View: Hiển thị kết quả người dùng theo cách dễ hiểu dựa trên hành động của người dùng.
• C là Controller: Nhận yêu cầu từ người dùng, gửi yêu cầu đến cho Model để xử lý dữ liệu, trả kết quả đến View để cập nhập giao diện hiển thị.

Mô hình MVC trong Web framework

Controller
Controller là nơi xử lý các request tới. Một số web framework, Controller có thể tích hợp luôn phần router, tức là nơi định nghĩa các URL cụ thể để ánh xạ tới các chức năng tương ứng cho mỗi request.

Ví dụ URLs:
website.com/profile/ --> returns your profile
website.com/friends/ --> returns list of friends
website.com/friend={userName}/ --> returns specific friend

Model
Đây là nơi bạn tương tác và làm việc với cơ sở dữ liệu. Tại model, bạn có thể lấy dữ liệu từ local, hoặc request tới nơi khác để lấy dữ liệu.

User:- userName- firstName- lastName- friends

View
Đây là các HTML được trả về cho client sau khi đã xử lý xong yêu cầu. Nếu xử lý thành công, bạn sẽ nhận được một trang có danh sách bạn bè. Còn nếu bị lỗi, bạn sẽ nhận được một trang báo lỗi, ví dụ 404 “Not found” chẳng hạn.

<ul>  <li>Friend 1: {friendList[0].userName}</li>  <li>Friend 2: {friendList[1].userName}</li>  <li>Friend 3: {friendList[2].userName}</li>  ...</ul>

Tạm kết

Tóm lại, MVC là mô hình thiết kế ứng dụng web vô cùng phổ biến. Nó giúp bạn tách biệt phần logic business với phần View, nhờ đó dễ Unit Test hơn.

Mình  hy vọng rằng bây giờ bạn đã hiểu rõ hơn về mô hình MVC là gì và cơ chế hoạt động như thế nào.

Nếu bạn có cách hiểu nào hay hơn về kiến trúc MVC thì đừng ngần ngại để lại bình luận bên dưới nhé.

Cám ơn bạn đã đọc bài và hẹn gặp lại ở bài viết sau.

💥 Đọc thêm:

• Top 5 khóa học lập trình web (tiếng việt) tốt nhất 2020
• Xây dựng ứng dụng web với NodeJS + ExpressJS
• Kinh nghiệm đặt tên TestCase đúng chuẩn khi viết Unit Test