Rabu, 22 Januari 2014

Screenshot Tugas
File koneksi.php
<?php
$sambung = mysql_connect('localhost','root','') or die ('gagal koneksi');
$pilih_db= mysql_select_db('data_mhs') or die('Data Tidak Terpilih');
?>

File index.php
<!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>Tugas Web Dasar</title>
</head>

<body>
<?php include('koneksi.php'); ?>
<table width="800" border="1" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td colspan="4" align="center"><strong>LIHAT DATA MAHASISWA</strong> <a href="tambah.php">Tambah Data</a></td>
  </tr>
  <tr> 
    <td bgcolor="#0099CC">NIM</td>
    <td bgcolor="#0099CC">NAMA</td>
    <td bgcolor="#0099CC">JURUSAN</td>
    <td bgcolor="#0099CC">OPSI</td>
  </tr>
  <?php
   $code = "select * from kelas_e order by id DESC";
 $q = mysql_query($code);
 while($data=mysql_fetch_array($q)){
  ?>
  <tr>
    <td><?php echo $data['nim']; ?></td>
    <td><?php echo $data['nama']; ?></td>
    <td><?php echo $data['jurusan']; ?></td>
    <td>
     <a href="edit.php?id=<?php echo $data['id'];?>">Edit</a>
     <a onclick="return confirm('Hapus Data Ini?')" href="hapus.php?id=<?php echo $data['id'];?>">Hapus</a>
    </td>
  </tr>
 <?php } ?>
  <tr>
    <td colspan="4"><p>Oleh: Achmad Munawir Noviandri | Kelas E | L200130184</p>
    </td>
  </tr>
</table>
</body>
</html>

File tambah.php
<!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>Tambah Data</title>
</head>

<body>
<?php include('koneksi.php'); ?>
<form method="post">
<table width="800" border="1" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td colspan="2" align="center"><strong>TAMBAH DATA MAHASISWA</strong> <a href="index.php">kembali</a></td>
  </tr>
  <tr>
    <td>NIM</td>
    <td><input type="text" name="nim" required /></td>
  </tr>
  <tr>
    <td>NAMA</td>
    <td><input type="text" name="nama" required /></td>
  </tr>
  <tr>
    <td>JURUSAN</td>
    <td><input type="text" name="jurusan" required /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" name="tambah" value="Tambah Data" /> <input type="reset"  /></td>
  </tr>
</table>
</form>
<?php
 $nama = $_POST['nama'];
 $nim = $_POST['nim'];
 $jurusan = $_POST['jurusan'];
 $tambah = $_POST['tambah'];
 
 if($tambah){
  $code1 = "insert into kelas_e(nama,nim,jurusan) values('$nama','$nim','$jurusan')";
  $add = mysql_query($code1);
  echo("<script>alert('Data Berhasil di Tambah')</script>
   <meta http-equiv='refresh' content='0;url=index.php' />
  ");
  
 } // tutupnya if($tamnbah)
?>
</body>
</html>

File hapus.php
<?php 
 include('koneksi.php');
 $id = $_GET['id'];
 $code_hapus = "delete from kelas_e where id='$id'";
 $hapus = mysql_query($code_hapus);
  echo("<script>alert('Data Berhasil di Hapus')</script>
   <meta http-equiv='refresh' content='0;url=index.php' />
  ");
 
?>

File edit.php
<!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>Edit Data</title>
</head>

<body>
<?php include('koneksi.php');
 $id = $_GET['id'];
 $code_edit = "select * from kelas_e where id='$id'";
 $ed = mysql_query($code_edit);
 while($t=mysql_fetch_array($ed)){
 ?>
<form method="post">
<table width="800" border="1" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td colspan="2" align="center"><strong>TAMBAH DATA MAHASISWA</strong> <a href="index.php">kembali</a></td>
  </tr>
  <tr>
    <td>NIM</td>
    <td><input value="<?php echo $t['nim']; ?>"  type="text" name="nim" required /></td>
  </tr>
  <tr>
    <td>NAMA</td>
    <td><input value="<?php echo $t['nama']; ?>" type="text" name="nama" required /></td>
  </tr>
  <tr>
    <td>JURUSAN</td>
    <td><input value="<?php echo $t['jurusan']; ?>" type="text" name="jurusan" required /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" name="tambah" value="Edit Data" /> <input type="reset"  /></td>
  </tr>
</table>
</form>
<?php
} // tutup while
 $nama = $_POST['nama'];
 $nim = $_POST['nim'];
 $jurusan = $_POST['jurusan'];
 $tambah = $_POST['tambah'];
 
 if($tambah){
  $code1 = "update kelas_e set nim='$nim', nama='$nama', jurusan='$jurusan' where id='$id'";
  $edit = mysql_query($code1);
  echo("<script>alert('Edit Data Berhasil')</script>
   <meta http-equiv='refresh' content='0;url=index.php' />
  ");
  
 } // tutupnya if($tamnbah)
?>
</body>
</html>

Senin, 23 Desember 2013

Contoh screenshot:

Code CSS:
body{
 margin:0;
}
div#menu{
 background:#64abfb;
 width:100%;
 height:64px;
 position:fixed;
 top:0;
} 
li {
 list-style:none !important;
 color:#FFF;
 padding:10px;
 font-size:20px;
 text-decoration:none;
 }

li > a:after { content: ' »'; } /* Change this in order to change the Dropdown symbol */

li > a:only-child:after { content: ''; }  

li {
 list-style:none !important;
 color:#FFF;
 padding:10px;
 font-size:20px;
 text-decoration:none;
 }

nav ul {
 background-color:#64abfb;
 padding:0;
 margin:0;
 }

nav ul li {
 list-style: none; 
 line-height:44px;
 float:left;
 background-color:#64abfb;
 }

nav ul li a {
 color:#FFF;
 padding:10px;
 font-size:20px;
 text-decoration:none;
}

li a:hover {
 border-bottom:3px #FFF solid; 
 }
 
nav ul li ul { display:none; } /* Makes the Dropdown menu Hidden by default */

nav ul li:hover  ul  { /* Displayes the dropNav when Hovered over the nav item with the .drop class */
 z-index:99999;
 display:list-item !important;
 position:absolute;
 margin-top:5px;
 margin-left:-10px;
 }

nav ul li:hover  ul li {
 float:none;
 }
#tabelnya table{
 margin:20px;
 margin-top: 20px;
 border:#64abfb 1px solid;
}
#tabelnya table td,th{
 border-bottom: #64abfb 1px solid;
}
#tabelnya table tbody tr:nth-child(odd){
 background-color: #64abfb;
 color:#fff;
}
#tabelnya table tbody tr:hover{
 background-color:#0099FF;
 font-weight:bold;
}

#nama{
 position:absolute;
 left:800px;
 top: 100px;
 padding:10px;
 padding-top:0;
 width:300px;
 background-color:#FFF;
 border:#64abfb 2px solid;
}

Code HTML:
<body>
<div id="menu">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li>Drop Down
           <ul>
                <li><a href="#">Drop 1</a></li>
                <li><a href="#">Drop 2</a></li>
                <li><a href="#">Drop 3</a></li>
           </ul>
          </li>
            <li>About</li>
      </ul>
    </nav>
</div>
<div id="tabelnya">
  <div style="margin-top:100px; margin-left:40px;">
    <h3>Daftar Pemain Sepak Bola</h3>
  </div>
 <table width="757" border="0" cellspacing="0" cellpadding="5">
  <thead>
        <th width="73">No</th>
        <th width="310">Nama</th>
    <th width="161"><p>Negara</p>      </th>
  <td width="171"><div align="center"><strong>Club</strong></div>
  <tbody>
  <tr>
    <td><div align="center">1</div></td>
    <td><div align="center">Cristiano Ronaldo</div></td>
    <td><div align="center">Portugal</div></td>
    <td><div align="center">Real Madrid</div></td>
  </tr>
  <tr>
    <td><div align="center">2</div></td>
    <td> <div align="center">Mesut Ozil</div></td>
    <td> <div align="center">Jerman</div></td>
    <td><div align="center">Arsenal</div></td>
  </tr>
  <tr>
    <td><div align="center">3</div></td>
    <td><div align="center">Wayne Rooney</div></td>
    <td><div align="center">Inggris</div></td>
    <td><div align="center">Manchester United</div></td>
  </tr>
  <tr>
    <td><div align="center">4</div></td>
    <td><div align="center">Andrea Pirlo</div></td>
    <td><div align="center">Italy</div></td>
    <td><div align="center">Juventus</div></td>
  </tr>
  <tr>
    <td><div align="center">5</div></td>
    <td> <div align="center">Leonal Messi</div></td>
    <td><div align="center">Argentina</div></td>
    <td><div align="center">Barcelona</div></td>
  </tr>
  <tr>
    <td><div align="center">6</div></td>
    <td><div align="center">Adnan Januzaj</div></td>
    <td><div align="center">Belgia</div></td>
    <td><div align="center">Manchester United</div></td>
  </tr>
  </tbody>
</table>
</div>

<div id="nama">
 <p><h3> Nama </h3> 
 Achmad Munawir Noviandri
  <p><h3> NIM </h3> 
  L200130184
  <p><h3> Kelas </h3> E</p>
</div>
</body>