Pengenalan Framework Laravel 10
Halooo sobat Back-End, gimana nih kabarnya? Ga kerasa udah masuk minggu ke delapan aja nih. Gimana sejauh ini gess? Masih aman atau udah mulai pusing?coba liat ini dulu.. Sudah aman lah ya, kalo pusing mimin dulu sama. Tetap semangat pasti bisa wahai temen — temen Back-End sekalian, hari ini kita bakalan pusing — pusing lagi wkwkw tapi tentunya pusing yang bermanfaat yaa.
Kita bakal masuk ke series laravel YEAYYY!! hayo siapa yang ga sabar menunggu pelatihan ini. kalau kemarin belajar konsep MVC nah framework ini memakai konsep MVC jadi harusnya lebih gampang memahami ya.. langsung aja check this out..
Table of Contents:
3. Mengenal struktur folder Laravel
- Konfigurasi Route
- Parameter Route
- Nama Router: Penanda Lokasi
- Cara Melihat Semua Routing dengan Artisan
1. Apa itu Laravel ?
Dilansir dari website resmi dari laravel (https://laravel.com/) dijelaskan bahwa, Laravel adalah framework aplikasi web dengan sintaks yang ekspresif dan elegan. Kerangka kerja web menyediakan struktur dan titik awal untuk membuat aplikasi Anda, memungkinkan Anda untuk fokus menciptakan sesuatu yang luar biasa.
Laravel berusaha untuk memberikan pengalaman pengembang yang luar biasa sambil menyediakan fitur-fitur canggih seperti dependency injection, an expressive database abstraction layer, queues and scheduled jobs, unit and integration testing, dan banyak lagi.
Harus banget pake Laravel ya kak? Oh jelas, berikut adalah beberapa alasannya:
A Progressive Framework
Laravel sebagai kerangka kerja “progresif”. artinya, Laravel tumbuh bersama Anda. Jika Anda baru mengambil langkah pertama dalam pengembangan web, perpustakaan dokumentasi, panduan, dan video tutorial Laravel yang luas akan membantu Anda mempelajari seluk beluknya tanpa merasa kewalahan.
A Scalable Framework
Laravel sangat skalabel. Berkat sifat PHP yang ramah penskalaan dan dukungan bawaan Laravel untuk sistem cache terdistribusi yang cepat seperti Redis, penskalaan horizontal dengan Laravel menjadi sangat mudah. Faktanya, aplikasi Laravel telah diskalakan dengan mudah untuk menangani ratusan juta permintaan per bulan.
A Community Framework
Laravel menggabungkan paket-paket terbaik di ekosistem PHP untuk menawarkan kerangka kerja yang paling kuat dan ramah pengembang yang tersedia. Selain itu, ribuan pengembang berbakat dari seluruh dunia telah berkontribusi pada kerangka kerja. Siapa tahu, Anda bahkan bisa menjadi kontributor Laravel.
2. Membuat project Laravel dengan Composer
Instalasi Composer
Sebelum kita bisa melakukan proses pembuatan project laravel menggunakan composer, hal yang perlu diperhatikan adalah kita harus sudah menginstall composer nya itu sendiri. Kemarin sudah diajarkan menginstall composer harusnya sudah ada ya jika tidak ada bisa cek kembali materi sebelumnya.
Membuat project baru Laravel dengan Composer
Untuk membuat project baru menggunakan composer langkah — langkahnya adalah sebagai berikut :
Silahkan masuk ke directory yang akan digunakan untuk menyimpan project laravel nya, dalam hal ini karena nanti project akan di jalankan di local maka kamu masukan ke dalam (bagi pengguna xamp) C:/xampp/htdocs/amcc/backend/pelatihan-8, kemudian klik kanan pilih open in windows terminal.
Jika temen temen pengguna laragon masuk kedalam C:/xampp/laragon/www
kemudian pengguna laragon klik terminal pada laragonnya
Setelah terminal terbuka ketikan perintah
composer create-project laravel/laravel:^10.0 pertemuan-8karena nantinya versi laravel yang kita gunakan adalah versi 10, nanti composer akan otomatis membuatkan projectnya sesuai dengan root yang kita tentukan.
untuk pengguna xamp bisa menggunakan command prompt seperti biasa
kemudian masuk kedalam foldernya pertemuan-8
Untuk mencoba apakah project kita sudah terinstall dengan benar atau belum kita bisa menggunakan perintah php artisan serve jika memang sudah benar nantinya artisan akan membuatkan sebuah server local yang menjalankan project kita.
Kemudian silahkan teman — teman akses url http://127.0.0.1:8000 pada web browser. Maka tampilannya akan seperti berikut.
wualaaa tandanya sudah berhasil ya sobat BE!! Hmm sudah saatnya membuat Headline Backend Developer DiLinkedln HAHAHAH
3. Mengenal Struktur Folder Laravel
Struktur Folder Laravel adalah hal yang penting untuk kita pahami, dikarenakan selama pengembangan kedepan, Struktur Folder ini akan mempengaruhi kita dalam membuat Aplikasi berbasis Laravel. Berikut adalah keseluruhan struktur folder pada Laravel.
App
/app Folder ini berisi kode inti aplikasi Anda. Ini termasuk model, controller, dan middleware. Secara umum, sebagian besar logika aplikasi Anda akan berada di sini. Pada folder App terdapat 5 folder yang rinciannya adalah sebagai berikut:
- Console, berisi semua perintah Artisan yang dibuat dengan make:command;
- Exceptions, berisi semua handler pengecualian dan juga dapat menambahkan class yang sudah disesuaikan sendiri untuk menangani pengecualian yang ada pada aplikasi.
- Http, berisi fungsi Controller, Middleware, dan Request.
- Models, berisi file model yang nantinya akan digunakan untuk mengakses database.
- Providers, berisi semua penyedia layanan (service provider) untuk aplikasi.
untuk sekarang ga harus ingat semua ya sob
Bootstrap
Pada folder ini berisi semua framework Bootstrap dan juga dengan file konfigurasinya. Terdapat direktori cache yang berisi file cache yang dihasilkan dari framework.
Config
Pada folder ini berisi semua file konfigurasi aplikasi. Seperti database.php dan app.php
Database
Pada folder ini berisi file — file migrasi dan seed untuk mengatur database aplikasi.
Public
Pada folder ini berisi semua assets seperti gambar, file Javascript, dan CSS yang dapat diakses oleh pengguna.
Resources
Pada folder ini berisi file — file yang diperlukan untuk membuat tampilan aplikasi, seperti file — file Blade, CSS, dan JS.
Routes
Pada folder ini berisi file — file yang digunakan untuk mengatur routes (rute) atau URL aplikasi harusnya sudah paham karena ini di materi sebelumnya.
Storage
Pada folder ini berisi penyimpanan aplikasi, seperti file — file cache, log, dan unggahan.
Test
Pada folder ini berisi file — file untuk melakukan testing pada aplikasi.
Vendor
Pada folder ini berisi semua file dependency.
4. Konfigurasi awal Laravel
Untuk melakukan konfigurasi kita bisa menuju file .env, file ini berisikan variabel lingkungan (environment variables) yang digunakan oleh aplikasi Laravel. File ini berfungsi untuk menyimpan informasi rahasia seperti konfigurasi basis data, pengaturan SMTP untuk mengirim email, dan variabel lingkungan lainnya yang dibutuhkan oleh aplikasi.
Berikut adalah cara untuk konfigurasi file laravel kita dengan database yang telah kita buat pada pelatihan sebelumnya.
- DB_CONNECTION, Key ini digunakan untuk menentukan jenis koneksi database yang akan digunakan oleh aplikasi. Laravel mendukung beberapa jenis koneksi database seperti mysql, pgsql, sqlite, dan sqlsrv.
- DB_HOST, Key ini digunakan untuk menentukan alamat host database. Jika database berjalan di server lokal, Anda dapat mengisi nilai localhost atau 127.0.0.1. Jika database berjalan di server yang berbeda, Anda harus mengisi nilai alamat IP atau nama domain yang benar.
- DB_PORT, Key ini digunakan untuk menentukan nomor port yang digunakan oleh database. Jika tidak diisi, nilai default akan digunakan untuk jenis koneksi database yang digunakan.
- DB_DATABASE, Key ini digunakan untuk menentukan nama basis data yang akan digunakan oleh aplikasi.
- DB_USERNAME, Key ini digunakan untuk menentukan nama pengguna (username) yang digunakan untuk mengakses basis data.
- DB_PASSWORD, Key ini digunakan untuk menentukan kata sandi (password) yang digunakan untuk mengakses basis data.
5. Konsep MVC (Model, View, Controller)
MVC (Model-View-Controller) adalah suatu arsitektur desain perangkat lunak yang terdiri dari tiga komponen utama, yaitu Model, View, dan Controller. Konsep ini sangat umum digunakan pada banyak framework maupun aplikasi web, termasuk dalam Laravel. Berikut adalah penjelasan mengenai konsep MVC:
Model
Model adalah representasi dari data yang digunakan dalam aplikasi. Model merupakan bagian dari aplikasi yang berfungsi untuk mengelola dan memanipulasi data. Model biasanya berinteraksi dengan database atau sumber data lainnya untuk mengambil atau menyimpan data. Model juga berisi logika bisnis aplikasi yang mengatur bagaimana data dapat diakses dan dimanipulasi.
View
View merupakan komponen yang bertanggung jawab untuk menampilkan data dan antarmuka pengguna (UI) pada aplikasi. View berisi kode HTML, CSS, dan Javascript untuk membuat tampilan dan interaksi yang menarik pada aplikasi. View menerima data dari Model dan menampilkan data tersebut ke pengguna.
Controller
Controller bertindak sebagai perantara antara Model dan View. Controller berfungsi untuk memproses input dari pengguna, melakukan tindakan yang sesuai pada Model, dan mengembalikan data yang diperlukan ke View. Controller juga mengatur alur logika pada aplikasi.
6. Routing ( Rute atau jalur masuknya url )
Di dunia Laravel, routing itu ibarat peta harta karun yang membimbing para pengguna (atau dalam hal ini, requests) untuk menemukan kekayaan yang tersembunyi di dalam aplikasimu (yaitu, respons yang tepat). Routing adalah proses yang menentukan bagaimana aplikasi menanggapi berbagai permintaan HTTP yang masuk. Pada dasarnya, routing adalah DJ yang memilih track apa yang harus diputar ketika tamu meminta lagu tertentu.
Konfigurasi Route
Mengkonfigurasi routing di Laravel sebenarnya cukup sederhana. Semua rute didefinisikan dalam file rute yang berada di direktori routes (seperti web.php untuk rute web). Untuk membuat rute baru, cukup tambahkan kode berikut ke file rute:
Route::get('/halaman-kamu', function () {
return 'Ahoy! Ini halaman kamu!';
});
Sekarang coba teman teman running atau buka kembali browsernya dengan mengakses url http://127.0.0.1:8000/halaman-kamu
hayoo siapa yang not found jangan pada bingung ya kenapa.. nanti dibawah dijelaskan kenapa bisa seperti itu untuk sekarang coba temen temen buka command prompt nya jalankan code ini
php artisan optimize
nah kalau sudah berhasil coba refresh kembali halaman tadi http://127.0.0.1:8000/halaman-kamu
selamat anda baru saja membuat rute sendiri dengan url halaman-kamu
Kalau kamu lebih suka eksplorasi, kamu bisa coba tambah opsi seperti post, put, atau delete sebagai pengganti get untuk menyesuaikan jenis permintaan HTTP yang kamu layani.
Parameter Route
Sebelumnya pernah belajar parameter kan? ha apa? lupa?!! yaudah mimin jelasin deh jadi parameter pada basic php adalah parameter (atau argumen) adalah variabel yang diberikan kepada fungsi saat fungsi itu dipanggil. udah ya sisanya kalau lupa dipelajarin lagi dicatet php basic kemarin.
Nah Parameter route di Laravel memungkinkan kamu memasukkan beberapa dinamika ke dalam rute statis itu. Misalnya, ingin memberikan sapaan personal ke pengguna?
Route::get('/hello/{name}', function ($name) {
return 'Hello ' . $name . ', selamat datang di pulau misteri kami!';
});nah coba paste masukan kedalam dalam file rute yang berada di direktori routes (seperti web.php untuk rute web).
jika sudah coba teman teman save dan jangan lupa ketik php artisan optimize pada command prompt nya ya, kemudian akses link ini http://127.0.0.1:8000/hello/yogi bisa ganti yogi menggunakan nama teman teman sendiri
Dengan kode di atas, setiap nama yang dimasukkan pada URL akan membuat Laravel menyapa pengguna dengan namanya. Ajaib, bukan?
Nama Router: Penanda Lokasi
Memberi nama pada rute itu seperti memberi pin lokasi di peta digitalmu. Ini sangat membantu ketika aplikasi kamu semakin besar dan kamu butuh cara cepat untuk merujuk ke rute tertentu tanpa harus mengingat URL lengkapnya. Berikut cara memberi nama pada rute:
Route::get('/welcome', function () {
//
})->name('welcome');Nanti, kamu bisa menggunakan nama rute ini untuk menghasilkan URL atau melakukan redirect.
Cara Melihat Semua Routing dengan Artisan
Untuk melihat semua rute yang telah kamu definisikan, Laravel menyediakan komando Artisan yang sangat berguna. Buka terminal kamu dan ketik:
php artisan route:listCoba jalankan perintah ini ke command prompt temen temen
Tampil ya apa saja rute yang temen temen buat.
Perintah ini akan menampilkan tabel yang berisi semua rute, metode HTTP, URI, nama, dan action yang terkait dengan setiap rute. Ini seperti menggunakan drone untuk melihat semua jalur yang ada dalam aplikasimu!
7. Memahami ‘View’ dalam Laravel 10
Woke ges! Saatnya kita menyelam ke dalam MVC pada dunia Laravel 10, khususnya pada salah satu aspek yang sering membuat kita bingung tapi sebenarnya sangat menyenangkan — yakni ‘View’. Oh, dan ketika saya katakan ‘menyenangkan’, saya serius loh. Kita akan bicara tentang Blade Template, cara kerjanya, dan bagaimana kita bisa bermain-main dengan data di dalamnya. Siapkan kopi dan snack kesukaan Anda eh dikelas gada ya yaudah gpp, mari kita mulai!
Pengenalan Blade Template: Lebih dari Sekedar Pisau Dapur
Blade Template di Laravel bukan tentang memotong bawang atau mencincang sayuran, tapi lebih ke memotong dan mencincang kode! Blade adalah sistem templating bawaan Laravel yang memungkinkan Anda untuk mengatur HTML dengan cara yang lebih rapi dan modular. Bayangkan Blade ini seperti lego, di mana Anda bisa menyusun komponen tampilan aplikasi Anda dengan sangat efisien. Bagusnya lagi, Blade sangat cerdas sehingga ia bisa mengerti perintah PHP yang kita tulis di dalamnya — jadi kita tidak perlu mengotori HTML dengan kode PHP secara langsung.
Cara Membuat Blade Template
Membuat Blade Template itu mudah dan menyenangkan. Pertama, Anda perlu membuat file dengan ekstensi .blade.php di dalam direktori resources/views dari aplikasi Laravel Anda. Misalnya, Anda ingin membuat tampilan untuk menampilkan data buku, Anda bisa membuat file buku.blade.php.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daftar Buku</title>
</head>
<body>
<h1>Daftar Buku</h1>
<ol>
@foreach($books as $item)
<li>{{ $item }}</li>
@endforeach
</ol>
</body>
</html>
Nah, sangat mudah bukan? Sekarang, $buku bisa diakses di file buku.blade.php, dan Anda bisa menampilkan data buku dengan loop @foreach seperti yang sudah kita lihat di template sebelumnya.
Selanjutnya kita juga bisa mengambil data dari sebuah model tapi temen temen disini gaperlu tau banget soal model gpp karena pertemuan besok bakal dijelasin, temen temen cukup ikuti saja.. caranya dapat kita lakukan sebagai berikut :
Pertama tentu kita buat modelnya terlebih dahulu, silahkan temen — temen menuju folder App > Model > New File. Kemudian beri nama model Buku.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Buku extends Model
{
private static $books = ['Buku1', 'Buku2', 'Buku3', 'Buku4', 'Buku5'];
public static function get_all()
{
return self::$books;
}
}jika sudah jangan lupa buat rutenya temen temen bisa copy code ini
Route::get('/buku', function () {
return view('buku', [
'books' => Buku::get_all()
]);
});save dan jangan lupa ketik php artisan optimize pada command prompt nya ya, kemudian akses link ini http://127.0.0.1:8000/buku
wualaa!! berhasil ya ges, jadi temen temen berhasil membuat view pada laravel nih. Jadi temen temen mempunya daftar buku yang data nya diambil dari model Buku.php yang temen temen buat nah besok kita bakal belajar soal Model & Controller. Jangan lupa berangkat ya besok🤗!
8. Coba praktikum sendiri yuk
Adapun contoh penerapannya di laravel sendiri adalah sebagai berikut : Kita akan mencoba untuk menampilkan sebuah form login code form nya silahkan copy kode pada link berikut.
Setelah itu silahkan temen — temen masuk ke dalam folder Resources > View > New File, kemudian bikin file baru dengan nama login.blade.php.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
</head>
<body style="font-family: 'Plus Jakarta Sans';">
<section class="bg-gray-50 dark:bg-gray-900 max-h-screen">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
<img class="w-[80px] mb-5" src="{{ asset('amcc-logo-putih.png') }}" alt="logo">
</a>
<div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Sign in to your account
</h1>
<form class="space-y-4 md:space-y-6" action="#">
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
<input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@amcc.or.id" required="">
</div>
<div>
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
<input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required="">
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required="">
</div>
<div class="ml-3 text-sm">
<label for="remember" class="text-gray-500 dark:text-gray-300">Remember me</label>
</div>
</div>
<a href="#" class="text-sm font-medium text-slate-50 hover:underline">Forgot password? <div>dsdjj</div></a>
</div>
<button type="submit" class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Sign in</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
Don’t have an account yet? <a href="#" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Sign up</a>
</p>
</form>
</div>
</div>
</div>
</section>
</body>
</html>Pertama adalah kita bisa membuat sebuah controller baru yang bernama TestController. Silahkan temen — temen menuju folder App > Http > Controllers > New File, kemudian bikin file baru dengan nama TestController.php.
Kemudian ketikan kode di bawah ini:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class TestController extends Controller
{
public function index()
{
return view('login');
}
}Ini adalah sebuah controller yang nantinya akan mengembalikan sebuah view login.
Selanjutnya untuk bisa menampilkan itu ke browser kita perlu mengatur routes nya terlebih dahulu. Silahkan temen — temen menuju folder Routes > web.php.
Kemudian tambahkan kode di bawah ini.
Route::get('/test', [TestController::class, 'index']);Jika sudah selesai maka silahkan di jalankan di browser, temen — temen bisa menggunakan php artisan serve atau menggunakan xampp, jika menggunakan laragon temen temen install path toolsnya terlebih dahulu :
Klik Tools, php, add laragon to path
Yok lanjut ges jika menggunakan xampp silahkan akses di http://localhost/AMCC/Backend/pelatihan6/public/test (sesuaikan dengan routes temen — temen)
tampilannya nanti akan seperti ini.
Kenapa eror bang scam ya? waduh engga dong jadi pada laravel 10 temen temen saat menjalankannya pertama kali, Kadang-kadang perubahan dalam file konfigurasi atau route tidak langsung terdeteksi karena Laravel menyimpan versi cache dari konfigurasi ini untuk mempercepat aplikasi.
Cache dari route ini adalah sebuah array yang membantu mempercepat performa dari Laravel, karena performa yang lebih cepat dalam memuat sebuah array. Untuk menjalankannya jalankan perintah:
php artisan route:cachenanti diterminal akan muncul seperti ini :
Nah, jika sudah coba jalankan kembali atau refresh localhost temen temen :
Wualaaa!! Berhasil ya guyss tidak ada error lagi ya? error bingung ga error bingung HAHAHA sama sih mimin sering gitu.. Jadi guys kenapa sih tadi bisa error dan saat ‘php artisan optimize’ tidak error lagi?
Cache Konfigurasi atau Route: Kadang-kadang perubahan dalam file konfigurasi atau route tidak langsung terdeteksi karena Laravel menyimpan versi cache dari konfigurasi ini untuk mempercepat aplikasi. selain optimize temen-temen bisa lebih spesifik lagi ya temen temen bisa mencoba menjalankan:
php artisan config:cacheuntuk menghapus dan meng-cache ulang file konfigurasi.php artisan route:cacheuntuk menghapus dan meng-cache ulang route.
Untuk lebih tau lagi soal begituan temen temen harus sering sering buka dokumentasi punya laravel sendiri, dan sering sering membaca dokumentasi nya
Lanjut ya Nah, yang dimaksud dengan MVC adalah ketika kita memisahkan antara proses untuk menampilkan view dan view nya itu sendiri, terlihat pada contoh di atas controller kita browser akan men get test maka controller TestController akan bekerja, tapi tidak langsung menampilkan sebuah tampilan html melainkan memanggil sebuah file view() bernama login.
