Build a File Marketplace with Laravel
This episode is for members only

Sign up to access "Build a File Marketplace with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
08. Setting up and listing products

Episodes

0%
Your progress
  • Total: 3h 32m
  • Played: 0m
  • Remaining: 3h 32m
Join or sign in to track your progress
01. Introduction and setting up
01. Introduction and demo
5m 51s
0%
02. A fresh project with Laravel Breeze
4m 29s
0%
02. Onboarding with Stripe
03. The onboarding screen
7m 17s
0%
04. Registering the Stripe PHP library
3m 43s
0%
05. Automatically creating Stripe accounts for your users
3m 11s
0%
06. Forwarding users to Stripe Connect
4m 36s
0%
07. Verifying if payouts are enabled
2m 24s
0%
03. Creating products
08. Setting up and listing products
10m 54s
0%
09. Installing Livewire
2m 49s
0%
10. Building the product creation form
15m 1s
0%
11. Automatically generating the slug from the product title
1m 28s
0%
12. Validating and creating a product
6m 23s
0%
13. Handling product file uploads
8m 14s
0%
14. Attaching files to a product
6m 45s
0%
04. Editing products
15. Creating the product edit form
5m 4s
0%
16. Reviving product state
5m 21s
0%
17. Showing and modifying existing files
7m 55s
0%
18. Pulling together the product update process
4m 20s
0%
19. Flashing an update message
4m 57s
0%
05. User subdomains
20. Adding a user subdomain on registration
10m 54s
0%
21. Subdomain routing basics
6m 47s
0%
22. Adding a string macro to properly display the user's name
3m 32s
0%
23. Listing the user's live products
3m 49s
0%
06. Product checkout
24. Showing the product page
10m 35s
0%
25. Creating the checkout success page
3m 57s
0%
26. Starting the checkout flow
9m 22s
0%
07. Storing sales
27. Handling Stripe webhooks
12m 1s
0%
28. Storing product sales
10m 15s
0%
29. Sending a confirmation email to customers
4m 30s
0%
30. Securing Stripe webhooks
4m 32s
0%
08. Accessing purchased files
31. Creating and validating the product download page
3m 54s
0%
32. Displaying and downloading files
4m 50s
0%
09. Sales dashboard
33. Calculating and displaying download stats
6m 6s
0%
34. Listing through sales
7m 3s
0%

Transcript

00:00
By the end of this episode, we'll have created our products page where we can see a list of our products and a button to create a new product. So the first thing that we're going to do is go over and create our new controller to handle this.
00:11
So let's make a controller in here called product index controller. And let's head over to that product index controller. Just think about the kind of things that we need to do here just to make sure that this is protected.
00:24
Of course, the user is going to have to be signed in because these belong to a user. So let's go ahead and add in our auth middleware. But also, we need to add if we head over to our dashboard controller, the redirected user has not enabled Stripe middleware because, of course,
00:39
we don't want a user accessing this page if they haven't enabled Stripe. They're not ready to sell products and sell them just yet. So we're going to have an invoke method in here, which is just going to return a view. We'll very quickly just create that out.
00:52
So let's create a product index file and let's head straight down to our view section here, create out a new folder here called products, and we'll create an index.blade.php file in there.
01:05
Again, we're just going to use a very simple template. So we're actually going to use the dashboard for this because that's how it's going to look. So let's just go ahead and copy this out into here for now
01:14
and just write products in here and products up here, just so we have something to go on. OK, so let's go ahead and register the route for this really quickly. We'll just copy the dashboard one down here.
01:24
And that's, of course, going to be slash products. And that's going to use the product index controller. And we'll give this a name. We'll just call that product. Great.
01:32
OK, so we should be able to head over to products now and see this page. Let's get this hooked up in the navigation. Then we'll get the database set up and these iterated through. OK, so we're going to go over to the app.blade.php template under views and layouts.
01:47
You'll notice that we have a partial in here layouts navigation. So we're going to go ahead and open that up. That's in resources, views and layouts. And we can pretty much just search for dashboard in here.
01:58
And we'll find if we just come down here, this XNAV link. So this is a separate component that just allows us to keep all of these looking pretty much the same. So we're going to change all of these over to products.
02:10
And we'll, of course, output the text product. And there we go. So we can click on that. That's highlighted now because we're on that page and we're all good. We also might want to do this for the mobile navigation.
02:20
If we just open up our mobile view here, you'll see that this doesn't actually exist in here now. So it's probably a good idea to include it in here as well. So if we just search for dashboard again, we've got this X responsive NAV link.
02:33
So we can pretty much just do the same thing for this and swap these over for products as well. And we should now see that in there. Great. That's working as we would expect.
02:45
OK, so next up is obviously creating the database table for this, the model. And hooking this up to the user in a relationship. So for this, we're just going to say make model and product. And we're going to create a migration alongside of that as well.
02:59
So we've got our model created and our migration created. Let's start with the migration. So let's head over to the create products table migration here. And let's start to fill in some of the stuff that we are going to need.
03:11
So this belongs to a user. So we're going to go ahead and add in a we just reference table here, a foreign ID for the user ID. We're going to set this with a database constraint.
03:22
So it has to exist in there. And we're also going to go ahead and say on delete and cascade. So if the user gets deleted, all of the products get deleted as well. We are going to retain sales as part of this.
03:34
So I'll show you how to do that a little bit later. OK, so for the basic metadata about our product, we just want the title in here. We are going to have a slug so we can reference it. And we're going to make sure that's unique.
03:46
Bear in mind, at this point, we're going to have lots of different users with lots of different products. So at the point at this point in time, no users can have the same slug for a product. So we may deal with that later.
03:58
But that's something we might want to adjust later on a per user basis. The next thing is going to be a description in here. We're just going to keep this super simple for now. And really importantly, we want a price.
04:11
So we're going to go for an unsigned integer and we're going to say price. Now, you might be wondering if you're new to working with pricing in any kind of apps. Why are we saying this is an integer? Surely it can be nine pound ninety nine or nine dollars ninety nine.
04:26
That's a floating point. Now, the reason for this is we're going to be storing this in cents. So for nine ninety nine, this would be nine ninety nine cents. And the reason we do that is just for a little bit more integrity.
04:39
And the package that we're going to be pulling in will allow us to pass in a cents value like a thousand or ten or however much you're pricing it in cents. And that allows us to format it to a acceptable value like nine dollars ninety nine or whatever it is.
04:56
So the last thing that we need in here is going to be a Boolean to show whether it's live or not. So the user will be able to control whether this is accessible. And by default, we're going to set that to false when the product is originally created.
05:09
And that is pretty much it. So let's go ahead and migrate these changes and we will go over to our product model, first of all, and just make sure we fill in some of the fillable columns that we can actually fill in here.
05:22
So as we've already seen, we've got a title that can be filled. We've got a description. We've got a slug in here as well. We've got a price and we've got whether it's live or not.
05:33
And of course, if you add any more metadata to the products, they'll need to go into this fillable section just here. Now, the next thing we can do while we're in here is relate this back to a user. So a user product belongs to a user.
05:45
So we're just going to say this belongs to user. That means that if we're accessing the products at any time, we can go back and find the user for that and then we can head straight over to the user model and we can go ahead and create a relationship in here that gives us
06:01
all of that particular user's product. So, again, we're just working with really simple relationships here. That's going to be has many products so we can extract all of the products that a user owns.
06:12
And for now, that is pretty much it. What we can now do is over on the product index controller, actually go ahead and grab a list of products that we want to pass down. So let's go ahead and pass our products down.
06:24
I'm going to grab this from the currently authenticated user, of course, because we're only showing that user's products. So request user product. And we probably want to grab the latest at the top and then just say get.
06:36
Of course, you could paginate in here if a user is likely to have lots of products, but we'll just use get for now. OK, so now we can head over to products and index and we can start to iterate through and list out all of the products.
06:50
So we're actually going to wrap this around this back, this white container. It's not going to look great at the moment, but let's start to iterate over the products that we have just for now. So we're going to say for each product as product
07:03
in that for each loop there and just indent that. And let's go over, of course, at the moment, I don't have any products. Let's go ahead and just create a couple in here just to test this out. So let's relate this to the user.
07:15
We'll say product one, product one and product one description. And we'll set the price to a thousand. We will set this to it doesn't really matter in this case, but we'll set this to live and we'll fill these in.
07:30
And it's just duplicate this down and add a second product just to test this out. So product two description and that should be good. OK, so if we head over to the browser, give that a refresh. We've now got these two products listed out inside of this white container.
07:45
Now, this white container, we're actually going to change this over to an anchor. So that links through to the edit page. Not going to fill that in just yet, but not quite there. But in terms of the styling, what we're going to do is adjust
07:57
the outer container just here to actually be a grid. So we can show these a little bit nicely. So with Tailwind, we're going to set the outer container for each of these items to a grid and we're going to have three rows to this.
08:09
So it's going to show one here, one here and one here and then go down. And we will go ahead and set a gap here of six. And for the anchor itself, let's just have a look here. So we've got.
08:21
Yeah, I think that looks OK. So we should be good there. Each of them products, we can click through onto them. We can make any style adjustments if we need to in a moment.
08:29
So that grid looks good. Let's just go ahead and add some additional styles to the anchors here. We're going to set a specific height of 44. We're going to set flex on this with items center and justify center.
08:43
And then everything in the middle is just going to sit in the middle like that. That's pretty much what we want to see. So for the item just here, let's get rid of the padding because we're not going to need that anymore.
08:53
And let's set the text here to large. So we have something that looks like this. So this is the product itself. Of course, now we're iterating through them.
09:01
We can go ahead and output the product title. Now, I'm just going to be outputting the product title here because I want this to look as simple as possible. But of course, you can start to add the price in here and all that kind of stuff.
09:11
But from a user's dashboard point of view, the products that we have should be pretty self-explanatory just by the title. OK, so now just add this button at the end of here. So just outside of the foreach, we're going to create another anchor in here.
09:24
Let's just pull that in. And this is going to be to create a product. Keep this super simple. And let's just go ahead and add in some styling to this.
09:33
It's pretty much going to look like what we have already. Let's just set a grayer background to differentiate this. We'll set overflow to hidden on this. We'll set a small shadow.
09:44
Pretty much all of the styles that we've already seen for each of our items. In fact, we could actually copy these over. Let's just grab all of these. And put them in here.
09:54
And then we'll keep our gray background in there as well. Let's just see what that looks like. OK, I think that looks pretty much OK. Let's get rid of that background white.
10:02
And I think that should be everything we need to create a product. So we can click through to here to go through to actually create a product when we get to that point. And I think that's pretty much it.
10:12
We've got a list of our products now, which, of course, we've just manually created in the database just for now. But at least we can see a list of our products. Responsively, if we just take a look at this,
10:22
it probably doesn't look great at the moment. So we could make some adjustments there. Let's really quickly do that. If you're new to Tailwind, what we want to do in here
10:30
is we want to set the grid calls differently on a smaller viewport. So we could actually say grid calls none, for example. And then on a medium viewport, set grid calls to three. So you can see now when we're on a smaller viewport,
10:44
these just show underneath each other. But as we start to pull this out, you can see that that bumps up to three. So I think that's absolutely fine for now. Of course, you can tweak that if you want to.

