{"id":18445,"date":"2020-06-24T20:16:27","date_gmt":"2020-06-25T03:16:27","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18445"},"modified":"2023-12-01T03:23:07","modified_gmt":"2023-12-01T11:23:07","slug":"mvc-framework","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/mvc-framework\/","title":{"rendered":"What is the MVC Framework?"},"content":{"rendered":"\n<p>Software engineers like to come up with ways to organize code. The more organized a codebase is, the easier it will be to navigate. Having an organized codebase will make it easy to identify and fix bugs quickly and implement new features when you\u2019re ready.<br><\/p>\n\n\n\n<p>One of the most popular ways of organizing code is by using the Model, View and Controller (MVC) framework. In this guide, we\u2019re going to discuss how the MVC pattern is used and why you should use it in your code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the MVC Framework?<\/h2>\n\n\n\n<p>The Model, View and Controller framework states that different sections of your code have different applications within a project. Some of your code outlines how your app appears, whereas other parts of your code control how the app works.<br><\/p>\n\n\n\n<p>MVC divides these different applications into three components. Using the MVC framework, it is easy for you to organize your code into these three sections.&nbsp;<br><\/p>\n\n\n\n<p>Revising your code and making changes is therefore easier because you\u2019ll know where to look when you need to make a change. MVC can be applied to software, mobile and web development projects, but is especially common in web projects.<br><\/p>\n\n\n\n<p>Let\u2019s discuss each of the three parts of the MVC framework individually below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Model<\/h3>\n\n\n\n<p>The model represents the data in your application and how it is structured. The model can hold data and it can outline the ways in which data can be accessed. The model is typically on the server-side of an application.<br><\/p>\n\n\n\n<p>Suppose you are building a calendar app. Your model may define an \u201cevent\u201d type which is used to keep track of all your meetings. It may also define a \u201cuser\u201d type so that you can log in to your calendar and see your events.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The View<\/h3>\n\n\n\n<p>The view is all the code that makes up the part of an application that powers user interaction. In other words, the view is the user interface.<br><\/p>\n\n\n\n<p>In a web application, the view contains the HTML, CSS and JavaScript code that runs your application. The view also covers any frameworks such as React or Vue.js that you use to design a user interface. In a calendar application, the view code would define how the calendar appears on the website and the forms that users can use to create an event.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Controller<\/h3>\n\n\n\n<p>The controller is like a bridge between the view and the model. This part of the MVC framework receives user input and processes it.<br><\/p>\n\n\n\n<p>Let\u2019s go back to the calendar application example. The controller would connect the data types that you defined \u2013 like \u201cevent\u201d or \u201cuser\u201d \u2013 and the user interface to make your application functional. For instance, the controller may ensure that a user has filled out all the fields on a \u201ccreate event\u201d form, then add that event to the database.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How MVC is Implemented<\/h2>\n\n\n\n<p>MVC is a model you can use to decide how your application is structured. MVC is not just used to make your code look pretty; it is a way to help you speed up the development process.<br><\/p>\n\n\n\n<p>Suppose you\u2019re building a calendar application. A user reports to you that there is a bug on the user interface when they submit a form. Because this bug appears on the user interface, you know that you\u2019ll need to go to the view code in your application.<br><\/p>\n\n\n\n<p>You don\u2019t need to worry about reading through data structures or controller files. You can go straight to the source of the problem \u2013 the view \u2013 and make the requisite changes to the code.<br><\/p>\n\n\n\n<p>In practice, the MVC architecture may mean that you have separate folders to store different parts of your application. For instance, in a web application, you may use this structure for each webpage:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>page_name.html\nstyles.css\ncontroller.js<\/pre><\/div>\n\n\n\n<p>The HTML and CSS file in the above list both refer to the view. That\u2019s because HTML and CSS are client-side technologies used to define the structure and style of an app. The JS file refers to the controller because it contains code that reads data from the application and decides how it should be used.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>MVC is a better way to organize your code. Using MVC, you should split up your code into three components: a model, a view and a controller.<br><\/p>\n\n\n\n<p>This framework is useful for all software development projects, no matter what the size may be. It\u2019s especially important for large-scale projects to use a framework like MVC because it ensures that every developer understands how an application is structured. Without a clear application structure, a large project could quickly get out of hand. Code could get lost or it may be really difficult to find what files need to be changed when a new feature is requested.<br><\/p>\n\n\n\n<p>When you\u2019re building your next web application, ask yourself: is my code organized using MVC? If you don\u2019t use the framework, think about what parts of your application are models, views and controllers. Then, move your code around so that it is divided into these groups. This will help you keep track of your code and showcase your professional development skills.<\/p>\n","protected":false},"excerpt":{"rendered":"Software engineers like to come up with ways to organize code. The more organized a codebase is, the easier it will be to navigate. Having an organized codebase will make it easy to identify and fix bugs quickly and implement new features when you\u2019re ready. One of the most popular ways of organizing code is&hellip;","protected":false},"author":240,"featured_media":18446,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18070],"tags":[],"class_list":{"0":"post-18445","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-software-engineering-skills"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"What is a {technical term}","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What is the MVC Framework? | Career Karma<\/title>\n<meta name=\"description\" content=\"Model, View and Controller (MVC) is a framework used to define the structure of a codebase. On Career Karma, learn more about the MVC framework.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/mvc-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the MVC Framework?\" \/>\n<meta property=\"og:description\" content=\"Model, View and Controller (MVC) is a framework used to define the structure of a codebase. On Career Karma, learn more about the MVC framework.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/mvc-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-25T03:16:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:23:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mimi-thian-VsEKvmOkS3M-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"756\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"What is the MVC Framework?\",\"datePublished\":\"2020-06-25T03:16:27+00:00\",\"dateModified\":\"2023-12-01T11:23:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/\"},\"wordCount\":866,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/mimi-thian-VsEKvmOkS3M-unsplash.jpg\",\"articleSection\":[\"Software Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/\",\"name\":\"What is the MVC Framework? | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/mimi-thian-VsEKvmOkS3M-unsplash.jpg\",\"datePublished\":\"2020-06-25T03:16:27+00:00\",\"dateModified\":\"2023-12-01T11:23:07+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Model, View and Controller (MVC) is a framework used to define the structure of a codebase. On Career Karma, learn more about the MVC framework.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/mimi-thian-VsEKvmOkS3M-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/mimi-thian-VsEKvmOkS3M-unsplash.jpg\",\"width\":1020,\"height\":756},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/mvc-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Software Engineering\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/software-engineering-skills\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"What is the MVC Framework?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is the MVC Framework? | Career Karma","description":"Model, View and Controller (MVC) is a framework used to define the structure of a codebase. On Career Karma, learn more about the MVC framework.","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:\/\/careerkarma.com\/blog\/mvc-framework\/","og_locale":"en_US","og_type":"article","og_title":"What is the MVC Framework?","og_description":"Model, View and Controller (MVC) is a framework used to define the structure of a codebase. On Career Karma, learn more about the MVC framework.","og_url":"https:\/\/careerkarma.com\/blog\/mvc-framework\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-25T03:16:27+00:00","article_modified_time":"2023-12-01T11:23:07+00:00","og_image":[{"width":1020,"height":756,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mimi-thian-VsEKvmOkS3M-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"What is the MVC Framework?","datePublished":"2020-06-25T03:16:27+00:00","dateModified":"2023-12-01T11:23:07+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/"},"wordCount":866,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mimi-thian-VsEKvmOkS3M-unsplash.jpg","articleSection":["Software Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/mvc-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/","url":"https:\/\/careerkarma.com\/blog\/mvc-framework\/","name":"What is the MVC Framework? | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mimi-thian-VsEKvmOkS3M-unsplash.jpg","datePublished":"2020-06-25T03:16:27+00:00","dateModified":"2023-12-01T11:23:07+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Model, View and Controller (MVC) is a framework used to define the structure of a codebase. On Career Karma, learn more about the MVC framework.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/mvc-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mimi-thian-VsEKvmOkS3M-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/mimi-thian-VsEKvmOkS3M-unsplash.jpg","width":1020,"height":756},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/mvc-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Software Engineering","item":"https:\/\/careerkarma.com\/blog\/software-engineering-skills\/"},{"@type":"ListItem","position":3,"name":"What is the MVC Framework?"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18445"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18446"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}