View

Cara Membuat Bar Chart dengan jQuery dan CSS

Bar Chart adalah grafik yang mewakili data kelompok dengan chart vertikal atau horizontal. Pada dasarnya, Bar Chart digunakan untuk menunjukkan perbandingan yang mudah dimengerti. Bar Chart membantu membuat aplikasi web lebih user-friendly. Untuk menunjukkan perbandingan data antar kategori dalam persentase, Bar Chart adalah pilihan yang tepat. Dalam tutorial ini, saya akan menunjukkan cara membuat bar chart responsive menggunakan CSS dan jQuery. Kamu tidak perlu menggunakan plugin chart jQuery untuk menambahkan Bar Chart di website. Kamu dapat dengan mudah membuat Bar Chart kamu sendiri dengan CSS dan jQuery murni. HTML HTML berikut menunjukkan diagram batang dengan nilai persentase [...]

View

Cara Membuat Form Bootstrap Modal Popup dengan Ajax & PHP

Kalau kamu saat ini menggunakan framework Twitter Bootstrap pada websitemu, ini malah lebih mudah lagi untuk mengintegrasikan Modal Popup ke website. Bootstrap membantu kita untuk menambahkan popup ke tombol atau link tanpa menggunakan kode JavaScript tambahan. Juga, dengan menggunakan Bootstrap, kita dapat membuat form HTML yang dirancang dengan baik dalam waktu yang singkat. Tutorial ini akan menunjukkan bagaimana kamu dapat mengintegrasikan bentuk popup modal ke website Anda menggunakan Bootstrap dan mengirimkan formulir dengan jQuery, Ajax, dan PHP. Sebagai contoh, kita akan membangun contact form dengan Bootstrap modal popup dan mengirimkan formulir setelah validasi menggunakan jQue [...]

View

Cara Aktifkan dan mengnonaktifkan tombol keyboard dengan JavaScript

  Dalam tutorial ini saya akan menunjukkan cara untuk mengaktifkan dan menonaktifkan tombol keyboard menggunakan JavaScript. Pengguna dapat menonaktifkan dan mengaktifkan semua tombol yang diketik pada keyboard dengan mengklik tombol aktifkan dan nonaktifkan. Untuk mengaktifkan dan menonaktifkan tombol keyboard hanya dibutuhkan satu langkah: Membuat file HTML dan tentukan markup, scripting dan styling Silahkan buat file HTML dan simpan dengan nama keyboard.html <html> <head> <style> body { margin:0 auto; padding:0px; text-align:center; width:100%; font-family: & [...]

View

Cara Memuat data saat menggulir halaman dengan jQuery PHP dan MySQL

Ketika kita memiliki record data yang banyak yang ditampilkan pada halaman, kita menggunakan paginasi untuk menampilkan hanya beberapa data saat memuat halaman dan tampilan berikutnya beberapa data pada setiap klik berikutnya. Kamu dapat mengganti paginasi biasa tersebut dengan fitur yang lebih user friendly untuk memuat data yang dinamis pada halaman yang sama saat halaman digulir/discroll. Pengguna tidak perlu mengklik tombol untuk melihat lebih banyak data; data akan dimuat pada setiap scroll halaman tanpa memuat halaman. Jadi dalam tutorial ini kamu akan belajar cara memuat data saat menggulir halaman dengan jQuery PHP dan MySQL. Jadi mari kita mulai ngoding. Sebelum mulai, lihat d [...]

View

Cara Membuat galeri gambar dengan PHP, jQuery & MySQL

Galeri gambar adalah fitur yang sangat umum untuk aplikasi web. Galeri gambar atau galeri foto adalah cara yang efisien untuk memperlihatkan serangkaian gambar. Galeri gambar memungkinkan pengguna untuk mengakses semua gambar dari seluruh situs dalam satu tempat. Jika kamu ingin menerapkan galeri gambar di website, tutorial ini akan membantumu untuk melakukannya dengan mudah dalam waktu yang singkat. Dalam tutorial ini, saya akan menunjukkan cara membuat galeri gambar dinamis di PHP dengan database MySQL. Juga, saya akan mengintegrasikan gambar galeri popup menggunakan Plugin jQuery fancybox di galeri foto ini. Plugin fancybox popup membantu untuk menampilkan gambar berukuran besar pada [...]

View

Cara Menghapus banyak record dengan checkbox menggunakan jQuery, PHP dan MySQL

Menghapus record satu per satu sangat memakan waktu ketika ada terlalu banyak record. Kamu dapat membuatnya lebih user friendly dengan memungkinkan pengguna untuk menghapus banyak record hanya dengan satu klik. Kamu dapat menambahkan checkbox dengan masing-masing record dan memungkinkan untuk memilih checkbox dan kemudian mengimplementasikan fungsi untuk menghapus beberapa record yang dipilih melalui tombol delete. Jadi dalam tutorial ini kamu akan belajar cara menghapus banyak record dengan checkbox menggunakan jQuery, PHP dan MySQL. Jadi mari kita mulai coding. Sebelum mulai, kita lihat pada struktur file yang digunakan untuk tutorial ini. Root css style.css [...]

View

Cara validasi ekstensi file dengan JavaScript

Memvalidasi ekstensi file sebelum meng-upload ke server adalah wajib saat mengupload file di aplikasi web. Ini membantu untuk memastikan bahwa pengguna telah memilih tipe file yang tepat dari file yang akan diunggah. Validasi client-side lebih user-friendly daripada server-side. Ini akan ada baiknya untuk memvalidasi tipe file sebelum dikirim untuk diupload. Menggunakan JavaScript, kita dapat dengan mudah memeriksa ekstensi file yang dipilih dengan ekstensi file yang diperbolehkan. Dalam tutorial ini, saya akan menunjukkan bagaimana kamu dapat mengimplementasikan validasi tipe file (ekstensi) dengan JavaScript. Menggunakan validasi script yang saya buat, kamu dapat membatasi pengguna unt [...]

View

Menambahkan efek zoom pada gambar dengan CSS dan jQuery

Ada banyak plugin yang tersedia untuk menambahkan efek khusus pada gambar ketika kursor bergerak di atas gambar (meng-hover gambar). Semua dari plugin tersebut menyertakan banyak kode di halaman web yang mungkin berpengaruh pada kecepatan halaman saat dimuat (lemot). Apabila kamu ingin menggunakan lebih sedikit kode dan menghindari masalah lemot tersebut, skrip efek gambar zoom ini adalah pilihan yang tepat untukmu. Memperbesar gambar saat di-hover membuat antarmuka pengguna lebih baik dalam segala aplikasi web. Kamu dapat dengan mudah menambahkan efek zoom pada gambar dengan CSS dan jQuery. Dalam tutorial ini, saya akan memberi cara sederhana dan kode singkat untuk menambahkan efek zoom [...]