Showing posts with label pengantar web science. Show all posts
Showing posts with label pengantar web science. Show all posts

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)