Membangun Website Toko Online Dengan Laravel Nuxtjs Dan Payment Gateway Dark [PDF]

Citation preview

Table of Contents Kata pengantar .............................................................................................................. 8 License Buku .................................................................................................................. 9 Tentang Buku ............................................................................................................... 10 Diagram Alur Aplikasi ................................................................................................... 11 Struktur dan Relasi Database ....................................................................................... 16 Wirefrime UI Desain Website ........................................................................................ 17 Persiapan dan Persyaratan Tools ................................................................................. 21 Membuat Project Baru Laravel Dengan Composer ....................................................... 26 Membuat Helpers di Laravel ........................................................................................ 29 Upgrade Versi Laravel .................................................................................................. 34 Koneksi Database di Laravel ........................................................................................ 35 Membuat Model dan Migration ..................................................................................... 37 Eloquent Relationships ................................................................................................. 62 Eloquent Accessors, Mutators & Casting ...................................................................... 94 Membuat Data Seeder User ....................................................................................... 105 Apa itu API ? ............................................................................................................... 108 Apa itu JWT (Json Web Token) ? ................................................................................. 110 Installasi dan Konfigurasi JWT untuk Admin ............................................................... 112 Membuat Restful API Login Admin ............................................................................. 117 Membuat Restful API Dashboard Admin ..................................................................... 132 Membuat Restful API CRUD Categories ...................................................................... 141 Membuat Restful API CRUD Products ......................................................................... 164 Membuat Restful API Invoices Admin ......................................................................... 191 Membuat Restful API Customers ................................................................................ 200 Membuat Restful API CRUD Sliders ............................................................................ 207 Membuat Restful API CRUD Users .............................................................................. 221 Membuat Restful API Register Customer .................................................................... 241



Konfigurasi JWT untuk Customer ................................................................................ 248 Membuat Restful API Login Customer ........................................................................ 254 Membuat Restful API Dashboard Customer ................................................................ 268 Membuat Restful API Invoices Customer .................................................................... 273 Membuat Restful API Review Product ......................................................................... 280 Membuat Restful API Categories Web ........................................................................ 288 Membuat Restful API Products Web ........................................................................... 297 Membuat Restful API Sliders Web .............................................................................. 304 Installasi dan Konfigurasi Raja Ongkir ........................................................................ 309 Membuat Restful API Raja Ongkir ............................................................................... 319 Membuat Restful API Carts ......................................................................................... 331 Installasi dan Konfigurasi Midtrans ............................................................................. 348 Membuat Restful API Checkout .................................................................................. 355 Membuat Restful API Notifikasi Handler Payment Gateway ....................................... 368 Apa itu Nuxt.js ? ......................................................................................................... 376 Installasi Nuxt.js ......................................................................................................... 378 Memahami Struktur Folder di Nuxt.js ......................................................................... 382 Rendering ................................................................................................................... 385 Target Deployment .................................................................................................... 386 Routing ....................................................................................................................... 387 Meta Tags dan SEO .................................................................................................... 390 Data Fetching ............................................................................................................. 393 Berkenalan Dengan Vuex ........................................................................................... 397 Membuat Project Baru di Nuxt.js ................................................................................ 404 Kustomisasi Progress Bar di Nuxt.js ........................................................................... 408 Konfigurasi SSR dan Target Deployment ................................................................... 410 Integrasi Dengan CSS dan JavaScript External (Template Dashboard CoreUI) ........... 413 Installasi dan Konfigurasi Nuxt Auth .......................................................................... 419 Membuat Middleware Role ......................................................................................... 427 Installasi dan Konfigurasi Vue Star Rating .................................................................. 432



