Learn How To Make CRUD Pages With Laravel And Vuejs

Learn How To Make CRUD Pages With Laravel And Vuejs Part 1

In this tutorial we will implement a crud (Create – Read – Update- Delete) pages using Laravel and Vuejs2 and axios library.

 

 

Series Topics:

 

Requirements:

  • Laravel framework 5.5
  • Vuejs 2 and vuex
  • npm

 

CRUD mainly refers to (Create, Read, Update, Delete) operations and most of us already using crud in every web application in admin panels or to manipulate dashboard modules so in this tutorial we will be using Vuejs 2 and laravel but the advantage of using Vuejs as a frontend library beside laravel makes it more speed amazing as you be processing items without need to page reload.

 

Let’s create a new laravel project i will use version 5.5 in this tutorial so run this command in terminal:

After that we need to install npm dependencies so before start open package.json and replace it with those contents:

Then in terminal run

This will install all dependencies in package.json as you see we installed (vue, vuex) which are mandatory, vue-router to enable routing between pages, vuetable-2 this component renders a datatabe to be used in the listing page you can read more about it in this article, vue-events this component enable to use vue events in more easy way instead of using the classic vue event system.

 

Preparing Database:

To clarify things i suppose you already connected to database we will create one table so let’s create a laravel migration that represent a posts table:

Then open database/migrations/XXXXX_create_posts_table.php and modify it like this:

As shown we created a posts table that have 6 fields (id, title, body, photo, timestamps (created_at, updated_at)).

Then we will create a model for table so run this command in terminal:

Now we have a post table and Post model we will need to create some dummy data to populate the table so to do this we use laravel seeder so create a new seeder:

Open database/seeds/PostsTableSeeder.php and modify it as shown:

As shown in the code above we make use of the faker package to generate fake data it’s already installed by default when you install laravel.

Open database/seeds/DatabaseSeeder.php and inside run() method add this code:

Finally run this command to execute the seeder:

Now the posts table is populated with dummy data.

Be sure you have an “uploads” folder inside the public directory with writable permissions and this photo inside it.

 

Server Side

Before digging into creating Vuejs code we will create the server side code so we will create a controller for the posts and the routes required.

Create app/Http/Controllers/PostsController.php and add the following contents:

The PostsController contains server side code for the required methods which represent the CRUD operations that will be called by vuejs.

As you see the first method getAll() which represent the R(Read) this method list the posts and can accept various parameters used for sorting, filtering, and pagination. All these parameters coming from the ajax request fired by the datatable component as we will see in the next section when we create the vuejs pages.  

The second method store() represents the C(Create) which is simply creates a new post and this method fired when when we create a new post from the form using ajax.

The third method update() represents the U(Update) which is simply updates existing post through ajax.

The fourth method view() actually not related to CRUD but some admin panels implemented it and it views the details of specific post.

The third method delete() represents the D(Delete) which is simply deletes existing post through ajax.

 



Adding routes

Let’s add the required server side routes that will be used with vuejs so open routes/web.php and modify it like this:

Here we added the required routes for read, create, update, delete in addition we added a special route that will be triggered from inside vuejs routes which is:

This special route uses regular expressions used to express urls having this structure:

These urls will be used inside Vuejs routes and it tells laravel not to trigger a server side page instead to remain in the same view which is “post.blade.php” which in turn causes the vuejs routes to work properly.

 

Main view

create a new view in resources/views/post.blade.php and add the below contents:

As you see in the above code we used the semantic UI library so we included semantic css and semantic js and app.js. Also we add the main tag that represent the main Vuejs component like this:

<main-app> is the main Vuejs component which we will add in the next sections when we work with vuejs code. Note also i have added a special element <base /> and this element tells Vuejs to render the routes relative to the project full url.

 

Client Side

After we prepared the server side code let’s move to create the client side code, our client side in laravel reside in resources/assets/js directory, if you open “js” directory you will find bootstrap.js, app.js, components, we will add more files and components so create those files similar to below photo:

