Ensiklopedia Tentang Berbagai Jenis Tanaman Hias Bunga Di Indonesia Berbasis Web

Universitas Sumatera Utara
Repositori Institusi USU http://repositori.usu.ac.id

Departemen Matematika Kertas Karya Diploma (Teknologi Informasi)
2017
Ensiklopedia Tentang Berbagai Jenis

Tanaman Hias Bunga di Indonesia
Berbasis Web
Fathia, Aulia Ukhti
http://repositori.usu.ac.id/handle/123456789/3626
Downloaded from Repositori Institusi USU, Univsersitas Sumatera Utara
ENSIKLOPEDIA TENTANG BERBAGAI JENIS TANAMAN HIAS
BUNGA DI INDONESIA BERBASIS WEB
TUGAS AKHIR
AULIA UKHTI FATHIA

142406008
PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2017

TUGAS AKHIR
Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh

Ahli Madya
AULIA UKHTI FATHIA

142406008
PROGRAM STUDI D3 TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2017

PERNYATAAN

TUGAS AKHIR
Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali
beberapa dan ringkasan yang masing-masing di sebut sumbernya.
Medan, Juni 2017
Aulia Ukhti Fathia

142406008
iii

PENGHARGAAN
Puji dan syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa yang telah
memberikan rahmat dan hidatah-Nya, tidak lupa shalawat dan salam penulis
limpahkan kepada Nabi besar Muhammad SAW, sehingga penulis dapat
menyelesaikan penyususnan Tugas Akhir ini tepat waktu dan tanpa adanya
halangan yang berarti. Adapun judul tugas akhir ini adalah “Ensiklopedia
Tentang Berbagai Jenis Tanaman Hias Bunga di Indonesia Berbasis Web”.
Terimakasih penulis sampaikan kepada Bapak Drs. Rosman Siregar, M.Si
selaku pembimbing yang telah meluangkan waktunya selama penyusunan Tugas
Akhir ini. Terima kasih kepada Ibu Dr. Elly Rosmaini, M.Si sebagai Dosen
Pembimbing Akademik yang telah membimbing penulis selama duduk di bangku
perkuliahan. Terimakasih kepada Ibu Dra. Normalina Napitupulu, M.Sc dan
Bapak Drs. James Piter Marbun, M.Kom selaku Ketua dan Sekretaris Program
Studi D3 Teknik Informatika FMIPA USU Medan, Dekan dan Wakil Dekan
FMIPA USU, seluruh Staff dan Dosen Program Studi D3 Teknik Informatika
FMIPA USU, pegawai FMIPA USU dan rekan-rekan kuliah. Akhirnya tidak
terlupakan kepada Bapak, Ibu dan keluarga yang selama ini memberikan bantuan
dan dorongan yang diperlukan. Semoga Tuhan Yang Maha Esa akan
membalasnya.
Medan, Juni 2017
Aulia Ukhti Fathia
iv

Ensiklopedia Tentang Berbagai Jenis Tanaman Hias Bunga di Indonesia
Berbasis Web
ABSTRAK
Tugas Akhir ini bertujuan mengaplikasikan ensiklopedia dalam bentuk website,

ensiklopedia ini berisi tentang penjelasan singkat mengenai berbagai macam jenis
tanaman hias bunga yang ada di Indonesia dan untuk menarik minat masyarakat
untuk dapat membudidayakan tanaman hias bunga. Ensiklopedia berbasis web ini
disusun dengan menggunakan PHP MySQL, Aplikasi XAMPP yang menrangkum
Web Server Apache, Web scriping PHP dan MySQL. Dan juga HTML(Hypertext
Markup Language), CSS (Cascading Style Sheet), website editor Dreamweaver
CS6 serta Adobe Photoshop sebagai aplikasi perancang layout.
Kata kunci: Bunga, Indonesia, PHP, XAMPP

Ensiklopedia Tentang Berbagai Jenis Tanaman Hias Bunga di Indonesia
Berbasis Web
ABSTRACT
This final project aims to apply the encyclopedia in the form of website, this
encyclopedia contains a brief explanation about various types of ornamental
plants of flowers in Indonesia and to attract people to be able to cultivate flower
plants. This web based encyclopedia is built using PHP MySQL, XAMPP
Application that encapsulates Apache Web Server, Web scripting PHP and
MySQL. And also HTML (Hypertext Markup Language), CSS (Cascading Style
Sheet), website editor Dreamweaver CS6 and Adobe Photoshop as a layout
designer.
Keyword: Flower, Indonesia, PHP, and XAMPP.
vi

DAFTAR ISI
Persetujuan ii
Pernyataan iii
Penghargaan iv
Abstrak v
Daftar Isi vi
Daftar Table viii
Daftar Gambar ix
BAB 1 Pendahuluan
1.1 Latar Belakang 1
1.2 Rumusan Masalah 2
1.3 Batasan Masalah 2
1.4 Tujuan Penelitian 3
1.5 Manfaat 3
1.6 Metodelogi Penelitian 6
1.7 Sistematika Penulisan
BAB 2 Tinjauan Teoritis

2.1 Ensiklopedia 7
2.1.1 Kategori Ensiklopedia 8
2.1.2 Karakteristik Ensiklopedia 10
2.2 Komputer 11
2.3 Internet 12
2.4 Website 13
2.4.1 Jenis-jenis Situs Web (Website) 14
2.4.2 Unsur-unsur Penunjang dalam Website 14
2.5 HTML 16
2.6 PHP 17
2.7 MySQL 18
2.7.1 Tipe Data Field 18
2.7.2 Fungsi-fungsi MySQL 19
2.8 CSS (Cascanding Stlye Sheet) 20
2.8.1 Penggunaan CSS 21
2.9 DreamWeaver 22
BAB 3 Perancangan Sistem

3.1 Perancangan Sistem 23
3.2 Diagram Konteks 23
3.3 Protokol Jaringan 26
3.4 Rancangan Database 31
3.5 Perancangan Antar Muka (Interface) 31
vi

BAB 4 Implementasi Sistem
4.1 Pengertian Implementasi Sistem 35
4.2 Tujuan Implementasi Sistem 35
4.3 Komponen Sistem 36
4.3.1 Hardware 36
4.3.2 Software 36
4.3.3 Brainware 37
4.4 Tampilan Akhir Sistem 38
BAB 5 Kesimpulan Dan Saran

5.1 Kesimpulan 41
5.2 Saran 42
Daftar Pustaka
Lampiran
vii

DAFTAR TABEL
Nomor Judul Halaman

Tabel
3.1 Simbol-Simbol Diagram Konteks 24

3.2 Simbol-Simbol Flowchart 26
3.3 Bunga 31
viii

DAFTAR GAMBAR
Nomor Judul Halaman

Gambar
3.1 Data Flow Diagram (DFD) Diagram Konteks 25

3.2 Flowchart Halaman Utama 28
3.3 Flowvhart Halaman Pencarian 29
3.4 Flowvhart Halaman Admin 30
3.5 Halaman Utama 32
3.6 Hasil pencarian 32
3.7 Halaman Utama Admin 33
3.8 About 33
3.9 Help 34
3.10 Data Bunga Admin 34
4.1 Halaman Utama 38
4.2 Hasil pencarian 38
4.3 Halaman Utama Admin 39
4.4 About 39
4.5 Help 40
4.6 Data Bunga Admin 40
ix

DAFTAR LAMPIRAN
Nomor Judul Halaman

Lampiran
1. Listing Program 1
2. Hasil Uji Program
3. Kartu Bimbingan
4. Surat Keterangan Pembimbing TA

BAB 1
PENDAHULUAN
1.1 Latar Belakang
Tanah air Indonesia membentang di daerah khatulistiwa dan mempunyai dua
musim, yaitu musim hujan dan musim kemarau. Banyak jenis tanaman yang
memiliki anekaragam mulai dari bentuk dan warna bunga yang sangat indah yang
dapat tumbuh dan berkembang dengan baik.
Tanaman hias bunga didefinisikan sebagai tumbuhan yang mempunyai
bunga berpesona cantik dengan satu atau banyak warna. Tanaman hias bunga
dapat menambah keindahan suatu ruangan atau lingkungan di sekitarnya serta
membuatnya terlihat lebih asri. Kita bisa menanam tanaman hias bunga di dalam
pot atau pada lahan tanah.
Untuk dapat lebih mengenal dan mengetahui informasi dan penjelasan
tentang tanaman hias bunga, maka dirangkum dalam sebuah ensiklopedia. Dimana
ensklopedia memberikan informasi dan penjelasan mengenai tanaman hias bunga
di Indonesia dalam bentuk website.
Dengan pengkembangan zaman yang semakin pesat dan kemajuan
teknologi penulis ingin membuat sebuah website yang dapat memberikan
informasi dengan mudah dan cepat untuk meringankan pekerjaan dalam mencari
penjelasan tentang tanaman hias bunga.

2
1.2 Rumusan Masalah
Berdasarkan latar belakang permasalahan di atas, maka permasalahan yang akan
dibahas dalam proposal ini dirumuskan sebagai berikut:
1. Bagaimana cara mengatasi masalah yang dilakukan secara
konvensional/manual berupa membuka buku oleh pengguna menjadi lebih
efektif dalam mencari data dan efisiensi waktu.
2. Bagaimana merancang dan membuat sebuah ensiklopedia berbagai jenis
tanaman bunga berbasis web.
1.3 Batasan Masalah
Adapun batasan masalah dalam penelitian ini sebagai berikut:
1. Bahasa pemograman yang digunakan dalam perancangan ini adalah PHP
dan MySQL.
2. Website ini menampilkan hasil dari pencarian tanaman bunga secara
umum yang ada di Indonesia.
3. Website ini dapat diakses secara bebas oleh siapa pun.

3
1.4 Tujuan Penelitian
Adapun tujuan dari Website ensiklopedia ini adalah:
1. Merancang sebuah ensiklopedia berbasis web untuk memberikan
pengetahuan tentang tanaman bunga yang ada di Indonesia dan
membangun minat masyarakat dalam melestarikan tanaman bunga
Indonesia
1.5 Manfaat Penelitian
Adapun manfaat dari ensiklopedia berbasis web ini adalah:
1. Untuk memberikan informasi kedpada masyarakat tentang peengetahuan
tanaman bunga yang ada di Indonesia agar dapat memlihara dan menjaga
keindahan lingkungan.
2. Website ini cukup efisien untuk menghemat biaya dalam menggunakan
bahan cetak seperti kertas untuk pembuatan buku pada umumnya dan
efektif dalam pencarian data yang dalam Website.
1.6 Metodologi Penelitian
Untuk menyusun tugas akhir ini, penulis melakukan penerapan metode penelitian.
Adapun metode penelitian yang penulis lakukan adalah sebagai berikut:
1. Pengumpulan data dan informasi

4
a. Penelitian Pustaka
Penelitiaan dilakukan oleh penulis di perpustakaan berupa buku, dan
di internet berupa blog dan website. Untuk mendapatkan bahan teoritis
guna membangun agar website yang lebih efektif dan efisien.
b. Survey / Observasi
Mengumpulkan data dengan cara pengamatan langsung terhadap
kebutuhan yang diperlukan pada penelitian, tidak terkecuali hardware,
software, dan brainware yang mendukung pembuatan website.
2. Memahami model proses
Pada tahap ini penulis menentukan model proses apa yang digunakan
dalam pengembangan web tersebut.
3. Memahami model data
Model data adalah suatu gambaran yang menunjukkan hubungan antar
komponen data yang akan dirancang.
4. Identifikasi masalah
Dalam penelitian ini, penulis dapat mengidentifikasi masalah yang ada
sebagai berikut:
a. Pada saat ini orang jarang membaca buku dan lebih memilih untuk
membuka blog yang ada di internet
b. Kurangnya pengetahuan masyarakat terhadap tumbuhan terutama
tanaman bunga.
5. Merancang konsep pembangunan sistem yang diusulkan

5
Konsep pembangunan sistem yang diusulkan penulis adalah merancang
dan membangun website untuk memberikan informasi tentang tanaman
bunga yang ada di daerah Indonesia.
6. Pembuatan program
Dalam pembuatan website menggunakan bahasa pemrograman PHP dan
MySQL, Adobe Dreamweaver CS6 sebagai tools dalam tahap
pengkodingan dan Google Chrome sebagai pengujian sistem tersebut.
Pembuatan program dilakukan sesuai dengan pembangunan sistem yang
akan dirancang.
7. Implementasi sistem
Implementasi sistem dilakukan sesuai dengan rancangan yang telah
dimodelkan. Implementasi dan pengujian hanya dilakukan pada website
yang sudah di hosting ke internet.
8. Pengujian perangkat lunak
Pengujian perangkat lunak adalah elemen kritis dari jaminan kualitas
perangkat lunak dan merepresentasikan kajian pokok dari spesifikasi,
desain dan pengkodean.
9. Penulisan laporan penelitian
Pada tahap ini dilakukan penyusunan laporan dari perancangan dan
pembuatan Website Ensiklopedia tentang berbagai jenis tanaman hia
bunga berupa laporan akhir studi.

6
1.7 Sistematika Penulisan
Sistematika penulisan tugas akhir ini dibagimenjadi lima yaitu:
BAB 1 PENDAHULUAN
Pada bab ini dijelaskan tentang latar belakang, rumusan masalah,
batasan masalah, tujuan, manfaat, metodelogi penelitian, dan
sistematika penulisan tugas akhir.
BAB 2 TINJAUAN TEORITIS
Pada bab ini di jelaskan tentang ensiklopedia, PHP, MySQL,
Dremweaver cs6, dan teori pendukung lainnya.
BAB 3 PERANCANGAN SISTEM
Pada bab ini menjelaskan analisis perancangan sistem aplikasi
yang meliputi, Flowchart, database dan perancangan interface.
BAB 4 IMPLEMENTASI SISTEM
Pada bab ini dijelaskan tentang implementasi ataupun pengodean
dari sistem yang telah dirancang.
BAB 5 KESIMPULAN DAN SARAN
Pada bab ini dijelaskan tentang kesimpulan dan saran dari penulis
untuk hasil pembahasan tugas akhir.

BAB 2
LANDASAN TEORI
2.1 Ensiklopedia
Ensiklopedia merupakan kumpulan dari penjelaan kata–kata yang ada yang berisi
tentang informasi secara luas, lengkap, dan tentunya mudah untuk kita pahami
tentang kumpulan ilmu pengetahuan atau cabang ilmu tertentu yang disusun
berdasarkan huruf atau abjad yang kemudian dicetak ke dalam bentuk buku.
Dapat juga disimpulkan bahwa ensiklopedia ini merupakan suatu kamus
yang menjelaskan bagaimana pengertian yang ada pada ilmu pengetahuan, seni,
atau cabang ilmu lainya ke dalam suatu buku menurut susunan huruf abjad yang
didokumentasikan ke dalam buku yang biasanya terurai ke dalam edisi atau jilid–
jilid buku. Dengan adanya edisi buku–buku ini, maka tentunya penjelasan
mengenai arti dalam suatu ilmu dapat berkembang lagi.
Paa dasarnya, ensiklopedia ini merupakan perkembangan dari kamus, sehingga
banyak orang menilai ensiklopedia ini sama halnya dengan kamus. Dalam hal ini,
tentunya pengertian kamus untuk ensiklopedia ini merupakan pengertian dari
suatu kata yang bertujuan untuk mempermudah orang banyak dalam memahami
kata tersebut.
Namun tentunya ensiklopedia ini berbeda dengan kamus, ensiklopedia
merupakan sebuah sumber pengetahuan yang bisa ditemukan di dalamnya seluruh
bidang ilmu pengetahuan. Menurut pengertiannya ensiklopedia ini berasal dari
bahasa Yunani, yakni enkyklios paideia yang artinya sebiah lingkaran atau

8
pengajaran yang lengkap. Tentu pengertian tersebut di ambil dari kegunaan
ensiklopedia sendiri yang memang meruapakan sumber pengetahuan.
Seperti yang sudah dijelaskan, banyak pendapat orang yang
menyamaratakan ensiklopedia dan kamus itu sama artinya, namun jika kita
mengetahui lebih jauhnya, ensiklopedia lebih memberikan pengertian dari suatu
kata dengan lebih jelas dan lebih terperinci dari kamus.
Penjelasan yang ada pada ensiklopedia ini lebih detail adanya dan juga
lebih mendalam dari kata yang ingin kita cari. Sedangkan kamus, berisikan
tentang definisi suatu kata yang ingin kita cari berdasarkan sudut pandang
linguistik yang bisa dikatakan kamus merupakan pengertian yang berisi tentang
sinonim dari suatu kata saja. Dengan begitu, sudah jelas ensiklopedia ini memiliki
kelebihan tersendiri dari pada kamus.
2.1.1 Kategori Ensiklopedia
Ensiklopedi pun dapat dibagi atas beberapa jenis yaitu : ensiklopedi umum/
nasional, ensiklopedi khusus atau ensiklopedi subyek dan ensiklopedi
international/ universal.
1. Ensiklopedi umum/ nasional
Ensiklopedi umum atau ensiklopedi nasional adalah ensiklopedi yang berisi
informasi dasar tentang hal-hal, abstraksi, konsep atau kejadian-kejadian
umum. Tidak ada batasan khusus dalam cakupannya. Ensiklopedi seperti ini
kebanyakan diterbitkan untuk digunakan di dalam suatu negara, karena itu
sering pada judulnya menyebutkan kata nasional atau nama suatu negara

9
tertentu. Isinya menekankan informasi mengenai negara bersangkutan,
meskipun memuat juga informasi penting dari negara lain
2. Ensiklopedi Khusus atau Ensiklopedi Subyek
Ensiklopedi khusus adalah ensiklopedi yang membatasi cakupan isinya pada
masalah atau mengenai subyek tertentu.
3. Ensiklopedi internasional
Ensiklopedi internasional adalah ensiklopedi yang memuat semua informasi
(sedapat mungkin) di dunia, tanpa member penekanan pada informasi yang
berasal dari suatu negara atau sekelompok negara tertentu. Ensiklopedi seperti
ini, yang benar-benar tidak bias dalam memuat informasi, boleh dikatakan
tidak ada. Kebanyakan memang member penekanan tertentu pada negara
tertentu, terutama pada negara tempat terbit ensiklopedi itu.
4. Ensiklopedia Online
Ensiklopedia merupakan suatu bahan rujukan yang menyediakan berbagai
informasi tentang berbagai ilmu pengetahuan atau satu cabang ilmu
pengetahuan yang berisikan tentang ilmu mendasar sampai dengan keterangan-
keterangan yang lebih lanjut yang disusun secara sistematis agar pengguna
dapat dengan mudah memahami isi dari ensiklopedia tersebut. Dalam hal ini,
bentuk ensiklopedia masih berupa buku atau bahan tercetak.
Sedangkan Online berarti terhubung, terkoneksi, aktif dan siap untuk
operasi, dapat berkomunikasi dengan atau dikontrol oleh komputer. Online ini
juga bisa diartikan sebagai suatu keadaan dimana sebuah device (komputer)
terhubung dengan device lain, biasanya melalui modem. Online merupakan

10
sedang menggunakan jaringan, terhubung dalam jaringan, satu perangkat
dengan perangkat lainnya yang terhubung sehingga bisa saling berkomunikasi.
Dapat disimpulkan bahwa, online adalah suatu keadaan dimana
sebuah device lain dengan menggunakan perangkat modem, sehingga bisa
saling berkomunikasi.
2.1.2 Karakteristik Ensiklopedia
Ensiklopedia memiliki ciri-ciri, yaitu:
1. Adanya topik/artikel, sub topic
2. Adanya defenisi topik/artikel yang diikuti oleh penjelasan umum
3. Adanya rujuk silang (cros reference) atau futher more, see also, running
index, dll.
4. Adanya paragraph, ilustrasi, gambar, grafik,dan table time line.
5. Disusun dan disajikan secara sistematis.
6. Adanya tambahan “Faktaneka”, yaitu Aneka Fakta Ilmu Pengetahuan
7. Adanya petunjuk kegunaaan (How to use)
2.1.3 Bagaimana Menggunakannya (How To Use)
Ensiklopedia bukanlah buku teks pelengkap atau buku pegangan bagi pelajar
sebagaimana biasanya digunakan oleh pelajar sesuian dengan kurikulum
pendidikan. Tidak semua orang terbiasa menggunakan ensiklopedia. Oleh karena

11
itu, seorang konsultan pembelajar yang handal harus menjelaskan bagaimana cara
menggunakan suatu ensiklopedia secara baik dan benar agar dapat digunakan dan
cepat mendapatkan informasi yang diharapkan.
2.2 Komputer
Komputer adalah alat yang di pakai untuk mengolah data menurut prosedur yang
telah dirumuskan. Kata komputer semula dipergunakan untuk menggambarkan
orang yang pekerjanya melakukan perhitungan aritmatika, demgan atau tanpa alat
bantu, tetapi arti kata ini kemudian di pindahkan kepada mesin itu sendiri. Asal
mula komputer adalah pengolah informasi hamper ekslusif berhubungan dengan
masalah aritmatika, tetapi komputer modern dipakai untuk banyak tugas yang
tidak berhubungan dengan matekatika.
Kata komputer secara umum pernah di pergunakan untuk mendefnisikan
orang yang melakukan perhitungan aritmatika, dengan atau tanpa mesin
pembantu. Menurut Barnhart Concise Dictionary Of Etymologi, kata tersebut
digunakan dalam bahasa Inggris pada tahun 1646 sebagai kata untuk “orang yang
menghitung” kemudian menjelang 1897 juga digunakan sebagai “alat hitung
mekanis”. Selama Perang Dunia II kata tersebut menunjukan kepadfa para pekerja
wanita Amerika Serikat da Inggris yang pekerjanya menghitung jalan artileri
pernah dengan mesin hitung.
Charles babbage mendesain salah satu mesin hitung pertama yang disebut
mesin analitikal. Selain itu, berbagai alat mesin sederhana seperti slide rule juga
sudah dapat dikatakan sebagai komputer.

12
2.3 Internet
Internet adalah singkatan dari Interconnecting Networks atau bisa didefenisikan
sebagai jaringan komputer yang tiada batas yang menjadi penghubung pengguna
komputer atau dengan pengguna komputer lainnya serta dapat berhubungan
dengan komputer disebuah wilayah ke wilayah dipenjuru dunia, dimana didalam
jaringan tersebut mempunyai berbagai macam informasi serta fasilitas layanan
internet browsing atau surfing. Istilah ini lebih dikenal dengan “online” diinternet.
Pekerjaan ini bisa diibaratkan seperti kita berjalan-jalan ditempat hiburan sembari
melihat-lihat ke toko namun tidak membeli jualan tersebut.
Internet merupakan jaringan komputer yang dibentuk oleh Departemen
Pertahanan Amerika Serikat pada tahun 1969, melalui proyek ARPA yang disebut
ARPANET (Advanced Research Project Agency Network), di mana mereka
mendemonstrasikan bagaimana dengan hardware dan software komputer yang
berbasis UNIX, kita bisa melakukan komunikasi dalam jarak yang tidak terhingga
melalui saluran telepon.Proyek ARPANET merancang bentuk jaringan,
kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya semua
standar yang mereka tentukan menjadi cikal bakal pembangunan protokol baru
yang sekarang dikenal sebagai TCP/IP (Transmission Control Protocol/Internet
Protocol).
Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer. Pada
saat itu Departemen Pertahanan Amerika Serikat (US Department of Defense)
membuat sistem jaringan komputer yang tersebar dengan menghubungkan
komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi serangan

13
nuklir dan untuk menghindari terjadinya informasi terpusat, yang apabila terjadi
perang dapat mudah dihancurkan.
Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu Stanford
Research Institute, University of California, Santa Barbara, University of Utah, di
mana mereka membentuk satu jaringan terpadu pada tahun 1969, dan secara
umum ARPANET diperkenalkan pada bulan Oktober 1972. Tidak lama kemudian
proyek ini berkembang pesat di seluruh daerah, dan semua universitas di negara
tersebut ingin bergabung, sehingga membuat ARPANET kesulitan untuk
mengaturnya.
Oleh sebab itu ARPANET dipecah manjadi dua, yaitu "MILNET" untuk
keperluan militer dan "ARPANET" baru yang lebih kecil untuk keperluan non-
militer seperti, universitas-universitas. Gabungan kedua jaringan akhirnya dikenal
dengan nama DARPA Internet, yang kemudian disederhanakan menjadi Internet.
2.4 Website
Website adalah sering juga disebut Web, dapat diartikan suatu kumpulan-
kumpulan halaman yang menampilkan berbagai macam informasi teks, data,
gambar diam ataupun bergerak, data animasi, suara, video maupun gabungan dari
semuanya, baik itu yang bersifat statis maupun yang dinamis, yang dimana
membentuk satu rangkaian bangunan yang saling berkaitan dimana masing-
masing dihubungkan dengan jaringan halaman atau hyperlink.

14
2.4.1 Jenis-Jenis Situs Web (Website)
secara umum, situs web digolongkan menjadi 3 jenis yaitu: Website statis,
Website dimanis, Website interaktif.
1. Website Statis adalah suatu website yang mempunyai halaman yang tidak
berubah. Yang artinya adalah untuk melakukan sebuah perubahan pada
suatu halaman hanya bisa dilakukan secara manual yaitu dengan cara
mengedit kode-kode yang menjadi struktur dari website itu sendiri.
2. Website Dinamis merupakan suatu website yang secara strukturnya
diperuntukan untuk update sesering mungkin. Biasanya selain dimana
utamanya yang bisa diakses oleh para pengguna (user) pada umumnya,
juga telah disediakan halaman backend yaitu untuk mengedit konten dari
website tersebut
3. Website Interaktif adalah suatu website yang memang pada saat ini
memang terkenal. Di website ini para pengguna bisa berinteraksi dan juga
beradu argumen mengenai apa yang menjadi pemikiran mereka.
2.4.2 Unsur-unsur penunjang dalam Website
Untuk membangun sebuah website yang lebih advance, kita juga di haruskan
untuk menyediakan unsur penunjang lainnya. Diantaranya unsur-unsur website itu
adalah sebagai berikut:

15
1. Nama domain ( Domain nama/URL-Uniform Resourse Locator)
Nama domain atau URL merupakan alamat unik didunia maya yang di
pergunakan untuk mengindentifikasi sebuah website dengan kata lain
domian nama adalah alamat yang di gunakan menentukana sebuah website
pada dunia internet.
2. Web hosting
Web hosting merupakan sebagai ruangan untuk menyimpan data atau file-
file, gambar, video, data emai, statistik, database dan lain-lain dan data
tersebut akan tampil dalam website. Besarnya data yang di masukkan
tergantung dari berapa banyak web hosting yang di sewa/dipunyai semakin
besar web hostingnya maka akan semakin banyak juga yang akan
ditampilkan dalam website.
3. Bahasa Program (Scripts Program)
Bahasa Program adalah bahasa yang digunakan untuk menerjemahkan
setiap perintah dalam website yang pada saat diakses. Jenis bahasa
program sangat mentukan suatu web itu statis,dinamis/ interaktifnya.
4. Desain Website
Unsur website yang penting dan utama adalah desain. Desain Website
menentukan kualitas sarta ke indahan dari website itu karena sangat
berpengaruh terhadap penilaian dari pengunjung website
5. Publikasi website.
Keberadaan seakan kekurangan makna dan nilai kegunaannya jika
dibangun tanpa dikunjungi atau dikenal oleh masyarakat atau pengunjung
internet. Karena efektif tidaknya situs sangat tergantung dari besarnya

16
pengunjung dan komentar yang masuk. Untuk mengenalkan situs kepada
masyarakat memerlukan apa yang disebut publikasi atau promosi tadi.
Secara makna sebuah website adalah sekumpulan halaman informasi yang
disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama
terkoneksi dengan jaringan internet.
2.5 HTML
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang
digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi
di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana
yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud
yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak
pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi
halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang
sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut
dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah
standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat
ini merupakan standar Internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh
kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di
CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di
Jenewa).

17
2.6 PHP
PHP (Hypertext Preprocessor) adalah bahasa skrip yang dapat ditanamkan atau
disisipkan ke dalam HTML. PHP banyak dipakai untuk memprogram situs web
dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
Adapun kelebihan dari PHP adalah sebagai berikut:
1. Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak
melakukan sebuah kompilasi dalam penggunaannya.
2. Web Server yang mendukung PHP dapat ditemukan di mana - mana
dari mulai apache, IIS, Lighttpd, hingga Xitami dengan konfigurasi
yang relatif mudah.
3. Dalam sisi pengembangan lebih mudah, karena banyaknya milis -
milis dan developer yang siap membantu dalam pengembangan.
4. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling
mudah karena memiliki referensi yang banyak.
5. PHP adalah bahasa open source yang dapat digunakan di berbagai
mesin (Linux, Unix, Macintosh, Windows) dan dapat dijalankan
secara runtime melalui console serta juga dapat menjalankan perintah-
perintah system.
PHP memiliki 8 tipe data, yaitu:
1. Boolean
2. Integer
3. Float/ Double
4. String

18
5. Array
6. Object
7. Resource
8. NULL
2.7 MySQL
Dalam MySQL, pada umumnya informasi tersimpan dalam table-tabel yang
secara logic merupakan struktur dua dimensi yang terdiri atas baris-baris data
(row atau record) yang berada dalam satu atau lebih kolom (column). Baris pada
table sering di sebut sebagai instance dari data sedangkan kolom sering di sebut
sebagai attributes atau field.
2.7.1 Tipe Data Field
Data yang terdapat dalam table berupa field-field yang berisi nilai dari data
tersebut. Nilai data dalam field ini memiliki tipe sendiri-sendiri. MySQL
mengenal beberapa tipe data field, yaitu:
1. Tipe data numeric
2. Tipe data string
3. Tipe data chart() dan varchar()
4. Tipe data tanggal

19
2.7.2 Fungsi-fungsi MySQL
Koneksi PHP ke database MySQL dilakukan dengan fungsi-fungsi sebagai
berikut:
1. mysql_connect
mysql_connect digunakan untuk melakuan koneksi ke server database
MySQL. Format penulisan yang digunakan: mysql_connect (nama_host,
nama_user, password);
2. mysql_create_db()
Fungsi dari mysql_create_db() adalah sebagai proses untuk membuat
database.
Bentuk umum penulisannya:
Mysql_create_db(nama_database);
3. mysql_select_db()
Funsi ini berguna untuk memilih/mengaktifkan database, seperti
penggunaan use. Format penulisannya: mysql_select_db(database,
nama_siswa). Dalam hal ini, database adalah nama database yang
digunakan, sedang pengenal nama_siswa adalah pengenal yang diperoleh
dari pemanggilan fungsi mysql_connect().
4. mysql_query
PHP tidak menyediakan fungsi khusus untuk membuat table dengan
fieldnya, sehingga untuk membuat tabel data tetap menggunakan sintaks
dari program databse MySQL yang digunakan, kemudian sintaks
dioperasikan menggunakan fungsi mysql_query() yang berfungsi untuk
menjalankan perintah query yang terdapat di MySQl.

20
5. mysql_db_query()
Fungsi ini digunakan untukmenjalankan suatu permintaan terhadap suatu
database. Fornat penulisan:
mysql_db_query(database,permintaan,nama_siswa)
6. mysql_fect_row()
Fungsi ini menghasilkan suatu array yang berisi seluruh kolom dari sebuah
baris pada suatu himpunan hasil. Format penulisan: mysql_fect_row
(pengenal_hasil). Pengenal hasil menyatakan nilaai yang diperoleh dari
hasil mysql_query. Fungsi mysql_fect_row() mengambil data dari variable
pengenal_hasil secara baris per baris. Pengambilan pertama adalah baris
data yang paling atas. Data yang diambil dalam bentuk array, dimana
elemen dari array adalah field-field dari tabel data.
7. mysql_fetch_array
Fungsi ini sama dengan mysql_fect_row(), dimana data dibaca per baris.
Namun jika menggunakan mysql_fetch_array maka hasil yang diperoleh
dalam bentuk array asosiatif.
2.8 CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman.