Installasi dan Konfigurasi Chart.js .............................................................................. 435 Installasi CKEDITOR dan Sweet Alert 2 ....................................................................... 438 Membuat Global Helpers dengan Mixins .................................................................... 440 Membuat Proses Login Admin .................................................................................... 443 Menampilkan Data Products ...................................................................................... 454 Membuat Proses Insert Data Product ......................................................................... 470 Membuat Proses Edit dan Update Data Product ......................................................... 492 Membuat Proses Delete Data Product ........................................................................ 513 konfigurasi Vuex Admin Invoice ................................................................................. 525 Menampilkan Data Invoices ....................................................................................... 529 Menampilkan Detail Data Invoice ............................................................................... 547 Konfigurasi Vuex Admin Customer ............................................................................. 557 Menampilkan Data Customer ..................................................................................... 561 Konfigurasi Vuex Admin Slider ................................................................................... 577 Membuat Layout Admin ............................................................................................. 581 Menampilkan Data Sliders .......................................................................................... 590 Membuat Proses Insert Data Slider ............................................................................ 601 Membuat Proses Delete Data Slider ........................................................................... 612 Konfigurasi Vuex Admin User ..................................................................................... 622 Menampilkan Data Users ........................................................................................... 626 Membuat Proses Insert Data User .............................................................................. 642 Membuat Proses Edit dan Update Data User ............................................................. 653 Membuat Proses Delete Data User ............................................................................. 669 Membuat Halaman Dashboard ................................................................................... 681 Konfigurasi Vuex Admin Category .............................................................................. 688 Menampilkan Data Categories ................................................................................... 694 Membuat Proses Insert Data Category ....................................................................... 709 Membuat Proses Edit dan Update Data Category ...................................................... 720 Membuat Proses Delete Data Category ..................................................................... 736 Konfigurasi Vuex Admin Product ................................................................................ 748



Membuat Component Hader dan Footer .................................................................... 752 Membuat Fitur Rating dan Review ............................................................................. 757 Membuat Layout Default ............................................................................................ 773 Membuat Proses Register Customer .......................................................................... 777 Membuat Proses Login Customer ............................................................................... 788 Membuat Halaman Dashboard Customer .................................................................. 796 Konfigurasi Vuex Customer Invoice ............................................................................ 805 Menampilkan Data Invoice Customer ......................................................................... 809 Menampilkan Detail Data Invoice Customer .............................................................. 826 Menampilkan Snap Payment Midtrans ....................................................................... 841 Installasi dan Konfigurasi PWA ................................................................................... 849 Membuat Vuex Web Category .................................................................................... 855 Menampilkan Detail Data Product .............................................................................. 858 Membuat Fitur Pencarian Product .............................................................................. 868 Membuat Vuex Web Cart ........................................................................................... 882 Membuat Proses Add To Cart.md ............................................................................... 891 Menampilkan Data Cart di Header ............................................................................. 899 Menampilkan Cart Setelah Login dan Menghapus Cart Setelah Logout ..................... 905 Menampilkan Halaman Cart ....................................................................................... 909 Membuat Fungsi Remove Cart ................................................................................... 920 Membuat Vuex Web RajaOngkir ................................................................................. 929 Menghitung Biaya Ongkos Kirim ................................................................................ 936 Menampilkan Categories di Header ........................................................................... 958 Membuat Proses Checkout ......................................................................................... 963 Melakukan Pembayaran Dengan Midtrans ................................................................. 984 Membuat Vuex Web Slider ......................................................................................... 988 Membuat dan Menampilkan Component Slider .......................................................... 991 Membuat Vuex Web Product ...................................................................................... 998 Menampilkan Products di Homepage ....................................................................... 1002 Menampilkan Index Data Products ........................................................................... 1008



Menampilkan Index Data Categories ....................................................................... 1019 Menampilkan Data Product Berdasarkan Category .................................................. 1024 Deployment Project Laravel di cPanel (Shared Hosting) .......................................... 1033 Deploy Project Nuxt.js di Vercel (SSR) ..................................................................... 1052 Konfigurasi Notifikasi Handler Midtrans ................................................................... 1063 Source Code ............................................................................................................. 1066 Penutup .................................................................................................................... 1067



7



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 Toko Online Dengan Laravel, Nuxt.js 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.



Raihlah ilmu, dan untuk meraih ilmu belajarlah tenang dan sabar. - Umar bin Khattab



8



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.



CATATAN : jika terjadi pembajakan, maka akan di tindak lanjuti secara hukum.



9



