Desain Halaman Profil dan Kontak

Setelah halaman home selesai kita buat, selanjutnya kita buat halaman untuk about (tentang kami) dan kontak. Buka HomepageController.php kemudian tambahkan 2 function sehingga menjadi seperti berikut.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomepageController extends Controller
{
    public function index() {
        $data = array('title' => 'Homepage');
        return view('homepage.index', $data);
    }

    public function about() {
        $data = array('title' => 'Tentang Kami');
        return view('homepage.about', $data);
    }

    public function kontak() {
        $data = array('title' => 'Kontak Kami');
        return view('homepage.kontak', $data);
    }
}

Kemudian tambahkan 2 file di dalam folder views/homepage, pertama about.blade.php dan isi dengan kode.

@extends('layouts.template')
@section('content')
<div class="container">
  <div class="row">
    <div class="col">
      <h1>Tentang Kami</h1>
    </div>
  </div>
</div>
@endsection

yang kedua adalah kontak.blade.php dan isi dengan kode

@extends('layouts.template')
@section('content')
<div class="container">
  <div class="row">
    <div class="col">
      <h1>Kontak Kami</h1>
    </div>
  </div>
</div>
@endsection

Sementara kita kosongi aja dulu, nanti kita edit lagi.

Setelah controller dan viewsnya sudah kita buat, selanjutnya adalah menambahkan route ke file web.php dengan menambahkan 2 baris kode seperti berikut.

Route::get('/about', '[email protected]');
Route::get('/kontak', '[email protected]');

Terakhir, buka file views/layouts/menu.blade.php kemudian edit pada menu kontak dan tentang kami menjadi seperti berikut.

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
  <div class="container">
    <a class="navbar-brand" href="/">Toko</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="mr-auto navbar-nav"></ul>
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Produk</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Kategori</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ URL::to('kontak') }}">Kontak</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ URL::to('about') }}">Tentang Kami</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Setelah selesai diedit, jalankan aplikasi dengan php artisan serve dan coba klik menu kontak dan tentang kami.

Pada tutorial selanjutnya, kita akan menambahkan halaman produk (produk terbaru dan produk per kategori).

 

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