Menampilkan data dengan ajax php

Menampilkan data dengan ajax php
Cara Membuat Realtime Data PHP MySQL jQuery Ajax

Cara Membuat Realtime Data PHP MySQL jQuery Ajax – Tutorial cara menampilkan data real-time tanpa refresh halaman menggunakan jQuery dan Ajax.

Kita akan membuat implementasi realtime data sederhana seperti data pegawai, Pernahkah teman-teman berfikir atau mempunyai kasus bagaimana cara menampilkan data pada sebuah tabel  di halaman tertentu tanpa reload atau refresh halaman tersebut.

Seperti aplikasi nomor antrian, atau sistem kirim pesan (chat), Jika teman-teman sedang mencari tutorial dengan kasus tersebut, tutorial membuat realtime data php mysql jquery ajax ini sangat cocok untuk kalian.

Karena kita akan akan mengimplementasikan realtime data dengan bahasa pemrograman PHP, Database MySQL dan dengan bantuan jQuery ajax, untuk itu ayo ikuti tutorialnya berikut ini!.

Cara Membuat Realtime Data PHP MySQL jQuery Ajax

Berikut ini adalah video tutorial cara membuat realtime data php mysql jquery ajax

Selain Cara Membuat Realtime Data PHP MySQL jQuery Ajax, kami juga membuat video tutorial pemrograman lainnya yang dapat anda kunjungi di channel youtube kami : PHP MySQL Boostrap Terbaru

Silahkan bergabung ke Grup Telegram Muba Teknologi untuk sharing tentang pemrograman di : https://t.me/mubatekno

“Cara Membuat Realtime Data PHP MySQL jQuery Ajax”

Selamat datang kembali di tutorial PHP malasngoding.com. Pada materi tutorial kali ini akan membahas bagaimana Menampilkan data daerah Indonesia PHP MySQLI AJax.

Pada saat kita sedang mengerjakan sebuah aplikasi atau sistem informasi, terkadang ada permintaan atau kebutuhan untuk menampilkan data-data nama daerah di indonesia. Tentu akan sangat sulit dan menyita waktu banyak jika kita harus meriset dan mendata semua data wilayah di indonesia secara satu per satu. mulai dari data provinsi, kemudian masuk ke data kabupatan/kota, kecamatan, sampai desa.

Untuk mengatasi permasalah ini, sebenarnya sudah banyak developer di luar sana yang membuat dan membagikan database daerah di Indonesia secara gratis. Sehingga bisa langsung gunakan dengan cara menerapkan langsung ke project Kita.

Database daerah atau wilayah yang akan kita gunakan pada tutorial ini akan kita ambil dari github pak cahya CDN.

Menampilkan Data Daerah Indonesia PHP MySQLi Ajax

Pada tutorial ini kita akan belajar tentang cara menampilkan data-data daerah di indonesia dalam bentuk elemen select option (dropdown). Apa itu select option ? Anda bisa memahami ini di materi yang sudah diabahas di web malasngoding sebelumnya (materi select option).

Kita akan menampilkan data daerah yang dipilih menggunakan PHP, MySQLi dan ajax, Sehingga data daerah akan tampil secara otomatis tanpa reload. Data daerah yang tampil pun akan tampil sesuai dengan susunan nya masing-masing.

Misalnya kita memilih provinsi “Aceh”, maka akan muncul pilihan kabupaten/kota yang ada pada provinsi “Aceh”.

Selanjutnya jika dipilih salah satu dari pilihan kabupaten/kota tersebut, maka secara otomatis akan tampil data-data kecamatan dari kabupaten/kota yang dipilih. begitu terus selajutnya sampai data desa. Langsung saja kita masuk ke cara Menampilkan Data Daerah Indonesia PHP MySQLi Ajax tanpa reload.

Menampilkan Data Daerah Dengan PHP dan Ajax

Yang harus lakukan pertama kali adalah mempersiapkan database dan table penyimpan data-data daerah Indonesia yang sudah disediakan. Berikut persiapan yang harus dilakukan.

Silahkan teman-teman bisa download langsung database data daerah/wilayah nya di github pak cahya CDN.

https://github.com/cahyadsn/wilayah/blob/master/wilayah_2020.sql

Setelah di download, silahkan buat database baru. pada tutorial ini saya membuat database baru dengan nama “tutorial_daerah“. Selanjutnya import file wilayah_2020.sql yang sudah didownload tadi ke database “tutorial_daerah“.

Setelah database diimport, maka akan seperti gambar berikut.

Menampilkan data dengan ajax php

database wilayah indonesia

Seperti yang terlihat pada gambar di atas, format pada kolom kode meliputi data kode provinsi, kode kabupaten, kode kecamatan, dan kode desa.

