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.
|
| 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:cache3. 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.
 |
| 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.
Migration: https://laravel.com/docs/7.x/migrations
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
 |
| 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 😁
Mantap bang
ReplyDelete