Web Development

Dibawah ini adalah contoh pembuatan aplikasi berbasis web yang saya kerjakan beberapa waktu lalu.

Contoh 1

login

 

home

Ini adalah halaman home page.

Aplikasi ini online, artinya bisa di akses dari manapun berada selama ada internet. Tak perlu install2 apapun, selama bisa buka facebook berarti bisa juga buka aplikasi saya.

Aplikasi ini mampu menampung semua data spareparts di perusahaan tersebut, yang jumlahnya ribuan. Mampu melayani permintaan pembelian dan transfer antar pabrik.

master

purchase_add

Seluruh halaman yang berpotensi membingungkan dilengkapi dengan live-help system yang bisa dinyalakan. Ia akan membantu user menampilkan petunjuk pengisian sesuai dengan item yang harus diisi (berdasarkan mouse hover).

Pilihan barang (yang akan dibeli, atau di transfer) dibuat semudah mungkin.

master_choice

Aplikasi web ini juga dilengkapi dengan multi-tier approval system. Jadi kalau mau beli barang, harus persetujuan si anu, persetujuan si itu, baru bisa dibeli.

transfer_review

Jika ada permintaan pembelian / transfer yang baru, sistem secara otomatis akan mengirimkan email ke orang-orang yang bersangkutan, mirip seperti twitter yang mengirim email kalau ada yang mention kita.

Semua stok di update secara otomatis berdasarkan events, seperti pembelian otomatis menambah stok, pemakaian otomatis mengurangi stok.

Tentunya tidak semua orang bisa mengakses semua halaman, maka pada aplikasi ini juga diterapkan grid-based permission system, dimana setiap user mendapat level akses horizontal (divisi) dan vertikal (0-9) berdasarkan posisi di divisi itu, dan setiap user ingin mengakses halaman paka kedua level akses akan dievaluasi oleh sistem untuk menentukan boleh/tidaknya ia mengakses suatu halaman. Jika tidak boleh, maka akan muncul tampilan sebagai berikut

access_denied

Dalam mendesain aplikasi ini, saya telah mengikuti arsitektur kode modern dengan standard MVC (Model View Controller), yang artinya pemisahan atas struktur dasar, logika berpikir, dan tampilan depan. Tujuannya untuk mengisolasi error sehingga satu error tidak akan menghancurkan keseluruhan sistem.

Arsitektur yang rapi juga memastikan aplikasi ini sangat scalable, dapat dikembangkan tanpa takut merusak apa yang sudah ada, dan memudahkan tugas maintenance serta error detection.

Ia juga telah dilengkapi dengan automated application testing and error detection untuk minimalisasi error, sehingga user memiliki 100% keyakinan core task aplikasi akan tetap berjalan tanpa kesalahan operasi (seperti stok yang tidak berkurang setelah diambil, dsb).

Saya juga memasukkan unsur fully-automated deployment yang tujuannya untuk meminimalisasi down-time jika terjadi server crash. Server baru dapat digunakan dalam waktu yang jauh lebih cepat dari pada menggunakan metode manual.

Ia telah memiliki load balancer untuk memastikan kerja mesin seimbang dan optimal, sehingga user tak perlu menunggu lama untuk membuka halaman-halaman yang ada.

Jika terdapat error, saya memasukkan fitur auto-notification sehingga user tak perlu repot-repot member tahu saya error tersebut, saya akan langsung mengetahuinya lewat email yang dikirim otomatis.

Fitur automated-backup and cloud-backup juga diterapkan untuk menjaga data user dari bencana yang tidak dinginkan.

Contoh 2

Aplikasi ini adalah sebuah sales order sistem. Tugasnya adalah menerima order dari pelanggan, mencatat status order (apakah sudah dibayar? apakah sudah diantar?), membuat jadwal pengantaran, laporan penjualan berdasarkan kriteria sesuai keinginan beserta grafiknya dan mencetak bon.

login

Di atas adalah login page.

orderadd

di atas adalah halam untuk menambah order

laporanskublurred

 

di atas adalah contoh laporan lengkap beserta grafiknya.

 

Untuk contoh-contoh portfolio pembuatan public website (untuk pengenalan perusahaan, pengenalan produk), harap menghubungi saya langsung melalui contact page disini.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s