joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 83 Pull Requests Projects 4 Wiki Activity

Updated 044 Hello World Component with Joomla Component Builder Creator Extended (markdown)

Amigo 2019-08-09 14:17:01 +02:00
parent 55163ca3b6
commit 01a32a7a7a
1 changed files with 221 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
044-Hello-World-Component-with-Joomla-Component-Builder-Creator-Extended.md

@ -4,25 +4,35 @@
[00:00:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)(_Click on these time links to see Youtube video_)
I would like to give you a tutorial on how to build a Hello World Component with Joomla Component Builder. Joomla Component Builder is a Joomla Component which helps you to develop Joomla Components quite easily. I originally developed this application or extension for myself that I can maintain the code in a very consistent [00:00:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m37s) and shareable way.
I would like to give you a tutorial on how to build a Hello World Component with Joomla Component Builder. Joomla Component Builder is a Joomla Component which helps you to develop Joomla Components quite easily. I originally developed this application or extension for myself that I can maintain the code in a very consistent and shareable way.
* ### Example - Make Changes In One Place
[00:00:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m41s)
For example since there are lot of concepts in components that you build for Joomla, which we could call Conventions or Boilerplate Implementation. These things are always the same. I wanted something like a wire frame that could just take care of all that for me all the time. Even if Joomla was to change, [00:01:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m09s) I could just make a change in one place, and then compile it into all my components that I have developed. Then have them run again stable on Joomla, instead of having to go to every one of those components. We've gone beyond developing the most basic parts of a Component. We've gone and ventured into some of its complexities. That is why showing you an Hello World [00:01:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m44s) Component being built by Joomla Component Builder. It is still going to end up being quite an advanced Component.
### Become A Community Project
Since I've mentioned to you that I build JCB for myself, and it wasn't originally intended as a community project, just something that I was wanted to use. It has since become a community project and the code is open on GitHub. Most of you might already know that. [00:02:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) I didn't think about the complexity when I was developing the Component. I just had a desired functionality in mind. I didn't care that it is complicated to achieve things, because I set the conventions in place and I know how to use them. [00:02:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) That's why JCB on the surface might look just like any other Component Builders out there, but when you start using it and knowing some of its secrets, it is amazing how Conventions that you would use when you develop components yourself would [00:03:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m07s) make JCB do things that are quite amazing.
[00:01:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m57s)
Since I've mentioned to you that I build JCB for myself, and it wasn't originally intended as a community project, just something that I was wanted to use. It has since become a community project and the code is open on GitHub. Most of you might already know that. [00:02:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m19s) I didn't think about the complexity when I was developing the Component. I just had a desired functionality in mind. I didn't care that it is complicated to achieve things, because I set the conventions in place and I know how to use them. [00:02:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) That's why JCB on the surface might look just like any other Component Builders out there, but when you start using it and knowing some of its secrets, it is amazing how Conventions that you would use when you develop components yourself would make JCB do things that are quite amazing.
### JCB - A Ton Of Functions
So you will end up realizing that JCB has a ton of functions. Most of the basic ones we have tried to explain in the tutorials that you can find on YouTube. You can access the tutorials from this link 'Access Tutorials'. Looking at the tutorials would be the most easiest way [00:03:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m40s) for you to discover some of JCB's hidden secrets. At the same time, it is only the basics, although it's quite a lot of tutorials. I want to make sure that you are able to not only do basic things but even advanced things. [00:04:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m08s)
[00:03:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m16s)
So you will end up realizing that JCB has a ton of functions. Most of the basic ones we have tried to explain in the tutorials that you can find on YouTube. You can access the tutorials from this link 'Access Tutorials'. Looking at the tutorials would be the most easiest way [00:03:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m40s) for you to discover some of JCB's hidden secrets. At the same time, it is only the basics, although it's quite a lot of tutorials. I want to make sure that you are able to not only do basic things but even advanced things.
### Need To Know - PHP - Joomla API
[00:04:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m08s)
If you come to JCB and you do not have PHP as a Language, you don't know it well, and you do not know Joomla's API. Then you shouldn't expect to build complex Components with JCB complexity is only possible with JCB. The more you know yourself, the more you know the more you would have a perspective on how this implementation should function. And most of the time if you do have that perspective [00:04:44](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m44s) you would start knocking and opening the correct doors. Set up the correct relationships to have those conventions dynamically built for you by JCB. If you are very good at PHP programming and you do know the Joomla API, you should be very happy to simply go into the Compiler, and start reading the code. The Compilers codes files are [00:05:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m20s) alphabetically ordered. You can start with 'a' and work your way down. The first one is a_get.php and so forth. Reading this code and understanding how JCB's Compiler Constructs the code would send you on a treasure hunt where you would discover amazing features that work just out of the box. Yet having this under the hood I realize we all need to start with the basics. That is to build a Hello World Tutorial [00:05:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m57s) to know how to combine the different concepts that is required for a component. To be fully functional, and portable, and useful.
### Two Concepts - Patience and Persevernce
### Two Concepts - Patience and Perseverance
[00:06:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m23s)
There are two concepts which I want to mention before we start. One of it is patience, the other one is perseverance. I know within any programming career these are invaluable aspects which if you have them will make the whole difference whether you are only a normal programmer or an extremely good programmer. [00:06:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m49s) You see because those of us who have stuck around and have been going at it, we have realized that many might consider us being genius. It's only because it's disguised by perseverance. We continually try and try and try, until we resolve or succeed. This is what has made JCB be possible. And this is also what would make you successful [00:07:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) in using JCB. It is not a component which I can claim has no internal conflicts or has no inconsistencies. But it is most certainly a component with which I am myself have developed countless mini programs components itself from it which I am maintaining. I am planning to [00:07:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m42s) start pushing some of these components into the community. It's just that I have not seen the need for doing so yet, for the initial development were mostly for clients who has directly approached me.
@ -31,233 +41,342 @@ 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. 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.
[00:08:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s)
Having said all this, let me take you through the basic steps building one piece one another. 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.
[00:09:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s)
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 or move development offline.
### Ways To Install JCB - Download Package - URL From GitHub - Install From The Web
[00:09:56](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m56s)
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)
[00:10:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m35s)
I've recently discovered, if I type in Component Builder which is it's name in the listing, 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.
### Need To Understand and Setup Components: Field Types, Fields, Views
[00:11:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s)
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
[00:12:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m40s)
These Views also map back to the database. These are what we call Admin Views. Your Admin Views have Fields and Fields are your Database Columns. Admin Views are your Database Tables, [00:12:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m59s) Fields are your Database Columns. And these are your Field Types. You got a Text Field, Radio, List, Multiple Selection, Checkbox, a Date Field. You got many types of Fields. Each Field independently is linked to a type, but 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 setup a Component.
### First Build The Back End Then Add In The Front End
[00:13:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m34s)
Once you setup a component, then you 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.
### Front End Have Not Its Own Database
[00:13:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m58s)
The front end doesn't have its own Database. It pulls it's data from the back end Database. Having explained some of that, let's show you this in action.
### JCB Can Be Extended
[00:14:15](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m15s)
In JCB it ships with quite a lot of Fieldtypes. We open the Fieldtypes area. You'll see that there are many Fieldtypes already setup. JCB is built in a way that it can be extended. Like Sub Form is a new Fieldtype which was recently introduced into Joomla Community. It also replaces an old Fieldtype called Repeatable Fields.
### Joomla discontinuing Repeatable Fields - Migrate Repeatable Fields To Sub Form Fields
[00:14:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m40s)
Repeatable Fields is a Fieldtype I would encourage you not to use anymore. Since most of you might know JCB used Repeatable Fields 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 Fieldtype, we had to migrate all of our Repeatable Fields to Sub Form Fields and it was an amazing huge process. Part of the reason why I'm redoing the Hello World tutorial, is because of the fact that Sub Forms are now being used all across JCB. There's been a little few changes and how things are implemented.
### Add New Fieldtypes
Here you can see all the Fieldtypes that I've been [00:15:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m23s) setup in JCB already. You could always add new Fieldtypes as JCB and Joomla continues to evolve and become better at what it does we will be adding more Fieldtypes. Whenever we would be confronted by Fieldtype 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 [00:15:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m54s) Fieldtype in there if it needs really that. Most of the time Fieldtypes do not need extra help it's only Fieldtypes like Subform that does. But Fieldtypes like URL, Text, Tel, SQL and Tag it needed some extra help but most of these don't.
[00:15:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m23s)
Here you can see all the Fieldtypes that I've been setup in JCB already. You could always add new Fieldtypes as JCB and Joomla continues to evolve and become better at what it does we will be adding more Fieldtypes. Whenever we would be confronted by Fieldtype 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 [00:15:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m54s) Fieldtype in there if it needs really that. Most of the time Fieldtypes do not need extra help it's only Fieldtypes like Subform that does. But Fieldtypes like URL, Text, Tel, SQL and Tag it needed some extra help but most of these don't.
### Fieldtypes Helps Setup Properties
The way a Fieldtype works is that it helps you setup what we know as the properties. [00:16:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m24s) The property has a Name, it has a Default value, it is either Adjustable or not Adjustable. It's Mandatory or not Mandatory, Translatable. You can give it a little Description, that when you use the Fieldtype 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 Fieldtypes are only mapping Joomla's own implementation of Fieldtypes. If we were to open a Fieldtype that's already been created like the Text field, you see that these properties are already there and in place. The Fieldtype is 'text'. The 'name' is 'any text'. When we say that the type is text, then this is not adjustable. [00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) We leave this unticked, if it is adjustable, we can tick it. It is most certainly Mandatory. That is how you setup Fieldtypes. I'm not going to go into too deep, since there is extra tutorials on how to do Fieldtypes. I just wanted to give you a brief overview.
[00:16:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m14s)
The way a Fieldtype works is that it helps you setup what we know as the properties. The property has a Name, it has a Default value, it is either Adjustable or not Adjustable. It's Mandatory or not Mandatory, Translatable. You can give it a little Description, that when you use the Fieldtype 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 Fieldtypes are only mapping Joomla's own implementation of Fieldtypes. If we were to open a Fieldtype that's already been created like the Text field, you see that these properties are already there and in place. The Fieldtype is 'text'. The 'name' is 'any text'. When we say that the type is text, then this is not adjustable. [00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) We leave this unticked, if it is adjustable, we can tick it. It is most certainly Mandatory. That is how you setup Fieldtypes. I'm not going to go into too deep, since there is extra tutorials on how to do Fieldtypes. I just wanted to give you a brief overview.
### Creating Fieldstypes
The fact that most of the Fieldtypes already are created and ready for you to use. You'd most of the time simply starts with Fields. There are quite a few Fields already here. But I'm going to go on as if they are not there. [00:17:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m52s) And I'm going to create two or three Fields that we can use in our Hello World Component. The first Field I'm going to create, click fon 'New', then I'm going to select 'Text' as my Fieldtype. The Field Information in the Fieldtype, Mandatory and everything, all this information, [00:18:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m19s) is brought in by Ajax from the Fieldtype.
[00:17:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m37s)
The fact that most of the Fieldtypes already are created and ready for you to use. You'd most of the time simply starts with Fields. There are quite a few Fields already here. But I'm going to go on as if they are not there. [00:17:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m52s) And I'm going to create two or three Fields that we can use in our Hello World Component. The first Field I'm going to create, click fon 'New', then I'm going to select 'Text' as my Fieldtype. The Field Information in the Fieldtype, Mandatory and everything, all this information, is brought in by Ajax from the Fieldtype.
### Quick Demonstration On Adding A Fieldtype
If I was to click on this button(pencil) here, to it give you a quick demonstration, and I was to say change this(ValueExample) to text'tt' and save and close. 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 Fieldtypes Default Settings, which we just looked at. I'm going to go change that back quickly. I maybe just put a little something in the Description for you to see [00:19:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) what I mean. Creating a field we haven't started with it, I've just been demonstrating the Fieldtype. I'm going to take text again, and you will see those oooo's are showing up here. This means that this whole area is dynamically populated from the values that are put up in the Fieldtype. And so is this XML(field definition) structure here usually populates the demo or default values that you added [00:19:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m57s) when you created the Fieldtype. The JCB ships with most Fieldtypes are already in place, it appears like this is something we have done, but it's something that you can extend and even change. For example if you know that the Text Fieldtype has more properties than we have setup, you can go in and add more to it. You can simply click on this edit here or before creating a Field, you can go to the Fieldtypes, and open the Text Fieldtype [00:20:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) here and click the green button and add more Properties. Those Properties will dynamically also appear within the area where you Create the Fields. JCB is tried it's very best to be scaleble [00:20:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m57s) and customizable to your own desires, that it isn't just blocked in to what we have set hard into code. But it is movable and therefore scalable.[00:21:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m18s)
[00:18:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m24s)
If I was to click on this button(pencil), to give you a quick demonstration, and I was to say change this(ValueExample) to text'tt' and save and close. 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 Fieldtypes Default Settings, which we just looked at. I'm going to go change that back quickly. I maybe just put a little something in the Description for you to see [00:19:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m22s) what I mean. Creating a field we haven't started with it, I've just been demonstrating the Fieldtype. I'm going to take text again, and you will see those oooo's are showing up here. This means that this whole area is dynamically populated from the values that are put up in the Fieldtype. And so is this XML(field definition) structure here usually populates the demo or default values that you added [00:19:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m57s) when you created the Fieldtype. The JCB ships with most Fieldtypes are already in place, it appears like this is something we have done, but it's something that you can extend and even change. For example if you know that the Text Fieldtype has more properties than we have setup, you can go in and add more to it. You can simply click on this edit here or before creating a Field, you can go to the Fieldtypes, and open the Text Fieldtype [00:20:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) here and click the green button and add more Properties. Those Properties will dynamically also appear within the area where you Create the Fields. JCB is tried it's very best to be scaleble [00:20:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m57s) and customizable to your own desires, that it isn't just blocked in to what we have set hard into code. But it is movable and therefore scalable.
### Creating A Field
[00:21:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m18s)
Let's create our first field. It's going to be a Text field, we going to call it greetings. I'm going to update the label with greetings. This is what will be visible in the Database, greeting, singular is going to be the Database Name. I'm going to leave most of the others default. [00:f21: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 'add greetings here'. Then I'm going to remove the description. Definitely take out the default text, otherwise it will always appear.
### Databases
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 are going to be this size. We left it up to you to decide what kind of Text Field of this is going to be. It's all up to you. 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. 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 navigate through this without much problems. Since that is what is required you need to have perseverance, you need to 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. That's why I always encourage those who are going to use JCB, to do a little bit of homework and to prepare themselves to get involved in programming more effectively. [00:24:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m00s) That would only be beneficial to all of us I suppose. Because good programmers makes good programs and makes the web a saver place. Having created our first field I think I'm going to 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. Since Fields can be linked into any Admin View and therefore belong to any Component, it doesn't bother that it is linked to the Demo Component already. What is true though, is that if you change it, it'll affect both Components.
[00:22:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m19s)
Now in regards to the Database, that is what these features are all about. Since Text Fields can differ, we didn't come out and say well all of them are going to be this size. We left it up to you to decide what kind of Text Field of this is going to be. It's all up to you. 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. 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 navigate through this without much problems. Since that is what is required you need to have perseverance, you need to 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. That's why I always encourage those who are going to use JCB, to do a little bit of homework and to prepare themselves to get involved in programming more effectively. [00:24:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m00s) That would only be beneficial to all of us I suppose. Because good programmers makes good programs and makes the web a saver place. Having created our first field I think I'm going to 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. Since Fields can be linked into any Admin View and therefore belong to any Component, it doesn't bother that it is linked to the Demo Component already. What is true though, is that if you change it, it'll affect both Components.
### Creating A Admin View - Need To Do Some Preparations Before Doing Admin Views
Having created our Fieldtypes [00:24:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m49s) and also a Field, let's create an Admin View. Admin Views are already explained. It is the back end of your Component. You'd need to do some thinking and maybe draw some up. There's a whole lot of tutorials around the web about Object Orientated Development. Which talks about use cases and all kinds of discussions and trying to come up with a [00:25:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m22s) perspective of what you want to build? How should it work? What should be where? What should have its own classes? What should have it own tables? Where we going to put what? That kind of work you need to do before coming to JCB. JCB isn't going to help you with that. Once you've got all that planned, then you would come here create your Fields, create your Admin Views, which 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 laid the foundation of your application. You can start working on what will make it unique and special which is the front end.
[00:24:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m46s)
Having created our Fieldtypes and also a Field, let's create an Admin View. Admin Views are already explained. It is the back end of your Component. You'd need to do some thinking and maybe draw some up. There's a whole lot of tutorials around the web about Object Orientated Development. Which talks about use cases and all kinds of discussions and trying to come up with a [00:25:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m22s) perspective of what you want to build? How should it work? What should be where? What should have its own classes? What should have it own tables? Where we going to put what? That kind of work you need to do before coming to JCB. JCB isn't going to help you with that. Once you've got all that planned, then you would come here create your Fields, create your Admin Views, which 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 laid the foundation of your application. You can start working on what will make it unique and special which is the front end.
### Creating Admin Views
[00:26:02](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m02s)
First Admin View. The System Name is for you to identify the View. If there be more than one View with the name greetings. 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 you got three or four different variations of greetings. You might want to say this is the first one. 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.
### Name (single record), Name (list of records)
We're going to have a single record and a list records. 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) 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 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. I'm just going to call the single record Greeting and the list record Greetings. [00:27:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m42s)
[00:26:48](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m48s)
We're going to have a single record and a list records. Single record is also what we understand as the Edit View. 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 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. I'm just going to call the single record Greeting and the list record Greetings.
### Type: Read And Write
[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 Type table. When we say this is a read only, it means that the data is in this Admin area is not going to be able to be changed via Joomla. Unless 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 in 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 turns all the fields in the area as read only, and when you try and change them, they never get submitted to the Database. We would by Default always leave it to read and write.
### Short Description
Then you give it a short description. We'll go to 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) You cannot add Fields to this Admin View if you haven't saved it. That is one of the changes that came in from us moving away from Repeatable Fields to Subform Fields. The Admin View is a Table on its own. It's relationship with the Fields is also a Table on its own. At this stage unfortunately you need to first not click save and close but just save once, so that it creates this Admin View in the Database.
[00:28:38](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m38s)
Then you give it a short description. We'll go to 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.' You cannot add Fields to this Admin View if you haven't saved it. That is one of the changes that came in from us moving away from Repeatable Fields to Subform Fields. The Admin View is a Table on its own. It's relationship with the Fields is also a Table on its own. At this stage unfortunately you need to first not click save and close but just save once, so that it creates this Admin View in the Database.
### Field And Conditions
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, Linked Fields and create Field Conditions. We are not going to be creating Conditions since we are illustrating or demonstrating a very basic component.
[00:29:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m28s)
If you go to Fields and Conditions you'll be able to link, Linked Fields and create Field Conditions. We are not going to be creating Conditions since we are illustrating or demonstrating a very basic component.
### Linked Fields
[00:29:45](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m45s)
We're just going to create a Linked Fields. Linked Fields are the Fields that we created previously. So we will click on create. It's going to 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) It will 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 its own View now. If we click on this green Button here, it opens an area where when I select the Fields we want to use.
* ### Example Name(Text) Field
We going to 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 in the Order in list views. We going to have it behave as a Title. We want it Sortable, Searchable not Filterable, because then every name would be a filter. But definitely Linkable. This means if someone clicks on the Name, it will open the Greeting, so you can edit it. We only have two Tabs at this stage. I'm not going to go into 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 see more on this subject. I'm going to let it be Left in the Tab. And in the Tab(Order in Edit) I want it to be the first item. I'm not going to 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.
[00:30:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m30s)
We going to have a Name Field and that's a text field. We want it to show in the Admin List View. We want it to show first in the Order in list views. We going to have it behave as a Title. We want it Sortable, Searchable not Filterable, because then every name would be a filter. But definitely Linkable. This means if someone clicks on the Name, it will open the Greeting, so you can edit it. We only have two Tabs at this stage. I'm not going to go into 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 see more on this subject. I'm going to let it be Left in the Tab. And in the Tab(Order in Edit) I want it to be the first item. I'm not going to 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.
* ### Example Greetings Field
The Next Field you want to add is Greetings. We want the Greetings to be in the Admin List View. [00:32:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m04s) We want it to be second in the Order in list views. Want it to be Sortable and Searchable. It doesn't need to be a Link. We want it to be on the Right in the Tab and we wanted to be first in Order in Edit. That's all we need and they will click save and close. This will link those Fields to this Admin View. We 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. Having our Admin View setup, we can go and create our component. We can either click save and close or we can 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) We could click close, but clicking save and close, is always the safe choice.
[00:31:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m57s)
The Next Field you want to add is Greetings. We want the Greetings to be in the Admin List View. We want it to be second in the Order in list views. Want it to be Sortable and Searchable. It doesn't need to be a Link. We want it to be on the Right in the Tab and we wanted to be first in Order in Edit. That's all we need and they will click save and close. This will link those Fields to this Admin View. We 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. Having our Admin View setup, we can go and create our component. We can either click save and close or we can 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) We could click close, but clicking save and close, is always the safe choice.
### Creating The Component
[00:33:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m11s)
Now that our Admin View is in place, let's go create the Component. Click new. We're going to give our Component a System Name since this is the second Hello World tutorial. We'll call it version 2. We also going to 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 going to give it a Code Name of Hello World, and it's version 2. I'm not going to explain too much about all these other switches. Basically just that we will need to add Company Names, Author, Email, Website and Short Description.
### Adding A Admin View
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)
Since the Admin View can only be added once the component's been saved for the first time, let's save it. Our component has been saved. Opening the Admin View we 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 'Create component admin view for this joomla component". [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 can handle all of it within the 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 we are dealing with the Admin View and linking Admin Views to this Component.
[00:34:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m01s)
Now that we have those in place the next thing to do would be to add an Admin View. Since the Admin View can only be added once the component's been saved for the first time, let's save it. Our component has been saved. Opening the Admin View we 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 'Create component admin view for this joomla component". [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 can handle all of it within the 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 we are dealing with the Admin View and linking Admin Views to this Component.
### Clicking On Plus Button To Open First Line
I'm going to click on the plus Button to open our first line.
We want to link the Greeting in View. We going to 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 Icomoons which are the Joomla Default Icons that are part of the Joomla back end and front end. You can search Icomoon 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 record on the Dashboard, that means clicking on something and it shows us the list of greetings. I want it in the Submenu.
[00:35:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m25s)
I'm going to click on the plus Button to open our first line. We want to link the Greeting in View. We going to leave the Default Icon of Joomla, but there are a whole list of Icons available. These icons are Icomoons which are the Joomla Default Icons that are part of the Joomla back end and front end. You can search Icomoon 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 record on the Dashboard, that means clicking on something and it shows us the list of greetings. I want it in the Submenu.
### Auto Check-in Feature
The Auto Check-in feature. [00:36:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m27s) When you create a record that are stored in the Database and someone else comes and wants to edit that record, you want to prevent people from working on the same record at the same time, since one of them is going to lose their work. Joomla has this feature by which you can check out an item. And when someone else tries to open it, it tells them 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. The item doesn't get checked back into the database. The Auto Check-in feature is a nice add-on that JCB has set in place, [00:37:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m25s) which 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 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 compiles correctly for all the components mapped in it.
[00:36:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m23s)
The Auto Check-in feature. When you create a record that are stored in the Database and someone else comes and wants to edit that record, you want to prevent people from working on the same record at the same time, since one of them is going to lose their work. Joomla has this feature by which you can check out an item. And when someone else tries to open it, it tells them 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. The item doesn't get checked back into the database. The Auto Check-in feature is a nice add-on that JCB has set in place, [00:37:25](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m25s) which 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 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 compiles correctly for all the components mapped in it.
### Keeping Of History Feature
[00:38:10](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m10s)
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 its changes. That is just a tick box and JCB does the work.
### Has Metadata Adds Metadata Fields To The View
[00:38:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m43s)
The Has Metadata adds the metadata Fields to the view. You don't need to add them, it gets added just by ticking this box.
### Add Access
Then also does this View have Access, Public Special or 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 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. I'll just click 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) We want it to be first in Order. This Admin View is going to have all the features that an Admin View can have by Default in JCB. As you would realize when we start demonstrating it, although it's as easy as ticking this box, the code that JCB is going to 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. Save and close. Now that we have linked this Admin View to the Component, we can go to Admin Views and we'll see Admin View. We'll even see the Icon. We can click on this little pencil and it will take us to the Admin View. 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 work in the Admin View from the Component. There are areas in the Admin View I didn't demonstrate. Like the Permissions, the Tabs, the Linked Views. I'm not going to do much of that.
[00:38:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m55s)
Then also does this View have Access, Public Special or Registered all these Access levels. Do you want to implement these levels of access on this view? Usually you would use this if you want the view to 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. I'll just click 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) We want it to be first in Order. This Admin View is going to have all the features that an Admin View can have by Default in JCB. As you would realize when we start demonstrating it, although it's as easy as ticking this box, the code that JCB is going to 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. Save and close. Now that we have linked this Admin View to the Component, we can go to Admin Views and we'll see Admin View. We'll even see the Icon. We can click on this little pencil and it will take us to the Admin View. 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 work in the Admin View from the Component. There are areas in the Admin View I didn't demonstrate. Like the Permissions, the Tabs, the Linked Views. I'm not going to do much of that.
### Adding Permissions
[00:41:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m03s)
I'm just going to add some Permissions, because I want to demonstrate the Permission Structure regarding the front end Management of Editing these items. I'm just going to 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 its relationship is just for this view. If I want it to be related to the Core which means that it's not going to 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. 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 are 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.
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) This will take us back to the Component. Being back in the component, we'll see that everything is still the way we left it. There is quite a few things around the Admin View which I'm not going to 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. All that now remains is to compile, so we'll click save and close and we'll go to the Compiler. Select our Component and Compile. 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 and 122 files. If we were to have manually written this without any boilerplate tool or 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 has already saved you quite a lot of time.
### Installing The Component
Now the Component can be installed by clicking this'install com_hello_world_v2_0_0_J3_on this Joomla Website Button or grabbing the URL and going to the normal installer. Because it has 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 Website.
[00:44:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m17s)
Now the Component can be installed by clicking this'install com_hello_world_v2_0_0_J3_on this Joomla Website Button or grabbing the URL and going to the normal installer. Because it has Compiled a Shippable Joomla Component Package which can be installed on any Joomla Website.
### Select An Image
[00:44:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h44m42s)
Now one thing I didn't do is, I didn't select a Component image. When we selected you see there is no image showing as there is with this one. So I think I want to quickly go back, I'm going to 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 going to click select and I've selected the Demo Components Package so that we have something. I'm going to save and close again. Now go back to the Compiler and compile it again. I'm going to click on install. If I now go here we'll see that there is now a new Component in this Joomla Website. I'm going to open in a new Tab. [00:45:45](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h45m45s) 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. Let's quickly do that. Going back to the Admin Views and then the Greetings I'm going to click on Greetings first as an Admin View. 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 going to select Icon. So I've selected this little bucket as the icon for Greetings. I'm going to just add one for adding a Greeting with a little green plus. Now we got it to icons. I'm going to click save and close. I've got Greetings [00:46:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h46m39s) setup and I'm going to 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. When it gets a 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. There we got it, the two icons are in place. If I click Add Greeting, we see that there's the Name, there's the Greetings. 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 setup a basic Hello World Component.
### Hello World Configuration
If we go to the options [00:47:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m36s) we will see that it has Check in timer and you can change it to 5 hours what I explained 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 Permission 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 Use, Dashboard Add and so forth which all the switches related to the greetings area.
[00:47:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h47m34s)
If we go to the options we will see that it has Check in timer and you can change it to 5 hours what I explained 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 Permission 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 Use, Dashboard Add and so forth which all the switches related to the greetings area.
### From the Front End to The Component - How To View, Edit, Add Greetings
[00:48:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m16s)
Now that we have the Admin area basically done, let's continue to the front end. I'm going to 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.
### Two Dynamic Gets Created - First One Return A List Of Greetings
The first thing we need to do we need to create what is known as a Dynamic Get. There two 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 in the sub menu to go to Dynamic Gets and then click New. We're going to need two Dynamic Gets. We going to need one to return a list of greetings. And then we'll need one to return one greeting. The one Dynamic Get is going to 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. We going to use the name as who is being greeted, and then the greeting will only show when we click on the name and then show that individual's greeting. That's part of how we think about this at this stage.
[00:48:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h48m42s)
The first thing we need to do we need to create what is known as a Dynamic Get. There two ways to get to the Dynamic Get area. One is to click on this Add Dynamic Get. The others would be in the sub menu to go to Dynamic Gets and then click New. We're going to need two Dynamic Gets. We going to need one to return a list of greetings. And then we'll need one to return one greeting. The one Dynamic Get is going to 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. We going to use the name as who is being greeted, and then the greeting will only show when we click on the name and then show that individual's greeting. That's part of how we think about this at this stage.
### Adding Edit/create Buttons Controlled By Permissions Structure Of JCB
In this area where we can see the full greeting we are going to add an Edit button. [00:50:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m05s) And in the list area we are going to add a Create button. These Create and Edit buttons are going to be controlled by the Permissions structure which JCB puts into your Component by you just saying that it should be there. Setting up a Dynamic Get is quite easy.
[00:50:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m05s)
In this area where we can see the full greeting we are going to add an Edit button. And in the list area we are going to add a Create button. These Create and Edit buttons are going to be controlled by the Permissions structure which JCB puts into your Component by you just saying that it should be there. Setting up a Dynamic Get is quite easy.
### First - Use Back-end View
[00:50:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h50m23s)
First know that I'm going to use a Back-end View which is related to my component. I'm going to select that Back-end View, you see it says Greetings(first). Like I said before with a system name is what is used in the drop downs. Here we select Greetings(first). This one(getType) is going to bring back a getlistQuery. We don't want any Pagination. I 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. The greeting we most certainly don't need in a list, we only need the name. 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 in brackets (Name only) so that weArea will know this is what it is. Going to save that. You didn't need to save it.
### Tweaking The Data Without Saving
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 that JCB will do regarding this query. For example we want it to be ordered. The ordering is called a.ordering. [00:52:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m13s) We want to order it ascending by the order set in the database.
[00:51:47](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h51m47s)
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 that JCB will do regarding this query. For example we want it to be ordered. The ordering is called a.ordering. We want to order it ascending by the order set in the database.
### Filter To Add
The other filter we want to add is we want to make sure that it only returns a.published items. In the 'Where' area we placed a.published and we say equal in Comparison Operators, and 1 in Value Key, so only published values will 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 YouTube in that playlist that I've already referred to quite a few times.
[00:52:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m22s)
The other filter we want to add is we want to make sure that it only returns a.published items. In the 'Where' area we placed a.published and we say equal in Comparison Operators, and 1 in Value Key, so only published values will be returned. There are some other features around the tweak area which I suppose goes beyond just in the normal Hello World Component, but there are tutorials about this on YouTube in that playlist that I've already referred to quite a few times.
### Joint Area
[00:52:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h52m59s)
Then there's a joint area which we not going to use, but it is a very nice way of linking to other component tables that I've got any kind of relationship. There needs to be in a relationship between the main table and the join table. But like I said we are not going to go into this, we are simply going to do the most basic which is what we've got here. We going to say save a new, so we can do and another one.
### Creating Dynamic Get
The next one is going to be Greeting. We want it to be one item. We going to 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 want the name and a greeting. We can still use the published. We don't need to modify by. We can leave those(version). We don't need ordering. We could have left out the hits in the previous one we have setup. 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. Custom Script is Ok. Got this(Joint). [00:54:26](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m26s) We need to add a filter. We going to use the ID. Basically passing the ID via the URL. So the State Key will be id and it is going to be a.id in Table Key, equals in Comparison Operator. That's 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)
[00:53:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h53m36s)
The next one is going to be Greeting. We want it to be one item. We going to do a Back-end View. Again from the Greetings(list). This time we want the name and a greeting. We can still use the published. We don't need to modify by. We can leave those(version). We don't need ordering. We could have left out the hits in the previous one we have setup. 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. Custom Script is Ok. Got this(Joint). [00:54:26](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h54m26s) We need to add a filter. We going to use the ID. Basically passing the ID via the URL. So the State Key will be id and it is going to be a.id in Table Key, equals in Comparison Operator. That's 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.
### Dynamic Get Tutorials On GitHub - Wiki
[00:55:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m07s)
Please go and watch the tutorial on Dynamic Get on GitHub. There is a place, I just show you called Wiki. In the Wiki there is links to all the different tutorials. You should really watch all of that. 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.
### Two Dynamic Gets Created - Second Return One Greeting
[00:55:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m52s)
We've got in the Dynamic Get 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. We could add the username values if we wanted. We wanted to show who created this. We could say created by, go to Joint, click on the Join Database Tables not Join View Tables because we want to use the user table and we want a single [00:56:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m46s) item returned and on Field it will be a.created_by and in the Joint Field it will be b.id and we want the username. We don't need the id, we already got that so just the user_name. We could just say [00:57:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m19s) greeted_by. He's the one sending the greeting. Save and close. Now we've got two Dynamic Gets, a listgreeting and a greeting. This is what you need to build first. 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? By that determining what the data is going to grab from the Database and giving it system names that are identifiable.
### Next To Do - Create A Site View
The next thing to do is to create a Site View. There is such a thing as layouts and templates. That all can work together with Site Views. I'm not going to [00:58:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m24s) demonstrate it. If you want to know more about that look at the tutorials on YouTube.
[00:58:12](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m12s)
The next thing to do is to create a Site View. There is such a thing as layouts and templates. That all can work together with Site Views. I'm not going to demonstrate it. If you want to know more about that look at the tutorials on YouTube.
### Site View - Greetings
* ### System Name
[00:58:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m30s)
I'm going to build two Site Views. The first Site View we are going to call the System Name Greetings. We going to give it a Name called Greetings.
* ### Name In Code
A Code Name greetings. [00:58:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m58s) The Code Name is significant because you don't want to clash with Admin Views that you've already created that are going to be edit views on the front since the listview is not being placed on the front of your component only the edit view. That means edit views name is greeting. We can't set a Code Name for the front called greeting otherwise they will conflict. I'm just going to use greeting and for the single I'm going to use greet. [00:59:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m34s) Just give you a little explanation on why I'm doing things the way I'm doing it.
[00:58:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h58m55s)
A Code Name greetings. The Code Name is significant because you don't want to clash with Admin Views that you've already created that are going to be edit views on the front since the listview is not being placed on the front of your component only the edit view. That means edit views name is greeting. We can't set a Code Name for the front called greeting otherwise they will conflict. I'm just going to use greeting and for the single I'm going to use greet. [00:59:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m34s) Just give you a little explanation on why I'm doing things the way I'm doing it.
* ### Description, Snippet
A little Description here Greetings. I'm going to just place a little heading and adding it like that will mean that this little string(list of Greetings') will get added to your language file. That's how you create language strings. It's just adding the snippet. Or even just this anywhere in JCB will create a language string. [01:00:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m28s)
[00:59:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h59m41s)
A little Description here Greetings. I'm going to just place a little heading and adding it like that will mean that this little string(list of Greetings') will get added to your language file. That's how you create language strings. It's just adding the snippet. Or even just this anywhere in JCB will create a language string.
* ### Main Get/Act Upon Compilation - Dynamic Get/Look
[01:00:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m28s)
Now over here at Main Get, we are going to select the listgreetings(name only) and the reason why there are two of these, Main Get and Dynamic Get. One is what we will act upon in the compilation, the other one is just for you to look. So if you end up here(Looking) 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 I'm not going to deal with that. Good practice would be that these two Main Get and Dynamic Get are the same. 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 Get 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. I know it's a little bit beyond the Hello World Component. It is there and it does work very well. You will need to do some home work in tutorials and so forth.
* ### Listgreetings Gives Snippets
[01:01:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m42s)
We want the listgreetings and so this listgreetings gives us a few Snippets. Do know that the Snippets are not always accurate because it's very difficult for me to always know exactly how the implementation is going to work out. I'm giving you a snippet which is how I expect you to use the data. You can adjust that and this is where your knowledge of PHP will [01:02:10](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m10s) come into play. You should know what this and that little arrow items is because we are working with an object. You must know what it means? How to use an object? 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 going to crank out customized Site Views the way it does the Admin Views. My idea was when it comes to Site Views I always want to do something different and I just want to have the ease of getting all the data on the page and then be creative. I haven't spent much time to make this as automatic, I want to setup of the back end and the Admin Views because this is 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. We want to encourage you to 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 permission switches as I will show you in a moment. 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.
* ### Looping Through Items
Basically looping through those items is this these two strings and is all we need. I could grab a list view(select a snippet). 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 we got UIkit version 2 linked to JCB. And I've selected the list option for this Uikit. Uikit is a library developed by YOOtheme. If you do not know UiKit I would encourage you to 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. We will still support UiKit as much as we can. We are going to loop over the items. Show the name. Nothing is yet clickable, nothing is editable. It is to get you introduced to using Site Views. Save and close.
[01:03:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m58s)
Basically looping through those items is this these two strings and is all we need. I could grab a list view(select a snippet). We are busy working on adding the Bootstrap Library to JCB. At the moment we got UIkit version 2 linked to JCB. And I've selected the list option for this Uikit. Uikit is a library developed by YOOtheme. If you do not know UiKit I would encourage you to 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. We will still support UiKit as much as we can. We are going to loop over the items. Show the name. Nothing is yet clickable, nothing is editable. It is to get you introduced to using Site Views. Save and close.
### Back To Component Add Site View
Now we going to go back to our Component and we are going to 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) That was a idea that 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 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. Who knows what happens if we start refactoring it in a 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) This is how it works at the moment.
[01:05:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m18s)
Now we going to go back to our Component and we are going to 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? That was a idea that 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 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. Who knows what happens if we start refactoring it in a 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) This is how it works at the moment.
### Creating A Site View
[01:06:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m23s)
So you go to Site Views and click Create Linked Site Views. Then you select that Greeting Site View. You say yes I want to be able to Add Menu to the front of my website with this view. I want this view to use Has Metadata. It is going to be this Component Default View. I wanted to control Access. We will look at that again, but I want that Access that its default be Public. This is again making use of all the options and save and close.
### Compiling The Component*
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.
[01:07:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m09s)
If we go back to compiling our Component there's no changes being done to the Database.
* ### Heads Up - When Updating Your Component It Automatically Updates The Database
@ -265,7 +384,9 @@ I need to give you a heads up here. If you're adding new tables, JCB is build to
### Compiling The Component(continue)*
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. We can look at what has happened.
[01:08:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m41s)
We can without any concerns just Compile and re-install the Component. And then go and add it to the front. We can look at what has happened.
### Heads Up - Default Gets Set The First Time Component Gets Installed
@ -273,89 +394,131 @@ Just a heads up. When you add a front end Site View and you set that to default
### Adding The Greetings To A Site View
Before you can add the Greetings to a Site Menu. We've got at least four Greetings in place. We can 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) We go to Menus and go to Main Menu. Select Menu type. Click Hello World Greetings that was the previous Component. We've got Greeting set as the HOME of this website. We going to click save and close. [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There we go. We've got HOME and Hello World Greetings. That should mean that if we click on this preview(demonstration button) the front end of the Site, we should see the Greetings. It's going to say 'The page isn't redirecting properly'.
[01:09:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m53s)
Before you can add the Greetings to a Site Menu. We've got at least four Greetings in place. We can add that list view to an Front and Site view. We go to Menus and go to Main Menu. Select Menu type. Click Hello World Greetings that was the previous Component. We've got Greeting set as the HOME of this website. We going to click save and close. [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There we go. We've got HOME and Hello World Greetings. That should mean that if we click on this preview(demonstration button) the front end of the Site, we should see the Greetings. It's going to say 'The page isn't redirecting properly'.
### Set Front Site View To Have Access Control
The reason is like I explained we set the Front Site 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. It is not open to everyone but you can say only this group can see it, or only that group can see it. Since we haven't set that and by default doesn't allow anyone. Now we set that it's by default should be public, but like I explained when I gave you that heads up, [01:11:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m49s) it only sets the default the first time the Component is installed. 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 beyond Hello World Component tutorial to update a Database and ensure that this view is public.
[01:11:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m13s)
The reason is like I explained we set the Front Site View that it should have Access control. Which means you can control who sees this page. It is not open to everyone but you can say only this group can see it, or only that group can see it. Since we haven't set that and by default doesn't allow anyone. Now we set that it's by default should be public, but like I explained when I gave you that heads up, [01:11:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m49s) it only sets the default the first time the Component is installed. 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 beyond Hello World Component tutorial to update a Database and ensure that this view is public.
### Manual Way To Change Access Control
The manual way to do this is 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 Greeting (site) Access to Allowed. This will now ensure that the Site area is available to the public. 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.
[01:12:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h12m13s)
The manual way to do this is to go to the Hello World Component, click on Options. Then go to Permissions scroll down to the area where you see Greetings (site) Access. Select the Public group and change Greeting (site) Access to Allowed. This will now ensure that the Site area is available to the public. Having refreshed the Public area we know see James, Williams, Sarah, and Koos, all of them loading as expected.
## Adding A Link
[01:13:00](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m00s)
Let's add a link to James so that when you click it you actually see the Greeting that James should receive. We go back to the Site Views and we open the Greetings. Now we want to add a link. But there is a better way of doing a link in JCB which 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 models for greetings.php, we will see that there is the getItems method. And in it we are checking whether this item has an alias. If it does have an ($item->id) and an ($item->id), it creates what is known as a $item->slug. This ($item->alias) and ($item->id) is combined [01:13:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h13m58s) into the $item->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.
### Adding An Alias
Let's go add an alias to our Greeting. There is a shortcut to the Fields linked to an Admin area. It's this little icon underneath Greetings. We want to add another Field called Alias. [01:14:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m28s) If you go to the Fields we'll see that there is already a Field called Alias. We can simply use that Field. Go back to the Admin Views and we'll click on this shortcut icon underneath Greetings for adding fields. We going to [01:14:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m52s) click the green plus button and add an Alias. We going to tell the system that this is an Alias. Now we are moving(alignment) both of these Above Tabs. We are creating the Alias to be second in line. In the Greetings we are going to make it a full width in Alignment. [01:15:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m18s)
[01:14:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m11s)
We also going to go edit the Greetings in a moment so that it's no longer a text field but a text area. We got all in its place, save and close. Going back to Fields, I'm going to open the Greetings. Since there are some values I want to stay the same. I am going to select [01:15:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m51s) the XML Definition and I'm going to copy it. Then I'm going to select Textarea. I'm going to paste that first XML in here. We 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 change the type because the Type up at the top of the page needs to correspond with the type in the XML. Changing the type in the XML will not work. The label you want to keep that the same. We want to 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) Let's add the hint back again. We don't need any of these other fields, so we can just remove them. We don't want the filter to be set to raw. We would rather use the word string. Since we don't want any HTML at this stage in our greetings. If you want HTML now in the greeting you can use the Save HTML. I see it's not in this list but it does exist. Usually we would use the editor instead of just a textarea. [01:17:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m43s) We got our textarea replace and I'm going to add 'class.'text_area span 12'. I don't know how long that's going to still be there as a class. I think it is still there. I think that should do it. Save and close. [01:18:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m11s) 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. If we go to the Compiler and we compile the Component, you will see that it dynamically incremented the version 2_0_1. If we go without installing we go to the Component you will see that it hasn't updated the view because this was open. Before doing anything I would suggest reopening the view, refresh the page. [01:18:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m55s) So that the changes will show.
Let's go add an alias to our Greeting. There is a shortcut to the Fields linked to an Admin area. It's this little icon underneath Greetings. We want to add another Field called Alias. If you go to the Fields we'll see that there is already a Field called Alias. We can simply use that Field. Go back to the Admin Views and we'll click on this shortcut icon underneath Greetings for adding fields. We going to [01:14:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m52s) click the green plus button and add an Alias. We going to tell the system that this is an Alias. Now we are moving(alignment) both of these Above Tabs. We are creating the Alias to be second in line. In the Greetings we are going to make it a full width in Alignment. [01:15:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m18s)
We also going to go edit the Greetings in a moment so that it's no longer a text field but a text area. We got all in its place, save and close. Going back to Fields, I'm going to open the Greetings. Since there are some values I want to stay the same. I am going to select [01:15:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m51s) the XML Definition and I'm going to copy it. Then I'm going to select Textarea. I'm going to paste that first XML in here. We 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 change the type because the Type up at the top of the page needs to correspond with the type in the XML. Changing the type in the XML will not work. The label you want to keep that the same. We want to 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) Let's add the hint back again. We don't need any of these other fields, so we can just remove them. We don't want the filter to be set to raw. We would rather use the word string. Since we don't want any HTML at this stage in our greetings. If you want HTML now in the greeting you can use the Save HTML. I see it's not in this list but it does exist. Usually we would use the editor instead of just a textarea. [01:17:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h17m43s) We got our textarea replace and I'm going to add 'class.'text_area span 12'. I don't know how long that's going to still be there as a class. I think it is still there. I think that should do it. Save and close. [01:18:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m11s) 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. If we go to the Compiler and we compile the Component, you will see that it dynamically incremented the version 2_0_1. If we go without installing we go to the Component you will see that it hasn't updated the view because this was open. Before doing anything I would suggest reopening the view, refresh the page. So that the changes will show.
### Install The New Changes
[01:19:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m01s)
We can go back and install the new changes. 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. We'll have to do this for every item, because the Aliases are saved or created only once you saved the item. I'm just opening all of them quickly. Usually a user using your Component, you only going to ship this Component when you've got everything in place. They wouldn't have to do all this gymnastics to make sure that all the values are in place. If by some reason you will have to help them along with some Custom Scripting. [01:19:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h19m58s) Now that we got all our items set and it has an Alias, we can start working on those links.
### Changes To Be Made In Dynamic Get - Including Alias
There's one more place we need to make a change. That is in the Dynamic Get. If you remember when we set it up we didn't include the Alias. [01:20:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m19s) I'm going to copy this(see video). I then change to another view quickly and then back to this one so that we can get the alias there. Here is the alias that we want. We don't need all these. We can just add that over there. There we go. We got the alias. Select save and close. So [01:20:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m46s)
[01:20:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m07s)
There's one more place we need to make a change. That is in the Dynamic Get. If you remember when we set it up we didn't include the Alias. I'm going to copy this(see video). I then change to another view quickly and then back to this one so that we can get the alias there. Here is the alias that we want. We don't need all these. We can just add that over there. There we go. We got the alias. Select save and close.
### Check Whether Alias Brought To page By Adding a php.var_dump
[01:20:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m46s)
We can check whether this alias is being brought to the page by adding a php.var_dump. [01:21:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h21m11s) We take all the $this>items, copy, paste it in there php.var_dump($this>items) 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. We can look and see there's the Alias and it created that slug we spoke about. We got the slug for every item and that is the first step in setting up a well-form 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, that's got a lot of things to do to get this to work. I can tell you if you want to build Components for Joomla and you want to go outside of the box and build things that are unique and completely different from what other people are doing and this is really just the basics.
### Use PHP For Creating A Link
We going to setup a href here around [01:22:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h22m41s) this name. But we are going to use php to take care of creating a link for us. Here we are simply going to say php echo. I'm going to go and show you where we get the class name for what we want to do here. Back in the code you will see that there is in the helpers class a [01:23:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m11s) file called route.php. You can open that and you'll see that you have what is now called Hello_worldHelperRoute. If you scroll down, we don't have this stage have. Oh yes we haven't added the the site view for the single record. So there are some values missing here. I should have first done that. I'll go do that now, but we'll come back to this file. 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) It's these two classes with their methods that we were going to use to build our link.
[01:22:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h22m36s)
We going to setup a href here around this name. But we are going to use php to take care of creating a link for us. Here we are simply going to say php echo. I'm going to go and show you where we get the class name for what we want to do here. Back in the code you will see that there is in the helpers class a [01:23:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m11s) file called route.php. You can open that and you'll see that you have what is now called Hello_worldHelperRoute. If you scroll down, we don't have this stage have. Oh yes we haven't added the the site view for the single record. So there are some values missing here. I should have first done that. I'll go do that now, but we'll come back to this file. 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) It's these two classes with their methods that we were going to use to build our link.
### Create Site View For The Single Record
Let's create that display Site View. So I've removed the var_dump from this view. I'm going to 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) I'm going to create another Site View. We are going to call this Greet. We can't call it greeting because like we said there is already a greeting in the front. Or Greeted that one might be better. We going to 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 going to copy the Panel Snippet and paste it in Default View. The title I'm going to make the name. The content will be the greeting. Now I don't want two of those, so I'm going to take out this one. [01:25:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m08s) I basically got one greeting setup here. There's no buttons here yet to edit it. But he will basically view one Greeting. It will also show you who setup the greeting. We can close this. We got this Greeted Site View. We can go to the Admin area [01:25:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m36s) of the Joomla Component area. I'm going to click on Edit. And actually add a Site View to the Component. Same way we did before. Can I say I want Greeted. I don't want it to have an Add Menu. It must have Has Metadata. [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. By Default it's not Public. Save and close. We'll Compile the Component again. I've compiled and install it.
[01:23:56](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h23m56s)
Let's create that display Site View. So I've removed the var_dump from this view. I'm going to save and close this. I could have set save a new. I'm going to create another Site View. We are going to call this Greet. We can't call it greeting because like we said there is already a greeting in the front. Or Greeted that one might be better. We going to 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 going to copy the Panel Snippet and paste it in Default View. The title I'm going to make the name. The content will be the greeting. Now I don't want two of those, so I'm going to take out this one. [01:25:08](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m08s) I basically got one greeting setup here. There's no buttons here yet to edit it. But he will basically view one Greeting. It will also show you who setup the greeting. We can close this. We got this Greeted Site View. We can go to the Admin area [01:25:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h25m36s) of the Joomla Component area. I'm going to click on Edit. And actually add a Site View to the Component. Same way we did before. Can I say I want Greeted. I don't want it to have an Add Menu. It must have Has Metadata. [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. By Default it's not Public. Save and close. We'll Compile the Component again. I've compiled and install it.
### Back In The Code
If we now go back to the that file I just opened previously, this Hello_worldHelperRoute and we scroll down [01:26:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h26m32s) we will see that it now has a method called greetedRoute. You basically pass it and id and it constructs the URL for you. 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 work for any view. You want to use this method and this abstract class. 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 route is also added as a helper class. This is the name of this helper class. Hello_worldHelper Route. That's the abstract class name. [01:27:39](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h27m39s)
[01:26:24](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h26m24s)
If we now go back to the that file I just opened previously, this Hello_worldHelperRoute and we scroll down we will see that it now has a method called greetedRoute. You basically pass it and id and it constructs the URL for you. 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 work for any view. You want to use this method and this abstract class. 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 route is also added as a helper class. This is the name of this helper class. Hello_worldHelper Route. That's the abstract class name.
### Back To Site View To Add Link
[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. Let's get the method name. We go back, scroll down, getGreetedRoute is the method name. We can [01:28:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h28m05s) copy it. It needs to be corresponding to the view we want to open. It's going to be a ($item->slug). 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 class. We would add the JRoute around this first method class and that would 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. We've got our own helper class of a Component. We give it a slug which then gives it to the JRouter and then echos out the link to open this item. [01:29:20](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m20s) Let's save this and compile again. To see it in action we go to the front and reload the page. When we click on one of these James, William, Sara, Koos it says not authorized to view Greeted. That means this specific group are not allowed to look at this. There 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 for some reason you didn't put that custom script in to place.
### See How Back end Generates In The Code
You can see how the back end generates some of this. If I go into the code and we go to the administrator area of the hello world component and we open [01:30:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h30m19s) views and then greetings and we open the default_body.php and we open the view.html.php. You'll see that it is grabbing some permissions to know whether it should show certain buttons. And then in default_body.php again is 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 edit the greeting. 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(see video) is a demonstration of what you want to do in the front. [01:31:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m11s) You don't want it to always show the link to the item unless the person who is viewing the site, is in the correct group of the site to be able to view the item. I'm not going to spend more time on this part because we want to 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. I'm just going to 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. In the back end I go to Options of the Hello World Component Permissions, scroll down. Again I'll see there is a new one called Greeted (site) Access, [01:31:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m58s) change this to Allowed for the Public group. Save and close out of there.
[01:29:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h29m58s)
You can see how the back end generates some of this. If I go into the code and we go to the administrator area of the hello world component and we open views and then greetings and we open the default_body.php and we open the view.html.php. You'll see that it is grabbing some permissions to know whether it should show certain buttons. And then in default_body.php again is 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 edit the greeting. 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(see video) is a demonstration of what you want to do in the front. [01:31:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m11s) You don't want it to always show the link to the item unless the person who is viewing the site, is in the correct group of the site to be able to view the item. I'm not going to spend more time on this part because we want to 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. I'm just going to 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. In the back end I go to Options of the Hello World Component Permissions, scroll down. Again I'll see there is a new one called Greeted (site) Access, [01:31:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h31m58s) change this to Allowed for the Public group. Save and close out of there.
### Quick Demonstration To Setup A Front-End
If I go back to the front and click on this link James, it opens it and it gives us the name James. It gives us the Welcome to JCB and the greetings were set by Super user. It 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 optimization here. If we didn't have an alias it would have given you one or two depending on the item ID. [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 setup a front-end that can open specific items.
[01:32:05](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h32m05s)
If I go back to the front and click on this link James, it opens it and it gives us the name James. It gives us the Welcome to JCB and the greetings were set by Super user. It loads it as we expected. You can also see in the 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 optimization here. If we didn't have an alias it would have given you one or two depending on the item ID. [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 setup a front-end that can open specific items.
### Next Step: To Make Items Editable
The next step is to make these items editable. Like I explain to you in the admin area we're already doing some of this. I'm going to just 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) 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. I'm going to copy the string(see video) and then I'm going to also copy these few lines. I'm also going to use some of these(see video).
[01:33:07](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h33m07s)
The next step is to make these items editable. Like I explain to you in the admin area we're already doing some of this. I'm going to just copy and paste most of the code from the admin area. 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. I'm going to copy the string(see video) and then I'm going to also copy these few lines. I'm also going to use some of these(see video).
### Checkout Value Needs To Be Set On Page
I realize by looking at this first area that [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(user.>id) value because we need to check the users authority on the page. We need to check whether the user is set on the page. We can go and do that and look at some code. I'm going to 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.
[01:33:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h33m57s)
I realize by looking at this first area that this checkout value needs to be set on the page. I also need to make sure about this(user.>id) value because we need to check the users authority on the page. We need to check whether the user is set on the page. We can go and do that and look at some code. I'm going to 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.
### Add The Option To Edit In Both List And Single View
[01:34:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h34m32s)
I want to add the option to edit the item in both the list as well as the single view. I'm going to 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 going to place the code in place. I'm not going to explain to much because it's the same.
### List View - Add PHP Script
In the Site view of the List area I'm going to PHP and I'm going to Add PHP (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) I'm going to paste this link in here and we see that it has this view greetings, and the task is greeting, edit. That is the task and it's going to be available in the edit variable. 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 back end. We see wither we need to grab these as well. Before grabbing them let's open the corresponding site view so we can look at some of the code. Here is the greetings. [01:35:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m55s) I'm going to open this view.html.php and we'll see that the user is already being loaded onto the page. This is the $this.>items. It is always good for you to 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 default_body.php area. We see that it's accessing the user in the same way. Using this($this.>user) 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. Then also it checks and gets the check out user details. We'll see why in a moment. But we don't have the check out user on the page. [01:37:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h37m06s)
[01:34:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h34m52s)
In the Site view of the List area I'm going to PHP and I'm going to Add PHP (custom view script). It says add PHP script to the head of the file. I'm going to paste this link in here and we see that it has this view greetings, and the task is greeting, edit. That is the task and it's going to be available in the edit variable. 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 back end. We see wither we need to grab these as well. Before grabbing them let's open the corresponding site view so we can look at some of the code. Here is the greetings. [01:35:55](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h35m55s) I'm going to open this view.html.php and we'll see that the user is already being loaded onto the page. This is the $this.>items. It is always good for you to 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 default_body.php area. We see that it's accessing the user in the same way. Using this($this.>user) 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. Then also it checks and gets the check out user details. We'll see why in a moment. But we don't have the check out user on the page.
### Update Dynamic Gets
[01:37:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h37m06s)
What we going to do it's we going to quickly also get those values by going to the Dynamic Get and making sure that those values get brought to the page as well. We go to ListGreetings and again like before we just copy all those values and just tweak away and then back. 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 View Table Selection only shows at this stage the actual values that it knows belongs to the view. I need to update this in JCB. It is a little tweak which I haven't done. So it's not showing the checked_out and checked_out by values. You can type it in. [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. The checked_out and the checked_out time, we don't need the check_out_time. Only the check_out, basically who checked it out. [01:38:43](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h38m43s) Save and close. We've updated our Dynamic Get and that means our values are on the page and we can move our code into place.
### Editing Echoing Edit Link
[01:38:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h38m57s)
We'll need to add it inside of this(Default View) for each loop since this code is working with the item itself. We've got the code in there, we are calling 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. Let's go get the rest of the code we need. So again in the admin view we going to go with this area here and just copy that(see video). We want to make a few adaptations because in the end of the day the front end is a little different from the back end. [01:39:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m54s) The back end only displays an edit view. The front-end displays a read view. We want to 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. I'm adding the item and I'm putting in a little icon which then you can click. I'm checking whether you have permission to edit [01:40:34](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h40m34s) this item. If we were to save this and refresh the homepage, it should not change anything because the public doesn't have permission to edit it at this stage. That icon should be pencil not edit. 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. 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, we change that the public is allowed to edit. Let's just do that they allowed to edit. 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 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. Our attempt to integrate or to make our items editable on the front end within the control of permission groups, has 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. 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 say that it's not permitted. [01:42:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m57s) The permissions structure is armed and will protect the item from being edited by that group. Again we gave the Public Permission to edit but now the question is can we also give it permission to create?
### Add Option To Create
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 with a link to create an item, but I'm not adding any checks around it. You basically need the same kind of check as you've using here($canDo->get9core edit') except that there are some [01:43:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m42s) shortcut. Let me show you. 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. That is to control the visibility of the button. 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. We see the button doesn't show and that is because currently we've got a component set that the public cannot 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 will see that it shows. If we click on it, it will open an area where we can create an item. Here we can set a new name [01:45:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m06s) and save and close. We get this 'Save not permitted'. This must mean that we haven't granted enough permissions for the public user to create an item. 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 need also access too before you can create an item. Let's try again. But first giving it more permissions. We've granted it all the permissions that it needs and go to the front. Now we click 'Create A Greeting' save and close. [01:45:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m53s) We have 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. 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)
[01:43:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m17s)
Going back to greetings. Let's add an option to create an item. If I go and add this button with a link to create an item, but I'm not adding any checks around it. You basically need the same kind of check as you've using here($canDo->get9core edit') except that there are some [01:43:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m42s) shortcut. Let me show you. 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. That is to control the visibility of the button. Let'05s 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. We see the button doesn't show and that is because currently we've got a component set that the public cannot 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 will see that it shows. If we click on it, it will open an area where we can create an item. Here we can set a new name [01:45:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m06s) and save and close. We get this 'Save not permitted'. This must mean that we haven't granted enough permissions for the public user to create an item. 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 need also access too before you can create an item. Let's try again. But first giving it more permissions. We've granted it all the permissions that it needs and go to the front. Now we click 'Create A Greeting' save and close. [01:45:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m53s) We have 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. 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)
### Demonstrated - List Items, Open Individual Items, Edit Items, Create New Items