Cara menggunakan separate php from html

Cara Membuat Format Rupiah Pada PHP dan Javascript – Pada postingan kali ini saya akan membahas tentang cara mengkonvert angka menjadi format mata uang karena saya orang Indonesia jadi convert menjadi format rupiah. Saya akan membahas tentang cara convert mata uang ini menggunakan PHP atau javascipt. Jika sobat ingin menyimpan ke dalam database pasti jumlah atau total atau harga atau lainnya menggunakan dformat angka atau integer dan jika sobat ingin menampilkannya kepada pengguna tentu tidak begitu saja menampilkan mentahnya to pasti di convert dulu ke dalam format mata uang baru ditampilkan ke user.

Dalam postingan kali ini juga saya akan contohkan convert pada saat pengguna menginputkan ke dalam input text maka secara otomatis akan muncul titik jika melewati jumlah ribuan dan kelipatannya. Itu akan kita buat menggunakan javascript tentunya. Bisa kita gunakan event keyup dan event keydown atau nanti juga akan saya contohkan menggunakan masking. Tidak usah berlama-lama langsung saya contohkan cara convert ke dalam mata uang rupiah.

1. Convert angka ke Rupiah

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?php  

$angka = 1000000;

echo "Teks Asli :<br/>";

echo $angka;

echo "<br/><br/>";

 

echo "Tanpa Angka Dibelakang koma :<br/>";

echo "Rp. " . number_format($angka, 0, ".", ".");

echo "<br/><br/>";

 

echo "Dengan 1 angka dibelakang koma :<br/>";

echo "Rp. " . number_format($angka, 1, ",", ".");

echo "<br/><br/>";

 

echo "Dengan separator koma :<br/>";

echo "Rp. " . number_format($angka, 2, ".", ",");

echo "<br/><br/>";

?>

Penjelasan :

Untuk $angka tentunya bisa sobat ubah menjadi angka apapun atau bisa juga diubah dengan data dari database. Cara penulisannya adalah

number_format($angka, $desimal, $format_desimal, $format_ribuan)

$angka : Berisi nilai yang wajib angka.
$desimal : Jumlah angka desimal dibalakang koma.
$format_desimal : Pemisah untuk titik desimal.
$format_ribuan : Pemisah angka ribuan.

Tampilannya adalah sebagai berikut

Cara menggunakan separate php from html
Cara menggunakan separate php from html

 

2. Membuat Librari untuk convert Rupiah

Jika sobat ingin membuat semua yang berformat mata uang rupiah sama, maka sobat tidak perlu menuliskan kode diatas secara terus menerus. Bayangkan jika ada ratusan file dan setiap file sobat menuliskan dan tiba-tiba ingin mengubah formatnya maka sobat harus mengubah satu-persatu. Namun beda kasus jika sobat sudah membuat librarinya terlebih dahulu dan mengkonvertnya menggunakan librari yang telah dibuat sebelumnya maka jika ada perubahan tinggal diubah di librarinya saja dan otomatis semua akan terubah. Beikut adalah contohnya, tentunya sobat harus membuat file lagi yang hanya berisi librari seperti contoh saya buat file lib.php yang nanti akan menyimpan semua librari yang dibutuhkan oleh aplikasi sobat. Ingat!! jangan buat librari di atas tag <html> karena itu percuma nantinya. Mungkin banyak blog tutorial yang seperti itu karena hanya untuk contoh saja tapi menjadikan pembacanya jadi membuat librari yang sama pada setiap file yang menjebak juga menurut saya karena akan jadi kebiasaan yang jelek nanti ke depan.

Isikan file lib.php dengan librari seperti dibawah

lib.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?php

function rupiah1($angka){

$hasil_rupiah = "Rp " . number_format($angka, 0, ".", ".");

return $hasil_rupiah;

}

 

function rupiah2($angka){

$hasil_rupiah = "Rp " . number_format($angka, 1, ",", ".");

return $hasil_rupiah;

}

 

function rupiah3($angka){

$hasil_rupiah = "Rp " . number_format($angka, 2, ".", ",");

return $hasil_rupiah;

}

?>

Kemudian pada file yang membutuhkan untuk convert include kan file lib.php seperti dibawah

1

<?php include 'lib.php'; ?>

Karena saya di project ini hanya ada file index.php maka saya include kan lib.php pada file index.php diatas tag <html> atau <!DOCTYPE html>. Untuk menggunakannya sangat mudah yaitu

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?php  

$angka = 2000000;

echo "Teks Asli :<br/>";

echo $angka;

echo "<br/><br/>";

 

echo "Tanpa Angka Dibelakang koma :<br/>";

echo rupiah1($angka);

echo "<br/><br/>";

 

echo "Dengan 1 angka dibelakang koma :<br/>";

echo rupiah2($angka);

echo "<br/><br/>";

 

echo "Dengan separator koma :<br/>";

echo rupiah3($angka);

echo "<br/><br/>";

?>

Penjelasan :

Kita hanya tinggal memanggil nama fungsi yang ada pada lib.php seperti rupiah1($angka). Jadi jika sobat ingin mengganti formatnya maka sobat hanya tinggal mengubah pada fungsi rupiah1() saja misalkan mengganti pemisah ribuan dengan koma atau sebaliknya dan yang sebelumnya tanpa desimal ingin menambahkan desimal atau sebaliknya. Saya sarankan agar sobat menggunakan librari dan buat di file yang berbeda jadi jika sobat butuh tinggal include kan librarinya saja karena saya tidak hanya ingin memberikan cara convertnya tapi juga memberikan kebiasaan yang baik untuk ke depannya dalam memudahkan membuat suatu aplikasi.

 

3. Convert Rupiah pada saat Input Text di Form

Pada contoh ini karena kita membuat saat user/pengguna sedang input/menuliskan pada input text yang isinya harus rupiah atau harga dengan kata lain secara live jadi kita membutuhkan javascript. Dengan javascript kita bisa mengubah secara live menjadi format rupiah pada setiap input 1 huruf/angka. Sehingga akan memudahkan pengguna karena jika pengguna ingin mengisikan 5 juta pengguna tidak perlu menghitung lagi jumlah nolnya karena takut kelebihan atau kekurangan nolnya. cara membuatnya sangat mudah yaitu pertama kita membuat inputannya seperti berikut

1

2

3

4

5

6

7

8

9

<div class="form-group">

<label>Tanpa Rupiah</label>

<input type="text" id="rupiah1" name="rupiah1" class="form-control">

</div>

 

<div class="form-group">

<label>Dengan Rupiah</label>

<input type="text" id="rupiah2" name="rupiah2" class="form-control">

</div>

Saya membuat https://dewankomputer.com/2019/02/24/cara-membuat-format-rupiah-pada-php-dan-javascript/2 input text karena ingin mencontohkan 2 cara yaitu yang pertama langsung muncul rupiah dan yang kedua tidak ada rupiahnya. Kemudian pada tag <body> paling bawah atau untuk membangun kebiasaan yang baik kita buat file main.js kemudian kita masukkan js pada project kita pada tag <body> paling bawah dengan kode seperti dibawah

1

<script src="main.js"></script>

Isikan main.js dengan kode dibawah ini

main.js

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

var rupiah1 = document.getElementById("rupiah1");

rupiah1.addEventListener("keyup", function(e) {

  rupiah1.value = convertRupiah(this.value);

});

rupiah1.addEventListener('keydown', function(event) {

return isNumberKey(event);

});

 

var rupiah2 = document.getElementById("rupiah2");

rupiah2.addEventListener("keyup", function(e) {

  rupiah2.value = convertRupiah(this.value, "Rp. ");

});

rupiah2.addEventListener('keydown', function(event) {

return isNumberKey(event);

});

 

function convertRupiah(angka, prefix) {

  var number_string = angka.replace(/[^,\d]/g, "").toString(),

    split  = number_string.split(","),

    sisa   = split[0].length % 3,

    rupiah = split[0].substr(0, sisa),

    ribuan = split[0].substr(sisa).match(/\d{3}/gi);

 

if (ribuan) {

separator = sisa ? "." : "";

rupiah += separator + ribuan.join(".");

}

 

rupiah = split[1] != undefined ? rupiah + "," + split[1] : rupiah;

return prefix == undefined ? rupiah : rupiah ? prefix + rupiah : "";

}

 

function isNumberKey(evt) {

    key = evt.which || evt.keyCode;

if ( key != 188 // Comma

&& key != 8 // Backspace

&& key != 17 && key != 86 & key != 67 // Ctrl c, ctrl v

&& (key < 48 || key > 57) // Non digit

)

{

evt.preventDefault();

return;

}

}

Sehingga akan menghasilkan tampilan seperti dibawah

Cara menggunakan separate php from html
Cara menggunakan separate php from html

 

4. Membuat Inputan dengan Masking

Jika kita menggunakan masking maka kita memerlukan librari jquery dan jquery.mask.js. Masukkan pada file project sobat di tag body paling bawah dengan kode dibawah

1

2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

Karena untuk keperluan demo jadi saya menggunakan librari online namun jika sobat ingin menggunakan untuk development tentu sobat harus mendownloadnya terlebih dahulu atau bisa sobat download bersama project ini diakhir postingan. Jika sudah memasukkan kode jsnya selanjutnya kita buat inputannya seperti dibawah

1

2

3

4

5

6

7

8

9

10

11

12

<div class="form-group">

<label>Masking 1</label>

<input type="text" id="masking1" name="masking1" class="form-control">

</div>

<div class="form-group">

<label>Masking 2</label>

<input type="text" id="masking2" name="masking2" class="form-control">

</div>

<div class="form-group">

<label>Masking 3</label>

<input type="text" id="masking3" name="masking3" class="form-control">

</div>

Kemudian pada tag <script> pada index.php atau pada file main.js kita tambahkan kode dibawah

1

2

3

4

5

$(document).ready(function(){

    $('#masking1').mask('#.##0', {reverse: true});

    $('#masking2').mask('#.##0,0', {reverse: true});

    $('#masking3').mask('#,##0.00', {reverse: true});

})

Jika sobat jalankan maka akan seperti gambar dibawah

Cara menggunakan separate php from html
Cara menggunakan separate php from html

 

Contoh diatas semua dibatasi hanya bisa diisi dengan angka saja. Karena kita akan mengkonvertnya menjadi format ribuan maka kita tidak bisa membiarkan huruf bisa masuk jadi kita set hanya angka saja. Sekian postingan saya tentang Cara Membuat Format Rupiah Pada PHP dan Javascript. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah dan jika ada salah-salah saya mohon maaf. Kunjungi postingan saya yang lain karena banyak tentang PHP dan Javascript.