Build a Friend System in Laravel
This episode is for members only

Sign up to access "Build a Friend System in Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
03. Scaffolding the friends page

Episodes

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

Transcript

00:00
Okay let's go ahead and scaffold out the friends page so we have it exactly as we want it and then
00:04
we can just start to iterate through when we get those friends roll in. And the first thing that we're going to do is go ahead and create a controller for this. So let's go ahead and make a controller and we're just going to call this friend index controller. Once we've done that let's go over to our web routes and register this out. So let's do this down here under the
00:23
dashboard. So root get and we just want this to be slash friends. We're going to reference that friend index controller like so and we don't really need to give that a name. Let's head over to our friend index controller. First thing to do is just make sure that we have some middleware applied to this. So we have to be signed in so we're just going to say auth and then we're going
00:44
to go ahead and use invoke here to return a view. We don't have one at the moment. Let's go ahead and make one up and we'll just call that friends index. So let's create that view out in here. So of course under resources and views let's create a friends folder and in there let's create index dot blade dot php and we'll just put friends in there for now just so we know that it's working.
01:06
Okay so as part of Laravel Breeze we get under our routes under our views here we get the layout section and app. This also includes the navigation which is pulled in just here. Now what I'm actually going to do is wrap this in an auth directive. The reason being is we're going to copy this entire template over to non-auth pages like the profile page and this navigation within
01:33
Breeze is not set up at least at the time of recording to work with guests. So it's a little bit of a kind of hacky workaround but you can go ahead and modify the navigation if you want to. So if we look at the navigation in here we've got this logout link. Let's go ahead and search for that and you can see that's just here we've got this x drop down link blade component. Now we can
01:54
put this just at the top here of course go ahead and get rid of this on click which works for the logout and just re-indent this and we can just write friends in here and we can go through to that friends route. So it might be a good idea actually to give this a name so let's go ahead and say name and friends. Okay if we come back over now we should just be able to click on friends
02:17
and go through to that friends page. Great now of course we don't want this looking like this so we're going to head over to the dashboard template which we've already seen and we're going to copy that over to the friends index page just so we don't have to spend too much time on this and you can see we see something like this. So we want this looking like we saw in the introduction so
02:38
we kind of want one section on the left and one section on the right. So we're going to keep this bit here this is the bit with the background the white background so is this actually so we might just need to fiddle around with this a little bit. So I'm going to create a div out here this is going to represent the left section so let's just write left in here I'm actually going to comment this
03:00
out as well and let's go ahead and create out a right section as well just so we can see what we're doing. Now for this kind of overall wrapper what we can do is make this a grid and we could say grid cols 6 with tailwind and I think that should be all we need. What we can then do is assign these different grid sizes and that will nicely match up. So let's say that we want this
03:25
to be colspan of 4 and we want the right hand side slightly shorter in width so let's say colspan 2 which of course adds up to 6. If we give that a refresh there we go this is our kind of larger left side and this is our smaller right side. So we want these things here inside of each of these so we want this in the left hand side and this is going to be our kind of friend section
03:52
and then this side if we just paste that in is going to be our kind of request section. Now this doesn't quite look right at the moment we just need a gap in here so what we can actually do is give this a gap maybe of 6 and there we go. So that of course looks a lot better and let's go ahead and just style out the kind of lists that we want to see here. So for our friends let's go
04:17
ahead and create a div in here and I'm actually going to go ahead and add a space y of 3 to separate out each of the elements we create in here. That's going to be the h2 which is going to say friends and then down here is going to be each of the friends and once again that will be spaced out by say 3. So we'll have a div in here with one friend and a div in here with another friend.
04:41
So at the moment it's not going to look a hundred percent but we all we need to really do here is just style this header up. So let's go ahead and say text large and font semi-bold. Let's go over give that a refresh there we go. So for each of our friends we want the friend name here and then we want an action on the very right hand side. Same with the request section as well. Let's finish
05:02
this bit off and then we can just copy and paste that over. So for each of the friends let's just pull this down here we want this to maybe have a class of flex so we'll say item center and we'll go ahead and justify this between. That means that if we have the friend's name just here and then some kind of action next to it that's going to separate them two like this and that's
05:26
exactly what we saw before a friend's name and then the action on the very right hand side. So for the friend's name this is actually going to be an anchor so let's change this over to an anchor tag and just for now we'll set an href of hash because we're not quite sure where that's going to go through to yet and with the action we probably want this kind of set up for multiple
05:48
actions so why don't we go ahead and set this to a space x of two. What that means is if we have multiple buttons here within our forms so for example to accept a friend request or to reject a friend request it's going to look like that we get that little bit of spacing between each of these. So I think that's pretty much everything that we need. We'll leave this
06:13
as it is and pretty much just copy this entire structure down so let's go ahead and grab this here pull this down to this request section and let's fill this in. So let's indent that this is going to be our friend requests and then we're going to be able to accept or reject a friend request for this one actually let's change this over now this is going to be unfriend someone
06:43
so that's what we're going to end up with and if we come down and just duplicate this down that's going to be our pending friend request so people that we are trying to add so we will be able to cancel that so let's change that action over to cancel and there we go now we've got a little bit of a spacing issue between these two but that's no problem what we can do is come to
07:07
this outer wrapper and we can set a space y maybe of six and that's going to separate them out nicely so that's pretty much our friends page scaffolded out we've got a link here for the friend's name that we can click through to headers for each of the sections and we've pretty much scaffolded out the button labels that we're going to have

Episode summary

In this episode, we start building out the friends page from scratch. First, we make a new controller specifically for the friends index, register the route, and set up the middleware to make sure only logged-in users can access this page. We then create a basic Blade view for the friends page, just to check that our setup works.

After that, we dive into tweaking the layout. We take advantage of the existing layouts from Laravel Breeze, but we update the navigation a bit so that it only appears when a user is authenticated. Then, we add a "Friends" link to the navigation so we can click straight through to our new friends page.

Next, we start styling the page to match our requirements. We set up a grid layout with Tailwind where the left side is bigger for the friend list, and the right side is slightly smaller for friend requests. Each section gets its own header, and we add some dummy data to see how each friend and request will look, with easy spots for future features like accepting or rejecting requests.

By the end, we've got a nicely scaffolded friends page with separate sections for your friends, incoming requests, and pending requests all styled cleanly and ready for hooking up to actual data later on. This scaffolding lays a solid foundation for building the real functionality as we move forward.

Episode discussion

No comments, yet. Be the first!