Tuesday 31 May 2016

Perbedaan $(input) dan $(:input) dalam JQuery

Apa saja perbedaan $(input) dan $(:input), simak penjelasan berikut supaya anda tidak salah menggunakan dan dapat menghemat waktu dalam koding.

$(:input) memilih semua elemen tag input, textarea, dan button, sedangkan $(input) hanya memilih semua elemen dengan tag input.

Menggunakan $(input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $('input').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Menggunakan $(:input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $(':input').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Memilih input text saja menggunakan $(:input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $(':input[type="text"]').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Lalu, manakah yang performanya lebih baik antara $(input[type="text"]) dan $(:input[type="text"])?
Ya, tentu saja $('input[type="text"]') lebih baik dari $(:input[type="text"]), dikarenakan $(:input[type="text"]) harus mendeteksi semua elemen input, textarea, select, dll. Sedangkan $(input[type="text"]) hanya mendeteksi elemen input. Jadi kesimpulannya, jika anda ingin menemukan elemen dengan tag input, lebih baik menggunakan $(input[type="text"]) daripada $(:input[type="text"]).

Pengertian dan Perbedaan $(document).ready dan $(window).load Pada JQuery

22:27 Unknown JQuery No comments

$(document).ready

$(document).ready

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $("#button1").click(function(){
                alert("JQuery Tutorial");
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Klik Saya!"/>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $("#button1").click(function(){
                alert("JQuery Tutorial");
            });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Klik Saya!"/>
    </body>
</html>

Tambahkan code JQuery $(document).ready seperti contoh pertama, atau
Letakkan elemen "script" di akhir sebelum penutup elemen "body"

$(window).load

$(window).load

$(document).ready

Klik disini

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(window).load(function(){
                alert("Window Termuat");
            });
            $(document).ready(function(){
                alert("Dokumen Termuat");
            })
        </script>
    </head>
    <body>
    </body>
</html>

Menggunakan $(window).load

Menggunakan $(document).ready

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(window).load(function(){
                var height = $("#image1").height();
                var width = $("#image1").width();
                $("#div1").html("Height = " + height + "<br/>Width = " + width);
            });
        </script>
    </head>
    <body>
        <div id="div1">
</div>
<img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHQ0U4Dh9j2ndTTn6B7ZYVZ-7WuYf6C_f9DfL6b970zzWA903qvoKK0KnB0l9C4TsEDtYo0UGxJvkdtu25wDAPI7jGTPnGr4hUmtun-cLUJUs3YujovxCGLKGhczLFCai9eyHK0lTppE/s320/1.jpg" width="320" id="image1"/>
    </body>
</html>

Refresh

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var height = $("#image1").height();
                var width = $("#image1").width();
                $("#div1").html("Height = " + height + "<br/>Width = " + width);
            });
        </script>
    </head>
    <body>
        <div id="div1">
</div>
<img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHQ0U4Dh9j2ndTTn6B7ZYVZ-7WuYf6C_f9DfL6b970zzWA903qvoKK0KnB0l9C4TsEDtYo0UGxJvkdtu25wDAPI7jGTPnGr4hUmtun-cLUJUs3YujovxCGLKGhczLFCai9eyHK0lTppE/s320/1.jpg" width="320" id="image1"/>
    </body>
</html>

Refresh

Cara Menggunakan JQuery Add dan Remove Element

19:21 Unknown JQuery No comments

Kali ini saya akan menjelaskan cara penggunaan JQuery Add Element/Content dan Remove Element/Content. Pertama-tama kita harus method yang digunakan untuk menambah dan menghapus elemen atau konten pada HTML.

Add -- Menambah Elemen atau Konten :

append() - Menyisipkan elemen/konten di akhiran elemen yang dipilih
prepend() - Menyisipkan elemen/konten di awalan elemen yang dipilih
after() - Menyisipkan elemen/konten setelah elemen yang dipilih
before() - Menyisipkan elemen/konten sebelum elemen yang dipilih

Remove -- Menghapus Elemen atau Konten :

remove() - Menghapus elemen yang dipilih beserta anak elemen(child element)
empty() - Mengosongkan anak elemen(child element) dari elemen yang dipilih

Contoh JQuery Add

Contoh JQuery Remove

Submit

|Test disini|

Buah :
- Jeruk
- Apel
- Anggur
- Semangka
Hewan :
- Kucing
- Sapi
- Kambing
- Anjing
- Domba

HTML Syntax

Javascript Syntax

Penggunaan JQuery Mouse Event

20:01 Unknown JQuery No comments

Kali ini saya akan menjelaskan macam macam JQuery Mouse Event :

.click()
Memicu peristiwa dengan "klik".
.dblclick()
Memicu peristiwa dengan "dobel klik".
.contextmenu()
Memicu peristiwa dengan "konteks menu".
.hover()
Memicu peristiwa ketika mouse pointer masuk atau meninggalkan elemen.
.mousedown()
.mouseenter()
Memicu peristiwa ketika mouse memasuki sebuah elemen.
.mouseleave()
Memicu peristiwa ketika mouse meninggalkan sebuah elemen
.mousemove()
.mouseout()
.mouseover()
.mouseup()

Click Event

Double Click Event

Mouse Enter Event

Mouse Leave Event

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("click",function(){
$("#result").text("Click Event");
});
});
</script>
</head>
<body style="text-align:center">
<input type="button" id="button" value="Klik"/><br/>
<p id="result"></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("dblclick",function(){
$("#result").text("Double Click Event");
});
});
</script>
</head>
<body style="text-align:center">
<input type="button" id="button" value="Double Klik"/><br/>
<p id="result"></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("mouseenter",function(){
$("#result").text("Mouse Enter Event");
});
});
</script>
</head>
<body style="text-align:center">
<input type="button" id="button" value="Mouse Enter"/><br/>
<p id="result"></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("mouseleave",function(){
$("#result").text("Mouse Leave Event");
});
});
</script>
</head>
<body style="text-align:center">
<input type="button" id="button" value="Mouse Leave"/><br/>
<p id="result"></p>
</body>
</html>

