0% menganggap dokumen ini bermanfaat (0 suara)
57 tayangan10 halaman

12 WEB Modul Multi Auth

Dokumen tersebut merupakan jobsheet praktikum multi-auth menggunakan Laravel 9 pada SMKN 8 Malang. Praktikum ini bertujuan agar siswa dapat memahami, membuat, menganalisis, dan memodifikasi multi-auth pada Laravel 9. Langkah-langkah praktikum meliputi instalasi Laravel, konfigurasi database, membuat model dan migrasi, membuat scaffolding auth, membuat middleware, membuat route, dan mengkonfigurasi controller serta view untuk membedakan

Diunggah oleh

dionnyt1
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 PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
57 tayangan10 halaman

12 WEB Modul Multi Auth

Dokumen tersebut merupakan jobsheet praktikum multi-auth menggunakan Laravel 9 pada SMKN 8 Malang. Praktikum ini bertujuan agar siswa dapat memahami, membuat, menganalisis, dan memodifikasi multi-auth pada Laravel 9. Langkah-langkah praktikum meliputi instalasi Laravel, konfigurasi database, membuat model dan migrasi, membuat scaffolding auth, membuat middleware, membuat route, dan mengkonfigurasi controller serta view untuk membedakan

Diunggah oleh

dionnyt1
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

SMKN 8 MALANG

Mata Pelajaran :
Komp. Keahlian :
PWPB
Multi- Auth Rekayasa Perangkat Lunak
Pertemuan :
Laravel 9
Guru :
Kelas/Semester : XII/1
Aris Diantoro, S.Kom

A. Tujuan Praktikum
Setelah melakukan praktikum siswa diharapkan dapat :
➢ Siswa mampu memahami langkah pembuatan multi-auth pada laravel 9
➢ Siswa mampu membuat multi-auth pada laravel 9
➢ Siswa mampu menganalisis multi-auth pada laravel 9
➢ Siswa mampu memodifikasi multi-auth pada laravel 9

B. Dasar Teori

Login Multi User maksudnya login yang bisa dilakukan oleh lebih dari satu pengguna.
Login multi user ini biasanya digunakan oleh Website ataupun Aplikasi berbasis web yang
memang dirancang untuk bisa digunakan oleh banyak pengguna dalam waktu bersamaan.
Sebuah halaman login bisa saja dirancang untuk hanya dapat menerima satu user saja atau juga
bisa dirancang untuk dapat menerima banyak user/pengguna yang berbeda – beda (multi user)

Berikut praktikum dengan contoh sederhana bagaimana membuat halaman login multi
user. Nantinya user akan dibedakan menjadi dua yaitu user ‘admin’ dan ‘user’. Admin akan
diberi level 1 dan user akan diberikan nilai dengan level 2. Sehingga dalam prosesnya nanti
diharapkan ketika ada pengguna yang login dengan level 1 ataupun 2 akan diarahkan ke
halaman yang sudah ditentukan yang sesuai dengan levelnya masing – masing.
Dalam contoh kali ini halaman admin akan diberi session admin sehingga hanya admin saja
yang dapat mengaksesnya, begitupun dengan halaman user, hanya user saja yang dapat
mengaksesnya. Pengguna yang akan login harus menggunakan email + password yang sudah
terdaftar atau tersimpan di database,data – data pengguna yang tersimpan di database memiliki
level masing – masing, dalam contoh kali ini ada dua level yang dibuat yaitu level 1 dan level
2
Ketika login di proses sistem akan memeriksa level user yang digunakan kemudian
mengklasifikasikan user yang masuk berdasarkan levelnya. Ketika sudah diketahui level yang
digunakan untuk login, maka secara otomatis sistem akan mengirim user yang berhasil login
kehalaman yang sesuai dengan level yang digunakan.

Pada hakikatnya session dan level user yang sudah diset memainkan peranan penting
dalam pembuatan halaman login multi user. Terkadang mungkin sebuah halaman yang
dirancang untuk dapat digunakan secara bersama oleh user yang berbeda – beda bisa lebih
rumit dan kompleks lagi.

C. Alat dan Bahan


1. Jobsheet
2. Komputer/ Laptop
3. Buku catatan
4. Tools pemrograman web:
a. Teks editor : Visual Studio(Vs) Code
b. Lokal server : Xampp
c. Browser : Chrome/ Firefox
d. Composer
e. Framework PHP : Laravel
f. Framework CSS : Bootstrap
g. Framework Javascript : NodeJs
D. Langkah Praktikum

• Step 1: Install Laravel Application


