Building a Notification Preference System in Laravel
This episode is for members only

Sign up to access "Building a Notification Preference System in Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
02. Building the preference panel

Episodes

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

Transcript

00:00
Okay so to kick things off let's build out the notification page where we're going to see all of the preferences, have the ability to select them and of course save it via that form. So I've gone ahead and created a project with Laravel Breeze just using pure blade, nothing
00:15
else, no live wire, no inertia, but of course if you are using either of these solutions for your Laravel application this will work in exactly the same way. You'll pretty much just have to tweak some of what you're doing, particularly for inertia depending on the framework you're using on the client side, but once you're done with the course you can pretty much transfer everything
00:36
that we're looking at here over to that solution, but for now we'll stick with blade. Okay so we've got a project set up, let's go and create out a new controller for our notification preferences. So let's make out a controller here and let's call this notification controller. Now inside of that notification controller we're going to have two things, the first is going to be
00:58
the index that we use to render that stuff out and we're actually going to call that edit and then we're going to have another method in here which is going to be to go ahead and update that so we could call that patch or update whatever we want to call this. So edit is what we're interested in, let's follow the structure of the Breeze framework under views and we've got profile and edit so we
01:20
can pretty much keep the same thing. Let's go ahead and make out a view in here and let's call this notification.edit and then we can just return that view directly from here, steal the template and we're good to go. So let's go ahead and return a view here notifications.edit and let's register the web root for this. So we can put this within this root group just here, let's just steal the
01:43
one for the profile and this is going to be slash notifications. This is going to use the notification controller that we've just created, it's going to use that edit method and of course this is going to have a completely different name, we're going to call that notifications.edit. So now what we can do is head over to the navigation partial, let's look at where we have that profile link
02:05
in the drop down and let's just create another one out in here. So let's grab this, pop this down here, give this a name of notifications and of course link this over to notifications.edit instead. We should be good so let's go and head over to notifications here and yeah we just get a blank page which is fine for now. So if we head over to edit.blade.php under profile this is pretty much
02:32
the kind of structure that we want to copy. Now I've already got a predefined template with everything that we need for this notification stuff. I'm going to go ahead and pull that over because it's really you know a bit of a waste of time to go through every single section of this when we can just get on with the actual functionality itself and you can go ahead
02:53
and start this however you want. So I'm going to go ahead and paste this entire template in, it's available on the github repository so you can go ahead and just copy and paste it in if you're following along. If we give this a refresh let's just take a look at what we've got here and we have nothing at the moment so yeah I've just pasted that into the wrong place so let's
03:12
put that in notifications and edit and let's paste that in there we go. Okay great so this is pretty much what we saw from the introduction we've got the overall group here which we can iterate over we've got a notification title so for each notification under that group we'll iterate and then we've got a column for each of the channels so this will be one channel but we
03:36
can add more onto here if we want to and of course we'll have a check box mapped up in this matrix to each notification and each channel that we have and then we just have a save button so pretty straightforward let's just take a real quick look at the code just to get familiar with it and then we'll move on. Okay so we've got an overall form wrapper so we're going to be obviously
03:57
submitting all of this data through we've got the notification channels section just here which will iterate these at the top so we're sort of building out a form type layout here without actually using a table sorry a table layout so without actually using an html table then we have the notification groups so these need to be iterated over with the group title just here
04:20
for then the individual notifications to be rendered inside of these and then next to these you can see that we're using a space y of 1.5 here with a margin top of four of the individual and these are spaced out with flexbox so we've got an item center and a justify between each of these individual boxes here contain all of the check boxes so we'll iterate through this to
04:43
create out the check boxes just to give you an idea of this if I copied and pasted this one down here we end up with two next to each other and of course in that case we'll also have a channel duplication as well so we would have two different channels two different check boxes and you can see that they all map up really nicely okay so let's get rid of them and if you are following along go
05:04
ahead and copy and paste that directly in let's just get this form hooked up so we can just submit this through to the controller and then we'll be good to go okay so over in our web routes let's start here let's create out a patch request routine notifications and of course we're going to push that over to the update method that we created this we can call update patch whatever we want
05:25
doesn't really matter too much let's fix that up and let's grab the name of this and let's go back over to that edit template and let's find our form here and let's go ahead and hook this up so root notifications and that will be update now I've already added as part of this code down here the crossout request forgery token really important and the method spoofing as well but if you are
05:53
going ahead and manually building instead of building this out you'll want to include both of that okay so we should now be able to hit save and go through to that patch request to update our notification preferences of course though at the moment we don't have any notifications that we can start to iterate through so let's go and do that next

Episode summary

In this episode, we're setting up the notification preferences panel in a fresh Laravel project (using Laravel Breeze with Blade templates for simplicity). We'll guide you through building out the notifications page where users will be able to see their preferences, select them, and save the changes through a form.

We start by creating a new NotificationController with two main methods: edit for displaying the preferences and update for handling form submissions. We'll create a new view for the notification preferences, hook up routes, and add navigation links so the page is easy to access from the menu. To save time, we copy a ready-made template for the notification panel UI (available in the GitHub repo), and explain how this layout uses Blade loops and Flexbox to neatly organize preferences and channels with checkboxes.

By the end, you’ll see how the panel is structured and how to wire up the form so it submits via the right route back to the controller. At this point, the preferences aren’t populated with real data yet—but with the structure in place, we’re set up for the next step!

Episode discussion

No comments, yet. Be the first!