Seri 2 Belajar Laravel 10 dari Nol || Membuat Layout Menu Navigasi dan Tema Website

Konsep dan Prinsip Utama Laravel

Laravel dibangun di atas serangkaian prinsip dan konsep inti yang membuatnya unik dan efisien. Di bagian ini, kita akan menjelajahi gagasan-gagasan dasar ini, seperti arsitektur MVC, Eloquent ORM, routing, middleware, dan lainnya. Memahami konsep-konsep ini sangat penting untuk mengoptimalkan potensi penuh Laravel.

Laravel lebih dari sekadar sebuah framework; ia dilengkapi dengan ekosistem paket, pustaka, dan alat yang luas yang meningkatkan kemampuannya. Di bagian ini, kita akan melihat lebih dekat beberapa paket dan ekstensi Laravel yang paling populer, mendemonstrasikan bagaimana mereka dapat meningkatkan proses pengembangan Anda dan membuat proyek Anda menjadi lebih kuat.

Pola MVC

Apakah anda sudah mendengar Tentang MVC ?

Model-View-Controller (MVC) adalah sebuah metode untuk membangun aplikasi dengan memisahkan data, tampilan, dan pemrosesan ke dalam tiga komponen utama:

Controllers: Controllers menangani permintaan pengguna dan mengelola aliran data. Mereka menerima input dari pengguna, berinteraksi dengan model, dan mengembalikan respons. Controllers berisi metode (aksi) yang mendefinisikan logika untuk setiap rute.

Models: Models mewakili data dan logika bisnis aplikasi. Mereka berinteraksi dengan database dan menyediakan lapisan abstraksi untuk mengambil, membuat, memperbarui, dan menghapus data.

Views: Views bertanggung jawab untuk menampilkan data kepada pengguna. Mereka berisi template HTML dan komponen antarmuka pengguna yang merender output akhir.

Routes: Selain MVC diatas didalam laravel juga ada Routes yang bertugas mendefinisikan URL dan aksi controller yang sesuai. Mereka memetakan permintaan masuk ke metode controller yang tepat.

Berikut adalah beberapa contoh aplikasi yang dibangun menggunakan MVC:

Web:

Laravel: Framework PHP populer yang menggunakan MVC. Contoh aplikasi Laravel: website e-commerce, blog, sistem manajemen konten (CMS).
CodeIgniter: Framework PHP lain yang menggunakan MVC. Contoh aplikasi CodeIgniter: website berita, forum, aplikasi CRUD.
Django: Framework Python populer yang menggunakan MVC. Contoh aplikasi Django: website e-commerce, platform pembelajaran online, aplikasi web analytics.
Flask: Framework Python lain yang menggunakan MVC. Contoh aplikasi Flask: API RESTful, website mikro, dashboard.
Spring MVC: Framework Java populer yang menggunakan MVC. Contoh aplikasi Spring MVC: aplikasi enterprise, aplikasi CRUD, aplikasi web.

Desktop:

JavaFX: Framework Java untuk membangun aplikasi desktop dengan MVC. Contoh aplikasi JavaFX: aplikasi desktop CRUD, aplikasi multimedia, game sederhana.
Qt: Framework C++ untuk membangun aplikasi desktop dengan MVC. Contoh aplikasi Qt: aplikasi desktop multimedia, aplikasi CAD, aplikasi keuangan.

Mobile:

Android: Platform mobile Android mendukung arsitektur MVC. Contoh aplikasi Android: aplikasi e-commerce, game, aplikasi media sosial.
iOS: Platform mobile iOS mendukung arsitektur MVC. Contoh aplikasi iOS: aplikasi e-commerce, game, aplikasi kesehatan.

Selain MVC ada juga pemrograman yang bernama OOP atau OOP (Object-Oriented Programming) yaitu paradigma pemrograman yang menggunakan "objek" sebagai unit dasar untuk membangun program. Objek dalam OOP adalah representasi dari data bersama dengan metode atau fungsi yang beroperasi pada data tersebut. Pendekatan ini memungkinkan pengorganisasian yang lebih terstruktur dan modular dalam pengembangan perangkat lunak.

Beberapa konsep kunci dalam OOP meliputi:

Kelas: Kelas adalah cetak biru untuk membuat objek. Ini mendefinisikan properti (atau atribut) dan metode (atau fungsi) yang dimiliki oleh objek. Kelas sering digambarkan sebagai kerangka kerja atau templat untuk membuat objek-objek tertentu.
Objek: Objek adalah instance dari suatu kelas. Mereka mewakili kasus konkret dari konsep yang didefinisikan oleh kelas. Objek memiliki atribut yang menggambarkan statusnya dan metode yang menentukan perilaku atau tindakannya.
Enkapsulasi: Enkapsulasi adalah konsep yang menggabungkan data dan metode yang beroperasi pada data tersebut ke dalam satu unit tunggal (yaitu, objek). Ini menyembunyikan detail implementasi dari pengguna objek dan memungkinkan akses yang terkontrol melalui metode publik.
Pewarisan: Pewarisan memungkinkan kelas baru (subclass atau child class) untuk mewarisi properti dan metode dari kelas yang ada (superclass atau parent class). Ini memungkinkan pembuatan hierarki kelas di mana kelas yang lebih spesifik dapat menambahkan atau mengubah perilaku dari kelas yang lebih umum.
Polimorfisme: Polimorfisme memungkinkan objek untuk memiliki banyak bentuk atau perilaku. Ini memungkinkan objek dari kelas yang berbeda untuk merespons pesan atau panggilan metode dengan cara yang sesuai dengan kelasnya sendiri. Polimorfisme memfasilitasi fleksibilitas dan modularitas dalam desain program.

OOP memungkinkan pengembang untuk mengorganisir kode dengan lebih baik, membuatnya lebih mudah dipahami, dipelihara, dan diperluas. Ini juga memfasilitasi pemrograman modular dan reusabilitas kode, karena kelas-kelas dapat digunakan kembali dalam berbagai konteks. OOP telah menjadi salah satu paradigma pemrograman yang paling dominan dan banyak digunakan dalam pengembangan perangkat lunak modern.

Berikut adalah beberapa contoh aplikasi yang menggunakan pemrograman berorientasi objek (OOP):

Aplikasi Desktop:

Microsoft Office: Microsoft Word, Excel, PowerPoint, dan lainnya.
Adobe Photoshop: Software editing gambar.
GIMP: Software editing gambar open-source.
Audacity: Software editing audio.
VLC Media Player: Software pemutar media.

Aplikasi Web:

Facebook: Platform media sosial.
Twitter: Platform microblogging.
Google Maps: Layanan peta online.
Wikipedia: Ensiklopedia online.
Amazon: Platform e-commerce.

Aplikasi Mobile:

WhatsApp: Aplikasi pesan instan.
Instagram: Platform berbagi foto dan video.
Spotify: Layanan streaming musik.
Gojek: Layanan transportasi online.
Tokopedia: Platform e-commerce.

Game:

World of Warcraft: MMORPG (Massively Multiplayer Online Role-Playing Game).
Grand Theft Auto V: Game aksi-petualangan.
Minecraft: Game sandbox.
Candy Crush Saga: Game puzzle mobile.
Angry Birds: Game mobile populer.

Perbedaan MVC dengan OOP (Pemrograman Berorientasi Objek):

MVC adalah pola desain, sedangkan OOP adalah paradigma pemrograman.
MVC berfokus pada pemisahan antar bagian aplikasi, sedangkan OOP berfokus pada penggunaan objek.
MVC dapat digunakan dengan OOP, tetapi tidak harus

Nah sampai disini dapat dipahami ya perbedaan antara MVC dan OOP ?

Struktur Framework Laravel

Sebelum kita belajar CRUD ada baiknya kita mengenal apa saja isi file direktori dari Laravel, berikut penjelasannya:

Direktori 'app': kode inti aplikasi, termasuk perintah konsol, penanganan pengecualian, kelas-kelas terkait HTTP (controllers, middleware, requests, dan sumber daya), dan model.
Direktori 'bootstrap': file bootstrap yang bertanggung jawab untuk memulai aplikasi Laravel.
Direktori 'config': berisi file konfigurasi untuk berbagai aspek aplikasi, seperti koneksi database, caching, dan manajemen sesi.
Direktori 'database': berisi file terkait database, termasuk factory untuk menghasilkan data dummy, migration untuk mengelola perubahan skema database, dan seeder untuk mengisi database dengan data awal.
Direktori 'public': berfungsi sebagai root dokumen untuk aplikasi. Ini berisi front controller ('index.php') dan aset yang dapat diakses secara publik seperti CSS, JavaScript, dan file gambar.
Direktori 'resources': berisi sumber daya non-PHP, termasuk file JavaScript, CSS, dan tampilan (template Blade) yang digunakan untuk merender HTML.
Direktori 'routes': berisi definisi rute yang memetakan URL ke controller dan aksi yang sesuai.
Direktori 'storage': digunakan untuk menyimpan berbagai jenis data yang dihasilkan oleh aplikasi, seperti file yang diunggah, data yang di-cache, log, dll.
Direktori 'tests': berisi tes otomatis aplikasi.
Direktori 'vendor': berisi dependensi yang diinstal melalui Composer.
File '.env': menyimpan pengaturan konfigurasi spesifik lingkungan.
File 'artisan': antarmuka baris perintah untuk berinteraksi dengan aplikasi Laravel.
File 'composer.json': mendefinisikan dependensi proyek dan menyediakan metadata tentang aplikasi.

