{"id":17909,"date":"2023-02-20T10:43:03","date_gmt":"2023-02-20T03:43:03","guid":{"rendered":"https:\/\/www.hostify.vn\/blog\/?p=17909"},"modified":"2023-02-20T10:43:03","modified_gmt":"2023-02-20T03:43:03","slug":"mo-hinh-mvc-la-gi","status":"publish","type":"post","link":"https:\/\/www.hostify.vn\/blog\/mo-hinh-mvc-la-gi\/","title":{"rendered":"M\u00f4 h\u00ecnh MVC l\u00e0 g\u00ec? \u1ee8ng d\u1ee5ng c\u1ee7a m\u00f4 h\u00ecnh MVC trong l\u1eadp tr\u00ecnh"},"content":{"rendered":"

M\u00f4 h\u00ecnh MVC l\u00e0 g\u00ec<\/strong>? MVC c\u00f3 \u1ee9ng d\u1ee5ng g\u00ec trong ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh? Khi s\u1eed d\u1ee5ng m\u00f4 h\u00ecnh n\u00e0y c\u00f3 nh\u1eefng \u01b0u nh\u01b0\u1ee3c \u0111i\u1ec3m g\u00ec? H\u00e3y c\u00f9ng Hostify theo d\u00f5i b\u00e0i vi\u1ebft d\u01b0\u1edbi \u0111\u00e2y t\u00ecm hi\u1ec3u m\u00f4 h\u00ecnh MVC nh\u00e9.<\/p>\n

M\u00f4 h\u00ecnh MVC Framework l\u00e0 g\u00ec?<\/strong><\/h2>\n

M\u00f4 h\u00ecnh MVC framework l\u00e0 m\u1ed9t m\u1eabu h\u00ecnh ki\u1ebfn tr\u00fac ph\u00e2n chia \u1ee9ng d\u1ee5ng th\u00e0nh 3 th\u00e0nh ph\u1ea7n logic ch\u00ednh: Model, View, v\u00e0 Controller. M\u1ed7i th\u00e0nh ph\u1ea7n ki\u1ebfn tr\u00fac \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng \u0111\u1ec3 \u0111\u1ea3m nhi\u1ec7m m\u1ed9t kh\u00eda c\u1ea1nh ph\u00e1t tri\u1ec3n c\u1ee5 th\u1ec3 c\u1ee7a \u1ee9ng d\u1ee5ng. MVC chia t\u00e1ch l\u1edbp logic nghi\u1ec7p v\u1ee5 v\u00e0 l\u1edbp tr\u00ecnh b\u00e0y. N\u00f3 th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho c\u00e1c giao di\u1ec7n \u0111\u1ed3 h\u1ecda ng\u01b0\u1eddi d\u00f9ng desktop (GUI). Ng\u00e0y nay, ki\u1ebfn tr\u00fac MVC trong c\u00f4ng ngh\u1ec7 web \u0111\u00e3 tr\u1edf n\u00ean r\u1ea5t ph\u1ed5 bi\u1ebfn trong thi\u1ebft k\u1ebf \u1ee9ng d\u1ee5ng web c\u0169ng nh\u01b0 \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng.<\/p>\n

\"M\u00f4

\u01afu nh\u01b0\u1ee3c \u0111i\u00eam M\u00f4 h\u00ecnh MVC l\u00e0 g\u00ec<\/p><\/div>\n

L\u1ecbch s\u1eed c\u1ee7a MVC<\/strong><\/h2>\n
    \n
  • Ki\u1ebfn tr\u00fac MVC l\u1ea7n \u0111\u1ea7u \u0111\u01b0\u1ee3c th\u1ea3o lu\u1eadn v\u00e0o n\u0103m 1979 b\u1edfi Trygve Reenskaug.<\/li>\n
  • M\u00f4 h\u00ecnh MVC l\u1ea7n \u0111\u1ea7u \u0111\u01b0\u1ee3c gi\u1edbi thi\u1ec7u v\u00e0o n\u0103m 1987 trong ng\u00f4n ng\u1eef l\u1eadp tr\u00ecnh Smalltalk.<\/li>\n
  • MVC l\u1ea7n \u0111\u1ea7u \u0111\u01b0\u1ee3c ch\u1ea5p nh\u1eadn nh\u01b0 m\u1ed9t kh\u00e1i ni\u1ec7m ph\u1ed5 qu\u00e1t trong m\u1ed9t b\u00e0i vi\u1ebft v\u00e0o n\u0103m 1988.<\/li>\n
  • G\u1ea7n \u0111\u00e2y, m\u1eabu h\u00ecnh MVC \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i trong c\u00e1c \u1ee9ng d\u1ee5ng web hi\u1ec7n \u0111\u1ea1i.<\/li>\n<\/ul>\n

    C\u00e1c \u0111\u1eb7c \u0111i\u1ec3m c\u1ee7a MVC<\/strong><\/h2>\n
      \n
    • D\u1ec5 ki\u1ec3m tra. MVC l\u00e0 m\u1ed9t framework c\u00f3 kh\u1ea3 n\u0103ng ki\u1ec3m tra (testable), m\u1edf r\u1ed9ng (extensible), v\u00e0 k\u1ebft n\u1ed1i m\u00f4-\u0111un (pluggable) cao.<\/li>\n
    • Khi thi\u1ebft k\u1ebf m\u1ed9t ki\u1ebfn tr\u00fac \u1ee9ng d\u1ee5ng web b\u1eb1ng m\u1eabu h\u00ecnh MVC, b\u1ea1n c\u00f3 to\u00e0n quy\u1ec1n ki\u1ec3m so\u00e1t m\u00e3 ngu\u1ed3n HTML l\u1eabn URL.<\/li>\n
    • T\u1eadn d\u1ee5ng nh\u1eefng t\u00ednh n\u0103ng hi\u1ec7n c\u00f3 \u0111\u01b0\u1ee3c cung c\u1ea5p b\u1edfi ASP.NET, JSP, Django\u2026<\/li>\n
    • Ph\u00e2n chia r\u00f5 r\u00e0ng gi\u1eefa c\u00e1c logic: Model, View, Controller. Ph\u00e2n chia c\u00e1c t\u00e1c v\u1ee5 \u1ee9ng d\u1ee5ng: logic nghi\u1ec7p v\u1ee5, logic UI, v\u00e0 logic input.<\/li>\n
    • \u0110\u1ecbnh tuy\u1ebfn URL \u0111\u1ec3 t\u1ea1o ra c\u00e1c URL ph\u00f9 h\u1ee3p cho SEO. \u00c1nh x\u1ea1 URL \u0111\u1ec3 cho ra nh\u1eefng URL d\u1ec5 hi\u1ec3u v\u00e0 d\u1ec5 t\u00ecm ki\u1ebfm<\/li>\n
    • H\u1ed7 tr\u1ee3 h\u01b0\u1edbng ph\u00e1t tri\u1ec3n ki\u1ec3m th\u1eed (TDD)<\/li>\n<\/ul>\n

      Ki\u1ebfn tr\u00fac MVC<\/strong><\/h2>\n

      D\u01b0\u1edbi \u0111\u00e2y l\u00e0 ki\u1ebfn tr\u00fac chi ti\u1ebft c\u1ee7a MVC framework:<\/p>\n

      <\/p>\n

      3 th\u00e0nh ph\u1ea7n quan trong c\u1ee7a MVC l\u00e0:<\/p>\n

        \n
      • Model: bao g\u1ed3m m\u1ecdi d\u1eef li\u1ec7u v\u00e0 logic li\u00ean quan<\/li>\n
      • View: tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u cho ng\u01b0\u1eddi d\u00f9ng, ho\u1eb7c x\u1eed l\u00fd t\u01b0\u01a1ng t\u00e1c ng\u01b0\u1eddi d\u00f9ng<\/li>\n
      • Controller: giao di\u1ec7n n\u1eb1m gi\u1eefa Model v\u00e0 View<\/li>\n<\/ul>\n

        \u0110i s\u00e2u v\u00e0o ch\u00fang \u0111\u1ec3 xem c\u00f3 g\u00ec hay!<\/p>\n

        Model<\/strong><\/h3>\n

        Model ch\u1ee9a d\u1eef li\u1ec7u v\u00e0 login li\u00ean quan. N\u00f3 tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u \u0111\u01b0\u1ee3c truy\u1ec1n \u0111i gi\u1eefa controller ho\u1eb7c b\u1ea5t k\u1ef3 logic nghi\u1ec7p v\u1ee5 li\u00ean quan kh\u00e1c. V\u00ed d\u1ee5, m\u1ed9t controller s\u1ebd nh\u1eadn th\u00f4ng tin kh\u00e1ch h\u00e0ng t\u1eeb c\u01a1 s\u1edf d\u1eef li\u1ec7u, ph\u00e2n t\u00edch v\u00e0 tinh ch\u1ec9nh d\u1eef li\u1ec7u r\u1ed3i g\u1eedi ng\u01b0\u1ee3c l\u1ea1i cho c\u01a1 s\u1edf d\u1eef li\u1ec7u ho\u1eb7c d\u00f9ng n\u00f3 \u0111\u1ec3 d\u1ef1ng d\u1eef li\u1ec7u \u0111\u00f3.<\/p>\n

        N\u00f3 ph\u1ea3n h\u1ed3i c\u00e1c y\u00eau c\u1ea7u t\u1eeb view v\u00e0 c\u00e1c h\u01b0\u1edbng d\u1eabn t\u1eeb controller \u0111\u1ec3 t\u1ef1 c\u1eadp nh\u1eadt. N\u00f3 c\u00f2n l\u00e0 m\u1eabu h\u00ecnh c\u1ea5p \u0111\u1ed9 th\u1ea5p nh\u1ea5t, \u0111\u1ea3m nhi\u1ec7m vi\u1ec7c duy tr\u00ec d\u1eef li\u1ec7u.<\/p>\n

        View<\/strong><\/h3>\n

        View l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a \u1ee9ng d\u1ee5ng, c\u00f3 ch\u1ee9c n\u0103ng tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u<\/p>\n

        View \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi d\u1eef li\u1ec7u thu th\u1eadp t\u1eeb d\u1eef li\u1ec7u model. View y\u00eau c\u1ea7u model trao th\u00f4ng tin \u0111\u1ec3 n\u00f3 tr\u00ecnh b\u00e0y k\u1ebft qu\u1ea3 cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n

        View c\u00f2n tr\u00ecnh b\u00e0y d\u1eef li\u1ec7u t\u1eeb s\u01a1 \u0111\u1ed3, bi\u1ec3u \u0111\u1ed3, v\u00e0 b\u1ea3ng. V\u00ed d\u1ee5, view kh\u00e1ch h\u00e0ng s\u1ebd bao g\u1ed3m m\u1ecdi th\u00e0nh ph\u1ea7n c\u1ee7a UI nh\u01b0 text box, drop down\u2026<\/p>\n

        Controller<\/strong><\/h3>\n

        Controller l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a \u1ee9ng d\u1ee5ng, c\u00f3 ch\u1ee9c n\u0103ng x\u1eed l\u00fd t\u01b0\u01a1ng t\u00e1c ng\u01b0\u1eddi d\u00f9ng. Controller di\u1ec5n d\u1ecbch thao t\u00e1c chu\u1ed9t v\u00e0 b\u00e0n ph\u00edm t\u1eeb ng\u01b0\u1eddi d\u00f9ng, th\u00f4ng b\u00e1o cho model v\u00e0 view \u0111\u1ec3 thay \u0111\u1ed5i cho ph\u00f9 h\u1ee3p.<\/p>\n

        Controller g\u1eedi c\u00e1c c\u00e2u l\u1ec7nh \u0111\u1ebfn model \u0111\u1ec3 c\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i (v\u00ed d\u1ee5: l\u01b0u t\u00e0i li\u1ec7u). Controller c\u00f2n g\u1eedi c\u00e1c c\u00e2u l\u1ec7nh \u0111\u1ebfn view t\u01b0\u01a1ng \u1ee9ng \u0111\u1ec3 thay \u0111\u1ed5i n\u1ed9i dung c\u1ee7a view (v\u00ed d\u1ee5: cu\u1ed9n khi xem t\u00e0i li\u1ec7u)<\/p>\n

        \"M\u00f4

        \u1ee8ng d\u1ee5ng M\u00f4 h\u00ecnh MVC<\/p><\/div>\n

        V\u00ed d\u1ee5 v\u1ec1 m\u00f4 h\u00ecnh MVC<\/strong><\/h2>\n

        <\/strong><\/p>\n

        Khi v\u00e0o nh\u00e0 h\u00e0ng, b\u1ea1n kh\u00f4ng ph\u1ea3i v\u00e0o b\u1ebfp v\u00e0 chu\u1ea9n b\u1ecb th\u1ee9c \u0103n, m\u00e0 \u0111\u1ee3i b\u1ed3i b\u00e0n \u0111\u1ebfn.<\/p>\n

        L\u00fac n\u00e0y b\u1ea1n g\u1ecdi m\u00f3n. B\u1ed3i b\u00e0n kh\u00f4ng bi\u1ebft b\u1ea1n l\u00e0 ai v\u00e0 mu\u1ed1n g\u00ec, anh ta ch\u1ec9 vi\u1ebft th\u00f4ng tin v\u1ec1 m\u00f3n \u0103n b\u1ea1n mu\u1ed1n g\u1ecdi.<\/p>\n

        Sau \u0111\u00f3 anh ta v\u00e0o b\u1ebfp, nh\u01b0ng kh\u00f4ng ph\u1ea3i \u0111\u1ec3 chu\u1ea9n b\u1ecb th\u1ee9c \u0103n.<\/p>\n

        \u0110\u1ea7u b\u1ebfp l\u00e0 ng\u01b0\u1eddi chu\u1ea9n b\u1ecb th\u1ee9c \u0103n. B\u1ed3i b\u00e0n \u0111\u01b0a danh s\u00e1ch m\u00f3n b\u1ea1n \u0111\u00e3 ch\u1ecdn c\u00f9ng v\u1edbi s\u1ed1 b\u00e0n c\u1ee7a b\u1ea1n.<\/p>\n

        \u0110\u1ea7u b\u1ebfp s\u1ebd chu\u1ea9n b\u1ecb th\u1ee9c \u0103n cho b\u1ea1n, s\u1eed d\u1ee5ng nguy\u00ean li\u1ec7u \u0111\u1ec3 n\u1ea5u \u0103n. Gi\u1ea3 s\u1eed b\u1ea1n g\u1ecdi sandwich rau. \u0110\u1ea7u b\u1ebfp s\u1ebd c\u1ea7n b\u00e1nh m\u00ec, c\u00e0 chua, khoai t\u00e2y, \u1edf, h\u00e0nh, ph\u00f4 mai\u2026l\u1ea5y t\u1eeb t\u1ee7 l\u1ea1nh.<\/p>\n

        \u0110\u1ea7u b\u1ebfp trao m\u00f3n \u0103n cho b\u1ed3i b\u00e0n. Vi\u1ec7c c\u1ee7a b\u1ed3i b\u00e0n l\u00e0 \u0111\u01b0a th\u1ee9c \u0103n ra kh\u1ecfi b\u1ebfp.<\/p>\n

        B\u1ed3i b\u00e0n bi\u1ebft m\u00f3n \u0103n b\u1ea1n \u0111\u00e3 g\u1ecdi v\u00e0 mang n\u00f3 ra cho b\u1ea1n.<\/p>\n

        Trong v\u00ed d\u1ee5 n\u00e0y: View l\u00e0 b\u1ea1n, Controller l\u00e0 b\u1ed3i b\u00e0n, Model l\u00e0 \u0111\u1ea7u b\u1ebfp, D\u1eef li\u1ec7u l\u00e0 t\u1ee7 l\u1ea1nh.<\/p>\n

        M\u1ed9t v\u00ed d\u1ee5 kh\u00e1c:<\/strong><\/h3>\n

        <\/strong><\/p>\n

        C\u01a1 ch\u1ebf l\u00e1i xe l\u00e0 m\u1ed9t v\u00ed d\u1ee5 kh\u00e1c v\u1ec1 m\u00f4 h\u00ecnh MVC<\/p>\n