Desain profil user digunakan untuk menampilkan data masing-masing member, seperti foto profil, nama dan email. Untuk membuat profil dan setting profil, kita membutuhkan 1 buah controller dan 2 buah file views.
# Buat User Controller
Buka terminal dan ketikkan perintah
php artisan make:controller UserController
Tekan enter, kemudian buka file UserController.php dan isi dengan kode berikut.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function index() {
$data = array('title' => 'User Profil');
return view('user.index', $data);
}
public function setting() {
$data = array('title' => 'Setting Profil');
return view('user.setting', $data);
}
}
# Edit Route
Buka file routes/web.php dan edit dengan menambahkan 2 buah route
<?php
/*
|--------------------------------------------------------------------------
| 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('/', '[email protected]');
Route::get('/about', '[email protected]');
Route::get('/kontak', '[email protected]');
Route::get('/kategori', '[email protected]');
Route::get('/kategori/{slug}', '[email protected]');
Route::get('/produk', '[email protected]');
Route::get('/produk/{slug}', '[email protected]');
Route::group(['prefix' => 'admin'], function() {
Route::get('/', '[email protected]');
// route kategori
Route::resource('kategori', 'KategoriController');
// route produk
Route::resource('produk', 'ProdukController');
// route customer
Route::resource('customer', 'CustomerController');
// route transaksi
Route::resource('transaksi', 'TransaksiController');
// profil
Route::get('profil', '[email protected]');
// setting profil
Route::get('setting', '[email protected]');
});
Selanjutnya buatlah 2 buah file views.
# Halaman profil
Buat 1 buah folder baru di dalam folder views dengan nama user. Selanjutnya buat 1 buah file index.blade.php dan isi dengan kode berikut.
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col col-lg-4 col-md-4">
<div class="card card-primary card-outline">
<div class="card-body box-profile">
<div class="text-center">
<img src="{{ asset('img/user1-128x128.jpg') }}" alt="profil" class="profile-user-img img-responsive img-circle">
</div>
<h3 class="profile-username text-center">Fadlur Rohman</h3>
<p class="text-muted text-center">Member sejak : 20 Des 2020</p>
<hr>
<strong>
<i class="fas fa-map-marker mr-2"></i>
Alamat
</strong>
<p class="text-muted">
Jekulo, Kab Kudus
</p>
<hr>
<strong>
<i class="fas fa-envelope mr-2"></i>
Email
</strong>
<p class="text-muted">
[email protected]
</p>
<hr>
<strong>
<i class="fas fa-phone mr-2"></i>
No Tlp
</strong>
<p class="text-muted">
Jekulo, Kab Kudus
</p>
<hr>
<a href="{{ URL::to('admin/setting') }}" class="btn btn-primary btn-block">Setting</a>
</div>
</div>
</div>
<div class="col col-lg-8 col-md-8">
<div class="card card-primary card-outline">
<div class="card-header">
<h3 class="card-title">History Transaksi</h3>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Invoice</th>
<th>Sub Total</th>
<th>Diskon</th>
<th>Ongkir</th>
<th>Total</th>
<th>Status Pembayaran</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Inv-01
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 1) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Inv-02
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 2) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Inv-03
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 3) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Inv-04
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 4) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Inv-05
</td>
<td>
200.000
</td>
<td>
0
</td>
<td>
27.000
</td>
<td>
227.000
</td>
<td>
Belum dibayar
</td>
<td>
Checkout
</td>
<td>
<a href="{{ route('transaksi.show', 5) }}" class="btn btn-sm btn-info mb-2">
Detail
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Kembali ke terminal dan jalankan aplikasi dengan mengetik perintah
php artisan serve
Akses halaman profil http://localhost:8000/admin/profil hasilnya akan tampak seperti gambar di bawah ini.
# Buat halaman setting profil
Setelah halaman profil selesai kita buat, selanjutnya buat 1 buah file lagi di dalam folder user dengan nama setting.blade.php dan isi dengan kode berikut
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col col-lg-4 col-md-4">
<div class="card card-primary card-outline">
<div class="card-body box-profile">
<div class="text-center">
<img src="{{ asset('img/user1-128x128.jpg') }}" alt="profil" class="profile-user-img img-responsive img-circle">
</div>
<form action="">
<div class="row">
<div class="col">
<div class="form-group">
<input type="file" name="foto" id="foto">
</div>
</div>
<div class="col">
<div class="form-group">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</div>
</form>
<hr>
<form action="">
<div class="form-group">
<label for="name">Nama</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="phone">No Tlp</label>
<input type="text" name="phone" id="phone" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Akses kembali dengan alamat http://localhost:8000/admin/setting
# Tambahkan Menu Profil
Untuk menambahkan menu ke halaman profil, buka file menudashboard.blade.php dan edit menjadi seperti berikut.
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-folder-open"></i>
<p>
Produk
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('produk.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Produk</p>
</a>
</li>
<li class="nav-item">
<a href="{{ route('kategori.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Kategori</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-shopping-cart"></i>
<p>
Transaksi
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('transaksi.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Data Transaksi</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-folder"></i>
<p>
Data
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('customer.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Customer</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-list"></i>
<p>
Laporan
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Penjualan</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="{{ URL::to('admin/profil') }}" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Profil
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-sign-out-alt"></i>
<p>
Sign Out
</p>
</a>
</li>
</ul>
</nav>
Sekarang refresh halaman profil, dan klik menu profil yang barusan kita buat.