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
04. Building the user profile page

Episodes

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

Transcript

00:00
So next up we're going to build the user profile page because this is where our link is going to
00:04
be to actually add a friend. So we're going to need to be able to click on that button, submit a form and add a friend. There are going to be lots of different ways that you can add friends. For example, you could enter a user's email address to add them as a friend. We'll kind of get to how we would do that later in the validation rules around that. But for now,
00:22
let's just build out this really simple profile page. So first of all, we'll start with a controller. So let's just say profile index controller. And of course, we'll head over to our root and we'll create this out. So let's just copy this one down. And we'll go ahead and say profile slash, and then we'll use root model binding to pull that user in. Let's go ahead
00:43
and say profile index controller. And we'll just call this profile. Bear in mind at the moment with root model binding, this by default will accept in the ID. If you did have usernames, you'd want to go ahead and maybe choose the username column for that rather than expose the IDs of your project. So over in the profile index controller, we don't need any middleware for this, but we do
01:04
need an invoke magic method. And we're just going to return a view out here and just call this profile index. And once again, just come over and create this. So let's create a profile folder, index.play.php. And we'll just put profile in there for now. Okay, so inside of invoke, we're going to grab a user that's looked up by root model binding. And of course, we're going
01:28
to pass that down to our view. So we can actually output the details about that user. And just make sure we pull the namespace in for this at the top. Okay, so we've only got one user at the moment here. So let's just duplicate this down and just give this another name. And of course, another email address because they're unique. And let's go over, that should be ID of two,
01:51
and it is. And let's go to profile slash two. And there we go, we get the profile details. Now, once again, we're just going to come over to the dashboard page, copy this over to the profile index template. And at the top here, we'll just output the user's name just to keep things really, really simple. So user and name. And we should now see Mabel at the top. Now, of course,
02:14
we don't want to see you're logged in. This is where all of our button actions are going to go. Let's scaffold that out now really quickly, just so we've got something to come back to. So we're going to create our form, the action we don't know at the moment, the method is pretty much always going to be post, we're going to go ahead and use our cross site
02:31
request forgery directive to pull in the cross site request forgery token in there. And we're going to have a button. So the first one that we're going to do is as add as friend. And we'll add some color to this because at the moment, it just looks black. And let's say text indigo 600. There we go. So when we submit this, it's going to go ahead and make a post request,
02:56
which of course, at the moment, does not work. So we'll be changing this up depending on the status of the from request. And of course, we will come back later to look at profile one, which is us, because we shouldn't be able to add ourselves as a friend. So we'll be protecting against that as well. So there we go, a very, very simple profile page with our add as friend button.

Episode summary

In this episode, we start building the user profile page, which is going to be really important for our app since this is where users will be able to add each other as friends. First, we set up a basic controller and route for the profile, using route model binding to fetch the user by ID (or username if you want to go that way for more security).

We then get the profile view up and running, passing the user from the controller so we can display their details. We quickly duplicate some user data so we have more than one profile to view and test. Next, we focus on getting the template sorted—showing the user's name at the top and getting rid of unrelated details like a "You're logged in" message.

To wrap things up, we scaffold out the UI for the "Add as friend" button with a form, using a POST method and including the CSRF token for security. The button doesn't actually work yet, but we've set up everything we need to come back and wire up the add friend functionality later. Also, there's a note that we shouldn't be able to add ourselves as friends, so we plan ahead to handle that scenario.

So, by the end of this episode, we have a basic profile page ready, along with a placeholder for the friend request feature!

Episode discussion

No comments, yet. Be the first!