Rabu, 18 Oktober 2017

Tutorial membuat perintah CREATE (CRUD)

By    Oktober 18, 2017 // No comments
Assalamualaikum Warahmatullah Hiwabarakatuh
Kali ini saya akan membahas cara membuat perintah Create, Read, Update, Delete (CRUD)

 Postingan ini saya akan membahas perintah CREATE

1. Pertama-tama Pastikan Xampp telah Start.

Gambar 1.1 Start Xampp

 2. Membuka web browser dengan alamat “localhost/dashboard” dan membuka PypMyAdmin
  

Gambar 1.2 Tampilan Localhost/dashboard 

3. Karena pada postingan sebelumnya kita sudah membuat Database dan tabel user, maka selanjutnya kita buat tabel "berita" seperti gambar di bawah ini


 Gambar 1.3 Stucture tabel berita


Gambar 1.4 Tampilan Tabel berita

4. Tahap ini kita akan membuat folder "pages" yang berada di dalam folder "admin" dengan 4 file yang berisi script home.php -  tambah.php - ubah.php - hapus.php yang akan kita buat.

Gambar 1.5 Folder praktikum

5. Sekarang buka Sublime Text 3  untuk melakukan / pengisian Script 
 ** penamaan file menggunakan huruf kecil saja **

         # index.php   (../praktikum/index.php)
** index.php ini untuk halaman utamanya
<!DOCTYPE html>
<html>
<head>
<title>Praktikum</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="asset/css/bootstrap.min.css"><!-- CSS Boostrap -->
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="index.php">Praktikum Web</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Halaman Utama</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="admin/login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="asset/img/Pantai-Trikora-1.jpg" alt="">
                </a>
                <h3>
                    <a href="#">Pantai Trikora, Kemilau Wisata Pulau Bintan</a>
                </h3>
                <p>Pantai Trikora, salah satu tujuan wisata yang sayang jika dilewatkan kala Anda berkunjung ke Pulau Bintan. Bagimana tidak, pesona alam yang alami dengan pasir putih dan ombak yang landai, memberikan sensasi tersendiri saat liburan bersama keluarga dan kerabat. Pantai ini menjadi salah satu pantai terindah yang banyak dikunjungi wisatawan di Pulau Sumatra.</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="asset/img/objek-wisata-pantai-kuta-bali.jpg" alt="">
                </a>
                <h3>
                    <a href="#">Pantai Kuta Bali - Wisata Pantai Pasir Putih & Pemandangan Sunset</a>
                </h3>
                <p>Pantai Kuta salah satu destinasi wisata favorit di Bali. Bagi wisatawan yang berkunjung Ke Bali merasa belum lengkap liburnya jika tidak mampir ke Pantai Kuta yang lokasinya mudah ditempuh kendaraan</p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="asset/img/Gambar-Wisata-Raja-Ampat.jpg" alt="">
                </a>
                <h3>
                    <a href="#">Raja Ampat: The Ultimate Pristine Paradise in West Papua</a>
                </h3>
                <p>Raja Ampat Adalah Nama Yang Diberikan Untuk Kepulauan Ini Dan Berasal Dari Mitos Lokal. Empat Pulau Utama Yang Ditemukan Disini Adalah Waigeo, Misool, Salawati Dan Batanta. Terletak Di Bagian Ujung Barat Laut Dari Kepala Burung Peninsula Di Provinsi Papua Barat Di Indonesia, Raja Ampat Atau Empat Raja Merupakan Salah Satu Kepulauan Yang Sangat Eksotis Dan Mengagumkan Di Indonesia. Raja Ampat Papua Juga Menjadi Surga Bagi Pecinta Diving.</p>
            </div>
        </div>
        <!-- /.row -->
        <footer>
            <div class="row">
                <div class="col-lg-12" align="center">
                    <p>Copyright &copy; Your Website 2017</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>
</div>
<script src="asset/js/jquery.min.js"></script><!-- Latest compiled JavaScript -->
<script src="asset/js/bootstrap.min.js"></script><!-- jQuery library -->
</body>
</html>
       # index.php   (../praktikum/admin/index.php)
<?php
require('../conn/conn.php');
session_start(); // memulai session
if(empty($_SESSION['user'])){
echo '
<script language="javascript">
document.location="login.php";
</script>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Praktikum Web</title>
<link rel="stylesheet" href="asset/css/bootstrap.min.css"><!-- CSS Boostrap -->
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="index.php">Praktikum Web</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">Home</a></li>
        <li><a href="index.php?p=tambah">Tambah</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../index.php"><span class="glyphicon glyphicon-log-outn"></span> Logout</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
<?php
if(isset($_GET['p'])){
    include('pages/'.$_GET['p'].'.php');
}else{
    include('pages/home.php');
}
?>
</div>
<script src="asset/js/jquery.min.js"></script><!-- Latest compiled JavaScript -->
<script src="asset/js/bootstrap.min.js"></script><!-- jQuery library -->
<?php $conn->close() ?>
</body>
</html>

     # home.php   (../praktikum/admin/pages/home.php)
<div class="col-md-10 col-md-offset-1">
<?php
$sql = "SELECT * FROM berita";
$result = $conn->query($sql);
if($result->num_rows > 0) {
echo '<table class="table">
<tr>
<th> No </th>
<th> Judul </th>
<th> Isi </th>
<th> Gambar </th>
<th> Ubah </th>
<th> Hapus </th>
</tr>';
$x = 1;
while ($r = $result->fetch_array()) {
echo '<tr>
<td>'.$x++.'</td>
<td>'.$r['judul'].'</td>
<td>'.$r['isi'].'</td>
<td>'.$r['gambar'].'</td>
<td><a href="index.php?p=ubah&id='.$r['id_berita'].'"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a></td>
<td><a href="index.php?p=hapus&id='.$r['id_berita'].'"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
</tr>';
}
echo '</table>';
}else{
echo '<div class="alert alert-danger">';
echo '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>';
echo "Belum Ada Berita";
echo '</div>';
}
?>
</div>

6. Selanjutnya buka akses Halaman Index di browser "localhost/praktikum/index.php"  dan klik tombol "Login" 

Gambar 1.6 Halaman Utama


Gambar 1.7 Halaman Login

Gambar 1.8 Halaman Home

 7. Nah sekarang adalah tahap dimana kita akan melakukan pengisian atau menambah berita dengan meng-klik tombol "Tambah" seperti dibawah ini, dan lakukan penambahan berita.

Gambar 1.9 Halaman Tambah Submit

8. Dan secara otomatis akan langsung tersimpan di PhpMyAdmin

Gambar 1.10 Tampilan PhpMyAdmin

Jeng-jeng, sekian Tutorial Membuat Perintah CREATE.
Silahkan lihat Tutorial Membuat Perintah READ selanjutnya
Semoga bermanfaat.
Assalamualaikum Wr. WB

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)