Learn how to create CRUD pages with vuejs and laravel

 

 

 

 

 

 

 

 

Create those files:

  • assets/js/components/Crud/CreatePost.vue
  • assets/js/components/Crud/EditPost.vue
  • assets/js/components/Crud/ListPosts.vue
  • assets/js/components/Crud/ViewPost.vue
  • assets/js/components/Partials/Actions.vue
  • assets/js/components/Partials/Details.vue
  • assets/js/components/Partials/Search.vue
  • assets/js/components/MainApp.vue
  • assets/js/store/index.js
  • assets/js/routes.js

Let’s populate our files with basic structure code and will return to them shortly:

assets/js/components/Crud/CreatePost.vue

assets/js/components/Crud/EditPost.vue

assets/js/components/Crud/ListPosts.vue

assets/js/components/Crud/ViewPost.vue

assets/js/store/index.js

As you see above this is the vuex store we will need that when we create and edit posts to store post field into vuex store if you don’t know how to use vuex you can read more about it in this article.

assets/js/routes.js

assets/js/app.js

Here the main entry point for the Vue app, first we imported the required dependencies like vue-router, vue-events, store, routes, and the main component after we registerd VueRouter and VueEvents with Vue like this:

This code tells Vue that we can access router and events from inside Vue components like this “this.$router” and “this.$events”.

We create a new router instance passing in the routes and store:

Finally we output the Vue app specifying the element that our app will be binded to which is “#app” and the main component.

Now run

navigate to http://localhost/vue-crud/public/list you will see the listing page let’s move to put the actual code for the listing page.

 



List Posts

Open assets/js/components/Crud/ListPosts.vue and modify it like this:

Here we imported vuetable component and i included it in our template. The component has a lot of useful properties one these “api-url” and “fields” so we specify them in our data() method like this:

Note that i will not cover the full details of vuetable component but there is an article here that describes how to use it.

Also i defined the default sort order when we first load the page using the “sort-order” property. Now run:

If you reload the page you will see the post data and it displays 10 result by default because we specify the “per-page=10” property.

 

Pagination

Let’s add pagination to our list so we will include two other components related to vuetable which are VuetablePagination which show pagination links, VutablePaginationInfo which show pagination info so let’s include the pagination components like this:

There are a lot of stuff and the above code first we imported the pagination related components, then we added them to the template like this:

VuetablePagination component fires two events the first event is @vuetable-pagination:change-page this event is fired when you click on any page number and the second event @vuetable:pagination-data this event is also fired when you click on any page and it tells vuetable that page number changed and to render the new page.

 

Adding Search

Vuetable also support filtering and it uses a special property for that which is “append-params

Open the partial component assets/js/components/Partials/Search.vue and add the below code:

Here we add a simple form which has one text input and two buttons (Search, reset). We bind the text input with param “searchQuery” and then defined two methods which will be used for filtering and reset input. Note that we didn’t define the actual logic for filtering and reset instead we fire events to the parent component using the vue-events we installed in the beginning of the tutorial.

the fire() function take event name and optional parameters.

 

Now let’s modify assets/js/components/Crud/ListPosts.vue as shown:

We included the search component in listPosts.vue and set another variable “searchParams” this variable holds the data coming from the input which we get here:

this.$refs.vuetable.refresh() tells vuetable to resend the request to server in this case with the search paramters.

 



Adding Action Buttons

Let’s add another column in the list that enable users to delete, view and update posts.

Open assets/js/components/Partials/Actions.vue and add the this code:

Modify assets/js/components/Crud/ListPosts.vue to include the Actions component:

The most important part above is this line:

Vuetable enables to use a component as a field using name: __component:component_name in this case we add the actions component which includes three buttons to delete, edit and view.

Now run

Reload the page and experiment with search, filtering, sort, and delete

 

Continue to part 2: Creating and Updating Posts>>>

 

Share this: