ahmadajah03 Sat Dec 2020 1 year ago

Contoh Buat Blog di Laravel dan Livewire

Dalam tutorial ini, kita akan memandu pembuatan blog sederhana di Laravel dan Livewire . Ini akan sangat sederhana dan dapat digunakan sebagai titik awal untuk membangun blog Anda dengan kerangka kerja yang luar biasa ini.

Untuk memulai, kita akan mulai dengan membuat aplikasi laravel baru kita.

Buat aplikasi Laravel baru

Pertama, kami akan membuat aplikasi baru di folder bernama blog:

laravel new blog

Kami sekarang memiliki aplikasi Laravel baru jika kami akan berkunjung blog.test

Mari kita lanjutkan untuk membuat migrasi tabel posting kita.

Buat tabel posting baru

Kita dapat membuat posts migrasi tabel kita dengan perintah berikut:

php artisan make:migration create_posts_table

Jika kami membuka file itu, kami dapat menambahkan data skema berikut ke migrasi kami:

<?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->integer('user_id');
            $table->string('title');
            $table->text('body');
            $table->string('image')->nullable();
            $table->string('slug')->unique();
            $table->boolean('active')->default(1);
            $table->boolean('featured')->default(0);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Sebelum menjalankan migrasi, pastikan untuk menghubungkan database Anda dengan menambahkan info DB yang benar ke .env file Anda :

...
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=root
DB_PASSWORD=
...

Setelah Anda menambahkan kredensial database, Anda dapat menjalankan migrasi:

php artisan migrate

Anda akan melihat keluaran yang mirip dengan berikut ini:

"Perhatikan bahwa kami juga telah memigrasi tabel pengguna dan beberapa migrasi lain yang disertakan dengan aplikasi Laravel kosong. Tidak apa-apa, tetapi kami terutama akan fokus pada posts migrasi kami ."

Pada langkah selanjutnya, kami akan menambahkan Livewire ke proyek kami. Dengan cara ini, kita dapat membuat beberapa cara keren untuk menambahkan posting baru.

Install Livewire

Kita dapat menginstal Livewirw dengan menjalankan perintah berikut:

composer require livewire/livewire

Kami kemudian perlu menambahkan skrip dan gaya livewire ke file tata letak utama kami. Karena kami tidak memiliki file tata letak utama di aplikasi kami, kami akan melakukannya di langkah berikutnya.

Buat Layout Aplikasi kami

Di dalam aplikasi kita, kita akan membuat file layout baru yang terletak di resources/views/layouts/app.blade.php, dengan konten berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel Blog')</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css">
</head>
<body>

    @yield('content')

</body>
</html>

Seperti yang Anda lihat di atas, kami menyertakan link ke link CDN CSS Tailwind.

Sekarang kita memiliki file layout utama kita, kita dapat menambahkan script dan style Livewire kita.

Menambahkan Skrip Livewire

Menambahkan skrip dan gaya Livewire ke file tata letak kami sangat sederhana. Kami memasukkan @livewireStyles ke head dan @livewireScripts body kita, seperti:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel Blog')</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css">
    @livewireStyles
</head>
<body>

    @yield('content')

    @livewireScripts
</body>
</html>

Selanjutnya, kami akan menambahkan tajuk dan beranda sederhana untuk blog kami.

Tambahkan Beranda Kami

Di dalam kami routes/web.php, Anda akan melihat rute rumah yang mengarah ke welcome.blade.php:

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

Ubah route ini menjadi berikut:

Route::view('/', 'home');

Ini akan mengarahkan beranda kami ke file baru di resources/views/home.blade.php. Anda akan ingin membuat file itu dengan konten berikut:

@extends('layouts.app')

@section('content')

    <div class="container mx-auto p-5">
        <h1 class="text-4xl mt-32 text-center tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
            Welcome to The Blog
        </h1>
    </div>

@endsection

"Catatan: kami juga dapat menghapus file welcome.blade.php sementara dari resources/views folder kami ."

Menggunakan Blade Components , kita dapat membuat komponen header untuk blog kita dengan perintah berikut:

php artisan make:component header

Ini akan menghasilkan template view conponent baru kita yang terletak di resources/views/components/header.blade.php, yang akan kita tambahkan konten berikut:

<header class="text-gray-700 body-font border-b">
    <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <nav class="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
            <a href="/" class="mr-5 hover:text-gray-900">Home</a>
            <a href="/blog" class="mr-5 hover:text-gray-900">Blog</a>
            <a href="/about" class="mr-5 hover:text-gray-900">About</a>
        </nav>
        <a class="flex order-first lg:order-none lg:w-1/5 title-font font-bold items-center text-gray-900 lg:items-center lg:justify-center mb-4 md:mb-0">
            BLOG
        </a>
        <div class="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
            <a href="#_" class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Login</a>
        </div>
    </div>
</header>

Sekarang, kita bisa memasukkan komponen ini ke dalam layout utama kita dengan memasukkan <x-header></x-header>di tempat yang kita inginkan pada header kita:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel Blog')</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css">
    @livewireStyles
