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
This comment has been removed by the author.
ReplyDeleteSalaam mas, salaam kenal, saya fahmi dari jogja, punya nomor wa gak mas? mau nanya2x ttg aplikasi android, makasih
ReplyDeletehalo mas, apakah bisa mint data dummy untuk tutorialnya mas ?
ReplyDeletehalo mas mau tanya itu password sama usernya apa yah,kan db nya kosong
ReplyDelete