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.
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
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
Open Stock, then Sprayer, CBA and Electric Sprayer Type 3 (0 units)Buka Stok, lalu Sprayer, CBA dan Electric Sprayer Type 3 (0 unit)
Tap Stock in, enter 20 and a noteKetuk Barang Masuk, isi 20 dan keterangan
Save: the confirmation shows the new stockSimpan: konfirmasi menampilkan stok baru
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 customHome: today at a glanceBeranda: ringkasan hari iniSide 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 kategori02Brands in a categoryMerek dalam kategori03Items of a brandBarang dari satu merek04Item 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 ditampilkan0260 of 35 is refused60 dari 35 ditolak03A valid entryIsian yang valid04Saved, 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 riwayatFiltered: stock inFilter: barang masukFiltered: stock outFilter: barang keluarPDF 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 materiLesson 1Materi 1Step 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-adminPlugin 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 dataThe 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.