diff --git a/Hello-World-with-Joomla-Component-Builder.md b/Hello-World-with-Joomla-Component-Builder.md
new file mode 100644
index 0000000..269f700
--- /dev/null
+++ b/Hello-World-with-Joomla-Component-Builder.md
@@ -0,0 +1 @@
+Hi welcome to Joomla component Builder Hello world tutorial It's been asked that we give you Some guidelines or quick instruction On how to go from Zero to Hero Obviously there is a hello world and then there is a hello world Let me explain When we go to gym Willows Repository on GitHub they have a Hollywood component here And It has a few files obviously it's been done quite some time ago And Even if you open these files They really not populated with data And So all it really does is it shows you The very bare essentials of what's required to make an component work in Joomla Now we obviously gonna do Wave much more than this I mean the The realities This code here is hardly non-existent When we are done will have an application with quite a lot of Lines written And quite a lot of structures added which it goes way beyond just a Barebone framework So keep that in mind we're doing a whole world component But when we've done It will actually be Much more than just a wire frame component So you can go over to GitHub Forward slash VDM - IO Ford slash Joomla - component - Builder And download the latest release Just go to releases And Then download Or copy the link Do this JCB file Then in a blank Joomla website I'm gonna install this File And Build This hello world component There we go We have a component in stalled We can I open it Component Builder Is ready to start First thing will do is will create a field There are Fields But just as you can see just We creating a simple basic custom text field Field I would you gonna call it Reading We gonna give it a name Greeting How is you We'll see is It already had a lot of them more material here I'm gonna change any of that I'm just gonna remove a few things which I know it's necessary And actually The field will work even though These lions are removed So I think we'll do that in Will you say Reading Ok I think that should be enough we gonna change this to Varchar I think that's also good enough And basically save and close So there is a new field Next thing to do Is great in admin View The admin view is really what links Your Fields to Database So we gonna call it greeting For single record and greetings for List of records and Greetings Just for sister name So that we can identify this Across the system and I'm gonna add their greetings We gonna add a few generic icons here Then we're gonna link that field we made You want it obviously to show Be the first one actor to title be sort of all searchable And be a link in the first time And first in that tub And give it permissions And save Dressed of the The structure could be left as is And actually We will have it working component With this as an admin View So save and close Now we need to create a component Sleep on you Loads a Add new Joomla component I'm gonna call it the world For most part I'm just Adding It's some dummy data here Can I select an icon Rugby image which Will be shown after installation of the component as well as in the bucket of the comp Ok so we have that said The rest of the features Besides in the settings we need to link the admin view for now Translate greetings One of the main menu want to add submenu autocheck in history Has metadata As EK sou Import export And This is important Add a create site view so on the front end it will already create for us The editing view it will not create a listview Only to edit and create Greetings on the front and we obviously want this to be the first So They're with linked HR admin view and click save Save and close Now we actually have our component set Let's compile it there is obviously Not a very workable front-end yet So I'm just gonna compile this and install it onto this Gmail I install We don't need that Just slate Hello world Also don't need that And then compile So just like that we have 8000 lines written Spell diamond 60 pages A4 book So That's way more than the hello world component we just looked at Now if we open the back end Are we having a store that we think you could install it via the Normal installer in fact let's Let's see if we can get that going So I've pasted the euro here That we find on this page here And we will take Check and install Ok so we have the whole world component installed We can open here and go to Holla world Where is the component We can go to the list and This is where a list of greetings will show Click new And we can Handsome text say hi there James Sable Close And there is office greeting I can open it again And there it is it has a publishing structure that has permissions It has version control So if we change this The hi there Michael Save and close It will actually update you can open it And if you go the versions you see that all of that is working you can open the previous version You can see it was James you can see who changed it All of that was done and those few Clicks I think that's worth noticing and in just a few Clicks we have a whole workable Component Which is installed now look at the code just quickly So here's the installer script of the Hollywood component And It actually Adds the whole component into the content types and Into all the relevant areas It does it check to see that we at least that you my 3.6 And It also Has created The greening table Modules It is created helper structures There is a Helper class been setup Which has many features of functions methods Wish you can come and browse through the helper class in Hero If you know PHP York See that this is a very helpful method just grabbing one value from the database in So there are many functions in here which you can now use around your component I simply calling the helper class Ok so that's just quickly looking at the fact that This all of this was built I remember when we looked at Dip the other Hello world component This is really all that there is in the app and area Is a sequel folder with a few sequel files 1 php file and that's about it No I give you yes this is a wireframe but JCB has built Hey Very More Populated Hello world in a very short time and you can look through this back and forth Folder and see the structure and exactly how you know you need to have the components truck Sudan Ok so now For the next part of the tauriel we will focus on adding a front end to this company And you must remember that We left the front end Open ended really Because we want to allow developers to Actually be able to express themselves in unique ways And not have a cookie cutter receptor that just Getz used over and over But that they could be such diversity and difference between components that are Built with JCB that only the back and really look similar but the front end or can always look Completely different from anything else so to avoid you know It always looking the same and that means a lot of custom coding is needed for the front end And you need to know quite a bit of PHP and even how Joomla works to make this Just work so I'm just gonna give you The quickest shortest path to getting a front end which first click and is Play the items and secondly can Edit them So Let's get started First thing to build when we are setting up the front end Would be a dynamic get That I may get is JCB Swae Of giving you An easy way to Grab various tables in combine datasets And deliver them to the front end of any Site View You can reuse them You can even add multiple ones of them I'm not gonna go into those details I'm just gonna build a very simple one so let's get Started with that first I'm good reading list and I'm gonna make sure this is a list query And I'm gonna Linkit to a Back and view Greetings I'm just gonna have it grab all the data I'm going to say no I don't want pick Nation And I'm gonna just have one Where filter Basically Gothic published here Copy that And put it in here and say When published Equals 1 Just grab published items and nothing else And there we go We grabbing All the data from this one table And we are putting it on the front just filtering it with the swear Option like I said you can join other tables On relation with this data But I'm not gonna go into depth Just quickly and brief Here we go Reading list is done So there is a hug Reading This Now we want to have Another Dynamic get just to view One greeting So let's create that I'm gonna call it greeting leave it as a get item Again He's back in View And then select greeting And this time I'm gonna use filter And just add here ID and A dot i d So that should do it save And save and close So now we have our to Dynamic gets in place Second step Side views So we'll create firstly a site view for the lists of items We'll select The get query for the list If we wanna see how it possibly would look I'm in the PHP we have a Statarea You can select the same Option and I'll give you a suggestive idea of how the PHP my look This May differ Depending on how you set up your Dynamic gait But in reality most of the time it is correct and you can simply copy paste some of the Snippets Ryan to your code here And Immediately start using it so I'm just gonna Add a little I ordered list here So we will have a list item basically And we'll just Echo Greeting as a text And Then Grap that Snip it Pasted in there Close the unordered list Now we wanna Use little nice on ordered list here So we gonna grab this As this opening tag And then Closet And we gonna call this Reading Greetings I think will be best And greetings Again Greetings Initial description Ok so we all set here And For now as you see there is no links here We haven't we will actually have to come back and add some links For now I'm just adding And iteration over there The items and displaying the greetings So gonna save it close out of this And now we gonna create one We we only look at 1 Greeting So again will just select That one greeting Get method And you as well and we see that the greeting Possibly look like that So what is echo it out And Gonna make it Nh2 Header tag And then We can't call it greeting Because We have an editing View That will be dynamically added to the front Robbie cause the editing view on the back is called reading We cannot call another front end View A greeting we have to call it something else otherwise will conflict So I'm just gonna call it Greet For now We can call it here we can call it greeting but here we call it greet And then Reading and Greeting on top here as well So you we go we've got all the necessary components lined up for this Excite you To function as expected So save and close So now we have our two side to use it I'm gonna now go to the component to add them to the component So can we go to settings And we go to site views And we will add Reading It doesn't have a menu It has metadata it's not the full view Weaken Add access and then make the default public The second one is greetings This must have a menu Also metadata This is the default View We can also Give it access And make it by Default public There we go we got out to site views save and close Save and close So we go to the compiler And we compile the other world component For the second time And then once compiled You now see that we got nearly 13000 lines of code And we can l Just click here to install which is the easy way instead of going to the installer Now if we go back to the code And we scroll down We'll see that there is now a component And the front end called hello world And it has the models greet greeting and greetings It has the views greet greeting and greetings this one is an edit View This greeting And this one is a display view this one Is it where you can look at how it is getting the values from the database so that Dynamic gait It built Basically this function for us As well as parts inside of this function here Now You see that it added that little Where filter for us And All the values are here as expected You're is having their permission check So it is gonna check whether you have the correct permissions Now because we have not You installed the component As a blank component we installed it and then made changes install it again it will not be bye By Default be set public The way that it sets the view public Is during Post flight Install It actually Set a rule And that's the side greening access to public which usually is the ID Group 1 And then it updates the asset table And since This isn't a new install It actually doesn't do that And so you won't have the expected result of the view being public simply because the component Wasn't installed As fresh so how did them astray to you how it will behave if a user install This the first time fully Computer Compiled as it is now I'll do some to uninstall a component quickly And install it again Which will then activate this feature Now songs you may not understand or life just said that's ok I would just suggest it As you've developed the moment you add the front Side views to the component And you have actually tweaked it success and all those Related parameters It might be best to just uninstall the component and install it completely Fresh To see the fool behaviour working as expected Mum I say but I already created some demo data and now I need to put them punch them Back in again will there is a way to sort of resolve that And that is going to the admin View opening the greeting Going to the MySQL tab Select yes Select Table And then Click add to select the table Then scroll down to that specific table in a database It should be All the world Greeting Then you'll see it loads the specific values from the database And how they will be named in your Backup I usually remove this created by modified by because it May cause conflicts if user ID is changed from one July installed to another And I also sometimes remove The access Value As this may also differ from system to system And the acid ID So I'm only exporting values which I think are consistent across Systems Ok Obviously This one is well And this one Gate safe Now 75 Now this isn't enough just having a fun up there Sequel table if you wanna retain the data now what what date am I talking about About well we installed it right and so if we open the component We added This greeting so the retained this greeting if you've created quite a few Dummy readings then to retain them so that they get install the Even if it's a fresh install that's the way you do that but you have to compile it The component you have to compile the component before you uninstall it Otherwise it will shout at you and say that it couldn't find the database Because you obviously gonna remove it when you uninstall it So I'm just gonna compile this again And then after it been compiled I'm gonna uninstall it as I said I would So you're in the extension manager I'm gonna click On the hello world And uninstall And it would have set for the uninstalled it Then I'll gonna go back to the compiler page I just click on the install And then if I go back to the component I see that it's added that greeting back in And I haven't lost the beat ok Now let's look at the front end By linking it to a menu item So have greeting selected as the menu item type And I'm gonna just make this the the default page The home page and save and close I'm gonna open the homepage There we see our greeting is is greeting Hi there Michael So it's actually worked as expected Let's just add another one to see it how it will look when we have more than one greeting Ok I think that we have enough If we go back to the front end And refresh There we go there's like readings now to make them clickable and editable Let's do the opening it and just reviewing it first When the side view area I'm gonna open greetings Power round This Greeting Echo I'm gonna add an eighth ref And a link we gonna build a link using some of the helper methods and And also what is called The Slug Just like wouldn't necessarily this time function because we didn't add an alias to our table But when there is an aliens dislike will dynamically be used within search engine friendly urls I'm not gonna demonstrate or explain too much about this But I'm gonna just quickly at the link in here Now I know You may be wondering where is this Items slow come from It's not showing here on the side Well Like with most of these developing components You need to know a little bit about how To read code and understand code and that's why you would compile the code And then actually go look at the compiled code in your ID so if you were to open the Model Which Is using this Dynamic Gate You see that it actually built a slug in the model So you're in the model you're the get items So it's looping through them here and then it's checking with it as an alias And then ID and if they are there sure then It actually Combines them with this And Create a slug otherwise it just plays as the ID in The Slug And That's how you would know that the Slug is already created and you can just use it And so it's always good to Why do you developing a component with JCB Go into the code read the code look at what it's done and I'll help you see it honest And how to extend it We trying to follow the normal way of how Zuma lies able to you know develop and be used so That you can Easily follow along in that it wouldn't get It be not trying to reinvent with the wheel but doing things the way that you would expect if you know How to build to my confidence Beira by hand Ok so Now we friends that link You basically used to a route which is a A common class in building roads in Joomla USB helper out class you can look that up It is in the Site area of the component under the helper folder and it has a function called Greed route And we just passing it The Slug and that will crank out the whole URL for us And so we gonna save and close here I just say for now Now we gonna just compile it again Install it back in Sorry haven't made any changes to permissions or any other things other promotions just A short The format again is only when the related to the site views that we need to maybe just read Stall The whole component do keep in mind that you could go into the backend and set the permissions If that is what you would prefer so in the back and you can just go to options the back and Of the component I mean And there's two permission tab And you can see this is a whole list of permissions just for the greetings and because we install The component a fresh it's set the reading side view access to public As well as the greetings site for us access to public so that's really what we did We just Add that done automatically but you could have come in here and just change that to allowed And save and it will have chief the same thing You'll see that there is a whole lot of features here in allowing You to edit certain parts of the values for a specific groups And so all of this JCB is displaced Uno for you and ready to use Now did we have installed the component let's refresh this homepage I will see that all of these things are now applicable If we click on one of them We see it only displays that specific Greeting you can click back And then click another one and it And so it's working as expected is generating for us the links and it is Actually opening that View And displaying the value as expected Now to add an edit button Which can then edit these Items on the front end of the site I would mind you noticed we just crossed her half an hour barrier so everything we've done now Taking you half an hour to build a hollow world component which is far more advanced and superior it and Any other Homeworld component I've seen And so I think even just if we were to end here JCB is already proven to you that It is actually able to build Very Dynamic and powerful components in a very quick and short amount of time But now just to Push the boundaries even little further let's link the editing options in for this Items No you might want to have the mission or check here When The user isn't in the correct group that it wouldn't display the edit Hi Tim sorry the edit link Now If you do not know how to do that just a little heads up I can show you where to look Turn the back in the game going to the code we open the Hollywood component We go interviews Run into greetings And then we open this view HTML dot php file I will see that we are pulling a Helper class here And using the get actions method Passing reading to it as saying we want the permissions for the Greeting Now that delivers to us a An object which we then can ask Whether the user has edit rights Whether the user can create create the lead weather can say the state and so That is how we can get You know Into the permissions you can look at this Get actions Method in the front you basically go to hollar World helpers and Open the Helper class And scroll down a little And you'll get The get actions method is right here So you're passing interviews name you could even pass it the record ID because we know That you could set permissions not only the review but even brighter mmmm And so Then this helps you Actually determine the permissions and send back the results now Where was open to improving this this is what I've done so far in in Helping us getting a quick answer on permissions from anywhere in the component And so you could make use of this to determine some of the permissions for actually Being able to edit the items Yet Even if you left out Those used dump the button right on the page The controller actually has a lot of these permissions already in place and So you're shouted you until you don't have permissions to edit this item and so that's what I'll demonstrate So I'm just gonna add it all Link here To actually edit The the item Now again you might not know what that link should be And you could go back to the back end of the component To define the link So you're in the backend I'm just simply opening the templates view and then I'm opening The body File and then hear it it has the link obviously it's in the back end it Actually is related to the admin folder but in the front there and it is related to the site root So you could just grab this Snippet here To build your link Scroll down a little in the page And basically search for this variable And you'll see that we're using that edit variable Adding and ID = and then just adding the ID That's how we building the link in the backend And you could do similar in the front The add some custom PHP to the front of the site there is a PHP tab And Custom view script and it says your add custom PHP script to the head of the file so I'm just go Paste that in there Basically We now have an edit variable on the page And so in the default View area I'm just gonna Echo that edit and then again to the and ID Eco CID Around the edit Link And how this click save And then compile This component again and install And now go to the home page and refresh Now we see there is a new edit link here If we click it now It's gonna shout at us and say no you don't have permit you're not permitted to edit this item so I'm just logging here as a user That will have permissions Ok I'm not logged in I'm gonna click on this edit link again And as you can see it's opened and edit view where I can see the publish conserves the permissions And I can change William Do Gemini and save and close And it's edited that value And that's it we have Demonstrated the build of a hello world component From scratch And in just a few Clicks We have successfully set up a component with tremendous advanced features already At its fingertips Ready to go Well I hope this will be helpful to many if you're out there and Enjoy
\ No newline at end of file