← all work← semua karya
/

Case study 02 · WordPress plugin · Mobile-firstStudi kasus 02 · Plugin WordPress · Mobile-first

AgroClick.

A stock app for a farm equipment distributor in Nganjuk, from sprayers to tractors. Built as a WordPress plugin where every screen is a shortcode, so staff use it on their phones like an app.Aplikasi stok untuk distributor alat pertanian di Nganjuk, dari sprayer sampai traktor. Dibangun sebagai plugin WordPress di mana setiap layar adalah shortcode, sehingga staf memakainya di HP seperti aplikasi.

Visit live siteKunjungi websiteagroclick.online

RolePeran
Sole developer, from brief to launchDeveloper tunggal, dari brief sampai rilis
ClientKlien
AgroClick, distributor in NganjukAgroClick, distributor di Nganjuk
Stack
WordPress plugin · PHP · MySQL · FPDF · JavaScript
Status
Live at agroclick.online ↗Online di agroclick.online ↗
19shortcodes
8700+lines of PHPbaris PHP
5in-app lessonsmateri tutorial
2roles with own permissionsrole dengan hak akses sendiri

The briefKebutuhannya

A warehouse
in your pocket.Gudang
di saku.

The owner wanted staff to record goods in and out from their phones, see stock by brand at any time, and stop answering customers from memory. A business acquaintance in Nganjuk asked me to build it; the owner agreed to it being shown here. Screens use dummy data.Pemilik ingin staf mencatat barang masuk dan keluar dari HP, bisa melihat stok per merek kapan saja, dan berhenti menjawab pelanggan hanya dari ingatan. Kenalan bisnis di Nganjuk meminta saya membuatnya; pemilik mengizinkan ditampilkan di sini. Tampilan memakai data dummy.

What I builtYang saya bangun

  • The whole plugin: data model, every screen, roles, PDF exportSeluruh plugin: model data, semua layar, role, export PDF
  • A custom transactions table and locked stock updatesTabel transaksi custom dan update stok yang dikunci
  • The mobile UI, drawer, bottom navigation and loginUI mobile, drawer, navigasi bawah dan login
  • The in-app tutorial and the wp-admin toolsTutorial di aplikasi dan alat wp-admin

Not part of itBukan bagiannya

  • Pre Test and Post Test, which link to Google FormsPre Test dan Post Test, yang menaut ke Google Form
  • Prices on incoming goods, still kept on paper by the client's choiceHarga barang masuk, masih dicatat di kertas sesuai pilihan klien
  • WordPress itself and the Elementor page templateWordPress itu sendiri dan template halaman Elementor

One stock change, end to endSatu perubahan stok, dari awal sampai akhir

Tap, check,
lock, log.Ketuk, cek,
kunci, catat.

From the moment staff pick an item to the line in the PDF, the stock number only ever changes in one place.Dari saat staf memilih barang sampai baris di PDF, angka stok hanya berubah di satu tempat.

01 · login

Sign inMasuk

Custom login; role decides what you can doLogin custom; role menentukan apa yang boleh dilakukan

02 · browse

Pick the itemPilih barang

Category, brand, itemKategori, merek, barang

03 · form

ValidateValidasi

Browser first, then the server, with nonce and permission checksBrowser dulu, lalu server, dengan cek nonce dan hak akses

04 · database

Lock and writeKunci dan tulis

Row locked in a transaction; stock before and after savedBaris dikunci dalam transaksi; stok sebelum dan sesudah disimpan

05 · history

On recordTercatat

Transaction ID in history and the PDFID transaksi di riwayat dan PDF

Screen recording · sped upRekaman layar · dipercepat

Recording 20 units inMencatat 20 unit masuk

  1. Open Stock, then Sprayer, CBA and Electric Sprayer Type 3 (0 units)Buka Stok, lalu Sprayer, CBA dan Electric Sprayer Type 3 (0 unit)
  2. Tap Stock in, enter 20 and a noteKetuk Barang Masuk, isi 20 dan keterangan
  3. Save: the confirmation shows the new stockSimpan: konfirmasi menampilkan stok baru
  4. History shows +20, 0 → 20, with its transaction IDRiwayat menampilkan +20, 0 → 20, beserta ID transaksinya

The app, screen by screenAplikasinya, layar per layar

Seven parts,
one plugin.Tujuh bagian,
satu plugin.

Screens come from the live app with dummy data. Tap any screen to enlarge it.Tampilan diambil dari aplikasi live dengan data dummy. Ketuk tampilan untuk memperbesar.

