How to Create Laravel Website in Minute use Laravel 8

How to Create Website in Minute use Laravel 8

How to Create Laravel Website in Minute use Laravel 8 – Brillian Solution. Laravel adalah salah satu Framework terbaik untuk membuat website. Dengan Laravel Framework, Anda dapat membuat sebuah website dengan mudah dengan performa terbaik.

Laravel memiliki layout blade templating yang mudah untuk digunakan dan dibekali dengan berbagai library yang siap untuk digunakan.

Lalu bagaimana caranya membuat Website dengan Laravel?

Pada postingan Brillian Solution kali ini akan membahas bagaimana cara membuat Website dengan Framework Laravel 8.

Penasaran bagaimana caranya? Silahkan siapkan kopi Anda untuk membaca artikel yang saya buat kali ini.

How to Create Laravel Website in Minute use Laravel 8

Untuk membuat sebuah website dengan Laravel 8, ikutilah beberapa langkah dibawah ini:

How to Create Laravel Website
Laravel Website

Instalasi Laravel

Sebagai langkah awal, Anda perlu melakukan instalasi Laravel. Ada beberapa cara instalasi Laravel, bisa melalui VPS, cPanel, dan di komputer. Nah, di tutorial kali ini kami akan menggunakan Laravel di komputer menggunakan sistem operasi Windows.

Setelah Laravel terinstal, coba buka foldernya dengan text editor favorit Anda. Di panduan ini, kami menggunakan Visual Studio Code.

Pada terminal Visual Studio Code, ketikkan php artisan serve seperti contoh berikut:

php artisan serve

Anda akan mendapatkan alamat IP untuk Laravel blog Anda. Cobalah ketikkan pada browser untuk mendapatkan hasil seperti di bawah ini:

laravel 8
laravel 8

Configurasi Database

Setelah berhasil menginstall Laravel 8, Anda perlu melakukan konfigurasi database. Silahkan Anda membuat sebuah database menggunakan tools masing-masing. Disini saya membuat menggunakan Navicat.

membuat website dengan laravel 8

Selanjutnya, carilah file .env. Buka file tersebut

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:W3PRrn6NNkbuypL7UOMuOIIbFDRI8CDV+An/98Ys91Q=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

ganti menjadi seperti ini:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=belajar-laravel-website
DB_USERNAME=root
DB_PASSWORD=

Setelah itu, simpan file tersebut, Laravel 8 Anda sekarang sudah terhubung dengan database.

Laravel theme dengan bootstrap

Langkah selanjutnya, membuat tampilan menggunakan bootstrap framework. Bootstrap framework dapat membantu Anda dalam membuat tampilan website yang menarik dengan lebih mudah.

Untuk Menghubungkan dengan bootstrap, kita akan menggunakan CDN Bootstrap 5.

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel - Belajar Website</title>

        <!-- Bootstrap 5 CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1 class="text-center">Hello World</h1>

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Bootstrap JavaScript -->
        {{-- bootstrap 5 js --}}
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
</html>

Kemudian masuk ke route Laravel di routes/web.php dan ganti kode seperti dibawah ini:

Route::get('/', function () {
    return view('layouts.master');
});

Untuk melihat tampilan awal bootstrap kita. Silahkan Anda pergi ke http://localhost:8000 dan pastikan tampilan Anda seperti berikut:

Membuat Tabel Kategori

Kita akan membuat sebuah tabel kategori terlebih dahulu. Caranya ketikan perintah dibawah ini pada terminal Anda:



php artisan make:model Kategori -mcr 

Fungsi php artisan make:model Kategori -mcr akan membuat sebuah Model, Controller dan Migration.

Bukalah file migration di folder database/migrations/2022_10_30_172129_create_artikels_table kemudian ganti dengan kode dibawah ini:

    public function up()
    {
        Schema::create('kategoris', function (Blueprint $table) {
            $table->id();
            $table->string('nama_kategori');
            $table->timestamps();
        });
    }

Jangan lupa ketikan php artisan migrate pada terminal.

Membuat Halaman Tambah Kategori

Lanjut membuat halaman tambah kategori. Bagaimana caranya? silahkan copy kode dibawah ini:

Cari file model Kategori di app\Models.

Kategori Model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Kategori extends Model
{
    use HasFactory;

    protected $table = 'kategoris';

    protected $fillable = ['nama_kategori'];
}

Cari file KategoriController di app\Http\Controllers

