Assalamualaikum Warahmatullah Hiwabarakatuh
Kali ini saya akan membahas cara membuat perintah CREATE
- Create
- Read
- Update
- Delete (CRUD)
Postingan ini saya akan membahas perintah CREATE
1. Pertama-tama Pastikan Xampp telah Start.
Gambar 1.
2. Membuka web browser dengan alamat “localhost/dashboard” dan membuka PypMyAdmin
Gambar 2.
3. Karena pada postingan sebelumnya kita sudah membuat Database dan tabel user, maka selanjutnya kita buat tabel "berita" seperti gambar di bawah ini
Gambar 3.1
Gambar 3.2
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 4.
5. Sekarang buka Sublime Text 3 untuk melakukan / pengisian Script
# index.php (../praktikum/index.php)
<!DOCTYPE html>
<html>
<head>
<title>Praktikume Nyong</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="#">Praktikum Bos</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar isi</a></li>
<li><a href="#">Beranda</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>
<style type="text/css">
.navbar-inverse {
background-color:#2be560 ;
font-size:18px;
border-style: none;
}
</style>
<
<div class="container">
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/Pai Tegal.jpg" alt="">
</a>
<h3>
<a href="#">Pantai Alam Indah Tegal - Menikmati Pasir Putih & Pemandangan Sunset </a>
</h3>
<p>Menghilangkan kepenatan setelah berkubang dengan rutinitas pekerjaan dengan mengunjungi tempat wisata yang satu ini layak menjadi pilihan berlibur di akhir pekan. Inilah dia tempat wisata Pantai Alam Indah di kawasan pantura Tegal.
Pantai Alam Indah ini persisnya berada di Jalan Bali Kelurahan Mintaragen, Kecamatan Tegal Timur, Tegal, Jawa Tengah.
Masyarakat Tegal lebih akrab menyebut lokasi wisata ini dengan menyebut kependekannya saja, yakni PAI (Pantai Alam Indah). Di obyek wisata pantai ini pengunjung bisa menikmati debur ombak dengan hamparan pasir yang cukup luas memanjang di bibir pantai.
Pengunjung juga bisa menikmati indahnya pantai dengan berkeliling sekitar pantai menggunakan perahu sewa yang disediakan di lokasi pantai..</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/guci.jpg" alt="">
</a>
<h3>
<a href="#">Puncak Guci - Pemandian Air Panas Alami </a>
</h3>
<p>Guci Indah adalah Objek wisata yang berada di Desa Guci Kecamatan Bumijawa Kabupaten Tegal. Memiliki luas 210 Ha, terletak di kaki Gunung Slamet bagian utara dengan ketinggian kurang lebih 1.050 meter. Dari Kota Slawi berjarak ± 30 km, sedangkan dari Kota Tegal berjarak tempuh sekitar 40 km ke arah selatan.
Air yang mengalir dari pancuran-pancuran di obyek wisata ini dipercaya bisa menyembuhkan penyakit seperti rematik, koreng serta penyakit kulit lainnya, khususnya Pemandian Pancuran 13 yang memang memiliki pancuran berjumlah tiga belas buah.
Ada sekitar 10 air terjun yang terdapat di daerah Guci. Di bagian atas pemandian umum pancuran 13, terdapat air terjun dengan air dingin bernama Air Terjun Jedor. Dinamai begitu karena dulu tempat di sekitar air terjun setinggi 15 meter itu adalah milik seorang Lurah yang bernama Lurah Jedor. Untuk berkeliling di sekitar obyek wisata dapat dilakukan dengan menyewa kuda dengan tarif sewa yang relatif murah.
Fasilitas yang tersedia antara lain penginapan (kelas melati sampai berbintang), wisata hutan (wana wisata), kolam renang air panas, lapangan tennis, lapangan sepak bola, dan bumi perkemahan.</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="asset/img/gua lawa.jpg" alt="">
</a>
<h3>
<a href="#">Goa Lawa atau Bukit Batu Agung</a>
</h3>
<p>Gua Lawa, sebuah bukit yang dihuni oleh puluhan ekor kelelawar yang berada di bukit di perbatasan Desa Harjawinangun dan Batuagung, Kecamatan Balapulang, Kabupaten Tegal. Tempat ini sudah sangat familiar bagi warga sekitar atau pelajar yang bersekolah di sekitar Banjaranyar, Margasari, dan sekitarnya. Seakan tempat ini menjadi tempat favorit bagi mereka untuk menghilangkan rasa jenuh sembari menyalurkan adrenalin.
Untuk menuju tempat ini, medan yang ditempuh cukup sulit. Level pendakian menengah jika kami boleh menyebutnya. Lain dengan Bukit Rangkok yang berada di sebelah timur lautnya, medannya cukup ekstrim, banyak batuan besar yang harus di daki. Bahkan di titik tertentu, ada pendakian dengan sudut kemiringan hingga 90 derajat. Sehingga kami sarankan untuk menggunakan sepatu khusus dan didampingi oleh teman yang sudah sering ke tempat ini.
Sama dengan Bukit Rangkok, pemandangan di atas bukit dengan ketinggian puncak 434 mdpl ini menawarkan view Gunung Slamet di sebelah selatan dan beberapa baris pegunungan dan hutan rimbun pada sisi lainnya. Kami sarankan untuk berhati-hati ketika berada di puncak, karena ada batu besar yang cukup difavoritkan namun untuk menjangkaunya, harus ekstra hati-hati. Sebagai info, di puncak bukit banyak terdapat batu-batu besar..</p>
</div>
</div>
<!-- /.row -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Nur Huda (JakwirCetem)</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</title>
<link rel="stylesheet" href="../asset/css/bootstrap.min.css">
</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</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-out"></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 type="../asset/js/jquery.min.js"></script><!-- Latest compiled JavaScript -->
<script type="../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">×</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 6.1.
Gambar 6.2.
Gambar 6.3
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 7
8. Dan secara otomatis akan langsung tersimpan di PhpMyAdmin
Gambar 8
Sekian tutorial membuat perintah CREAT,
Silahkan lihat Tutorial Membuat Perintah READ selanjutnya
Semoga bermanfaat.
