Membuat Tampilan Grafik Pada Website
Membuat Tampilan Grafik Pada Website
Seringkali kita temui sebuah website yang berisi data-data (entah data apapun…) biasanya dilengkapi
dengan tampilan grafik untuk memudahkan pengunjung untuk melihat dan membandingkan data yang
telah tersedia. Berbicara mengenai grafik dan website, keduanya memiliki fungsi tersendiri tetapi dapat
juga digabungkan sehingga memiliki fungsi yang saling berkaitan. Nah, anda bingung kan??? saya sendiri
juga bingung nih, pada paragraf pertama ini memang berisi kurang lebih semacam sambutan atau lebih
tepatnya pengantar sebagai pemanasan saja. Ibarat orang yang ingin berenang, sebaiknya melakukan
senam kecil sebagai pemanasan agar tidak terjadi kram saat berenang. Lho mas, (ada yang protes nih
ceritanya) saya tidak melakukan pemanasan tetapi kok tidak kram saat berenang??? Ya mungkin aja
berenangnya tidak sungguh-sungguh, cuma berendam aja sambil melihat-lihat pemandangan bagus
disekitar kolam (baca = makhluk-makhluk cantik disekitar kolam renang). hehehehehehe….. lho????
Ok, paragraf kedua serius nih….
Berbicara mengenai grafik, biasanya terdapat beberapa data atau sekumpulan data yang akan
direpresentasikan kedalam bentuk gambar (grafik) dengan tampilan yang bermacam-macam sesuai
dengan kebutuhan (ex: grafik batang, lingkaran/pie, dll). Dalam ilmu per-website-an data tersebut dapat
diinputkan secara manual dan dapat juga diambil dari basis data (database) yang telah ada. Dalam
penyajiannya pun tampilan grafik juga memiliki teknik tersendiri, ada yang menampilkannya secara
manual, ada juga yang menampilkannya secara real-time. Pada tulisan ini akan diulas sedikit mengenai
pembuatan grafik pada halaman website dengan menampilkan data-data secara manual menggunakan
modul-modul (library) jpgraph dengan bahasa pemrograman PHP (untuk pembuatan grafik dengan data
real-time akan diulas pada postingan yang akan datang dilain kesempatan). Untuk mendapatkan jpgraph,
anda dapat mengunjungi alamat url ini untuk mengunduh file yang dimaksud.
Ok, tidak perlu bertele-tele dan berpanjang lebar, berikutnya adalah proses atau langkah pembuatannya.
Hal-hal yang perlu dipersiapkan antara lain : Kemauan dan niat untuk belajar, Personal Komputer, laptop
atau sejenisnya (asal bukan kalkulator, Tv, Hp, apalagi radio), kemudian perangkat lunak yang digunakan
antara lain : OS komputer (windows / linux / dlsb), apache webserver, mysql database, PHP, text editor,
dlsb. Kebutuhan terakhir ini bersifat opsional : snack, kopi, pisang goreng, teh anget, stmj, nasi goreng,
soto, dll. Enak tuh belajar sambil ngemil, biar cepet gendut ga kayak penulis nih, kurus ga bisa lemu-lemu
(gendut) hehehehe…..
Tahap Awal Persiapan
Setelah kawan-kawan mengunduh modul/library dari jpgraph, selanjutnya adalah melakukan konfigurasi
sederhana sesuai dengan petunjuk yang ada di website jpgraph tersebut. Asumsi bahwa komputer yang
anda gunakan telah terkondisi dan siap digunakan untuk merancang sebuah halaman website atau
dengan kata lain komputer yang anda gunakan sudah terpasang/terinstall program-program pendukung
(ex : webserver, database, PHP, browser, dll). Untuk contoh pada tulisan ini penulis menggunakan
spesifikasi Windows XP Operating System, Xampp yang berisi Apache webserver, MySQL Database, PHP.
Program pendukung lainnya, penulis menggunakan notepad++ sebagai editor script / source code.
Data Source
Langkah selanjutnya adalah mempersiapkan data yang akan kita plot kedalam grafik, secara umum
sumber data yang akan diplot dalam grafik dapat berasal dari :
Data statis, dalam desain programnya data tersebut berada dalam listing kode dan terintegrasi didalam
script program.
Data dinamis yang tersimpan dalam file text biasa.
Data yang tersimpan dalam format biner pada suatu file.
Data yang tersimpan didalam suatu basis data atau database.
Data yang dikirim ke script melalui parameter URL, baik menggunakan metode GET maupun POST.
Setelah kita tentukan sumber data, selanjutnya kita tentukan grafik apa yang cocok untuk data tersebut,
apakah grafik batang (bar), grafik garis (line), ataukah grafik lingkaran (pie). Pada contoh tulisan ini hanya
akan dijelaskan beberapa type dari sumber data, untuk selanjutnya kawan-kawan dapat
memodifikasinya sesuai dengan kebutuhan.
Graph from External File Data Source
Pada sub bagian artikel ini penulis mencoba untuk share kepada kawan-kawan tentang pembuatan grafik
pada website dengan sumber data yang berasal dari file lain (external file) yaitu dengan data yang
berasal dari sebuah file text. Langkah awal adalah mempersiapkan data (data sembarang) yang kita tulis
pada sebuah file text (text editor), seperti notepad misalnya.
ex :
0 0
1 2
2 3
3 3
4 5
5 5
6 2
4 9
Kemudian ketikkan source code PHP, sebagai berikut :
Results :
Gambar 1. Hasil grafik dari external data text.
Keuntungan dari jpgraph ini adalah grafik yang ditampilkan pada halaman website dapat kita simpan
sebagai file image (gambar). Selain itu, source code atau script pembangun grafik dapat kita panggil
sebagai perintah baru untuk menampilakan (perintah img src pada html) gambar pada script atau code
lain.
Graph From Database Data Source
Grafik dengan sumber data dari external file sudah kita buat, selanjutnya adalah membuat grafik dari
sumber data yang lain. Pengambilan data dari database sangat sering kita jumpai, karena dengan cara ini
menurut penulis pribadi adalah sebuah metode yang efisien, untuk lebih jelasnya mari kita lihat yang
satu ini :
Membuat Database / Database Design
Langkah awal pada bagian ini adalah menyiapkan database sebagai wadah atau tempat penyimpan data
yang akan diplot ke grafik. Data dapat berupa nilai yang bersifat integer maupun nilai yang bersifat
karakter, tetapi kembali lagi ke tujuan awal dan kebutuhan kawan-kawan dalam menginterpretasikan
data kedalam tampilan grafik. Sebagai contoh nih, enak’an pakai studi kasus aja ya ?? gimana, setuju
ngga ? setuju aja ya…..enak kok, nggak sakit…paling kayak di gigit semut…hehehe…
Ok, begini ceritanya (studi kasus)…. Pada suatu hari yang cerah, matahari muncul di balik pepohonan. Di
pagi hari yang cerah itu si-budi mengawali hari pertama kuliahnya di suatu perguruan tinggi favorit di
Negri Antah Berantah. Kemudian si-budi berkenalan dengan teman-teman barunya yang notabene
berasal dari berbagai penjuru kota. Setelah selesai berkenalan, budi menghitung total mahasiswa
(termasuk budi juga lho) yang berasal dari Kota-A sebanyak 5 Orang pria 3 orang wanita, dari Kota-B
sebanyak 8 orang pria 4 orang wanita, dari Kota-C sebanyak 2 orang pria 3 orang wanita, dari Kota-D
sebanyak 9 orang pria 4 orang wanita, dari Kota-E 3 orang pria 5 orang wanita, dan dari Kota-F 7 orang
pria 2 orang wanita.
Nah, dari cerita singkat tadi kita buat grafiknya dengan data yang kita inputkan terlebih dahulu pada
database. Untuk itu, mari kita buat database dan tabelnya terlebih dahulu.
Gambar 2. Database Studi Kasus.
Creating Graph From Database Data Source
Setelah database siap dan data sudah dimasukkan ke dalam tabel, maka grafik siap dihidangkan
(ditampilkan). Permasalahan klasik yang muncul (terutama terjadi pada pemula) adalah ketika kita sudah
mendapatkan data-data tersebut, kemudian menjadi bingung saat ditanya “Ingin membuat grafik seperti
apa???” atau “Data apa yang akan dibandingkan???” Pertanyaan-pertanyaan tersebut selalu berkecamuk
didalam pikiran, untuk itu sebelum membuat grafik terlebih dahulu kita tentukan permasalahannya.
Pada contoh studi kasus ini, penulis hanya memberikan contoh sederhana dengan menampilkan data
total mahasiswa (Pria dan Wanita) tiap-tiap kota untuk ditampilkan ke dalam grafik batang.
Berikut adalah resepnya (source code) :
Results :
Gambar 3. Grafik batang (bar) dengan sumber data yang di ambil dari database.
Source Code Request
Apabila kawan-kawan ingin memperoleh source code lengkap pembuatan grafik seperti diatas, sebagai
bahan referensi maupun untuk dimodifikasi ulang silahkan request by email: heruwidakdo@gmail.com
(ada yg protes nih critanya : lho, kok pelit sih? msk gt aja ga mau kasih link-nya) —> nah, itu dia
masalahnya… setelah saya kompres file nya agak gede dikit, koneksi modem saya ngga kuat buat
ngupload. Maklumlah, rakyat kecil buat internetan aja susahnya minta ampun, padahal buat sharing
lho… di gratiskan aja tuh biaya-biaya internet, biar maju pendidikan di negara kita tercinta. OK, setuju
kan ??? hehehe…..
Penutup
Sampai sekian dulu kawan artikel kali ini yang saya beri judul “Membuat Tampilan Grafik Pada Website”
sebenarnya masih sangat banyak sekali yang ingin penulis sampaikan, berhubung waktu, tenaga, dan
pikiran yang terbatas dengan berat hati kita harus berpisah untuk sementara waktu. Ibarat pepatah
mengatakan “Jika ada sumur di ladang boleh kita menumpang mandi, kalau ada waktu luang ijinkan saya
menulis lagi ” segala waktu yang tersita untuk membaca tulisan ini dan juga kesalahan dalam penulisan,
penulis menyampaikan permintaan maaf yang sedalam-dalamnya (sedalam lautan) maklum, penulis juga
newbie nih…..hehehe….di lain kesempatan mungkin kita bisa share tentang pembuatan grafik dengan
cara maupun metode yang berbeda. So, tunggu aja yach….hihihihi… Sampai Jumpa & Semoga
Bermanfaat…….MERDEKA!!!!!!
Regards
Seringkali kita temui sebuah website yang berisi data-data (entah data apapun…) biasanya dilengkapi
dengan tampilan grafik untuk memudahkan pengunjung untuk melihat dan membandingkan data yang
telah tersedia. Berbicara mengenai grafik dan website, keduanya memiliki fungsi tersendiri tetapi dapat
juga digabungkan sehingga memiliki fungsi yang saling berkaitan. Nah, anda bingung kan??? saya sendiri
juga bingung nih, pada paragraf pertama ini memang berisi kurang lebih semacam sambutan atau lebih
tepatnya pengantar sebagai pemanasan saja. Ibarat orang yang ingin berenang, sebaiknya melakukan
senam kecil sebagai pemanasan agar tidak terjadi kram saat berenang. Lho mas, (ada yang protes nih
ceritanya) saya tidak melakukan pemanasan tetapi kok tidak kram saat berenang??? Ya mungkin aja
berenangnya tidak sungguh-sungguh, cuma berendam aja sambil melihat-lihat pemandangan bagus
disekitar kolam (baca = makhluk-makhluk cantik disekitar kolam renang). hehehehehehe….. lho????
Ok, paragraf kedua serius nih….
Berbicara mengenai grafik, biasanya terdapat beberapa data atau sekumpulan data yang akan
direpresentasikan kedalam bentuk gambar (grafik) dengan tampilan yang bermacam-macam sesuai
dengan kebutuhan (ex: grafik batang, lingkaran/pie, dll). Dalam ilmu per-website-an data tersebut dapat
diinputkan secara manual dan dapat juga diambil dari basis data (database) yang telah ada. Dalam
penyajiannya pun tampilan grafik juga memiliki teknik tersendiri, ada yang menampilkannya secara
manual, ada juga yang menampilkannya secara real-time. Pada tulisan ini akan diulas sedikit mengenai
pembuatan grafik pada halaman website dengan menampilkan data-data secara manual menggunakan
modul-modul (library) jpgraph dengan bahasa pemrograman PHP (untuk pembuatan grafik dengan data
real-time akan diulas pada postingan yang akan datang dilain kesempatan). Untuk mendapatkan jpgraph,
anda dapat mengunjungi alamat url ini untuk mengunduh file yang dimaksud.
Ok, tidak perlu bertele-tele dan berpanjang lebar, berikutnya adalah proses atau langkah pembuatannya.
Hal-hal yang perlu dipersiapkan antara lain : Kemauan dan niat untuk belajar, Personal Komputer, laptop
atau sejenisnya (asal bukan kalkulator, Tv, Hp, apalagi radio), kemudian perangkat lunak yang digunakan
antara lain : OS komputer (windows / linux / dlsb), apache webserver, mysql database, PHP, text editor,
dlsb. Kebutuhan terakhir ini bersifat opsional : snack, kopi, pisang goreng, teh anget, stmj, nasi goreng,
soto, dll. Enak tuh belajar sambil ngemil, biar cepet gendut ga kayak penulis nih, kurus ga bisa lemu-lemu
(gendut) hehehehe…..
Tahap Awal Persiapan
Setelah kawan-kawan mengunduh modul/library dari jpgraph, selanjutnya adalah melakukan konfigurasi
sederhana sesuai dengan petunjuk yang ada di website jpgraph tersebut. Asumsi bahwa komputer yang
anda gunakan telah terkondisi dan siap digunakan untuk merancang sebuah halaman website atau
dengan kata lain komputer yang anda gunakan sudah terpasang/terinstall program-program pendukung
(ex : webserver, database, PHP, browser, dll). Untuk contoh pada tulisan ini penulis menggunakan
spesifikasi Windows XP Operating System, Xampp yang berisi Apache webserver, MySQL Database, PHP.
Program pendukung lainnya, penulis menggunakan notepad++ sebagai editor script / source code.
Data Source
Langkah selanjutnya adalah mempersiapkan data yang akan kita plot kedalam grafik, secara umum
sumber data yang akan diplot dalam grafik dapat berasal dari :
Data statis, dalam desain programnya data tersebut berada dalam listing kode dan terintegrasi didalam
script program.
Data dinamis yang tersimpan dalam file text biasa.
Data yang tersimpan dalam format biner pada suatu file.
Data yang tersimpan didalam suatu basis data atau database.
Data yang dikirim ke script melalui parameter URL, baik menggunakan metode GET maupun POST.
Setelah kita tentukan sumber data, selanjutnya kita tentukan grafik apa yang cocok untuk data tersebut,
apakah grafik batang (bar), grafik garis (line), ataukah grafik lingkaran (pie). Pada contoh tulisan ini hanya
akan dijelaskan beberapa type dari sumber data, untuk selanjutnya kawan-kawan dapat
memodifikasinya sesuai dengan kebutuhan.
Graph from External File Data Source
Pada sub bagian artikel ini penulis mencoba untuk share kepada kawan-kawan tentang pembuatan grafik
pada website dengan sumber data yang berasal dari file lain (external file) yaitu dengan data yang
berasal dari sebuah file text. Langkah awal adalah mempersiapkan data (data sembarang) yang kita tulis
pada sebuah file text (text editor), seperti notepad misalnya.
ex :
0 0
1 2
2 3
3 3
4 5
5 5
6 2
4 9
Kemudian ketikkan source code PHP, sebagai berikut :
Results :
Gambar 1. Hasil grafik dari external data text.
Keuntungan dari jpgraph ini adalah grafik yang ditampilkan pada halaman website dapat kita simpan
sebagai file image (gambar). Selain itu, source code atau script pembangun grafik dapat kita panggil
sebagai perintah baru untuk menampilakan (perintah img src pada html) gambar pada script atau code
lain.
Graph From Database Data Source
Grafik dengan sumber data dari external file sudah kita buat, selanjutnya adalah membuat grafik dari
sumber data yang lain. Pengambilan data dari database sangat sering kita jumpai, karena dengan cara ini
menurut penulis pribadi adalah sebuah metode yang efisien, untuk lebih jelasnya mari kita lihat yang
satu ini :
Membuat Database / Database Design
Langkah awal pada bagian ini adalah menyiapkan database sebagai wadah atau tempat penyimpan data
yang akan diplot ke grafik. Data dapat berupa nilai yang bersifat integer maupun nilai yang bersifat
karakter, tetapi kembali lagi ke tujuan awal dan kebutuhan kawan-kawan dalam menginterpretasikan
data kedalam tampilan grafik. Sebagai contoh nih, enak’an pakai studi kasus aja ya ?? gimana, setuju
ngga ? setuju aja ya…..enak kok, nggak sakit…paling kayak di gigit semut…hehehe…
Ok, begini ceritanya (studi kasus)…. Pada suatu hari yang cerah, matahari muncul di balik pepohonan. Di
pagi hari yang cerah itu si-budi mengawali hari pertama kuliahnya di suatu perguruan tinggi favorit di
Negri Antah Berantah. Kemudian si-budi berkenalan dengan teman-teman barunya yang notabene
berasal dari berbagai penjuru kota. Setelah selesai berkenalan, budi menghitung total mahasiswa
(termasuk budi juga lho) yang berasal dari Kota-A sebanyak 5 Orang pria 3 orang wanita, dari Kota-B
sebanyak 8 orang pria 4 orang wanita, dari Kota-C sebanyak 2 orang pria 3 orang wanita, dari Kota-D
sebanyak 9 orang pria 4 orang wanita, dari Kota-E 3 orang pria 5 orang wanita, dan dari Kota-F 7 orang
pria 2 orang wanita.
Nah, dari cerita singkat tadi kita buat grafiknya dengan data yang kita inputkan terlebih dahulu pada
database. Untuk itu, mari kita buat database dan tabelnya terlebih dahulu.
Gambar 2. Database Studi Kasus.
Creating Graph From Database Data Source
Setelah database siap dan data sudah dimasukkan ke dalam tabel, maka grafik siap dihidangkan
(ditampilkan). Permasalahan klasik yang muncul (terutama terjadi pada pemula) adalah ketika kita sudah
mendapatkan data-data tersebut, kemudian menjadi bingung saat ditanya “Ingin membuat grafik seperti
apa???” atau “Data apa yang akan dibandingkan???” Pertanyaan-pertanyaan tersebut selalu berkecamuk
didalam pikiran, untuk itu sebelum membuat grafik terlebih dahulu kita tentukan permasalahannya.
Pada contoh studi kasus ini, penulis hanya memberikan contoh sederhana dengan menampilkan data
total mahasiswa (Pria dan Wanita) tiap-tiap kota untuk ditampilkan ke dalam grafik batang.
Berikut adalah resepnya (source code) :
Results :
Gambar 3. Grafik batang (bar) dengan sumber data yang di ambil dari database.
Source Code Request
Apabila kawan-kawan ingin memperoleh source code lengkap pembuatan grafik seperti diatas, sebagai
bahan referensi maupun untuk dimodifikasi ulang silahkan request by email: heruwidakdo@gmail.com
(ada yg protes nih critanya : lho, kok pelit sih? msk gt aja ga mau kasih link-nya) —> nah, itu dia
masalahnya… setelah saya kompres file nya agak gede dikit, koneksi modem saya ngga kuat buat
ngupload. Maklumlah, rakyat kecil buat internetan aja susahnya minta ampun, padahal buat sharing
lho… di gratiskan aja tuh biaya-biaya internet, biar maju pendidikan di negara kita tercinta. OK, setuju
kan ??? hehehe…..
Penutup
Sampai sekian dulu kawan artikel kali ini yang saya beri judul “Membuat Tampilan Grafik Pada Website”
sebenarnya masih sangat banyak sekali yang ingin penulis sampaikan, berhubung waktu, tenaga, dan
pikiran yang terbatas dengan berat hati kita harus berpisah untuk sementara waktu. Ibarat pepatah
mengatakan “Jika ada sumur di ladang boleh kita menumpang mandi, kalau ada waktu luang ijinkan saya
menulis lagi ” segala waktu yang tersita untuk membaca tulisan ini dan juga kesalahan dalam penulisan,
penulis menyampaikan permintaan maaf yang sedalam-dalamnya (sedalam lautan) maklum, penulis juga
newbie nih…..hehehe….di lain kesempatan mungkin kita bisa share tentang pembuatan grafik dengan
cara maupun metode yang berbeda. So, tunggu aja yach….hihihihi… Sampai Jumpa & Semoga
Bermanfaat…….MERDEKA!!!!!!
Regards