Untuk memahami struktur dari kode data daerah/wilayah di atas, kode terdiri dari 4 bagian, yang dipisahkan oleh titik ( . ).

  • bagian pertama  : kode Provinsi
  • bagian dua : kode Kabupaten
  • bagian tiga : kode Kecamatan
  • bagian empat : kode Desa

Sampai di sini proses persiapan database dan table telah selesai.

Menampilkan Data Daerah / Wilayah

Setelah selesai mempersiapkan database dan table, selanjutnya kita masuk ke tahap cara menampilkaan data daerah atau wilayah tersebut secara terstruktur.

Mulai dari menampilkan data provinsi, setelah data  provinsi dipilih, maka tampil kabupaten yang ada pada provinsi tersebut. Begitu juga dengan kecamatan sampai data desa. Karena kita akan bermain-main dengan database, maka kita harus membuat koneksi database nya terlebih dulu.

Baca : Cara Membuat Koneksi Database Dengan PHP dan MySQLi

Koneksi databasenya akan kita buat pada file koneksi.php, jadi sekarang silahkan buat file php baru dengan nama koneksi.php.

koneksi.php

<?php

$koneksi=mysqli_connect('localhost','root','','tutorial_daerah');

?>

Silahkan teman-teman sesuaikan dengan koneksi database mysql teman-teman. Selanjutnya buat file baru lagi dengan nama index.php

Pada file index.php ini Kita akan menampilkan data daerahnya, lengkap dengan script ajax nya juga kita buat pada file ini.

index.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

<!DOCTYPE html>

<html>

<head>

<title>Menampilkan Data Daerah-www.malasngoding.com</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

<?php

include'koneksi.php';

?>

<style type="text/css">

body{

font-family:"Roboto";

}

</style>

<h2>Data Daerah Indonesia Dengan PHP,MySQLi& Ajax<br><ahref="https://www.malasngoding.com/menampilkan-data-daerah-indonesia-php-mysqli-ajax">www.malasngoding.com</a></h2>

<select id="form_prov">

<option value="">PilihProvinsi</option>

<?php

$daerah=mysqli_query($koneksi,"SELECT kode,nama FROM wilayah_2020 WHERE CHAR_LENGTH(kode)=2 ORDER BY nama");

while($d=mysqli_fetch_array($daerah)){

?>

<option value="<?phpecho$d['kode'];?>"><?php echo$d['nama'];?></option>

<?php

}

?>

</select>

<select id="form_kab"></select>

<select id="form_kec"></select>

<select id="form_des"></select>

<script type="text/javascript">

$(document).ready(function(){

// sembunyikan form kabupaten, kecamatan dan desa

$("#form_kab").hide();

$("#form_kec").hide();

$("#form_des").hide();

// ambil data kabupaten ketika data memilih provinsi

$('body').on("change","#form_prov",function(){

var id=$(this).val();

var data="id="+id+"&data=kabupaten";

$.ajax({

type: 'POST',

url:"get_daerah.php",

data:data,

success:function(hasil){

$("#form_kab").html(hasil);

$("#form_kab").show();

$("#form_kec").hide();

$("#form_des").hide();

}

});

});

// ambil data kecamatan/kota ketika data memilih kabupaten

$('body').on("change","#form_kab",function(){

var id= $(this).val();

var data="id="+id+"&data=kecamatan";

$.ajax({

type:'POST',

url:"get_daerah.php",

data:data,

success:function(hasil){

$("#form_kec").html(hasil);

$("#form_kec").show();

$("#form_des").hide();

}

});

});

// ambil data desa ketika data memilih kecamatan/kota

$('body').on("change","#form_kec",function(){

var id=$(this).val();

var data="id="+id+"&data=desa";

$.ajax({

type:'POST',

url:"get_daerah.php",

data:data,

success:function(hasil){

$("#form_des").html(hasil);

$("#form_des").show();

}

});

});

});

</script>

</body>

</html>

Perhatikan pada file index.php di atas, karena kita akan menggunakan ajax jquery, maka kita harus menghubungkan file ini dengan jquery.js terlebih dahulu.

Adapun penghubungan dengan jquery.js ini saya menggunakan link CDN, supaya lebih cepat saja. jadi tidak perlu download lagi. Silahkan jika teman-teman ingin mendownloadnya dan menggunakan nya dengan cara yang sudah pernah dijelaskan sebelumnya.

Baca juga : Pengertian & Cara Menggunakan Jquery

Selanjutnya kita tampilkan data provinsi dalam bentuk form select option (dropdown).

<select id="form_prov">

<option value="">PilihProvinsi</option>

<?php

$daerah= mysqli_query($koneksi,"SELECT kode,nama FROM wilayah_2020 WHERE CHAR_LENGTH(kode)=2 ORDER BY nama");

while($d=mysqli_fetch_array($daerah)){

?>

<option value="<?phpecho $d['kode'];?>"><?phpecho$d['nama'];?></option>

<?php

}

?>

</select>

Perhatikan query di atas.  untuk mengambil data provinsi, kita bisa mengakali dengan WHERE CHART_LENGTH(kode) = 2 yang artinya memilih data kode yang hanya memiliki 2 digit karakter.

SELECT kode,nama FROM wilayah_2020 WHERE CHAR_LENGTH(kode)=2ORDER BY nama

Kemudian ada 3 buah form select option yang kita sediakan untuk tempat menampilkan data kabupaten, kecamatan dan desa.

Yang masing-masing form sudah kita beri id masing-masing.

<select id="form_kab"></select>

<select id="form_kec"></select>

<select id="form_des"></select>

Kemudian buat file baru lagi dengan nama get_daerah.php. sesuai dengan perintah ajax yang kita buat di file index.php, semua proses ajax nya memanggil file get_daerah.php, karena memang kita buat pada file ini.

get_daerah.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<?php

include'koneksi.php';

$data=$_POST['data'];

$id=$_POST['id'];

$n=strlen($id);

$m=($n==2?5:($n==5?8:13));

// $wil=($n==2?'Kota/Kab':($n==5?'Kecamatan':'Desa/Kelurahan'));

?>

<?php

if($data=="kabupaten"){

?>

Kabupaten/Kota

<select id="form_kab">

<option value="">PilihKabupaten/Kota</option>

<?php

$daerah=mysqli_query($koneksi,"SELECT kode,nama FROM wilayah_2020 WHERE LEFT(kode,'$n')='$id' AND CHAR_LENGTH(kode)=$m ORDER BY nama");

while($d=mysqli_fetch_array($daerah)){

?>

<option value="<?phpecho$d['kode'];?>"><?phpecho $d['nama'];?></option>

<?php

}

?>

</select>

<?php

}else if($data=="kecamatan"){

?>

<select id="form_kec">

<option value="">PilihKecamatan</option>

<?php

$daerah= mysqli_query($koneksi,"SELECT kode,nama FROM wilayah_2020 WHERE LEFT(kode,'$n')='$id' AND CHAR_LENGTH(kode)=$m ORDER BY nama");

while($d=mysqli_fetch_array($daerah)){

?>

<option value="<?phpecho $d['kode'];?>"><?phpecho$d['nama'];?></option>

<?php

}

?>

</select>

<?php

}else if($data=="desa"){

?>

<select id="form_kel">

<option value="">PilihDesa</option>

<?php

$daerah=mysqli_query($koneksi,"SELECT kode,nama FROM wilayah_2020 WHERE LEFT(kode,'$n')='$id' AND CHAR_LENGTH(kode)=$m ORDER BY nama");

while($d=mysqli_fetch_array($daerah)){

?>

<option value="<?phpecho$d['kode'];?>"><?phpecho$d['nama'];?></option>

<?php

}

?>

</select>

<?php

}

?>

Selanjutnya kita coba jalankan pada browser. untuk melihat hasilnya.

localhost/tutorial_daerah/

Maka akan muncul pilihan data provinsi.

Menampilkan data dengan ajax php

menampilkan data provinsi dengan php

Pada saat data provinsi dipilih, maka akan tampil data kabupaten sesuai dengan provinsi yang dipilih.

Menampilkan data dengan ajax php

menampilkan data kabupaten dengan php

Setelah memilih data kabupaten, maka akan tampil data kecamatan. sesuai dengan data kabupaten yang dipilih.

Menampilkan data dengan ajax php

menampilkan data kecamatan dengan php

Setelah memilih data kecamatan, maka akan muncul data desa.

Menampilkan data dengan ajax php

menampilkan data desa dengan php

Sampai di sini semua pilihan telah dipillih, dan data telah berhasil tampil dengan baik sesuai dengan urutan nya masing-masing.

Menampilkan data dengan ajax php

Menampilkan Data Daerah Indonesia dengan PHP

Seperti yang terlihat pada gambar contoh di atas, semua proses telah selesai dan telah berjalan sesuai dengan harapan. Untuk sumber database dan source code dari tutorial ini bisa teman-teman download pada link berikut.

Sumber Database Daerah :
https://github.com/cahyadsn/wilayah

Download Source Code :
https://github.com/malasngoding/database-daerah-indonesia

Terima kasih, semoga bermanfaat.

Incoming search terms:

  • cara menambah database daerah ke form
  • ajax menampilkan data otomatis if(else
  • ajax menampilkan data proses php
  • ajax untuk mengambil data di database
  • Api daerah Indonesia php
  • buat chain slected daerah dengan ci
  • cara jalankan emulator pc apk inventor
  • cara membuat sub kategori mysql
  • cara menampilkan pilihan daerah pada form
  • cara mendapatkan kode pos dengan api php