Kangtain: /* Tugas membuat kalkulator */

2023-04-18T15:31:19Z

Tugas membuat kalkulator

← Older revision		Revision as of 22:31, 18 April 2023
Line 121:		Line 121:
	</syntaxhighlight>		</syntaxhighlight>

	style.css		<code>style.css</code><syntaxhighlight lang="css" line="1">
	<code>body{		body{
	background: #68F3F8;		background: #68F3F8;
	font-family: sans-serif;		font-family: sans-serif;
	}		}

	.kalkulator{		.kalkulator{
	width: 300px;		width: 300px;
	background: #0081CF;		background: #0081CF;
	padding: 10px 20px 30px 20px;		padding: 10px 20px 30px 20px;
	border-radius: 5px;		border-radius: 5px;
	box-shadow: 0px 10px 10px 0px #FFFFFF;		box-shadow: 0px 10px 10px 0px #FFFFFF;
	}		}

	.bil{		.bil{
	width: 280px;		width: 280px;
	margin: 10px;		margin: 10px;
	border: none;		border: none;
	font-size: 14pt;		font-size: 14pt;
	border-radius: 5px;		border-radius: 5px;
	padding: 10px;		padding: 10px;
	}		}

	.opt{		.opt{
	font-size: 14pt;		font-size: 14pt;
	border: none;		border: none;
	width: 280px;		width: 280px;
	margin: 10px;		margin: 10px;
	border-radius: 5px;		border-radius: 5px;
	padding: 10px;		padding: 10px;
	}		}

	.tombol{		.tombol{
	background: #A9A9A9;		background: #A9A9A9;
	margin: 10px;		margin: 10px;
	border-top: none;		border-top: none;
	border-right: none;		border-right: none;
	border-left: none;		border-left: none;
	border-radius: 5px;		border-radius: 5px;
	padding: 10px 20px;		padding: 10px 20px;
	color: #eee;		color: #eee;
	font-size: 15pt;		font-size: 15pt;
	border-bottom: 2px solid #64950;		border-bottom: 2px solid #64950;
	}		}

	.hasil{		.hasil{
	width: 280px;		width: 280px;
	margin: 10px;		margin: 10px;
	border: none;		border: none;
	font-size: 14pt;		font-size: 14pt;
	border-radius: 5px;		border-radius: 5px;
	padding: 10px;		padding: 10px;
	background: #eee;		background: #eee;
	}		}

	.judul{		.judul{
	text-align: center;		text-align: center;
	color: #eee;		color: #eee;
	font-weight: 300px;		font-weight: 300px;
	}</~~code~~>		}
			</syntaxhighlight>

Kangtain: Created page with "== AI == Berikut adalah contoh kode untuk membuat web kalkulator menggunakan pemrograman PHP dengan dua isian untuk angka dan pilihan drop down untuk memilih operator matematika: Kalkulator
Angka Pertama:

2023-04-18T15:29:58Z

Created page with "== AI == Berikut adalah contoh kode untuk membuat web kalkulator menggunakan pemrograman PHP dengan dua isian untuk angka dan pilihan drop down untuk memilih operator matematika:<syntaxhighlight lang="php" line="1"> <!DOCTYPE html> <html> <head> <title>Kalkulator</title> </head> <body> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <label for="angka1">Angka Pertama:</label> <input type="number" id="angka1" name="angka1"><br><br> <label for="ang..."

New page
== AI ==
Berikut adalah contoh kode untuk membuat web kalkulator menggunakan pemrograman PHP dengan dua isian untuk angka dan pilihan drop down untuk memilih operator matematika:<syntaxhighlight lang="php" line="1">
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
</head>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="angka1">Angka Pertama:</label>
<input type="number" id="angka1" name="angka1"><br><br>
<label for="angka2">Angka Kedua:</label>
<input type="number" id="angka2" name="angka2"><br><br>
<label for="operator">Operator:</label>
<select id="operator" name="operator">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali"></option>
<option value="bagi">/</option>
</select><br><br>
<input type="submit" value="Hitung">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$angka1 = $_POST["angka1"];
$angka2 = $_POST["angka2"];
$operator = $_POST["operator"];

switch ($operator) {
case "tambah":
$hasil = $angka1 + $angka2;
break;
case "kurang":
$hasil = $angka1 - $angka2;
break;
case "kali":
$hasil = $angka1 $angka2;
break;
case "bagi":
$hasil = $angka1 / $angka2;
break;
}

echo "<br>Hasil: " . $hasil;
}
?>
</body>
</html>
</syntaxhighlight>Penjelasan kode:

Penjelasan kode:

* Baris 6-18: Membuat form HTML dengan dua isian angka dan pilihan operator matematika menggunakan tag <code><input></code> dan <code><select></code>.
* Baris 20-26: Memeriksa apakah form telah disubmit menggunakan metode POST.
* Baris 27-29: Mengambil nilai dari isian angka dan operator yang dipilih.
* Baris 31-41: Menggunakan <code>switch</code> untuk melakukan operasi matematika yang sesuai dengan operator yang dipilih.
* Baris 43: Menampilkan hasil operasi menggunakan <code>echo</code>.

Dengan kode di atas, pengguna dapat memasukkan dua angka dan memilih operator matematika untuk melakukan operasi matematika yang sesuai. Hasilnya akan ditampilkan di bawah tombol "Hitung".

== Tugas membuat kalkulator ==
<code>index.php</code><syntaxhighlight lang="php" line="1">
<html>
<head>
<title>Kalkulator Dengan PHP</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<?php
if(isset($_POST['hitung'])){
$bil1 = $_POST['bil1'];
$bil2 = $_POST['bil2'];
$operasi = $_POST['operasi'];

switch ($operasi) {
case 'tambah':
$hasil = $bil1 + $bil2;
break;
case 'kurang':
$hasil = $bil1 - $bil2;
break;
case 'kali':
$hasil = $bil1 * $bil2;
break;
case 'bagi':
$hasil = $bil1 / $bil2;
break;
}
}
?>

<div class="kalkulator">
<h4 class="judul">KALKULATOR SEDERHANA</h4>
<form method="post" action="">
<input type="text" name="bil1" class="bil" placeholder="Bilangan ke 1" required/>
<input type="text" name="bil2" class="bil" placeholder="Bilangan ke 2" required/>
<select class="opt" name="operasi">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">x</option>
<option value="bagi">/</option>
</select>

<input type="submit" name="hitung" value="Hitung" class="tombol"/>
<input type="reset" value="Reset" class="tombol"/>
</form>

<?php if(isset($_POST['hitung'])){ ?>

<input type="text" value="<?php echo $hasil; ?>" class="hasil"/>

<?php } else { ?>
<input type="text" value="0" class="hasil"/>
<?php } ?>

</div>
</body>
</html>
</syntaxhighlight>

style.css
<code>body{
background: #68F3F8;
font-family: sans-serif;
}

.kalkulator{
width: 300px;
background: #0081CF;
padding: 10px 20px 30px 20px;
border-radius: 5px;
box-shadow: 0px 10px 10px 0px #FFFFFF;
}

.bil{
width: 280px;
margin: 10px;
border: none;
font-size: 14pt;
border-radius: 5px;
padding: 10px;
}

.opt{
font-size: 14pt;
border: none;
width: 280px;
margin: 10px;
border-radius: 5px;
padding: 10px;
}

.tombol{
background: #A9A9A9;
margin: 10px;
border-top: none;
border-right: none;
border-left: none;
border-radius: 5px;
padding: 10px 20px;
color: #eee;
font-size: 15pt;
border-bottom: 2px solid #64950;
}

.hasil{
width: 280px;
margin: 10px;
border: none;
font-size: 14pt;
border-radius: 5px;
padding: 10px;
background: #eee;
}

.judul{
text-align: center;
color: #eee;
font-weight: 300px;
}</code>

Pemrograman Web: Tugas Membuat Kalkulator - Revision history

Kangtain: /* Tugas membuat kalkulator */