✔ Laravel 5.5 & Vuejs 2 Advanced Crud Tutorial With Example Step By Step

By astagadragon Jumat, 17 Februari 2017 Add Comment Edit

Laravel 5.5 and VueJS tutorial for beginner : this tutorial will show you how to create advanced CRUD operation using laravel 5.5 and VUEJS 2. at the previews lessons, we have already discuss more about CRUD Apps using laravel, just read :

Video Tutorial Laravel 5.5 & Vue JS CRUD Example

Full Source Code Laravel 5.5 & VueJS 2 CRUD Operations

Create new Laravel Project

composer create-project --prefer-dist laravel/laravel crudresourcecontroller

Create new Migration

php artisan make:migration create_posts_table

Post Migration

Schema::create('posts', function (Blueprint $table) {             $table->increments('id');             $table->string('title');             $table->text('body');             $table->timestamps();         });

Create new Model and new Controller

php artisan make:model Post  php artisan make:controller PostController --resource

Post Model

protected $table = 'posts'; protected $fillable = ['title','body'];

PostController.php

<?php  namespace AppHttpControllers;  use IlluminateHttpRequest; use AppPost;  class PostController extends Controller {     /**      * Display a listing of the resource.      *      * @return IlluminateHttpResponse      */      public function home(){       return view('vueApp');     }      public function index()     {         return Post::orderBy('id','DESC')->get();     }      /**      * Show the form for creating a new resource.      *      * @return IlluminateHttpResponse      */     public function create()     {         //     }      /**      * Store a newly created resource in storage.      *      * @param  IlluminateHttpRequest  $request      * @return IlluminateHttpResponse      */     public function store(Request $request)     {         $this->validate($request, [           'title' => 'required',           'body' => 'required',         ]);          $create = Post::create($request->all());         return response()->json(['status' => 'success','msg'=>'post created successfully']);      }      /**      * Display the specified resource.      *      * @param  int  $id      * @return IlluminateHttpResponse      */     public function show($id)     {         return Post::find($id);     }      /**      * Show the form for editing the specified resource.      *      * @param  int  $id      * @return IlluminateHttpResponse      */     public function edit($id)     {         return Post::find($id);     }      /**      * Update the specified resource in storage.      *      * @param  IlluminateHttpRequest  $request      * @param  int  $id      * @return IlluminateHttpResponse      */     public function update(Request $request, $id)     {       $this->validate($request, [         'title' => 'required',         'body' => 'required',       ]);        $post = Post::find($id);       if($post->count()){         $post->update($request->all());         return response()->json(['statur'=>'success','msg'=>'Post updated successfully']);       } else {         return response()->json(['statur'=>'error','msg'=>'error in updating post']);       }     }      /**      * Remove the specified resource from storage.      *      * @param  int  $id      * @return IlluminateHttpResponse      */     public function destroy($id)     {         $post = Post::find($id);         if($post->count()){           $post->delete();           return response()->json(['statur'=>'success','msg'=>'Post deleted successfully']);         } else {           return response()->json(['statur'=>'error','msg'=>'error in deleting post']);         }     } }

Route

Route::get('/', 'PostController@home'); Route::resource('/posts','PostController');

vueApp.blade.php

<!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- CSRF Token -->  <meta name="csrf-token" content="{{ csrf_token() }}">  <title>{{ config('app.name', 'Laravel') }}</title>  <!-- Styles -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">   {{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}} </head> <body> <div class="container">  <h3>Vue.js CRUD With Laravel 5.5 application</h3> </div>  <section id="app"></section>  <script>  window.Laravel = <?php echo json_encode([  'csrfToken' => csrf_token(),  ]); ?> </script>   <script src="{{ asset('js/app.js') }}"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  <!-- Include all compiled plugins (below), or include individual files as needed -->  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>

Installing Vue dependencies Run below command to install Vue js and bootstrap Frontend dependencies

npm install

Install vue-router by running below command for Vue js routing

 npm install vue-router

Install vue-axios by running below command for Vue js api calls

 npm install vue-axios

Once the dependencies of have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. Run npm run dev command on the terminal to process the instructions written in your webpack.mix.js file. npm run dev command will process the instruction written in webpack.mix.js file and place your compiled CSS and js in public/css and public/js directory.

 npm run dev

npm run watch

Configuring Vue.js App and initializing Modules.

By default VueJS installations, we have app.js already in our project, next we will create more template page in resources\assets\js\components.

Addposts.vue
App.vue
Deletepost.vue
Editpost.vue
Listpost.vue
Viewpost.vue

and here's full source code of VueJS

app.js

require('./bootstrap');  window.Vue = require('vue');  window.VueRouter=require('vue-router').default;  window.VueAxios=require('vue-axios').default;  window.Axios=require('axios').default;  let AppLayout= require('./components/App.vue');  // show the list post template const Listposts=Vue.component('Listposts', require('./components/Listposts.vue'));  // add post template const Addpost =Vue.component('Addpost', require('./components/Addpost.vue'));  // edite post template const Editpost =Vue.component('Editpost', require('./components/Editpost.vue'));  // delete post template const Deletepost =Vue.component('Deletepost', require('./components/Deletepost.vue'));  // view single post template const Viewpost =Vue.component('Viewpost', require('./components/Viewpost.vue'));  // registering Modules Vue.use(VueRouter,VueAxios, axios);  const routes = [   {     name: 'Listposts',     path: '/',     component: Listposts   },   {     name: 'Addpost',     path: '/add-post',     component: Addpost   },   {     name: 'Editpost',     path: '/edit/:id',     component: Editpost   },   {     name: 'Deletepost',     path: '/post-delete',     component: Deletepost   },   {     name: 'Viewpost',     path: '/view/:id',     component: Viewpost   } ];  const router = new VueRouter({ mode: 'history', routes: routes});  new Vue(  Vue.util.extend(  { router },  AppLayout  ) ).$mount('#app');

Addpost.vue

<template id="add-post">   <div>     <h3>Add new Post</h3>     <form v-on:submit.prevent = "createPost">       <div class="form-group">         <label for="add-title">Title</label>         <input id="add-title" v-model="post.title" class="form-control" required />       </div>       <div class="form-group">         <label for="add-body">Body</label>         <textarea class="form-control" rows="10" v-model="post.body"></textarea>       </div>       <button type="submit" class="btn btn-xs btn-primary">Create Post</button>       <router-link class="btn btn-xs btn-warning" v-bind:to="'/'">Cancel</router-link>     </form>   </div> </template>  <script>  export default {    data: function () {  return {post: {title: '', body: ''}}  },  methods: {    createPost: function() {      let uri = 'http://localhost:8000/posts/';      Axios.post(uri, this.post).then((response) => {      this.$router.push({name: 'Listposts'})      })    }  }  } </script>

App.vue

<template>  <div class="container">  <transition name="fade">  <router-view></router-view>  </transition>  </div> </template>  <script> export default {  mounted() {  console.log('Component mounted.')  }  } </script>

Deletepost.vue

<template id="post-delete">   <div>     <h3>Delete post {{ post.title  }}</h3>     <form v-on:submit.prevent = "deletePost">       <p>The action cannot be undone</p>       <button class="btn btn-xs btn-danger" type="submit" name="button">Delete</button>       <router-link class="btn btn-xs btn-primary" v-bind:to="'/'">Back</router-link>     </form>   </div> </template>  <script> export default {   data: function () {   return {post: {body: '', title: ''}}   },   created: function(){     let uri = 'http://localhost:8000/posts/'+this.$route.params.id+'/edit';     Axios.get(uri).then((response) => {     this.post = response.data;     });   },   methods: {     deletePost: function() {     let uri = 'http://localhost:8000/posts/'+this.$route.params.id;     Axios.delete(uri, this.post).then((response) => {       this.$router.push({name: 'Listposts'})     })     }   } } </script>

Editpost.vue

<template id="post-edit">   <div>     <h3>Add new Post</h3>     <form v-on:submit.prevent = "updatePost">       <div class="form-group">         <label for="edit-title">Title</label>         <input id="edit-title" v-model="post.title" class="form-control" required />       </div>       <div class="form-group">         <label for="edit-body">Body</label>         <textarea class="form-control" rows="10" v-model="post.body"></textarea>       </div>       <button type="submit" class="btn btn-xs btn-primary">Create Post</button>       <router-link class="btn btn-xs btn-warning" v-bind:to="'/'">Cancel</router-link>     </form>   </div> </template>  <script> export default{   data: function () {     return {post: {title: '', body: ''}}   },   created: function(){     let uri = 'http://localhost:8000/posts/'+this.$route.params.id+'/edit';     Axios.get(uri).then((response) => {     this.post = response.data;   });   },   methods: {     updatePost: function() {       let uri = 'http://localhost:8000/posts/'+this.$route.params.id;       Axios.patch(uri, this.post).then((response) => {       this.$router.push({name: 'Listposts'})     })   }   } } </script>

Listpost.vue

<template id="post-list">   <div class="row">     <div class="pull-right">       <router-link class="btn btn-xs btn-primary" v-bind:to="{path: '/add-post'}">         <span class="glyphicon glyphicon-plus"></span>         Add new Post       </router-link>     </br></br>     </div>     <table class="table">       <thead>         <tr>           <th>#</th>           <th>Post Title</th>           <th>Post Body</th>           <th>Created At</th>           <th>Updated At</th>           <th class="col-md-2">Actions</th>         </tr>       </thead>       <tbody>         <tr v-for="(post, index) in filteredPosts">           <td>{{ index + 1 }}</td>           <td>{{ post.title }}</td>           <td>{{ post.body }}</td>           <td>{{ post.created_at }}</td>           <td>{{ post.updated_at }}</td>           <td>             <router-link class="btn btn-info btn-xs" v-bind:to="{name: 'Viewpost', params: {id: post.id}}"><i class="fa fa-eye" aria-hidden="true"></i> Show</router-link>             <router-link class="btn btn-warning btn-xs" v-bind:to="{name: 'Editpost', params: {id: post.id}}"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</router-link>             <router-link class="btn btn-danger btn-xs" v-bind:to="{name: 'Deletepost', params: {id: post.id}}"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</router-link>           </td>         </tr>       </tbody>     </table>   </div> </template>  <script> export default {   data:function(){     return {posts: ''};   },   created: function() {     let uri = 'http://localhost:8000/posts/';     Axios.get(uri).then((response) => {       this.posts = response.data;     });   },   computed: {     filteredPosts: function(){       if(this.posts.length) {         return this.posts;       }     }   } } </script>

Viewpost.vue

<template id="post">   <div>     <h3>{{ post.title }}</h3>     <strong>Body : </strong>     <div>       {{ post.body }}     </div>   </br>   <span class="glyphicon glyphicon-arrow-left"></span>   <router-link v-bind:to="'/'">Back to post list</router-link>   </div> </template>  <script>    export default {    data: function () {    return {post: {title: '', body: ''}}  },  created: function(){    let uri = 'http://localhost:8000/posts/'+this.$route.params.id;      Axios.get(uri).then((response) => {      this.post = response.data;    });  }  } </script>

More Laravel 5.5 Video Tutorial

Video tutorial How to create CRUD Operations in Laravel 5.5

See you next Lessons ..

Sumber http://scqq.blogspot.com

iklan