Laravel 8 : User Management Part3 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Laravel 8 : User Management Part3, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel laravel,
Artikel php,
Artikel PHP - MySql, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Laravel 8 : User Management Part3
link : Laravel 8 : User Management Part3
Anda sekarang membaca artikel Laravel 8 : User Management Part3 dengan alamat link https://dev-create.blogspot.com/2021/09/laravel-8-user-management-part3.html
Judul : Laravel 8 : User Management Part3
link : Laravel 8 : User Management Part3
Laravel 8 : User Management Part3
Melanjutkan postingan Sebelumnya dimana sudah sampai pembuatan helpers dan registrasi helpers pada file composer.json, selanjutnya membuat view untuk masing-masing halaman.
Pertama halaman login, tambahkan file login.blade.php pada folder resources/views
login.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cache-control" content="private, max-age=0, no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<title>Laravel User Management</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/datepicker3.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">Log in</div>
<div class="panel-body">
<form action="{{ url('authenticate') }}" method="post">
@csrf
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</fieldset>
</form>
</div>
</div>
</div><!-- /.col-->
</div><!-- /.row -->
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
setelah membuat halaman login tambahkan folder templates, home, settings pada folder resources/views, dan berikut isi dari masing-masing folder :
folder templates :
main.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/datepicker3.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.11.1/css/dataTables.bootstrap.min.css">
<!--Custom Font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
@yield('addtional-css')
<script>
var base_url = window.location.origin;
</script>
</head>
<body>
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">USER MANAGEMENT</a>
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="" data-toggle="dropdown" style="color:white;" href="#">
<i class="fa fa-user"></i> {{ Auth::user()->name }}
</a>
<ul class="dropdown-menu">
<li>
<form action="{{ url('logout') }}" method="post">
@csrf
<button type="submit" class="btn btn-default form-control" style="margin-left:6px;">
<i class="fa fa-power-off"></i> <strong> Logout</strong>
</button>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.container-fluid -->
</nav>
<!-- Sidebar -->
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<ul class="nav menu">
<li class=""><a href="{{ url('/') }}"><em class="fa fa-dashboard"> </em> Dashboard</a></li>
<div class="divider"></div>
@foreach(userMenu() as $headMenu)
<li class="parent">
<a data-toggle="collapse" href="#{{$headMenu->menugroup}}">
<em class="fa fa-navicon"> </em> {{ $headMenu->groupname }}
<span data-toggle="collapse" href="#{{$headMenu->menugroup}}"
class="icon pull-right"><em class="fa fa-plus"></em>
</span>
</a>
<ul class="children collapse" id="{{$headMenu->menugroup}}">
@foreach(userSubMenu() as $detailMenu)
@if($headMenu->menugroup === $detailMenu->menugroup)
<li class="active">
<a href="{{ url($detailMenu->route) }}">
<i class="metismenu-icon"></i>
{{ $detailMenu->menuname }}
</a>
</li>
@endif
@endforeach
</ul>
<div class="divider"></div>
</li>
@endforeach
</ul>
</div>
<!--/.sidebar-->
<!-- Content -->
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<!-- <br> -->
<div class="row">
<ol class="breadcrumb">
<li>
<a href="#">
<em class="fa fa-home"></em>
</a>
</li>
<li class="active">@yield('title')</li>
</ol>
</div>
<br>
@yield('content')
</div>
<!--/.Content-->
<!-- <script src="/js/jquery-1.11.1.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.1/js/dataTables.bootstrap.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-datepicker.js"></script>
<script src="/js/custom.js"></script>
<script>
$(function(){
setTimeout(function(){
$('.msgAlert').hide();
}, 4000);
});
</script>
@yield('additional-js')
</body>
</html>
@yield('modals')
Folder home -> dashboard.blade.php
@extends('templates/main')
@section('title', 'Dashboard')
@section('content')
<div class="panel panel-container">
<div class="row">
<div class="col-xs-6 col-md-3 col-lg-3 no-padding">
<div class="panel panel-teal panel-widget border-right">
<div class="row no-padding"><em class="fa fa-xl fa-shopping-cart color-blue"></em>
<div class="large">120</div>
<div class="text-muted">New Orders</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-lg-3 no-padding">
<div class="panel panel-blue panel-widget border-right">
<div class="row no-padding"><em class="fa fa-xl fa-comments color-orange"></em>
<div class="large">52</div>
<div class="text-muted">Comments</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-lg-3 no-padding">
<div class="panel panel-orange panel-widget border-right">
<div class="row no-padding"><em class="fa fa-xl fa-users color-teal"></em>
<div class="large">24</div>
<div class="text-muted">New Users</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-lg-3 no-padding">
<div class="panel panel-red panel-widget ">
<div class="row no-padding"><em class="fa fa-xl fa-search color-red"></em>
<div class="large">25.2k</div>
<div class="text-muted">Page Views</div>
</div>
</div>
</div>
</div>
</div>
@endsection
lalu pada folder settings tambahkan folder-folder berikut :
users
pada folder users ini buat dua file yaitu :
index.blade.php
@extends('templates/main')
@section('title', 'Data User')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Data User
<a href="{{ url('setting/users/create') }}" class="btn btn-primary pull-right">
<i class="fa fa-plus"></i> Add User
</a>
</div>
<div class="panel-body">
<div class="row">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block msgAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger msgAlert">
{{ session()->get('error') }}
</div>
@endif
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-striped table-hover table-sm">
<thead>
<th>No.</th>
<th>Name</th>
<th>Email</th>
<th></th>
</thead>
<tbody>
@foreach($data as $key => $d)
<tr>
<td>{{$key+1}}</td>
<td>{{ $d->name }}</td>
<td>{{ $d->email }}</td>
<td style="text-align:center;">
<a href="" class="btn btn-danger btn-sm">
<i class="fa fa-trash"></i> DELETE
</a>
<a href="" class="btn btn-success btn-sm">
<i class="fa fa-edit"></i> EDIT
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
create.blade.php
@extends('templates/main')
@section('title', 'Add User')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Add New User
</div>
<div class="panel-body">
<form action="{{ url('setting/users/save') }}" method="post">
@csrf
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="name">Name *</label>
<input type="text" name="name" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="email">Email *</label>
<input type="email" name="email" class="form-control" placeholder="Email" required>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="password">Password *</label>
<input type="password" name="password" class="form-control" placeholder="Password" autocomplete="new-password" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary pull-right">
<i class="fa fa-save"></i> SAVE
</button>
<a href="{{ url('setting/users') }}" class="btn btn-danger pull-right">
<i class="fa fa-arrow-left"></i> Cancel
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
menus
index.blade.php
@extends('templates/main')
@section('title', 'Data Menu')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Data Menu
<a href="{{ url('setting/menus/create') }}" class="btn btn-primary pull-right">
<i class="fa fa-plus"></i> Add Menu
</a>
</div>
<div class="panel-body">
<div class="row">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block msgAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger msgAlert">
{{ session()->get('error') }}
</div>
@endif
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-striped table-hover table-sm">
<thead>
<th>No.</th>
<th>Menu</th>
<th>Route</th>
<th></th>
</thead>
<tbody>
@foreach($data as $key => $d)
<tr>
<td>{{$key+1}}</td>
<td>{{ $d->name }}</td>
<td>{{ $d->route }}</td>
<td style="text-align:center;">
<a href="" class="btn btn-danger btn-sm">
<i class="fa fa-trash"></i> DELETE
</a>
<a href="" class="btn btn-success btn-sm">
<i class="fa fa-edit"></i> EDIT
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
create.blade.php
@extends('templates/main')
@section('title', 'Add Menu')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Add New Menu
</div>
<div class="panel-body">
<form action="{{ url('setting/menus/save') }}" method="post">
@csrf
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="menuname">Menu Name *</label>
<input type="text" name="menuname" class="form-control" placeholder="Menu Name" required>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="menuroute">Menu Route *</label>
<input type="text" name="menuroute" class="form-control" placeholder="Route" required>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="menugroups">Menu Groups *</label>
<select name="menugroups" class="form-control" required>
@foreach($groups as $key => $d)
<option value="{{ $d->id }}">{{ $d->description }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary pull-right">
<i class="fa fa-save"></i> SAVE
</button>
<a href="{{ url('setting/menus') }}" class="btn btn-danger pull-right">
<i class="fa fa-arrow-left"></i> Cancel
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
roles
index.blade.php
@extends('templates/main')
@section('title', 'Data Role')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Data Roles
<a href="{{ url('setting/roles/create') }}" class="btn btn-primary pull-right">
<i class="fa fa-plus"></i> Add Role
</a>
</div>
<div class="panel-body">
<div class="row">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block msgAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger msgAlert">
{{ session()->get('error') }}
</div>
@endif
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-striped table-hover table-sm">
<thead>
<th>No.</th>
<th>Role</th>
<th></th>
</thead>
<tbody>
@foreach($data as $key => $d)
<tr>
<td>{{$key+1}}</td>
<td>{{ $d->rolename }}</td>
<td style="text-align:center;">
<a href="" class="btn btn-danger btn-sm">
<i class="fa fa-trash"></i> DELETE
</a>
<a href="" class="btn btn-success btn-sm">
<i class="fa fa-edit"></i> EDIT
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
create.blade.php
@extends('templates/main')
@section('title', 'Add Role')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Add New Role
</div>
<div class="panel-body">
<form action="{{ url('setting/roles/save') }}" method="post">
@csrf
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="rolename">Role Name *</label>
<input type="text" name="rolename" class="form-control" placeholder="Role Name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary pull-right">
<i class="fa fa-save"></i> SAVE
</button>
<a href="{{ url('setting/roles') }}" class="btn btn-danger pull-right">
<i class="fa fa-arrow-left"></i> Cancel
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
menugroups
index.blade.php
@extends('templates/main')
@section('title', 'Data Menu Group')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Menu Group
<a href="{{ url('setting/menugroups/create') }}" class="btn btn-primary pull-right">
<i class="fa fa-plus"></i> Add Menu Group
</a>
</div>
<div class="panel-body">
<div class="row">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block msgAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger msgAlert">
{{ session()->get('error') }}
</div>
@endif
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered table-striped table-hover table-sm">
<thead>
<th>No.</th>
<th>Menu Group</th>
<th></th>
</thead>
<tbody>
@foreach($data as $key => $d)
<tr>
<td>{{$key+1}}</td>
<td>{{ $d->description }}</td>
<td style="text-align:center;">
<a href="" class="btn btn-danger btn-sm">
<i class="fa fa-trash"></i> DELETE
</a>
<a href="" class="btn btn-success btn-sm">
<i class="fa fa-edit"></i> EDIT
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
create.blade.php
@extends('templates/main')
@section('title', 'Add Menu Group')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Add New Menu Group
</div>
<div class="panel-body">
<form action="{{ url('setting/menugroups/save') }}" method="post">
@csrf
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="groupname">Group Name *</label>
<input type="text" name="groupname" class="form-control" placeholder="Group Name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary pull-right">
<i class="fa fa-save"></i> SAVE
</button>
<a href="{{ url('setting/menugroups') }}" class="btn btn-danger pull-right">
<i class="fa fa-arrow-left"></i> Cancel
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
menuroles
index.blade.php
@extends('templates/main')
@section('title', 'Data Menu Role')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Menu Role
<a href="{{ url('setting/menuroles/create') }}" class="btn btn-primary pull-right">
<i class="fa fa-plus"></i> Add Menu Role
</a>
</div>
<div class="panel-body">
<div class="row">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block msgAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger msgAlert">
{{ session()->get('error') }}
</div>
@endif
</div>
<div class="row">
<div class="col-lg-12">
<table id="table-data" class="table table-bordered table-striped table-hover table-sm">
<thead>
<th>No.</th>
<th>Menu</th>
<th>Role</th>
<th></th>
</thead>
<tbody>
@foreach($data as $key => $d)
<tr>
<td>{{$key+1}}</td>
<td>{{ $d->description }}</td>
<td>{{ $d->role }}</td>
<td></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('additional-js')
<script>
$(function(){
$('#table-data').DataTable();
});
</script>
@endsection
create.blade.php
@extends('templates/main')
@section('title', 'Add Menu Role')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Add New Menu Role
</div>
<div class="panel-body">
<form action="{{ url('setting/menuroles/save') }}" method="post">
@csrf
<div class="row">
<div class="col-lg-6">
<label for="rolename">Role Name *</label>
<div class="form-group">
<div class="input-group">
<input type="hidden" name="roleid" id="roleid">
<input type="text" name="rolename" id="rolename" class="form-control" placeholder="Role Name" required readonly>
<span class="input-group-btn">
<button type="button" class="btn btn-primary btn-sm" id="btn-select-role" style="height: 35px;margin-top: 0;">SELECT ROLE</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-striped table-bordered" style="width:100%">
<thead>
<th style="width:50px;">No.</th>
<th style="width:150px;">Menu ID</th>
<th>Description</th>
<th></th>
</thead>
<tbody id="tbl-menu-body">
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary pull-right">
<i class="fa fa-save"></i> SAVE
</button>
<button type="button" class="btn btn-success pull-right" id="btn-add-menu">
<i class="fa fa-plus"></i> ADD MENU
</button>
<a href="{{ url('setting/menuroles') }}" class="btn btn-danger pull-right">
<i class="fa fa-arrow-left"></i> Cancel
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
@section('modals')
<div class="modal fade bd-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalSelectRole">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalSelectRoleTitle">ROLE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body table-responsive">
<table class="table table-stripped" id="roleList" style="width:100%;">
<thead>
<tr>
<th>NO.</th>
<th>Role Name</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"> Cancel</button>
</div>
</div>
</div>
</div>
<!-- Modal Select App Menu -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalSelectMenu">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalSelectMenuTitle">MENU</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body table-responsive">
<table class="table table-stripped" id="menuList" style="width:100%;">
<thead>
<tr>
<th>Menu ID</th>
<th>Description</th>
<th>Menu Group</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"> Cancel</button>
</div>
</div>
</div>
</div>
<!-- End Modal Select App Menu -->
@endsection
@section('additional-js')
<script>
$(function(){
var menurole_data = [];
function menuroleExists(roleid, menuid) {
return menurole_data.some(function(el) {
if(el.roleid === roleid && el.menuid === menuid){
return true;
}else{
return false;
}
});
}
var count = 0;
$('#btn-select-role').on('click', function(){
loadRole();
$('#modalSelectRole').modal('show');
});
$('#btn-add-menu').on('click', function(){
loadMenu();
$('#modalSelectMenu').modal('show');
});
function loadRole(){
$('#roleList').dataTable({
"ajax": base_url+'/setting/roles/list',
"columns": [
{ "data": "id" },
{ "data": "rolename" },
{"defaultContent": "<button type='button' class='btn btn-primary btn-sm'><i class='fa fa-check'></i></button>"}
],
"bDestroy": true,
"paging": true,
"searching": true
});
$('#roleList tbody').on( 'click', 'button', function () {
var table = $('#roleList').DataTable();
selected_data = [];
selected_data = table.row($(this).closest('tr')).data();
$('#rolename').val(selected_data.rolename);
$('#roleid').val(selected_data.id);
$('#modalSelectRole').modal('hide');
} );
};
function loadMenu(){
$('#menuList').dataTable({
"ajax": base_url+'/setting/menus/list',
"columns": [
{ "data": "id" },
{ "data": "description" },
{ "data": "groupname"},
{"defaultContent": "<button type='button' class='btn btn-primary btn-sm'><i class='fa fa-check'></i></button>"}
],
"bDestroy": true,
"paging": true,
"searching": true
});
$('#menuList tbody').on( 'click', 'button', function () {
var table = $('#menuList').DataTable();
selected_data = [];
selected_data = table.row($(this).closest('tr')).data();
if(menuroleExists($('#inp-roleid').val(), selected_data.id)){
} else{
count = count+1;
html = '';
html = `
<tr counter="`+ count +`" id="tr`+ count +`">
<td class="nurut">
`+ count +`
<input type="hidden" name="itm_no[]" value="`+ count +`" />
</td>
<td>
<input type="text" name="itm_idmenu[]" counter="`+count+`" class="form-control materialCode" style="width:100%;" required="true" value="`+ selected_data.id +`" readonly/>
</td>
<td>
<input type="text" name="itm_menu[]" counter="`+count+`" class="form-control" style="width:100%;" value="`+ selected_data.description +`" readonly/>
</td>
<td>
<button type="button" class="btn btn-danger btn-sm removePO hideComponent" counter="`+count+`">Remove</button>
</td>
</tr>
`;
$('#tbl-menu-body').append(html);
renumberRows();
var menuroleData = {
roleid : $('#inp-roleid').val(),
menuid : selected_data.id
}
menurole_data.push(menuroleData);
$('.removePO').on('click', function(e){
e.preventDefault();
var row_index = $(this).closest("tr").index();
$(this).closest("tr").remove();
menurole_data.splice(row_index, 1);
renumberRows();
});
}
} );
}
function renumberRows() {
$(".mainbodynpo > tr").each(function(i, v) {
$(this).find(".nurut").text(i + 1);
});
}
});
</script>
@endsection
userroles
index.blade.php
@extends('templates/main')
@section('title', 'Data User Role')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
User Role
<a href="{{ url('setting/userroles/create') }}" class="btn btn-primary pull-right">
<i class="fa fa-plus"></i> Add User Role
</a>
</div>
<div class="panel-body">
<div class="row">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block msgAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if(session()->has('error'))
<div class="alert alert-danger msgAlert">
{{ session()->get('error') }}
</div>
@endif
</div>
<div class="row">
<div class="col-lg-12">
<table id="table-data" class="table table-bordered table-striped table-hover table-sm">
<thead>
<th>No.</th>
<th>Email</th>
<th>Role</th>
<th></th>
</thead>
<tbody>
@foreach($data as $key => $d)
<tr>
<td>{{$key+1}}</td>
<td>{{ $d->email }}</td>
<td>{{ $d->role }}</td>
<td style="text-align:center;">
<a href="{{ url('setting/userroles/delete') }}/{{$d->email}}/{{$d->roleid}}" class="btn btn-danger btn-sm">
<i class="fa fa-trash"></i> DELETE
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('additional-js')
<script>
$(function(){
$('#table-data').DataTable();
});
</script>
@endsection
create.blade.php
@extends('templates/main')
@section('title', 'Add Menu Role')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Add New User Role
</div>
<div class="panel-body">
<form action="{{ url('setting/userroles/save') }}" method="post">
@csrf
<div class="row">
<div class="col-lg-6">
<label for="email">User / Email *</label>
<div class="form-group">
<div class="input-group">
<input type="text" name="email" id="email" class="form-control" placeholder="Email" required readonly>
<span class="input-group-btn">
<button type="button" class="btn btn-primary btn-sm" id="btn-select-user" style="height: 35px;margin-top: 0;">SELECT USER</button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table table-striped table-bordered" style="width:100%">
<thead>
<th style="width:50px;">No.</th>
<th style="width:80%;">Role Name</th>
<th></th>
</thead>
<tbody class="mainbodynpo" id="tbl-role-body">
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary pull-right">
<i class="fa fa-save"></i> SAVE
</button>
<button type="button" class="btn btn-success pull-right" id="btn-add-role">
<i class="fa fa-plus"></i> ADD ROLE
</button>
<a href="{{ url('setting/menuroles') }}" class="btn btn-danger pull-right">
<i class="fa fa-arrow-left"></i> Cancel
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
@endsection
@section('modals')
<div class="modal fade bd-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalSelectRole">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalSelectRoleTitle">ROLE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body table-responsive">
<table class="table table-stripped" id="roleList" style="width:100%;">
<thead>
<tr>
<th>NO.</th>
<th>Role Name</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"> Cancel</button>
</div>
</div>
</div>
</div>
<!-- Modal Select App Menu -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalSelectUser">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalSelectMenuTitle">User List</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body table-responsive">
<table class="table table-stripped" id="userList" style="width:100%;">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"> Cancel</button>
</div>
</div>
</div>
</div>
<!-- End Modal Select App Menu -->
@endsection
@section('additional-js')
<script>
$(function(){
var userrole_data = [];
function userroleExists(role, username) {
return userrole_data.some(function(el) {
if(el.id === role && el.email === username){
return true;
}else{
return false;
}
});
}
var count = 0;
$('#btn-select-user').on('click', function(){
loadUser();
$('#modalSelectUser').modal('show');
});
$('#btn-add-role').on('click', function(){
if($('#email').val() === ""){
alert("Choose User")
}else{
loadRole();
$('#modalSelectRole').modal('show');
}
});
function loadRole(){
$('#roleList').dataTable({
"ajax": base_url+'/setting/roles/list',
"columns": [
{ "data": "id" },
{ "data": "rolename" },
{"defaultContent": "<button type='button' class='btn btn-primary btn-sm'><i class='fa fa-check'></i></button>"}
],
"bDestroy": true,
"paging": true,
"searching": true
});
$('#roleList tbody').on( 'click', 'button', function () {
var table = $('#roleList').DataTable();
selected_data = [];
selected_data = table.row($(this).closest('tr')).data();
// $('#rolename').val(selected_data.rolename);
// $('#roleid').val(selected_data.id);
// $('#modalSelectRole').modal('hide');
if(userroleExists(selected_data.id, $('#email').val())){
} else{
count = count+1;
html = '';
html = `
<tr counter="`+ count +`" id="tr`+ count +`">
<td class="nurut">
`+ count +`
</td>
<td style="width:80%;">
<input type="hidden" name="itm_roleid[]" value="`+ selected_data.id +`" />
<input type="text" name="itm_idmenu[]" counter="`+count+`" class="form-control materialCode" style="width:100%;" required="true" value="`+ selected_data.rolename +`" readonly/>
</td>
<td>
<button type="button" class="btn btn-danger btn-sm removePO hideComponent" counter="`+count+`">Remove</button>
</td>
</tr>
`;
$('#tbl-role-body').append(html);
renumberRows();
var userroleData = {
id : selected_data.id,
email : $('#email').val()
}
userrole_data.push(userroleData);
$('.removePO').on('click', function(e){
e.preventDefault();
var row_index = $(this).closest("tr").index();
$(this).closest("tr").remove();
userrole_data.splice(row_index, 1);
renumberRows();
});
}
} );
};
function loadUser(){
$('#userList').dataTable({
"ajax": base_url+'/setting/users/list',
"columns": [
{ "data": "email" },
{ "data": "name"},
{"defaultContent": "<button type='button' class='btn btn-primary btn-sm'><i class='fa fa-check'></i></button>"}
],
"bDestroy": true,
"paging": true,
"searching": true
});
$('#userList tbody').on( 'click', 'button', function () {
var table = $('#userList').DataTable();
selected_data = [];
selected_data = table.row($(this).closest('tr')).data();
$('#email').val(selected_data.email);
$('#modalSelectUser').modal('hide');
} );
}
function renumberRows() {
$(".mainbodynpo > tr").each(function(i, v) {
$(this).find(".nurut").text(i + 1);
});
}
});
</script>
@endsection
lalu pada routes/web.php
<?php
use Illuminate\Support\Facades\Route;
// use Auth;
// 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::group(['middleware' => 'guest'], function(){
Route::group(['middleware' => 'revalidate'], function () {
Route::get('/', 'HomeController@index')->name('login');
Route::post('authenticate', 'HomeController@login');
});
});
Route::group(['middleware' => 'auth'], function () {
Route::group(['middleware' => 'revalidate'], function () {
Route::get('/dashboard', 'HomeController@dashboard');
Route::get('/setting/users', 'Setting\UserController@index')->middleware('checkAuth:setting/users');
Route::get('/setting/users/create', 'Setting\UserController@create')->middleware('checkAuth:setting/users');
Route::post('/setting/users/save', 'Setting\UserController@save')->middleware('checkAuth:setting/users');
Route::get('/setting/users/list', 'Setting\UserController@list')->middleware('checkAuth:setting/users');
Route::get('/setting/roles', 'Setting\RoleController@index')->middleware('checkAuth:setting/roles');
Route::get('/setting/roles/create', 'Setting\RoleController@create')->middleware('checkAuth:setting/roles');
Route::post('/setting/roles/save', 'Setting\RoleController@save')->middleware('checkAuth:setting/roles');
Route::get('/setting/roles/list', 'Setting\RoleController@list')->middleware('checkAuth:setting/roles');
Route::get('/setting/menugroups', 'Setting\MenuGroupController@index')->middleware('checkAuth:setting/menugroups');
Route::get('/setting/menugroups/create', 'Setting\MenuGroupController@create')->middleware('checkAuth:setting/menugroups');
Route::post('/setting/menugroups/save', 'Setting\MenuGroupController@save')->middleware('checkAuth:setting/menugroups');
Route::get('/setting/menus', 'Setting\MenuController@index')->middleware('checkAuth:setting/menus');
Route::get('/setting/menus/create', 'Setting\MenuController@create')->middleware('checkAuth:setting/menus');
Route::post('/setting/menus/save', 'Setting\MenuController@save')->middleware('checkAuth:setting/menus');
Route::get('/setting/menus/list', 'Setting\MenuController@list')->middleware('checkAuth:setting/menus');
Route::get('/setting/menuroles', 'Setting\MenuRoleController@index')->middleware('checkAuth:setting/menuroles');
Route::get('/setting/menuroles/create', 'Setting\MenuRoleController@create')->middleware('checkAuth:setting/menuroles');
Route::post('/setting/menuroles/save', 'Setting\MenuRoleController@save')->middleware('checkAuth:setting/menuroles');
Route::get('/setting/userroles', 'Setting\UserRoleController@index')->middleware('checkAuth:setting/userroles');
Route::get('/setting/userroles/create', 'Setting\UserRoleController@create')->middleware('checkAuth:setting/userroles');
Route::post('/setting/userroles/save', 'Setting\UserRoleController@save')->middleware('checkAuth:setting/userroles');
Route::get('/setting/userroles/delete/{user}/{role}', 'Setting\UserRoleController@delete')->middleware('checkAuth:setting/userroles');
Route::post('logout', 'HomeController@logout');
});
});
lalu update file RouteServiceProviders.php menjadi seperti berikut :
<?php
namespace App\Providers;
use Illuminate\Cache\RateLimiting\Limit;
use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\Facades\Route;
class RouteServiceProvider extends ServiceProvider
{
/**
* The path to the "home" route for your application.
*
* This is used by Laravel authentication to redirect users after login.
*
* @var string
*/
public const HOME = '/dashboard';
// public const HOME = '/';
/**
* The controller namespace for the application.
*
* When present, controller route declarations will automatically be prefixed with this namespace.
*
* @var string|null
*/
// protected $namespace = 'App\\Http\\Controllers';
/**
* Define your route model bindings, pattern filters, etc.
*
* @return void
*/
protected $namespace = 'App\Http\Controllers';
public function boot()
{
$this->configureRateLimiting();
$this->routes(function () {
Route::prefix('api')
->middleware('api')
->namespace($this->namespace)
->group(base_path('routes/api.php'));
Route::middleware('web')
->namespace($this->namespace)
->group(base_path('routes/web.php'));
});
}
/**
* Configure the rate limiters for the application.
*
* @return void
*/
protected function configureRateLimiting()
{
RateLimiter::for('api', function (Request $request) {
return Limit::perMinute(60)->by(optional($request->user())->id ?: $request->ip());
});
}
}
terakhir lakukan setting koneksi database pada file .env
tampilan
Demikianlah Artikel Laravel 8 : User Management Part3
Sekianlah artikel Laravel 8 : User Management Part3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Laravel 8 : User Management Part3 dengan alamat link https://dev-create.blogspot.com/2021/09/laravel-8-user-management-part3.html
