Membuat Rancangan Antar Muka Sistem .1 Perancangan Struktur Menu
123
4.3.2 Membuat Rancangan Antar Muka Sistem 4.3.2.1 Perancangan Struktur Menu
1. Struktur Menu Halaman Inventory
Login
Logout Laporan
File Home
Form Inventory Laporan Bahan Dasar
Tambah
Hapus Ubah
Detail Seacrh
Print Ok
Cancel Close
Gambar 4.15 Strukrtur Menu Bagian Inventory
124
2. Struktur Menu Pemolaan
Login
Logout Laporan
File Home
Form Pemolaan Laporan Pola
Proses Pola
Hapus Ubah
Search
Seacrh Simpan
Batal
Ok Cancel
Print Cari
Gambar 4.16 Strukrtur Menu Bagian Pemolaan
125
9. Struktur Menu Halaman Penjahitan
Login
Logout Laporan
File Home
Form Jahitan Laporan Data Jahit
Proses Jahit
Hapus Ubah
Seacrh
Seacrh Simpan
Batal
Ok Cancel
Print
Gambar 4.17 Strukrtur Menu Bagian Penjahitan
126
10. Struktur Menu Halaman Laundry
Login
Logout Laporan
File Home
Form Laundry Laporan Laundry
Proses Laundry
Hapus Ubah
Seacrh
Seacrh Simpan
Batal
Ok Cancel
Print
Gambar 4.18 Strukrtur Menu Bagian Laundry
127
11. Struktur Menu Halaman Finishing
Login
Logout Laporan
File Home
Form Finishing Laporan Finishing
Proses Finishing
Hapus Ubah
Seacrh
Seacrh Simpan
Batal
Ok Cancel
Print
Gambar 4.19 Strukrtur Menu Bagian Finishing
128
12. Struktur Menu Halaman Manager
Login
Logout Laporan
File Home
Laporan Bahan Dasar Seacrh
Print Laporan Pola
Seacrh Print
Laporan Data Jahit Laporan Produksi
Laporan Finishing Laporan Laundry
Seacrh Print
Seacrh Print
Seacrh Print
Seacrh Print
Gambar 4.20 Strukrtur Menu Manager 4.3.2.2 STD State Transition Diagram
Diagram ini menggambarkan transisi atau perubahan statement yang merupakan keadaaan aplikasi yang dipicu oleh adanya aksi yang dilakukan oleh
user. Dengan adanya STD ini, rangcangan diharapkan akan dapat terperinci karena fungsi-fungsi setiap obyek yang diperlukan telah dideskripsikan.
129
1. STD Bagian Inventory
Form Login Open “http:
Tampil Layar Form Login
Inventory Klik “Login”
Tampil Layar Inventory
Logout Laporan Bahan
Dasar Form Data
Inventory Home
Klik “Menu Home” Tampil Layar
Menu Utama
Klik “Submenu Form Inventory” Tampil Layar
Form Inventory
Klik “Submenu Laporan Bahan Dasar”
Tampil Layar Laporan Bahan Dasar
Klik “Logout” Tampil Layar
Login Form Data
Inventory Klik “Tambah”
Data Disimpan Kembali ke Layar
Form Data Inventory
Detail
Ubah
Hapus Klik “Detail”
Tampil Layar Tgl Keluar Bahan
Jml Bahan
Klik “Ubah” Tampil Layar
Ubah Data Inventory
Klik “Hapus” Tampil Konfirmasi
Print Klik “Print”
Tampil Layar Untuk Print Data
Gambar 4.21 STD Bagian Inventory
130
2. STD Bagian Pemolaan
Form Login Open “http:
Tampil Layar Form Login
Pemolaan Klik “Login”
Tampil Layar Pemolaan
Logout Laporan Pemolaan
Form Data Pola Home
Klik “Menu Home” Tampil Layar
Menu Utama Klik “Submenu Form Pemolaan”
Tampil Layar Form Data Pola
Klik “Submenu Laporan Pola ” Tampil Layar
Laporan Pemolaan
Klik “Logout” Tampil Layar
Login Form Proses Pola
Klik “Proses Pola” Tampil Layar
Proses Pola
Form Data Laporan Pemolaan
Ubah Hapus
Klik “Ubah” Tampil Layar
Ubah Data Laporan Pemolaan
Klik “Hapus” Tampil Konfirmasi
Simpan
Batal Klik “Batal”
Tampil Layar Proses Pola
Klik “Simpan” Data Pola Disimpan
Form Data Pemolaan
Klik “Search” Tampil Layar
Data Pemolaan
Klik “Search” Tampil Layar
Laporan Pemolaan
Print Klik “Print”
Tampil Layar Untuk Print Data
Gambar 4.22 STD Bagian Pemolaan
131
3. STD Bagian Jahit
Form Login Open “http:
Tampil Layar Form Login
Form Data Jahitan Klik “Login”
Tampil Layar Form Data Jahitan
Logout Laporan Data
Jahitan Form Data Jahitan
Home Klik “Menu Home”
Tampil Layar Menu Utama
Klik “Submenu Form Jahitan” Tampil Layar
Form Data Jahitan
Klik “Submenu Laporan Jahitan ” Tampil Layar
LaporanData Jahitan
Klik “Logout” Tampil Layar
Login Form Proses Jahit
Klik “Proses Pola” Tampil Layar
Proses Jahit
Form Laporan Data Jahitan
Ubah Hapus
Klik “Ubah” Tampil Layar
Ubah Laporan Data Jahitan
Klik “Hapus” Tampil Konfirmasi
Simpan
Batal Klik “Batal”
Tampil Layar Proses Jahit
Klik “Simpan” Data Jahit Disimpan
Form Data Jahitan Klik “Search”
Tampil Layar Data Jahitan
Klik “Search” Tampil Layar
Laporan Data Jahitan
Print Klik “Print”
Tampil Layar Untuk Print Data
Gambar 4.23 STD Bagian Jahit
132
4. STD Bagian Laundry
Form Login Open “http:
Tampil Layar Form Login
Laundry Klik “Login”
Tampil Layar Laundry
Logout Laporan Laundry
Form Data Laundry Home
Klik “Menu Home” Tampil Layar
Menu Utama
Klik “Submenu Form Laundry” Tampil Layar
Form Data Laundry
Klik “Submenu Laporan Laundry ”
Tampil Layar Laporan Laundry
Klik “Logout” Tampil Layar
Login Form Proses
Laundry Klik “Proses Laundry”
Tampil Layar Proses Laundry
Form Data Laundry
Ubah
Hapus Klik “Ubah”
Tampil Layar Ubah Data Laundry
Klik “Hapus” Tampil Konfirmasi
Simpan
Batal Klik “Batal”
Tampil Layar Proses Laundry
Klik “Simpan” Data Laundry
Disimpan
Form Data Laundry Klik “Search”
Tampil Layar Data Laundry
Klik “Search” Tampil Layar
Laporan Laundry
Hapus Klik “Print”
Tampil Layar Untuk Print Data
Gambar 4.24 STD Bagian Laundry
133
5. STD Bagian Finishing
Form Login Open “http:
Tampil Layar Form Login
Finishing Klik “Login”
Tampil Layar Finishing
Logout Laporan Finishing
Form Data Finishing
Home Klik “Menu Home”
Tampil Layar Menu Utama
Klik “Submenu Form Finishing” Tampil Layar
Form Data Finishing
Klik “Submenu Laporan Finishing ”
Tampil Layar Laporan Finishing
Klik “Logout” Tampil Layar
Login Form Proses
Finishing Klik “Proses Laundry”
Tampil Layar Proses Finishing
Form Data Finishing
Ubah Hapus
Klik “Ubah” Tampil Layar
Ubah Data Finishing Klik “Hapus”
Tampil Konfirmasi Simpan
Batal Klik “Batal”
Tampil Layar Proses Finishing
Klik “Simpan” Data Finishing
Disimpan
Form Data Finishing Klik “Search”
Tampil Layar Data Finishing
Klik “Search” Tampil Layar
Laporan Finishing
Hapus Klik “Print”
Tampil Layar Untuk Print Data
Gambar 4.25 STD Bagian Finishing
134
6. STD Manager
Form Login Open “http:
Tampil Layar Form Login
Manager Klik “Login”
Tampil Layar Manager
Logout Laporan Pola
Home Klik “Menu Home”
Tampil Layar Menu Utama
Klik “Submenu Laporan Pemolaan ”
Tampil Layar Laporan Pola
Klik “Logout” Tampil Layar
Login Form Data
Pemolaan Klik “Search”
Tampil Layar Laporan Pola
Print Klik “Print”
Tampil Layar Untuk Print Data
Laporan Bahan Dasar
Klik “Submenu Laporan Bahan Dasar”
Tampil Layar Laporan Bahan Dasar
Form Data Bahan Dasar
Klik “Search” Tampil Layar
Laporan Bahan Dasar
Print Klik “Print”
Tampil Layar Untuk Print Data
Laporan Jahit Klik “Submenu Laporan Jahit ”
Tampil Layar Laporan Jahitan
Form Data Jahitan Klik “Search”
Tampil Layar Laporan jahit
Print Klik “Print”
Tampil Layar Untuk Print Data
Laporan Laundry Klik “Submenu Laporan
Laundry ” Tampil Layar
Laporan Laundry Form Data Laundry
Klik “Search” Tampil Layar
Laporan Laundry
Print Klik “Print”
Tampil Layar Untuk Print Data
Laporan Finishing Klik “Submenu Laporan
Finishing ” Tampil Layar
Laporan Finishing Form Data
Finishing Klik “Search”
Tampil Layar Laporan Finishing
Print Klik “Print”
Tampil Layar Untuk Print Data
Laporan Produksi Klik “Submenu Laporan
Produksi ” Tampil Layar
Laporan Laporan Produksi Form Data
Laporan Produksi Klik “Search”
Tampil Layar Laporan Produksi
Print Klik “Print”
Tampil Layar Untuk Print Data
Gambar 4.26 STD Manager
135
4.3.2.3Perancangan Antar Muka
Rancangan antarmuka dipergunakan untuk mengimplementasikan aturan- aturan dan analisis yang telah dibentuk sedemikian rupa.
1. Layout Form Login
Gambar Username
: Level
: Password
: Pilihan
Login Reset
Gambar 4.27 Layout Form Login
2. Layout Menu Utama
Home Laporan
File Logout
Logo CV. Anugrah
Logo CV. Anugrah
SELAMAT DATANG SISTEM INFORMASI MANUFAKTUR
CV. ANUGRAH
Powered by systemprogrammer.net
Gambar 4.28 Layout Form Menu Utama
136
3. Layout Form Inventory
Home Laporan
File Logout
Logo CV. Anugrah
FORM DATA INVENTORY
Powered by systemprogrammer.net Nama Pemasok
:
Jumlah Masuk :
Hargam :
Jenis Bahan :
Tanggal Masuk :
Pilihan tglblnthn
Tambah
Gambar 4.29 Layout Form Inventory
137
4. Layout Form Laporan Bahan Dasar
Keyword Pilih Bulan
Search Tahun
Pilihan
Tabel Data Bahan Dasar
No Total harga
Jumlah Masuk Harga
Jenis Bahan Tgl Masuk
Pemasok Id Bahan
Jumlah keluar Sisa
Aksi User
BANER
Gambar 4.30 Layout Form Laporan Bahan Dasar
138
5. Layout Form Pemolaan
Home Laporan
File Logout
Logo CV. Anugrah
FORM DATA POLA
Powered by systemprogrammer.net Keyword
Pilih Bulan Search
Tahun Pilihan
No Aksi
Jenis Bahan Bahan Tersedia
Tanggal Masuk Id Bahan
Proses Pola
Proses Pola Proses Pola
Proses Pola
Tabel Pemolaan
Gambar 4.31 Layout Form Proses Pemolaan
139
6. Layout Form Input Pemolaan
Jumlah Pola :
Jumlah Bahan :
Jenis Pola :
Tanggal Keluar :
Tanggal Tahun
Bulan Tanggal
Tahun Bulan
Simpan Batal
Panjang Bahan :
Home Laporan
File Logout
Logo CV. Anugrah
FORM DATA POLA
Bahan Tersedia :
Id Bahan :
Jenis Bahan :
Tanggal Masuk :
Tanggal Tahun
Bulan
Ukuran Pola :
cari
Gambar 4.32 Layout Form Input Pemolaan
140
7. Layout Form Laporan Pemolaan
Keyword Pilih Bulan
Search Tahun
Pilihan
Tabel Data Pemolaan
No Jumlah Bahan
Tgl Keluar Pola
Tgl Masuk Pola
Jenis Bahan Id Bahan
Id Pola Jumlah Pola
Jenis Pola Aksi
User
BANER
Gambar 4.33 Layout Form Laporan Pola
141
8. Layout Form Jahitan
Home Laporan
File Logout
Logo CV. Anugrah
FORM DATA JAHITAN
Powered by systemprogrammer.net Keyword
Pilih Bulan Search
Tahun Pilihan
No Aksi
Jenis Pola Jumlah Pola
Tanggal Masuk Id Pola
Proses Jahitan
Proses Jahitan Proses Jahitan
Proses Jahitan
Tabel Penjahitan
Gambar 4.34 Layout Form Jahitan
9. Layout Form Input Penjahitan
close or Esc Key
Harga :
Jumlah Jahitan :
Tanggal keluar :
Tanggal Tahun
Bulan
Simpan Batal
Gambar 4.35 Layout Form Input Penjahitan
142
10. Layout Form Laporan Jahitan
Keyword Pilih Bulan
Search Tahun
Pilihan
Tabel Data Penjahitan
No Jumlah Hilang
Jumlah Jahitan Jumlah Pola
Tgl Keluar Tgl Terima
Id Jahitan Harga
Biaya Jahitan Aksi
BANER
Gambar 4.36 Layout Form Laporan Jahitan
143
11. Layout Form Laundry
Home Laporan
File Logout
Logo CV. Anugrah
FORM DATA LAUNDRY
Powered by systemprogrammer.net Keyword
Pilih Bulan Search
Tahun Pilihan
No Aksi
Jumlah Jahitan Id Jahit
Proses Laundry
Tabel Data Laundry
Tgl Terima
Proses Laundry Proses Laundry
Gambar 4.37 Layout Form Laundry
144
12. Layout Form Input Laundry
close or Esc Key
Harga :
Jumlah Cucian :
Jenis Cucian :
Tanggal keluar :
Tanggal Tahun
Bulan
Simpan Batal
Gambar 4.38 Layout Form Input Laundry
13. Layout Form Laporan Laundry
Keyword Pilih Bulan
Search Tahun
Pilihan
Tabel Data Laundry
No Jumlah Hilang
Jumlah Laundry
Jumlah Jahitan
Tgl Keluar Tgl Terima
Id Laundry Jenis Laundry
Harga Aksi
Biaya Laundry
BANER
Gambar 4.39 Layout Form Laporan Laundry
145
14. Layout Form Finishing
Home Laporan
File Logout
Logo CV. Anugrah
FORM DATA FINISHING
Powered by systemprogrammer.net Keyword
Pilih Bulan Search
Tahun Pilihan
No Aksi
Jenis Laundry Jumlah Laundry
Id Laundry Proses
Finishing
Tabel Data Finishing
Tgl Terima
Proses Finishing
Proses Finishing
Gambar 4.40 Layout Form Finishing
15. Layout Form Input Finishing
Gambar 4.41 Layout Form Input Finishing
close or Esc Key
Jumlah Celana Jadi :
Simpan Batal
146
16. Layout Form Laporan Finishing
Keyword Pilih Bulan
Search Tahun
Pilihan
Tabel Data Finishing
No Jumlah Celana Rusak
Jumlah Celana Jadi Jumlah Laundry
Tgl Terima Id Finishing
Aksi User
BANER
Gambar 4.42 Layout Form Laporan Finishing
147
17. Layout Form Laporan Produksi
Keyword Pilih Bulan
Search Tahun
Pilihan
Tabel Data Produksi
No Celana Rusak
Jumlah Bahan Tanggal Jadi
Jenis Bahan Pemasok
Jenis Cucian Jenis Pola
Celana Jadi
BANER
Gambar 4.43 Layout Form Laporan Produksi