Laravel, sebuah framework PHP yang elegan dan powerful, menjadi pilihan populer bagi para developer web. Versi terbarunya, Laravel 9, menawarkan berbagai fitur baru dan peningkatan performa yang signifikan. Nah, jika kamu seorang pemula yang ingin belajar Laravel 9, membangun sebuah aplikasi blog sederhana adalah proyek yang sangat ideal. Artikel ini akan memandumu langkah demi langkah dalam membangun contoh project sederhana dengan Laravel 9: aplikasi blog sederhana. Kita akan membahas mulai dari persiapan hingga implementasi fitur-fitur dasar yang penting. Mari kita mulai!
1. Persiapan Awal: Instalasi Laravel 9 dan Konfigurasi Dasar
Sebelum memulai contoh project sederhana dengan Laravel 9 ini, pastikan kamu sudah memiliki beberapa hal berikut:
- PHP >= 8.0: Laravel 9 membutuhkan PHP versi 8.0 atau lebih tinggi.
- Composer: Package manager untuk PHP.
- Node.js dan npm (optional): Jika kamu ingin menggunakan fitur-fitur frontend seperti JavaScript dan CSS.
- Database: Kamu bisa menggunakan MySQL, PostgreSQL, atau database lain yang didukung oleh Laravel.
Setelah semua persiapan terpenuhi, kita bisa mulai dengan instalasi Laravel 9. Buka terminal atau command prompt dan jalankan perintah berikut:
composer create-project laravel/laravel blog-sederhana
cd blog-sederhanaPerintah ini akan membuat project Laravel baru dengan nama “blog-sederhana”. Setelah proses instalasi selesai, masuk ke direktori project dengan perintah cd blog-sederhana.
Selanjutnya, kita perlu melakukan konfigurasi database. Buka file .env di root direktori project dan sesuaikan variabel-variabel berikut sesuai dengan konfigurasi database kamu:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog_sederhana
DB_USERNAME=root
DB_PASSWORD=Pastikan untuk membuat database dengan nama blog_sederhana terlebih dahulu di server database kamu. Setelah itu, jalankan perintah migrasi untuk membuat tabel-tabel yang dibutuhkan oleh Laravel:
php artisan migrateDengan langkah-langkah ini, kita sudah berhasil melakukan instalasi dan konfigurasi dasar Laravel 9 untuk contoh project sederhana dengan Laravel 9 kita.
2. Membuat Model dan Migrasi untuk Postingan Blog
Langkah selanjutnya dalam contoh project sederhana dengan Laravel 9: aplikasi blog sederhana ini adalah membuat model dan migrasi untuk entitas “Postingan”. Postingan akan menyimpan informasi tentang setiap artikel di blog kita.
Jalankan perintah berikut untuk membuat model dan migrasi secara bersamaan:
php artisan make:model Post -mPerintah ini akan membuat dua file: app/Models/Post.php (model Post) dan database/migrations/YYYY_MM_DD_HHMMSS_create_posts_table.php (migrasi untuk tabel posts).
Buka file migrasi database/migrations/YYYY_MM_DD_HHMMSS_create_posts_table.php dan tambahkan kolom-kolom berikut ke skema tabel posts:
<?php
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('slug')->unique();
$table->text('content');
$table->string('image')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
};Kita menambahkan kolom title, slug, content, dan image untuk menyimpan informasi tentang judul, URL unik, isi artikel, dan gambar artikel. Kolom slug digunakan untuk membuat URL yang SEO-friendly.
Setelah mengubah file migrasi, jalankan perintah migrasi lagi untuk membuat tabel posts di database:
php artisan migrateSekarang, buka file model app/Models/Post.php dan tambahkan properti $fillable untuk menentukan kolom-kolom mana yang boleh diisi secara massal (mass assignment):
<?php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title',
'slug',
'content',
'image',
];
}Dengan ini, kita sudah berhasil membuat model dan migrasi untuk postingan blog dalam contoh project sederhana dengan Laravel 9 kita.
3. Membuat Controller untuk Mengelola Postingan
Selanjutnya, kita perlu membuat controller untuk mengelola postingan blog. Controller akan menangani logika untuk menampilkan, membuat, mengedit, dan menghapus postingan.
Jalankan perintah berikut untuk membuat controller:
php artisan make:controller PostControllerPerintah ini akan membuat file app/Http/Controllers/PostController.php. Buka file tersebut dan tambahkan method-method berikut:
index(): Menampilkan daftar semua postingan.create(): Menampilkan form untuk membuat postingan baru.store(): Menyimpan postingan baru ke database.show(): Menampilkan detail sebuah postingan.edit(): Menampilkan form untuk mengedit postingan.update(): Memperbarui postingan di database.destroy(): Menghapus postingan dari database.
Berikut adalah contoh implementasi dari beberapa method tersebut:
<?php
namespace AppHttpControllers;
use AppModelsPost;
use IlluminateHttpRequest;
use IlluminateSupportStr;
class PostController extends Controller
{
public function index()
{
$posts = Post::latest()->paginate(10); // Menampilkan 10 postingan per halaman
return view('posts.index', compact('posts'));
}
public function create()
{
return view('posts.create');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required|max:255',
'content' => 'required',
'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$imagePath = null;
if ($request->hasFile('image')) {
$imagePath = $request->file('image')->store('public/images');
}
Post::create([
'title' => $request->title,
'slug' => Str::slug($request->title),
'content' => $request->content,
'image' => $imagePath,
]);
return redirect()->route('posts.index')->with('success', 'Postingan berhasil ditambahkan.');
}
public function show(Post $post)
{
return view('posts.show', compact('post'));
}
}Perhatikan penggunaan Str::slug() untuk membuat slug dari judul postingan. Slug akan digunakan untuk membuat URL yang SEO-friendly. Juga, perhatikan validasi input menggunakan $request->validate() untuk memastikan data yang masuk valid.
Kita juga menambahkan logika untuk menyimpan gambar jika diunggah. Gambar disimpan di direktori storage/app/public/images.
4. Membuat Routes untuk Akses Controller
Setelah membuat controller, kita perlu mendefinisikan routes untuk mengakses method-method di controller. Buka file routes/web.php dan tambahkan routes berikut:
<?php
use AppHttpControllersPostController;
use IlluminateSupportFacadesRoute;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::resource('posts', PostController::class);Route::resource('posts', PostController::class) akan membuat routes untuk semua method yang ada di PostController:
GET /posts: Menampilkan daftar postingan (index)GET /posts/create: Menampilkan form untuk membuat postingan (create)POST /posts: Menyimpan postingan baru (store)GET /posts/{post}: Menampilkan detail postingan (show)GET /posts/{post}/edit: Menampilkan form untuk mengedit postingan (edit)PUT /posts/{post}: Memperbarui postingan (update)DELETE /posts/{post}: Menghapus postingan (destroy)
5. Membuat Views untuk Menampilkan Data dan Form
Langkah selanjutnya dalam contoh project sederhana dengan Laravel 9: aplikasi blog sederhana ini adalah membuat views untuk menampilkan data dan form. Kita akan membuat views untuk menampilkan daftar postingan, menampilkan detail postingan, membuat postingan baru, dan mengedit postingan.
Buat direktori resources/views/posts untuk menyimpan views postingan. Kemudian, buat file-file berikut:
resources/views/posts/index.blade.php: Menampilkan daftar postingan.resources/views/posts/create.blade.php: Menampilkan form untuk membuat postingan.resources/views/posts/show.blade.php: Menampilkan detail sebuah postingan.resources/views/posts/edit.blade.php: Menampilkan form untuk mengedit postingan.
Berikut adalah contoh implementasi dari resources/views/posts/index.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Daftar Postingan</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Daftar Postingan</h1>
<a href="{{ route('posts.create') }}" class="btn btn-primary mb-3">Tambah Postingan Baru</a>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Judul</th>
<th>Aksi</th>
</tr>
@foreach ($posts as $post)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $post->title }}</td>
<td>
<a class="btn btn-info" href="{{ route('posts.show',$post->id) }}">Lihat</a>
<a class="btn btn-primary" href="{{ route('posts.edit',$post->id) }}">Edit</a>
<form action="{{ route('posts.destroy',$post->id) }}" method="POST">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Hapus</button>
</form>
</td>
</tr>
@endforeach
</table>
{!! $posts->links() !!}
</div>
</body>
</html>Contoh implementasi dari resources/views/posts/create.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Buat Postingan Baru</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Buat Postingan Baru</h1>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label for="title" class="form-label">Judul:</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Judul">
</div>
<div class="mb-3">
<label for="content" class="form-label">Isi:</label>
<textarea class="form-control" id="content" name="content" rows="5" placeholder="Isi"></textarea>
</div>
<div class="mb-3">
<label for="image" class="form-label">Gambar:</label>
<input type="file" class="form-control" id="image" name="image">
</div>
<button type="submit" class="btn btn-primary">Simpan</button>
<a class="btn btn-secondary" href="{{ route('posts.index') }}">Batal</a>
</form>
</div>
</body>
</html>Pastikan untuk mengimplementasikan views lainnya (show.blade.php dan edit.blade.php) sesuai dengan kebutuhan project.
6. Menguji Aplikasi Blog Sederhana
Setelah semua langkah di atas selesai, kita bisa menguji aplikasi blog sederhana kita. Jalankan server development Laravel dengan perintah berikut:
php artisan serveBuka browser dan kunjungi http://localhost:8000/posts. Kamu akan melihat daftar postingan (yang masih kosong karena belum ada data). Klik tombol “Tambah Postingan Baru” untuk membuat postingan pertama. Isi form dan simpan. Kamu akan kembali ke daftar postingan dan melihat postingan yang baru kamu buat.
Kamu bisa mencoba fitur-fitur lainnya seperti melihat detail postingan, mengedit postingan, dan menghapus postingan.
7. Optimalisasi SEO: Penerapan Slug dan Meta Deskripsi
Untuk meningkatkan SEO (Search Engine Optimization) dari contoh project sederhana dengan Laravel 9 kita, ada beberapa hal yang perlu diperhatikan:
- Penggunaan Slug: Kita sudah menggunakan
Str::slug()untuk membuat URL yang SEO-friendly dari judul postingan. Pastikan slug yang dihasilkan unik untuk setiap postingan. - Meta Deskripsi: Tambahkan meta deskripsi ke setiap halaman. Meta deskripsi adalah ringkasan singkat tentang isi halaman yang akan ditampilkan di hasil pencarian. Kamu bisa menambahkan meta deskripsi di dalam tag
<head>di setiap view:
<meta name="description" content="Deskripsi singkat tentang postingan ini.">Untuk halaman daftar postingan, kamu bisa membuat meta deskripsi dinamis yang berisi ringkasan tentang blog secara keseluruhan. Untuk halaman detail postingan, kamu bisa menggunakan excerpt (potongan pendek) dari isi postingan sebagai meta deskripsi.
- Judul Halaman: Pastikan setiap halaman memiliki judul yang unik dan relevan. Gunakan tag
<title>untuk mendefinisikan judul halaman. - Struktur Heading: Gunakan heading (
<h1>,<h2>,<h3>, dst.) untuk memstrukturkan konten secara logis. Gunakan tag<h1>hanya sekali per halaman untuk judul utama. Gunakan heading yang lebih kecil untuk subjudul.
8. Fitur Tambahan: Kategori Postingan dan Komentar
Untuk memperkaya contoh project sederhana dengan Laravel 9 ini, kita bisa menambahkan fitur-fitur tambahan seperti kategori postingan dan komentar.
- Kategori Postingan: Kita bisa membuat tabel
categoriesdan menghubungkannya dengan tabelpostsmenggunakan relasi one-to-many. Setiap postingan akan memiliki satu kategori, dan setiap kategori bisa memiliki banyak postingan. - Komentar: Kita bisa membuat tabel
commentsdan menghubungkannya dengan tabelpostsmenggunakan relasi one-to-many. Setiap postingan bisa memiliki banyak komentar.
Implementasi fitur-fitur ini akan melibatkan pembuatan model, migrasi, controller, dan views baru.
9. Keamanan: Proteksi Terhadap XSS dan CSRF
Keamanan adalah aspek penting dalam pengembangan web. Dalam contoh project sederhana dengan Laravel 9 ini, kita perlu memperhatikan beberapa hal untuk melindungi aplikasi kita dari serangan XSS (Cross-Site Scripting) dan CSRF (Cross-Site Request Forgery).
- XSS: Gunakan fungsi
e()(singkatan darihtmlspecialchars()) untuk melakukan escaping terhadap data yang ditampilkan di view. Ini akan mencegah kode HTML atau JavaScript berbahaya dieksekusi di browser pengguna. Contoh:{{ e($post->title) }}. - CSRF: Laravel secara otomatis melindungi aplikasi dari serangan CSRF dengan menggunakan token CSRF. Token CSRF harus disertakan di setiap form yang menggunakan method
POST,PUT, atauDELETE. Laravel menyediakan directive@csrfuntuk menambahkan token CSRF ke form:
<form method="POST" action="...">
@csrf
</form>10. Deploy Aplikasi ke Hosting
Setelah selesai mengembangkan aplikasi, kita perlu melakukan deployment ke hosting agar bisa diakses secara publik. Proses deployment bisa berbeda-beda tergantung pada platform hosting yang kamu gunakan. Secara umum, langkah-langkahnya adalah sebagai berikut:
- Upload file project ke server hosting.
- Buat database di server hosting dan import data dari database lokal.
- Konfigurasi file
.envdi server hosting dengan konfigurasi database yang benar. - Atur document root website ke direktori
publicdi dalam project Laravel. - Jalankan perintah
php artisan migratedi server hosting untuk memastikan semua migrasi diterapkan. - Jalankan perintah
php artisan key:generatedi server hosting untuk menghasilkan application key. - Konfigurasi web server (misalnya Apache atau Nginx) untuk mengarahkan traffic ke aplikasi Laravel.
11. Kesimpulan: Langkah Awal Menuju Pengembangan Web dengan Laravel 9
Membangun contoh project sederhana dengan Laravel 9: aplikasi blog sederhana ini adalah langkah awal yang bagus untuk mempelajari Laravel. Kamu sudah belajar cara membuat model, migrasi, controller, views, routes, dan menerapkan dasar-dasar keamanan dan SEO.
Dengan pengetahuan ini, kamu bisa mengembangkan aplikasi yang lebih kompleks dan sophisticated. Jangan ragu untuk bereksperimen dan mencoba fitur-fitur Laravel lainnya. Selamat belajar dan semoga sukses!
12. Sumber Belajar Laravel 9 Lebih Lanjut
Untuk memperdalam pengetahuan kamu tentang Laravel 9, berikut beberapa sumber belajar yang bisa kamu manfaatkan:
- Dokumentasi Resmi Laravel: https://laravel.com/docs/9.x (Sumber terbaik untuk mempelajari semua fitur dan konsep Laravel secara mendalam)
- Laravel Daily: https://laraveldaily.com/ (Website yang menyediakan tutorial, tips, dan trik tentang Laravel)
- Laracasts: https://laracasts.com/ (Platform pembelajaran online yang menawarkan video courses berkualitas tinggi tentang Laravel dan teknologi web lainnya)
- Stack Overflow: https://stackoverflow.com/questions/tagged/laravel (Forum komunitas developer untuk bertanya dan mendapatkan solusi atas masalah yang kamu hadapi)
- GitHub: https://github.com/laravel (Repository resmi Laravel di GitHub. Kamu bisa melihat kode sumber Laravel dan berkontribusi pada pengembangan Laravel)
Dengan memanfaatkan sumber-sumber ini, kamu akan semakin mahir dalam pengembangan web dengan Laravel 9. Teruslah belajar dan berkarya!