Kunci aplikasi

Dalam konteks Laravel adalah sebuah string acak yang terdiri dari 32 karakter. Kunci ini memiliki peran krusial dalam menjaga keamanan aplikasi. Saat aplikasi Laravel pertama kali dibuat, kunci ini dihasilkan secara otomatis dan disimpan dalam file lingkungan .env sebagai nilai dari variabel APP_KEY.
Kunci aplikasi digunakan untuk berbagai tujuan keamanan, termasuk enkripsi dan dekripsi data sensitif, penguncian cookie untuk sesi pengguna, dan pengamanan proses hashing untuk kata sandi pengguna. Dalam konteks enkripsi, kunci aplikasi digunakan untuk mengamankan data sensitif yang disimpan dalam database dengan cara mengubahnya menjadi format yang tidak dapat dibaca oleh manusia tanpa kunci tersebut.
Penggunaan kunci aplikasi juga melibatkan penandatanganan data, seperti URL dan cookie, untuk memastikan keaslian dan integritasnya. Ini membantu mencegah serangan seperti manipulasi cookie dan perubahan data yang tidak sah.
Kunci aplikasi harus dijaga kerahasiaannya dengan cermat. Mengungkapkan kunci aplikasi dapat mengakibatkan kerentanan keamanan yang serius dalam aplikasi Anda. Jika ada kebutuhan untuk menghasilkan kunci baru, Anda dapat menjalankan perintah php artisan key:generate, yang akan menghasilkan kunci baru dan menyimpannya dalam file .env. Dengan demikian, kunci aplikasi adalah salah satu aspek penting dalam mengamankan aplikasi Laravel dan melindungi data sensitif pengguna

Routing

dalam Laravel merujuk pada definisi bagaimana permintaan HTTP masuk harus ditangani. Route (rute) mendefinisikan URL dan memetakkannya ke tindakan (action) tertentu pada controller. Sebagai contoh, Anda dapat mendefinisikan sebuah route yang memetakan URL "/users" ke tindakan index pada UserController. Route menyediakan cara yang bersih dan ekspresif untuk menangani berbagai metode HTTP (GET, POST, PUT, dan DELETE) serta parameter-parameter yang dibutuhkan.
Untuk ilustrasi, lihat contoh potongan kode berikut:

Potongan kode ini mendefinisikan sebuah route dengan metode HTTP GET yang memetakan URL "/users" ke tindakan "index" pada controller "UserController". Dengan demikian, ketika URL "/users" diakses melalui browser, Laravel akan mengeksekusi tindakan index pada UserController untuk menangani permintaan tersebut.

Nah , jika bawaan awal maka route mengarah pada halaman welcome

Membuat layout Menu Navigasi dan gaya Pewarnaan

Controller dalam Laravel bertanggung jawab untuk menangani permintaan pengguna dan mengelola alur data dalam aplikasi. Controller berisi metode, yang juga dikenal sebagai tindakan, yang dipanggil ketika suatu rute tertentu diakses. Mereka menerima masukan pengguna, berinteraksi dengan model dan layanan, dan mengembalikan respons kepada pengguna. Controller membantu memisahkan logika aplikasi dari lapisan rute.

Sebagai contoh, lihat potongan kode berikut:

Pengenalan Blade Layouts

Dalam pengembangan web, umumnya banyak aplikasi mempertahankan tata letak yang konsisten di berbagai halaman, termasuk elemen seperti header, menu navigasi, dan footer. Namun, mengelola aplikasi akan menjadi melelahkan jika setiap halaman memerlukan pengulangan seluruh struktur HTML untuk elemen-elemen tersebut. Untungnya, Blade, mesin templating di Laravel, menawarkan solusi yang elegan untuk masalah ini. Blade memungkinkan pengembang untuk mendefinisikan tata letak sekali saja dalam satu file Blade dan dengan mudah menggunakannya kembali di seluruh aplikasi.

Untuk memanfaatkan kemampuan tata letak Blade bersama dengan Bootstrap, langkah awalnya adalah dengan membuat sebuah direktori bernama "layouts" di dalam direktori resources/views. Selanjutnya, pengembang dapat menggunakan template awal Bootstrap sebagai dasar untuk membuat tata letak. Template awal Bootstrap dapat diakses melalui tautan berikut: Bootstrap Starter Template.

Buat file baru bernama app.blade.php dalam folder views, file ini berfungsi sebagai template utama untuk menampung bagian Front End nya atau halaman depan kita.

Berikut adalah tampilan awal kita tadi, kita akan merubahnya menjadi layout CRUD kita

Pertama tama buatlah app.blade.php didalam resources/views/layouts , berarti disini kita membuat Folder baru didalam Views bernama app.blade.php

[code hl="1, 4, 7"] @yield('title', 'Toko Online')

@yield('subtitle', 'A Laravel Toko Online')

@yield('content')

[/code]

Kode di atas didasarkan pada kode template awal Bootstrap dan Navbar Bootstrap. kita memodifikasi kode dasar, termasuk tautan di header (Halaman Utama dan Tentang). Template awal termasuk file CSS Bootstrap (bootstrap.min.css) dan file JS Bootstrap (bootstrap.bundle.min.js). kita menyertakan tiga direktif Blade @yield.

@yield digunakan sebagai penanda. kita akan menyuntikkan kode di penanda tersebut dari tampilan Blade turunan dibeberapa laman (menggunakan direktif @section). @yield menggunakan dua parameter, yang pertama adalah identifikasi penanda. Yang kedua adalah nilai default yang akan sematkan jika tampilan anak tidak menyematkan kode untuk penanda tersebut.secara sederhana setiap kitaakan embuat sebuah laman baru kita tidaj perlu memasukan seluruh kode yang ada di app.blade

Selanjutnya kita akan mempraktekan Yield dengan memodifikasi welcome.blade.php default kita dengan laman baru landing page laman utama kita.

Hapus semua kode yang ada di resources/views/welcome.blade.php dan isi dengan kode berikut:

[code hl="1, 4, 7"] @extends('layouts.app') @section('title', 'Home Page - Online Store') @section('content')

Selamat Datang di Percobaan pembuatan toko online

@endsection [/code]

Tampilan Browser

Untuk meningkatkan tampilan antarmuka aplikasi kita menjadi lebih profesional, langkah pertama yang kami ambil adalah dengan menambahkan gaya kustom menggunakan file CSS. Kami membuat sebuah folder bernama "css" di bawah direktori "public/", dan kemudian di dalamnya, kami membuat file baru yang kami beri nama "app.css" yang akan berisi gaya-gaya kustom yang kami inginkan.

Buatlah folder "css" di dalam direktori "public/". Ini dapat dilakukan dengan menavigasi ke direktori "public/" di dalam proyek Laravel Anda menggunakan terminal atau file manager.

Di dalam folder "css" yang baru dibuat, buatlah file baru dan beri nama "app.css"

Modifikasi juga laman app.blade.php agar css yang kita buat tadi bisa terbaca:

Berikut adalah keseluruhan pembaharuan kodenya pada laman app.blade.php

Oncode

[code hl="1, 4, 7"] @yield('title', 'Toko Onlline')

@yield('subtitle', 'Toko Onlline Saya')

@yield('content')

[/code]

Pada file sebelumnya, kita telah menambahkan beberapa gaya CSS kustom. kita melakukan penggantian atau penyesuaian beberapa elemen Bootstrap dengan nilai-nilai dan warna-warna yang kita tentukan sendiri. Hal ini dilakukan untuk memberikan tampilan yang lebih sesuai dengan kebutuhan dan desain aplikasi kita.

Misalnya, kita mungkin telah mengubah warna latar belakang, warna teks, ukuran font, atau properti lain dari elemen-elemen Bootstrap seperti tombol, menu navigasi, atau judul. Dengan melakukan ini, kita menciptakan tampilan yang unik dan sesuai dengan identitas visual aplikasi kita.

Laravel menyertakan berbagai fungsi bantu global PHP. Sebagai contoh, fungsi asset digunakan untuk menghasilkan URL untuk suatu aset dengan menggunakan skema saat ini dari permintaan (HTTP atau HTTPS). Karena file css/app.css kita berada di dalam folder public, itu akan secara otomatis dideploy melalui tautan server kita (misalnya, http://127.0.0.1:8000/css/app.css). kita menggunakan tanda kurung kurawal {{ }} untuk memanggil fungsi asset. Tanda kurung kurawal digunakan dalam file Blade untuk menampilkan data yang dilewatkan ke tampilan atau memanggil fungsi bantu Laravel. Akhirnya, kita membuat bagian footer dengan nama-nama penulis buku dan tautan ke akun social media.

dan jika kita running di browser maka akan tampil :

Seluruh Code dapat didownload di Link Github saya