✔ Laravel 5 And Vue.Js : Simple C.R.U.D With Notification And Pagination Example In Laravel 5.3
Laravel 5 CRUD using AJAX & Modals + Bootstrap Template.
Next, we will create new project using Laravel 5.3
In your new migration file will stored on database\migrations\2016_11_02_210301_create_blog_table.php
Next, run Migration
Your new model will stored on app\Blog.php
Your controller will stored on app\Http\Controllers\BlogController.php
Next, we wil working with views,
Finnally, this step we will working with JavaScript,
Subscribe for more tutorials.
Download Full source code C.R.U.D with Notification and Pagination Example in Laravel 5.3 and Vue.js https://goo.gl/wp9xwf
See you next lessons ... Sumber http://scqq.blogspot.com
CRUD with Vue.Js in Laravel 5.3
Step 1 - you must create new database "laravelvuejscrud", i'm using MySQL database.Next, we will create new project using Laravel 5.3
Create Laravel 5.3 CRUD Project
Install Laravel 5.3 using Composer cd c:\server\htdocs\ ... composer create-project --prefer-dist laravel/laravel laravelvuejscrud ... cd laravelvuejscrud Create Connection to your Database (MySQL Database)
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravelvuejs DB_USERNAME=root DB_PASSWORD=yourpasswordCreate Table and Migration
php artisan make:migration create_table_blog_tabel In your new migration file will stored on database\migrations\2016_11_02_210301_create_blog_table.php
public function up() { Schema::create('blog_post', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->string('description'); $table->timestamps(); }); } public function down() { Schema::drop('blog_post'); } Next, run Migration
php artisan migrate Create Model (Blog.php)
php artisan make:model Blog Your new model will stored on app\Blog.php
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Blog extends Model { protected $table ='blog_post'; public $fillable = ['title','description']; } Create Controller (BlogController.php)
php artisan make:controller BlogController --resource Your controller will stored on app\Http\Controllers\BlogController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Blog; use App\Http\Requests; use Validator; use Response; use Illuminate\Support\Facades\Input; class BlogController extends Controller { public function vueCrud(){ return view('/vuejscrud/index'); } public function index() { $items = Blog::latest()->paginate(6); $response = [ 'pagination' => [ 'total' => $items->total(), 'per_page' => $items->perPage(), 'current_page' => $items->currentPage(), 'last_page' => $items->lastPage(), 'from' => $items->firstItem(), 'to' => $items->lastItem() ], 'data' => $items ]; return response()->json($response); } public function store(Request $request) { $this->validate($request,[ 'title' => 'required', 'description' => 'required', ]); $create = Blog::create($request->all()); return response()->json($create); } public function update(Request $request, $id) { $this->validate($request,[ 'title' => 'required', 'description' => 'required', ]); $edit = Blog::find($id)->update($request->all()); return response()->json($edit); } public function destroy($id) { Blog::find($id)->delete(); return response()->json(['done']); } } Create Routes
Route::group(['middleware' => ['web']], function() { Route::get('/vuejscrud', 'BlogController@vueCrud'); Route::resource('vueitems','BlogController'); }); Next, we wil working with views,
Views
Create new file for our Master Blade templates, named with "app.blade.php" that stored on resources\views\app.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Simple Laravel Vue.Js CRUD</title> <meta id="token" name="token" value="{{ csrf_token() }}"> <!-- Bootstrap --> <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"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container" id="manage-vue"> @yield('content') </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <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> <script type="text/j4vascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"> <script type="text/j4vascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> <script type="text/j4vascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script> <script type="text/j4vascript" src="/js/blog.js"></script> </body> </html> Create New Page (index.blade.php)
This page will stored on resources\views\vuejscrud\index.blade.php @extends('app') @section('content') <div class="form-group row add"> <div class="col-md-12"> <h1>Simple Laravel Vue.Js Crud</h1> </div> <div class="col-md-12"> <button type="button" data-toggle="modal" data-target="#create-item" class="btn btn-primary"> Create New Post </button> </div> </div> <div class="row"> <div class="table-responsive"> <table class="table table-borderless"> <tr> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> <tr v-for="item in items"> <td>@{{ item.title }}</td> <td>@{{ item.description }}</td> <td> <button class="edit-modal btn btn-warning" @click.prevent="editItem(item)"> <span class="glyphicon glyphicon-edit"></span> Edit </button> <button class="edit-modal btn btn-danger" @click.prevent="deleteItem(item)"> <span class="glyphicon glyphicon-trash"></span> Delete </button> </td> </tr> </table> </div> </div> <nav> <ul class="pagination"> <li v-if="pagination.current_page > 1"> <a href="#" aria-label="Previous" @click.prevent="changePage(pagination.current_page - 1)"> <span aria-hidden="true">«</span> </a> </li> <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active' : '']"> <a href="#" @click.prevent="changePage(page)"> @{{ page }} </a> </li> <li v-if="pagination.current_page < pagination.last_page"> <a href="#" aria-label="Next" @click.prevent="changePage(pagination.current_page + 1)"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> <!-- Create Item Modal --> <div class="modal fade" id="create-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">Create New Post</h4> </div> <div class="modal-body"> <form method="post" enctype="multipart/form-data" v-on:submit.prevent="createItem"> <div class="form-group"> <label for="title">Title:</label> <input type="text" name="title" class="form-control" v-model="newItem.title" /> <span v-if="formErrors['title']" class="error text-danger"> @{{ formErrors['title'] }} </span> </div> <div class="form-group"> <label for="title">Description:</label> <textarea name="description" class="form-control" v-model="newItem.description"> </textarea> <span v-if="formErrors['description']" class="error text-danger"> @{{ formErrors['description'] }} </span> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Submit</button> </div> </form> </div> </div> </div> </div> <!-- Edit Item Modal --> <div class="modal fade" id="edit-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">Edit Blog Post</h4> </div> <div class="modal-body"> <form method="post" enctype="multipart/form-data" v-on:submit.prevent="updateItem(fillItem.id)"> <div class="form-group"> <label for="title">Title:</label> <input type="text" name="title" class="form-control" v-model="fillItem.title" /> <span v-if="formErrorsUpdate['title']" class="error text-danger"> @{{ formErrorsUpdate['title'] }} </span> </div> <div class="form-group"> <label for="title">Description:</label> <textarea name="description" class="form-control" v-model="fillItem.description"> </textarea> <span v-if="formErrorsUpdate['description']" class="error text-danger"> @{{ formErrorsUpdate['description'] }} </span> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Submit</button> </div> </form> </div> </div> </div> </div> @stop Finnally, this step we will working with JavaScript,
blog.js (public\js\blog.js)
Create new file in public\js\blog.js Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value"); new Vue({ el :'#manage-vue', data :{ items: [], pagination: { total: 0, per_page: 2, from: 1, to: 0, current_page: 1 }, offset: 4, formErrors:{}, formErrorsUpdate:{}, newItem : {'title':'','description':''}, fillItem : {'title':'','description':'','id':''} }, computed: { isActived: function() { return this.pagination.current_page; }, pagesNumber: function() { if (!this.pagination.to) { return []; } var from = this.pagination.current_page - this.offset; if (from < 1) { from = 1; } var to = from + (this.offset * 2); if (to >= this.pagination.last_page) { to = this.pagination.last_page; } var pagesArray = []; while (from <= to) { pagesArray.push(from); from++; } return pagesArray; } }, ready: function() { this.getVueItems(this.pagination.current_page); }, methods: { getVueItems: function(page) { this.$http.get('/vueitems?page='+page).then((response) => { this.$set('items', response.data.data.data); this.$set('pagination', response.data.pagination); }); }, createItem: function() { var input = this.newItem; this.$http.post('/vueitems',input).then((response) => { this.changePage(this.pagination.current_page); this.newItem = {'title':'','description':''}; $("#create-item").modal('hide'); toastr.success('Post Created Successfully.', 'Success Alert', {timeOut: 5000}); }, (response) => { this.formErrors = response.data; }); }, deleteItem: function(item) { this.$http.delete('/vueitems/'+item.id).then((response) => { this.changePage(this.pagination.current_page); toastr.success('Post Deleted Successfully.', 'Success Alert', {timeOut: 5000}); }); }, editItem: function(item) { this.fillItem.title = item.title; this.fillItem.id = item.id; this.fillItem.description = item.description; $("#edit-item").modal('show'); }, updateItem: function(id) { var input = this.fillItem; this.$http.put('/vueitems/'+id,input).then((response) => { this.changePage(this.pagination.current_page); this.newItem = {'title':'','description':'','id':''}; $("#edit-item").modal('hide'); toastr.success('Item Updated Successfully.', 'Success Alert', {timeOut: 5000}); }, (response) => { this.formErrors = response.data; }); }, changePage: function(page) { this.pagination.current_page = page; this.getVueItems(page); } } }); Video tutorial C.R.U.D with Notification and Pagination Example using Vue.Js
Laravel 5.3 Simple Ajax CRUD
Subscribe for more tutorials.
Download Full source code C.R.U.D with Notification and Pagination Example in Laravel 5.3 and Vue.js https://goo.gl/wp9xwf
See you next lessons ... Sumber http://scqq.blogspot.com
0 Response to "✔ Laravel 5 And Vue.Js : Simple C.R.U.D With Notification And Pagination Example In Laravel 5.3"
Posting Komentar