Sulhi.id

Membuat Pendaftaran Siswa Baru (PSB) dengan Laravel (Bagian Pertama)

Pada tutorial kali ini, kita akan coba membuat Penfataran Siswa Baru (PSB) dengan laravel versi 5.7. Meskipun pendaftaran online ini cukup sederhana, tetap saja pada pelaksanaannya dibutuhkan pembahasan yang agak panjang. Oleh karena itu untuk mudah dipahami tutorial ini dibuat berseri.

Pada bagian pertama ini, kita akan membahas tentang Migration, membuat table dan memodifikasi table migrasi. Adapun Desain aplikasi PSB ini, yaitu:

1. Calon siswa dapat melakukan pendaftaran secara online.
2. Calon siswa dapat login ke aplikasi setelah berhasil melakukan pendaftaran.
3. Calon siswa dapat mengedit biodatanya.
4. Calon siswa dapat mengupload dokumen-dokumen yang dipersyaratkan.
5. Calon siswa dapat memprint out bukti pendaftaran.
6. Siswa dapat melihat status kelulusan,
7. Login dengan multiuser dengan hak akses.
8. Pemisahan antara dashboard Admin dan calon Siswa.

Membuat Project dan Virtual Host PSB Online

Terlebih dahulu silakan buat langkah-langkah berikut:

1. 1. Buat project PSB dengan nama psb-online (laravel new psb-online).
   2. Buat virtual host dengan nama domain lokal http://psb-online.
   3. Buat database dengan phpMyAdmin dengan nama database misalnya psb-online.
   4. Setting koneksi database pada file .env.
   5. Buat scaffolding auth (php artisan make:auth).
   6. Lakukan migrasi database (php artisan migrate).
   7. Edit file welcome.blade.php dengan mengganti kata Laravel menjadi PSB Online.

Silakan buka kembali tutorial sebelumnya jika masih bingung untuk melakukan langkah-langkah di atas.

Ketika proses migrasi mengalami error (point no. 6) seperti gambar di bawah ini,

Ternyata error terjadi karena laravel versi terbaru membuat perubahan pada default character set di database, dimana sekarang menggunakan utf8mb4 yang sudah mendukung untuk penyimpanan emoji. Ini mempengaruhi aplikasi yang baru dan jika MySQL yang digunakan adalah MySQL versi 5.7.7 atau lebih tinggi maka error tersebut tidak akan muncul.

Solusinya adalah dengan menambahkan beberapa baris pada file AppServiceProvider.php yang terletak pada folder app/Providers/AppServiceProvider.php. Edit file tersebut dan tambahkan kode use Illuminate\Support\Facades\Schema; pada baris ke-6 dan kode Schema::defaultStringLength(191); pada baris ke-18, sehingga keseluruhan kode seperti gambar berikut:

Sebelum melakukan migrasi ulang, terlebih dahulu kita harus mendelete table yang sudah dimigrasi dengan perintah php artisan migrate:rollback. Jika printah rollback masih error, maka drop tabel-tabel tersebut melalui phpMyAdmin. Setelah itu lakukan migrasi ulang (php artisan migrate).

Untuk point nomor 7, ganti nama Laravel menjadi PSB Online pada baris kode ke-84.

Output dari langkah-langkah tersebut  seperti gambar berikut:

Schema Database

Database untuk PSB Online akan menggunakan 2 tabel yaitu tabel Users dan table Biodata. Berikut schemanya:

Untuk tabel Users, kita gunakan tabel bawaan dari laravel. Tabel tersebut kita modifikasi dengan menghilangkan field (kolom) name yang nantinya field name dibuat pada tabel Biodata dengan nama field nama. Selanjutnya pada tabel Users ditambahkan field baru dengan nama level. Kolom level diperlukan untuk feature login multiuser di mana nilai 0 berarti untuk level Admin dan nilai 1 untuk level siswa (pendaftar).

Silakan edit file migrasi teble users yang terletak pada folder database->migrations-> 2014_10_12_000000_create_users_table.php, sehingga keseluruhan kode sebagai berikut:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->tinyInteger('level');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Untuk membuat file migrasi table Biodata sekaligus Model Biodata, lakukan perintah artisan dengan perintah :

php artisan make:model Biodata --migration

Perintah di atas, Laravel akan membuat 2 file yaitu file Model Biodata.php yang terletak pada folder app/Biodata.php dan file migrasi 2018_12_06_094815_create_biodatas_table.php yang terletak pada folder database/migrations/2018_12_06_094815_create_biodatas_table.php.

File Model Biodata

File Migrasi Biodata

Pada baris kode ke-16 file migrasi biodata terlihat nama tablennya adalah biodatas bukan biodata, hal ini dikarenakan sudah menjadi konvensional bahwa penamaan tabel berupa jamak dengan penambahan huruf  s pada akhir kata. Agar nama tabel nanti tetap biodata, maka ubah nama biodatas menjadi biodata pada baris ke-16 dan baris ke-29.

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateBiodatasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('biodata', function (Blueprint $table) {
            $table->increments('id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('biodata');
    }
}

Kemudian tambahkan pula kode pada file Model Biodata.php dengan kode  protected $table = 'biodata'; pada baris ke-9.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Biodata extends Model
{
	protected $table = 'biodata';
}

Penambahan Kolom Table Biodata

Sesuai dengan schema database PSB Online, kita akan menambahkan 11 kolom pada tabel biodata, yaitu nama, nis, tempat_lahir, tanggal_lahir, nem, no_ijazah, nama_ortu, pekerjaan_ortu, telp, alamat, dan user_id. Berikut kode lengkap migrasi biodata:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateBiodatasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('biodata', function (Blueprint $table) {
            $table->increments('id');
            $table->string('nama', 100);    
            $table->string('nis', 45);    
            $table->string('tempat_lahir', 45);    
            $table->date('tanggal_lahir');    
            $table->string('nem', 45);    
            $table->string('no_ijazah', 45);    
            $table->string('nama_ortu', 100);    
            $table->string('pekerjaan_ortu', 100);    
            $table->string('telp', 45);    
            $table->longText('alamat');    
            $table->timestamps();

            $table->integer('user_id')->unsigned();   
            $table->foreign('user_id')->references('id')->on('users')->onUpdate('cascade')->onDelete('cascade'); 

        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('biodata');
    }
}

Relasi Tabel

Pada table Biodata baris kode ke-30 dan ke-31 merupakan kode relasi untuk menghubungkan table Biodata dengan tabel Users di mana kolom user_id adalah foreign key terhubung dengan id pada tabel Users. Selain menambahkan kode tersebut pada tabel Biodata, kita juga harus mendefinisikan relasi pada file Model User dan Model Biodata. Penjelasan detail tentang relasi di Laravel dapat dipelajari pada official dokumentasi Laravel.

Silakan buka file model User.php yang terletak pada folder app/User.php dan edit seperti kode berikut:

<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];


    public function Biodata()
    {
        return $this->hasOne('App\Biodata');
    } 

}

Pada kode baris ke-32 sampai ke-35 merupakan kode tambahan yang berfungsi untuk mendefinisikan bahwa terdapat relasi antara tabel Users dengan tabel Biodata dengan relasi hasOne yaitu relasi One to One.

Terakhir buka file model Biodata.php yang terletak pada app/Biodata.php dan sesuaikan dengan kode berikut:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Biodata extends Model
{
	protected $table = 'biodata';
	
	public function User()
	{
		return $this->belongsTo('App\User');
	}  	
}

Sekarang saatnya melakukan migrasi, tapi karena sebelumnya pernah melakukan migrasi dan memodifikasi migrasi user, maka kita harus membatalkan migrasi tersebut dengan cara me-rollback migrasi. Setelah itu baru migrasi ulang.

php artisan migrate:rollback
php artisan migrate

Struktur Table Biodata

---