Nomor 2

Jawaban Soal No 2

1. Buat file Css pada dreamiver dan copykan code di bawah ini kemudian save dan beri nama link.css

html, body {

width: 100%;

height: 100%;

}


body {

font-family: sans-serif;

background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/retina_wood.png);

}


.button {

display: block;

font-size: 22px;

text-align: center;

line-height: 44px;

text-decoration: none;

color: white;

background-color: #CC4331;

border-radius: 4px;

position:relative;

top: 168px;

left: 116px;

width: 124px;

height: 44px;

margin-top: -22px;

margin-left: -62px;

text-shadow: 0 -1px -1px #af3a2a;

-moz-box-shadow: 0 4px 0 #af3a2a, 0 5px 5px 1px rgba(0, 0, 0, 0.4);

-webkit-box-shadow: 0 4px 0 #af3a2a, 0 5px 5px 1px rgba(0, 0, 0, 0.4);

box-shadow: 0 4px 0 #af3a2a, 0 5px 5px 1px rgba(0, 0, 0, 0.4);

-moz-transition: all 0.15s ease-in-out;

-o-transition: all 0.15s ease-in-out;

-webkit-transition: all 0.15s ease-in-out;

transition: all 0.15s ease-in-out;

}

.button:hover {

background-color: #d25544;

text-shadow: 0 -1px -1px #c4402f;

-moz-box-shadow: 0 4px 0 #c4402f, 0 5px 5px 1px rgba(0, 0, 0, 0.4);

-webkit-box-shadow: 0 4px 0 #c4402f, 0 5px 5px 1px rgba(0, 0, 0, 0.4);

box-shadow: 0 4px 0 #c4402f, 0 5px 5px 1px rgba(0, 0, 0, 0.4);

}

.button:active {

margin-top: -18px;

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

2. buat file css dengan nama style.css copykan kode di bawah ini

*{margin:0;padding:0;font-family:arial}

nav{width: 100%; background: #468; position: fixed; z-index: 999;}

.kiri{float:left; width: 500px;}.kiri a{font-weight:bold}

.kanan{float:right}

nav .kanan li{list-style:none;display:inline}

nav ul li a{font-size:17px;}

nav .kanan li a{display:inline-block;padding:18px;color:#fff;}

nav .kiri li a{display:inline-block;padding:18px;color:#fff;text-transform:uppercase}

a{text-decoration:none}

.sidebar{width:20%;background:#444;position:fixed;height:100%;padding-top:70px;overflow:hidden;float:left}

.sidebar ul li{list-style:none;}

.sidebar ul li a{padding:20px;width:100%;color:#ccc;display:block;transition:0.4s}

.sidebar ul li a:hover{background:#fff;color:#444}

.main{float:right;width:80%;}

.span{background:#3498db;color:#fff;padding:10px;display:inherit;margin-bottom:10px;}

.isimain{padding:70px 30px 30px 30px;}

input[type=text],select,textarea{width:400px;margin:10px 0 10px 0;padding:10px;resize:none}

input[type=date],select,textarea{width:400px;margin:10px 0 10px 0;padding:10px;resize:none}


textarea{height:200px;}

input[type=submit]{margin:10px 0 10px 0;outline:0;background:#2ecc71;color:#fff;border:0;padding:10px;cursor:pointer}

3. setelah itu copykan listing di bawah ini pada file index.php

<?php

error_reporting(~E_NOTICE); #ini digunakan utk menyembunyikan error khusus notice khususnya di index / beranda

$koneksi = new mysqli("localhost", "root", "", "db_kk0918");

if ($koneksi->connect_error)

{

echo "Gagal terhubung karena " . $koneksi->connect_error;

}

?>

<link rel="stylesheet" type="text/css" href="asset/link.css">

<link rel="stylesheet" type="text/css" href="asset/css.css">

<link rel="stylesheet" type="text/css" href="asset/model.css">


<link href="asset/style.css" rel="stylesheet" type="text/css" />

<head>

<link href="asset/style.css" rel="stylesheet" type="text/css" />

<style type="text/css">

td,th{border:1px solid #ccc;padding:10px;}

table{border-collapse:collapse;}

</style>


<table border="1" width="80%" align="center">

<tr align="center">

<td colspan="2"><img src="images/header.png" height="64px" width="100%"></td>

</tr>

<tr>

<td width="21%" height="450">

<h3>Menu</h3><br />

<a href="index.php" class="contoh-link" >Beranda</a><br><br />

<a href="index.php?hal=tentang.php" class="contoh-link">Tentang</a><br><br/>

<a href="index.php?hal=entry.php" class="contoh-link">Entry (C)</a><br><br/>

<a href="index.php?hal=tampil.php" class="contoh-link">Tampil (R)</a><br><br/>

<a href="index.php?hal=ubah.php" class="contoh-link">Ubah (U)</a><br><br/>

<a href="index.php?hal=hapus.php" class="contoh-link">Hapus (D)</a>

</td>

<td width="79%" align="justify" class="isimain"

<?php

$hal = $_GET["hal"]; #echo $_GET["hal"]; utk nampilin isi yang dari kita get/post dari index.php?hal=xxx.php

if (isset($hal) && $hal!="")

{ #kondisi ini akan dijalankan jika variabel $hal digunakan dan variabel $hal isinya bukan kosong

include($hal);

}

else

{

echo "<h1>Selamat Datang</h1><p>Saya datang dari Habang, jauh menuntut ilmu, biarlah yang penting saya bisa. Saya yakin pasti bisa <strong>#nekbisanekkawa</strong></p>";

}

?>

</td>

</tr>

<tr align="center">

<td colspan="2" background="images/akbar.png">footer</td>

</tr>

</table>

maka hasilnya akan seperti ini

4. kemudian copykan perintah ini pada file tampil.php

<link rel="stylesheet" type="text/css" href="asset/style.css">

<div class="main">

<div class="isimain">

<form method="POST">

<h1>Entry Data Barang</h1>

<table>

<tr>

<td>Kode Barang :</td>

<td><input type="text" name="txtKd"></td>

</tr>

<tr>

<td>Nama Barang :</td>

<td><input type="text" name="txtNm"></td>

</tr>

<tr>

<td>Harga :</td>

<td><input type="text" name="txtHr" onkeyup="this.value=this.value.replace(/[^\d]/,'')"></td>

</tr>

<tr>

<td colspan="2">

<input type="submit" value="Simpan" name="btnSimpan">

</td>

</tr>

</table>

</form>

</div>

</div>

<?php

if (isset($_POST["btnSimpan"]))

{

#tampung ke variabel yang isian dari form

$kode = $_POST["txtKd"];

$nama = $_POST["txtNm"];

$harga = $_POST["txtHr"];

#coba cek ada gak isinya

echo $kode . $nama . $harga;

$query = $koneksi->query("INSERT INTO `db_kk0918`.`barang` (`KdBrg`, `NmBrg`, `Harga`) VALUES ('$kode', '$nama', '$harga')");


} #akhir tombol simpan diklik

?>

dan hasilnya akan seperti ini