Tutorial CRUD Laravel Bagian 2 (Create)



Halo kawan-kawan semua. kita lanjutkan tutoral kita yang lalu sampai pada pembuatan model dan pengenalan eloquent. pada tutorian ini, kita sudah melakukan read data dari database. Kita tau CRUD atau Create, Read, Update dan Delete adalah dasar yang harus dimiliki untuk bisa membuat aplikasi. Karena kita sudah membuat Read data pada tutorial tersebut maka kita lanjutkan ke bagian Create.

Pada tutorial ini kita akan menambah field baru bernama file dengan jenis text untuk mengupload file. sering kali kita butuh data gambar untuk disimpan di aplikasi kita.

#Read


Untuk tutorial ini, anda bisa baca di sini.

#Create
adalah cara menambahkan data baru ke dalam database. baik langsung saja kita mulai membuat create data. ingat step ini akan selalu berulang. Untuk create sendiri ada dua proses yang akan kita kerjakan.

  1. Buat link untuk di arahkan ke sebuah route
  2. Route
  3. Controller
    • edit atau persiapkan model (opsional)
    • passing data dari model (opsional)
  4. view

1.Buat Link (siswa\siswa_index.blade.php)

kita buat link dari tombol tambah yang ada di view siswa\siswa_index.blade.php

<a href="{{url('tambahsiswa')}}"><button class="btn btn-primary btn-sm" title="tambah unit/bagian baru"><i class="fa fa-plus"></i> Tambah</button></a><br><br>

link dihasilkan, http://localhost:8000/tambahsiswa

2. Route (routes/web.php)

setelah link dibuat, kita tangkap link tadi di route. routes/web.php

Route::get('/tambahsiswa', 'SiswaController@tambahsiswa');

dari route tersebut dipanggil controller SiswaController dengan method tambahsiswa. selanjutnya buat method tambah siswa di app\http\controllers\SiswaControllers.php

3. Controller (app\http\controllers\SiswaControllers.php)

public function tambahsiswa(){
return view('siswa.tambah_siswa');
}

Tidak ada data yang dipassing ke view. controller ini hanya memanggil dan menampilkan view.

4. Buat View (resources\views\siswa\tambah_siswa.blade.php)

@extends('master_tabel')
@section('breadcrumb')
<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Siswa</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Siswa</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
</section>
@endsection
@section('content')
<section class="content">
      <div class="container-fluid">
        <!-- SELECT2 EXAMPLE -->
        <div class="col-md-12">
            <div class="card card-dark">
              <div class="card-header">
                <h3 class="card-title">FORM TAMBAH SISWA</h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form class="form-horizontal" action="{{url('aksi_tambahsiswa')}}" method="POST" enctype="multipart/form-data">
                {{csrf_field()}}
                <div class="card-body">
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">NIS
                    @error('nis')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                    </label>
                    <div class="col-sm-10">
                      <input type="number" name="nis" class="form-control" placeholder="Nomor Induk Siswa" value="{{old('nis')}}">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">NAMA 
                    @error('nama')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                    </label>
                    <div class="col-sm-10">
                      <input name="nama" type="text" class="form-control"  placeholder="Nama" value="{{old('nama')}}">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">JENIS KELAMIN 
                    @error('jenis_kelamin')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                    </label>
                    <div class="col-sm-10">
                      <select name="jenis_kelamin" class="form-control">
                        <option value="">-Pilih-</option>
                        <option @if(old('jenis_kelamin')=='Laki-Laki') selected @endif value="Laki-Laki">Laki-Laki</option>
                        <option @if(old('jenis_kelamin')=='Perempuan') selected @endif value="Perempuan">Perempuan</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">AGAMA 
                    @error('agama')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                    </label>
                    <div class="col-sm-10">
                      <select name="agama" class="form-control">
                        <option value="">-Pilih-</option>
                        <option @if(old('agama')=='Islam') selected @endif value="Islam">ISLAM</option>
                        <option @if(old('agama')=='Kristen') selected @endif value="Kristen">KRISTEN</option>
                        <option @if(old('agama')=='Katolik') selected @endif value="Katolik">KATOLIK</option>
                        <option @if(old('agama')=='Budha') selected @endif value="Budha">BUDHA</option>
                        <option @if(old('agama')=='Hindu') selected @endif value="Hindu">HINDU</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">ALAMAT 
                    @error('alamat')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                    </label>
                    <div class="col-sm-10">
                      <textarea name="alamat" class="form-control">{{old('alamat')}}</textarea>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-2 col-form-label">Foto 
                    @error('file')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                    </label>
                    <div class="col-sm-10">
                      <input type="file" name="file" class="form-control">
                    </div>
                  </div>                  
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                  <button type="submit" class="btn btn-info">TAMBAH</button>
                  <button type="submit" class="btn btn-default float-right">Cancel</button>
                </div>
                <!-- /.card-footer -->
              </form>
            </div>
            
        </div>
        <!-- /.card -->
      </div><!-- /.container-fluid -->
    </section>
@endsection

form ini sudah lengkap dengan pesan error dari validasi. error saat validasi akan dikirim sisini.

@error('nis')
    <div class="text-danger">{{ $message }}</div>
@enderror

validasi form ini adalah sebuah fitur yang sangat bagus untuk keamanan sistem. mungkin merepotkan jika kita bangun sendiri dengan php native. ini salah satu alasan saya tidak ingin kembali ke native php.

setelah menampilkan pesan error. kita tidak mau kehilangan data di input yang valid. seperti ini lah caranya mengambil kembali data yang sudah valid di input.

value="{{old('nis')}}"

laravel juga memiliki fitur pengamanan lain berupa token.

{{csrf_field()}}

untuk yang lain nya saya rasa kita sudah paham mengenai form.


Proses pertama untuk create selesai. step nya berulang lagi.
  1. Buat link untuk di arahkan ke sebuah route
  2. Route
  3. Controller
    • edit atau persiapkan model (opsional)
    • passing data dari model (opsional)
  4. view
1. Buat Link
untuk link kita buat dari action form tambah_siswa.blade.php.

action="{{url('aksi_tambahsiswa')}}"

2. Route (routes/web.php)
setelah link dibuat, kita tangkap link tadi di controller. routes/web.php

Route::post('/aksi_tambahsiswa', 'SiswaController@aksi_tambahsiswa');

dari route tersebut dipanggil controller SiswaController dengan method aksi_tambahsiswa. perhatikan metode route yang digunakan adalah post Route::post();, ini karena data pada form dikirim dengan method post (resources\views\siswa\tambah_siswa.blade.php).

3. Controller (app\http\controllers\SiswaControllers.php)

public function aksi_tambahsiswa(Request $request){
//validasi
$request->validate([
'file' => 'required|file|image|mimes:jpeg,png,jpg|max:2048',
'nis' => ['required', 'unique:table_siswa', 'max:15'],
'nama' => ['required'],
'jenis_kelamin' => ['required'],
'agama' => ['required'],
'alamat' => ['required'],
]);

//mengupload file
$file = $request->file('file');
$nama_file = $file->getClientOriginalName();
$destinationPath = 'foto_siswa';
$file->move($destinationPath,$file->getClientOriginalName());

//mengubah nama file
$request = new Request($request->all());
$request->merge([
'file' => $nama_file,
]);

//membuat objek $siswa
$siswa=new Siswa;
//menambah ke database
$siswa::create($request->all());
return redirect('/siswa');

}

kita lihat di controller ada validasi form, upload file, dan terakhir eloqent untuk menambahkan data ke database.

public function aksi_tambahsiswa(Request $request)

Request gunanya untuk menangkap data dari form. 

$request->nama;
menangkap data satu per satu, cara ini akan merepotkan.

$request->all()
untuk mengangkap semua data dari form. akan tatapi untuk nama file butuh penanganan khusus.

//mengupload file
$file = $request->file('file');
$nama_file = $file->getClientOriginalName();

setelah nama file di dapat kita harus me replace

//mengubah nama file
$request = new Request($request->all());
$request->merge([
'file' => $nama_file,
]);

proses upload file

$destinationPath = 'foto_siswa'; 
$file->move($destinationPath,$file->getClientOriginalName());

sekarang file sudah di upload, selanjutnyam menambahkan data dalam database.

//menambah ke database
$siswa::create($request->all());

sekarang kita sudah menuliskan kode untuk menambah data ke databse dan mengupload file. selanjutnya kita modifikasi model.

--Model
Model kita sesuaikan. tambahkan field baru bernama file dengan tipe data text, boleh dari file migration atau php myadmin hehe.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Siswa extends Model
{
protected $table = "table_siswa";
protected $fillable = ['nis','nama','jenis_kelamin','agama','alamat','file'];
}

kita harus menuliskan kode ini di model agar bisa menambahkan data dengan $request->all() karena form juga membawa token csrf.

$siswa::create($request->all());
eloquent untuk create data baru.

4. View
untuk view kita hanya menampilkan siswa_index.blade.php

return redirect('/siswa');



nanti pada tutorial selanjutnya kita akan membuat tombol detil pada aksi untuk melihat detil data siswa termasuk gambar.


Selamat kita sudah menyelesaikan Read dan Create lengkap dengan upload data. Terima Kasih.


Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE