Daftar Tutorial Javascript Gratis

Auto Click Object dengan Timer Menggunakan JQuery dan Javascript

Artikel ini direquest oleh salah satu pengunjung blog ini, yang memanfaatkan layanan article by request. Artikel yang diminta adalah tutorial bagaimana membuat script yang secara otomatis melakukan klik pada suatu obyek tertentu dalam sebuah laman web berdasarkan waktu yang telah ditentukan.

Sebagai contoh misalkan di laman web tersebut terdapat dua buah gambar, misal image1 dan image2. Selanjutnya diharapkan secara otomatis ada sebuah script yang mengklik image1 pada waktu tertentu, dan juga akan mengklik image2 pada waktu yang lain.

Untuk solusi permasalahan tersebut, kita bisa menggunakan jQuery dan Javascript.

view post

Javascript, PHP

Membuat Progress Bar Upload File Dengan PHP, AJAX dan HTML5

Pada kesempatan kali ini, saya akan membahas bagaimana cara membuat script PHP untuk upload file dengan progress bar. Adapun konsep dari program ini adalah sama seperti script upload file yang pada umumnya namun dilengkapi dengan sebuah progress bar yang menggunakan script HTML5 dan Javascript. Progress bar merupakan tampilan secara grafis yang menunjukkan sudah berapa persen file tersebut diupload ke server. Untuk lebih jelasnya dapat anda lihat pada gambar berikut:

photo upload-progressbar_zps0e247118.jpg

Pada gambar diatas, tampak bahwa ketika selama proses uploading file, progress bar (warna hijau) akan bergerak dan menampilkan ukuran file yang telah terupload hingga file sempurna terupload. Sistem hampir mirip dengan sistem yang diterapkan oleh situs sharing video, misalnya Youtube ketika usernya akan mengupload video. Penasaran bagaimana cara membuat script php seperti gambar diatas ? Berikut adalah penjelasannya.

view post

Javascript

Cara Mudah Menampilkan Video di Web dengan HTML5

Masih repot menampilkan file video di halaman web? Kini tidak lagi. Kalau dulu, kita membutuhkan script video player, seperti Flow Player, atau yang lain untuk menampilkan video dan memutarnya di halaman web Anda. Namun kini dengan HTML5, Anda cukup mengupload file videonya saja ke hosting atau web server, lalu membuat tag HTML saja, dan selesai.

Wah mudah banget ya?? 🙂

So… Bagaimana bentuk tag untuk menampilkan file video ke halaman web dengan HTML5? caranya cukup mudah, cukup membuat tag HTML sebagai berikut:

view post

Javascript

Membuat Script Countdown Timer Link Download

Jika Anda sering mengunduh file di situs-situs file sharing seperti 4shared, rapidshare dll pastinya sering menjumpai countdown timer atau perhitungan waktu mundur sebelum muncul link download filenya. Mungkin Anda bertanya-tanya, mengapa perlu countdown tersebut? apa manfaatnya bagi situs tersebut? Ya.. manfaatnya ada, yaitu supaya pengunjung mau melihat iklan-iklan yang ada di halaman tersebut sambil menunggu countdown timer nya selesai. Apalagi jika iklannya adalah iklan PPC tentunya hal ini akan memberikan revenue bagi pemilik situs tersebut. Khusus untuk situs file sharing biasanya memanfaatkan pengunjung yang tidak sabaran menunggu countdown selesai untuk menawarkan layanan premium download.

Tentang countdown timer link download ini, bisa gak sih kita membuatnya sendiri? dan kalau bisa, kira-kira sulit nggak? Jawabannya adalah bisa, dan tidak sulit kok karena kita bisa membuatnya sendiri dengan Javascript. Scriptnya sendiri mudah dipahami.

view post

Javascript, PHP, Wordpress

Membuat Fasilitas Cetak Artikel di WordPress dengan Google Print Cloud

Jika Anda perhatikan di blog saya ini, maka di setiap artikel/postingan tersedia tombol untuk mencetak artikel tersebut via Google Print Cloud. Letak tombol ini tepatnya di bawah judul artikel.

BTW… Apa sih kelebihan cetak artikel via Google Print Cloud? Ya… dengan fitur tersebut, ketika Anda browsing blog ini menggunakan gadget apapun, misalnya tablet PC atau HP yang browsernya mendukung Javascript, Anda bisa langsung cetak ke printer melalui layar gadget Anda, meskipun gadget Anda tidak terkoneksi ke printer langsung. Lantas.. dari printer mana artikel ini akan dicetak? yaitu melalui printer yang sudah Anda register atau didaftarkan di Google Print Cloud. Menarik bukan???

Dalam artikel ini, akan saya paparkan cara menambahkan tombol print artikel via Google Print Cloud ini di blog WordPress Anda. Alangkah lebih cantik jika tombol ini diintegrasikan dengan plugin WP Print, karena dengan plugin ini akan digenerate sebuah halaman yang printer friendly untuk setiap artikelnya. Nah… Google Print Cloud ini nantinya akan mencetak halaman printer friendly yang dihasilkan oleh plugin WP Print.

view post

Javascript

Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan

Beberapa tahun yang lalu, saya pernah menjelaskan cara mengirim atau mensubmit data secara simultan melalui sebuah form dinamis. Anda bisa membaca kembali artikel tersebut.

Meskipun cara yang dijelaskan pada artikel tersebut berhasil, namun secara teknis cara tersebut agak sedikit merepotkan. Mengapa merepotkan? ya.. karena kita diminta menentukan dahulu jumlah data yang akan disubmit. Penentuan jumlah data ini dilakukan supaya memunculkan komponen input sejumlah data tersebut dalam formnya. So.. gimana kalau jumlah datanya banyak, dan kita tidak sempat menghitungnya? Nah.. repot bukan?

Dalam artikel ini, saya akan mencoba memaparkan teknik lain dalam membuat form dinamis yang mirip seperti di atas namun tanpa menentukan jumlah datanya dahulu, melainkan dengan mengklik suatu tombol atau link maka secara otomatis komponen input akan bertambah sendiri. Setiap kali kita mau menambah data baru, tinggal klik link tersebut tanpa merefresh halaman sehingga data yang telah diinputkan sebelumnya tidak hilang.

view post

Javascript

Javascript Untuk Validasi Input Hanya Angka Pada Form

Siang tadi, salah satu member saya (mbak Laksmi) sedang dilanda kebingungan. Sistem atau aplikasi yang dia buat akan mengalami error bila input yang diterima oleh script dari sebuah form diisi dengan data yang bukan berupa angka. Oleh karena itu, dia ingin bagaimana cara melakukan validasi input supaya menolak proses submit bila ada komponen input form yang diisi value yang bukan berupa angka. Dengan kata lain… proses submit akan dilakukan jika value yang dimasukkan benar-benar berupa angka.

OK.. mbak Laksmi, ini dia artikel yang akan membahas hal tersebut. Mudah-mudahan bisa menjadi solusi. Kalaupun belum menjadi solusi sepenuhnya, silakan dikembangkan sendiri ya. Saya hanya ngasih ide dan cara dasarnya alias kailnya saja, sedangkan ikannya silakan dicari sendiri ya 🙂

view post