Mending Koding - Ngoding Jadi Solusi

First, solve the problem. Then, write the code

Ads Here

Sabtu, 27 Februari 2021

Cara membuat crud sederhana pada freamework laravel

Februari 27, 2021 laravel , web programming 0 Comments

Membuat CRUD (Create, Read, Update & Delete) sederhana pada  freamework laravel 



CRUD(Create, Read, Update dan Delete)merupakan   program   dasar  yang  harus dikuasai   oleh   seorang   programmer.   Pembuatan   CRUD   pada  masing-masing   bahasa pemograman  sangat  beragam dalam  cara  pembuatannya,  tapi  konsepnya  sama.Saat  ini ada  juga  yang  memggunakan  CRUD  Generatordan  banyak  jenisnya.Dalam  framework Laravel  juga  demikian,  tapi  disini  hanya  akan  menjelaskan  pembuatan  CRUD  sederhana tanpa  CRUD Generator.

Pada sesi   ini   saya akan   menggunakan Laravel untuk membuat  proses create,  read, update,  dan  delete(CRUD) sederhana.CRUD  merupakan  proses  standar  yang  biasa ditemukan   pada   sebuah   sistem   aplikasi   web.   Berikut   adalah user stories dari fitur CRUD yang  akan kita  buat:
  1. Pengguna  dapat melihat  semua  data buku.
  2. Pengguna  dapat  menambahkan  data buku dengan memasukkan kode buku, judul buku dan deskripsi buku.
  3. Pengguna  dapat memperbaharui  data buku
  4. Pengguna  dapat menghapus  data buku tertentu.
Oke langsung saja ..lets go

Create new project
untuk nama project-nya saya buat dengan nama crud

composer create-project --prefer-dist laravel/laravel crud
Create database setelah membuat project laravel, selanjutnya kita buat database dan table di mysql, untuk nama databasenya kita buat sama denga nama projectnya yaitu : crud. Setelah itu kita buat table dengan nama Books dan struktur tablenya seperti berikut :


sampai disini persiapan awal sudah selesai, selanjutnya buka folder project laravel yang sudah kita buat dan ikut step-step berikut :

Setting koneksi untuk setting koneksi kita buka file .env dan kita rubah menjadi 
seperti berikut :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud
DB_USERNAME=root
DB_PASSWORD=

Tambahkan Bootstrap CSS
Agar tampilan web yang akan kita buat lebih baik, kita tambahkan css bootstrap di project kita. jika belum punya boostrap bisa di download Disini. Setelah itu copy file bootstrap.css yang ada di folder css ke folder public/css yang ada di project kita.

Membuat View
dalam view ini kita bisa mengatur tampilan website yang akan kita buat, view ini terletak di folder resource/views, adapun view-view yang akan kita buat disini adalah :

1. View index
View index ini berfungsi sebagai tampilan awal dari website kita, tambahkan kode berikut   di view index.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>CRUD Laravel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>Tutorial CRUD Laravel</h4>
            </div>
            <div class="panel-body">
                <form action="{{url('create')}}" method="get">
                    <div class="form-group">
                        <input type="submit" name="new" id="new" value="Entry Baru" class="btn btn-success">
                    </div>
                </form>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Kode Buku</th>
                            <th>Judul</th>
                            <th>Deskripsi</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($data as $key => $d)
                        <tr>
                            <td>{{ $d->kode_buku }}</td>
                            <td>{{ $d->judul }}</td>
                            <td>{{ $d->deskripsi }}</td>
                            <td>
                                <a href="{{url('read',array($d->id))}}">Read</a>
                                <a href="{{url('delete',array($d->id))}}">Delete</a>
                                <a href="{{url('edit',array($d->id))}}">Edit</a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

2. view create.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>CRUD Laravel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>Tutorial CRUD Laravel</h4>
            </div>
            <div class="panel-body">
                <form action="{{url('insert')}}" method="post">
                    <div class="form-group">
                        <label for="kode">Kode Buku</label>
                        <input type="text" name="kode" id="kode" class="form-control" required="require">
                    </div>
                    <div class="form-group">
                        <label for="judul">Judul Buku</label>
                        <input type="text" name="judul" id="judul" class="form-control">
                    </div>                    
                    <div class="form-group">
                        <textarea id="deskripsi" name="deskripsi" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="send" id="send" value="Simpan" class="btn btn-success">{!!csrf_field()!!}                       
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

3. view edit.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>CRUD Laravel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>Tutorial CRUD Laravel</h4>
            </div>
            <div class="panel-body">
                <form action="{{url('update', $data->id)}}" method="post">
                    <!-- <input type="hidden" name="id" id="id" value="{{$data->id}}"> -->
                    <div class="form-group">
                        <label for="kode">Kode Buku</label>
                        <input type="text" name="kode" id="kode" value="{{$data->kode_buku}}" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="judul">Judul Buku</label>
                        <input type="text" name="judul" id="judul" value="{{$data->judul}}" class="form-control">
                    </div>                    
                    <div class="form-group">
                        <textarea id="deskripsi" name="deskripsi" class="form-control">
                            {!!$data->deskripsi!!}
                        </textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit" name="send" id="send" value="Simpan" class="btn btn-success">{!!csrf_field()!!}                       
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

4. view read.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>CRUD Laravel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>Tutorial CRUD Laravel</h4>
            </div>
            <div class="panel-body">
                    <!-- <input type="hidden" name="id" id="id" value="{{$data->id}}"> -->
                    <div class="form-group">
                        <label for="kode">Kode Buku</label>
                        <input type="text" name="kode" id="kode" value="{{$data->kode_buku}}" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label for="judul">Judul Buku</label>
                        <input type="text" name="judul" id="judul" value="{{$data->judul}}" class="form-control" readonly>
                    </div>                    
                    <div class="form-group">    
                        <label for="desk">Deskripsi</label>    
                        <input type="text" name="desk" id="desk" value="{{$data->deskripsi}}" class="form-control" readonly>
                    </div>
                    <form action="{{url('back')}}" method="get">
                        <div class="form-group">
                            <input type="submit" value="Back" class="btn btn-success">
                        </div>
                    </form>
            </div>
        </div>
    </div>
</body>
</html>

Membuat Controller
controller ini berfungsi untuk menuliskan logic program (contohnya : query ke database)
untuk membuat controller kita jalan command line dan tuliskan command berikut :

php artisan make:controller BooksController
setelah itu dalam project kita akan terbentuk sebuah controller dengan nama BooksController yang trsimpan di folder app/Http/Controllers dan tambahkan kode berikut :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use App\Books;
class BooksController extends Controller
{
    public function index(){
     $data=Books::all();
        return view('index',compact('data'));
    }

    public function back(){
     return redirect ('/');
    }
    
    public function create(){
     return view('create');
    }

    public function insert(Request $request){
     $data=new Books();
        $data->kode_buku=$request->get('kode');
        $data->judul=$request->get('judul');
        $data->deskripsi=$request->get('deskripsi');
        $data->save();
     return redirect ('/');
    }

    public function delete($id){
     $data=Books::find($id);
        $data->delete();
        return back();
    }

    public function edit($id){
     $data=Books::find($id);
     return view('edit',compact('data'));
    }

    public function update(Request $request, $id){     
     $data = Books::findOrFail($id);
        $data->kode_buku=$request->get('kode');
        $data->judul=$request->get('judul');
        $data->deskripsi=$request->get('deskripsi');
        $data->save();
     return redirect ('/')->with('alert-success','Data berhasil Diubah.');
    }

    public function read($id){
     $data=Books::find($id);
     return view('read',compact('data'));
    }
}

Membuat model
untuk membuat model tuliskan command berikut di command line :
php artisan make:model Books
Tuliskan kode berikut di model Books
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Books extends Model
{
    protected $table="Books";
 protected $primaryKey="id";
 protected $fillable=['kode_buku','judul','deskripsi'];
}

Routing
routing ini berfungsi untuk menghubungkan controller dengan view, routing ini kita tambahkan didalam folder routes/web.php dan tambahkan kode berikut :

Route::get('/','BooksController@index');

Route::get('back','BooksController@back');

Route::get('create','BooksController@create');

Route::post('insert', 'BooksController@insert');

Route::get('delete/{id}','BooksController@delete');

Route::get('edit/{id}','BooksController@edit');

Route::post('update/{id}', 'BooksController@update');

Route::get('read/{id}','BooksController@read');

jika sudah selesai semua, coba jalankan programnya melalui web browser.

Berikut screen shot dari aplikasi ini :

By di
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)