</head>
<body>

    <x-header></x-header>

    @yield('content')

    @livewireScripts

</body>
</html>

Sekarang kita akan melihat bahwa tata letak kita berjalan dengan baik. 👌

Selanjutnya, kami akan membuat tampilan baru di mana kami dapat mulai menerbitkan beberapa posting.

Buat Komponen Posts

Jalankan perintah berikut untuk membuat komponen Livewire baru yang akan digunakan untuk membuat postingan di blog kita:

php artisan make:livewire PostCreate

Ini akan membuat CLASS komponen dan VIEW  komponen dalam aplikasi kita yang terletak di:

CLASS: app/Http/Livewire/PostCreate.php
VIEW:  resources/views/livewire/post-create.blade.php

Kita dapat menambahkan route baru ke kita routes/web.php, yang akan memuat komponen baru kita:

Route::get('post/create', \App\Http\Livewire\PostCreate::class);

Sebelum melihat komponen kita ditampilkan di layar, kita perlu memodifikasi Class dan View komponen.

 

Buka file app/Http/Livewire/PostCreate.php, dan kita dapat menentukan bagian yang kita ingin komponen kita dimasukkan ke dalam file layout kita. Kita bisa melakukannya dengan memodifikasi render() fungsinya:

public function render()
{
    return view('livewire.post-create')
            ->extends('layouts.app')
            ->section('content');
}

Alasan kami menambahkan ->section('content') ke view kami adalah karena di dalam file layout kami, kami menampilkan bagian itu dengan garis @yield('content').

Selanjutnya, kami akan menambahkan <h1>ke view komponen kami resources/views/livewire/post-create.blade.php, seperti:

<div>
    <div class="container mx-auto px-4">
        <h1 class="text-4xl mt-6 tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">Create Post</h1>
        <p class="text-lg mt-2 text-gray-600">Start crafting your new post below.</p>
    </div>
</div>

Sekarang, jika kita mengunjungi halaman blog baru kita di blog.test/post/create, kita akan melihat halaman berikut:

Sekarang kita dapat melanjutkan untuk membangun fungsionalitas buat posting .

Buat Fungsi Posts

Untuk membuat postingan baru, kita membutuhkan model Post yang dapat kita buat dengan menjalankan:

 

php artisan make:model Post

Kami memerlukan formulir untuk membuat postingan baru di dalam file tampilan Livewire kami resources/views/livewire/post-create.blade.php:

<div>
    <div class="container mx-auto px-4">
        <h1 class="text-4xl mt-6 tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">Create Post</h1>
        <p class="text-lg mt-2 text-gray-600">Start crafting your new post below.</p>
        <div class="space-y-8 divide-y divide-gray-200 w-1/2 mt-10">

            @if($saveSuccess)
                <div class="rounded-md bg-green-100 rounded-lg p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-green-800">Successfully Saved Post</h3>
                            <div class="mt-2 text-sm text-green-700">
                                <p>Your new post has been saved.</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="sm:col-span-6">
                <label for="title" class="block text-sm font-medium text-gray-700">
                    Post Title
                </label>
                <div class="mt-1">
                    <input id="title" wire:model="post.title" name="title" class="block w-full transition duration-150 ease-in-out appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5">
                </div>
            </div>
            <div class="sm:col-span-6 pt-5">
                <label for="body" class="block text-sm font-medium text-gray-700">Body</label>
                <div class="mt-1">
                    <textarea id="body" rows="3" wire:model="post.body" class="shadow-sm focus:ring-indigo-500 appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"></textarea>
                </div>
                <p class="mt-2 text-sm text-gray-500">Add the body for your post.</p>
            </div>
            <div wire:click="savePost" class="inline-flex justify-center px-4 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-500 border border-transparent rounded-md hover:bg-indigo-600 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 cursor-pointer">Submit Post</div>
        </div>
    </div>
</div>

Pada HTML di atas, kita memiliki title dan body masukan di mana kita mengikat nilai ke Livewire dengan wire:model.

"Kami juga memiliki peringatan sukses yang akan ditampilkan jika $saveSuccessbenar."

Ok, sekarang kita perlu menambahkan logika ke class Livewire kita app/Http/Livewire/PostCreate.php, agar kita dapat dengan mudah membuat postingan baru.

<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Illuminate\Support\Str;
use Livewire\Component;

class PostCreate extends Component
{
    public $saveSuccess = false;
    public $post;

    protected $rules = [
        'post.title' => 'required|min:6',
        'post.body' => 'required|min:6',
    ];

    public function mount(){
        $this->post = new Post;
    }

    public function savePost(){
        $this->post->user_id = 1;
        $this->post->slug = Str::slug($this->post->title);
        $this->post->save();
        $this->saveSuccess = true;
    }

    public function render()
    {
        return view('livewire.post-create')
                ->extends('layouts.app')
                ->section('content');
    }
}

