078 How to Add a Form to a Site View

How to add a form to a site view

Ok I would like to Give you a quick demonstration on how to add a form to a site View Now 00:00:10 Before I do that I just again want to remind you that the best practice here Is the use an admin view as a site view The reason that is the best practice is because it is the Joomla way of doing it So that means If you Actually want A view Or form if we say form It means in the area where you submit data to be 00:00:37 stored with Database If you want that the way to do that is to Add create site view edit create site view for this Admin View So you just tick this box here And it immediately adds it as you know an admin View It moves it into a site view which you can access from the front of the site This is the way that the of the code structure and the way that it's implemented is this Standard way of doing it Now 00:01:11 The the way to access that edit area you need to actually in your site view In the I'm going to look here at looks you have to actually add a edit link now this edit link Is something that you need to build It's not being built for you Now I'm building this edit link if you have the demo component in the main get Looks Query I'm building it inside of it Now we can quickly look at how I'm building it By going to your Dynamic gets 00:01:46 An opening the looks And will see that there is this place where I'm first getting the actions And then I am checking whether there is a edital permission for this specific user And it true I actually built the link here I'm using J route I'm adding a Task And we are setting up the link here and it's it's a little 00:02:15 little link That's being built a link so and if if the user doesn't have permission it's just an empty string Ok so that's where we build The link now you can build it anywhere but I like separating The modelling Of the data from The View It just helps me sort of know ok well this is to 00:02:36 Do with the model I'm sitting all that up In there And I know we started seeping in HTML and it's a little bit boundary but Ok Point taken The reality is we We've achieving it This way at the moment Ok so now 00:02:54 You you come this far you've seen this you say no I still want to add my own site form And Well there are two ways to do this The one is if you go into your site view This area here If you have pagination Already is a form So Let's let's let's show you that So I'm gonna open looks again 00:03:22 I'm gonna show you here is says list of looks Ok it's a caption And you see that there is no I have added no form values here Where is the look Query If we quickly opened that again Has pagination Set to yes And that's 00:03:46 Why it adds a form Even though In here we don't have any button set We have pagination set so if if compiled The code that will be generated will look as follow There is our caption and our demo list all looks There's the form So it's got a form It's got a name It has an ID and if you scroll down it doesn't have a task so you can grab submission of the 00:04:17 This form And add your task to directed to the correct route And function It already has a form token And there is the end of the form so you could simply add a button in here And actually submit a form You don't need to add a form again there is already a form And it is already publishing or posting as in its action To this component It is a post for 00:04:44 So you could Yeah Actually just Add the trigger if you like And then obviously some JavaScript That when you trigger the button It grabs the form does some validation whatever you want And then adds the task incorrectly and based on the button that's clicked so you could add multiple areas Bind them with IDs and so forth so that would be the one way of doing this And 00:05:14 That's practical because then your whole Default View area becomes a place of setting up input values and so forth and you just End here at the bottom With a button Now that button Could Just as well Be a button that you build here So you could have JCB 00:05:38 Control The Setup of your controller As well as the setup of your model With this buttons So you could say yes I want to add a button And you can call it submit You can give it a different icon maybe let's say Maybe that 00:06:03 Then you can give the the target controller method A name so you could say Save Save my Stuff Like that You can say that How does this where does this button show up And then what type of button is this And I would leave all that 00:06:29 Just like that and then I would use this Custom Option Copy And I'll just paste this here at the bottom like that Now add my button in the form Because it's already form So this button will now be in the form And it will actually have what's needed To trigger 00:06:55 This controller Here it our controller We need to of course And our function So you have a little controller method And You have to And in the little token validation Get the application get the model you know get the form values 00:07:18 Get the input Check the task And then you start going down the list Now I just copied this from another project so you need to update These sort of values To be Related to this Area that you're doing And Then 00:07:37 Because we Want to have the option of you know get the form Do all kinds of Neat things This is part of what you need to know and if you don't know how to do this I wouldn't suggest you Doing it because I will just Make your Application 00:07:57 vulnerable To attack their there needs to be a lot of validation here And so here We actually do a model validation on the Formdata This is quite important you need to know how to build a form If you If you gonna use this form validation class So 00:08:20 It goes onto Eventually Saving the data If something goes wrong we store the data into the user State so that can be placed back into the form you know that kind of Behaviour and down here if in everything is good we submit the application Again a method that we build in the Model So this this is a function a method from the model 00:08:47 And even there something goes wrong we grab those errors we Push them out to the user we can also save We go on and a few things is on this point everything is good we say great Would be done right And we clear the user state and we redirect wherever we want to go And we clear the application from the Session and we return true so you can Slowly go through this may pause the video Whatever you need to do But this is just 00:09:17 Actually generic Implementation on the submission of a form And how it's controller usually would look like so That's really what this is it's not That advanced in fact There might be a many improvements on this to make and even more You know depending on what you need is Now in the model You'll need to add a few methods 00:09:43 Of course which you are calling from your controller right because here you're actually using the model To validate You using the model To get the form You using the model you see that sort of the MVC structure you you separating What happens where which code decides where And so here you are getting the model through the controller methods itself Ok so you'll have to add the the the custom script into the model there's 00:10:17 no automation for this you'll have to custom script this Ok again I just Punch the data over from my other project in Here Basically copy pasted it Just because I wanted demonstrate this quickly I had a little function that I build you to sort of get the form because this this Actual site view submission is a dynamically generated A form so the form isn't a static XML It is dynamically generated through this little function 00:10:57 And I actually end up building a static XML but I build it through Yeah various methods But that's part of Well I would say your own homework You need to figure out how to do this I don't want to because You know there's some things if you haven't going through the process of seeing how and why you're always gonna be unsure of why why these things work the way they do and so I wanna save you from that I want to Encourage you to really go and see why 00:11:31 Why is should this happen this way There's a little sort of cheat to this I know And that is The compiler component JCB that has a compiler View And we've made that public And in the compiler view We build a form And we display a form in a admin custom admin View Custom admin view is very similar to a site view 00:12:03 It's a little bit more limited But site views have more power in my opinion But it's gives you the site view functionality of you know maneuver and making your own thing happen In the backend Ok so that was the purpose of the custom admin view So here All I've done Is I've created a button I've created a controller 00:12:29 I've set up some methods in the model And at the end of the day Now I have placed the button which is really the key and I need to now to Add a form here This needs to be replaced with a form which is going to be submitted With this button I'm not gonna do that I trust you can do that yourself I'm gonna just save this and compile it So you can see The 00:12:58 The code Well well when it comes out With that button then Place So here we have it The form is still Intact and here is our button Basically renders the toolbar So you might wanna see ok well where is this happening Well it's happening in the view.HTML file 00:13:22 so you'll come down here and you'd see it says Add toolbar And it's a Local Method so we could scroll down And see o here's the add toolbar And here It is Setting up the custom button Look 00:13:43 Save my stuff Add box Is the icon there is the button name And it adds it It also if there is a helper A helper menu added to this Area You also add the helper URL as a button And then it adds this whole Joomla 00:14:08 Toolbar Get instance to the toolbar Because you're it loads it then registers a lot of stuff And then throws it in here And basically That's what we rendering here That's how we get the button To work alongside all the controllers stuff Now if you go to the code the open the controller file Then 00:14:32 You'll see that there is now a new file called looks Which wasn't there before So JCB just because of using its own buttons Added your controller for you And also if you do that with opening The the models There is the 4 the looks model So we first open here we scroll down and low and behold There is our Method 00:14:57 Save my stuff And there is everything we coded right into the model So you actually have allow edit Available here Ok but Ok so this is been deactivated to all to false I see Yeah So it's a security measure to 00:15:19 Allow no tampering You need to validate everything in your Function here Now if you go to the looks model You'll see that it also Updated it with our Get form And so everything is been placed into the code From the interface So 00:15:40 if you look here in the Interface It'd It'd added the The necessary code in the correct place Now you could do all this Without using our buttons You don't need to use this button I mean you could dump that and still just use it to setup your controller and your model information You don't need to use the buttons 00:16:04 The button is just a little cheat in my opinion for you to save a little bit of Well to ride on the back of The actual J Toolbar helper class Ok So you could hand code your button in here And do your own JavaScript And so forth So this is the first way 00:16:29 Or the The one way of doing it Is to actually think of this whole area As a form Now there's another way to do this And this is the way which I think will work ideally for let say a search form or something like that And that is to actually do it A little bit of Workaround way 00:16:54 In the PHP tab in the custom view script this is the custom View script area so if you open this It says the PHP script that must run in the head of the file So I'm gonna add a little We are here do this And save and close And then compile this and let's go look at the code where that comes out Ok so the code Where we here So we are here 00:17:29 That's where it comes out So it's above The existing form And so We could Break out of this PHP area We could decide Ok we wanna add a new form but we wanna add it on top of this So we could You know end that PHP 00:17:50 Do our form And then at the end Just open the PHP again Because that we have you can't remove this tag this is added by JCB What you could do though you could now over here Do some HTML Sorry PHP Details you know Whatever you like And so this is the code that you would now add into JCB so we'll take this just 00:18:27 To show you And save here and and go back to JCB Open the looks area Then replace our we are here With Our Little Form And save So that will now effectively Place this form outside of the other form Above your content 00:18:59 Now you need to ensure that it's name is different And it's ID And you can still use the buttons To manage your controller and model And then Rename this accordingly So that the task actually fits The controller and Function I which is really what is necessary with this area here 00:19:26 Or you could even Add the toolbar here And obviously setup your button And then you are toolbar will actually Show up here Because it's a custom Placeholder So that would be another way To get the button into this form And then obviously you won't be using it 00:19:51 Here as well it will break things But if you add it in here it should work Ok so then That is how you could set up your form You could save and then we can compile this and install then looking at the code we have So looking at the code When now have the form here with the rendering of the toolbar as we expected 00:20:20 And That's really As easy as he is to add a form to site view You of course now I need to take care of sanitation take care of where these data goes and what the model does With it and how it should return and what it should return And all of that is now basically what needs to be done in the controller and in the model Of this Forms Receiving end 00:20:46 Oh well I trust that this would really help your on your way and adding forms to site view It's really easy I'm I've done it many times Because of Various reasons people want to have Registration forms or they want to have a valuation forms And they want that data split up in Save to different tables and Used in different ways So there is often the need to 00:21:12 To do this There's just a little side note that I wanna make before I actually close up this And it's by going to component builder itself In the admin area And then opening its own Custom View admin View This Compiler I spoke about it earlier But I want to give you a little bit of a 00:21:38 Heads up on how to build a form the right way So in every form you have what is called attributes Sorry never form field Now The attributes themselves are What type of field it should be what should be the name what should be the Label what should be the class description all these kind of things and it depends on what type of field you build On whether it will have options and so forth Now 00:22:08 JCB has what we call a field Get field object Method Which is by Default part of a helper class Now the get field helper method Takes attributes it takes the default value which could be the saved value that you've grabbed from the database and it takes the options if there is options And then it actually builds The Field for you 00:22:36 In the Joomla correct conventional way if you wanna I don't have that's right way of saying it but Does it the right way And uses the It's jform helper Class it loads the field Type by getting it from the attributes The type and obviously if it's not been set it will return false so it wants the type in your attributes Then There is a simple XML field being created here then there is a XML Attributes Method which you could also look at 00:23:12 This is it which then adds the attributes to the XML Values And Gives it back to our Well because it's a What you call it Reference value this XML It doesn't need to return it to anything it updated it by reference Then it also checks whether there's options and if there is option there is also an XML add Options function 00:23:45 Which adds the options to the XML And then it takes this Load field type And it actually sets up the field And returns the field as an object This then again Gets placed into a form array In this little method in You can look at this in the compiler in that .HTML.php file So we building a whole bunch of 00:24:13 Form fields in an array Then if we go to the template We're basically gonna scroll down scroll down And over here We see that there's Form we look the form fields We add the correct HTML Surrounding the fields because this is how you know controller group control label controls This is how Joomla usually sets up a field 00:24:44 Then we Echo the label and we Echo the output Sorry the input and then we eventually load the whole form onto the page Through a more Yeah A more Easily readable what's going on here way And it's still obviously being placed inside of the form because we are assuming that We are we doing all this Inside of the form So there is a better way of building form input values that's all I'm saying and that is to let JCB You're would rather let 00:25:23 Joomla do it for you And so the only thing that you need to know about is actually this get field object Which works quite easily with attributes now You see that here we have a label And it already has the You know The correct Language string And that's also quite easy to do Now 00:25:48 You all know by now that you can get JCB as a mapped component In JCB I don't know if I should demonstrate that to you but Maybe Well I don't wanna make this video too long so I'm gonna do it very quickly So back at JCB I'm gonna simply go to Joomla components and I'm gonna say import JCB Package Then I'm gonna go and I'm gonna actually select component Builder This one 00:26:20 And I'm gonna get the package Then I'm gonna Force the local update I'm gonna add the package key which you would have received from us if you followed The correct path in getting that key if you haven't got it Just simply click here and do what it tells you and you'll get a key Then I'll gonna click continue And basically import the whole JCB mapped in JCB So we have the component now mapped here I'm gonna quickly go to the customer admin View bear with me we are nearly done We're gonna open the compiler custom admin view Go to PHP scroll down And here you see the method that being used to get that 00:27:03 Language string correctly setup is just text With these two dots underscore And that's it Obviously also This one here So that's how you set up a just text To what JCB then does is it Take this String It's puts it into your language file 00:27:24 And Just cranks out The uppercase Related value Which is what you want to give to the field when you're being built You don't want to give it Yeah The actual Jtext response You wanna give it the upper case 00:27:43 Values because that how it's been given to it from the XML file usually Ok so this is where you can come and look and how to build your own form Fields And then actually easily Grab them Onto your Your custom buttons and the compiler Everything and here Scroll down 00:28:09 You'll see ok so this is where we're echoing it out So this little cheat sheet if you forget about everything you can come back here and if we find better ways to do This we'll obviously improve this area and as you can see I'm simply setting up my own little form here Because this view doesn't have pagination We don't have any form conflicts with fighting with each other who's the boss or whatever And we still have our JavaScript up here that deals with our submission And checks whether everything is fine and cranks out on whatever it wants And the way we want it so All that is here and could be used right into a site view with little bit adaptation 00:28:52 to your application purposes So as well as the buttons and And some of the Compiler You see because you could still use the the controller To deal with Like in this case the compiler Where you're buttons only we'll only have a button To clear the temporary folder Which is also a function there it is 00:29:15 But the buttons aren't being used for For this compiler It's actually being done through the form itself I say you can look And how we set up the form to achieve that which is quite simple just make the task Correct And then over here in your JavaScript We deal with that as well 00:29:37 Ok well thanks for watching that was a quick demonstration On how to add a form to a site view With the least resistance Enjoy