Episode summary

In this episode, we set up the very first version of our products page for the app. Here's how we go about it:

First, we start with creating a new controller just for displaying the list of products. We make sure only authenticated users who have enabled Stripe can view or manage products, so we add the relevant middleware. Next, we build a new Blade view for the product index and hook it up to its own route (i.e., /products).

To keep everything tidy in our UI, we update both the desktop and mobile navigation so that there's a clear link to the products page right from the dashboard.

Now for the database work: we set up the products table migration, making sure each product is connected to a user. Products get a title, unique slug, description, price (stored in cents for accuracy), and a live boolean to indicate if they’re published yet. We also set up the Product model and its relationship with the User model—so each user can own many products.

Once that's done, we update the controller to grab all the authenticated user’s products (ordered with the newest first) and pass them to the view. Since we don't have any real products yet, we manually create a couple in the database for now.

On the frontend, we loop over all the products and display them in a nice responsive grid using Tailwind CSS. The grid adapts between one column on mobile and three columns on larger screens. Each product is shown simply by its title (but you can easily add prices or other details). There’s also a button at the end to add a new product, styled to match the rest of the layout.

That’s the basic setup! Now you have a working products page, ready for listing items and jumping off into product creation and editing in future episodes.

Episode discussion

No comments, yet. Be the first!