diff --git a/011-Component-Scripts.md b/011-Component-Scripts.md index 44a24cc..b05a82b 100644 --- a/011-Component-Scripts.md +++ b/011-Component-Scripts.md @@ -26,8 +26,24 @@ This is a place for you to add your own custom scripting to the helper_admin Cla **Add Global Admin Event** -I spoke about this event concept briefly before, but what we want to achieve with the event is basically on every page, [00:08:09](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m09s) if you look at this sermon distributor, the back end part of it, it has a file which is the in main file which Joomla calls first. Calls sermon distributor, and in that file it basically triggers that global admin event. The global admin event is nothing else than a function inside of your helper function. So it always triggers it, [00:08:40](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m40s) if you add that switch. Then it passes the document object. The document object is being built up here. I'm just passing it over to the global event. We don't need to clear it there. If I was to open the helper class, which we have here, and scroll to the top, it says here [00:09:08](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m08s) loaddropboxajax. This again it's just another function. I wrote that function that you can add whatever functions you want to run globally every time a page opens. +I spoke about this event concept briefly before, but what we want to achieve with the event is basically on every page, [00:08:09](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m09s) if you look at this sermon distributor, the back end part of it, it has a file which is the in main file which Joomla calls first. Calls sermon distributor, and in that file it basically triggers that global admin event. The global admin event is nothing else than a function inside of your helper function. So it always triggers it, [00:08:40](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m40s) if you add that switch. Then it passes the document object. The document object is being built up here. I'm just passing it over to the global event. We don't need to clear it there. If I was to open the helper class, which we have here, and scroll to the top, it says here [00:09:08](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m08s) loaddropboxajax. This again it's just another function. I wrote that function that you can add whatever functions you want to run globally every time a page opens. That is a way to run it like a chronicle job on the front and the back end of the component. If you have things that you want to be done chronically, this feature is targeted at doing that. [00:09:35](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m35s) Here we are loading the LoadDropboxAjax. If we go back to the component, you see that I am just adding that script. First I just clicked global admin event yes. And I added that script. That's all they added. And that script was taken and placed inside of the global event. The trigger(globalevent) is set by component builder itself you don't need to write that. [00:10:03](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m03s) It will insert this(globalevent) trigger itself just because you clicked yes. You need to then just add the script that must run inside of the global event. Which I decided to be another function. And then this function which I want to run, I added to the admin view, you see here at the admin helper class. [00:10:29](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m29s) I added that function here. So I basically just used that(loadDropboxAjax) name, and called it "self", because we are inside of that class. That's how you call static class method. And a pass to save information. In my method I'm adding JavaScript to the dorm to the document object. I want that document and then I set addScriptDeclaration. [00:10:59](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m59s) That means on every page of this component in the back end, it adds this little script which then calls by Ajax which I explained previously. And it starts checking the Dropbox listing automatically. So that's an automatic feature I wanted to add to my component. And this is way that I did it. And then I felt that I want to add it that you can do this in other components. That's why I added this event switch. -???? +**Add Custom PhP Helper Site View** -Now that is a way to run it like a Chronicle job On the front and the back end of the component If you have things that you want to be done chronically This feature is really targeted at doing that So [00:09:35](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m35s) Here we are loading the Drop Box Ajax So if we go back to the component You see that I am Just adding That script first I just ticked Global admin event yes And I added that script that's all they added And that script was taken and placed inside of the global event The trigger This trigger is set by component builder itself you don't need to write that [00:10:03](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m03s) It will insert this trigger itself just because you clicked yes You need to then just Add the script that must run inside of the global event Wich I decided to be another function And then this function Which I want to run I added To the admin View You see here at the admin helper class [00:10:29](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m29s) I added that function here So I basically just used That name And called it "self" because we inside of that class right so that's how you call Static class Method And a past the same information because In my method I'm adding JavaScript to the dorm right So to the document object so I want that document and then I said add script declaration [00:10:59](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m59s) And simply that means on every page of this component in the back end it adds this little script which then calls By Ajax Which I explained previously And it starts checking the Dropbox listing automatically So that's an automatic feature I wanted to add to my component And this is way that I did it And then I felt that I wanna add it that you can do this in other components and that's why I added this event switch Ok This event switch here Ok and then this same goes for the site area [00:11:37](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m37s) I also added that same class You might ask why I have different helper classes for the front and the back Well it's about Pretty belt security I suppose and permissions There are things that I wanted to in the back end which I'm not asking that much questions Where on the front I might be more Protective I would suppose And So for that reason and implementation also is often different in the front then in the back so that's why we have to Different files helpers site class [00:12:09](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m09s) And the Helper admin class And you can add custom scripting as you can see I added that same script to the front And I also add it A site Event Which also trigger is that same script Now you might say well if everybody Triggers The Script Then it's gonna be running multiple times Well [00:12:32](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m32s) That's exactly part of what I did I actually added A feature In the Ajax call That logs weather it's already Active And if it's Active it just ignores that call So Basically it has a controller over Whether it should run or not Meaning that if it needs to run Because it even has a timer you see you can set [00:12:56](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m56s) For the Sermon distributor you can set how often you want Dropbox links to be updated Every day every 2 days And so this Script If it checks wants to update and it's not time it just dies Doesn't do anything so it's very light since it's Ajax you don't the user himself don't Even notice a delay in his page so the page opens as fast as it always do and then fire that Ajax call to the server Which starts this whole process on the server So that's primarily what this is all about obviously you need to know programming and you need to know how to secure all that And I'm not gonna try and explain that to you now I'm just saying that this is all possible inside of component builder Simply through these custom areas you can also add a SQL dump [00:13:50](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m50s) Instead of adding it to the actual views you can export all the views and add them here and it will be actually added to the same file And so don't do it twice but this is another area to add A SQL dump file And Then We have this nice feature called dashboard methods You see Let me show you what I've done with it Again just that you know all this data that I'm showing you is dummy [00:14:23](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m23s) Not related Just me testing it So I wanted to add this Usage statistics to the component so you could see Which country has done what When in what area So So I needed to take a lot of different database tables and calculate used by certain ways in and I wanted to have that on the dashboard The dashboard really had always icons and so I didn't want it [00:14:53](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m53s) Add another custom view wish I could have done custom admin view I wanted it simply right there at the moment of the page load And so we added that feature Component builder and we called it We call that dashboard methods Now let me go to one where I actually implementing it so I could Spend more time in explaining unless on typing Ok so here we go Basically I created a [00:15:26](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m26s) Method called get usage data it's a public function Public method And inside it I added my script And obviously inside of this script I'm calling other methods which I made it made protected so the script that Must be called from The dashboard tab I'll show you that at the moment You said that up here So here is the tab and it's HTML so we called the tab usage statistics and a header we made Table [00:16:01](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m01s) And here is the HTML Ok which we are using and in the HTML You see that I have PHP and the way we do that is with that convention of Open bracket ? PHP and Echo and then closing it again there so basically I'm checking whether the usage data is there Now how do I know that I should target usage this usage data and then items Well this is a convention this area there And the way that that Convention works Is [00:16:46](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m46s) By that one there So usage data Relates to Usage data So the moment you add to word get This word get in front of a function it will be Added to a Global the result of that Get will be added to this And without the Get Name so that the convention [00:17:15](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m15s) The convention is you could've called that Get the man on the moon Then this would be Man on the Moon This and obviously all lowercase Man on the Moon So That will be dropped And this is gonna be used Lowercase as the this So [00:17:37](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m37s) That's the convention I know it might not be that obvious but it works So your other functions If they are protected Shouldn't have the word get in it At the moment it's set to Set that as that one is set And then this one is Visit check This one is set companies and set countries [00:18:03](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m03s) So you can see I could add a lot of PHP in here And all these PHP together Basically gets the data That we want on the page And when I get the data I placed it In what is seen as the item Ok Oh you know what let me see set statistics return this statistics Ok so I'm returning a field here or a a method value [00:18:43](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m43s) And this method value is being populated in this sub functions And in one of them It is adding Over here The name items as a a Pointer So it becomes an object Well it is an object in fact I Think I set it is an object up here there we go And [00:19:09](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m09s) There I look through the companies and as I look through them I'm busy totalling and adding and going on I guess so I'm not going explain the code itself But basically this is getting returned And because he's an object If I look here I'm able to Target items as an object And then if it's exist And if it's set I start looping through items and certain places I'm using totals and Different values so that is just adding some of that data to the page [00:19:45](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m45s) And this area here Now I could have made this much simpler right so maybe not look that intense to you but this could have been a simple Class in fact you could have let this out completely and just put a Comment so you could have done this Because it's gonna scream at you for you know this is if you see is not compulsory so you can set is Not needed and then in here you could just do HTML so if you just wanna give information To the user about who made the component maybe or some would like to run a rss feed here you could have done it right here Ok I'm just showing you that you can reach into PHP here and that the PHP that you reach in has the convention [00:20:34](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) Of dropping the get and then using that front area usage data To place information in which you can parse in your HTML here that you would do and any other component View Ok so that is just quickly looking at the script area of a component I realize there's so much more to say but I really can't Elaborate too much on this it since it requires skill in in PHP It's something that I think will only become very useful if you are a developer as Developed a few components And can then see how you can easily add custom scripting to his component through this Methods ok well next up will look at the ReadMe [00:21:27](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m27s) And maybe their FTP server concepts. Thanks for watching +This same goes for the site area. [00:11:37](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m37s) I also added that same class. You might ask why I have different helper classes for the front and the back. Well it's about security, and permissions. There are things that I wanted to do in the back end, which I'm not asking that much questions. Where on the front I might be more protective. So for that reason and implementation also is often different in the front then in the back. That's why we have two different files. Helpers site class, [00:12:09](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m09s) and the Helper admin class. And you can add custom scripting. I added that same script to the front. And I also added a site event. Which also triggers that same script. Now you might say well if everybody triggers the script, then it's going to be running multiple times. Well [00:12:32](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m32s) that's exactly part of what I did. I actually added a feature in the Ajax call. That logs whether it's already active. And if it's active, it just ignores that call. So Basically it has a controller over whether it should run or not. Meaning that if it needs to run. Because it even has a timer you can set [00:12:56](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m56s) for the sermon distributor. You can set how often you want Dropbox links to be updated. Every day, every 2 days, and so this script. If it checks wants to update and it's not time it just dies, it doesn't do anything. It's very light since it's Ajax. The user himself don't even notice a delay in his page. The page opens as fast as it always do and then fire that Ajax call to the server. Which will starts this whole process on the server. So that's primarily what this is all about. You need to know programming and you need to know how to secure all that. And I'm not going to try explain that to you now. I'm just saying that this is all possible inside of component builder, simply through these custom areas. + +**Add MySQL Dump** + +You can also add a SQL dump. [00:13:50](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m50s) Instead of adding it to the actual views. You can export all the views and add them here(MySQL). It will be actually added to the same file. So don't do it twice. This is another area to add a SQL dump file. + +**Dashboard Methods(with example)** + +Then we have this nice feature called dashboard methods. Let me show you what I've done with it. All this data that I'm showing you is dummy. [00:14:23](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m23s) It is not related to this application but it is just me testing it. I wanted to add this usage statistics to the component, so you could see which country has done what, when in what area. I needed to take a lot of different database tables and calculate, by using certain ways. I wanted to have that on the dashboard. The dashboard already have all these icons. I didn't want it [00:14:53](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m53s) to add another custom view, which I could have done, custom admin view. I wanted it simply right there at the moment of the page load. And so we added that feature component builder and we called it dashboard methods. Now let me go to one where I actually implementing it. + +I could spend more time in explaining and less on typing. I created a [00:15:26](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m26s) method called getusagedata. It's a public function method. And inside it I added my script. Inside of this script I'm calling other methods which I made it protected. The script that must be called from the dashboard tab, I'll show you that at the moment. You set that up here(Dashboar Tab -Add). Here is the tab, and it's HTML. We called the tab 'Usage Statistics' and the header we made 'Table', [00:16:01](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m01s) and here(see video) is the HTML. Which we are using. and in the HTML You see that I have PHP. and the way we do that is with that convention of ?). I'm checking whether the usage data is there. + +How do I know that I should target 'this usage data' and then 'items'? Well this is a convention this area there(usagedata). The way that, that convention works, is [00:16:46](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m46s) by that one there. 'Usage data' relates to 'usage data'(see video). The moment you add the word get, in front of a function, it will be added to a global, the result of that get will be added to 'this' and without the get name, so that the convention. [00:17:15](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m15s) The convention is you could've called that get 'manonthemoon'. Then this would be 'manonthemoon' all in lowercase. That(get) will be dropped and this(UsageData) is going to be used lowercase, just as the 'this'. [00:17:37](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m37s) That's the convention. I know it might not be that obvious but it works. So your other functions, if they are protected shouldn't have the word get in it. At the moment it's set, to 'set'. That one is set, this one is 'visitcheck'. This one is set 'companies' and set 'countries'. [00:18:03](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m03s) + +I could add a lot of PHP in here. And all these PHP together gets the data that we want on the page. When I get the data I placed it in what is seen as the item. I'm returning a field here or a method value. [00:18:43](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m43s) This method value is being populated in this sub functions. And in one of them it is adding over here, the name items as a pointer. So it becomes an object, it is an object in fact I think I set it is an object up here. [00:19:09](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m09s) Then I look through the companies, and as I look through them I'm busy totaling and adding and going on. I'm not going explain the code itself, but this(usagedata) is getting returned, because it's an object. If I look here I'm able to target 'items' as an object. Then if it's exist, if it's set, I start looping through items and certain places I'm using totals and different values. That is just adding some of that data to the page. [00:19:45](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m45s) And this area here. + +Now I could have made this much simpler right so maybe not look that intense to you. But this could have been a simple class. In fact you could have let this out completely. And just put a comment. You could have done this(see video). You can set it 'not needed' and then in here(Dashboard Tab - Add) you could just do HTML. If you just want to give information to the user about, who made the component, maybe some would like to run a rss feed here, you could have done it right here. I'm just showing you that you can reach into PHP here, and that the PHP that you reach in, has the convention [00:20:34](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m34s) of dropping the get and then using that front area, usage data, to place information in which you can parse in your HTML here. That you would do in any other component view. That is just quickly looking at the script area of a component. I realize there's so much more to say but I really can't elaborate too much on this. Since it requires skill in PHP. It's something that I think will only become very useful if you are a developer, as developed a few components. And then see how you can easily add custom scripting to his component through this methods. Well next up will look at the ReadMe, [00:21:27](https://www.youtube.com/watch?v=xY9TWQrF8AQ&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m27s) and maybe their FTP server concepts.