Setelah kita membuat website secara offline, langkah selanjutnya adalah memindahkan file-file website dari komputer yang kita gunakan ke server hosting agar bisa di akses oleh publik (online). Cara yang umum digunakan untuk menghosting web adalah dengan menggunakan fasilitas File Manager yang disediakan oleh CPanel dan cara lainnya yang biasa digunakan adalah menggunakan software FTP.

Berikut ini adalah cara mengupload website menggunakan File Manager pada CPanel.

1.Login CPanel

Login Cpanel

Dashboard CPanel

2. Membuat Database
Pada halaman dashboard CPanel klik menu "MySQL Databases"

Menu MySQL Database

membuat database

Masukkan nama database kemudian klik tombol "Create Database"

database berhasil dibuat

Klik tombol "Go Back" untuk kembali kehalaman sebelumnya.

3. Membuat User
Setelah berhasil membuat database, langkah selanjutnya adalah membuat user (pengguna) untuk database yang baru saja kita buat.

membuat user database

Masukkan nama user dan password. Kombinasikan password yang Anda buat untuk pengamanan yang lebih baik.

user mysql berhasil dibuat

Jika pada layar Anda menampilkan pesan seperti gambar di atas, itu berarti user mysql telah berhasil dibuat. Selanjutnya klik tombol "Go Back" untuk kembali ke halaman sebelumnya.

4. Menambahkan User ke Database
Selanjutnya kita akan menambahkan user yang baru saja dibuat ke database yang sebelumnya telah berhasil dibuat.
Pada menu "Add User to Database" pilih user dah database yang telah kita buat, kemudian klik tombol "Add"

setting privileges user

Tentukan hak akses untuk user yang telah kita buat. Seperti hanya dibolehkan untuk mengeksekusi perintah "SELECT" atau "INSERT" namun supaya gampang silahkan tandai semuanya seperti gambar di atas. Klik tombol "Make Changes" untuk menyimpan setingan.

pemberian hak akses telah berhasil

5. Mengimport Database Menggunakan PhpMyAdmin
Pada langkah kelima ini kita akan mengimport database SQL menggunakan phpmyadmin.

Menu phpMyAdmin

Pada halaman dashboard / home CPanel klik menu phpMyAdmin.

import database

mengimport database telah berhasil

Bagi Anda yang masih belum paham cara mengimport dan mengeksport database silahkan baca postingan Saya sebelumnya tentang : Cara Membuat Database,  Cara Mengeksport Database dan Cara Mengimport Database.

6. Mengupload Website
Jika pada langkah sebelumnya kita sudah membuat user dan database langkah penting selanjutnya adalah mengupload file-file website. Supaya lebih gampang dan cepat, kompreslah file-file website Anda menggunakan zip.Ingat ya harus berkestensi .zip, karena kalau .rar tidak akan bisa di extract.

Pada halaman dashboard / home cpanel klik menu "File Manager"

Menu File Manager

upload file

Klik menu Upload yang berada di bagian atas.

Mengupload file berhasil

klik tombol "Browse" kemudian pilih file-file website Anda yang sebelumnya telah di kompres (ZIP)
Proses upload akan otomatis berjalan begitu Anda memilih file yang akan diupload.
Jika telah berhasil di upload silahkan klik link untuk kembali ke file manager.

File berhasil di upload akan tampil di daftar file pada file manager

7. Mengekstrak Website
File website yang telah kita upload, akan di extract menggunakan menu extract. Klik kanan pada file .zip kemudian pilih menu "Extract"

Extract data

8. Membuat Koneksi ke Database
Langkah terakhir yang harus kita lakukan adalah membuat koneksi ke database.  Hubungkan aplikasi Anda ke database yang telah kita buat pada langkah sebelumnya. Mungkin pengaturan untuk masing-masing website akan berbeda, namun pada prinsipnya adalah sama, yaitu menghubungkan aplikasi ke database.

Konfigurasi Website

Konfigurasi Website

Menyimpan konfigurasi database

Demikianlah 8 langkah mudah untuk menghostingkan website menggunakan file manager pada CPanel.

Membuat tampilan tabel lebih menarik dengan CSS3. Tampilan tabel pada website ataupun pada aplikasi berbasis web haruslah menarik, karena tabel akan menampilkan data. Bisa dibayangkan jikalau data yang di tampilkan berupa angka yang banyak. Kalau tampilan tabel tidak menarik, sudah pasti yang membaca data pun akan pusing melihatnya. Berikut ini adalah contoh css untuk tabel :

