Hallo guys, disini saya akan memberikan sebuah ilmu yang bermanfaat bagi kita semua. Meskipun ilmu ini hanya sedikit akan tetapi semoga bermanfaat di kehidupan sehari - hari. Baiklah saya akan mmeberikan ilmu tentang "cara menginput data ke database mysql dengan menggunakan form html dan php. Harap disimak ilmu ini yaa, baik kita mulai :
Langkah 1 =
Aplikasi untuk membuat codingnya :
- Notepad++
- Sublime text
- Dreamweaver
Aplikasi untuk membuat databasenya :
- XAMPP
Jadi sebenarnya aplikasi itu hampir mirip cara kerjanya, cuman tampilannya saja berbeda. Saya akan membuat kodingannya menggunakan Notepad++.
Langkah 2 = Membuat database di mysql ( localhost/phpmyadmin)
Cara - caranya :
1. Aktifkan aplikasi XAMPP terlebih dahulu, klik start apache dan mysql
2. Buka alamat web localhost/phpmyadmin
3. klik create database, lalu Membuat Databasenya terlebih dahulu kasih nama database "input_data"
4. klik create table, lalu membuat table kasih nama "tabel_pesanan" dengan 6 kolom yang berisi (no.telp,nama pesanan,alamat pesanan,barang yang ingin dipesan,jumlah pesanan,keterangan pesanan barang)
1. Buka notepad++ untuk membuat kodingannya
- Yang pertama dibuat,beri nama "index1.php" pada notepad++ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<form name="form1" method="post" action="proses.php">
<div class="banner">
<div class="title" align="center"><a href ="layout.php">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</br></a></div>
</div>
<table width="371" border="0" align="center">
<td colspan="3" align="center"><h2>Pemesanan Alat</h2></td>
<tr>
<td width="70">No.telp</td>
<td width="3">:</td>
<td width="287"><label for="notelp"></label>
<input type="int" name="notelp" id="notelp"></td>
</tr>
<tr>
<td>Nama pemesan</td>
<td>:</td>
<td><label for="nama"></label>
<input type="text" name="nm" id="nm"></td>
</tr>
<tr>
<td>Alamat pemesan</td>
<td>:</td>
<td><label for="alm"></label>
<input type="text" name="alm" id="alm"></td>
</tr>
<tr>
<td>Barang yang ingin dipesan</td>
<td>:</td>
<td><input type="text" name="brng" id="brng"></td>
</tr>
<tr>
<td>Harga Barang</td>
<td>:</td>
<td><p>
<label>
<input type="radio" name="harga" value="1000000" id="harga_1" />Mesin Gergaji</label>
<label>
<input type="radio" name="harga" value="30000" id="harga_2" />Mesin Amplas</label>
<label>
<input type="radio" name="harga" value="350000" id="harga_3" />Mesin Serut</label>
<br></br>
<label>
<input type="radio" name="harga" value="500000" id="harga_4" />Mesin Bor</label>
<label>
<input type="radio" name="harga" value="600000" id="harga_5" />Mesin Las</label>
</p></td>
</tr>
<tr>
<td>Jumlah pesanan</td>
<td>:</td>
<td><input type="int" name="jml" id="jml"></td>
</tr>
<tr>
<td>Keterangan pesanan barang</td>
<td>:</td>
<td><label for="ket"></label>
<textarea name="ket" id="ket" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="button" id="button" value="Proses">
<input type="reset" name="button2" id="button2" value="Reset"></td>
</tr>
</table>
</form>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>- Yang Kedua buat file dengan nama"koneksi.php" :
<?php
mysql_connect("localhost","root","");
mysql_select_db("input_data");
?>
- Yang ketiga buat file dengan nama "proses.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="banner">
<div class="title" align="center"><a href ="layout.php">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</br></a></div>
</div>
<?php
$notelp=$_POST['notelp'];
$nm=$_POST['nm'];
$alm=$_POST['alm'];
$brng=$_POST['brng'];
$harga =$_POST['harga'];
$jml=$_POST['jml'];
$total =$harga * $jml ;
$ket=$_POST['ket'];
include"koneksi.php";
$query = "INSERT INTO tabel_pesanan values('$notelp','$nm','$alm','$brng','$harga','$jml','$total','$ket')";
$result = mysql_query($query) or die('GAGAL MENYIMPAN DATA <meta http-equiv=refresh content=1;url=index1.php>' );
//echo "DATA BERHASIL DISIMPAN";
//echo "<meta http-equiv=refresh content=1;url=index.php>";
?>
<form id="form1" name="form1" method="post" action="">
<table width="440" border="0" align="center">
<td colspan="13" align="center">Data Pemesanan</td>
<tr>
<td width="114"> </td>
<td width="11"> </td>
<td width="293"> </td>
</tr>
<tr>
<td>No.telp</td>
<td>:</td>
<td> <?php echo "$notelp"; ?></td>
</tr>
<tr>
<td>Nama pemesanan</td>
<td>:</td>
<td> <?php echo "$nm"; ?></td>
</tr>
<tr>
<td>Alamat pemesanan</td>
<td>:</td>
<td> <?php echo "$alm"; ?></td>
</tr>
<tr>
<td>Barang yang dipesan</td>
<td>:</td>
<td> <?php echo "$brng"; ?></td>
</tr>
<tr>
<td>Harga Barang</td>
<td>:</td>
<td> <?php echo "$harga"; ?></td>
</tr>
<tr>
<td>Jumlah Pesanan</td>
<td>:</td>
<td> <?php echo "$jml"; ?></td>
</tr>
<tr>
<td>Total Harga</td>
<td>:</td>
<td> <?php echo "$total"; ?></td>
</tr>
<tr>
<td>Keterangan pesanan</td>
<td>:</td>
<td> <?php echo "$ket"; ?></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><a href="laporan.php">Bukti Laporan</a></td>
</tr>
</table>
</form>
</body>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</html>
- Yang keempat buat file dengan nama "layout.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="title" align="center">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href="layout.php">Beranda</a></li>
<li><a href="produk.php">Produk</a></li>
<li><a href="kontak.php">Kontak</a></li>
</ul>
</div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<br>Hallo Netijen</br>
<br>Disini Toko Mesin Angger hanya terdapat 5 produk yang bisa di pesan, yaitu :</br>
<ul>
<li>Mesin Amplas</li>
<li>Mesin Gergaji</li>
<li>Mesin Bor</li>
<li>Mesin Serut</li>
<li>Mesin Las</li>
</ul>
<br>Jika Ingin melihat spesifikasi produknya dan memesannya silahkan klik menu produk !!!</br>
<div class="isi-content">
<img src="gambar_mesin.jpg" width="200%" height="350px">
</div>
</div>
</div>
</div>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</div>
</body>
</html>
<pre><code class="language-markup">
- Yang kelima buat file dengan nama "produk.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="title" align="center">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href="layout.php">Beranda</a></li>
<li><a href="produk.php">Produk</a></li>
<li><a href="kontak.php">Kontak</a></li>
</ul>
</div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<div class="isi-content">
<img src="mesin_amplas.jpg" alt="" width="100%" height="170px">
<div class="text-content"><a href ="mesin_amplas.php">Mesin Amplas</a><br>(Rp. 250.000)</br></div>
</div>
<div class="isi-content">
<img src="mesin_bor.jpg" alt="" width="100%" height="170px">
<div class="text-content"><a href ="mesin_bor.php">Mesin Bor</a><br>(Rp. 500.000)</br></div>
</div>
<div class="isi-content">
<img src="mesin_las.jpg" alt="" width="100%" height="170px">
<div class="text-content"><a href ="mesin_las.php">Mesin Las</a><br>(Rp. 600.000)</br></div>
</div>
<div class="isi-content">
<img src="mesin_serut.jpg" alt="" width="100%" height="170px">
<div class="text-content"><a href ="mesin_serut.php">Mesin Serut</a><br>(Rp. 350.000)</br></div>
</div>
<div class="isi-content">
<img src="mesin_gergaji.jpg" alt="" width="100%" height="170px">
<div class="text-content"><a href ="mesin_gergaji.php">Mesin Gergaji</a><br>(Rp. 1.000.000)</br></div>
</div>
</div>
</div>
</div>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</div>
</body>
</html>
<pre><code class="language-markup">
- Yang keenam buat file dengan nama "kontak.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="title">TOKO MESIN ANGGER</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href="layout.php">Beranda</a></li>
<li><a href="produk.php">Produk</a></li>
<li><a href="kontak.php">Kontak</a></li>
</ul>
</div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<br>Jika sahabat-sahabat sekalian ingin menghubungi kami, maka berikut beberapa informasi kontak dari kami yang dapat dihubungi :</br>
<ul>
<li>No.Handphone / Whatsapp : (08561324831).</li>
<li>Email : (anggersetiawan52@gmail.com)</li>
<li>Akun Instagram : (bagol_gareng).</li>
</ul>
</div>
</div>
</div>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</div>
</body>
</html>
<pre><code class="language-markup">
- Yang ketujuh buat file dengan nama "mesin_amplas.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="title" align="center">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href="layout.php">Beranda</a></li>
<li><a href="produk.php">Produk</a></li>
<li><a href="kontak.php">Kontak</a></li>
</ul>
</div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<h2 align="center">Mesin Amplas</h2>
<br><img src="mesin_amplas.jpg"width="30%" height="150px"></br>
<br>Deskripsi: </br>
<br>Mesin amplas merk makita yang bertenaga untuk menghaluskan permukaan kayu dan besi. Menggunakan motor berdaya listrik 520 Watt mampu menghasilkan getaran yang tidak dapat diatur pada 10000 per menit. Ukuran pad mesin ini 114 x 234mm dan menggunakan kertas amplas berukuran 114 x 280mm. Mesin amplas ini cocok untuk digunakan pada semua pekerjaan kayu dan besi seperti pembuatan furniture, pintu, konstruksi, dan lain-lain.</br>
<ul>
<li>Voltase : 220V/50Hz </li>
<li>Daya Listrik : 520 watt</li>
<li>Garansi : 2 Tahun</li>
<li>Status barang : Tersedia</li>
<li>Harga : Rp.250.000</li>
</ul>
<br><a href="index1.php">MULAI PESAN</a></br>
</div>
</div>
</div>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</div>
</body>
</html>
<pre><code class="language-markup">
- Yang kedelapan buat file dengan nama "mesin_bor.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="title" align="center">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href="layout.php">Beranda</a></li>
<li><a href="produk.php">Produk</a></li>
<li><a href="kontak.php">Kontak</a></li>
</ul>
</div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<h2 align="center">Mesin Bor</h2>
<br><img src="mesin_bor.jpg"width="30%" height="150px"></br>
<br>Deskripsi: </br>
<br>Mesin bor Merk Modern berdaya listrik 550 Watt dengan kecepatan tanpa beban 0-2600 Rpm. Mesin ini memiliki fitur pengatur kecepatan dan putaran 2 arah. Dengan bentuknya yang kompak dan tidak terlalu berat, dan dilengkapi beberapa aksesoris tambahan mata bor dan lainnya. Mesin bor ini dapat membantu Anda dalam memperbaiki rumah atau kantor Anda.</br>
<ul>
<li>Voltase : 220V/50Hz </li>
<li>Daya Listrik : 550 watt</li>
<li>Garansi : 1 Bulan (service)</li>
<li>Status barang : Tersedia</li>
<li>Harga : Rp.500.000</li>
</ul>
<br><a href="index1.php">MULAI PESAN</a></br>
</div>
</div>
</div>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</div>
</body>
</html>
<pre><code class="language-markup">
- Yang kesembilan buat file dengan nama "mesin_gergaji.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="title" align="center">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href="layout.php">Beranda</a></li>
<li><a href="produk.php">Produk</a></li>
<li><a href="kontak.php">Kontak</a></li>
</ul>
</div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<h2 align="center">Mesin Gergaji</h2>
<br><img src="mesin_gergaji.jpg"width="30%" height="150px"></br>
<br>Deskripsi: </br>
<br>Mesin Gergaji Kayu Merk Makita cocok digunakan untuk penggunaan profesional berat, konstruksi atau pekerjaan renovasi rumah. Mesin ini merupakan gergaji kayu circular paling hemat listrik dengan menggunakan motor berdaya listrik 800 Watt dan tetap menghasilkan putaran mesin 4000 rpm. Mesin ini mampu memotong kayu ketebalan maksimal 55mm dapat dimiringkan hingga 45 derajat dengan menggunakan mata potong berukuran maksimal 160mm.</br>
<ul>
<li>Voltase : 220V/50Hz </li>
<li>Daya Listrik : 800 Watt</li>
<li>Garansi : 1 Tahun</li>
<li>Status barang : Tersedia</li>
<li>Harga : Rp.1.000.000</li>
</ul>
<br><a href="index1.php">MULAI PESAN</a></br>
</div>
</div>
</div>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</div>
</body>
</html>
<pre><code class="language-markup">
- Yang kesepuluh buat file dengan nama "mesin_las.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="title" align="center">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href="layout.php">Beranda</a></li>
<li><a href="produk.php">Produk</a></li>
<li><a href="kontak.php">Kontak</a></li>
</ul>
</div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<h2 align="center">Mesin Las</h2>
<br><img src="mesin_las.jpg"width="30%" height="150px"></br>
<br>Deskripsi: </br>
<br>Mesin las merk Rhino yang irit listrik dan tangguh. Pernah diujicoba mengelas 20 batang kawat las 2.6 mm tanpa henti, tanpa mengurangi kemampuan mesin, dan hasil las yang baik.</br>
<ul>
<li>Voltase : 220V/50Hz </li>
<li>Daya Listrik : 900 - 1300 Watt</li>
<li>Garansi : 1 Tahun</li>
<li>Kelengkapan : Pemegang Elektroda, Earth Clamp, Kabel Las </li>
<li>Status barang : Tersedia</li>
<li>Harga : Rp.600.000</li>
</ul>
<br><a href="index1.php">MULAI PESAN</a></br>
</div>
</div>
</div>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</div>
</body>
</html>
<pre><code class="language-markup">
- Yang kesebelas buat file dengan nama "mesin_serut.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="title" align="center">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href="layout.php">Beranda</a></li>
<li><a href="produk.php">Produk</a></li>
<li><a href="kontak.php">Kontak</a></li>
</ul>
</div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<h2 align="center">Mesin Serut</h2>
<br><img src="mesin_serut.jpg"width="30%" height="150px"></br>
<br>Deskripsi: </br>
<br>Mesin Serut atau ketam merk Makita ini yang berfungsi untuk meratakan atau menyerut permukaan kayu. Masih diproduksi oleh pabrik Makita di Jepang, mesin ini memiliki daya listrik 450 Watt dan kecepatan tanpa beban 16000 rpm. Lebar permukaan yang dapat diratakan 82mm hingga kedalaman 1mm, selain itu mesin ini memiliki panjang hingga 290mm. Mesin yang ringkas dan bertenaga cocok untuk semua pekerjaan berat untuk konstruksi, pembuatan pintu dan furniture, hobby, dan lain-lain.</br>
<ul>
<li>Voltase : 220V/50Hz </li>
<li>Daya Listrik : 450 Watt</li>
<li>Garansi : 2 Tahun</li>
<li>Status barang : Tersedia</li>
<li>Harga : Rp.350.000</li>
</ul>
<br><a href="index1.php">MULAI PESAN</a></br>
</div>
</div>
</div>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
</div>
</body>
</html>
<pre><code class="language-markup">
- Yang keduabelas buat file dengan nama "laporan.php" :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toko Mesin Angger</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="banner">
<div class="title" align="center"><a href ="layout.php">TOKO MESIN ANGGER<br>"Mesin Kayu Serba Ada"</br></a></div>
</div>
<form name="form1" method="post" action="">
<table align="center" border="1">
<tr>
<th>No</th>
<th>No.telp</th>
<th>Nama pemesan</th>
<th>Alamat pemesan</th>
<th>Barang yang ingin dipesan</th>
<th>Harga Barang</th>
<th>jumlah pesanan</th>
<th>Total Harga</th>
<th>keterangan pesanan barang</th>
</tr>
<tr>
<?php
include 'koneksi.php';
$no = 0;
$sql = "SELECT * FROM tabel_pesanan ORDER BY 'notelp' ASC";
$jalan = mysql_query($sql) or die ('GAGAL');
while ($rows = mysql_fetch_array($jalan)) {
$no++;
echo '
<tr>
<td>'.$no.'</td>
<td>'.$rows['no.telp'].'</td>
<td>'.$rows['nama pemesan'].'</td>
<td>'.$rows['alamat pemesan'].'</td>
<td>'.$rows['barang yang ingin dipesan'].'</td>
<td>'.$rows['Harga Barang'].'</td>
<td>'.$rows['jumlah pesanan'].'</td>
<td>'.$rows['Total Harga'].'</td>
<td>'.$rows['keterangan pesanan barang'].'</td>
</tr>';
}
?>
</tr>
</table>
<h2 align="center">Terima Kasih sudah Memesan</h2>
<h2 align="center">Untuk Paketnya tidak perlu bayar ongkir alias GRATIS</h2>
</form>
<div class="footer">Design by @ANGGER_SETIAWAN_1603015098</div>
- Yang ketiga belas buat file dengan nama "style.css" :
body{
padding: 0;
margin: 0;
}
.container{
width: 1000px;
height:780px;
margin: 0 auto;
}
.banner{
width: 100%;
height: 120px;
background: #019875;
}
.title{
margin:44px 20px 0 0;
font-size: 36px;
text-shadow: 1px 3px 5px red;
color: #fff;
float: center;
}
.content{
width: 100%;
height: 450px;
}
.iklan{
width: 800px;
border-bottom:3px solid #019875;
float: left;
padding: 3px 0;
}
.content-kiri{
width: 200px;
height: 615px;
float: left;
background: #eee;
}
.content-kanan{
width: 200px;
height: 450px;
float: left;
background: #eee;
}
.content-tengah{
width: 800px;
height: 615px;
float: left;
background: #eee;
}
.isi-content{
width: 200px;
height: 220px;
margin:10px 30px;
float: left;
}
.text-content{
text-align: center;
margin: 2px 0;
color: #019875;
font-weight: bold;
}
.number{
width: 300px;
height: 20px;
margin:0 auto;
color:#019875;
}
.number1{
float: left;
border: 1px solid #019875;
padding: 10px 20px;
}
.footer{
width: 1500px;
padding: 20px 0;
background: #019875;
float: center;
text-align: center;
color: #fff;
}
.navigation ul {
list-style-type: none;
margin: 0;
margin-left: -40px;
}
.navigation ul a {
text-decoration: none;
color: #fff;
}
.navigation ul li {
padding:5px;
background: #019875;
border: 1px solid #fff;
}
.navigation ul li:hover {
background: #26A65B;
}
.navigation li ul {
display:none;
position:absolute;
}
.navigation li:hover ul{
display:block;
width: 200px;
margin-top:-25px;
margin-left:155px;
}
.sub{
display: none !important;
}
.navigation ul li ul li:hover .sub{
display: block !important;
}
2. Setelah Membuat kodingannya, lalu jangan lupa di save di dalam folder xampp/htdocs/"terserah nama folder kalian".
Langkah 4 = Jalankan hasilnya
1. Jalankan hasilnya dengan membuka alamat webnya localhost/inputdata/"file kodingannya"
2. setelah itu jika masih ada kesalahan, maka di betulkan kodingannya, kalo sudah berhasil, maka akan keliatan hasilnya.
SCREENSHOOT HASIL
Sekian atas perhatiannya untuk memahami ilmu ini, saya ucapkan terima kasih
Jika ingin mendownload file script kodingannya : Download Disini
Dan Lebih Lengkapnya kalo ingin belajar lagi buka website ini : W3Schools.com
