Selasa, 14 Januari 2014

INSERT, UPDATE, DELETE DATA DENGAN PHP MYSQL


            Halo sobat-sobat blogger, kali ini sambil nunggu nasi mateng (lagi masak :D) saya akan berbagi tentang bagaimana cara memasukkan, mengedit, dan menghapus data dengan php dan mysql.
            Software yang dibutuhkan pada pembahasan kali ini adalah Notpad atau Notpad++ dan local server, untuk local server saya menggunakan Xampp dan tentunya yang gk boleh ketinggalan adalah web browser bisa Mozilla, google chrome, dll.
            Dalam pembahasan ini, kita akan mengolah data siswa yaitu nis, nama, dan alamat. OK, Langsung saja untuk langkah pertama membuat database di mysql, dengan menjalankan localhost/phpmyadmin di web browser kemudian klik menu sql seperti pada gambar yang dilingkari dengan warna merah berikut :

            Setelah itu akan muncul tampilan seperti berikut :

            Selanjutnya tuliskan query berikut dan setelah itu klik button go seperti yang dilingkari pada gambar di atas (pojok kanan bawah) untuk membuat database di mysql :
Create database db_siswa

Setelah itu klik menu database dan pilih database yang sudah dibuat tadi yaitu db_siswa seperti gambar berikut :



Setelah itu klik menu sql dan tuliskan query berikut untuk membuat table
Create table tb_siswa (
Nis int,
Nama varchar(50),
Alamat varchar(100),
Primary key(Nis)
);
Setelah itu klik go


Jika sudah maka tampilannya seperti berikut :


KONEKSI
Ok, untuk selanjutnya buat folder baru didalam C : Xampp/htdocs dengan nama siswa, setelah itu buka notpad, dan buat koneksi php ke mysql dengan source code dibawah ini
<?php
//variabel database
$nama_host="localhost";
$user_db="root";
$password_db="";
$nama_db="db_siswa";

//koneksi database
$koneksi=mysql_connect($nama_host,$user_db,$password_db);

//bila terkoneksi
if($koneksi){
//pilih database
mysql_select_db($nama_db);
}else{
echo "Database tidak terkoneksi";
}

?>
 Dan simpan folder siswa yang sudah di buat tadi dengan nama koneksi.php
INDEX
Setelah buat file baru dan tuliskan source code berikut, dan simpan dengan nama index.php di folder yang sama denga koneksi.php tadi,
<html>
      <head>
            <title>CRUD Dengan PHP </title>
            <style type="text/css">
            .labelfrm{
                  display:block;
                  font-size:small;
                  margin-top:5px;
            }
            .error{
                  font-size:small;
                  color:red;
            }
            </style>
      </head>
      <body>
      <table align="center">
            <h1>Data Mahasiswa</h1>
     
            <form action="input.php" method="post" id="frm">
                  <label for="nis" class="labelfrm">NIS : </label>
                  <input type="text" name="nis" id="nis" maxlength="10" class="required" size="15"/>
                  <label for="nama" class="labelfrm" >NAMA : </label>
                  <input type="text" name="nama" id="nama" size="30" class="required"/>
                  <label for="alamat" class="labelfrm">ALAMAT : </label>
                  <textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
                  <label for="submit" class="labelfrm">&nbsp;</label>
                  <input type="submit" name="input" value="Simpan" id="input"/>
                  <input type="reset" name="clear" value="clear" id="clear"/>
            </form>
      <br><br>
            <a href="data.php">Lihat Data</a>  
      </table>
</html>




Selanjutnya buat file baru dan tuliskan source code berikut lalu simpan dengan nama input.php di folder yang sama
<?php
      include "koneksi.php"; 
      $nis = $_POST['nis'];
      $nama = $_POST['nama'];
      $alamat = $_POST['alamat'];
      $simpan = mysql_query("Insert Into tb_siswa values('$nis','$nama','$alamat')");
      header('location:data.php');
?>

Menampilkan Data
Selanjutnya buat file baru dan tuliskan source code berikut lalu simpan dengan nama data.php
<?php
include "koneksi.php";
$query=mysql_query("select * from tb_siswa");
$jumlah=mysql_num_rows($query);
echo "Jumlah data ada : ".$jumlah;
?>
<table border="1" cellspacing="0">
<tr>
<th>Nis</th>
<th>Nama</th>
<th>ALamat</th>
<th>Aksi</th>
</tr>

<?php
while($row=mysql_fetch_array($query)){
?>
<tr>
<td><?php echo $row['nis'];?></td>
<td><?php echo $row['nama'];?></td>
<td><?php echo $row['alamat'];?></td>
<td>
<a href="delete.php?nis=<?php echo $row['nis']; ?>" onclick="return confirm('Apakah anda
yakin?')"><img src="button-cross.gif" width="20" height="20" /></a>
<a href="update.php?nis=<?php echo $row['nis']; ?>"><img src="button-edit.gif" width="20" height="20" /></a>
</td>
<?php
}
?>
</table><br />
<a href="index.php">Tambah Data</a><br><br>

