DASAR TEORI
Blade adalah template engine yang disediakan oleh framework laravel atau bawaan dari framework laravel. Blade adalah konversi dari bahasa pemrograman PHP ke Blade itu sendiri agar lebih mudah dipahami dan lebih singkat. Kali ini kita akan menggunakan template AdminLTE sebagai desain nya. Langsung saja kita ke tahap prakteknya :
- Pastikan pada komputer anda telah terinstall XAMPP dan laravel
- Aktifkan MySQL dan Apache pada XAMPP
- Download terlebih dahulu template AdminLTE disini
- Ekstract AdminLTE ke project laravel didalam folder public. Kemudian Rename dengan nama bebas contoh saya rename dengan nama folder assets
- Buka file web.php laravel pada folder routes
- Tambahkan route untuk template AdminLTE sebagai template dasar laravel pada file web.php dengan mengetikkan syntaks berikut :
- Karena view adminlte belum kita buat, maka kita buat terlebih dahulu file adminlte.blade.php pada folder resource/views
- Kemudian kita buka file tersebut, dan isi dengan source code dari file index.html AdminLTE yang tersimpan pada folder assets.
- Setelah itu, kita buat sebuah folder bernama template dalam folder resource/views kemudian kita edit dan potong-potong source code tersebut menjadi beberapa bagian. Pertama kita potong source code head dari <meta charset="utf-8"> sampai <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> kemudian simpan pada file baru bernama head.blade.php yang disimpan pada folder template. Pada file adminlte.blade.php nya kita isi posisi source code yang dipotong tadi dengan @include('template.head').
- Kedua kita potong source code header dalam tag <header class="main-header">...</header>, simpan pada file baru bernama header.blade.php yang disimpan pada folder template. Pada adminlte.blade.php nya kita isi posisi source code yang dipotong tadi dengan @include('template.header').
- Ketiga kita potong source code aside dalam tag <aside class="main-sidebar">...</aside>, simpan pada file baru bernama aside.blade.php yang disimpan pada folder template. Pada adminlte.blade.php nya kita isi posisi source code yang dipotong tadi dengan @include('template.aside').
- Keempat kita potong source code footer dalam tag <footer class="main-footer">...</footer>, simpan pada file baru bernama footer.blade.php yang disimpan pada folder template. Pada adminlte.blade.php nya kita isi posisi source code yang dipotong tadi dengan @include('template.footer').
- Kelima kita potong source code control-sidebar dalam tag <aside class="control-sidebar control-sidebar-dark">...</aside>, simpan pada file baru bernama control-sidebar.blade.php yang disimpan pada folder template. Pada adminlte.blade.php nya kita isi posisi source code yang dipotong tadi dengan @include('template.control-sidebar').
- Keenam kita potong source code script dari <!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script> sampai <script src="dist/js/demo.js"></script>kemudian simpan pada file baru bernama script.blade.php yang disimpan pada folder template. Pada file adminlte.blade.php nya kita isi posisi source code yang dipotong tadi dengan @include('template.script'). - Setelah source code pada adminlte.blade.php kita potong menjadi beberapa bagian, kemudian kita hilangkan isi yang ada dalam tag <div class="content-wrapper"> setelah kita buang dan isi dengan @yield('content') yang berfungsi untuk memanggil section content maka isi pada file adminlte.blade.php akan seperti berikut :
- Setelah itu, kita edit pemanggilan css pada file head.blade.php, dimana semua syntaks setelah href=" tambahkan dengan {{url('/assets/ dan sebelum "> tambahkan dengan ')}} seperti berikut :
- Lakukan hal yang sama pada file script.blade.php, sehingga menjadi seperti berikut :
- Cari <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> pada file aside.blade.php kemudian lakukan seperti pada langkah sebelumnya, sehingga menjadi <img src="{{url('/assets/dist/img/user2-160x160.jpg')}}" class="img-circle" alt="User Image">
- Kita coba lihat tampilan template di laravel dengan mengetikkan http://localhost/{nama project laravel}/public/adminlte pada browser, sehingga akan tampil seperti berikut :
- Setelah template berhasil dibuat, kita coba implementasikan @yield('content') tadi dengan cara buka lagi file web.php kemudian tambahkan syntaks route berikut :
- Setelah itu kita buat file baru dengan nama implementasi-yield.blade.php pada folder resource/views. Kemudian isi dengan source code berikut :
- Kita coba jalankan dengan mengetikkan http://localhost/{nama project laravel}/public/implementasi-yield pada web browser, maka akan tampil seperti berikut :
- Setelah kita memahami bagaimana cara menngimplementasikan yield, selanjutnya kita coba isi dengan data barang. Pertama kita buat Controller baru, dengan cara buka cmd kemudian ketikkan pada cmd php artisan make:controller DataBarangController --resource jika berhasil maka akan ada tulisan Controller created successfully.
- Maka akan ada file baru pada folder \app\Http\Controllers bernama DataBarangController.php
- Laravel akan membuat beberapa action method secara otomatis pada file DataBarangController.php seperti action index, create, edit, store, show, update, dan detroy.
- Kemudian kita buat sebuah folder data-barang pada folder resource/views
- Lalu kita buat route nya dengan mengetikkan source code berikut pada file web.php .
- Kita coba akses dengan mengetikkan http://localhost/{nama project laravel}/public/data-barang pada web browser, maka hasilnya akan kosong
Route::get('/adminlte', function () {
return view('adminlte');
});
/adminlte merupakan url baru.
return view('adminlte') artinya route tersebut akan merender view bernama adminlte.
Route::get('/implementasi-yield', function(){
return view('implementasi-yield');
});
@extends('adminlte')
@section('content')
<h1>Ini Contoh Halaman Menggunakan template. </h1>
@endsection
Route::resource('/data-barang', 'DataBarangController');
Penjelasan :
Routes tersebut akan memetakan method yang terdapat pada file DataBarangController.php.
Tidak ada komentar:
Posting Komentar