Belajar CRUD Laravel 5.5 dan Ajax

Latihan Membuat CRUD dengan Laravel 5.5 dan Ajax !, dalam tutorial ini kita akan mempelajari cara sederhana membangun project CRUD dalam satu halaman/file, maksudnya adalah ketika kita menyimpan, edit atau memperbaharui data kita tetap berada dalam satu halaman tanpa memanggil halaman/file lain. jadi kita tidak perlu membuat form file create, edit secara secarah terpisah. Semoga mengerti Penjelasan saya . :).
Setelah anda berhasil menyelesaikan Tutorial ini maka hasilnya seperti gambar di bawah :

Langkah 1 : Buat Tabel
Pertama kita akan memuat file migrasi untuk membuat tabel baru ke database
jalankan perintah dibawah pada terminal/CMD
php artisan make:migration create_posts_table
perintah diatas akan menghasilkan sebuah file yang terletak di folder Database/Migration
ubah file tersebut seperti kode dibawah ini
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('details');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}

Setelah itu jalankan pada terminal perintah dibawah :
php artisan migrate
maka akan membentuk tabel seperti berikut pada database

Next ....

Langkah 2 : Buat Model Post

Buat sebuah Model dengan nama Post.php didalam folder App

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
    protected $fillable = [
        'title', 'details'
    ];
}

Langkah 3 : Buat Route

Defenisikan rute dengan menambahkan kode di bawah pada Routes\web.php

Route::get('laravel-ajax-crud.html', 'PostController@crud');
Route::resource('posts','PostController');

Langkah 3 : Buat Controller

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
class PostController extends Controller
{
    public function crud()
    {
        return view('crud');
    }
    public function index()
    {
        $posts = Post::latest()->paginate(5);
        return response()->json($posts);
    }
    public function store(Request $request)
    {
        $post = Post::create($request->all());
        return response()->json($post);
    }
    public function update(Request $request, $id)
    {
        $post = Post::find($id)->update($request->all());
        return response()->json($post);
    }
    public function destroy($id)
    {
        Post::find($id)->delete();
        return response()->json(['done']);
    }
}

Langkah 4 : Buat View

pada langkah ini kita akan membuat tampilannya dengan nama crud.blade.php

Resource\Views\crud.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 5.5 Ajax CRUD</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 margin-tb">                   
<h2>Laravel 5.5 Ajax CRUD</h2>
    <br/>
                <div class="pull-left">
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#create-item">Tambah</button>
                </div>
             <div class="pull-right">
                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#create-item">Tambah</button>
                </div>
            </div>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                <th>Title</th>
                <th>Details</th>
                <th width="200px">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <ul id="pagination" class="pagination-sm"></ul>

        <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</h4>
              </div>
              <div class="modal-body">
                    <form data-toggle="validator" action="{{ route('posts.store') }}" method="POST">
                        <div class="form-group">
                            <label class="control-label" for="title">TITEL :</label>
                            <input type="text" name="title" class="form-control" data-error="Please enter title." required />
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="title">DESCRIPTION :</label>
                            <textarea name="details" class="form-control" data-error="Please enter description." required></textarea>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn crud-submit btn-success">Submit</button>
                        </div>
                    </form>
              </div>
            </div>
          </div>
        </div>

        <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 Data</h4>
              </div>
              <div class="modal-body">
                    <form data-toggle="validator" action="/posts/" method="put">
                        <div class="form-group">
                            <label class="control-label" for="title">TITLE :</label>
                            <input type="text" name="title" class="form-control" data-error="Please enter title." required />
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="title">DESCRIPTION :</label>
                            <textarea name="details" class="form-control" data-error="Please enter description." required></textarea>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success crud-submit-edit">Submit</button>
                        </div>
                    </form>
              </div>
            </div>
          </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.3.1/jquery.twbsPagination.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
    <script type="text/javascript" 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/javascript">
        var url = "<?php echo route('posts.index')?>";
    </script>
    <script src="public/js/crud-ajax.js"></script> 
</body>
</html>

Langkah 5 : Buat File Ajax

Pada langkah ini kita kan membuat sebuah file crud-ajax.js lalu yang akan di tempatkan pada folder Public .

Public/js/crud-ajax.js

Cari Blog Ini

blog

Belajar CRUD Laravel 5.5 dan Ajax

Komentar

Posting Komentar

Postingan populer dari blog ini

Tutorial Laravel