Skip to main content

Membuat Blog Sederhana dengan Laravel 8

Pada versi terbaru Laravel 8 memberikan beberapa fitur baru dan dukungan LTS, pada artikel ini  Kita akan langsung saja membuat sebuah aplikasi  yaitu blog sederhana, aplikasi ini akan memuat perintah insert, update dan delete di Laravel 8.

Langkah #1 – Install Laravel 8

Ada 2 cara yang dapat dilakukan untuk menginstall Laravel 8. Pertama dengan Laravel Installer dan yang kedua dengan composer.  pada artikel ini kita akab melakukan instalasi dengan menggunakan  laravel Installer  Silahkan ketik command di bawah ini untuk menginstal Laravel terlebih dahulu: 
composer global require laravel/installer //Kemudian buat project baru dengan ketik command berikut ini: laravel new blog
atau anda juga bisa menggunakan cara kedua dengan perintah Composer, cara ini cukup mudah anda ketik perintah berikut ini: 
composer create-project --prefer-dist laravel/laravel blog
Kemudian tunggu proses instalasi sampai dengan selesai. 

Langkah #2 – Konfigurasi Database 

pada langkah kedua kita akan mengatur konfigurasi database. Silahkan aktifkan web server yang anda gunakan semisal XAMPP yang sudah terinstall di komputer anda Kemudian buat database MySQL baru menggunakan phpmyadmin atau aplikasi sejenis kemudian berikan nama db_blog Setelah itu, buka file .env yang ada di dalam direktori blog/.env.  Ubah nama database, root, password dll yang sesuai dengan web server kamu lakukan. 
DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=db_blog
DB_USERNAME=root 
DB_PASSWORD= 
Save. 

Langkah #3 – Membuat Migration Database dan Model 


Pada contoh ini kita  akan membuat sebuah table dengan nama posts. ketik perintah berikut pada command prompt anda seperti di bawah ini: 

  php artisan make:model Post --migration 
  
Kemudian buka folder migrations yang ada di direktori blog/database/migrations. jika sudah dibuka silahkan modifikasi file yang ada di folder migration tersebut untuk membuat sebuah tabel baru  dengan kode di bawah ini: 

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');
    }
}

Jika sudah selesai kita jalankan perintah di bawah ini agar kolom-kolom yang kita buat akan muncul di database: 
php artisan migrate 

Langkah #4 – Membuat Resource Controller 

Pada tahap ini kita akan membuat controller di Laravel 8.  Jalankan  command di bawah ini untuk membuat resource controller: 
    php artisan make:controller PostController --resource 
 
Jika sudah akan terbentuk sebuah file baru dengan nama PostController.php di dalam direktori app/Http/Controllers.pada file tersebut / PostController.php akan muncul secara otomatis  beberapa fungsi, seperti : 
  1. index(),
  2. create(),
  3. store(),
  4. show(),
  5. edit(), dan
  6. destroy() 
Selanjutnya kita akan modifikasi isi PostController tersebut seperti kode di bawah ini: 
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->paginate(5);

        return view('posts.index',compact('posts'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }

    public function create()
    {
        return view('posts.create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'content' => 'required',
        ]);

        Post::create($request->all());

        return redirect()->route('posts.index')
                        ->with('success','Post created successfully.');
    }

    public function show(Post $post)
    {
        return view('posts.show',compact('post'));
    }

    public function edit(Post $post)
    {
        return view('posts.edit',compact('post'));
    }

    public function update(Request $request, Post $post)
    {
        $request->validate([
            'title' => 'required',
            'content' => 'required',
        ]);

        $post->update($request->all());

        return redirect()->route('posts.index')
                        ->with('success','Post updated successfully');
    }

    public function destroy(Post $post)
    {
        $post->delete();

        return redirect()->route('posts.index')
                        ->with('success','Post deleted successfully');
    }
}

 
Save. 

Langkah #5 – Modifikasi Model 


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

  

Langkah #6 – Menambahkan Route 

Sakarang kita tambahkan route untuk mengakses resource controller Post. 
Buka routes/web.php dan tambahkan: 

use App\Http\Controllers\PostController;
Route::resource('posts', PostController::class);
  
Simpan. 

Langkah #7 – Membuat Halaman View 


Pada langkah terakhir ini, kita akan membuat beberapa file untuk tampilan menggunakan bootstrap. Berikut adalah beberapa file view yang akan kita buat adalah: 
  1. template.blade.php 
  2. index.blade.php 
  3. create.blade.php 
  4. show.blade.php 
  5. edit.blade.php 
Silahkan buat file sebuah file baru dengan nama template.blade.php di direktori resources/views.  Masukkan kode berikut :
<!DOCTYPE html> 
<html> 
<head> 
<title>Blog sederhana</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
</head> 
<body> 
<div class="container"> 
@yield('content') 
</div> 
</body> 
</html> 
  
