Biz Pro Shipping Manager Sistem Manajemen Produk, Pengiriman, dan Label Otomatis dengan HTML, CSS, dan JavaScript

Mengelola produk, stok, dan pengiriman adalah tantangan utama dalam bisnis online. Banyak pelaku usaha masih menggunakan spreadsheet atau pencatatan manual yang tidak efisien. Dengan teknologi web modern, kita dapat membuat Shipping Manager berbasis browser menggunakan HTML, CSS, dan JavaScript tanpa server atau database eksternal.

Biz Pro Shipping Manager adalah contoh aplikasi web lengkap yang memungkinkan Anda:

• Mengelola katalog produk

• Mengatur stok

• Membuat label pengiriman otomatis

• Melacak omzet

• Membuat poster promosi produk otomatis

• Menyimpan data secara lokal menggunakan localStorage

Artikel ini akan membahas secara lengkap cara kerja sistem, teknologi yang digunakan, dan bagaimana kode ini membangun aplikasi bisnis langsung di browser.

Baca juga artikel lainnya :

• Panduan AEO (Answer Engine Optimization)
  
• Membangun Komunitas Online
  
• Membuat Formulir Kontak Otomatis Gmail
  
• Voice dan Beyond - UI/UX Conversational di 2025
  
• Perbandingan Website dan Media Sosial untuk Bisnis
  

Apa Itu Biz Pro Shipping Manager?

Biz Pro Shipping Manager adalah aplikasi berbasis web yang berfungsi sebagai:

• Inventory manager

• Shipping label generator

• Product catalog manager

• Sales tracker

• Promotion poster generator

Semua data disimpan menggunakan localStorage sehingga tidak memerlukan database atau backend server aplikasi bisa digunakan tanpa login dan tidak akan bisa tertukar atau data terlihat oleh orang lain karna local yang di maksud adalah device atau hp maupun komputer.

Dari sisi pembuatan juga bisa membuat aplikasi menjadi sebagai berikut:

• Cepat

• Ringan

• Offline-ready

• Mudah digunakan

Teknologi yang Digunakan

Aplikasi ini dibangun menggunakan teknologi web inti:

1. HTML sebagai Struktur Aplikasi

HTML digunakan untuk membuat:

• Form input produk

• Tampilan katalog

• Form data pengiriman

• Area cetak label

• Poster generator

Kode struktur input produk:

<input id="p-nama" placeholder="Nama Produk">
<input id="p-harga" type="number">
<input id="p-stok" type="number">

2. CSS untuk Tampilan Modern

Beberapa kode CSS yang digunakan untuk membuat tampilan mudah di pahami user sebagai berikut:

• Grid layout

• Flexbox

• Responsive design

• Modern color palette

• Card-based interface

Kode styling card:

.card {
    background: white;
    border-radius: 20px;
    padding: 20px;
}

Ini membuat UI terlihat seperti aplikasi SaaS modern, anda juga bisa menemukan artikel tentang Saas di sini Strategi Aplikasi SaaS dengan Node.js.

3. JavaScript sebagai Engine Utama

JavaScript mengontrol seluruh logika aplikasi meliputi implementasi sebagai berikut:

• Menyimpan produk

• Mengelola stok

• Menghasilkan label

• Menghitung omzet

• Menghasilkan poster promosi

Kode database lokal:

let db = JSON.parse(localStorage.getItem("fashion_ship_db")) || {
    products: [],
    log: "",
    omzet: 0,
    sold: 0
};

Menggunakan localStorage sebagai Database

localStorage digunakan sebagai database browser:

localStorage.setItem("fashion_ship_db", JSON.stringify(db));

Keuntungan yang dimiliki sebagai berikut:

• Tidak perlu server

• Data tersimpan permanen

• Cepat

• Offline support

Ini adalah solusi ideal untuk aplikasi kecil dan menengah.

Sistem Manajemen Produk

Produk disimpan sebagai object:

{
    id: Date.now(),
    nama,
    harga,
    stok,
    img
}

Produk ditampilkan menggunakan fungsi render:

function render() {
    list.innerHTML = db.products.map(p => `...`).join("");
}

Ini membuat tampilan katalog dinamis.

Sistem Upload dan Penyimpanan Gambar

Gambar produk dibaca menggunakan FileReader:

const reader = new FileReader();
reader.onload = (e) => addData(e.target.result);
reader.readAsDataURL(file);

Gambar disimpan sebagai Base64.

Keuntungan nya meliputi:

• Tidak perlu server upload

• Gambar tersimpan langsung di browser

Sistem Edit dan Update Produk

Mode edit diaktifkan menggunakan implementasi pengambilan ID:

editId = id;

Produk diperbarui:

db.products[idx].nama = nama;

Ini memungkinkan untuk melakukan interaksi:

• Edit harga

• Edit stok

• Edit nama produk

Sistem Pengiriman dan Label Generator

Saat produk dikirim:

selectedProduct.stok--;
db.omzet += selectedProduct.harga;
db.sold++;

Label dibuat otomatis:

window.print();

Label yang berisi:

• Nama penerima

• Telepon

• Alamat

• Produk

• Tanggal

Ini membuat proses shipping lebih profesional.

Sistem Tracking Omzet dan Penjualan

Omzet dihitung otomatis:

db.omzet += selectedProduct.harga;

Total penjualan:

db.sold++;

Ditampilkan di dashboard yang meliputi:

• Total omzet

• Total produk terjual

Sistem Log Transaksi

Log disimpan:

db.log = `[tanggal] produk -> pembeli`

Ditampilkan di log panel.

Ini memungkinkan untuk tracking riwayat.

Sistem Poster Promosi Otomatis dengan html2canvas

Fitur paling powerful adalah poster generator menggunakan library html2canvas.

Library:

<script src="html2canvas.min.js"></script>

Poster dirender menjadi gambar:

const canvas = await html2canvas(element);

Gambar sudah di upload bisa di-download kembali:

link.download = "Promo.png";

Ini memungkinkan membuat poster promosi otomatis.

Sistem Copy Text Promosi Otomatis

Text promosi disalin dari kode ini:

navigator.clipboard.writeText(text);

User dapat langsung paste text yang berhasil di buat menggunakan kode tersebut ke platform media untuk di bagikan media tersebut seperti:

• Instagram

• Facebook

• WhatsApp

• Marketplace

Sistem Cetak Label Otomatis

Label dicetak menggunakan:

window.print();

Dengan CSS khusus:

@media print {
    #printArea { display: block }
}

Ini membuat label lebih profesional.

Sistem Responsive Design

Menggunakan CSS Grid:

grid-template-columns: 1fr 400px;

Aplikasi bisa bekerja di beberapa layar seperti:

• Desktop

• Tablet

• Mobile

Konsep Programming yang Digunakan

Aplikasi ini menggunakan konsep penting sebagai berikut:

Local Storage Database
Dynamic Rendering
Event-driven programming
DOM manipulation
FileReader API
Canvas rendering
Print API

Ini adalah konsep fundamental web apps modern yang di terapkan pada BIZpro.

Keunggulan Sistem Ini

Keunggulan utama:

Tidak perlu backend
Tidak perlu database server
Offline ready
Fast performance
Modern UI
Auto label generator
Auto promotion generator

Ini sangat cocok untuk bisnis online kecil dan menengah.

Potensi Pengembangan Lebih Lanjut

Sistem ini dapat dikembangkan menjadi:

POS system
Marketplace manager
Warehouse manager
Full ecommerce dashboard

Yang bisa menerapkan fitur tambahan seperti:

Cloud sync
Barcode scanner
Export Excel
Multi-user system
Online database

Use Case Nyata

Sistem dari aplikasi ini yaitu BIZpro cocok untuk:

Online shop
Dropshipper
Reseller
Fashion store
UMKM
Seller marketplace

Kesimpulan

Biz Pro Shipping Manager adalah aplikasi web untuk mengelola produk, pengiriman, dan promosi menggunakan HTML, CSS, dan JavaScript.

Dengan memanfaatkan localStorage, html2canvas, dan DOM manipulation, aplikasi ini mampu menggantikan software inventory mahal dengan solusi ringan berbasis browser.

Aplikasi ini membuktikan bahwa teknologi web modern dapat digunakan untuk membangun sistem bisnis profesional yang ringan tanpa database system login dan berfungsi untuk digunakan.