{"id":1988,"date":"2015-06-08T07:30:54","date_gmt":"2015-06-08T07:30:54","guid":{"rendered":"https:\/\/blog.kesato.com\/?p=1988"},"modified":"2023-02-07T17:22:54","modified_gmt":"2023-02-07T09:22:54","slug":"mvc-concept-in-web-development","status":"publish","type":"post","link":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/","title":{"rendered":"MVC concept in Web Development"},"content":{"rendered":"\n<p>In case web development, we often hear about MVC. What is MVC? That abbreviation of Model &#8211; View &#8211; Controller concept. Smalltalk Programmer Trygve Reenskaug created this concept in 1979, long time ago before internet booming era. The program architecture significantly different than<\/p>\n\n\n\n<!--more-->\n\n\n\n<p> procedural programming. Many people said MVC have advantage make program more efficient and secure.<\/p>\n\n\n\n<p>let&#8217;s take a look inside a MVC Architecture, which basically consist of three main part ( in separate folder ) and connected each other :<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic4.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"650\" height=\"400\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic4.jpg\" alt=\"mvc works\" class=\"wp-image-1990\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic4.jpg 650w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic4-300x184.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<ol>\n<li><b>VIEW<\/b><\/li>\n<\/ol>\n\n\n\n<p>This is place where the web part visible to user, view attached to model where required to get some data update. You can set up style , color and size by include css in this part.<\/p>\n\n\n\n<p><i>View example :<\/i><\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-php\">Class View {\n    private $ymodel;\n    private $xcontroller;\n\n    public function _construct(Controller $xcontrol, Model $ymodel) {\n        $this-&gt;controller = $xcontroller;\n        $this-&gt;model = $ymodels;\n    }\n\n    public function display(){\n        return &#039;&lt;i&gt;&lt;b&gt;&#039;.$this-&gt;model-&gt;text.&#039;&lt;\/b&gt;&lt;\/i&gt;&#039;;\n    }\n}<\/code><\/pre>\n\n\n\n<ol>\n<li><b>CONTROLLER<\/b><\/li>\n<\/ol>\n\n\n\n<p>That is handle event from view, but this is not media between view and model. Although receive user&#8217;s input and send commands to model for update data, view get their own data from model.<\/p>\n\n\n\n<p><i>Controller example:<\/i><\/p>\n\n\n\n<p>class Controller<\/p>\n\n\n\n<p>{<\/p>\n\n\n\n<p>private $zmodel;<\/p>\n\n\n\n<p>public function _construct(Model $zmodel)<\/p>\n\n\n\n<p>{<\/p>\n\n\n\n<p>$this-&gt;model=$zmodel;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic21.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"650\" height=\"400\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic21.jpg\" alt=\"model view controller\" class=\"wp-image-1992\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic21.jpg 650w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic21-300x184.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/figure>\n\n\n\n<ol>\n<li>\n<ol start=\"3\">\n<li><b>MODEL<\/b><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p>This most complex part of MVC, store data which required by view. in other word, you can call it skeleton of program. The HTML or other main data like text you can put here<\/p>\n\n\n\n<p><i>Model Example :<\/i><\/p>\n\n\n\n<p>class Model<\/p>\n\n\n\n<p>{<\/p>\n\n\n\n<p>public $word;<\/p>\n\n\n\n<p>public function _construct()<\/p>\n\n\n\n<p>{<\/p>\n\n\n\n<p>$this-&gt;word = &#8216; Hello world&#8217;;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><i>and finally<\/i><\/p>\n\n\n\n<p><i> <\/i><span style=\"color: #000000;\"><span style=\"font-family: 'Times New Roman', serif;\"><span style=\"font-size: medium;\"> $model = new Model(); <\/span><\/span><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000;\"><span style=\"font-family: 'Times New Roman', serif;\"><span style=\"font-size: medium;\"> $controller = new Controller($zmodel); <\/span><\/span><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000;\"><span style=\"font-family: 'Times New Roman', serif;\"><span style=\"font-size: medium;\"> $view = new View($xcontroller, $ymodel); <\/span><\/span><\/span><\/p>\n\n\n\n<p><span style=\"color: #000000;\"><span style=\"font-family: 'Times New Roman', serif;\"><span style=\"font-size: medium;\"> echo $view-&gt;output();<\/span><\/span><\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic3.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"650\" height=\"400\" src=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic3.jpg\" alt=\"laravel symfony code igniter\" class=\"wp-image-1991\" srcset=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic3.jpg 650w, https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/pic3-300x184.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/figure>\n\n\n\n<p><span style=\"color: #000000;\"><span style=\"font-family: 'Times New Roman', serif;\"><span style=\"font-size: medium;\">MVC implementation not only in php, but in other language like java, ASP or other. Especially for web development, this concept used by all frameworks like codeigniter, laravel, zend framework, symphony. <\/span><\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In case web development, we often hear about MVC. What is MVC? That abbreviation of Model &#8211; View &#8211; Controller concept. Smalltalk Programmer Trygve Reenskaug created this concept in 1979, long time ago before internet booming era. The program architecture significantly different than<\/p>\n","protected":false},"author":1,"featured_media":1989,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[313,109,172],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>MVC concept in Web Development - Creative Blog - Web Design - Graphic - Technology - SEO<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MVC concept in Web Development - Creative Blog - Web Design - Graphic - Technology - SEO\" \/>\n<meta property=\"og:description\" content=\"In case web development, we often hear about MVC. What is MVC? That abbreviation of Model &#8211; View &#8211; Controller concept. Smalltalk Programmer Trygve Reenskaug created this concept in 1979, long time ago before internet booming era. The program architecture significantly different than\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Creative Blog - Web Design - Graphic - Technology - SEO\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-08T07:30:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-07T09:22:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/banner1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"220\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/\"},\"author\":{\"name\":\"Admin\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/86e1cbf9f09d1e5e3ba22fdf8b9c0da9\"},\"headline\":\"MVC concept in Web Development\",\"datePublished\":\"2015-06-08T07:30:54+00:00\",\"dateModified\":\"2023-02-07T09:22:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/\"},\"wordCount\":270,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/#organization\"},\"keywords\":[\"mvc\",\"Web Design\",\"Web Development\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/\",\"url\":\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/\",\"name\":\"MVC concept in Web Development - Creative Blog - Web Design - Graphic - Technology - SEO\",\"isPartOf\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/#website\"},\"datePublished\":\"2015-06-08T07:30:54+00:00\",\"dateModified\":\"2023-02-07T09:22:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kesato.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MVC concept in Web Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#website\",\"url\":\"https:\/\/www.kesato.com\/blog\/\",\"name\":\"Creative Blog - Web Design - Graphic - Technology - SEO\",\"description\":\"Creative articles for your inspiration in web, design, graphics, technology, photography, music, architecture, brand, culture, update and trends\",\"publisher\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kesato.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#organization\",\"name\":\"Creative Blog - Web Design - Graphic - Technology - SEO\",\"url\":\"https:\/\/www.kesato.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2018\/10\/kesato-header-logo.png\",\"contentUrl\":\"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2018\/10\/kesato-header-logo.png\",\"width\":155,\"height\":31,\"caption\":\"Creative Blog - Web Design - Graphic - Technology - SEO\"},\"image\":{\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/86e1cbf9f09d1e5e3ba22fdf8b9c0da9\",\"name\":\"Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/067fd3e204db9337d55a33c56f9cb7e8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/067fd3e204db9337d55a33c56f9cb7e8?s=96&d=mm&r=g\",\"caption\":\"Admin\"},\"url\":\"https:\/\/www.kesato.com\/blog\/author\/kesatomin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"MVC concept in Web Development - Creative Blog - Web Design - Graphic - Technology - SEO","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/","og_locale":"en_US","og_type":"article","og_title":"MVC concept in Web Development - Creative Blog - Web Design - Graphic - Technology - SEO","og_description":"In case web development, we often hear about MVC. What is MVC? That abbreviation of Model &#8211; View &#8211; Controller concept. Smalltalk Programmer Trygve Reenskaug created this concept in 1979, long time ago before internet booming era. The program architecture significantly different than","og_url":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/","og_site_name":"Creative Blog - Web Design - Graphic - Technology - SEO","article_published_time":"2015-06-08T07:30:54+00:00","article_modified_time":"2023-02-07T09:22:54+00:00","og_image":[{"width":750,"height":220,"url":"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2015\/06\/banner1.jpg","type":"image\/jpeg"}],"author":"Admin","twitter_misc":{"Written by":"Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/#article","isPartOf":{"@id":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/"},"author":{"name":"Admin","@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/86e1cbf9f09d1e5e3ba22fdf8b9c0da9"},"headline":"MVC concept in Web Development","datePublished":"2015-06-08T07:30:54+00:00","dateModified":"2023-02-07T09:22:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/"},"wordCount":270,"commentCount":2,"publisher":{"@id":"https:\/\/www.kesato.com\/blog\/#organization"},"keywords":["mvc","Web Design","Web Development"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/","url":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/","name":"MVC concept in Web Development - Creative Blog - Web Design - Graphic - Technology - SEO","isPartOf":{"@id":"https:\/\/www.kesato.com\/blog\/#website"},"datePublished":"2015-06-08T07:30:54+00:00","dateModified":"2023-02-07T09:22:54+00:00","breadcrumb":{"@id":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kesato.com\/blog\/web\/mvc-concept-in-web-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kesato.com\/blog\/"},{"@type":"ListItem","position":2,"name":"MVC concept in Web Development"}]},{"@type":"WebSite","@id":"https:\/\/www.kesato.com\/blog\/#website","url":"https:\/\/www.kesato.com\/blog\/","name":"Creative Blog - Web Design - Graphic - Technology - SEO","description":"Creative articles for your inspiration in web, design, graphics, technology, photography, music, architecture, brand, culture, update and trends","publisher":{"@id":"https:\/\/www.kesato.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kesato.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.kesato.com\/blog\/#organization","name":"Creative Blog - Web Design - Graphic - Technology - SEO","url":"https:\/\/www.kesato.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2018\/10\/kesato-header-logo.png","contentUrl":"https:\/\/www.kesato.com\/blog\/wp-content\/uploads\/2018\/10\/kesato-header-logo.png","width":155,"height":31,"caption":"Creative Blog - Web Design - Graphic - Technology - SEO"},"image":{"@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/86e1cbf9f09d1e5e3ba22fdf8b9c0da9","name":"Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kesato.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/067fd3e204db9337d55a33c56f9cb7e8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/067fd3e204db9337d55a33c56f9cb7e8?s=96&d=mm&r=g","caption":"Admin"},"url":"https:\/\/www.kesato.com\/blog\/author\/kesatomin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/posts\/1988"}],"collection":[{"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/comments?post=1988"}],"version-history":[{"count":3,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/posts\/1988\/revisions"}],"predecessor-version":[{"id":3189,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/posts\/1988\/revisions\/3189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/media\/1989"}],"wp:attachment":[{"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/media?parent=1988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/categories?post=1988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kesato.com\/blog\/wp-json\/wp\/v2\/tags?post=1988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}