Tutorial CRUD Laravel 6 Dengan Bootstrap 4 : Input Data ke Database


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com

Tutorial CRUD Laravel 6 Dengan Bootstrap 4 : Input Data ke Database - Halo teman-teman semuanya, melanjutkan pemabahsan sebelumnya yaitu Menampilkan Data dari Database, pada kesempatan kali ini kita semua akan belajar menginputkan data ke dalam Database.

Oke langsung saja kita mulai, silahkan buka PostsController.php di dalam folder app/Http/Controllers dan tambahkan 2 function dibawah ini :

public function create()
{
    return view('posts.create');
}

Kode controller diatas digunakan menampilkan data dengan memanggil view yang bernama create di dalam folder posts di View.

public function store(Request $request)
{
    $post = Post::create([
        'title'     => $request->input('title'),
        'slug'      => Str::slug($request->input('title')),
        'content'   => $request->input('content')
    ]);

    return redirect(route('posts.index'));
}

Kode diatas digunakan untuk menyimpan data yang berasal dari form dan langsung diismpan ke Database.

Jika Controller PostsController.php ditulis dengan lengkap kurang lebih seperti berikut ini :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Illuminate\Support\Str;

class PostsController extends Controller
{
    public function index()
    {
       $posts = Post::latest()->get();
       return view('posts.index', compact('posts'));
    }

    public function create()
    {
        return view('posts.create');
    }

    public function store(Request $request)
    {
        $post = Post::create([
            'title'     => $request->input('title'),
            'slug'      => Str::slug($request->input('title')),
            'content'   => $request->input('content')
        ]);


        return redirect(route('posts.index'));
    }
}

Oke sekarang kita lanjutkan membuat sebuah form untuk memasukkan Data. silahkan buat file baru didalam folder resources/views/posts. Dan beri nama file tersebut dengan create.blade.php, dan silahkan masukkan kode dibawah ini :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <title>Tambah Post</title>
</head>

<body>

<div class="container" style="margin-top: 80px">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    TAMBAH POST
                </div>
                <div class="card-body">
                    <form action="{{ route('posts.store') }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <label>TITLE</label>
                            <input type="text" name="title" placeholder="Masukkan Title" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>CONTENT</label>
                            <textarea class="form-control" name="content" placeholder="Masukkan Content" rows="4"></textarea>
                        </div>

                        <button type="submit" class="btn btn-success">SIMPAN</button>
                        <button type="reset" class="btn btn-warning">RESET</button>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'content' );
</script>
</body>
</html>

Oke sekarang yang terakhir adalah merubah beberapa kode di Model Post, silahkan buka file Post.php di dalam folder app\Posts.php dan ubahlah menjadi seperti berikut ini :

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    /**
     * @var array
     */
    protected $fillable = [
        'title', 'slug', 'content'
    ];
}

Dari kode sebelumnya kita menambahkan sebuah variabel $fillable, kode ini digunakan untuk mass assigment diamana kolom atau field mana saja yang boleh diisi Data.

Oke sekarang kalian bisa jalankan projectnya dengan mengetikkan http://localhost:800/posts/create, maka jika berhasil kurang lebih tampilannya seperti berikut ini :


Dan sekarang silahkan kalian masukkan data dan klik simpan, maka jika data berhasil disimpan kalian bisa melihat kurang lebih seperti berikut ini :


Oke sampai disini pembahasan tentang memasukkan atau input Data dengan Laravel. kita lanjutkan pembahsan tentang edit dan update data di artikel selanjutnya. Terima Kasih


Fika Ridaul Maulayya
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR