Panduan Lengkap Membuat Blog dengan Laravel 8 #Part1

Written by Hilmi Hidayat, published on 26 February, 2021 Panduan Lengkap Membuat Blog dengan Laravel 8 #Part1

Blog Laravel - Laravel merupakan framework PHP paling popular saat ini dengan banyaknya library sebagai pendukung. Laravel sangat cocok digunakan untuk membuat sistem sederhana seperti blog, company profile sampai sistem yang kompleks. Nah, di artikel ini kita akan membuat blog sederhana dengan laravel 8 yang dilengkapi dengan CRUD post, category, tag dan manage general setting. Disini kita akan mengawali mulai dari nol yaitu dengan menginstall project laravel 8 sampai mengunggah project blog laravel ke shared hosting.

Apa saja yang dibutuhkan ?

  1. Text Editor (ex: sublime text, visual studio, etc)
  2. Local server (ex: Xampp, Laragon, etc)
  3. Node.js
  4. Composer
  5. Git (optional)

Jika semua kebutuhan sudah tersedia, sekarang kita mulai langkah-langkah membuat blog sederhana dengan laravel 8.

1. Install Laravel

composer create-project laravel/laravel larablog

Langkah awal untuk membuat blog sederana dengan laravel dimulai dengan menginstall laravel via composer. Caranya, buka terminal kemudian jalankan command install laravel seperti di atas. Atau jika kita menggunakan git (git bash) bisa dimulai dengan mengakses atau membuka direktori dimana kita ingin menginstall project larablog kemudian klik kanan, akan ada pilihan Git Bash Here. Klik Git Bash Here kemudian jalankan command di atas. Dengan command di atas, akan membuatkan folder project laravel blog kita dengan nama larablog.

2. Install laravel ui

Untuk membuat fitur authentication, kita bisa memakai laravel ui. Sebenarnya ada opsi juga membuat fitur authentication dengan jetstream, namun untuk project yang sederhana mamakai laravel ui sudah cukup. Untuk menginstall laravel ui, jalankan command di bawah ini secara berurutan

composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev

3. Menyiapkan database

Kita memerlukan database untuk menampung data-data yang akan ditampilkan di blog nantinya, data tersebut antara lain post, category, tag dan lain-lain. Untuk itu kita memerlukan database baru. Buat database baru di xampp, laragon atau yang lainnya.

4. Update file .env

Setelah membuat database baru, kita perlu konfigurasi di file .env atau lebih tepat di DB_DATABASE. Sesuaikan DB_DATABASE dengan nama database yang baru dibuat.

5. Migrate

Jika di file .env sudah sesuaikan, selanjutnya kita bisa migrasi dari file migration ke database dengan command php artisan migrate.

6. Buat user baru

Selanjutnya kita register 1 user terlebih dahulu di project larablog. Jalankan server dengan php artisan serve, kemudian akses menu register dan coba register 1 user.

Sebenarnya untuk menambahkan data user, kita bisa juga menggunakan seeder tanpa harus register user di menu register. Cara menambahkan data user dengan seeder bisa dengan menjalankan command di bawah ini.

php artisan make:seeder UserSeeder

Buka file UserSeeder.php yang ada di folder database>seeders, kemudian sesuaikan kodenya seperti di bawah ini.

<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash;
class UserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table('users')->insert([
            'name' => 'vanjava',
            'email' => 'vanjava@gmail.com',
            'password' => Hash::make('12345678'),
        ]);
    }
}

Kemudian buka file DatabaseSeeder.php dan tambahkan kode di bawah ini pada function run.

$this->call([
            UserSeeder::class,
        ]);

Sehingga secara keseluruhan file yang ada du file DatabaseSeeder.php menjadi seperti di bawah ini.

<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call([
            UserSeeder::class,
        ]);
    }
}

7. Disable Register

Karena kita sudah menambahkan user, maka kita sudah tidak memerlukan fitur register lagi. Karena jika tetap disediakan, nanti akan ada user lain yang register (selain admin blog). Untuk disable register, bisa dilakukan dengan membuka file routes>web.php dan mengubah kode Auth::routes(); menjadi Auth::routes(['register' => false]); sehingga kode di file routes>web.php menjadi seperti di bawah ini.

<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| 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');
});
Auth::routes(['register' => false]);
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

8. Mengatur tampilan front end. Untuk tampilan front end, kita akan menggunakan template yang telah disediakan disini. Silahkan download terlebih dahulu.