21
2.8.1 Penggunaan CSS
Ada tiga jenis cara dalam penggunaan CSS, yaitu:
1. External Style Sheet
Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css.
Untuk memanggilnya menggunakan script html yang disisipkan antara tag
head sebagai berikut:
<link rel=”stylesheet” type=”text/css” href=”direktori/filecss.css”/>
Pada bagian href tersebut tinggal diisi mengarah ke direktori
dimana Anda menempatkan file cssnya. Penggunaan sistem embeding css
ini sangat disarankan karena memang banyak kelebihan yaitu mudah untuk
melakukan pengeditan, mengatur semantic dan praktis terkumpul dari satu
file.
2. Internal Style Sheet
Adalah cara embedding css dengan menulis langsung di dalam file html
yang ingin kita atur tampilannya. Penulisan ini disisipkan diantara tag
head juga dengan diapit oleh tag style. Berikut contohnya:
<style type=”text/css”>
body{
background:#ccccc;
fount-family:Arial;
</style>

22
3. Inline Style Sheet
Adalah penulisan scropt css lansung pada tag html dengan menambahkan
style di dalamnya, contoh:
<p style=”front-size:20px:”>Tulisan yang diatur </p>
2.9 Dreamweaver CS6
Dalam proses pembuatan website, ada banyak software yang dapa digunakan.
Dreamweaver adalah salah satu software untuk membuat web yang sangat
fleksibel dan mudah digunakan.
Dreamweaver juga dapat digunakan dalam pembuatan aplikasi berbasis
web untuk melengkapi tampilan antarmuka dari aplikasi yang dibuat dengan
mengguakan bahasa pemograman yang khusus untuk pembuatan aplikasi berbasis
web seperti PHP, ASP.NET, dan lain sebagainya

BAB 3
PERANCANGAN SISTEM
3.1 Perancangan sistem
Perancangan sistem merupakan upaya perusahaan untuk memiliki sistem, baik
sistem yang lama maupun untuk melalui sistem yang baru. Perancangan sistem
dilakukan setelah mendapatkan gambaran dengan jelas apa yang harus di
kerjakan.
3.2 Diagram Konteks
Diagram Konteks adalah gambaran sistem secara logika. Gambaran ini tidak
tergantung pada perangkat keras, perangkat lunak, struktur data atau organisasi.
Pada tahap analisis, penangan notasi simbol linkaran dan anak panah mewakili
arus data pada perancangan sistem. Sangat membantu di dalam komunikasi
dengan pemakai sistem menggunakan notasi-notasi untuk menggambarkan arus
dari data sistem. Adapun simbol-simbol dari Diagram Konteks yaitu:

24
NO Gambar Nama Fungsi
Merupakan kesatuan luar di

Kesatuan Luar lingkungan yang akan memberikan
1
(Exsteral Entity) input atau menerima output dari
sistem.
Kegiatan dari hasil suatu arus data

yang masuk dalam proses untuk
2 Proses (Proses) dihasilkan arus data yang akan
keluar atau untuk mengubah input
menjadi output.
Data mengalir melalui sistem

Aliran Data
3 dimulai dengan sebagian input dan
(Data Flow)
diubah menjadi output.
Penyimpanan Data Data disimpan untuk keperluan

4
(Data Storage) berikutnya.

25
Berikut adalah Diagram Konteks dari rancangan Ensiklopedia Tentang Berbagai
Jenis Tanaman Hias Bungan di Indonesia Berbasis Web.
 Data Bunga
 Input Data Bunga
 Edit Data Bunga
 Hapus Data Bunga
 Edit Data Bunga
 Edit About
0
User Ensiklopedia Tanaman Hias Admin
Bunga di Indonesia
 Cari Data
Gambar 3.1 Data Flow Diagram (DFD) Diagram Konteks

26
3.3 Flowchart Sistem
Flowchart merupakan sekumpulan simbol-simbol yang menunjukan atau
menggambarkan rangkaian kegiatan program dari awal gingga akhir, flowchart
digunanakan untuk menggambarkan langkah-langkah di suatu algoritma.
Berikut adalah arti lambing-lambang flowchart :
Tabel 3.2 Simbol-simbol Flowchart
No Simbol Fungsi
Terminator, untuk memulai dan mengakhiri suatu

1
program.
Process, suatu simbol yang menunjukan setiap

2
pengolahan yang dilakukan oleh komputer.
Data, digunakan untuk memasukan data maupun hasil

3
dari suatu proses
Decision, suatu kondisi yang akan menghasilkan

4
beberapa kemungkinan jawaban atau pilihan.
Prepprearation, suatu simbol yang menyediakan

5
tempat-tempat pengolahan data dalam storage

27
Connector, adalah simbol untuk masuk dan keluarnya

6
suatu prosedur pada lembar kerja yang sama.
Off-Page Connector, adalah simbol untuk masuk dan

7
keluarnya suatu prosedur pada lembar kerja yang lain.
Arus atau flow, prosedur yang dapat dilakukan dari
8 atas ke bawah, bawah ke atas, kanan ke kiri, atau kiri
ke kanan.
Document, adalah simbol untuk data yang berbentuk

9
informasi
Predefinded process, digunakan untuk menyatakan
10 sekupulan langkah proses yang ditulis sebagai
prosedur
Manual Input, digunakan untuk mengimput data

11
secara manual
12 Magnetic Disk, untuk penyimpanan data

28
1. Flowchart Halaman utama
Start
Halaman
utama
Yes
Halaman
Home
utama
No Yes
Halaman
About
About
No Yes
Halaman
Help
Help
No Yes
Cari Data
Pencarian
Bunga
No Yes
Login Acount
Login
Admin
Stop
Gamabar 3.2 Flowchart Halaman Utama

29
2. Flowchart Halaman Pencarian
Start
Halaman Utama
Bunga yang
dicari
Data Tidak
Database Ditemukan
Katalog
Stop
Gambar 3.3 Flowvhart Halaman Pencarian

30
3. Flowchart Halaman Admin
Start
Admin
Tampilan
menu
Tampilan
No Home
admin
Edit tentang
No About bunga
Edit tentang
No Help
website
· Tambah data
No Data bunga · Edit data
· Hapus data
Stop
Gambar 3.4 Flowvhart Halaman Admin

31
3.4 Rancangan Database
Database merupakan sekumpulan dari data yang berhubungan dengan data yang
satu dan data yang lainnya. Database adalah salah satu komponen terpenting
dalam suatu sistem komputerisasi karena menyediakan informasi bagi pengguana.
Nama database yang dibuat oleh penulis adalah bunga dengan table-tabel
berikut ini:
Tabel 3.3 Bunga
Nama Field Tipe Data Wight
id_Bunga Varchar 1
Nama_latin Varchar 30
Nama_indonesia Varchar 30
Dekripsi Text -
Gambar Text -
Kategori Text -
3.5 Perancangan Antar muka (Interface)
Antarmuka adalah bagian dari sistem aplikasi yang digunakan sebagai media
komunikasi antara sistem dan user. Rancangan dari sistem ini terdiri dari beberapa
slide. Rancangannya adalah sebagai berikut:

32
1. Halaman utama (Beranda).
Home About Help Cari nama Bunga Cari
ENSIKLOPEDIA
TANAMAN HIAS BUNGA
Login To Your Account

username BackGround
Password
Login
Daftar Bunga Terbaru xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Gambar Gambar Gambar
Gambar Gambar Gambar xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Lihat semua bunga hias
Follow Us : Icon Icon Design By : Aulia Ukhti, Email : auliaukhtifathia1996@gmail.com
Gambar 3.5 Halaman Utama
2. Hasil Pencarian
Home About Help Cari nama Bunga Cari
ENSIKLOPEDIA
TANAMAN HIAS BUNGA
Nama bunga (Nama Latin)

Deskripsi
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Gambar xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
View Detail >>
Nama bunga (Nama Latin)

Deskripsi
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Gambar xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
View Detail >>
Gambar 3.6 Hasil pencarian

33
3. Menu Utama Admin
Home About Help Data Bunga Logout Cari nama Bunga Cari
ENSIKLOPEDIA
TANAMAN HIAS BUNGA
Daftar Bunga Terbaru xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Lihat semua bunga hias
Gambar 3.7 Halaman Utama Admin
4. About
ENSIKLOPEDIA
TANAMAN HIAS BUNGA
Form About
About :
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcccccccc
Ubah Batal
Gambar 3.8 About

34
5. Help
ENSIKLOPEDIA
TANAMAN HIAS BUNGA
Form Help
Help :
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcccccccc
Ubah Batal
Gambar 3.9 Help
6. Menu Data Bunga Admin
ENSIKLOPEDIA
TANAMAN HIAS BUNGA
Form Menu Data Bunga
Kode Bunga : 99999

Nama Latin : xxxxxxxxxxxxxxxx
Nama Indonesia : xxxxxxxxxxxxxxxx
Deskripsi : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxx
Gambar : Choose File No File Chosen
kategori : xxxxxxxxxxxxxxxx
Simpan Batal
Data Bunga
Action
Ubah Hapus
Ubah Hapus
Listview Ubah Hapus
Ubah Hapus
Ubah Hapus
Ubah Hapus
Gambar 3.10 Data Bunga Admin

BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Implementasi sistem adalah suatu yang akan dilakukan untuk menyelesaikan
sistem yang ada dalam dokumen rancangan sistem yang telah disetujui dan telah
diuji, mengistal dan memulai menggunakan sistem baru yang diperbaiki. Adapun
langkah-langkah yang dibutuhkan dalam implementasi sistem adalah:
1. Mendapatkan software dan hardware yang tepat serta sesuai untuk
merancang website.
2. Menyelesaikan rancangan sistem.
3. Menulis, menguji, mengontrol, dan mendokumentasikan website.
4. Mendapatkan persetujuan.
4.2 Tujuan Implementasi Sistem
Adapun tujuan dari implementasi sistem adaalah:
1. Memberi rangkain sistem baik dari segi software dan hardware sebagai
sarana pengolahan data dan penyajian informasi.
2. Menyelesaikan rancangan sistem yang ada didalam dokumen sistem yang
baru atau yang telah diuji.

36
4.3 Komponen Sistem
Untuk menjalankan sistm yang telah dirancang, dibutuhkan beberapa komponen,
antara lain:
4.3.1 Hardware
Merupakan suatu komponen yang sangat dibutuhkan dalam menyajikan sistem
yang akan diusulkan. Dalam hal ini, dapat dirincikan specifikasi komponen
hardware yaitu:
1. PC dengan processor Intel CoreTM i3-2330M
2. Hard disk 500 GB
3. Monitor Super VGA
4. Memory 2 GB DDR3
5. Keyboard
6. Printer
4.3.2 Software
Hardware tidak akan merancang suatu sistem tanpa adanya komponen software.
Adapun software yang sering digunakan dalam pembuatan website ini adalah:
1. Sistem operasi Ms. Windows7
2. XAMPP Version 2.5

37
3. Dreamweaver CS6 sebagai web editor.
4. Adobe Photoshop CS5 sebagai desain layout.
4.3.3 Brainware
Brainware adalah semua pihak yang bertanggung jawab dalam pengembangan
informasi, pemprosesan dan penggunaan keluaran informasi. Brainware dalam
sistem ini terbagi atas:
1. Sistem analis: orang yang menganalisa sistem dengan mempelajari
masalah-masalah yang timbul dan menentukan kebutuhan-kebutuhan
pemakai dan mengidentifikasi pemecahan yang beralasan.
2. Programmer: orang yang membuat sistem dengan menggunakan salah satu
bahasa pemograman yang dikuasainya.
3. Operator: orang yang mengguanakandan memanfaatkan sistem.

38
4.4 Tampilan Akhir Sistem
1. Halaman utama (Beranda).
Gambar 4.1 Halaman Utama
2. Hasil Pencarian
Gambar 4.2 Hasil Pencarian

39
3. Menu Utama Admin
Gambar 4.3 Halaman Utama Admin
4. About
Gambar 4.4 About

40
5. Help
Gambar 4.5 Help
6. Menu Data Bunga Admin
Gambar 4.6 Menu Data Bunga Admin

BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Dalam penulisan Tugas Akhir ini telah diuraikan bagaimana perancangan sistem
dalam membangun Ensiklopedia tanaman hias bunga di Indonesia berbasis web,
makaa dapat disimpulkan bahwa:
1. Membuka wawasan masyarakat umum tentang berbagai jenis tanaman
hias bunga yang berada di Indonesia .
2. Website ini sangat efisien karena dapat menghemat biaya dalam
penggunaan bahan cetak seperti pembuatan buku ensiklopedia pada
umumnya dan efektif dalam pencarian data yang ada dalam database
website tersebut, tidak seperti pada umumnya pada buku esnklopedia
kebanyakan.
3. Ensiklopedia tanaman hias bunga di Indonesia berbasis web ini dapat di
akses dimanapun, kapanpun, dan oleh siapapun.

42
5.2 Saran
1. Website ini harus selalu diupdate isinya, karena melihat pasang surutnya
tanaman hias bunga yang ada di Indonesia.
2. Selain memberikan informasi dan pengetahuan, website harus
dikembangkan untuk menarik minat dan mengajak masyarakat untuk
senantiasan menanam tanaman hias bunga sebagai sesuatu untuk
memperindah pekarangan rumah, dan dapat juga membudidayakannya.

DAFTAR PUSTAKA
Departemen Dalam Negeri Direktorat Jenderal Pembangunan Desa Milik PKK

Desa. 1980. Kebesaran Ilahi Di Alam Semesta Flora Indonesia Tanaman
Hias. Aneka Karya. Surabaya.
Hernita. 2013. Adobe Dreamweaver CS6. Andi. Yogyakarta.
Madcoms. 2015. Kupas Tuntas Pemograman PHP & MySQL dengan adobe
Dreamweaver CC. andi. Yogyakarta.
Siong, Y. K. and Budiana, NS. 2006. Philodendron : Tanaman Hias Daun Yang
Menawan. Penebar Swadaya. Jakarta.
Suryawinoto, S.m. 1997. Flora Eksotika, Tanaman Hias Berbunga. Kanisius.

Yogyakarta.

1
Lampiran 1. Listing Program
1. Index.php
<?php
session_start();
include("connection.php");
require_once("login.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>Tanaman Hias </title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"
media="all" />


</head>
<body>
<div id="header">
<ul>
<li class="selected"><a href="index.php">home</a></li>
<li><a href="index.php?menu=about">about</a></li>
<li><a href="index.php?menu=help">Help</a></li>
<?php
if(isset($_SESSION['login']) && $_SESSION['login']=="oke"){
?>
<li><a href="index.php?menu=databunga">Data
Bunga</a></li>
<li><a href="logout.php">Logout</a></li>
<?php
}else{
?>
<li>
<form action="index.php?menu=cari" method="post"
id="form_cari">

2
<input type="text" name="caribunga"

placeholder="Cari Nama Bunga"><input type="submit"
value="Cari">
</form>
</li>
<?php
}
?>
</ul>
<div class="logo"><a href="index.html"><img
src="images/logo1.gif" alt="" /></a></div>
</div>
<div id="body">
<?php require_once("param.php");?>
</div>
<div id="footer">
<div>
<div class="connect">
<h4>Follow us:</h4>
<ul>
<li class="facebook"><a href="#">facebook</a></li>
<li class="twitter"><a href="#">twitter</a></li>
</ul>
</div>
<p>Design By : Aulia Ukhti, Email :
auliaukhtifathia1996@gmail.com © 2017</p>
</div>
</div>
</body>
</html>
2. Login.php
<?php
if(!isset($_SESSION['login']) || $_SESSION['login']==""){
if(isset($_POST['login']) && $_POST['login'] == "Login"){
$USER = mysql_real_escape_string($_POST['username']);
$PASS = mysql_real_escape_string($_POST['password']);

3
$query = "select * from tbl_user where username =

'".$USER."' and password = '".$PASS."'";
$execute = mysql_query($query,$MYSQL);
if(mysql_num_rows($execute)>0){
$_SESSION['login']= "oke";
echo "<script>alert('Selamat
Datang');location.href='index.php';</script>";
}else{
echo "<script>alert('Akses Di
Tolak');</script>";
}
}
}
?>
3. Logout.php
<?php
session_start();
session_destroy();
$_SESSION = array();
echo "<script>location.href='index.php';</script>";
?>
4. About.php
<?php
$query = "select * from tbl_general where id='1'";
$row = mysql_fetch_array($execute);
$DATA = $row['about'];
?>
<div class="about">
<h1>about</h1>
<div>
<p><?php echo nl2br($DATA);?></p>

4
</div>
</div>
<?php
}else{
if(isset($_POST['proses']) && $_POST['proses']=="Ubah"){
$ABOUT = mysql_real_escape_string($_POST['about']);
$query = "update tbl_general set `about`='".$ABOUT."'
where id = '1'";
if(mysql_affected_rows()>0){
echo "<script>alert('Data Berhasil Di
Ubah');</script>";
}else{
echo "<script>alert('Data Gagal Di
Ubah');</script>";
}
}
$DATA = $row['about'];
?>
<div class="about">
<h1>Form About</h1>
<div class="form_admin_fill">
<form action="" method="post">
<table>
<tr>
<td>About :</td>
</tr>
<tr>
<td><textarea style="font-
family:arial;width:600px;height:200px;" name="about"
required><?php echo $DATA;?></textarea></td>
</tr>
<tr>

5
<td><input type="submit" name="proses"

value="Ubah"><a href="index.php"><button
type="button">Batal</button></a></td>
</tr>
</table>
</form>
</div>
</div>
<?php
}
?>
5. All_data
<?php
$query = "select * from tbl_bunga";
while($row = mysql_fetch_array($execute)){
$DATA1 = $row['id_bunga'];
$DATA2 = $row['nama_latin'];
$DATA3 = $row['nama_indonesia'];
$DATA4 = $row['deskripsi'];
$DATA5 = $row['gambar'];
$DATA6 = $row['kategori'];
if(is_file("images/bunga/".$DATA5)){
$GAMBAR_SHOW = '<img width="100px"
style="float:left;margin-right:10px;margin-top:10px;margin-
bottom:10px;" height="100px" src="images/bunga/'.$DATA5.'">';
}else{
$GAMBAR_SHOW = $DATA5;
}
echo '<div class="about" style="padding-bottom:5px;">
<h1 style="padding-
bottom:10px;padding-top:5px;">'.$DATA3.' ('.$DATA2.')</h1>

6
<h3>Kategori : '.$DATA6.'</h3>
<div>
<p>'.$GAMBAR_SHOW.'<b>Deskripsi
:</b><br>'.nl2br($DATA4).'</p>
</div>
<hr>
</div>';
}
}else{
echo '<div class="about">
<h1>Data Kosong</h1>
</div>';
}
?>
6. Cari.php
<?php
$KEYWORD = $_POST['caribunga'];
$query = "select * from tbl_bunga where nama_latin like
'%".$KEYWORD."%' or nama_indonesia like '%".$KEYWORD."%'";
while($row = mysql_fetch_array($execute)){
$IDX_SHOW = $row['id'];
}else{

7
}
echo '<div class="about" style="padding-bottom:5px;">
<a
href="index.php?show='.$IDX_SHOW.'" style="text-
decoration:none;"><h1 style="padding-bottom:10px;padding-
top:5px;">'.$DATA3.' ('.$DATA2.')</h1></a>
<div>
<br>
<a
href="index.php?show='.$IDX_SHOW.'" style="text-
decoration:none;font-weight:bold;"><p>Lihat Detail
>></p></a>
</div>
<hr>
</div>';
}
}else{
<h1>Data Tidak Di Temukan</h1>
</div>';
}
?>
7. Help.php
<?php
$DATA = $row['help'];
?>

8
<div class="about">
<h1>Help</h1>
<div>
<p><?php echo nl2br($DATA);?></p>
</div>
</div>
<?php
}else{
if(isset($_POST['proses']) && $_POST['proses']=="Ubah"){
$HELP = mysql_real_escape_string($_POST['help']);
$query = "update tbl_general set `help`='".$HELP."'
where id = '1'";
if(mysql_affected_rows()>0){
echo "<script>alert('Data Berhasil Di
Ubah');</script>";
}else{
echo "<script>alert('Data Gagal Di
Ubah');</script>";
}
}
$DATA = $row['help'];
?>
<div class="about">
<h1>Form Help</h1>
<div class="form_admin_fill">
<form action="" method="post">
<table>
<tr>
<td>Help :</td>
</tr>
<tr>
<td><textarea style="font-
family:arial;width:600px;height:200px;" name="help"
required><?php echo $DATA;?></textarea></td>

9
</tr>
<tr>
<td><input type="submit" name="proses"
value="Ubah"><a href="index.php"><button
type="button">Batal</button></a></td>
</tr>
</table>
</form>
</div>
</div>
<?php
}
?>
8. Home.php
<div class="featured">
<div>
<ul>
<li>
<?php
if(isset($_SESSION['login']) &&
$_SESSION['login']=="oke"){
?>
<a href="#"><img src="images/backyard.jpg"
alt="" /></a>
<?php
}else{
?>
<div id="form_login">
<form action="index.php" method="post">
<h3>Login To Your Account</h3>
<input type="text" placeholder="Username"
name="username" autofocus>
<input type="password"
placeholder="Password" name="password">
<input type="submit" value="Login"
name="login">
</form>

10
</div>
<?php
}
?>
</li>
<li><a href="#"><img src="images/garden.jpg" alt=""
/></a></li>
</ul>
<div class="section">
<div> <a href="#"><img src="images/bridal-bouquet.jpg"
alt="" /></a>
</div>
</div>
</div>
</div>
<div class="content"> <span class="heading"><img
src="images/special-occasions-flowers.gif" alt="" /></span>
<div>
<div>
<ul>
<?php
$query = "select * from tbl_bunga order by
id desc limit 9";
$i=1;
while($row =
mysql_fetch_array($execute)){
$_GET_ID_X = $row['id'];
$DATA1XX = $row['id_bunga'];
$DATA2XX = $row['nama_latin'];
$DATA3XX =
$row['nama_indonesia'];
$DATA4XX = $row['gambar'];
$DATA5XX = $row['kategori'];
if(is_file("images/bunga/".$DATA4XX)){

11
$GAMBAR_SHOW = '<li
class="bunga_frame">
<a href="index.php?show='.$_GET_ID_X.'">
<img width="140px" height="150px"

src="images/bunga/'.$DATA4XX.'">
<span>'.$DATA2XX.'</span>
</a>
</li>';
}else{
$GAMBAR_SHOW = "";
}
echo $GAMBAR_SHOW;
$i++;
}
}
?>
</ul>
<h4><a href="index.php?show=all">Lihat Semua Bunga
Hias</a></h4>
</div>
<ul>
<li>
<h3>Tanah air Indonesia membentang di daerah
khatulistiwa dan mempunyai dua musim, yaitu musim hujan dan
musim kemarau. Banyak jenis tanaman yang memiliki anekaragam
mulai dari bentuk dan warna bunga yang sangat indah yang dapat
tumbuh dan berkembang dengan baik..</h3>
<p>
Tanaman hias bunga didefinisikan sebagai
tumbuhan yang mempunyai bunga berpesona cantik dengan satu
atau banyak warna. Tanaman hias bunga dapat menambah keindahan
suatu ruangan atau lingkungan di sekitarnya serta membuatnya

