001 Hello World with Joomla Component Builder

(work in progress)

Video

Introduction

• 01:55 Install Joomla! Component Builder/Creator Download and install Joomla Component Builder/Creator.

You can find the component in the repository on GitHub. Note, these files are not populated with data. The component shows you the very bare essentials of what's required to make a component work in Joomla! But we are going to do much more than the code does in this component. When we are done we will have an application with many lines and we will add structures so it goes way beyond just a wire frame component. The latest release can be downloaded here. After downloading the file, upload it to the root of the website directory you will be installing it in. For this example, click the Releases link, download and install the file. The first thing to do next is create a field.

Create Greeting Field

• 02:46 Create a Field Create Greeting Field.

There are many field types. We need to create a basic custom text field named greeting. You will see there are a lot more fields which I'll leave unchanged. I'm also going to remove a few things but the field will still work even though these lines are removed. Change the type to VARCHAR, save and close.

Create Admin View

03:51 Create an admin view Create an admin view and link fields to database.

After creating a new field the next thing to do is create an admin view. This is what links fields to the database. Call it greeting for a single record and greetings for a list of records and greetings for a system name so that we can identify this across the system. I am going to add the greetings and a few generic icons. Then link that field we made to show, be the first one, act as a title, be sortable, be searchable and be a link in the first tab and first in that tab. Then give it permissions and save. The rest of the structure could be left as is. We will have a working component with this as an admin view so save and close.

Now we need to create a component Click on new and it loads a new Joomla component. I'm going to call it world. For the most part I'm just adding some test data here. I can select an icon. An image can be shown after installation of the component as well as in the admin area. The rest of the features in the settings that we need to change are the link to the admin view, select greetings, add to main menu, allow sub-menu, auto-checking, history, has metadata, has access, allow import and export. This next one is very important, add a create site view. That way in the site area it will be created for us. For the editing view, it will not create a list view. Edit and create greetings views will be created in the site area. We want this to be the first. There they are linked with the admin view. Click save and close and we are ready to compile our component.

Let's compile it. I am going to compile this and install it into Joomla. For installation, we don't some selections, so deselect these here and then compile. So just like that we have 8000 lines written and 160 pages. So That's way more than the hello world component we just looked at Now if we open the back end Are we having a store that we think you could install it via the Normal installer in fact let's Let's see if we can get that going So I've pasted the URL here that we find on this page here and we will take check and install. We have the hello world component installed and we can open here and go to hello world. We can go to the list and this is where a list of greetings will show. Click new and we can add some text let's say "Hi there James Sable". Close and there is our greeting. Open it and there it has a publishing structure that has permissions plus version control. So if we change this to "Hi there Michael", save and close it you will see that it updated. Open it and you can go to the versions. You can see that it is working. Open the previous version and you can see who changed it.

All of this was done with just a few clicks and the result is a workable component which is now installed. If you look at the code you'll see the installer script of the hello world component. It adds the whole component into the content types and also into all the relevant areas. It also checks to see that we are at version 3.6 of Joomla!. It has also created the greeting table and modules. It has created helper structures. There is a helper class that was set up which has many features, functions and methods. Browse through the helper class in here if you know PHP. There is a very helpful method used in the code that grabs one value from the database. There are many functions in here which you can now use in your component by simply calling the helper class. This is what the application does and there is a MySQL folder with a few MySQL files, and one PHP file. It is very basic but JCB built hello world in a very short time. Look through this folder and learn the structures and exactly how you know you need to have the components.

Add a Front End to this Component

12:15 Create an admin view Create an admin view and link fields to database.

For the next part of the tutorial we will focus on adding a front end to this component and you must remember that We left the front end open ended because we want to allow developers to be able to express themselves in unique ways and not have a cookie cutter receptacle that just gets used over and over. JCB allows diversity and differences between components that are built with JCB only look similar in the admin area. The site area can look completely different from anything else. To avoid the sameness means a lot of custom coding is needed for the site area. You need to know PHP at a more advanced level and how Joomla! works to make this work. I'm going to give you the quickest and shortest path to getting a site area which first can display the items and second can edit them.

