Build a Referral System with Laravel
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
09. Showing the referral page and incrementing visits

Episodes

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

Transcript

00:00
At the moment, we're just dumping this referral code on the page.
00:03
Once a user goes through and actually clicks on our referral link, that's obviously not what we want. So let's create out a view for this. So let's say make view.
00:13
And we will call this referral.index. So we'll just keep this kind of separate from what we did within our account area. And let's return that view in here, so referral and index.
00:27
And really, we just want to pass down the referral code. So let's go and pass that referral code down. Great. So let's head over to our referral index page.
00:38
And with this, we kind of want a guest layout. We don't want the user to be signed in. We can't use an authenticated layout, because they're not going to have their user
00:47
information in the nav bar. And of course, this depends on how you're actually building your app and how your layouts look. But I'm going to go ahead and just grab the login.blade.php
00:57
guest layout here. And we'll just do that in here. And we'll just dump the referral code on the page. So that is going to look a lot better.
01:10
So from our referral code, we know if we look at our model, we've got the user in here. So we can say to this user, you've been referred by. And then we can give their name.
01:19
So we're going to build this out as a form, because in the next episode, we're going to look at setting the cookie. And we want to post through to another route
01:26
in here to actually set that cookie. But let's go ahead and build this out. So we'll create out a paragraph in here and just say, you've been referred by.
01:37
And then we'll give the user's name. So we can just say referral code, access the user, and then grab their name. So that's going to look a lot better.
01:46
And then down here, we're going to have a button. So we'll just use the x-primary-button component that comes with this library. And we'll just say sign up for 20% off or whatever it is.
01:58
So that's what that looks like. OK, so I'm just going to add a couple of styles to the outer wrapper here. So let's set a padding of 6.
02:05
We'll set all of the text to center. And we'll space all of them out on the y-axis by 6. And there we go. You've been referred by Alex.
02:13
And we can click on this to go ahead and go through to the next step. Now, let's not forget to just add in our cross-site request forgery token in here when we do get to submit this.
02:23
But that's pretty much our page now. Now, this doesn't look great. So let's bring that cross-site request forgery token down to the bottom so that spacing isn't affected.
02:32
OK, so the last thing that we want to do here is increment the visits or views count, whatever we called it. So let's go over to our database and just remind ourselves visits is the one that we want to increment.
02:44
Clicks is going to be when we go through to set the cookie. And to actually increment this is incredibly easy. So we just want to say referral code, increment. And then we would just want to increment the visits column.
02:56
And that will do exactly as you expect. It will just increment this by one. Or you can increment it by more. But of course, we don't need to do that.
03:04
OK, so let's go over to that page now, give this a refresh a couple of times. And sure enough, with our referral codes, we've got a ton of these because we've still
03:13
got a load of users hanging around. But let's just have a look at ours, which is here. And yeah, sure enough, we've got three visits. Great.
03:21
There we go. We've built out the page to show the user the referral, click through eventually, and we're incrementing those visits.

Episode summary

In this episode, we focus on jazzing up our referral page so it's not just a boring code dump anymore. First, we set up a new view for displaying the referral, sticking it outside of the main account area so it feels more welcoming to guests. We use a guest layout rather than an authenticated one, since usually referral links are for users who aren't signed in yet.

On the referral page, instead of just showing the code, we let new users know who referred them—"You've been referred by Alex"—and dress things up with some basic styles to make it look tidy. There's also a call-to-action button encouraging users to sign up and grab their reward (like 20% off). We prep the form, remembering to add a CSRF token for security.

The key functionality here is that, every time someone lands on this referral page, we increment a visits count in the database for that referral code. A quick check in the DB shows the number ticking up as expected whenever we refresh—so it's easy to keep track of how many people have landed on the referral.

All set! The page now looks friendly, tells visitors who sent them, and is accurately tallying how many have dropped by via referral.

Episode discussion

No comments, yet. Be the first!