45
3.5.2 Rancangan Tampilan Website Database
Untuk membuat sebuah website yang dinamis, menarik serta mudah dioperasikan oleh user pemakai, maka tampilan halaman website harus dirancang
terlebih dahulu. Selain syarat diatas, harus dipertimbangkan juga content isi website yang akan ditampilkan atau disajikan, hal ini berhubungan dengan kecepatan akses
untuk membuka web tersebut. Halaman website yang akan dibuat terdiri dari dua bagian utama yaitu :
Halaman untuk User Halaman untuk Admin
3.5.1.1 Rancangan Halaman untuk User
Pada perancangan web ini, user untuk web database NCS Niaga dibagi menjadi dua bagian, masing-masing bagian mempunyai hak yang berbeda dalam
melakukan akses ke web database. Hak-hak tersebut meliputi Add menambah data, Edit
melakukan perubahan data, View melihat data dan Delete menghapus data. Penjelasan mengenai user tersebut adalah sebagai berikut:
User Network Service NS Personal NS yang berlaku sebagai user NS mempunyai hak Add menambah
data, View melihat data dan melakukan Edit merubah data.
User Network Operator NO Personel NO sebagai user, mempunyai hak antara lain Add menambah data,
View melihat data dan melakukan Edit merubah data ditambah hak Delete
menghapus data.
1. Rancangan Tampilan User Login Untuk masuk ke sistem web database, setiap user membutuhkan username dan
password. Username dan password ini ditentukan oleh Admin, sistem web database tidak menyediakan fasilitas pendaftaran. Hal ini karena web database ini
46
bersifat tertutup untuk kalangan NCS Niaga saja. Gambar 3.6 berikut adalah rancangan halaman login.
PHP User Login
Username Password
Login
Gambar 3.6 Rancangan Tampilan User Login
2. Rancangan Halaman Utama Halaman utama ini merupakan halaman yang akan muncul pertama kali pada saat
user melakukan akses ke database. Pada halaman ini terdiri dari beberapa menu yang dapat diakses untuk menuju halaman yang lain yaitu halaman home, data
cabang, data cabang, news, profiles, struktur organisasi, sitemap dan logout. Untuk lebih jelas mengenai tampilan halaman utama, lihat gambar 3.7 dibawah
ini.
47
Tampilan Data Gambar
Header Page
Main Menu
Home Cabang
Atm News
Profiles Struktur
Sitemap Logout
Search
Atm Search
Gambar 3.7 Rancangan Halaman Utama
3. Rancangan Halaman Data Cabang Halaman ini menampilkan data cabang secara umum, meliputi nama cabang, kota,
nama kontak person dan nomor telepon. Masing-masing dari data umum cabang tersebut terdapat link yang bisa diakses untuk melihat data cabang secara detail.
Data detail ini meliputi data umum cabang, data media akses, data circuit dan data router. Untuk User NS dan NO disediakan juga link untuk input data cabang
apabila terdapat lokasi cabang yang baru. Gambar 3.8 dibawah ini menggambarkan tampilan halaman data cabang.
48
Gambar
Header Page
Data Cabang
Action detail
detail detail
detail detail
Nama Cabang Status
PIC Telepon
No Page 1 2 3
1
10
Main Menu
Home Cabang
Atm News
Profiles Struktur
Sitemap Logout
Search
Atm Search
Tambah Data Cabang
Gambar 3.8 Rancangan Tampilan Halaman Data Cabang
4. Rancangan Tampilan Halaman Data Atm Halaman ini menampilkan data Atm secara umum, meliputi nama lokasi Atm, ID
Atm, ID Modem, nama kontak person dan nomor telepon. Masing-masing dari data umum Atm tersebut memiliki link yang bisa diakses untuk melihat data Atm
secara detail. Data detail ini meliputi data umum Atm dan data koneksi jaringan Atm. Untuk User NS dan NO disediakan juga link untuk melakukan input data
Atm apabila terdapat lokasi Atm yang baru. Gambar 3.9 dibawah ini menggambarkan tampilan halaman data Atm.
49
Gambar
Header Page
Data Atm
ID Atm Lokasi
PIC Telepon
No Page 1 2 3
1
10
Main Menu
Home Cabang
Atm News
Profiles Struktur
Sitemap Logout
Search
Atm Search
Tambah Data Atm
Action detail
detail detail
detail detail
Gambar 3.9 Rancangan Tampilan Halaman Data Atm
5. Rancangan Tampilan Halaman Data News Rancangan pada halaman ini berupa berita, pemberitahuan atau memo yang dapat
dibaca oleh semua user web database. Berita ini dapat berupa informasi tentang gangguan yang sedang terjadi dan informasi-informasi lainnya. Semua user web
database dapat melakukan input berita yang biasanya disebut posting. Rancangan halaman news terdiri dari isi berita, tanggal kirim dan pengirim berita tersebut
dalam hal ini nama user web database. Gambar 3.10 dibawah memperlihatkan rancangan tampilan halaman news.
50
Gambar
Header Page
News NCS Niaga
No Isi Berita
Tanggal Pengirim
1
3
Main Menu
Home Cabang
Atm News
Profiles Struktur
Sitemap Logout
Search
Atm Search
Tambah Data News
Gambar 3.10 Rancangan Tampilan Halaman News
6. Rancangan Tampilan Halaman Data Profile Setiap user pada web database ini telah didaftarkan sebelumnya oleh bagian
Admin, web database ini tidak menyediakan fasilitas pendaftaran user, hal ini karena web bersifat tertutup hanya untuk kalangan NCS Niaga baik di Bintaro
maupun di Cikarang. Masing-masing user mendapat username dan password dari bagian Admin. Selanjutnya apabila akan melakukan perubahan profile, user dapat
mengakses ke halaman ini. Rancangan halaman ini terdiri dari nama, alamat, kota, telepon, e-mail, password dan username. Lihat gambar 3.11 untuk rancangan
tampilan profiles.
51
Gambar
Header Page
Edit Profiles
Nama Kota
Alamat
E-mail Telephone
Username Password
Update
Main Menu
Home Cabang
Atm News
Profiles Struktur
Sitemap Logout
Search
Atm Search
Gambar 3.11 Rancangan Tampilan Halaman Profiles
7. Rancangan Tampilan Halaman Struktur Organisasi Halaman Struktur berisi gambar diagram struktur organisasi di Network Control
System NCS Niaga yang berlaku untuk kedua NCS Niaga baik di Bintaro maupun di Cikarang. Gambar 3.12 memperlihatkan rancangan halaman struktur
organisasi.
52
Gambar
Header Page
Struktur Organisasi
Gambar Struktur Organisasi NCS Niaga
Main Menu
Home Cabang
Atm News
Profiles Struktur
Sitemap Logout
Search
Atm Search
Gambar 3.12 Rancangan Tampilan Halaman Struktur Organisasi NCS Niaga
8. Rancangan Tampilan Halaman Sitemap Halaman sitemap berisi peta situs dari web database ini, hal ini digunakan untuk
memberi panduan kepada user, sehingga memudahkan user untuk menemukan halaman yang dicari. Gambar 3.13 dibawah ini memperlihatkan rancangan
halaman sitemap.
53
Gambar
Header Page
Sitemap Website Database
Home Cabang
Tambah Data Cabang Edit Data Cabang
Atm Tambah Data Atm
Edit Data Atm News
Profiles Edit Profile
Struktur Sitemap
Logout
User Kota
Router Modem
System Search
Main Menu
Home Cabang
Atm News
Profiles Struktur
Sitemap Logout
Search
Atm Search
Gambar 3.13 Rancangan Tampilan Halaman Sitemap
3.5.1.2 Rancangan Tampilan Halaman untuk Admin
Kategori