Build a Dynamic Get

12:15 Build a Dynamic Get Build a Dynamic Get to begin setting up the front end.

The first thing to build when we are setting up the front end is a dynamic get. It is used in JCB to access various tables and combine their data sets. It also delivers them to the front end of any site view. You can reuse them and add multiples of them. For this example I am going to build a very simple one. First I'm going to have it read a list and I'm going to make sure this is a list query. Next I am linking it to an admin area view, greetings. I am going to have it retrieve all the data. I'm going to say no I don't want Pagination And I'm gonna just have one WHERE filter Basically published here copy that and put it in here and say when published equals 1. Just grab published items and nothing else and there we go grabbing all the data from this one table and we are putting it on the front just filtering it with the swear option and you can join other tables related with this data but I'm not gonna go into depth here. Just quickly and briefly so here we go; reading list is done So there is a hug Reading This

Now we want to have Another Dynamic get just to view One greeting So let's create that I'm gonna call it greeting leave it as a get item Again He's back in View And then select greeting And this time I'm gonna use filter And just add here ID and A dot i d So that should do it save And save and close So now we have our to Dynamic gets in place Second step Side views So we'll create firstly a site view for the lists of items We'll select The get query for the list If we wanna see how it possibly would look I'm in the PHP we have a Statarea You can select the same Option and I'll give you a suggestive idea of how the PHP my look This May differ Depending on how you set up your Dynamic gait But in reality most of the time it is correct and you can simply copy paste some of the Snippets Ryan to your code here And Immediately start using it so I'm just gonna Add a little I ordered list here So we will have a list item basically And we'll just Echo Greeting as a text And Then Grap that Snip it Pasted in there Close the unordered list Now we wanna Use little nice on ordered list here So we gonna grab this As this opening tag And then Closet And we gonna call this Reading Greetings I think will be best And greetings Again Greetings Initial description Ok so we all set here And For now as you see there is no links here We haven't we will actually have to come back and add some links For now I'm just adding And iteration over there The items and displaying the greetings So gonna save it close out of this And now we gonna create one We we only look at 1 Greeting So again will just select That one greeting Get method And you as well and we see that the greeting Possibly look like that So what is echo it out And Gonna make it Nh2 Header tag And then We can't call it greeting Because We have an editing View That will be dynamically added to the front Robbie cause the editing view on the back is called reading We cannot call another front end View A greeting we have to call it something else otherwise will conflict So I'm just gonna call it Greet For now We can call it here we can call it greeting but here we call it greet And then Reading and Greeting on top here as well So you we go we've got all the necessary components lined up for this Excite you To function as expected So save and close So now we have our two side to use it I'm gonna now go to the component to add them to the component So can we go to settings And we go to site views And we will add Reading It doesn't have a menu It has metadata it's not the full view Weaken Add access and then make the default public The second one is greetings This must have a menu Also metadata This is the default View We can also Give it access And make it by Default public There we go we got out to site views save and close Save and close So we go to the compiler And we compile the other world component For the second time And then once compiled You now see that we got nearly 13000 lines of code And we can l Just click here to install which is the easy way instead of going to the installer Now if we go back to the code And we scroll down We'll see that there is now a component And the front end called hello world And it has the models greet greeting and greetings It has the views greet greeting and greetings this one is an edit View This greeting And this one is a display view this one Is it where you can look at how it is getting the values from the database so that Dynamic gait It built Basically this function for us As well as parts inside of this function here Now You see that it added that little Where filter for us And All the values are here as expected You're is having their permission check So it is gonna check whether you have the correct permissions Now because we have not You installed the component As a blank component we installed it and then made changes install it again it will not be bye By Default be set public The way that it sets the view public Is during Post flight Install It actually Set a rule And that's the side greening access to public which usually is the ID Group 1 And then it updates the asset table And since This isn't a new install It actually doesn't do that And so you won't have the expected result of the view being public simply because the component Wasn't installed As fresh so how did them astray to you how it will behave if a user install This the first time fully Computer Compiled as it is now I'll do some to uninstall a component quickly And install it again Which will then activate this feature Now songs you may not understand or life just said that's ok I would just suggest it As you've developed the moment you add the front Side views to the component And you have actually tweaked it success and all those Related parameters It might be best to just uninstall the component and install it completely Fresh To see the fool behaviour working as expected Mum I say but I already created some demo data and now I need to put them punch them Back in again will there is a way to sort of resolve that And that is going to the admin View opening the greeting Going to the MySQL tab Select yes Select Table And then Click add to select the table Then scroll down to that specific table in a database It should be All the world Greeting Then you'll see it loads the specific values from the database And how they will be named in your Backup I usually remove this created by modified by because it May cause conflicts if user ID is changed from one July installed to another And I also sometimes remove The access Value As this may also differ from system to system And the acid ID So I'm only exporting values which I think are consistent across Systems Ok Obviously This one is well And this one Gate safe Now 75 Now this isn't enough just having a fun up there Sequel table if you wanna retain the data now what what date am I talking about About well we installed it right and so if we open the component We added This greeting so the retained this greeting if you've created quite a few Dummy readings then to retain them so that they get install the Even if it's a fresh install that's the way you do that but you have to compile it The component you have to compile the component before you uninstall it Otherwise it will shout at you and say that it couldn't find the database Because you obviously gonna remove it when you uninstall it So I'm just gonna compile this again And then after it been compiled I'm gonna uninstall it as I said I would So you're in the extension manager I'm gonna click On the hello world And uninstall And it would have set for the uninstalled it Then I'll gonna go back to the compiler page I just click on the install And then if I go back to the component I see that it's added that greeting back in And I haven't lost the beat ok Now let's look at the front end By linking it to a menu item So have greeting selected as the menu item type And I'm gonna just make this the the default page The home page and save and close I'm gonna open the homepage There we see our greeting is is greeting Hi there Michael So it's actually worked as expected Let's just add another one to see it how it will look when we have more than one greeting Ok I think that we have enough If we go back to the front end And refresh There we go there's like readings now to make them clickable and editable Let's do the opening it and just reviewing it first When the side view area I'm gonna open greetings Power round This Greeting Echo I'm gonna add an eighth ref And a link we gonna build a link using some of the helper methods and And also what is called The Slug Just like wouldn't necessarily this time function because we didn't add an alias to our table But when there is an aliens dislike will dynamically be used within search engine friendly urls I'm not gonna demonstrate or explain too much about this But I'm gonna just quickly at the link in here Now I know You may be wondering where is this Items slow come from It's not showing here on the side Well Like with most of these developing components You need to know a little bit about how To read code and understand code and that's why you would compile the code And then actually go look at the compiled code in your ID so if you were to open the Model Which Is using this Dynamic Gate You see that it actually built a slug in the model So you're in the model you're the get items So it's looping through them here and then it's checking with it as an alias And then ID and if they are there sure then It actually Combines them with this And Create a slug otherwise it just plays as the ID in The Slug And That's how you would know that the Slug is already created and you can just use it And so it's always good to Why do you developing a component with JCB Go into the code read the code look at what it's done and I'll help you see it honest And how to extend it We trying to follow the normal way of how Zuma lies able to you know develop and be used so That you can Easily follow along in that it wouldn't get It be not trying to reinvent with the wheel but doing things the way that you would expect if you know How to build to my confidence Beira by hand Ok so Now we friends that link You basically used to a route which is a A common class in building roads in Joomla USB helper out class you can look that up It is in the Site area of the component under the helper folder and it has a function called Greed route And we just passing it The Slug and that will crank out the whole URL for us And so we gonna save and close here I just say for now Now we gonna just compile it again Install it back in Sorry haven't made any changes to permissions or any other things other promotions just A short The format again is only when the related to the site views that we need to maybe just read Stall The whole component do keep in mind that you could go into the backend and set the permissions If that is what you would prefer so in the back and you can just go to options the back and Of the component I mean And there's two permission tab And you can see this is a whole list of permissions just for the greetings and because we install The component a fresh it's set the reading side view access to public As well as the greetings site for us access to public so that's really what we did We just Add that done automatically but you could have come in here and just change that to allowed And save and it will have chief the same thing You'll see that there is a whole lot of features here in allowing You to edit certain parts of the values for a specific groups And so all of this JCB is displaced Uno for you and ready to use Now did we have installed the component let's refresh this homepage I will see that all of these things are now applicable If we click on one of them We see it only displays that specific Greeting you can click back And then click another one and it And so it's working as expected is generating for us the links and it is Actually opening that View And displaying the value as expected Now to add an edit button Which can then edit these Items on the front end of the site I would mind you noticed we just crossed her half an hour barrier so everything we've done now Taking you half an hour to build a hollow world component which is far more advanced and superior it and Any other Homeworld component I've seen And so I think even just if we were to end here JCB is already proven to you that It is actually able to build Very Dynamic and powerful components in a very quick and short amount of time But now just to Push the boundaries even little further let's link the editing options in for this Items No you might want to have the mission or check here When The user isn't in the correct group that it wouldn't display the edit Hi Tim sorry the edit link Now If you do not know how to do that just a little heads up I can show you where to look Turn the back in the game going to the code we open the Hollywood component We go interviews Run into greetings And then we open this view HTML dot php file I will see that we are pulling a Helper class here And using the get actions method Passing reading to it as saying we want the permissions for the Greeting Now that delivers to us a An object which we then can ask Whether the user has edit rights Whether the user can create create the lead weather can say the state and so That is how we can get You know Into the permissions you can look at this Get actions Method in the front you basically go to hollar World helpers and Open the Helper class And scroll down a little And you'll get The get actions method is right here So you're passing interviews name you could even pass it the record ID because we know That you could set permissions not only the review but even brighter mmmm And so Then this helps you Actually determine the permissions and send back the results now Where was open to improving this this is what I've done so far in in Helping us getting a quick answer on permissions from anywhere in the component And so you could make use of this to determine some of the permissions for actually Being able to edit the items Yet Even if you left out Those used dump the button right on the page The controller actually has a lot of these permissions already in place and So you're shouted you until you don't have permissions to edit this item and so that's what I'll demonstrate So I'm just gonna add it all Link here To actually edit The the item Now again you might not know what that link should be And you could go back to the back end of the component To define the link So you're in the backend I'm just simply opening the templates view and then I'm opening The body File and then hear it it has the link obviously it's in the back end it Actually is related to the admin folder but in the front there and it is related to the site root So you could just grab this Snippet here To build your link Scroll down a little in the page And basically search for this variable And you'll see that we're using that edit variable Adding and ID = and then just adding the ID That's how we building the link in the backend And you could do similar in the front The add some custom PHP to the front of the site there is a PHP tab And Custom view script and it says your add custom PHP script to the head of the file so I'm just go Paste that in there Basically We now have an edit variable on the page And so in the default View area I'm just gonna Echo that edit and then again to the and ID Eco CID Around the edit Link And how this click save And then compile This component again and install And now go to the home page and refresh Now we see there is a new edit link here If we click it now It's gonna shout at us and say no you don't have permit you're not permitted to edit this item so I'm just logging here as a user That will have permissions Ok I'm not logged in I'm gonna click on this edit link again And as you can see it's opened and edit view where I can see the publish conserves the permissions And I can change William Do Gemini and save and close And it's edited that value And that's it we have Demonstrated the build of a hello world component From scratch And in just a few Clicks We have successfully set up a component with tremendous advanced features already At its fingertips Ready to go Well I hope this will be helpful to many if you're out there and Enjoy