Membangun Website Donasi Online Dengan Laravel Vue Js Tailwind Css Dan Payment Gateway Dark [PDF]

Citation preview

Table of Contents PENDAHULUAN ................................................................................................................... 6 Kata Pengantar .............................................................................................................. 7 License Buku .................................................................................................................. 8 Tentang Buku ................................................................................................................. 9



PERANCANGAN ................................................................................................................ 11 Perancangan Aplikasi ................................................................................................... 12 Struktur Database ........................................................................................................ 16 Wirefrime UI Desain Website ........................................................................................ 17



INSTALLASI & PERSIAPAN - BACKEND ......................................................................... 28 Persiapan dan Persyaratan .......................................................................................... 29 Membuat Project Laravel dengan Composer ................................................................ 33 Upgrade Versi Laravel .................................................................................................. 36 Membuat Helpers di Laravel ........................................................................................ 37 Installasi dan Konfigurasi Tailwind CSS di Laravel ........................................................ 41



DATABASE ......................................................................................................................... 48 Koneksi Database ........................................................................................................ 49 Membuat Model dan Migration ..................................................................................... 51 Eloquent Relationships ................................................................................................. 65 Eloquent Mutators & Casting ........................................................................................ 83 Membuat Data Seeder User ......................................................................................... 98



AUTHENTICATION - FORTIFY ....................................................................................... 101 Apa itu Laravel Fortify ? ............................................................................................. 102



Installasi dan Konfigurasi Laravel Fortify .................................................................... 104 Membuat Proses Login ............................................................................................... 111 Membuat Proses Forgot dan Reset Password ............................................................. 118



HALAMAN ADMIN - BACKEND ...................................................................................... 129 Membuat Halaman Dashboard ................................................................................... 130 Membuat CRUD Category .......................................................................................... 145 Membuat CRUD Campaign ......................................................................................... 173 Menampilkan Data Donatur ....................................................................................... 206 Menampilkan Data Donasi ......................................................................................... 214 Profile User dan Two Factor Authentication ............................................................... 226 Membuat CRUD Slider ................................................................................................ 246



RESTFUL API .................................................................................................................. 262 Apa itu API ? ............................................................................................................... 263 Install dan Konfigurasi Laravel Passport ..................................................................... 265 Membuat Restful API Register .................................................................................... 274 Membuat Restful API Login ........................................................................................ 281 Membuat Restful API Category ................................................................................... 288 Membuat Restful API Campaign ................................................................................. 296 Membuat Restful API Slider ........................................................................................ 303 Membuat Restful API Profile ....................................................................................... 307 Installasi dan Konfigurasi Midtrans ............................................................................. 319 Membuat Restful API Donation ................................................................................... 324



PENGENALAN VUE JS & VUEX ...................................................................................... 340 Berkenalan Dengan Vue Js ......................................................................................... 341 Composition API dan Reactivity API ............................................................................ 348 Lifecycle Hooks .......................................................................................................... 355 Berkenalan Dengan Vuex ........................................................................................... 371



Membuat Aplikasi Pertama Dengan Vuex .................................................................. 381



INSTALLASI & PERSIAPAN - FRONTEND ..................................................................... 403 Installasi dan Perispan Frontend ................................................................................ 404 Membuat Project Vue Js dengan Vue CLI .................................................................... 408 Installasi Library Pendukung ...................................................................................... 411 Installasi dan Konfigurasi Tailwind CSS di Vue Js ........................................................ 416 Membuat Helpers Menggunakan Mixins ..................................................................... 419 Konfigurasi Midtrans di Vue Js .................................................................................... 427 Membuat Component Header dan Footer .................................................................. 429



HALAMAN DONATUR ..................................................................................................... 436 Konfigurasi Global API Endpoint ................................................................................. 437 Konfigurasi Router untuk Authentication ................................................................... 438 Konfigurasi Module Auth Vuex ................................................................................... 448 Membuat Proses Register Donatur ............................................................................. 454 Menampilkan Halaman Dashboard Donatur ............................................................... 472 Membuat Proses Logout Donatur ............................................................................... 485 Membuat Proses Login Donatur ................................................................................. 496 Konfigurasi Router untuk Donation ............................................................................ 515 Konfigurasi Module Donation Vuex ............................................................................ 521 Menampilkan Data Donation dari Donatur ................................................................. 525 Konfigurasi Router untuk Profile ................................................................................. 539 Konfigurasi Module Profile Vuex ................................................................................. 544 Menampilkan Data Profile .......................................................................................... 548 Update Profile Donatur ............................................................................................... 556 Konfigurasi Router untuk Update Password ............................................................... 568 Update Password Donatur .......................................................................................... 574