KategoriController:

    public function create()
    {
        //
        
        return view('kategori.add');
    }

Buat file add.blade.php di folder kategori

View:

<!-- membuat kerangka dari master.blade.php -->
@extends('layouts.master')

<!-- membuat komponen title sebagai judul halaman -->
@section('title', 'Menambah Artikel')

<!-- membuat komponen main yang berisi form untuk mengisi judul dan isi artikel -->
@section('content')
    <div class="card">
        <div class="card-header">
            <h6>Tambah Kategori</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <form action="{{ route('kategori.store') }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <div class="mb-3">
                                <label>Nama Kategori</label>
                                <input type="text" class="form-control" name="nama_kategori" placeholder="Nama Kategori">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="card-footer text-muted">
            Footer
        </div>
    </div>
@endsection

Menampilkan Seluruh Kategori

Buka KategoriController:

Controller

<?php

namespace App\Http\Controllers;

use App\Models\Kategori;
use Illuminate\Http\Request;

class KategoriController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $data['data'] = Kategori::all();

        return view('kategori.index',compact('data'));
    }

Buat sebuah file bernama kategori.blade.php. Copykan code seperti berikut:

View

<!-- membuat kerangka dari master.blade.php -->
@extends('layouts.master')

<!-- membuat komponen title sebagai judul halaman -->
@section('title', 'Menambah Artikel')

<!-- membuat komponen main yang berisi form untuk mengisi judul dan isi artikel -->
@section('content')
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h6>Kategori</h6>
                </div>
                <div class="card-body">
                    <a name="" id="" class="btn btn-primary" href="{{ route('kategori.create') }}"
                        role="button">Tambah Kategori</a>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama Kategori</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $no = 1; ?>
                            @foreach ($data['data'] as $dt)
                                <tr>
                                    <td scope="row">{{ $no++ }}</td>
                                    <td>{{ $dt->nama_kategori }}</td>
                                    <td>
                                        <a name="" id="" class="btn btn-sm btn-warning"
                                            href="{{ route('kategori.edit', $dt->id) }}" role="button">Edit</a>

                                        <form method="post" action="{{ route('kategori.destroy', $dt->id) }}">
                                            @method('delete')
                                            @csrf
                                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="card-footer text-muted">
                    Footer
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- membuat komponen sidebar yang berisi tombol untuk upload artikel -->
@section('sidebar')
    <div class="col-md-3 ml-md-5 col-sm-12 bg-white p-4" style="height:120px !important">
        <div class="form-group">
            <label>Upload</label>
            <input type="submit" class="form-control btn btn-primary" value="Upload">
        </div>
    </div>
    </form>
@endsection

Membuat Tabel Artikel

Berikutnya kita akan membuat tabel artikel. Caranya ketikan perintah dibawah ini pada terminal Anda:

php artisan make:model Artikel -mcr 

Fungsi php artisan make:model Artikel -mcr akan membuat sebuah Model, Controller dan Migration.

Bukalah file migration di folder database/migrations/2022_10_30_172129_create_artikels_table kemudian ganti dengan kode dibawah ini:

    public function up()
    {
        Schema::create('artikels', function (Blueprint $table) {
            $table->id();
            $table->string('judul');
            $table->longText('konten');
            $table->integer('kategori_id');
            $table->timestamps();
        });
    }

Ketikan perintah php artisan migrate.

Tabel artikel berhasil dibuat

Membuat Halaman Tambah Artikel

Setelah membuat tabel artikel, saatnya membuat halaman form untuk tambah artikel di website Anda.

Caranya, buatlah sebuah file bernama add.blade.php di folder resources/views/artikel. Buat seperti pada kode dibawah ini:

<!-- membuat kerangka dari master.blade.php -->
@extends('layouts.master')

<!-- membuat komponen title sebagai judul halaman -->
@section('title', 'Menambah Artikel')

<!-- membuat komponen main yang berisi form untuk mengisi judul dan isi artikel -->
@section('content')
    <div class="card">
        <div class="card-header">
            <h6>Tambah Artikel</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <form action="{{ route('artikel.store') }}" method="POST">
                        @csrf
                        <div class="form-group">
                            <div class="mb-3">
                                <label>Judul Artikel</label>
                                <input type="text" class="form-control" name="judul" placeholder="Judul artikel">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="mb-3">
                                <label>Kategori</label>
                                <select name="kategori_id" id="" class="form-control">
                                    @foreach ($data['kategori'] as $k => $v)
                                        <option value="{{ $k }}">{{ $v }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="mb-3">
                                <label>Isi Artikel</label>
                                <textarea class="form-control" name="konten" rows="15"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="card-footer text-muted">
            Footer
        </div>
    </div>
@endsection

Tambahkan route agar dapat ditampilkan di URL.

Menampilkan Seluruh Artikel

Controller

<?php

namespace App\Http\Controllers;

use App\Models\Artikel;
use App\Models\Kategori;
use Illuminate\Http\Request;

class ArtikelController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $data['data'] = Artikel::all();

        return view('artikel.index',compact('data'));
    }

VIew

<!-- membuat kerangka dari master.blade.php -->
@extends('layouts.master')

<!-- membuat komponen title sebagai judul halaman -->
@section('title', 'Menambah Artikel')

<!-- membuat komponen main yang berisi form untuk mengisi judul dan isi artikel -->
@section('content')
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h6>Artikel</h6>
                </div>
                <div class="card-body">
                    <a name="" id="" class="btn btn-primary" href="{{ route('artikel.create') }}"
                        role="button">Tambah Artikel</a>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Judul</th>
                                <th>Kategori</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $no = 1; ?>
                            @foreach ($data['data'] as $dt)
                                <tr>
                                    <td scope="row">{{ $no++ }}</td>
                                    <td>{{ $dt->judul }}</td>
                                    <td>{{ $dt->Kategori->nama_kategori }}</td>
                                    <td>
                                        <a name="" id="" class="btn btn-sm btn-warning"
                                            href="{{ route('artikel.edit', $dt->id) }}" role="button">Edit</a>

                                        <form method="post" action="{{ route('artikel.destroy', $dt->id) }}">
                                            @method('delete')
                                            @csrf
                                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="card-footer text-muted">
                    Footer
                </div>
            </div>
        </div>
    </div>
@endsection

Membuat Tampilan Website

Template website yang akan saya gunakan menggunakan template ini

Buatlah sebuah controller WebsiteController.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Artikel;

class WebsiteController extends Controller
{
    //
    public function index(){
        $data['data'] = Artikel::all();
        return view('home',compact('data'));
    }
}

Buat sebuah route

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ArtikelController;
use App\Http\Controllers\KategoriController;
use App\Http\Controllers\WebsiteController;

/*
|--------------------------------------------------------------------------
| 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('/',[WebsiteController::class,'index']);

Route::resource('kategori',KategoriController::class);
Route::resource('artikel',ArtikelController::class);

Buat sebuah view:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel - Belajar Membuat Website</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <style>
        .bg-light {
            background-color: #ff6a6a !important;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand"
                href="{{ url('https://brilliansolution.com/how-to-create-website-in-minute-use-laravel-8/') }}">Laravel
                - Brillian Solution</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="./index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./blog.html">Blog</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
    <div class="container my-5">
        <div class="row">
            @foreach ($data['data'] as $artikel)
                <div class="col-12 col-md-6 col-xl-3 mb-4">
                    <div class="card mr-3">
                        <img src="https://themesberg.s3.us-east-2.amazonaws.com/public/posts/bootstrap-themes-summer-sale.jpg"
                            class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">{{ $artikel->judul }}</h5>
                            <button type="button"
                                class="btn btn-sm btn-outline-primary">{{ $artikel->Kategori->nama_kategori }}</button>
                            <p class="card-text">
                                {{ Str::limit($artikel->konten, 100) }}
                            </p>
                            <a href="#" class="btn btn-primary">Read more</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
    </script>
</body>

</html>

Hasilnya (How to Create Laravel Website in Minute use Laravel 8):

How to Create Website in Minute use Laravel 8
How to Create Laravel Website in Minute use Laravel 8

Related Keyword:

  • cara membuat website dengan laravel
  • cara membuat web dengan laravel
  • membuat website dengan laravel 8
  • membuat web sederhana dengan laravel
  • membuat website dengan laravel
  • How to Create Laravel Website
  • How to Create Laravel Website in Minute
  • How to Create Laravel Website in Minute use Laravel 6
  • How to Create Laravel Website in Minute use Laravel 7
  • How to Create Laravel Website in Minute use Laravel 8
  • How to Create Laravel Website in Minute use Laravel 9

brillian

Leave a Reply

%d bloggers like this: