Admin dashboard in Laravel 9 | Sample Template
Hello Dev,
This tutorial will give you an example of how to clone a Laravel project from GitHub. let’s discuss the steps to clone the Laravel project from GitHub. I explained simply about the clone Laravel project from GitHub. This article goes into detail on the clone Laravel project from Github on the server.
In this tutorial, I will show you step-by-step how to clone laravel projects from Github, GitLab, or bitbucket and set up an ubuntu server from scratch. you can easily clone laravel 6, laravel 7, laravel 8, and laravel 9 projects from this post.
So, let's follow the below step-by-step and get done with the clone laravel app.
'
Git Clone my Project
1.Run `git clone 'link projer github'
2.Run composer update
3.Run cp .env.example .env or copy .env.example .env
4.Run php artisan key:generate
5.Run php artisan migrate
6.Run php artisan serve
7.Go to link localhost:8000
Step 1: Git Clone Laravel 9
First, clone a new Laravel app just by running the below command in your terminal.
git clone https://gitlab.com/SoengSouy/admin-dashboard-sample-laravel-9.git
Step 2: Composer Update
Type the command in your terminal.
composer update
composer update
Step 3: Set active on the route
Type the command in your terminal.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\FormController;
/*
|--------------------------------------------------------------------------
| 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!
|
*/
/** set active side bar */
function set_active($route) {
if (is_array($route)) {
return in_array(Request::path(), $route) ? 'active' : '';
}
return Request::path() == $route ? 'active' : '';
}
Route::get('/', function () {
return view('dashboard.dashboard');
})->name('/');
// ----------------------------- main dashboard ------------------------------//
Route::controller(HomeController::class)->group(function () {
Route::get('dashboard/page', 'index')->name('dashboard/page');
Route::get('form/input', 'index')->name('form/input');
});
// -------------------------------- form ------------------------------------//
Route::controller(FormController::class)->group(function () {
Route::get('form/input/page', 'formIndex')->name('form/input/page');
Route::post('form/input/save', 'formSaveRecord')->name('form/input/save');
});
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\FormController;
/*
|--------------------------------------------------------------------------
| 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!
|
*/
/** set active side bar */
function set_active($route) {
if (is_array($route)) {
return in_array(Request::path(), $route) ? 'active' : '';
}
return Request::path() == $route ? 'active' : '';
}
Route::get('/', function () {
return view('dashboard.dashboard');
})->name('/');
// ----------------------------- main dashboard ------------------------------//
Route::controller(HomeController::class)->group(function () {
Route::get('dashboard/page', 'index')->name('dashboard/page');
Route::get('form/input', 'index')->name('form/input');
});
// -------------------------------- form ------------------------------------//
Route::controller(FormController::class)->group(function () {
Route::get('form/input/page', 'formIndex')->name('form/input/page');
Route::post('form/input/save', 'formSaveRecord')->name('form/input/save');
});
Step 4: Form
views/pageview/form-input-table.blade.php
@extends('layouts.master')
@section('content')
<div class="page-wrapper">
<div class="content container-fluid">
<div class="page-header">
<div class="row">
<div class="col-sm-12">
<h3 class="page-title">Form Report</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active">Form Report</li>
</ul>
</div>
</div>
</div>
<div class="row filter-row">
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus select-focus">
<input class="form-control floating" type="text">
<label class="focus-label">Full Name By</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus">
<div class="cal-icon">
<input class="form-control floating datetimepicker" type="text">
</div>
<label class="focus-label">From</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus">
<div class="cal-icon">
<input class="form-control floating datetimepicker" type="text">
</div>
<label class="focus-label">To</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="btn btn-success btn-block"> Search </a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped custom-table mb-0 datatable">
<thead>
<tr>
<th>No</th>
<th>Full Name</th>
<th>Gender</th>
<th>Blood Group</th>
<th>Address</th>
<th>State</th>
<th>City</th>
<th>Country</th>
<th>Postal Code</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
@foreach ($dataFormInput as $key=>$items )
<tr>
<td class="id">{{ $items->id }}</td>
<td>
<strong>{{ $items->full_name }}</strong>
</td>
<td>{{ $items->gender }}</td>
<td>{{ $items->blood_group }}</td>
<td>{{ $items->address }}</td>
<td>{{ $items->state }}</td>
<td>{{ $items->city }}</td>
<td>{{ $items->country }}</td>
<td>{{ $items->postal_code }}</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ url('form/input/edit/'.$items->id) }}">
<i class="fa fa-pencil m-r-5"></i>Edit
</a>
<a class="dropdown-item delete" href="#" data-toggle="modal" data-target="#delete_form_record">
<i class="fa fa-trash-o m-r-5"></i>Delete
</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Delete Record From Modal -->
<div class="modal custom-modal fade" id="delete_form_record" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<div class="form-header">
<h3>Delete Form Record</h3>
<p>Are you sure want to delete?</p>
</div>
<div class="modal-btn delete-action">
<form action="{{ route('form/input/delete') }}" method="POST">
@csrf
<input type="hidden" name="id" class="e_id" value="">
<div class="row">
<div class="col-6">
<button type="submit" class="btn btn-primary continue-btn submit-btn">Delete</button>
</div>
<div class="col-6">
<a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /Delete Record From Modal -->
@section('script')
{{-- delete js --}}
<script>
$(document).on('click','.delete',function()
{
var _this = $(this).parents('tr');
$('.e_id').val(_this.find('.id').text());
});
</script>
@endsection
@endsection
@extends('layouts.master')
@section('content')
<div class="page-wrapper">
<div class="content container-fluid">
<div class="page-header">
<div class="row">
<div class="col-sm-12">
<h3 class="page-title">Form Report</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active">Form Report</li>
</ul>
</div>
</div>
</div>
<div class="row filter-row">
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus select-focus">
<input class="form-control floating" type="text">
<label class="focus-label">Full Name By</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus">
<div class="cal-icon">
<input class="form-control floating datetimepicker" type="text">
</div>
<label class="focus-label">From</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="form-group form-focus">
<div class="cal-icon">
<input class="form-control floating datetimepicker" type="text">
</div>
<label class="focus-label">To</label>
</div>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="btn btn-success btn-block"> Search </a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped custom-table mb-0 datatable">
<thead>
<tr>
<th>No</th>
<th>Full Name</th>
<th>Gender</th>
<th>Blood Group</th>
<th>Address</th>
<th>State</th>
<th>City</th>
<th>Country</th>
<th>Postal Code</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
@foreach ($dataFormInput as $key=>$items )
<tr>
<td class="id">{{ $items->id }}</td>
<td>
<strong>{{ $items->full_name }}</strong>
</td>
<td>{{ $items->gender }}</td>
<td>{{ $items->blood_group }}</td>
<td>{{ $items->address }}</td>
<td>{{ $items->state }}</td>
<td>{{ $items->city }}</td>
<td>{{ $items->country }}</td>
<td>{{ $items->postal_code }}</td>
<td class="text-right">
<div class="dropdown dropdown-action">
<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ url('form/input/edit/'.$items->id) }}">
<i class="fa fa-pencil m-r-5"></i>Edit
</a>
<a class="dropdown-item delete" href="#" data-toggle="modal" data-target="#delete_form_record">
<i class="fa fa-trash-o m-r-5"></i>Delete
</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Delete Record From Modal -->
<div class="modal custom-modal fade" id="delete_form_record" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<div class="form-header">
<h3>Delete Form Record</h3>
<p>Are you sure want to delete?</p>
</div>
<div class="modal-btn delete-action">
<form action="{{ route('form/input/delete') }}" method="POST">
@csrf
<input type="hidden" name="id" class="e_id" value="">
<div class="row">
<div class="col-6">
<button type="submit" class="btn btn-primary continue-btn submit-btn">Delete</button>
</div>
<div class="col-6">
<a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /Delete Record From Modal -->
@section('script')
{{-- delete js --}}
<script>
$(document).on('click','.delete',function()
{
var _this = $(this).parents('tr');
$('.e_id').val(_this.find('.id').text());
});
</script>
@endsection
@endsection
Step 5: Controller
app\Http\Controllers\FormController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use App\Models\FormInput;
class FormController extends Controller
{
/** delete record */
public function formDelete(Request $request)
{
try {
FormInput::destroy($request->id);
return redirect()->back();
} catch(\Exception $e) {
DB::rollback();
return redirect()->back();
}
}
}
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use App\Models\FormInput;
class FormController extends Controller
{
/** delete record */
public function formDelete(Request $request)
{
try {
FormInput::destroy($request->id);
return redirect()->back();
} catch(\Exception $e) {
DB::rollback();
return redirect()->back();
}
}
}
Step 6: Migrate the table
Type the command in your terminal.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('form_inputs', function (Blueprint $table) {
$table->id();
$table->text('full_name')->nullable();
$table->text('gender')->nullable();
$table->text('blood_group')->nullable();
$table->text('address')->nullable();
$table->text('state')->nullable();
$table->text('city')->nullable();
$table->text('country')->nullable();
$table->text('postal_code')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('form_inputs');
}
};
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('form_inputs', function (Blueprint $table) {
$table->id();
$table->text('full_name')->nullable();
$table->text('gender')->nullable();
$table->text('blood_group')->nullable();
$table->text('address')->nullable();
$table->text('state')->nullable();
$table->text('city')->nullable();
$table->text('country')->nullable();
$table->text('postal_code')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('form_inputs');
}
};
php artisan migrate
php artisan migrate
Step 5:Run
After adding the run file now run the migrate command.
php artisan serve
Tags:
Laravel