Menerapkan Bootstrap Ke Laravel

 Download Link Template:

https://startbootstrap.com/template/simple-sidebar 

https://github.com/startbootstrap/startbootstrap-simple-sidebar/archive/gh-pages.zip

1. Pindahkan Aset (CSS, JS, Gambar) ke Folder public

Folder public di Laravel adalah tempat yang bisa diakses langsung oleh browser.

1. Buka folder template Bootstrap yang sudah Anda unduh.

2. Cari folder seperti css, js, images, fonts, atau vendor.

3. Salin (copy) semua folder tersebut.

4. Buka folder proyek Laravel Anda, lalu masuk ke folder public.

5. Buat folder baru di dalam public dengan nama template (opsional, agar rapi).

6. Tempel (paste) semua folder aset tadi ke dalam folder public/template/

2. Buat File Master Layout Blade

Laravel menggunakan sistem templating bernama Blade. Praktik terbaiknya adalah membuat satu file layout utama (master) agar Anda tidak perlu mengulang kode header dan footer di setiap halaman.

1. Buka teks editor (VS Code), masuk ke folder resources/views/.

2. Buat folder baru bernama layouts.

3. Di dalam folder layouts, buat file baru bernama main.blade.php.

4. Buka file index.html dari template Bootstrap Anda, copy seluruh isinya, dan paste ke dalam main.blade.php.

3. Sesuaikan Path Aset dengan Fungsi asset()

File HTML dari template biasanya memanggil CSS/JS seperti ini: <link rel="stylesheet" href="css/style.css">

Di Laravel, Anda harus membungkus path tersebut dengan fungsi {{ asset() }} agar framework mengetahui lokasi absolut file tersebut di folder public. Ubah semua pemanggilan CSS, JS, dan Gambar di dalam main.blade.php menjadi seperti ini:

Sebelum:

<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

<link href="css/styles.css" rel="stylesheet" />

 <script src="js/scripts.js"></script>

<img src="images/logo.png">

<script src="js/main.js"></script>

Sesudah:

<link rel="icon" type="image/x-icon" href="{{ asset('template/assets/favicon.ico') }}" />

<link rel="stylesheet" href="{{ asset('template/css/style.css') }}">

<script src="{{ asset('template/js/scripts.js') }}"></script>

<img src="{{ asset('template/images/logo.png') }}">

<script src="{{ asset('template/js/main.js') }}"></script>

4. Pisahkan Area Konten dengan @yield

Masih di dalam main.blade.php, cari bagian HTML yang merupakan konten utama (bagian yang akan berubah-ubah tiap halaman, misalnya isi artikel atau form). Hapus elemen konten tersebut dan ganti dengan kode ini:

Sebelum:

   <div class="container-fluid">

                    <h1 class="mt-4">Simple Sidebar</h1>

                    <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>

                    <p>

                        Make sure to keep all page content within the

                        <code>#page-content-wrapper</code>

                        . The top navbar is optional, and just for demonstration. Just create an element with the

                        <code>#sidebarToggle</code>

                        ID which will toggle the menu when clicked.

                    </p>

   </div>

Sesudah:

        <!-- Page content-->

                <div class="container-fluid">

                    <!-- Area ini yang akan diganti-ganti isinya -->

                    @yield('konten')

                </div>

5. Selanjutnya, buat file baru untuk menampung teks konten yang tadi dihapus. Simpan file ini sebagai resources/views/home.blade.php:

@extends('layouts.main')

@section('konten')

    <h1 class="mt-4">Simple Sidebar</h1>

    <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>

    <p>

        Make sure to keep all page content within the

        <code>#page-content-wrapper</code>

        . The top navbar is optional, and just for demonstration. Just create an element with the

        <code>#sidebarToggle</code>

        ID which will toggle the menu when clicked.

    </p>

@endsection

Untuk melihat hasil dari template yang sudah Anda buat, Anda perlu mengarahkan route Laravel ke file home.blade.php tersebut dan menyalakan servernya.

Berikut adalah langkah-langkah untuk menjalankannya:

Langkah 1: Atur Route di web.php Buka file routes/web.php yang ada di dalam proyek Laravel Anda. Pastikan route utama (/) memanggil view home yang baru saja Anda buat.

Ubah kodenya menjadi seperti ini:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

    return view('home'); // Memanggil file resources/views/home.blade.php

});

Langkah 2: Jalankan Server Laravel