"Perhatikan bahwa kami belum memiliki sistem otentikasi kami, jadi kami hanya mengatur user_id ke 1 untuk membuat posting."

Jika kita mengunjungi route buat posting kita, kita dapat membuat posting pertama kita.

Menampilkan Posting

Menampilkan postingan sangatlah mudah. Kami tahu bahwa kami ingin pengguna untuk mengunjungi /post/{slug}, dan aplikasi kami akan mencari posting yang sesuai slug dan menampilkannya di halaman.

Mari buat komponen Livewire baru dengan perintah berikut:

php artisan make:livewire Post

Dan, kami akan memiliki 2 file baru yang dibuat di:

CLASS: app/Http/Livewire/Post.php
VIEW:  resources/views/livewire/post.blade.php

Jika kita melompat ke kita app/Http/Livewire/Post.php, kita dapat menambahkan kode berikut:

<?php

namespace App\Http\Livewire;

use App\Models\Post as BlogPost;
use Livewire\Component;

class Post extends Component
{
    public $post;

    public function mount($slug){
        $this->post = BlogPost::where('slug', $slug)->first();
    }

    public function render()
    {
        return view('livewire.post')
                ->extends('layouts.app')
                ->section('content');
    }
}

Kami juga perlu menambahkan rute yang memetakan ke controller Livewire kami di dalam routes/web.php:

Route::get('post/{slug}', \App\Http\Livewire\Post::class);

Terakhir, kita dapat menampilkan konten posting kita di dalam file tampilan Livewire yang terletak di resources/views/livewire/post.blade.php:

<div>
    <div class="max-w-4xl mx-auto py-20">
        <h1>{{ $post->title }}</h1>
        <p>{!! $post->body !!}</p>
    </div>
</div>

Jika kami mengunjungi rute berikut:, blog.test/post/my-awesome-post kami akan melihat pos baru kami di depan kami.

Jelas, postingan kami tidak terlihat terlalu cantik, tetapi kami dapat dengan mudah mengubahnya dengan menyertakan plugin tipografi TailwindCSS .

Style Halaman Posting

Berkat Plugin Tipografi TailwindCSS, kami dapat dengan mudah mengatur gaya halaman kami dengan memasukkannya ke dalam proyek kami.

Biasanya, Anda akan menginstalnya melalui NPM; Namun, kami hanya akan memasukkan tautan CDN di file resources/views/layouts/app.blade.php utama kami :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel Blog')</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css">
    <link rel="stylesheet" href="https://unpkg.com/@tailwindcss/[email protected]/dist/typography.min.css" />
    @livewireStyles
</head>
<body>

    <x-header></x-header>

    @yield('content')

    @livewireScripts

</body>
</html>

Sekarang, kita dapat memodifikasi file resources/views/livewire/post.blade.php dan menambahkan prose lg:prose-xl class ke div penampung kita :

<div>
    <div class="max-w-4xl mx-auto py-20 prose lg:prose-xl">
        <h1>{{ $post->title }}</h1>
        <p>{!! $post->body !!}</p>
    </div>
</div>

Sekarang, jika kita mengunjungi postingan blog yang sama, kita akan melihat postingan yang didesain dengan indah di depan kita.

Menampilkan Daftar Posting

Terakhir, kami akan menampilkan posting kami di file resources/views/home.blade.php. Kita dapat dengan mudah mengulang semua posting kita dengan menambahkan kode berikut:

@extends('layouts.app')

@section('content')

    <div class="container mx-auto p-5">
        <h1 class="text-4xl mt-32 text-center tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
            Welcome to The Blog
        </h1>

        <div class="mt-10 max-w-xl mx-auto">
            @foreach(\App\Models\Post::all() as $post)
                <div class="border-b mb-5 pb-5 border-gray-200">
                    <a href="/post/{{ $post->slug }}" class="text-2xl font-bold mb-2">{{ $post->title }}</a>
                    <p>{{ Str::limit($post->body, 100) }}</p>
                </div>
            @endforeach
        </div>
    </div>

@endsection

Jika kita mengunjungi beranda blog kita, kita akan melihat daftar posting di mana kita dapat mengklik judulnya untuk mengunjungi halaman posting tunggal.

Lebih Banyak Fungsionalitas

Ini adalah contoh sederhana bagaimana Anda bisa mendapatkan pengaturan blog sederhana menggunakan Laravel dan Livewire; namun, masih banyak yang ingin Anda tambahkan.

Hal berikutnya yang mungkin ingin Anda tambahkan adalah fitur unggah gambar, di mana setiap posting dapat memiliki gambar unggulan. Anda mungkin juga ingin meminta pengguna untuk login sebelum mengirimkan posting.

Saya harap tutorial ini bermanfaat bagi Anda. Pastikan untuk mengikuti saya untuk mendapatkan pemberitahuan tentang lebih banyak tutorial yang saya rilis di Laravel dan Livewire.

 

Selamat Coding ✌️

create a blog in laravel and livewire livewire laravel