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

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

Amigo 2019-08-24 14:50:49 +02:00
parent a1984f1cf7
commit 875e23350d
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@ The basic steps. You would need a Joomla website. This Joomla website would pref
[00:09:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s) [00:09:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m06s)
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 are able to manage any kind of complexity; [00:09:27](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) 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. 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m27s) 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 ### Ways To Install JCB - Download Package - URL From GitHub - Install From The Web
@ -64,7 +64,7 @@ First, go to the Joomla Website and log in. Then install JCB. Simply go to 'Mana
[00:10:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m35s) [00:10:35](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m35s)
If you do not find a Component in the search, this 'Component Builder' is the Component. Then you could go down to an area called 'Tools', and then 'Developing Tools'. [00:11:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) JCB is one of the listed Developing Tools. Here it is only listed as a Component Builder. You can click on that, and simply click install. This 'Install' will then grab a URL from GitHub. [00:11:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m33s) The Joomla Installer may also be used, and simply click install. How fast it will take will depend on your own network. This is quite a big file, and in certain areas, it might be a limitation if used outside of a local developing environment. If you do not find a Component in the search, this 'Component Builder' is the Component. Then you could go down to an area called 'Tools', and then 'Developing Tools'. [00:11:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m06s) JCB is one of the listed Developing Tools. Here it is only listed as a Component Builder. You can click on that, and simply click install. This 'Install' will then grab a URL from GitHub. [00:11:33](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m33s) 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 ### Need To Understand and Setup Components: Field Types, Fields, Views
@ -509,22 +509,24 @@ We are going to get those values by going to the Dynamic Get and make sure that
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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m21s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m54s) The back end only displays an edit view. The front-end displays a read view. We want to make it a little different. 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m21s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h39m54s) The back end only displays an edit view. The front-end displays a read view. We want to make it a little different.
You can pause the video to see some of the things 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h40m34s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h41m48s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m12s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m35s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m57s) The permissions structure is armed and will protect the item from being edited by that group. The Public is allowed to edit but can we also permit it to create? <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h40m34s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h41m48s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m12s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m35s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h42m57s) The permissions structure is armed and will protect the item from being edited by that group. The Public is allowed to edit but can we also permit it to create?
### Add Option To Create ### Add Option To Create
[01:43:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m17s) [01:43:17](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m17s)
Going back to greetings. Let's add an option to create an item. If I go and add this button with a link to create an item, but I'm not adding any checks around it. You need the same kind of check as you've used here($canDo->get9core edit') except that there is some [01:43:42](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m42s) shortcut. Let me show you. Around the button, we added this PHP that checks the user's authority to create for the core of this component. If yes then it will show the button, if no the button will not show. That is to control the visibility of the button. Let'05s save this and then compile and install [01:44:11](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m11s) to see it in action. We see the button doesn't show and that is because currently, we've got a component set that the public cannot create. If we allow creating for the public [01:44:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m40s) and we refresh the page. You will see that it shows. If we click on it, it will open an area where we can create an item. Here we can set a new name [01:45:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m06s) and save and close. We get this 'Save not permitted'. This must mean that we haven't granted enough permissions for the public user to create an item. Giving it the option to create an item is not enough because there are fields that [01:45:28](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m28s) you need also access too before you can create an item. Let's try again. But first giving it more permissions. We've granted it all the permissions that it needs and go to the front. Now we click 'Create A Greeting' save and close. [01:45:53](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m53s) We have saved the item, we can again edit the item, we can close, and we can view, as you can see it's all working as expected. Our Hello World tutorial is nearly at its end. [01:46:16](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m16s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h43m42s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m11s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h44m40s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m06s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m28s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h45m53s) 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 ### Demonstrated - List Items, Open Individual Items, Edit Items, Create New Items
We have within this tutorial demonstrated to you 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 permissions of structures of the Component. [01:46:40](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m40s) If we were to change these permissions back to not allowed and we now refresh the front, we'll see that we can only view the items. Even more, if we go back and we want to control the actual viewing of the Greeted items, not be visible to the public but maybe only to managers, we could do that. [01:47:06](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m06s) 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 doesn't even look clickable if the person doesn't have access to view it. [01:47:32](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m32s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h46m40s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m06s) 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](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h47m32s) <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
We have gone so far over the time trying to demonstrate to you some of the basic principles of setting up a Hello Component in JCB. I trust you've enjoyed this tutorial. By far it doesn't usually take this long to build a Hello World Component. There is an older tutorial where we managed to build a Hello World Component in a very shorter time. [01:48:02](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m02s) I illustrated and demonstrated and explain it a little more here to help you guys along to build components with JCB and that you'd realize that JCB is a very powerful application. I mean I haven't even gone to the code this time, and shown you all that it's written, but I mean just from the compiler we already got 13000 lines of code. Which would have taken you 5-8 hour days to write. [01:48:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m37s) Which is about 39 hours and I think for a basic component that's quite a lot of code and it's because that it's already integrating a lot of permissions structures and version control. I mean if I was to open the Greetings and open James, [01:49:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m03s) remember we added that little exclamation mark. We could check the version. We can see the changes and when it was made. We can review some of the previous versions and we can even go back to those versions. That kind of integration with your History Component is done automatically by just adding history. And so is many of the other features [01:49:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m30s) that JCB is adding to your Component. Like export and import of data. Batch changes that you can make. As well as a whole lot of other concepts that are beyond the scope of what we had time for today. Well enjoy coding and yes if you have any issues, please go to GitHub. [01:49:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m58s) First check out the wiki page, check the tutorials and if you think you've discovered a bug, you're most welcome to open an issue and we'll see what we can do in trying to resolve that for you. We would like to invite other PHP Programmers to get involved in the JCB GitHub [01:50:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h50m22s) Community and help us improve JCB so that it can become a home for us to manage the troubled waters of open-source development. Thank you. We have gone so far over the time trying to demonstrate to you some of the basic principles of setting up a Hello Component in JCB. I trust you've enjoyed this tutorial. By far it doesn't usually take this long to build a Hello World Component. There is an older tutorial where we managed to build a Hello World Component in a very shorter time. [01:48:02](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m02s) I illustrated and demonstrated and explain it a little more here to help you guys along to build components with JCB and that you'd realize that JCB is a very powerful application. I mean I haven't even gone to the code this time, and shown you all that it's written, but I mean just from the compiler we already got 13000 lines of code. Which would have taken you 5-8 hour days to write. [01:48:37](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h48m37s) Which is about 39 hours and I think for a basic component that's quite a lot of code and it's because that it's already integrating a lot of permissions structures and version control. I mean if I was to open the Greetings and open James, [01:49:03](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m03s) remember we added that little exclamation mark. We could check the version. We can see the changes and when it was made. We can review some of the previous versions and we can even go back to those versions. That kind of integration with your History Component is done automatically by just adding history. And so is many of the other features [01:49:30](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m30s) that JCB is adding to your Component. Like export and import of data. Batch changes that you can make. As well as a whole lot of other concepts that are beyond the scope of what we had time for today. Well enjoy coding and yes if you have any issues, please go to GitHub. [01:49:58](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h49m58s) First check out the wiki page, check the tutorials and if you think you've discovered a bug, you're most welcome to open an issue and we'll see what we can do in trying to resolve that for you. We would like to invite other PHP Programmers to get involved in the JCB GitHub [01:50:22](https://www.youtube.com/watch?v=IQfsLYIeblk&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h50m22s) Community and help us improve JCB so that it can become a home for us to manage the troubled waters of open-source development. Thank you.