Halo teman-teman semua, apa kabar? Kembali lagi di channel WPU di playlist belajar Laravel 11 untuk pemula masih bersama saya, Sandika Gali. Oke, jadi setelah sebelumnya kita sudah siapkan semua aplikasi yang dibutuhin untuk menjalankan aplikasi Laravel-nya dan kita juga sudah coba untuk bikin sebuah aplikasi Laravel polos teman-teman boleh menggunakan Hurt atau menggunakan Laragon, bebas ya, karena sama aja.
Kali ini kita akan masuk ke episode ketiga dimana kita akan belajar mengenai dasar-dasar penggunaan Laravel-nya. Apa aja dasar-dasarnya? Berikut kita akan lihat ya. Jadi ada 3 dasar dari Laravel yang harus kalian ketahui.
Yang pertama, kalian harus tahu mengenai struktur folder. Ya nanti kita lihat folder-folder yang ada di dalam strukturnya ini fungsinya apa aja. Folder mana yang akan kita modifikasi, folder mana yang akan kita biarkan aja, jangan diutak-atik. Terus juga kita akan belajar mengenai routing system, ya bagaimana Laravel melakukan penjaluran.
di dalam aplikasinya. Dan terakhir nanti kita akan bahas mengenai view. Bagaimana sih Laravel itu menampilkan halaman sehingga dilihat oleh user.
Oke, jadi langsung aja kita masuk ke materinya. Baik teman-teman, jadi pertama-tama mari kita buka dulu aplikasi Heart kita. Jadi kita saat ini akan menggunakan Heart aja ya.
Teman-teman kalau mau menggunakan Laragon juga silahkan. Karena sebetulnya mirip-mirip atau bahkan sama ya fungsinya. Silahkan dijalankan, lalu pastikan di dalam dashboardnya servisnya sudah menyala ya.
Engine X dan PHP 8.3-nya. Berikutnya kita masuk ke bagian Sites, lalu kita jalankan aplikasi kita di dalam browser. Klik Open in Browser. Nah ini sudah tampil alaman Welcome Page-nya. Jadi hari ini kita akan pelajari isi dari aplikasi Laravel kita, mulai dari struktur foldernya, sampai nanti cara penggunaan yang paling sederhananya.
Kalau sudah terbuka aplikasinya, saya kecilin dikit, kita buka di dalam VS Code-nya. Jadi teman-teman silahkan buka Explorer-nya, lalu buka folder Herd. Atau folder www kalau kalian pakai LaraGone.
Masuk ke aplikasi kita Laravel 11. Lalu kita akan buka folder ini di dalam VS Code. Saya biasanya lakukan dengan cara klik kanan di dalam foldernya. Lalu pilih open in terminal. Lalu ketik di sini kode spasi titik.
Nah ini aplikasi VS Code-nya sudah terbuka langsung di dalam folder Laravel 11. Ya, sekarang kita lihat ini adalah struktur folder di Laravel versi 11 yang paling baru. Kita akan pelajari isinya sambil dengan membuka dokumentasinya. Jadi boleh teman-teman buka lagi welcome page-nya. Untuk masuk ke dokumentasinya, teman-teman bisa kunjungi laravel.com atau langsung aja klik di sini di bagian documentation ya.
Nah, terbuka di sini. Documentation-nya kita akan ke sebelah kiri di bagian directory structure ya. Klik.
Nah, ini kita akan pelajari ada beberapa struktur folder ya. Di bagian root ini ada app, bootstrap, config, database, public, resources, routes, storage, test, dan juga vendor. Jadi yang ini ya. Yang ada di root-root itu yang ada di luar, paling luar.
Terus dalam app ada ini, dan seterusnya. Nah kita akan lihat beberapa yang penting. Silahkan scroll ke bawah teman-teman. Untuk bagian app katanya ya, ini akan menyimpan kode utama dari aplikasi kita. Hampir semua kelas di dalam aplikasi akan disimpan di dalam directory ini.
Jadi kalau kita lihat nanti di sini akan tersimpan. Controller kita di folder http Model kita disini ya Sama providers Nanti akan sering kita gunakan jelas controller dan juga model ini ya Dua ini Jadi folder app itu penting Terus berikutnya bootstrap Itu didalamnya terdapat file app.php Yang melakukan bootstrap atau menarik ya Istilahnya seluruh aplikasi dalam framework Yang biasanya jadi entry point dari aplikasinya juga Jadi nanti kalau didalam bootstrap Kalian lihat ada app Nah ini adalah folder utamanya ya Yang pada saat aplikasi Laravel dijalankan Ini dijalankan Dia manggil root, dia manggil console Dan kalau perlu nanti kita bikin middleware disini Atau exception juga disini Oke itu app Terus ada config Nah ini kalau teman-teman lihat disini Ini konfigurasi dari aplikasi kita Jadi kalau aplikasi konfigurasinya ada disini Misalnya kalian mau ganti nama aplikasinya Teman-teman bisa ganti disini Ganti lingkungan pengembangannya Ya environmentnya Apakah production atau development Dan seterusnya Yang nantinya Nah konfigurasi yang ada di app ini biasanya bisa kita override atau kita timpa menggunakan file.env jadi sebetulnya teman-teman gak perlu ganti hardcode disini nanti teman-teman gantinya di file.env ini juga penting ya jadi kita bisa ganti nama aplikasi kita terus juga kita bisa ganti environmentnya ini bisa lokal, bisa development, bisa production jadi nanti kalau misalnya udah di deploy ya ke hosting teman-teman ganti, jangan lokal lagi tapi udah production gitu ya Nah ini akan menimpa konfigurasi yang ada di app.php ini. Jadi kalau kita ganti di sini jadi lokal. Meskipun di app-nya production.
Yang akan diambil adalah isi dari constant atau variable app underscore env. Nah ini juga ada beberapa yang akan kita lihat ya. Misalnya lokal.
Nah lokal ini kalau teman-teman mau ada translasi ke bahasa Indonesia. Misalnya ya bisa diganti di sini. Terus juga ada metode enkripsi.
Tapi ini. Biasanya nggak kita ubah ya. Yang biasanya kita ganti adalah ini.
Nah, koneksi database-nya. Defaultnya kalau teman-teman lihat di sini koneksinya pakai SQLite atau SQLite. Nah, tapi kalau mau pakai MySQL, teman-teman ganti koneksinya pakai MySQL. Lalu tinggal dinyalakan aja konfigurasi yang bawahnya. Ya, tapi karena di playlist ini sekarang kita akan coba pakai SQLite aja biar simple.
Konfigurasi bawahnya nggak usah dinyalakan ya. Biarkan terkomentar aja. Itu di bawah sini teman-teman bisa lihat berbagai macam... konfigurasi yang akan menimpa konfigurasi yang ada di folder config ini. Jadi itu config, terus ada lagi database.
Nah ini folder database nantinya akan menyimpan segala sesuatu yang berhubungan dengan database. Ini juga nanti akan kita coba pelajari ya. Mulai dari kita bikin migrasi atau skima dari database dan tabel kita. Jadi kalau mau bikin tabel, nanti kalian nggak bikin tabel yang manual di database-nya, tapi kita bikin dulu skimanya supaya nanti kita lakukan migrasi. Kenapa harus dilakukan itu?
Supaya nanti seluruh informasi mengenai database-nya ada di dalam aplikasi kita. Sehingga kalau kita bekerja secara tim, anggota tim kita nggak perlu bikin database-nya manual di komputernya masing-masing, tapi cukup menjalankan migrasi yang sama. Jadi nanti kita semua punya skema database yang sama.
So, ada factory kalau teman-teman mau mengenerate isi dari tabelnya. Jadi misalkan mau bikin data dummy, cukup bikin di factory. Kalau data dummy-nya mau dibikin secara otomatis, nanti teman-teman bikinnya di dalam seeder. Jadi ini 3 ini folder yang sangat bermanfaat untuk mengelola database kita. Dan database kita karena kita pakenya SQLite itu ada di sini.
Ya jadi SQLite itu bentuknya 1 file seperti ini. Karena sederhana dia ya. Nanti isinya nggak bisa langsung dilihat. Harus dibuka lewat database client. Yang nanti akan kita pakai namanya TablePlus.
Tapi kalau teman-teman mau buka ini boleh ya. Nanti isinya ya nggak kelihatan. Karena dia binary gitu.
Oke itu database. Berikutnya ada public. Nah ini untuk menyimpan. file-file yang bisa diakses secara public seperti gambar, kalau kalian punya file javascript dan juga css jadi ada disini, kita tutup dulu semua ya tutup, kita lihat ada di public nah disini ya, ada favicon kalau mau nyimpen favicon, terus juga ada robot kalau temen-temen nanti mau crawling pake seo gitu ya misalnya atau kalau mau nyimpen tadi aset public misalnya gambar, javascript atau css berikutnya ada lagi resource tempat kita nyimpen view kita nanti ya nah hari ini akan kita coba bikin view Ya terus disini kalau kalian lihat ada CSS dan JS juga nih Ini apa bedanya? Nah ini CSS dan JavaScript yang tidak disajikan ke user Jadi user nggak akan lihat ini Bisa digunakan ketika kita mau bikin CSS untuk nantinya kita build atau kita bundling ya Misalnya teman-teman pakai preprocessor atau pakai post CSS Bisa ditaruh disini supaya nggak kelihatan ke user Nanti user melihatnya apapun yang ada di dalam folder public Nah tapi yang akan kita pakai nanti folder view Dimana kita akan nyimpen view-nya.
Sekarang view-nya baru satu, yaitu welcome.blade.php Ini adalah file untuk menampilkan halaman welcome yang ini ya. Nah, ini kenapa ada halaman ini? Itu gara-gara ada file namanya welcome.blade.php Berikutnya ada lagi routes.
Nah, ini juga penting. Ini folder dimana menyimpan file-file yang bertugas untuk melakukan rute atau penjaluran dari aplikasi kita. Sini kita lihat ada routes. Kita tutup dulu.
Kita ke routes. Ada dua, ada console, ada web. Yang akan sering kita pakai yaitu yang web.
dimana nanti kalau ada request yang datang ke aplikasi Laravel kita file inilah yang bertugas ngejalur ini contohnya nih kalau ada request ke halaman root ya root itu artinya gak ada apa-apa setelah nama aplikasi kita ya jadi slash aja disini gini nah ini adalah root-rootnya ya itu akan diarahkan oleh baris ini jadi ketika ada akses ke halaman root tampilkan view welcome welcome ini dapat dari mana? dari resource view welcome welcome Jadi dia akan mengarah ke file namanya welcome.blade.php Nah ini di dalam root ini nanti kita bisa tulis macam-macam Bisa seperti ini Bisa kita ngirim data Atau kita mau mengakses controller nanti Kalau kita udah punya controller ya Yang paling sederhana sih seperti ini Bahkan kalau mau kalian bisa Nggak mengarah ke view Ini bisa dihapus Bisa ganti misalkan tulis hello world Begini Karena nanti kalau ada yang mengakses ke slash Atau ke root dari website kita Atau dari aplikasi kita Yang tampil tulisan hello world sederhana seperti ini Ya Tapi kita kembalikan lagi ke view Supaya tampilnya view lagi Oke itu root yang akan sering kita Ubah-ubah nanti ya Terus ada apa lagi? Ada storage Nah ini untuk menyimpan logs katanya ya Template blades yang sudah dikompilasi Session, cache, dan File-file lain yang di-generate Oleh framework, ada di storage ya Nanti tersimpan disini, atau kalau misalnya Nanti kalian bikin sebuah fitur upload gambar gitu ya.
Gambarnya nanti kalian bisa tentukan apakah mau dimasukkan ke dalam public atau dimasukkan ke dalam storage gitu. Ada test ya. Ini folder untuk menyimpan file-file yang ada hubungannya dengan testing pada aplikasi kita.
Dan ada vendor. Nah kalau vendor ini adalah folder yang isinya gede banget ya. Vendor ini adalah tempat nyimpan package-package yang di install lewat composer.
Tuh ini banyak banget. Ini adalah package-package Pembentuk Laravelnya Jadi sebenarnya Laravel itu dibentuk Dari banyak package-package PHP Nah ini dapetnya dari mana Nanti teman-teman bisa lihat Di dalam file composer.json Nah ini Jadi semua yang ada di file composer.json ini, dia akan bertugas memanggil atau mengelola folder-folder atau package yang ada di dalam folder vendor. Gitu ya teman-teman, jadi itu ada beberapa folder, ya kalau vendor ini nggak akan kita ubah-ubah biasanya ya. Yang sering kita akan modifikasi isinya, itu biasanya routes tadi, views, ya terus database, dan app.
Gitu, sisanya mungkin kalau dibutuhin ya, tapi seringkali nggak digunakan. Jadi itu mengenai struk. Struktur folder, teman-teman kalau mau lebih detail silahkan baca di sini.
Ini masuk ke dalam folder app, ada apa aja. Kalau mau dibaca boleh ya. Nah pokoknya karena Laravel ini framework MVC, tadi ada tiga komponennya ya. Ada M-nya ada di app, di sini model. V-nya yaitu view, ada di resource di sini.
Dan C-nya yaitu controller ada di dalam HTTP. Oke, sekarang kita akan coba untuk membuat rute yang baru teman-teman. Ya, coba kita tutup dulu sidebarnya.
Teman-teman buka file yang namanya web.php tadi. Kalau mau buka file, saran saya daripada teman-teman klik explorer, terus dicari ada di mana, gitu ya. Misalkan web, itu ada di routes kan ya, di sini ya.
Routes, web, gitu. Tapi kalau teman-teman udah tahu ada di mana, dan tahu file apa yang mau dibuka, misalnya belum dibuka nih. Kalau teman-teman pakai Visual Studio Code, cukup pencet Ctrl P aja untuk mencari filenya. Jadi tinggal ketik nama filenya, kita tulis web, enter.
Nanti kalau misalkan kita butuh buka view welcome ya. Teman-teman tinggal ctrl p, welcome aja. Nanti langsung ada filenya. Oke, ceritanya sekarang kita mau bikin rute baru. Ketika orang mengakses halaman about misalnya.
Caranya ini tinggal kita duplikat aja. Kita simpen di bawahnya. Caranya kita tinggal tulis slash about. Jadi kalau ada orang yang akses slash about.
Kita akan arahkan kemana. Misalnya kita mau arahkan ke sebuah view baru yang akan kita buat nanti. Kita akan kasih nama about. Nah, kalau kalian tulis gini artinya kalian akan bikin sebuah file namanya about.blade.php.
Kenapa ada blade-nya, Pak? Nah, blade itu adalah templating engine bawaannya para file yang nanti akan kita bahas di video berikutnya, Lek. Tapi sekarang kalau mau bikin view, langsung tulis aja about.
Nah, caranya kalian bisa duplikat filenya yang welcome atau bikin aja sendiri ya. Tinggal klik kanan di views-nya, di folder views, bikin file baru kita kasih nama about.blade.php. Nah, di sini teman-teman boleh masukin. Syntax HTML Jadi misalkan temen-temen mau buka Tanda seru Terus tab gitu boleh Tinggal tulis aja disini titlenya Misalnya Halaman about Gitu ya Terus dalam bodinya kita kasih H1 Halaman about Contohnya gini Nah kalau misalkan kita udah punya view-nya Dan kita sudah punya routes-nya Ini langsung bisa diarahin Kalau temen-temen buka Di lara file-nya Tinggal ketik aja Slash about Nah beres Gitu ya Nah sekarang gimana Kalau kita bikin View yang berbeda untuk halaman rootnya. Jadi sekarang saya pengennya kalau ke slash.
Atau nggak ditulis slashnya sama sekali. Saya mau masuk ke halaman kita sendiri ya. Jadi nanti saya mau ngarah ke. Misalnya apa nih. Kita mau ngarah ke home.
Nah gitu. Berarti sekarang saya harus punya sebuah file di dalam views. Yang namanya apa?
Home.blade.php. Ya ini kita close dulu. Sekarang kita coba bikin view baru.
Klik kanan di folder viewsnya. New file. Home.blade.php ya.
Tinggal kita tulis di sini. samain aja ya, randa seru, terus halaman home misalnya, dan H1 disini, halaman home, oke, sip ya, jadi kita sekarang udah punya 2 view, yang kalau saya sekarang arahkan kesini, halaman home kalau saya ke about, itu halaman about, oke, sekarang gimana kalau saya mau berpindah menggunakan navigasi ya, jadi misalnya saya punya disini, di halaman home kita bikin aja, pake aja ya, simple aja ya, jadi saya kalau mau ke slash itu akan mengarah ke home... Ini kok saya duplikat. Ilt shift bawah.
Tapi kalau ke about. Ini kita ke halaman about. Oke. Kita lihat hasilnya.
Di halaman home ya. Nah sudah ada. Home about. Saya gedein dikit.
Nah berarti ini harus diduplikat di halaman about ya. Nah ini mungkin sekarang terlihat redundant atau duplikasi. Nanti kita benerin saat kita belajar blade templating engine yang lebih lanjut ya. Tapi sekarang harusnya kita udah bisa pindah-pindah nih.
Ke about. Pindah ke home. Tuh. Tapi masih duplikat karena. Kita copy paste ya Nanti kita akan pecah menjadi template Atau menjadi layout Atau bahkan jadi komponen Nah sekarang gimana kalau kita mau kasih styling Sebenernya kan kalau kasih styling gampang ya Kita tinggal bikin aja CSS disini gitu ya Kita tinggal kasih background color misalnya Misalnya kita mau kasih warna background Kita kasih body Background color Misalnya apa?
Light blue gitu ya Light blue seperti ini Maka halaman home Harusnya light blue Tapi gimana kalau misalnya teman-teman mau bikin file CSS sendiri Nah jadi kita pakai tag link kan. Nah tag linknya ditaruh di mana? Kalau teman-teman tulis CSS misalnya ya. Lalu kita bikin style.css.
Maka nanti teman-teman harus punya sebuah file namanya style.css di dalam folder CSS. Tapi, nyimpennya di mana? Nah, ini nyimpennya di dalam folder public ya, teman-teman, di sini.
Jadi, sekarang ini harus punya folder baru. Ya, silakan teman-teman buka folder public. Bikin folder baru. Kasih CSS. Dalamnya bikin style.
Style CSS. Gitu ya. Ini misalkan kita kasih body, background color.
Oh, ininya harus diganti dulu. Sorry. Nah, background color, light blue.
Oke, sudah ya. Kalau sudah, sekarang kalau misalkan kita... Kita kembali ke browser, kita refresh. Nah, sudah ya.
Light blue. Aman. Berarti ini cara nulisnya kalau kita mau manggil CSS sebagai file.
Kita simpennya ingat di dalam folder public. Sama juga kalau misalkan kita mau copy baris ini ke about. Simpen juga di sini.
Maka sekarang kalau kita ke about, warnanya biru muda juga. Begitu pula dengan javascript ya teman-teman. Kalau misalkan teman-teman mau bikin javascript, misalnya di home, misalkan di akhir bodi lah ya di sini, kita bikin script yang ada src-nya.
Kita bisa tulis js slash script.js Nah dimana kita nyimpen script ini? Sama aja di dalam folder public Nah jadi kita bikin folder baru Kasih nama js Di dalamnya kita bikin file baru Namanya script.js Ya misalnya kita kasih disini alert aja Welcome to homepage misalnya Jadi setiap masuk ke halaman home Akan ada alert yang tulisannya welcome Coba kita refresh Ada ya, welcome to homepage. Kalau kita ke about, nggak ada. Kalau balik lagi ke home, ada lagi.
Nah, begitu pula dengan gambar ya, teman-teman ya. Kalau misalkan teman-teman punya gambar yang bisa diakses oleh public, silakan simpan di dalam folder public. Saya udah punya folder namanya img, yang di dalamnya ada satu file namanya wpu.png. Ini karikatur dari moderator Discord-nya WPU. Ya, teman-teman udah pernah gabung belum?
Kalau belum, pengen gabung di Discord, boleh nih. Discord.gg.wpu Nah ini nanti tinggal kita panggil aja di misalkan di about ya. Kita simpan di about.
Misalkan halaman about WPU gitu ya. Jadi di bawah sini kita bikin image yang mengarah ke img.wpu.png ya. Kalau kita lihat di websitenya kita ke halaman about. Nah itu ada ya kalau kita mau kecilin.
Kasih widthnya aja. Jadi sekarang kita udah bisa ngambil gambar dari folder public. Caranya kayak tadi ya. Nah berikutnya kita juga bisa kirimkan data dari...
file routes ke dalam view, teman-teman. Jadi caranya kalian boleh buka file routes-nya. Terus misalnya saya mau ngirim data ke alaman about.
Jadi ceritanya gini, di alaman about, saya mau bikin sebelum tulisannya, sini saya mau bikin pakai H3 gitu misalnya ya. Owner dari server-nya itu Sandika. Gini.
Nah, saya pengen nanti Sandika-nya ini ngambil dari data yang dikirim ke dalam view lewat routes-nya. Jadi caranya kita kirimnya, kasih tanda koma di sini. Kita kasih koma, terus kita kirim array.
Jadi saya akan ngirimkan data ini yang ada di dalam array nanti ya ke dalam view about. Tinggal kita tulis pasangan antara key dan value-nya. Key-nya adalah data yang mau dikirim. Value-nya adalah nilainya tadi.
Jadi saya mau kirim data nama. Nah kalau misalkan udah kirim data nama bisa langsung kita pakai di dalam about. Jadi caranya kita tinggal tulis. Bisa pakai tag PHP. Kita echo dollar nama.
Coba kita lihat ya. Sekarang kita refresh. Ada ownernya Sandika Gali. Dan bisa lebih singkat lagi Kalau teman-teman tau ini kan bisa diganti pakai Lebih kecil tanda tanya sama dengan Ini ya sama aja Atau bahkan yang lebih keren Karena sekarang kita lagi pakai blade templating engine-nya Laravel Ini bisa kita ganti pakai kurung-kurawal 2x Hasilnya sama aja bahkan lebih keren Karena ada fitur tambahan Kalau kita tulis begini ya Karena ada fitur tambahan yaitu kita bisa melakukan sanitasi pada inputannya Jadi kalau nanti teman-teman masukin tag HTML Nah Itu gak akan dieksekusi sebagai TKTML Kita refresh Tuh sama aja ya Dan nulisnya juga jadi lebih enak Lebih cepet daripada kita tulis Lebih kecil dari tanda tanya gitu Cukup kurung-kurung awal 2 kali aja Oke teman-teman Jadi mungkin itu Penggunaan sederhana dari aplikasi Laravel kita Dan buat episode berikutnya Saya mau kasih teman-teman PR ya Saya mau kasih tugas Saya minta teman-teman bikin 2 buah root baru 2 buah root baru ya Saya kasih tugas disini ya Tugasnya adalah Buat 2 root baru Yang satu adalah routenya ke halaman blog Halaman blog ini saya pengen kalian menampilkan Dua buah artikel yang ada judul dan isi artikelnya Silahkan judulnya bebas Kalian nampilinnya juga bebas Mau pakai H1 boleh, mau pakai paragraf isinya boleh Simple aja isinya gak usah panjang-panjang Cukup satu kalimat atau dua kalimat Yang penting artikelnya ada dua Oke, satu lagi Saya pengen kalian bikin route baru Yang namanya kontak Nah ini kalian kasih tau aja cara mengkontak kalian. Misalkan kalian bisa tulis ada email atau social media.
Link ke social media ya. Atau kalian mau nambahin yang lain juga boleh. Yang penting kalian tau nanti caranya untuk membuat route baru.
Dan jangan lupa bikin view-nya juga. Ya silahkan dikerjakan kita akan bahas di episode berikutnya. Baik, jadi itu tadi sekali lagi penjelasan di episode ketiga mengenai dasar-dasar penggunaan Laravel ya.
Kita udah bahas mengenai struktur folder, kita udah bahas mengenai routes, dan juga view yang sangat sederhana. Ya, mudah-mudahan teman-teman paham. Dan di video berikutnya, ini akan lebih seru, kita akan bahas mengenai Blade Templating Engine lebih jauh.
Kita akan hias halaman kita supaya lebih keren lagi menggunakan Tailwind. Jadi terima kasih teman-teman udah menyaksikan, mudah-mudahan bermanfaat. Kita akan ketemu lagi di episode berikutnya Saya Sari Gagali pamit Dan seperti biasa Jangan lupa Titik komentar