Apa itu JQuery Selector?

18:26 Unknown JQuery No comments

JQuery Selector adalah salah satu bagian paling penting dari JQuery Library. JQuery Selector memungkinkan kita untuk memilih dan memanipulasi satu atau banyak elemen HTML. JQuery Selector digunakan untuk "menemukan" elemen HTML berdasarkan nama, id, kelas, jenis, atribut, nilai atribut dan banyak lagi. Semua selector JQuery diawali dengan tanda dollar dan tanda kurung : $().
Contoh dari JQuery Selector:

Image 1

Image 2

HTML Syntax :

Penjelasan lebih lanjut tentang JQuery Selector bisa anda lihat di bawah ini :

Cara Membuat RadioGroup dan RadioButton di Android

20:16 Unknown Android No comments

Kali ini saya akan menjelaskan bagaimana cara membuat RadioGroup dan RadioButton di Android. Untuk membuat RadioButton pertama-tama kita harus menjadikan RadioGroup sebagai parent layout dari RadioButton, kenapa? karena untuk mengumpulkan beberapa RadioButton dibutuhkan RadioGroup sebagai pemisah antara RadioButton terpilih dan tidak terpilih. Dan untuk mengecek apakah RadioButton bekerja saya akan menggunakan Button + Toast. Simak tutorial berikut ini :

Deklarasi variable berikut ini di luar onCreate

int checkedRadioButton = 0 = untuk mengecek radio button mana yang terpilih, default = 0.
private RadioGroup.OnCheckedChangeListener checkedChangeListener = digunakan sebagai listener dari radio group yang nanti akan digunakan.
private View.OnClickListener onClickListenerSubmit = sebagai Click Listener dari Button Submit yang nanti akan digunakan.
private View.OnClickListener onClickListenerReset = sebagai Click Listener dari Button Reset yang nanti akan digunakan.
private String getOption() = sebagai method untuk mendapatkan result dari radio button yang terpilih.

Deklarasi variable dan listener berikut di dalam onCreate()

radioGroup.setOnCheckedChangeListener = mendeklarasi Checked Change Listener dari Radio Group
submit.setOnClickListener() = mendeklarasi Click Listener dari Button Submit
reset.setOnClickListener() = mendeklarasi Click Listener dari Button Reset

Java Syntax

XML Syntax

Apa itu Toast dan Bagaimana Cara Membuat Toast di Android

22:00 Unknown Android No comments

