Scribd
Unggah
17 tayangan7 halaman

Laravel Dasar

Diunggah oleh

Abdul Halim
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
17 tayangan7 halaman

Laravel Dasar

Diunggah oleh

Abdul Halim
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Daftar Isi

Laravel Dasar
Prerequisite
 PHP Dasar
 OOP PHP
 PHP MVC
 Tailwind CSS
 Alpine JS

System Requirement
 PHP 8.2
 MySQL
 Composer
 NodeJS
 Laragon
 Editor : VSCode ; extension :

 PHP Intelephense  Laravel Extra Intellisense


 PHP Namespace Resolver  Laravel Goto View
 Laravel Snippets  Tailwind CSS Intellisense
 Laravel Blade Snippets  Alpine.JS Intellisense
 Laravel Blade Formatter  Alpine.JS Syntax Highlight
 Laravel Blade Spacer
Check Versi PHP yang terinstall di PC

 Buka Laragon > Klik Kanan > PHP > Version

Update PHP pada Laragon

 Download PHP versi 8.2 keatas, simpah di alamat C:/laragon/bin/php

Setting Web Server

 Klik Roda gerigi (preferences) dari laragon, tab services & ports, unchecklist Apache & checklist
Nginx.

Check Composer Version

 Klik terminal, ketik composer -v

Update NodeJS

 Download NodeJS Prebuilt Binaries, extract di alamat C:/laragon/bin/nodejs

Aktifkan Extension PHP

 Klik kanan pada largon > PHP>Extension> pdo_ sqlite & sqlite3.

Menginstall Laravel melalui Composer


Buka laravel.com, lalu masuk ke documentation. Klik Installation.

Klik terminal, ketikkan:


composer create-project laravel/laravel nama-project

Tunggu sampai proses selesai. Jika sudah, masuk ke folder project dengan mengetikkan
cd nama-project

Jalankan project dengan perintah


php artisan serve

Buka alamat pada browser / tekan CTRL+Klik pada alamat.

***
Mengenal setiap Folder pada Project
Buka dokumentasi Laravel > Directory Structure

Membuat halaman home.blade.php & contact.blade.php.

Membuat route baru

Menambahkan route dengan parameter array

Tugas: Membuat halaman blog dengan 2 judul artikel dan isinya.

***

 Mengerjakan Tugas Sebelumnya

Menginstall Tailwind
 Tailwindcss.com > Get Started > Framework Guides > Laravel
 Setup sampai selesai

Menambahkan component dari Tailwind


 Copy code ke home.blade.php di dalam body
 Klik require js untuk menambahkan font-family

Menambahkan JS (tampilan full screen)


 Buka alpinejs.dev > get started > installation > copy code
 Paste di atas <title>
 Kembali ke dokumentasi Tailwind > Transition
 Copy code
@click="isOpen = !isOpen"
Paste pada button di profile dropdown.

 Copy code
x-data="{ isOpen: false }"
Paste pada <nav >

 Copy code
x-show="isOpen"
x-transition:enter="transition ease-out duration-100 transform"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75 transform"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
Paste pada <div> di bawah komentar panjang.

Menambahkan JS (tampilan mobile)


Copy code
@click="isOpen = !isOpen"
Paste pada button di mobile menu button

Copy code

:class="{'bg-indigo-600': isOn, 'bg-gray-200': !isOn }


Ubah menjadi:

:class="{'hidden': isOpen, 'block': !isOpen }”


Paste pada <svg>

Copy lagi code di atas, paste pada <svg> di bawahnya (ke-2) dan ubah menjadi block & hidden

:class="{'block': isOpen, 'hidden': !isOpen }”


Tambahkan code
x-show="isOpen"
Di Mobile menu, show/hide.
Membuat Components pada Laravel
Komponen dan slot memberikan manfaat serupa pada bagian, tata letak, dan
penyertaan; namun, beberapa orang mungkin menganggap model mental
komponen dan slot lebih mudah dipahami. Ada dua pendekatan untuk menulis
komponen: komponen berbasis kelas dan komponen anonim.

Untuk membuat komponen berbasis kelas, Anda dapat menggunakan make:component. Perintah
ini make:component akan menempatkan komponen di app/views/components

Contoh, buka terminal dan ketikkan


php artisan make:component Navbar
Maka akan tercipta sebuah folder components di dalam view yang berisi file navbar.blade.php dan juga
kita dibuatkan komponen berbasis class di dalam app/View/Components.

Sekarang, pada home.blade.php cut elemen nav ke dalam file navbar.blade.php. Untuk memanggil
komponen navbar ke dalam halaman home, cukup ketikkan
<x-navbar><x-navbar>
Lakukan hal yang sama untuk bagian header namun tambahkan --view.

php artisan make:component Header --view


Cut element header ke dalam file header.blade.php lalu panggil <x-header> di home.blade.php.

Permasalahan yang terjadi adalah setiap kita pindah halaman, maka judul halaman tidak akan berubah
sesuai nama halamannya. Untuk itu kita perlu ubah menjadi dinamis menggunakan slot.

Caranya, kita tambahkan array pada web.php di routes dengan nama title untuk mengirimkan judulnya.
Full codenya menjadi
Route::get('/', function () {
return view('home',['title'=>'Home Page']);
});
Lakukan hal yang sama pada route yang lain.

Kembali ke home.blade.php

Di bawah Navbar, Ketikkan kode


<x-slot:title>{{title}}</x-slot:title>
Membuat Layout Component
Untuk membuat kode program kita menjadi lebih simple lagi, kita bisa membuat layout. Ketikkan di
terminal
php artisan make:component Layout
Lalu pindahkan semua code di halaman home.blade.php ke dalam layout.blade.php. Yang membedakan
antar satu halaman dan halaman yang lainnya terdapat pada elemen <main>, nah ini akan kita ganti
dengan {{$slot}}. Lalu pada halaman home.blade.php, kita tinggal panggil dengan <x-layout>

Full codenya
<x-layout>
<h3>Ini halaman Home Page</h3>
</x-layout>

Anda mungkin juga menyukai