80 044 Hello World Component with Joomla Component Builder Creator Extended
Amigo edited this page 2019-10-08 10:34:16 +02:00

HELLO WORLD COMPONENT WITH JOOMLA COMPONENT BUILDER CREATOR EXTENDED

Application Of Extention

00:00:00(Click on these time links to see Youtube video)

This is 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

  • Changes in one place - Compiled in all Components

00:00:41

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 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 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

00:01:57

I had build JCB for myself, and it was not intended as a community project. It has since become a community project with the code open on GitHub. 00:02:19 With only functionality in mind, I did not contemplate the complexity thereof during the development and set conventions in place which I know how to use. 00:02:43 On the surface JCB might look just like any other Component Builder, but when you start to use it and come to know some of its secrets, it is amazing how conventions, even conventions that you would use when you develop components yourself would make JCB do things that are quite amazing.

00:03:16 So you will end up to realize that JCB has a lot of functions. Most of the basic ones have been explained in the tutorials that can be found on YouTube which can be accessed from this link 'Access Tutorials'.

Need To Know - PHP - Joomla API

00:04:08

If you do not know PHP and Joomla's API you should not expect to build complex components with JCB. 00:04:44 If you do, the correct doors will open and the correct relationships can be set up to have those conventions dynamically built for you by JCB. If you are very good at PHP programming and know the Joomla API, you can simply go into the Compiler, and start reading the code. The Compilers code files are alphabetically ordered. 00:05:20 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.

Necessary to Start with the Basics

00:05:50

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

00:06:23

There are two principals to mention before we start. One is patience, the other is perseverance. Within any programming career, these aspects are invaluable. 00:06:49 This is what has made JCB possible and this is also what would make you successful in using JCB.00:07:17 It is not a component which is claimed to have no internal conflicts or inconsistencies but it is most certainly a component with which I have developed countless mini-program components which I am maintaining.

Basic Steps To Understand How To Build

        * Need Joomla Website
        * Offline or on a Server

00:08:01

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 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

00:09:06

A local developing environment is most ideal for this. By using a certain protocol, a tunnel may be set up between your desktop and live server and still have this kind of interaction of editing code live and then compiling and seeing changes. That may be done if you can manage any kind of complexity; 00:09:27 It is suggested that if JCB is installed, and there are some limitations in a shared hosting environment, to first resolve that or move development offline.

Ways To Install JCB - Download Package - URL From GitHub - Install From The Web

00:09:56

First, go to the Joomla Website and log in. Then install JCB. Simply go to 'Manage' and 'Install'. There are different ways to install JCB. A package may be downloaded, or a URL may be grabbed from GitHub, or it can also be installed from the web.00:10:20 It is listed with Joomla. If JCB is searched, it brings up JCB on the page but it would not necessarily always do that.

JCB One Of The Listed Developing Tools

00:10:35

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 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. 00:11:33 The Joomla Installer may also be used, and simply click install. How fast it will take will depend on your network. This is quite a big file, and in certain areas, it 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

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 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

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 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

00:13:34

Once a component has been set up, then you are done with what we would call the back end. 00:13:49 With JCB the back end of the component should be built first, and then only add in the front end.

Front End has not its own Database

00:13:58

The front end does not have its own Database. It pulls its data from the back end Database. Having explained some of that, let's show this in action.

JCB can be Extended

00:14:15

In JCB it ships with quite a lot of Fieldtypes. Open the Fieldtypes area. There are many Fieldtypes already setup. JCB is built in a way that it can be extended. Like SubForm 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 SubForm Fields

00:14:40

It is advisable not to use Repeatable Fields anymore. Since JCB used Repeatable Fields quite excessively, 00:14:49 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

00:15:23

Here you can see all the Fieldtypes that I have set up in JCB already. You could always add new Fieldtypes as JCB and Joomla continues to evolve. Whenever you would be confronted by a Fieldtype that needs a bit of extra tweaking within the Compiler, I would hope to be ahead of you in adding that Fieldtype if necessary. 00:15:54 With most of the time Fieldtypes extra help is not needed. It is only Fieldtypes like Subform and perhaps with some Fieldtypes like URL, Text, Tel, SQL, and Tag that help may be necessary

