Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini saya akan menjelaskan mengenai AJAX&JSON.

Langsung saja, saya akan menjelaskan berdasarkan list di bawah ini :

1. Memiliki sebuah tombol yang jika di-klik akan mengambil judul pada tautan http://api.babyhanana.com/index.php/home/judul dan menampilkannya pada web Anda.
2. Memiliki sebuah tombol yang jika di-klik akan mengambil url gambar pada tautan  http://api.babyhanana.com/index.php/home/gambar dan menampilkan gambarnya pada web Anda.
3. Memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori pada tautan http://api.babyhanana.com/index.php/home/kategori dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li>.
4. Memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/kategori_json dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> (gunakan for).
5. Memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori beserta produknya dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/kategori_produk dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> beserta setiap produk kategori tersebut dengan juga menggunakan elemen <li>.
6. Memiliki sebuah input untuk memasukkan nama kategori dan sebuah tombol yang jika di-klik akan mengambil daftar produk untuk kategori tersebut dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/produk_by_kategori  dengan parameter "kategori" dan menampilkan setiap produk tersebut pada web Anda dengan menggunakan elemen <li>.
7. Memiliki sebuah input untuk memasukkan pesan dan sebuah tombol yang jika di-klik akan mengirimkan paremeter "pesan" dengan method "POST" dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/kirim_pesan. Lihat halaman http://api.babyhanana.com/index.php/home/timeline untuk mengecek apakah pesan Anda berhasil terkirim atau tidak (refresh untuk melihat pesan baru ;d).
8. Memiliki sebuah list yang menampikan semua pesan yang diambil ada tautan http://api.babyhanana.com/index.php/home/pesan menggunakan elemen <li>.
9. (4 poin) Memiliki sebuah list yang menampikan semua pesan secara real time menggunakan elemen <li> dengan cara mengambil pesan baru pada tautan http://api.babyhanana.com/index.php/home/pesan_with_id_bigger_than dengan method "GET" dan parameter "last_id" yang merupakan id pesan terakhir yang sudah pernah diterima, yang diakses pesan baru setiap 5 detik.

---



1. Pertama, - .

 Outputnya : 


2. -.

 Outputnya : 


3. -.

 Outputnya : 


4. -.

 Outputnya : 


5. -.

 Outputnya : 


6. -.

 Outputnya : 


7. -.

 Outputnya : 

---

Download file final di sini.


Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.

Assalamu'alaikum warrahmatullahi wabarakatuh.

Pada postingan kali ini saya akan menjelaskan mengenai Javascript dan DHTML. Javascript adalah bahasa pemrograman untuk html dan halaman web. Untuk menggunakan Javascript (selanjutnya disingkat menjadi JS) pada html gunakan tag "<script></script>".

Untuk memanggil nilai/tulisan pada html melalui JS, bisa dihubungkan dengan nama id yang digunakan pada element penampung hasil di html inilah yang disebut DHTML.

Ini adalah kriteria yang harus dipenuhi :

1. Menampilkan alert "Selamat Datang" ketika halaman pertama kali dibuka.
2. Terdapat dua buah input text dimana user bisa memasukkan 2 buah angka, dan sebuah tombol. Jika tombol ini ditekan, hasil perkalian 2 buah angka ini akan ditampilkan di sebelah tombol.
3. Terdapat dua buah input text dimana user bisa memasukkan nama depan dan nama belakangnya, dan sebuah tombol. Jika tombol ini ditekan, hasil penggabungan 2 buah nama ini akan ditampilkan di sebelah tombol.
4. Terdapat dua buah input text dimana user bisa memasukkan  2 buah angka yang nilai awal keduanya 0. Jika nilai input text ini berubah, akan ditampilkan sesuatu sesuai dengan nilai kedua input text tersebut. Jika input pertama lebih besar dari input kedua, akan ditampilkan "A menang". Jika input pertama lebih kecil dari input kedua, akan ditampilkan "B menang". Jika input pertama sama dengan input kedua, akan ditampilkan "Seri".
5. Menampilkan sebuah gambar dan sebuah tombol. Jika tombol ini ditekan, maka gambar tersebut akan berubah menjadi gambar yang lain.
6. Menampilkan sebuah tulisan berukuran font besar dan berwarna tertentu. Jika tulisan ini ditekan, maka warna tulisan tersebut akan berubah menjadi warna yang lain.
7. Terdapat sebuah input text dimana user bisa memasukkan tulisan, sebuah tombol, dan sebuah list. Jika tombol ditekan, maka tulisan pada input text akan masuk menjadi anggota list yang paling bawah.

---



1. Pertama, gunakan pop up boxes dengan tipe alert, sintaksnya adalah "window.alert("TEKS");" .
<script> window.alert("SELAMAT DATANG ☀"); </script>
 Outputnya : 


2. Kedua, untuk menghasilkan sebuah perkalian antara dua nilai, gunakan sintaks fungsi yang terdapat dua 3 variabel di dalamnya dan operator yang akan digunakan (/*-+).
<input type="text" id="bil1" placeholder="insert"><b> X </b> <input type="text" id="bil2" placeholder="number"> <button onclick="soal1()">=</button> <span id="hasil1"></span> <script> function soal1() { var a = document.getElementById("bil1").value; var b = document.getElementById("bil2").value; var h1 = a*b; document.getElementById("hasil1").innerHTML = h1; } </script>
 Outputnya : 


3. Ketiga, untuk menggabungkan dua buah kata/kalimat yang terpisah, guanakan operator penjumlahan antara variabel yang ada, dan jangan lupa tambahkan string spasi (" ").
First Name : <input type="text" id="nama1" placeholder="insert your first name"> Last Name : <input type="text" id="nama2" placeholder="insert your last name"> <button onclick="soal2()"> Merge Your Name :</button> <span id="hasil2"></span> <script> function soal2() { var a = document.getElementById("nama1").value; var b = document.getElementById("nama2").value; var h2 = a+" "+b; document.getElementById("hasil2").innerHTML = h2; } </script>
 Outputnya : 


4. Keempat, untuk membandingkan dua nilai gunakan comparison dengan sintaks if/else if/else layaknya pada bahasa pemrograman biasa (seperti bahasa c/c++/pascal).
<input type="text" id="bil3" onchange="soal3()" value="0" > <b> versus </b> <input type="text" id="bil4" onchange="soal3()" value="0"> <button onclick="soal3()"> Who's the winner?</button> <span id="hasil3"></span> <script> function soal3() { var h3; var a = document.getElementById("bil3").value; var b = document.getElementById("bil4").value; if (a>b) { h3 = "A won.";} else if (a<b) { h3 = "B won.";} else { h3 = "Seri."} document.getElementById("hasil3").innerHTML = h3; } </script>
 Outputnya : 


5. Kelima,  untuk mengganti sebuah gambar dengan gambar lain, sintaks yang digunakan untuk output masih sama yaitu "document.getElementById("ID-GAMBAR-YANG-AKAN-DIGANTI").src="nama-gambar-pengganti".
<img id="hasil4" src="stuff/pict2.png"> <button onclick="soal4()">Other version ?</button> <script> function soal4() { document.getElementById("hasil4").src="stuff/pict1.png"; } </script>
 Outputnya : 


6. Keenam, untuk mengganti warna sebuah kata/kalimat, gunakan "style.color="nama-warna";" setelah sintaks "document.getElementById("id-kalimat")".
<span >Try to click it!</span> <span id="hasil5" onmousedown="grey()" onmouseup="blue()"><h2> " Grey is the first, blue after it. "</h2> </span>. . . . . . <script> function grey() { document.getElementById("hasil5").style.color="#414141"; } function blue() { document.getElementById("hasil5").style.color="#4c63d9"; } </script>
 Outputnya : 


7. Ketujuh, untuk menambahkan kata/kalimat baru gunakan JS Array push (selebihnya: w3-arrayPush) .
<span>List your top favorite stuffs here : </span> <input id="l-stuffs" type="text" placeholder="list here"> <button onclick="list()">Create</button> <span id="hasil6"></span> <script> var stuffs =[""]; document.getElementById("hasil6").innerHTML = stuffs; function list() { var a = document.getElementById("l-stuffs").value;stuffs.push(a); document.getElementById("l-stuffs").innerHTML = a; document.getElementById("hasil6").innerHTML = stuffs.join(" <li type=list>"); } </script>
 Outputnya : 

---

Download file final di sini.


Wassalamu'alaikum warahmatullah wabarakatuh.


Fadilah Nur Imani.