01

Mobile app shellKerangka aplikasi

Staff open it on their phones like an app. Behind it, WordPress handles users, the database and security, and the plugin draws every screen.Staf membukanya di HP seperti aplikasi. Di belakangnya, WordPress mengurus user, database dan keamanan, dan plugin menggambar setiap layarnya.

  • 19 shortcodes, one per screen, on full-width pages19 shortcode, satu per layar, di halaman full width
  • Own header, side drawer and bottom navigation, so it never looks like a WordPress themeHeader, drawer samping dan navigasi bawah sendiri, jadi tidak terlihat seperti tema WordPress
  • Custom login page with "remember me" and password resetHalaman login custom dengan "ingat saya" dan reset password
  • Home screen: today's stock in and out, recent activity, a link to the guideBeranda: barang masuk dan keluar hari ini, aktivitas terbaru, tautan ke panduan
Custom loginLogin custom
Home: today at a glanceBeranda: ringkasan hari ini
Side drawer with roleDrawer samping dengan role

← swipe →← geser →

02

Browsing stockMenelusuri stok

Stock is organised the way the warehouse thinks: category, then brand, then item.Stok disusun sesuai cara gudang berpikir: kategori, lalu merek, lalu barang.

  • Items and brands are custom post types; categories are a taxonomyBarang dan merek adalah custom post type; kategori adalah taksonomi
  • Totals roll up from item to brand to categoryTotal dihitung naik dari barang ke merek ke kategori
  • Add categories, brands and items from the phone, with photosTambah kategori, merek dan barang dari HP, lengkap dengan foto
  • Item detail: current stock, rename, change photo, and shortcuts to stock in, stock out and historyDetail barang: stok saat ini, ubah nama, ganti foto, dan pintasan ke barang masuk, keluar dan riwayat
01Stock by categoryStok per kategori
02Brands in a categoryMerek dalam kategori
03Items of a brandBarang dari satu merek
04Item detailDetail barang

← swipe →← geser →

03

Stock out & validationBarang keluar & validasi

The screen that changes stock. It has to be quick for staff and impossible to get wrong.Layar yang mengubah stok. Harus cepat untuk staf dan tidak bisa salah.

  • The form shows the stock available and caps the quantity at itForm menampilkan stok tersedia dan membatasi jumlah sesuai stok itu
  • The browser stops a wrong number first; the server checks again before savingBrowser menahan angka yang salah lebih dulu; server mengecek lagi sebelum menyimpan
  • Stock is changed inside a database transaction with the row lockedStok diubah di dalam transaksi database dengan baris yang dikunci
  • Each save gets a transaction ID and stores stock before and afterSetiap simpan mendapat ID transaksi dan menyimpan stok sebelum dan sesudah
  • Price is recorded on stock out only, at the client's request; it is noted, not calculatedHarga dicatat hanya di barang keluar, sesuai permintaan klien; dicatat, tidak dihitung
  • Limits on quantity and price per transactionBatas jumlah dan harga per transaksi
01Empty form, max shownForm kosong, maksimal ditampilkan
0260 of 35 is refused60 dari 35 ditolak
03A valid entryIsian yang valid
04Saved, new stock shownTersimpan, stok baru tampil

← swipe →← geser →

04

History & PDFRiwayat & PDF

Every change is on record, and the owner can take it away as a PDF.Setiap perubahan tercatat, dan pemilik bisa membawanya sebagai PDF.

  • Filter by in, out or all; by day, month and year; search the notesFilter masuk, keluar atau semua; per tanggal, bulan dan tahun; cari keterangan
  • Each entry shows who recorded it, the stock change and its transaction IDSetiap entri menampilkan siapa yang mencatat, perubahan stok dan ID transaksinya
  • PDF export built with FPDF, by date range and typeExport PDF dibuat dengan FPDF, per rentang tanggal dan jenis
  • Up to 5,000 transactions per file to keep the server safeMaksimal 5.000 transaksi per file supaya server tetap aman
All historySemua riwayat
Filtered: stock inFilter: barang masuk
Filtered: stock outFilter: barang keluar
PDF download optionsPilihan download PDF

← swipe →← geser →

The exported PDF: stock before and after, price, note, staff and transaction IDPDF hasil export: stok sebelum dan sesudah, harga, keterangan, petugas dan ID transaksi
05

In-app tutorialTutorial di aplikasi

Staff learn the app inside the app, in plain Indonesian, with real screenshots.Staf belajar memakai aplikasi di dalam aplikasinya, dengan bahasa sehari-hari dan screenshot asli.

  • Five built-in lessons: checking stock, stock in, stock out, matching physical stock, and moreLima materi bawaan: cek stok, barang masuk, barang keluar, mencocokkan stok fisik, dan lainnya
  • Search across lessonsPencarian di semua materi
  • Red boxes on screenshots point at the right buttonKotak merah di screenshot menunjuk tombol yang tepat
  • WordPress posts can be added as extra lessons through shortcode optionsPostingan WordPress bisa ditambahkan sebagai materi lewat opsi shortcode
Lesson listDaftar materi
Lesson 1Materi 1
Step by stepLangkah demi langkah
"Try it yourself""Coba sendiri"

← swipe →← geser →

06

Profile & rolesProfil & role

Not everyone should be able to delete things.Tidak semua orang boleh menghapus data.

  • Own "Karyawan" role and capabilities, separate from WordPress editorsRole "Karyawan" dan capability sendiri, terpisah dari editor WordPress
  • The delete menu is for administrators unless the owner allows staffMenu hapus hanya untuk administrator kecuali pemilik mengizinkan staf
  • Profile shows the role and each person's transaction countProfil menampilkan role dan jumlah transaksi tiap orang
Profile and roleProfil dan role

← swipe →← geser →

07

wp-admin toolsAlat wp-admin

The owner gets a dashboard and maintenance tools inside wp-admin.Pemilik mendapat dashboard dan alat perawatan di dalam wp-admin.

  • Dashboard: totals, today's in and out, low stock, recent activityDashboard: total, masuk dan keluar hari ini, stok menipis, aktivitas terbaru
  • System status checks the table, the role and the capabilityStatus sistem mengecek tabel, role dan capability
  • Repair tools: rebuild database, roles and pages, flush rewritesAlat perbaikan: bangun ulang database, role dan halaman, flush rewrite
  • Danger zone needs the word HAPUS typed before it runsZona berbahaya butuh kata HAPUS diketik sebelum dijalankan
  • Uninstalling keeps the data unless the owner opts inUninstall tetap menyimpan data kecuali pemilik memilih menghapus
  • A built-in guide maps every page to its shortcodePanduan bawaan memetakan setiap halaman ke shortcode-nya
Inventory dashboard in wp-adminDashboard inventaris di wp-admin
Plugin info, statistics and system status (server path hidden)Info plugin, statistik dan status sistem (path server disembunyikan)
Repair tools, danger zone and data settingsAlat perbaikan, zona berbahaya dan pengaturan data
The built-in page and shortcode guidePanduan halaman dan shortcode bawaan

Engineering notesCatatan teknis

The hard
parts.Bagian yang
sulit.

Decisions that shaped the code, described without sharing any of it.Keputusan yang membentuk kodenya, dijelaskan tanpa membagikan kodenya.

01 · concurrency

Two staff, one last unitDua staf, satu unit terakhir

Stock is read with SELECT … FOR UPDATE inside a database transaction, so two people taking the last units at the same moment can never push stock below zero or overwrite each other.Stok dibaca dengan SELECT … FOR UPDATE di dalam transaksi database, jadi dua orang yang mengambil unit terakhir di saat bersamaan tidak akan membuat stok minus atau saling menimpa.

02 · architecture

WordPress as the backendWordPress sebagai backend

Users, sessions and the database come from WordPress. Items and brands are custom post types, categories a taxonomy, and transactions get their own table so history stays fast as it grows.User, sesi dan database berasal dari WordPress. Barang dan merek adalah custom post type, kategori taksonomi, dan transaksi punya tabel sendiri supaya riwayat tetap cepat saat datanya bertambah.

03 · guard rails

Hard to break by accidentSulit rusak tanpa sengaja

Every form checks a nonce and the user's capability. Quantities and prices have limits, destructive tools need a typed confirmation, and uninstalling keeps the data unless the owner opts in.Setiap form mengecek nonce dan capability user. Jumlah dan harga punya batas, alat yang menghapus butuh konfirmasi yang diketik, dan uninstall tetap menyimpan data kecuali pemilik memilih menghapus.

04 · people

Built for staff, not developersDibuat untuk staf, bukan developer

Phone-only screens, big buttons, plain Indonesian and a tutorial with real screenshots inside the app, so new staff learn it without a training session.Layar khusus HP, tombol besar, bahasa sehari-hari dan tutorial dengan screenshot asli di dalam aplikasi, jadi staf baru bisa belajar tanpa sesi pelatihan.