Panduan Lengkap Membuat Blog dengan Laravel 8

Jika sudah selesai proses download, extract file template tersebut. Kemudian di dalam ada folder assets, pindahkan folder tersebut ke direktori public pada project blog laravel atau di artikel ini dinamakan larablog (seperti gambar di atas).

Kemudian kita perlu membuat file view di folder resources>views>layouts yang nantinya file ini akan kita jadikan file view master untuk tampilan front end. File tersebut kita beri nama front.blade.php, dan copy kode di bawah ini untuk di paste pada file front.blade.php.

resources>views>layouts>front.blade.php

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Vanjava</title>
        <!-- Bootstrap core CSS -->
        <link href="{{ asset('assets/vendor/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/vendor/icofont/icofont.min.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
        <!-- Owl Stylesheets -->
        <link href="{{ asset('assets/vendor/owlcarousel/assets/owl.carousel.min.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/vendor/owlcarousel/assets/owl.theme.default.min.css') }}"  rel="stylesheet">
        <!-- Data AOS -->
        <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
        <!-- Animate -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
        <style>
            .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            }
            @media (min-width: 768px) {
            .bd-placeholder-img-lg {
            font-size: 3.5rem;
            }
            }
        </style>
        <!-- Custom styles for this template -->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="{{ asset('assets/style.css') }}" rel="stylesheet">
        @yield('styles')
    </head>
    <body>
        <nav class="navstyle navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <a class="navbar-brand" href="/">
            <img src="{{ asset('assets/img/logo.png') }}" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Categories
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="blog.html">All Categories</a>
                            <a class="dropdown-item" href="#">Laravel</a>
                            <a class="dropdown-item" href="#">Software Testing</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Repositories</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="pages" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Pages
                        </a>
                        <div class="dropdown-menu" aria-labelledby="pages">
                            <a class="dropdown-item" href="blog.html">Privacy Policy</a>
                            <a class="dropdown-item" href="#">Disclaimer</a>
                            <a class="dropdown-item" href="#">Term & Conditions</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="followUs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Follow Us
                        </a>
                        <div class="dropdown-menu social-links text-center" aria-labelledby="followUs">
                            <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
                            <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
                            <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
                        </div>
                    </li>
                </ul>
                <div class="col-md-4 search-form">
                    <form action="#" method="GET">
                        <input type="text" name="query" id="typing">
                        <button type="submit"><i class="icofont-search"></i></button>
                    </form>
                </div>
            </div>
        </nav>
        @yield('content')
        <!-- ======= Footer ======= -->
        <footer id="footer" class="container">
            <div class="d-md-flex py-4">
                <div class="mr-md-auto text-center text-md-left">
                    <div class="copyright">
                        &copy; 2021 - Vanjava • All rights reserved
                    </div>
                </div>
            </div>
        </footer>
        <!-- End Footer -->
        <a href="#" class="back-to-top" style="text-decoration: none;"><i class="icofont-rocket"></i></a>
        <script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>
        <script src="{{ asset('assets/vendor/bootstrap/bootstrap.bundle.min.js') }}"></script>
        <script src="{{ asset('assets/vendor/jquery.easing/jquery.easing.min.js') }}"></script>
        <script src="{{ asset('assets/vendor/isotope-layout/isotope.pkgd.min.js') }}"></script>
        <script src="{{ asset('assets/vendor/owlcarousel/owl.carousel.js') }}"></script>
        <script src="{{ asset('assets/vendor/typewriter.js') }}"></script>
        <!-- Data AOS -->
        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
        <script>
            AOS.init();
        </script>
        <script>
            new TypeWriter('#typing', ['Mau cari apa.... ??', 'Ketikkan sesuatu disini...', 'Misal; Katalon Studio'], { writeDelay: 100 });
        </script>
        <!-- Template Main JS File -->
        <script src="{{ asset('assets/main.js') }}"></script>
        @stack('scripts')
    </body>
</html>

Selanjutnya, buka file welcome.blade.php dan ganti semua kode di dalamnya menjadi seperti di bawah ini.

resources>views>welcome.blade.php

@extends('layouts.front')
@section('content')
<main role="main" class="container">
    <div class="blog py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="200">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
  
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="300">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="400">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
  
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="500">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="600">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="700">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
  
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="800">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="900">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 blogbox" data-aos="fade-up" data-aos-duration="1000">
            <div class="card mb-4 shadow-sm">
              <a href="blogdetail.html">
                <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" width="100%" height="225" alt="">
              </a>
              <div class="card-body">
                <h3>Lorem ipsum bla bla intro</h3>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <a href="" class="blog-categories">Laravel</a>
                  <small class="text-muted">31 January, 2021</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  
  </main>
@endsection

File welcome.blade.php yang sebelumnya menampilkan tampilan default dari laravel, kita ubah menjadi tampilan yang terdiri dari post box yang nantinya sebagai artikel.

Selanjutnya apa ?

Selanjutnya kita perlu membuat controller baru yang fungsinya sebagai mengontrol apapun yang ditampilkan di halaman depan.

buat controller baru tersebut dengan command php artisan make:controller FrontController. dengan command tersebut kita telah membuat controller baru dengan nama FrontController yang terletak di folder app>Http>controllers. Buka file tersebut dan tambahkan function homepage seperti di bawah ini.

public function homepage()
    {
        return view('welcome');
    }

Kemudian buka file routes>web.php.

ganti kode

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

menjadi

Route::get('/', [FrontController::class, 'homepage'])->name('homepage');

Jika sudah, sekarang coba jalankan project dengan command php artisan serve atau jika menggunakan valet bisa dicoba akses larablog.test

Panduan Lengkap Membuat Blog dengan Laravel 8


 

Ok, kita sudah memiliki tampilan home dari blog laravel yang kita buat. Selanjutnya kita buat tampilan lagi yang bisa menampilkan detail dari blog atau artikelnya.

Buat file detail.blade.php di dalam resources>views kemudian copy kode di bawah dan paste di file detail.blade.php yang baru dibuat.

resources>views>detail.blade.php

