Laravel 8 E-Commerce - Admin Create Settings Page
In this video, we will learn how to create an Admin Settings Page for our e-commerce application.
Let's explore how to create a settings page that allows administrators to manage application settings.
First, we need to create a model.
Go to the command prompt and run the following command:
php artisan make:model Setting –m
Next, switch to the project and open the create_settings_table migration file.
Add the following code to the migration file:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateSettingsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('settings', function (Blueprint $table) {
$table->id();
$table->string('email');
$table->string('phone');
$table->string('phone2');
$table->string('address');
$table->text('map');
$table->string('twiter');
$table->string('facebook');
$table->string('pinterest');
$table->string('instagram');
$table->string('youtube');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('settings');
}
}
Now, let's create a new Livewire component.
Switch to the command prompt and run the following command to create a new Livewire component:
php artisan make:livewire admin/AdminSetting
Switch to the project and create a new route.
Open the web.php file and inside the admin middleware route group, create a new route:
Route::get('/admin/setting',AdminSettingComponent::class)->name('admin.setting');
Go to the AdminSettingComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Setting;
use Livewire\Component;
class AdminSettingComponent extends Component
{
public $email;
public $phone;
public $phone2;
public $address;
public $map;
public $twiter;
public $facebook;
public $pinterest;
public $instagram;
public $youtube;
public function mount()
{
$setting = Setting::find(1);
if($setting)
{
$this->email = $setting->email;
$this->phone = $setting->phone;
$this->phone2 = $setting->phone2;
$this->address = $setting->address;
$this->map = $setting->map;
$this->twiter = $setting->twiter;
$this->facebook = $setting->facebook;
$this->pinterest = $setting->pinterest;
$this->instagram = $setting->instagram;
$this->youtube = $setting->youtube;
}
}
public function updated($fields)
{
$this->validateOnly($fields,[
'email' => 'required|email',
'phone' => 'required',
'phone2' => 'required',
'address' => 'required',
'map' => 'required',
'twiter' => 'required',
'facebook' => 'required',
'pinterest' => 'required',
'instagram' => 'required',
'youtube' => 'required'
]);
}
public function saveSettings()
{
$this->validate([
'email' => 'required|email',
'phone' => 'required',
'phone2' => 'required',
'address' => 'required',
'map' => 'required',
'twiter' => 'required',
'facebook' => 'required',
'pinterest' => 'required',
'instagram' => 'required',
'youtube' => 'required'
]);
$setting = Setting::find(1);
if(!$setting)
{
$setting = new Setting();
}
$setting->email = $this->email;
$setting->phone = $this->phone;
$setting->phone2 = $this->phone2;
$setting->address = $this->address;
$setting->map = $this->map;
$setting->twiter = $this->twiter;
$setting->facebook = $this->facebook;
$setting->pinterest = $this->pinterest;
$setting->instagram = $this->instagram;
$setting->youtube = $this->youtube;
$setting->save();
session()->flash('message','Settings has been saved successfully!');
}
public function render()
{
return view('livewire.admin.admin-setting-component')->layout('layouts.base');
}
}
Open the admin-setting-component.blade.php view file and write the following code:
<div>
<div class="container" style="padding: 30px 0">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Settings
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" wire:submit.prevent="saveSettings">
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-4">
<input type="email" placeholder="Email" class="form-control input-md" wire:model="email" />
@error('email') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Phone</label>
<div class="col-md-4">
<input type="text" placeholder="Phone" class="form-control input-md" wire:model="phone" />
@error('phone') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Phone2</label>
<div class="col-md-4">
<input type="text" placeholder="Phone2" class="form-control input-md" wire:model="phone2" />
@error('phone2') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-4">
<input type="text" placeholder="Address" class="form-control input-md" wire:model="address" />
@error('address') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Map</label>
<div class="col-md-4">
<input type="text" placeholder="Map" class="form-control input-md" wire:model="map" />
@error('map') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Twiter</label>
<div class="col-md-4">
<input type="text" placeholder="Twiter" class="form-control input-md" wire:model="twiter" />
@error('twiter') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Facebook</label>
<div class="col-md-4">
<input type="text" placeholder="Facebook" class="form-control input-md" wire:model="facebook" />
@error('facebook') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Pinterest</label>
<div class="col-md-4">
<input type="text" placeholder="Pinterest" class="form-control input-md" wire:model="pinterest" />
@error('pinterest') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Instagram</label>
<div class="col-md-4">
<input type="text" placeholder="Instagram" class="form-control input-md" wire:model="instagram" />
@error('instagram') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Youtube</label>
<div class="col-md-4">
<input type="text" placeholder="Youtube" class="form-control input-md" wire:model="youtube" />
@error('youtube') <p class="text-danger">{{$message}}</p> @enderror
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Go to the base.blade.php layout file and create a link to the settings page inside the admin menu:
<li class="menu-item">
<a title="Settings" href="{{route('admin.settings')}}">Settings</a>
</li>
Now that we've completed the settings page, let's test it.
Switch to your browser and refresh the page.
Go to the admin menu and click on the "Settings" link.
Enter your email and phone number:
Click on save.
You should see a message indicating that the settings have been saved successfully.
In our next video, we will learn how to implement these settings in our project.
And that's how you can create an Admin Settings Page for your e-commerce application.
That's all about the Admin Settings Page.
