Cara memanggil file php di javascript

Pada tutorial kali ini kita akan membahas cara load file php menggunakan ajax jquery, seperti yang kita ketahui bahwa di ajax method load berfungsi untuk memanggil file yang terpisah dari file project yang kita gunakan

Metode load di ajax memiliki tiga parameter yaitu "load(url, [data], [setting])"

Keterangan

url berfungsi sebagai parameter pertama, yang harus kita masukkan sesuai dengan alamat file yang ingin kita muat
Data adalah parameter kedua, yang bersifat opsional dan dapat dimasukkan atau tidak. Apakah data yang ingin kita kirimkan
Setting adalah parameter ketiga yang bersifat opsional, bisa kita masukkan atau tidak. Ini adalah fungsi panggilan balik, kita bisa memasukkan apa saja di bagian pengaturan

Oke teman-teman mari kita beri tahu lebih lanjut tentang Cara Load File PHP Menggunakan Ajax Jquery, kita akan membuat contoh sederhananya seperti di bawah ini

Langkah pertama silahkan sobat buat file dengan nama php di dalam file tersebut akan kita masukkan struktur html dan javascript seperti dibawah ini

Kemudian kita akan membuat folder dengan nama model di dalam folder tersebut kita akan membuat file dengan nama php untuk struktur folder yang kita gunakan seperti dibawah ini

Di dalam file data. php kita akan memasukan script php seperti di bawah ini

Jika kita menjalankannya di browser, kita akan melihat hasilnya seperti di bawah ini

Kemudian untuk contoh yang kedua kita akan coba tambahkan parameter kedua yaitu metode load, kita masukkan nama data yang akan kita kirim yaitu sekolah dumet seperti dibawah ini

Kemudian kami akan menampilkan data dalam file data. php dengan menggunakan $_REQUEST seperti di bawah ini

Dalam sebuah aplikasi web, terkadang developer diharuskan untuk memanipulasi interaksi data menggunakan Javascript dan Jquery. Bagi seorang developer yang berkecimpung di dunia PHP, menyisipkan variabel dari bahasa pemrograman PHP ke dalam Javascript merupakan hal yang penting agar data yang diolah terlihat dinamis.

Unduh Sumber

Meskipun memiliki karakteristik dan “nenek moyang” yang berbeda, tidak dapat dipungkiri bahwa PHP dan Javascript sangat dibutuhkan saat membuat aplikasi web. Javascript sepertinya tidak dapat dipisahkan dari bahasa pemrograman HTML dan HTML juga sering diintegrasikan dengan PHP

Kasus

Pada tutorial kali ini saya akan membuat aplikasi Javascript sederhana berupa penghitung waktu mundur per detik. Kita dapat menginput berapa total detik yang akan dihitung dengan countdown melalui form php sederhana dengan menggunakan metode post

Untuk mengubah variabel postingan PHP menjadi variabel Javascript, penulis menggunakan fungsi json_encode. Berikut adalah contoh fungsinya

<?php echo json_encode($variable); ?>

Tutorial

Buat halaman indeks yang berisi Formulir

halaman indeks. php kita akan mengisi form dengan metode post. Penulis akan membuat input dan beberapa kode javascript untuk memvalidasi nilai input berupa angka. Berikut adalah script lengkap form input indeks. php

<html>
<head>
	<meta name="viewport" content="width=device-width">
	<title>PHP to Javascript</title>
	<meta name="description" content="PHP to Javascript by Mkhuda">
	<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300" rel="stylesheet" type="text/css">
	<link href="style.css" type="tex/css" rel="stylesheet" media="all">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        $(function () {
            $(".input").bind("keypress", function (e) {
                var keyCode = e.which ? e.which : e.keyCode
                var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
                $("label.validate").css("display", ret ? "none" : "inline");
                return ret;
            });
            $(".input").bind("paste", function (e) {
                return false;
            });
            $(".input").bind("drop", function (e) {
                return false;
            });
        });
    </script>

</head>	
<body>

<div id="form">
	<form method="post" action="js.php" class="form-horizontal">
	<label class="detik">Masukkan Detik Angka</label><br>
	<input class="input" type="text" name="detik" placeholder="Masukkan Detik Angka"><br>
	<label class="validate" style="display: none;">Please input only Numbers</label><br>
	<button type="submit" name="submit" class="btn">Submit</button>
</form>
</div>

</body>
</html>

Penjelasan

Script yang terletak di bagian head berfungsi untuk memvalidasi input form agar tetap bernomor. Jika pengguna mengetik dengan kombinasi huruf, label validasi kelas akan muncul
Bentuk tindakan ke js. php, dengan nama form=”detik”

Membuat js. php

Dalam metode tindakan formulir kami memanggil js. php. Oleh karena itu, kami akan membuat file js. php yang berisi aksi serta backend dari sistem penghitung waktu mundur. Ini script jsnya. php

<?php
  $post = $_POST['detik'];
  if (isset($post)) {
    $detik = strval($post);
  } else {
    header('location: index.php');
    exit;
  }
?>
<html>
<head>
  <meta name="viewport" content="width=device-width">
  <title>PHP to Javascript</title>
  <meta name="description" content="PHP to Javascript by Mkhuda">
  <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300" rel="stylesheet" type="text/css">
  <link href="style.css" type="tex/css" rel="stylesheet" media="all">
  <script type="text/javascript">

  var count= <?php echo json_encode($detik); ?>;

  var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

  function timer()
  {
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     document.getElementById("timer").innerHTML="Completed";
     return;
  }

  document.getElementById("timer").innerHTML=count + " secs";
  }

  </script>
</head> 
<body>
<div id="form">

<h3>PHP to Javascript</h3>
<div id="timer"></div>
</div>
</body>
</html>

Penjelasan

Baris nomor 1 - 9 adalah fungsi untuk mendapatkan nilai dari form
Baris nomor 19 adalah fungsi untuk membuat variabel javascript bernama count yang diambil dari variabel $detik (php)
Baris 17 - 36 adalah skrip utama untuk membuat hitungan mundur

Jika skrip sudah ditulis semua, silakan uji melalui localhost. Pastikan Anda memasukkan nilai dalam formulir dalam bentuk angka. Selamat mencoba. Koooo. 😀