Create & Read pada PHP - Praktikum 15

Assalamu'alaikum warahmatullahi wabarakatuh.

Halo teman-teman semuanya! Bagaimana kabarnya? Semoga dalam kondisi dan keadaan yang prima dan baik-baik saja ya, sekarang di Indonesia keadaan covid sudah makin membaik nih, tapi jangan lupa yah teman-teman harus tetap jaga protokol kesehatan dan selalu berdoa demi keselamatan bersama!

Perkenalkan kembali lagi bersama saya Ilham, saya dari kelas XI RPL 2 yang sekarang dalam artikel kali ini, kita akan membahas tentang "Komponen CRUD: Create dan Read",  tanpa berlama-lama lagi mari langsung saja kita ke bahasan materinya!


Apa itu Create 

Create (Membuat) adalah teknik pada pemrograman untuk membuat sejumlah data baik pada tabel ataupun database. Data tersebut dapat berbentuk JSON file, array ataupun hanya merupakan input biasa.

Pada pertemuan kali ini kita akan belajar untuk membuat data dan kemudian kita export ke tabel database yang kita miliki.

Pada kondisi bagaimana kah metode ini diperlukan? Metode ini akan diperlukan pada saat kita akan mengelola sejumlah data.


Apa itu Read 

Read (Membaca) adalah teknik pada pemrograman untuk membaca sejumlah data baik pada tabel yang ada pada database ataupun lainnya. Data tersebut dapat berbentuk JSON file, array ataupun hanya merupakan input biasa.

Pada pertemuan kali ini kita akan belajar untuk membaca data yang ada pada database yang akan kita buat dan kemudian kita tampilkan dalam bentuk tabel pada halaman web.

Pada kondisi bagaimana kah metode ini diperlukan? Metode ini akan diperlukan pada saat kita hendak menampilkan ataupun melihat sejumlah data yang ada.


Membuat Database 

Sebelum kita melakukan metode-metode diatas kita harus menyediakan terlebih dahulu database yang akan digunakan.

Pada pertemuan kali ini kita akan membuat database dengan menggunakan metode migration pada framework Laravel untuk memudahkan kita dalam migrasi database nantinya.

Dan kemudian kita akan isikan beberapa data dummy sebagai bahan awalan untuk proyek kita. Installation - Laravel - The PHP Framework For Web Artisans

Pertama kita siapkan terlebih dahulu databasenya sebagai media untuk menampung data dan tabelnya, namanya bebasyah kalo aku sih gini:
CREATE databases sekolah_pwpb
Lalu kita ubah konfigurasi database dan user password kita pada file .env di Laravelnya yang ada pada directory terluar/root menjadi seperti ini contohnya:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sekolah_pwpb
DB_USERNAME=root
DB_PASSWORD=

Kedua kita akan menyiapkan terlebih dahulu migration tabelnya, Oiya sebelum itu lebih baik kita jalankan terlebih dahulu local development servernya terlebih dahulu
Jalankan perintah artisan pada terminal/bash:

php artisan serve
php artisan make:migration create_siswa_table
Lalu kita ubah konfigurasi pada file migrasi yang telah kita migrate biasanya ada di direktori: database/migrations, kemudian cari tabel yang sesuai dengan nama tabel kita yakni siswa dan ubah konfigurasi pada fungsi up menjadi seperti ini untuk membuat kolom-kolomnya:
public function up()
    {
        Schema::create('siswa', function (Blueprint $table) {
            $table->id();
            $table->char('nis', 10)->unique();
            $table->string('nama_lengkap', 100);
            $table->char('jenis_kelamin', 1);
            $table->string('kelas', 10);
            $table->string('jurusan', 50);
            $table->timestamps();
        });
    }
Setelah kita melakukan berbagai konfigurasi diatas kurang lebih hal yang terjadi pada database kita akan menjadi seperti ini, apabila terdapat tabel seperti user, reset_password dll itu merupakan migrasi default dari laravel sebagai data untuk mengatasi auth pada login atau registrasi:
Kita isikan beberapa data dummy secara manual pada tabel siswa yang telah kita buat:

Menyiapkan Router 

Sebelum kita membuat view dan menyiapkan model, kita persiapkan terlebih dahulu router dan method yang akan dipakainya, sebagai contoh disini nantinya kita akan membuat controller yang diberinama SIswaController yang terdapat banyak method resource didalamnya.

Dalam router ini kita akan mendeklar method route, alamat uri tujuan, dan class beserta method yang akan dipanggil atau digunakan.

Sebelum memakai controller Siswa kita import terlebih dahulu menggunakan klausa use seperti dibawah ini:

use App\Http\Controllers\SiswaController;
Pertama kita siapkan terlebih dahulu route untuk mengarah ke index dari view siswa:
Route::get('/siswa', [SiswaController::class, 'index']);

Kedua kita siapkan route untuk mengarah ke halaman create dari view siswa sebagai untuk menampilkan formnya saja untuk pengelolaan data akan ada pada route ke tiga:
Route::get('/siswa/create', [SiswaController::class, 'create']);

Ketiga kita siapkan route lain yakni untuk menampilkan satu data siswa penuh atau detail dari siswa yang mengarah ke halaman siswa dengan disertai id yang dimilikinya: 
Route::get('/siswa/{siswa}', [SiswaController::class, 'show']);


Keempat kita siapkan route untuk mengelola data yang dikirim yakni view siswa index namun dengan method yang berbeda: 


Route::post('/siswa', [SiswaController::class, 'store']);


Kelima kita siapkan route untuk menampilkan data yang ada yakni view siswa table (menampilkan data siswa dalam bentuk keseluruhan tabel): 


Route::get('/siswa/table', [SiswaController::class, 'table']);

Membuat Controller dan Model 

Dengan membuat controller beserta modelnya kita dapat melakukan berbagai method resource yang disediakan oleh laravel pada aplikasi web kita.

Cara membuatnya sangatlah mudah yakni dengan memakai artisan maka secara otomatis model dari siswa akan terhubung dengan controller siswa tanpa kita harus mengimportnya secara manual.

Berikut merupakan command artisan yang dipakainya: 
php artisan make:controller SiswaController -r -m Siswa
Setelah membuat model dan controllernya kita akan melakukan sedikit konfigurasi pada Model Siswanya yang bertujuan untuk menentukan field mana saya yang boleh diinputkan data dan juga menginisialisasi nama tablenya agar system dari laravel tidak menggunakan penamaan default pada tabel yang dituju:
class Siswa extends Model
{
    use HasFactory;
    use SoftDeletes;
    protected $fillable = ['nama_lengkap', 'nis', 'jenis_kelamin', 'kelas', 'jurusan'];
    protected $table = 'siswa'; /* laravel Eloquent will detect table has named `siswas` not `siswa` */
}
Demikian pembuatan controller dan model siswa telah selesai, selanjutnya kita akan mengkonfigurasi method-method yang ada pada controller siswa untuk melakukan create dan read.

Mengkonfigurasi method-method pada Controller 

Dengan membuat controller beserta menyertakan -r atau --resource maka secara otomatis method-method crud akan disertakan pada controller kita oleh laravel/artisannya.

Sekarang kita akan mengkonfirgurasi beberapa method untuk create dan read.

Berikut merupakan kodingannya:

 
Pertama untuk method index yang akan digunakan untuk mereturn view siswa index.
public function index()
    {
        $siswa = Siswa::all();
        return view('siswa.index', compact('siswa'));
    }
Kedua untuk method tabel yang akan digunakan untuk mereturn view siswa tabel.

public function table()
    {
        $siswa = Siswa::all();
        return view('siswa.table', compact('siswa'));
    }
Ketiga untuk method show yang akan digunakan untuk mereturn view siswa show atau untuk menampilkan data siswa secara perindividu atau lebih detail

public function show(Siswa $siswa)
    {
        return view('siswa.show', compact('siswa'));
    }
Keempat untuk method create yang akan digunakan untuk mereturn view siswa create atau untuk menampilkan form tambah data siswa.

public function create()
    {
        return view('siswa.create');
    }
Kelima untuk method store yang akan digunakan untuk mereturn view siswa index dan juga pengelolaan data-data hasil input.
public function store(Request $request)
    {     
        $request->validate([
            'nama_lengkap' => 'required',
            'nis' => 'required|size:10'
        ]);

        Siswa::create($request->all());
        return redirect('/siswa')->with('status', 'Data Siswa Berhasil Ditambahkan!');
    }

Membuat View dan menghubungkannya terhadap Method Controller 

Dengan membuat controller beserta modelnya kita dapat melakukan berbagai method resource yang disediakan oleh laravel pada aplikasi web kita.

Sekarang kita akan membuat view-view yang berkaitan dengan method pada controller yang sebelumnya telah dikonfigurasikan.

Sebelumnya disini saya telah menggunakan teknik templating engine yaitu blade pada laravel dengan membuat main view sebagai layout website saya, sehingga dalam pembuatan view lain cukup dengan meng-extend saja ke main view yang ada.

Berikut merupakan codingan view-viewnya: 


Pertama untuk view index siswa yang akan digunakan untuk menampilkan data siswa hanya namanya saja.

@extends('layout/main')
@section('title', 'Daftar Siswa | SMK Negeri 4 Bandung')


@section('container')
<div class="container">
    <div class="row">
        <div class="col-10">

            <div class="row mt-4 ">
                <div class="col">
                    <h1 class="float-left">Daftar Siswa</h1>
                    <a href="{{ url('siswa/create') }}" class="btn btn-outline-primary mt-3 mb-1 float-right">Tambah
                        Data Siswa</a>
                </div>
            </div>

            @if (session('status'))
            <div class="alert alert-success mt-2">
                {{ session('status') }}
            </div>
            @endif

            <hr class="mb-3">

            <ul class="list-group">
                @forelse ($siswa as $s)
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ $s->nama_lengkap }}

                    <a href="/siswa/{{ $s->id }}" class="badge badge-info">detail</a>
                </li>
                @empty
                <h3 class="font-italic text-danger">Data masih kosong!</h3>
                @endforelse
            </ul>

        </div>
    </div>
</div>
@endsection
Kedua untuk view table siswa yang akan digunakan untuk menampilkan data siswa penuh dalam bentuk tabel.
@extends('layout/main')
@section('title', 'Daftar Tabel Siswa | SMK Negeri 4 Bandung')


@section('container')
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1 class="mt-4">Daftar Tabel</h1>
            <hr class="mb-3">
            <table class="table table-bordered table-hover text-center">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nama</th>
                        <th scope="col">NIS</th>
                        <th scope="col">Jenis Kelamin</th>
                        <th scope="col">Kelas</th>
                        <th scope="col">Jurusan</th>
                        <th scope="col">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($siswa as $s)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $s->nama_lengkap }}</td>
                        <td>{{ $s->nis }}</td>
                        <td>{{ $s->jenis_kelamin }}</td>
                        <td>{{ $s->kelas }}</td>
                        <td>{{ $s->jurusan }}</td>
                        <td>
                            <a href="/siswa/{{ $s->id }}/edit" class="badge badge-primary ">Edit</a>
                            <a href="/siswa/{{ $s->id }}" class="badge badge-info">detail</a>
                        </td>
                    </tr>
                    @empty
                    <h3>No Data Exist!</h3>
                    @endforelse
                </tbody>
            </table>

        </div>
    </div>
</div>
@endsection
Ketiga untuk view show siswa yang akan digunakan untuk menampilkan data siswa penuh perorangan berdasarkan id secara lebih detail dalam bentuk card.
@extends('layout/main')
@section('title', 'Detail Siswa | SMK Negeri 4 Bandung')


@section('container')
<div class="container">
    <div class="row">
        <div class="col-8">

            <h1 class="mt-4">Detail Siswa</h1>

            <hr class="mb-3">

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{ $siswa->nama_lengkap }}
                        @if ($siswa->jenis_kelamin === 'L')
                        <label class="btn btn-primary float-right">{{ $siswa->jenis_kelamin }}</label>
                        @else
                        <label class="btn btn-danger float-right">{{ $siswa->jenis_kelamin }}</label>
                        @endif
                    </h5>
                    <h6 class="card-subtitle mb-2 text-muted">{{ $siswa->nis }}</h6>
                    <p class="card-text text-info">{{ $siswa->kelas }}</p>
                    <p class="card-text">{{ $siswa->jurusan }}</p>
                    {{-- btn btn-outline-info --}}
                    <a href="/siswa" class="card-link">Kembali</a>
                    <a href="/siswa/{{ $siswa->id }}/edit" class="btn btn-outline-primary float-right">Edit</a>
                    <form action="/siswa/{{ $siswa->id }}" method="POST" class="d-inline">
                        @csrf
                        @method('delete')
                        <button type="submit" class="btn btn-outline-danger float-right mr-2"
                            onclick="return confirm(`Apakah anda yakin akan menghapus siswa ini?`)" ;>Delete</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection
Keempat untuk view create siswa yang akan digunakan untuk menampilkan form tambah data siswa

@extends('layout/main')
@section('title', 'Form Tambah Data Siswa')


@section('container')
<div class="container">
    <div class="row">
        <div class="col-8">
            <h1 class="mt-4">Form Tambah Data Siswa</h1>
            <hr>

            <form method="POST" action="/siswa">
                @csrf
                <div class="form-group">
                    <label for="nis">NIS</label>
                    <input type="number" class="form-control
                                    
                    @error('nis')
                        is-invalid
                    @enderror    
                    
                    " id="nis" name="nis" value="{{ old('nis') }}">
                    <small id="nisHelp" class="form-text text-muted">We'll never share your nis with anyone
                        else.</small>
                    @error('nis')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="nama_lengkap">Nama</label>
                    <input type="text" class="form-control

                    @error('nama_lengkap')
                        is-invalid
                    @enderror
                    
                    " id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap') }}">
                    @error('nama_lengkap')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-row">
                    <div class="form-group col-sm-2 mt-3">
                        <label for="inputCity">Jenis Kelamin</label>
                    </div>
                    <div class="form-group col-md-3 mt-3">
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="lk" name="jenis_kelamin" class="custom-control-input" value="L">
                            <label class="custom-control-label" for="lk">Laki-laki</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="pr" name="jenis_kelamin" class="custom-control-input" value="P">
                            <label class="custom-control-label" for="pr">Perempuan
                            </label>
                        </div>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="kelas">Kelas</label>
                        <input type="text" class="form-control" id="kelas" name="kelas" value="{{ old('kelas') }}">
                    </div>
                    <div class="form-group col-md-5">
                        <label for="jurusan">Jurusan</label>
                        <select id="jurusan" class="form-control" name="jurusan">
                            <option selected disabled>✔ Pilih jurusan</option>
                            <option value="Rekayasa Perangkat Lunak">Rekayasa Perangkat Lunak ✓</option>
                            <option value="Teknik Komputer Jaringan">Teknik Komputer Jaringan ✓</option>
                            <option value="Teknik Audio Visual">Teknik Audio Visual ✓</option>
                            <option value="Multimedia">Multimedia ✓</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary my-5 float-right">Kirim Data</button>
            </form>


        </div>
    </div>
</div>
@endsection

Percobaan terhadap aplikasi 

Setelah melakukan banyak konfigurasi dan kodingan sekarang disini kita akan mengetest aplikasi yang telah kita buat untuk melihat performa dan juga kelancarannya.

Berikut merupakan hasilnya:

Pertama untuk menampilkan data siswa dalam bentuk hanya nama dan tombol klik detail.

Kedua untuk menampilkan data siswa dalam bentuk tabel penuh.

Ketiga untuk menampilkan data siswa perorangan berdasarkan id secara detail dalam bentuk card


Keempat untuk menampilkan form tambah data siswa.


Kelima percobaan dalam menambahkan data siswa.


Error karena terdeteksi oleh form validation dalam menambahkan data siswa


Coba lagi dengan inputan yang sesuai dengan aturan





Keenam percobaan dalam menambahkan data siswa dua kali.



Mungkin cukup sekian materi pengelolaan data (Create dan Read) pada PHP-nya. Cukup singkat materinya dimulai dari pengenalan hingga pengimplementasiannya. Semoga sobat-sobat codingers paham, mengerti dan menguasainya. 

Mohon maaf jika terdapat tutur kata yang tidak berkenan dihati anda. Mohon maaf atas semua kesalahan yang telah saya perbuat, tolong berikan koreksi mengenai bagian mana yang salah/kurang pas dalam postingan ini, untuk pengembangan lebih baik kedepannya.

Sekian, saya ucapkan terimakasih banyak atas waktu yang telah diluangkan, saya ucapkan kembali mohon maaf atas segalanya kesalahan. 

Wabilahiltaufik walhidayah,
Wassalamu'alaikum warahmatullahi wabarakatuh
Keep Coding Stay Awesome

0 Response to "Create & Read pada PHP - Praktikum 15"

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel