Direktif Blade hasStack di Laravel dan kontrol tumpukan lanjutan

Informatec Digital » Sumber daya » Direktif Blade hasStack di Laravel dan kontrol tumpukan lanjutan

Jika Anda bekerja dengan Laravel setiap hari, cepat atau lambat Anda akan berhadapan dengan Blade, arahannya, dan, tentu saja,... tumpukan tampilan dan gagasan tentang arahan hasStack hipotetis untuk mengelolanya dengan lebih baik. Anda mungkin terbiasa menggunakan templat PHP klasik, atau mungkin terbiasa dengan React atau Vue, tetapi ketika Anda benar-benar memahami Blade dan semua yang ditawarkannya (termasuk tumpukan), saat itulah cara Anda mengelola tampilan akan berkembang pesat.

Dalam artikel ini kita akan membahas hal-hal yang lebih detail: Anda akan melihat bagaimana Dokumen ini memberikan penjelasan sangat rinci tentang cara kerja Blade, apa saja arahan kontrol, bagaimana tata letak, komponen, slot, atribut, otorisasi, dan lingkungan disusun, dan dalam konteks tersebut, bagaimana konsep tumpukan dan arahan hasStack-type cocok di dalamnya. untuk menentukan apakah ada konten yang ditumpuk sebelum dirender. Semua ini dilengkapi contoh praktis dan pendekatan realistis yang dirancang untuk proyek Laravel modern.

Apa itu Blade dan mengapa penting untuk memahami arahannya?

Blade adalah mesin templat Laravel resmiIni tidak memaksa Anda untuk berhenti menggunakan PHP, tetapi memberi Anda sintaksis yang jauh lebih bersih untuk mencampur logika presentasi dan HTML tanpa harus terus-menerus membuka dan menutup tag. Setiap saat. Setiap template .blade.php Ini dikompilasi menjadi PHP murni dan di-cache di storage/framework/views, sehingga overhead waktu proses menjadi minimal.

Tampilan bilah biasanya disimpan di sumber daya/tampilan dan dikembalikan dari rute atau pengontrol menggunakan helper view()Anda dapat meneruskan data ke helper ini dalam argumen kedua (array asosiatif, compact()dll.), dan dalam pandangan mereka dikonsumsi dengan sintaksis kunci ganda untuk menampilkan konten yang lolos atau dengan tanda seru untuk konten yang tidak lolos.

Keuntungan utama Blade adalah ia menawarkan arahan khusus (kata-kata yang dimulai dengan @) untuk menangani kondisi, loop, otorisasi, tumpukan skrip, komponen, slot, validasi, lingkungan… Semua ini membuat kode tampilan jauh lebih mudah dibaca dan dipelihara daripada campuran kacau PHP klasik dengan echo dan HTML biasa.

Sintaks Blade Dasar: echo, escape, dan verbatim

Operasi paling umum dalam tampilan adalah menampilkan data. Dengan Blade, untuk mencetak isi variabel, cukup gunakan {{ }}, yang secara internal diterjemahkan menjadi echo e($variable) dan oleh karena itu, Melarikan diri dari entitas HTML untuk mencegah XSS:

Tampilkan variabel yang lolos itu sesederhana:

{{ $name }}

Jika Anda ingin menampilkan HTML atau konten yang dibuat sebelumnya yang tidak boleh di-escape (misalnya, karena Anda mengendalikannya dan tahu itu aman), Anda dapat menggunakan sintaks {!! !!}yang menonaktifkan escape otomatis dan membiarkan browser menafsirkannya sebagaimana adanya:

{!! $htmlSeguro !!}

Jika Anda bekerja dengan kerangka kerja frontend yang juga menggunakan kunci (misalnya, Vue atau beberapa pustaka templat sisi klien), Blade memungkinkan Anda “melarikan diri” dari mesinnya sendiri dengan awalan @. Dengan cara ini, @{{ variabelJavascript }} Ini tidak akan ditafsirkan sebagai ekspresi Blade, tetapi akan tetap berada dalam HTML untuk diproses oleh kerangka kerja browser.

Bila Anda memiliki blok besar di mana Anda perlu sepenuhnya menghormati kunci ganda tanpa Blade menyentuhnya, Anda dapat mengelilinginya dengan direktif. @verbatim … @endverbatimSegala sesuatu di dalamnya akan dibiarkan tidak tersentuh, bantuan yang sangat berguna saat mengintegrasikan templat frontend yang rumit.

Struktur kontrol: if, switch, loop, dan variabel $loop

Blade menawarkan permainan lengkap arahan kontrol aliran Tag-tag ini membungkus sintaksis PHP dengan cara yang lebih mudah dibaca dan konsisten. Dalam praktiknya, logikanya hampir sama, tetapi Anda mendapatkan kejelasan dan menghindari penggunaan tag PHP yang berlebihan di dalam HTML.

Pernyataan if Mereka ditulis dengan @if, @elseif, @else dan mereka menutup dengan @endifAnda juga memiliki pintasan seperti @unless (negasi suatu kondisi), @isset untuk memverifikasi bahwa suatu variabel telah didefinisikan dan @empty untuk memeriksa apakah kosong.

Untuk skenario dengan beberapa nilai yang mungkin, arahan @mengalihkan mereplikasi struktur switch PHP dengan @case, @break, @default dan tutup dengan @endswitch, memfasilitasi beberapa kondisi yang mudah dibaca.

Mengenai loop, Anda memiliki @untuk, @untuk setiap y @ketika, Plus @forelseIni sangat berguna ketika Anda ingin mengulang suatu koleksi tetapi juga perlu menangani kasus daftar kosong tanpa menulis pernyataan if tambahan. @forelse ... @empty ... @endforelse Anda dapat menyajikan konten alternatif jika tidak ada elemen.

Saat Anda melakukan perjalanan melalui @untuk setiapBlade membuat variabel tersedia untuk Anda $loop, sebuah objek yang berisi informasi yang sangat berguna tentang iterasi saat ini: indeks, apakah itu putaran pertama atau terakhir, apakah indeks genap atau ganjil, berapa banyak total iterasi yang ada, atau bahkan akses ke loop induk dalam kasus loop bersarang menggunakan $loop->parent.

Pewarisan templat, tata letak, dan bagian

Dalam aplikasi dunia nyata, Anda tidak ingin mengulang header, menu, atau footer di setiap tampilan. Blade memungkinkan Anda untuk menentukan tata letak utama (biasanya disimpan di) resources/views/layouts/master.blade.php) yang diwarisi semua halaman. Di dalam tata letak, Anda menentukan area "kosong" dengan @yield dan sisa HTML umum tetap stabil.

Untuk menggunakan tata letak itu dari tampilan anak, Anda hanya perlu menunjukkan @extends('tata letak.master') dan nyatakan bagian yang ingin Anda isi menggunakan @bagian y @bagian akhir. Masing-masing @yield('nombre') gelar master akan sesuai dengan @section('nombre') menurut pandangan putrinya.

Selain itu, arahan tersebut @induk Ini memungkinkan Anda tidak hanya untuk menimpa suatu bagian, tetapi menambahkan konten di atas atau di bawah apa yang ditentukan tata letakIni sangat berguna di bilah sisi atau blok yang ingin Anda perluas, bukan ganti.

Jika Anda perlu menyertakan potongan HTML yang dapat digunakan kembali tanpa pewarisan penuh, Blade menyediakan @termasuk dan serangkaian arahan terkait lainnya: @includeIf, @includeWhen, @includeUnless y @includeFirstyang memungkinkan Anda menyertakan sub-tampilan secara bersyarat atau memilih yang pertama yang ada dalam daftar kemungkinan rute.

Untuk kasus di mana Anda mengulang fragmen kecil untuk setiap elemen dalam koleksi, arahan @setiap Ia menggabungkan foreach + include dalam satu baris, dan bahkan dapat menentukan tampilan alternatif untuk kasus di mana koleksi tiba dalam keadaan kosong.

Komponen blade, slot, dan atribut

Komponen blade adalah evolusi alami dari tata letak dan mencakup: mereka memungkinkan Anda untuk merangkum komponen antarmuka yang dapat digunakan kembali (tombol, peringatan, kartu, formulir…) dengan logika, properti, dan slotnya sendiri dengan konten yang dapat disuntikkan dari luar, semuanya dengan sintaksis yang sangat dekat dengan komponen kerangka kerja JS modern.

Ada dua jenis komponen utama: berbasis kelas (terletak di app/View/Components, dihasilkan dengan php artisan make:component) dan anonimyang hanya terlihat di resources/views/components tanpa kelas terkait. Dalam kedua kasus, keduanya ditampilkan dalam tampilan dengan label bertipe <x-alert /> o <x-forms.input />.

Komponen berbasis kelas menerima data melalui Atribut HTML (Dengan kebab-case terlihat dan camelCase dalam konstruktor), diekspos dalam tampilan komponen sebagai properti publik dan dapat memilih metode shouldRender() untuk memutuskan secara bersyarat apakah mereka harus ditampilkan.

Untuk konten yang fleksibel, komponen-komponennya memiliki fitur slotKonten utama diakses sebagai $slot di templat komponen, dan slot dengan nama didefinisikan menggunakan <x-slot name="titulo">...</x-slot> Saat menggunakan komponen. Dari dalam, Anda dapat memanggil metode komponen melalui $component dan bahkan memeriksa apakah slot kosong dengan $slot->isEmpty() atau jika memiliki konten nyata dengan $slot->hasActualContent().

Komponen-komponennya juga secara elegan mengelola atribut tambahan yang tidak cocok dengan properti konstruktor (misalnya class, id, data-*Semua ini dikelompokkan ke dalam “tas atribut” yang dapat diakses dengan $attributesyang dapat Anda render apa adanya atau dimanipulasi dengan metode seperti merge(), class(), prepend(), filter(), whereStartsWith(), has() o get().

Selain itu, Blade menyertakan arahan khusus untuk bentuk HTML umum: @diperiksa, @terpilih, @dengan disabilitas, @hanyabaca y @diperlukan, yang mencetak atribut terkait hanya jika kondisi yang diterimanya bernilai benar.

Tata letak menggunakan komponen dan pewarisan klasik

Dalam Laravel modern, semakin umum untuk mendefinisikan tata letak global aplikasi sebagai Komponen bilah (misalnya, <x-layout>) alih-alih hanya menggunakan pewarisan klasik @extendsDengan cara ini, tata letak dapat menerima slot, atribut, dan properti seperti komponen lainnya.

Pola tipikal melibatkan pembuatan komponen tata ruang dengan php artisan make:component LayoutTentukan struktur HTML dasar (header, tautan CSS, nav, footer) di template Anda dan gunakan {{ $slot }} untuk menyuntikkan konten utama. Slot bernama ditentukan secara opsional. title sehingga setiap halaman menentukan judulnya secara deklaratif.

Di sisi lain, opsi "klasik" masih ada dengan pewarisan templat melalui @extends, @section y @yieldIni banyak digunakan sebelum komponen dipopulerkan. Anda dapat terus menggabungkan kedua pendekatan tersebut, menggunakan tata letak berbasis komponen untuk semuanya, atau tetap menggunakan pewarisan tradisional jika proyek Anda sudah diatur seperti itu.

Dalam kedua kasus, tujuannya sama: jangan ulangi kerangka HTML di setiap tampilanPertahankan satu titik kebenaran untuk tata letak dan biarkan setiap halaman fokus hanya pada konten spesifiknya.

Sesi, autentikasi, lingkungan, dan otorisasi di Blade

Blade terintegrasi dengan sangat baik dengan kerangka kerja lainnya, jadi tidak terbatas hanya pada rendering HTML: ia juga memberi Anda arahan tingkat tinggi untuk berinteraksi dengan sesi, sistem autentikasi, lingkungan aplikasi, dan aturan otorisasi.

Untuk bagian otentikasi, ada arahan seperti @otorisasi y @tamuElemen-elemen ini hanya menampilkan kontennya jika pengguna terautentikasi atau tamu. Selain itu, Anda dapat menentukan penjaga tertentu sebagai argumen untuk menyempurnakan konteks autentikasi yang digunakan.

itu arahan lingkungan sebagai @production o @env('local') Mereka memungkinkan Anda mengondisikan bagian-bagian tampilan berdasarkan lingkungan Laravel saat ini. Sangat berguna, misalnya, untuk menampilkan banner, jejak debug, atau skrip hanya di lingkungan lokal atau staging.

Terkait dengan sesi tersebut, arahannya @sidang Memudahkan untuk memeriksa apakah sebuah kunci ada dalam sesi dan, jika ada, memberikan nilainya melalui variabel $ nilaiIni secara elegan memecahkan kasus klasik pesan kilat atau peringatan.

Untuk kebijakan dan otorisasi gaya gerbang, Blade menyediakan @Bisa, @tidak bisa y @cananyDengannya, Anda dapat menampilkan atau menyembunyikan tombol, tautan, atau seluruh blok, tergantung pada apakah pengguna memiliki izin untuk tindakan tertentu pada model atau kelas. Dikombinasikan dengan @guest o @authMereka memungkinkan pembangunan antarmuka yang jauh lebih aman dan jelas.

Formulir, validasi, dan penanganan kesalahan dalam tampilan

Saat Anda berpindah dari tampilan statis ke formulir, Anda akan melihat betapa praktisnya Blade. Laravel mengharuskan Anda untuk menyertakan Token CSRF Dalam semua formulir yang mengubah data, dan untuk menghindari keharusan menulis bidang tersembunyi secara manual, ada arahan @csrf, yang menghasilkan input dengan token yang sesuai.

Metode HTTP seperti PUT, PATCH atau DELETE Mereka disimulasikan melalui medan tersembunyi _method, dan Blade tersedia untuk Anda @metode('PUT') (atau PATCH/DELETE) untuk membuatnya secara otomatis dalam formulir.

Memperlihatkan kesalahan validasi Arahan tersebut ada @kesalahanyang terkait dengan bidang tertentu. Di dalamnya, Anda memiliki variabel yang tersedia. $pesan dengan teks kesalahan. Karena ini sebenarnya pernyataan if yang dikompilasi, Anda dapat menggunakan @else untuk menampilkan konten alternatif ketika tidak ada kesalahan.

objeknya kesalahan Pesan validasi selalu ada dalam tampilan dan mengelompokkan semua pesan validasi untuk permintaan saat ini. Terintegrasi dengan helper secara mulus. old(), yang memungkinkan Anda untuk "mengisi ulang" formulir dengan nilai yang dikirimkan oleh pengguna setelah kegagalan validasi, menyimpan entri dan menampilkan kesalahan dengan jelas.

Dengan menggabungkan arahan ini dengan aturan validasi dalam pengontrol atau Permintaan Formulir, Anda memiliki aliran validasi sisi server yang kuat, melengkapi validasi pelanggan, dan jauh lebih aman terhadap manipulasi jahat.

Tumpukan di Blade: @stack, @push, @prepend dan konsep hasStack

Salah satu fitur Blade yang jarang dibahas tetapi paling berguna untuk proyek besar adalah... tumpukanTumpukan pada dasarnya adalah tumpukan fragmen tampilan yang dapat Anda tambahkan konten dari tampilan anak, komponen, atau penyertaan, lalu merender semuanya bersama-sama pada titik tertentu dalam tata letak utama.

Pengarahan @stack('nama') Ini menandai lokasi tempat semua fragmen yang terkait dengan tumpukan tersebut akan dibuang. Namun, dari tampilan lain, Anda dapat menggunakan @push('nama') untuk mengirim konten ke akhir tumpukan atau @prepend('nama') untuk menempatkannya di awal. Ini sering digunakan untuk skrip dan gaya halaman tertentu.

Bayangkan, misalnya, bahwa dalam tata letak Anda, Anda memiliki sesuatu seperti ini di <head> dan di akhir <body>:

@stack('styles')
...
@stack('scripts')

Kemudian, pada tampilan spesifik yang membutuhkan JS TambahanAnda bisa melakukan:

@push('scripts')
<script src="/js/pagina-especifica.js"></script>
@endpush

Ini memungkinkan tata letak Anda tidak perlu mengetahui setiap skrip atau gaya setiap halamanIni hanya mendefinisikan tumpukan, dan tampilan anak adalah tampilan yang menumpuk apa yang mereka butuhkan. Ada juga @pushIf untuk mendorong konten berdasarkan kondisi boolean tanpa harus menulis pernyataan if secara lengkap.

Dalam konteks ini, banyak pengembang yang melewatkan @hasStack ketik direktif atau yang serupa Hal ini memungkinkan pengecekan apakah suatu tumpukan berisi konten sebelum merendernya. Meskipun Blade tidak dilengkapi direktif bawaan dengan nama tersebut, idenya jelas: untuk dapat melakukan sesuatu seperti "jika tumpukan skrip kosong, jangan cetak label tambahan" atau "jika ada elemen dalam tumpukan metadata, bungkus dalam blok tertentu."

Cara untuk mencapai perilaku yang setara saat ini adalah melengkapi arahan tumpukan dengan logika dalam tata letak atau dengan pembantu khusus, atau bahkan dengan arahan terdaftar kami sendiri melalui Blade::directive()Dengan cara ini, direktif hasStack dapat disimulasikan yang secara internal menanyakan tumpukan sebelum memutuskan HTML mana yang akan dihasilkan.

JSON, JavaScript, dan arahan pembantu di Blade

Dalam banyak tampilan Laravel, Anda perlu meneruskan data dari backend ke JavaScript. Biasanya, ini melibatkan melakukan json_encode() dari array atau koleksi dan membiarkannya di dalam skrip sebaris, tetapi hal itu tidak selalu aman atau nyaman. Laravel mempermudah hal ini dengan helper Js::dari(), yang melakukan serialisasi dan meng-escape nilai PHP ke JSON dengan benar untuk disematkan dalam HTML.

Saat Anda merender data kompleks ke browser, Js::dari() Ini menghindari masalah dengan tanda kutip atau karakter khusus dan mengembalikan ekspresi JSON.parse() Aman untuk dimasukkan ke dalam atribut atau skrip. Melewati ekspresi kompleks di dalam direktif tidak disarankan karena Blade secara internal menggunakan regex saat mengompilasinya, dan ini dapat merusak sesuatu dengan cara yang tidak terduga.

Selain itu, Blade memungkinkan Anda untuk menentukan komentar templat yang tidak dikirim ke HTML final (tidak seperti komentar HTML klasik) dan blok @php … @endphp tempat Anda dapat menjalankan cuplikan kecil PHP murni saat benar-benar diperlukan. Anda bahkan dapat menggunakan @menggunakan untuk mengimpor kelas ke dalam tampilan atau menetapkan alias padanya, yang berguna saat bekerja dengan pembantu atau komponen yang sangat spesifik.

Jika Anda mencapai titik di mana Anda memerlukan fungsi gema yang sangat terspesialisasi untuk objek tertentu, Anda dapat mendaftar penangan gema khusus dengan Blade::stringable()sehingga ketika menggemakan objek tertentu, Blade memanggil panggilan balik Anda alih-alih metode ajaib __toString() dari kelas.

Tampilan kesalahan, fragmen, dan arahan khusus

Laravel memungkinkan Anda menyesuaikan tampilan kesalahan: cukup buat file di resources/views/errors dengan kode HTTP sebagai namanya (misalnya, 404.blade.php o 500.blade.phpSetiap kali kesalahan itu terjadi, templat Anda akan digunakan, bukan templat generik dari kerangka kerja.

Untuk kasus di mana Anda bekerja dengan alat seperti Turbo atau htmx dan hanya ingin kembali fragmen tertentu dari suatu tampilanBlade menawarkan arahan @fragment … @endfragment dikombinasikan dengan metode seperti view('...')->fragment('nombre'), fragmentIf(), fragments() y fragmentsIf()Dengan cara ini Anda dapat menggunakan kembali keseluruhan templat yang sama dan mengekstrak hanya bagian yang Anda perlukan tergantung pada konteksnya.

Jika repertoar arahan tidak cukup bagi Anda, Anda selalu dapat membuatnya sendiri dengan Blade::direktif()Praktik yang biasa dilakukan adalah mendaftarkannya menggunakan metode boot() de AppServiceProvider atau melalui penyedia khusus. Kompiler Blade akan meneruskan ekspresi di dalam direktif sebagai string, dan Anda akan mendapatkan kode PHP yang ingin dihasilkan setelah kompilasi.

Untuk kondisi kustomisasi sederhana juga ada Blade::jika()yang menciptakan arahan bersyarat dalam satu baris. Misalnya, Anda dapat mendefinisikan @disk('s3') untuk memeriksa apakah disk default aplikasi adalah S3, lalu menggunakannya dalam tampilan apa pun seolah-olah itu adalah arahan asli.

Dengan gudang senjata ini Anda dapat merakit bahasa templat yang secara praktis disesuaikan dengan kebutuhan Anda, termasuk direktif hasStack-type jika Anda mau, yang bertindak sebagai pemanis sintaksis atas logika yang secara internal memeriksa apakah tumpukan memiliki konten atau tidak sebelum mencetaknya.

Menguasai Blade secara mendalam—dari sintaksis dasar hingga komponen lanjutan, arahan otorisasi, validasi, lingkungan, dan terutama manajemen tumpukan—memungkinkan Anda membangun tampilan modular, aman, konsisten dan mudah dirawatdi mana arahan masa depan seperti hasStack akan cocok secara alami untuk lebih melengkapi kontrol atas apa yang disuntikkan ke setiap area tata letak Anda.