Berkreasi dengan Peta HTML dan tag Map Area [Bagian 2]

MENGAMBIL KOORDINAT SEBUAH TITIK DARI SEBUAH GAMBAR

Jika pada Posting lalu https://blogit.bimosaurus.com/2013/03/16/berkreasi-dengan-peta-html-dan-tag-map-area-bagian-1/ telah dipaparkan bagaimana cara menyajikan sebuah gabungan antara gambar peta dan data koordinat dalam source HTML, maka di bagian ini akan dijelaskan bagaimana cara mengambil koordinat sebuah gambar. Untuk mengambil value koordinat yang diperlukan oleh MAP AREA, kita akan menggunakan bantuan Javascript untuk menentukannya.

Format koordinat MAP AREA untuk kategori POLYGON adalah sebagai berikut :

x1,y1,x2,y2,x3,y3,x4,y4………xn,yn
Continue reading “Berkreasi dengan Peta HTML dan tag Map Area [Bagian 2]”

[Contoh] Cara Menampilkan Jam Server Secara Real Time

Jam sepertinya hal yang sederhana, tapi ternyata jam bisa membuat masalah tertentu. Perbedaan antara client dan server dalam beberapa aplikasi web dapat menjadi masalah tersendiri. Dalam sebuah halaman web, dapat saja kita menampilkan jam di web dengan javascript biasa, namun hasilnya hanyalah jam Client, artinya jam yang diambilkan waktunya dari waktu masing-masing pengakses internet. Bayangkan saja apabila sebuah input data dilakukan berdasar jam Client, maka bisa terjadi banyak masalah, terutama manipulasi waktu dan kesalahan time stamp.

Salah satu syarat menampilkan jam server ke browser adalah dengan menggunakan perintah command PHP :
Continue reading “[Contoh] Cara Menampilkan Jam Server Secara Real Time”

[Tips] Membuat Link Perpindahan Menjadi Smooth

Ketika sebuah “Link a href” yang terdapat dalam halaman web kita diklik, meskipun link tersebut menuju ke halaman kita sendiri, sebenarnya seluruh halaman ikut berubah, termasuk header-headernya. Padahal header itu akan selalu sama dimanapun saja link fitur web kita di klik. Hal ini akan sangat terasa lambat jika halaman header memuat gambar yang cukup besar, dan lebih-lebih pada koneksi internet yang kurang memadai.

Ada satu trik dimana ketika sebuah link / hyperlinks diklik maka hanya akan berubah elemen yang dimaksud. Perpindahannya juga dapat disiasati dengan cara yang lembut dan menggunakan waktu yang cukup sehingga proses yang lama akan terasa tetap terlihat tidak kaku. Caranya adalah dengan menggunakan sebuah fungsi JQuery, yang tentu kita harus meload JQuery lebih dulu dalam halaman kita.

Yang jelas, kita harus lebih dulu menetapkan elemen yang akan berubah, dalam kasus ini saya ambil #content, atau div id=content. Selanjutnya, pada a href yang akan kita set kita beri class, dalam hal ini saya berikan class = bms_fade. Letakkan script ini di awal halaman, selanjutnya ketika a href yang ber class bms_fade itu di clik, akan segera muncul perpindahan, hanya pada contentnya saja.. Silakan atur waktu set time outnya :), selamat mencoba

//perhatikan versi dan letak jquery.. cari yang terbaru



Sedangkan kode a nya akan menjadi seperti berikut:

INI LINK nya

Bagian yang akan terload adalah

// // //

[Contoh]Berkreasi Sederhana dengan DOM dan Button

Bagaimanakan cara membuat script seperti itu dengan javascript?

  1. Membuat sebuah DIV yang akan siap termanipulasi.
  2. Menangkap DIV sebagai DOM dengan getElementById
  3. Melakukan pengubahan value dengan innerHTML
  4. Membuat fungsi untuk dua kondisi. Diatas digunakan kondisi UBAH dan BALIK
  5. Membuat ELEMEN yang onclick adalah memanggil fungsi tadi
Ini adalah div coba

Javascript DOM dalam HTML

Untuk memanipulasi browser dalam menampilkan data, tentu sangat lebih baik digunakan bahasa CLIENT SIDE, yang datanya telah didapat dari server side (database, bahasa pemrograman server dll). Dengan bahasa Client Side, akan sangat membantu kinerja server, dan selanjutnya melimpahkan beberapa beban ke client. Disamping itu proses animasi yang jalan di tingkat client akan sangat maksimal.

Seperti kita ketahui , sebuah halaman HTML akan terdiri dari banyak elemen, seperti div, img, span, p, h dan lain sebagainya. Elemen tersebut bisa juga memiliki atribut berupa style, id, class, name dan lain sebagainya. Untuk keperluan pengubahan-pengubahan elemen di HTML di tingkat client, dapat digunakan manipulasi dengan DOM. Document Object Model. Apa itu? Yaitu cara javascript mengambil value element sebagai model, yang akan diberi tindakan selanjutnya.
DOM itu ternyata mudah, hanya perlu mengenal kata : getElementById().

misal akan kita buat variabel x adalah berisi obyek model dari div “coba”. Maka kode HTML akan menjadi seperti berikut

Ini adalah div coba

Misal akan kita lakukan pengubahan isi div coba, maka akan seperti berikut:

Ini adalah div coba

Selamat mencoba :). Silakan CLICK

[Contoh] Cara Membuat Grafik Multi Line / Banyak Garis dengan PHP, MySQL, dan JQuery HighChart

Berikut dalam posting ini akan dipaparkan contoh pembuatan grafik Multiline dengan Highchart. Saya juga menyiapkan dua artikel untuk keperluan Grafik dengan JQPLot dan JPGraph untuk kasus yang sama. Dalam contoh ini digunakan contoh dengan dua tabel, dimana satu tabel adalah tabel negara, dan tabel lainnya adalah tabel angka_kelahiran. Kira-kira SQL nya adalah seperti berikut:

Tabel negara

CREATE TABLE `negara` (
  `id` int(23) NOT NULL AUTO_INCREMENT,
  `negara` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

/*Data for the table `negara` */

insert  into `negara`(`id`,`negara`) values (1,'Indonesia'),(2,'Singapura'),(3,'Malaysia'),(4,'Jepang');

 

Tabel angka_kelahiran

CREATE TABLE `angka_kelahiran` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `negaraId` int(3) DEFAULT NULL,
  `bulan` varchar(10) DEFAULT NULL,
  `kelahiran` int(23) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=49 DEFAULT CHARSET=latin1;

/*Data for the table `angka_kelahiran` */

insert  into `angka_kelahiran`(`id`,`negaraId`,`bulan`,`kelahiran`) values (1,1,'Jan',100),(2,1,'Feb',120),(3,1,'Mar',130),(4,1,'Apr',110),(5,1,'Mei',90),(6,1,'Jun',100),(7,1,'Jul',95),(8,1,'Agt',115),(9,1,'Sep',98),(10,1,'Okt',120),(11,1,'Nov',110),(12,1,'Des',151),(13,2,'Jan',110),(14,2,'Feb',100),(15,2,'Mar',111),(16,2,'Apr',80),(17,2,'Mei',90),(18,2,'Jun',87),(19,2,'Jul',89),(20,2,'Agt',87),(21,2,'Sep',77),(22,2,'Okt',78),(23,2,'Nov',89),(24,2,'Des',90),(25,3,'Jan',67),(26,3,'Feb',65),(27,3,'Mar',68),(28,3,'Apr',98),(29,3,'Mei',76),(30,3,'Jun',89),(31,3,'Jul',66),(32,3,'Agt',54),(33,3,'Sep',43),(34,3,'Okt',78),(35,3,'Nov',98),(36,3,'Des',123),(37,4,'Jan',65),(38,4,'Feb',65),(39,4,'Mar',65),(40,4,'Apr',65),(41,4,'Mei',65),(42,4,'Jun',69),(43,4,'Jul',98),(44,4,'Agt',90),(45,4,'Sep',87),(46,4,'Okt',77),(47,4,'Nov',89),(48,4,'Des',100);

Kemudian secara visual, tabelnya adalah seperti ini :

Tabel Negara:

id negara
1 Indonesia
2 Singapura
3 Malaysia
4 Jepang

Tabel Angka Kelahiran (sebagian)

id negaraId bulan kelahiran
1 1 Jan 100
2 1 Feb 120
3 1 Mar 130
4 1 Apr 110

 

Jika server yang anda gunakan terhubung dengan koneksi internet, saya sarankan untuk mengambil include script jquery dan highcart secara online saja, hal ini akan menghemat space disk anda, terutama jika anda menggunakan hosting. Disamping itu akan lebih menghemat bandwidth quota. Namun jika server web yang anda offline, maka asumsi saya adalah menggunakan hardisk, sehingga tidak begitu memberatkan space dan quota, maka gunakan saja file jquery secara offline.

Untuk server online, maka gunakan script ini pada include script anda:


.
.
.


 

 

Untuk server offline, maka gunakan ini, atau sesuaikan dengan lokasi yang anda gunakan


.
.
.


 

Untuk kasus pembuatan grafik angka kelahiran, saya melakukan query untuk mendapatkan array kota terlebih dahulu. Script lengkap pembuatan grafiknya adalah sebagai berikut:





	
		
		Angka Kelahiran Tiap Negara

		
		
	

	



Nah kira-kira hasil dari perbuatan script anda adalah seperti berikut :

Nah, selamat mencoba, semoga berguna, dan sampaikan terimakasih pada developer Highcart yang telah membuat tools yang mempermudah bagi para developer ini. 🙂

Anda perlu bantuan membuat tabel, dapat berkonsultasi dengan team kami secara gratis. Selama dapat dibantu diselesaikan, akan dibantu..

[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:

$.jqplot('spacegrafik',  [[[1, 1],[3,2],[5,1],[7,2],[9,1],[11,2]]]);

dan pada HighChart adalah:


xAxis: {
                categories: [1,3,5,7,9,11]
},


.
.
.
.

series: [{
                name: 'Nama Data',
                data: [1,2,1,2,1,2]
            },

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


$datax = mysql_fetch_array( $query_x ); //berupa array data sejenis

$datay = mysql_fetch_array( $query_y ); //berupa array data sejenis

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 https://blogit.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..