12
terlihat lebih asri. Kita bisa menanam tanaman hias bunga di

dalam pot atau pada lahan tanah.
</p>
</li>
<li>
<h3>Dalam arsitektur lansekap, bentuk dan penempatan
tanaman hias menjadi pertimbangan yang penting. Isu lainnya
yang penting dalam tanaman hias adalah habitat alami yang
disukai tumbuhan tersebut serta bentuk tajuk yang dimilikinya.
Dalam pengertian ini, tanaman hias dapat mencakup pula tanaman
tepi jalan serta tanaman penaung (di ruang terbuka).</h3>
<p>
Tanaman ini punya karakteristik keindahan pada
sisi bunga yang dimiliki. Memiliki beragam bentuk, ukuran,
warna, dan keharuman. Sebagai contoh, ada bunga mawar yang
punya warna dan bentuk yang cantik dan anggun.
</p>
</li>
</ul>
</div>
</div>
9. Connection.php
<?php
$MYSQL = mysql_connect("localhost","root","");
$db = mysql_select_db("db_bunga",$MYSQL);
?>
10. Param.php
<?php
$GET_MENU = $_GET['menu'];
if($GET_MENU == "about"){
require_once("menu/about.php");
}elseif($GET_MENU == "databunga"){
require_once("menu/bunga/index.php");

13
}elseif($GET_MENU == "help"){
require_once("menu/help.php");
}elseif($GET_MENU == "cari"){
require_once("menu/cari.php");
}else{
if(isset($_GET['show'])){
if($_GET['show'] == "all"){
require_once("menu/all_data.php");
}else{
require_once("menu/detail.php");
}
}else{
require_once("menu/home.php");
}
}
?>
11. Detail.php
<?php
$GET_IDX_SHOW = mysql_real_escape_string($_GET['show']);
$query = "select * from tbl_bunga where
id='".$GET_IDX_SHOW."'";

14
}else{
}
<h1 style="padding-
bottom:10px;">'.$DATA3.' ('.$DATA2.')</h1>
<div>
</div>
</div>';
}else{
<h1>Data Tidak Di Temukan</h1>
</div>';
}
?>
12. Style.CSS
#form_cari input[type='text']{
border-radius:5px 0px 0px 5px;
border:1px solid #FF1A62;
}
#form_cari input[type='submit']{
background:#C30075;
border:1px solid #CD0040;
color:#FDFDFD;
padding-left:10px;
padding-right:10px;
text-transform:uppercase;
}
#form_cari input{
padding:5px;
}

15
body{
background:#c30075;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#header{
background:url(../images/bg-header.jpg) repeat-x center top;
margin:0;
padding:0;
overflow:hidden;
min-width:960px;
}
#header ul{
margin:0 auto;
overflow:hidden;
padding:31px 0 34px 0;
text-align:center;
width:960px;
}
#header ul li{
display:inline-block;
list-style:none;
margin:0 15px;
padding:0;
}
#header ul li a{
color:#fff;
display:block;
font-family:Times New Roman;
font-size:18px;
font-weight:bold;
height:32px;
line-height:32px;
margin:0;
padding:0 10px 0 0;
text-decoration:none;
text-transform:capitalize;
}

16
#header ul li.selected, #header ul li.selected a{

background:url(../images/menu.gif) no-repeat top left;
}
#header ul li.selected{
background-position:0 0;
padding:0 0 0 10px;
}
#header ul li.selected a{
background-position:right -34px;
}
#header ul li a:hover{
color:#fff6e0;
}
#header div{
margin:0 auto;
padding:0 0 61px 10px;
width:960px;
}
#header div.logo a{
display:block;
margin:0;
padding:0;
width:301px;
}
#header div.logo a img{
border:0;
}
#body{
background:#fefef6 url(../images/bg-content.gif) repeat-x
top left;
margin:0;
padding:0;
min-width:960px;
}
#body h1{
color:#918873;
font-size:36px;
margin:0;

17
padding:48px 0;
}
#body h3{
color:#918873;
font-size:16px;
line-height:24px;
margin:0;
padding:0;
text-align:justify;
}
#body h3 a{
color:#918873;
margin:0;
padding:0;
}
#body h3 a:hover{
color:#b7b1a1;
}
#body p{
color:#918873;
font-size:14px;
line-height:24px;
margin:0;
padding:0;
text-align:justify;
}
#body p a{
color:#918873;
}
#body p a:hover{
color:#b7b1a1;
}
#body div.featured{
background:#c30075 url(../images/bg-content.gif) repeat-x
bottom left;
height:338px;
margin:0;
padding:0;

18
}
#body div.featured div{
margin:0 auto;
padding:0 10px;
width:940px;
}
#body div.featured div ul{
margin:0;
overflow:hidden;
padding:0;
width:480px;
}
#body div.featured div ul li{
float:left;
list-style:none;
margin:0 20px 0 0;
padding:0;
width:220px;
}
#body div.featured div ul li img{
border:2px solid #e07cb3;
margin:0;
padding:0;
}
#body div.featured div div.section{
position:relative;
}
#body div.featured div div.section div{
left:470px;
position:absolute;
top:-359px;
width:470px;
}
#body div.featured div div.section div img{
border:0;
margin:0;
}
#body div.featured h2{
color:#f085c5;

19
font-size:25px;
margin:-12px 0 0 0;
padding:0;
}
#body .content{
margin:0 auto;
padding:0 0 72px 0;
width:960px;
}
#body .content span.heading{
display:block;
margin:0;
padding:0;
position:relative;
}
#body .content span.heading img{
left:50px;
position:absolute;
top:-47px;
z-index:3;
}
#body .content div{
margin:0;
padding:0;
overflow:hidden;
width:960px;
}
#body .content div ul{
float:left;
margin:0;
padding:45px 0 0 0;
width:470px;
}
#body .content div ul li{
background:url(../images/border.gif) repeat-x bottom left;
list-style:none;
margin:0 10px 15px 0;
padding:0 0 18px 0;

20
}
#body .content div ul li:last-child{
background:none;
}
#body .content div div ul li a{
}
#body .content div div ul li a:hover span{
color:#b7b1a1;
}
#body .content div div ul li img{
border:0;
}
#body .content h3{
color:#918873;
font-size:16px;
line-height:24px;
margin:0;
padding:0;
}
#body .content h3 a{
color:#918873;
}
#body .content h3 a:hover{
color:#b7b1a1;
}
#body .content div ul li p{
color:#918873;
font-size:14px;
line-height:24px;
margin:0;
padding:0;
text-align:justify;
}
#body .content div ul li p a{
color:#918873;
}
#body .content div ul li p a:hover{
color:#b7b1a1;

21
}
#body .content div div{
float:left;
margin:0 10px 0 0;
overflow:hidden;
padding:0 10px 0 0;
width:470px;
}
#body .content div div ul{
float:none;
margin:0;
overflow:hidden;
width:480px;
}
#body .content div div ul li{
background:none;
float:left;
list-style:none;
margin:0 10px 15px;
padding:0;
}
#body .content div div ul li span{
color:#857b63;
display:block;
font-size:14px;
margin:0;
padding:0;
text-align:center;
}
#body .content div div h4{
background:url(../images/icons.gif) no-repeat left -62px;
float:left;
margin:0 0 0 140px;
padding:0 0 0 30px;
}
#body .content div div h4 a{
background:url(../images/icons.gif) no-repeat right -86px;
color:#857b63;
display:block;

22
height:16px;
font-size:16px;
margin:0;
padding:0 30px 0 0;
}
#body .content div div h4 a:hover{
color:#b7b1a1;
}
#body .gallery{
margin:0 auto;
padding:0;
padding:0 0 50px 10px;
width:950px;
}
#body .gallery div{
margin:0;
overflow:hidden;
padding:0 0 5px 0;
}
#body .gallery div div{
float:left;
width:470px;
}
#body .gallery div ul{
float:left;
margin:0;
overflow:hidden;
padding:0;
width:480px;
}
#body .gallery div ul li{
float:left;
list-style:none;
margin:0 10px 10px;
padding:0;
}

23
#body .gallery div img{

border:0;
}
#body .handling{
margin:0 auto;
padding:0 10px 50px 10px;
width:940px;
}
#body .handling div{
overflow:hidden;
padding:0;
}
#body .handling div ul{
float:left;
margin:0;
padding:20px 0 0;
width:560px;
}
#body .handling div ul li{
background:url(../images/bullet.gif) no-repeat 0 10px;
list-style:none;
margin:0;
padding:0 30px 0 20px;
}
#body .handling div div{
float:left;
margin:0;
padding:20px 0 0;
width:378px;
}
#body .handling div div img{
border:1px solid #948b76;
margin:0;
padding:0;
}
#body .payment{
margin:0 auto;
overflow:hidden;
padding:0 0 50px 0;

24
width:940px;
}
#body .payment div{
overflow:hidden;
}
#body .payment div .article{
float:left;
margin:0;
padding:0;
width:600px;
}
#body .payment .section1{
background:url(../images/border2.gif) repeat-x bottom left;
margin:0 0 20px 0;
padding:0 0 20px 0;
}
#body .payment .section1 .article{
padding:0 20px 0 0;
}
#body .payment .section2 .article{
padding:0 0 0 20px;
}
#body .payment div .article ul{
margin:0;
padding:0 0 0 10px;
}
#body .payment div .article ul li{
background:url(../images/bullet.gif) no-repeat 0 10px;
list-style:none;
margin:0;
padding:0 0 0 15px;
}
#body .payment div div{
float:left;
margin:0;
padding:0;
width:320px;
}
#body .payment div div img{

25
border:1px solid #918873;

margin:0;
padding:0;
}
#body .about{
margin:0 auto;
width:940px;
}
#body .about h2{
color:#918873;
font-size:16px;
margin:0;
padding:0 0 5px 0;
}
#body .about div{
margin:0;
padding:0 0 30px 0;
}
#body .blog{
margin:0 auto;
overflow:hidden;
width:940px;
}
#body .blog div{
float:left;
margin:0;
padding:0;
width:640px;
}
#body .blog ul{
float:right;
margin:0;
padding:0 0 0 28px;
width:272px;
}
#body .blog ul li{

26
background:url(../images/border2.gif) repeat-x bottom left;

list-style:none;
margin:0 0 15px;
padding:0 0 15px;
}
#body .blog ul li h3{
font-size:14px;
}
#body .blog ul li:last-child{
background:none;
}
#body .contact{
margin:0 auto;
width:940px;
}
#body .contact div{
overflow:hidden;
margin:0;
padding:0;
}
#body .contact div div{
float:left;
width:470px;
}
#body .contact ul{
margin:0;
padding:0;
}
#body .contact ul li{
color:#918873;
font-size:14px;
list-style:none;
margin:0;
padding:8px 0 0;
}
#body .contact ul li span{
background:url(../images/colon.gif) no-repeat center right;
display:inline-block;

27
margin:0 10px 0 0;
padding:0;
width:80px;
}
#body .contact div h4{
color:#918873;
font-size:14px;
margin:0;
padding:30px 0 0;
text-transform:uppercase;
}
#footer{
background:url(../images/bg-footer.gif) repeat-x top left;
margin:0;
padding:40px 0;
}
#footer div{
margin:0 auto;
overflow:hidden;
padding:0;
width:940px;
}
#footer div .connect{
float:left;
overflow:hidden;
width:auto;
}
#footer div .connect h4{
color:#e794c6;
float:left;
font-size:14px;
font-weight:bold;
line-height:28px;
margin:0;
padding:0;
}
#footer div .connect ul{
float:left;
margin:0;

28
padding:0;
overflow:hidden;
width:200px;
}
#footer div .connect ul li{
float:left;
list-style:none;
margin:0 0 0 15px;
padding:0;
}
#footer div .connect ul li a{
display:block;
height:26px;
width:38px;
text-indent:-99999em;
}
#footer div .connect ul li.facebook a{
background:url(../images/icons.gif) no-repeat 0 0;
}
#footer div .connect ul li.twitter a{
background:url(../images/icons.gif) no-repeat 0 -30px;
}
#footer div p{
color:#e794c6;
float:right;
font-size:12px;
}
#footer div p a{
color:#e794c6;
}
#form_login h3{
color:#FFFFFF;
}
#form_login input[type=text],#form_login input[type=password]{
width:160px;
}
#form_login input{

29
display:block;
padding:5px;
margin:5px;
}
#form_login input[type=submit]{
padding-left:20px;
padding-right:20px;
}
.form_admin_fill input,.form_admin_fill
button,.form_admin_fill textarea,.form_admin_fill select{
padding:5px;
margin:5px;
}
.form_admin_fill input[readonly]{
background:#D7D7D7;
border:1px solid #B3B3B3;
}
.form_admin_fill textarea{
font-family:arial;
width:600px;
height:200px;
}
.table_data_bunga table{
border-collapse:collapse;
}
.table_data_bunga table tr th{
background:#FF67C5;
}
.table_data_bunga table tr td,.table_data_bunga table tr th{
border:1px solid #E00068;
padding:10px;
}
.table_data_bunga table tr td a{
color:#FF67C5;
font-weight:bold;
}
.bunga_frame{

30
width:140px;
height:170px;
overflow:hidden;
}
.bunga_frame a img{
border-radius:10px;
}

Ensiklopedia Tentang Berbagai Jenis Tanaman Hias Bunga Di Indonesia Berbasis Web

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ensiklopedia Tentang Berbagai Jenis Tanaman Hias Bunga Di Indonesia Berbasis Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Universitas Sumatera Utara

Repositori Institusi USU http://repositori.usu.ac.id