<!DOCTYPE html>
<html>
<head>
<title>Simple Table CSS3</title>
<style type="text/css">
body{width:500px;margin:0 auto;margin-top:25px;font-family:Verdana, Tahoma, Arial, "Trebuchet MS";font-size:13px;color:#666;padding:20px;}
.table{
    border:1px solid #ddd;
    border-collapse: collapse;
    border-spacing: 0px;
    width:100%;
    box-shadow: 0px 1px 2px #D1D1D1;
}
.table tr th{
    border:1px solid #ddd;
    padding:10px;
    vertical-align: baseline;
    padding: 21px 25px 22px;
    text-shadow: 1px 1px 0px #FFF;
    background: #ededed;
    box-shadow: 1px 1px 0px #FFF inset;
}
.table tr td{
    border:1px solid #eee;
    padding:7px 10px;
    margin:0px;
    line-height: 1.42857;
    vertical-align: top;
    border-left-width: 0px;
    border-bottom-width: 0px;
    box-shadow: 1px 1px 0px #FFF inset;
}
.table tr td:first-child{
    border-left: 0px none;
}
</style>
</head>
<body>
<h4>Simple Table CSS3</h4>
<table class="table">
    <thead>
        <tr><th width="10">No</th><th>Nama Lengkap</th><th>Alamat</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Muhammad Ridho</td><td>Payakumbuh</td></tr>
        <tr><td>2</td><td>Berik Hanizar</td><td>Solok</td></tr>
        <tr><td>3</td><td>Metri Daniel Kurnia</td><td>Sijunjung</td></tr>
        <tr><td>4</td><td>Erick Renato</td><td>Padang</td></tr>
        <tr><td>5</td><td>Bobi Arianto</td><td>Bukittinggi</td></tr>
        <tr><td>6</td><td>Wahyu Rahmadani</td><td>Painan</td></tr>
        <tr><td>7</td><td>Era Delfa Yesa</td><td>Padang</td></tr>
    </tbody>
</table>
</body>
</html> 

 

Salah satu kelebihan CSS3 adalah kita bisa membuat warna gradasi (gradient) hanya dengan menggunakan kode CSS. Warna gradient ini biasa digunakan untuk latar belakangn ( background ) website.

Selain itu, warna gradient juga biasa digunakan untuk background menu dan title di sidebar. Seperti pada blog ini, menggunakan gradient pada background menu dan title widget di sidebar.

Sayangnya penulisan kode css untuk membuat gradient ini berbeda untuk masing-masing browser. Jika warna gradient yang Anda buat bisa ditampilkan untuk browser Mozilla Firefox belum tentu bisa untuk browser-browser yang lainnya. tetapi itu tidaklah masalah, pada postingan ini Saya akan memberikan kode membuat background gradient dengan css untuk semua browse. Untuk membuat warna gradasi seperti gambar diatas, kita membutuhkan warna dengan kode #FFFFFF ( Putih ) dan #131B8A (Biru), sehingga kode pada CSS adalah seperti dibawah ini :

/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);

/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #131B8A));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #131B8A 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #131B8A 100%);
 

CRUD adalah singkatan dari Create - Read - Update - Delete. Bisa diartikan pada pembelajaran pemrograman ini kali ini kita akan belajar bagaimana cara menampilkan data, mengupdate, menghapus dan menyimpan data ke database menggunakan bahasa pemrogramanan PHP.

Contoh tutorial ini boleh dibilang cukup kompleks,karena pada contoh program kita juga akan membaca nilai dari parameter.

Untuk memulai membuat program berikut adalah file-file yang kita butuhkan :



Step 1: Membuat Database
Pertama kita harus membuat database terlebih dahulu. Disini saya mengumpamakan Anda sudah membuat database dengan nama crud-php. Setelah database dibuat, selanjutnya adalah membuat tabel. Berikut adalah dumping SQL untuk tabel karyawan :

CREATE TABLE IF NOT EXISTS `karyawan` (
  `id` int(11) NOT NULL,
  `nama_lengkap` char(50) NOT NULL,
  `jekel` char(15) NOT NULL,
  `tanggal_lahir` date NOT NULL,
  `tempat_lahir` varchar(50) NOT NULL,
  `no_telp` char(20) NOT NULL,
  `alamat` char(100) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

ALTER TABLE `karyawan` ADD PRIMARY KEY (`id`); 

Step 2 : Membuat Koneksi
Buat file baru dengan nama koneksi.php pada file koneksi.php ini kita akan menghubungkan aplikasi dengan database.
<?php
error_reporting(0);

$host = 'localhost';    // web host
$user = 'root';         // username
$pass = '';             // password database
$db   = 'crud-php';     // nama database
mysql_connect($host, $user, $pass) or die('Gagal menghubungkan ke webserver !') ;
mysql_select_db($db) or die('Database tidak ditemukan !');

?>

Step 3 : Membuat File Index
Pada file index.php ini lah kita akan menggunakan parameter untuk memanggil file lainnya. Berikut kode untuk index.php :
<?php
include 'koneksi.php'; /* koneksi ke database */

echo '
<!DOCTYPE html>
<html>
    <head>
        <title>CRUD - PHP Native</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="wrapper">
            <h1>Manajemen Data Karyawan</h1>';
            /* parameter */
            $opsi = isset($_GET['opsi']) ? $_GET['opsi'] : '';
          
            /* jika parameter "opsi" = "tambah" (Insert)*/
            if ( $opsi == 'tambah' )
            {
                include 'tambah.php';
                include 'view.php';
            }
            /* jika parameter "opsi" = "edit"  ( edit data)*/
            elseif ( $opsi == 'edit' )
            {
                include 'edit.php';
                include 'view.php';
            }
            /* default (browse) */
            else
            {
                include 'view.php';
            }
        echo '
        </div>
    </body>
</html>';
?>

Step 4 : Menampilkan Data (Read)
Buatlah file dengan nama view.php. Pada file ini kita akan menampilkan data dari database. Berikut ini adalah kode dari file view.php :
<?php
include 'koneksi.php';
$sql = mysql_query('SELECT * FROM karyawan ORDER BY nama_lengkap ASC');
echo '

<a href="index.php?opsi=tambah" class="btn biru"><strong>+</strong> Tambah Data</a>
<table>
<thead>
    <tr>
        <th>No</th>
        <th>Nama Lengkap</th>
        <th>Jekel</th>
        <th>Tanggal Lahir</th>
        <th>Telp</th>
        <th>Alamat</th>
        <th>Aksi</th>
    </tr>
</thead>
<tbody>';
$no = 1;
while($row = mysql_fetch_array($sql))
{
    echo '
    <tr>
        <td>'.$no++.'</td>
        <td>'.$row["nama_lengkap"].'</td>
        <td>'.$row["jekel"].'</td>
        <td>'.$row["tanggal_lahir"].'</td>
        <td>'.$row["no_telp"].'</td>
        <td>'.$row["alamat"].'</td>
        <td> <a href="index.php?opsi=edit&id='.$row['id'].'" class="btn hijau">Edit</a>
             <a href="aksi.php?opsi=delete&id='.$row['id'].'" class="btn merah" onClick=\'return confirm("Hapus data pada baris ini?")\' >Hapus</a></td>
    </tr>';
}
echo '
</tbody>
</table>';
?>
 

Step 5 : Menyimpan Data (Create / Insert)
Pada tahap kelima ini kita akan menyimpan data ke database menggunakan kueri "INSERT INTO", untuk itu kita membutuhkan sebuah form. Buatlah file dengan nama tambah.php
<?php

$day_now     = date('d');
$month_now   = date('m');
$year_now    = date('Y');
$lowestYear  = 1950;
$highestYear = date('Y');

echo '<p><a href="index.php">Home</a> > Tambah Data</p>

<fieldset>
    <legend>Form Tambah Data</legend>
    <form action="aksi.php?opsi=tambah&aksi=simpan" method="post">
        <div class="input_group"><label>Nama Lengkap</label><input type="text" class="txt_input" name="txt_nama"  required="required" /></div>
        <div class="input_group"><label>Jenis Kelamin</label>
            <select name="txt_jekel" required="required">
                <option value="" selected="selected">Pilih</option>
                <option value="Laki-laki">Laki-Laki</option>
                <option value="Perempuan">Perempuan</option>
            </select>
        </div>
        <div class="input_group"><label>Tempat Lahir</label><input type="text" class="txt_input" name="txt_tempat" required="required" /></div>
        <div class="input_group">
            <label>Tanggal Lahir</label>
            <select name="txt_tanggal" required="required">';
                echo '<option value="" selected="selected">Tanggal</option>';
                foreach(range(1, 31)as $day)
                {                  
                    echo "<option value='".$day."'>".$day."</option>";
                }
            echo '
            </select>
            <select name="txt_bulan"  required="required">';
                echo '<option value="" selected="selected">Bulan</option>';
                foreach(range(1, 12) as $month)
                {
                    echo "<option value='".$month."'>".$month."</option>";
                    
                }
            echo '
            </select>
            <select name="txt_tahun" required="required">';
                echo '<option value="" selected="selected">Tahun</option>';
                foreach (range($lowestYear, $highestYear) as $year)
                {                   
                    echo "<option value='".$year."'>".$year."</option>";
                }
            echo '
            </select>
        </div>
        <div class="input_group"><label>No Telp</label><input type="text" class="txt_input" name="txt_telp" required="required" /></div>
        <div class="input_group"><label>Alamat</label><input type="text" class="txt_input" name="txt_alamat" required="required" /></div>
        <div class="input_group"><label>&nbsp;</label>
            <button type="submit" class="btn hijau">Simpan</button>
            <button type="reset" class="btn kuning">Reset</button>
            <a href="index.php" class="btn merah"> Batal</a>
        </div>
    </form>
</fieldset>';
?>

Untuk bisa menyimpan ke database, kita akan menggunakan query SQL, untuk itu kita membuat file dengan nama aksi.php

Pada file aksi.php inilah kini akan mengeksekusi perintah-perintah SQL serperi INSERT, UPDATE dan DELETE. Berikut adalah kode untuk file aksi.php :

<?php
error_reporting(0);
include 'koneksi.php'; /* koneksi database */
echo '
<!DOCTYPE html>
<html>
<head>
    <title>CRUD - PHP Native</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>';


$opsi = isset($_GET['opsi']) ? $_GET['opsi'] : ''; /* mengambil nilai dari parameter "opsi" */
$aksi = isset($_GET['aksi']) ? $_GET['aksi'] : ''; /* mengambil nilai dari parameter "aksi" */

/* Menyimpan Data (Create / Insert)*/
if ($opsi == 'tambah' and $aksi=='simpan')
{
    $tanggal_lahir    = $_POST['txt_tahun'] .'-'. $_POST['txt_bulan'] .'-'. $_POST['txt_tanggal'];
    $nama_lengkap    = $_POST['txt_nama'];
    $jekel            = $_POST['txt_jekel'];
    $tempat_lahir    = $_POST['txt_tempat'];
    $no_telp        = $_POST['txt_telp'];
    $alamat            = $_POST['txt_alamat'];
  
   
    $query = mysql_query("INSERT INTO karyawan (`nama_lengkap`,`jekel`, `tanggal_lahir`, `tempat_lahir`, `no_telp`, `alamat`)
                          VALUES ('".$nama_lengkap."',
                                   '".$jekel."',
                                   '".$tanggal_lahir."',
                                   '".$tempat_lahir."',
                                   '".$no_telp."',
                                   '".$alamat."') ");
    if ($query)
    {
        echo '
        <div class="pesan pesan-sukses">
            <p style="text-align:center;">Data karyawan baru telah disimpan !<br /> <a href="index.php">Halaman Utama</a></p>
        </div>';
    }
    else
    {
        echo '
        <div class="pesan pesan-error">
            <p style="text-align:center;">Gagal menyimpan kedatabase ! <br /><a href="index.php?opsi=tambah">Ulangi </a></p>
        </div>';
    }
}
/* Update Data */
elseif ($opsi == 'edit' and $aksi=='update'){
    $id                = $_POST['txt_id'];
    $tanggal_lahir    = $_POST['txt_tahun'] .'-'. $_POST['txt_bulan'] .'-'. $_POST['txt_tanggal'];
    $nama_lengkap   = $_POST['txt_nama'];
    $jekel          = $_POST['txt_jekel'];
    $tempat_lahir   = $_POST['txt_tempat'];
    $no_telp        = $_POST['txt_telp'];
    $alamat         = $_POST['txt_alamat'];
    $query = mysql_query("UPDATE karyawan SET nama_lengkap     = '". $nama_lengkap ."',
                                              jekel            = '". $jekel ."',
                                              tanggal_lahir    = '". $tanggal_lahir ."',
                                              tempat_lahir    = '". $tempat_lahir ."',
                                              no_telp         = '". $no_telp ."',
                                              alamat         = '". $alamat ."'
                            WHERE id = '".mysql_escape_string($id)."'");
    if ($query)
    {
        echo '
        <div class="pesan pesan-sukses">
            <p style="text-align:center;">Data karyawan telah berhasil diupdate !<br /> <a href="index.php">Halaman Utama</a></p>
        </div>';
        header('location:index.php');
    }
    else
    {
        echo '
        <div class="pesan pesan-error">
            <p style="text-align:center;">Gagal menyimpan kedatabase ! Coba periksa lagi koneksi ke database Anda<br />
            <a href="index.php">Halaman Depan </a></p>
        </div>';
      
      
    }
}
/* Menghapus Data */
elseif ($opsi == 'delete' ){
    $id = isset($_GET['id']) ? $_GET['id'] : '';
    if (!empty($id))
    {
        $query = mysql_query("DELETE FROM karyawan WHERE id = '".$id."' ");
        if ($query)
        {
            echo '
            <div class="pesan pesan-sukses">
                <p style="text-align:center;">Data karyawan telah berhasil diupdate !<br /> <a href="index.php">Halaman Utama</a></p>
            </div>';
            header('location:index.php');
        }
        else
        {
            echo '
            <div class="pesan pesan-error">
                <p style="text-align:center;">Gagal menyimpan kedatabase ! Coba periksa lagi koneksi ke database Anda<br />
                <a href="index.php">Halaman Depan </a></p>
            </div>';
          
          
        }
    }
  
}
else{
    echo '
    <div class="pesan pesan-error">
        <p style="text-align:center;"><strong>404 Not Found !</strong><br />
        <a href="index.php">Halaman Depan </a></p>
    </div>';  
}
echo '
</body>
</html>';
?>

Step 7 : Edit Data (Update)
Pada file view.php kita sudah membuat tombol atau link untuk mengedit dan menghapus data. Untuk bisa mengedit data kita membutuhkan form edit. Sedahkan kalau untuk menghapus data (DELETE) kita bisa mengarakan lansung ke URL yang dituju. Berikut adalah kode untuk file edit.php :
<?php

$id= isset($_GET['id']) ? $_GET['id'] : '';
$query = mysql_query("SELECT * FROM karyawan WHERE id='".$id."'");
if($row=mysql_fetch_array($query)){

$tgl = substr($row['tanggal_lahir'],8,2);
$bln = substr($row['tanggal_lahir'],5,2);
$thn = substr($row['tanggal_lahir'],0,4);

$tahun_dimulai  = 1950;
$tahun_akhir = date('Y');

echo '<p><a href="index.php">Home</a> > Edit Data</p>

<fieldset>
    <legend>Edit Data</legend>
    <form action="aksi.php?opsi=edit&aksi=update" method="post">
        <input name="txt_id" type="hidden" value="'.$row['id'].'" />
        <div class="input_group"><label>Nama Lengkap</label><input type="text" class="txt_input" name="txt_nama"  required="required" value="'.$row["nama_lengkap"].'" /></div>
        <div class="input_group"><label>Jenis Kelamin</label>
            <select name="txt_jekel" required="required">
                <option value="">Pilih</option>';
                if ($row['jekel'] == 'Laki-laki')
                {
                    echo '
                    <option value="Laki-laki" selected="selected" >Laki-Laki</option>
                    <option value="Perempuan" >Perempuan</option>';
                }elseif ($row['jekel'] == 'Perempuan')
                {
                    echo '
                    <option value="Laki-laki" >Laki-Laki</option>
                    <option value="Perempuan" selected="selected" >Perempuan</option>';
                }else{
                    echo '
                    <option value="Laki-laki" >Laki-Laki</option>
                    <option value="Perempuan" >Perempuan</option>';
                }
              
            echo '
            </select>
        </div>
        <div class="input_group"><label>Tempat Lahir</label><input type="text" class="txt_input" name="txt_tempat" required="required" value="'.$row["tempat_lahir"].'" /></div>
        <div class="input_group">
            <label>Tanggal Lahir</label>
            <select name="txt_tanggal" style="width:100px;" required="required">';
                echo '<option value="">Tanggal</option>';   
                foreach(range(1, 31)as $tampil_hari)
                {   
                    if ($tampil_hari == $tgl ){
                        $selected = 'selected = "selected"';
                    }
                    else{
                        $selected = '';
                    }
                   
                    echo "<option value='".$tampil_hari."' ".$selected.">".$tampil_hari."</option>";
                }
            echo '
            </select>
            <select name="txt_bulan"  style="width:100px;" required="required">';
                echo '<option value="" >Bulan</option>';
                foreach(range(1, 12) as $tampil_bulan)
                {
                    if ($tampil_bulan == $bln ){
                        $selected = 'selected = "selected"';
                    }
                    else{
                        $selected = '';
                    }
                    echo "<option value='".$tampil_bulan."' ".$selected.">".$tampil_bulan."</option>";
                   
                }
            echo '
            </select>
            <select name="txt_tahun" style="width:100px;" required="required">';
                echo '<option value="" selected="selected">Tahun</option>';
                foreach (range($tahun_dimulai, $tahun_akhir) as $tampil_tahun)
                {                   
                    if ($tampil_tahun == $thn ){
                        $selected = 'selected = "selected"';
                    }
                    else{
                        $selected = '';
                    }
                    echo "<option value='".$tampil_tahun."' ".$selected.">".$tampil_tahun."</option>";
                }
            echo '
            </select>
        </div>
        <div class="input_group"><label>No Telp</label><input type="text" class="txt_input" name="txt_telp" required="required" value="'.$row["no_telp"].'" /></div>
        <div class="input_group"><label>Alamat</label><input type="text" class="txt_input" name="txt_alamat" required="required" value="'.$row["alamat"].'" /></div>
        <div class="input_group"><label>&nbsp;</label>
            <button type="submit" class="btn hijau">Update</button>
            <a href="index.php" class="btn merah"> Batal</a>
        </div>
    </form>
</fieldset>';
}
else
{
    echo '<div class="pesan pesan-error"> 404 Not Found ! </div>';
}
?>

Selanjutnya untuk memperindah tampilan kita sisipnya CSS berikut adalah kode dari file style.css :
body{
    font-family:Verdana, Tahoma, Arial, "Trebuchet MS";
    color: #555;
    font-size: 13px;
    background:#f1f1f1;
}
.wrapper{
    width:800px;border:1px solid transparent;
    margin:0 auto;
    background:#fff;
    border:1px solid #ddd;
    padding:10px;
}
a{text-decoration: none;color:#337AB7;}
a:hover{color:#23527C;text-decoration: underline;}
table{
    border:1px solid #ddd;
    border-collapse: collapse;
    border-spacing: 0px;
    width:100%;
}
table tr th{border:1px solid #ddd;padding:10px;}
table tr td{
    border:1px solid #ddd;padding:3px 5px;
    margin:0px;
    line-height: 1.42857;
    vertical-align: top;
    border-left-width: 0px;
    border-bottom-width: 0px;
}
table tr td:first-child{border-left: 0px none;}
.btn{
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    border: 1px solid transparent;
    border-radius: 0px;
    text-decoration: none;
}
.biru {
    background: #337AB7;
    border-color: #245580;
    color: #FFF;
}
.biru:hover, .biru:focus{
    background-color: #265A88;
    color: #FFF;
    text-decoration: none;
}
.hijau{
    background:#5CB85C;
    border-color: #4CAE4C;
    color: #FFF;
}
.hijau:hover, .hijau:focus{
    background:#419641;
    color: #FFF;
    text-decoration: none;
}
.merah{
    background:#D9534F;
    border-color: #B92C28;
    color:#fff;
}
.merah:hover, merah:focus{
    background: #C12E2A;
    color: #FFF;
    text-decoration: none;
}
.kuning{  
    background: #F0AD4E;
    border-color: #E38D13;
    color: #FFF;text-decoration: none;
}
.kuning:hover , kuning:focus{
    background:#EB9316;
    color: #FFF;text-decoration: none;
}
fieldset{padding:.35em .625em .75em;margin:0 2px 20px 2px;border:1px solid #ddd;}
.input_group{
    width:100%;
    padding:0 0 5px 0px;
    display: table;
}
.input_group label{
    width:150px;
    float: left;
    display: block;
    font-weight: bold;
}
.txt_input{border:1px solid #ccc;width:300px;float:left;padding:3px 5px;}

.pesan {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.pesan-sukses{
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.pesan-error{
    color: #a94442;
      background-color: #f2dede;
      border-color: #ebccd1;
}

Nah, demikianlah tutorial membuat CRUD (Create - Read - Update - Delete) menggunakan pemrograman PHP dan database MySQL. Semoga bisa membantu untuk sobat-sobat yang baru belajar pemrograman web.

Jika sobat bingung dengan penjelasan saya diatas, silahkan download dan praktekkan sendiri, dengan demikian mudah-mudahan tidak bingung lagi :)

Catatan : Tutorial ini hanya berlaku untuk PHP versi 5 kebawah. Untuk PHP 7, Insya Allah akan menyusul.