Scribd
Unggah
1K tayangan10 halaman

Membuat Dashboard Admin Laravel

laravel

Diunggah oleh

Ibenk SembilanEnam
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
1K tayangan10 halaman

Membuat Dashboard Admin Laravel

laravel

Diunggah oleh

Ibenk SembilanEnam
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

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 sebuah view yang terletak di folder
views/dashboard/dashboard.blade.php

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 <html lang=….> 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 :

<!-- NAV HEADER -->


<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
<div class="navbar-header"> <a class="navbar-toggle hidden-sm hidden-md hidden-lg " href="javascript:void(0)" data-
toggle="collapse" data-target=".navbar-collapse"><i class="ti-menu"></i></a>
<div class="top-left-part"><a class="logo" href="{{ url('/home') }}"><i class="glyphicon glyphicon-fire"></i>&nbsp;<span
class="hidden-xs">Belajar Laravel</span></a></div>
<ul class="nav navbar-top-links navbar-left hidden-xs">
<li><a href="javascript:void(0)" class="open-close hidden-xs hidden-lg waves-effect waves-light"><i class="ti-arrow-circle-left ti-
menu"></i></a></li>
</ul>
<ul class="nav navbar-top-links navbar-right pull-right">
<li>
<a class="profile-pic" href="{{ url('/profile') }}"> <img src="{{ asset('images/users/hritik.jpg') }}" alt="user-img" width="36"
class="img-circle"><b class="hidden-xs"> {{ Auth::user()->name }} </b> </a>
</li>
<li>
<a class="profile-pic" href="{{ url('/logout') }}"> <i class="ti-power-off"></i> </a>
</li>
</ul>
</div>

6
</nav>
<!-- NAV HEADER -->

<!-- SIDE MENU -->


<div class="navbar-default sidebar nicescroll" role="navigation">
<div class="sidebar-nav navbar-collapse ">
<ul class="nav" id="side-menu">
<li>
<a href="{{ url('/home') }}" class="waves-effect"><i class="glyphicon glyphicon-fire fa-fw"></i> Dashboard</a>
</li>
<li>
Sampai<atahap href="{{
iniurl('/menu1')
anda telah }}" class="waves-effect"><i
berhasil membuatclass="ti-user
halamanfa-fw"></i>Menu
dashboard admin Belum Jadi</a>
dengan memecah bagian-
</li>
bagian</ul>
navigasi, content, dan footer ke dalam bentuk module. Selanjutnya buatlah tampilan untuk
halaman
</div> profile admin.
<!-- /.sidebar-collapse -->
Panduan
</div> :
<!-- SIDE MENU -->
1. Atur Controller (Tambahkan method profile pada HomeController) dan tambahkan route
2. Buat file profile.blade.php di folder dashboard
3. Lakukan perintah sebagaimana membuat halaman dashboard.
4. Beri nama conten profile dengan nama content_profile.blade.php (di folder module)
5. Gunakan template admin bagian profile sebagai acuan.

Gambaran :

7
KODE SOLUSI

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller


{
/**
* Create a new controller instance.
*HomeController.php
* @return void
*/
public function __construct()
{
$this->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
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
Web.php
| routes are(route)
loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Route::get('/info', function () {
return view('profil');
});

Route::get('/info/{nama}', function ($nama) {


return view('profil', compact('nama'));
});

Auth::routes();
//Direct Logout
Route::get('/logout', 'Auth\LoginController@logout')->name('logout' );

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

9
<!DOCTYPE html>
<html lang="en">

<head>
<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)
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
<title>Profile Admin</title>
<!-- Bootstrap Core CSS -->
<link href="{{
<script src="{{ asset('bower_components/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
asset('bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<!--Menu
<!-- MenuPlugin
CSS -->JavaScript -->
<link href="{{
<script src="{{ asset('bower_components/metisMenu/dist/metisMenu.min.css') }}" rel="stylesheet">
asset('bower_components/metisMenu/dist/metisMenu.min.js') }}"></script>
<!-- Custom CSS -->
<!--Nice scroll JavaScript -->
<link href="{{
<script src="{{ asset('css/style.css') }}" rel="stylesheet">
asset('js/jquery.nicescroll.js') }}"></script>
<!-- HTML5
<!--Wave Shim-->
Effects and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING:
<script Respond.js doesn't
src="{{ asset('js/waves.js') work if you view the page via file:// -->
}}"></script>
<!--[if lt IE 9]>
<!-- Custom Theme JavaScript -->
<scriptsrc="{{
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
asset('js/myadmin.js') }}"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</body>
<![endif]-->
</head>
</html>

<body>
<!-- Preloader -->
<div class="preloader">
<div class="cssload-speeding-wheel"></div>
</div>
<div id="wrapper">

<!-- Navigation -->


@include('dashboard.module.navigasi')
<!-- /Navigation -->

<!-- Content -->


@include('dashboard.module.content_profile')
<!-- /Content -->

<!-- Footer -->


@include('dashboard.module.footer')
<!-- /Footer -->

</div>
<!-- jQuery -->
<script src="{{ asset('bower_components/jquery/dist/jquery.min.js') }}"></script>
<!-- Bootstrap Core JavaScript -->
10

Anda mungkin juga menyukai