Point Of Sales – Laravel Livewire – Experiences With Open Source

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

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

Transaksi jual – generator invoice

Point Of Sales – Laravel Livewire