{"id":3239,"date":"2014-05-09T15:28:53","date_gmt":"2014-05-09T15:28:53","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2014\/05\/09\/add-default-view\/"},"modified":"2023-06-07T11:26:39","modified_gmt":"2023-06-07T15:26:39","slug":"add-default-view","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/","title":{"rendered":"How to add a Default View to your Joomla 3 Component"},"content":{"rendered":"<p class=\"alert alert-danger\">This tutorial series, <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/joomla-search-component\/\">Joomla 3 component development<\/a>, is currently in progress\u2026<\/p>\n<p>In our last tutorial, <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/helloworld\/\">we created a very basic Joomla 3 component<\/a> called helloworld. As we continue our tutorial series on creating components, we will now learn how to add views to a component.<\/p>\n<h2>What is a view?<\/h2>\n<p>A \u201c<em>view<\/em>\u201d in Joomla is the set of code that creates the actual HTML for the component that is returned to the user. Views are a part of the M<u>V<\/u>C, and you can read much more thorough documentation about the MVC <a href=\"https:\/\/docs.joomla.org\/Model-View-Controller\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"padding-right: 15px;\" valign=\"top\"><strong>For\u00a0Example:<\/strong><\/td>\n<td>Included with Joomla is a component called <strong>Content<\/strong>, <em>aka<\/em> <strong>com_content<\/strong>. This component is what allows you to <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/how-to-write-a-new-article\/\">write articles<\/a> and <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/how-to-add-a-new-category\/\">create categories<\/a>.\n<p>When you\u2019re on your Joomla website and you\u2019re <strong>viewing<\/strong> an article or you\u2019re <strong>viewing<\/strong> the landing page of a category, you\u2019re looking at the \u201c<strong>view<\/strong>\u201d for an article and the \u201c<strong>view<\/strong>\u201d of a category.<\/p><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Before the View: Setting up your Controller<\/h2>\n<p>Like we said, <em>views<\/em> are apart of the M<strong><u>V<\/u><\/strong>C. Before we setup the <em>view<\/em> we must first setup the controller.<\/p>\n<p>Below, you will find a list of the files you will need to create \/ modify in order to setup the controller.<\/p>\n<h3>\/components\/com_helloworld\/helloworld.php<\/h3>\n<p>We previously created this file and placed basic code in it. Remove that code and add the following code:<\/p>\n<pre class=\"code_block\"> &lt;?php \/\/ No direct access to this file defined('_JEXEC') or die('Restricted access');   \/\/ import joomla controller library jimport('joomla.application.component.controller');   \/\/ Get an instance of the controller prefixed by HelloWorld $controller = JControllerLegacy::getInstance('HelloWorld');   \/\/ Perform the Request task $input = JFactory::getApplication()-&gt;input; $controller-&gt;execute($input-&gt;getCmd('task'));   \/\/ Redirect if set by the controller $controller-&gt;redirect();<\/pre>\n<h3>\/components\/com_helloworld\/controller.php<\/h3>\n<pre class=\"code_block\"> &lt;?php \/\/ No direct access to this file defined('_JEXEC') or die('Restricted access');   \/\/ import Joomla controller library jimport('joomla.application.component.controller');   \/**  * Hello World Component Controller  *\/ class HelloWorldController extends JControllerLegacy { }<\/pre>\n<h2>How to setup a view<\/h2>\n<p>Now that we\u2019ve setup our controller, we are going to setup our default view. The default view is a view named after the component. So, in our case, we are going to show you how to create a view called <strong>helloworld<\/strong>.<\/p>\n<p>Below is a list of files you need to create in order to create the <em>helloworld<\/em> view.<\/p>\n<h3>Folder setup<\/h3>\n<p>First, create the following folders:<\/p>\n<table>\n<tbody>\n<tr>\n<td><strong>views<\/strong>:<\/td>\n<td>\/components\/com_helloworld\/<span style=\"color: red;\">views<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-right: 15px;\"><strong>view\u00a0name<\/strong>:<\/td>\n<td>\/components\/com_helloworld\/views\/<span style=\"color: red;\">helloworld<\/span><\/td>\n<\/tr>\n<tr>\n<td><strong>tmpl<\/strong>:<\/td>\n<td>\/components\/com_helloworld\/views\/helloworld\/<span style=\"color: red;\">tmpl<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>\/components\/com_helloworld\/views\/helloworld\/view.html.php<\/h3>\n<pre class=\"code_block\"> &lt;?php \/\/ No direct access to this file defined('_JEXEC') or die('Restricted access');   \/\/ import Joomla view library jimport('joomla.application.component.view');   \/**  * HTML View class for the HelloWorld Component  *\/ class HelloWorldViewHelloWorld extends JViewLegacy {         \/\/ Overwriting JView display method         function display($tpl = null)          {                 \/\/ Assign data to the view                 $this-&gt;msg = 'Hello World';                   \/\/ Display the view                 parent::display($tpl);         } }<\/pre>\n<h3>\/components\/com_helloworld\/views\/helloworld\/tmpl\/default.php<\/h3>\n<pre class=\"code_block\"> &lt;?php \/\/ No direct access to this file defined('_JEXEC') or die('Restricted access'); ?&gt; &lt;h1&gt;&lt;?php echo $this-&gt;msg; ?&gt;&lt;\/h1&gt;<\/pre>\n<h2>How does all this work?<\/h2>\n<p>Using the sample above, the component will display \u201c<em>Hello World<\/em>\u201d to the screen. But how did it do that?!<\/p>\n<p>Joomla needs to determine which component, view, and task to execute. It does so by reading the values from the url. As you can see below, we\u2019ve highlighed where exactly the component, view, and task can be set:<\/p>\n<p class=\"white_box\">https:\/\/domain.com\/index.php?option=<span style=\"background: yellow;\">com_helloworld<\/span>&amp;view=<span style=\"background: yellow;\">helloworld<\/span>&amp;task=<span style=\"background: yellow;\">display<\/span><\/p>\n<p>Note however, the task and the view <strong>do not<\/strong> need to be included in the url. If they are not, their values will default to the following:<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"padding-right: 15px;\" valign=\"top\"><strong>Task<\/strong><\/td>\n<td><em>display<\/em>\n<p style=\"font-size: 11px; line-height: 15px;\">If the URL does not specify a task, Joomla looks for a default tasked named display. The display task is setup within our view.html.php file.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\"><strong>View<\/strong><\/td>\n<td><em>component\u2019s name<\/em>\n<p style=\"font-size: 11px; line-height: 15px;\">If a view is not specified, the default view is loaded. The default view is the component name. Because our component was named <em>helloworld<\/em>, the default view <strong>helloworld<\/strong> would be run.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The best way to explain how all of these peices work together is by looking at the following image:<\/p>\n<p><a href=\"\/support\/images\/stories\/edu\/joomla-3\/create-component\/adding-a-view-to-a-component.png\" rel=\"lightbox-0\"><img decoding=\"async\" class=\"std_ss\" style=\"max-width: 100%;\" src=\"\/support\/images\/stories\/edu\/joomla-3\/create-component\/adding-a-view-to-a-component.png\" alt=\"adding a view to a component\"><\/a><\/p>\n<div style=\"clear: both;\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial series, Joomla 3 component development, is currently in progress\u2026 In our last tutorial, we created a very basic Joomla 3 component called helloworld. As we continue our tutorial series on creating components, we will now learn how to add views to a component. What is a view? A \u201cview\u201d in Joomla is the<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/\"> Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403,94],"tags":[4404],"class_list":["post-3239","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-3","tag-joomla-v3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to add a Default View to your Joomla 3 Component | InMotion Hosting<\/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.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add a Default View to your Joomla 3 Component | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"This tutorial series, Joomla 3 component development, is currently in progress\u2026 In our last tutorial, we created a very basic Joomla 3 component called helloworld. As we continue our tutorial series on creating components, we will now learn how to add views to a component. What is a view? A \u201cview\u201d in Joomla is the Read More &gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-09T15:28:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-07T15:26:39+00:00\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to add a Default View to your Joomla 3 Component\",\"datePublished\":\"2014-05-09T15:28:53+00:00\",\"dateModified\":\"2023-06-07T15:26:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/\"},\"wordCount\":534,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"keywords\":[\"Joomla v3\"],\"articleSection\":[\"Joomla\",\"Joomla 3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/\",\"name\":\"How to add a Default View to your Joomla 3 Component | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2014-05-09T15:28:53+00:00\",\"dateModified\":\"2023-06-07T15:26:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add a Default View to your Joomla 3 Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add a Default View to your Joomla 3 Component | InMotion Hosting","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.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/","og_locale":"en_US","og_type":"article","og_title":"How to add a Default View to your Joomla 3 Component | InMotion Hosting","og_description":"This tutorial series, Joomla 3 component development, is currently in progress\u2026 In our last tutorial, we created a very basic Joomla 3 component called helloworld. As we continue our tutorial series on creating components, we will now learn how to add views to a component. What is a view? A \u201cview\u201d in Joomla is the Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2014-05-09T15:28:53+00:00","article_modified_time":"2023-06-07T15:26:39+00:00","author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to add a Default View to your Joomla 3 Component","datePublished":"2014-05-09T15:28:53+00:00","dateModified":"2023-06-07T15:26:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/"},"wordCount":534,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"keywords":["Joomla v3"],"articleSection":["Joomla","Joomla 3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/","name":"How to add a Default View to your Joomla 3 Component | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2014-05-09T15:28:53+00:00","dateModified":"2023-06-07T15:26:39+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-default-view\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to add a Default View to your Joomla 3 Component"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=3239"}],"version-history":[{"count":6,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3239\/revisions"}],"predecessor-version":[{"id":104811,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3239\/revisions\/104811"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=3239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=3239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=3239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}