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> </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.
- Kemudian coba dipanggil di browser kita, buka terlebih dahulu browsernya, lalu ketik http://localhost/widya/luas_segitiga/luas.php maka akan muncul tampilan aplikasi web seperti di bawah ini :
- SELAMAT MENCOBA !!!!!!! ^^
Link My Campus >>> www.gunadarma.ac.id
