7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 13Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Create a Calculator Form

Now that you have an understanding of some of the basic concepts of modules and the Form API in Drupal 8, it's time to start actually building our custom calculator module. Let's start by building out the UI of the form.

3.1 Create a Calculator Form

Now we're gonna take a few minutes to clean up what we've done so far and make some modifications to actually have this become a little bit of a calculator style module that you can use in Drupal 8. So as I said before, this calculator_greeting, I'm really not gonna need this any more. The base calculator path that's gonna take us to the form, I think that's gonna be fine. But let's just change that back to the my/calculator kinda root path where all of this is gonna take place. Let's change this title a little bit to say my simple Drupal 8 calculator, something like that. I think that should be fine. So that's gonna be out base routes, whenever we go to my calculator I want to present my calculator form, my calculator controller here, I can probably get rid of this right now. I'm not gonna be using hello anymore. I think we're done with that. We're gonna start to get to some actual mathematical operations. And the calculator form, we can basically reuse most of this. Let's go ahead and scrap what we have here in build form so far. And let's get rid of our submit form as well. Okay, so let's go ahead and save this. So, basically right now we are down to a whole heck of a lot of nothing. So if I were to save this all right now. And let's just go ahead and take a look at it. Let's just go ahead and clear our caches. And if I were to come over here to my calculator again. You're going to see My Simple Drupal 8 Calculator. So, now I wanna be able to create a form that's going to take in, let's start very simple, that's going to in two numbers, two digits, and an operation, and I'm gonna be able to submit that form, submit all of that data to my form and then I'm gonna be able to handle that so that I can do something present the output to the end user. So let's kind of keep things simple to begin with let's go ahead and build out that form and see what 's going to look like. So we are comeback over to our calculator form and remember when we we're building out a form and we're specifying these inputs. We do it in the build form function. So the first thing that I wanna do is I wanna add a text field so that the user can enter in the first digit. And that's exactly what I'm going to call this one first. First digit, it's gonna be equal to and array. And within here we need to specify a couple of things. So remember I need to specify the type. And the type here is once again going to be a text field. Then, after that we can give this a title. So we can do #title. And we'll just put in here first digit and then we can specify, once again, whether or not this is required. And for these operations to work, I think I want all of them to be required. So that's good. So let's go ahead and copy this. And paste it down here. Then I'm obviously going ot have a second_digit, cuz like I said, I just wanted to add two digits together, or subtract and multiply or whatever. And I'm also going to want a submit button. So these things you've already seen before, this should not come as too much of a surprise. So, we'll create my submit button and once again, remember that this is going to be a type of submit. And a value of submit. And then also, so we have first digit here. I want to change this one down here to be second digit, so that those look okay. So, let's go ahead and save that and then let's remember to. Return our form this time. So let's go ahead and save. Let's come back here, and let's go ahead and clear our caches one more time. And let's see if we can get our form to appear. So this is good. So I have my first digit. I have my second digit that are required. I can hit this one, submit. It's gonna say the first digit's required. And we can put in a one. Let's hit this. Second digit's required. Let's hit two. That's great. I can submit but the problem here is I'm not able to say what type of operation that I want to perform. So things like addition, subtraction, multiplication, and division. So in order to do that we're going to need to add another element, or another input, to our form and I'm gonna want to stick this one in the middle, I think. And this I'm gonna call operation. So this is gonna define what type of an operation I want to do with these two digits. Now in order for us to do that, we're going to specify a type, and the type for this is going to be a select. So this is going to give me a drop down box, and we can specify the title here. Which is going to be select operation. So that title is going to be the first thing that shows up within that select box. That drop down box that's going to specify that you need to select something, some operation within this list. Now, how do we specify that list of operations well we use another key here called options. Now within here, I can now specify an array of all the different options that I want to show up here. So in this case, I want to do, I want the opportunity to do four different operations. I can say add, and this is going to have the text of add. So this key value pair combination here, the key here is going to be the name or the identifier of this particular option. And it's value is going to be the text that hows up within that drop down box. So I can say add, subtract is going to be subtract. Then I can say multiply, so you can change these names to be anything you want. You can change them to be different operations. You can add to this list. You can take away from this list. Whatever you feel is best for your particular case. So now we have add, subtract, multiply, and divide. So these are gonna be the operations that are gonna be available. And similarly to our text boxes, I want to make sure that these are going to be. Required, I'm gonna force the user to pick one of these values. So now that I've got all of that saved, let's come back in here and clear our caches. Then we will go ahead and once again refresh our calculator and now I should have, select an operation which is once again required, and now you can see add subtract multiply and divide. So here's the basic form, that we're going to use for our calculator. We want to be able to input a couple of different digits, we want to select an operation, and then we want to pass that data over to our controller and handle that data appropriately.

Back to the top