close

Izrada izgleda s Laravel- Stvaranjem fleksibilnih i održivih sučelja

U Laravel, izgled igra značajnu ulogu u izgradnji korisničkog sučelja za web aplikaciju. Izgled predstavlja cjelokupnu strukturu web-stranice, uključujući uobičajene odjeljke poput header, footer  i sidebar. U ovom ćemo članku istražiti kako ugraditi izglede za Laravel stvaranje fleksibilnih sučelja koja se mogu održavati.

Prvo, napravimo osnovni izgled za našu web stranicu. Započnite stvaranjem datoteke s imenom app.blade.php u direktoriju. Ova datoteka služit će kao glavni izgled cijele web stranice. resources/views/layouts

Evo primjera sadržaja datoteke app.blade.php:

<!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>

U ovom izgledu koristimo se @yield direktivama za definiranje dinamičkih odjeljaka unutar izgleda. Na primjer, @yield('title') omogućuje djetetu nadjačavanje i postavljanje naslova stranice. Slično, omogućuje djetetu umetanje glavnog sadržaja stranice. views @yield('content') views

Nakon što je izgled stvoren, možemo stvoriti dijete koje koristi ovaj izgled. Na primjer, da biste stvorili stranicu sa sličnim izgledom, stvorite datoteku pod nazivom u direktoriju. Ova datoteka će proširiti  izgled i definirati određeni sadržaj za stranicu: 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

U gornjem primjeru koristimo @extends direktivu za nasljeđivanje app.blade.php  izgleda. Zatim koristimo @section direktivu za definiranje specifičnog sadržaja za title  i content  odjeljke stranice.

Konačno, moramo definirati rute za povezivanje URL-ova s ​​odgovarajućim. views

Na primjer, u routes/web.php  datoteku možete dodati sljedeće rute:

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

U ovom primjeru, URL "/" povezan je s welcome.blade.php view, dok /about je URL povezan s about.blade.php view.

Zaključno, izrada izgleda u Laravel omogućuje vam stvaranje zajedničkog sučelja za vašu web aplikaciju i upravljanje uobičajenim odjeljcima kao što su header, footer i sidebar. Korištenjem izgleda i podređenog, možete izgraditi fleksibilna sučelja koja se mogu održavati u. views Laravel