Pada sub bab ini akan dibahas tentang tahap-tahap perancangan desain tampilan (user interface) yang meliputi halaman-halaman aplikasi dan form-form menu input dan ubah data. Aplikasi ini dibuat dengan bahasa pemrograman PHP, dimana aplikasi dibuat dalam web based interface. Sehingga tampilan dan menu aplikasi layaknya sebuah website, dimana terdapat link-link untuk menghubungkan halaman-halaman layanan aplikasi. Untuk menjalankan aplikasi ini diperlukan sebuah browser untuk menjalankannya.
Halaman – halaman pada aplikasi ini dikategorikan kedalam beberapa bagian, menurut fungsi dan kegunaannya :
1. Halaman utama
Halaman ini muncul ketika aplikasi dijalankan, halaman utama atau halaman awal. Untuk aplikasi ini, halaman yang dijadikan default halaman awal adalah halaman menjalankan service Gammu. Dalam aplikasi berbasis web biasanya halaman awal disebut index atau main.
2. Halaman data form
Halaman data form ini adalah halaman-halaman yang berkenaan dengan data dan form. Memiliki fungsi untuk tambah, ubah, dan hapus data. Yang dikategorikan data dalam aplikasi ini adalah data klien dan data pajak. Halaman data form ini terdiri dari halaman menu data.
3. Halaman pengolahan pesan
Halaman pengolahan pesan adalah halaman yang digunakan untuk mengolah pesan, baik pesan masuk maupun pesan keluar. Halaman pengolahan pesan ini terdiri dari halaman kotak masuk, halaman kirim pesan dan halaman kotak terkirim.
4. Halaman Konfigurasi Sistem
Halaman konfigurasi sistem adalah halaman yang berkenaan dengan pengaturan sistem. Halaman konfigurasi sistem ini terdiri dari halaman pengaturan, halaman jalankan aplikasi, dan halaman menghentikan layanan aplikasi.
3.5.1 Desain Bagan Halaman Aplikasi
Pada perancangan tampilan halaman aplikasi ini, disini akan di desain sebuah menu horizontal yang akan dimuat dalam setiap halaman. Sehingga semua halaman terkesan memiliki menu yang sama, sehingga aplikasi berjalan sederhana tanpa harus membuat menu tersendiri pada setiap halamannya.
Gambar 3.11 Bagan Halaman Aplikasi
Pada gambar link map aplikasi, halaman yang dimuat dalam menu utama adalah 8 (delapan) halaman utama dengan 3 buah halaman yang memiliki sub menu. Seperti dijelaskan sebelumnya, halaman-halaman ini dibagi dalam 4 jenis menurut fungsi dan kegunaannya.
3.5.2 Desain Tampilan Halaman Awal
Halaman awal dalam aplikasi ini di secara default ketika dibuka menampilkan halaman untuk menjalankan service Gammu. Tujuannya adalah ketika aplikasi pertama kali dijalankan, user atau admin tidak lupa untuk menghidupkan layanan
service Gammu. Hal ini sangatlah penting agar layanan pengiriman dan penerimaan berjalan saat aplikasi sudah digunakan, dan admin atau user tidak lupa untuk mengaktifkan layanan Gammu.
Gambar 3.12 Desain halaman awal
3.5.3 Desain Tampilan Halaman Data
Halaman data form memuat hal-hal yang berkenaan dengan data form seperti form tambah data, ubah data, dan hapus data. Didalam halaman ini terdiri dari beberapa sub menu seperti menu buku telepon, menu id klien dan menu data pajak
Gambar 3.13 Desain Halaman Menu data
- Buku telepon : Input, edit, dan delete data kontak klien - ID Klien : Input, edit , delete ID Klien, Input Data Pajak - Data Pajak : Edit dan Delete Data Pajak
Dalam halaman menu data ini, terdapat 3 (tiga) buah sub menu yang masing-masing akan memuat halaman ID klien, Buku telepon dan Pajak. Tiap halaman akan memuat form-form pengolahan data seperti tambah, ubah, dah hapus data.
3.5.3.1 Halaman Buku Telepon
Pada halaman buku telepon ini akan digunakan untuk menampilkan data kontak klien. Fungsinya sama seperti buku telepon dalam sebuah ponsel, menyimpan data kontak seperti nama, nomor telepon, perusahaan dan lain sebagainya. Dalam halaman ini juga disediakan tombol untuk mengubah dan menghapus data, dan disediakan satu buah link menu untuk memuat halaman
input data pada bagian atas tabel.
Gambar 3.14 Desain Halaman Buku Telepon
Pada halaman buku akan dibuat 5 (lima) buah kolom dalam tabel untuk memuat data field nama, nomor handphone, perusahaan, grup dan satu buah kolom digunakan untuk memuat tombol untuk melakukan ubah dan hapus data. Di bagian atas tabel dibuat satu buah link menu untuk menginput data kontak baru. Menu ini akan menampilkan halaman untuk menginput data kontak. Seperti pada gambar dibawah ini.
Gambar 3.15 Desain input data kontak
Pada form input diatas terdiri dari empat textbox yang digunakan untuk memasukan data nama, no hp, perusahaan, dan grup. Setelah form diisi dengan lengkap maka klik tombol simpan untuk menyimpan data kedalam tabel phonebook. Data yang sudah dimasukan ini nantinya akan ditampilkan pada halaman buku telepon.
Gambar 3.16 Desain edit data kontak
Pada form edit, text box pada form sudah diisi dengan data yang sebelumnya. User tinggal mengubah data yang akan diubah, lalu kembali meng-klik tombol simpan untuk menyimpan pengubahan data tersebut. Sedangkan untuk hapus data, admin atau user tinggal meng-klik tombol Delete makanya aplikasi akan melakukan perintah untuk menghapus data yang dipilih.
3.5.3.2 Halaman ID Klien
Halaman ID Klien ini digunakan untuk menampilkan data ID Klien sama halnya seperti halaman buku telepon. Pada halaman ini disediakan menu untuk
meng-input data ID baru, serta tombol ubah dan hapus data. Namun, ditambahkan sedikit yaitu tombol input data pajak. Hal ini dimaksudkan adalah untuk memudahkan dalam proses menginput data pajak. Dalam proses menginput pajak kedua hal ini yaitu nama perusahaan dan id klien harus diketahui saat melakukan input data pajak. Untuk itu pada halaman ID Klien disediakan tombol untuk menginput data pajak, agar admin tidak sulit untuk mengisi nama perusahaan dan id klien.
Gambar 3.17 Desain halaman ID Klien
Pada desain halaman ID Klien, field yang ditampilkan adalah ID Klien dan Nama perusahaan, terdapar tiga buah tombol untuk mengubah dan menghapus data, serta tombol input pajak untuk melakukan input data pajak. Untuk tombol klik input data pajak, ketika diklik nantinya akan memuat form input data pajak. Sedangkan tombol ubah dan hapus digunakan untuk mengubah dan menghapus data yang dipilih. Satu link menu yang berada diatas tabel, adalah menu untuk memuat form input data ID baru.
Dalam desain form input ID diatas, data yang dimasukan adalah dua buah data yaitu Nama perusahaan dan ID klien. Klik tombol simpan untuk menyimpan data kedalam tabel ID Klien. Sedangkan untuk form ubah data, desainnya hampir sama dengan form input data ini, namun bedanya hanya textbox pada form ubah data sudah diisi dengan data sebelumnya.
3.5.3.3 Halaman Data Pajak
Halaman data pajak digunakan untuk menampilkan data-data pajak seperti jumlah bayar pajak, status bayar dan status lapor pajak. Data-data dalam tabel pajak ini yang nantinya akan diakses oleh klien via pesan. Proses input, ubah, dan hapus data hampir sama dengan halaman data lainnya. Namun, seperti yang dijelaskan sebelumnya untuk melakukan input data pajak baru dilakukan dari halaman ID Klien sedangkan ubah dan hapus data dapat dilakukan dari halaman pajak ini.
Gambar 3.19 Desain Halaman Pajak
Pada tampilan halaman data pajak sebanyak 12 kolom, satu kolom dipakai untuk memuat tombol edit dan delete data. Halaman ini sama seperti halaman data lainnya hanya bedanya tidak ada link menu untuk memuat halaman input data baru. Halaman data input pajak berada pada halama ID Klien, seperti yang sudah dijelaskan sebelumnya. Untuk desain form input pajaknya adalah seperti gambar dibawah ini.
Gambar 3.20 Desain Form Input pajak
Dalam desain form input data pajak ini, desainnya sama dengan form input data yang lain. Namun jumlah data yang dimasukan pada form ini cukup banyak. Untuk form edit data pajak pun sama seperti form input ini.
3.5.4 Desain Tampilan Halaman Pesan
Pada halaman pengolahan pesan ini terdiri dari halaman kotak masuk (inbox), halaman kotak terkirim (outbox), halaman autoreply pesan dan halaman pengiriman pesan yang terdiri dari dua jenis yaitu halaman kirim pesan biasa dan halaman kirim pesan broadcast.
3.5.4.1 Halaman Kotak Masuk (Inbox)
Pada halaman kotak masuk ini, akan menampilkan pesan yang masuk kedalam sms center ini. Dimana setiap pesan yang masuk akan disimpan dalam kartu telepon (sim card) lalu service Gammu yang akan mengambil dan menyimpannya dalam tabel inbox pada database.
Pada desain halaman kotak masuk diatas, selain isi pesan dan nomor telepon juga ditampilkan nama orang dan perusahaan untuk mengenali identitas pengirim serta tanggal dan jam terima untuk mengetahui informasi kapan pesan tersebut diterima. Dalam halaman kotak masuk ini disediakan satu buat tombol untuk melakukan hapus data. Walau sudah disediakan auto delete pada halaman ini.
3.5.4.2 Halaman Pengiriman Pesan
Halaman pengiriman pesan ini digunakan oleh admin atau user untuk mengirim pesan dari aplikasi kepada klien. Pengiriman ini terbagi dalam dua jenis yaitu pengiriman biasa yang dilakukan satu persatu, ataupun pengiriman dengan layanan broadcast sms yaitu pengiriman kebanyak nomor dalam satu waktu.
Gambar 3.22 Desain kotak kirim pesan
Pada kotak kirim pesan ini, seperti halnya pengiriman pesan dari ponsel dengan memasukan nomor telepon dan mengetik isi pesan yang akan dikirim. Pada kotak kirim diatas terdapat keterangan ‘maksimum panjang sms adalah 160
karakter’, hal ini dimaksudkan bahwa batas pengiriman sms dalam satu kali
pengiriman adalah sebanyak 160 karakter. Jika lebih, biasanya sms akan diterima secara terpotong-potong. Untuk kasus ini, biasanya dalam Gammu akan masuk kedalam bagian multipart, yaitu pengiriman pesan yang terbagi-bagi dalam beberapa bagian karena panjang pesan melebihi 160 karakter. Namun dalam aplikasi ini, kasus semacam ini tidak ditemui sehingga tidak perlu dilakukan pembahasan terperinci untuk hal ini.
Pada kotak kirim ini, ketika isi pesan sudah selesai diketik, maka klik tombol kirim pesan untuk mengirim pesan. Pada bagian dibawah halaman ini terdapat link menu untuk memuat halaman sms broadcast. Seperti gambar dibawah ini.
Gambar 3.23 Desain Halaman Broadcast
Pada tampilan halaman broadcast diatas, tidak perlu lagi memasukan nomor telepon karena pesan akan dikirim secara per grup. Pada bagian bawah halaman ada select box yang memuat wilayah-wilayah dari klien seperti jakbar, jaksel, jakpus, jaktim, dan jakut. Pilih wilayah yang akan dikirimkan sms, maka aplikasi akan mengirimkan pesan ke semua klien yang berada pada wilayah yang dipilih. Layanan ini pun memungkinkan pengiriman ke semua klien atau wilayah.
3.5.4.3 Halaman kotak terkirim (Outbox)
Halaman kotak terkirim digunakan untuk menampilkan data pesan yang terkirim dalam tabel sentitems. Tampilan halaman ini hampir sama dengan tampilan halaman kotak masuk, namun pada halaman outbox ditambahkan satu kolom untuk menampilkan data status pengiriman pesan. Status ini memuat informasi apakah pesan sudah terkirim atau gagal terkirim. Hal ini penting untuk melihat status pengiriman sehingga dapat mengetahui mana pesan yang gagal dan perlu dilakukan pengiriman ulang.
Gambar 3.24 Halaman outbox pesan
Pada desain tampilan halaman pesan terkirim ini. Kolom-kolomnya sama seperti pada halaman inbox. Namun, ada satu kolom yang ditambahkan dalam halaman ini, yaitu kolom status. Dalam ponsel, setiap pesan memiliki laporan pengiriman. Setiap pesan yang sudah terkirim akan mendapat laporan terkirim, dan jika gagal akan mendapatkan laporan pengiriman gagal. Dalam Gammu, pesan yang terkirim biasanya akan memiliki status ‘SendingOKNoReport’ dan jika pesan gagal memiliki status ‘SendingError’.
3.5.4.4 Halaman Autoreply Pesan
Halaman autoreply ini digunakan untuk menjawab pesan permintaan yang dikirim klien ke sistem aplikasi ini. Untuk menjalankan halaman ini, admin harus menjalankan halaman ini, dan untuk menghentikannya, admin harus menutup halaman ini. Karena layanan ini berjalan dengan memakai jeda waktu, dalam selang beberapa waktu layanan ini akan bekerja.
3.5.5 Desain Tampilan Halaman Konfigurasi
Halaman konfigurasi ini dipakai ketika aplikasi pertama kali dijalankan. Tujuannya dibuat halaman ini adalah memudahkan melakukan konfigurasi. Proses konfigurasi ini nanti akan dijelaskan lebih rinci pada sub bab pembuatan sistem. Ada lima langkah konfigurasi yang harus dilakukan. Konfigurasi ini lebih kepada konfigurasi service Gammu yang dipakai dalam aplikasi ini.
Gambar 3.26 Desain Halaman Konfigurasi
Pada halaman kofigurasi diatas, terdapat lima link menu yang akan memuat halaman konfigurasi berikut dengan form-form isian. Tujuan dibuat halaman konfigurasi ini agar proses ini lebih mudah untuk dilakukan daripada harus melakukan konfigurasi secara manual. Dengan halaman ini, proses konfigurasi dapat dilakukan dengan menggunakan form isian, dan user tinggal mengisi form-form yang disediakan untuk melakukan konfigurasi. Setelah konfigurasi selesai dilakukan maka langkah selanjutnya masuk ke halaman jalankan aplikasi untuk mengaktifkan service Gammu.
Link menu pada halaman konfigurasi ini akan memuat halaman-halaman konfigurasi dari kelima langkah yang ada pada halaman tersebut. Kelima langkah konfigurasi ini akan dijelaskan pada sub bab selanjutnya di pembuatan sistem aplikasi.