Part #2 Membangun Aplikasi Ecommerce - Proses Login Dashboard Admin

Assalamualaikum wr.wb

Gimana kabarnya teman-teman forumkoding? Semoga kita selalu diberi kesehatan dan kemudahan dalam segala apapun.

Nah pada Tutorial kedua ini saya akan menjelaskan tentang proses login default yang telah kita buat pada Tutorial sebelumnya. Jika teman - teman belum membaca tutorial sebelumnya silahkan kunjungi halaman berikut ini Part #1 Membangun Aplikasi Ecommerce - Memasang Template Admin Laravel
 Disini kita mempunyai kewajiban untuk mengamalkan ilmu karena jika ilmu tidak diamalkan seperti halnya pohon yang tidak berbuah atau dapat dikatakan ilmu itu akan sia-sia. 

Langkah - langkah

1). Mengupdate table users : Langkah pertama adalah mengupdate table users yang telah kita buat sebelumnya. Tambahkan satu lagi kolom admin dalam table users tersebut karena kita hanya akan mengupdate hanya pada satu kolom saja.
Silhkan buka phpmyadminnya kemudian tambahkan satu field pada table users, untuk contoh lengkapnya seperti gambar berikut:
Silahkan teman-teman save dan edit datanya dengan mengisikan angka 1 dalam field admin.
Kita telah berhasil mengupdate data dengan satu data yang dibuat dalam field colom 'admin'.

2). Update admin_login.blade.php: Sekarang kita akan mengupdate login form yang telah kita copy dari Template Admin LTE.
Kita akan set action nya dengan = "{{ url('admin') }}". yang ditambahkan pada: script berikut:
<form action="{{ url('/admin') }}" method="post">
dan jangan lupa dibawahnya tambahkan @csrf atau {{ csrf_field() }}, itu akan men generate security token untuk form validasi. Dilain waktu kita akan mempelajarinya secara lebih mendetail.

Sekarang update email, password dan submit button in form.
Pada inputan dari email maupun password beri name untuk scriptnya seperti dibawah ini:
 <input type="email" class="form-control" placeholder="Email" name="email">
<input type="password" class="form-control" placeholder="Password" name="password"> 
3). Sekarang kita update Route: web.php :- Kita akan mengupdate route admin yang telah kita buat terakhir kali dengan POST Method
untuk secriptnya sendiri seperti dibawah ini:
Route::match(['get','post'],'/admin-ecommerce',AdminController@login);
Dan teman - teman hapus saya route yang telah dibuat sebelumnya Route::get ('/admin-ecommerce','AdminController@login');

 4). Update function Login: - Sekarang dalam AdminController.php kita akan mengupdate function loginnya.

  • Pertama tambahankan kondisi bersama $request->isMethod('post') to mengecek jika login form di submit
  • Dan kemudian gunakan Auth::attempt untuk mengecek jika admin email, password benar dan user sebenarnya adalah admin.
Untuk script lengkapnya pada AdminController seperti berikut:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
class AdminController extends Controller
{
    public function login(Request $request){
    if($request->isMethod('post')){
    $data = $request->input();
    if(Auth::attempt(['email'=>$data['email'],'password'=>$data['password'],'admin'=>'1'])){
    echo "Success"; die;
    }else{
    echo "Failed"; die;
    }
    }
    return view('Admin.admin_login');
    }
}
Tahapan selanjutnya silahkan teman - teman coba login terlebih dahulu dengan mengakses url http://127.0.0.1:8000/admin-ecommerce. Jika tidak terdapat error maka saat melakukan login akan muncul tulisan Success.

Kemudian teman-teman coba registerkan satu data lagi setelah itu teman-teman login dengan mengakses url admin-ecommerce Jika muncul tulisan failed maka teman teman berhasil membuat hak akses antara admin dan user.

Tahapan selanjutnya kita akan login dan menampilkan halaman dashboardnya untuk itu teman-teman ikuti terus tutorialnya 

Dashboard Admin

Langkah selanjutnya kita akan membuat halaman dashboard dari admin, atur header dan footer kemudian kita juga akan menggunakan halaman yang lainnya dari halaman login untuk dapat mengakses halaman dashboardnya.

1). Struktur Layout :- Struktur layout sangat penting, sekarang kita akan menggunakan untuk semua halaman dari admin dan untuk front nanti akan dibuatkan ketika tahapan tersebut sudah selesai.

Pertama dalam forder layouts dalam folder views.
Buat dua folder : - yaitu 
    • adminLayout
    • frontLayout
folder frontLayout mengandung semua file umum mengenai header, footer, untuk front itu .. kita akan melihatnya nanti.

adminLayout akan mengandung file untuk admin; jadi kita akan membuat header, footer untuk admin dan store didalam folder tersebut.
Jadi, dalam folder adminLayout, kita akan membuat beberapa file: -
  • admin_design.blade.php (file ini akan mengandung design html lengkap untuk admin)  
  • admin_header.blade.php (bagian  header admin)
  • admin_footer.blade.php (bagian footer admin)
Untuk strukturnya sendiri seperti silahkan teman-teman perhatikan gambar dibawah ini:
2). Sekarang kita akan bekerja dalam admin_design.blade.php
Langkah pertama kita copy file dashboard dari admin LTE untuk file ini dan kemudian panggil header, footer dan sidebarnya.

Silahkan teman-teman copy dan pastekan script dashboard admin kedalam file admin_design.blade.php setelah itu pisah bagian-baginnya.

Untuk memisahkan bagiannya terlebih dahulu teman-teman cari bangian <header>...</header> lalu tekan tombol ctrl+X untuk Cut dan kemudian pindahkan kedalam file admin_header.blade.php .  Tidak lupa tambahkan  @include('layouts.adminLayouts.admin_header') pada file admin_design.blade.php Untuk memanggil bagian header yang telah kita pisahkan.

Dengan cara yang sama pula, untuk footer dan sidebar dan kemudian include dalam admin_design.blade.php

Jadi telah jelas sekarang , bahwa dalam file admin_design.blade.php berisi file umum yang telah kita buat.
Untuk gambarannya seperti berikut ini:

 Untuk main content / content wrapper, kita akan membuat file dashboard.blade.php dan menjaga itu untuk admin folder dimana kita sebelumnya menyimpan admin_login.blade.php. 
Dan untuk memasukan file dashboard.blade.php kita akan menggunakan script:
@yield('content') 
Serta dalam dashboard.blade.php kita akan menggunakan sebagai berikut:
@extends
('layouts.adminLayout.admin_design')
@section('content')
-- content Disimpan disini
@endsection 
Oke kita lakukan sekarang :)
admin_sidebar.blade.php (bagian admin sidebar)

3) set CSS, Javascript dan Copy kedalam folder terkait. Sekarang kita akan menyeting semua CSS, Javascript dan Image dan tentu membuat semua file yang telah diinclude dalam folder laravel.
untuk Contohnya seperti script dibawah ini:
<link rel="stylesheet" href="{{asset('Admin/dist/css/AdminLTE.min.css')}}">
Jadi tambahkan Admin/ didepan pada setiap pemanggilan filenya.
Kemudian tambahkan script dibawah ini pada file web.php
Route::get('/admin/dashboard','AdminController@dashboard'); 
Lalu pada AdminController.php tambahkan script dibawah ini:
 public function dashboard(){
    return view('Admin.dashboard');
    } 
Script diatas dimaksudkan untuk memanggil file dashboard.blade.php yang merupakan tampilan untuk dashboad admin yang kita buat.

Jika teman-teman berhasil dan mengikuti langkah-langkahnya dengan benar maka hasilnya akan tampil seperti bambar dibawah ini:
Dan teman- teman perhatikan URL nya, maka dapat disimpulkan kita telah berhasil memasang Template Admin LTE kedalam Laravel untuk tampilan Dashboard Admin.

Lihat sebelumnya itu menunjukkan kesalahan tetapi setelah penyegaran yang tepat mulai berfungsi secara otomatis .. jadi segarkan dengan benar setiap kali ketika teman-teman membuat perubahan .. kadang-kadang mengambil dari cookie.

Untuk dapat mengakses halaman tersebut ketika sudah login, silahkan teman-teman ganti script pada function login menjadi seperti dibawah ini:
public function login(Request $request){
    if($request->isMethod('post')){
    $data = $request->input();
    if(Auth::attempt(['email'=>$data['email'],'password'=>$data['password'],'admin'=>'1'])){
    return redirect('/admin/dashboard');
    }else{
    echo "Failed"; die;
    }
    }
    return view('Admin.admin_login');
    }
Silahkan teman-teman coba, jika berhasil maka selamat untuk teman-teman.
Jika terjadi kendala tetapi telah dipastikan semuanya benar .. silahkan restart project laravelnya dengan cara mengetikan ctrl+C lalu ketik php artisan serve lagi untuk memuat ulang project nya.

Sekarang kita telah berhasil menampilkan halaman dashboard dari login , jika loginnya tidak terjadi masalah.

Untuk tutorial kedua ini kita cukupkan sampai disini, Terimakasih telah berkunjung
Salam -- Success :)

Part #2 Membangun Aplikasi Ecommerce -  Proses Login Dashboard Admin

By: Muhammad Rizal Supriadi

0 Response to "Part #2 Membangun Aplikasi Ecommerce - Proses Login Dashboard Admin"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel