Kali ini ilmu-rizki akan sedikit berbagi sedikit ilmu tentang bagaimana caranya membuat page-halaman PHP berbasis WEB yang dinamis. Saya menulis artikel ini terinspirasi saat saya membuat dropdown menu pada halaman web dan saya harus melinkkan semua halaman satu per satu, jika halaman ada 1 - 3 sih gpp, tpi klog halamannya ada 100 repot gan. HeHeHe :D
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
- 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
- Setelah itu buat folder dengan nama "Data" dan buat 3 file berikut : "home.php","Konversi_suhu.php","Konversi_nilai.php"
home.php
Konversi_suhu.php
Konversi_nilai.php
- 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
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
