[Tips-Trick] Bermain Dengan Peta dan keterangan Popup Tooltips

Jika pada beberapa posting lalu, telah dapat dipelajari bagaimana cara menyusun koordinat HTML dengan menggunakan Javascript, Ajax dan PHP, maka kali ini akan dicoba memanfaatkan peta tersebut dan membubuhkan keterangan dengan bentuk popup. Asyik bukan?
Misal saya memiliki data koordinat peta HTML untuk Provinsi DI Yogyakarta sebagai berikut:
Continue reading “[Tips-Trick] Bermain Dengan Peta dan keterangan Popup Tooltips”

Beda ID dan Class dalam Elemen HTML

Ada satu pertanyaan masuk : “Apakah bedanya antara ID dan CLASS dalam Elemen HTML?” Misal:

Jawabannya adalah sebagai berikut:

Untuk CSS tidak ada bedanya antara CLASS dan ID.

Semua yang dimasukkan dalam CSS akan disetting propertinya tanpa perbedaan. Misal:
Continue reading “Beda ID dan Class dalam Elemen HTML”

[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 http://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]“

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

HTML, telah menyediakan fasilitas sederhana untuk membuat mapping sebuah gambar. Dengan menggunakan mapping gambar tersebut, dapat dikreasikan menjadi sebuah halaman yang memuat peta sederhana. Layanan HTML dalam menangani peta gambar adalah dengan menggunakan tag <map></map> yang dilengkapi dengan <area></area>. Tag MAP, terdiri dari beberapa pilihan, antara lain adalah untuk penandaan bujursangkar (rect), penandaan lingkaran (circle) dan penandaan poligon. Tag map ini membutuhkan gambar sebagai media yang akan ditandai. Sedangkan penunjuk tempat dapat menggunakan koordinat yang terdapat pada HTML source. Sintaks map dan area adalah sebagai berikut.

 
Continue reading “Berkreasi dengan Peta HTML dan tag Map Area [Bagian 1]“

[CSS] Fitur-fitur Memperindah Halaman dalam CSS3

CSS versi 3.x memberikan berbagai macam fitur yang siap digunakan untuk keperluan mobile dan memperingan halaman dengan animasi yang lebih lengkap. Dengan menggunakan fitur-fitur CSS3, pembuatan template dapat sangat lebih mengurangi gambar dan animasi non CSS. Beberapa fitur diantaranya adalah:

Gradasi Warna

Jika di masa lalu, membuat Gradasi Warna harus menggunakan gambar image kecil yang dijadikan background secara repeat, maka CSS3 akan memberikan cara yang berbeda.

 
Jika dulu adalah seperti ini , tentu dengan gambar yang harus ada:

Sekarang bisa menggunakan seperti ini:

Perhatikan bahwa kode warna yang ada adalah menunjukkan start warna, tujuan warna dan akan berhenti di sekian persen dari warna.

Box Shadow
Jika di masa lalu dengan cara yang sama dengan diatas kita membuat sebuah kotak dengan bayangan gelap adalah dengan menggunakan image, maka sekarang dapat menggunakan CSS. Cara yang digunakan adalah menggunakan box-shadow

Transisi warna untuk mouse over pada sebuah link
Di masa lalu penggunaan transisi warna dibentuk dengan menggunakan javascript. Jika sekarang dapat menggunakan kode CSS seperti berikut

Text Shadow
Ini juga sering dipakai. Untuk memembentuk efek tertentu seperti timbul dan tenggelam dalam sebuah text, dapat digunakan teknik CSS berikut, Biasanya, jika background terang dan tulisan gelap, jika bayangan lebih gelap, akan muncul tulisan timbul.

Masih banyak kode CSS3 seperti rotate image dan lain sebagainya. Namun cukup ini lebih dulu, selengkapnya dapat dipelajari di situs w3schools. Untuk Internet Explorer, CSS3 ini tidak begitu mudah dijalankan, yang akhirnya harus menggunakan javascript untuk mengantisipasinya. Namun menengok bahwa CSS3 dan HTML5 sangat siap untuk keperluan gadget mobile, dan dengan web browser yang makin tidak didominasi Internet Explorer, maka tidak ada salahnya menggunakan CSS3 ini.