BAB IV PERANCANGAN INTERFACE 4.1
Interface Perancangan antarmuka mendeskripsikan rencana tampilan dari setiap Form yang akan digunakan pada tampilan sistem informasi sebenarnya. Perancangan antarmuka pada sistem informasi yang akan dibuat dapat dilihat pada gambar berikut. Struktur menu dari sistem informasi pengolahan data pemesanan dan produksi furniture adalah sebagai berikut.
Login
Halaman Utama
Logout
Konsumen
Pesanan Bahan
Pesanan Proyek
Karyawan
Konsumen Proyek
Pesan
Pesan
Master Karyawan
Master Bahan Baku
Pembayaran
Tahapan Pembayaran Proyek
Aktifasi dan ubah Password
PO Bahan Baku
Supplier
Bahan Baku
Penerimaan Bahan Baku
Tugas Karyawan Proyek
Permintaan Bahan Baku
Penggunaan Bahan Baku
Gambar 4.1 Struktur Menu
67
Hasil Produksi
Laporan
Logout
68
4.2
Perancangan Input 1.
Perancangan Login
Username Enter Text
Password Enter Text Login
Gambar 4.2 Perancangan Tampilan Login Gambar 4.2 menjunjukan halaman Login dan merupakan tampilan awal untuk dapat mengakses sistem informasi pengolahan data pemesanan dan produksi furniture. 2.
Perancangan Halaman Utama
Logo
PT. ALGYP SARANA GRAHA
Navigasi Menu Halaman Utama Karyawan
Halaman Utama VISI Menjadi perusahaan desain dan kontraktor yang terpercaya dan berkualitas Memberikan kemajuan pembangunan nasional Menjadi Perusahaan yang berbasis desain industri Kreatif. MISI Memberikan pelayanan pada klien dengan memberikan desain yang optimal, solutif, dankreatif Berinovasi dan pengembangan tiada henti dalam peningkatan kualitas desain.
+ + + + + + + + +
Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Gambar 4.3 Perancangan Halaman Utama
69
Halaman utama ini akan muncul ketika user yang mempunyai hak akses telah melakukan Login dan valid. Halaman ini berisi tentang perusahaan serta visi dan misinya. 3.
Perancangan Halaman Karyawan
Gambar 4.4 Perancangan Halaman Karyawan Halaman Karyawan ini akan tampil apabila user memilih Master Karyawan.Halaman ini untuk registrasi karyawan ataupun mencari dan melihat datamkaryawan.
70
4.
Perancangan Halaman Aktivasi dan Ubah Password a. Aktivasi Akun
PT. ALGYP SARANA GRAHA
Logo
Tabel Aktivasi dan Ubah Akun
Navigasi Menu Search
Enter Text
Halaman Utama
+ -
Text Karyawan Master Karyawan Aktivasi dan Ubah Password
Master Karyawan Detail Aktivasi
Ubah Password
Karyawan ID
Enter Text
Nama Karyawan
Enter Text
Kategori Karyawan
Pilih
Status Akun
Enter Text
Aktivasi
Reset
+ + + + + + + +
Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Gambar 4.5 Perancangan Halaman Aktivasi dan Ubah Password Halaman Aktivasi dan ubah Password ini akan tampil apabila user memilih Aktivasi dan ubah Password. Halaman ini adalah untuk mengaktifkan akun karyawan agar dapat mengakses sistem. Di halaman ini tedapat tab untuk ubah password.
71
b. Ubah Password
PT. ALGYP SARANA GRAHA
Logo
Tabel Aktivasi dan Ubah Akun
Navigasi Menu Search
Enter Text
Halaman Utama
+ -
Text Karyawan Master Karyawan Aktivasi dan Ubah Password
Master Karyawan Detail Aktivasi
Ubah Password
Karyawan ID
Enter Text
Nama Karyawan
Enter Text
Password Baru
Enter Text
Konfirmasi Password
Enter Text
Aktivasi
Reset
+ + + + + + + +
Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Gambar 4.6 Perancangan Halaman Aktivasi dan Ubah Password Halaman ini adalah untuk mengubah password user yang mempunyai hak akses. Halaman ini hanya bisa diakses oleh Administrator.
72
5.
Perancangan Halaman Konsumen
PT. ALGYP SARANA GRAHA
Logo
Tabel Master Konsumen
Navigasi Menu Search
Enter Text
Halaman Utama
+ + -
Text Karyawan Konsumen Konsumen Proyek
Konsumen Detail Nama Depan
Enter Text
Nama Belakang
Enter Text
Tempat, Tanggal Lahir
Enter Text
Jenis Kelamin
Laki-laki
/ / Perempuan
Enter Text Enter Text
Enter Text
Enter Text
Registrasi
Reset
+ + + + + + +
Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Gambar 4.7 Perancangan Halaman Konsumen Halaman ini akan tampil apabila memilih Konsumen dari Navigasi Menu Konsumen. Halaman ini adalah untuk menginputkan data konsumen serta mencari ataupun melihat data konsumen.
73
6.
Perancangan Halaman Pesanan a. Pesanan
Tabel Pesanan
Navigasi Menu Search
Enter Text
Halaman Utama
+ + + -
Tabel Detail Pesanan Buat Pesanan Baru
Cetak Bukti
+ + + + + +
Permintaan Barang Detail Pilih Jenis Pesanan Enter Text Klik Untuk Gambar Enter Text Keterangan Pesanan Rencana Penggunaan Bahan Baku dan Perhitungan Harga Klik Detail Penggunaan
Total Bahan Baku Penyusutan Kayu Upah Tenaga Produksi
Enter Text
Biaya Lain - lain
Enter Text
Total Harga
Enter Text
Text Karyawan Konsumen Pesanan Konsumen Pesanan Pembayaran Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Enter Text Enter Text
Ubah
Reset
Gambar 4.8 Perancangan Halaman Pesanan Halaman ini akan tampil apabila user memilih Pesanan dari Navigasi Menu Pesanan. Halaman ini adalah untuk menginputkan data pesanan, melihat, mencari ataupun mencetak bukti pemesanan. Dihalaman ini terdapat link untuk membuat pesanan konsumen baru.
74
b. Buat Pesanan
PT. ALGYP SARANA GRAHA
Logo
Tabel Pesanan
Search
Enter Text
Navigasi Menu Halaman Utama
Ubah
+ + + -
Hapus
Pesan Barang Jenis Pesanan
Pilih
Jumlah
Enter Text
Spesifikasi Pesanan Upload Gambar Deskripsi
+ + + + + +
Browser Enter Text
Rencana Penggunaan Bahan Baku dan Perhitungan Harga
Total Bahan Baku Penyusutan Kayu Upah Tenaga Produksi
Otomatis
Biaya Lain - lain
Enter Text
Total Harga
Otomatis
Tambah
Enter Text Enter Text
Text Karyawan Konsumen Pesanan Konsumen Pesanan Pembayaran Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Reset
Konsumen
Enter Text
Total Pembayaran
Pilih
Tanggal Selesai
Enter Text
Simpan
Gambar 4.9 Perancangan Halaman Buat Pesanan Baru Halaman ini adalah untuk menginputkan data pesanan serta penentuan harga dan rencana bahan baku yang akan dipakai.
75
7.
Perancangan Halaman Pembayaran
PT. ALGYP SARANA GRAHA
Logo
Pembayaran Konsumen
Navigasi Menu
Cari Berdasarkan No Pesanan
Search
Enter Text
Enter Text
Search
Halaman Utama
+ + + -
Cetak
Pembayaran Detail No Pesanan Total Pembayaran Sisa Pembayaran Pembayaran Simpan
Reset
+ + + + + +
Text Karyawan Konsumen Pesanan Konsumen Pesanan Pembayaran Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Gambar 4.10 Perancangan Halaman Pembayaran Tampilan halaman pembayaran ini akan tampil apabila user memilih Pembayaran
pada Navigasi Menu Pesanan. Halaman ini adalah untuk
menginputkan data pembayaran, serta mencetak bukti pembayarannya.
76
8.
Perancangan Halaman Konsumen Proyek
PT. ALGYP SARANA GRAHA
Logo
Tabel Master Konsumen Proyek
Navigasi Menu Search
Enter Text
Halaman Utama
+ + -
Text Karyawan Konsumen Konsumen Proyek
Konsumen Proyek Detail Nama Proyek
Enter Text
Alamat Proyek
Enter Text
No Telepon
Enter Text
Enter Text
No Fax Lama Pekerjaan
Enter Text
Enter Text
Enter Text Registrasi
Reset
+ + + + + + +
Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Gambar 4.11 Perancangan Halaman Konsumen Proyek Halaman ini akan tampil apabila memilih Konsumen Proyek dari Navigasi Menu Konsumen. Halaman ini adalah untuk menginputkan data konsumen proyek serta mencari ataupun melihat data konsumen proyek.
77
9.
Perancangan Halaman Pesanan Proyek a. Pesanan Proyek
PT. ALGYP SARANA GRAHA
Logo
Tabel Pesanan Proyek
Navigasi Menu Search
Enter Text
+ + + + -
Tabel Detail Proyek Buat Pesanan Baru
Cetak Bukti
Permintaan Barang Detail Pilih Jenis Pesanan
+ + + + +
Enter Text
Jumlah
Klik Untuk Gambar
Gambar
Enter Text Keterangan Pesanan Rencana Penggunaan Bahan Baku dan Perhitungan Harga Klik Detail Penggunaan
Total Bahan Baku Penyusutan Kayu Upah Tenaga Produksi
Enter Text
Biaya Lain - lain
Enter Text
Total Harga
Enter Text
Halaman Utama Text Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Pesanan Tahap Pembayaraan Proyek Pembagian Tugas Karyawan Supplier Bahan Baku Hasil Produksi Laporan Logout
Enter Text Enter Text
Ubah
Reset
Gambar 4.12 Perancangan Halaman Pesanan Proyek Halaman ini akan tampil apabila user memilih Pesanan dari Navigasi Menu Pesanan Proyek. Halaman ini adalah untuk menginputkan data pesanan proyek, melihat, mencari ataupun mencetak bukti pemesanan proyek. Dihalaman ini terdapat link untuk membuat pesanan proyek baru.
78
b. Buat Pesanan Proyek
PT. ALGYP SARANA GRAHA
Logo
Navigasi Menu Tabel Pesanan
Ubah
Search
Enter Text
+ + + + -
Hapus
Pesan Barang Jenis Pesanan
Pilih
Jumlah
Enter Text
Spesifikasi Pesanan Upload Gambar Deskripsi
+ + + + +
Browser Enter Text
Rencana Penggunaan Bahan Baku dan Perhitungan Harga
Total Bahan Baku Penyusutan Kayu Upah Tenaga Produksi
Enter Text
Biaya Lain - lain
Enter Text
Total Harga
Otomatis
Halaman Utama
Enter Text
Text Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Pesanan Tahap Pembayaraan Proyek Pembagian Tugas Karyawan Supplier Bahan Baku Hasil Produksi Laporan Logout
Enter Text Tambah Reset
Konsumen
Enter Text
Total Pembayaran
Pilih
Tanggal Selesai
Enter Text
Simpan
Gambar 4.13 Perancangan Halaman Buat Pesanan Proyek Baru Halaman ini adalah untuk menginputkan data pesanan proyek serta penentuan harga dan rencana bahan baku yang akan dipakai.
79
10.
Perancangan Halaman Pembagian Tugas Karyawan Proyek
PT. ALGYP SARANA GRAHA
Logo
Navigasi Menu Tabel Pembagian Tugas
Enter Text
Tabel Karyawan
Ubah
Enter Text
Hapus
Search
Search
Pembagian Tugas Karyawan No Pesanan
Enter Text Pilih
Sisa Pembayaran
Enter Text
Pemberi Tugas
Enter Text
Tanggal Mulai
Enter Text
Tanggal Selesai
Enter Text
Tambah
+ + + + + + + + +
Cetak
Karyawan
Halaman Utama Text Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Pesanan Tahap Pembayaraan Proyek Pembagian Tugas Karyawan Supplier Bahan Baku Hasil Produksi Laporan Logout
Reset
Gambar 4.14 Perancangan Halaman Pembagian Tugas Karyawan Proyek Halaman ini akan tampil apabila user memilih Tugas Karyawan Proyek pada Navigasi menu Pesanan Proyek. Halaman ini adalah untuk menginput data karyawan produksi yang bertugas dalam suatu proyek.
80
11.
Perancangan Halaman Tahapan Pembayaran Proyek
PT. ALGYP SARANA GRAHA
Logo
Navigasi Menu Halaman Utama
Pembayaran Proyek Cari Berdasarkan No Pesanan
Search
Enter Text
Enter Text
+ + + + -
Search
+ + + + +
Pembayaran Detail No Pesanan Total Pembayaran
Text Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Pesanan Pembagian Tugas Karyawan Tahap Pembayaraan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Sisa Pembayaran Pembayaran Simpan
Reset
Gambar 4.15 Perancangan Halaman Tahapan Pembayaran Proyek Tampilan halaman tahapan pembayaran proyek ini akan tampil apabila user memilih Tahapan Pembayaran Proyek pada Navigasi Menu Pesanan Proyek. Halaman ini adalah untuk menginputkan data pembayaran, serta mencetak bukti pembayarannya.
81
12.
Perancangan Halaman Supplier
PT. ALGYP SARANA GRAHA
Logo
Tabel Master Supplier
Navigasi Menu Search
Enter Text
Ubah
Supplier Detail Nama Supplier Alamat Supplier
Enter Text
No Telepon No Fax
Enter Text
Enter Text
Enter Text
Enter Text
Enter Text
Registrasi
Reset
Halaman Utama
+ + + + + + + + + +
Text Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan Logout
Gambar 4.16 Perancangan Halaman Supplier Halaman ini bisa diakses apabila user memilih supplier pada navigasi menu. Halaman ini menginput data supplier, mencari, melihat dan mengubah data supplier.
82
13.
Logo
Perancangan Halaman Bahan Baku
PT. ALGYP SARANA GRAHA
Navigasi Menu Tabel Pesanan Proyek
Tabel Penggunaan Bahan Baku
Enter Text
Enter Text
Search
Search
Halaman Utama
+ + + + -
Cetak
+ + + + +
Text Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Pesanan Tahap Pembayaraan Proyek Pembagian Tugas Karyawan Supplier Bahan Baku Hasil Produksi Laporan Logout
Gambar 4.17 Perancangan Halaman Bahan Baku Halaman ini akan tampil apabila user memilih Master Bahan Baku dari Navigasi menu Bahan Baku. Halamn ini adalah untuk mengelola data bahan baku.
83
14.
Perancangan Halaman Permintaan Bahan Baku
PT. ALGYP SARANA GRAHA
Logo
Navigasi Menu Tabel Permintaan Bahan Baku
Tabel Detil Permintaan Bahan Baku
Cetak Bukti
Enter Text
Enter Text
Search
Search
Buat Permintaan Bahan Baku
Halaman Utama
+ + + + + + -
Enter Text
No. Permintaan
Enter Text
No. Pesanan
Enter Text
Tanggal Permintaan
Enter Text
Status Permintaan
Pilih Ubah
Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Master Bahan Baku PO Bahan Baku Penerimaan Bahan Baku Permintaan Bahan Baku Penggunaan Bahan Baku
Permintaan Barang Detail Di Ajukan Oleh
Text
Reset
+ + +
Hasil Produksi Laporan Logout
Gambar 4.18 Perancangan Halaman Permintaan Bahan Baku Halaman ini akan tampil apabila user memilih Permintaan Bahan Baku dari Navigasi Menu Bahan Baku. Halaman ini adalah untu mengelola permintaan bahan baku dari Bagian Produksi ke Bagian Gudang.
84
15.
Perancangan Halaman PO Untuk Bahan Baku
PT. ALGYP SARANA GRAHA
Logo
Navigasi Menu Tabel PO Barang
Enter Text
Tabel Detail PO
Cetak Bukti
Enter Text
Buat PO Baru
Search
Search
Halaman Utama
+ + + + + + -
Text Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Master Bahan Baku PO Bahan Baku Penerimaan Bahan Baku Permintaan Bahan Baku Penggunaan Bahan Baku
Permintaan Barang Detail Di Ajukan Oleh
Enter Text
No. Permintaan
Enter Text
Supplier
Enter Text
Tanggal Permintaan
Enter Text
Status Permintaan
Pilih Ubah
Reset
+ + +
Hasil Produksi Laporan Logout
Gambar 4.19 Perancangan Halaman PO untuk Bahan Baku Halaman ini akan tampil apabila user memilih PO untuk Bahan Baku dari Navigasi Menu Bahan Baku. Halaman ini adalah untuk mengelola PO atau pemesanan bahan baku oleh Bagian Administrasi/Keuangan ke produksi.
85
16.
Perancangan Halaman Penerimaan Bahan Baku
PT. ALGYP SARANA GRAHA
Logo
Navigasi Menu Tabel Penerimaan Bahan Baku
Search
Enter Text
Halaman Utama
+ + + + + + -
Tabel PO Barang Detail
Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Master Bahan Baku PO Bahan Baku Penerimaan Bahan Baku Permintaan Bahan Baku Penggunaan Bahan Baku
Form Penerimaan Bahan Baku Di Ajukan Oleh No. PO No. Faktur Supplier
Text
Enter Text
Tanggal Pengiriman Simpan
+ + +
Hasil Produksi Laporan Logout
Gambar 4.20 Perancangan Halaman Penerimaan Bahan Baku Halaman ini akan tampil apabila user memilih Penerimaan Bahan Baku dari Navigasi Menu Bahan Baku. Halaman ini adalah untuk Penerimaan Bahan Baku dari produksi ke Bagian Gudang.
86
17.
Perancangan Halaman Penggunaan Bahan Baku
PT. ALGYP SARANA GRAHA
Logo
Navigasi Menu Penggunaan Bahan Baku
Halaman Utama
+ + + + + + + +
Cetak
Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan
Logout
Gambar 4.21 Perancangan Halaman Penggunaan Bahan Baku Halaman ini akan tampil apabila user memilih Penggunaan Bahan Baku dari Navigasi Menu Bahan Baku. Halaman ini adalah untuk menampilkan Penggunaan Bahan Baku yang digunakan oleh pesanan konsumen dan pesanan proyek . 18.
Perancangan Halaman Hasil Produksi
Logo
PT. ALGYP SARANA GRAHA
Navigasi Menu Hasil Produksi Cari Berdasarkan No Pesanan
Tabel Hasil Produksi
Enter Text
Search
Halaman Utama
+ + + + + + + +
Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan
Logout
Gambar 4.22 Perancangan Halaman Hasil Produksi
87
Halaman ini akan tampil apabila user memilih hasil Produksi dari Navigasi Menu. Halaman ini adalah untuk menampilkan ataupun mengupdate data barang hasil produksi. 19.
Perancangan Halaman Laporan
PT. ALGYP SARANA GRAHA
Logo
Navigasi Menu Halaman Utama
Laporan Pemesanan Jenis Laporan
Pilih Salah Satu
Cari Berdasarkan
Pilih Salah Satu
Tanggal Mulai Tanggal Selesai Cetak
+ + + + + + + +
Karyawan Konsumen Pesanan Konsumen Pesanan Proyek Supplier Bahan Baku Hasil Produksi Laporan
Logout
Gambar 4.23 Perancangan Halaman Laporan Halaman ini akan tampil apabila user memilih Laporan dari Navigasi Menu. Halaman ini adalah untuk menampilkan ataupun mencetak laporan pemesanan, laporan pemesanan proyek dan laporan hasil produksi.