Fieldtypes Helps Setup Properties

00:16:14

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 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 It is most certainly Mandatory. Most of the Fieldtypes had been created already and are ready to be used.

Creating Fieldtypes

00:17:42

Most of the time you can simply start with Fields. There are already quite a few Fields, but I am going to continue as if it does not exist, and create two or three Fields that can be used in our Hello World Component.00:17:52 To create the first Field: Click on 'New', then select 'Text' as the Fieldtype. All the Field Information is brought in by Ajax from the Fieldtype.

Quick Demonstration On Adding A Fieldtype

00:18:24

To give a quick demonstration: If I click on this button(pencil), and say; change this(ValueExample) to text'tt' and save and close and return to Fields and click 'New', then select 'Text field' again.00:18:53 Three t's has been added in there. Since this whole structure has been built from the Fieldtypes Default Settings, which we just looked at. I am going to change that back quickly, and for example, put something in the Description. 00:19:22 I am 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 does this XML(field definition) structure usually populates the demo or default values that you have added when you created the Fieldtype.00:19:57 JCB ships with most Fieldtypes already in place, it appears like this is something we have done, but it is something that you can extend and even change. For example: If you know that the Text Fieldtype has more properties than we have set up, you can add more to it and simply click on this 'edit' or before creating a Field, you can go to the Field types, and open the Text Fieldtype and click on the green button and add more Properties.00:20:34 Those Properties will dynamically also appear within the area where the Fields are created. 00:20:57 Things in JCB has not been set hard into code but is movable, easy to scale and easy to customize.

Creating A Field

00:21:18

The first field that we are going to create is a Text field, which we will call 'Greetings'. Then Update the label with 'greetings' in the 'XML Field definition' area. This is what will be visible in the Database, 'greeting' (singular) is going to be the Database Name. Most of the others will be left as default. 00:21:48 Let's just maybe change the hint 'add greetings here'. Then remove the description. Take out the default text, otherwise, it will always appear.

Databases

00:22:19

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 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 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 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

00:24:46

Having created our Fieldtypes and also a Field, let's create an Admin View. Admin Views is the back end of the Component. There is a whole lot of tutorials around the web about Object Orientated Development to give some perspective into the; How should it work? What should be where? What should have its own classes? What should have its own tables? Where are we going to put what? All this preparation should be done before coming to JCB. Once you have all that planned, only then it is possible to create Fields, create Admin Views, which is your Tables which can be linked to a Component. Once that has been done, the foundation is laid of your application. 00:25:53 Now you can start to work on that which will make the front end unique.

Creating Admin Views

00:26:02

First Admin View. The System Name is to identify the View. If there be more than one View with the name greetings. For example: If you have built quite a few components that deal with Hello World, and have three or four different variations of greetings and say this is the first one. (See video) 00:26:21 By doing that it is identifiable within the drop-down list across your application of JCB. It will be seen when the greeting is later selected, that the System Name is used in the drop-down list.

Name (single record), Name (list of records)

00:26:48

There will be a 'Name(single record)' and a 'Name(list records)'. 'Single Record' is also the 'Edit View'. That is when you are looking at one record, and are editing that record in the Admin area, that is the single record. That is also what will be used when you tweak JCB to add an Edit option to the Site area of your Website. 00:27:22 Since JCB can do that on the fly, this single record would also affect the front end of your component in that case which will be demonstrated later on. I am going to call the single record 'Greeting' and the list record 'Greetings'.

Type: Read And Write

00:27:42

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

00:28:38

Give it a short description. Go to Fields and Conditions. This will be displayed: 'button to create admin field conditions will show once the Admin View is saved for the first time.' So Fields cannot be added to this Admin View if it has not been saved. That is one of the changes that came as a result of moving away from Repeatable Fields to Subform Fields. The Admin View is a Table on its own and its relationship with the Fields is also a Table on its own. At this stage, you should not click save and close first but just save once, so that it creates this Admin View in the Database.

