Creating a site: Build An Uptime Monitor with Inertia

00:06

The first thing we want to do, of course, is build up the form inside of here. Luckily, Laravel Breeze comes with some predefined components that we can use, so we'll just be pulling these in and using these. If you need a reference for these, you can find them over in the login page.

00:22

For example, some text inputs here, the labels, errors, and everything else we need. Okay, so the first thing we're going to do is create our own h2, and we're just going to say new site. Let's give this some styles, so let's go ahead and add in a font of semi-bold.

00:39

Let's make the text large here, and we'll set the text to grey 800, and we'll also set the line height here to tight. Okay, let's take a look, and there we go, that looks fine. Okay, obviously, we're going to need a form here.

00:55

We can get rid of the action because that's not going to go anywhere at all, and we'll just add a class in here to overflow of hidden, and we'll set the spacing here on the y-axis to four, so each of the things that we create has a little bit of space.

01:10

Okay, let's start out with our text input, so let's go ahead and just pull that in, and we're also going to want to import that as well, so let's go ahead and import text input, and that's from the root under components and text input dot view,

01:25

and for the text input, we're going to go ahead and set an id for this. That's going to be the domain. The type of this is going to be text, and we'll set a class here to block with a width of full,

01:38

and we'll set the height specifically to this and set text to small. We can also add a placeholder in here as well, just to make this a little bit easier to see what we're doing, so let's go ahead and just pop codecourse.com in there as an example,

01:52

and we should have an input just like that. Great. Just above this, we're going to have an input label, so let's go ahead and define this component out in here,

02:01

and that's going to be for the domain, and we're going to have a value in here of domain, just so we can see what we're entering, and we'll set a class here of screen reader only,

02:12

because we don't actually want to see this, but of course, we want this to be accessible for screen readers so they can read it. So let's go ahead and import that input label, and we're done.

02:23

Let's go over and check this out, and yeah, it looks like we're missing an end tag just in here. Okay, let's open this modal up, and there we go.

02:32

Great. Okay, so the last thing is going to be a primary button in here, and let's just end that tag down here, and we'll just call this add.

02:42

So if we go ahead and import this primary button like we've done for the others, primary button, and take a look at this, we should have that down there.

02:53

Great. So we can now enter this and hit add. Of course, it's not submitting anywhere just yet. We're going to go ahead and create our route and a controller for this.

03:02

So let's do that now. Let's go ahead and create out a controller. First of all, we're going to call this site store controller. This controller is just going to have one job,

03:11

and that is to create a site, and we'll go ahead and register this as a route. So let's go over to our web routes just in here, and we'll say that we want to post through to slash sites,

03:22

site store controller, and we're good to go. Now, we have middleware defined automatically on this dashboard that we got when we installed Laravel Breeze.

03:34

What I prefer to do is do the middleware and anything like that inside of site store controller itself. So I'm going to go ahead and create our constructor. Of course, you can do it either way,

03:45

but I always like to define middleware directly within the controllers. So I'm just going to pop auth in there. Now, we're going to make this invocable as well. So we'll create an invoke magic method.

03:55

And for now, I'm just going to die dump and just say works, just so we can see that this is actually submitting through to this endpoint here. So slash sites. So back over to our site selector,

04:07

this form now needs to submit to the backend. The question is, how do we do that with inertia? Well, we're going to come down to our script section, and we're going to go ahead and import use form from inertia and view three.

04:24

Now, what this will allow us to do is set up a form in here. So we can say site form, and we're going to use use form. And into this, we're going to pass in an object of all of the things within our form.

04:38

Now, in this case, it's pretty simple. We just have a domain, and I'm going to set that to null or an empty string by default. Now, what we can do with this is hook this up to our input.

04:50

So for example, we're going to go ahead and say vmodel site form domain. And that's now hooked up to our site form. And then we can submit that form directly via our form. Now, we're not going to do that.

05:06

We're going to extract this out to a method because it gets a little bit messy if you do everything within the form. So let's go ahead and say v on submit. And let's prevent the default behavior, which is just submitting the form.

05:20

And let's call a method called create site or invoke a function called create site. And let's add this just down here. So create site. That is our function.

05:30

And let's just console log something for now. So send. And let's go over. We'll bring up our console in here.

05:38

And let's go ahead and hit add site, hit add. And there we go. That's going ahead and calling that method. Now, from here, what we can do is we can reference the site form,

05:47

and we can go ahead and post this through to our site's endpoint. What that's going to do with inertia is it's going to send an API request or an AJAX request through to this endpoint. It's going to do what it needs to do.

05:59

And then when we return back or redirect back, it's not actually going to perform a redirect. It's just going to update what we see within our view component. So we're going to post through to this.

