Boilerplate Laravel 13: Membuat Halaman Setting

Kembali lagi di tutorial laravel media-info, kali ini kita akan membuat tampilan setting. hal pertama yg harus dilakukan adalah membuat model dan migrasi.

Membuat model setting

Buka cmd dan masuk ke folder project kalian, ketikan perintah di bawah

C:\xampp\htdocs\blog> php artisan make:model Setting -m

Maka otomatis akan membuat file model dan migrasi, silahkan buka file migrasi yg tdi di buat di dalam folder database/migration bernama .._create_settings_table.php dan tambahkan field seperti dibawa ini

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateSettingsTable extends Migration
{

    public function up()
    {
        Schema::create('settings', function (Blueprint $table) {
            $table->increments('id');
            $table->string('site_name');
            $table->string('contact_number');
            $table->string('contact_email');
            $table->string('address');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('settings');
    }
}

Selanjutnya silahkan edit file Setting.php di dalam folder app yang tadi sudah di buat. lihat script dibawah

Setting.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Setting extends Model
{
    protected $fillable = ['site_name', 'address', 'contact_number', 'contact_email'];
}

Sebelum lanjut kita buat dlu seed untuk setting. silahkan ketikan printah dibawah

C:\xampp\htdocs\blog> php artisan make:seeder SettingsTableSeeder

maka akan ada file SettingsTableSeeder.php di dalam folder database/seeds, silahkan edit seperti dibawah ini.

<?php

use Illuminate\Database\Seeder;

class SettingTableSeeder extends Seeder
{
    
    public function run()
    {
        \App\Setting::create([
            'site_name' => "Blog Anjas",
            'address' => "Sukabumi",
            'contact_number' => "085798602066",
            'contact_email' => "anjasmuslim05@gmai.com"
        ]);
    }
}

setelah itu edit juga file DatabaseSeeder.php di dalam folder database/seeds

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    
    public function run()
    {
        //$this->call(UserTableSeeder::class);
        $this->call(SettingTableSeeder::class);
    }
}

jika sudah selesai kita lanjut migrasi tabel setting dan seednya dengan perintah dibawah

C:\xampp\htdocs\blog> php artisan migrate

C:\xampp\htdocs\blog> php artisan db:seed

maka akan ada tabel setting dan data seed setting yg tdi di buat. selanjutnya kita akan membuat controller.

Membuat Controller

Silahkan buka cmd kalian karna kita akan membuat controller setting dengan perintah berikut.

C:\xampp\htdocs\blog> php artisan make:controller SettingsController

Maka otomatis SettingsController.php terbuat di dalam folder app/Http/Controllers, silahkan edit seperti dibawah ini.

SettingsController.php

<?php

namespace App\Http\Controllers;

use Session;
use App\Setting;
use Illuminate\Http\Request;

class SettingsController extends Controller
{
    public function __construct(){
        $this->middleware('admin');
    }

    public function index(){
        return view('admin.settings.settings')->with('setting', Setting::first());
    }

    public function update(){
        $this->validate(request(), [
            'site_name' => 'required',
            'contact_number' => 'required',
            'contact_email' => 'required',
            'address' => 'required'
        ]);

        $setting = Setting::first();
        
        $setting->site_name = request()->site_name;
        $setting->contact_number = request()->contact_number;
        $setting->contact_email = request()->contact_email;
        $setting->address = request()->address;

        $setting->save();

        Session::flash('success', 'save setting success');

        return redirect()->back();
    }
}

Membuat View

Sebelumnya kita buat dlu menu setting di file app.blade.php di dalam folder resources/views/layouts, silahkan tambahkan seperti dibawah ini.

<ul class="dropdown-menu" role="menu">
    <li>
        <a href="{{ route('user.profile') }}">Profile</a>
    </li>
    <li>
        <a href="{{ url('/logout') }}"
            onclick="event.preventDefault();
                        document.getElementById('logout-form').submit();">
            Logout
        </a>

        <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
            {{ csrf_field() }}
        </form>
    </li>
    @if(Auth::user()->admin)
    <li>
        <a href="{{ route('settings') }}">Setting</a>
    </li>
    @endif
</ul>

Setelah itu buat folder settings di dalam resources/views/admin

C:\xampp\htdocs\blog\resources\views\admin> mkdir settings

Buat file settings.blade.php di dalam resources/views/admin/settings

C:\xampp\htdocs\blog\resources\views\admin\settings> mkdir settings.blade.php

dan masukan script di bawah ini

settings.blade.php

@extends('layouts.app')

@section('content')

@include('admin.includes.errors ')

<div class="panel panel-default">
    <div class="panel-heading">
        Form Setting
    </div>
    <div class="panel-body">
        <form action="{{ route('settings.update') }}" method="post">
            {{ csrf_field() }}
            <div class="form-group">
                <label for="name">Site Name</label>
                <input type="text" class="form-control" name="site_name" value="{{ $setting->site_name }}" >
            </div>
            <div class="form-group">
                <label for="name">Contact Email</label>
                <input type="email" class="form-control" name="contact_email" value="{{ $setting->contact_email }}">
            </div>
            <div class="form-group">
                <label for="name">Contact Number</label>
                <input type="text" class="form-control" name="contact_number" value="{{ $setting->contact_number }}">
            </div>
            <div class="form-group">
                <label for="name">Address</label>
                <textarea class="form-control" name="address" >{{ $setting->address }}</textarea>
            </div>
            <div class="form-group">
                <div class="text-center">
                    <button class="btn btn-success" type="submit">Save</button>
                </div>
            </div>
        </form>    
    </div>   
</div>

@stop

Membuat Route

Selanjutnya kita akan membuat route untuk setting, silahkan edit file web.php dan tambahkan script route seperti dibawah

Route::get('/settings',[
        'uses' => 'SettingsController@index',
        'as' => 'settings'
    ]);

    Route::post('/settings/update',[
        'uses' => 'SettingsController@update',
        'as' => 'settings.update'
    ]);

Silahkan jalankan maka akan ada tampilan setting seperti gambar dibawah ini