Cara Membuat Pencarian Dengan PHP dan AJAK

Assalamu'alaikum....


Pada kesempatan yang berbahagia ini. Saya akan coba share tutorial mengenai cara membuat pencarian plus pagination tanpa refresh halaman dengan PHP, MySQL dan AJAX. Kebetulan beberapa hari yang lalu ada salah seorang pengunjung blog saya ini yang meminta kepada saya untuk menggabungkan 2 tutorial saya sebelumnya yakni Cara Membuat Pencarian Tanpa Refresh Halaman dengan PHP dan AJAX danCara Mudah Membuat Pagination dengan PHP dan MySQL. Tentunya disini kita akan menggunakan library JQUERY untuk membuat kode AJAX nya. Disini juga saya menggunakan Bootstrap untuk desain nya, biar sedikit enak dipandang hehe. Tapi bootstrap ini hanya opsional, jadi jika kalian tidak ingin menggunakannya bisa di hapus saja. Langsung ikut saja langkah-langkahnya dibawah ini.
STEP 1 – PERSIAPANBerikut ini adalah hal-hal yang harus dipersiapkan :
  1. Download JQUERY, klik link berikut :Download.
  2. Download Bootstrap, klik link berikut :Download.
  3. Buat sebuah folder baru dengan namasearch_pagination, lalu simpan pada folder xampp/htdocs/.
  4. Buat sebuah folder dengan nama css, lalu simpan pada folderxampp/htdocs/search_pagination/.
  5. Buat sebuah folder dengan nama js, lalu simpan pada folderxampp/htdocs/search_pagination/.
  6. Esktrak file bootstrap.7z yang telah didownload tadi.
  7. Copy and paste folder fonts dari folder bootstrap yang telah diekstrak tadi ke folderxampp/htdocs/search_pagination/.
  8. Copy and paste file bootstrap.min.cssdari folder bootstrap/css/ yang telah diekstrak tadi ke folderxampp/htdocs/search_pagination/css/.
  9. Copy and paste file bootstrap.min.jsdari folder bootstrap/js/ yang telah diekstrak tadi ke folderxampp/htdocs/search_pagination/js/.
  10. Rename file JQUERY yang telah di download tadi menjadi jquery.min.js, lalu copy and paste pada folderxampp/htdocs/search_pagination/js/.
STEP 2 – DATABASEPada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :
  1. Buat sebuah database dengan nama mynotescode.
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Struktur Tabel - Cara Membuat Pencarian Plus Pagination Tanpa Refresh dengan PHP
    1. CREATE TABLE IF NOT EXISTS `siswa` (
    2. `nis` varchar(11) NOT NULL,
    3. `nama` varchar(50) NOT NULL,
    4. `jenis_kelamin` varchar(10) NOT NULL,
    5. `telp` varchar(15) NOT NULL,
    6. `alamat` text NOT NULL,
    7. PRIMARY KEY (`nis`)
    8. )
STEP 3 – KONEKSI DATABASEPada step ini, kita akan membuat file koneksi.php yang berfungsi untuk menghubungkan dengan database MySQL. Silahkan buat file koneksi.php, lalu simpan di folderxampp/htdocs/search_pagination/. Berikut ini kodenya :
  1. <?php
  2. $host = 'localhost'; // Nama hostnya
  3. $username = 'root'; // Username
  4. $password = ''; // Password (Isi jika menggunakan password)
  5. $database = 'mynotescode'; // Nama databasenya
  7. // Koneksi ke MySQL dengan PDO
  8. $pdo = new PDO('mysql:host='.$host.';dbname='.$database, $username, $password);
  9. ?>