• Step 2: Setup Database Connection
• Step 3: Set Up Model and Migration
• Step 4: Generate Auth Scaffolding
• Step 5: Create IsAdmin Middleware
• Step 6: Create Routes
• Step 7: Configure Home Controller
• Step 8: Configure Blade View
• Step 9: Configure Login Controller
• Step 10: Create Dummy Data using Seeder
• Step 11: Run Laravel Multi Auth App & Test

Langkah 1
Atur cmd pada c:\xampp\htdocs

Langkah 2
composer create-project laravel/laravel multi-auth
Langkah 3
cd multi-auth

Langkah 4
Set Up database pada file *.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=multi-auth
DB_USERNAME=root
DB_PASSWORD=
Langkah 5
Buat database

Langkah 6
Buka
database\migrations\2014_10_12_000000_create_users_table.php
Lalu fokus pada tanda hijau
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->boolean('is_admin')->nullable();
$table->rememberToken();
$table->timestamps();

Langkah 7
Buka file User.php pada app/models
Lalu fokus pada tanda hijau
protected $fillable = [
'name',
'email',
'password',
'is_admin'
];
protected $hidden = [
'password',
'remember_token',
'two_factor_recovery_codes',
'two_factor_secret',
];

Terakhir tambahkan code di paling akhir setelah methode protected $appends


protected $appends = [
'profile_photo_url',
];

Langkah 8
Php artisan migrate
Langkah 9
composer require laravel/ui
Langkah 10
php artisan ui bootstrap --auth
Langkah 11
Npm install
Langkah 12
Npm run dev
Langkah 13
php artisan make:middleware IsAdmin
Langkah 14
Open app/Http/middleware/IsAdmin.php
Langkah 15
Sesuaikan code IsAdmin.php seperti contoh dibawah ini
public function handle($request, Closure $next)
{
if(auth()->user()->is_admin == 1){
return $next($request);
}

return redirect('home')->with('error',"Only admin can access!");


}

Langkah 16
Open app/Http/Kernel.php
Langkah 17
Fokus pada penambahan code pada tanda hijau
protected $routeMiddleware = [
'auth' => \App\Http\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class,
'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
'signed' => \App\Http\Middleware\ValidateSignature::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
'is_admin' => \App\Http\Middleware\IsAdmin::class,
];

Langkah 18
Buka routes -> web.php
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;

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

Route::get('home', [HomeController::class, 'index'])->name('home');


Route::get('admin/home', [HomeController::class, 'adminHome'])->name('admin.home')-
>middleware('is_admin');

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

Auth::routes();

Langkah 19

Buka dan tamabahkan kode pada HomeController.php pada


app/Http/Controllers/HomeController.php

public function index()


{
return view('home');
}
public function adminHome(){
return view('admin-home');
}
Langkah 20
Konfigurasi Views pada home.blade.php yang berada pada resource/views/
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
@if(session('login-success'))
<div class="alert alert-success" role="alert">
{{ session('login-success') }}
</div>
@endif
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
You are normal user.
</div>
</div>
</div>
</div>
</div>
@endsection

Lalu buat file baru dengan nama admin-home.blade.php dan tambahkan script dibawah ini
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
@if(session('login-success'))
<div class="alert alert-success" role="alert">
{{ session('login-success') }}
</div>
@endif
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
You are admin.
</div>
</div>
</div>
</div>
</div>
@endsection

Langkah 21
Konfigurasi LoginController yang berada pada app/Http/Controllers/Auth/LoginController
public function login(Request $request)
{
$request->validate([
'email' => 'required|email',
'password' => 'required'
]);

$credentials = $request->only('email', 'password');

if(! auth()->attempt($credentials)){
return redirect()->route('login')
->with('error','Email-Address And Password Are Wrong.');
}

if (auth()->user()->is_admin == 1) {
return redirect()->route('admin.home');
}

return redirect()->route('home');
}

Langkah 22
Buat data dummy di shedder dengan cara
php artisan make:seeder UsersSeeder
Lalu buka file UserSeeder.php di database/seeders/UserSeeder.php dan konfigurasi kode
dibawah ini
$usersData = [
[
'name' =>'Admin',
'email' =>'[email protected]',
'is_admin' => 1,
'password'=> bcrypt('12345678'),
],
[
'name' => 'User',
'email' => '[email protected]',
'is_admin' => 0,
'password'=> bcrypt('12345678'),
],
];

foreach ($usersData as $key => $val) {


User::create($val);
}
}

Langkah 23
php artisan db:seed

Langkah 24
Php artisan serve

Langkah 25
Cek aplikasi multi-auth

Tampilan user

Tampilan admin

Anda mungkin juga menyukai