Minggu, 07 Februari 2016

Tutorial PHP : Membuat Formasi Diamond disertai Validasi Input

Pada Tutorial kali ini, Teman-Teman akan belajar mengenai bagaimana membuat bentuk diamond dengan menggunakan PHP, HTML dan CSS.

Preview Formasi Diamond yang akan dibuat: 

Spesifikasi Formasi Diamond: 

  • Diameter diamond harus ganjil.
  • Diameter diamond tidak boleh kurang dari atau sama dengan 0.
  • Diameter diamond tidak boleh lebih dari 99.
  • Diameter diamond harus diinput menggunakan method POST.
  • CSS menggunakan font DOS.

Algoritma Formasi Diamond:

  1. Masukkan diameter diamond yang diinginkan ($diameter_diamond).
  2. Pasang pesan kesalahan dengan nilai awal empty string ($pesan_kesalahan    = '';)
  3. Bila diameter diamond kurang dari atau sama dengan 0, maka tambahkan pesan kesalahan.
  4. Bila diameter diamond adalah genap maka tambahkan pesan kesalahan.
  5. Bila diameter diamond adalah lebih dari 99 maka tambahkan pesan kesalahan.
  6. Bila terdapat pesan kesalahan maka tampilkan pesan kesalahan. Selain itu maka lanjutkan tahap berikutnya.
  7. Pasang variabel $jumlah_baris dan $jumlah_kolom sesuai dengan diameter diamond yang diinginkan.
  8. Tengah adalah (diameter diamond + 1) / 2.
  9. Pasang tampilkan diamond dengan string kosong.
  10. Untuk $baris = 1, hingga $baris lebih kecil daripada $jumlah_baris maka lakukan 11.
  11. Untuk $kolom = 1, hingga $kolom lebih kecil daripada $jumlah_kolom maka lakukan 12.
  12. Tambahkan tampilkan diamond dengan karakter * bila memenuhi kondisi berikut: ($baris-$kolom<$tengah) && ($baris+$kolom>$tengah) && ($kolom-$baris<$tengah) && ($kolom+$baris<$diameter_diamond+$tengah+1)
  13. Selain itu tampilkan karakter spasi.
  14. Naikkan nilai $baris sebanyak 1.
  15. Kembali ke 11.
  16. Tampilkan enter (<br>).
  17. Kembali ke 10.
  18. Tampilkan nilai diamond.
  19. Selesai.

 Mari Membuat Formasi Diamond dengan PHP,HTML dan CSS

  1. Buatlah folder sukalogika pada direktori www anda. Pada tahap ini struktur explorer akan terlihat seperti ini: C:\wamp\www\sukalogika>
  2. Buatlah folder diamond pada direktori sukalogika. Pada tahap ini struktur explorer akan terlihat seperti ini: C:\wamp\www\sukalogika\diamond>
  3. Bukalah text editor yang akan digunakan. Misalnya: Notepad atau Notepad++
  4. Ketik/Copy Paste kode berikut dan simpan dalam folder C:\wamp\www\sukalogika\diamond> dengan nama index.php. 
    <?php function menampilkan_diamond(){ $pesan_kesalahan = ''; $diameter_diamond = (int)$_POST["diameter_diamond"]; if($diameter_diamond<=0){ // Tampilkan Pesan Kesalahan : Lebar Diamond tidak boleh kurang dari 0 $pesan_kesalahan .= 'Lebar Diamond tidak boleh kurang atau sama dengan 0<br>'; } if($diameter_diamond%2==0){ // Tampilkan Pesan Kesalahan : Lebar Diamond tidak boleh Genap. $pesan_kesalahan .= 'Lebar Diamond harus ganjil<br>'; } if($diameter_diamond%2>99){ // Untuk menghemat memori, maka input diameter tidak boleh lebih dari 99. $pesan_kesalahan .= 'Angka tidak boleh lebih besar dari 99<br>'; } if($pesan_kesalahan != ''){ return $pesan_kesalahan; } else{ $jumlah_baris = $diameter_diamond; $jumlah_kolom = $diameter_diamond; $tengah = ($diameter_diamond+1)/2; $tampilkan_diamond = ''; for($baris=1;$baris<=$jumlah_baris;$baris++){ for($kolom=1;$kolom<=$jumlah_kolom;$kolom++){ if( ($baris-$kolom<$tengah) && ($baris+$kolom>$tengah) && ($kolom-$baris<$tengah) && ($kolom+$baris<$diameter_diamond+$tengah+1)){ $tampilkan_diamond .= '*'; } else{ $tampilkan_diamond .= '&nbsp;'; } } $tampilkan_diamond .= '<br>'; } return $tampilkan_diamond; } } ?> <!DOCTYPE html> <html> <head> <title> Diamond </title> <style> .tengah{ text-align:center; } .dos_sukalogika{ font-family: fixedsys, LucidaTerminal, monospace; } </style> </head> <body> <h1> Diamond </h1> <form method="POST" action="?"> <table> <tr> <td> Lebar Diamond </td> <td> : </td> <td> <input type="text" name="diameter_diamond"> </td> </tr> <tr> <td colspan="3" class="tengah"> <input type="submit" value="tampil"> </td> </tr> </table> </form> <div> <?php if(isset($_POST["diameter_diamond"])){ echo '<div class="dos_sukalogika">'; echo menampilkan_diamond(); echo '</div>'; } ?> </div> </body> </html>
  5. Akses dengan alamat: http://localhost/sukalogika/diamond/ untuk melihat formasi diamond anda.
  6. Selamat! Anda berhasil membuat program formasi diamond dengan menggunakan PHP, HTML dan CSS

Tidak ada komentar: