jquery – Catatan Kecil Arya Dharmaadi's Blog Mon, 01 Nov 2021 09:50:28 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 /wp-content/uploads/2016/02/cropped-java-65x65.png jquery – Catatan Kecil 32 32 AJAX /2021/11/01/ajax/ /2021/11/01/ajax/#respond Mon, 01 Nov 2021 09:50:24 +0000 /?p=1208 Berikut adalah materi lanjutan dari mata kuliah pemrograman internet.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2021/11/01/ajax/feed/ 0 JQuery /2020/11/14/jquery/ /2020/11/14/jquery/#respond Sat, 14 Nov 2020 03:53:50 +0000 /?p=783 Materi berikut adalah materi lanjutan untuk mata kuliah Pemrograman Internet.

Loader Loading…
EAD Logo Taking too long?

Reload Reload document
| Open Open in new tab
]]> /2020/11/14/jquery/feed/ 0 Tutorial Dasar JQueryMobile (Part 1) /2016/10/05/tutorial-dasar-jquerymobile-part-1/ /2016/10/05/tutorial-dasar-jquerymobile-part-1/#respond Wed, 05 Oct 2016 16:02:38 +0000 /?p=153 [...]]]> JqueryMobile adalah sebuah library CSS dan JS untuk menghasilkan tampilan antarmuka berbasis web yang responsif yang bisa diakses dengan baik, artinya tampilan web tidak berantakan dan tidak hancur walaupun diakses melalui beragam perangkat yang berbeda resolusi layarnya, seperti Desktop, Tablet, maupun Smartphone.

Sebelum memulai tutorial ini, diasumsikan pembaca telah memahami konsep pemrograman HTML, CSS, dan JS dengan baik.

SETUP AWAL JQUERYMOBILE

Untuk mendownload library JQueryMobile, silahkan buka situs resmi JQueryMobile, atau download langsung melalui link berikut: http://jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip

Anda juga harus mendownload library JQuery yang bisa didownload di http://code.jquery.com/jquery-1.9.0.min.js

Setelah didownload, yang kita akan gunakan adalah:

  1. file jquery.mobile-1.4.5.min.css dan folder images (diletakkan di folder css dari project anda)
  2. file jquery.mobile-1.4.5.min.js dan file jquery.mobile-1.4.5.min.map (diletakkan di folder js dari project anda)
  3. file jquery-1.9.0.min.js (diletakkan di folder js dari project anda)

Kemudian, kita mulai membuat file html, kita namakan index.html.

Struktur File
Struktur File

SETUP HTML

Isi dari file HTML adalah meng-load semua library JQueryMobile (CSS dan JS) pada bagian <head>. Selanjutnya di bagian <body>, kita mulai menggunakan elemen-elemen dasar JQueryMobile untuk membuat header, isi website, dan footer. Isi website akan diisi dengan tampilan widget listview.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery Mobile Framework</title>
        <link rel='stylesheet' href='css/jquery.mobile-1.4.5.min.css'/>
        <script src='js/jquery-1.9.0.min.js' ></script>
        <script src='js/jquery.mobile-1.4.5.js' ></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-theme="b">
                <h1>Latihan</h1>
            </div>
 
            <div data-role="content">
                <ul data-role="listview" data-theme="c">
                    <li><a href="#"  data-transition="flip"><h2>Mengenal MongoDB, Open Source Database NoSQL Document-Oriented</h2></a></li>					
                    <li><a href="#"  data-transition="flip"><h2>7 Plugin Firefox yang Wajib Dimiliki Para Web Developer</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Membuat SpreadSheet Online Dengan dhtmlxSpreadSheet</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Kendo UI, Framework HTML5 Dibundel JQuery dan CSS3</h2></a></li> 					
                    <li><a href="#"  data-transition="flip"><h2>Membuat Pretty URL Sederhana Pada ASP.NET 4.0</h2></a></li> 
                    <li><a href="#"  data-transition="flip"><h2>Deteksi Perangkat Mobile Dengan Javascript Sederhana</h2></a></li> 
                </ul>
            </div>
 
            <div data-role="footer" data-theme="a">
                <h3>Kuliah Promnet</h3>
            </div>
        </div>
    </body>
</html>

Jika dicoba dijalankan, maka akan menampilkan hasil sebagai berikut:

Tampilan index.html
Tampilan index.html

 

Agar bisa terlihat seperti tampilan mobile di atas, pada browser mozilla, klik kanan dan pilih menu “Inspect Elemen”. Selanjutnya klik tombol “View Responsive Design” pada bagian bawah.

Inspect Elemen pada Mozilla
Inspect Elemen pada Mozilla

 

NEXT?

Selanjutnya anda bisa mencoba membuat widget-widget lain yang akan ditampilkan pada bagian konten website, seperti Tabs, Panel, Popup, Collapsible, dll. Panduan lengkapnya bisa dilihat di http://demos.jquerymobile.com/1.4.5/

Selamat mencoba 🙂

]]> /2016/10/05/tutorial-dasar-jquerymobile-part-1/feed/ 0 Kolaborasi jQuery + AJAX + PHP + MySQL /2015/11/15/kolaborasi-jquery-ajax-php-mysql/ /2015/11/15/kolaborasi-jquery-ajax-php-mysql/#comments Sun, 15 Nov 2015 05:18:51 +0000 /?p=35 [...]]]> Untuk materi ini, saya asumsikan anda sudah mampu menginstall aplikasi web server XAMPP pada komputer anda dan memahami sintaks dasar PHP, Javascript, dan penggunaan MySQL.

PENDAHULUAN

AJAX (Asynchronous JavaScript and XML) dimanfaatkan untuk membuat web interaktif dan dinamis tanpa perlu membuat browser melakukan refresh ketika meminta data ke server. AJAX memungkinkan semua dapat dilakukan secara instan, tanpa perlu lagi menunggu halaman di-reload, sehingga aplikasi web mirip dengan aplikasi desktop dalam hal responsibilitas maupun interaktifitas. Saat ini, AJAX sudah menjadi teknologi yang wajib diterapkan dalam pengembangan web modern (web 2.0).

HUBUNGAN ANTARA HTML, AJAX, PHP, DAN MYSQL

Secara ringkas, keterhubungan antara semua topik bahasan di materi ini (HTML, AJAX, PHP, dan MySQL) digambarkan sebagai berikut:

Keterkaitan antara HTML, AJAX, PHP, dan MySQL

Pada saat dibuka, web browser masih kosong. Kemudian browser membuka sebuah halaman sehingga browser melakukan request ke server. Hasil request adalah script HTML, CSS, JS (termasuk Ajax Engine), dan script-script tersebut di-load ke web browser. Selanjutnya seperti pada gambar di atas, ketika user akan melakukan suatu perintah pada aplikasi, halaman HTML tetap diam, namun di belakang layar, AJAX Engine yang melakukan http request ke server.

ANTARA JQUERY DAN AJAX

jQuery merupakan sebuah library Javascript sehingga mempermudah manipulasi komponen di dokumen HTML, menangani event, animasi, efek, dll. Selain itu, jQuery mempermudah developer web untuk memproses interaksi AJAX. Tanpa library seperti jQuery, menerapkan AJAX akan lebih sulit, panjang, dan rumit, terutama untuk pemula yang baru belajar Javascript.

MEMULAI PROJECT

Sebagai latihan, akan dibuat sebuah aplikasi ajax berdasarkan project yang sebelumnya (aplikasi insert nama dan hobi). Project sebelumnya bisa dilihat di sini. Aplikasi ajax ini akan mencari nama pada tabel ‘daftar_hobi’ dan akan menampilkan hobinya. So, jalankan web server pada komputer anda. Dari project yang sebelumnya (folder latihan), buatlah folder untuk project yang baru dengan nama ‘ajax’. Buatlah sebuah file html, dengan nama ‘index.html’.

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Latihan AJAX</title>
	
    <!-- Jquery Mobile -->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
    <link href="css/my-style.css" rel="stylesheet">
	
    <style>
		@media (min-width: 720px) {
			#main{
				width: 50%;
				margin: auto;
			}
		}
    </style>
	
    <!-- jQuery  -->
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
	<div data-role="page" class="jqm-demos jqm-home">		
		<div style="margin-top: 50px; margin-bottom: 30px;" id="main" role="main" class="ui-content">						
			<div id="result" style="margin-bottom: 20px; display: none">
			  <h3 class="ui-bar ui-bar-a ui-corner-all">Hasil Pencarian</h3>
			  <div class="ui-body ui-body-a ui-corner-all">
				
			  </div>
			</div>
			
			<div id="pencarian">
			  <h3 class="ui-bar ui-bar-a ui-corner-all">Form Pencarian</h3>
			  <div class="ui-body ui-body-a ui-corner-all">
				<form id="form-pencarian" action="get_hobi.php" method="post">
					<label for="search-1">Masukkan Nama anda:</label>
					<input name="nama" id="nama" value="" placeholder="Cari nama . . . " type="search">
					<input value="C A R I" data-theme="a" type="submit">
				</form>
			  </div>
			</div>
		</div><!-- /content -->
	</div>
</body>
</html>

?Project ini memanfaatkan library jQueryMobile untuk mempercantik tampilan web dan library jQuery untuk mempermudah penggunaan AJAX. ?Poin yang paling penting adalah:

  1. ?Menyediakan element untuk menampilkan hasil pencarian, yaitu div dengan id=“result”
  2. ?Membuat form untuk pengiriman data, dengan id=“form-pencarian” action=“get_hobi.php” method=“post”
  3. Form tersebut terdiri dari input dengan type=“text” dan input dengan type=“submit”
Tampilan index.html
Tampilan index.html

BUAT SCRIPT UNTUK AJAX

?Setelah selesai membuat script HTML, selanjutnya buat script untuk penanganan AJAX. ?Script bisa ditulis di file terpisah atau ditulis di bagian head file index.html. ?Dalam project ini, script ditulis di bagian head file index.html karena code-nya sedikit.

<script type='text/javascript'>
		var temp;
		$(document).ready(function (){
			$('#form-pencarian').submit(function(event) {
				
				/* stop form from submitting normally */
				event.preventDefault();
				
				$('#result .ui-body').html('');
				
				var url = $(this).attr('action');
				
				$.ajax({
					type: $(this).attr('method'),
					url: url,
					data: $(this).serialize(),
					dataType: "JSON",
					success: function(data){
//						alert(data);
						if (data == null){
							$('#result .ui-body').html('Data tidak ditemukan');
						}else{
							$('#result .ui-body').html(data[0].nama+' memiliki hobi '+data[0].hobi);
						}
						$('#result').show();
					}
				});
			});
		});
	</script>

Keterangan Singkat:?

$(document).ready() berfungsi untuk pengecek event, jadi apabila semua elemen pada dokumen HTML sudah di-load semua, maka script di dalam blok fungsi $(document).ready() akan dijalankan.?

?$(‘#form-pencarian’).submit() berfungsi sebagai listener event submit. Jadi, apabila form pencarian di-klik submit, maka script di dalam blok fungsi $(‘#form-pencarian’).submit() akan dijalankan.

?event.preventDefault() berfungsi untuk menghentikan pengiriman data pada form secara normal. Fungsi tersebut digunakan karena pada project ini akan menggunakan pengiriman data melalui AJAX sehingga pengiriman data secara normal harus dihentikan.

?$.ajax() merupakan proses pengiriman data dengan AJAX, dengan parameter:

  • ?type ==> method pengiriman, bisa “GET” atau “POST”
  • url ==> server tujuan pengiriman data
  • ?data ==> data form yang akan dikirimkan ke server, bisa didapatkan dengan menggunakan form.serialize(). Jika ingin menulis data form secara manual, carany adalah: ?“nama=“+$(‘#nama’).val()”
  • dataType ==> format data yang akan diterima dari server, bisa “XML” atau “JSON”
  • success ==> fungsi yang akan dijalankan ketika AJAX berhasil mengirimkan data ke server dan server memberikan respon balik. Respon balik dari server akan disimpan di variabel data.

BUAT FILE PHP UNTUK KONEKSI KE DATABASE

?File PHP untuk koneksi ke database sudah dibahas pada project sebelumnya. ?Untuk itu, buatlah file dengan nama database.php yang disalin dari project sebelumnya. ?File ini hanya khusus menangani koneksi ke database, sedangkan penggunaan database (query database) akan dilakukan di file PHP yang lain dengan meng-include-kan file database.php.

<?php
	$dbhost = 'localhost';
	$dbuser = 'root';
	$dbpass = '';
	$dbname = 'latihan';
	$db = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

	// Check connection
	if ($db->connect_error) {
		die("Connection failed: " . $db->connect_error);
	}
?>

BUAT FILE PHP SEBAGAI SERVER TUJUAN AJAX

?Setelah file database.php selesai dibuat, sekarang buatlah file yang menjadi target pengiriman form (get_hobi.php). ?File tersebut akan meng-include-kan file database.php agar bisa terhubung ke database. File get_hobi.php mirip dengan file project sebelumnya yang meng-query data, namun  di file get_hobi.php akan dibuat untuk me-return data dalam bentuk JSON.

<?php
	require "database.php";
   
	$namaku = $_POST['nama'];
	
	// prepare and bind
	$stmt = $db->prepare("SELECT * FROM daftar_hobi WHERE nama=?");
	$stmt->bind_param("s", $namaku);	
	$stmt->execute();

	$stmt->bind_result($nama,$hobi);
	
	$result = null;
	while ($stmt->fetch()) {
		$result[] = array(
			'nama' => $nama,
			'hobi' => $hobi
		);
	}
	echo json_encode($result);

	$stmt->close();
	$db->close();
?>

?Require “database.php” merupakan code untuk memanggil file database.php dan meng-include-kan semua variabel dan code-nya ke dalam get_hobi.php. ?Penggunaan prepare statement sama dengan project sebelumnya. Untuk mendapatkan hasil dari prepare statement, digunakan method bind_result($nama,$hobi), dimana jumlah variabel pada parameternya bind_result disesuaikan dengan jumlah kolom yang di-query dari database.

?Untuk mendapatkan hasil per baris-nya, gunakan fungsi fetch(), dimana fungsi ini akan menggeser pointer dari satu row hasil data query ke row selanjutnya dan menyimpan datanya ke variabel $nama dan $hobi . ?Fungsi tersebut akan menghasilkan true jika baris yang ditunjuk memiliki data dan menghasilkan false jika baris yang ditunjuk tidak ada. ?Fungsi json_encode adalah fungsi untuk mengubah array menjadi format JSON sehingga mudah dibaca oleh AJAX engine.

dir

SCREENSHOT AKHIR DIREKTORI PROJECT

HASIL RUNNING PROJECT

result

PENUTUP

?AJAX mendukung asynchronous sehingga halaman web dapat di-update seperlunya. ?Proses update website menjadi lebih cepat karena tidak seluruh halaman di-download. ?

Untuk mendapatkan source code lengkap dari project tadi, bisa diunduh secara gratis di sini.

?Untuk membaca materi ini dalam bentuk PDF atau POWERPOINT, silahkan diunduh secara gratis di sini.

NEXT

Pada materi berikutnya, kita akan mempelajari Framework CodeIgniter.

REFERENSI

?http://jquery.com/

?http://w3school.com/

?http://php.net/manual

]]> /2015/11/15/kolaborasi-jquery-ajax-php-mysql/feed/ 7