Point Of Sales – Laravel Livewire

Point Of Sales – Laravel Livewire

Sumber belajar : Channel Tahu Coding

  1. 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
  2. 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>
  1. Jalankan saja dulu si laravel
    • php artisan serve
  2. 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
  3. Membuat modal
    • php artisan make:model Product
    • edit file Apps – models – Product
  4. Membuat komponen baru
    • php artisan make:livewire Product
    • edit file Apps – Http – Livewire – Product
    • edit file resources – views – livewire – product.blade.php
  5. Mendefinisikan route
    • edit routes – web.php
  6. Pasang modul POS
    di console : php artisan make:livewire Cart
  7. Modul pos diambil dari yang sudah jadi punya Darryldecode di github (link), ikuti langkah instalasi
  8. Coding cart (panjang euy, lihat source code Cart.php, cart.blade.php)
  9. 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.

  1. Di terminal : npm install –save turbolinks
  2. npm run dev
  3. 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>”
  4. 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”
  5. merapihkan tampilan image pada pos product di file cart.blade.app.php
    • menambahkan style=”object-fit: contain;width=100%;height=125px”
  6. 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");"
  1. Selain font style juga bisa menggunakan css dari mdbootstrap, tinggal tambahkan code cdn di head app.blade.php
  2. styling juga menggunakan mdbootstrap

Memperbaiki auth login

  1. php artisan make:livewire auth.login
  2. php artisan make:livewire auth.register
  3. php artisan make:livewire auth.logout
  4. edit web.php di routes

Menambahkan proses bayar dan uang kembalian

  1. Menambahkan baris @stack di app.blade
  2. Edit cart.blade.php
  3. Disini sudah tambah script tentang menghitung sisa kembalian. lihat di cart.blade.php

Menyimpan transaksi jual

  1. Membuat tabel transaction dan product transaction dengan migrate
  2. php artisan make:migration create_transaction
  3. php artisan make:migration create_transaction_table
  4. php artisan make:migrateion create_product_transaction_table
  5. php artisan migrate
  6. php artisan make:model Transaction
  7. php artisan make:model ProductTransaction

Transaksi jual – generator invoice

  1. composer require haruncpi/laravel-id-generator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.