Build a File Marketplace with Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

10. Building the product creation form

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

02. A fresh project with Laravel Breeze

02. Onboarding with Stripe

03. The onboarding screen

04. Registering the Stripe PHP library

05. Automatically creating Stripe accounts for your users

06. Forwarding users to Stripe Connect

07. Verifying if payouts are enabled

03. Creating products

08. Setting up and listing products

09. Installing Livewire

10. Building the product creation form

11. Automatically generating the slug from the product title

12. Validating and creating a product

13. Handling product file uploads

14. Attaching files to a product

04. Editing products

15. Creating the product edit form

16. Reviving product state

17. Showing and modifying existing files

18. Pulling together the product update process

19. Flashing an update message

05. User subdomains

20. Adding a user subdomain on registration

21. Subdomain routing basics

22. Adding a string macro to properly display the user's name

23. Listing the user's live products

06. Product checkout

24. Showing the product page

25. Creating the checkout success page

26. Starting the checkout flow

07. Storing sales

27. Handling Stripe webhooks

28. Storing product sales

29. Sending a confirmation email to customers

30. Securing Stripe webhooks

08. Accessing purchased files

31. Creating and validating the product download page

32. Displaying and downloading files

09. Sales dashboard

33. Calculating and displaying download stats

34. Listing through sales

Transcript

00:00

Okay, so let's get to work on our create a product form first thing that we're going to do is jump over and just create a

00:06

Controller out which will house this page I'm gonna have our live wire component within that so go ahead and create a product create Controller can of course put these all in one controller But I like to separate these out and it said over to our web root and let's create this out

00:21

This is going to be get product slash and create and that's going to be that product create controller We'll just make sure we pull the namespace in and just change the name here, okay? So if we head over to our product index controller We're pretty much gonna have the same constructor here of course you can root group these as well if you prefer

00:39

Just so we can't access this form if we haven't set stripe up, so let's create out a Invoke magic method in here, and let's return a view and again. We're just gonna follow the same pattern I'm gonna say products dot create So let's head over to our view section and the products and we'll create out a create dot blade dot PHP file

01:00

We're gonna head over to the dashboard here and just copy this template over paste this in and in here We'll just say create a product and down here is where our form is going to fit in so what we're gonna Do if we just check out what we have here. Let's just put create in there. We'll hook this up to The index over in our product so we know that this now needs to go through to

01:24

root products and Create and if we click on that we come over to here of course that middleware needs to go in there so let's just make sure we pull the namespace in at the top for that and

01:38

There we go so we have the following So this is going to be our form But we want that to be within a live wire component because we want everything to be controlled within there So we're gonna grab everything in here where the background

01:50

Starts here this white background starts and our live wire component will go here I've already seen how to create a live wire component, so let's go ahead and build one out now We're gonna say live wire and make and we're gonna just call this create product You could call it create product form whatever you wanted to do so we've got our create product component

02:09

Let's go ahead and just apply this directly to the page so create Product so that's our component on the page now and remember we have this create product or blade PHP file as well as the live wire component, and that's where we're gonna put this form in so basically now nothing has changed But now this entire thing here is our live wire component that we can start to add into

02:29

So this is going to be our form now And we'll also want to open up the create product live wire component So we can start adding our form state to this to make this actually hook everything up to our form Okay, so we're gonna head over to create product

02:43

Let's just switch this outer thing to a form because this is gonna actually submit through here And we can start basically building this format. That's pretty much all we're gonna do here So a lot the styles that we're gonna take from this come from the styles that we have here So this kind of header section all of these inputs just here

03:01

So we're gonna do a little bit of copying and pasting from the profile information form so update profile information form I'm gonna grab this entire header here So just like the way this looks for this form and we can go ahead and add it into this form itself So we're gonna just get rid of this for now. We can bring that back in a minute

03:20

Let's just add the header into here. We can even create a section out For this entire form actually because that's probably gonna make things a little bit easier to space things out So let's go ahead and space everything out on the y-axis by six in this case So anything we have under here will be nicely spaced out. So in terms of the header, let's just go ahead and change this

03:41

We won't necessarily bother about Translations, but let's go ahead and just add them in anyway so product information and then in here I just have some basic copy that I have already created and That's gonna be at the basic details to your product. That will be visible to your customers. Okay, so at the moment doesn't look great

04:00

Let's just go ahead and add some overall padding to what we've got up here. So let's add a padding of four here And that should be good for now if we just bump that up maybe so let's say on a medium viewport We've got padding set to eight and there we go So again, once we bring that in