Tentang Buku Buku ini akan mengajarkan kita semua bagaimana cara menjadi seorang Full-Stack Web Developer dengan cara membangun sebuah website toko online menggunakan Laravel sebagai backend dan Nuxt.js sebagai frontend. Dimana Laravel akan berperan membuat layanan web service berupa Rest API. Sedangkan Nuxt.js akan berperan untuk mengelola dan menggunakan Rest API tersebut. Kita juga akan belajar mengimplementasikan layanan dari RajaOngkir untuk mendapatkan biaya ongkos kirim secara realtime dan akurat. Dan juga kita akan belajar tentang integrasi dengan layanan Payment Gateway (Midtrans), fungsinya untuk melakukan pembayaran secara otomatis di dalam website yang kita buat. Di dalam buku ini akan dibagi menjadi 3 bab utama, yaitu : 1. Membangun web service Rest API menggunakan Laravel. 2. Mengintegrasikan Rest API di dalam Nuxt.js. 3. Deployment ke tahap production (online). Di bab pertama, kita akan belajar banyak hal di dalam Laravel, seperti membuat project baru menggunakan Composer. Membuat Relationships untuk menghubungkan beberapa table menjadi satu kesatuaan. Memanipulasi data menggunakan Accessor, Mutator dan Casting. Implementasi JWT (Json Web Token) untuk proses otentikasi di Rest API. Integrasi RajaOngkir dan Payment Gateway. Di bab kedua, Kita akaan belajar membuat project Nuxt.js baru. Membuat proses otentikasi. Penerapan middleware. Kustomisasi middleware untuk multiple level user. Menampilkan statistik dan grafik penjualan. Menampilkan data dengan teknik SSR (server side rendering), sehingga website tersebut baik disisi SEO (search engine optimization). Di dalam Nuxt.js kita juga akan belajar bagaimana melakukan integrasi dengan external template dashboard. Dan kita akan integrasikan juga menggunakan Bootstrap Vue agar kita dapat menggunakan beberapa component Bootstrap untuk mempermudah dalam pengembangan project sekala besar. Di bab terakhir, setelah semua project berhasil diselesaikan maka akan dilanjutkan belajar bagaimana cara melakukan proses deployment. Untuk Laravel akan di deploy ke dalam cPanel (shared hosting) dan untuk Nuxt.js akan di deploy ke dalam Vercel dengan teknik SSR dan menerapkan konsep CI/CD atau biasa disebut dengan Continue Integration dan Contrinue Development.



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



10



Diagram Alur Aplikasi Sebelum membangun sebuah aplikasi tentu saja kita butuh sebuah diagram untuk mengetahui alur program yang akan di kembangkan. Dengan menggunakan sebuah diagram kita bisa lebih tau dan paham bagaimana sebuah data berjalan di dalam aplikasi. Dengan menjabarkan beberapa fitur-fitur dan menggunakan sebuah diagram, maka seorang software developer akan sangat terbantu saat proses pengembangan aplikasi dan apalagi aplikasi yang dikembangkan memiliki sekala yang sangat besar. Di dalam studi kasus membangun website toko online kali ini kita akan memisahkan menjadi 3 diagram , yaitu admin, customer dan web.



Diagram



Admin



11



Dari diagram Admin di atas kita memliki sebuah endpoint dengan menggunakan konsep



12



otentikasi yang artinya kita perlu melakukan sebuah login terlebih dahulu dan disini untuk otentikasi kita menggunakan JWT atau Json Web Token. Setelah kita berhasil melakukan proses otentikasi, maka sekarang kita dapat mengakses beberapa endpoint lainnya, seperti /categories, /products, /invoices dan lain-lain. Dan disini kita bisa melakukan proses CRUD atau Create, Read, update dan Delete sebuah data ke dalam database. Jadi kesimpulannya, endpoint yang ada di atas merupakan jenis endpoint private yang mana hanya bisa diakses jika kita sudah melakukan proses otentikasi terlebih dahulu.



Diagram



Customer



Untuk diagram Customer di atas, sama seperti yang ada di dalam Admin, yaitu kita menggunakan jenis endpoint yang bersifat private, dimana endpoint yang ada di dalamnya hanya dapat diakses apabila kita sudah melakukan proses otentikasi terlebih dahulu. Di dalam diagram Customer di atas, kita akan menampilkan beberapa data, yang pertama adalah /dashboard yang nantinya akan kita gunakan untuk menampilkan Rest API berupa



13



statistik data. Dan untuk /invoices akan digunakan untuk menampilkan list data invoice yang pernah dibuat oleh customer tersebut. Dan di dalam endpoint detail invoice, kita juga akan menampilkan list data order atau produk yang telah dibeli. Kemudian kita juga dapat memberikan review atau ulasan dari produk tersebut di dalam endpoint /reviews.



Diagram



Web



Untuk diagaram Web akan berbeda dari sebelum-sebelumnya, karena semua endpoint yang ada disini akan bersifat public kecuali endpoint /cart. Dimana semua endpoint kecuali /cart dapat di akses secara public tanpa perlu melakukan proses otentikasi terlebih dahulu.



14



Karena endpoint tersebut akan digunakan untuk menampilkan data di halaman depan website. Dan untuk /cart akan kita atur menjadi private dengan tujuan hanya bisa di akses jika customer telah melakukan proses otentikasi terlebih dahulu, karena di dalam data cart nanti akan ada ID dari customer yang melakukan proses Add To Cart.



15



Struktur dan Relasi Database Pembuatan sebuah struktur database beserta relasi merupakan hal wajib yang perlu dilakukan oleh seorang software developer atau programmer sebelum melakukan proses development atau koding. Permasalahan yang sering terjadi adalah para software developer atau programmer yang baru belajar melakukan koding langsung. Dan membuat database berserta relasinya dengan berjalannya waktu, dan tentu saja hal ini tidak dibenarkan, karena bisa membuat aplikasi yang dikerjakan sangat lama dan bisa berubah-ubah sewaktu-waktu. Dan disini untuk website toko online yang akan kita bangun nanti sudah kita persiapkan struktur berserta relasi databasenya dan tentu saja karena kita menggunakan Laravel, maka kita tidak perlu membuat struktur dan relasi database tersebut secara manual, karena kita akan mengunakan fitur Migration untuk melakukan generate table-table dan Eloquent Relationships untuk membuat relasi antar table di dalam Laravel. Berikut ini struktur dan relasi yang akan kita buat nanti di dalam pengembangan website toko online menggunakan Laravel, Nuxt.js dan Payment Gateway (Midtrans).



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 Toko Online 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 Pada halaman homepage ini kita akan menampilkan beberapa data, seperti sliders dan products. Kurang lebih seperti berikut ini :



17



Detail Product Dan untuk halaman detail product disini kita akan menampilkan informasi mengenai produk yang akan di jual, seperti gambar, judul, deskripsi dan keterangan stok maupun berat.



18



Dan kita juga akan menampilkan ulasan dan rating yang diberikan oleh customer setelah membeli produk tersebut. Kurang lebih seperti berikut ini :



Cart / Checkout Halaman cart / checkout digunakan untuk menampilkan beberapa produk yang akan di beli, dimana disini kita akan menampilkan beberapa informasi, seperti nama produk, quantity dan harga dari produk tersebut (termasuk harga diskon). Setelah itu, kita juga akan menampilkan form untuk mengisi beberapa data yang



19



dibutuhkan untuk proses pengiriman, seperti provinsi, kota/kabupaten. Kita juga akan melakukan proses perhitungan biaya ongkos kirim menggunakan Raja Ongkir, dan untuk kurir yang akan di pakai seperti JNE, TIKI dan POS. Kurang lebih seperti berikut ini :



20



Persiapan dan Persyaratan Tools Setelah kita mengetahui diagram alur aplikasi, struktur database dan gambaran dari website-nya, maka sekarang kita akan lanjutkan untuk mempersiapkan beberapa tools yang akan kita gunakan untuk mengembangkan website toko online tersebut. Beberapa tools tersebut seperti Text Editor, Web Server, PHP, Node.js, Database, Composer dan lain-lain.