Kemudian buat folder baru di dalam views bernama posts. 

#posts/index.blade.php 

@extends('template') 
@section('content') 
<div class="row mt-5 mb-5"> 
<div class="col-lg-12 margin-tb"> 
<div class="float-left"> 
<h2>Blog Sederhana</h2> 
</div> 
<div class="float-right"> 
<a class="btn btn-success" href="{{ route('posts.create') }}"> Create Post</a> 
</div> 
</div> 
</div> 
@if ($message = Session::get('success')) 
<div class="alert alert-success"> 
<p>{{ $message }}</p> 
</div> 
@endif 
<table class="table table-bordered"> 
<tr> 
<th width="20px" class="text-center">No</th> 
<th>Title</th> 
<th width="280px"class="text-center">Action</th> 
</tr> 
@foreach ($posts as $post) 
<tr> 
<td class="text-center">{{ ++$i }}</td> 
<td>{{ $post->title }}</td> 
<td class="text-center"> 
<form action="{{ route('posts.destroy',$post->id) }}" method="POST"> 
<a class="btn btn-info btn-sm" href="{{ route('posts.show',$post->id) }}">Show</a> 
<a class="btn btn-primary btn-sm" href="{{ route('posts.edit',$post->id) }}">Edit</a> 
@csrf 
@method('DELETE') 
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')">Delete</button> 
</form> 
</td> 
</tr> 
@endforeach 
</table> 

{!! $posts->links() !!} 
@endsection 
  
  
  

#posts/create.blade.php 


  @extends('template') 
@section('content') 
<div class="row mt-5 mb-5"> 
<div class="col-lg-12 margin-tb"> 
<div class="float-left"> 
<h2>Create New Post</h2> 
</div> 
<div class="float-right"> 
<a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a> 
</div> 
</div> 
</div> 
@if ($errors->any()) 
<div class="alert alert-danger"> 
<strong>peringatan!</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"> 
@csrf 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-12"> 
<div class="form-group"> 
<strong>Title:</strong> 
<input type="text" name="title" class="form-control" placeholder="Title"> 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12"> 
<div class="form-group"> 
<strong>Content:</strong> 
<textarea class="form-control" style="height:150px" name="content" placeholder="Content"></textarea> 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12 text-center"> 
<button type="submit" class="btn btn-primary">Submit</button> 
</div> 
</div> 
</form> 
@endsection 
  

#posts/show.blade.php 


@extends('template') 
@section('content') 
<div class="row mt-5 mb-5"> 
<div class="col-lg-12 margin-tb"> 
<div class="float-left"> 
<h2> Show Post</h2> 
</div> 
<div class="float-right"> 
<a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a> 
</div> 
</div> 
</div> 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-12"> 
<div class="form-group"> 
<strong>Title:</strong> 
{{ $post->title }} 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12"> 
<div class="form-group"> 
<strong>Content:</strong> 
{{ $post->content }} 
</div> 
</div> 
</div> 
@endsection 
 

#posts/edit.blade.php 


  @extends('template') 
@section('content') 
<div class="row mt-5 mb-5"> 
<div class="col-lg-12 margin-tb"> 
<div class="float-left"> 
<h2>Edit Post</h2> 
</div> 
<div class="float-right"> 
<a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a> 
</div> 
</div> 
</div> 

@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.update',$post->id) }}" method="POST"> 
@csrf 
@method('PUT') 
<div class="row"> 
<div class="col-xs-12 col-sm-12 col-md-12"> 
<div class="form-group"> 
<strong>Title:</strong> 
<input type="text" name="title" value="{{ $post->title }}" class="form-control" placeholder="Title"> 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12"> 
<div class="form-group"> 
<strong>Content:</strong> 
<textarea class="form-control" style="height:150px" name="content" placeholder="Content">{{ $post->content }}</textarea> 
</div> 
</div> 
<div class="col-xs-12 col-sm-12 col-md-12 text-center"> 
<button type="submit" class="btn btn-primary">Update</button> 
</div> 
</div> 
</form> 
@endsection 
  

Langkah 7# – Testing Program 

untuk menjalankan aplikasi jalankan command di bawah ini: 
php artisan serve Kemudian buka browser dan ketik URL berikut:  http://127.0.0.1:8000/posts  Jika berhasil maka akan tampil halaman seperti ini: 

Klik tombol Create Post, maka akan muncul halaman seperti di bawah ini: 

Silahkan isi dengan judul dan content. Jika sudah, klik tombol Submit. 
dan untuk tampilan Detail, bisa klik tombol Show pada halaman index.  Hasilnya: 

Terakhir, ini halaman edit: 

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar