Scaffolding Chatrooms

Added: 2026-05-08

[00:00:00]Let's go ahead and scaffold out some basic rooms that we can visit in the browser and see a slightly different layout to the one that we've got here.

[00:00:07]Then we'll build up each of the components as we go. Okay, so if we head over to our editor, the first thing we want to do is make out a model for these rooms. So let's create out a room with a migration, potentially a factory if we want to auto-generate that. Now that we've done that, let's go over to the create rooms table and let's just keep this really simple. So I'm going to go ahead and add in a name for this or a title. Let's go ahead and call it title.

[00:00:34]And let's add in a slug as well and make this unique that we can use in the routes. That's pretty much it for now, but obviously feel free to add more if you need to. Okay, let's go ahead and migrate our changes and now we're going to create out a route which pretty much matches our dashboard. So let's head over to our web routes and find our dashboard route here.

[00:00:55]We're going to go ahead and create a controller for this. So we can copy everything down here. Let's go ahead and provide out the URL here. That's going to be room and room which will use route model binding, but we'll pull in our slug as well. And then we're going to go ahead and swap this out for a controller. So let's create that controller out really quickly. We'll say make controller and let's say room show controller. Okay, great. So let's swap out this for room show controller.

[00:01:24]And we'll go ahead and apply the same middleware here. And we can give this a name, so let's just say room.show. We probably won't reference that unless we build an index. Okay, so over in our room show controller, let's bring in an invoke magic method and let's pull in our room directly into here that we'll get with route model binding. We'll just give that a die dump just to make sure we see it. Okay, so we're going to create out a room called inertia first of all. So let's head over to there and let's swap around the URL really quickly to say rooms. There we go. And yeah, of course we got a 404 not found because this isn't created out in the database.

[00:02:03]So let's just manually do that. So let's create out an inertia room. We'll give inertia as the slug and let's just prefill created at and updated at dates and there we go. Okay, when we head over now, great, we've got our room. Okay, so we're going to once again do pretty much the same thing here, but we're going to render out a view for our rooms. So let's go and I prefer to use the inertia helper here render out a room template.

[00:02:33]Now if you're fairly new to inertia, these live under resources, js, and pages. I'm not going to bother categorizing these, but you can put them inside of directories if you want. So let's just create out a view component here called room and we're actually going to go ahead and copy over the dashboard and I'll talk to you a little bit about this as well if you are new.

[00:02:52]So let's grab all of this code here, paste it directly over to room. It's exactly the same thing, but this contains an authenticated layout. This is just wrapped here with a slot for the header and the body just goes down here.

[00:03:06]So let's go over to our room show controller, make sure we're actually returning this and once we head over to the browser, we should see exactly the same layout. Great. Okay, so let's pass the room down and then just start to output some details about this. Now what we're not going to do is just pass the entire model down. Instead, we're going to use an API resource for this so we can structure the data in a much better way. This is going to be really useful when we work with real-time because when we send data through our real-time server later, we don't want to send too much. So we'll be creating API resources for the benefit of inertia pages, but also for our real-time stuff. So let's start out with making out a resource and we're going to call this room resource.

[00:03:50]Now to use this, all we need to do is specify the room resource in here, make it out and pass in the model that we want to transform. If we head over to our room resource, we just want to return an array here with all of the data that we need. So typically we'd always output an ID, so let's reference this which is now referencing that model and ID. Let's output the title in here, this title. We're also going to need the slug as well because any subsequent requests we make, we're going to need the slug. And to be honest, that's pretty much it for now. So now that we've passed this down, what we can do over in our room is accept this in as a prop. Let's go ahead and use define props in view and let's accept that room in which is now going to be an object.

[00:04:36]And I'm just going to dump this on the page somewhere. So let's just dump this inside of here so we can see what the data looks like. Okay, there we go.

[00:04:44]We've got all of that data. Now when we work with API resources, by default these are wrapped in this data property.

[00:04:50]We want to change this over. So if we head over to our app service provider under our providers, under the boot method, let's use the JSON resource class to say without wrapping. What that will do is it will get rid of that data and it just makes it a little bit more convenient to work with. Okay, next go is just to replace out this dashboard title. So if we come over to our room here, over in dashboard, we can just output room.title now and that's going to change this over depending on the room that we're in. Okay, so we're getting the data passed down to here.

[00:05:20]What we're now going to do is just scaffold out a basic layout here for all of our stuff. So I'm going to grab all of this template here and move it over.

[00:05:30]This is going to be the users online section. This is going to be our messages section where we also have our text area. Now this doesn't look great at the moment, so what we can do is we can apply a grid to this and we can say grid cols-12 for example. What we can then do is go ahead and set the col-span to three for the users online and let's set the col-span to nine to make up 12 for the other section and that will give us something like this. Now we want this spaced out a little bit with a gap, so let's set a gap of six and that's just going to space these out nicely. And now we have two sections here. Obviously this one for the messages and this one for the users online.