Kali ini saya akan menjelaskan tentang toast. Apa itu Toast? Toast merupakan sebuah class yang digunakan untuk menampilkan pesan/peringatan pada Android dan muncul hanya sepersekian detik.

Contoh Toast :

Lalu bagaimana cara membuatnya, ikuti tutorial berikut ini :

Buat project/activity baru terlebih dahulu.

Beri event untuk menampilkan toastnya, disini saya menggunakan Button Click Listener untuk menampilkan toastnya.

Toast = pemanggilan kelas Toast.
.makeText() = method dari kelas Toast untuk membuat text dari Toast itu sendiri.
MainActivity.this = Context yang saat ini digunakan.
"Toast Success" = teks yang akan ditampilkan di Toast.
Toast.LENGTH_SHORT = durasi penampilan Toast.
.show() = method untuk menampilkan Toastnya.

Contoh Toast yang berhasil :

Java Syntax

XML Syntax

Cara Berpindah Activity di Android

23:04 Unknown Android No comments

Cara berpindah activity di Android sebenarnya cukup mudah, dan untuk activity berpindah kita menggunakan Intent.
Saya akan menjelaskan 2 cara berpindah activity, ikuti dan pahami :

Membuat Activity baru terlebih dahulu.

Beri Nama Activity Kalian

Beri event untuk pindah activity

Cara pertama berpindah activity :

startActivity = fungsi yang digunakan untuk memulai activity
new Intent = memanggil kelas intent
MainActivity.this = Nama Activity yang saat ini digunakan
Main2Activity.class = Nama Activity yang akan dibuka

Cara kedua :

Activity android:name = isi dengan nama kelas activity kalian.
Activity android:label = judul activity kalian, akan ditampilkan di bagian ActionBar.
Intent-filter -> Action android:name = isi sesuai selera kalian, disarankan dimulai dengan nama depan package kalian, contoh : com.example.blablabla, nama ini akan digunakan untuk mendeklarasi activity baru kalian
Intent-filter -> Category android:name = disarankan untuk diisi dengan "android.intent.category.DEFAULT"

Full Java Syntax

Full XML Syntax

Full AndroidManifest.xml Syntax

Apa itu Context di Android ?

18:46 Unknown Android No comments

Definisi dari Context :

Context menampilkan lingkungan hidup sebuah data.
Dia menyediakan akses hal-hal seperti database.

Contoh Sederhana : Perusahaan

Seseorang bernama X menjadi bejabatan sebagai CEO dalam sebuah perusahaan software start-up.
Ada seorang arsitek utama hadir memimpin di sebuah perusaan, arsitek utama ini melakukan semua pekerjaan di perusahaan yang melibatkan database, UI, dll.
Sekarang seorang CEO tadi mempekerjakan seorang Developer baru.
Dan arsitek utama inilah yang mengatakan tanggung jawab kepada orang yang baru direkrut berdasarkan pada keterampilan orang baru yang apakah ia akan bekerja pada database atau UI dll.

Contoh Sederhana : Hotel

Hal ini mirip dengan ketika Anda mengunjungi sebuah hotel, Anda ingin sarapan, makan siang & makan malam di waktu yang tepat, kan?
Ada banyak hal yang anda inginkan selama tinggal di hotel tersebut, bagaimana cara anda mendapatkan hal hal itu?
Tentu saja, anda meminta seorang pelayan kamar hotel untuk membawa hal-hal tersebut kepada anda.
Kesimpulannya :

Pelayan Kamar = Context.
Anda/Pengunjung Hotel = Aktivitas Tunggal (Activity).
Hotel = Aplikasi (Application).
Sarapan, makan siang, makan malam, dan sesuatu yang anda inginkan selama tinggal di hotel = Sumber Daya (Resource).

Hal-hal yang Melibatkan Context :

Memuat sumber daya (Resource).
Menjalankan Aktivitas Tunggal (Activity) baru.
Membuat view (ex: TextView, Button, Spinner, dll).
Mendapatkan pelayanan sistem.

Cara Untuk Mendapatkan Context :

getApplicationContext()
getContext()
getBaseContext()
atau this

Contoh :

TextView textView = new TextView(this)
this-> menunjuk ke context yang sedang digunakan

Cara Install dan Konfigurasi Genymotion Dengan Android Studio

00:19 Unknown Android No comments

