02 - Review Menulis Program Di PHP

IF36313L
01104 - APLIKASI
- APLIKASI
TEKNOLOGI
TEKNOLOGI
ONLINE
ONLINE
REVIEW
MENULIS PROGRAM DI PHP
02
OLEH : ANDRI HERYANDI, M.T. 1

CONTOH KASUS
01104 - APLIKASI TEKNOLOGI ONLINE
Buatlah sebuah aplikasi web yang akan menampilkan harga BBM (Premium, Pertalite,
Pertamax dan Solar) berdasarkan inputan awal dan akhir liter yang ingin ditampilkan.
Data awal dan akhir liter diinputkan oleh user melalui sebuah form.
Ada pun ketentuan harganya adalah :

 Premium Rp. 6.550/liter
 Pertalite Rp. 7.600/liter
 Pertamax Rp. 8.900/liter
 Solar Rp. 5.150/liter
Oleh : Andri Heryandi, M.T. 2

CONTOH KASUS
Berikut adalah formnya :
Nama Objek awal akhir tblsubmit

CONTOH KASUS
Jika liter awal diisi 1 dan liter akhir diisi 15 maka akan menampilkan daftar harga BBM
dari 1 s.d 15 liter untuk setiap jenis BBM.

SOLUSI
Buat file baru dengan nama bbm.php di folder web anda.
<!DOCTYPE html>
<html>
<head><title>Daftar Harga BBM</title></head>
<body>
<h1>Daftar Harga BBM</h1>
<form method="post">
<table border="1">
<tr><th>Liter Awal</th><th>Liter Akhir</th><th> </th></tr>
<tr><td><input type="text" name="awal" maxlength="3" size="2"></td>
<td><input type="text" name="akhir" maxlength="3" size="2"></td>
<td><input type="submit" name="tblsubmit" value="View"></td></tr>
</table>
</form>
</body>
</html>

SOLUSI
Tambahkan script berikut di bawah tag </form>

<?php
define("HARGA_PREMIUM",6550);
define("HARGA_PERTALITE",7600);
define("HARGA_PERTAMAX",8900);
define("HARGA_SOLAR",5150);
?>
<table border="1">
<tr><th>Liter</th><th>Premium</th><th>Pertalite</th><th>Pertamax</th><th>Solar</th></tr>
<?php
$awal=$_POST["awal"];
$akhir=$_POST["akhir"];
for($i=$awal;$i<=$akhir;$i++){
?>
<tr><td><?php echo $i;?></td>
<td><?php echo $i*HARGA_PREMIUM;?></td>
<td><?php echo $i*HARGA_PERTALITE;?></td>
<td><?php echo $i*HARGA_PERTAMAX;?></td>
<td><?php echo $i*HARGA_SOLAR;?></td>
</tr>
<?php
}
?>
</table>

SOLUSI
Jika anda menjalankan program ini maka akan muncul error seperti gambar di bawah
ini yang menyatakan bahwa variable awal dan akhir tidak dikenal.
Jika anda tidak melihat error ini, aktifkan

mode “display_error s ” menjadi true dengan
cara Klik icon WampSer ver  PHP  PHP
Settings  Checklist bagian
“display_error s ”.
Ketika anda men-develop aplikasi , setingan
ini disarankan tetap On.

SOLUSI
Agar script PHP dieksekusi hanya ketika setelah adanya penekanan tombol submit, maka
lakukan hal berikut :
 Tambahkan script berikut sebelum script yang akan dieksekusi setelah penekanan
tombol (setelah </form> sebelum <?php ).
<?php
if(isset($_POST["tblsubmit"])){ // jika telah mengklik tombol submit
?>
 Tambahkan scrip berikut setelah </table>
<?php
} // akhir dari if tombol submit diklik
?>

MODIFIKASI SELANJUTNYA
1. Menambahkan tanda “Rp.” pada cell yang menuliskan angka uang.

