Laboratorium Pemrograman dan Basis Data

Baiklah, pada kesempatan kali ini saya ingin menjelaskan tentang sebuah Framework yang bernama "jQuery Mobile". jQuery Mobile merupakan framework hasil pengembangan dari jQuery dan jQuery-UI. Dasar pengembangan jQuery ini adalah untuk memberikan tampilan yang lebih baik dan responsif dari sebuah web ketika dibuka dari lingkungan perangkat berjalan (Mobile).

Pengembangan jQuery mobile ini memang memberikan perhatian lebih pada pemanfaatan fitur-fitur sentuh yang ada pada Smartphone. Misalkan pendeteksian orientasi device, menangkap event "Tap" atau "Tap & Hold". Semua itu memang ditujukan agar pengembangan aplikasi mobile menjadi lebih baik dan memberikan kenyamanan bagi para pengguna.

Kali ini saya akan menjelaskan tentang penggunaan event "Tap" dan "Tap & Hold"

1. Siapkan struktur lengkap dari jQuery seperti gambar berikut.
Integrasikan file-file tersebut ke halaman index.html dengan benar agar jQuery bisa kita gunakan.
2. Buat file index.html yang berisi kodingan berikut.
3. Perhatikan pada saat penulisan ID dari masing-masing element HTML. Perhatikan pada tag Script. Didalam itulah dituliskan jQuery yang akan kita gunakan untuk menerima event Tap dan TapHold. Perhatikan script berikut.
Ini adalah gaya penulisan pada jQuery untuk menghandle event Tap dan TapHold Tersebut. Kemudian akan dijalankan perintah Alert untuk tap dan perintah mobile.changePage untuk TapHold. Apabila teman-teman belum mengerti gaya penulisan pada jQuery, bisa lihat ke Sini atau ke Sini untuk info lebih lengkap mengenai jQuery.

4. Simpan halaman index.html tersebut dan coba akses dari perangkat mobile. Maka hasilnya lebih dan kurang seperti ini.

Untuk perihal lain mengenai data-role, data-icon, header, footer. Akan dijelaskan pada postingan berikutnya...

Kalo ada yang ingin ditanyakan silahkan komen pada Comment Box... :D

Dengan jQuery, Happy Coding!

Pada postingan kali ini saya akan membahas bagaimana cara membuat tabel dengan HTML dan mempercantik tampilannya dengan CSS.

Berikut adalah script HTML untuk membuat tabel:

 
Header1
        
Header2


        
Kolom1 Baris1
        
Kolom2 Baris1


        
Kolom1 Baris2
        
Kolom2 Baris2


        
Kolom1 Baris3
        
Kolom2 Baris3

Script di atas akan tampil di browser seperti berikut








Hasilnya terlihat sangat hampa dan monoton 'kan? Oleh karena itu mari kita warnai tabel yang hampa tersebut dengan file CSS yang berisi script berikut:

table, th, td {
table, th, td {
 border: 1px solid #DAA520;
 border-collapse: collapse;
 font-family: "Trebuchet MS", Arial, sans-serif;
 color: #555;
}

caption {
 font-size: 150%;
 font-weight: bold;
 margin: 5px;
}

td, th {
 padding: 4px;
}

th {
 text-align: center;
 background: #FFD700;
 color: #4F76A3;
 font-size: 100% !important;
}

tbody th {
 font-weight: bold;
}

tr { background: #FAFAD2; }

Maka tabel kita akan menjadi seperti berikut:

Header1	Header2
Kolom1 Baris1	Kolom2 Baris1
Kolom1 Baris2	Kolom2 Baris2
Kolom1 Baris3	Kolom2 Baris3

Sekian postingan kali ini, semoga bermanfaat :)