1. Buka Terminal di VS Code (klik menu Terminal > New Terminal di bagian atas).

2. Pastikan posisi terminal sudah berada di dalam folder proyek Anda (misalnya laravel10/coba1).

3. Ketik perintah berikut lalu tekan Enter: php artisan serve

Jika Menemukan error seperti ini:

Jika Anda meletakkan file home.blade.php di dalam folder layouts (sehingga letaknya menjadi resources/views/layouts/home.blade.php), maka pemanggilan view di dalam file routes/web.php harus disesuaikan.

Laravel menggunakan tanda titik (.) untuk membaca file yang berada di dalam sub-folder.

Solusi 1: Ubah kode di routes/web.php Jika Anda ingin tetap meletakkannya di sana, ubah rute Anda menjadi seperti ini:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

    return view('layouts.home'); // Memanggil file resources/views/layouts/home.blade.php

});

Jika Tampilannya:

Periksa Penulisan Nama File (styles.css vs style.css) Buka panel sebelah kiri di VS Code dan arahkan ke folder public/template/css/. Perhatikan baik-baik nama file CSS yang ada di sana. Biasanya, template Start Bootstrap menggunakan nama styles.css (dengan akhiran huruf s).

Rubah Klaimat Simple Sidebar dengan Tampilan: Selamat Datang

Selamat Datang Di Halaman Web pertamaku

@extends('layouts.main')

@section('konten')

    <h1 class="mt-4">Selamat Datang</h1>

    <p>Selamat Datang Di Halaman Web pertamaku</p>

@endsection

Tugas:

menu halaman Profile ditambahkan isinya menjadi profile pribadi nama saya agung dan ada photonya

1. Siapkan File Foto 

Siapkan file foto Anda (misalnya bernama agung.jpg). Buat folder baru bernama images di dalam folder public pada proyek Laravel Anda, lalu tempelkan (paste) foto tersebut ke dalamnya. Posisi filenya harus berada di public/images/agung.jpg.

2. Buat File View profile.blade.php 

Buka folder resources/views/ dan buat file baru bernama profile.blade.php. Salin kode berikut ke dalamnya. Kode ini menggunakan fitur Card dari Bootstrap agar foto dan teks terlihat rapi.

@extends('layouts.main')

@section('konten')

    <h1 class="mt-4">Profil Pribadi</h1>

   

    <div class="card mt-4 shadow-sm" style="max-width: 400px;">

        <!-- Memanggil gambar dari folder public/images/ -->

        <img src="{{ asset('images/agung.jpg') }}" class="card-img-top" alt="Foto Agung">

       

        <div class="card-body text-center">

            <h3 class="card-title">Agung</h3>

            <p class="card-text text-muted">Web Developer</p>

            <p class="card-text">Halo! Ini adalah halaman profil pribadi saya. Saya sedang belajar menggunakan framework Laravel dan Bootstrap.</p>

        </div>

    </div>

@endsection

3. Buat Route Baru di web.php Buka file routes/web.php dan tambahkan pengaturan route baru untuk halaman profil di bawah route utama Anda:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

    return view('layouts.home'); // Memanggil file resources/views/layouts/home.blade.php

});

// Route baru untuk halaman profil

Route::get('/profile', function () {

    return view('layouts.profile');

});

4. Hubungkan Menu Sidebar ke Halaman Profil Buka file master layout Anda di resources/views/layouts/main.blade.php. Cari daftar menu sidebar, tepatnya pada baris tulisan Profile:

<a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>

Ubah isi href="#!" menjadi href="{{ url('/profile') }}" agar tombol tersebut mengarahkan pengguna ke halaman profil:

Jika Foto Profile Ga Muncul:

Letak posisi folder fotonya:

      <img src="{{ asset('template/images/agung.jpg') }}" class="card-img-top" alt="Foto Agung">

Sekarang Rapihkan

Buka file resources/views/profile.blade.php Anda dan ubah seluruh isinya menjadi kode berikut:

@extends('layouts.main')

