Laravel: 1. Read

 Sekarang kita akan Mencoba menampilkan data yang kita akan buat didatabase. Nah, data inilah yang akan kita otak atik seperti mengupdate dan mendeletenya.

Template dan halaman pada tutorial CRUD ini akan memakai template dan halaman dari artikel Templating sebelumnya. Pastikan kalian sudah mengikuti tutorial sebelumnya ya..

Sebelum kita menampilkan data dari database, kita harus punya databasenya terlebih dahulu. Sekarang kalian buka XAMPP kalian, lalu aktifkan Apache dan MySql.

Jika sudah, silahkan buka browser kalian lalu ketikkan:

http://localhost/phpmyadmin/

Maka muncullah tampilan seperti ini

Nah, di samping kiri, kalian klik new untuk membuat databasenya.

Samakan dengan gambar dibawah

Note: secara otomatis nama databasenya akan berubah menjadi huruf kecil semua.

Setelah itu klik create, dan tarraa… databasenya sudah terbuat.

Setelah itu buatlah table dengan nama students lalu ikuti pengaturan seperti dibawah, lalu klik go.

Kemudian kita akan buat attribute tablenya, untuk strukturnya seperti berikut

CREATE TABLE `daftarsiswa`.`students` ( `id_siswa` INT NOT NULL AUTO_INCREMENT , `nama_siswa` VARCHAR(100) NOT NULL , `jurusan` VARCHAR(100) NOT NULL , `angkatan` INT NOT NULL , `kelas` VARCHAR(100) NOT NULL , PRIMARY KEY (`id_siswa`)) ENGINE = InnoDB;

Jika sudah mengisi attribute pada tabel nya maka scroll kebawa dan klik save.

jika sudah di save maka akan muncul struktur tabel nya.

Setelah itu kalian tinggal masukkan data siswa dengan cara klik menu Insert dan kemudian kalian bisa masukkan data nya (saran saya untuk id_siswa dikosongkan saja karena akan otomatis menambah angkanya sendiri) dan ketika sudah selesai kalian bisa klik go agar datanya masuk ke database.

Samakan isinya dengan gambar berikut

Klik go, kita sudah berhasil memasukan 1 data kedalam database, sekarang coba kalian liat browse, maka data yang kita masukkan tadi akan terlihat.

Sekarang kita akan menghubungkan database yang sudah kita buat dengan project yang berada pada vscode, kita buka kembali project kita di vscode.Setelah itu pergi ke folder yang kita buat yaitu LATIHAN dan edit file .env untuk menyambungkan antara proyek Laravel dan database MySQL.

edit bagian yang saya lingkari dan sesuaikan pengaturan dengan yang ada di gambar atas.

Karena saya tidak mengatur username dan password xampp saya, jadinya secara default menggunakan username root dan tanpa password.

Sekarang kita akan menampilkan data yang sudah kita buat. Pertama, kita mulai dengan membuat route untuk menampilkan data students. Nah, untuk route-nya sendiri diubah karena halaman khusus untuk pengolahan data berbeda route nya dari halaman yang tidak melakukan pengolahan data.

routes →web.php

ubah routenya , yang tadinya seperti ini

Route::get('daftar', function () {
return view('daftar');
});

menjadi

Route::get('/daftar', 'App\Http\Controllers\DaftarController@index');

nah, disini kita dapat menjalankan method index() pada controller DaftarController ketika route ‘/daftar‘ nya di akses.

Setelah merubah route nya, kita buat controller DaftarController.php.

kalian bisa ke View →Terminal untuk membuka terminalnya

Kalian bisa mengetikkan perintah dibawah untuk membuat controller

php artisan make:controller DaftarController -r

ketika kita menggunakan -r atau disebut dengan resource, maka secara otomatis Laravel akan membuatkan method default dari Laravel . Nah, disini kita akan menulis isi dari methodnya. sekarang buka app →Http →Controllers →BooksController.php , lalu isikan syntax berikut dibawah namespace App\Http\Controllers;

use Illuminate\Support\Facades\DB;

Mengapa harus menulis syntax tersebut? Karena kita menggunakan query builder Laravel

Lalu kemudian isi codingan dibawah pada method index() agar kita dapat mengambil data dari table “students”

public function index()
{
// mengambil data dari table students
$students = DB::table('students') -> get();
// mengirim data students ke view daftar
return view('daftar', ['students' => $students]);
}

Fungsi get() berguna untuk mengambil data dari table yang dipilih sehingga data yang diambil akan disimpan di variabel $students.

Nah sekarang kita ke halaman daftar.blade.php untuk mengubah bagian tabel.

resources →views →daftar.blade.php

nah pada view daftar.blade.php, kita hanya menampilkan datanya mengunakan perulangan foreach() dan lakukan pengeditan tulisan didalam <tbody>

<tbody>
<?php $i = 1; ?>@foreach($students as $student)
<tr>
<td class="text-center">{{$loop->iteration}}</td>
<td>{{$student->nama_siswa}}</td>
<td>{{$student->jurusan}}</td>
<td class="text-center">{{$student->angkatan}}</td>
<td>{{$student->kelas}}</td>
<td>
<a href="{{url('/edit')}" class="btn btn-xs btn-primary">Edit</a> 
<a href="#" class="btn btn-xs btn-danger" onclick="return confirm('yakin?');">Delete</a>
</td>
</tr>
@endforeach
</tbody>

Kemudian sekarang kalian akses melalui terminal vs-Code untuk hasilnya. tuliskan ini didalam terminalnya

php artisan serve

Lalu buka browser kalian dan ketikkan

http://localhost:8000/daftar

dan taraa!!!!, jika berhasil maka hasilnya akan seperti ini

Kita sudah berhasil menampilkan data yang sudah kita buat pada database ke halama daftar di project kita, tetapi pembuatan data ini masih dilakukan secara manual dengan memasukannya langsung ke phpmyadmin, kita ingin membuat data atau menambahkan data melalui halaman tambah, bagaimana caranya? tentu saja kita akan membuat fungsi Create pada artikel selanjutnya…