Membuat Dashboard Admin Laravel

Membuat Dashboard Admin (Laravel) 1. SEDIAKAN FILE TEMPLATE ADMIN Extract file template admin yang ada lalu pindahkan ke folder spak/resource.

2. MEMINDAHKAN FILE RESOURCE TEMPLATE KE FOLDER PUBLIC Salin semua file resource web yang ada pada folder myadmin-dark-lite/css, myadmin-dark-lite/js, myadmin-dark-lite/bower_components, dan myadmin-dark-lite/images ke folder spak/public.

3. MEMBUAT FOLDER KHUSUS TAMPILAN DASHBOARD ADMIN Buat sebuah folder baru di folder spak/resource/views dengan nama folder dashboard (tergantung kebutuhan).

Tambahkan sebuah file di folder dashboard dengan cara menyalin file blank.html pada folder template admin lalu rename dengan nama dashboard.blade.php

2

4. MENGATUR CONTROLLER Agar bisa menjalankan perintah saat suatu link di request maka kita perlu membuat dan mengatur controller. Di controller kita bisa mereturn suatu view ataupun melakukan proses CRUD database. Gunakan HomeController (app/Http/Controller/HomeController.php) sebagai controller dashboard yang telah di generate secara otomatis saat kita mengaktifkan fitur authentikasi. Pada method index, isi dengan potongan koding berikut ini :

Isi method contruct pada koding diatas berguna untuk membatasi agar user yang belum memiliki session login tidak mengakses seluruh method yang di Controller ini dan meredirect usernya menuju ke halaman login. Isi method diatas akan mereturn views/dashboard/dashboard.blade.php

sebuah

view

yang

terletak

di

folder

5. MEMBUAT ROUTE KHUSUS HALAMAN DASHBOARD Agar file yang kita buat nantinya dapat diakses, terlebih dahulu route harus kita atur. Tambahkan potongan koding berikut pada folder routes/web.php

Koding line 28 berguna agar kita bisa langsung melakukan proses logout dengan menggunakan link /logout. Koding line 30 akan menangani request saat link /home dibuka dengan menjalankan method index pada HomeController. 3

6. MEMECAHKAN KODING DASHBOARD MENJADI BEBERAPA MODUL TAMPILAN Buka file yang disalin tadi di text editor lalu perhatikan pada bagian tag head koding. A. Ubah koding yang menjadi seperti gambar dibawah. B. Tambahkan meta CSRF token pada bagian head koding. C. Ubah koding pada tag title sesuai dengan gambar koding dibawah.

Lalu perhatikan juga pada pemanggilan css, file asset image, dan pemanggilan javascript. Pada laravel diperlukan penambahan fungsi asset dalam pemanggilan asset web kita nantinya. Misalnya src=”link/asset/kita.js” akan berubah menjadi src=”{{ asset(‘link/asset/kita.js’) }}” Contohnya bisa dilihat pada gambar berikut.

Menjadi

Hal ini berlaku juga terhadap pemanggilan javascript, dan image.

4

Sekarang saatnya memecahkan bagian navigasi, konten, dan footer menjadi potongan koding tersendiri. Masih di dalam folder dashboard, buat lagi sebuah folder dengan nama module.

Buka lagi koding dashboard tadi, cari bagian navigasi (Line 32 – Line 93). Blok potongan koding tersebut lalu cut dengan perintah ctrl + x.

Buat sebuah file baru dengan nama navigasi.blade.php di dalam folder module. Lalu pastekan koding yang telah di cut tadi. Lakukan hal yang sama pada bagian konten, dan juga footer. Khusus pada bagian konten, anda bisa menggunakan konten dashboard pada template admin yang telah ada untuk memenuhi kebutuhan dashboard anda. Simpan potongan koding konten dengan nama content_dashboard.blade.php Dan potongan koding footer dengan nama footer.blade.php Sehingga isi folder module sekarang berupa:

5

Buka kembali koding dashboard.blade.php pada text editor lalu tambahkan potongan koding berikut didalam tag div dengan id wrapper untuk memanggil module-module yang telah dipecahkan tadi.

Anda bisa mengulangi langkah ini lagi untuk membuat tampilan menu sesuai dengan kebutuhan.

7. MEMBUAT MENU NAVIGASI ADMIN Untuk membuat link pada laravel kita menggunakan fungsi url(). Sebagai contohnya bisa dilihat pada potongan koding berikut.

Pada bagian navigasi ubahlah potongan navigasi.blade.php pada folder module menjadi seperti berikut :

Panduan :

1. 2. 3. 4. 5.

Atur Controller (Tambahkan method profile pada HomeController) dan tambahkan route Buat file profile.blade.php di folder dashboard Lakukan perintah sebagaimana membuat halaman dashboard. Beri nama conten profile dengan nama content_profile.blade.php (di folder module) Gunakan template admin bagian profile sebagai acuan.

Gambaran :

7

KODE SOLUSI

middleware('auth'); } /** * Show the application dashboard. * * @return \Illuminate\Http\Response */ public function index() { return view('dashboard.dashboard'); } /** * Show the application admin profile page. * * @return \Illuminate\Http\Response */ public function profile() { return view('dashboard.profile'); } }

8

name('logout' ); Route::get('/home', 'HomeController@index')->name('home'); Route::get('/profile', 'HomeController@profile')->name('home');

9

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> Profile.blade.php (folder dashboard) <script src="{{ asset('bower_components/bootstrap/dist/css/bootstrap.min.css') asset('bower_components/bootstrap/dist/js/bootstrap.min.js') }}"> JavaScript --> <script src="{{ asset('bower_components/metisMenu/dist/metisMenu.min.css') asset('bower_components/metisMenu/dist/metisMenu.min.js') }}"> <script src="{{ asset('css/style.css') asset('js/jquery.nicescroll.js') }}"> and Respond.js IE8 support of HTML5 elements and media queries --> <script src="{{ asset('js/waves.js') }}"> <scriptsrc="{{ src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> <script asset('js/myadmin.js') }}"> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"> <script src="{{ asset('bower_components/jquery/dist/jquery.min.js') }}">

10