Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Gadget
  • Teknologi

Menambahkan Variabel PHP ke Dalam Kode Javascript

  • Januari 27, 2014
  • admin
310

SHARES

ShareTweet

Dalam sebuah aplikasi web, terkadang seorang developer diharuskan untuk membuat manipulasi interaksi data dengan menggunakan Javascript maupun Jquery. Bagi seorang developer yang berkecimpung di dunia PHP, menyisipkan sebuah variabel dari bahasa pemrograman PHP ke Javascript adalah hal penting agar data yang diolah terlihat dinamis.

php ke javascript

Download Sources

Meskipun memiliki karakteristik dan “nenek moyang” yang berbeda, PHP dan Javascript tidak dipungkiri lagi memang dibutuhkan saat pembuatan aplikasi web. Javascript seakan tidak terlepas dari bahasa pemrograman HTML dan HTML juga sering bersatu padu bersama PHP.

Contents

  • 1 Kasus
  • 2 Tutorial
    • 2.1 Membuat halaman index berisi Form
    • 2.2 Membuat js.php
    • 2.3 Baca juga:

Kasus

Pada tutorial kali ini, saya akan membuat sebuah aplikasi Javascript sederhana berupa countdown timer per detik.  Kita dapat melakukan input berapa total detik yang akan dihitung oleh countdown tersebut melalui form php sederhana menggunakan method post.

Untuk melakukan converting variabel post PHP ke dalam variabel Javascript, penulis menggunakan fungsi json_encode. Berikut adalah contoh fungsinya :

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

Tutorial

1Membuat halaman index berisi Form

Halaman index.php akan kita isi dengan form dengan metode post. Penulis akan membuat satu input dan beberapa kode javascript untuk memvalidari nilai input-an berupa number. Berikut adalah script lengkap form input index.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 head berfungsi untuk memvalidasi input form agar tetap bertipe numbering. Jika user mengetik dengan kombinasi huruf, label class validate akan tampil.
  • Form action menuju js.php, dengan form name=”detik”.

2Membuat js.php

Di dalam method form action kita telah memanggil js.php. Oleh karena itu, kita akan membuat file js.php yang berisi action sekaligus backend dari sistem countdown timer. Berikut adalah script js.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 nomor 17 – 36 merupakan script utama untuk membuat countdown

Jika script sudah ditulis semua, silahkan uji coba melalui localhost. Pastikan anda memasukkan nilai di dalam form berupa number. Selamat mencoba ! Caaooo. ??

Baca juga:

  1. Format Tanda Pemisah Angka Dengan Javascript
  2. Membuat Form Input Tanggal PHP MySQL dengan List dan Explode
  3. Membuat Form Registrasi dan Sistem Aktivasi Menggunakan PHP Mailer – Day 2
  4. PHP Admin Leveling dan Login Menggunakan MD5
  5. Implementasi Level Admin Dengan Session PHP MySQL
 
admin

Previous Article
  • Android
  • Aplikasi
  • Teknologi

Tombol On Off Untuk Audio Background Aplikasi Android

  • Januari 24, 2014
  • admin
View Post
Next Article
  • Website
  • Teknologi

Struktur Website Yang Disukai Mesin Pencari

  • Januari 28, 2014
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.