Fields And Conditions

00:29:28

Go to Fields and Conditions. There you will be able to link, Linked Fields and create Field Conditions. We are not going to create Conditions since this is a demonstration of a very basic component.

Linked Fields

00:29:45

We're just going to create a Linked Fields. Linked Fields are the Fields that we created previously. Click on create. It is going to ask if we are sure that all our work has been saved in the Admin View. If it not and OK is clicked, it will be lost. 00:30:06 It will open an area where you can link Fields to your Admin View. This looks very similar to the pop-up in Repeatable Fields, except that it is its own View now. If the green button is clicked, it opens an area where you select the Fields that need to be used.

  • Example Name(Text) Field

00:30:30

There is the Name Field and that is a text field. We want it to show in the Admin List View and to show first in the Order in List views. I should behave as a Title and must be 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, and can then be edited. There are only two Tabs at this stage. 00:31:07 If you want to know more about the Tabs, please go through the tutorials and look up Tabs to see more on this subject. I am going to let it be Left in the Tab and in the Tab(Order in Edit) and let it be the first item. No Permissions will be added to this, but there is an Editing Permission available at this stage. 00:31:33 That would create Permissions around this Field, which can be tweaked, as to who can edit it, and who can not. This can also be controlled 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

00:31:57

The Next Field that is added, is Greetings. We want the Greetings to be in the Admin List View and want it to be second in the Order in List views, also to be Sortable and Searchable. It does not need to be a Link and should be on the Right in the Tab and to be first in Order in Edit. That is all that is necessary. Click 'Save and close'. This will link those Fields to this Admin View. If Fields and Conditions are opened again, those Fields will be seen with all the variations that we have selected; ready to use. 00:32:33 With the Admin View that has been set up, our component can be created. Click save and close or just close. No changes had been made in this view since we have returned, this area is already been saved. 00:32:59 Click 'close', but clicking 'save and close', is always the safest choice.

Creating The Component

00:33:11

Now that the Admin View is in place, the Component can be created. Click 'new'. We are going to give our Component a System Name since this is the second Hello World tutorial, called version 2. It is given a Code Name which is the same as the first one; Hello World, and its Version '2.0.0' 00:33:35 It will be necessary to add Company Names, Author, Email, Website, and Short Description.

Adding A Admin View

00:34:01

Now with those things 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 has been saved for the first time. 'Save' it. The component has been saved. Open the Admin View, it can be linked to this Component. Under Settings, there are two places where this may be done. Click on Component Admin View, and click on this 'Create component admin view for this Joomla component'. 00:34:40 Or in the Admin Views click: 'Create'. Both these buttons lead to the same place. This used to be the old way to add Admin Views to Components and that is why it has been left there. But within the new JCB after the transition away from Repeatable Fields, it can all be handled within the Admin View Tab. Just click Create. If we are sure all our work is saved; Click 'OK'. Again there is something that looks very similar to that when we were linking the Fields, except that we are dealing with the Admin View and linking Admin Views to this Component.

Clicking On Plus Button To Open First Line

00:35:25

Click on the Plus Button to open the first line. We need to link the Greeting in View. Leave the Default Icon of Joomla, there is 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. Search 'Icomoon' and you will find on Joomla's website a whole picture map of all these icons. 00:36:04 Then I most certainly want this view to be part of the Main Menu and would like an 'add record' on the Dashboard. If 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

00:36:23

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 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 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 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

00:38:10

The other great feature is this 'Keeping of History' to keep track of all the changes made to any item of Greeting. Simply tick this 'Keep History' and JCB will dynamically add all the needed structures and Joomla's 00:38:30 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

The 'Has Metadata' adds the metadata Fields to the view. You do not need to add them, it gets added just by ticking the box in the 'Has Metadata' column.

Add Access

00:38:55

This View has an Access function, here all these Access levels can be set which are Public, Special or Registered. Do you want to implement these levels of access to this view? Usually, this is used 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. More of that as we continue. If you need an Import/Export function, tick it accordingly and likewise do if we want to add an Edit/Create Site View for this Admin View. 00:39:38 If we want it to be first, then set it in the 'Order' column. This Admin View has all the features that an Admin View can have by Default in JCB. 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 in the Compiler and make sure that it remains stable this way. 00:40:15 Save and close. Now that this Admin View has been linked to the Component, we can go to Admin Views and see this Admin View as well the Icon. Click on this pencil and it will take you to the Admin View. Make sure that all your work has been saved in this area, click OK, if it is, and it opens the Admin View where we linked the Fields. 00:40:48 and You can work in the Admin View from the Component.

Adding Permissions

00:41:03

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 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 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 This will take us back to the Component where everything is still the way we left it. 00:43:04 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 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.

Installing The Component

00:44:17

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 ship-able Joomla Component Package which can be installed on any Joomla Website.

Select An Image

00:44:42

There is no image showing because a Component image has not been selected. (See video). Go back, and clear the temporary folder. 00:45:01 For example, the Demo Components Image is selected as our Hello World Component. In the Component, there is an area to select an Image. Save and close again. Go back to the Compiler and compile it again and click 'Install'. Now there is a new Component in this Joomla Website. Open in a new tab. 00:45:45 The Component has now been installed. It has a Greetings Tab and an Add Greetings Tab. There are no images selected for it. Going back to the Admin Views and then to Greetings and first click on Greetings as an Admin View. There is a place for Icons and the Add Icon. 00:46:13 Select the bucket as the 'Icon' for 'Greetings' and another bucket with a little green plus is added for 'Add a Greeting'. Click Save and Close.

'Greetings' is set up and I am going to compile it again. 00:46:39 Usually, when a change has been made, it should be compiled in the Compiler and then installed and it should then show in the Component. When it gets a little bit more advanced, we do not only look at the Component in Joomla 00:47:03 but also look at the code. The two icons are in place. If I click Add Greeting, we see the Name and Greetings. There are also all these other fields added by default. So the created and the Metadata and the Permissions are all in place. That is how you would set up a basic Hello World Component.

Hello World Configuration

00:47:34

There is a Check-in timer in Options and it can be changed to 5 hours, the one that checks in the items. The history version is enabled and set to remember 10 versions of any item created as a greeting.00:47:57 The Permission structure is in place which includes the Greeting, Access, Greetings Batch Use, Dashboard Add and so forth which are all the switches related to the greetings area.

From the Front End to The Component - How To View, Edit, Add Greetings

00:48:16

Now if the Admin area is done, continue to the front end where I will illustrate how to view greetings that were created on the front end, how to edit greetings that were created and how to add more greetings from the front end to this component. Close the components edit area.

Two Dynamic Gets Created - Return A List Of Greetings

00:48:42

First, a Dynamic Get should be created. There are two ways to get to the Dynamic Get area. One is to click on 'Add Dynamic Get' and the other way would be via the submenu and then click New. Two Dynamic Gets are needed; one to return a list of greetings and one to return a single greeting. The one Dynamic Get is going to return all the greetings that are available and published. The second one is when one of those greetings is clicked it should open only that greeting. The 'Name' is going to be used as who is being greeted, and then the greeting will only show when we click on the name and then show that individuals' greeting.

Adding Edit/create Buttons Controlled By Permissions Structure Of JCB

00:50:05

In this area is the full greeting. An Edit button is going to be added and a Create button is going to be added in the List area. These Create and Edit buttons are going to be controlled by the Permissions structure which JCB puts into your Component if it is set to do so. Setting up a Dynamic Get is quite easy.

First - Use Back-end View

00:50:23

First, use a Back-end View which is related to the component. Select that Back-end View, It shows Greetings(first). The system name is what is used in the dropdowns. Select Greetings(first). This one(getType) is going to bring back a 'getlistQuery'. We do not want any Pagination. (See video) We do not need the 'asset id'. 00:50:59 Leave the 'created by' and the 'created', take out the 'modified', the 'version' may be left. The 'hits' and the 'ordering' are fine. The greeting is most certainly not needed in a list, only the name is needed. Give it a 'Name' as identification when the Site View is set up. Call this 'List Greetings' and in brackets (Name only) so that 'weArea' will know this is what it is. Although it can be saved it is not necessary to do it.

Tweaking The Data Without Saving

00:51:47

You can just go right into tweaking the data without saving. The data tweak gives a little bit of control on the writing that JCB will do regarding this query. For example, if it should be ordered. The ordering is called 'a.ordering'. We want to order it ascending by the order set in the database.

Filter To Add

00:52:22

Another filter is added to make sure that it only returns 'a.published' items. In the 'Where' area we placed 'a.published' and select '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

Then there is a 'Joint' area which we are not going to use, but it is a very nice way of linking to other related component tables. There needs to be a relationship between the Main table and the Joint table. In the Main table click; Save & New. So another one can be done.

Creating Dynamic Get

00:53:36

The next one is going to be 'Greeting'. We would like it to be one item. 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 do not need 'Modify by', 'Version' or 'Ordering'. We could have left out the 'Hits' in the previous setup. A little tweak should be done to make sure that it does not allow someone to grab an unpublished value by just adding an ID in the URL or something. Custom Script is OK. 00:54:26 We need to add a filter. The ID is going to be used. 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 'Comparisons Operator'. It is this Filter Type that makes the item load. There are many ways to load items. Although it is a bit complex, it gives you the freedom and ability to build quite amazing things. Please go and watch the tutorial on Dynamic Get on GitHub.

Two Dynamic Gets Created - Second Return One Greeting

00:55:52

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 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 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 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

00:58:12

There are Layouts and Templates that all can work together with Site Views. (Look at tutorials on YouTube).

Site View - Greetings

  • System Name

00:58:30

I am going to build two Site Views. The first Site View is called; (System Name) 'Greetings'. Give it a Name called 'Greetings' and a Code Name 'greetings'.

  • Name In Code

00:58:55

The 'Code Name' is significant because it should not clash with 'Admin Views' that you have already created that are going to be 'Edit views' on the front since the listview is not being placed on the front of the component only the 'Edit View'. That means Edit Views' name is 'greeting'. A Code Name can not be set for the front called 'greeting' otherwise they will conflict. I am just going to use 'greeting' and for the single, 'greet'.

  • Description, Snippet

00:59:41

A short Description is placed in; 'Greetings', as well as a short heading and adding it like that, will mean that this short string(list of Greetings) will get added to your language file. That is how language strings are created. By adding the snippet(Add Language String) anywhere in JCB will create a language string.

  • Main Get/Act Upon Compilation - Dynamic Get/Look

01:00:28

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 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

01:01:42

We want the 'Listgreetings' and so this 'Listgreetings' gives us a few Snippets. Do know that the Snippets are not always accurate because it is very difficult to always know exactly how the implementation is going to work out. I am giving you a snippet as to how I expect you would use the data. You can adjust that and this is where your knowledge of PHP will come into play. 01:02:10 You should know what this and those little arrow items is there 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 and how to update its values. All this is part of your 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 have not spent much time to make this as automatic, I want to set up the back end and the Admin Views because this is what makes your component different from every other Component out there. 01:03:15 We want to encourage you to do you do a lot of preparation and thinking about Data Structures and 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 a little backdrop on the Dynamic Get and the Site View even the Custom Admin View, and its relationship and why it is like that.

  • Looping Through Items

01:03:58

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

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

01:06:23

Go to Site Views and click Create Linked Site Views. Then select 'Greeting Site View'. Indicate, 'Yes' to be able to 'Add Menu' to the front of your website with this view. It should use 'Has Metadata'. It is going to be this 'Component Default View'. Access should be controlled. We will look at that again, but I want that 'Access' that its default is 'Public'. Save and close.

Compiling The Component*

01:07:09

If we go back to compiling our Component no changes are being done to the Database.

  • When Updating Your Component It Automatically Updates The Database

If you are adding new tables, JCB will add the tables to a Sequel Update so that when you update the Component, it automatically updates the Database. But it is still important to check that it does, for there could be a reason that it assumes that it is not necessary. Therefore I have tried to put things in place so that it will pick up what you have added, either a field or a new view to the Component and that the Component now needs to increment a version and release a table update. 01:08:11 But sometimes that is not happening and then if you update your Component, the Database is not necessarily being updated. Make sure that the database is updated. For the most part, JCB will take care of that. Since this upgrade, we have only added a front end. We have not touched the Database, everything is just as before.

Compiling The Component(continue)*

01:08:41

Without any concerns, the Component can be Compiled and re-installed and then be added to the front.

NB - Default only gets set the first time a component is installed

When you add a front end Site View and set that default to being public and if it is not the first time you have installed the component then that default cannot be set to the Database because it is a default that only gets set the first time the component gets installed. 01:09:11 You can go into the components Script File and search through it to see that it is a function that is added to the Script File and only gets implemented on the first installation of the Component.

Adding The Greetings To A Site View

01:09:53

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 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

The reason is the Front Site View had been set to have Access control. Since it was not set therefore by default does not allow anyone. Now set it that it should by default be public. 01:11:49 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 this Hello World Component to update a Database and ensure that this view is public.

Manual Way To Change Access Control

01:12:13

The manual way to do this is to go to the Hello World Component, click and on 'Options'. Then go to Permissions and scroll down to the area '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 loaded as expected.

01:13:00

Add a link to James so that when you click it, will see the Greeting that James should receive. Go back to the Site Views and 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 controller issues. 01:13:27 In the front end of the Component the models for greetings.php can be opened, there is the getItems method. In it may be checked 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 into the '$item->slug'. 01:13:58 Since our greetings area does not have an alias but only has an ID. It will only end up with an ID in the slug.

Adding An Alias

01:14:11

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 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 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 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 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 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 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 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

01:19:01

Go back and install the new changes. Open a Hello World, the Alias should be seen there and if it is saved, it should dynamically add a new Alias. This has to be done for every item because the Aliases are saved or created only once the item is saved. Open the Aliases. Only ship this Component when everything in place otherwise the user has to do all these gymnastics to make sure that all the values are in place. If by some reason they have to, you will have to help them along with some Custom Scripting. 01:19:58 Now with 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

01:20:07

There is one more place where a change needs to be done. That is in the Dynamic Get. If you remember when we set it up we did not include the Alias. Copy this(follow steps on video). Then change to another view and then return to this one to get the alias there. We got the alias. Save and close.

Check Whether Alias Brought To page By Adding a php.var_dump

01:20:46

It can be checked whether this alias is being brought to the page by adding a 'php.var_dump'. 01:21:11 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 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.

01:22:36

An 'href' is set up around this name but use PHP to take care of creating a link for us by simply type 'PHPecho'. The class name is found in the code, where there is a file called; 'route.php.' in the helpers class. 01:23:11 If it is opened 'Hello_worldHelperRoute' may be seen. If you scroll down, the site view for the single record has not been added therefore some values are missing here. First, that should be done. There is a class that works together with this class. 01:23:48 It is these two classes with their methods that we are going to use to build a link.

Create Site View For The Single Record

01:23:56

Let's create that display Site View. So the 'var_dump' is removed from this view. Save and close. I could have set save a new. I'm going to create another Site View and call it 'Greet'. It can not be called 'greeting' because there is already a 'greeting' in the front. 'Greeted' may be better. By using the Panel a nice display can be made. 01:24:40 Copy the Panel Snippet and paste it in Default View. Make the title 'name'. The content will be the 'greeting'. Two of those are not necessary, so one can be removed. 01:25:08 One greeting is set up and there are no buttons here yet to edit it but we will view one Greeting. It will also show you who set up the greeting. Close this. We got this Greeted Site View and can go to the Admin area of the Joomla Component area. 01:25:36 Click on Edit and add a Site View to the Component the same way we did before and say I want 'Greeted'. I do not want it to have an Add Menu. It must have 'Has Metadata'. 01:25:59 It is not a Default View. I also want Access there. By default, it is not Public. Save and close. Compile the Component again and install it. 01:26:24

