Cara Membuat Project Laravel
Cara Membuat Project Laravel
Untuk membuat laravel blog, inilah beberapa langkah yang perlu Anda lakukan:
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:
Anda akan mendapatkan alamat IP untuk Laravel blog Anda. Cobalah ketikkan
pada browser untuk mendapatkan hasil seperti di bawah ini:
2. Melakukan Konfigurasi Database
Ketika melihat tampilan seperti di atas, isikan nama database yang diinginkan,
contohnya belajar-laravel, lalu klik Create. Setelah berhasil, nama database
akan muncul di daftar seperti contoh berikut:
Selanjutnya, Anda bisa menghubungkan Laravel dengan database. Pertama,
Anda bisa mencari file .env di dalam folder Laravel.
Setelah menemukan file .env, Anda bisa mengubah kode:
DB_CONNECTION=mysql
DB_HOST = 127.0.0.1
DB_PORT = 3306
DB_DATABASE = laravel
DB_USERNAME = root
DB_PASSWORD =
Setelah itu simpan perubahan yang dilakukan. Laravel blog Anda sudah
terhubung dengan database. Nah, kadang DB_USERNAME dan
DB_PASSWORD memiliki konfigurasi yang berbeda. Jadi, sesuaikanlah
dengan konfigurasi web server Anda
Untuk membuat halaman Laravel blog Anda terhubung dengan bootstrap, Anda
perlu membuat file bernama master.blade.php di dalam folder resources/view.
Dengan begitu, strukturnya akan menjadi seperti ini:
Setelah itu, Anda bisa isikan kode di bawah ini pada file master.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<button class="btn btn-info">Tes Button</button>
</body>
</html>
Route::get('/', function () {
return view('welcome');
});
Route::get('/test', function() {
return view('master');
});
Untuk menguji apakah Laravel blog Anda berhasil terhubung dengan Bootstrap,
ketikkan perintah php artisan serve pada menu Terminal. Setelah itu, silakan
mengakses 127.0.0.1:8000/test dan pastikan hasilnya seperti di bawah ini:
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('artikel');
}
}
Setelah itu, Anda bisa ketikkan kode berikut pada terminal untuk membuat
tabel artikel:
php artisan migrate
<!-- 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
Jangan lupa atur routingnya supaya form yang baru saja Anda buat dapat
diakses. Caranya adalah dengan membuka file web.php yang ada di dalam
folder routes dan mengubah kodenya menjadi seperti ini:
<?php
/*
|--------------------------------------------------------------------------
| 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('/add', function () {
return view('add');
});
Namun, Anda belum bisa mengirim artikel ke database karena masih perlu
melakukan pengaturan pada controller. Sebelum membuat controller, Anda
perlu mengatur routing untuk mengarahkan data artikel yang dikirimkan.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class ArtikelController extends Controller
{
public function show()
{
return "Artikel berhasil ditambahkan";
}
public function add_process(Request $article)
{
DB::table('artikel')->insert([
'judul'=>$article->judul,
'deskripsi'=>$article->deskripsi
]);
return redirect()->action('ArtikelController@show');
}
}
Setelah itu, silakan buat routing untuk mengarahkan pengguna setelah berhasil
memasukkan data. Anda bisa membuka file web.php pada folder routes.
Kemudian, ubah kode menjadi seperti ini:
<?php
/*
|--------------------------------------------------------------------------
| 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('/add', function () {
return view('add');
});
Route::get('/', 'ArtikelController@show');
Route::post('/add_process', 'ArtikelController@add_process');
Bagaimana cara menampilkan artikel yang sudah dibuat? Anda bisa membuka
file ArtikelController.php pada folder app/Http/Controller kemudian ganti
kode menjadi seperti di bawah:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class ArtikelController extends Controller
{
public function show()
{
$articles = DB::table('artikel')->orderby('id', 'desc')->get();
return view('show', ['articles'=>$articles]);
}
<!-- membuat komponen main yang berisi form untuk mengisi judul dan isi artikel -->
@section('main')
@foreach ($articles as $article)
<div class="col-md-4 col-sm-12 mt-4">
<div class="card">
<img src="https://atlantictravelsusa.com/wp-content/uploads/2016/04/dummy-post-horisontal-thegem-blog-
default.jpg" class="card-img-top" alt="gambar" >
<div class="card-body">
<h5 class="card-title">{{ $article->judul }}</h5>
<a href="/detail/{{ $article->id }}" class="btn btn-primary">Baca Artikel</a>
</div>
</div>
</div>
@endforeach
@endsection
Di blog Laravel tersebut, Anda sudah memiliki opsi Tambah Artikel tapi
belum bisa untuk klik Baca Artikel. Jadi, Anda perlu membuat fitur untuk
membaca artikel terlebih dahulu.
Caranya, bukalah file ArtikelController.php dan ubah kode di dalamnya
menjadi seperti ini:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class ArtikelController extends Controller
{
public function show()
{
$articles = DB::table('artikel')->orderby('id', 'desc')->get();
return view('show', ['articles'=>$articles]);
}
public function add_process(Request $article)
{
DB::table('artikel')->insert([
'judul'=>$article->judul,
'deskripsi'=>$article->deskripsi
]);
return redirect()->action('ArtikelController@show');
}
public function detail($id)
{
$article = DB::table('artikel')->where('id', $id)->first();
return view('detail', ['article'=>$article]);
}
}
Langkah di atas adalah untuk membuat controller agar dapat mengambil data
artikel dari model berdasarkan ID pada URL.
Nah, untuk bisa membuat tampilan untuk detail artikelnya, buatlah file
bernama detail.blade.php di dalam folder resources/views dan masukkan kode
di bawah:
@extends('master')
<!-- memberikan judul di tab sesuai dengan judul artikel yang sedang dibaca -->
@section('title')
{{ $article->judul }}
@endsection
Langkah di atas adalah untuk membuat tampilan yang akan menampilkan detail
artikel dari database. Selanjutnya, Anda perlu mengatur routing untuk dapat
mengakses halaman tersebut.
Caranya adalah dengan membuka file web.php pada folder routes dan ubahlah
kode di dalam web.php menjadi seperti ini:
<?php
/*
|--------------------------------------------------------------------------
| 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('/add', function () {
return view('add');
});
Route::get('/', 'ArtikelController@show');
Route::post('/add_process', 'ArtikelController@add_process');
Route::get('/detail/{id}', 'ArtikelController@detail');
Anda bisa mencoba klik Baca Artikel untuk mendapatkan tampilan seperti di
bawah ini:
8. Membuat Halaman Admin
Untuk dapat mengatur hak akses di blog Laravel tersebut, Anda perlu membuat
halaman admin. Hal ini untuk mencegah pengguna yang tidak berhak
menghapus atau mengedit artikel blog Anda.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
return redirect()->action('ArtikelController@show');
}
Setelah itu, Anda bisa membuat file bernama adminshow.blade.php yang akan
menampilkan seluruh artikel dari sisi admin. Ubah kodenya menjadi sebagai
berikut:
<!-- menggunakan kerangka dari master.blade.php -->
@extends('master')
@section('header')
<h2><center>List Artikel</center></h2>
@if($message = Session::get('success'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@endsection
@section('main')
<div class="col-md-12 bg-white p-4">
<a href="/add"><button class="btn btn-primary mb-3">Tambah Artikel</button></a>
<table class="table table-responsive table-bordered table-hover table-stripped">
<thead>
<tr>
<th>No.</th>
<th>Judul</th>
<th>Deskripsi</th>
<th width="15%">Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($articles as $i => $article)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $article->judul }}</td>
<td>{{ $article->deskripsi }}</td>
<td>
<a href="/edit/{{ $article->id }}"><button class="btn btn-success">Edit</button></a>
<a href="/delete/{{ $article->id }}"><button class="btn btn-danger">Hapus</button></a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endsection
Jangan lupa, Anda perlu membuat routing supaya halaman dapat ditampilkan
dengan cara membuka file web.php pada folder routes dan mengubah kodenya
menjadi seperti ini:
<?php
/*
|--------------------------------------------------------------------------
| 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('/add', 'ArtikelController@add');
Route::get('/', 'ArtikelController@show');
Route::post('/add_process', 'ArtikelController@add_process');
Route::get('/detail/{id}', 'ArtikelController@detail');
Route::get('/admin, 'ArtikelController@show_by_admin');
Untuk dapat membuat fitur edit, Anda perlu menambahkan kode berikut pada
file web.php yang ada di dalam folder routes.
Route::get('/edit/{id}', 'ArtikelController@edit');
Setelah berhasil mengambil data artikel dari model, Anda bisa buat
file edit.blade.php pada folder resources/views dan isikan kode ini:
@extends('master')
<!-- membuat judul bernama 'Edit Artikel' pada tab bar -->
@section('title', 'Edit Artikel')
@section('header')
<center class="mt-4">
<h2>Edit Artikel</h2>
</center>
@endsection
@section('main')
<div class="col-md-8 col-sm-12 bg-white p-4">
<form method="post" action="/edit_process">
@csrf
<input type="hidden" value="{{ $article->id }}" name="id">
<div class="form-group">
<label>Judul Artikel</label>
<input type="text" class="form-control" value="{{ $article->judul }}" name="judul" placeholder="Judul
artikel">
</div>
<div class="form-group">
<label>Isi Artikel</label>
<textarea class="form-control" name="deskripsi" rows="15">{{ $article->deskripsi }}
</textarea>
</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>Edit</label>
<input type="submit" class="form-control btn btn-primary" value="Edit">
</div>
</div>
</form>
@endsection
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Session;
class ArtikelController extends Controller
{
public function show()
{
$articles = DB::table('artikel')->orderby('id', 'desc')->get();
return view('show', ['articles'=>$articles]);
}
Jangan lupa untuk mengatur routingnya pada file web.php dengan mengubah
kodenya menjadi:
<?php
/*
|--------------------------------------------------------------------------
| 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('/add', 'ArtikelController@add');
Route::get('/', 'ArtikelController@show');
Route::post('/add_process', 'ArtikelController@add_process');
Route::get('/detail/{id}', 'ArtikelController@detail');
Route::get('/admin', 'ArtikelController@show_by_admin');
Route::get('/edit/{id}', 'ArtikelController@edit');
Route::post('/edit_process', 'ArtikelController@edit_process');
Cobalah untuk mengedit salah satu artikel dan simpan perubahannya. Jika
berhasil, Anda akan mendapatkan notifikasi seperti contoh berikut:
Untuk membuat fitur hapus artikel di blog Laravel, inilah langkah yang perlu
dilakukan. Pertama, bukalah file ArtikelController.php pada
folder app/Http/Controllers dan tambahkan potongan kode di bawah ini:
public function delete($id)
{
//menghapus artikel dengan ID sesuai pada URL
DB::table('artikel')->where('id', $id)
->delete();
Setelah langkah di atas, cobalah menghapus salah satu artikel yang Anda
inginkan. Jika berhasil, inilah tampilannya:
11. Membuat Halaman Register dan Login
Anda tentu tidak ingin siapapun dapat mengakses halaman admin, bukan?
Untuk itu, Anda perlu membuat halaman register dan login untuk mengakses
halaman admin.
Caranya, ketikkan perintah php artisan make:auth pada menu Terminal. Lalu,
ketikkan juga php artisan serve. Setelah itu, Anda bisa
mengakses 127.0.0.1:8000/login sebagai halaman login:
Setelah login, tentunya akan lebih baik jika Anda diarahkan ke halaman admin.
Nah, untuk mengaturnya, Anda bisa membuka file LoginController.php pada
folder app/Http/Controllers/Auth dan gantilah dengan kode di bawah:
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = '/admin';
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
}
Meskipun telah memiliki halaman login untuk admin, sebenarnya Anda masih
bisa mengaksesnya tanpa harus login. Oleh karena itu, penting untuk membatasi
hak akses halaman admin agar pengguna yang belum login akan diarahkan ke
halaman login.
Langkah yang perlu dilakukan adalah membuka
file ArtikelController.php pada folder app/Http/Controller dan mengganti
kode menjadi:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Session;
use Auth;
class ArtikelController extends Controller
{
private function is_login()
{
if(Auth::user()) {
return true;
}
else {
return false;
}
}
else
{
return redirect('/login');
}
}
return redirect()->action('ArtikelController@show');
}
else
{
return redirect('/login');
}
}
else
{
return redirect('/login');
}
}
Penting untuk mempermudah navigasi pada blog Laravel Anda. Mulai dari
navigasi logout hingga melihat blog. Tanpa bantuan navigasi, admin harus
mengakses 127.0.0.1:8000 melalui URL untuk melihat blog.
Apa yang perlu dilakukan? Pertama, Anda bisa membuat navigasi dari sisi
admin dan sisi pengunjung supaya dapat login dengan mudah. Caranya, bukalah
file master.blade.php pada folder resources/views dan ubahlah kode di
dalamnya menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>@yield('title')</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
Setelah itu, Anda bisa mencoba mengakses halaman admin dan akan melihat
tampilan seperti ini:
Sedangkan pada halaman pengunjung, Anda akan melihat tampilan sebagai
berikut: