Build a URL Shortener with Volt and Folio
This episode is for members only

Sign up to access "Build a URL Shortener with Volt and Folio" right now.

Get started
Already a member? Sign in to continue
Playing
03. Submitting the form

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
OK, so now that we are all set up and we know that everything is working,
00:04
let's make a start on building out our form. Now, the first thing I want to do is get rid of what we have in here with this counter. We don't really need this. And we can go ahead and change over this div wrapper to a form.
00:17
That's what we're going to submit. So I'm just going to head over to our app layout and just around our slot here, let's create our kind of container for what we're building here. So this is going to have a max width of 2XL.
00:32
We'll set the margin on the x-axis to auto, so that sits in the center. And we'll set a margin on the top to 32. So basically, all that's going to do if we just write home in here is just go ahead and center everything and give us a smaller area to work in.
00:48
OK, so let's go ahead and look at actually submitting this form. And then at the end of this, we'll just add the design elements to this so it looks a little bit nicer. So we're going to have an input in here with a type of text.
01:00
It doesn't really matter what we have here. We could do a URL type. And we can get rid of the name here because we're not going to need to use that. We're going to be hooking that up to a form.
01:10
And then inside of here, let's just set the ID to URL. OK, so of course, we're going to have a button down here to actually submit this. And we are going to say get short URL or something like that. We can always change that over later.
01:22
So really, really simple. We enter something in here. We click get short URL. And we, of course, want to be able to validate this as well.
01:30
So let's go ahead and lean on state here to set in a URL. Now, we don't need to give this as an array with a default value. We can just declare that we have a URL state in here. And then like we did with the increment, let's go ahead and create a submit function here,
01:48
which will go ahead and submit this. So at the moment, we are kind of working with a form that we're going to submit. We can do that directly from the form here. But we need to be able to validate this as well.
01:59
So let's hook this up to go wire submit when we actually submit this form. And we'll go ahead and invoke submit. And we can obviously do anything in there. So at the moment, if we just fix that up here, this doesn't do much.
02:14
We can click on this to actually submit it. But of course, we're not doing anything. Let's work on validation first, because that's going to kind of bring this together and show that it's all working.
02:23
Now, how do we validate? Well, we can go ahead and bring in a rules function here, which allows us to assign rules to any of the state that we actually have. So let's go ahead and say URL.
02:39
And we'll just say required. But you can use any other rules in here like you would usually find within Laravel. And then down here, we're just going to say this validate. So if we come down here, we can go ahead and use our error directive for that URL.
02:58
Go ahead and end that much like we would normally do. And then in here, we can have some sort of error in here, which is just going to be the message we get back from within the scope of this. So this should work now if we just don't put anything in there.
03:13
And obviously, I keep forgetting to add a semicolon. If I click get short URL, there we go. The URL field is required. When I go ahead and fill this in with something, of course, it's going to go ahead and work.
03:26
This isn't hooked up at the moment. So obviously, nothing is happening. So what we want to do is hook this state up to the input that we have here. And we just do exactly the same thing as we would normally do with a property.
03:38
And we just use wire model. So let's hook this up to URL, head back over, click on this. Of course, it doesn't work. Type something in.
03:46
And the next request, it does work. That's great. Now obviously, we are working with the URL here. So we may as well add in a URL validation rule in here too.
03:56
And that's pretty much it. That is how we submit a form and get them validation messages back. OK, so let's go ahead and design this up. And then in the next episode, we're going to make an improvement to how this works.
04:09
Because we've got quite a few things going on here. And it'd be good to encapsulate the form logic to another class. And I'm going to show you how to do that. Let's go ahead and just apply some styles here just to get this looking good.
04:22
OK, so all of the classes and all of the design code is within the GitHub repository for this course. So I'm just going to go ahead and copy and paste these over. And if we head over and take a look, that does look a little bit better.
04:35
But it would be good if we were to pull in the Tailwind forms package. So let's do an npm install on Tailwind CSS and forms. And that will kind of reset our forms back to a kind of nice state. So we can work with them really easily.
04:51
So if we come over to our Tailwind config, under plugins, we're just going to go ahead and require in the Tailwind forms package. So Tailwind CSS forms. And if we hop over now, you can see that that's a lot better.
05:06
OK, let's style this button up pretty quickly. So let's head over to that button. And again, I'm just going to apply some pre-created classes to this. So let's pull over the code for this and have a look.
05:18
And there we go. We've got get short URL. Now, we want this message to be next to this. So what we're going to do is wrap this button in a div.
05:29
And then we're going to have the error message next to this. So that's not going to look great at the moment. But if we go ahead and apply a flex items center and then a justify between.
05:42
In fact, we don't really even need to do that. That should just put that next to it. That's great. We might need to do baseline.
05:48
Let's try that out. Yeah, we go. So that's in the middle. And then we can just set a space on the x-axis of this to say 8.
05:55
And that looks a little bit better. But let's pull that in a little bit. And there we go. I think that looks absolutely fine for now.
06:01
OK, so we'll finally just tidy this up and add in a placeholder to this. Just with an example URL like this. And we should be good. OK, obviously, that's looking much better already.
06:17
But we're going to go over to the next episode and just refactor how we do this to use a form class, which is going to be a lot more convenient, tidy, tucked away. And it's especially going to be helpful when we start to add more code to this and more state as well, just to keep things nice and clean.

Episode summary

In this episode, we finally get hands-on and build the core of our form! We start by cleaning up the sample code, replacing the old counter with a real HTML <form>, and centering our content in a nicely sized container. The form itself consists of a text input (for our intended URL) and a button labeled "Get short URL."

We hook up actual state handling to this input so that we can keep track of what the user types. Then, we wire up a submit handler to the form so that when it's submitted, some logic actually happens. Of course, what good is a form without validation? So we bring in Laravel-style validation rules for instant feedback—if the input is empty, you'll see an error message right away. We even improve validation by requiring the input to be a proper URL.

Once the basic functionality is in, we shift gears and start working on the design. We copy over some handy Tailwind CSS utility classes (all available in the course repo), install the Tailwind forms plugin for cleaner defaults, and tidy up the layout so the button and error messages look nice.

Before wrapping up, we throw in a placeholder for the input and make some final visual tweaks so everything looks clean. Next time, we're going to do a little refactor to move form logic into its own dedicated class, making our code a lot cleaner—especially as more features get added.

Episode discussion

No comments, yet. Be the first!