If we go back to this file 'Hello_worldHelperRoute', scroll down and see that it now has a method called, 'greetedRoute'. Pass it and the ID and it will construct the URL. This Component view does not have 'Category' so it will skip this area. But it is a function that should be able to work for any view. 01:26:54 If you want to use this method and this abstract class. Those of you that are 01:27:11 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

Return to the Site View of Greetings to add the link. Get the method name. Then go back, scroll down to, 'getGreetedRoute' which is the method name and copy it. 01:28:05 It must correspond to the view that we want to open. It is going to be a '$item->slug'. That is not the only function that is going to be called but also the JRoute class. 01:28:40 We would add the JRoute around this first method class and that would add the other values to the URL that is required.01:29:01 We have our helper class of the Component and then give it a slug which gives it to the JRouter and then echos out the link to open this item. 01:29:20 Save this and compile it again. To see it in action, go to the front and reload the page. If one of these names is clicked; James, William, Sara, and Koos it indicates that it is not authorized to view Greeted. That means a specific group is not allowed to look at Greeted. There are ways to prevent the link from showing up in the first place. 01:29:51 But this is because of, that for some reason you did not put that custom script into place.

See How Back end Generates In The Code

01:29:58

You can see how the back end generates some of this. If we go into the code and go to the administrator area of the Hello World Component and open 'views' and then 'greetings' and we open the 'default_body.php' and we open the 'view.html.php'. It is seen that it is grabbing some permissions to know whether it should show certain buttons. In 'default_body.php' again is setting up some permissions to see whether you are allowed to edit the greeting. 01:30:48 If not, it just echoes the name. The link is not shown. So this area here(see video) is a demonstration of what you want to do in the front. 01:31:11 You do not 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. 01:31:31

Go back into the Admin View in the Admin area and change the permissions that the actual public could still open this view for now. In the back end, go to Options of the Hello World Component Permissions, scroll down. Again there is a new one called 'Greeted' (site) Access, change this to 'Allowed' for the Public group. Save and close.

Demonstration To Setup A Front-End

01:32:05

Return to the front and click on this link 'James', it opens and gives us the name 'James'. It gives us the Welcome to JCB and the greetings were set by Superuser. It loads it as expected. You can see in the URL that this demo site of mine is not a full search engine friendly setup, but it already generates that this is a 'greet' to James. The name James appears here because of the slug. The slug is used to generate the search engine optimization. If we did not have an alias it would have given one or two depending on the item ID. 01:32:58 That is how to set up a front-end that can open specific items.

Next Step: To Make Items Editable

01:33:07

The next step is to make these items editable. I am going to copy and paste most of the code from the Admin area and to copy the string(see video) as well as these few lines and use some of these(see video).

Checkout Value Needs To Be Set On Page

01:33:57

In the first area, this checkout value needs to be set on the page. Make sure about this(user.>id) value because the user's authority should be checked on the page. Check whether the user is set on the page. I am going to move some of this code and go to the front end of the code area.

Add The Option To Edit In Both List And Single View

01:34:32

The option to edit the item is added in both the List as well as the Single view. It is done in the List view first and then the code is put in place in the Single view.

List View - Add PHP Script

01:34:52

In the Site view of the List area, I am going to PHP and add PHP (custom view script). It says add PHP script to the head of the file. Paste this link in here and it may be seen that it has this view 'greetings', and the task is 'greeting edit'. That is the task and it is going to be available in the edited variable. That is the first part of the code we want up on the page. 01:35:29 Now for the rest of it go back to the Admin View again, the back end. We need to grab these as well( follow on video). Before grabbing them let's open the corresponding site view to look at some of the code. Here are the 'greetings'. 01:35:55 Open this 'view.html.php' and 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 does not work and how to fix it.

01:36:29 Since the 'user' is on the page and it is seen in the Site Admin area that it is accessing the user in the same way. Using this($this.>user) as an object and ask him whether it has authority on the core 'manage' to check-in. 01:36:48Then it also checks and gets the checkout user details. The checkout user is not on the page.

