Desain Profil User
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 UserControllerTekan 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>
@endsectionKembali ke terminal dan jalankan aplikasi dengan mengetik perintah
php artisan serveAkses 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>
@endsectionAkses 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.
Mau Bikin Aplikasi Web & Aplikasi Android?
Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir
Silahkan kontak link di bawah ini untuk teknis dan harganya
