[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

Sedangkan kode a nya akan menjadi seperti berikut:

Bagian yang akan terload adalah

[Contoh] PHP, MySQL, JQuery Form Posting, Tanpa Autorefresh Halaman / Pindah Halaman

Dalam ilmu web pada umumnya, dengan PHP-MySQL pada khususnya, sebuah proses Post Form, akan selalu mengarah ke suatu halaman yang ditandai dengan method dan action sebagai properti Formnya. Contoh:

Ketika tombol submit ditekan, maka halaman tujuan (action) akan dijalankan. Jika halaman adalah halaman itu sendiri, maka akan ter-refresh (terambil ulang dengan sudah membawa perubahan post) dan jika halaman lain sebagai action, akan masuk ke halaman tujuan itu. Hal ini akan menjadi tidak nyaman bagi sebuah web yang memiliki desain gambar cukup besar, sedangkan diperkirakan client akan membuka dengan bandwidth yang minim.
Ada beberapa cara untuk mensiasati hal ini, adalah dengan memanfaatkan framework Javascript berupa Ajax ataupun JQuery. Dalam posting ini akan dicoba menggunakan JQuery sebagai pembantu posting, agar ketika proses Posting, tidak lagi perlu terbuka ulang seluruhnya, hanya bagian tertentu saja.
Langkah pertama yang harus dilakukan adalah lebih dulu halaman harus memuat JQuery library, dengan cara mengambil baik dari host sendiri atapun menggunakan global host, seperti google host misalnya.
Selanjutnya kita tinggal memanfaatkan tiga hal, dalam satu script:

  • Mengambil value dari ID input form, misal :
  • Memanfaatkan fungsi POST dari JQuery dengan melakukannya ditujukan ke suatu file tujuan, dengan value parameter yang telah diambil seperti pada point diatas, contoh:

    Pada proses ini, dimaksudkan agar jquery melakukan proses post pada submit.php, dengan isi value POST['judul'] dengan variabel judul, dan POST['isi'] dengan variabel isi
  • Melakukan penambahan reset form

atau contoh dengan googlehost

Langkah kedua adalah membuat form post seperti biasa, namun dengan seluruh komponen input diberikan id agar dapat diterima browser sebagai variabel yang berbeda, dan diberikan arah action yang berbeda dengan halaman pemuat form. Berikan juga fungsi javascript untuk Button pemicu submit form. Contoh:

Langkah berikutnya adalah menyisipkan script javascript yang ada di bawah ini diantara load JQuery dan Form. Script ini berupa fungsi yang dipanggil oleh button ketika diklik

Untuk menampung hasil kiriman POST, maka kita perlu membuat file submit.php yang isinya antara lain adalah file PHP biasa yang isinya adalah sebagai berikut:

Asumsi tambahan:
Dalam database terdapat sebuah tabel post, yang berisi empat field, dengan field: id, judul, isi, timestamp. Dengan id adalah autoincrement, dan timestamp not Null. Asumsi juga bahwa di buat sebuah file database.php yang berisi koneksi database.

File submit.php ini tidak akan muncul di browser, karena prosesnya telah ditahan oleh JQuery.

Selanjutnya tinggal membuat halaman untuk memuat tampilan dari isi tabel post dengan menggunakan jquery juga, yang akan dipost pada posting berikutnya :)

[Contoh] Cara Mudah Membuat Notasi Data untuk Grafik JQuery JQPlot dengan PHP

Salah satu kelemahan JQPlot dibanding HighChart adalah pembuatan notasi data grafik untuk diplot ke dalam halaman web. Seperti beberapa artikel lalu , HighChart memiliki kemudahan penulisan notasi, karena berjajar notasi sejenis, sesuai dengan arraynya. Berbeda dengan JQPlot. Penulisan notasi JQPlot berupa notasi bersama antara array x dan array y. Contoh: Misal kita memiliki dua array yang akan dijadikan grafik.

 

 

Pembuatan grafik dengan Highchart akan menggunakan cara seperti ini :

 

 

 

Sedangkan JQPlot memiliki notasi seperti berikut :

Padahal biasanya PHP akan menghasilkan data berasal dari array yang didapat dari MySQL, PostgreSQL, database lainnya, atau memang berupa data array. Untuk itu biasanya pembuatan grafik JQPlot jelas memakan satu langkah lebih banyak daripada penggunaan Highchart. Namun dengan beberapa kelebihan JQPlot, ditambah dengan kesukaan masing-masing developer, maka tidak salah mencoba menyiasati pembuatan notasi grafik ini. Pembuatan notasi Grafik JQPlot akan coba kita jelaskan pada code berikut ini :

Nah kira kira hasilnya adalah seperti demikian



Nah, selamat mencoba, semoga bermanfaat.

[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

 

Tabel angka_kelahiran

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:

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:

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

[Contoh] Menyiasati Paging dengan JQuery JCarousel

Paging adalah cara memisahkan banyaknya data dalam halaman-halaman tertentu dengan satu halaman berisi sejumlah data. Paging sering menjadi masalah tersendiri bagi para developer pemula. Dalam beberapa posting lalu, kita telah mempelajari Simple Advanced Paging PHP yaitu di posting http://bimosaurus.com/2011/09/13/simple-advanced-paging-php/. Namun saya mendapatkan request beberapa hal tentang bagaimana agar paging dapat disederhanakan lagi. Maka terbayanglah sebuah simple paging dengan menyiasati menggunakan JQuery JCarousel. Paging ini dapat menggunakan teknik PHP murni, dapat juga diakali dengan menggunakan Jquery Jcarousel.

JCarousel memiliki fungsi untuk membuat tampilan bergeser muncul satu demi satu seperti pada contoh disini: http://bimosaurus.com/demo/paging_jq.php.

Mudah saja, dengan demikian kita bisa mengkreasikan paging dengan JCarousel ini. Kita akan memilih JCarousel model Lite yang ringan, dengan JQuery Minimal juga. Silakan dapat di download di http://www.gmarwaha.com/jquery/jcarousellite/#download, dan http://docs.jquery.com/Downloading_jQuery.

Saya memilih : jquery-1.7.1.min.js dan jcarousellite_0.4.0.min.js. Selanjutnya, anda dapat membuat script tampilan paging seperti berikut ini:

 

Nip Nama Honor Status Ambil

Saya masih memilih setia menggunakan database lama saya yang saya gunakan untuk contoh-contoh lalu, database kepegawaian. Dengan tabel pegawai seperti berikut:

nip nama honor status_ambil
10001 Susanto Rp. 1000000 Belum
10002 Susanti Rp. 1000000 Sudah
10003 Marwoto Rp. 2000000 Sudah
10004 Gunadi Rp. 1500000 Belum
10005 Nur Eko Rp. 1000000 Belum

Nah, selamat mencoba, semoga sukses dan semoga bermanfaat