Rabu, 06 Juni 2012

TUTORIAL APLIKASI WEB


MEMBUAT APLIKASI WEB MENGHITUNG LUAS SEGITIGA

            Di bawah ini saya akan menjelaskan langkah-langkah untuk membuat aplikasi web sederhana, yaitu membuat aplikasi web untuk menghitung luas segitiga. Tetapi web ini masih banyak kekurangan, karena web ini hanya menghitung bangun datar segitiga saja, belum menghitung bangun datar yang lainnya, maaf bila banyak kekurangan di dalam aplikasi web ini. Sekarang kita masuk ke dalam langkah-langkah membuat aplikasi web sederhana ini:
  • Pertama-tama kita harus memeriksa apakah di dalam komputer sudah terdapat software XAMPP atau belum, karena aplikasi web ini menggunakan software XAMPP. Jadi, apabila di dalam komputer ini belum terdapat XAMPP, sebaiknya kita install terlebih dahulu agar kita bisa membuat aplikasi web. Berikut ini adalah cara menginstall XAMPP :
·         Download XAMPP terlebih dahulu, kemudian double klik pada file tersebut yang sudah selesai didownload untuk unpack installer.
·         Kemudian pilih folder untuk unpack file tersebut, seperti C:\xampp, kemudian buka folder tersebut.
·         Lalu double klik setup_xampp.bat untuk menginstall XAMPP.
·         Dan untuk membuka setting XAMPP kita harus cari file xampp-control.exe dan double klik pada file tersebut.
·         Untuk membuat web ini kita aktifkan Apache dan MySQL. Setelah itu, buka browser kita dan ketik http://localhost maka server website lokal kita akan terbuka.
  
  •       Setelah komputernya sudah diinstal XAMPP, maka sekarang tentukan konsep web yang kita inginkan itu seperti apa, untuk aplikasi web sederhana ini kita hanya memerlukan satu buah gambar untuk background webnya, kemudian satu buah GIF image yang codingnya didownload dari www.textspace.net .Kita juga akan memasukkan beberapa coding agar web ini dapat dijalankan.

  •       Buka notepad++ untuk membuat coding-codingnya, lalu kita masukkan coding di bawah ini :
<?php

error_reporting(0);
            Blok statement di atas menjelaskan bahwa web yang kita buat ini menggunakan php, dan statement di atas wajib ada setiap kita membuat web menggunakan php.

$alas = trim($_REQUEST['Alas']);
$tinggi  = trim($_REQUEST['Tinggi']);
$hasil  = trim($_REQUEST['Hasil']);
            Blok statement di atas berfungsi untuk mendeklarasikan variabel-variabel di dalam php,  yang nilainya nanti akan diinput melalui keyboard.

 define("hitung",(0.5));
             
 if ($_REQUEST['submit'])
    {
            $solve = round(hitung * ($alas * $tinggi),2);
    }
 if ($_REQUEST['clear'])
    {
    $alas="";
    $tinggi="";
            $hasil="";
   }

?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Perhitungan Segitiga</title>
            Tag <title> berfungsi untuk memberikan title atau judul pada sebuah halaman web. Judul atau title tersebut akan muncul pada browser, judul pada halaman favorit dan judul pada halaman

<style type="text/css">
            Tag <style> berfungsi untuk menjelaskan style yang digunakan di halaman website tersebut

<!--
body {
            background-attachment: fixed;
            background-image: url(angka1.jpg);
}
            Pada statement background-image: url(angka1.jpg); berfungsi untuk menampilkan gambar yang sudah kita simpan di dalam folder yang sama untuk coding ini. Nama pada gambar yang disimpan haruslah sama dengan nama gambar di body ini.

.style1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30px;
            color: #000000 ;
}
.style2 {
            font-family: "Algerian", "New York", serif;
            font-weight: bold;color: #000000 ;
            font-size: 30px;
}
            Blok statement di atas berfungsi untuk mengubah bentuk huruf, warna huruf, dan ukuran huruf sesuai yang kita inginkan untuk tampilan web ini.
-->
</style></head>
            Statement di atas berfungsi untuk menutup tag style dan head .

<body>
<div align="center">
  <p>&nbsp;</p>
  <object width="400" height="46"><param name="movie" value="http://LOCALHOST/lcd_7.swf"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="w=400&h=46&c=1&spd=2&b=1&t=LUAS+SEGITIGA"></param><param name="allowscriptaccess" value="always"><embed src="http://localhost/suhu/lcd_7.swf" type="application/x-shockwave-flash" wmode="transparent" flashvars="w=400&h=46&c=1&spd=2&b=1&t=LUAS+SEGITIGA" allowscriptaccess="always" width="400" height="46"></embed></object><br />
</div>

<form id="form1" name="form1" method="post" action=""><div align="center">

  <table width="450" height="500" border="0">
    <tr>
      <td width="256"><span class="style2">A L A S</span></td>
               <?php
     echo "<b><h4>".$message."</b></h4>";
             ?>
      <td width="16"><div align="center"><strong><span class="style1">:</span> </strong></div></td>
           
      <td width="164"><div align="center">
        <label>
        <input type="text" name="Alas"
             value="<?php echo $alas; ?>" />
        </label>
      </div></td>
    </tr>

    <tr>
            <tr>
      <td width="256"><span class="style2">T I N G G I</span></td>
               <?php
     echo "<b><h4>".$message."</b></h4>";
             ?>
      <td width="16"><div align="center"><strong><span class="style1">:</span> </strong></div></td>
      <td width="164"><div align="center">
        <label>
        <input type="text" name="Tinggi"
                         value="<?php echo $tinggi; ?>" />
        </label>
      </div></td>
    </tr>
    <tr>
      <td><p class="style2">H A S I L</p>        </td>
      <td><div align="center"><strong><span class="style1">:</span> </strong></div></td>
      <td><div align="center">
        <input type="text" name="hasil"
                        value="<?php echo trim($solve); ?>" READONLY />
      </div></td>
    </tr>
           
  <td height="150"><p align="JUSTIFY">
    <input type="submit" name="submit" value="Hitung" />
    <input type="submit" name="clear" value="Clear" />
      </p>      </td>
  </table>
</form>
</body>
</html>
  • Setelah kita memasukkan semua codingnya di dalam notepad++, lalu save dahulu di dalam folder yang kita buat di dalam htdocs dengan format .php . Gambar untuk background dan GIF image juga disimpan di dalam folder yang sama.



  • SELAMAT MENCOBA !!!!!!! ^^

          Link My Campus >>> www.gunadarma.ac.id



Tidak ada komentar:

Posting Komentar