HALAMAN FRONTEND ................................................................................................... 587



Konfigurasi Module Slider Vuex .................................................................................. 588 Menampilkan Data Category ...................................................................................... 592 Menampilkan Detail Category .................................................................................... 600 Konfigurasi Router untuk Campaign ........................................................................... 613 Menampilkan Data Campaign .................................................................................... 621 Menampilkan Detail Campaign .................................................................................. 635 Konfigurasi Router untuk Proses Donasi .................................................................... 655 Membuat Proses Donasi ............................................................................................. 662 Menampilkan Snap Pay Midtrans ............................................................................... 675 Konfigurasi Router untuk Search ................................................................................ 685 Membuat Realtime Search ......................................................................................... 693 Membuat Component Slider ....................................................................................... 708 Konfigurasi Module Category Vuex ............................................................................ 716 Membuat Component Category Home ....................................................................... 720 Konfigurasi Router untuk Homepage ......................................................................... 728 Menampilkan Component Slider dan Category di Halaman Homepage ..................... 734 Konfigurasi Module Campaign Vuex ........................................................................... 738 Menampilkan Data Campaign di Homepage .............................................................. 742 Konfigurasi Router untuk Category ............................................................................ 764



DEPLOYMENT ................................................................................................................. 771 Deploy Project Laravel di Shared Hosting (cPanel) .................................................... 772 Deploy Project Vue Js di Netlify .................................................................................. 791 Konfigurasi Notifikasi Handler Midtrans ..................................................................... 800



PENUTUP ......................................................................................................................... 803 Source Code ............................................................................................................... 804 Kesimpulan ................................................................................................................ 805



PENDAHULUAN



6



Kata Pengantar Bismillahirrahmannirrahiim. Assalamu'alaikum Warahmatullahi Wabarakatuh.



Alhamdulillah, segala puji dan syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa. Karena berkat limpahan karunia-Nya, kami dapat menyelesaikan penulisan buku Membangun Website Donasi Online dengan Laravel, Vue Js, Tailwind CSS dan Payment Gateway. Di Dalam penyusunan buku tersebut, penulis telah berusaha semaksimal mungkin sesuai dengan kemampuan penulis demi penyelesaian buku ini dengan baik. Penulis menyadari jika masih terdapat kekurangan ataupun suatu kesalahan dalam penyusunan buku ini sehingga penulis mengharapkan kritik ataupun saran yang bersifat positif untuk perbaikan di masa yang akan datang dari seluruh pembaca. Maka dengan kerendahan hati penulis hanya bisa menyampaikan ucapan terima kasih kepada semua pihak yang terlibat dalam proses penyelesaian ini. Sekian semoga buku ini dapat bermanfaat dan mudah dipahami bagi penulis khususnya serta para pembaca pada umumnya. Wassalamu'alaikum Warahmatullahi Wabarakatuh.



Jika kamu tidak tahan terhadap penatnya belajar, maka kamu akan menanggung bahayanya kebodohan - Imam Syafi'i



7



License Buku Buku ini menggunakan license personal, yang artinya buku dan isi di dalamnya hanya boleh digunakan dan di baca untuk seseorang yang sudah membelinya. Selain pemilik license dari buku ini tidak diperbolehkan menggunakan apalagi sampai menyebar luaskan tanpa izin dari penulis. Dan untuk pemilik license dari buku ini juga tidak di perbolehkan menyebarkan dan memperjual belikan lagi kepada seseorang.



Sukses bukan kebetulan, tapi sebuah pahatan patung yang setiap detailnya di tentukan oleh perbuatan kita



8



