TUTORIAL 2 : CRUD menggunakan Laravel

Published by Arsya Rifqi on

  1. Pertama-tama aktifkan xampp anda terlebih dahulu, ikuti langkah tutorial sebelumnya .
  2. Buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/dashboard/ pada link URL anda.

3. Jika sudah muncul tampilan seperti gambar di atas, klik phpMyAdmin.

4. Klik New.

5. Isikan nama tabel dengan lara_store . Lalu klik Create.

6. Kemudian buka file .env   di dalam folder LaraStore untuk pengaturan database, isi sesuai gambar di bawah

7. Sekarang, kita atur menu pada sidebar. Buka file sidebar.blade.php hapus baris code yg di block seperti gambar dibawah

8. Ubah baris code pada sidebar.blade.php  seperti gambar dibawah

9. Sekarang coba buka di browser nya, masukkan http://localhost/LaraStore/public/admin

10. Buatlah sebuah tabel dengan migration, menggunakan php artisan lewat cmd

11. Kemudian buka folder database/migrations/ cari file dengan akhiran create_products_table.php, masukkan code seperti gambar di bawah

12. Lalu hapus dua file paling atas dalam folder
database/migrations/

13. Gunakan perintah berikut untuk membuat tabel pada database

apabila muncul keterangan seperti ini, maka tabel berhasil dibuat

14. Sekarang kita buat model dari Product, masukkan perintah berikut

15. Buatlah sebuah folder dengan nama product

16. Install library tambahan untuk membuat form lebih mudah, masukkan perintah berikut

17. Sekarang kita atur dalam config/app.php tambahkan code berikut

code diatas berada dalam ‘providers’ =>

code diatas berada dalam ‘aliases’ =>

18. Buatlah sebuah file create.blade.php dalam folder product

19. Masukkan code berikut ke dalam file create.blade.php

@extends('admin/admin')
@section('content')
    <div class="row">
        <div class="col-12">
            {{ Form::open() }}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Tambah Barang</h3>
                    </div>
                    <div class="card-body">
                        @if(!empty($errors->all()))
                        <div class="alert alert-danger">
                            {{ Html::ul($errors->all())}}
                        </div>
                        @endif
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ Form::label('name', 'Nama Barang') }}
                                    {{ Form::text('name', '', ['class'=>'form-control', 'placeholder'=>'Masukkan Nama Barang']) }}
                                </div>
                                <div class="form-group">
                                    {{ Form::label('price', 'Harga Barang') }}
                                    {{ Form::text('price', '', ['class'=>'form-control', 'placeholder'=>'Masukkan Harga Barang']) }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                
                                <div class="form-group">
                                    {{ Form::label('condition', 'Kondisi Barang') }}
                                    {{ Form::select('condition', ['baru'=>'baru', 'bekas'=>'bekas'], null,
                                        ['class'=>'form-control']) }}        
                                </div>
                                <div class="form-group">
                                    {{ Form::label('image', 'Gambar Barang') }}
                                    {{ Form::file('imageFile', ['class'=>'form-control']) }}        
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                {{ Form::label('description', 'Description') }}
                                {{ Form::textarea('description', '', ['class'=>'form-control', 'placeholder'=>'Enter description', 'rows'=>5]) }}
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <a href="{{ URL::to('admin') }}" class="btn btn-outline-info">Kembali</a>
                        {{ Form::submit('Proses', ['class' => 'btn btn-primary pull-right']) }}
                    </div>
                </div>
            <!-- </form> -->
            {{ Form::close() }}
        </div>
    </div>
@endsection

20. Sekarang kita buat Product controller , serta route Resource agar mempermudah penggunaan method.

21. Tambahkan Route::resource seperti gambar di bawah

22. Buka file ProductController.php tambahkan code dalam method create( ) seperti gambar dibawah

23. Sekarang coba buka di browser nya, masukkan http://localhost/LaraStore/public/admin/product/create

 


24. Tambahkan code berikut pada file create.blade.php

25. Aktifkan folder public untuk menyimpan gambar

26. Buka file ProductController.php tambahkan code seperti gambar di bawah

 

27. Buka file ProductController.php tambahkan code dalam method store( )

public function store(Request $request)
    {
        //
        $rules =[
            'name'=>'required',
            'price'=>'required|integer',
            'imageFile'=>'required|mimes:jpg,png,jpeg,JPG',
            'description'=>'required'
        ];

        $pesan=[
            'name.required'=>'Nama Barang Tidak Boleh Kosong',
            'price.required'=>'Harga Barang Tidak Boleh Kosong',
            'imageFile.required'=>'Gambar Tidak Boleh Kosong',
            'description.required'=>'Deskripsi Tidak Boleh Kosong'
        ];

        $validator=Validator::make(Input::all(),$rules,$pesan);

        //jika data ada yang kosong
        if ($validator->fails()) {

            //refresh halaman
            return Redirect::to('admin/product/create')
            ->withErrors($validator);

        }else{

            $image=$request->file('imageFile')->store('productImages','public');
            
            $product=new \App\Product;

            $product->name=Input::get('name');
            $product->condition=Input::get('condition');
            $product->description=Input::get('description');
            $product->price=Input::get('price');
            $product->image=$image;
            $product->save();

            Session::flash('message','Product Stored');

            return "Berhasil Input Barang";
        }
    }

28. Sekarang coba input data pada form tambah data, lihat apakah berhasil

29. Buatlah sebuah file index.blade.php dalam folder product

30. Masukkan code di bawah ini ke dalam index.blade.php

@extends('admin/admin')
@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Data Barang</h3>
                <div class="card-tools">
                 <a href="{{ URL::to('/admin/product/create')}}" class="btn btn-tool">
                     <i class="fa fa-plus"></i>
                       Add
                 </a>
             </div>
         </div>
         <div class="card-body">
            @if (Session::has('message'))
            <div id="alert-msg" class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                {{ Session::get('message') }}
            </div>
            @endif
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr class="text-center">
                                <th>ID</th>
                                <th>Nama</th>
                                <th>Harga</th>
                                <th>Deskripsi</th>
                                <th>Kondisi</th>
                                <th>Gambar</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($products as $product)
                            <tr>
                                <td class="text-center">{{ $product['id'] }}</td>
                                <td>{{ $product['name'] }}</td>
                                <td>Rp. {{ $product['price'] }}</td>
                                <td>{{ $product['description'] }}</td>
                                <td>{{ $product['condition'] }}</td>
                                <td class="text-center"><img src="{{ asset('storage/'.$product['image']) }}" width="100"/></td>
                                <td class="text-center">
                                    <form method="POST" action="{{ URL::to('/admin/product/'.$product['id']) }}">
                                        {{ csrf_field() }}
                                        <input type="hidden" name="_method" value="DELETE" />
                                        <div class="btn-group">
                                            <a class="btn btn-info" href="{{ URL::to('/admin/product/'.$product['id']) }}"><i class="fa fa-eye"></i></a>
                                            <a class="btn btn-success" href="{{ URL::to('/admin/product/'.$product['id'].'/edit') }}"><i class="fa fa-pencil"></i></a>
                                            <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i></button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>


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

@endsection

31. Buka file ProductController.php tambahkan code dalam method index ( )

32. Sekarang coba buka di browser nya, masukkan http://localhost/LaraStore/public/admin/product/

 

33. Buka file ProductController.php ubah code dalam method store ( )

34. Buka file sidebar.blade.php ubah code seperti gambar di bawah

 

35. Sekarang kita akan menampilkan detail barang, buatlah sebuah file show.blade.php dalam folder product

36. Buka file show.blade.php tambahkan code di bawah

@extends('admin/admin')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Detail Barang</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <img src="{{ asset('storage/'.$product['image']) }}" 
                                height="200" width="100%"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            
                            <div class="form-group">
                                <label for="name">Nama Barang</label>
                                <input id="name" type="text" value="{{ $product['name'] }}" class="form-control" disabled />
                            </div>
                            <div class="form-group">
                                <label for="price">Harga Barang</label>
                                <input id="price" type="text" value="{{ $product['price'] }}" class="form-control" disabled />
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="status">Kondisi Barang</label>
                                <input id="status" type="text" value="{{ $product['condition'] }}" class="form-control" disabled />
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="description">Description</label>
                                <input id="description" type="text" value="{{ $product['description'] }}" class="form-control" disabled />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

37. Buka file ProductController.php tambahkan code dalam method show ( )

38. Klik simbol mata dalam kolom aksi pada salah satu data

39. Sekarang kita akan membuat form untuk edit data, buatlah sebuah file edit.blade.php dalam folder product

40. Buka file edit.blade.php tambahkan code di bawah

@extends('admin/admin')
@section('content')
<div class="row">
    <div class="col-12">
        {{ Form::model($product,['route'=>['product.update',$product['id']], 'files'=>true,'method'=>'PUT']) }}
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Ubah Data Barang</h3>
            </div>
            <div class="card-body">
                @if(!empty($errors->all()))
                <div class="alert alert-danger">
                    {{ Html::ul($errors->all())}}
                </div>
                @endif
                <div class="row">
                    <div class="col-md-12">
                        <img src="{{ asset('storage/'.$product['image'])}}" width="100%" height="200">
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ Form::label('name', 'Nama Barang') }}
                            {{ Form::text('name', $product['name'], ['class'=>'form-control', 'placeholder'=>'Masukkan Nama Barang']) }}
                        </div>
                        <div class="form-group">
                            {{ Form::label('price', 'Harga Barang') }}
                            {{ Form::text('price', $product['price'], ['class'=>'form-control', 'placeholder'=>'Masukkan Harga Barang']) }}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            {{ Form::label('condition', 'Kondisi Barang') }}
                            <select name="item_kind" class="form-control">
                                <option value="baru" {{ $product['condition']=='baru'?'selected':'' }}>Baru</option>
                                <option value="bekas" {{ $product['condition']=='bekas'?'selected':'' }}>Bekas</option>
                            </select>        
                        </div>
                        <div class="form-group">
                            {{ Form::hidden('imagePath',$product['image'])}}
                            {{ Form::label('image', 'Image') }}
                            {{ Form::file('imageFile', ['class'=>'form-control']) }}        
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        {{ Form::label('description', 'Description') }}
                        {{ Form::textarea('description', $product['description'], ['class'=>'form-control', 'placeholder'=>'Enter description', 'rows'=>5]) }}
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <a href="{{ URL::to('admin/product') }}" class="btn btn-outline-info">Back</a>
                {{ Form::submit('Proses', ['class' => 'btn btn-primary pull-right']) }}
            </div>
        </div>
        <!-- </form> -->
        {{ Form::close() }}
    </div>
</div>
@endsection

41. Buka file ProductController.php tambahkan code dalam method edit ( )

42. Klik simbol pensil pada kolom aksi

43. Buka file ProductController.php tambahkan code dalam method update ( )

public function update(Request $request, $id)
    {
        //
        $rules=[
            
            'name'=>'required',
            'price'=>'required|integer',
            'description'=>'required',
        ];

        $pesan=[
            'name.required'=>'Nama Tidak Boleh Kosong!!',
            'price.required'=>'Harga Tidak Boleh Kosong!!',
            'description.required'=>'Deskripsi Barang Tidak Boleh Kosong!!',
        ];


        $validator=Validator::make(Input::all(),$rules,$pesan);

        if ($validator->fails()) {
            return Redirect::to('admin/product/'.$id.'/edit')
            ->withErrors($validator);

        }else{

            $image="";

            if (!$request->file('imageFile')) {
                # code...
                $image=Input::get('imagePath');
            }else{
                $image=$request->file('imageFile')->store('productImages','public');                
            }

            $product=\App\Product::find($id);

            $product->name=Input::get('name');
            $product->condition=Input::get('condition');
            $product->price=Input::get('price');
            $product->description=Input::get('description');
            $product->image=$image;
            $product->save();

            Session::flash('message','Data Barang Berhasil Diubah');
            
            return Redirect::to('admin/product');
        }
    }

44. Sekarang coba anda ubah salah satu data barang

45. Terakhir kita aktifkan fungsi hapus, buka file ProductController.php tambahkan code dalam method delete ( )

46. Coba hapus salah satu data dengan klik simbol tong sampah



Categories: Uncategorized

1 Comment

TUTORIAL 3 : Register dan Login Menggunakan Laravel - Rumah Coding · February 27, 2019 at 10:06 am

[…] Pada tutorial ini, melanjutkan dari tutorial sebelumnya […]

Leave a Reply

Avatar placeholder

Related Posts

Berkenalan dengan Nuxt.js Panduan Dasar untuk Pemula
Uncategorized

Berkenalan dengan Nuxt.js: Panduan Dasar untuk Pemula

I. Pendahuluan Pengenalan tentang Nuxt.js Nuxt.js adalah sebuah kerangka kerja Vue.js yang dibangun di atas Vue.js, yang memperluas fungsionalitas Vue.js dengan menambahkan fitur-fitur seperti server-side rendering (SSR), routing otomatis berbasis file, penanganan state dengan mudah Read more…

Menggunakan Rust untuk Machine Learning
Uncategorized

Menggunakan Rust untuk Machine Learning: Exploring Frameworks and Libraries

I. Pendahuluan Dalam era yang semakin terhubung dan didorong oleh data, machine learning telah menjadi komponen integral dari banyak aplikasi modern. Kemampuannya untuk mengekstraksi pola dari data, membuat prediksi, dan mengambil keputusan berdasarkan informasi yang Read more…

Rust untuk Pengembangan IoT
Uncategorized

Rust untuk Pengembangan IoT: Membuat Aplikasi Embedded yang Aman dan Efisien

I. Pendahuluan A. Pengenalan tentang Internet of Things (IoT) Internet of Things (IoT) adalah konsep di mana objek fisik seperti perangkat elektronik, kendaraan, dan perangkat rumah tangga dilengkapi dengan teknologi yang memungkinkan mereka untuk terhubung Read more…