Demo program seperti gambar dibawah ini :
Oke langsung saja kita ke materinya. Harap siapkan sabuk pengaman dulu gan :D HeHe
- Pertama buat file "index.php" sebagai halaman utama web kita nantinya. Ketik script di bawah ini dan simpan dengan file ekstensi (.php) , misal "index.php"
index.php
<html>
<head>
<meta charset="UTF-8">
<link href="CSS/Style.css" type="text/css" rel="stylesheet">
<link rel="icon" type="image/ico" href="Images/logo.ico">
</head>
<body>
<div id="content">
<div id="header">
<table border="0" cellspacing="2" cellpadding="5" align="center">
<tr>
<th><img src="Images/logo.png" width="100" height="100"></th>
<th><h1 class="header">TUGAS PRAKTIKUM PEMROGRAMAN WEB</h1></th>
<th><img src="Images/logo.png" width="100" height="100"></th>
</tr>
</table>
</div>
<ul class="dropmenu">
<li><a href="index.php?p=home"><img src="Images/home.png"> Home</a></li>
<li><a href="index.php?p=Konversi_nilai"><img src="Images/menu_entry.png"> Konversi Nilai</a></li>
<li><a href="index.php?p=Konversi_suhu"><img src="Images/menu_entry.png"> Konversi Suhu</a></li>
<li><a href="index.php?p=Adult"><img src="Images/warning.png"> Foto 18+</a></li>
</ul>
<div id="isi">
<?php
$pages_dir = 'Data';
if (isset($_GET['p'])) {
$pages = scandir($pages_dir, 0);
unset($pages[0], $pages['1']);
$p = $_GET['p'];
if (in_array($p.'.php', $pages)) {
include ($pages_dir.'/'.$p.'.php');
} else {
echo "<script>alert('Hayooo Mau Ngapain??? :D');history.go(-1);</script>";
}
} else{
include ($pages_dir.'/home.php');
}
?>
</div>
<div id="footer">
<h1 class="footer">Copyright © 2015 by Rizki Kurniawan</h1>
</div>
</div>
</body>
</html>
- Kemudian buat folder dengan nama "CSS" dan buat file didalamnya, ketik script dibawah ini pada notepad/editor lainnya dan simpan dengan file ekstensi (.css), misal disini saya buat file "Style.css"
Style.css
#content{
width: 100%;
height: 100%;
margin: auto;
}
body{
background-color: #e9eaed;
font-family: Aligri;
}
#header{
width: 100%;
height: 10%;
float: top;
margin: auto;
border: 2px;
background-color: #e9eaed;
padding: 2px;
border-radius: 5px;
}
h1.header{
font-size: 37px;
text-align: center;
}
h1.home{
font-size: 25px;
text-align: center;
color: #636b7c;
}
table{
color: #04215f;
}
#isi{
position: relative;
height: 78%;
margin-top: 10px;
margin-bottom: 10px;
border: 2px;
background-color: white;
padding: 5px;
opacity: 0.9;
border-radius: 5px;
}
hr{
color: #1c31ce;
}
#footer{
float: bottom;
position: relative;
width: 100%;
height: 10%;
border: 2px;
background-color: #4965a0;
padding: 2px;
opacity: 0.9;
border-radius: 5px;
}
h1.footer{
font-size: 15px;
text-align: center;
color: #181818;
}
.dropmenu {
background: #4965a0;
height: 40px;
list-style-type: none;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
float: top;
opacity: 0.9;
border-radius: 5px;
}
.dropmenu li {
border-right: solid 1px black;
float: left;
height: 40px;
float: start;
}
#li_tanda {
background: #dee7ec;
}
.dropmenu li a {
color: #181818;
display: block;
font: 18px arial, Aligri, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover {
background: #a6ade2; position: relative;
border-radius: 5px;
}
.dropmenu li:hover a {
text-decoration: none; }
.dropmenu li:hover ul {
background-color: #07157f;
border: 1px solid grey;
left: 0px;
padding: 3px;
top: 30px;
width: 300px;
}
.dropmenu li:hover ul li {
border: none; height: 25px;
}
.dropmenu li:hover ul li a {
background-color: #9fa9f8;
border: 1px solid transparent;
color: #000;
display: block;
font-size: 20px;
height: 18px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 300px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: #dddfed;
border: solid 1px #444;
color: #000;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
- Setelah itu buat folder dengan nama "Data" dan buat 3 file berikut : "home.php","Konversi_suhu.php","Konversi_nilai.php"
home.php
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link type="text/css" href="../CSS/Style.css" rel="stylesheet">
</head>
<body>
<div id="isi">
<h1 class="home">HALAMAN UTAMA</h1>
<hr>
<table border="0" cellspacing="2" cellpadding="5" align="center" class="home">
<tr>
<td>Nama</td>
<th>:</th>
<td>Rizki Kurniawan</td>
</tr>
<tr>
<td>NIM</td>
<th>:</th>
<td>13622042</td>
</tr>
<tr>
<td>Kelas</td>
<th>:</th>
<td>B1 - Sore</td>
</tr>
</table>
</div>
</body>
</html>
Konversi_suhu.php
<html>
<head>
<meta charset="UTF-8">
<title>Konversi Suhu</title>
<link type="text/css" href="../CSS/Style.css" rel="stylesheet">
</head>
<body>
<div id="isi">
<legend><h1 class="home">Konversi Suhu</h1>
<hr>
<form name="tugas_2" method="POST" action="#">
<table cellspacing="3" cellpadding="5" align="center">
<tr>
<td align="right">Suhu</td>
<th>:</th>
<td><input type="text" name="suhu" placeholder="Masukkan Suhu"></td>
</tr>
<tr>
<td align="right">Type Konversi</td>
<th>:</th>
<td>
<select name="konversi_suhu">
<optgroup label="Type Konversi Suhu">
<option value="0" hidden selected>- - - Pilih Type Konversi - - -</option>
<option value="1">Celcius ke Reamur</option>
<option value="2">Celcius ke Fahrenheit</option>
<option value="3">Reamur ke Celcius</option>
<option value="4">Reamur ke Fahrenheit</option>
<option value="5">Fahrenheit ke Celcius</option>
<option value="6">Fahrenheit ke Reamur</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<th colspan="3"><input type="submit" name="konversi" value="Konversi"></th>
</tr>
</table>
</form>
<!-- code untuk konversi suhu-->
<?php
if (isset($_POST['konversi_suhu'])) {
$suhu = $_POST['suhu'];
$type_konversi = $_POST['konversi_suhu'];
if ($type_konversi == "1") {
$perhitungan = (4/5) * $suhu;
?><script>alert('<?php echo "Suhu $suhu °C = "; echo "$perhitungan °R";?>');</script><?php
} elseif ($type_konversi == "2") {
$perhitungan = (9/5) * $suhu + 32;
?><script>alert('<?php echo "Suhu $suhu °C = "; echo "$perhitungan °F";?>');</script><?php
}elseif ($type_konversi == "3") {
$perhitungan = (5/4) * $suhu;
?><script>alert('<?php echo "Suhu $suhu °R = "; echo "$perhitungan °C";?>');</script><?php
} elseif ($type_konversi == "4") {
$perhitungan = (9/4) * $suhu + 32;
?><script>alert('<?php echo "Suhu $suhu °R = "; echo "$perhitungan °F";?>');</script><?php
} elseif ($type_konversi == "5") {
$perhitungan = (5/9) * $suhu - 32;
?><script>alert('<?php echo "Suhu $suhu °F = "; echo "$perhitungan °C";?>');</script><?php
}elseif ($type_konversi == "6") {
$perhitungan = (4/9) * $suhu - 32;
?><script>alert('<?php echo "Suhu $suhu °F = "; echo "$perhitungan °R";?>');</script><?php
}elseif ($type_konversi == "0") {
?><script>alert('Type konversi suhu belum dipilih!');</script><?php
}
}
?>
</legend>
</div>
</body>
</html>
Konversi_nilai.php
<html>
<head>
<meta charset="UTF-8">
<title>Konversi Nilai</title>
<link type="text/css" href="../CSS/Style.css" rel="stylesheet">
</head>
<body>
<?php
function hasil_1($hasil_1){
$nilai_1 = $_POST['nilai_1'];
if ($nilai_1 >= 90) {
$hasil_1 = "A";
}elseif ($nilai_1 >= 80) {
$hasil_1 = "B";
}elseif ($nilai_1 >= 70) {
$hasil_1 = "C";
}elseif ($nilai_1 >= 60) {
$hasil_1 = "D";
}elseif ($nilai_1 < 60) {
$hasil_1 = "E";
}
echo $hasil_1;
return $hasil_1;
}
function hasil_2($hasil_2){
$nilai_2 = $_POST['nilai_2'];
if ($nilai_2 >= 90) {
$hasil_2 = "A";
}elseif ($nilai_2 >= 80) {
$hasil_2 = "B";
}elseif ($nilai_2 >= 70) {
$hasil_2 = "C";
}elseif ($nilai_2 >= 60) {
$hasil_2 = "D";
}elseif ($nilai_2 < 60) {
$hasil_2 = "E";
}
echo $hasil_2;
}
function hasil_3($hasil_3){
$nilai_3 = $_POST['nilai_3'];
if ($nilai_3 >= 90) {
$hasil_3 = "A";
}elseif ($nilai_3 >= 80) {
$hasil_3 = "B";
}elseif ($nilai_3 >= 70) {
$hasil_3 = "C";
}elseif ($nilai_3 >= 60) {
$hasil_3 = "D";
}elseif ($nilai_3 < 60) {
$hasil_3 = "E";
}
echo $hasil_3;
}
function hasil_4($hasil_4){
$nilai_4 = $_POST['nilai_4'];
if ($nilai_4 >= 90) {
$hasil_4 = "A";
}elseif ($nilai_4 >= 80) {
$hasil_4 = "B";
}elseif ($nilai_4 >= 70) {
$hasil_4 = "C";
}elseif ($nilai_4 >= 60) {
$hasil_4 = "D";
}elseif ($nilai_4 < 60) {
$hasil_4 = "E";
}
echo $hasil_4;
}
function hasil_5($hasil_5){
$nilai_5 = $_POST['nilai_5'];
if ($nilai_5 >= 90) {
$hasil_5 = "A";
}elseif ($nilai_5 >= 80) {
$hasil_5 = "B";
}elseif ($nilai_5 >= 70) {
$hasil_5 = "C";
}elseif ($nilai_5 >= 60) {
$hasil_5 = "D";
}elseif ($nilai_5 < 60) {
$hasil_5 = "E";
}
echo $hasil_5;
}
function hasil_6($hasil_6){
$nilai_6 = $_POST['nilai_6'];
if ($nilai_6 >= 90) {
$hasil_6 = "A";
}elseif ($nilai_6 >= 80) {
$hasil_6 = "B";
}elseif ($nilai_6 >= 70) {
$hasil_6 = "C";
}elseif ($nilai_6 >= 60) {
$hasil_6 = "D";
}elseif ($nilai_6 < 60) {
$hasil_6 = "E";
}
echo $hasil_6;
}
function hasil_7($hasil_7){
$nilai_7 = $_POST['nilai_7'];
if ($nilai_7 >= 90) {
$hasil_7 = "A";
}elseif ($nilai_7 >= 80) {
$hasil_7 = "B";
}elseif ($nilai_7 >= 70) {
$hasil_7 = "C";
}elseif ($nilai_7 >= 60) {
$hasil_7 = "D";
}elseif ($nilai_7 < 60) {
$hasil_7 = "E";
}
echo $hasil_7;
}
function hasil_8($hasil_8){
$nilai_8 = $_POST['nilai_8'];
if ($nilai_8 >= 90) {
$hasil_8 = "A";
}elseif ($nilai_8 >= 80) {
$hasil_8 = "B";
}elseif ($nilai_8 >= 70) {
$hasil_8 = "C";
}elseif ($nilai_8 >= 60) {
$hasil_8 = "D";
}elseif ($nilai_8 >= 0) {
$hasil_8 = "E";
}
echo $hasil_8;
}
function hasil_ipk($hasil_ipk){
$nilai_1 = $_POST['nilai_1'];
$nilai_2 = $_POST['nilai_2'];
$nilai_3 = $_POST['nilai_3'];
$nilai_4 = $_POST['nilai_4'];
$nilai_5 = $_POST['nilai_5'];
$nilai_6 = $_POST['nilai_6'];
$nilai_7 = $_POST['nilai_7'];
$nilai_8 = $_POST['nilai_8'];
$hasil_ipk = ($nilai_1 + $nilai_2 + $nilai_3 + $nilai_4 + $nilai_5 + $nilai_6 + $nilai_7 + $nilai_8) / 10 / 2;
echo $hasil_ipk;
}
?>
<div id="isi">
<legend><h1 class="home">Form Input Nilai Mahasiswa</h1>
<hr>
<form name="input_konversi_nilai" method="POST" action="#">
<table border="1" cellspacing="0" cellpadding="5" align="center">
<tr>
<th>No</th>
<th>Nama Mata Kuliah</th>
<th>SKS</th>
<th>Nilai</th>
<th>Nilai Konversi</th>
</tr>
<tr>
<th>1.</th>
<td>AIK 3 Islam dan IPTEK</td>
<th>2</th>
<th><input type="text" name="nilai_1" placeholder="Masukkan Nilai Anda" required></th>
<th><?php hasil_1($hasil_1); echo $hasil_1; ?></th>
</tr>
<tr>
<th>2.</th>
<td>Algoritma dan Struktur Data</td>
<th>3</th>
<th><input type="text" name="nilai_2" placeholder="Masukkan Nilai Anda" required></th>
<th><?php hasil_2($hasil_2); echo $hasil_2; ?></th>
</tr>
<tr>
<th>3.</th>
<td>Kecerdasan Buatan</td>
<th>3</th>
<th><input type="text" name="nilai_3" placeholder="Masukkan Nilai Anda" required></th>
<th><?php hasil_3($hasil_3); echo $hasil_3; ?></th>
</tr>
<tr>
<th>4.</th>
<td>Jaringan Komputer</td>
<th>4</th>
<th><input type="text" name="nilai_4" placeholder="Masukkan Nilai Anda" required></th>
<th><?php hasil_4($hasil_4); echo $hasil_4; ?></th>
</tr>
<tr>
<th>5.</th>
<td>Pemrograman Web</td>
<th>4</th>
<th><input type="text" name="nilai_5" placeholder="Masukkan Nilai Anda" required></th>
<th><?php hasil_5($hasil_5); echo $hasil_5; ?></th>
</tr>
<tr>
<th>6.</th>
<td>Technopreneurship</td>
<th>2</th>
<th><input type="text" name="nilai_6" placeholder="Masukkan Nilai Anda" required></th>
<th><?php hasil_6($hasil_6); echo $hasil_6; ?></th>
</tr>
<tr>
<th>7.</th>
<td>Sosisal Komputer</td>
<th>3</th>
<th><input type="text" name="nilai_7" placeholder="Masukkan Nilai Anda" required></th>
<th><?php hasil_7($hasil_7); echo $hasil_7; ?></th>
</tr>
<tr>
<th>8.</th>
<td>Metode Numerik</td>
<th>3</th>
<th><input type="text" name="nilai_8" placeholder="Masukkan Nilai Anda" required></th>
<th><?php hasil_8($hasil_8); echo $hasil_8; ?></th>
</tr>
<tr>
<th colspan="3"><input type="submit" name="konversi" value="Konversi"></th>
<?php
?>
<th colspan="2">Nilai IPK : <input type="text" name="hasil_ipk" value="<?php hasil_ipk($hasil_ipk); echo $hasil_ipk; ?>" placeholder="Nilai IPK"></th>
</tr>
</table>
</form>
</legend>
</div>
</body>
</html>
- Selesai silahkan simpan semua data dalam 1 folder dan berikan nama, misal "PHP_Dinamis" dan jgn lupa letakkan pada folder "C:\xampp\htdocs\"
- Buka browser dan buka program PHP yang sudah kita buat tadi "http://localhost/PHP_Dinamis/index.php" ... Taraaaaaaa ... Membuat Halaman PHP Dinamis Success gan :D
Memo:
- Kunci membuat halaman dinamis pada file "index.php"
- Jika ada yang kurang jelas silahkan ajukan pertanyaan dikomentar gan :D
- Untuk lebih jelasnya lagi langsung download programnya dibawah ini gan :) salam "ilmu-rizki" :D HeHeHe
0 comments:
Post a Comment