Tentang Buku Buku ini berjudul "Membangun Website Donasi Online dengan Laravel, Vue Js, Tailwind CSS dan Payment Gateway", di dalam buku ini kita semua akan belajar bersama-sama bagaimana cara membangun sebuah website donasi online dengan Laravel sebagai Backend, Vue Js sebagai Frontend, Tailwind CSS sebagai UI atau user interface dan terakhir kita menggunakan Payment Gateway (Midtrans) untuk proses pembayaran donasi secara otomatis. Di dalam buku ini, kita akan belajar dari 0 bagaimana proses pembuatan website donasi sampai ke tahap deployment online, agar website yang kita bagung dapat diakses secara global di internet. Di dalam buku ini, akan dibagi menjadi beberapa materi, diantaranya yaitu bagaimana cara membangun halaman Admin dan Restful API menggunakan Laravel, membangun halaman Frontend dengan Vue Js dan sekaligus mengintegrasikannya dengan Tailwind CSS dan yang terakhir kita akan menggunakan Payment Gateway sebagai metode pembayaran. Di awal, kita akan fokus belajar dengan Laravel seperti bagaimana cara membuat Model, Migration, Authentication yang mana akan kita integrasikan dengan Two Factor Authentication atau Autentikasi 2 Langkah dengan harapan agar website yang dibangun menjadi lebih aman. Setelah itu, kita juga akan belajar tentang bagaimana cara membuat halaman Admin beserta proses CRUD di Laravel untuk membuat beberapa master data, seperti Category, Campaign, Statistik dan Filter data donasi berdasarkan 2 tanggal yang berbeda. Setelah halaman Admin dan master data sudah selesai dibuat, selanjutnya kita akan belajar membuat Restful API untuk beberapa proses, yaitu Authentication dengan Laravel Passport, Campaign, Donation, Profile dan masih banyak lagi. Di materi selanjutnya, kita akan belajar bagaimana cara mengkonsumsi API atau memanggil API yang sebelumnya sudah kita buat di Laravel ke dalam Vue Js. Dan disini kita juga akan melakukan installasi dan konfigurasi Tailwind CSS sebagai UI atau user interface di website donasi yang sedang kita bangun. Untuk melakukan centralize data di dalam Vue Js, kita akan menggunakan Vuex dan menerapkan module system agar kode menjadi lebih maintenable dan mudah di kembangkan kedepannya. Agar kode di dalam Vue Js tidak ditulis berulang-ulang, maka kita akan menggunakan fitur terbaru di dalam Vue Js 3, yaitu Composition API, dengan fitur ini kode yang kita buat di dalam aplikasi menjadi lebih reusable atau bisa digunakan secara berulang-ulang di dalam komponen lain. Setelah semua proses membangun website donasi selesai, kita akan lanjutkan lagi untuk belajar bagaimana cara melakukan proses deployment atau meng-online-kan aplikasi kita di



9



internet. Disini kita akan menggunakan Shared Hosting untuk project Laravel atau Backendnya dan Vercel untuk project Vue Js atau Frontend.



Ilmu itu seperti air. Jika ia tidak bergerak, maka ia akan menjadi keruh lalu membusuk Imam Syafi'i



10



PERANCANGAN



11



Perancangan Aplikasi Berikut ini merupakan diagram alur bagaimana website donasi berjalan, disini kita akan pisah menjadi 2 bagian, yang pertama adalah Laravel sebagai Backend untuk membuat halaman Admin dan Rest API dan Vue Js sebagai Frontend untuk menkonsumsi/menggunakan Rest API yang sudah dibuat. Dalam kenyataan, pembuatan diagram sangatlah penting sebelum kita masuk ke dalam tahapan implementasi kode, dengan diagram kita bisa mengetahui bagaimana cara kerja dari aplikasi yang sedang kita bangun dan akan mempermudah dalam proses development aplikasi. Dengan memetakan fitur-fitur menggunakan diagram, seorang software developer akan sangat terbantu, kususunya saat membangun aplikasi dengan sekala besar, kebanyakan dari seseorang pasti akan mengabaikan proses ini, padahal dengan adanya diagaram seperti ini kita akan menjadi lebih paham apa fitur-fitur dan alur aplikasi saat berjalan.



Diagram Alur Laravel (Backend)



12



13



Dari diagram di atas Laravel (Backend) memiliki 2 konsep, yaitu untuk membuat halaman Dashboard / Admin dan untuk membuat Rest API. Dashboard / Admin Pada tahap ini kita akan membuat sebuah halaman Dashboard / Admin dimana di dalamnya terdapat fitur authentication, setelah proses authentication berhasil, maka kita bisa mengakses beberapa modules, seperti Category, Campaign, Donatur, dan lain-lain. Di dalam module-module tersebut juga terdapat action, seperti hanya bisa melakukan create, update dan delete sebuah data. Rest API Di tahap ini, kita akan membuat 2 jenis Rest API, yaitu Rest API yang bersifat global dan bersifat private atau harus menggunakan authentication untuk dapat mengakses data di dalamnya. Untuk Rest Api yang bersifat private, nanti untuk melakukan proses get data kita akan membutuhkan proses authentication terlebih dahulu dan dari proses authentication tersebut akan mendapatkan sebuah token, yang mana token tersebut akan dijadikan sebuah parameter untuk proses mendapatkan data ke dalam server.



Diagram Alur Vue Js (Frontend)



14



Dari diagram di atas Vue Js (Frontend) memiliki 2 konsep, yaitu untuk membuat halaman Dashboard / User dan halaman Front Web. Halaman Dashboard / User Pada halaman ini kita akan membutuhkan sebuah authentication, dimana proses ini akan memanggil Rest API yang sudah kita buat di Laravel, setelah proses authentication berhasil, maka kita bisa mengakses beberapa modules, diantaranya adalah data profile, update password dan data donasi. Halaman Front Web Halaman ini bersifat global dan dapat diakses oleh siapapun tanpa harus melakukan proses authentication, di dalam halaman ini akan menampilkan beberapa data, seperti Slider, Category dan juga Campaign.



15



Struktur Database Untuk struktur dan relasi database yang akan kita buat nanti, kurang lebih seperti gambar berikut ini :



Untuke attribute status di dalam table donations memiliki tipe data enum, yang isinya adalah pending, success, expired dan failed. CATATAN!: jangan buat terlebih dahulu untuk table-table dari gambar di atas, karena kita akan membuatnya nanti melalui migration di Laravel.



16



Wirefrime UI Desain Website Wirefrime adalah salah satu tahap yang sangat penting ketika kita mengembangkan sebuah aplikasi maupun website, dengan adanya wirefrime kita bisa membuat rancangan desain dan user exprience atau biasanya disebut UI/UX sebelum masuk ke tahap development atau pengembangan. Wirefrime merupakan sebuah kerangkan yang berfungsi untuk membuat tata letak suatu desain aplikasi atau website agar sesuai dengan apa yang akan di kerjakan, umumnya tugas ini di kerjakan oleh seorang UI/UX desainer. Umunya wirefrime berupa beberapa komponen seperti Header, Sidebar, Content dan Footer. Disini kita akan melihat wirefrime dari aplikasi atau website donasi yang akan kita buat nantinya, ini hanya sebuah gambaran dari website yang akan kita buat nanti. berikut ini beberapa wirefrime yang akan kita implementasikan ke dalam website nanti. Homepage Pertama adalah halaman homepage, pada halaman ini akan kita berikan beberapa informasi, seperti menampilkan Slider, Kategori dan juga data Campaign. Kurang lebih seperti berikut ini :



17



18



Detail Campaign Selanjutnya adalah halaman detail campaign, di dalam halaman ini akan kita buat untuk menampilkan beberapa informasi, seperti gambar dari campaign, judul, penggalang dana, jumlah orang yang berdonasi, jumlah uang yang sudah terkumpul dan deskripsi dari campaign. Kurang lebih seperti berikut ini :



19



20



Donation Kemudian adalah halaman donation, halaman ini akan muncul ketika kita menekan atau klik tombol DONASI SEKARANG pada halaman detail campaign, pada halaman ini kita akan menampilkan sebuah form yang berfungsi untuk melakukan pembayaran donasi, disini kita membuat 2 buat input, yaitu nominal donasi dan juga kata-kata/doa. Kurang lebih seperti berikut ini :



21



22



Dashboard Sekarang adalah halaman dashboard, halaman ini akan muncul ketika kita sudah berhasil melakukan proses register dan login di dalam website, dihalaman ini akan menampilkan beberapa informasi menu, seperti donasi saya, profile, password dan juga logout. Kurang lebih seperti beirkut ini :



23



24



Update Profile Terakhir adalah halaman update profile, halaman ini akan muncuk ketika kita melakukan klik button EDIT PROFILE yang ada di dalam halaman dashboard, pada halaman ini kita bisa melakukan update data, seperti mengganti foto dan juga mengganti informasi nama. Kurang lebih seperti berikut ini :



25



26



Itulah beberapa wirefrime atau gambaran dari tata letak website donasi yang akan kita bangun nanti, disini kita tidak akan membahas semua wirefrime dari website donasi, di atas hanya bagian-bagian inti dari website donasi nantinya.



27



INSTALLASI & PERSIAPAN BACKEND



28



Persiapan dan Persyaratan Sebelum kita memulai membangun sebuah website dengan Laravel dan Vue Js, maka ada beberapa persiapan dan persyaratan yang harus kita lakukan. Diantaranya menyiapkan sebuah web server seperti Apache, Nginx dan lain-lain, kemudian untuk database biasanya kita mengunakan MySQL. dan yang terakhir adalah PHP. Ketiga tools di atas, biasanya sudah di bundle atau dijadikan 1 dalam sebuah aplikasi yang bernama XAMPP, WAMPP, Laragon dan masih banyak lagi yang lainnya. Karena kita akan membuat project dengan Laravel dan Vue Js, maka ada tambahan lagi untuk tools yang akan kita gunakan, yaitu Composer dan Node Js. Composer adalah tools dependency manager pada PHP, yang digunakan untuk mendownload library-library tambahan ke dalam project yang sedang kita buat. Contohnya, jika kita ingin mengembangkan project berbasis ecommerce, maka kita membutuhkan library tambahan yaitu RajaOngkir untuk mendapatkan biaya ongkos kirim secara realtime, dan Composer digunakan untuk melakukan proses download library RajaOngkir tersebut ke dalam project ecommerce yang kita bagun. Node Js adalah JavaScript runtime yang bersifat open-source dan di kembangkan dengan engine V8 milik Google. Jika kita tahu, bahwa JavaScript umumnya berjalan disisi client atau browser, dan dengan Node Js, maka JavaScript bisa di jalankan di sisi server dan tanpa harus menggunakan browser. Node Js juga memiliki server sendiri oleh sebab itu kita bisa menjalankan Node Js tanpa harus menggunakan web server tambahan seperti Apache dan Nginx. Di dalam Node Js ada tools dependency manager yaitu NPM, sama seperti Composer, NPM juga digunakan untuk men-download library-library yang dibutuhkan saat kita membuat project berbasis Node Js dan JavaScript. Berikut ini syarat yang harus kita penuhi sebelum kita melanjutkan membangun website donasi dengan Laravel dan Vue Js. NAMA



KETERANGAN



XAMPP / WAMPP / LARAGON / VALET/ HOMESTEAD (minimal PHP versi 7.3)



Web Server, Database dan PHP



Composer



tools dependency manager pada PHP



Node Js (minimal versi 14 / 15)



JavaScript runtime



NPM



tools dependency manager pada Node Js



29



Installasi XAMPP Berikut ini beberapa link yang bisa kita gunakan untuk melakukan download XAMPP dengan versi PHP minimal 7.3. SIlahkan disesuaikan dengan sistem operasi yang digunakan. Windows (64-bit) : https://www.apachefriends.org/xampp-files/7.3.27/xampp-windows-x64-7.3.27-0-VC15 -installer.exe Linux (64-bit) : https://www.apachefriends.org/xampp-files/7.3.27/xampp-linux-x64-7.3.27-0-installer.r un MacOS (64-bit) : https://www.apachefriends.org/xampp-files/7.3.27/xampp-osx-7.3.27-0-installer.dmg



Installasi Composer Jika menggunakan XAMPP, maka untuk Composer kita harus melakukan installasi manual, karena tidak ikut di dalam aplikasi XAMPP tersebut, akan tetapi jika menggunakan Homestead maka kita tidak perlu melakukan installasi Composer, karena secara default, paket Composer sudah tersedia di dalamnya. Berikut ini link untuk melakukan installasi Composer dan silahkan di sesuaikan dengan sistem operasi yang digunakan. Installation - Linux / Unix / macOS : https://getcomposer.org/doc/00-intro.md#installation-linux-unix-macos Installation - Windows : https://getcomposer.org/doc/00-intro.md#installation-windows Untuk memverifikasi apakah Composer sudah berhasil terinstall di dalam komputer, kita bisa menjalankan perintah berikut ini di dalam CMD/terminal :



composer



Jika berhasil, maka akan muncul tampilan yang kurang lebih seperti berikut ini :



30



Installasi Node Js Untuk installasi Node Js sangat mudah sekali, kita bisa mengunduh binary file dari situs resminya atau bisa menggunakan command line. Untuk installasi silahkan bisa membukanya di link berikut ini : https://nodejs.org/en/download/ Silahkan pilih versi Node Js yang paling terbaru atau menggunakan versi LTS atau Long Time Support. Untuk mengetahui apakah Node Js sudah terinstall di komputer kita, silahkan jalankan perintah di bawah ini di terminal/CMD:



node -v



npm -v



Jika berhasil, maka akan muncul tampilan yang kurang lebih seperti berikut ini :



31



32



Membuat Project Laravel dengan Composer Sebenarnya ada beberapa cara untuk membuat project baru dengan Laravel, jika kita baca di dokumetasi resmi Laravel, ada beberapa teknik yang bisa kita gunakan. Dan pada ebook ini kita akan menggunakan Composer dengan perintah composer create-project. Cara seperti ini yang umumnya dipakai dan bisa memilih versi Laravel yang ingin digunakan.



Langkah 1 - Membuat Project Laravel Sekarang kita akan belajar membuat project Laravel menggunakan Composer, silahkan masuk ke dalam folder dimana kita akan menyimpan project-nya. Jika menggunakan XAMPP, maka masuk di dalam folder htdocs, kemudian buka CMD/terminal dan arahkan ke dalam folder htdocs tersebut, dan jalankan perintah berikut ini :



composer create-project laravel/laravel:^8.0 backend-donasi



Perintah di atas, akan membuat project Laravel baru dengan nama backend-donasi, silahkan tunggu proses installasinya sampai selesai.



33



Langkah 2 - Menjalankan Project Setelah proses installasi project selesai, sekarang kita akan belajar bagaimana cara menjalankan project Laravel tersebut, silahkan jalankan perintah berikut ini :



cd backend-donasi



Perintah cd digunakan untuk melakukan enter atau masuk ke dalam sebuah direktori/folder, dalam contoh di atas kita masuk ke dalam folder backend-donasi, dimana folder ini merupakan project Laravel-nya. Setelah itu jalankan perintah berikut ini :



php artisan serve



Jika perintah di atas berhasil dijalankan, maka project kita akan di jalankan di dalam localhost menggunakan port 8000, kita bisa membukanya di dalam web browser dengan mengetikkan http://localhost:8000, jika berhasil, maka kurang lebih tampilannya seperti berikut ini :



Langkah 3 - Menjalankan Storage Link Sekarang kita akan melakukan proses symlink folder storage di dalam Laravel, dimana folder storage ini agar dapat di akses melalui folder public. Silahkan jalankan perintah berikut ini di terminal/CMD:



34



php artisan storage:link



Jika berhasil, maka teman-teman akan melihat file/folder dengan nama storage di dalam folder public.



35



Upgrade Versi Laravel Halaman ini akan di update ketika ada pembaruan versi Laravel



36



Membuat Helpers di Laravel Disini kita akan belajar bagaimana cara membuat Helpers atau fungsi tambahan yang mana fungsi ini bisa digunakan secara global di dalam project kita. Kita akan membuat 1 buah helpers yang digunakan untuk merubah format angka/number menjadi mata uang Indonesia, jadi di dalam helper nanti kita akan tambahkan kata Rp. dan menambahkan pemisah angka/number untuk ribuan, jutaan dan lainnya menggunakan notasi ..



Langkah 1 - Membuat Helpers Sekarang, silahkan buka terlebih dahulu project-nya menggunakan text editor, bisa Sublime Text, VS Code dan lain-lain, ini akkan mempermudah kita dalam proses development.



Setelah sudah dibuka menggunakan text editor, sekarang silahkan buat folder baru dengan nama Helpers di dalam folder app. Kemudian di dalam folder Helpers silahkan buat file baru dengan nama helpers.php dan masukkan kode berikut ini :



37







38



Langkah 2 -Register Helpers Agar helpers dapat digunakan secara global di dalam project, maka kita harus melakukan register di dalam file composer.json. Silahkan buka file composer.json yang berada di dalam root project, kemudian pada bagian autoload tambahkan kode seperti berikut ini :



"autoload": { ...... "files": [ "app/Helpers/helpers.php" ] },



Kurang lebih seperti berikut ini :



