Beranda #Laravel

Membuat Blog dengan Laravel dan VueJS - #2 | Admin Dashboard

whynwd

whynwd Senin, 26 Agustus 2019

Membuat Blog dengan Laravel dan VueJS - #2 | Admin Dashboard

Sebelumnya kita sudah melakukan instalasi laravel hingga pengaturan databasenya. Kita akan lanjutkan di part 2 ini untuk membuat bagian admin terlebih dahulu sebelum halaman homepage atau index dari blog.

Kita akan membuat halaman untuk dashboard admin dan membuat desainnya. Seperti apa langkah-langkahnya, berikut beberapa langkah dalam pembuatannya:

Membuat Controller

Kita buat sebuah controller untuk admin dan kita namakan AdminController.php.
Silahkan jalankan perintah dibawah ini pada cmd / terminal:
php artisan make:controller AdminController
Setelah terbuat mari kita buka file AdminController.php yang terletak di direktori Http\Controllers\ dan buat method bawah ini:
public function index()
{
   return view('admin.index');  
}
Penjelasan:
Kita membuat method dengan nama index yang mereturn, memanggil file / halaman index untuk ditampilkan.

Selanjutnya kita buat folder dan file baru di direktori views. Silahkan buat folder dengan nama admin dan didalamnya buat sebuah file dengan nama index.blade.php.

Membuat Blog dengan Laravel dan VueJS - #2 | Admin Dashboard

Membuat Route

Agar file index dapat di eksekusi untuk ditampilkan pada browser ketika di request sesuai permintaan berupa alamat / url, kita perlu membuat sebuah route.
Route::get('/admin/dashboard', 'AdminController@index');
Ketika merequest/membuka url ..admin/dashboard pada browser, maka akan menampilkan halaman yang dipanggil dari method index di admincontroller.

Sekarang mari kita coba buka url localhost:8000/admin/dashboard pada browser.

Jika tidak ada kesalahan, maka akan tampil seperti gambar dibawah ini.

Membuat Blog dengan Laravel dan VueJS - #2 | Admin Dashboard

Membuat Desain

Setelah halaman dashboard telah dibuat dan bisa dipanggil untuk ditampilkan. Selanjutnya kita buat desain halamannya.

Untuk desain htmlnya silahkan copas dibawah ini:.
//index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Admin dashboard</title>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  

    <link href="{{ asset('css/admin.css') }}" rel="stylesheet">
         
  </head>
  <body>
    <div id="app">
      <div class="wrapper">
      <div class="side-menu">
        <div class="logo">
         <h1 class="ch1"> Teluk Coding</h1>
          <p class="cp">Admin Panel | Dashboard</p>     
        </div>

        <!-- Sidebar Menu -->
           
    </div>
  <div class="main-content">
    <div class="topmenu">
      <a href="#" id="showmenu"><i class="fa fa-bars" aria-hidden="true"></i></a>
        <div class="search"><i class="fa fa-search" aria-hidden="true"></i> <input type='text' class='src' placeholder='Search...'/></div>
        <div class="uactions">
        <div class="admin-username"><p>Welcome, {{ Auth::user()->name }}</p> </div>
        <div class="admin-logout">
          <a href="{{ route('logout') }}" onclick="event.preventDefault();
                   document.getElementById('logout-form').submit();">
                      {{ __('Logout') }}
          </a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf
        </form>
        </div>
      </div>                             
    </div>
      <div class="main-section"> 

        <!-- Jumbotron  -->

        <div class="_container">
         <div class="h_wrap">
          <div class="admin-page-title"></div>
            <div class="jumbotron">
              <h1 class="display-4">Hello, Admin!</h1>
              <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
              <hr class="my-4"> 
              <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
              </p>
            </div>
            </div>
          </div>

       <!-- End Jumbotron  -->

      </div>
     </div>
    </div>
  </div>
   
    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/main.js') }}"></script> 
  
  </body>
</html>
Setelah itu kita buat stylenya. Silahkan buat file baru dengan nama admin.css di direktori public/css dan copas css dibawah ini:
//admin.css
*:focus {
    outline: none;
}
body{
  margin: 0;
}
._container{
  margin:0 20px;
  
}
.h_wrap{
   height: 39rem;
}
.wrapper{
      background: #887bff;
} 
.side-menu {
width: 250px;
    float: left;
    background: #887bff;
}
._bg-form{
    background-color: #ffffff;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10em;
}
.side-menu  .menu{
  margin-top: 1em;
}
._bg-form .label-sucess{
  color: green;
}
.topmenu{
  height: 55px;
  padding: 10px 0px 0px 10px;
  background: #887bff;
  color: #e1e2fa;
}
 
.logo{
    background: #887bff;
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    padding: 8px 8px;
    height: 55px;
}
.logo h1{ 
  color: #ffffff;
  font-size: 24px;
  font-weight: bold; 
}
.logo p{
  font-size: 12px;  
}
 
a {
  text-decoration: none;
  color: #e1e2fa;
}
.menu ul {
       list-style-type: none;
    margin: 6px;
    padding: 3px 0px;
    background: #444;
    border-radius: 6px;
}

.menu ul li{
        padding: 5px 0;
}
.menu ul li a {
    font-size: 13px;
    font-weight: 800;
    display: inline-block;
    width: 100%;
    padding: 5px 10px;
}
.menu ul li a:hover {
    background: #545459;
    border-left: solid 5px #cfcfcf; 
    color: #fff;
    text-decoration: none;
}
.menu ul li ul {
  padding-left:0px; 
}
#showmenu {
  font-size: 18px;
  display: inline-block;
  padding-left: 15px;
  padding-top: 5px;
  padding-right: 15px;
  float: left;
}
.router-link-active{
  background-color: #333;
}
.main-section{
 background: #f1f1f1; 
    margin-left: 250px
}
.search {
width: 340px;
    float: left;
    padding: 2px 10px;
    margin: 4px;
    background: #5c66cda8;
    border-radius: 15px;
    color: #dedefa;
}
input.src {
  background: none;
  border: none;
  width: 300px;
  font-family: 'Nunito', sans-serif;
  color: #dedefa;
  font-size: 13px;
  font-weight: 600;
  
}

::-webkit-input-placeholder {
  font-family: 'Nunito', sans-serif;
  color: #8089e8;
  font-size: 13px;
  font-weight: 600;
}
::-moz-placeholder { 
  font-family: 'Nunito', sans-serif;
  color: #8089e8;
  font-size: 13px;
  font-weight: 600;
}
:-ms-input-placeholder {
  font-family: 'Nunito', sans-serif;
  color: #8089e8;
  font-size: 13px;
  font-weight: 600;
}
:-moz-placeholder {
  font-family: 'Nunito', sans-serif;
  color: #8089e8;
  font-size: 13px;
  font-weight: 600;
}
 
.author {
  color: #999999;
  font-size: 36px;
  margin-top: 20px;
  
}
 
.admin-page-title{
  font-size: 2rem; 
    border-left: 12px solid #b99a3e;
    margin: 10px 0;
    display: inline-block;
    padding: 0 8px;
    background: #f1ea93;
    width: 100%;
}

.admin-username{
  float: right; 
  padding: 0 12px;
}
.admin-logout a{
  text-decoration: none;
}

.admin-logout a:hover{
  color: #fff;
}
.uactions{
      float: right;
    display: inline-flex;
    margin: 0 30px;
} 
nav .pagination a{
  border-radius: 6px;
    background: #FFEB3B;

}
.pagination .pagination-link.is-current {
    color: #fff;
}

.pagination-link[disabled], .pagination-next[disabled], .pagination-previous[disabled] {
    background-color: #dedddd;
    border-color: #dedddd;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #7a7a7a;
    opacity: .5;
}
Setelah css ditambahkan, buat kembali file baru dengan nama admin.js direktori  public/js  copas kode javascript dibawah ini:
//main.js
$(function(){ 
  $("#showmenu").click(function(){
    if($(".side-menu").width() > "60"){
      $(".side-menu").animate({width: '-=205px'});
      $(".main-section").animate({'margin-left': '-=205px'});
      $(".ch1").text("TC");
      $(".cp").text("______");
      $("span.text").hide();
      $(".menu i").show();
    }
    else {
        $(".side-menu").animate({width: '+=205px'});
        $(".main-section").animate({'margin-left': '+=205px'});
        $(".ch1").text("Teluk Coding");
        $(".cp").text("Admin Panel | Dashboard");
        $("span.text").show("slow"); 
    }
  });
});

jQuery(function ($) {
  $(".sidebar-dropdown > a").click(function() {
  $(".sidebar-submenu").slideUp(200);
  if (
    $(this)
      .parent()
      .hasClass("active")
  ) {
    $(".sidebar-dropdown").removeClass("active");
    $(this)
      .parent()
      .removeClass("active");
  } else {
    $(".sidebar-dropdown").removeClass("active");
    $(this)
      .next(".sidebar-submenu")
      .slideDown(200);
    $(this)
      .parent()
      .addClass("active");
  }
});

$("#close-sidebar").click(function() {
  $(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
  $(".page-wrapper").addClass("toggled");
});
   
});
Javascript diatas untuk animasi bagian menu sidebar berupa collapsed, dimana sidebar menu dapat di sembunyikan dan ditampilkan kembali.

Setelah semua selesai dibuat, sekarang kita tinggal lihat hasilnya. Jika tidak terjadi kesalahan maka akan terlihat seperti pada gambar dibawah ini:

Membuat Blog dengan Laravel dan VueJS - #2 | Admin Dashboard

Selanjutnya: Component & Vue Router.

Urutan part / bagian dari tutorial ini bisa dilihat disini.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Postingan Lainnya

Home About Contact Privacy Policy Term Of Service Sitemap
Home About Contact
Privacy Policy Term Of Service Sitemap

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.