2. Tampilkan data terformat ribuan
Contoh: 20000 ditampilkan menjadi Rp 20.000
3. Tampilkan data uang dalam cell yang ditulis rata kanan.
4. Bedakan warna latar baris liter ganjil dan genap. Misalnya baris ganjil warna latarnya
putih dan baris genap warna latarnya perak (silver).
5. Tampilkan ulang angka liter awal di textbox awal, dan angka liter akhir di textbox akhir
jika user telah submit data (form tidak kosong setelah submit data).
6. Tambahkan validasi data. Nilai awal harus angka bilangan bulat. Kalau string yang
bukan angka atau pecahan berilah dialog peringatan. [Akan dijelaskan khusus pada
pertemuan mendatang]

MODIFIKASI 1
(MENAMBAHKAN LAMBANG MATA UANG)
 Penambahan tanda mata uang (Rp) bisa dua cara

1. Ditulis di bagian html (tidak masuk ke mode php)
2. Ditulis di bagian php (masuk ke dalam echo)
 Ubahlah baris-baris yang menuliskan angka uang menjadi seperti di bawah ini.

<td>Rp <?php echo $i*HARGA_PREMIUM;?></td>
<td>Rp <?php echo $i*HARGA_PERTALITE;?></td>
<td><?php echo "Rp ".$i*HARGA_PERTAMAX;?></td>
<td><?php echo "Rp ".$i*HARGA_SOLAR;?></td>
</tr>
Tanda titik di PHP berarti

gabung string (operator concat)
MODIFIKASI 2
(MEMFORMAT DATA MATA UANG)
 Referensi : http://php.net/manual/en/function.number -format.php
 Keterangan parameter :
 $number : angka yang akan diformat
 $decimal : berapa digit pecahan yang akan ditampilkan (default = 0)
 $dec_point : karakter pemisah pecahan (decimal) (default = “.” tanda titik)
 $thousands_sep : karakter pemisah ribuan (default = “,” tanda koma)

MODIFIKASI 2
 Ubah semua echo yang menampilkan angka uang dengan menambahkan function
number_format seperti pada contoh di bawah ini.

<td>Rp <?php echo number_format($i*HARGA_PREMIUM,0,",",".");?></td>
<td>Rp <?php echo number_format($i*HARGA_PERTALITE,0,",",".");?></td>
<td><?php echo "Rp ".number_format($i*HARGA_PERTAMAX,0,",",".");?></td>
<td><?php echo "Rp ".number_format($i*HARGA_SOLAR,0,",",".");?></td>
</tr>
Format penulisan mata uang Rupiah berdasarkan EYD adalah:

• Lambang Rp ditulis tanpa titik
• Pemisah pecahan adalah tanda koma (,)
• Pemisah ribuan adalah tanda titik (.)
Sehingga penulisan functionnya adalah :
number_format($angka,0,",",".")

MODIFIKASI 2
 Hasil run setelah menambahkan number_format

MODIFIKASI 3
(CELL DATA MATA UANG RATA KANAN)
 Cara untuk seting cell yang berisi data mata uang agar ditampilkan rata kanan adalah
sebagai berikut :
1. Menambahkan attribute align="right" pada setiap tag <td> yang ingin ditulis rata-kanan.
2. Mendefaultkan style untuk semua tag td pada dokumen html tersebut dengan menggunakan
Cascade Style Sheet (CSS).

MODIFIKASI 3
 Cara 1 : Seting tag <td> yang menuliskan data uang dengan menambah
align="right"
<td align="right">Rp <?php echo number_format($i*HARGA_PREMIUM,0,",",".");?></td>
<td align="right">Rp <?php echo number_format($i*HARGA_PERTALITE,0,",",".");?></td>
<td align="right"><?php echo "Rp ".number_format($i*HARGA_PERTAMAX,0,",",".");?></td>
<td align="right"><?php echo "Rp ".number_format($i*HARGA_SOLAR,0,",",".");?></td>
Tetap rata kiri karena