Update Dynamic Gets

01:37:06

We are going to get those values by going to the Dynamic Get and make sure that those values get brought to the page as well. Go to 'ListGreetings' and again like before copy all those values and just tweak away and then back. The values that are needed to make sure are not by itself added to the selection. (See Video) 01:37:44 You can add the values that are needed because you know it is in the Database. 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 by a little tweak which I have not done. So it is not showing the 'checked_out' and 'checked_out by' values. You can type it in. 01:38:16 Those values will also be brought to the front of this view. The 'checked_out' and the 'checked_out time', we do not need the 'check_out_time'. Only the 'check_out', basically who checked it out. 01:38:43 Save and close. The Dynamic Get has been updated and that means the values are on the page and can move our code into place.

01:38:57

Add it in the 'Default View' for each loop since this code is working with the item itself. With the code in there, the user is called, and check the item 'check_out'. 01:39:21 Make sure the user 'id' is 0. Check whether to 'check_out' user. To get the rest of the code go to the Admin View to this(follow on video) area and just copy that. A few adaptations are necessary because the front end is a little different from the back end. 01:39:54 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 that I have done here. I am editing 'echoing' the edit link. I am adding the item and put in a little icon that you can click. Then checks whether you have permission to edit this item. 01:40:34 If we were to save this and refresh the homepage, it should not change anything because the public does not have permission to edit it at this stage. That icon should be 'pencil' not 'edit'. Save this and compile it to see it in action. Install it and reload the home page and as you can see it does not show those little buttons. If we go to the back end and go to options, we change that the public is allowed to edit. Let's do that so that they are allowed to edit. Open the front again. We now see that it shows the edit pencil. 01:41:48 If we click on that, we see that it opens the edit area where it can now add the exclamation. Click on save. Save and close. It tells us that the message was saved successfully. 01:42:12 If the greeting is opened, it can be seen that it 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 the permissions are revoked and the page refreshed those links will be gone. 01:42:35 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 indicate that it is not permitted. 01:42:57 The permissions structure is armed and will protect the item from being edited by that group. The Public is allowed to edit but can we also permit it to create?

Add Option To Create

01:43:17

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 do not add any checks around it. You need the same kind of check as you have used ($canDo->get9core edit') except that there is some shortcut. 01:43:42 Around the button, PHP has been added that checks the user's authority to create. If 'Yes' then it will show the button if 'No' the button will not show. That is to control the visibility of the button. Save this and then compile and install to see it in action. 01:44:11 The button does not show and that is because currently a component is set that the public cannot create. If creating for the public is allow and we refresh the page. 01:44:40 It shows and if we click on it, it will open an area where an item can be created. Here a new name can be set, save and close. 01:45:06 Then there is this 'Save not permitted'. This must mean that not enough permissions have been granted for the public user to create an item. Giving it the option to create an item is not enough because there are fields that you need also access too before you can create an item. 01:45:28 Try again by first giving it more permissions. Granted it all the permissions that it needs and go to the front and click 'Create A Greeting', then save and close. 01:45:53 The item has been saved, can edit the item again, then close, and if it is viewed, it is all working as expected.

Demonstrated - List Items, Open Individual Items, Edit Items, Create New Items

In this tutorial, it has been demonstrated how to create a Hello World Component. List its items, open individual items, edit those items, as well as creating new items. All based on the permission structures of the Component. 01:46:40 If these permissions are changed back to 'not allowed' and now refresh the front, only the items can be viewed. Even more, if we go back and want to control the actual viewing of the Greeted items, that it should not be visible to the public but maybe only to managers, that is possible. 01:47:06 You can manage that kind of control over your items without a lot of custom code. If you click on it, it will tell you; 'don't have the authority to view it'. You can add Custom Scripting to remove the link that it does not even look clickable if the person does not have access to view it. 01:47:32 If you have any issues, please go to GitHub. 01:49:58 First check out the wiki page, check the tutorials, you are most welcome to open an issue. Thank you.