HAPUS DATA
Selanjutnya buat file baru simpan dengan nama delete.php  untuk menghapus data dan tuliskan source code berikut :
<?php
include "koneksi.php";
$nis=$_GET['nis'];
$query=mysql_query("delete from tb_siswa where nis='$nis'");
if($query){
?><script language="javascript">document.location.href="data.php";</script><?php
}else{
echo "gagal hapus data";
}
?>

EDIT DATA
Untuk mengedit data tuliskan source code berikut dan simpat dengan nama update.php
<?php
include "koneksi.php";
$nis=$_GET['nis'];
$query=mysql_query("select * from tb_siswa where nis='$nis'");
?>
<form action="simpan.php" method="post">
<table border="1">
<?php
while($row=mysql_fetch_array($query)){
?>
<input type="hidden" name="nis" value="<?php echo $nis;?>"/>
<tr>
<td>Nama</td><td><input type="text" name="nama" value="<?php echo $row['nama'];?>" /></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea cols="20" rows="5" name="alamat"><?php echo $row['alamat'];?></textarea></td>
</tr>
<tr><td><input type="submit" value="Simpan" name="simpan" /></td>
</tr>
<?php
}
?>
</table>
</form>

Dan tuliskan source code berikut untuk memproses update data dan simpan dengan nama simpan.php
<?php
include "koneksi.php";
$id=$_POST['nis'];
$nama=$_POST['nama'];
$alamat=$_POST['alamat'];

$query=mysql_query("update tb_siswa set nama='$nama', alamat='$alamat' where nis='$id'");
if($query){
header ('location:data.php');
?> php
}else{
echo "Gagal update data";
echo mysql_error();
}
?>

Jika sudah jalankan web browser dan masukkan url : localhost/siswa/index.php

Jumat, 10 Januari 2014

Membuat Tampilan Website Dengan CSS



CSS ( Cascade Style Sheet ) berfungsi untuk mengatur tampilan dari website, mulai dari format text, sampai bentuk layout. Dengan menggunakan CSS akan mudah mengatur style elemen dalam suatu website.  
Pada pembahasan kali ini, saya akan membuat tampilan website kurang lebih seperti gambar dibawah ini :


 


 
              Untuk pembehasan kali ini software yang dibutuhkan Notpad, bisa Notpad bawaan windows, atau Notpad ++ (saran saya mending pake Notpad++ lebih enak), dan tentunya Web Browser (Mozilla, Google Chrome, dll). Kemudian buka Notpad dan masukkan source code dibawah ini lalu simpan dengan nama style.css






#bingkai{
       padding:2px;
       width:1024px;
       height:900px;
       margin:auto;
       background-color:#70747d;
      
}

#header{
       margin-top:10px;
       margin:auto;
       width:1000px;
       height:200px;
       padding:10px;
       background-color:#c8e1fb;
       padding:10px;
}

#menu{
       margin:auto;
       padding:0px;
       width:1000px;
       height:50px;
       padding:10px;
       background-color:#4598ee;
}

#kiri{
       margin-left:5px;
       margin-top:5px;
       padding:10px;
       width:220px;
       height:500px;
       float:left;
       background-color:#6aa096;
}

#kanan{
       margin-right:5px;
       margin-top:5px;
       padding:10px;
       width:750px;
       height:500px;
       float:right;
       background-color:#a3e673;
}

#footer{
       padding:2px;
       margin:auto;
       width:1024px;
       height:30px;
       background-color:#6a6372;
}

              Setelah itu buat file baru dan masukkan source code dibawah ini dan simpan dengan nama belajar_css.html (untuk nama file terserah, :D)
<html>
<title>Belajar CSS</title>
<head>
       <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
       <div id="bingkai">
            <div id="header"><h1 align="center"> HEADER </h1></div>
            <div id="menu"><h1 align="center"> MENU </h1></div>
            <div id="kiri">
                  <form action="login.php" method="post">
                        <table border="0" align="center">
                              <tr><td>USERNAME : <input type="text" name="username" ></td></tr>
                              <tr><td>PASSWORD : <input type="password" name="pass" ></td></tr>
                              <tr>
                                    <td>
                                          <input type="submit" value="LOGIN">
                                          <input type="reset" value="RESET">
                                    </td>
                              </tr>
                        </table><hr>
                  </form>
            </div>
            <div id="kanan"><h1 align="center"> KONTENT </h1></div>          
       </div>
       <div id="footer" align="center">Copyright &copy Ouznul 2014</div>
</body></html>



              Dan langkah terakhir adalah melihat tampilan dengan menjalankan file belajar_css.html di Web Browser, jika berhasil maka tampilannya akan seperti berikut ini :


             OK, Selamat mencoba dan semoga berhasil…!!!
Jangan pernah malas untuk mencoba
             Untuk tutorial-tutorial berikutnya di tunggu aja ya…