@section('konten')

    <h1 class="mt-4 mb-4">Profil Pribadi</h1>

   

    <div class="card shadow-sm mb-3" style="max-width: 800px;">

        <div class="row g-0">

            <!-- Bagian Kiri: Foto -->

            <div class="col-md-4 d-flex align-items-center">

                <img src="{{ asset('template/images/agung.jpg') }}" class="img-fluid rounded-start" alt="Foto Agung" style="width: 100%; height: auto; object-fit: contain;">

            </div>

           

            <!-- Bagian Kanan: Teks Teks -->

            <div class="col-md-8">

                <div class="card-body">

                    <h3 class="card-title">Agung</h3>

                    <p class="card-text text-muted mb-4">Web Developer</p>

                   

                    <h5 class="mt-3">Tentang Saya</h5>

                    <p class="card-text">

                        Halo! Ini adalah halaman profil pribadi saya. Saya sedang belajar mengembangkan aplikasi website menggunakan framework Laravel dan desain antarmuka menggunakan Bootstrap.

                    </p>

                   

                    <h5 class="mt-4">Kontak</h5>

                    <ul class="list-unstyled">

                        <li><strong>Email:</strong> agung@example.com</li>

                        <li><strong>Lokasi:</strong> Indonesia</li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

@endsection

Buat Form operator:

PHP

Route::get('/operator', function () {
    return view('layouts.operator'); // Menambahkan prefix layouts.
});

Sumber: https://gemini.google.com/app/b9465e80b7b9eda0

Cara Agar Form yg dituju Ke halaman Utama

 server Laravel Anda sebenarnya sudah berjalan normal dan berhasil menampilkan halaman bawaan Laravel. Alasan file form1.blade.php Anda tidak tampil adalah karena browser di sebelah kanan sedang mengakses alamat utama ([http://127.0.0.1:8000/](http://127.0.0.1:8000/)), yang secara bawaan diarahkan ke halaman awal Laravel (welcome.blade.php).

Untuk menampilkan form buatan Anda, Anda perlu menyesuaikan pengaturan Route atau mengakses URL yang tepat.

1.Buka File web.php:

Klik tab web.php yang sudah terbuka di bagian atas VS Code Anda (file ini berada di dalam folder routes/).

2.Ubah Route Utama (Cara 1):

Jika Anda ingin form langsung tampil saat membuka [http://127.0.0.1:8000/](http://127.0.0.1:8000/), cari baris kode ini di dalam web.php:

PHP

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

Ubah teks 'welcome' menjadi nama file view Anda (tanpa akhiran .blade.php), yaitu 'form1':

PHP

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

Verifikasi: Simpan file (Ctrl+S / Cmd+S), lalu klik tombol Refresh (muat ulang) pada browser di sebelah kanan. Form Anda akan langsung muncul.

3.Ketik URL Spesifik (Cara 2):

Jika di dalam web.php Anda sebelumnya sudah membuat route khusus untuk form tersebut (misalnya diarahkan ke FormControllerLatih2), Anda cukup menambahkan rute tersebut di akhir URL. Klik pada kolom alamat browser di bagian atas panel kanan (yang saat ini bertuliskan [http://127.0.0.1:8000/](http://127.0.0.1:8000/)), lalu tambahkan nama route Anda, misalnya menjadi: [http://127.0.0.1:8000/form1](http://127.0.0.1:8000/form1) Verifikasi: Tekan Enter. Jika route sesuai dengan yang Anda tulis di web.php, form akan tampil.

Menghubungkan Form Laravel

Untuk menghubungkan data dari Form 1 ke Form 2 (atau halaman hasil) di Laravel, Anda bisa memanfaatkan Route, Controller, dan Blade View.

Berikut adalah panduan langkah demi langkah untuk membuat contoh kasus input nama dari Form 1 lalu menampilkannya menjadi "Nama saya ..." di form/halaman berikutnya.

1. Buat Route (routes/web.php)

Tambahkan dua route: satu untuk menampilkan Form 1, dan satu lagi untuk menerima data dan menampilkannya di Form 2.

<?php

use App\Http\Controllers\FormController;

use Illuminate\Support\Facades\Route;

// Menampilkan Form 1

Route::get('/form1', [FormController::class, 'index'])->name('form1');

// Menerima data dari Form 1 dan mengarahkannya ke Form 2

Route::post('/form2', [FormController::class, 'process'])->name('form2');

Route::get('/', function () {

    return view('welcome');

});

2. Buat Controller (FormController.php)

Buat controller menggunakan Artisan CLI

php artisan make:controller FormController, lalu isi kodenya seperti ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller

{

    // Menampilkan halaman Form 1

    public function index()

    {

        return view('form1');

    }

    // Memproses data dari Form 1 dan mengirimkannya ke Form 2

    public function process(Request $request)

    {

        // Validasi input nama (opsional tapi disarankan)

        $request->validate([

            'nama' => 'required|string|max:255',

        ]);

        $nama = $request->input('nama');

        // Kirim data nama ke view form2

        return view('form2', compact('nama'));

    }

}

3. Buat View Form 1 (resources/views/form1.blade.php)

Buat file Blade untuk form pertama yang berisi input text untuk nama.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form 1</title> </head> <body> <h2>Form 1: Masukkan Nama</h2> <form action="{{ route('form2') }}" method="POST"> @csrf <label for="nama">Nama:</label> <input type="text" id="nama" name="nama" required> <button type="submit">Kirim</button> </form> </body> </html>

4. Buat View Form 2 / Hasil (resources/views/form2.blade.php)

Buat file Blade kedua untuk menangkap dan menampilkan data yang dikirimkan.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Form 2 / Hasil</title>

</head>

<body>

    <h2>Form 2: Hasil Output</h2>

    

    <!-- Menampilkan hasil input dari Form 1 -->

    <p>Nama saya <strong>{{ $nama }}</strong></p>

    <br>

    <a href="{{ route('form1') }}">Kembali ke Form 1</a>

</body>

</html>

php artisan serve

Setelah Anda menyimpannya, silakan refresh kembali halaman browser Anda ([http://127.0.0.1:8000/form1](http://127.0.0.1:8000/form1))

Penjelasan Singkat:

1. form1.blade.php mengirimkan data menggunakan metode POST ke route form2 dengan menyertakan @csrf (keamanan wajib di Laravel).

2. FormController menangkap data tersebut melalui parameter Request $request, lalu meneruskannya menggunakan fungsi view('form2', compact('nama')).

3. form2.blade.php mencetak variabel $nama menggunakan sintaks Blade {{ $nama }} sehingga tampil sebagai "Nama saya [isi input]".

Penjelasan:

Secara sederhana, Route dalam Laravel (dan pengembangan web pada umumnya) berfungsi sebagai "pintu gerbang" atau "pengatur lalu lintas" yang menentukan ke mana pengguna harus diarahkan saat mereka mengakses alamat (URL) tertentu di browser.

Berikut adalah fungsi utama dari pembuatan route:

1. Menghubungkan URL dengan Logika (Controller / View)

Route bertugas mencocokkan URL yang diketik pengguna dengan fungsi atau file tampilan yang sesuai.

• Contoh: Saat pengguna mengakses [domain.com/form1](https://domain.com/form1), route memberi tahu Laravel untuk membuka file tampilan form1.

2. Mengatur Jenis Request (HTTP Method)

Route membedakan bagaimana data dikirimkan atau diminta, seperti:

• GET: Digunakan untuk menampilkan halaman (misal: membuka form).

• POST: Digunakan untuk mengirim data baru ke server (misal: saat tombol submit ditekan).

• PUT / DELETE: Digunakan untuk memperbarui atau menghapus data.

3. Mempermudah Pengelolaan URL (Named Routes)

Dengan memberikan nama pada sebuah route (contoh: ->name('form1')), kita bisa memanggil URL tersebut di dalam file Blade cukup dengan kodenya saja ({{ route('form1') }}).

• Keuntungan: Jika suatu saat alamat URL diubah dari /form1 menjadi /halaman-pendaftaran, Anda tidak perlu mengubah link di seluruh file project satu per satu.

4. Menjaga Keamanan (Middleware)

Route memungkinkan kita memasang pengaman (middleware). Kita bisa mengatur agar sebuah route hanya bisa diakses oleh pengguna yang sudah login (terotentikasi) atau memblokir akses yang tidak sah.

Analogi Sederhana: Bayangkan Route seperti resepsionis di sebuah gedung. Ketika seorang tamu (pengguna) datang menanyakan alamat ruangan tertentu (URL), resepsionis bertugas mengecek tujuannya dan mengarahkannya ke ruangan yang benar (Controller atau View).

Secara sederhana, Controller dalam Laravel berfungsi sebagai "otak" atau pusat pengolah logika dari sebuah aplikasi.

Jika Route bertugas sebagai pintu gerbang (menentukan URL), maka Controller adalah tempat Anda menuliskan instruksi apa yang harus dikerjakan oleh aplikasi ketika pintu tersebut dibuka.

Berikut adalah fungsi utama dari pembuatan Controller:

1. Memisahkan Logika Program (Separation of Concerns)

Tanpa Controller, semua kode pemrograman (seperti logika database, validasi, dan pengolahan data) harus ditulis langsung di dalam file routes/web.php. Hal ini akan membuat file route menjadi sangat panjang, berantakan, dan sulit dirawat. Dengan Controller, kode menjadi rapi karena dipisah ke dalam file khusus.

2. Memproses Data dari Pengguna (Request & Validation)

Controller bertugas menangkap data yang dikirimkan oleh pengguna melalui form (seperti input nama yang kita buat sebelumnya), lalu memprosesnya. Anda juga bisa melakukan validasi data di sini untuk memastikan input dari pengguna sudah benar dan aman sebelum diolah lebih lanjut.

3. Menghubungkan Database dengan Tampilan (Model & View)

Controller bertugas sebagai jembatan:

• Mengambil data dari database (melalui Model).

• Mengolah data tersebut jika diperlukan.

• Mengirimkannya ke halaman tampilan (View) agar bisa dibaca oleh pengguna.

Analogi Sederhana di Restoran:

• Route adalah Pelayan yang menerima pesanan Anda di meja (mengarahkan URL).

• Controller adalah Koki di dapur yang mengolah bahan-bahan mentah menjadi makanan yang siap saji sesuai pesanan.

• View adalah Piring/Makanan yang akhirnya disajikan kembali ke hadapan Anda.

Studi Kasus 2:

FormControllerLatih2:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormControllerLatih2 extends Controller

{

    // Menampilkan halaman Form 1

    public function index()

    {

        return view('formhitung');

    }

    // Memproses data dari Form 1 dan mengirimkannya ke Form 2

    public function process(Request $request)

    {

   

        $nama = $request->input('nama');

        $nilai1 = $request->input('nilai1');

        $nilai2 = $request->input('nilai2');

       // Lakukan proses perhitungan (Contoh: Penjumlahan)

        // Anda bisa ubah operatornya menjadi +, -, *, atau /

        $hasil = ($nilai1 + $nilai2)/2;

        if ($hasil > 80) {

            $ket = "A";

        } else  if ($hasil > 60) {

            $ket = "B";

        } else  if ($hasil > 40) {

            $ket = "C";

        } else  if ($hasil > 20) {

            $ket = "D";

        } else {

            $ket = "E";

   

        }

        // Kirim data nama ke view form2

        return view('formhasil', compact('nama', 'nilai1', 'nilai2', 'hasil', 'ket'));

    }

}

Web:

<?php

use App\Http\Controllers\FormControllerLatih2;

use Illuminate\Support\Facades\Route;

// Menampilkan Form 1

Route::get('/formhitung', [FormControllerLatih2::class, 'index'])->name('formhitung');

// Menerima data dari Form 1 dan mengarahkannya ke Form 2

Route::post('/formhasil', [FormControllerLatih2::class, 'process'])->name('formhasil');

Route::get('/', function () {

    return view('welcome');

});

FormHitung.Blade.php

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Form Hitung</title>

</head>

<body>

    <h2>Form Hitung: Masukkan Nilai</h2>

    <form action="{{ route('formhasil') }}" method="POST">

        @csrf

        <label for="nama">Nama:</label>

        <input type="text" id="nama" name="nama" required>

        <label for="nilai1">Nilai 1:</label>

        <input type="number" id="nilai1" name="nilai1" required>

        <label for="nilai2">Nilai 2:</label>

        <input type="number" id="nilai2" name="nilai2" required>

        <button type="submit">Kirim</button>

    </form>

</body>

</html>

FormHasil.Blade.php

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Form Hasil</title>

</head>

<body>

    <h2>Form Hasil: Hasil Output</h2>

   

    <!-- Menampilkan hasil input dari Form 1 -->

    <p>Nama saya <strong>{{ $nama }}</strong></p>

    <p>Nilai 1: <strong>{{ $nilai1 }}</strong></p>

    <p>Nilai 2: <strong>{{ $nilai2 }}</strong></p>

    <p> Hasil Penjumlahan: <strong>{{ $hasil }}</strong></p>

    <p> Keterangan: <strong>{{ $ket }}</strong></p>

    <br>

    <a href="{{ route('formhitung') }}">Kembali ke Form Hitung</a>

</body>

</html>