diff --git a/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md b/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md index 70d6a5b..6d7caef 100644 --- a/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md +++ b/044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md @@ -29,8 +29,24 @@ There are two concepts which I want to mention before we start. One of it is pat * Need Joomla Website * Offline or on a Server -Having said all this, let me take you through the basic steps building one piece one another. [00:08:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) So that you would fully understand how to build a Component in JCB. It's self explanatory. You would need a Joomla website. This Joomla website would preferably be on a developing environment, which is either offline [00:08:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) or on a server. Which isn't necessarily used in production. +Having said all this, let me take you through the basic steps building one piece one another. [00:08:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) So that you would fully understand how to build a Component in JCB. It's self explanatory. You would need a Joomla website. This Joomla website would preferably be on a developing environment, which is either offline [00:08:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) or on a server which isn't necessarily used in production. This is not because JCB itself is unsafe. It is simply just more convenient. If you have it offline, you can open the code in your IDE. And since JCB has the feature to extract this customized code out of your component, and put it back into your component on compilation, [00:09:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m00s) a feature which will not be discussed during this tutorial but does exist. +### Local Environment Is Ideal +A local developing environment is most ideal for this. I know that you could with certain protocol setup a tunnel between your desktop and your live server. And still have this kind of interaction of editing code live [00:09:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) and then compiling and seeing changes. That's all good, if you're able to manage that kind of complexity, I don't need to tell you anything about how to setup an environment. What I would suggest though is that when you are busy trying to install JCB, and there are some limitations in a shared hosting environment, then I would encourage you to try and first resolve that [00:09:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m53s) or move development offline. + +### Ways To Install JCB - Download Package - URL From GitHub - Install From The Web + +When you go to Joomla Website ready, you would login. Having logged in you would first need to install JCB. So I'm simply going to go to manage and install. There are many ways for you to install JCB. You could download the package, you can grab the URL from GitHub, you could also install it [00:10:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m20s) from the web. It is listed with Joomla. Now if you type in JCB and search, it brings up JCB on the page. It would not necessarily always do that. + +### JCB One Of The Listed Developing Tools + +I've recently discovered, if I type in Component Builder which is it's name in the listing, [00:10:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) it doesn't even come up. Couldn't understand how that happens. If you do not find a Component in the search, this 'Component Builder' is the Component. Then you could go down to an area called 'Tools', and then 'Developing Tools'. [00:11:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) JCB is one of the listed Developing Tools. Here it is only listed as a Component Builder. You can click on that, and simply click install. This(install) will then grab a URL from GitHub. This is the same URL you could have just used. As you can see that would have done the same thing. [00:11:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m33s) We can use the Joomla Installer, and simply click install. This would depend on your own network on how fast this takes it could take a while. This is quite a big file, and it's part of the places where there might be a limitation if used outside of a local developing environment. [00:11:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) + +### Need To Understand and Setup Components: Field Types, Fields, Views + +We've got JCB installed. There's just a few small things that we need to lay down as foundation stones in understanding how most Joomla Components are constructed. We're going to build a Component called Hello World. The way to setup a component is you need to first understand Field Types. [00:12:31](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m31s) Then you need to setup the Fields you'll need, and then you need to setup the Views that you want in your Component. + +### Views Mapped Back To Database - Admin Views ??? -This is not because JCB itself is unsafe. It is simply just more convenient. If you have it offline, you can open the code in your IDE. And since JCB has the feature to extract this customized code out of your component, and put it back into your component on compilation, [00:09:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m00s) a feature which will not be discussed during this tutorial What does exist A local developing environment is most ideal for this I know that you could with Certain Yeah protocol Set up a Tunnel between your desktop and Your live server And still have this kind of interaction of editing code live [00:09:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) And then compiling and seeing changes And that's all good because if you're able to manage that kind of complexity I don't need to tell you anything about how to setup an environment But what I would suggest though Is that when you are busy trying to install JCB And there is Some limitations in a shared hosting environment then I would Encourage you to try and first resolve that [00:09:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m53s) or move development offline So When you go to Joomla website ready obviously you would login Having logged in you would first need to install JCB So I'm simply gonna go to manage and install There are many ways for you to install JCB you could download the package you can grab the URL From GitHub You could also Install it [00:10:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m20s) From the web It is listed with Joomla Now if you type in JCB and search It actually Brings up JCB here But It would not necessarily always do that I've recently discovered If I type in Component builder which is actually it's name in the listing [00:10:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m42s) It doesn't even come up Which to me was wow couldn't understand how that happens If you do not find a component in the search This is the component Then you could go down to An area called tools And then Developing tools [00:11:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) JCB is one of the listed developing tools Here it is only listed as a component Builder So you can click on that And simply click Install This will then grab a URL from GitHub This is the same URL You could have just used here As you can see That would have done the same thing [00:11:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m33s) But we can use the Joomla Installer And simply click install This would depend on your own network on how fast this takes it could take a while This is quite a big file And it's part of the places where there might be a limitation If used Outside of a local developing environment [00:11:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) Ok we've got JCB installed Now let's open it There's just a few small things that we need to lay down as foundation stones In understanding how a component Basically most Joomla components Are constructed We're Gonna Build A component called hello world The way to setup a component Is you need to first understand field types [00:12:31](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m31s) Then you need to set up the fields you'll need And then you need to set up the views That you want in your component These views also map Back to the database These are what we call admin views So your admin views have fields and these are usually your Database columns So these are your database tables [00:12:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m59s) these are your database columns And these are your field types so you got a text field radio List Multiple selection Checkbox a date field You got many types of fields But each field independently Is linked to a type But also there are some database settings within each field [00:13:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m24s) As it gets linked into the admin View Since the fields Form the columns of the tables of the admin views This is how you set up a component Once you set up a component Then You basically are done with what we would call the back end The back end of the component is what always needed to be done First Well you could [00:13:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m49s) Argue differently But the point is within JCB you'd first build the back end And then only add in the front end And the front-end usually Doesn't have its own database it actually pulls it's data From the backend Database Now Having explained some of that Let's show you this in action So in JCB [00:14:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m15s) It already ships with quite a lot of field types So we open the field types area You'll see that there are many field types already setup JCB is built in a way that it can be extended Like subform Is a new field type which was recently introduced into Joomla community It also replaces an old field type Called repeatable fields Repeatable fields is a field type I would encourage you not to use anymore Since most of you might know JCB be used repeatable feels quite excessively [00:14:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m49s) And yet due to the fact that Joomla is now discontinuing this field type We had to Migrate all of our repeatable Fields to subform Fields and it was an amazing Huge Process But yes part of the reason why I'm redoing the hello world tutorial It's because of the fact that subforms are now being used all across JCB And there's been a little few changes And how things are implemented So here you can see all the sub this field types that I've been [00:15:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m23s) Set up in JCB already You could always add new field types So as JCB you know continues and Joomla continues to Evolve and become better at what it does So we will be adding more field types And whenever we would be Confronted by field type That needs a little bit of extra tweaking within the compiler I would hope to be ahead of all of you most of the time in adding that field [00:15:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m54s) type in there if it needs that Most of the time field types do not need Extra help It's only field types like subform that actually does But field types like URL and Text and tel and Sequel tag it needed some extra help But most of these don't Because basically the way a field type works Is that it really helps you set up what we know as the properties [00:16:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m24s) So The property has a name It has a default value It is either adjustable not adjustable It's mandatory or mandatory translatable and then you can give it a little description So that when you use the field type You can always come back to this This information can be gathered from going through the Joomla core Libraries [00:16:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m49s) Because these field types really are only mapping Joomla's own Implementation of these field types So if we were to open a field type that's already been created like the text field You see that these properties already there and in place so the field Type Is text The name is any text When we say that the type is text Then this is not adjustable So [00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) We need this unticked if it is adjustable we can tick it It is most certainly Mandatory And so That is how you set up field types I'm not gonna go into this too deep Since there is extra tutorials on how to do field types I just wanted to give you a brief overview Or the fact that the most of the field types already are created and ready for you to use So you'd most of the time simply start with fields There are quite a few Fields already here But I'm gonna go on as they are not there [00:17:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m52s) And I'm gonna create Basically two or three Fields that we can use in our hello world component So First field I'm gonna create Click on new Then I'm gonna select Text as my field type and you see That information in the field type You know Mandatory in everything all this information here [00:18:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m19s) It is actually brought in by Ajax From the field type So if I was to click on this button here Just to it give you a quick demonstration And I was to Just say change this to TT Like three of them and save and close And then go back to fields And click new Then select [00:18:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m53s) Text field again You'll see that now it added three t's in there Because this whole structure is being built From the field types default settings Which we just looked at So I'm gonna go change that back quickly I maybe just put a little Something in here the description For you to see [00:19:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) What I mean So creating a field we haven't really started with it I've just been demonstrating the field type but okay Ok I'm gonna take text again And I you see those o's are showing up here So this means that this whole area Is actually dynamically populated from the values that are put up in the field type And so is this XML structure here Usually Populates with the demo Or default values that you add it [00:19:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m57s) When you created the field type The JCB ships with most field types or ready in place it appears like this is something we have done But really it's something that you can extend and even change So for example if you know that the text field type has more properties than we have setup You can go in and add more to it You can simply click on this you know edit here or before creating a field You can go to the field types And open the text area Sorry the Text field type [00:20:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) And Here just click The green button and add more Properties And then those properties will dynamically also appear Within The area where you create the fields So this again is just Wanting to show you The JCB is tried it's very best To be scalable [00:20:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m57s) And basically customizable To your Own desires So that it isn't just Blocked in To what we have set hard into code But it is movable and therefore scalable So having Looked at Field types I think enough [00:21:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m18s) Let's create our first field So it's gonna be a text field we gonna call it greetings So I'm gonna update the label with greetings This is what Will be visible In the database Greetings Singular is gonna be the database name I'm gonna leave most of the others just default Let's see [00:21:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m48s) Autocomplete is on Validation You know We can leave all of those It doesn't really matter let's just maybe change the hint Ok And then I also gonna just remove the description Definitely take out the default text otherwise it will always appear And now in regards to the database [00:22:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m22s) That is what these features are all about Since text Fields can differ We didn't come Out and say well all of them gonna be this size We left it up to you to decide What kind of text field of this is gonna be And really it's all up to you Obviously that would mean that you would need to know a little bit more about MySQL and databases To really effectively use this [00:22:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m49s) Most of the time it is available on Google so if you do not know What would be the best for A text field or a date field You can Google that Or you could simply go and look at Joomla's own implementation It's got an article manager And you can go into its XML Database And look at What [00:23:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m14s) Database Values was used and just use the same Whatever be the case You should be able to actually navigate through this Without much problems Since that is what is would be required You need to have perseverance you need to You know Be curious [00:23:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m36s) dig through things And doing that you will eventually succeed Because these values are all movable That means that setting them wrong could break things And That's why I always encourage those who gonna use JCB To really do a little bit of homework And to prepare themselves To get involved in programming [00:24:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m00s) More effectively That would only Be beneficial to all of us I suppose Because good programmers makes good programs And makes the web a safer place So Having created our first field I think I'm gonna just reuse name And maybe Also description [00:24:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m23s) Those are part of the demo Component but since Fields can be linked into any admin view and therefore belong To any component It doesn't bother the fact that it is linked to the demo component already What is though true is that if you change it It'll actually affect both Components Okay so Having created our field types [00:24:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m49s) And also now a field Let's create an admin View admin views as I already explained Is really the back end of your component And So you'd need to do some thinking and maybe draw some up there's a whole A lot of tutorials around the web about object orientated development Which talks about use cases and All kinds of discussions and trying to sort of Come up with a [00:25:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m22s) Perspective of what do you wanna build how should it work what should be where what should have its own classes What should have it own tables where we gonna put what And really that kind of work you need to do before coming to JCB JCB Isn't really gonna help you with that And so Once you've got all that planned Then you would come here create your Fields create your admin views which basically is your tables And then link them to a component And once you've done that [00:25:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m53s) You've basically laid the foundation of your application And you can start working on what will make it unique And special which is the front end So first Admin View This is the name is really just for you to identify The View If there be more than one view with the name greetings So let's say you've Built quite a few components that deals with hello world [00:26:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m21s) And now you got three or four different Variations of greetings Now you might want to just say ok this is the first One And By doing that It's identifiable within the drop down list across your application of JCB You'll see that when we would later select the greeting that the system name is used in the drop down list So we're gonna have a single record and a list record Single record is also what we understand as the edit View [00:26:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m57s) So that's when you are looking at one record And you are editing that record In the admin area that's the single record That's also What will be used when you Actually tweak JCB To add an edit option To the site area of your Website Since JCB can do that for you [00:27:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m22s) On the fly This single record Would also affect The front end of your component in that case Which we will show and demonstrate As we go along So for now I'm just gonna call this Greeting and the list record greetings [00:27:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m42s) Obviously we want to have the ability to read and write to this table Now when we say this is a read only It means that the data is in this actual admin area is not gonna be able to be changed Via Joomla Unless obviously you've added some JavaScript and some Other nice Conventions around your component that sort of creates data for that area Dynamically as people use the component Which that case you might use this feature but I must tell you I have hardly ever used it I'm not even sure why I added it but it's there and I know maybe some of you might find it useful [00:28:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m23s) This basically turns all the fields in the area as read only And when you try and change them they never get But you know submitted to the database So we would by Default always leave it to read and write Then you give it a short description We'll go to settings and we'll see That Sorry Fields and conditions We'll see that this button to create admin field conditions will show once the admin view is saved for the first time [00:28:56](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m56s) So you cannot add Fields to this admin view if you haven't saved it That is one of the changes that now came in from us moving away from repeatable Fields to subform fields the admin view Is it table on its own And it's relationship with the fields is also a table on its own So at this stage Unfortunately you need to first not click save and close but just save once So that it basically creates this admin view in the database And now If you go to fields [00:29:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m30s) And conditions you'll be able to link Fields and create conditions We are not gonna be creating conditions since we are basically illustrating or demonstrating a very basic component We're just gonna create A linked fields Linked fields are basically the fields that we created previously So we will click on create It's gonna ask us to be sure that all our work has been saved in the admin View Because if it isn't and we click okay It will be lost So make sure your work is saved before you clicking okay [00:30:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m06s) This will now open an area where you can link Fields to your admin View This looks very similar to the pop-up we had with repeatable Fields except That it's basically it's own View now So if we click on this green Button here It opens An area where when I select The fields we wanna use So we gonna have a name field And [00:30:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m34s) That's a text field We want it to show in the admin list view We want it to show first we gonna have it behave as a title we want it sortable searchable Not filterable because then every name would be a filter that's too much But definitely linkable this means if someone Clicks on the name it will open the greeting so You can edit it Now We only have two tabs at this stage I'm not gonna go into great detail about the tabs [00:31:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m07s) This Time Round If you want to know more please go through the tutorials and look up Tabs to to see more on this subject I'm gonna let it be In the left In the tab And in the tab I want it to be the first item I'm not gonna add any permissions to this But there is an editing permission available at this stage If you want it to [00:31:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m33s) That would create permissions around this Field Which you can tweak who can edit it and who can't You can also control this from a global view perspective Or on a field level These are some of the hidden advantages the JCB has In Handling permissions across your component quite easily Now The Next Field you wanna add is greetings We want the greetings to also be in the listview [00:32:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) And we want it to be second Want it to be searchable Sortable and searchable And it doesn't need to be a link We want it to be on the right Hand in the tab and we wanted to be first And sure that's basically All We Need And they will click save and close This will now basically link those Fields to this admin view We now again open the fields and conditions [00:32:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m33s) We will see that those fields are here And with all the variations that we have selected Ready-to-use Ok so having our admin view setup We can actually now go and create our component So we can either click save and close Or we can simply click close We haven't made any changes in this view since we've come back This area is already been saved [00:32:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m59s) So we could click close But clicking save and close it's always the safe choice I suppose So Now that are admin view is in place Let's go create the component Click new We're gonna give our component a system name Since this is the second hello world tutorial we'll call it version 2 Now we also gonna give it a name which Is the same as the first one [00:33:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m35s) Hello world We're gonna give it a code Name of hello world And is it's version 2 Am I gonna explain too much about all these other switches Basically just that we will need to add company names Author name email website And a short description Now that we have those in place The next thing to do would be to add an admin View [00:34:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m08s) Now since the admin view can only be added once the component's been saved For the first time Let's save it Great our component has been saved Opening the admin view we now can link Admin views to this component There are two places to do this Under settings You can click on component admin View you can click on this one here [00:34:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m40s) Or you could in the admin views click on create Both these buttons take you to the same place This used to be The Old Way In how people would add admin views to their component And that's why we left it here But within the new JCB after our transition away from repeatable fields We actually can handle all of it within the admin tab admin view tab Just click create We are sure we have saved all our work so we can click ok Again we are faced with something that looks very similar to when we were linking the fields [00:35:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m18s) except that now We are dealing with the admin view Linking admin views to this component So I'm gonna click on this plus button here To open our first line We basically just wanna Link The greeting We gonna leave the default icon Of Joomla [00:35:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m39s) But there are a whole list of icons available These icons Are icon moons which are the Joomla default icon That are part of the Joomla backend And front-end I suppose And you can search this Just Search that phrase I suppose And you will find on Joomla's website [00:36:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m04s) A whole Picture map of all these icons Then I most certainly want this view to be Part of the main menu I want an add record On the dashboard I want a list That means clicking on something and it shows us the list of greetings I want it in the submenu The auto checking feature Basically [00:36:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m27s) Components get checked out when somebody Not components items So when you Create a record That are stored in the database and someone else comes and wants to edit that record You wanna prevent people from working on the same record at the same time Since one of them is gonna lose their work So Joomla has this feature by which You can check out an item And then when someone else tries to open it it tells them hey sorry it's not been it's not available it's [00:36:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m58s) Checked out The problem with seeing though is that this check out Can be problematic Because people don't save They just open it maybe to have a look at it And then instead of clicking cancel or close They just click back And the item doesn't get checked back into the database So the auto check in feature is a nice add-on that JCB has set place [00:37:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m25s) Which basically you can set that an item Which are checked out longer than a day Is obviously one that was missed And should be checked in automatically This Is one of the reasons why I developed JCB because I have all these little tweaks that I Want in all my views but I Know that [00:37:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m46s) If Joomla changes something and I need to change this little tweak Going to every single view is like so cumbersome So here it simply click whether you would like this And if Joomla makes a change that we need to know adapt this feature we just change it in the compiler and it Immediately you know compiles correctly for all the components mapped in it The other feature which I think is also great is this keeping of History If I want to keep track of all the changes made to any item of greeting Then I just need to tick this Keep history And JCB will dynamically add all the needed structures so the Joomla's [00:38:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m30s) Integrated history component will work alongside your third-party component And keep track of every item and it's changes So that is just a tick box and JCB does the work The has metadata basically adds The metadata Fields to the view So you don't need to add them it gets added just by ticking this box Then also does this field view have access public Special or you know registered All these access levels [00:39:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) Do you want to implement these levels of access on this view usually you would use this If you want the view to be actually be editable on the front end of the site Because then you will use the access To control some of these I'll show you more of that as we go along So I'll just take this as yes I wanted to have an import function And like we said We want to add a site edit and create view for this admin View Yes [00:39:38](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m38s) And then We want it to be first So this admin view basically is gonna have all the features that an admin view can have By Default in JCB And as you would realise when we start demonstrating it although it's as easy as ticking this box The code that JCB is gonna write to do this implementation Is quite stable And yet Dynamic that as Joomla evolves and changes We can tweak these codes [00:40:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m09s) In the compiler and make sure that it remains stable this way Good now save and close Now that we have linked this admin view to the component We can all go to admin views and we'll see this admin view We'll even see the icon we can click on this little pencil here and this will actually take us to the admin View Obviously again making sure that all your work is being saved in this area Click okay if it is And you'll see that it opens the admin view where we linked The fields [00:40:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m48s) And we can actually how work in the admin view From the component Now there are areas in the admin view I didn't demonstrate like the permissions the tabs the link to views And I'm not going to going to do much of that I'm just gonna add Some permissions Because I want to demonstrate The permissionable structure Regarding the front in management of editing these items I'm just gonna use the core there is the option of using what is known as the view edit [00:41:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m22s) Instead of core edit then it means it's relationship is just for this view I want it to be related to the Core Which means that it's not gonna be only related to this view But whatever I change in the Core will affect this view For more explanation on the permissions there is this tutorial Which is available in the description And you can go watch this tutorial And also Maybe do some changes compile the component And look at the code [00:41:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m54s) Look at the code and look at the code that's all I can say for most questions being asked because the code Really tells you what has been done There is many ways for you to learn How JCB does things By making changes And then compiling your component and looking at what changed Usually using something like git will be very useful in Discovering the changes There's also a way for you to know where in the compiler specific code is being created Which I will show you as we continue So since we've made changes I'll simply click on save and close [00:42:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m36s) And this will take us back to the component So being back in the component We'll see that Everything is still the way we left it And quite a few things around The admin view which I'm not gonna go into depth During this tutorial I would encourage you to watch the tutorials that are already online For actual explanation on all these features [00:43:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m04s) But to demonstrating a hello world component we have done quite enough Regarding the back end So all that now remains It's basically to compile so we'll click save and close And we'll go to the compiler Select our component And compile Great That means we've just written 9000 lines of code [00:43:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m36s) created 51 folders in 122 Files And if we were to have manually Written this without any boilerplate tool or You know wire script That could help us write all the classes and tables and stuff And it took us 5 seconds to write one line It would have taken us 25 Hours Or about three 8 hour days [00:44:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m07s) That's a long it would have taken you to do this manually So just right there JCB's already saved you quite a lot of time Now the component can be installed by Simply clicking this button Or Grabbing The URL and going to the Normal installer Because it has actually Compiled a Shippable [00:44:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m33s) Joomla component package Which can be installed on any Joomla component Sorry any Joomla website Now one thing I didn't do Is I didn't actually select A Component image so when we selected you see there is no image showing as there is with this one So I think I wanna quickly go back I'm gonna clear the temporary folder and just go select [00:45:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m01s) At least the demo components image as our hello world component So in the component there is this area to select an image I'm gonna click select And I've selected The demo components package It says that we have something so I'm gonna save and close again And now go back to the compiler And compile it again Now I'm gonna click on install If I now go here we'll see that there is now a new component in this Joomla website And I'm gonna open in a new tab [00:45:45](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m45s) And there we go we got our component installed It has a greetings tab and a add greetings tab We also have not selected images for those So let's quickly do that Gonna go back to the admin views And then the greetings I'm gonna click On greetings First As an admin View And here you see there is a place for icons and the add icon [00:46:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m13s) I'm gonna select So I've selected This little bucket as the icon for greetings I'm gonna just add one for For adding a greeting with a little Green Plus Now we got it to icons I'm gonna click save and close so now I've got greetings [00:46:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m39s) Set up And I'm gonna go and compile this again That's usually how things go we go make a change We come back to the compiler to compile it install it And go look at the component And Also When it getsa little bit more advanced We not only go and look at the component in Joomla [00:47:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m03s) But we also go and look at the code So there we got it the two icons are in place if I click add on greeting We see that there's the name there's the greeting And there's also all these other Fields added by Default So the created and the metadata and the permissions Are all in place That is How you would set up a basic Hello world component Go to the options [00:47:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m36s) Will see that it has this Check in timer And you can change it to 5 hours What I explained you know the checks in the items We also have The history version enabled And set to remember 10 versions of any item created As a greeting We also have the permissional structure in place Which includes the greeting [00:48:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m04s) Access greetings batch dashboard and so forth Which are all The switches related to the greetings area So now that we have the admin area basically done Let's continue to The front-end I'm gonna illustrate to you on the front-end how to view greetings That were created how to edit greetings that were created and how to add more Greetings from the front end to this component Let's close out of the components edit area the first thing we need to do We need to create what is known as a dynamic get there 2 ways to get to the dynamic get Area one is to click on this add Dynamic get [00:49:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) The others would be basically in the sub menu to go to Dynamic get and then Click new we're gonna need two Dynamic gets we gonna need one to basically return a list of greetings And then we'll need one to return one greeting because one the one Dynamic get is gonna Return for us all the greetings that are available and published the second one is when we click on one of those greetings it should open only that greeting So we gonna use the name as who is being greeted and then the greeting will Will only show when we actually click on the name and then show that individual's Greeting so that's part of how we think about this at this stage then In this area where we can see the full greeting we are gonna add and edit button [00:50:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m05s) And in the list area we are gonna add a create button but these create and Edit buttons are gonna be controlled by the permissional structure which JCB Puts into your component by you just saying that it should be there so setting up a Dynamic get is quite easy you first know that ok I'm gonna use a back end view Which is related to my component and then I'm gonna select that back end view You see it says greetings first so like I said before with a system name What is used in the dropdowns so here we select greetings (First) This one is going to bring back a list query we don't want any pagination And I really don't need all of this we don't need [00:50:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) The asset ID We can leave the created by And the created We can take out the modified the version we can also leave The hits And the ordering that's fine now The greeting we most certainly don't need in a list we only need the name now Ok let's give it a name that we can sort of identify when we start setting up the site view We call this List [00:51:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m35s) Greetings And then in brackets Name only So we know ok this is what it is going to save that You didn't need to save it we could have just gone right into tweaking the data without saving What the data tweak gives us is it gives us a little bit of control on the writing The JCB will do regarding this query so for example we want it to be Before did Now the ordering is called ordering a.ordering [00:52:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m13s) So we want to order it Ascending by the order set in the database The other filter we want to add Is we wanna make sure That it only returns published items So in the "Where" area replace published And we say equal 1 so only published values be returned there are some other features Around the tweak area which I suppose goes beyond just in the normal Hello World Component [00:52:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m52s) But there are tutorials about this on Joomla sorry on YouTube in that playlist That I've already referred to quite a few times, then there's a joint area which we not gonna use But It is a very nice way of linking to other component tables that I've got any kind of relationship that needs to be in a relationship between the main table and the join table but like I said When I'm gonna go into this we are simply going to do the most basic which is what we've got here And we gonna say save a new so we can do and another one The next one is this gonna be a greeting Just simple greeting we wanted to be one item again we gonna do a back end view [00:53:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m46s) Again from the greetings list This time we really Want the name and a greeting we can still use the published we don't need to modify By We can leave those we don't need ordering we could have left out the head In the previous one we set up now let's do a little tweak to make sure that it Doesn't allow someone to grab An unpublished value By just adding an ID in the URL or something ok so that's ok Got this [00:54:26](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m26s) Oh yes Now we need to add a filter We gonna use the ID Basically passing the ID via the URL So the state will be ID and It is gonna be a.id equals so that's really what makes the item load Is this filter type and there are many ways to load items And yes this is a little bit more complex than you might wanted to be but believe me It gives you freedom And ability to build quite amazing things [00:55:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m06s) And so Please go and watch the tutorial on Dynamic get on GitHub There is actually a place I just show you Called Wiki And in the Wiki there is links to all the different tutorials And here is the dynamicGet And you should really watch all of that Even the second one And yeah well my encouragement is to really watch everything I have often seen people ask question [00:55:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m35s) In the issue area Which are dealt with in the tutorials I'm sorry We all have a lot of things to do and so if I don't answer this questions but simply point you to the tutorial I hope you understand Ok so we've got in the dynamicGet all the value selected that we want and Also how to limit it The tweak is in place And the limiting factors We don't need to join it to any other tables,we simply going to [00:56:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m09s) Return these values Let me see We could add the username values if we wanted So we wanted to show who created this we could say created by go to joint Click on the joint a database tables not view because we want to use The user Table And we basically want A single [00:56:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m46s) Item returned And here it will be Created by And In the joint field it will be b.id And we basically want, let's see The username that's it We don't need the ID, we already got that so just the username And we could just say [00:57:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m19s) Let's call it Creator Or Greeted Greeted by, ok so he's the one sending the greeting save and close So now we've got two Dynamic gets a list greeting and a greeting this is what you need to build first basically Again starting at the database looking at what is the data I want [00:57:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m54s) On the page What do I want to show the people looking at the page And by that determining really what the data is you going to grab from the database And giving it system names That are Identifiable because now The next thing to do is to create a site View now there is such a thing as layouts and templates That all can work together with site views I'm not gonna illustrate that now [00:58:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m24s) or demonstrate it, basically if you want to know more about that look at the tutorials On YouTube I'm just simply going to build Two site views And yeah let's go ahead and do that Ok, the first site view we gonna call Greetings And we gonna give it a name called Greetings And a code name Greetings [00:58:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m58s) Now the code name is significant because you don't want to Clash with admin views that you've already created That are gonna be Edit views on the front So since the listview is not being Placed on the front of your component only the edit view that means edit views name Name is greeting So we can't set a code Name For the front called greeting otherwise they will actually you know conflict So I'm just gonna use greeting and for the Single I'm gonna use greet [00:59:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m34s) Ok so Just give you a little explination on why I'm doing things the way I'm doing it So a little description here I'm gonna just Place a little Heading And adding it like that will actually mean That this little string will get added to your language file So that's how you create language strings it's just adding the snippet Oh or even just this anywhere in JCB will actually create a language string [01:00:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m28s) Ok, now over here We are going to select the list greeting and the reason why there are two of these Is it the one is what we will act upon in the compilation the other one is just for you to look So if you end up Let's say in here and click save It will not be playing any role whatsoever in the compilation It will play a role when you export a JCB package but that's a whole different subject and not going to deal with that, so good practice would be that these two actually are the same The main and the Dynamic Get but since you can add Custom Gets We don't have any Custom Gets setup so you can't select any, but you can add more than just [01:01:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m17s) Your normal main gate to a site View You can add the main Get and then a bunch of custom gets which brings a whole ton of data to the Page from different variations from relationships which I know it's a little bit Beyond the Hello World Component But it is there and it actually does work very well it's just that you will need to do some home work in tutorials and so forth but we want the list greeting and so This list greeting gives us a few Snippets now Do know that the Snippets are really not always accurate because it's very difficult for me to always know exactly how the implementation is gonna work out so I'm giving you a snippet which is how I expect you to use the data but you can adjust that and this is where your knowledge of PHP will really [01:02:10](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m10s) come into play you should know that this and that little arrow Items is because we are working with an object and the you know what is it Mean and how to use an object and how to interact with an object How to parse over it, how to grab its values, how to update its values, all this is part of your own background that you need to bring to JCB. JCB is not gonna At this stage crank out customized site views the way it does the admin views because my idea was it when it comes to site views I always wanna do Something different and I just want to have the ease of getting all the data on the page and then be creative And so I haven't spent much time to make this as automatic as I want to set up of the back end and the admin views because this is really what makes your component different from every other [01:03:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m15s) Component out there and here we want to encourage you to really Yes do you do a lot of preparation and thinking about data Structures in relationships because your Dynamic get can grab from so many data places And bring all that data to you in a nice object which you can then parse and display With a lot of permissional switches as I will show you in a moment so that is giving you little backdrop on why the dynamic get and the site view even the custom admin view , it's relationship and why it is like that ok so Basically looping through those items is this these two strings is all we need and then I could grab a listview let's see We are busy working on adding the [01:04:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m14s) Bootstrap library to JCB At the moment with basically got UI kit version 2 Linked to JCB And I've selected the list option for this Uikit is a library developed by YOOtheme If you do not know UiKit I would encourage you to actually go Google that And Then [01:04:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m46s) You'll see it's quite a nice library to use we have voted that Bootstrap is the better one And so we are migrating to Bootstrap But will still support UiKit as much as we can so for now just to get things going We simply gonna loop over the items show the name nothing is yet Clickable nothing is editable is just to get you know you introduced to using site Views Save and close Now we gonna go back to our component And we are gonna add the site view to it You might ask why don't we just add the component to the site view when we create the site view [01:05:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m34s) And that was a idea that You know I did play with but because of database relationships and all kinds of Reasons I felt that the better approach would be to link site views At admin At the component area instead of at the site area This gives us the option to use site views quite easily with in other components That was really the idea behind it We might rethink this and we might reshuffle this in the future I mean this is the first time I build Such a component called JCB and who knows what happens if we start refactoring it and a far more Advancement program is get involved it might become even far better than it is now [01:06:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m20s) Now but this is how it works at the moment So you go to site views And you click create link site views And then you basically select that greeting site view you say yes I want to have an admin menu sorry be able to add a menu to the front of my website with this view I want this view to use Metadata this is going to be this component default View I wanted to control Access will look at That again but I want that access to that it's default be public so this is Basically again making use of all the options and save and close So now if we go back to compiling our component [01:07:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m19s) There's no changes being done to the database I need to maybe just give you a heads up here if you're Adding new tables JCB is Build to actually know that and add the tables to a Sequel update which when you update the component it automatically updates the data base But it's still important for you to actually check that it does this For there could be a reason that it thinks that it's not necessary Yet I tried to Most I've tried to build enough places things in place so that it will actually pick up that you've add it [01:08:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m05s) either a field or a new View to the component and that the component now needs to increment a version And Release a table update but sometimes that is not happening and And then even if you update your component the database is not being updated Necessarily So that's just something you need to keep your finger on make sure that that happens for most part JCB will take care of that And since now and this upgrade we have only added a front end we haven't touch the data base Everything about that is just the way it was before so we can without any concerns just compile And [01:08:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m49s) Re-install the component And then go and add it To the front So we can sort a look at what has happened Ok Now just a heads up When you add a front end site view and you said that it's default should be public But if it's not the first time you installed the component then that default cannot be set to the database because It's a default that only gets set the first time the component gets installed, I don't wanna go into all All the technical reasons for that but you could go into the app the components script file and you can search through it [01:09:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m30s) To see what I mean because it's actually a function that gets added to the script file and only gets implemented with on the first installation of the component now that's important then if you do not Even follow what I was saying now and why I said it then I hope you'll get to To understand it as I try and demonstrate these things Before you can add the greetings to a site admin sorry to a site menu let's just at least add a few greetings Ok So we've got at least four greetings in place and now we can actually add That list View to an Front and site view [01:10:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m21s) So we go to menus And Go to main menu Select menu type click Hello World greetings that was the previous component Ok Everything else looks good So we've got Greeting set as the home Of this website And we gonna click save and close [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There we go But got home and Hello World greetings That should mean that if we click on This Preview The front end of the site We should see the greetings It's gotta say the page isn't redirecting properly And the reason is like I explained We set the front side view [01:11:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m20s) That it should have access control Which means You can control who sees this page not that it's just open to everyone but But you can say only this group can see it all only that group can see it But since we haven't set that And by Default Doesn't allow anyone Now we said that it's by Default should be public but like I explained But I Gave you that heads Up [01:11:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m49s) It only sets that default the first time the component is installed so it is the way you should ship the Component If you only add that feature later You need to do custom scripting in the script area Which is the beyond Hello World component tutorial To update a database and ensure that this view is actually public The manual way to do this is basically to go to the Hello World component Click on options Then go to permissions Scroll down [01:12:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m25s) To the area where you see greetings site access Select the public group And change This site access To allow This will now ensure that the site area is actually Available To the public So having refreshed the Public area we know see James Williams Sarah and Koos [01:12:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m54s) All of them loading As expected Ok now Let's Add a Link to James so that when you click it you actually see the greeting that James should receive So we go back to the site views and we open the greetings Now we wanna add a link here But there is a better way of doing a link in JCB Which really takes care of all the [01:13:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m27s) Controller issues When I go to the front end of the component then we open The model for greetings Will see that there is the get items method And in it we are basically checking Whether this item has an alias If it does have an alias and an ID It actually creates what is known as a slug And this alias And id gets combined [01:13:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m58s) Into The Slug Since we know that our greetings area does not have an alias In fact it only has an ID It will only end up with an ID in The Slug So Let's go add an alias to hour greeting There is a shortcut to the site Sorry the fields linked to an admin area it's this little icon here And we basically wanna add another field called alias [01:14:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m28s) And if you go to the fields We'll see that there Is already a field called alias So we can simply use that field So go back to the admin views And we'll click on this shortcut for Adding fields And We gonna Basically [01:14:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m52s) Click here and add an alias We gonna tell the system that this isn't alias And Now we are moving Both of these above the tabs And we are creating the alias to be second in line And the greeting We are going to Let's see Make it a full width [01:15:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m18s) The greeting We also gonna go edit the greeting In a moment So that it's no longer a text field but a text area Ok so we got name alias all of that is in place save and close Going back to fields I'm going to open the greeting And since there are some values I want to stay the same I am going to select That [01:15:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m51s) XML Definition And I'm going to copy it Then I'm gonna select Textarea Then I'm gonna paste That first XML in here We obviously have to remove it again But just so I can copy paste [01:16:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m13s) Cut the name I want to keep the same name You can't just change the type because the type up here Needs to actually correspond with the type here So just changing the type in there will not work So the label you want to keep that the same We want to add Let's see Add greetings as a description We don't want to default text [01:16:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m57s) And let's add the hint back again We Don't really need any of these other Fields so we can just remove them We don't want the filter to be set to raw Would rather use the word string Since we don't want any HTML at this stage in our greeting If you want HTML now in the greeting you can use The Save HTML I see it's not in this list but it actually does exist Usually we would use the editor instead of just a text area Anyway [01:17:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m43s) So here we go We got Our textarea replace And I'm gonna add just here Span 12 I don't know how long that's gonna still be there as a class But I think it is still there And now I think that should do it Yeah let's change this No you know what we don't need to change that Save and close [01:18:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m11s) Ok since we didn't change any of the database values with this text field We shouldn't have any issues But we did add a new text field So if we go to the comp I Compiler And we compile the components You see that a dynamically incremented the version and If we go without installing we go to the component you see that it hasn't Actually updated view because this was open so before doing anything I would Suggest reopening the view basically refresh the page [01:18:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m55s) So that the changes we also basically show So now we can go back in simply install the new changes And if we go to a Hello World we should be able to Open the Hello World and we should see the alias there and if we click save It should dynamically add a new alias now we'll have To do this for every item because the aliases are saved or created only once you saved the Item so I'm just opening all of them quickly now usually a user using your component You only gonna ship this component when you've got everything in place I hope and so they wouldn't have to do all this gymnastics to make sure that all the values are in place and if by some reason They have to you will have to help them along with some custom scripting I suppose [01:19:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m58s) Anyway So now that we got all our items set And it actually has an alias We can start working on those links There's one more place we need to make a change And that is in the dynamic Get If you remember when we set it up We didn't actually Include The alias [01:20:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m19s) So I'm gonna copy this I then just change to just another View quickly and then back to this one So that we can get the alias there So here is the alias that we want We don't need all these And we can just add that over there There we go we got the alias now also selected Save and close So [01:20:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m46s) We can check with this alias is actually being Brought to the page By Adding a little I call it production tricks So Would we'll do a little PHP dump here var dump [01:21:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h21m11s) And We just take all the items Copy Paste it in there and save Now we go back to the compiler I'm just quickly compile this again And Install Go to the homepage [01:21:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h21m44s) Refresh And now you will see that it dumps all the values on the page and then displace them So now we can look and see ok well fine There's the alias and actually created that Slug we spoke about So we got the slug for every item and that is the first step in setting up Hey Well-formed Link for Opening one of these items [01:22:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h22m13s) I don't know what Some of you might think Wow that's got a lot of things to do to get this to work But I can tell you if you wanna build components for Joomla And you wanna go outside of the box And build things that are actually unique and completely different from what other People are doing And this is really just the basics Ok so we gonna Set up a href here Around [01:22:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h22m41s) This name But we are gonna use PHP to basically take care of creating a link for us So here we are simply gonna say Echo And I'm gonna go show you where we get the name The class name for what we wanna do here I guess back in the code You see that there is In the helper class A [01:23:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m11s) File called router so you can open that And you'll see that you have what is know now called Hello World helper route And If you scroll down We don't have this stage have how yes we haven't added the the site view for the single record So there are some values missing here oh man I should have first done that Anyway I'll go do that now but we'll come back to this file And there is another file Or I should say class that works together with this class [01:23:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m48s) And it's basically these two classes with their methods That we were gonna use to actually build our link Ok so let's Create That display site view So I've removed the var dump from this view I'm just gonna save and close this I could have set save a new [01:24:12](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h24m12s) Just gonna create Another site View And we gonna call this Greet We can't call it greeting because like we said There is already a greeting in the front All greeted that one might be better We gonna Make a nice display here I'm using [01:24:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h24m40s) Panel I'm gonna copy the panel snippet and paste it in here And the title I'm gonna make The name And the content Will obviously be the greeting Now I don't want two of those So I'm gonna take out this one [01:25:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m08s) So I basically Got one greeting setup here It's not yet gonna be oh you know there's no buttons here yet to edit it But he will basically view One Greeting And it will also show you who set up the greeting And ok now we can close this So we got this greeted Site view We can help go to the admin area [01:25:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m36s) Of the Good because sorry to Joomla component area And I'm gonna click on here And Actually add a site view To the component Same way we did before Can I say I want greet I don't want it to have an add menu It must have meta [01:25:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m59s) It's not a default view I also want access there And by Default it's not public So Save and close Now we'll compile the component again Ok I've compiled and installed it If we now go back to the that file I just Opened previously this Hello World Helper route And we scroll down [01:26:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h26m32s) Will see that now has a method called greet route And you basically pass it and ID And it constructs The The URL for you Now This component view doesn't have category So it will skip this area But it's A function that I [01:26:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h26m54s) Wrote that should Be able to Basically Work for any View So You want to use this Method And this abstract class Now Those of you that are [01:27:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h27m11s) A little bit interested in how this works You'll see in the main File of the site View You'll see that the router Is actually also added as a helper class And This is basically the name of this helper class Hello World Helper route And so That's the abstract class name [01:27:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h27m39s) Going back to our site view of greetings To add our link We now know The method name So that's the method name And that's abstract class Sorry that's the class name now let's get the method name So we go back to Scroll down That's the method name so we can [01:28:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h28m05s) Just copy it It obviously Needs to Be corresponding to the view we want to open And we wanna give it The Slug so it's gonna be a item Slug But that's not the only function That we want to call here there is another one I mentioned [01:28:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h28m40s) Which works alongside this and it's called the JRoute Function Actually class I should say So we would add the JRoute around this First method class And That would basically Add the Other values to the URL [01:29:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m01s) That is required Ok so we've got our own helper class of a component We give it The Slug Which then gives it to the JRouter Which then Echos out The link To open this item Great [01:29:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m20s) Now let's save this and compile again To see it in action We go to the front and Reload the page And when we click on one of these says not authorised To view greet That means This specific group Are not allowed to look at this What are ways to prevent the link from showing up in the first place [01:29:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m51s) But this is you for some reason you didn't actually put that custom script in place You see You can actually see how the backend generates some of this So if I go into the code And we go to the admin area Of The Hello World component And we open the model [01:30:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h30m19s) And we opened greetings No no no it sorry not the model Actually the view and then greetings And we open the body And we open the view data HTML You'll see that it is grabbing Some permissions to know whether it should show certain buttons And then here Is again setting up some permissions To see whether [01:30:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h30m48s) You are allowed To actually Edit Here it is To actually edited the The greeting And if you're not allowed to edit it It just Echoes the name You see it doesn't show you the link So this area here Is really a demonstration of what you wanna do in the front [01:31:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m11s) You don't wanna always show the link To the item unless The person Who is actually viewing the site Is in the correct group Of the site To be able to actually View The item Now I'm not gonna spend more time on this Part because we wanna also do an editing concept [01:31:31](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m31s) Which is really More interesting and what I would rather spend time on So here I'm just gonna go back into the admin View In the admin area And just change the permissions that the actual public could still open this view for now So in the backend I go to options of the Hello World component Permissions Scroll down Again I'll see there is a new one called greet [01:31:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m58s) Change this to allowed for the public group And save and close out of there Now I forgot back to the front And click on This link It actually opens it And it gives us the name James gives us the welcome welcome to JCB And the greetings were set by the Superuser OK so it actually loads it as we expected You can also see in the [01:32:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h32m27s) URL this demo site of mine isn't fully Search engine friendly setup But it already generates that this is a greet To James And so And the name James appears here because of the Slug The Slug is used to generate the search engine optimisation here If we didn't have an alias it would have given you one or two Depending on the item ID Ok so [01:32:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h32m58s) That just gives you a quick demonstration Of how to set up A front-end That actually can open specific items Now The Next Step Is to actually make these items editable Now like I explain to you In the admin area we're ready doing some of this So I'm gonna just basically copy and paste most of the code From the admin area [01:33:26](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h33m26s) And I would encourage you to do the same Unless you know enough that you can just do it without looking at how JCB did it So I'm gonna copy The string And then I'm going to also Copy this one These few lines And then I'm also gonna use some of these I realize by looking at this first area that the Checkout And [01:34:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h34m05s) This Checkout value Needs to be set on the page I also need to make sure about this value Because We need to check the users authority On the page so we need to check whether the user is set On the page So We can go and do that and look at some code I'm gonna move some of this code [01:34:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h34m27s) And then we'll go to the front end of the code area I want to add the option to edit the item In both the list as well as the Single View So I'm gonna do it in the list view first and that I'll demonstrate step-by-step And then when we go to the Single View I'm just gonna place the code in place I'm not gonna explain to much because it's basically the same So here in the site view Of the list area I'm going to PHP and I'm going to Custom view script It says add PHP script to the head of the file [01:35:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m05s) So I'm gonna paste This link in here and we see that it basically Has this view Greetings And the task is greeting Edit So that is the task And it's gonna be available in the edit Variable Ok so that's the first part of the code we want up on the page [01:35:29](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m29s) Now for the rest of it We go back to the Admin view again The backend And we see wither we need to grab These as well So Before grabbing them Let's open the corresponding site view so we can look at some of the code Ok so Here is the greetings [01:35:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m55s) I'm gonna open this view HTML And we'll see that the user is already being loaded onto the page so we've really got the user That's great This is the items Ok let's look at this It is always is good for you to actually go and look at the code The JCB is writing seeing the code Is what makes you familiar with how things work And also helps you to detect when something doesn't work Why [01:36:29](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h36m29s) And how to fix it Since we know that the user is on the page and we go to the site the admin area This area We see that it's accessing the user in the same way Using this As an object User And ask him whether it has authority On the core [01:36:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h36m48s) managed To check in And then also it Basically checks And gets the check out user Details And We'll see why in a moment But we don't have the check out user on the page So [01:37:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h37m06s) What we gonna do it's we gonna quickly Also get those values by going to the Dynamic Get And making sure that those values get brought to the page as well So we go to list greetings And again like before we just copy all those values And just tweak away and then back And the values we now want to make sure also comes along Is basically I see it's a value that it doesn't by itself add To the selection [01:37:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h37m44s) But you can add it in because you know it is in the database It's just that This table selection Only shows at this stage the actual values that That it knows belongs to the view I think I need to update this in JCB It is a little tweak which I haven't done So it's not showing the Checkout and Checkout by values But you can type it in by just going And then [01:38:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h38m16s) Those values will also be brought to the front Of this view So Basically the Checkout and The check out time Actually we don't need the check out time Only the check out Basically who checked it out We could add the time But I'm not gonna demonstrate that during this tutorial we'll really it was over an hour and so few minutes [01:38:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h38m43s) So I'm just gonna use the check out for now saving clothes So we've updated our Dynamic get And that means our values are on the page and we can move our code into place We'll need to add it inside of this for each loop Since this code Is actually working with the item Itself Ok so we've got the code in there Recalling the user We also checking the item check out to the user ID [01:39:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m21s) Making sure it's 0 We checking whether to check out user Now let's go get the rest of the code we need So again in the admin view we gonna go with This area here And just copy that We wanna make a few adaptations because in the end of the day The front end is a little different from the back end In that [01:39:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m54s) It is only The backend only displays an edit view the front-end also displays a read view So We wanna make it a little different You can pause the video to see some of the things I've done here But in simple terms I basically got the edit here I'm editing echoing the edit Link And I'm adding the item and I'm putting in a little icon which then you can click And here I'm checking whether you have permission To actually edit [01:40:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h40m34s) This item so if we were save this and refresh the homepage It should actually not change anything because the public doesn't have permission to edit it at this stage Ok that icon should be pencil not edit Ok so let's save this and compile it to see it in action install it And we reload the home page and as you can see it doesn't show those little Buttons Now if we go to the back end [01:41:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h41m17s) And we go to options And we change That The public is allowed to edit And Let's say Let me not change state Yeah Let's just do that they aloud to edit And Let's open the front again We know see that it shows the edit [01:41:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h41m48s) Pencil Let's click on that And we see it opens The edit area Where it can actually now Add the exclamation And click on save Save and close It tells us that the message was saved successfully If we now [01:42:12](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m12s) Open that greeting We see that has the exclamation so our Attempt to integrate Or to make our items editable On the front end Within the control of permission groups Has actually worked very effectively if we again Revoke the permissions And [01:42:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m35s) Refresh the page And then suddenly those links are gone And even if somebody Were to try and Circumvent the system By having In the URL paste in the link To edit that specific item and It will actually Say that it's not permitted [01:42:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m57s) So the The the permissional structure is actually armed and will protect the item from being edited by By that group So Again we gave the Public Permission to edit But now the question is Can we also give it permission to create So going back to greetings [01:43:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m19s) Let's add an option to create An item If I go and add this button here With a link To create an item But I'm not adding any checks around it But you basically need the same kind of Check as you've using here Except that there are some [01:43:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m42s) Shortcut let me Let me show you So basically around the button we added this PHP That checks the users authority to create For the core Of this component If yes Then it will show the button if no the button will not show So that is to control the visibility of the button So let's save this and then compile and install [01:44:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m11s) To see it in action So we see the button doesn't show And that is because currently Who got a component set That the public Cannot Actually create If we allow creating For the public [01:44:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m40s) And we Refresh the page You see that now it actually shows Sorry that's the different view It is this one Refresh this page There we go Now if we click on it It will open an area where we can create an item So here we can set a new name [01:45:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m06s) And then Save and close We get this save not permitted This must mean that we haven't granted enough permissions For the Public user To actually create an item See giving it the option to create an item Is not enough because there are fields That [01:45:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m28s) You know you need also access to Before you can create an item So let's let's try again But first giving it more permissions So we've granted it Basically all the permissions That it needs and go to the front Now we click create greeting Save and close [01:45:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m53s) And there we go With saved the item We can again edit the item We can close And we can View As you can see it's all working As expected So Our Hello World tutorial Is nearly at it's end [01:46:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m16s) We have within this tutorial demonstrated to you How to create A Hello World Component List its items Open individual items And edit those items As well as creating new items All based On the permissional of structures Of the component [01:46:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m40s) So if we Where to change these permissions back To not allowed And we now refresh the front We'll see that Now we can only view the items And even more If we go back And we wanna control the actual viewing of the greet items Not be visible to the public but maybe only to let's say managers we could do that [01:47:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m06s) So you can manage That kind of control over your items You know without actually A lot of custom code If you click on it now it will tell you don't have authority to view it Now you can add Basically custom Scripting To remove the link so that it doesn't even look clickable If the person doesn't have access to view it [01:47:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m32s) But that's already We gone so far over the time Trying to demonstrate to you Some of the basic principles of setting up a Hello component In JCB I trust you've enjoyed this tutorial By far it doesn't usually take this long to actually build a Hello World component In fact there is a older tutorial Where we managed to build a Hello World component and very Shorter time [01:48:02](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m02s) But I illustrated and demostrate it and explain it a little more here To help you guys along To actually build components with JCB And that you'd realize that JCB Is really actually a very powerful application I mean I haven't even gone to the code this time And shown you all that it's written But I mean just from the compiler We ready got 13000 lines of code Which would have taken you 5 8 hour days to write [01:48:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m37s) Which is about 39 hours And I think for a basic component that's quite a lot of code And it's because that it's already integrating a lot of permissional structures and you know version control I mean if I was to Open The greetings And Just open James [01:49:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m03s) remember we added that little Exclamation mark We could check the version We can see the changes and when it was made We can actually review Some of the previous versions And we can even go back to those versions That kind of integration With your history component is done automatically by just adding history And so is many of the other features [01:49:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m30s) The JCB is adding to your component like export of data import of data Bash sorry Batch Changes that you can make As well as You know a whole lot of other concepts Which It's just Beyond the scope of what we had time for today Well enjoy coding and yes If you have any issues Please go to GitHub [01:49:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m58s) First check out the wiki page Check the tutorials And if you just think you've discovered a bug You're most welcome to open an issue And we'll see what we can do in trying to resolve that for you We would like to invite other PHP Programmers To really get involved on the JCB GitHub [01:50:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h50m22s) Community And help us improve JCB So that It can become a home For us to manage The troubled waters of open-source Development Thank you +These Views also map back to the database. These are what we call Admin views. So your admin views have fields and these are usually your Database columns. So these are your database tables, [00:12:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m59s) these are your database columns. And these are your field types so you got a text field radio List Multiple selection Checkbox a date field You got many types of fields But each field independently Is linked to a type But also there are some database settings within each field [00:13:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m24s) As it gets linked into the admin View Since the fields Form the columns of the tables of the admin views This is how you set up a component Once you set up a component Then You basically are done with what we would call the back end The back end of the component is what always needed to be done First Well you could [00:13:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m49s) Argue differently But the point is within JCB you'd first build the back end And then only add in the front end And the front-end usually Doesn't have its own database it actually pulls it's data From the backend Database Now Having explained some of that Let's show you this in action So in JCB [00:14:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m15s) It already ships with quite a lot of field types So we open the field types area You'll see that there are many field types already setup JCB is built in a way that it can be extended Like subform Is a new field type which was recently introduced into Joomla community It also replaces an old field type Called repeatable fields Repeatable fields is a field type I would encourage you not to use anymore Since most of you might know JCB be used repeatable feels quite excessively [00:14:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m49s) And yet due to the fact that Joomla is now discontinuing this field type We had to Migrate all of our repeatable Fields to subform Fields and it was an amazing Huge Process But yes part of the reason why I'm redoing the hello world tutorial It's because of the fact that subforms are now being used all across JCB And there's been a little few changes And how things are implemented So here you can see all the sub this field types that I've been [00:15:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m23s) Set up in JCB already You could always add new field types So as JCB you know continues and Joomla continues to Evolve and become better at what it does So we will be adding more field types And whenever we would be Confronted by field type That needs a little bit of extra tweaking within the compiler I would hope to be ahead of all of you most of the time in adding that field [00:15:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m54s) type in there if it needs that Most of the time field types do not need Extra help It's only field types like subform that actually does But field types like URL and Text and tel and Sequel tag it needed some extra help But most of these don't Because basically the way a field type works Is that it really helps you set up what we know as the properties [00:16:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m24s) So The property has a name It has a default value It is either adjustable not adjustable It's mandatory or mandatory translatable and then you can give it a little description So that when you use the field type You can always come back to this This information can be gathered from going through the Joomla core Libraries [00:16:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m49s) Because these field types really are only mapping Joomla's own Implementation of these field types So if we were to open a field type that's already been created like the text field You see that these properties already there and in place so the field Type Is text The name is any text When we say that the type is text Then this is not adjustable So [00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) We need this unticked if it is adjustable we can tick it It is most certainly Mandatory And so That is how you set up field types I'm not gonna go into this too deep Since there is extra tutorials on how to do field types I just wanted to give you a brief overview Or the fact that the most of the field types already are created and ready for you to use So you'd most of the time simply start with fields There are quite a few Fields already here But I'm gonna go on as they are not there [00:17:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m52s) And I'm gonna create Basically two or three Fields that we can use in our hello world component So First field I'm gonna create Click on new Then I'm gonna select Text as my field type and you see That information in the field type You know Mandatory in everything all this information here [00:18:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m19s) It is actually brought in by Ajax From the field type So if I was to click on this button here Just to it give you a quick demonstration And I was to Just say change this to TT Like three of them and save and close And then go back to fields And click new Then select [00:18:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m53s) Text field again You'll see that now it added three t's in there Because this whole structure is being built From the field types default settings Which we just looked at So I'm gonna go change that back quickly I maybe just put a little Something in here the description For you to see [00:19:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) What I mean So creating a field we haven't really started with it I've just been demonstrating the field type but okay Ok I'm gonna take text again And I you see those o's are showing up here So this means that this whole area Is actually dynamically populated from the values that are put up in the field type And so is this XML structure here Usually Populates with the demo Or default values that you add it [00:19:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m57s) When you created the field type The JCB ships with most field types or ready in place it appears like this is something we have done But really it's something that you can extend and even change So for example if you know that the text field type has more properties than we have setup You can go in and add more to it You can simply click on this you know edit here or before creating a field You can go to the field types And open the text area Sorry the Text field type [00:20:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) And Here just click The green button and add more Properties And then those properties will dynamically also appear Within The area where you create the fields So this again is just Wanting to show you The JCB is tried it's very best To be scalable [00:20:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m57s) And basically customizable To your Own desires So that it isn't just Blocked in To what we have set hard into code But it is movable and therefore scalable So having Looked at Field types I think enough [00:21:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m18s) Let's create our first field So it's gonna be a text field we gonna call it greetings So I'm gonna update the label with greetings This is what Will be visible In the database Greetings Singular is gonna be the database name I'm gonna leave most of the others just default Let's see [00:21:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m48s) Autocomplete is on Validation You know We can leave all of those It doesn't really matter let's just maybe change the hint Ok And then I also gonna just remove the description Definitely take out the default text otherwise it will always appear And now in regards to the database [00:22:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m22s) That is what these features are all about Since text Fields can differ We didn't come Out and say well all of them gonna be this size We left it up to you to decide What kind of text field of this is gonna be And really it's all up to you Obviously that would mean that you would need to know a little bit more about MySQL and databases To really effectively use this [00:22:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m49s) Most of the time it is available on Google so if you do not know What would be the best for A text field or a date field You can Google that Or you could simply go and look at Joomla's own implementation It's got an article manager And you can go into its XML Database And look at What [00:23:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m14s) Database Values was used and just use the same Whatever be the case You should be able to actually navigate through this Without much problems Since that is what is would be required You need to have perseverance you need to You know Be curious [00:23:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m36s) dig through things And doing that you will eventually succeed Because these values are all movable That means that setting them wrong could break things And That's why I always encourage those who gonna use JCB To really do a little bit of homework And to prepare themselves To get involved in programming [00:24:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m00s) More effectively That would only Be beneficial to all of us I suppose Because good programmers makes good programs And makes the web a safer place So Having created our first field I think I'm gonna just reuse name And maybe Also description [00:24:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m23s) Those are part of the demo Component but since Fields can be linked into any admin view and therefore belong To any component It doesn't bother the fact that it is linked to the demo component already What is though true is that if you change it It'll actually affect both Components Okay so Having created our field types [00:24:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m49s) And also now a field Let's create an admin View admin views as I already explained Is really the back end of your component And So you'd need to do some thinking and maybe draw some up there's a whole A lot of tutorials around the web about object orientated development Which talks about use cases and All kinds of discussions and trying to sort of Come up with a [00:25:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m22s) Perspective of what do you wanna build how should it work what should be where what should have its own classes What should have it own tables where we gonna put what And really that kind of work you need to do before coming to JCB JCB Isn't really gonna help you with that And so Once you've got all that planned Then you would come here create your Fields create your admin views which basically is your tables And then link them to a component And once you've done that [00:25:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m53s) You've basically laid the foundation of your application And you can start working on what will make it unique And special which is the front end So first Admin View This is the name is really just for you to identify The View If there be more than one view with the name greetings So let's say you've Built quite a few components that deals with hello world [00:26:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m21s) And now you got three or four different Variations of greetings Now you might want to just say ok this is the first One And By doing that It's identifiable within the drop down list across your application of JCB You'll see that when we would later select the greeting that the system name is used in the drop down list So we're gonna have a single record and a list record Single record is also what we understand as the edit View [00:26:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m57s) So that's when you are looking at one record And you are editing that record In the admin area that's the single record That's also What will be used when you Actually tweak JCB To add an edit option To the site area of your Website Since JCB can do that for you [00:27:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m22s) On the fly This single record Would also affect The front end of your component in that case Which we will show and demonstrate As we go along So for now I'm just gonna call this Greeting and the list record greetings [00:27:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m42s) Obviously we want to have the ability to read and write to this table Now when we say this is a read only It means that the data is in this actual admin area is not gonna be able to be changed Via Joomla Unless obviously you've added some JavaScript and some Other nice Conventions around your component that sort of creates data for that area Dynamically as people use the component Which that case you might use this feature but I must tell you I have hardly ever used it I'm not even sure why I added it but it's there and I know maybe some of you might find it useful [00:28:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m23s) This basically turns all the fields in the area as read only And when you try and change them they never get But you know submitted to the database So we would by Default always leave it to read and write Then you give it a short description We'll go to settings and we'll see That Sorry Fields and conditions We'll see that this button to create admin field conditions will show once the admin view is saved for the first time [00:28:56](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m56s) So you cannot add Fields to this admin view if you haven't saved it That is one of the changes that now came in from us moving away from repeatable Fields to subform fields the admin view Is it table on its own And it's relationship with the fields is also a table on its own So at this stage Unfortunately you need to first not click save and close but just save once So that it basically creates this admin view in the database And now If you go to fields [00:29:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m30s) And conditions you'll be able to link Fields and create conditions We are not gonna be creating conditions since we are basically illustrating or demonstrating a very basic component We're just gonna create A linked fields Linked fields are basically the fields that we created previously So we will click on create It's gonna ask us to be sure that all our work has been saved in the admin View Because if it isn't and we click okay It will be lost So make sure your work is saved before you clicking okay [00:30:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m06s) This will now open an area where you can link Fields to your admin View This looks very similar to the pop-up we had with repeatable Fields except That it's basically it's own View now So if we click on this green Button here It opens An area where when I select The fields we wanna use So we gonna have a name field And [00:30:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m34s) That's a text field We want it to show in the admin list view We want it to show first we gonna have it behave as a title we want it sortable searchable Not filterable because then every name would be a filter that's too much But definitely linkable this means if someone Clicks on the name it will open the greeting so You can edit it Now We only have two tabs at this stage I'm not gonna go into great detail about the tabs [00:31:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m07s) This Time Round If you want to know more please go through the tutorials and look up Tabs to to see more on this subject I'm gonna let it be In the left In the tab And in the tab I want it to be the first item I'm not gonna add any permissions to this But there is an editing permission available at this stage If you want it to [00:31:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m33s) That would create permissions around this Field Which you can tweak who can edit it and who can't You can also control this from a global view perspective Or on a field level These are some of the hidden advantages the JCB has In Handling permissions across your component quite easily Now The Next Field you wanna add is greetings We want the greetings to also be in the listview [00:32:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) And we want it to be second Want it to be searchable Sortable and searchable And it doesn't need to be a link We want it to be on the right Hand in the tab and we wanted to be first And sure that's basically All We Need And they will click save and close This will now basically link those Fields to this admin view We now again open the fields and conditions [00:32:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m33s) We will see that those fields are here And with all the variations that we have selected Ready-to-use Ok so having our admin view setup We can actually now go and create our component So we can either click save and close Or we can simply click close We haven't made any changes in this view since we've come back This area is already been saved [00:32:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m59s) So we could click close But clicking save and close it's always the safe choice I suppose So Now that are admin view is in place Let's go create the component Click new We're gonna give our component a system name Since this is the second hello world tutorial we'll call it version 2 Now we also gonna give it a name which Is the same as the first one [00:33:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m35s) Hello world We're gonna give it a code Name of hello world And is it's version 2 Am I gonna explain too much about all these other switches Basically just that we will need to add company names Author name email website And a short description Now that we have those in place The next thing to do would be to add an admin View [00:34:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m08s) Now since the admin view can only be added once the component's been saved For the first time Let's save it Great our component has been saved Opening the admin view we now can link Admin views to this component There are two places to do this Under settings You can click on component admin View you can click on this one here [00:34:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m40s) Or you could in the admin views click on create Both these buttons take you to the same place This used to be The Old Way In how people would add admin views to their component And that's why we left it here But within the new JCB after our transition away from repeatable fields We actually can handle all of it within the admin tab admin view tab Just click create We are sure we have saved all our work so we can click ok Again we are faced with something that looks very similar to when we were linking the fields [00:35:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m18s) except that now We are dealing with the admin view Linking admin views to this component So I'm gonna click on this plus button here To open our first line We basically just wanna Link The greeting We gonna leave the default icon Of Joomla [00:35:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m39s) But there are a whole list of icons available These icons Are icon moons which are the Joomla default icon That are part of the Joomla backend And front-end I suppose And you can search this Just Search that phrase I suppose And you will find on Joomla's website [00:36:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m04s) A whole Picture map of all these icons Then I most certainly want this view to be Part of the main menu I want an add record On the dashboard I want a list That means clicking on something and it shows us the list of greetings I want it in the submenu The auto checking feature Basically [00:36:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m27s) Components get checked out when somebody Not components items So when you Create a record That are stored in the database and someone else comes and wants to edit that record You wanna prevent people from working on the same record at the same time Since one of them is gonna lose their work So Joomla has this feature by which You can check out an item And then when someone else tries to open it it tells them hey sorry it's not been it's not available it's [00:36:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m58s) Checked out The problem with seeing though is that this check out Can be problematic Because people don't save They just open it maybe to have a look at it And then instead of clicking cancel or close They just click back And the item doesn't get checked back into the database So the auto check in feature is a nice add-on that JCB has set place [00:37:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m25s) Which basically you can set that an item Which are checked out longer than a day Is obviously one that was missed And should be checked in automatically This Is one of the reasons why I developed JCB because I have all these little tweaks that I Want in all my views but I Know that [00:37:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m46s) If Joomla changes something and I need to change this little tweak Going to every single view is like so cumbersome So here it simply click whether you would like this And if Joomla makes a change that we need to know adapt this feature we just change it in the compiler and it Immediately you know compiles correctly for all the components mapped in it The other feature which I think is also great is this keeping of History If I want to keep track of all the changes made to any item of greeting Then I just need to tick this Keep history And JCB will dynamically add all the needed structures so the Joomla's [00:38:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m30s) Integrated history component will work alongside your third-party component And keep track of every item and it's changes So that is just a tick box and JCB does the work The has metadata basically adds The metadata Fields to the view So you don't need to add them it gets added just by ticking this box Then also does this field view have access public Special or you know registered All these access levels [00:39:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m05s) Do you want to implement these levels of access on this view usually you would use this If you want the view to be actually be editable on the front end of the site Because then you will use the access To control some of these I'll show you more of that as we go along So I'll just take this as yes I wanted to have an import function And like we said We want to add a site edit and create view for this admin View Yes [00:39:38](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h39m38s) And then We want it to be first So this admin view basically is gonna have all the features that an admin view can have By Default in JCB And as you would realise when we start demonstrating it although it's as easy as ticking this box The code that JCB is gonna write to do this implementation Is quite stable And yet Dynamic that as Joomla evolves and changes We can tweak these codes [00:40:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m09s) In the compiler and make sure that it remains stable this way Good now save and close Now that we have linked this admin view to the component We can all go to admin views and we'll see this admin view We'll even see the icon we can click on this little pencil here and this will actually take us to the admin View Obviously again making sure that all your work is being saved in this area Click okay if it is And you'll see that it opens the admin view where we linked The fields [00:40:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h40m48s) And we can actually how work in the admin view From the component Now there are areas in the admin view I didn't demonstrate like the permissions the tabs the link to views And I'm not going to going to do much of that I'm just gonna add Some permissions Because I want to demonstrate The permissionable structure Regarding the front in management of editing these items I'm just gonna use the core there is the option of using what is known as the view edit [00:41:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m22s) Instead of core edit then it means it's relationship is just for this view I want it to be related to the Core Which means that it's not gonna be only related to this view But whatever I change in the Core will affect this view For more explanation on the permissions there is this tutorial Which is available in the description And you can go watch this tutorial And also Maybe do some changes compile the component And look at the code [00:41:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m54s) Look at the code and look at the code that's all I can say for most questions being asked because the code Really tells you what has been done There is many ways for you to learn How JCB does things By making changes And then compiling your component and looking at what changed Usually using something like git will be very useful in Discovering the changes There's also a way for you to know where in the compiler specific code is being created Which I will show you as we continue So since we've made changes I'll simply click on save and close [00:42:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m36s) And this will take us back to the component So being back in the component We'll see that Everything is still the way we left it And quite a few things around The admin view which I'm not gonna go into depth During this tutorial I would encourage you to watch the tutorials that are already online For actual explanation on all these features [00:43:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m04s) But to demonstrating a hello world component we have done quite enough Regarding the back end So all that now remains It's basically to compile so we'll click save and close And we'll go to the compiler Select our component And compile Great That means we've just written 9000 lines of code [00:43:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m36s) created 51 folders in 122 Files And if we were to have manually Written this without any boilerplate tool or You know wire script That could help us write all the classes and tables and stuff And it took us 5 seconds to write one line It would have taken us 25 Hours Or about three 8 hour days [00:44:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m07s) That's a long it would have taken you to do this manually So just right there JCB's already saved you quite a lot of time Now the component can be installed by Simply clicking this button Or Grabbing The URL and going to the Normal installer Because it has actually Compiled a Shippable [00:44:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m33s) Joomla component package Which can be installed on any Joomla component Sorry any Joomla website Now one thing I didn't do Is I didn't actually select A Component image so when we selected you see there is no image showing as there is with this one So I think I wanna quickly go back I'm gonna clear the temporary folder and just go select [00:45:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m01s) At least the demo components image as our hello world component So in the component there is this area to select an image I'm gonna click select And I've selected The demo components package It says that we have something so I'm gonna save and close again And now go back to the compiler And compile it again Now I'm gonna click on install If I now go here we'll see that there is now a new component in this Joomla website And I'm gonna open in a new tab [00:45:45](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m45s) And there we go we got our component installed It has a greetings tab and a add greetings tab We also have not selected images for those So let's quickly do that Gonna go back to the admin views And then the greetings I'm gonna click On greetings First As an admin View And here you see there is a place for icons and the add icon [00:46:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m13s) I'm gonna select So I've selected This little bucket as the icon for greetings I'm gonna just add one for For adding a greeting with a little Green Plus Now we got it to icons I'm gonna click save and close so now I've got greetings [00:46:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m39s) Set up And I'm gonna go and compile this again That's usually how things go we go make a change We come back to the compiler to compile it install it And go look at the component And Also When it getsa little bit more advanced We not only go and look at the component in Joomla [00:47:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m03s) But we also go and look at the code So there we got it the two icons are in place if I click add on greeting We see that there's the name there's the greeting And there's also all these other Fields added by Default So the created and the metadata and the permissions Are all in place That is How you would set up a basic Hello world component Go to the options [00:47:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m36s) Will see that it has this Check in timer And you can change it to 5 hours What I explained you know the checks in the items We also have The history version enabled And set to remember 10 versions of any item created As a greeting We also have the permissional structure in place Which includes the greeting [00:48:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m04s) Access greetings batch dashboard and so forth Which are all The switches related to the greetings area So now that we have the admin area basically done Let's continue to The front-end I'm gonna illustrate to you on the front-end how to view greetings That were created how to edit greetings that were created and how to add more Greetings from the front end to this component Let's close out of the components edit area the first thing we need to do We need to create what is known as a dynamic get there 2 ways to get to the dynamic get Area one is to click on this add Dynamic get [00:49:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h49m01s) The others would be basically in the sub menu to go to Dynamic get and then Click new we're gonna need two Dynamic gets we gonna need one to basically return a list of greetings And then we'll need one to return one greeting because one the one Dynamic get is gonna Return for us all the greetings that are available and published the second one is when we click on one of those greetings it should open only that greeting So we gonna use the name as who is being greeted and then the greeting will Will only show when we actually click on the name and then show that individual's Greeting so that's part of how we think about this at this stage then In this area where we can see the full greeting we are gonna add and edit button [00:50:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m05s) And in the list area we are gonna add a create button but these create and Edit buttons are gonna be controlled by the permissional structure which JCB Puts into your component by you just saying that it should be there so setting up a Dynamic get is quite easy you first know that ok I'm gonna use a back end view Which is related to my component and then I'm gonna select that back end view You see it says greetings first so like I said before with a system name What is used in the dropdowns so here we select greetings (First) This one is going to bring back a list query we don't want any pagination And I really don't need all of this we don't need [00:50:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m59s) The asset ID We can leave the created by And the created We can take out the modified the version we can also leave The hits And the ordering that's fine now The greeting we most certainly don't need in a list we only need the name now Ok let's give it a name that we can sort of identify when we start setting up the site view We call this List [00:51:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m35s) Greetings And then in brackets Name only So we know ok this is what it is going to save that You didn't need to save it we could have just gone right into tweaking the data without saving What the data tweak gives us is it gives us a little bit of control on the writing The JCB will do regarding this query so for example we want it to be Before did Now the ordering is called ordering a.ordering [00:52:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m13s) So we want to order it Ascending by the order set in the database The other filter we want to add Is we wanna make sure That it only returns published items So in the "Where" area replace published And we say equal 1 so only published values be returned there are some other features Around the tweak area which I suppose goes beyond just in the normal Hello World Component [00:52:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m52s) But there are tutorials about this on Joomla sorry on YouTube in that playlist That I've already referred to quite a few times, then there's a joint area which we not gonna use But It is a very nice way of linking to other component tables that I've got any kind of relationship that needs to be in a relationship between the main table and the join table but like I said When I'm gonna go into this we are simply going to do the most basic which is what we've got here And we gonna say save a new so we can do and another one The next one is this gonna be a greeting Just simple greeting we wanted to be one item again we gonna do a back end view [00:53:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m46s) Again from the greetings list This time we really Want the name and a greeting we can still use the published we don't need to modify By We can leave those we don't need ordering we could have left out the head In the previous one we set up now let's do a little tweak to make sure that it Doesn't allow someone to grab An unpublished value By just adding an ID in the URL or something ok so that's ok Got this [00:54:26](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m26s) Oh yes Now we need to add a filter We gonna use the ID Basically passing the ID via the URL So the state will be ID and It is gonna be a.id equals so that's really what makes the item load Is this filter type and there are many ways to load items And yes this is a little bit more complex than you might wanted to be but believe me It gives you freedom And ability to build quite amazing things [00:55:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m06s) And so Please go and watch the tutorial on Dynamic get on GitHub There is actually a place I just show you Called Wiki And in the Wiki there is links to all the different tutorials And here is the dynamicGet And you should really watch all of that Even the second one And yeah well my encouragement is to really watch everything I have often seen people ask question [00:55:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m35s) In the issue area Which are dealt with in the tutorials I'm sorry We all have a lot of things to do and so if I don't answer this questions but simply point you to the tutorial I hope you understand Ok so we've got in the dynamicGet all the value selected that we want and Also how to limit it The tweak is in place And the limiting factors We don't need to join it to any other tables,we simply going to [00:56:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m09s) Return these values Let me see We could add the username values if we wanted So we wanted to show who created this we could say created by go to joint Click on the joint a database tables not view because we want to use The user Table And we basically want A single [00:56:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m46s) Item returned And here it will be Created by And In the joint field it will be b.id And we basically want, let's see The username that's it We don't need the ID, we already got that so just the username And we could just say [00:57:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m19s) Let's call it Creator Or Greeted Greeted by, ok so he's the one sending the greeting save and close So now we've got two Dynamic gets a list greeting and a greeting this is what you need to build first basically Again starting at the database looking at what is the data I want [00:57:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m54s) On the page What do I want to show the people looking at the page And by that determining really what the data is you going to grab from the database And giving it system names That are Identifiable because now The next thing to do is to create a site View now there is such a thing as layouts and templates That all can work together with site views I'm not gonna illustrate that now [00:58:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m24s) or demonstrate it, basically if you want to know more about that look at the tutorials On YouTube I'm just simply going to build Two site views And yeah let's go ahead and do that Ok, the first site view we gonna call Greetings And we gonna give it a name called Greetings And a code name Greetings [00:58:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m58s) Now the code name is significant because you don't want to Clash with admin views that you've already created That are gonna be Edit views on the front So since the listview is not being Placed on the front of your component only the edit view that means edit views name Name is greeting So we can't set a code Name For the front called greeting otherwise they will actually you know conflict So I'm just gonna use greeting and for the Single I'm gonna use greet [00:59:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m34s) Ok so Just give you a little explination on why I'm doing things the way I'm doing it So a little description here I'm gonna just Place a little Heading And adding it like that will actually mean That this little string will get added to your language file So that's how you create language strings it's just adding the snippet Oh or even just this anywhere in JCB will actually create a language string [01:00:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m28s) Ok, now over here We are going to select the list greeting and the reason why there are two of these Is it the one is what we will act upon in the compilation the other one is just for you to look So if you end up Let's say in here and click save It will not be playing any role whatsoever in the compilation It will play a role when you export a JCB package but that's a whole different subject and not going to deal with that, so good practice would be that these two actually are the same The main and the Dynamic Get but since you can add Custom Gets We don't have any Custom Gets setup so you can't select any, but you can add more than just [01:01:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m17s) Your normal main gate to a site View You can add the main Get and then a bunch of custom gets which brings a whole ton of data to the Page from different variations from relationships which I know it's a little bit Beyond the Hello World Component But it is there and it actually does work very well it's just that you will need to do some home work in tutorials and so forth but we want the list greeting and so This list greeting gives us a few Snippets now Do know that the Snippets are really not always accurate because it's very difficult for me to always know exactly how the implementation is gonna work out so I'm giving you a snippet which is how I expect you to use the data but you can adjust that and this is where your knowledge of PHP will really [01:02:10](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m10s) come into play you should know that this and that little arrow Items is because we are working with an object and the you know what is it Mean and how to use an object and how to interact with an object How to parse over it, how to grab its values, how to update its values, all this is part of your own background that you need to bring to JCB. JCB is not gonna At this stage crank out customized site views the way it does the admin views because my idea was it when it comes to site views I always wanna do Something different and I just want to have the ease of getting all the data on the page and then be creative And so I haven't spent much time to make this as automatic as I want to set up of the back end and the admin views because this is really what makes your component different from every other [01:03:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m15s) Component out there and here we want to encourage you to really Yes do you do a lot of preparation and thinking about data Structures in relationships because your Dynamic get can grab from so many data places And bring all that data to you in a nice object which you can then parse and display With a lot of permissional switches as I will show you in a moment so that is giving you little backdrop on why the dynamic get and the site view even the custom admin view , it's relationship and why it is like that ok so Basically looping through those items is this these two strings is all we need and then I could grab a listview let's see We are busy working on adding the [01:04:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m14s) Bootstrap library to JCB At the moment with basically got UI kit version 2 Linked to JCB And I've selected the list option for this Uikit is a library developed by YOOtheme If you do not know UiKit I would encourage you to actually go Google that And Then [01:04:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m46s) You'll see it's quite a nice library to use we have voted that Bootstrap is the better one And so we are migrating to Bootstrap But will still support UiKit as much as we can so for now just to get things going We simply gonna loop over the items show the name nothing is yet Clickable nothing is editable is just to get you know you introduced to using site Views Save and close Now we gonna go back to our component And we are gonna add the site view to it You might ask why don't we just add the component to the site view when we create the site view [01:05:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m34s) And that was a idea that You know I did play with but because of database relationships and all kinds of Reasons I felt that the better approach would be to link site views At admin At the component area instead of at the site area This gives us the option to use site views quite easily with in other components That was really the idea behind it We might rethink this and we might reshuffle this in the future I mean this is the first time I build Such a component called JCB and who knows what happens if we start refactoring it and a far more Advancement program is get involved it might become even far better than it is now [01:06:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m20s) Now but this is how it works at the moment So you go to site views And you click create link site views And then you basically select that greeting site view you say yes I want to have an admin menu sorry be able to add a menu to the front of my website with this view I want this view to use Metadata this is going to be this component default View I wanted to control Access will look at That again but I want that access to that it's default be public so this is Basically again making use of all the options and save and close So now if we go back to compiling our component [01:07:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m19s) There's no changes being done to the database I need to maybe just give you a heads up here if you're Adding new tables JCB is Build to actually know that and add the tables to a Sequel update which when you update the component it automatically updates the data base But it's still important for you to actually check that it does this For there could be a reason that it thinks that it's not necessary Yet I tried to Most I've tried to build enough places things in place so that it will actually pick up that you've add it [01:08:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m05s) either a field or a new View to the component and that the component now needs to increment a version And Release a table update but sometimes that is not happening and And then even if you update your component the database is not being updated Necessarily So that's just something you need to keep your finger on make sure that that happens for most part JCB will take care of that And since now and this upgrade we have only added a front end we haven't touch the data base Everything about that is just the way it was before so we can without any concerns just compile And [01:08:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m49s) Re-install the component And then go and add it To the front So we can sort a look at what has happened Ok Now just a heads up When you add a front end site view and you said that it's default should be public But if it's not the first time you installed the component then that default cannot be set to the database because It's a default that only gets set the first time the component gets installed, I don't wanna go into all All the technical reasons for that but you could go into the app the components script file and you can search through it [01:09:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m30s) To see what I mean because it's actually a function that gets added to the script file and only gets implemented with on the first installation of the component now that's important then if you do not Even follow what I was saying now and why I said it then I hope you'll get to To understand it as I try and demonstrate these things Before you can add the greetings to a site admin sorry to a site menu let's just at least add a few greetings Ok So we've got at least four greetings in place and now we can actually add That list View to an Front and site view [01:10:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m21s) So we go to menus And Go to main menu Select menu type click Hello World greetings that was the previous component Ok Everything else looks good So we've got Greeting set as the home Of this website And we gonna click save and close [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There we go But got home and Hello World greetings That should mean that if we click on This Preview The front end of the site We should see the greetings It's gotta say the page isn't redirecting properly And the reason is like I explained We set the front side view [01:11:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m20s) That it should have access control Which means You can control who sees this page not that it's just open to everyone but But you can say only this group can see it all only that group can see it But since we haven't set that And by Default Doesn't allow anyone Now we said that it's by Default should be public but like I explained But I Gave you that heads Up [01:11:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m49s) It only sets that default the first time the component is installed so it is the way you should ship the Component If you only add that feature later You need to do custom scripting in the script area Which is the beyond Hello World component tutorial To update a database and ensure that this view is actually public The manual way to do this is basically to go to the Hello World component Click on options Then go to permissions Scroll down [01:12:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m25s) To the area where you see greetings site access Select the public group And change This site access To allow This will now ensure that the site area is actually Available To the public So having refreshed the Public area we know see James Williams Sarah and Koos [01:12:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m54s) All of them loading As expected Ok now Let's Add a Link to James so that when you click it you actually see the greeting that James should receive So we go back to the site views and we open the greetings Now we wanna add a link here But there is a better way of doing a link in JCB Which really takes care of all the [01:13:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m27s) Controller issues When I go to the front end of the component then we open The model for greetings Will see that there is the get items method And in it we are basically checking Whether this item has an alias If it does have an alias and an ID It actually creates what is known as a slug And this alias And id gets combined [01:13:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m58s) Into The Slug Since we know that our greetings area does not have an alias In fact it only has an ID It will only end up with an ID in The Slug So Let's go add an alias to hour greeting There is a shortcut to the site Sorry the fields linked to an admin area it's this little icon here And we basically wanna add another field called alias [01:14:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m28s) And if you go to the fields We'll see that there Is already a field called alias So we can simply use that field So go back to the admin views And we'll click on this shortcut for Adding fields And We gonna Basically [01:14:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m52s) Click here and add an alias We gonna tell the system that this isn't alias And Now we are moving Both of these above the tabs And we are creating the alias to be second in line And the greeting We are going to Let's see Make it a full width [01:15:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m18s) The greeting We also gonna go edit the greeting In a moment So that it's no longer a text field but a text area Ok so we got name alias all of that is in place save and close Going back to fields I'm going to open the greeting And since there are some values I want to stay the same I am going to select That [01:15:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m51s) XML Definition And I'm going to copy it Then I'm gonna select Textarea Then I'm gonna paste That first XML in here We obviously have to remove it again But just so I can copy paste [01:16:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m13s) Cut the name I want to keep the same name You can't just change the type because the type up here Needs to actually correspond with the type here So just changing the type in there will not work So the label you want to keep that the same We want to add Let's see Add greetings as a description We don't want to default text [01:16:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m57s) And let's add the hint back again We Don't really need any of these other Fields so we can just remove them We don't want the filter to be set to raw Would rather use the word string Since we don't want any HTML at this stage in our greeting If you want HTML now in the greeting you can use The Save HTML I see it's not in this list but it actually does exist Usually we would use the editor instead of just a text area Anyway [01:17:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m43s) So here we go We got Our textarea replace And I'm gonna add just here Span 12 I don't know how long that's gonna still be there as a class But I think it is still there And now I think that should do it Yeah let's change this No you know what we don't need to change that Save and close [01:18:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m11s) Ok since we didn't change any of the database values with this text field We shouldn't have any issues But we did add a new text field So if we go to the comp I Compiler And we compile the components You see that a dynamically incremented the version and If we go without installing we go to the component you see that it hasn't Actually updated view because this was open so before doing anything I would Suggest reopening the view basically refresh the page [01:18:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m55s) So that the changes we also basically show So now we can go back in simply install the new changes And if we go to a Hello World we should be able to Open the Hello World and we should see the alias there and if we click save It should dynamically add a new alias now we'll have To do this for every item because the aliases are saved or created only once you saved the Item so I'm just opening all of them quickly now usually a user using your component You only gonna ship this component when you've got everything in place I hope and so they wouldn't have to do all this gymnastics to make sure that all the values are in place and if by some reason They have to you will have to help them along with some custom scripting I suppose [01:19:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m58s) Anyway So now that we got all our items set And it actually has an alias We can start working on those links There's one more place we need to make a change And that is in the dynamic Get If you remember when we set it up We didn't actually Include The alias [01:20:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m19s) So I'm gonna copy this I then just change to just another View quickly and then back to this one So that we can get the alias there So here is the alias that we want We don't need all these And we can just add that over there There we go we got the alias now also selected Save and close So [01:20:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m46s) We can check with this alias is actually being Brought to the page By Adding a little I call it production tricks So Would we'll do a little PHP dump here var dump [01:21:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h21m11s) And We just take all the items Copy Paste it in there and save Now we go back to the compiler I'm just quickly compile this again And Install Go to the homepage [01:21:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h21m44s) Refresh And now you will see that it dumps all the values on the page and then displace them So now we can look and see ok well fine There's the alias and actually created that Slug we spoke about So we got the slug for every item and that is the first step in setting up Hey Well-formed Link for Opening one of these items [01:22:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h22m13s) I don't know what Some of you might think Wow that's got a lot of things to do to get this to work But I can tell you if you wanna build components for Joomla And you wanna go outside of the box And build things that are actually unique and completely different from what other People are doing And this is really just the basics Ok so we gonna Set up a href here Around [01:22:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h22m41s) This name But we are gonna use PHP to basically take care of creating a link for us So here we are simply gonna say Echo And I'm gonna go show you where we get the name The class name for what we wanna do here I guess back in the code You see that there is In the helper class A [01:23:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m11s) File called router so you can open that And you'll see that you have what is know now called Hello World helper route And If you scroll down We don't have this stage have how yes we haven't added the the site view for the single record So there are some values missing here oh man I should have first done that Anyway I'll go do that now but we'll come back to this file And there is another file Or I should say class that works together with this class [01:23:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m48s) And it's basically these two classes with their methods That we were gonna use to actually build our link Ok so let's Create That display site view So I've removed the var dump from this view I'm just gonna save and close this I could have set save a new [01:24:12](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h24m12s) Just gonna create Another site View And we gonna call this Greet We can't call it greeting because like we said There is already a greeting in the front All greeted that one might be better We gonna Make a nice display here I'm using [01:24:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h24m40s) Panel I'm gonna copy the panel snippet and paste it in here And the title I'm gonna make The name And the content Will obviously be the greeting Now I don't want two of those So I'm gonna take out this one [01:25:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m08s) So I basically Got one greeting setup here It's not yet gonna be oh you know there's no buttons here yet to edit it But he will basically view One Greeting And it will also show you who set up the greeting And ok now we can close this So we got this greeted Site view We can help go to the admin area [01:25:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m36s) Of the Good because sorry to Joomla component area And I'm gonna click on here And Actually add a site view To the component Same way we did before Can I say I want greet I don't want it to have an add menu It must have meta [01:25:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m59s) It's not a default view I also want access there And by Default it's not public So Save and close Now we'll compile the component again Ok I've compiled and installed it If we now go back to the that file I just Opened previously this Hello World Helper route And we scroll down [01:26:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h26m32s) Will see that now has a method called greet route And you basically pass it and ID And it constructs The The URL for you Now This component view doesn't have category So it will skip this area But it's A function that I [01:26:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h26m54s) Wrote that should Be able to Basically Work for any View So You want to use this Method And this abstract class Now Those of you that are [01:27:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h27m11s) A little bit interested in how this works You'll see in the main File of the site View You'll see that the router Is actually also added as a helper class And This is basically the name of this helper class Hello World Helper route And so That's the abstract class name [01:27:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h27m39s) Going back to our site view of greetings To add our link We now know The method name So that's the method name And that's abstract class Sorry that's the class name now let's get the method name So we go back to Scroll down That's the method name so we can [01:28:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h28m05s) Just copy it It obviously Needs to Be corresponding to the view we want to open And we wanna give it The Slug so it's gonna be a item Slug But that's not the only function That we want to call here there is another one I mentioned [01:28:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h28m40s) Which works alongside this and it's called the JRoute Function Actually class I should say So we would add the JRoute around this First method class And That would basically Add the Other values to the URL [01:29:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m01s) That is required Ok so we've got our own helper class of a component We give it The Slug Which then gives it to the JRouter Which then Echos out The link To open this item Great [01:29:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m20s) Now let's save this and compile again To see it in action We go to the front and Reload the page And when we click on one of these says not authorised To view greet That means This specific group Are not allowed to look at this What are ways to prevent the link from showing up in the first place [01:29:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m51s) But this is you for some reason you didn't actually put that custom script in place You see You can actually see how the backend generates some of this So if I go into the code And we go to the admin area Of The Hello World component And we open the model [01:30:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h30m19s) And we opened greetings No no no it sorry not the model Actually the view and then greetings And we open the body And we open the view data HTML You'll see that it is grabbing Some permissions to know whether it should show certain buttons And then here Is again setting up some permissions To see whether [01:30:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h30m48s) You are allowed To actually Edit Here it is To actually edited the The greeting And if you're not allowed to edit it It just Echoes the name You see it doesn't show you the link So this area here Is really a demonstration of what you wanna do in the front [01:31:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m11s) You don't wanna always show the link To the item unless The person Who is actually viewing the site Is in the correct group Of the site To be able to actually View The item Now I'm not gonna spend more time on this Part because we wanna also do an editing concept [01:31:31](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m31s) Which is really More interesting and what I would rather spend time on So here I'm just gonna go back into the admin View In the admin area And just change the permissions that the actual public could still open this view for now So in the backend I go to options of the Hello World component Permissions Scroll down Again I'll see there is a new one called greet [01:31:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m58s) Change this to allowed for the public group And save and close out of there Now I forgot back to the front And click on This link It actually opens it And it gives us the name James gives us the welcome welcome to JCB And the greetings were set by the Superuser OK so it actually loads it as we expected You can also see in the [01:32:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h32m27s) URL this demo site of mine isn't fully Search engine friendly setup But it already generates that this is a greet To James And so And the name James appears here because of the Slug The Slug is used to generate the search engine optimisation here If we didn't have an alias it would have given you one or two Depending on the item ID Ok so [01:32:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h32m58s) That just gives you a quick demonstration Of how to set up A front-end That actually can open specific items Now The Next Step Is to actually make these items editable Now like I explain to you In the admin area we're ready doing some of this So I'm gonna just basically copy and paste most of the code From the admin area [01:33:26](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h33m26s) And I would encourage you to do the same Unless you know enough that you can just do it without looking at how JCB did it So I'm gonna copy The string And then I'm going to also Copy this one These few lines And then I'm also gonna use some of these I realize by looking at this first area that the Checkout And [01:34:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h34m05s) This Checkout value Needs to be set on the page I also need to make sure about this value Because We need to check the users authority On the page so we need to check whether the user is set On the page So We can go and do that and look at some code I'm gonna move some of this code [01:34:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h34m27s) And then we'll go to the front end of the code area I want to add the option to edit the item In both the list as well as the Single View So I'm gonna do it in the list view first and that I'll demonstrate step-by-step And then when we go to the Single View I'm just gonna place the code in place I'm not gonna explain to much because it's basically the same So here in the site view Of the list area I'm going to PHP and I'm going to Custom view script It says add PHP script to the head of the file [01:35:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m05s) So I'm gonna paste This link in here and we see that it basically Has this view Greetings And the task is greeting Edit So that is the task And it's gonna be available in the edit Variable Ok so that's the first part of the code we want up on the page [01:35:29](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m29s) Now for the rest of it We go back to the Admin view again The backend And we see wither we need to grab These as well So Before grabbing them Let's open the corresponding site view so we can look at some of the code Ok so Here is the greetings [01:35:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m55s) I'm gonna open this view HTML And we'll see that the user is already being loaded onto the page so we've really got the user That's great This is the items Ok let's look at this It is always is good for you to actually go and look at the code The JCB is writing seeing the code Is what makes you familiar with how things work And also helps you to detect when something doesn't work Why [01:36:29](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h36m29s) And how to fix it Since we know that the user is on the page and we go to the site the admin area This area We see that it's accessing the user in the same way Using this As an object User And ask him whether it has authority On the core [01:36:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h36m48s) managed To check in And then also it Basically checks And gets the check out user Details And We'll see why in a moment But we don't have the check out user on the page So [01:37:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h37m06s) What we gonna do it's we gonna quickly Also get those values by going to the Dynamic Get And making sure that those values get brought to the page as well So we go to list greetings And again like before we just copy all those values And just tweak away and then back And the values we now want to make sure also comes along Is basically I see it's a value that it doesn't by itself add To the selection [01:37:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h37m44s) But you can add it in because you know it is in the database It's just that This table selection Only shows at this stage the actual values that That it knows belongs to the view I think I need to update this in JCB It is a little tweak which I haven't done So it's not showing the Checkout and Checkout by values But you can type it in by just going And then [01:38:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h38m16s) Those values will also be brought to the front Of this view So Basically the Checkout and The check out time Actually we don't need the check out time Only the check out Basically who checked it out We could add the time But I'm not gonna demonstrate that during this tutorial we'll really it was over an hour and so few minutes [01:38:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h38m43s) So I'm just gonna use the check out for now saving clothes So we've updated our Dynamic get And that means our values are on the page and we can move our code into place We'll need to add it inside of this for each loop Since this code Is actually working with the item Itself Ok so we've got the code in there Recalling the user We also checking the item check out to the user ID [01:39:21](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m21s) Making sure it's 0 We checking whether to check out user Now let's go get the rest of the code we need So again in the admin view we gonna go with This area here And just copy that We wanna make a few adaptations because in the end of the day The front end is a little different from the back end In that [01:39:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m54s) It is only The backend only displays an edit view the front-end also displays a read view So We wanna make it a little different You can pause the video to see some of the things I've done here But in simple terms I basically got the edit here I'm editing echoing the edit Link And I'm adding the item and I'm putting in a little icon which then you can click And here I'm checking whether you have permission To actually edit [01:40:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h40m34s) This item so if we were save this and refresh the homepage It should actually not change anything because the public doesn't have permission to edit it at this stage Ok that icon should be pencil not edit Ok so let's save this and compile it to see it in action install it And we reload the home page and as you can see it doesn't show those little Buttons Now if we go to the back end [01:41:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h41m17s) And we go to options And we change That The public is allowed to edit And Let's say Let me not change state Yeah Let's just do that they aloud to edit And Let's open the front again We know see that it shows the edit [01:41:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h41m48s) Pencil Let's click on that And we see it opens The edit area Where it can actually now Add the exclamation And click on save Save and close It tells us that the message was saved successfully If we now [01:42:12](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m12s) Open that greeting We see that has the exclamation so our Attempt to integrate Or to make our items editable On the front end Within the control of permission groups Has actually worked very effectively if we again Revoke the permissions And [01:42:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m35s) Refresh the page And then suddenly those links are gone And even if somebody Were to try and Circumvent the system By having In the URL paste in the link To edit that specific item and It will actually Say that it's not permitted [01:42:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m57s) So the The the permissional structure is actually armed and will protect the item from being edited by By that group So Again we gave the Public Permission to edit But now the question is Can we also give it permission to create So going back to greetings [01:43:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m19s) Let's add an option to create An item If I go and add this button here With a link To create an item But I'm not adding any checks around it But you basically need the same kind of Check as you've using here Except that there are some [01:43:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m42s) Shortcut let me Let me show you So basically around the button we added this PHP That checks the users authority to create For the core Of this component If yes Then it will show the button if no the button will not show So that is to control the visibility of the button So let's save this and then compile and install [01:44:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m11s) To see it in action So we see the button doesn't show And that is because currently Who got a component set That the public Cannot Actually create If we allow creating For the public [01:44:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m40s) And we Refresh the page You see that now it actually shows Sorry that's the different view It is this one Refresh this page There we go Now if we click on it It will open an area where we can create an item So here we can set a new name [01:45:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m06s) And then Save and close We get this save not permitted This must mean that we haven't granted enough permissions For the Public user To actually create an item See giving it the option to create an item Is not enough because there are fields That [01:45:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m28s) You know you need also access to Before you can create an item So let's let's try again But first giving it more permissions So we've granted it Basically all the permissions That it needs and go to the front Now we click create greeting Save and close [01:45:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m53s) And there we go With saved the item We can again edit the item We can close And we can View As you can see it's all working As expected So Our Hello World tutorial Is nearly at it's end [01:46:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m16s) We have within this tutorial demonstrated to you How to create A Hello World Component List its items Open individual items And edit those items As well as creating new items All based On the permissional of structures Of the component [01:46:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m40s) So if we Where to change these permissions back To not allowed And we now refresh the front We'll see that Now we can only view the items And even more If we go back And we wanna control the actual viewing of the greet items Not be visible to the public but maybe only to let's say managers we could do that [01:47:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m06s) So you can manage That kind of control over your items You know without actually A lot of custom code If you click on it now it will tell you don't have authority to view it Now you can add Basically custom Scripting To remove the link so that it doesn't even look clickable If the person doesn't have access to view it [01:47:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m32s) But that's already We gone so far over the time Trying to demonstrate to you Some of the basic principles of setting up a Hello component In JCB I trust you've enjoyed this tutorial By far it doesn't usually take this long to actually build a Hello World component In fact there is a older tutorial Where we managed to build a Hello World component and very Shorter time [01:48:02](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m02s) But I illustrated and demostrate it and explain it a little more here To help you guys along To actually build components with JCB And that you'd realize that JCB Is really actually a very powerful application I mean I haven't even gone to the code this time And shown you all that it's written But I mean just from the compiler We ready got 13000 lines of code Which would have taken you 5 8 hour days to write [01:48:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m37s) Which is about 39 hours And I think for a basic component that's quite a lot of code And it's because that it's already integrating a lot of permissional structures and you know version control I mean if I was to Open The greetings And Just open James [01:49:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m03s) remember we added that little Exclamation mark We could check the version We can see the changes and when it was made We can actually review Some of the previous versions And we can even go back to those versions That kind of integration With your history component is done automatically by just adding history And so is many of the other features [01:49:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m30s) The JCB is adding to your component like export of data import of data Bash sorry Batch Changes that you can make As well as You know a whole lot of other concepts Which It's just Beyond the scope of what we had time for today Well enjoy coding and yes If you have any issues Please go to GitHub [01:49:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m58s) First check out the wiki page Check the tutorials And if you just think you've discovered a bug You're most welcome to open an issue And we'll see what we can do in trying to resolve that for you We would like to invite other PHP Programmers To really get involved on the JCB GitHub [01:50:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h50m22s) Community And help us improve JCB So that It can become a home For us to manage The troubled waters of open-source Development Thank you