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

Amigo 2019-08-24 15:09:52 +02:00
parent 2311077583
commit 81d8058bac
1 changed files with 18 additions and 18 deletions

@ -10,7 +10,7 @@ This is a tutorial on how to build a Hello World Component with Joomla Component
[00:00:41](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m41s)
For example: Since there are a lot of concepts in components that are built for Joomla, which may be called Conventions or Boilerplate Implementation. These things are always the same. I wanted something like a wireframe that could just take care of that for me all the time. 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 25 hours.[00:01:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m09s) Even if Joomla was to change, to be able to make a change in one place, and then compile it into all the components that I have developed. Then have them run stable again on Joomla, instead of having to go to every one of those components. We have gone beyond developing the most basic parts of a Component and ventured into some of its complexities.[00:01:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m40s) That is why showing a Hello World Component being built by Joomla Component Builder. It is going to end up being quite an advanced Component.
For example: Since there are a lot of concepts in components that are built for Joomla, which may be called Conventions or Boilerplate Implementation. These things are always the same. I wanted something like a wireframe that could just take care of that for me all the time. 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 25 hours.[00:01:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m09s) Even if Joomla was to change, to be able to make a change in one place, and then compile it into all the components that I have developed. Then have them run stable again on Joomla, instead of having to go to every one of those components. We have gone beyond developing the most basic parts of a Component and ventured into some of its complexities. [00:01:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m40s) That is why showing a Hello World Component being built by Joomla Component Builder. It is going to end up being quite an advanced Component.
### Become A Community Project
@ -31,7 +31,7 @@ If you do not know PHP and Joomla's API you should not expect to build complex c
[00:05:50](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s)
It is necessary to start with the basics. That is to build a Hello World Tutorial, in order to be able to combine the different concepts that are required for a component for it to be fully functional, and portable, and useful.
It is necessary to start with the basics. That is to build a Hello World Tutorial, to be able to combine the different concepts that are required for a component for it to be fully functional, and portable, and useful.
**Patience and Perseverance**
@ -46,7 +46,7 @@ There are two principals to mention before we start. One is patience, the other
[00:08:01](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m01s)
The basic steps. You would need a Joomla website. This Joomla website would preferably be on a developing environment, which is either offline or on a server which is not necessarily used in production. [00:08:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) Not because JCB itself is unsafe. It is simply just more convenient. If it is offline, the code can be opened in your IDE. JCB has the feature to extract this customized code out of your component and put it back on the compilation, a feature that does exist but which will not be discussed during this tutorial.
The basic steps. You would need a Joomla website. This Joomla website would preferably be in a developing environment, which is either offline or on a server which is not necessarily used in production. [00:08:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m30s) Not because JCB itself is unsafe. It is simply just more convenient. If it is offline, the code can be opened in your IDE. JCB has the feature to extract this customized code out of your component and put it back on the compilation, a feature that does exist but which will not be discussed during this tutorial.
### Local Environment Is Ideal
@ -70,13 +70,13 @@ If you do not find a Component in the search, this 'Component Builder' is the Co
[00:11:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s)
Now that JCB is installed there are some things that need to be understood concerning the way most Joomla Components are constructed. We are going to build a Component called 'Hello World'. The way to set up a component is to first understand Field Types. [00:12:31](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m31s) Then the Fields need to be set up and then the Views that are needed in your Component.
Now that JCB is installed some things need to be understood concerning the way most Joomla Components are constructed. We are going to build a Component called 'Hello World'. The way to set up a component is to first understand Field Types. [00:12:31](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m31s) Then the Fields need to be set up and then the Views that are needed 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 is called Admin Views. Admin Views have Fields and Fields are the Database Columns. Admin Views are the Database Tables, [00:12:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m59s) Fields are the Database Columns and these are the Field Types(Please see video). There is a Text Field, Radio, List, Multiple Selection, Checkbox, a Date Field. There are many types of Fields. Each Field independently is linked to a type, but there are some Database Settings within each Field as it gets linked into the Admin View since the Fields form the Columns of the Tables of the Admin Views. This is how a Component is set up.
These Views also map back to the database. These are what are called Admin Views. Admin Views have Fields and Fields are the Database Columns. Admin Views are the Database Tables, [00:12:59](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m59s) Fields are the Database Columns and these are the Field Types(Please see video). There is a Text Field, Radio, List, Multiple Selection, Checkbox, a Date Field. There are many types of Fields. Each Field independently is linked to a type, but there are some Database Settings within each Field as it gets linked into the Admin View since the Fields form the Columns of the Tables of the Admin Views. This is how a Component is set up.
### First Build the Back End then Add in the Front End
@ -100,7 +100,7 @@ In JCB it ships with quite a lot of Fieldtypes. Open the Fieldtypes area. There
[00:14:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m40s)
It is advisable not to use Repeatable Fields anymore. Since JCB used Repeatable Fields quite excessively, [00:14:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m49s) and due to the fact that Joomla is now discontinuing this Fieldtype, we had to migrate all of the Repeatable Fields to SubForm Fields. Part of the reason why I am redoing the Hello World tutorial is because of the fact that Sub Forms are now being used all across JCB and there have been a few changes in implementation.
It is advisable not to use Repeatable Fields anymore. Since JCB used Repeatable Fields quite excessively, [00:14:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m49s) and since Joomla is now discontinuing this Fieldtype, we had to migrate all of the Repeatable Fields to SubForm Fields. Part of the reason why I am redoing the Hello World tutorial is because Sub Forms are now being used all across JCB and there have been a few changes in implementation.
### Add New Fieldtypes
@ -112,7 +112,7 @@ Here you can see all the Fieldtypes that I have set up in JCB already. You could
[00:16:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m14s)
The way a Fieldtype work is that it helps you set up what is known as the Properties. The property has a Name, it has a Default value, it is either Adjustable or not Adjustable. It is Mandatory or not Mandatory and Translatable. It can be given a Description, that when the Fieldtype is used 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 a Fieldtype is opened that has already been created like the Text field, it may be seen 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, but if it is adjustable, it can be ticked. [00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) It is most certainly Mandatory. Most of the Fieldtypes had been created already and are ready to be used.
The way a Fieldtype work is that it helps you set up what is known as the Properties. The property has a Name, it has a Default value, it is either Adjustable or not Adjustable. It is Mandatory or not Mandatory and Translatable. It can be given a Description, that when the Fieldtype is used 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 implementation of Fieldtypes. If a Fieldtype is opened that has already been created like the Text field, it may be seen 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, but if it is adjustable, it can be ticked. [00:17:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m18s) It is most certainly Mandatory. Most of the Fieldtypes had been created already and are ready to be used.
### Creating Fieldstypes
@ -135,7 +135,7 @@ The first field that we are going to create is a Text field, which we will call
[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, not all of them are going to be this size. It is up to you to decide what kind of Text Field this is going to be. A bit more knowledge about MySQL and Databases is necessary to effectively use this. [00:22:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m49s) If you do not know what would be the best for a Text Field or a Date Field, Google that or simply look at Joomla's own implementation. It has an article Manager, and you can go into its XML Database and look at what Database Values was used and just use the same whatever be the case. [00:23:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m14s) Because these values are all movable, and by setting them wrong, could break things. Having created our first field, we can 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 does not matter if it is already linked to the Demo Component. Although, if it is changed, it will affect both Components.
Now in regards to the Database, that is what these features are all about. Since Text Fields can differ, not all of them are going to be this size. It is up to you to decide what kind of Text Field this is going to be. A bit more knowledge about MySQL and Databases is necessary to effectively use this. [00:22:49](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m49s) If you do not know what would be the best for a Text Field or a Date Field, Google that or simply look at Joomla's implementation. It has an article Manager, and you can go into its XML Database and look at what Database Values were used and just use the same whatever be the case. [00:23:14](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m14s) Because these values are all movable, and by setting them wrong, could break things. Having created our first field, we can 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 to any Admin View and therefore belong to any Component, it does not matter if it is already linked to the Demo Component. Although, if it is changed, it will affect both Components.
### Creating an Admin View - Preparations - Object Orientated Development
@ -159,7 +159,7 @@ There will be a 'Name(single record)' and a 'Name(list records)'. 'Single Record
[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 on the Type table. If this is a 'read' only, it means that the data is in this Admin area can not be changed via Joomla. Unless you have 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. This turns all the fields in the area as read-only, and if an attempt is made to change them, they never get submitted to the Database. Leave it always by Default as read and write.
We want to have the ability to read and write on the Type table. If this is a 'read' only, it means that the data is in this Admin area can not be changed via Joomla. Unless you have 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. This turns all the fields in the area as read-only, and if an attempt is made to change them, they never get submitted to the Database. Leave it always by Default as read and write.
### Short Description
@ -213,7 +213,7 @@ Click on the Plus Button to open the first line. We need to link the Greeting in
[00:36:23](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m23s)
The Auto Check-in feature. When a record is created that is stored in the Database and someone else comes and wants to edit that record, and 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 that it is not available, it has been checked out. [00:36:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m58s) Apparently this check-out may be problematic because if people do not save, and open it may be to have a look at it, and then instead of clicking cancel or close, they just click back. The item does not get checked back into the database.[00:37:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m19s) The Auto Check-in feature is a nice add-on that JCB has set in place, which you can set that an item which is 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, and have to go to every single view will be cumbersome. Simply click whether you would like this and if Joomla makes a change that we need to know and adapt this feature we just change it in the Compiler and it immediately compiles correctly all the components mapped in it.
The Auto Check-in feature. When a record is created that is stored in the Database and someone else comes and wants to edit that record, and 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 that it is not available, it has been checked out. [00:36:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m58s) this check-out may be problematic because if people do not save, and open it may be to have a look at it, and then instead of clicking cancel or close, they just click back. The item does not get checked back into the database.[00:37:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m19s) The Auto Check-in feature is a nice add-on that JCB has set in place, which you can set that an item which is 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, and have to go to every single view will be cumbersome. Simply click whether you would like this and if Joomla makes a change that we need to know and adapt this feature we just change it in the Compiler and it immediately compiles correctly all the components mapped in it.
### Keeping Of History - Feature
@ -237,7 +237,7 @@ This View has an Access function, here all these Access levels can be set which
[00:41:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h41m03s)
I am adding some Permissions to demonstrate the Permission Structure regarding the front end Management of Editing these items. I am 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 is 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. 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) The code really tells you what has been done. There are many ways to learn how JCB does things when you make changes and then to compile the component and to look at what has changed. Usually using something like Git will be very useful in discovering the changes. There is also a way for you to know where in the Compiler's specific code is being created which I will show you as we continue.
I am adding some Permissions to demonstrate the Permission Structure regarding the front end Management of Editing these items. I am 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 is 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. 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) The code tells you what has been done. There are many ways to learn how JCB does things when you make changes and then to compile the component and to look at what has changed. Usually using something like Git will be very useful in discovering the changes. There is also a way for you to know where in the Compiler's specific code is being created which I will show you as we continue.
Since changes were made, save and close it. [00:42:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h42m36s) This will take us back to the Component where everything is still the way we left it. [00:43:04](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m04s) In the demonstration of a Hello World Component we have done quite enough regarding the back end. All that now remains is to compile. Click Save and Close, go to the Compiler and select the Component and Compile. That means that 9000 lines of code have just been written, 51 folders and 122 files were created.[00:43:36](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h43m36s) If we had to manually write all the classes and tables and stuff without the help of any boilerplate tool or wire script, it will take us 25 hours to do it. Just here JCB has saved you a lot of time.
@ -314,7 +314,7 @@ Please go and watch the tutorial on Dynamic Get on GitHub.
[00:55:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h55m52s)
In the Dynamic Get all the values are selected that we want and can limit it. The tweak is in place and the limiting factors. It is not necessary to join it to any other tables, these values simply need to be returned.[00:56:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m09s) We could have added the username values if we wanted to. We want it to show who created this and say 'Created by', go to 'Joint', click on the 'Joint Database Tables' not 'Joint View Tables' because we want to use the 'User table' and want a single item returned and on 'Field' it will be 'a.created_by' and in the 'Joint Field' it will be 'b.id'. The 'Username' is needed but not the ID, it is already there, so only the 'user_name' is necessary. [00:57:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m19s) Use 'greeted_by', it is the one sending the greeting. Save and close. Now there is two 'Dynamic Gets', a 'Listgreeting', and a 'greeting'. This is what you need to build first. Look in the Database to get the necessary data for the page. [00:57:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m54s) What would you want the people to see on the page? By that determine what data you are going to use from the Database and give identifiable system names because the next thing to do is to create a Site View.
In the Dynamic Get all the values are selected that we want and can limit it. The tweak is in place and the limiting factors. It is not necessary to join it to any other tables, these values simply need to be returned. [00:56:09](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h56m09s) We could have added the username values if we wanted to. We want it to show who created this and say 'Created by', go to 'Joint', click on the 'Joint Database Tables' not 'Joint View Tables' because we want to use the 'User table' and want a single item returned and on 'Field' it will be 'a.created_by' and in the 'Joint Field' it will be 'b.id'. The 'Username' is needed but not the ID, it is already there, so only the 'user_name' is necessary. [00:57:19](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m19s) Use 'greeted_by', it is the one sending the greeting. Save and close. Now there are two 'Dynamic Gets', a 'Listgreeting', and a 'greeting'. This is what you need to build first. Look in the Database to get the necessary data for the page. [00:57:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h57m54s) What would you want the people to see on the page? By that determine what data you are going to use from the Database and give identifiable system names because the next thing to do is to create a Site View.
### Create A Site View
@ -345,7 +345,7 @@ A short Description is placed in; 'Greetings', as well as a short heading and ad
[01:00:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m28s)
At the Main Get, you can select the 'Listgreetings'(name only). The distinct functions of the Main Get and a Dynamic Get are that you will act upon the one in the compilation and the other one is only to view. So if you end up here(Looking) and click save, it will not play any role whatsoever in the compilation. It will play a role when a JCB Package is exported but that is a different subject which will not be dealt with here. Good practice would be that these two, Main Get and Dynamic Get would be the same. Since you can add Custom Gets, but there are not any Custom Gets set up right now, so none can be selected, but you can add more than just your normal Main Get to a Site View.[01:01:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m17s) You can add the Main Get and then a bunch of Custom Gets which brings a large amount of data to the page from different variations of relationships.
At the Main Get, you can select the 'Listgreetings'(name only). The distinct functions of the Main Get and a Dynamic Get are that you will act upon the one in the compilation and the other one is only to view. So if you end up here(Looking) and click save, it will not play any role whatsoever in the compilation. It will play a role when a JCB Package is exported but that is a different subject that will not be dealt with here. Good practice would be that these two, Main Get and Dynamic Get would be the same. Since you can add Custom Gets, but there are not any Custom Gets set up right now, so none can be selected, but you can add more than just your normal Main Get to a Site View.[01:01:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m17s) You can add the Main Get and then a bunch of Custom Gets which brings a large amount of data to the page from different variations of relationships.
* ### Listgreetings / Give Snippets
@ -357,13 +357,13 @@ We want the 'Listgreetings' and so this 'Listgreetings' gives us a few Snippets.
[01:03:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h03m58s)
By looping through those items, these two strings that have been found is all we need. A ListView may be selected. ( _We are busy working on adding the Bootstrap Library to JCB. At the moment we got UIkit version 2 linked to JCB and I have selected the List option for this Uikit. Uikit is a library developed by YOOtheme. Bootstrap has been decided on and so we are migrating to Bootstrap_ ). Loop over the items. Nothing is yet clickable, nothing is editable. It is only an introduction to Site Views. Save and close.
By looping through those items, these two strings that have been found are all we need. A ListView may be selected. ( _We are busy working on adding the Bootstrap Library to JCB. At the moment we got UIkit version 2 linked to JCB and I have selected the List option for this Uikit. Uikit is a library developed by YOOtheme. Bootstrap has been decided on and so we are migrating to Bootstrap_ ). Loop over the items. Nothing is yet clickable, nothing is editable. It is only an introduction to Site Views. Save and close.
### Back To Component Add Site View
[01:05:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m18s)
Now a Site View is going to be added to our Component. It might be asked why the Component is not added to the Site View when the Site View has initially been created. I have considered such a possibility, but because of Database relationships and other reasons, felt that a better approach would be to link the Site Views at the Component area, instead of at the Site area. This gives us the option to use Site Views quite easily within other Components.
Now a Site View is going to be added to our Component. It might be asked why the Component is not added to the Site View when the Site View has initially been created. I have considered such a possibility, but because of Database relationships and other reasons, I felt that a better approach would be to link the Site Views at the Component area, instead of at the Site area. This gives us the option to use Site Views quite easily within other Components.
### Creating A Site View
@ -394,7 +394,7 @@ When you add a front end Site View and set that default to being public and if i
[01:09:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m53s)
Before Greetings can be added to the Site Menu let us first write a few greetings. With at least four Greetings in place, continue then and add that ListView to a Front end Site View. Then go to Menus and to Main Menu. Select the Menu Type. Click on the previous Component; 'Hello World Greetings'. 'Greeting' is set as the HOME of this website. Save and close. [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There are HOME and Hello World Greetings. That should mean that if we click on this preview(demonstration button) of the front end of the Site, the Greetings should be seen. It will show that 'The page isn't redirecting properly'.
Before Greetings can be added to the Site Menu let us first write a few greetings. With at least four Greetings in place, continue then and add that ListView to a Front end Site View. Then go to Menus and Main Menu. Select the Menu Type. Click on the previous Component; 'Hello World Greetings'. 'Greeting' is set as the HOME of this website. Save and close. [01:10:54](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m54s) There are HOME and Hello World Greetings. That should mean that if we click on this preview(demonstration button) of the front end of the Site, the Greetings should be seen. It will show that 'The page isn't redirecting properly'.
### Set Front Site View To Have Access Control
[01:11:13](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h11m13s)
@ -418,7 +418,7 @@ Add a link to James so that when you click it, will see the Greeting that James
[01:14:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m11s)
Add an alias to the Greeting. There is a shortcut to the Fields linked to an Admin area. It is this little icon below Greetings. We want to add another Field called Alias. In Fields there is already a Field called Alias, simply use that Field. Go back to the Admin Views and click on this shortcut icon below Greetings to add fields. [01:14:52](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h14m52s) Click the green plus button and add an Alias. Now (alignment) both of these Above Tabs are moved. An Alias is created in the second line. In Greetings, make it full-width Alignment. [01:15:18](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m18s) The Greetings will also be edited so that it is no longer a text field but a text area. With all in its place, Save and Close. Open the Greetings in Fields. Since there are some values that I want to stay the same, I am going to select the XML Definition and copy it. [01:15:51](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h15m51s)
Then select 'Textarea' and paste that first XML in here, only in order to remove it again since it is just to copy and 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 not change the Type because the Type at the top of the page needs to correspond with the Type in the XML. Changing the type in the XML will not work. Keep the Label the same. We want to add 'greetings' as a description. We do not want to default text. [01:16:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m57s) Add the hint back again. We do not need any of these other fields, just remove them and do not want the filter to be set to 'raw'. We would rather use the word string since we do not want any HTML at this stage in our greetings. If you want HTML now in the greeting you can use the Save HTML. It is not on 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) The 'textarea' is in place and I am going to add 'class.'text_area span 12'. It is not certain how long that will be there as a class. Save and close. [01:18:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m11s) Since not any of the Database values with this text field had changed, there should not be any issues. But a new text field had been added. If the Component gets compiled in the Compiler, it may be seen that it dynamically incremented the version 2_0_1. If we go to the Component without installing, you will see that it has not updated the view because this was open. Before doing anything I would suggest that the view should be reopened and the page refreshed so that the changes can show.
Then select 'Textarea' and paste that first XML in here, only to remove it again since it is just to copy and 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 not change the Type because the Type at the top of the page needs to correspond with the Type in the XML. Changing the type in the XML will not work. Keep the Label the same. We want to add 'greetings' as a description. We do not want to default text. [01:16:57](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h16m57s) Add the hint back again. We do not need any of these other fields, just remove them and do not want the filter to be set to 'raw'. We would rather use the word string since we do not want any HTML at this stage in our greetings. If you want HTML now in the greeting you can use the Save HTML. It is not on 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) The 'textarea' is in place and I am going to add 'class.'text_area span 12'. It is not certain how long that will be there as a class. Save and close. [01:18:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h18m11s) Since not any of the Database values with this text field had changed, there should not be any issues. But a new text field had been added. If the Component gets compiled in the Compiler, it may be seen that it dynamically incremented the version 2_0_1. If we go to the Component without installing, you will see that it has not updated the view because this was open. Before doing anything I would suggest that the view should be reopened and the page refreshed so that the changes can show.
### Install The New Changes
@ -435,7 +435,7 @@ There is one more place where a change needs to be done. That is in the Dynamic
[01:20:46](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h20m46s)
It can be checked 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 return to the Compiler. 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. The 'Alias' may be seen and that it created a slug. We got the slug for every item and that is the first step in setting up a well-formed link for opening one of these items.
It can be checked 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 return to the Compiler. Compile this again and install it. 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. The 'Alias' may be seen and that it created a slug. We got the slug for every item and that is the first step in setting up a well-formed link for opening one of these items.
### Use PHP For Creating A Link