Showing the referral link: Build a Referral System with Laravel

00:24

So we'll say referrals. And of course, we don't want to include any of this stuff. Let's get rid of these two, which are for the other stuff on the profile page. Looks pretty much the same, but it's going to work a lot better now.

00:36

OK, so for the profile edit page, let's just take a look at this and copy the kind of same structure as one of these. So for this update profile information form, let's grab this. And you can see that we've got this header in here. We've got this sort of subtitle.

00:51

Let's copy all of this over and create out a new include for our referrals. So let's create out a partials directory in here and this is going to be our referral code. So we'll create that out as a partial and we should be good. So I'm going to paste all of this in here and we are going to get rid of it in a second.

01:11

So let's go over to here and do exactly the same thing by including that. But that's now under referrals and partials. And this is now our referral code. So, of course, you can do anything here, but I just kind of want to get the same structure.

01:29

OK, so obviously this isn't working because we've stolen the code here from the profile update section. So let's go ahead and just get rid of anything that we don't need in here. So we don't need this. We don't need really anything in here.

01:41

So let's just make sure we've got the right structure in here and it should be good. So let's get rid of this form and just write code in there. OK, if we come over now, we have the following and we can just add our code directly in there. Great. OK, so let's just sort of scaffold this out how we want this to look.

01:57

So we'll go ahead and use a text input and that comes from this framework. We'll give this a referral code ID type of this is going to be text. And let's just fill this with any value just for now, just so we can see this working. And it's going to be more like a link.

02:15

So let's say. Laravel referrals dot test forward slash, and then it's going to be maybe some sort of code and let's go ahead and just start this up. So we'll set margin top of one here, block with width full, and that should be good for now. So we have the following. Great. OK, so the outer wrapper, let's go ahead and give this some margin on the top. And there we go. OK, so now we want a link that sits next to this,

02:41

which is going to be responsible for copying and pasting this link. So we're going to say copy link and we want this to sit next to it. So let's go ahead and set this with a flex of item center. And there we go. We'll set this button to have a class of shrink zero so it doesn't collapse up like that.

03:01

And then we'll go ahead and set the font to a medium text to small and we'll set the text to indigo and five hundred just to keep it the same. And then here we'll go ahead and set a space of X, maybe three. So that's spaced out nicely and we have our copy link. What we could even do to make this a little bit nicer if you're interested in the Tailwind implementation is we could say items baseline instead.

03:26

And that's going to sort of line the text up with what we have in here. OK, so that is how it's going to look. But now we want to focus on actually generating this code. We'll also change around some of this other stuff as well. So this is our referral code and I'm just going to copy and paste over some text I already created, which is send this referral code to invite people.

03:46

Great. OK, so we need to get this link, but to get the link, we need a route which is actually eventually going to end up going through to. So let's create out a controller and let's call this referral index controller. We could separate these out a little bit better, but I think referral index controller is fine. That's the page that the person who the code you're giving to is going to land on to see that button which they can click to actually activate the code.

04:13

So our referral index controller is done. Let's just head over to that controller and add in an invoke quickly. We won't do anything in there just yet, but we will go ahead and register the route so we can actually generate our name. Now, this isn't going to go under the auth section because the users could be guests. So let's go ahead and just create this out down here. So let's say route get and we'll say referral and then slash.

04:39

And we really want to make sure we pass in the referral code here. That's really important. But with route model binding, we want to make sure we pass this in as the code and not the idea of the code. So we can now hook up to our referral index controller and we can give this a name, which is going to be what enables us to actually link through to this. So we'll call this referral and index. So the names here are pretty similar, but we can always change them later.

05:03

OK, so our referral index controller is now going to get that referral code in there with route model binding. So let's pull that in. And for now, let's just die dump that just so we can see it. OK, so now that we've done this, we've got the name for this route and we can generate our link, which is, of course, going to sit over in our referral code input just here.

05:26

So we're going to add this to our has referrals trait just so it's a little bit easier to access. So let's go and create out a referral link method. And from this, we'll return a route and we will use that referral index route. And of course, we need to pass an actual referral code into this. So we're just going to say this referral code.

05:48

So anytime we need to access the referral link for that user, this will grab their referral code and we don't need to invoke that. And it will just pass it through and generate that link for us. So now that we've got this, we can just go ahead and put this directly into the value of the input. So we'll just say auth user and referral link. OK, let's head over.

06:08

And there we go. We have a nice referral link generated that we can use. OK, let's tidy this up because at the moment this is modifiable and that breaks the CSS because we've got this set to baseline. So we just want to add in a couple of other things in here, other attributes to make this read only, for example. That's going to be important. So we can actually modify this. We can still access it to copy and paste it.

06:31

And we're going to be building this part in the next episode. OK, I think we're pretty much done. We've got our referral code now, which we can actually paste through to people. And of course, at the moment, that's just dying and dumping on the referral code itself. Let's go over and just look at this copy link functionality. So it's a little bit easier to copy.

Sign up to access "Build a Referral System with Laravel" right now.

Episodes

Transcript

Episode summary

Episode discussion