Saya akan menjelaskan bagaimana cara menginstall Genymotion dan mengkonfigurasikannya dengan Android Studio, ikuti langkah-langkah berikut ini:

Buka web official Genymotion di sini, kemudian anda akan diwajibkan login, daftar terlebih dahulu jika belum mempunyai akun genymotion.
Kemudian klik download Genymotion package di sini.
Kemudian akan ada 2 pilihan, yang pertama Download dengan Virtual Box (Jika belum mempunyai Virtual Box), yang kedua Download tanpa Virtual Box (Jika Sudah Punya Virtual Box), saya sarankan "Download dengan Virtual Box" meskipun sudah mempunyai virtual box.
Tunggu Hingga download selesai, dan install.
Kemudian buka Genymotion.
Akan muncul gambar seperti di bawah ini :
Klik Tombol Add di bagian atas.
Kemudian akan muncul tampilan seperti di bawah ini:
Klik Sign In, lalu masukkan username dan password yang telah didaftarkan.
Kemudian akan muncul tampilan

Pilih salah satu emulator yang akan digunakan, lalu klik next.
Kemudian anda diminta memberi nama emulator yang telah terpilih, Klik next untuk pemberian nama secara default.
Kemudian akan muncul tampilan seperti berikut

Tunggu hingga download selesai.
Emulator siap dijalankan, klik 2 kali di emulator atau klik Tombol Start untuk menjalankannya.
Kemudian Buka Android Studio untuk mengkonfigurasi Android Studio dengan Genymotion.
Klik "File->Settings" lalu menuju ke "Plugins", kemudian Klik "Browse repositories..."
Kemudian ketikkan Genymotion di kolom pencarian

Lalu klik install, Tombol install tadi akan menjadi tombol "Restart Android Studio", klik tombol tersebut.
Kemudian anda akan melihat tombol baru di Android Studio anda seperti berikut ini

Klik tombol tersebut, jika sebelumnya pernah terinstal maka akan muncul gambar seperti berikut ini

Jika belum pernah terinstal biasanya akan muncul perintah untuk meminta lokasi Genymotion yang telah terinstal, biasanya terdapat di "C:\Program Files\Genymobile\Genymotion".
Pilih salah satu emulator lalu klik Tombol "Start...", tunggu hingga loading selesai, jika berhasil akan muncul tampilan seperti ini

Jika berhasil, maka anda dapat mendebug dengan Genymotion seperti berikut ini

Genymotion memiliki kelebihan dibanding emulator bawaan Android Studio.
Kelebihan dan Kekurangan Genymotion

Spesifikasi komputer yang minimum masih dapat menjalankan Genymotion dengan lumayan lancar
Sangat ringan dijalankan, terutama untuk mengakses menu-menu pada Android
Mendukung akses ke Android UI secara penuh
Mendukung fitur drag & drop untuk mengcopy file dari komputer ke sistem virtual secara langsung

Membutuhkan software tambahan, yaitu VirtualBox sebagai mesin virtual-nya untuk menjalankan Android
Tidak mendukung penggunaan aplikasi secara default (termasuk game)
Versi gratis, fiturnya ada yang dibatasi

Cara Membuat Efek Suara di Android

17:53 Unknown Android No comments

Sebenarnya cara membuat efek suara saat aplikasi pertama kali dijalankan atau saat menekan beberapa tombol yang dapat memicu memulai efek suara tersebut, disini saya akan menggunakan tombol untuk memulai efek suara, langsung saja.
1. Inisialisasi MediaPlayer Disini saya menggunakan button listener untuk memulai efek suaranya 2. Copy file mp3 ke dalam folder raw di project

Untuk lokasi lebih jelasnya : "Folder Project Anda->app->src->main->res->raw", jika tidak ada folder raw anda bisa membuatnya sendiri dan ganti nama foldernya menjadi raw(wajib) 3. Deklarasi variable MediaPlayer tadi di onCreate() disini saya menggunakan Button, jadi perlu di deklarasi terlebih dahulu juga. 4. Memberi Listener Pada Button 5. Penjelasan

MediaPlayer.start() digunakan untuk memulai efek suara
this pada MediaPlayer.Create(this, R.raw.photograph) adalah untuk mendeklarasi context yang saat ini sedang digunakan, sedangkan R.raw.photograph adalah nama file mp3 nya

6. Full Java Syntax 7. Full XML Script

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya