[Tips] Menambah “Add More” Input Form

Tentu kita tidak asing dengan Form macam ini:
addmore
Itu adalah form pengiriman email pada GMail. Pada form tersebut, memungkinkan kita menambahkan input type file untuk penambahan attachment file, dan input type text pada kolom CC dan BCC. Semua itu hanya kita lakukan dalam satu kali klik tanpa mereload halaman. Bagaimana cara membuatnya?
Continue reading “[Tips] Menambah “Add More” Input Form”

Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

Webchat adalah sebuah media obrol interaktif memalui web. Contoh webchat sering kita lihat di meebo atau fasilitas chat Facebook. Kita pun bisa membuat. Secara konsep sederhana, chat terdiri dari sebuah halaman POST chat, yang dikirimkan ke server, dan ditampilkan melalui halaman web. Secara standard, web tidak akan bisa menerima POST chat dan menampilkannya tanpa merefresh. Maka dengan fasilitas Javascript, kita bisa merefreshkan beberapa bagian elemen web tersebut, tanpa harus merefresh halaman secara keseluruhan. Proses merefresh elemen(div) tersebut jika kurang bijak juga akan banyak memakan resource browser dan menghabiskan memori komputer.

webchat

Disini kita belajar memahami sebuah konsep web dengan menggunakan PHP, MySQL dan JQuery. JQuery sendiri adalah sebuah library Javascript yang telah disusun untuk keperluan penyederhanaan dan optimalisasi fungsi-fungsi javascript. JQuery ini juga cukup tangguh untuk pengganti ajax terutama untuk keperluan hubungan Client Server. Marilah kita mencoba merancang sebuah skenario pembuatan sistem chat berbasis web.

Di sini saya merancang menggunakan tiga (3) file script server utama yaitu :

  • index.php
  • login.php
  • logout.php

Script Server tersebut dikunci tampilan oleh file: styles.css. Sedangkan script sisi-client (diletakkan di direktori js) yang digunakan adalah:

  • library jquery
  • chat.js

Script pendukung di sisi server (diletakkan di direktori scripts) akan dipisahkan sesuai dengan tugasnya antara lain:

  • database.php (penghubung dengan database)
  • datetime.php (pengambil value waktu terakhir chat)
  • postchat.php (pengirim kalimat chat)
  • getchat.php (pengambil kalimat chat secara real-time)
  • chatlist.php (pengambil chat yang sudah ada sebelumnya)
  • chatuserlist.php (pengambil data user yang aktif)

Secara rancangan sistem ini akan berjalan dengan kendali penuh dari script chat.js.
Continue reading “Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery”

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] Mendesain Halaman Comment Posisi Terbalik dengan JQuery .insertBefore()

Seperti artikel sebelumnya, contoh yang digunakan adalah halaman untuk web chat. Namun disana, halaman yang dibuat adalah dalam bentuk Chronological atau berurutan sesuai waktu, dan yang akan terbaru akan ditempatkan paling bawah. Sedang jika kita melihat beberapa situs, menempatkan komentar terbaru ada di paling atas. Untuk itu, kita dapat menggunakan fungsi JQuery .insertBefore untuk melakukan generating halaman ini.
Fungsi JQuery .insertBefore berguna untuk melakukan penambahan elemen pada SEBELUM sebuah elemen lain. Dengan demikian elemen baru yang datang, akan muncul diatasnya. Misal kita memiliki script sedemikian : Continue reading “[Contoh] Mendesain Halaman Comment Posisi Terbalik dengan JQuery .insertBefore()”

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

/*isi form . . . */

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 :

    var judul = $("#id_yang_diambil_sebagai_judul").val();
    var isi = $("#id_yang_diambil_sebagai_isi").val();
    
  • Memanfaatkan fungsi POST dari JQuery dengan melakukannya ditujukan ke suatu file tujuan, dengan value parameter yang telah diambil seperti pada point diatas, contoh:

    
       $.post("submit.php", { judul: judul, isi: isi});
    

    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
       $("form#postForm")[0].reset();
    

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 🙂