04:16

We should see that just decreasing the padding a little bit just to give the user a little bit more room Okay, so now that we've done that just underneath this section here We can start to create or just underneath this header We can start to create each of the inputs out for the form

04:30

So again, we can just kind of grab these from parts of this application Of course, you can design these how you want. If we come over to the login page This is the kind of structure we want here Let's just copy this one over for this email address and we can even get rid of

04:44

That and we've got a label here. So this is a blade component, which is tucked away We just look under our views and components. We've got all of these components here So if you needed to modify them like this input label You can do or just not use blade components if you don't want to then we've got this text input

05:03

Which again is a component and then we've got this X input error Which will show any validation errors on this particular thing Now at the moment this isn't great because obviously this says email. We don't want it to say email We want this to be for the title of our product

05:18

So let's just switch everything over in here that we need to type here can be text Name can be title old title for any data that comes back We don't actually need that because we're working with Livewire so we can actually get rid of that We're also going to get rid of autofocus and just for the purpose of testing our validation rules

05:37

I'm gonna get rid of required and autocomplete here as well So that can change over to title and we should be good So now that is going to be our title field for our product. So what else do we need here? Well, let's go and copy this down and this is going to be our slug

05:53

Let's just check the spacing here and that looks okay. So that's going to be slug and We can change these over to slug as well. Great. So we've got our title. We've got our slug we need our description now now Laravel Breeze doesn't come with a Input for our text area. So we're actually gonna have to create one of these but let's just change this over for now really quickly

06:16

So this is going to be the description of the product Description and let's change this to description I'm gonna create a new component here called text area Of course, if we just go over at the moment that just doesn't work because it doesn't exist. So we're gonna grab the

06:33

Input text here. Let's find it text input. I'm gonna copy this We're gonna create a new component called text area dot blade dot PHP Paste this in and then we're just gonna change this over to a text area And of course for the text area, we have a text area closing tag, and I think that should be everything we need

06:54

So let's just go back to this page. And there we go We've got a text area Of course, we can control this if we want to by adding in some additional things in here like we might want some more rows to this

07:07

So we might want that eight rows, which is a little bit bigger. Let's bump this down to maybe six in fact, let's just leave it at the default of About four so that's a kind of good default to have. Okay. So the next thing is going to be a price That's going to be similar to any of these other text fields, although we could get creative with the HTML types

07:27

so let's go ahead and set a price in here and again change all of these over to price and There we go. So we can just enter the price in there Of course, we'll be validating that as well And then down here we want a check box to say whether it's live or not

07:41

Which again what we could do is just head over to the login page and steal this from the remember me section just here So if we grab that whole block of code pop that in there It's essentially just a label with a input inside of here and then some text next to it so we can either translate that or just set that over to live here and then make sure we set this to live and

08:04

We can set that to live as well and we should be okay with everything. We've got there There we go. So we can mark that as live or not live now just underneath this. We want a kind of new section So we've got our section here We're going to create our new section and this is going to be you just do that properly with an HTML tag

08:23

This is going to be to add files. So we're going to grab the whole header and we're going to put that inside of here and this is now going to say add files and again, I've got some copy in My notes here, which I'm just going to add to here of course

08:39

This is doesn't really matter too much and then just underneath the header We'll create out a div and this is where we will add the files with a file field So this looks a little bit squashed at the moment So what we could do is at the top here

08:54

Just set these space on the y-axis to something like 12 and that's just going to separate these out So we've got the basic product information. We've got the ability to add files inside of here Sure enough, we now just need to go right down the bottom underneath here a

09:10

Button to actually submit this through and create the product Now the good news is once we finish this create product form the edit product form is going to be very similar So we can just copy and paste most of this across So again throughout the app, for example, we've been taking a lot from the login page. If we just look down here

09:28

We've got this primary button so we can just use the same thing there as well We're going to get rid of this class in here And then of course we can just change over the text in here to create Product and we should be pretty much ready to go great

09:43

So that's our basic form with all the data in here the files which we can look at later and the ability to click create Product what we're now going to do though is just hook up each of these fields to some state within our live wire Component just to give you an idea of how this works if you've not worked with live wire before So we're going to head over to the create product product live wire component and start to hook up the data in our form

10:07

To this. So how does this work? Let's just take a look at a really basic example and we'll create a title property on our live wire component What we can then do is over on the create product product template We can go ahead and hook this up to this input using wire model

10:24

