{"id":3235,"date":"2014-05-08T14:46:20","date_gmt":"2014-05-08T14:46:20","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2014\/05\/08\/helloworld\/"},"modified":"2023-06-07T15:10:34","modified_gmt":"2023-06-07T19:10:34","slug":"helloworld","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/helloworld\/","title":{"rendered":"Creating a Hello World Joomla 3 Component"},"content":{"rendered":"

In this tutorial we are going to create a Hello World<\/strong> component for Joomla 3.3. When we say, \u201ccreate a component<\/em>\u201c, we mean:<\/p>\n

    \n
  1. Create the files for the component<\/li>\n
  2. Install the component<\/li>\n
  3. View the component on the front end of the website<\/li>\n<\/ol>\n

    Creating the files for the Hello World<\/em> component<\/h2>\n
      \n
    1. Within your Components<\/em> folder, create a folder named com_helloworld<\/strong><\/li>\n
    2. Within your new com_helloworld<\/em> folder, create a blank file named helloworld.xml<\/strong><\/li>\n
    3. Within your new com_helloworld<\/em> folder, create helloworld.php<\/strong> with the following code:\n
      <?php  echo \"Hello World\";<\/pre>\n
      That\u2019s it! We\u2019ve just setup the following structure:
      \n\u2022 com_helloworld\/helloworld.xml
      \n\u2022 com_helloworld\/helloworld.php<\/p><\/li>\n<\/ol>\n
      Installing our Hello World<\/em> component<\/h2>\n
        \n
      1. Log into your Joomla admin dashboard<\/a><\/li>\n
      2. In the top menu, click Extensions<\/strong> and then click Extension Manager<\/strong><\/li>\n
      3. In the left menu, click the Discover<\/strong> link<\/em><\/li>\n
      4. In the top menu, click the Discover<\/strong> button<\/em><\/li>\n
      5. You will see com_helloworld<\/strong> show up in the list of avaialble extensions. Click the checkbox to the left of it, and then click the Install<\/strong> button in the top menu.You will see a few Warnings<\/em> and Messages<\/em> at the top of the page:\n
        \u2022 JInstaller: :Install: Cannot find Joomla XML setup file
        \n\u2022 Component Install: The XML file did not contain an administration element
        \n\u2022 Discover install failed: 10005<\/p>\n
        For now, we will ignore these messages. We\u2019re doing very barebones testing, and our component is missing a few things, which in turn is triggering these messages to show.<\/p><\/li>\n<\/ol>\n
        Viewing our Hello World<\/em> component<\/h2>\n
        \"Hello<\/a><\/p>\n
        <\/div>\n
        To see the Hello World<\/em> component in action, visit your Joomla website and add the following at the end of your url:
        \nindex.php?option=com_helloworld<\/span><\/p>\n
        For example<\/strong>:
        \nhttps:\/\/example.com\/index.php?option=com_helloworld<\/span><\/p>\n
        When going to this url, Joomla will execute the helloworld component. It should look something similar to the screenshot to the right.<\/p>\n
        What have we learned?<\/h2>\n
        option=com_component identifies the component to load<\/h3>\n
        \"Hello<\/a><\/p>\n
        <\/div>\n
        If you set the option<\/strong> variable in the URL to com_<\/strong>something<\/em>, Joomla will see this as a request to load that component.<\/p>\n
        https:\/\/example.com\/index.php?option=com_helloworld<\/span><\/p>\n
        Looking at the URL above, Joomla knows we are requesting the com_helloworld<\/span> component to load. Joomla looks for this component in this folder: \/components\/com_helloworld<\/span><\/p>\n
        The first file loaded is component<\/em>.php<\/h3>\n
        \"Load<\/a><\/p>\n
        <\/div>\n
        If you specify ?option=com_helloworld<\/span> in your URL, Joomla will load files from \/components\/com_helloworld<\/span>. Within that folder, Joomla will then load helloworld<\/span>.php.<\/p>\n
        Case Matters \u2013 use lowercase<\/h3>\n
        Use all lowercase when [1]<\/strong> naming your component\u2019s folder and [2]<\/strong> calling it in the URL.<\/p>\n
        For example, do not<\/u> name your folder com_H<\/span>elloW<\/span>orld<\/strong>. Also, do not use uppercase in your URL, like the following:<\/p>\n
        https:\/\/example.com\/index.php?option=com_H<\/span>elloW<\/span>orld<\/p>\n
        Dashes and Underscores are acceptable<\/h3>\n
        In our testing, in addition to naming the component \u201ccom_helloworld\u201d, we tested:<\/p>\n