[Contoh] Cara Membuat Grafik Dasar Web Dengan JQuery HighChart

Jika posting lalu telah dikenalkan dasar pembuatan Grafik dengan menggunakan JQuery JQPlot, maka sekarang dikenalkan dengan competitor JQuery Graphing Web juga. Tools berbasis JQuery itu adalah : HighChart. HighChart ini sama saja sebenarnya dengan JQPlot. Hanya saja menurut saya, HighChart ini lebih enak dalam dasar penulisan notasi data yang perlu dituliskan. JQPlot memiliki notasi penulisan data seri yang akan berpotensi lebih bertele (ribet) daripada HighChart.

Contoh adalah jika kita tuliskan pada JQPlot seperti demikian:

dan pada HighChart adalah:

Sedangkan biasanya data dari PHP akan berupa array dari data sejenis. Contoh adalah :

Namun tidak menutup kemungkinan bahwa data yang tersedia akan lebih nyaman menggunakan JQPlot. Pemilihan Tools akhirnya tergantung pada selera dan kebutuhan. Pembuatan grafik JPGraph pun akan memiliki kelebihan sendiri. Antara lain jika penggunaan grafik sekaligus akan dibentuk Gambar JPEG/PNG. Meskipun Highchart juga dapat membentuk JPG, namun terdapat satu keunggulan JPGraph dalam masalah pembuatan image.

Penggunaan Highchart

Source HighChart dapat diambil di http://www.highcharts.com/ demo dan contoh serta docs terletak lengkap disana. Extract Highchart tersebut dalam satu folder tertentu. Dalam contoh di sini digunakan Highchart pada http://bimosaurus.com/demo/highchart/

Selanjutnya untuk dasar penggunaan Grafik Line, akan digunakan seperti berikut langkahnya

  • Include script JQuery
  • Membuat script dengan diarahkannya grafik pada elemen yang dikehendaki
  • Melakukan penyisipan script Highchart
  • Menentukan letak elemen tujuan

Kira-kira akan seperti berikut ini script untuk membuat baris:

Kira-kira grafik yang akan dibentuk adalah seperti demikian.

Nah, selamat mencoba babak pertama JQPlot VS HighChart ini.. Selanjutnya akan kita buat sebuah contoh pembuatan grafik dengan JQPlot dan Highchart yang datanya diambil dari dalam database

Selamat Mencoba..

[Contoh] Cara Membuat Grafik Dasar Web dengan JQuery JQPlot

Selain dengan mode HTML biasa dan JPGraph, ada cara yang sekarang lebih populer dalam pengembangan grafik, yaitu dengan memanfaatkan turunan JQuery. Dengan JQuery dan Ajax, maka kemampuan browser dapat dimaksimalkan untuk keperluan pembuatan grafik yang lebih dinamis dan siap untuk detail tidak sekedar image. Memang pada akhirnya antara Grafik HTML, Grafik JPGraph dan Grafik JQuery, tetap memiliki kelebihan dan kekurangan sendiri-sendiri.

Pembuatan grafik dengan JQuery banyak sekali macam yang ditawarkan dari berbagai free-vendor berbasis opensource. Beberapa diantaranya adalah JQPlot, HighChart, AjaxGraph dan lain sebagainya. Di posting kali ini akan dicoba membuat grafik dengan memanfaatkan JQuery JQPlot. JQPlot dapat diambil source di situs aslinya yaitu http://www.jqplot.com/. Bisa di dowload dan di extract dalam folder httpdocs anda. Setelah itu dapat anda pelajari, hanya saja beberapa source jquery mengambil source dari link external, namun tidak masalah, dapat diambil secara manual. Example dan documentasi dapat juga diambil di http://www.jqplot.com/tests/ dan http://www.jqplot.com/docs/. JQPlot menyediakan banyak macam grafik, antara line, bar, pie, blok, dan lain sebagainya, dengan skala yang bervariasi dan dapat diperbesar (zoom) dengan melakukan select block pada grafik tersebut.

Berikut beberapa langkah cara proses pengambilan data dan pembentukan grafik yang dapat dillakukan dengan menggunakan JQuery JQPlot.

  1. Penyisipan kode dan style
  2. Pendefinisian elemen yang akan digunakan sebagai area grafik
  3. Plot Grafik

Penyisipan kode standard antara lain dilakukan dengan cara menambahkan baris berikut:

PERHATIAN:
Lakukan penulisan script dan sesuaikan dengan path yang ada pada script anda. Pada contoh, saya menggunakan path http://bimosaurus.com/demo/

Penentuan area dapat dilakukan dengan contoh di bawah ini. Perhatikan, anda berhak membuat ID div sendiri. ID ini yang nanti akan dipanggil dalam script PLOT :