06:12

The data already exists in here. So we don't need to post through with any data. It's just going to send all of the data we have in here directly through to sites. And that should work.

06:21

So let's go over now and hit add a site. We can close off our console. And let's just type in codecourse.com and hit add. And there we go.

06:30

We get a die dump with works, which is exactly what we did within our controller just here. OK, so let's go ahead and put in our request here, because we're going to need some data from this. And this is where we're going to store our site and then redirect back.

06:46

So we want to go ahead and assign site to the newly created site, because when we redirect, we want to redirect the user to the new site. We're going to go ahead and grab the currently authenticated user, access the site's relationship, and create a site from the request data.

07:03

So we're just going to only grab the domain. And we can actually add that into an array to make it make a bit more sense. And then we're going to return. And we're going to redirect to the dashboard.

07:15

But we're going to pass the site in there. So we actually get redirected to the site. Now on the front end, like I said, it's not going to refresh. What it's going to do is the response data that we get back from Inertia

07:26

is just going to go ahead and update this with the URL and all of the data that we see. So let's go ahead and try this out. I'm actually going to go ahead and delete this one from the database. Come over, and let's re-add that one.

07:40

So let's say alex.gs. And if we hit Add, well, we get a scheme error here, because we're not actually filling this in. That's something that we do need to do.

07:50

So why don't we just go ahead and figure that out first before we look at this redirection? We know that we want to split up the scheme and the domain, because the domain is really just a title for the site. And the scheme, we can break up to know which scheme has been entered.

08:06

OK, so let's do that first. How are we going to do this? Well, if we go over to our Site Observer, what we also want to include in here is when a site is being created, we want to split these up and assign them to each of the columns.

08:20

So we enter https://codecourse.com. But we want to split this up into scheme and domain before it's saved. So what we want to do is create out a Creating Eloquent Event. Again, we get the site in here with all of the data.

08:36

And then we want to go ahead and parse this URL. So we can just use the native parseURL function, if we spell that correctly. And we're going to type in the site domain. So the domain is the thing that we are saving.

08:48

Then what we can do is we can set the scheme of the site to the scheme from the parsed URL. And just to demonstrate this, let's go ahead and die dump on parsed. And let's go over here and add in https://alex.gs. So there we go.

09:07

We get the scheme and we get the host. We can just save them in a separate database columns. So we're going to go ahead and assign the scheme here. And I'm actually going to use the Laravel array helper to help me out with this.

09:19

And we're going to say get from the parsed URL the scheme item. And then we're going to do exactly the same thing here with the host, which is actually called the domain in our database. So now that's going to happen before this is saved.

09:38

And we won't see the error that we saw before. Because this will have been split up and assigned before this gets created and persisted in the database. So let's try this again.

09:47

And https://alex.gs. Hit add. And yeah, looks like we haven't actually redirected properly. We want to redirect the user to a route named dashboard.

10:03

That makes a lot more sense with the site as that property. OK. So over to the database, I'm going to delete that. You can see that was saved properly anyway.

10:13

And if we head over and try this out for the last time, alex.gs. Hit add. And there we go.

10:21

So what's actually happened here is behind this, we haven't closed the modal yet. But that's been redirected over to dashboard slash 5, which is the ID for the newly created site that we've just created. You could just about see the data update here.

10:36

And that's it. So without refreshing the page, everything has been updated. That's the beauty of inertia. Now, of course, what we want to do is after this point, we want to really clear out the form.

10:47

We want to close the modal off, do a little bit of tidying up inside of here. And we also want to demonstrate something that we're going to be using a lot when we work with forms in inertia, which is preserving the scroll behavior of the page. We don't necessarily need to do that everywhere, but I'll demonstrate it now anyway.

11:06

So within our site selector component where we're posting this form through, the first thing that we can do is provide some options to this. So I'm going to go ahead and set preserve scroll to true. Now, what that will do, whether you have that set to true or false is

11:20

if you have a lot of data on a page, it's hard to demonstrate here because we can't actually scroll anywhere. What this will do is wherever you are submitting this form, it will preserve the same point that the user has scrolled out on the page.

11:33

Think if you had a form pretty far down the page and you submitted it, it would be a little bit annoying if the whole page jumped to the top and you were pushed to the top of the page. Preserve scroll just keeps the user in the same position when we're posting through.

11:47

So I'm going to add that in there anyway. And then really importantly, what we want to do here is on success callback. So let's define out a function in here that we want to call when this is successfully stored. In this case, what we want to do is we want to access the site form

12:02

and we just want to reset these to the default values that we set here. This will be saved and then reset back to domain null. That means that if we open up the site selector again, we don't see the same domain that we have just typed in there.