So we're just going to hook that up to title that hooks this up to this property here What then happens is when we submit this form we can have a method in here like submit Which will go ahead and call from here and that will go ahead and do something once we submit the form In fact, let's hook that up as well. Now, so let's just say submit form and we'll just die and dump that out

10:48

Okay. So for the title, how do we know this is being hooked up? Well, we can just dump this out on the page like a normal variable and what you'll see here Is that when I type a product title, this is sending this data back to our component And then it's giving us the fresh value here

11:04

So that is successfully hooked up and we know that but what we want to do is make sure this is set to lazy So we're not sending too many requests to the back end every single time we type a character because each of them characters that we type are technically sending an Ajax request through to our component to update this data

11:22

So we want to set this to lazy if you're using Livewire version 3, this is probably set to lazy by default So we want to do this for every single one, but we don't really want to add a bunch of properties to this component It gets a little bit cumbersome and you have too many properties exposed here So what I tend to do is create out a kind of state object in here

11:43

Which also makes it really easy for when we want to actually create this product in the database So within this state what we're going to have is a default title like null or empty string and then instead of saying wire Model title we say state dot title and then if we go ahead and just dump our state out here using something like var dump on

12:06

State and we change this away from lazy. So we always get this value output and updated What you'll see here is a product title This just fills this array up with these values and that means that when we go to create the product we can just pass this entire array into

12:23

Eloquent and have this created for us So let's switch this back to lazy and let's just fill in the rest of the state here and we should be pretty much done So we've got a title in here. We've got a slug. We've got a description and We've got a price now by default. We're going to set the price to zero point zero zero

12:42

not just an empty value and We've also got live and we're going to set that To a default of false in there as well and that will toggle the checkbox So now we just need to hook up each of these things to our state. So we're going to do this for the slug here

12:56

state dot slug do the same thing for the description on the text area and We're good. And if we come down to the price, we'll do exactly the same thing as well and then for the checkbox, we just need to add it to the input like we normally would so state dot live and Then down here. We are pretty much done

13:15

We'll do the same kind of thing for our files, but that should be pretty much everything we need to do for now What we're then going to do is hook up our form So when this is submitted we hit that method that we've just looked at so to do this We add an event on this form

13:31

We want to say submit prevent and we're going to go ahead and call that submit method on our live wire component Just here now if we go ahead and just dump out on our create product page Somewhere near the top our state. We'll see this roll in. So let's go ahead and say var dump and State and let's come over and check this out. So let's just add a load of rubbish into each of these and

13:56

Actually, these look like they are Working that's just because we set lazy to this So what's actually happening here rather than this waiting for a form to submit when we click away from here That's filling that in and that's absolutely fine because we're going to need that functionality for our slug generation later

14:12

But you can see that each of these is just filling in That data when we navigate away, so we're only making a few requests to this same with live as well You can see that's toggling between true and false and that's all hooking up really nicely And then when we hit create product what that's going to do is call this method

14:29

So let's bring back our die dump here hit create product. And there we go So that we'll be able to store all of that information for our user. Okay, so we've covered quite a lot here Let's go ahead and just go to the create product page and get rid of that far dump Now we have all of our state hooked up

14:47

We have the ability to then create a product based on all of the data that we have already created But we've got a couple of other tweaks We need to make to this form like validation generating the slug like we saw from the introduction So let's do that in the next few parts

Episode summary

In this episode, we're rolling up our sleeves to build the "create product" form for our app. We start by setting up a new controller and route specifically for the product creation page, keeping things tidy and organized. Using Laravel Livewire, we scaffold a fresh Livewire component that'll handle the form's state and user interactions.

Once that's set up, we shift over to the Blade view, borrowing a bit of structure and style from our dashboard and profile forms—because hey, there's no need to reinvent the wheel! We walk through adding all the required fields for our form: title, slug, description (where we make a new Blade component for a textarea), price, a "live" checkbox, and finally, a section to upload files. You also pick up a bunch of helpful Blade component tips along the way, perfect for keeping your code clean and reusable.

With the front-end ready, we hook up each input to Livewire's state, showing how to use wire:model for syncing data and explaining the benefits of grouping everything into a state array for easy management. We set everything to lazy updates to keep things efficient, and show off how Livewire passes data back and forth as users interact with the form.

Finally, we wire up the form submission event, preparing it to handle creating a product in the database—just waiting for us to handle the actual storage and validation in the next part. By the end, we’ve got a fully functional (though not quite complete) product creation form, all ready for those finishing touches!

Episode discussion

No comments, yet. Be the first!