Blog - Queen Bee

Beranda
Coding

Cara Membuat Folder dan memanggil Design : Laravel Livewire Tailwind CSS dan Plugin Flowbite

Pelajari cara membuat folder desain dan memanggil desain menggunakan Laravel Livewire, Tailwind CSS, dan plugin Flowbite, optimalkan proyek web Anda
Membuat Folder Design dan memanggil Design menggunakan Laravel Livewire Tailwind CSS dan Plugin Flowbite

Frondend dan Backend Tools Programming

Membuat Folder Design dan memanggil Design yang ingin di tampilkan menggunakan Laravel, Livewire, Tailwind CSS dan Plugin Flowbite

Syarat agar bisa tampil kalian harus melengkapi installan :

  1. Install Gitbash / Powershell Ori Windows
  2. Install NodeJS (Jika diperlukan)
  3. Install XAMPP include PHP (jika menggunakan server). Jika Server error, kalian tinggal ganti Port 80 menjadi 8080
  4. Install Composer
  5. Install Laravel 9
  6. Install Vite (build tool modern Vue.js)
  7. Install Livewire
  8. Install Tailwind CSS
  9. Install Plugin Flowbite

1. Membuat Komponen Livewire :

Pertama, buat komponen Livewire menggunakan perintah artisan:

php artisan make:livewire hero-style1
Perintah ini akan membuat dua file:

  1. app/Http/Livewire/HeroStyle1.php (komponen backend)
  2. resources/views/livewire/hero-style1.blade.php (template frontend)

2. Masuk kefolder template frontend :

edit atau design sesuka hati kalian di resources/views/livewire/hero-style1.blade.php

<section class="bg-white dark:bg-gray-900">
    <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
        <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">We invest in the world’s potential</h1>
        <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
        <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0">
            <a href="#" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
                Get started
                <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                </svg>
            </a>
            <a href="#" class="py-3 px-5 sm:ms-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-70">
                Learn more
            </a>  
        </div>
    </div>
</section>

3. Memanggil Design Tersebut kedalam Tampilan

buka folder resources/views/livewire/welcome.blade.php dan panggil @livewire('hero-style1')letakan dimana saja kalian ingin meletakan di dalam <body>

@livewire('hero-style1')

contoh code pemanggilan saya letakan dibawah navigasi :

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire</title>
    @livewireStyles
    @vite('resources/css/app.css')

</head>
<body>
    @livewire('navigasi-atas')
    @livewire('hero-style1')


    @livewireScripts
    @vite('resources/js/app.js')

</body>
</html>
gambar contoh Folder Design dan memanggil Design menggunakan Laravel Livewire Tailwind CSS dan Plugin Flowbite
Membuat Folder Design dan memanggil Design menggunakan Laravel Livewire Tailwind CSS dan Plugin Flowbite
Contoh Source Code Github