Setelah itu, simpan file composer.json dan jalankan perintah berikut ini :



composer dump-autoload



39



Dan sekarang, helpers kita sudah bisa digunakan secara global di dalam project.



40



Installasi dan Konfigurasi Tailwind CSS di Laravel Sekarang kita akan belajar bagaimana cara installasi dan konfigurasi Tailwind CSS di dalam project Laravel. Dan disini kita juga akan menambahkan plugin official dari Tailwind CSS untuk mempercantik input form yang akan kita buat nanti di dalam website.



Apa itu Tailwind CSS ? Tailwind CSS merupakan CSS framework yang bersifat utility-first, yang mana bisa digunakan untuk membangun tampilan antar muka sebuah website menjadi lebih cepat. Jika menurut website resminya kurang lebih seperti berikut ini : A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Tailwind CSS sangat populer sekali saat ini, kita bisa melihat statistik dari penggunaan Tailwind CSS yang meloncat sangat tinggi jika dibandingkan dengan framework CSS lain di tahun 2019 dan 2020. statistik di tahun 2019



Sumber : https://2019.stateofcss.com/technologies/css-frameworks/



41



Statistik di tahun 2020



Sumber : https://2020.stateofcss.com/en-US/technologies/css-frameworks/ Dari gambar statistik di atas, kita bisa ambil kesimpulan bahwa Tailwind CSS memang sangat populer dan banyak digunakan untuk saat ini, maka kita juga akan mencoba menggunakan Tailwind CSS di dalam project Laravel.



Langkah 1 - Installasi Tailwind CSS Sekarang kita akan belajar bagaimana cara installasi Tailwind CSS di dalam project Laravel. Silahkan jalankan perintah berikut ini di dalam terminal/CMD :



npm install -D [email protected] [email protected] [email protected]



Langkah 2 - Publish File Konfigurasi Tailwind CSS Setelah proses installasi selesai sekarang kita akan membuat file konfigurasi dari Tailwind CSS, silahkan jalankan perintah berikut ini di dalam terminal/CMD :



42



npx tailwindcss init



Jika perintah di atas berhasil, maka kita akan mendapatkan file baru dengan nama tailwind.config.js di dalam root folder project. Dan isinya kurang lebih seperi berikut ini :



module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }



Langkah 3 - Konfigurasi Dengan Laravel MIX Sekarang kita akan lanjutkan untuk menambahkan Tailwind CSS di dalam file konfigurasi dari Laravel MIX, ini bertujuan agar kita dapat melakukan compile Tailwind CSS menggunakan Laravel MIX. Silahkan buka file webpack.mix.js kemudian ubah kode-nya menjadi seperti berikut ini :



43



const mix = require('laravel-mix'); /* |------------------------------------------------------------------------| Mix Asset Management |------------------------------------------------------------------------| | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */ mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require("tailwindcss"),



// string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->string('avatar')->nullable(); $table->rememberToken(); $table->timestamps(); }); }



Di atas, kita hanya menambahkan 1 attribute yaitu avatar dan kita setting menjadi nullable, yang artinya tidak wajib diisi. Sekarang, kita lanjutkan untuk menambahkan mass assigment untuk field avatar di atas di dalam Model, ini digunakan agar field tersebut dapat melakukan manipulasi/insert data. Silahkan buka file app/Models/User.php, kemudian cari kode berikut ini :



52



/** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'name', 'email', 'password', ];



Kemudian ubah menjadi seperti berikut ini :



/** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'name', 'email', 'password', 'avatar'



// id(); $table->string('name'); $table->string('slug'); $table->string('image'); $table->timestamps(); }); }



Di atas, kita menambahkan 3 attribute baru, yaitu : name - menggunakan tipe data string slug - menggunakan tipe data string image - menggunakan tipe data string KETERANGAN! : attribute slug akan digunakan untuk membuat URL dari data category agar menjadi lebih friendly di SEO (Search engine optimization) nantinya. Setelah menambahkan beberapa attribute di file migration category, sekarang kita lanjutkan di dalam Model Category, yaitu menambahkan mass assigment, ini bertujuan agar attribute yang sudah kita tambahkan di atas dapat melakukan manipulasi data, seperti proses insert, update dan delete. Silahkan buka file app/Moldes/Category.php, kemudian ubah kode-nya menjadi seperti berikut ini :



54