Validasi, Create, Update dan Delete data pada Laravel 10 #7

Selanjutnya silahkan buka file StudentsController.php, tambahkan method create seperti berikut :

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

Penjelasan

public function create()

• public menunjukkan bahwa method atau fungsi ini dapat diakses dari mana saja, baik dari dalam class yang sama, dari class turunan, atau dari luar class.
• function adalah kata kunci dalam PHP untuk mendefinisikan suatu fungsi atau metode.
• create adalah nama dari fungsi ini. Biasanya, dalam konteks MVC (Model-View-Controller), metode create digunakan untuk menampilkan tampilan (view) yang berisi form untuk membuat (creating) entitas baru, dalam hal ini ‘student’.

return view('students/create');

• return adalah kata kunci dalam PHP yang digunakan untuk mengeluarkan nilai dari suatu fungsi.
• view adalah sebuah fungsi bantuan dalam Laravel yang digunakan untuk mengembalikan tampilan tertentu.
• 'students/create' adalah nama dari tampilan yang akan dikembalikan. Dalam struktur folder tampilan Laravel, ini biasanya berarti akan mengembalikan tampilan yang berada pada file resources/views/students/create.blade.php.

Secara keseluruhan, fungsi ini berarti: “Saat fungsi create ini dipanggil, maka kembalikan tampilan yang berada pada resources/views/students/create.blade.php“. Biasanya dipanggil saat ada HTTP GET request ke endpoint '/students/create', seperti yang telah didefinisikan di rute.

Selanjutnya kita akan membuat 1 buah tombol yang akan mengarahkan pada file create.blade.php pada folder students. Buka file students.blade.php lalu tuliskan coode sebagai berikut :

                    <button type="button " class="btn btn-sm btn-primary" onclick="window.location='{{ url('students/create') }}'" >
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> Add New Data
                    </button>

Penjelasan :

Kode tersebut merupakan kode HTML yang digunakan untuk membuat tombol. Berikut penjelasannya dalam Bahasa Indonesia:

<button type="button" class="btn btn-sm btn-primary" onclick="window.location='{{ url('students/create') }}'">

• <button> adalah elemen HTML yang digunakan untuk membuat tombol.
• type="button" atribut ini menentukan tipe tombol.
• class="btn btn-sm btn-primary" adalah kelas CSS yang dberikan pada tombol tersebut. Salah satunya adalah kelas dari Bootstrap, sebuah kerangka kerja CSS.
• onclick="window.location='{{ url('students/create') }}'" adalah event JavaScript yang dijalankan ketika tombol di-klik. Fungsinya adalah mengarahkan pengguna ke URL yang didefinisikan oleh url('students/create').

<i class="fa fa-plus-circle" aria-hidden="true"></i> Add New Data

• <i class="fa fa-plus-circle" aria-hidden="true"></i> adalah ikon dari font awesome. aria-hidden="true" berarti elemen ini tidak perlu diakses oleh teknologi asistif seperti pembaca layar.
• Add New Data adalah teks yang akan muncul di tombol.

</button> adalah tag penutup dari elemen button.

Jadi, secara keseluruhan, kode tersebut berarti: “Buat sebuah tombol. Saat tombol ini di-klik, pengguna akan diarahkan ke URL yang didefinisikan oleh url('students/create'). Tampilkan ikon plus dan kata-kata ‘Add New Data’ di tombol tersebut.”

Dan hasilnya kita sekarang mempunyai halaman baru yaitu Create Data Students seperti gambar dibawah ini :

Selanjutnya kita akan menambahkan form inputan untuk halaman Create Data Students, buka file create.blade.php, lalu lengkapi code menjadi seperti berikut ini :

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create Data Students') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-3">
                <div class="card">
                    <div class="card-header">
                        <button type="button " class="btn btn-sm btn-warning" onclick="window.location='{{ url('students') }}'" >
                            <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> Back
                        </button>
                    </div>
                    <div class="card-body">
                        <form action="{{ url('students') }}">
                            @csrf
                            <div class="row mb-2">
                                <label for="txtid" class="col-sm-2 col-form-label">Id Students</label>
                                <div class="col-sm-2">
                                  <input type="text" class="form-control form-control-sm" id="txtid" name="txtid">
                                </div>
                            </div>
                            <div class="row mb-2">
                                <label for="txtfullname" class="col-sm-2 col-form-label">Full Name</label>
                                <div class="col-sm-10">
                                  <input type="text" class="form-control form-control-sm" id="txtfullname" name="txtfullname">
                                </div>
                            </div>
                            <div class="row mb-2">
                                <label for="txtgender" class="col-sm-2 col-form-label">Gender</label>
                                <div class="col-sm-2">
                                  <select class="form-select form-select-sm" name="txtgender" id="txtgender">
                                    <option value="" selected>Choose</option>
                                    <option value="M">Male</option>
                                    <option value="F">Female</option>
                                  </select>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <label for="txtemail" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control form-control-sm" id="txtemail" name="txtemail">
                                </div>
                            </div>
                            <div class="row mb-2">
                                <label for="txtphone" class="col-sm-2 col-form-label">Phone Number</label>
                                <div class="col-sm-2">
                                    <input type="text" class="form-control form-control-sm" id="txtphone" name="txtphone">
                                </div>
                            </div>
                            <div class="row mb-4">
                                <label for="txtaddress" class="col-sm-2 col-form-label">Address</label>
                                <div class="col-sm-10">
                                  <textarea class="form-control form-control-sm" name="txtaddress" id="txtaddress" cols="30" rows="10"></textarea>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <label for="" class="col-sm-2 col-form-label"></label>
                                <div class="col-sm-10">
                                  <button type="submit" class="btn btn-sm btn-warning bg-warning"><i class="fa fa-floppy-o" aria-hidden="true"></i>   Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Penjelasan :

1. <form action="{{ url('students') }}">: Ini adalah awal dari formulir HTML. action="{{ url('students') }}" berarti bahwa data yang dikirimkan melalui formulir ini akan dikirimkan ke URL yang ditentukan oleh sintaks template Laravel, dalam hal ini: ‘students’.
2. @csrf: Ini adalah direktif template Laravel untuk penanganan token CSRF (Cross-Site Request Forgery). Laravel secara otomatis menghasilkan token ini untuk setiap sesi pengguna untuk mencegah serangan CSRF.
3. <div class="row mb-2"> <label for="txtid" class="col-sm-2 col-form-label">Id Students</label>: Blok kode ini membuat sebuah baris baru dalam layout yang berisi label untuk elemen input. Label ini berkaitan dengan input ID siswa.
4. <input type="text" class="form-control form-control-sm" id="txtid" name="txtid">: Ini adalah elemen input teks dalam formulir. Elemen ini diformat menggunakan kelas Bootstrap dan disesuaikan untuk ukuran kecil. Ini disebut ‘txtid’ baik dalam atribut id dan name.
5. <div class="row mb-2"> <label for="" class="col-sm-2 col-form-label"></label>: Ini mirip dengan baris dan label sebelumnya, namun dalam kasus ini tidak ada teks dalam label dan tidak ada atribut ‘for’ yang ditentukan.
6. <button type="submit" class="btn btn-sm btn-warning bg-warning"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button>: Ini adalah tombol ‘Submit’ dalam formulir yang, saat diklik, akan mengirimkan data yang ditentukan dalam formulir ke URL yang ditentukan dalam atribut ‘action’. Tombol ini juga memiliki ikon disimpan (disket) sebelum teks.

Dan hasil nya adalah sebagai berikut :