Portal Komunitas Pecinta Tanaman Hias Berbasisweb Menggunakan Php Dan Mysql Chapter III V
BAB 3
PERANCANGAN SISTEM
3.1. Perancangan Sistem
Menurut Jogiyanto (2005) Analisis sistem dapat didefinisikan sebagai penguraian
dari suatu informasi yang utuh kedalam bagian-bagian komponen dengan maksud
untuk mengidentifikasi dan mengevaluasi permasalah-permasalahan, kesempatankesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang
diharapkan sehingga dapat diusulkan perbaikan-perbaikannya.
3.2. Tujuan Perancangan Sistem
Tujuan utama dari perancangan sistem adalah memberikan gambaran perancangan
sistem yang akan dibangun atau dikembangkan, serta untuk memahami alur
informasi dan proses dalam sistem. Perancangan sistem yang akan dibangun atau
dikembangkan adalah perancangan aplikasi portal komunitas yang berbasis web.
Berikut telah ditentukan tahapan-tahapan atau langkah-langkah yang akan
dilakukan dalam perancangan sistem:
a. Rancangan Proses
b. Rancangan Basis Data (Database)
23
Universitas Sumatera Utara
c. Rancangan Antar Muka (User Interface)
3.2.1 Rancangan Proses
Perancangan proses pada pembangunan atau pengembangan sistem ini meliputi
diagram konteks, data flow diagram (dfd) dan flowchart.
1. Diagram Konteks
Diagram konteks adalah diagram yang terdiri dari suatu proses dan
mengembangkan ruang lingkup suatu sistem. Diagram konteks ini merupakan
level tertinggi dari suatu DFD yang menggambarkan seluruh input ke sistem atau
output dari sistem. Diagram akan memberi gambaran tentang ke seluruh sistem.
Sistem dibatasi oleh boundary (dapat digambarkan dengan garis putus). Dalam
diagram konteks hanya ada satu proses. Tidak boleh ada store dalam diagram
konteks.
Diagram konteks merupakan gambaran umum sistem yang nantinya akan
kita buat. Secara uraian dapat dikatakan bahwa diagram konteks itu berisi siapa saja
yang memberikan data (inputan) ke sistem, serta kepada siapa data informasi itu
diberikan (melalui sistem). Jadi, dalam diagram ini yang dibutuhkan adalah :
1. Siapa saja pihak yang akan memberikan data ke sistem.
2. Data apa saja yang diberikannya ke sistem.
3. Kepada siapa sistem harus memberikan informasi atau laporan.
4. Apa saja isi atau jenis laporan yang harus diberikan sistem.
24
Universitas Sumatera Utara
Untuk sistem yang akan kita buat, berikut model diagram konteks yang bisa kita
hasilkan :
Gambar 3.1. Diagram Konteks
2. Data Flow Diagram (DFD)
Data Flow Diagram adalah alat perancangan sistem yang berorientasi pada alur
data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran
analisa maupun perancangan sistem yang mudah dikomunikasikan ke pengguna
ataupun ke pembuat program. Berikut adalah data flow diagram yang digunakan
dalam perancangan sistem pada pembangunan portal komunitas pecinta tanaman
hias ini.
25
Universitas Sumatera Utara
Gambar 3.2. Data Flow Diagram Level 0
Gambar 3.3. Data Flow Diagram Level 1
26
Universitas Sumatera Utara
Gambar 3.4. Data Flow Diagram Level 2
3. Flowchart
Flowchart (diagram alir) adalah sebuah diagram yang merepresentasikan sebuah
algoritma atau proses menggunakan beberapa bangun geometri untuk
memperlihatkan langkah-langkah yang dilakukan oleh program dalam
menyelesaiklan masalah. Berikut merupakan flowchart pada perancangan sistem
portal komunitas pecinta tanaman hias berbasis web.
27
Universitas Sumatera Utara
Gambar 3.5. Flowchart Halaman Utama
3.2.2 Rancangan Basis Data (Database)
Menurut Abdul Kadir dalam bukunya yang berjudul “Belajar Database
Menggunakan MYSQL” basis data (database) adalah suatu penyusunan data yang
terstruktur yang disimpan dalam media pengingat (hard disk) yang tujuannya
28
Universitas Sumatera Utara
adalah agar data tersebut dapat diakses dengan mudah dan cepat. Database
merupakan suatu komponen yang penting dalam suatu sistem, karena database
mampu memanipulasi dan menyediakan informasi bagi para pengguna.
Perancangan database pada sistem meliputi pembuatan tabel-tabel database yang
dapat dilihat pada tabel berikut:
Tabel 3.1. Tabel Akses
Nama Istilah
Tipe Data
Ukuran
Keterangan
IDAkses
Int
2
Id Akses
KodeGrup
Char
10
Kode Grup
KodeModul
Char
10
Kode Modul
Tabel 3.2. Tabel Artikel
Nama Istilah
Tipe Data
Ukuran
Keterangan
ArtikelID
bigint
20
Id Artikel
Tanggal
Date
-
Tanggal Artikel
Judul
varchar
50
Judul Artikel
Foto_name
Varchar
100
Foto Artikel
Artikel
Text
-
Deskripsi Artikel
29
Universitas Sumatera Utara
Tabel 3.3. Tabel Grup
Nama Istilah
Tipe Data
Ukuran
Keterangan
NamaGrup
Char
10
Nama Grup
KodeGrup
Varchar
50
Kode Grup
Tabel 3.4. Tabel Grup Module
Nama Istilah
Tipe Data
Ukuran
Keterangan
NamaGrupModul
Char
10
Nama Grup Modul
KodeGrupModul
Varchar
50
Kode Grup Modul
NA
Int
1
Notifikasi Aktif
Tabel 3.5. Tabel Produk
Nama Istilah
Tipe Data
Ukuran
Keterangan
ProdukID
Int
3
Id Produk
Tanggal
Date
-
Tanggal Produk
NamaProduk
Varchar
255
Keterangan
Text
Gambar
Varchar
255
Gambar Produk
UserName
Varchar
255
Username Anggota
Nama produk
Keterangan Produk
30
Universitas Sumatera Utara
Tabel 3.6. Tabel Registrasi
Nama Istilah
Tipe Data
Ukuran
Keterangan
NoRegistrasi
Char
10
Nomor Registrasi
TglRegistrasi
Date
-
Tanggal Registrasi
NoKTP
Varchar
50
Nomor KTP
NamaLengkap
Varchar
50
Nama Lengkap
Alamat
Varchar
50
Alamat
Telepon
Varchar
25
Nomor Telepon
UserName
Varchar
30
Username Anggota
Password
Varchar
30
Password Anggota
Status
Enum
‘Y’,’N’
Status Anggota
Foto
Varchar
255
Foto Anggota
Tabel 3.7. Tabel Tamu
Nama Istilah
Tipe Data
Ukuran
Keterangan
IDTamu
Int
2
Id Tamu
Tanggal
Date
-
Tanggal
NamaTamu
varchar
50
Nama Tamu
Email
Varchar
50
Email
Komentar
Text
-
Komentar Tamu
Status
Enum
‘Y’,’N’
Status Tamu
31
Universitas Sumatera Utara
Tabel 3.8. Tabel User
Nama Istilah
Tipe Data
Ukuran
Keterangan
UserName
Varchar
50
Username User
Password
Varchar
50
Password User
KodeGrup
Char
10
Kode Grup User
3.2.3 Rancangan Antar Muka (User Interface)
Antarmuka (Interface) merupakan bagian dari sistem aplikasi yang digunakan
sebagai alat komunikasi antara sistem dan user . Perancangan antarmuka ini
terdiri dari :
1. Desain Output
Desain output (keluaran) adalah keluaran-keluaran dari aplikasi. Keluaran tersebut
meliputi tampilan-tampilan layar. Berikut tampilan desain output :
Gambar 3.6. Desain Output
32
Universitas Sumatera Utara
2. Desain Input
esain input (masukan) bertujuan untuk menentukan data-data masukan, yang
digunakan untuk mengoperasikan system maupun aplikasi. Data-data keluaran
dapat berupa formulir-formulir atau yang lainnya. Data-data masukan ini
merupakan hasil data yang akan dioperasikan oleh sistem atau aplikasi. Berikut
gambr desain input :
Portal Komunitas Pecinta Tanaman Hias
Gambar
Beranda
Login
Gambar
Registrasi
Gambar
Gambar
Galeri
Artikel
Hubungi Kami
Registrasi online
Galeri
Bukti registrasi
Username:
Password:
No registrasi
REG-7
Tanggal registrasi
16-6-2016
Pohon
Daun
Batang
Biodata
Daftar Anggota
Artikel
No.KTP
Daftar Nama
Anggota
Nama Lengkap
Konten
Alamat
No.KTP
Tel/Hp
Akses Data
List Komentar
Username
Password
Kirim data Ini
Portal Komunitas Pecinta Tanaman Hias
Gambar 3.7. Desain Input Form Registrasi
33
Universitas Sumatera Utara
Gambar 3.8. Desain Input Data Produk oleh Admin
3. Desain Dialog
Definisi umum dialog adalah percakapan antara dua kelompok atau lebih,
sedangkan dialog dalam konteks perencanaan user interface adalah struktur dari
percakapan antara user dan komputer. Dimana dari tahap perencanaan ini kita
menentukan interaksi-interaksi yang terjadi antara user interface dengan komputer.
Berikut gambar-gambar dari desain dialog :
a. Halaman Beranda
Pada Beranda user bisa melihat ada beberapa gambaran dari isi dari beranda
tersebut. Seperti sejarah dari tanaman bonsai yang banyak orang kurang
mengetahuinya. Kemudian di sebelah kanan dan kirinya ada banner yang bisa
diklik dan akan keluar informasi yang sudah disediakan
34
Universitas Sumatera Utara
Gambar 3.9. Halaman Beranda
b. Halaman Galeri
Galeri merupakan penyimpanan gambar yang terbanyak di dalam Perancangan
ini. Jika user tertarik untuk ingin lebih mengetahui isi dari gambar itu si user bisa
mngklik detail untuk melanjutkan membaca.
35
Universitas Sumatera Utara
Gambar 3.10. Halaman Galeri
36
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1. Pengertian Implementasi Sistem
Impelentasi adalah suatu tindakan atau pelaksanaan dari sebuah rencana yang sudah
disusun secara matang dan terperinci. Implementasi biasanya dilakukan setelah
perencanaaan sudah dianggap selesai. Implementasi dalam Kamus Besar Bahasa
Indonesia diartikan sebagai pelaksanaan atau penerapan. Artinya yang dilaksanakan
dan diterapkan adalah kurikulum yang telah dirancang/didesain untuk kemudian
dijalankan sepenuhnya.
4.2. Komponen Utama Aplikasi
Dalam pembuatan Portal Komunitas Pecinta tanaman hias yang telah dirancang
membutuhkan komponen-komponen pendukung sebagai berikut :
a. Perangkat Keras (Hardware)
Hardware merupakan peralatan fisik dari sebuah komputer. Umumnya
terdiri dari tiga jenis perangkat yaitu; perangkat masukan (input device),
perangkat keluaran (output device), serta pengolahan (processor ).
37
Universitas Sumatera Utara
b. Perangkat Lunak (Software)
Software merupakan program yang berisi perintah-perintah untuk
melakukan pengolahan data.
c. Pengguna (Brainware)
Brainware merupakan user (manusia) yang terlibat langsung di dalam
pengoperasian komputer dan yang akan melaksanakan semua kegiatankegiatan yang berhubungan dengan hardware dan software. User (manusia)
yang terlibat langsung dalam sistem komputer dikategorikan dalam
berbagai tingkatan, yaitu:
1. Operator
Operator adalah user (manusia) yang bekerja mengoperasikan
komputer untuk memasukkan data atau menjalankan program yang
sudah ada.
2. Programmer
Programmer adalah user (manusia) yang bertugas membuat program
atau software berdasarkan ketentuan yang sudah ada, meliputi;
a. Menganalisis dan membuat program.
b. Membuat flowchart atau algoritma.
c. Memeriksa dan memperbaiki kesalahan program.
38
Universitas Sumatera Utara
3. Sistem Analis
Sistem analis adalah user (manusia) yang bertugas mempelajari,
menganalisis serta merancang sistem program untuk menyelesaikan
suatu masalah.
4.3. Tujuan Implementasi
Tujuan implementasi aplikasi adalah:
a. Menyelesaikan desain aplikasi yang telah dirancang dan diajukan.
b. Menguji aplikasi yang telah di buat.
c. Untuk mengetahui bahwa aplikasi dapat dijalankan oleh user (pemakai).
d. Untuk memastikan aplikasi dapat berjalan dengan baik
e. Memastikan apakah aplikasi yang di buat dapat melakukan proses
pengolahan data dengan benar.
4.4. Pengujian Aplikasi
Setelah selesai menyelesikan semua halaman dari aplikasi yang dirancang, maka
aplikasi tersebut harus di uji terlebih dahulu sebelum di pergunakan untuk
mengetahui bagian-bagian manakah pada aplikasi yang belum berhasil. Karena
apabila ada kesalahan dalam membangun sebuah program di dalam aplikasi yang
telah dirancang, itu akan bisa mengakibatkan tidak berhasilnya suatu aplikasi yang
telah di buat. Maka, tahap pengujian ini sangat penting dilakukan untuk
menghindari kesalahan-kesalahan yang masih kurang maksimal di dalam aplikasi.
39
Universitas Sumatera Utara
4.4.1. Beranda (Homepage)
Tampilan beranda (Homepage) di atas merupakan tampilan awal dari aplikasi yang
telah di buat. Desain dan tampilan bisa berubah sesuai keinginan yang ingin kita
atur semenarik mungkin. Tampilan awal ini berisi tentang pilihan-pilihan yang
penulis anggap penting diterapkan, karna dari beranda ini jugalah kita akan masuk
ke tahap-tahap berikutnya.
Gambar 4.1. Tampilan Beranda (Homepage)
4.4.2. Registrasi
Setelah tampilan beranda, kita bisa melangkah ke Registrasi dengan mengklik
button registrasi yang sudah koneksikan. Halaman atau menu registrasi berisikan
form yang harus diisi oleh calon member. Berikut tampilan registrasi pada aplikasi:
40
Universitas Sumatera Utara
Gambar 4.2. Tampilan Registrasi Online
4.4.3. Galeri
Menu Galeri merupakan menu yang berisikan semua gambar produk yang ada
didalam Portal. Yang berisikan apa bila member ingin melihat-lihat gambar serta
informasi dari gambar tersebut.
Gambar 4.3. Tampilan Galeri
41
Universitas Sumatera Utara
4.4.4. Artikel
Menu artikel merupakan menu yang memuat tentang ide-ide baru dari setiap
member yang bergabung dan yang bersedia untuk membagikan ide-ide barunya.
Gambar 4.4. Tampilan Artikel Tanaman Hias
4.4.5. Hubungi Kami
Adalah menu yang berisikan form komentar yang boleh diiisi oleh user maupun
member bila ingi mengomentari postingan yang ada di web ini.
Gambar 4.5. Tampilan Hubungi Kami
42
Universitas Sumatera Utara
4.4.6 Login Area
Sebelum menuju menjadi anggota dari portal komunitas ini yang paling pertama
dilakukan adalah menuju Login Area. Dimana ditujukan untuk mendaftar menjadi
anggota. Lalu, diperbolehkan untuk mengisi data.
Gambar 4.6. Tampilan Form Login
4.4.7 Admin
Admin bertujuan untuk menjadi pengawas dan juga yang bertugas untuk
mengupdate, mengedit, dan menghapus dari informasi yang dibuat oleh member
atau yang di buat oleh admin sendiri.
Gambar 4.7. Tampilan Utama Halaman Admin
43
Universitas Sumatera Utara
4.4.8 Persetujuan Anggota
Sebelum menjadi anggota admin bertindak sebagai pihak yang memiliki hak khusus
untuk menerima atau menolak member.
Gambar 4.8. Tampilan Persetujuan Anggota
44
Universitas Sumatera Utara
BAB 5
PENUTUP
5.1. Kesimpulan
Selama penulis merancang Portal Komunitas Pecinta tanaman hias banyak sekali
manfaat yang diperoleh. Diantara nya yaitu penulis dapat menerapkan ilmu
pengetahuan yang sudah dipelajari pada masa kuliah sehingga penulis dapat
mengembangkan website Portal Komunitas ini. Dari pengalaman yang penulis peroleh,
maka penulis dapat menyimpulkan bahwa:
1. Dengan beroperasinya Portal Komunitas Pecinta Tanaman dapat memperlancar
proses pertukaran informasi antara anggota yang satu dengan anggota yang lain.
2. Portal Komunitas Pecinta Tanaman Hias jadi memiliki tampilan yang lebih
sederhana dan rapi dibandingkan dengan pembuatan pertama web ini.
3. Portal Komunitas ini dibuat dengan menggunakan pemrograman Php dan
menggunakan penyimpanan data Mysql.
Dengan adanya Portal Komunitas Pecinta Tanaman Hias ini, para user maupun
member menjadi lebih mudah dalam mendapatkan informasi terbaru tentang dunia
tanaman hias.
45
Universitas Sumatera Utara
5.2. Saran
Adapun saran dari penulis adalah sebagai berikut :
1. Melihat perkembangan sistem komputerisasi pada era globalisasi saat ini, maka
pertukaran informasi yang cepat dan akurat sangat diperlukan. Oleh karena itu,
diharapkan baik anggota maupun member dan admin bisa untuk terus
mengupdate informasi yang ada di dalamnya.
2. Sistem yang baru hendaknya dilakukan pengoperasian dan perawatan secara
optimal.
3. Jika ada kemungkinan untuk di kembangkan kembali sebaiknya dibuat menjadi
website responsif.
46
Universitas Sumatera Utara
PERANCANGAN SISTEM
3.1. Perancangan Sistem
Menurut Jogiyanto (2005) Analisis sistem dapat didefinisikan sebagai penguraian
dari suatu informasi yang utuh kedalam bagian-bagian komponen dengan maksud
untuk mengidentifikasi dan mengevaluasi permasalah-permasalahan, kesempatankesempatan, hambatan-hambatan yang terjadi dan kebutuhan-kebutuhan yang
diharapkan sehingga dapat diusulkan perbaikan-perbaikannya.
3.2. Tujuan Perancangan Sistem
Tujuan utama dari perancangan sistem adalah memberikan gambaran perancangan
sistem yang akan dibangun atau dikembangkan, serta untuk memahami alur
informasi dan proses dalam sistem. Perancangan sistem yang akan dibangun atau
dikembangkan adalah perancangan aplikasi portal komunitas yang berbasis web.
Berikut telah ditentukan tahapan-tahapan atau langkah-langkah yang akan
dilakukan dalam perancangan sistem:
a. Rancangan Proses
b. Rancangan Basis Data (Database)
23
Universitas Sumatera Utara
c. Rancangan Antar Muka (User Interface)
3.2.1 Rancangan Proses
Perancangan proses pada pembangunan atau pengembangan sistem ini meliputi
diagram konteks, data flow diagram (dfd) dan flowchart.
1. Diagram Konteks
Diagram konteks adalah diagram yang terdiri dari suatu proses dan
mengembangkan ruang lingkup suatu sistem. Diagram konteks ini merupakan
level tertinggi dari suatu DFD yang menggambarkan seluruh input ke sistem atau
output dari sistem. Diagram akan memberi gambaran tentang ke seluruh sistem.
Sistem dibatasi oleh boundary (dapat digambarkan dengan garis putus). Dalam
diagram konteks hanya ada satu proses. Tidak boleh ada store dalam diagram
konteks.
Diagram konteks merupakan gambaran umum sistem yang nantinya akan
kita buat. Secara uraian dapat dikatakan bahwa diagram konteks itu berisi siapa saja
yang memberikan data (inputan) ke sistem, serta kepada siapa data informasi itu
diberikan (melalui sistem). Jadi, dalam diagram ini yang dibutuhkan adalah :
1. Siapa saja pihak yang akan memberikan data ke sistem.
2. Data apa saja yang diberikannya ke sistem.
3. Kepada siapa sistem harus memberikan informasi atau laporan.
4. Apa saja isi atau jenis laporan yang harus diberikan sistem.
24
Universitas Sumatera Utara
Untuk sistem yang akan kita buat, berikut model diagram konteks yang bisa kita
hasilkan :
Gambar 3.1. Diagram Konteks
2. Data Flow Diagram (DFD)
Data Flow Diagram adalah alat perancangan sistem yang berorientasi pada alur
data dengan konsep dekomposisi yang dapat digunakan untuk penggambaran
analisa maupun perancangan sistem yang mudah dikomunikasikan ke pengguna
ataupun ke pembuat program. Berikut adalah data flow diagram yang digunakan
dalam perancangan sistem pada pembangunan portal komunitas pecinta tanaman
hias ini.
25
Universitas Sumatera Utara
Gambar 3.2. Data Flow Diagram Level 0
Gambar 3.3. Data Flow Diagram Level 1
26
Universitas Sumatera Utara
Gambar 3.4. Data Flow Diagram Level 2
3. Flowchart
Flowchart (diagram alir) adalah sebuah diagram yang merepresentasikan sebuah
algoritma atau proses menggunakan beberapa bangun geometri untuk
memperlihatkan langkah-langkah yang dilakukan oleh program dalam
menyelesaiklan masalah. Berikut merupakan flowchart pada perancangan sistem
portal komunitas pecinta tanaman hias berbasis web.
27
Universitas Sumatera Utara
Gambar 3.5. Flowchart Halaman Utama
3.2.2 Rancangan Basis Data (Database)
Menurut Abdul Kadir dalam bukunya yang berjudul “Belajar Database
Menggunakan MYSQL” basis data (database) adalah suatu penyusunan data yang
terstruktur yang disimpan dalam media pengingat (hard disk) yang tujuannya
28
Universitas Sumatera Utara
adalah agar data tersebut dapat diakses dengan mudah dan cepat. Database
merupakan suatu komponen yang penting dalam suatu sistem, karena database
mampu memanipulasi dan menyediakan informasi bagi para pengguna.
Perancangan database pada sistem meliputi pembuatan tabel-tabel database yang
dapat dilihat pada tabel berikut:
Tabel 3.1. Tabel Akses
Nama Istilah
Tipe Data
Ukuran
Keterangan
IDAkses
Int
2
Id Akses
KodeGrup
Char
10
Kode Grup
KodeModul
Char
10
Kode Modul
Tabel 3.2. Tabel Artikel
Nama Istilah
Tipe Data
Ukuran
Keterangan
ArtikelID
bigint
20
Id Artikel
Tanggal
Date
-
Tanggal Artikel
Judul
varchar
50
Judul Artikel
Foto_name
Varchar
100
Foto Artikel
Artikel
Text
-
Deskripsi Artikel
29
Universitas Sumatera Utara
Tabel 3.3. Tabel Grup
Nama Istilah
Tipe Data
Ukuran
Keterangan
NamaGrup
Char
10
Nama Grup
KodeGrup
Varchar
50
Kode Grup
Tabel 3.4. Tabel Grup Module
Nama Istilah
Tipe Data
Ukuran
Keterangan
NamaGrupModul
Char
10
Nama Grup Modul
KodeGrupModul
Varchar
50
Kode Grup Modul
NA
Int
1
Notifikasi Aktif
Tabel 3.5. Tabel Produk
Nama Istilah
Tipe Data
Ukuran
Keterangan
ProdukID
Int
3
Id Produk
Tanggal
Date
-
Tanggal Produk
NamaProduk
Varchar
255
Keterangan
Text
Gambar
Varchar
255
Gambar Produk
UserName
Varchar
255
Username Anggota
Nama produk
Keterangan Produk
30
Universitas Sumatera Utara
Tabel 3.6. Tabel Registrasi
Nama Istilah
Tipe Data
Ukuran
Keterangan
NoRegistrasi
Char
10
Nomor Registrasi
TglRegistrasi
Date
-
Tanggal Registrasi
NoKTP
Varchar
50
Nomor KTP
NamaLengkap
Varchar
50
Nama Lengkap
Alamat
Varchar
50
Alamat
Telepon
Varchar
25
Nomor Telepon
UserName
Varchar
30
Username Anggota
Password
Varchar
30
Password Anggota
Status
Enum
‘Y’,’N’
Status Anggota
Foto
Varchar
255
Foto Anggota
Tabel 3.7. Tabel Tamu
Nama Istilah
Tipe Data
Ukuran
Keterangan
IDTamu
Int
2
Id Tamu
Tanggal
Date
-
Tanggal
NamaTamu
varchar
50
Nama Tamu
Varchar
50
Komentar
Text
-
Komentar Tamu
Status
Enum
‘Y’,’N’
Status Tamu
31
Universitas Sumatera Utara
Tabel 3.8. Tabel User
Nama Istilah
Tipe Data
Ukuran
Keterangan
UserName
Varchar
50
Username User
Password
Varchar
50
Password User
KodeGrup
Char
10
Kode Grup User
3.2.3 Rancangan Antar Muka (User Interface)
Antarmuka (Interface) merupakan bagian dari sistem aplikasi yang digunakan
sebagai alat komunikasi antara sistem dan user . Perancangan antarmuka ini
terdiri dari :
1. Desain Output
Desain output (keluaran) adalah keluaran-keluaran dari aplikasi. Keluaran tersebut
meliputi tampilan-tampilan layar. Berikut tampilan desain output :
Gambar 3.6. Desain Output
32
Universitas Sumatera Utara
2. Desain Input
esain input (masukan) bertujuan untuk menentukan data-data masukan, yang
digunakan untuk mengoperasikan system maupun aplikasi. Data-data keluaran
dapat berupa formulir-formulir atau yang lainnya. Data-data masukan ini
merupakan hasil data yang akan dioperasikan oleh sistem atau aplikasi. Berikut
gambr desain input :
Portal Komunitas Pecinta Tanaman Hias
Gambar
Beranda
Login
Gambar
Registrasi
Gambar
Gambar
Galeri
Artikel
Hubungi Kami
Registrasi online
Galeri
Bukti registrasi
Username:
Password:
No registrasi
REG-7
Tanggal registrasi
16-6-2016
Pohon
Daun
Batang
Biodata
Daftar Anggota
Artikel
No.KTP
Daftar Nama
Anggota
Nama Lengkap
Konten
Alamat
No.KTP
Tel/Hp
Akses Data
List Komentar
Username
Password
Kirim data Ini
Portal Komunitas Pecinta Tanaman Hias
Gambar 3.7. Desain Input Form Registrasi
33
Universitas Sumatera Utara
Gambar 3.8. Desain Input Data Produk oleh Admin
3. Desain Dialog
Definisi umum dialog adalah percakapan antara dua kelompok atau lebih,
sedangkan dialog dalam konteks perencanaan user interface adalah struktur dari
percakapan antara user dan komputer. Dimana dari tahap perencanaan ini kita
menentukan interaksi-interaksi yang terjadi antara user interface dengan komputer.
Berikut gambar-gambar dari desain dialog :
a. Halaman Beranda
Pada Beranda user bisa melihat ada beberapa gambaran dari isi dari beranda
tersebut. Seperti sejarah dari tanaman bonsai yang banyak orang kurang
mengetahuinya. Kemudian di sebelah kanan dan kirinya ada banner yang bisa
diklik dan akan keluar informasi yang sudah disediakan
34
Universitas Sumatera Utara
Gambar 3.9. Halaman Beranda
b. Halaman Galeri
Galeri merupakan penyimpanan gambar yang terbanyak di dalam Perancangan
ini. Jika user tertarik untuk ingin lebih mengetahui isi dari gambar itu si user bisa
mngklik detail untuk melanjutkan membaca.
35
Universitas Sumatera Utara
Gambar 3.10. Halaman Galeri
36
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1. Pengertian Implementasi Sistem
Impelentasi adalah suatu tindakan atau pelaksanaan dari sebuah rencana yang sudah
disusun secara matang dan terperinci. Implementasi biasanya dilakukan setelah
perencanaaan sudah dianggap selesai. Implementasi dalam Kamus Besar Bahasa
Indonesia diartikan sebagai pelaksanaan atau penerapan. Artinya yang dilaksanakan
dan diterapkan adalah kurikulum yang telah dirancang/didesain untuk kemudian
dijalankan sepenuhnya.
4.2. Komponen Utama Aplikasi
Dalam pembuatan Portal Komunitas Pecinta tanaman hias yang telah dirancang
membutuhkan komponen-komponen pendukung sebagai berikut :
a. Perangkat Keras (Hardware)
Hardware merupakan peralatan fisik dari sebuah komputer. Umumnya
terdiri dari tiga jenis perangkat yaitu; perangkat masukan (input device),
perangkat keluaran (output device), serta pengolahan (processor ).
37
Universitas Sumatera Utara
b. Perangkat Lunak (Software)
Software merupakan program yang berisi perintah-perintah untuk
melakukan pengolahan data.
c. Pengguna (Brainware)
Brainware merupakan user (manusia) yang terlibat langsung di dalam
pengoperasian komputer dan yang akan melaksanakan semua kegiatankegiatan yang berhubungan dengan hardware dan software. User (manusia)
yang terlibat langsung dalam sistem komputer dikategorikan dalam
berbagai tingkatan, yaitu:
1. Operator
Operator adalah user (manusia) yang bekerja mengoperasikan
komputer untuk memasukkan data atau menjalankan program yang
sudah ada.
2. Programmer
Programmer adalah user (manusia) yang bertugas membuat program
atau software berdasarkan ketentuan yang sudah ada, meliputi;
a. Menganalisis dan membuat program.
b. Membuat flowchart atau algoritma.
c. Memeriksa dan memperbaiki kesalahan program.
38
Universitas Sumatera Utara
3. Sistem Analis
Sistem analis adalah user (manusia) yang bertugas mempelajari,
menganalisis serta merancang sistem program untuk menyelesaikan
suatu masalah.
4.3. Tujuan Implementasi
Tujuan implementasi aplikasi adalah:
a. Menyelesaikan desain aplikasi yang telah dirancang dan diajukan.
b. Menguji aplikasi yang telah di buat.
c. Untuk mengetahui bahwa aplikasi dapat dijalankan oleh user (pemakai).
d. Untuk memastikan aplikasi dapat berjalan dengan baik
e. Memastikan apakah aplikasi yang di buat dapat melakukan proses
pengolahan data dengan benar.
4.4. Pengujian Aplikasi
Setelah selesai menyelesikan semua halaman dari aplikasi yang dirancang, maka
aplikasi tersebut harus di uji terlebih dahulu sebelum di pergunakan untuk
mengetahui bagian-bagian manakah pada aplikasi yang belum berhasil. Karena
apabila ada kesalahan dalam membangun sebuah program di dalam aplikasi yang
telah dirancang, itu akan bisa mengakibatkan tidak berhasilnya suatu aplikasi yang
telah di buat. Maka, tahap pengujian ini sangat penting dilakukan untuk
menghindari kesalahan-kesalahan yang masih kurang maksimal di dalam aplikasi.
39
Universitas Sumatera Utara
4.4.1. Beranda (Homepage)
Tampilan beranda (Homepage) di atas merupakan tampilan awal dari aplikasi yang
telah di buat. Desain dan tampilan bisa berubah sesuai keinginan yang ingin kita
atur semenarik mungkin. Tampilan awal ini berisi tentang pilihan-pilihan yang
penulis anggap penting diterapkan, karna dari beranda ini jugalah kita akan masuk
ke tahap-tahap berikutnya.
Gambar 4.1. Tampilan Beranda (Homepage)
4.4.2. Registrasi
Setelah tampilan beranda, kita bisa melangkah ke Registrasi dengan mengklik
button registrasi yang sudah koneksikan. Halaman atau menu registrasi berisikan
form yang harus diisi oleh calon member. Berikut tampilan registrasi pada aplikasi:
40
Universitas Sumatera Utara
Gambar 4.2. Tampilan Registrasi Online
4.4.3. Galeri
Menu Galeri merupakan menu yang berisikan semua gambar produk yang ada
didalam Portal. Yang berisikan apa bila member ingin melihat-lihat gambar serta
informasi dari gambar tersebut.
Gambar 4.3. Tampilan Galeri
41
Universitas Sumatera Utara
4.4.4. Artikel
Menu artikel merupakan menu yang memuat tentang ide-ide baru dari setiap
member yang bergabung dan yang bersedia untuk membagikan ide-ide barunya.
Gambar 4.4. Tampilan Artikel Tanaman Hias
4.4.5. Hubungi Kami
Adalah menu yang berisikan form komentar yang boleh diiisi oleh user maupun
member bila ingi mengomentari postingan yang ada di web ini.
Gambar 4.5. Tampilan Hubungi Kami
42
Universitas Sumatera Utara
4.4.6 Login Area
Sebelum menuju menjadi anggota dari portal komunitas ini yang paling pertama
dilakukan adalah menuju Login Area. Dimana ditujukan untuk mendaftar menjadi
anggota. Lalu, diperbolehkan untuk mengisi data.
Gambar 4.6. Tampilan Form Login
4.4.7 Admin
Admin bertujuan untuk menjadi pengawas dan juga yang bertugas untuk
mengupdate, mengedit, dan menghapus dari informasi yang dibuat oleh member
atau yang di buat oleh admin sendiri.
Gambar 4.7. Tampilan Utama Halaman Admin
43
Universitas Sumatera Utara
4.4.8 Persetujuan Anggota
Sebelum menjadi anggota admin bertindak sebagai pihak yang memiliki hak khusus
untuk menerima atau menolak member.
Gambar 4.8. Tampilan Persetujuan Anggota
44
Universitas Sumatera Utara
BAB 5
PENUTUP
5.1. Kesimpulan
Selama penulis merancang Portal Komunitas Pecinta tanaman hias banyak sekali
manfaat yang diperoleh. Diantara nya yaitu penulis dapat menerapkan ilmu
pengetahuan yang sudah dipelajari pada masa kuliah sehingga penulis dapat
mengembangkan website Portal Komunitas ini. Dari pengalaman yang penulis peroleh,
maka penulis dapat menyimpulkan bahwa:
1. Dengan beroperasinya Portal Komunitas Pecinta Tanaman dapat memperlancar
proses pertukaran informasi antara anggota yang satu dengan anggota yang lain.
2. Portal Komunitas Pecinta Tanaman Hias jadi memiliki tampilan yang lebih
sederhana dan rapi dibandingkan dengan pembuatan pertama web ini.
3. Portal Komunitas ini dibuat dengan menggunakan pemrograman Php dan
menggunakan penyimpanan data Mysql.
Dengan adanya Portal Komunitas Pecinta Tanaman Hias ini, para user maupun
member menjadi lebih mudah dalam mendapatkan informasi terbaru tentang dunia
tanaman hias.
45
Universitas Sumatera Utara
5.2. Saran
Adapun saran dari penulis adalah sebagai berikut :
1. Melihat perkembangan sistem komputerisasi pada era globalisasi saat ini, maka
pertukaran informasi yang cepat dan akurat sangat diperlukan. Oleh karena itu,
diharapkan baik anggota maupun member dan admin bisa untuk terus
mengupdate informasi yang ada di dalamnya.
2. Sistem yang baru hendaknya dilakukan pengoperasian dan perawatan secara
optimal.
3. Jika ada kemungkinan untuk di kembangkan kembali sebaiknya dibuat menjadi
website responsif.
46
Universitas Sumatera Utara