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
10. Building the product creation form
Episodes
01. Introduction and setting up
02. Onboarding with Stripe
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
05. User subdomains
06. Product checkout
07. Storing sales
08. Accessing purchased files
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
34 episodes•3 hrs 32 mins•2 years ago
Overview
Build a marketplace where sellers can list and sell files, while we take a cut of each sale using Stripe Connect.
We'll cover onboarding users with Stripe Connect, creating products and uploading files, payments, and delivering purchased files to your customers.
Here's everything we'll cover:
- The Stripe Connect onboarding flow
- Effortlessly creating products (and uploading files) with Livewire forms
- Subdomains for your user's marketplace
- Stripe Checkout for a beautiful, secure payment flow
- Securely delivering files with Signed URLs in Laravel
- Showing sales stats on a dashboard
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!