In this video we are going to start CRUD in our Laravel web app, specifically focussing on the Create part.
Steps
The first thing we want to do is add some details to the migrations file we created in the previous lesson. Migration files allow us to make changes to our database such as creating tables, dropping tables and updating tables. Our migration is going to create a courses table with the columns: name, description and user_id. We can always add more columns in the future so don't worry about getting this perfect from the start. We can now run this migration using:
php artisan migrate
After running this command we will be able to see our newly created table in our database.
We now want to create an Eloquent relationship between our User model and Course model. Each user can have many courses but a course can only belong to one user. We define these relationships in the User model and Course model. This is the reason we included the user_id column in the courses database table.
We are now going to define the method that will create our course in our CourseController. We will call this method create() and use dependency injection to retrieve the User object. We need to include both the User and Course models in our controller. Complete the method so that it creates a new course and creates a relationship with the user passed to the method. At this point in the video I realised that I needed to install the PHP IntelliSense Visual Studio Code extension to auto import dependencies. I suggest you do the same if you do not have this enabled already. You may need to close VS Studio and reopen it for the extension to start working after enabling it!
Once we have defined our controller method we can create our route in web.php. We are going to call this route 'course.create'. It will be a post request that points to our newly created create() method on the CourseController passes a user param in the url. It is this user that gets injected into our create method on the CourseController.
We now need to make some changes to the Courses page that we created in the previous lesson. We are going to simple add a button to our Index.vue that runs a function when clicked. The function will make use of the router helper provided by Inertia.js, and make a post request to the route we just defined in our web.php. We retrieve the currently authenticated user by using another inertia.js helper usePage(). This will allow us to retrieve the page props that are passed to every page. Conveniently, Jetstream passes the currently authenticated user object to every page so we can access this easily. We need to get the user id to pass in our route.
At this point in the video I realised I had made a typo in my migration file, so needed to change the database column name to fix this error. You can probably spell so don't need to do this, but if you find yourself in the same position you can see how it is done at 22:20. Once this error was sorted I was able to test that the create functionality was working. Do this by simply clicking the create course button, then check your database to see if a new entry has been made to your courses table.
Assuming all is working as expected you can now look at returning a flash message back to your user to notify them of the successful creation of their course. Laravel Jetstream makes this really easy for us and has the feature built in as standard. Check out the Banner.vue component. This is where our flash message will be displayed if it exists. So we simply need to return a flash.banner message in our create() controller method. This message can be anything you want, but the important part is that it is assigned to 'flash.banner' for it to display in our Banner.vue component.
You have now mastered the Create part of CRUD in Laravel!
Table of contents
00:00 - Recap
00:30 - Create database columns in our migration file
04:33 - Create eloquent relationship between User and Course
07:04 - Defining the controller method for our course creation page
13:15 - Defining our route in web.php
14:43 - Adding create course button to our vue.js view
16:50 - Defining function to make manual visit to create.course route
18:40 - Using usePage() to retrieve currently authenticated user
22:20 - Changing database table column name (fixing a typo)
25:50 - Testing create functionality works
26:08 - Display flash message to user