Saturday, July 6, 2013

Cara Membuat Layout pada html.css


Dalam membuat layout web/blog, hal yang sangat penting untuk diperhatikan adalah tema web/blog itu sendiri. Sehingga kita bisa menyesuaikan tema dan tampilannya. Secara umum index sebuah web terdiri dari : wrapper (isi keseluruhan), header, menu, sidebar, content , dan footer. Berikut contoh layout sebuah web/blog.


Selanjutnya berikut script HTML dan CSS nya:


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /><title>Layout WEB/BLOG</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--------------- #header --------------->
 <div id="header">
 <h1>Header</h1>
 </div>
<!--------------- #menu --------------->
 <div id="menu">
 <ul>
 <li><a href="index.php">Beranda</a></li>
 <li><a href="#">Profil</a></li>
 <li><a href="#">Kontak</a></li>
 <li><a href="#">Galeri Foto</a></li>
 </ul>
 </div>
<!--------------- #sidebar --------------->
 <div id="sidebar">
 <div class="previous">Sidebar</div>
 </div>
<!--------------- #content --------------->
 <div id="content">
 <img src="image/esdua.png" width="144" height="144" />
 <br />Bagian ini silakan isi dengan posing anda. Web/blog yang
dinamis selalu menyisipkan kode PHP pada bagian ini, agar
data-data dapat dengan mudah untuk diubah dan diperbanyak.
 </div>
<!--------------- #footer --------------->
 <div id="footer">
 Copyright &copy; 2012 by: <a href="#">esdua.web.id</a></div>
 </div>
</div>
</body>
</html> 



style.css

/* INDEX:
 1. WRAPPER
 2. HEADER
 3. MENU
 4. SIDEBAR
 5. CONTENT
 6. FOOTER
*/
body {
 background-color: #FFC;
 font-family: "calibri"
}
/* 1. WRAPPER
---------------------------------- */
#wrapper {
 width: 850px;
 margin: 15px auto;
 height: auto;
 padding: 20px;
 background-color: #FFF;
 box-shadow: 0px 0px 20px #F60;
 -moz-box-shadow:0px 0px 20px #F60;
 -webkit-box-shadow: 0px 0px 20px #F60;
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
}
/* 2. HEADER
---------------------------------- */
#header {
 width: 850px;
 height: 70px;
 border: 1px solid #CCC;
 margin-bottom: 7px;
 text-align: center;
}
/* 3. MENU
---------------------------------- */
#menu {
 width: 850px;
 height: 27px;
 margin-bottom: 7px;
 border: 1px solid #FFF;
 background-color: #CCC;
 font-size:17x;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
#menu ul{
 margin: 4px 4px 4px 7px;
 padding: 0px;
 list-style: none;
}
#menu li{
 margin: 10px;
 padding: 0px;
 display: inline;
}
#menu a{
 padding: 6px 6px 6px 6px;
 text-decoration: none;
}
#menu a:hover{
 padding: 5px 5px 2px 5px;
 text-decoration: none;
 color: #FFF;
 background: #FF9000;
}
/* 4. SIDEBAR
---------------------------------- */
#sidebar {
 float: right;
 width: 300px;
 height: 290px;
 border: 1px solid #CCC;
 margin-bottom: 7px;
 text-align: center;
}
/* 5. CONTENT
---------------------------------- */
#content {
 width: 538px;
 height: 290px;
 margin-bottom: 2px;
 border: 1px solid #CCC;
 margin-bottom: 7px;
}
#content img{
 border-radius: 17px;
 -moz-border-radius: 17px;
 -webkit-border-radius: 17px;
 box-shadow: 0px 0px 10px #CCC;
 -moz-box-shadow:0px 0px 10px #CCC;
 -webkit-box-shadow: 0px 0px 10px #CCC;
 padding: 2px; margin-right: 10px;
 float:left;
}
/* 6. FOOTER
---------------------------------- */
#footer {
 width: 850px;
 height: 20px;
 padding-top: 0px;
 border: 1px solid #CCC;
 text-align: center;
 background-color: #CCC;
 clear: both;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}





Berikut hasilnya:




 

Dalam membuat layout web/blog, hal yang sangat penting untuk diperhatikan adalah tema web/blog itu sendiri, sehingga kita bisa menyesuaikan tema dan tampilannya. Secara umum index sebuah web terdiri dari: wrapper (isi keseluruhan), header, menu, sidebar, content , dan footer. Berikut contoh layout sebuah web/blog.
- See more at: http://abtista-web.blogspot.com/2013/02/desain-layout-webblog-menarik-dengan.html#sthash.oxRwkSTJ.dpuf
Posted by at 4 comments:
Labels:

Cara membuat view, tambah, edit, hapus pada PHP



Pertama-tama buat database dengan nama mid. Kemudian di dalam database mid anda harus membuat sebuah tabel bernama nilai.
Adapun strukturnya adalah sebagai berikut: 