Langkah 1 - Installasi Text Editor Untuk Text Editor disini akan direkomendasikan menggunakan Visual Studi Code, temanteman bisa mengunduhnya melalui link berikut ini : https://code.visualstudio.com/, silahkan disesuaikan dengan sistem operasi yang digunakan. Setelah Visual Studi Code berhasil terinsall, sekarang saya akan rekomendasikan beberapa plugin yang akan kita gunakan dalam pengembangan aplikasi menggunakan Laravel dan Nuxt.js Plugin Visual Studio Code untuk Laravel https://marketplace.visualstudio.com/items?itemName=amirmarmul.laravel-blade-vsc ode https://marketplace.visualstudio.com/items?itemName=austenc.laravel-blade-spacer https://marketplace.visualstudio.com/items?itemName=codingyu.laravel-goto-view https://marketplace.visualstudio.com/items?itemName=stef-k.laravel-goto-controller https://marketplace.visualstudio.com/items?itemName=amiralizadeh9480.laravel-extr a-intellisense Plugin Visual Studi Code untuk JavaScript, Vue.js / Nuxt.js https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-langua ge-babel https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint https://marketplace.visualstudio.com/items?itemName=svipas.prettier-plus https://marketplace.visualstudio.com/items?itemName=octref.vetur https://marketplace.visualstudio.com/items?itemName=jcbuisson.vue https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets Plugin Visual Studi Code untuk PHP https://marketplace.visualstudio.com/items?itemName=hakcorp.php-awesome-snippe ts https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephen se-client



21



https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespac e-resolver https://marketplace.visualstudio.com/items?itemName=rexshi.phpdoc-comment-vsco de-plugin https://marketplace.visualstudio.com/items?itemName=ronvanderheijden.phpdoc-gen erator



Langkah 2 - Installasi Web Server Untuk Web Server, PHP dan Database disini kita bisa menggunakan tools yang sudah di bundle menjadi 1, seperti XAMPP atau Laragon. Disini kita bisa memilih menggunakan XAMPP atau Laragon, sesuai dengan selera masingmasing, kelebihan menggunakan Laragon dibandingkan XAMPP adalah dapat bergantiganti versi PHP dengan lebih mudah dan hal tersebut belum bisa dilakukan oleh XAMPP untuk saat ini. Dan kekurangan Laragon sendiri belum memiliki Database Manager seperti phpMyAdmin, tapi kita kita bisa menginstallnya sendiri dengan mudah. Disini disarakan menggunakan PHP versi 7.4 di dalam XAMPP ataupun Laragon. Berikut ini link yang bisa teman-teman pakai untuk mengunduh aplikasi-nya. Link Unduh XAMPP Windows: https://www.apachefriends.org/xampp-files/7.4.20/xampp-windows-x64-7.4.20-0-VC15 -installer.exe Linux : https://www.apachefriends.org/xampp-files/7.4.20/xampp-linux-x64-7.4.20-0-installer.r un Mac OSX : https://www.apachefriends.org/xampp-files/7.4.20/xampp-osx-7.4.20-0-installer.dmg Link Unduh Laragon https://laragon.org/download/



Langkah 3 - 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/



22



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



Langkah 4 - 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



23



Langkah 5 - Installasi Postman Postman merupakan salah satu tool yang wajib dimiliki oleh seorang backend developer. Postman sendiri merupakan sebuah tool yang digunakan untuk melakukan API testing. Postman sendiri memiliki fitur yang dapat digunakan secara personal maupun bersamaan (teamwork). Enaknya lagi, Postman juga dapat melakukan generate sebuah dokumentasi Api dari proses testing API yang pernah dilakukan. Karena di dalam buku ini kita akan membuat dan menguji sebuah Rest API, maka kita perlu melakukan installasi Postman terlebih dahulu. Untuk installasi Postman bisa disesuaikan dengan sistem operasi yang digunakan dan untuk mendapatkan tool tersebut kita bisa masuk di link berikut ini : https://www.postman.com/downloads/ Silahkan di install dan sesuaikan dengan sistem operasi yang digunakan, jika berhasil maka kurang lebih tampilannya seperti berikut ini :



24



25



Membuat Project Baru Laravel Dengan Composer Jika kita lihat di dokumentasi resmi dari Laravel ada banyak sekali cara untuk membuat project baru, yaitu menggunakan Sails Service (Based Docker), Laravel Installer, Composer Create Project. Di dalam buku ini kita akan belajar membuat project Laravel baru menggunakan perintah composer create-project. Dengan perintah ini kita dapat melakukan installasi dengan menyertakan spesifik versi Laravel yang digunakan.



Langkah 1 - Membuat Project Laravel Pada tahap ini kita semua akan belajar bagaimana cara membuat project Larvel baru menggunakan Composer, sekarang silahkan masuk ke dalam folder dimana kita akan menyimpan project tersebut, jika menggunakan XAMPP umumnya berada di dalam folder htdocs. Kemudian jalankan perintah berikut ini di dalam terminal/CMD :



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



Perintah di atas akan membuat sebuah project Laravel baru dengan nama backendecommerce dan versi yang akan digunakan adalah 8.x.x. Silahkan tunggu proses installasi sampai selesai dan pastikan komputer terhubung dengan internet, karena semua paket akan diunduh secara online.



26



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



cd backend-ecommerce



Perintah cd digunakan untuk melakukan enter atau masuk ke dalam sebuah direktori/folder, dalam contoh di atas kita masuk ke dalam folder backend-ecommerce, 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 :



Jika sudah muncul hasil seperti gambar di atas, maka kita telah berhasil melakukan installasi dan menjalankan project Laravel-nya.



27



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:



php artisan storage:link



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



28



Membuat Helpers di Laravel Helpers merupakan sebuah fungsi yang sering digunakan di dalam aplikasi dan sifatnya global, jadi bisa dipanggil dimana saja di dalam aplikasi. Contohnya jika kita ingin mengubah format mata uang menjadi Rupiah di dalam template, mengubah taanggal menjadi format Indonesia dan lain-lain. Di dalam Laravel sendiri ada berbagai macam cara pembuatan helpers, dan disini kita akan belajar bagaimana cara membuat helpers di Laravel dengan benar sesuai aturan best practice dan mudah tentunya.



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



Setelah project berhasil dibuka menggunakan Text Editor seperti gambar di atas, sekarang kita lanjutkan untuk proses bagaimana cara membuat helpers-nya. Silahkan buat folder baru dengan nama Helpers di dalam folder app, setelah itu di dalam folder Helpers silahkan buat file baru dengan nama helpers.php dan masukkan kode berikut ini :



29







Di dalam function moneyFormat kita menggunakan fungsi bawaan dari PHP yaitu number_format, dimana di dalam fungsi tersebut memiliki 4 parameter, kurang lebih seperti berikut ini :



number_format(angka, angka_di_belakang_koma, pemisah_desimal, pemisah_ribuan);



angka - merupakan parameter pertama, parameter ini berisi nilai angka yang akan di format. angka_dibelakan_koma - parameter ini bersifat opsional dan digunakan untuk menentukan jumlah angka desimal (angka dibelakang koma) yang dibutuhkan. Apabila tidak diisi, akan dianggap sebagai 0. pemisah_desimal - parameter ini akan berisi tanda untuk dijadikan pemisah angka desimal, disini bisa kita kosongkan saja. pemisah_ribuan - parameter ini yang akan digunakan untuk memisahkan angka ribuan dengan menggunakan notasi ..



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 :



31



"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



32



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



33



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



34



Koneksi Database di Laravel Karena website yang kita akan bangun bersifat dinamis, maka kita perlu menggunakan sebuah database untuk menyimpan data tersebut, dimana data tersebut dapat kita manipulasi sesuai dengan keinginan, seperti menambah, edit dan hapus. Di Laravel untuk menghubungkan ke dalam database sangatlah mudah, kita cukup mendefinisikan beberapa konfigurasi di dalam file .env, maka website kita sudah bisa terhubung dengan database.



Langkah 1 - Konfigurasi Koneksi Database di Laravel Sekarang kita akan belajar bagaimana cara menghubungkan project website toko online dengan database, silahkan buka file .env dan cari kode berikut ini :



DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=



Dan ubahlah menjadi seperti berikut ini :



DB_DATABASE=db_backend_ecommerce DB_USERNAME=root DB_PASSWORD=



35



Di atas, kita atur untuk DB_DATABASE menggunakan db_backend_ecommerce dan untuk DB_PASSWORD silahkan disesuaikan dengan konfigurasi dari masing-masing MySQL yang digunakan, jika menggunakan XAMPP, secara default adalah kosong atau kita tidak perlu mengisinya. Sekarang kita lanjutkan membuat databasenya melalui PhpMyAdmin. Silahkan aktifkan fitur MySQL di XAMPP (Jika menggunakan XAMPP) dan buka link berkut ini di dalam web browser : http://localhost/phpmyadmin dan silahkan buat database baru dengan nama db_backend_ecommerce, kurang lebih seperti berikut ini :



36



Membuat Model dan Migration Di dalam kebanyakan framework pasti menggunakan arsitektur/pola yang disebut MVC atau kepanjangan dari (Model, View dan Controller). Laravel juga menerapkan arsitektur/pola MVC di dalam core systemnya, dengan menggunakan arsitektur ini maka proses pembuatan aplikasi akan dipisahkan berdasarkan fungsinya masing-masing. Model merupakan bagian yang digunakan untuk menangani query data dari database. View digunakan untuk menampilkan sesuatu di layar web browser, biasanya berupa kode-kode seperti HTML, CSS dan JavaScript. Dan sedangkan untuk Controller digunakan untuk menangani logika dan menghubungkan antara Model dengan View.



Migration merupakan version control untuk database, dimana kita bisa membuat schema database dan membagikannya dengan tim yang lain secara mudah. Jika sebelumnya kita membuat attribute secara manual di dalam database, maka dengan migration kita tidak perlu melakukan hal seperti itu lagi, seperti membuat table, menambahkan attribute, mengubah tipe data dan lain-lain. Pada bab perancangan dan materi struktur database, kita sudah melihat beberapa tabletable yang akan kita gunakan nantinya dan kali ini kita akan belajar bagaimana cara membuat Model dan juga Migration untuk melakukan generate table-table tersebut ke dalam database.



Langkah 1 - Membuat Model dan Migration Customer Di dalam Laravel untuk membuat sebuah Model dan Migration bisa dilakukan secara otomatis menggunakan perintah command line, ini akan sangat berguna sekali jika kita sedang mengembangkan sebuah website atau aplikasi dengan waktu yang singkat.



37



Sekarang kita coba untuk membuat sebuah Model dan juga Migration untuk table customers, silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya :



php artisan make:model Customer -m



Perintah di atas, digunakan untuk melakukan generate sebuah Model dengan nama Customer dan karena kita menambahkan flag -m, maka kita juga akan menyertakan sebuah Migration-nya. Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru di dalam project Laravel, yang berad di dalam folder : app/Models/Customer.php database/migrations/2021_07_08_005044_create_customers_table.php CATATAN : untuk nama file migration akan diambil dari tanggal pembuatannya. Setelah berhasil melakukan generate Model dan Migration, maka sekarang kita lanjutkan untuk melakukan beberapa penambahan kode di dalamnya. Pertama kita akan belajar untuk menambahkan beberapa attribute di dalam table customers, silahkan buka file migrationnya di database/migrations/2021_07_08_005044_create_customers_table.php dan pada function up silahkan diubah menjadi seperti berikut ini :



public function up() { Schema::create('customers', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); }



Dari perubahan kode di atas, kita menambahkan 4 attribute, yaitu :



38



name - menggunakan tipe data string. email - menggunakan tipe data string dan bersifat unique, artinya isi dari attribute ini tidak boleh ada yang sama. email_verified_at - menggunakan tipe data timestamp dan di atur menjadi nullable, artinya attribute ini tidak wajib diisi. password - menggunakan tipe data string. Setelah menambahkan beberapa attribute di file migration, sekarang kita lanjutkan di dalam Model Customer, 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/Models/Customer.php dan ubah semua kodenya menjadi seperti berikut ini :