tidak diatur style-nya
Hasil Run

MODIFIKASI 3
 Cara 2 : Seting style untuk <td> agar ditulis rata-kanan

 Diantara </title> dan </head> tulis script di bawah ini yang menyatakan bahwa semua tag <td>
defaultnya rata kanan. Tidak ada attribute align="right" di tag <td> yang menuliskan mata uang.
<head><title>Daftar Harga BBM</title>
<style>
td{
text-align:right;
}
</style>
Perhatikan!
Semua td akan
Hasil Run ditampilkan rata kanan

MODIFIKASI 3
 Jika anda menggunakan cara ke-2 tetapi pada cell-cell (td) tertentu ingin rata kiri atau
rata kanan, maka anda bisa membuat sebuah class khusus di style-nya.
 Contoh di bawah ini mencontohkan membuat selector class CSS untuk rata tengah. Tulis
diantara tag <style> dan </style>
.tengah{
text-align:center;
}
Pembuatan selector class pada css karena style ini akan digunakan di
banyak tag dalam dokumen yang diformat.
Mengenai selector pada CSS silahkan baca di :

https://www.w3schools.com/cssref/css_selectors.asp

MODIFIKASI 3
 Jangan lupa mengedit cell (td) yang ingin dituliskan rata tengah. Misalnya jika kolom
Liter ingin ditulis rata tengah maka di tag <td> ditambahkan atribut class dengan nama
“tengah”.
<tr><td class="tengah"><?php echo $i;?></td>
Hasil Run
Rata Tengah

PELAJARI CSS!

MODIFIKASI 4
(BARIS GANJIL DAN GENAP BEDA WARNA)
 Cara untuk mengatur baris ganjil dan genap agar berbeda warna adalah sebagai berikut
:
1. Menambahkan attribute bgcolor="white" pada setiap tag <tr> baris ganjil dan attribute
bgcolor="silver" pada setiap tag <tr> baris genap.
2. Menambahkan attribute class="barisganjil" pada setiap tag <tr> baris ganjil dan attribute
class="barisgenap" pada setiap tag <tr> baris genap.
3. Penentuan baris ganjil genap dilakukan oleh Cascade Style Sheet (CSS).

MODIFIKASI 4
 Cara 1 : Menambahkan attribute bgcolor pada tag <tr> sesuai ganjil/genap liternya.
Isi attribut bgcolor harus berupa percabangan yang memeriksa apakah variable liter
ganjil atau genap. Jika ganjil maka isi bgcolor adalah white dan jika genap maka isinya
adalah silver.
<tr bgcolor="<?php
if($i %2 == 1)
echo "white";
else
echo "silver";
?>">
 Atau
<tr bgcolor="<?php echo ($i%2==1?"white":"silver");?>">
Referensi Perbandingan Ternary :

http://php.net/manual/en/language.operators.comparison.php#language.operators.comparison.ternary
MODIFIKASI 4
 Cara 1 : Menambahkan attribute bgcolor pada tag <tr> sesuai ganjil/genap liternya.
Isi attribut bgcolor harus berupa percabangan yang memeriksa apakah variable liter
ganjil atau genap. Jika ganjil maka isi bgcolor adalah white dan jika genap maka isinya
adalah silver.
Hasil Run

MODIFIKASI 4
 Cara 2 : Menggunakan class barisganjil dan barisgenap pada CSS.

 Buat dulu class barisganjil dan barisgenap di CSS
.barisganjil{
background-color: white;
}
.barisgenap{
background-color:silver;
}
 Ubah tag <tr> yang akan diatur warna latarnya dengan percabangan seperti di bawah ini
(Menggunakan perbandingan ternary).
<tr class="<?php echo ($i%2==1?"barisganjil":"barisgenap");?>">

MODIFIKASI 4
 Cara 2 : Menggunakan class barisganjil dan barisgenap pada CSS.
Hasil Run

MODIFIKASI 4
 Cara 3 : Penentuan baris ganjil dan genap menggunakan CSS yaitu cara menggunakan