STEP 4 – VIEWLangkah selanjutnya adalah membuat 1 buah file yang berguna sebagai template utamanya. Buat sebuah file dengan namaindex.php, lalu simpan pada folderxampp/htdocs/search_pagination/. Berikut tampilan dan kodenya :
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Pencarian Plus Pagination Dengan PHP dan AJAX</title>
  9. <!-- Load File bootstrap.min.css yang ada difolder css -->
  10. <link href="css/bootstrap.min.css" rel="stylesheet">
  12. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  13. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14. <!--[if lt IE 9]>
  15. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  16. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  17. <![endif]-->
  18. <style>
  19. .align-middle{
  20. vertical-align: middle !important;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div style="padding: 0 15px;">
  26. <h2>Pencarian Plus Pagination</h2><hr>
  28. <!--
  29. -- Buat sebuah div dengan class row
  30. -- class row ini berfungsi untuk membagi-bagi layar
  31. -- di dalam bootstrap, 1 layar penuh (dari kiri ke kanan) dibagi menjadi 12 bagian / Kolom
  32. -- Atau lebih tepatnya sering disebut dengan GRID
  33. -- col-xs-12 artinya jika ukuran layar < 768px, maka gunakan 12 kolom
  34. -- col-sm-6 artinya jika ukuran layar >= 768px, maka gunakan 6 kolom
  35. -- Untuk lebih jelasnya soal Grid, silahkan buka link ini : http://viid.me/qb4V8P
  36. -->
  37. <div class="row">
  38. <div class="col-xs-12 col-sm-6">
  39. <!--
  40. -- Input Group adalah salah satu komponen yang disediakan bootstrap
  41. -- Untuk lebih jelasnya soal Input Group, silahkan buka link ini : http://viid.me/qb4Mup
  42. -->
  43. <div class="input-group">
  44. <!-- Buat sebuah textbox dan beri id keyword -->
  45. <input type="text" class="form-control" placeholder="Pencarian..." id="keyword">
  47. <span class="input-group-btn">
  48. <!-- Buat sebuah tombol search dan beri id btn-search -->
  49. <button class="btn btn-primary" type="button" id="btn-search">SEARCH</button>
  50. <a href="" class="btn btn-warning">RESET</a>
  51. </span>
  52. </div>
  53. </div>
  54. </div>
  55. <br>
  57. <!--
  58. -- Beri atribut id="view" pada tag div yang akan digunakan untuk menampung data
  59. -- yang ada pada tabel siswa di database dan paginationnya
  60. -->
  61. <div id="view"><?php include "view.php"; ?></div>
  62. </div>
  64. <!-- Load File jquery.min.js yang ada difolder js -->
  65. <script src="js/jquery.min.js"></script>
  67. <!-- Load File bootstrap.min.js yang ada difolder js -->
  68. <script src="js/bootstrap.min.js"></script>
  70. <!-- Load file ajax.js yang ada di folder js -->
  71. <script src="js/ajax.js"></script>
  72. </body>
  73. </html>
Pada kode diatas, kita akan me-load librari / plugin yang dibutuh kan seperti Jquery dan Bootstrap. Dan kita juga me-load sebuah file ajax.js yang akan kita buat pada langkah selanjutnya.
Kemudian pada kode index.php diatas, disitu terdapat kode <?php include “view.php”; ?>, Kode tersebut berfungsi untuk me-load file view.php yang isinya adalah tabel yang menampung data dari hasil query ke tabel siswa di database. Sekarang kita akan coba buat file tersebut. Buat sebuah file dengan namaview.php, lalu simpan pada folderxampp/htdocs/search_pagination/. Berikut kodenya :
  1. <div class="table-responsive">
  2. <table class="table table-bordered">
  3. <tr>
  4. <th>NO</th>
  5. <th>NIS</th>
  6. <th>NAMA</th>
  7. <th>JENIS KELAMIN</th>
  8. <th>TELP</th>
  9. <th>ALAMAT</th>
  10. </tr>
  11. <?php
  12. // Include / load file koneksi.php
  13. include "koneksi.php";
  15. // Cek apakah terdapat data page pada URL
  16. $page = (isset($_POST['page']))? $_POST['page'] : 1;
  18. $limit = 5; // Jumlah data per halamannya
  19. $no = (($page - 1) * $limit) + 1; // Untuk setting awal nomor pada halaman yang aktif
  21. // Untuk menentukan dari data ke berapa yang akan ditampilkan pada tabel yang ada di database
  22. $limit_start = ($page - 1) * $limit;
  24. // Cek apakah variabel data search tersedia
  25. // Artinya cek apakah user telah mengklik tombol search atau belum
  26. if(isset($_POST['search']) && $_POST['search'] == true){ // Jika ada data search yg dikirim (user telah mengklik tombol search) dan search sama dengan true
  27. // variabel $keyword ini berasal dari file search.php,
  28. // dimana isinya adalah apa yang diinput oleh user pada textbox pencarian
  29. $param = '%'.$keyword.'%';
  31. // Buat query untuk menampilkan data siswa berdasarkan NIS / Nama / Jenis Kelamin / Telp / Alamat
  32. // dan sesuai limit yang ditentukan
  33. $sql = $pdo->prepare("SELECT * FROM siswa WHERE nis LIKE :ni OR nama LIKE :na OR jenis_kelamin LIKE :jk OR telp LIKE :t OR alamat LIKE :a LIMIT ".$limit_start.",".$limit);
  34. $sql->bindParam(':ni', $param);
  35. $sql->bindParam(':na', $param);
  36. $sql->bindParam(':jk', $param);
  37. $sql->bindParam(':t', $param);
  38. $sql->bindParam(':a', $param);
  39. $sql->execute(); // Eksekusi querynya
  41. // Buat query untuk menghitung semua jumlah data
  42. // dengan keyword yang telah di input
  43. $sql2 = $pdo->prepare("SELECT COUNT(*) AS jumlah FROM siswa WHERE nis LIKE :ni OR nama LIKE :na OR jenis_kelamin LIKE :jk OR telp LIKE :t OR alamat LIKE :a");
  44. $sql2->bindParam(':ni', $param);
  45. $sql2->bindParam(':na', $param);
  46. $sql2->bindParam(':jk', $param);
  47. $sql2->bindParam(':t', $param);
  48. $sql2->bindParam(':a', $param);
  49. $sql2->execute(); // Eksekusi querynya
  50. $get_jumlah = $sql2->fetch();
  51. }else{ // Jika user belum mengklik tombol search (PROSES TANPA AJAX)
  52. // Buat query untuk menampilkan semua data siswa
  53. $sql = $pdo->prepare("SELECT * FROM siswa LIMIT ".$limit_start.",".$limit);
  54. $sql->execute(); // Eksekusi querynya
  56. // Buat query untuk menghitung semua jumlah data
  57. $sql2 = $pdo->prepare("SELECT COUNT(*) AS jumlah FROM siswa");
  58. $sql2->execute(); // Eksekusi querynya
  59. $get_jumlah = $sql2->fetch();
  60. }
  62. while($data = $sql->fetch()){ // Ambil semua data dari hasil eksekusi $sql
  63. ?>
  64. <tr>
  65. <td class="align-middle"><?php echo $no; ?></td>
  66. <td class="align-middle"><?php echo $data['nis']; ?></td>
  67. <td class="align-middle"><?php echo $data['nama']; ?></td>
  68. <td class="align-middle"><?php echo $data['jenis_kelamin']; ?></td>
  69. <td class="align-middle"><?php echo $data['telp']; ?></td>
  70. <td class="align-middle"><?php echo $data['alamat']; ?></td>
  71. </tr>
  72. <?php
  73. $no++;
  74. }
  75. ?>
  76. </table>
  77. </div>
  79. <?php
  80. if($sql->rowCount() > 0){ // Jika datanya ada, tampilkan paginationnya
  81. ?>
  82. <!--
  83. -- Buat Paginationnya
  84. -- Dengan bootstrap, kita jadi dimudahkan untuk membuat tombol-tombol pagination dengan design yang bagus tentunya
  85. -->
  86. <ul class="pagination">
  87. <!-- LINK FIRST AND PREV -->
  88. <?php
  89. if($page == 1){ // Jika page adalah page ke 1, maka disable link PREV
  90. ?>
  91. <li class="disabled"><a href="#">First</a></li>
  92. <li class="disabled"><a href="#">&laquo;</a></li>
  93. <?php
  94. }else{ // Jika page bukan page ke 1
  95. $link_prev = ($page > 1)? $page - 1 : 1;
  96. ?>
  97. <li><a href="javascript:void(0);" onclick="searchWithPagination(1, false)">First</a></li>
  98. <li><a href="javascript:void(0);" onclick="searchWithPagination(<?php echo $link_prev; ?>, false)">&laquo;</a></li>
  99. <?php
  100. }
  101. ?>
  103. <!-- LINK NUMBER -->
  104. <?php
  105. $jumlah_page = ceil($get_jumlah['jumlah'] / $limit); // Hitung jumlah halamannya
  106. $jumlah_number = 3; // Tentukan jumlah link number sebelum dan sesudah page yang aktif
  107. $start_number = ($page > $jumlah_number)? $page - $jumlah_number : 1; // Untuk awal link number
  108. $end_number = ($page < ($jumlah_page - $jumlah_number))? $page + $jumlah_number : $jumlah_page; // Untuk akhir link number
  110. for($i = $start_number; $i <= $end_number; $i++){
  111. $link_active = ($page == $i)? ' class="active"' : '';
  112. ?>
  113. <li<?php echo $link_active; ?>><a href="javascript:void(0);" onclick="searchWithPagination(<?php echo $i; ?>, false)"><?php echo $i; ?></a></li>
  114. <?php
  115. }
  116. ?>
  118. <!-- LINK NEXT AND LAST -->
  119. <?php
  120. // Jika page sama dengan jumlah page, maka disable link NEXT nya
  121. // Artinya page tersebut adalah page terakhir
  122. if($page == $jumlah_page){ // Jika page terakhir
  123. ?>
  124. <li class="disabled"><a href="#">&raquo;</a></li>
  125. <li class="disabled"><a href="#">Last</a></li>
  126. <?php
  127. }else{ // Jika Bukan page terakhir
  128. $link_next = ($page < $jumlah_page)? $page + 1 : $jumlah_page;
  129. ?>
  130. <li><a href="javascript:void(0);" onclick="searchWithPagination(<?php echo $link_next; ?>, false)">&raquo;</a></li>
  131. <li><a href="javascript:void(0);" onclick="searchWithPagination(<?php echo $jumlah_page; ?>, false)">Last</a></li>
  132. <?php
  133. }
  134. ?>
  135. </ul>
  136. <?php
  137. }
  138. ?>
Saya akan coba jelaskan sedikit mengenai kode diatas karena sebagian sudah saya jelaskan pada tiap-tiap kode dengan komentar.
include “koneksi.php”;
Kode tersebut berfungsi untuk me-load file koneksi.php.
$sql = $pdo->prepare(“SELECT * FROM siswa WHERE nis LIKE :ni OR nama LIKE :na OR jenis_kelamin LIKE :jk OR telp LIKE :t OR alamat LIKE :a”);
$sql->bindParam(‘:ni’, $param);
$sql->bindParam(‘:na’, $param);
$sql->bindParam(‘:jk’, $param);
$sql->bindParam(‘:t’, $param);
$sql->bindParam(‘:a’, $param);
$sql->execute();
Kode tersebut berfungsi untuk melakukan query ke database dan mengeksekusinya. Pada contoh diatas, kita akan melakukan query untuk menampilkan data siswa berdasarkan salah satu komponen (Berdasarkan NIS / Nama / Jenis Kelamin / Nomor Telepon / Alamat).
$sql = $pdo->prepare(“SELECT * FROM siswa”);
$sql->execute();
Sama seperti kode sebelumnya, hanya kode ini berguna untuk menampilkan semua data dari tabel siswa.
$data = $sql->fetch()
Kode tersebut berfungsi untuk mengambil semua data hasil query dan menampung data-data tersebut di dalam sebuah array lalu menyimpannya ke dalam variabel$data. Kode tersebut saya simpan di dalam sebuah kode while(….) yang berfungsi untuk melakukan proses perulangan sampai data terkahir dengan tujuan agar kita bisa menampilkan datanya satu per satu.
  1. <tr>
  2. <td class="align-middle"><?php echo $data['nis']; ?></td>
  3. <td class="align-middle"><?php echo $data['nama']; ?></td>
  4. <td class="align-middle"><?php echo $data['jenis_kelamin']; ?></td>
  5. <td class="align-middle"><?php echo $data['telp']; ?></td>
  6. <td class="align-middle"><?php echo $data['alamat']; ?></td>
  7. </tr>
Pada kode diatas terdapat variabel $datadigunakan untuk mengambil isi dari field-field yang ada pada tabel siswa di database mynotescode. Pada kode diatas juga ada kode yang berada pada tanda [‘……’], kode tersebut harus sama dengan nama field yang ada pada tabel siswa.
$jumlah_page = ceil($get_jumlah[‘jumlah’] / $limit);Untuk menghitung jumlah halaman. Perhitungan ini diambil berdasarkan jumlah_semua_data dibagi dengan limit_per_halaman yang telah ditentukan.
$jumlah_number = 3;Untuk menentukan jumlah link number sebelum dan sesudah page yang aktif. Bingung? lihat gambar dibawah ini :
Penjelasan - Cara Mudah Membuat Pagination dengan PHP
Pada gambar diatas, yang saya beri garis warna merah. itu lah yang saya maksud dengan “Link Number sebelum dan sesudah” page yang aktif.
onclick=”searchWithPagination(……..Pada setiap link paginationnya, saya beri event/atribut onclick dengan value searchWithPagination. searchWithPagination ini adalah fungsi yang nanti pada step selanjutnya akan kita buat. Fungsi ini berguna untuk pagination tanpa refresh halaman nya dan menyesuaikan dengan pencariannya.
STEP 5 – AJAXSelanjutnya kita akan membuat file ajax nya yang berfungsi untuk mengirimkan data ke file proses search.php yang nanti akan kita buat pada step selanjutnya. Sekarang buat sebuah file baru dengan nama ajax.js, lalu simpan pada folderxampp/htdocs/search_pagination/js/. Berikut kodenya :
  1. $(document).ready(function(){
  2. $("#btn-search").click(function(){ // Ketika tombol simpan di klik
  3. // Panggil function
  4. searchWithPagination(1, true); // Set page_number nya dengan 1 dan set search nya dengan true
  5. });
  6. });
  8. // Buat sebuah function dengan nama searchWithPagination
  9. // Function ini untuk mengirim data keyword dan pagination dengan AJAX
  10. function searchWithPagination(page_number, search){
  11. // Ubah text tombol search menjadi SEARCHING...
  12. // Dan tambahkan atribut disable pada tombol nya agar tidak bisa diklik lagi
  13. $(this).html("SEARCHING...").attr("disabled", "disabled");
  15. $.ajax({
  16. url: 'search.php', // File tujuan
  17. type: 'POST', // Tentukan type nya POST atau GET
  18. data: {keyword: $("#keyword").val(), page: page_number, search: search}, // Set data yang akan dikirim
  19. dataType: "json",
  20. beforeSend: function(e) {
  21. if(e && e.overrideMimeType) {
  22. e.overrideMimeType("application/json;charset=UTF-8");
  23. }
  24. },
  25. success: function(response){ // Ketika proses pengiriman berhasil
  26. // Ubah kembali text button search menjadi SEARCH
  27. // Dan hapus atribut disabled untuk meng-enable kembali button search nya
  28. $("#btn-search").html("SEARCH").removeAttr("disabled");
  30. // Ganti isi dari div view dengan view yang diambil dari search.php
  31. $("#view").html(response.hasil);
  32. },
  33. error: function (xhr, ajaxOptions, thrownError) { // Ketika terjadi error
  34. alert(xhr.responseText); // munculkan alert
  35. }
  36. });
  37. }
Ini yang tadi saya maksud dengan fungsi searchWithPagination(), fungsi ini saya set dengan 2 parameter yakni parameter pertama adalah page_number alias nomor halaman selanjutnya dan parameter kedua adalah search digunakan untuk memberitahu file view.php apakah pagination tersebut plus dengan pencarian atau tidak. ini berguna untuk menyesuaikan pagination dengan pencariannya.
Akan saya jelaskan sedikit mengenai ajax nya, karena sebagian besar sudah saya jelaskan lewat kode diatas dengan komentar.
  • url : diisi dengan url file yang akan dituju
  • type :  diisi dengan method yang ingin digunakan. isi dengan GET atau POST
  • data : data yang akan dikirim ke file yang dituju
  • success : function(){} : ketika proses pengiriman selesai, lakukan aksi
  • error : function(){} : ketika terjadi error, lakukan aksi
untuk penjelasan lebih lengkap mengenai atiribut yang ada di JQUERY AJAX, klik disini (Anda akan masuk ke halaman Iklan terlebih dahulu, Tunggu 5 detik lalu klik tombol SKIP AD yang ada di pojok kanan atas).
 STEP 6 – PROSES PENCARIANLangkah terakhir adalah membuat file untuk PHP memproses pencariannya. Buat sebuah file dengan namasearch.php, lalu simpan pada folderxampp/htdocs/search_pagination/. Berikut kodenya :
  1. <?php
  2. $keyword = $_POST['keyword']; // Ambil data keyword yang dikirim dengan AJAX
  4. // Load view.php
  5. ob_start();
  6. include "view.php";
  7. $html = ob_get_contents(); // Masukan isi dari view.php ke dalam variabel $html
  8. ob_end_clean();
  10. // Buat array dengan index hasil dan value nya $html
  11. // Lalu konversi menjadi JSON
  12. echo json_encode(array('hasil'=>$html));
  13. ?>
Sekian untuk catatan kali ini. Semoga catatan ini bisa bermanfaat. Apabila ada yang ingin ditanyakan, langsung tanyakan saja lewat form komentar dibawah ini. Jangan lupa LIKE & SHARE nya hehe. Terimakasih.
SOURCE CODE
Untuk mengunduh source code nya, klik salah satu link dibawah ini
– Download versi PDO : Link download yang sesuai tutorial ini yakni menggunakan fungsi PDO untuk query ke databasenya
– Download versi MySQLi : Link download untuk Anda yang ingin source code versi MySQLi dari tutorial ini
SUMBER & REFERENSIDokumentasi Bootstrap :http://getbootstrap.com/getting-started/
Dokumentasi Style Pagination  :http://getbootstrap.com/components/#pagination

Comments

Post a Comment

Popular posts from this blog

Soal Bahasa Arab Tentang Kata Ganti [Ism Dhomir] Kata Tunjuk [Ism Isyarah]

Soal Bahasa Arab Tentang Kata Ganti [Isim Dhomir] Pertanyaan Jawaban مَنْ أَنْتَ؟  ?Siapa Kamu    أَنَا طَالِب .  اِسْمِي عَزَّام Saya Siswa. NamaKu Azzam مَنْ أَنْتِ ؟ ?Siapa Kamu أَنَا طَالِبَة . اِسْمِي حِلْيَة Saya Siswi. NamaKu Hilyah مَنْ هذَا ؟ ?Siapa Ini  هذَا صَدِيْقِي . هُوَ طَالِب Ini Temanku, Dia Siswa مَنْ هذِهِ ؟ ?Siapa Ini هذِهِ صَدِيْقَتِي . هِيَ طَالِبَة Ini Temanku, Dia Siswi Pada Kesempatan Kali Ini kita Belajar Mengisi Soal-Soal Bahasa Arab Kata Ganti [Isim Dhomir] . Yang Bersumber Dari  Buku Bahasa Arab Kurikulum 2013 Kls VII  Mari Kita Isi Bersama. Untuk Jawabnya Isilah Di Komentar!  اِخْتَرْ أَصَحَّ الأجوبة ! 1.   هُوَ  ...           أ.  طَالِبَة          ب. طَالِب           ج. فَاطِمَة     ...
Read more

Soal Bahasa Arab SMK/MA

A.    Pilihlah satu jawaban yang benar dengan cara memberi tanda silang (X) pada huruf a, b, c, d, atau e pada lembar jawab yang tersedia. 1.      Dia (laki-laki, 1) bahasa arabnya ..... ه. هُنَّ ج. هُمْ ا. هِيَ د. هُوَ ب. هُمَا 2.      Kamu (laki-laki, 1) bahasa arabnya..... ه. اَنْتَ ج. اَنْتُمْ ا. اَنْتُنَّ د. اَنْتِ ب. اَنْتُمَا 3.      Saya bahasa arabnya..... ه. نَحْنُ ج. هُمْ ا. هُوَ د. هُمَا ب. اَنَا 4.        Kamu (perempuan, 1) bahasa arabnya..... ه. اَنْتُنَّ ج. اَنْتُمْ ا. اَنْتِ د. اَنْتَ ب. اَنْتُمَا 5.      Dia/ mereka (laki-laki, 3)..... ه. نَحْنُ ج. هُمْ ا. اَنْتَ د. اَنَا ب. اَنْتُمَا 6.           Lampumu (perempuan 3) jika diartikan dalam bahasa arab yaitu   ..... ه. قَلَمُكَ ج.  مِصْبَاحُكُ...
Read more