Laravel Mentions
Playing
02. A fresh app with usernames

Episodes

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

Transcript

00:00
Let's go ahead and set up a fresh project but change over a user so they have a username. We need something that we can mention a user by and of course if you're working with something completely different like you're mentioning say github issues, something similar to that within
00:17
your own application, you just need to make sure that you've got a column that you can reference the mention by. So let's go ahead and create out a new project here called Laravel Mentions. We're going to be using the Laravel Breeze starter kit just to make things a little bit easier and we are going to choose Livewire as our stack and of course as I mentioned in the introduction
00:39
the core functionality here doesn't care if you're using Livewire, Inertia or anything else but you can go ahead and integrate it with whatever front end you need. So let's choose Livewire with the functional API and let's go ahead and go through the rest of the options. Now we do want PEST as our testing framework we will be running tests to make sure everything gets
00:59
synced up. Let's just wait for this to prompt us about our database and we're going to choose MySQL and let's go ahead and run our default migrations there as well. Okay that looks like it's done let's go into that directory and open this up in our editor and now all we need to do is go ahead and change around the way that users are created. So let's just give this a refresh here and we'll
01:21
head over to register we don't have the ability to register with a username so let's change this up very quickly so we have something that we can work with. Okay so to do this we'll go ahead and create our a new migration so let's go ahead and make a migration here let's call this add username to users table that obviously makes sense and it will generate that nice scaffolding for us
01:42
to add username to users table and we just want to add in a string in here so let's say string and that will be a username of course really importantly this is unique so obviously we can't have multiple users with the same username. Okay let's go ahead and migrate this and we are done so if we head over to our user model this does contain a fillable array so we're going to need
02:08
to change this up to include the username and now all we really need to do is change over the registration process just here so let's find out that register.blade.php file under our livewire stuff and let's take a look here so we've got an initial state here let's change this over to also include a default empty username and let's check out the rules here so we've got a couple of
02:38
validation rules what are these going to be well let's just go ahead and add in the rules here this is required it's going to be a string let's say max 20 of course you can change these over if you want to and let's say rule from our illuminate validation class and let's say unique to the users table and that's pretty much what we need to do. Okay let's go down we've got the register
03:04
process here so that will be validating that creating the user with the validated data so that will pass in the username implicitly now we really need to do is just add in an extra field in here so let's change this one over to username it's for username give this a label of username and the model here gets hooked up to the username under that state id can be username type
03:31
can be text name can be username again and we want to get rid of autofocus or we could use autofocus here and then get rid of autofocus on the name we should now underneath that and for autocomplete we could include that if we want to and finally let's just swap over the errors so we should now over on the registration field here have a username okay great I'm just going to go ahead
03:56
and run npm run dev here and open up a new tab and that should go ahead and look a little bit better it does not so let's just check this out really quickly so yeah we've got margin top of four on each of these and there we go great so let's try and register an account here with a username and just see what happens so let's go and enter all of the other information we'd normally enter
04:20
and there we are we are registered so if we hop over to the database we should now have that username stored great so the second thing that we need to include is this in the profile section here so we need to be able to update our username as well if we want to of course feel free to skip this but let's go ahead and make sure that this system is pretty much complete so we want this under the
04:45
profile.blade.php file let's just have a look at this and we've got the update profile information form component here which pretty much works like the registration process so let's go ahead and just add into the state the username here and that will be the username from the user who's already registered and signed in the registration or the update profile validation
05:10
works a little bit different here we can still set a max 20 and we can still use the unique rule for the users table but we need to ignore the current user because obviously if we're updating everything except the username the username does exist so we want to ignore the current user so again once this goes through this process of validating it will fill that with the validated
05:35
data it will save the user out and we should be good so all we really need to do now is just go ahead and once again copy and paste the name and add this in so let's get rid of autofocus from the second one and we'll just switch this over to username where it makes sense so username and ymmodel again really important the most important part to hook that up there
05:59
id and name changes to username type is still text we've got autocomplete here which we can set to username and of course the errors that come through we need to set to username as well so let's go over and there we go it's already in there for us to go ahead and update so i'm going to go ahead and change that to alex underscore gs and yeah sure enough this gets
06:20
updated so just while we're here we could do this with tinker but let's just manually do this in the database and create out another user and then give them a username just so we can manually test the unique rules we could update our tests a little bit later to cover these as well but i'm going to create a user called tabby with a username of tabby i shouldn't be able to update that here
06:42
you can see that username has already been taken let's just change mine back to alex quickly and let's go ahead and try and register an account as well with tabby or alex just so we can see if this works or not so let's choose tabby all the way through and if this is good which it is we have now successfully created a fresh project with the ability to register with a username and
07:07
also update the username as well so i'm going to go ahead and log in here because i'm going to be using my account to test this out and we are all good to go let's go ahead and build out in the next episode a simple comment system so we can start to at least store something in the database and detect mentions by the usernames that we've just added

Episode summary

In this episode, we start things off by creating a brand new Laravel project with user mentions in mind. The first step is ensuring our users have unique usernames, which will be key for mentioning them later, just like you would mention users in GitHub issues or comments.

We set up the project using the Laravel Breeze starter kit and opt for Livewire (but you could adapt this for other frontends too). We walk through the project creation process, pick MySQL for the database, and run our migrations to set up the necessary tables. Then, we create a migration to add a username column to the users table, making sure it’s unique, update the model to allow mass assignment of this new field, and tweak the user registration process to let new users set their username.

After confirming usernames are stored properly, we also improve the user experience by enabling usernames to be updated from the profile page. We take special care so that users can’t take someone else’s username and that they can keep their own. We also test what happens when trying to pick a duplicate username to make sure our validation is solid.

By the end of this episode, you’ll have a fresh Laravel app where users can register and update their usernames, making your app ready to handle mentions! In the next episode, we’ll dive into building a simple comment system that can detect and handle those username mentions.

Episode discussion

No comments, yet. Be the first!