Lantas lakukan plottingnya:

Dengan angka depan terletak di sumbu x dan angka belakang terletak di sumbu y. Perlu diperhatikan bahwa untuk kondisi standard, kita hanya bisa menggunakan jenis grafik dengan sumbu x adalah angka, dan sumbu y juga angka.

Kira-kira, kode utuh akan seperti ini:

Kemudian grafiknya akan seperti ini:



Nah, selamat mencoba lebih dahulu, posting selanjutnya akan berkisar pembuatan grafik dengan JQPlot lebih lanjut, tentu digabung dengan data dari MySQL dan pengambilan data oleh PHP

[TIPS] Contoh Cara Membuat Grafik Standard HTML Sederhana

Pembuatan grafik ternyata tidak harus rumit dengan tools tertentu. Grafik masih bisa disiasati dengan menggunakan kombinasi teknik CSS dan HTML. Tentu saja tidak semua grafik dapat dibentuk, karena keterbatasan CSS dan HTML. Disini kita pelajari grafik yang mudah seperti grafik batang/bar, dimana seluruh value akan dibentuk dengan menggunakan Bar. Lihat contoh dibawah ini:

 

Calon 1
Calon 2
Calon 3
Calon 4
Calon 5

 

 

Contoh Grafik Pemilihan Kepala Desa

Pembuatan grafik ini ternyata tidak sulit. Yaitu hanya dengan melakukan pembuatan elemen DIV yang diberi warna tertentu, dan diberi panjang tertentu, yang tentu saja panjangnya nanti akan menyesuaikan dari dalam tabel asal.

Sebagai contoh, apa yang terjadi apa bila kita membuat sintaks seperti demikian:

Hasilnya tentu saja akan langsung seperti tabel di atas. Panjangnya batang akan mengikuti aturan width pada div yang bersangkutan. Grafik tersebut juga dapat kita kombinasikan dengan link href. Grafik tersebut dibuat dengan cara menempatkan sebuah elemen div yang berukuran panjang yang diatur dari database. Div tersebut juga harus rata kiri untuk dapat dibaca dengan jelas

Kita pun dapat membuat grafik dalam posisi vertikal. Hanya saja, karena tabel html memiliki karakter standard rata vertikal tengah, maka kita harus menambahkan valign=bottom

Sebagai contoh adalah sebagai berikut

Hasilnya akan menjadi seperti ini:

Calon 1 Calon 2 Calon 3 Calon 4 Calon 5

Nah ternyata cukup sederhana. Tinggal kita akhirnya dapat melakukan manipulasi angka tersebut dengan menggunakan PHP dan mengambil dari database server MySQL.

Untuk grafik lanjut berbasis image, dapat dilihat di :

http://bimosaurus.com/2012/04/21/contoh-cara-membuat-grafik-dengan-jpgraph-dengan-php-dan-mysql dan
http://bimosaurus.com/2012/04/19/contoh-1-dasar-membuat-grafik-dengan-jpgraph-di-php

Contoh Cara Membuat Sendiri Site Tracker Sederhana

Anda tentu sudah terbiasa dengan counter online semacam feedjit, atau sitetracker, hitwebcounter, dan lain sebagainya. Sebenarnya bagaimana sih cara kerjanya. Cara kerjanya adalah mereka menanam program atau gambar program yang kemudian akan ikut ter-hit jika web dibuka oleh seseorang. Google analytics dan alexa pun juga melakukan hal yang serupa. Mereka meminta kita menanam suatu program atau file ke dalam struktur web kita, selanjutnya mereka akan selalu tahu ketika web kita dibuka. Sebenarnya dapat dibuat sendiri program site tracker sendiri, karena ternyata memang Apache dan bahasa pemrograman sisi server juga mendukung dibuatnya program untuk trace ip tersebut.

Untuk mengenalnya anda dapat membuka halaman http://php.net/manual/en/reserved.variables.server.php. Di sana dikenalkan beberapa hal tentang variable $_SERVER. Cobalah anda membuat sebuah halaman bernama : serverku.php, dan isilah dengan command seperti berikut:

 

bukalah dari sisi client. Apa yang terjadi.

 

Selanjutnya, mari kita kenali beberapa variable penting untuk keperluan site trace tracker ini. Antara lain adalah:

  1. $_SERVER['HTTP_USER_AGENT']; = adalah mesin yang digunakan oleh pengakses, meliputi Operating System, Browser, dan versi yang ada. Tertangkap ketika mengakses file program tracer.
  2. $_SERVER['REMOTE_ADDR']; = adalah IP Pengakses file, tertangkap ketika mengakses program tracer
  3. $_SERVER['HTTP_REFERER']; = adalah halaman yang dibuka (yang mengangkut program trace ) tertangkap ketika mengakses program tracer
  4. $_SERVER['HTTP_X_FORWARDED_FOR']; adalah IP Lokal jika terdeteksi atau IP sebenarnya dibalik Proxy

Sebenarnya masih sangat banyak parameter yang bisa digunakan untuk melengkapi tracer/tracker IP ini. Namun kita hanya akan melakukan pengambilan dengan parameter ini saja dulu.

Selanjutnya kita akan buat dua buah program dengan PHP , yang pertama adalah tracker, yang kedua adalah tampilan untuk melihat hasil tracing IP. Untuk itu kita buat dulu tabel dalam sebuah database dengan susunan kira-kira sebagai berikut: nama database:trace, tabel: hits, dengan kolom

 

Tabel yang terbentuk kira-kira adalah seperti berikut:

No IP Page Waktu Mesin IP Lokal/Proxy
1 127.0.0.1 http://localhost/latihan1/anu.php 2012-04-23 15:12:38
2 127.0.0.1 http://localhost/latihan1/ 2012-04-23 15:11:39

Lantas kita buat program tracer / tracker dengan nama counter.php yang bertujuan melakukan inject ke dalam server database sebagai berikut:

 

Kemudian sisi penampil hasil dengan nama lihat.php dibuat sebagai berikut:

 

Selanjutnya bukalah http://namaserver/dir/counter.php. Dan lihatlah di http://namaserver/dir/lihat.php. Seharusnya anda telah melihat satu IP record baru. Kemudian secara simple, ternyata counter.php ini meskipun berekstensi PHP, namun tetap dapat diload sebagai image. Maka masukkan counter.php ini ke dalam salah satu widget blog anda dengan cara <img src=”http://namaserver/dir/counter.php”>. Setiap kali halaman dibuka, maka file counter.php akan ikut terpanggil dan melakukan proses. Untuk demo dapat diakses di http://bimosaurus.com/demo/lihat.php. Di mana setiap kali anda refresh, anda akan dapat melihat record dari database bertambah. Lihat juga view Source nya dari Browser anda atau tekan tombol Ctrl U. Anda akan mendapati bahwa saya menyisipkan counter.php dengan img src.

Untuk paging halaman lihat.php tidak saya buat, silakan dikembangkan sendiri yang mungkin literaturnya di dapat dari posting lalu http://bimosaurus.com/2011/09/13/simple-advanced-paging-php/ dan http://bimosaurus.com/2012/04/11/contoh-menyiasati-paging-dengan-jquery-jcarousel

Sebenarnya proses tersebut dapat dikembangkan lagi antara lain:

  • Menentukan asal network dan negara
  • Membuka seluruh variabel server yang ada
  • counter.php benar-benar akan berupa gambar
  • Menentukan IP Unik
  • Membuat Statistik
  • Membuat counter berdasar gambar
  • dan lain sebagainya

Namun untuk tahap ini adalah pengenalan dasar pembuatan site tracker. Tentu akan kita bahas di lain posting. Semoga bermanfaat.

 

 

Operasional File Melalui Perintah SQL (SQL Command for File Operation)

MySQL adalah salah satu bentuk database server yang bersifat Opensource. MySQL ini menjadi banyak pilihan karena sifatnya yang opensource, updated dan mudah dicari resource / literatur belajarnya. Biasanya para operator SQL menggunakan sintaks-sintaks SQL ini untuk keperluan: DDL (Data Definition Language), DML (Data Manipulation Language), DCL (Data Control Language) dan untuk beberapa jenis database terdapat TCL (Transaction Control Language).

Apakah itu?Hal itu akan dijelaskan pada bagian sub bab di bawah.

Namun SQL untuk MySQL juga memiliki command sintaks yang cukup ampuh sekaligus berbahaya, yaitu sintaks untuk berhubungan dengan file tertentu. Dua sintaks penting diantaranya adalah:

dan

 

Contoh penggunaannya adalah :

untuk keperluan membaca file ‘/home/web/test.txt’. Contoh lainnya dapat dikombinasikan seperti berikut:

 

Sedangkan satunya dapat digunakan seperti berikut:

biasanya digunakan untuk mengambil data dan dijadikan file text.

 

 

Selamat Mencoba. Perlu diingat bahwa sebagai seorang sistem administrator, maka kita harus baik-baik mengatur permission dari MySQL. Jangan sampai perintah-perintah mudah MySQL ini menjadi masalah di kemudian hari, karena cukup banyak hacker atau program hacker menggunakan perintah-perintah ini untuk menyusup masuk ke dalam server. Semoga bermanfaat

 

DDL, DML, DCL, TCL

DDL Adalah singkatan dari Data Definition Language. Biasanya digunakan untuk menentukan struktur data tabel dan skemanya. Sintaks yang termasuk DDL antara lain : CREATE, ALTER, DROP, RENAME, TRUNCATE, COMMENT

DML adalah singkatan dari Data Manipulation Language. Digunakan untuk operasional record data. Sintaks yang termasuk diantaranya antara lain: LOCK TABLE, UNLOCK TABLE, SELECT, INSERT, UPDATE, DELETE, MERGE

DCL adalah singkatan dari Data Control Language. Digunakan untuk melakukan kontrol database. Sintaks yang biasa digunakan adalah GRANT

 

Menghilangkan Pesan Error “Notice: Undefined Variable”

Salah satu error yang sering muncul dalam programming web dengan PHP adalah

Seperti biasa, kita akan bahas dulu penyebab pesan error ini. Pesan ini muncul karena Variabel yang anda proses dalam satu script, tidak terdefinisikan terlebih dulu. Proses ini membuat script anda tidak mengenali variabel tersebut. Lho padahal anda merasa pernah membuat variabel di script lain dan script tersebut diinclude pada script yang error tersebut. Bagaimanakah? Error memang bisa dihilangkan begitu saja dengan membiarkan error tetap terjadi. Namun sebaiknya kita mengetahui penyebabnya, dan mengantisipasi agar errornya memang tidak terjadi. Untuk menghilangkan pesan error, dapat saja kita tembak pesan berikut dengan menambahan pada awal script:

atau dengan cara mengganti value display_errors di php.ini dengan On diganti Off.

Penyebabnya antara lain adalah sebagai berikut:

  • Kita bisa cek di konfigurasi PHP.INI. Anda tentunya akan melihat posisi value , dimana artinya semua variabel harus terregister dengan benar pada script masing-masing.
  • Anda juga bisa melihat pada bagian error_reporting. Kemungkinan value akan berisi seperti ini

.

Penyelesaiannya adalah ada tiga hal, jika bukan program anda yang menyesuaikan konfigurasi PHP, ya konfigurasi PHP yang diubah menyesuaikan dengan program anda. Atau, menyisipkan pemanggilan konfigurasi PHP dalam script programming. Antara lain dapat kita lakukan seperti berikut:

  • Mengganti value php.ini yang berisi
    menjadi

    dengan resiko bahwa seluruh koding dengan PHP di mesin anda akan harus terkena aturan ini.
  • Mengganti value php.ini yang berisi
    menjadi

    dengan resiko bahwa seluruh koding dengan PHP di mesin anda akan harus terkena aturan ini.
  • Menuliskan di awal script anda penulisan konfigurasi php.ini yang berlaku hanya untuk script anda dengan seperti ini

    resiko hanya berlaku untuk satu script anda.
  • Menuliskan di awal script anda penulisan konfigurasi php.ini yang berlaku hanya untuk script anda dengan seperti ini

    resiko hanya berlaku untuk satu script anda.

Dua langkah terakhir ini cukup akurat biasanya.

[TIPS] Pesan ERROR “cannot modify header information – headers already sent by”

Bagi para teman-teman developer, tentu sering mengalami masalah dengan pesan error seperti berikut ini

Tentu membingungkan dan membuat jengkel. Namun sebelumnya, kita perlu tahu apa penyebabnya. Penyebabnya adalah PHP kita tidak terkonfigurasi untuk menerima buffer keluaran tertentu. Buffer adalah semacam memori sementara. Biasanya setting konfigurasi PHP , php.ini anda, terdapat value ini

Dengan kondisi seperti itu, ternyata dalam programming secara tak sadar kita telah membuka : header, session dan beberapa sintaks yang dianggap sebagai header, bahkan spasi pun bisa dianggap juga. Contoh adalah :

Setelah kita tahu penyebabnya, maka tentu kita juga memiliki solusi. Solusinya ada beberapa cara. Antara lain adalah:

  • Mengganti value output_buffering pada php.ini dengan value = On. Setelah itu anda perlu restart apache anda. Resikonya adalah, seluruh aplikasi anda akan tersetting dengan output_buffering=On
  • Menghilangkan spasi pindah baris pada koding PHP anda. Namun pesan error akan tetap terjadi jika anda melibatkan header dan session_start bersamaan dalam satu script
  • Langkah paling enak adalah menambahkan pada script anda dengan kata

    Atau juga dapat dengan menambahkan sintaks pengubahan value PHP.ini khusus di script tersebut dengan :

    Perintah ini aman, karena hanya berlaku pada satu script atau satu induk script.

Misalnya adalah contoh berikut:

atau

 

Nah selamat mencoba