@extends('layouts.front')
@section('content')
<main role="main" class="container mt-5">
    <section class="blog" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 entries">
                    <article class="entry entry-single">
                        <div class="entry-img">
                            <img src="{{asset('assets/img/cover.png')}}" alt="" class="img-fluid">
                        </div>
                        <h2 class="entry-title">Dolorum optio tempore voluptas dignissimos cumque fuga qui quibusdam quia reiciendis</h2>
                        <div class="entry-meta">
                            <ul>
                                <li class="d-flex align-items-center"><i class="icofont-user"></i> <a href="blog-single.html">John Doe</a></li>
                                <li class="d-flex align-items-center"><i class="icofont-wall-clock"></i> <a href="blog-single.html"><time datetime="2020-01-01">Jan 1, 2020</time></a></li>
                                <li class="d-flex align-items-center"><i class="icofont-comment"></i> <a href="blog-single.html">12 Comments</a></li>
                            </ul>
                        </div>
                        <div class="entry-content">
                            <p>
                                Similique neque nam consequuntur ad non maxime aliquam quas. Quibusdam animi praesentium. Aliquam et
                                laboriosam eius aut nostrum quidem aliquid dicta.
                                Et eveniet enim. Qui velit est ea dolorem doloremque deleniti aperiam unde soluta. Est cum et quod quos
                                aut ut et sit sunt. Voluptate porro consequatur assumenda perferendis dolore.
                            </p>
                            <p>
                                Sit repellat hic cupiditate hic ut nemo. Quis nihil sunt non reiciendis. Sequi in accusamus harum vel
                                aspernatur. Excepturi numquam nihil cumque odio. Et voluptate cupiditate.
                            </p>
                            <blockquote>
                                <i class="icofont-quote-left quote-left"></i>
                                <p>
                                    Et vero doloremque tempore voluptatem ratione vel aut. Deleniti sunt animi aut. Aut eos aliquam
                                    doloribus minus autem quos.
                                </p>
                                <i class="las la-quote-right quote-right"></i>
                                <i class="icofont-quote-right quote-right"></i>
                            </blockquote>
                            <p>
                                Sed quo laboriosam qui architecto. Occaecati repellendus omnis dicta inventore tempore provident
                                voluptas mollitia aliquid. Id repellendus quia. Asperiores nihil magni dicta est suscipit perspiciatis.
                                Voluptate ex rerum assumenda dolores nihil quaerat.
                                Dolor porro tempora et quibusdam voluptas. Beatae aut at ad qui tempore corrupti velit quisquam rerum.
                                Omnis dolorum exercitationem harum qui qui blanditiis neque.
                                Iusto autem itaque. Repudiandae hic quae aspernatur ea neque qui. Architecto voluptatem magni. Vel
                                magnam quod et tempora deleniti error rerum nihil tempora.
                            </p>
                            <h3>Et quae iure vel ut odit alias.</h3>
                            <p>
                                Officiis animi maxime nulla quo et harum eum quis a. Sit hic in qui quos fugit ut rerum atque. Optio
                                provident dolores atque voluptatem rem excepturi molestiae qui. Voluptatem laborum omnis ullam quibusdam
                                perspiciatis nulla nostrum. Voluptatum est libero eum nesciunt aliquid qui.
                                Quia et suscipit non sequi. Maxime sed odit. Beatae nesciunt nesciunt accusamus quia aut ratione
                                aspernatur dolor. Sint harum eveniet dicta exercitationem minima. Exercitationem omnis asperiores natus
                                aperiam dolor consequatur id ex sed. Quibusdam rerum dolores sint consequatur quidem ea.
                                Beatae minima sunt libero soluta sapiente in rem assumenda. Et qui odit voluptatem. Cum quibusdam
                                voluptatem voluptatem accusamus mollitia aut atque aut.
                            </p>
                            <img src="{{asset('assets/img/cover.png')}}" class="img-fluid" alt="">
                            <h3>Ut repellat blanditiis est dolore sunt dolorum quae.</h3>
                            <p>
                                Rerum ea est assumenda pariatur quasi et quam. Facilis nam porro amet nostrum. In assumenda quia quae a
                                id praesentium. Quos deleniti libero sed occaecati aut porro autem. Consectetur sed excepturi sint non
                                placeat quia repellat incidunt labore. Autem facilis hic dolorum dolores vel.
                                Consectetur quasi id et optio praesentium aut asperiores eaque aut. Explicabo omnis quibusdam esse. Ex
                                libero illum iusto totam et ut aut blanditiis. Veritatis numquam ut illum ut a quam vitae.
                            </p>
                            <p>
                                Alias quia non aliquid. Eos et ea velit. Voluptatem maxime enim omnis ipsa voluptas incidunt. Nulla sit
                                eaque mollitia nisi asperiores est veniam.
                            </p>
                        </div>
                        <div class="entry-footer clearfix">
                            <div class="float-left">
                                <i class="icofont-folder"></i>
                                <ul class="cats">
                                    <li><a href="#">Business</a></li>
                                </ul>
                                <i class="icofont-tags"></i>
                                <ul class="tags">
                                    <li><a href="#">Creative</a></li>
                                    <li><a href="#">Tips</a></li>
                                    <li><a href="#">Marketing</a></li>
                                </ul>
                            </div>
                        </div>
                    </article>
                </div>
                <div class="col-lg-4">
                    <div class="sidebar">
                        <h3 class="sidebar-title">Recent Posts</h3>
                        <div class="sidebar-item recent-posts">
                            <div class="post-item clearfix">
                                <img src="{{asset('assets/img/cover.png')}}" alt="">
                                <h4><a href="blog-single.html">Nihil blanditiis at in nihil autem</a></h4>
                                <time datetime="2020-01-01">Jan 1, 2020</time>
                            </div>
                            <div class="post-item clearfix">
                                <img src="{{asset('assets/img/cover.png')}}" alt="">
                                <h4><a href="blog-single.html">Quidem autem et impedit</a></h4>
                                <time datetime="2020-01-01">Jan 1, 2020</time>
                            </div>
                            <div class="post-item clearfix">
                                <img src="{{asset('assets/img/cover.png')}}" alt="">
                                <h4><a href="blog-single.html">Id quia et et ut maxime similique occaecati ut</a></h4>
                                <time datetime="2020-01-01">Jan 1, 2020</time>
                            </div>
                            <div class="post-item clearfix">
                                <img src="{{asset('assets/img/cover.png')}}" alt="">
                                <h4><a href="blog-single.html">Laborum corporis quo dara net para</a></h4>
                                <time datetime="2020-01-01">Jan 1, 2020</time>
                            </div>
                            <div class="post-item clearfix">
                                <img src="{{asset('assets/img/cover.png')}}" alt="">
                                <h4><a href="blog-single.html">Et dolores corrupti quae illo quod dolor</a></h4>
                                <time datetime="2020-01-01">Jan 1, 2020</time>
                            </div>
                        </div>
                        <!-- End sidebar recent posts-->
                        <h3 class="sidebar-title">Tags</h3>
                        <div class="sidebar-item tags">
                            <ul>
                                <li><a href="#">App</a></li>
                                <li><a href="#">IT</a></li>
                                <li><a href="#">Business</a></li>
                                <li><a href="#">Business</a></li>
                                <li><a href="#">Mac</a></li>
                                <li><a href="#">Design</a></li>
                                <li><a href="#">Office</a></li>
                                <li><a href="#">Creative</a></li>
                                <li><a href="#">Studio</a></li>
                                <li><a href="#">Smart</a></li>
                                <li><a href="#">Tips</a></li>
                                <li><a href="#">Marketing</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <h3>Related Posts</h3>
                <div class="owl-carousel owl-theme">
                    <div class="box-post">
                        <div class="card mb-4 shadow-sm">
                            <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" alt="">
                            <div class="card-body">
                                <h4>Lorem ipsum bla bla intro Lorem ipsum bla bla intro</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="" class="blog-categories">Laravel</a>
                                    <small class="text-muted">31 January, 2021</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-post">
                        <div class="card mb-4 shadow-sm">
                            <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" alt="">
                            <div class="card-body">
                                <h4>Lorem ipsum bla bla intro Lorem ipsum bla bla intro</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="" class="blog-categories">Laravel</a>
                                    <small class="text-muted">31 January, 2021</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-post">
                        <div class="card mb-4 shadow-sm">
                            <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" alt="">
                            <div class="card-body">
                                <h4>Lorem ipsum bla bla intro Lorem ipsum bla bla intro</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="" class="blog-categories">Laravel</a>
                                    <small class="text-muted">31 January, 2021</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-post">
                        <div class="card mb-4 shadow-sm">
                            <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" alt="">
                            <div class="card-body">
                                <h4>Lorem ipsum bla bla intro Lorem ipsum bla bla intro</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="" class="blog-categories">Laravel</a>
                                    <small class="text-muted">31 January, 2021</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-post">
                        <div class="card mb-4 shadow-sm">
                            <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" alt="">
                            <div class="card-body">
                                <h4>Lorem ipsum bla bla intro Lorem ipsum bla bla intro</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="" class="blog-categories">Laravel</a>
                                    <small class="text-muted">31 January, 2021</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-post">
                        <div class="card mb-4 shadow-sm">
                            <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" alt="">
                            <div class="card-body">
                                <h4>Lorem ipsum bla bla intro Lorem ipsum bla bla intro</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="" class="blog-categories">Laravel</a>
                                    <small class="text-muted">31 January, 2021</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box-post">
                        <div class="card mb-4 shadow-sm">
                            <img src="{{asset('assets/img/cover.png')}}" class="bd-placeholder-img card-img-top" alt="">
                            <div class="card-body">
                                <h4>Lorem ipsum bla bla intro Lorem ipsum bla bla intro</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="" class="blog-categories">Laravel</a>
                                    <small class="text-muted">31 January, 2021</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection
@push('scripts')
<script>
    $('.owl-carousel').owlCarousel({
            margin: 10,
            nav: true,
            navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 4
                },
                1000: {
                    items: 4
                }
            }
        });
</script>
@endpush

Selanjutnya buat function baru di FrontController untuk handle tampilan detail blog atau artikel. kode function detail seperti di bawah ini.

public function detail()
    {
        return view('detail');
    }

Kemudian, kita perlu membuat route baru untuk detail blog. Buka routes>web.php dan tambahkan kode di bawah ini.

Route::get('detail', [FrontController::class, 'detail'])->name('detail');

Sekarang coba akses 127.0.0.1:8000 untuk melihat tampilan detail blog.

Panduan Lengkap Membuat Blog dengan Laravel 8

OK, sampai disini kita sudah berhasil membuat tampilan utama atau tampilan depan blog dan detail blog. Tapi tampilan tersebut masih statis, belum dinamis atau menampilkan tampilan yang telah diproses sebelumnya di back end, gimana dong ?

Tenang, kita belum membuat manage blog di halaman admin, selanjutnya kita akan membuat manage blog, tag, category dan trash untuk bisa mengelola konten di project blog dengan laravel kita ini.

9. Manage Konten blog laravel.

Di langkah nomor 9, kita akan membuatkan fitur yang bisa digunakan untuk mengelola konten di project blog dengan laravel, sehingga nantinya konten yang ditampilkan di halaman front end bisa dinamis.

Untuk langkah nomor 9 akan kita sambung di artikel berikutnya.

Tinggalkan Komentar
Affiliate Banner Unlimited Hosting Indonesia