Nama field
Type
nis
Char(3)
nama
Varchar(30)
nilai
Decimal(6,2)


Nama file: index.php


<html> 

<head> 

<title>Menampilkan Data</title> 

</head> 

<body> 

<?php 

$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server."); 

mysql_select_db("mid") or die("Gagal membuka database."); 

?> 

<p><a href="tambah.php">Tambah data</a></p> 

<table border="1"> 

<tr align="center">

<td>NIS</td>

<td>Nama</td>

<td>Nilai</td>

<td>Action</td>

</tr>

<?php

$query = "select * from nilai";

$hasil = mysql_query($query, $koneksi) or die("Gagal melakukan query.");

while ($buff = mysql_fetch_array($hasil)) {

?>

<tr>

<td><?php echo $buff['nis']; ?></td>

<td><?php echo $buff['nama']; ?></td>

<td><?php echo $buff['nilai']; ?></td>

<td><a href="edit.php?nis=<?php echo $buff['nis']; ?>">Edit</a> |

<a href="hapus.php?nis=<?php echo $buff['nis']; ?>">Hapus</a></td>

</tr>

<?php

};

mysql_close($koneksi);

?>

</table>

</body>

</html> 

Nama file: tambah.php


<html>
<head>
<title>Menambah Data</title>

</head>
<body>
<form name="form1" method="post" action="tambah2.php">

<table border="1">

<tr>
<td>NIS</td>
<td>:</td>
<td><input name="nis" type="text" /></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input name="nama" type="text" /></td>
</tr>
<tr>
<td>Nilai</td>
<td>:</td>
<td><input name="nilai" type="text" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="submit" value="Simpan" /></td>
</tr>
</table>
</form>
<p>Batal menambah data. Kembali ke <a href="index.php">index.php</a></p>
</body>
</html> 


Nama file: tambah2.php


<html>

<head>
<title>Menambah Data</title>

</head>
<body>
<?php

$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server.");

mysql_select_db("mid") or die("Gagal membuka database.");

$nis = $_POST['nis'];

$nama = $_POST['nama'];

$nilai = $_POST['nilai'];

$query = mysql_query("insert into nilai values ('$nis', '$nama', '$nilai')");

mysql_close($koneksi);
?>

<p>Data sudah tersimpan. Silakan dicek di <a href="index.php">index.php</a></p>

</body>
</html>

Nama file: edit.php


<html>

<head>

<title>Mengedit Data</title>

</head>
<body>
<?php
$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server.");
mysql_select_db("mid") or die("Gagal membuka database.");
$nis = $_GET['nis'];
$query = "select * from nilai where nis='$nis'";
$hasil = mysql_query($query, $koneksi) or die("Gagal melakukan query.");
$buff = mysql_fetch_array($hasil);
mysql_close($koneksi);
?>
<form name="form1" method="post" action="edit2.php">
<input type="hidden" name="nis" value="<?php echo $buff['nis']; ?>" />
<table border="1">
<tr>
<td>NIS</td>
<td>:</td>
<td><?php echo $buff['nis']; ?></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input name="nama" type="text" value="<?php echo $buff['nama']; ?>" /></td>
</tr>
<tr>
<td>Nilai</td>
<td>:</td>
<td><input name="nilai" type="text" value="<?php echo $buff['nilai']; ?>" /></td>
</tr>
<tr>
<td colspan="3"><input type="submit" name="submit" value="Simpan" /></td>
</tr>
</table>
</form>
<p>Batal mengedit data. Kembali ke <a href="index.php">index.php</a></p>
</body>
</html>


Nama file: edit2.php


<html>

<head>

<title>Mengedit Data</title>

</head>

<body>

<?php

$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server.");

mysql_select_db("mid") or die("Gagal membuka database.");

$nis = $_POST['nis'];

$nama = $_POST['nama'];

$nilai = $_POST['nilai'];

$query = mysql_query("update nilai set nama='$nama', nilai='$nilai' where nis='$nis'");

mysql_close($koneksi);

?>

<p>Data sudah ter-update. Silakan dicek di <a href="index.php">index.php</a></p>

</body>

</html>

Nama file: hapus.php


<html>

<head>

<title>Menghapus Data</title>

</head>

<body>

<?php

$koneksi = mysql_connect("localhost", "root", "") or die("Gagal konek ke server.");

mysql_select_db("mid") or die("Gagal membuka database.");

$nis = $_GET['nis'];

mysql_query("delete from nilai where nis='$nis'") or die("Gagal menghapus data.");

mysql_close($koneksi);

?>

<p>Data telah dihapus. Silakan dicek di <a href="index.php">index.php</a></p>

</body>

</html>
 

 HASILNYA ::


NIS
NAMA
NILAI
ACTION
026
Shinta Dewanti
8.00
Edit | Hapus



 
 

Posted by at 5 comments:
Labels:
Subscribe to: Posts (Atom)