Sumber belajar : Channel Tahu Coding
- Install laravel (source : laravel.com) dengan composer lebih enak untuk saya.
- composer create-project laravel/laravel namafolderapps
- composer require laravel/ui
- php artisan ui bootstrap
- php artisan ui bootstrap –auth
- npm install && npm run dev (install node.js dulu secara terpisah
- composer require livewire/livewire
- Edit di laravel – resources – views – layouts – app.blade.php
- tulis di bagian <head> – @livewireStyles
- tulis di <body> paling bawah -@livewireScripts
- edit bagian body di app.blade.php
<main class="py-4">
@yield('content')
<div class="container-fluid">
{{isset($slot) ? $slot : null}}
</div>
</main>
- Jalankan saja dulu si laravel
- php artisan serve
- Buat database (memakai mysql yang familiar / sudah diinstall terlebih dahulu)
- definisikan di .env
- php artisan migrate
- Buat user based on email dengan memanfaatkan auth login yang sudah dibuat melalui menu Register
- php artisan make:migration create_table_product
- edit di database – migration – create_table_product (lihat filenya untuk membuat schema)
- php artisan migrate
- Membuat modal
- php artisan make:model Product
- edit file Apps – models – Product
- Membuat komponen baru
- php artisan make:livewire Product
- edit file Apps – Http – Livewire – Product
- edit file resources – views – livewire – product.blade.php
- Mendefinisikan route
- edit routes – web.php
- Pasang modul POS
di console : php artisan make:livewire Cart - Modul pos diambil dari yang sudah jadi punya Darryldecode di github (link), ikuti langkah instalasi
- Coding cart (panjang euy, lihat source code Cart.php, cart.blade.php)
- Frontend (lihat code cart.blade.php)
Memasang Turbolink, berguna agar page kita terload sekaligus, dan perpindahan halaman seolah-olah tidak reload dan berkesan lebih cepat.
- Di terminal : npm install –save turbolinks
- npm run dev
- turbolink membuat livewire tidak jalan, jadi tambahkan script di app.blade.php setelah @livewireScripts
- “<script src=”https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js” data-turbolinks-eval=”false” data-turbo-eval=”false”></script>”
- ganti link anchor seperti <a href=”#” menjadi <span> tapi tambah style = cursor:pointer; agar ketika mouse berada hover/diatasnya berubah menjadi pointer seperti pada code “a href”
- merapihkan tampilan image pada pos product di file cart.blade.app.php
- menambahkan style=”object-fit: contain;width=100%;height=125px”
- menambahkan fontstyle, berguna untuk mengunakan icon-icon yang menarik
- npm install –save @fortawesome/fontawesome-free
- add baris berikut pada file webpack.mix.js
mix.copyDirectory( "node_modules/@fortawesome/fontawesome-free/webfonts", public/webfonts");"
- Selain font style juga bisa menggunakan css dari mdbootstrap, tinggal tambahkan code cdn di head app.blade.php
- styling juga menggunakan mdbootstrap
Memperbaiki auth login
- php artisan make:livewire auth.login
- php artisan make:livewire auth.register
- php artisan make:livewire auth.logout
- edit web.php di routes
Menambahkan proses bayar dan uang kembalian
- Menambahkan baris @stack di app.blade
- Edit cart.blade.php
- Disini sudah tambah script tentang menghitung sisa kembalian. lihat di cart.blade.php
Menyimpan transaksi jual
- Membuat tabel transaction dan product transaction dengan migrate
- php artisan make:migration create_transaction
- php artisan make:migration create_transaction_table
- php artisan make:migrateion create_product_transaction_table
- php artisan migrate
- php artisan make:model Transaction
- php artisan make:model ProductTransaction
Transaksi jual – generator invoice
- composer require haruncpi/laravel-id-generator
Leave a Reply