12:16

If we wanted to create multiple sites. Then what we want to do is hide the modal. How do we do this? Well, we open the modal by setting the ref here to true.

12:26

We can just as easily close this by setting the show new site modal back to false. Now, we can't just set this to false. What we have to do, because this is a ref in view, we have to directly access the value. We don't need to do that within templates, but we do when we're working within JavaScript.

12:44

So we're going to set the value of the show site modal to false. And just for a little bit of clarity, I'm going to pull this up a little bit further. And that makes a little bit more sense. OK, so let's try this out again.

12:56

I'm actually going to go ahead and delete this domain. And we're going to re-add that in there. So of course, that's not found anymore. Let's go ahead and add a site and add in alex.gs.

13:11

And hit add. There we go. So we've created it. We've reset the form.

13:15

So if we open this back up again, there's nothing in there. We close the modal. We're redirected over to that new site with all the data in there. Before we move on to looking at validation and authorization,

13:29

let's just update this dashboard text. We forgot to do that earlier to show the current domain of the site. So I'm going to go over to the dashboard page here. And we know that we've got the title just here.

13:40

Let's just pull this down a little bit so it's a bit easier to work with. Now, I want to go ahead and access the current site and the domain for this particular site. Now, this isn't actually going to work at the moment because remember, we've used API resources.

13:54

So we need to say site.data.domain. You can see that that's being shown up here. If we hit codecourse.com, we get exactly the same thing. And if we head over to our main dashboard here,

14:03

it's just going to show that in exactly the same way. So just a little thing we want to do before we go on to everything else we need to do for creating sites. Okay, so inside of here, a couple of issues.

14:16

We're not validating and we're not authorizing. So technically, we don't actually need to authorize anything unless you wanted any kind of permission. So we can just set authorization to whatever as long as we're logged in.

14:27

This will only create this under our site sections. There's nothing really to authorize. But we do want to validate this. We want to make sure that we're actually giving a proper URL in when we're creating this.

14:38

Now, throughout the course, we're going to be using form requests just to keep things really nice and tidy. We're not going to validate directly within the controller, although you can do that if you want to.

14:48

So I'm going to go ahead and use Artisan to make out a request. And we're going to call this site store request. So if you're not familiar with form requests within Laravel, let's go ahead and open up that site store request.

15:05

Now, this gives you a couple of things that you can do. First of all, to authorize this request, which we're going to set to just hard code true because we don't need any kind of authorization check in here.

15:16

And then we can just provide some rules. So in our case, we're only validating the domain. This is required really importantly. And it also needs to be a valid URL.

15:27

And then to apply these rules and authorization to this controller method, we just switch out the base request that we have in here with the site store request. And that's going to go ahead and validate for us. So if we go over here and just open up our network tab,

15:43

head over to fetch XHR under the filters, and we go ahead and add a site without entering a domain. If we have a look at the request that's just been sent through here, you can see that we actually get some props sent back through to this component with the errors.

15:59

So how on earth do we pick up these errors to show on the UI? Well, we can do that very easily with inertia. So if we open up our site selector, remember we've got this form here. This form will contain any of the errors that get sent through as props

16:16

so we can conveniently pick them up. So by this, I mean, if we just head back up to our template here, let's go ahead and just say site form and errors. And let's check out what we get in here.

16:29

There we go. So there we go. For the domain, we get the first error message that comes through from Laravel's validation. So what we can do is easily just put this into an if statement,

16:40

or we can just output it on the page. Within Laravel, what we actually have here with Breeze, if we look at the login page and sort of reference this as an example, we've got an input error here with a message that comes through

16:55

from the errors property under this inertia form. So we can pretty much just copy and paste this over. Input error needs to be imported, but for the message, we can just say site form errors and, of course, domain.

17:12

And that will show out an error if that's invalid. So let's go ahead and just import this input error and pull that from components. And we're good to go.

17:23

So let's just check this out. Add a site. And there we go. The domain field is required.

17:29

Nice and styled for us. Now, what we can also do is take this a little bit further. So if you wanted to, you could add in some classes into the actual input itself if this was invalid.

17:40

So it really depends on how you're styling up your UI. But what we could do is maybe set a border of red 500 on this if from the site form errors, the domain is in there. That's going to give you something like that.

17:54

So you can see it doesn't really matter how you style this, but you have the option to include these as well. Now, of course, if we just type in alex.gs here and hit Add, that's not going to work because it needs to be a valid URL.

18:06

So we have to actually give in HTTPS. And that will nicely split that up for us, save it in the database, redirect us over, and we have our domain that we can start adding endpoints to.

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Episodes

Transcript

Episode summary

Episode discussion