close

Membangun Tata Letak dengan Laravel- Membuat Antarmuka yang Fleksibel dan Dapat Dipelihara

Pada Laravel, tata letak memainkan peran penting dalam membangun antarmuka pengguna untuk aplikasi web. Tata letak mewakili keseluruhan struktur laman web, termasuk bagian umum seperti header, footer  dan sidebar. Pada artikel ini, kita akan mengeksplorasi cara membuat tata letak Laravel untuk membuat antarmuka yang fleksibel dan dapat dipelihara.

Pertama, mari buat tata letak dasar untuk situs web kita. Mulailah dengan membuat file bernama app.blade.php di direktori. File ini akan berfungsi sebagai tata letak utama untuk seluruh situs web. resources/views/layouts

Berikut adalah contoh konten untuk app.blade.php file tersebut:

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

Dalam tata letak ini, kami menggunakan @yield arahan untuk menentukan bagian dinamis dalam tata letak. Misalnya, @yield('title') izinkan anak untuk mengganti dan menyetel judul halaman. Demikian pula, memungkinkan anak untuk menyisipkan konten utama halaman. views @yield('content') views

Setelah tata letak dibuat, kita dapat membuat anak yang menggunakan tata letak ini. Misalnya, untuk membuat halaman dengan tata letak yang mirip, buatlah sebuah file bernama di direktori. File ini akan memperluas  tata letak dan menentukan konten spesifik untuk halaman tersebut: views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

Dalam contoh di atas, kami menggunakan @extends direktif untuk mewarisi app.blade.php  tata letak. Selanjutnya, kami menggunakan @section direktif untuk menentukan konten spesifik untuk bagian title  dan content  halaman.

Terakhir, kita perlu menentukan rute untuk menautkan URL ke masing-masing. views

Misalnya, dalam routes/web.php  file, Anda dapat menambahkan rute berikut:

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

Dalam contoh ini, URL "/" ditautkan ke welcome.blade.php view, sedangkan /about URL ditautkan ke about.blade.php view.

Kesimpulannya, membuat tata letak Laravel memungkinkan Anda membuat antarmuka bersama untuk aplikasi web Anda dan mengelola bagian umum seperti header, footer dan sidebar. Dengan menggunakan tata letak dan anak, Anda dapat membangun antarmuka yang fleksibel dan dapat dipelihara di. views Laravel