selector :nth-child(). Sehingga tidak harus ada percabangan dengan php untuk
menentukan ganjil atau genapnya. Langkahnya :
 Di bagian CSS tulislah hal berikut :
tr:nth-child(even) {
background: white;
}
tr:nth-child(odd) {
background: silver;
}
Referensi selector :nth-child() baca di :

https://www.w3schools.com/cssref/sel_nth-child.asp

MODIFIKASI 4
selector :nth-child.
CSS ini akan mempengaruhi semua tag <tr> di semua table.
Hasil Run
MODIFIKASI 4
selector :nth-child.
Modifikasi CSS menjadi seperti berikut :

tr:nth-child(2n+2) { Silahkan dipelajari maksudnya.
background: white;
}
tr:nth-child(2n+3) {
background: silver;
}
Hasil Run
MODIFIKASI 5
(MENAMPILKAN KEMBALI DATA YANG TERSUBMIT)
 Ketika anda membuka halaman bbm.php ini maka anda akan lihat form kosong.
 Kemudian anda mengisi nilai awal dan akhir, kemudian klik tombol View.
 Hasil eksekusi akan menampilkan hasil perhitungan seperti pada gambar di bawah ini.
 Tapi kalau dilihat pada bagian form maka liter awal dan akhir kembali kosong. Alangkah
baiknya jika setelah eksekusi (submit data), maka form akan terisi sesuai data yang
telah disubmit.

MODIFIKASI 5
 Caranya dengan memanfaatkan function isset yang akan memeriksa apakah ada submit
data atau tidak. Jika ada submit data maka data tersebut dituliskan sebagai value dari
textbox awal atau akhir. Modifikasi yang dilakukan adalah sebagai berikut :
 Edit pada tag <input> awal dan akhir
 Ubah seperti pada script di bawah ini.
<input type="text" name="awal"
value="<?php echo (isset($_POST["awal"])?$_POST["awal"]:"");?>"
maxlength="3" size="2">
<input type="text" name="akhir“
value="<?php echo (isset($_POST["akhir"])?$_POST["akhir"]:"");?>"
maxlength="3" size="2">

MODIFIKASI 5
 Run
 Awal pemanggilan bbm.php, isi awal dengan 5 dan akhir dengan 10.
 Setelah submit data
Data submit
ditampilkan kembali

FINAL FILE
<!DOCTYPE html>
<html>
<head><title>Daftar Harga BBM</title>
<style>
td{
text-align:right;
}
.tengah{
text-align:center;
}
background: white;
}
background: silver;
}
</style>
</head>

FINAL FILE
<body>
<h1>Daftar Harga BBM</h1>
<form method="post">
<table border="1">
<tr><th>Liter Awal</th><th>Liter Akhir</th><th> </th></tr>
<tr><td><input type="text" name="awal" value="<?php echo (isset($_POST["awal"])?$_POST["awal"]:"");?>"
maxlength="3" size="2"></td>
<td><input type="text" name="akhir" value="<?php echo (isset($_POST["akhir"])?$_POST["akhir"]:"");?>"
maxlength="3" size="2"></td>
<td><input type="submit" name="tblsubmit" value="View"></td></tr>
</table>
</form>

FINAL FILE
<?php
if(isset($_POST["tblsubmit"])){ // jika telah mengklik tombol submit
?>
<?php
define("HARGA_PREMIUM",6550);
define("HARGA_PERTALITE",7600);
define("HARGA_PERTAMAX",8900);
define("HARGA_SOLAR",5150);
?>
<table border="1">
<tr><th>Liter</th><th>Premium</th><th>Pertalite</th><th>Pertamax</th><th>Solar</th></tr>

FINAL FILE
<?php
$awal=$_POST["awal"];
$akhir=$_POST["akhir"];
for($i=$awal;$i<=$akhir;$i++){
?>
<tr>
<td class="tengah"><?php echo $i;?></td>
<td>Rp <?php echo number_format($i*HARGA_PREMIUM,0,",",".");?></td>
<td>Rp <?php echo number_format($i*HARGA_PERTALITE,0,",",".");?></td>
<td><?php echo "Rp ".number_format($i*HARGA_PERTAMAX,0,",",".");?></td>
<td><?php echo "Rp ".number_format($i*HARGA_SOLAR,0,",",".");?></td>
</tr>
<?php
}
?>
</table>
<?php
}
?>
</body>
</html>
FORUM DISKUSI
LMS UNIKOM Group Whatsapp Youtube Comments

https://lms.unikom.ac.id Perkuliahan https://unikom.id/YTKuliahATOL

02 - Review Menulis Program Di PHP

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

02 - Review Menulis Program Di PHP

Diunggah oleh

Hak Cipta:

Format Tersedia

IF36313L

OLEH : ANDRI HERYANDI, M.T. 1

Ada pun ketentuan harganya adalah :

Oleh : Andri Heryandi, M.T. 2

Berikut adalah formnya :

Nama Objek awal akhir tblsubmit

Oleh : Andri Heryandi, M.T. 3

Oleh : Andri Heryandi, M.T. 4

Buat file baru dengan nama bbm.php di folder web anda.

Oleh : Andri Heryandi, M.T. 5

Tambahkan script berikut di bawah tag </form>

Oleh : Andri Heryandi, M.T. 6

Jika anda tidak melihat error ini, aktifkan

Oleh : Andri Heryandi, M.T. 7

Oleh : Andri Heryandi, M.T. 8

1. Menambahkan tanda “Rp.” pada cell yang menuliskan angka uang.

Oleh : Andri Heryandi, M.T. 9

 Penambahan tanda mata uang (Rp) bisa dua cara

<tr><td><?php echo $i;?></td>

Tanda titik di PHP berarti

 Referensi : http://php.net/manual/en/function.number -format.php

Oleh : Andri Heryandi, M.T. 11

<tr><td><?php echo $i;?></td>

Format penulisan mata uang Rupiah berdasarkan EYD adalah:

Oleh : Andri Heryandi, M.T. 12

 Hasil run setelah menambahkan number_format

Oleh : Andri Heryandi, M.T. 13

Oleh : Andri Heryandi, M.T. 14

Tetap rata kiri karena

Oleh : Andri Heryandi, M.T. 15

 Cara 2 : Seting style untuk <td> agar ditulis rata-kanan

Oleh : Andri Heryandi, M.T. 16

Mengenai selector pada CSS silahkan baca di :

Oleh : Andri Heryandi, M.T. 17

<tr><td class="tengah"><?php echo $i;?></td>

Oleh : Andri Heryandi, M.T. 18

Oleh : Andri Heryandi, M.T. 19

Oleh : Andri Heryandi, M.T. 20

Referensi Perbandingan Ternary :

Oleh : Andri Heryandi, M.T. 22

 Cara 2 : Menggunakan class barisganjil dan barisgenap pada CSS.

Oleh : Andri Heryandi, M.T. 23

 Cara 2 : Menggunakan class barisganjil dan barisgenap pada CSS.

Oleh : Andri Heryandi, M.T. 24

Referensi selector :nth-child() baca di :

Oleh : Andri Heryandi, M.T. 25

CSS ini akan mempengaruhi semua tag <tr> di semua table.

Modifikasi CSS menjadi seperti berikut :

Oleh : Andri Heryandi, M.T. 28

Oleh : Andri Heryandi, M.T. 29

 Setelah submit data

Oleh : Andri Heryandi, M.T. 30

Oleh : Andri Heryandi, M.T. 31

Oleh : Andri Heryandi, M.T. 32

Oleh : Andri Heryandi, M.T. 33

LMS UNIKOM Group Whatsapp Youtube Comments

Oleh : Andri Heryandi, M.T. 35

Anda mungkin juga menyukai