CRUD Laravel Part 1: Menampilkan Data dari Database

Share:

Halo semuanya kembali lagi di sahretech. Baiklah pada kesempatan kali ini saya akan mengulas cara menampilkan data dari database dalam tutorial CRUD laravel yang dibahas dalam 4 artikel berbeda. Untuk mengikuti tutorial kali ini disyaratkan mengerti pemrograman php dan konsep MVC. Meski begitu, saya akan mencoba mengulas artikel ini dengan sebaik mungkin, dengan harapan tutorial yang diberikan dapat diikuti oleh pemula sekalipun. Ayo ikuti tutorialnya berikut ini.



1. Install Laravel

Sebelum mengikuti tutorial kali ini saya harap kalian telah menginstall laravel terlebih dahulu, kalian boleh menginstall laravel versi 5, 6, atau 7 sesuai dengan versi php yang kalian miliki. Untuk lokasi dan nama projectnya bebas kalian tentukan sendiri. 

Untuk mempersingkat tulisan ini, cara instalasi laravel tidak saya bahas disini. Dan bagi yang baru pertama menggunakan laravel dan belum paham cara menginstall laravel silahkan ikuti tutorial yang saya buat di link berikut ini https://www.sahretech.com/2019/10/cara-install-laravel-di-localhost-server.html


2. Setting Database

Buatlah sebuah database baru dengan nama latihan_crud_laravel dan setelah database berhasil dibuat lakukan setting database pada file .env, sesuaikan nama database, username database dan password database kalian seperti gambar di bawah ini.

sahretech
Setting file .env



Karena kita baru saja mengubah file .env, kalian perlu menjalankan perintah berikut ini agar setting konfigurasi file .env menjadi yang terbaru dan tidak terjadi error saat aplikasi dijalankan. Buka terminal atau CMD lalu masuk ke dalam directory project yang kita buat saat ini.



php artisan config:cache


3. Membuat Model dan Migration

Pertama buka terminal atau CMD, lalu masuk ke dalam directory project yang kita buat saat ini. Kemudian jalankan perintah berikut ini untuk membuat sebuah file model dengan nama Post dan Migration post.



php artisan make:model Post -m


Buka file model yang baru kita buat sebelumnya di dalam folder App/Post.php lalu edit file tersebut seperti script yang ada di bawah ini



<?php namespace App; use Illuminate\Database\Eloquent\Model; class Post extends Model { protected $fillable = [ 'title', 'content' ]; }


Buka file Migration yang baru kita buat sebelumnya di dalam folder database/migrations/2020_12_10_002025_create_posts_table data lalu edit seperti script yang ada di bawah ini.



<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreatePostsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('posts', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('content'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); } }

File migration yang baru kita edit di atas digunakan untuk membuat struktur tabel pada database. Sehingga kita dapat membuat tabel tanpa bersentuhan langsung dengan si databasenya. Untuk membuat tabel kita perlu menggunakan   $table->  lalu diikuti dengan type datanya dan nama kolomnya


Selanjutnya kalian perlu menjalankan perintah berikut ini agar file migration yang kita buat sebelumnya menjadi tabel di dalam database.



php artisan migrate

Selanjuntnya kalian coba cek apakah ada tabel yang berhasil di buat di dalam database latihan_crud_laravel. Jika berhasil, silahkan kalian masukkan beberapa data ke dalam tabel post, dan jika gagal coba untuk mengulangi tutorial di atas dengan hati-hati.

sahretech
Hasil migrasi laravel




Sampai tahap ini setting database dan tabel sudah selesai kita lakukan. Dan bagi kalian yang masih penasaran dengan fitur migration dan model laravel saya sarankan untuk membaca dokumentasi resmi laravel di link berikut ini. 




4. Membuat Controller

Buatlah sebuah controller dengan menjalankan perintah berikut ini



php artisan make:controller PostController

Lalu buka file controller yang baru kita buat di dalam folder app/Http/Controllers/PostController.php lalu edit file tersebut dengan script yang ada di bawah ini. 



<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Post; class PostController extends Controller { public function index(){ $post = Post::all(); return view('index')->with('post', $post); } }

File controller berfungsi sebagai pusat logic aplikasi. Dimana dia akan mengatur aliran data yang dikirm dari model dan ditampilkan oleh view ataupun sebaliknya.

  $post  variabel ini digunakan untuk mengambil seluruh data yang diambil dari tabel post.
  return view('')  digunakan untk mengarah ke halaman view, filenya berada di dalam folder resource
 ->with('post', $post);  digunakan untuk memparsing/mengirim data $post dari controller ke view




5. Membuat View Tampil Data

Selanjuntya buatlah sebuah file baru dengan nama index.blade.php di dalam folder resources/views lalu isi file tersebut dengan script yang ada di bawah ini.



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>LaraPost</title> {{-- import file bootstrap --}} <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> </head> <body> <br> <div class="container"> <nav class="navbar navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand" href="#"> <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> <b> LaraPost</b> </a> </div> </nav> <br> <div class="col-12"> <div class="row"> @foreach ($post as $item) <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title">{{ $item->title }}</h5> <p class="card-text">{{ substr($item->content, 0, 100) }}</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <br> </div> @endforeach </div> </div> </div> </body> </html>

Blade adalah model templating yang dibuat oleh laravel, fungsinya Sama seperti tampilan html pada umumnya, kalian bebas memasukkan tag html apa saja, kalian juga tidak perlu menambahkan syntax 
 <?php ?>  dan sebagai gantinya kalian bisa menggunakan tanda ini   {{ }} 

Di dalam laravel, kita tinggal menggunakan syntax  foreach($post as $item)  untuk melakukan looping data yang kita kirimkan dari controller sebelumnya, dan untuk menampilkan datanya sesuai kolom yang ada di tabel, kalian tinggal menggunakan  $item->title 



6. Membuat Routing

Langkah terakir, bukalah file web.php yang berada di dalam file routes. Lalu tambahkan script di bawah ini.



Route::get('/post', 'PostController@index');


Script di bawah ini berfungsi untuk mengatur akses aplikasi. Dengan menggunakan routing, kita akan diarahkan untuk mengakses file controller dan fungsinya lalu dilanjutkan ke file view.

Untuk melihat hasil akhirnya, jalankan perintah berikut ini untuk menyalakan local server.



php artisan serve

Lalu kalian coba akses halaman url berikut ini http://127.0.0.1:8000/post, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini

sahretech
Hasil Akhir


Di part 1 ini kita telah belajar cara membuat aplikasi sederhana yang menampilkan data dari database. Dimana kita juga sudah memainkan konsep MVC disini. Model digunakan untuk mengatur data di dalam database. Controller digunakan untuk mengatur logic aplikasi. Dan View digunakan untuk menampilkan hasilnya.


Di tutorial selanjuntya kita akan membuat fungsi insert data, karena proses instalasi, setting database, model dan migration telah kita lakukan disini, selanjutnya kita tinggal menambah fungsi di dalam PostController, membuat view tambah dan routing ke dalam fungsi controller.



Sekian tutorial CRUD Laravel Part 1: Menampilkan Data dari Database. Semoga artikel ini bermanfaat bagi kalian semua, bagi kalian yang masih kesulitan dengan tulisan saya di atas silahkan tanyakan di kolom komentar di bawah ini ya, mari kita diskusikan bersama. Sampai jumpa di tutorial pemrograman seru lainnya. Happy Coding 😁


No comments

Kalo baca, tolong kasih komentar dong!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik