Rabu, 18 Oktober 2017

Tutorial membuat perintah DELETE (CRUD)

Assalamualaikum Warahmatullah Hiwabarakatuh



Gambar 1.1 Halaman Utama

Nah, Create udah, Read  juga udah, terus Update nya udah juga :).
Saat nya membuat perintah DELETE  atau hapus yaaa.
Berikut ini adalah tampilan sebelumnya, yaitu tampilan Read yang di halaman Home



Gambar 1.2 Halaman Home

**silahkan ikuti langkah-langkahnyaaa.

1. Buka kembali sublime text 3 nya, dan buka file nya di folder (..Praktikum/admin/pages), dan buat script seperti dibawah ini:
   
    # hapus.php
<?php
require_once('../conn/conn.php');
if(isset($_GET['id'])){
$sql = "DELETE FROM berita WHERE id_berita=".$_GET['id'];
$result = $conn->query($sql);
header('Location: index.php');
}
?>

2. Setelah dibuat script nya jangan lupa di save ya, dan selanjutnya klik icon "X" / hapus pada halaman Home yang tersedia seperti gambar di bawah ini



Gambar 1.3 Halaman Home icon

3. Setelah icon di klik maka akan langsung terhapus data berita nya seerti di bawah ini,,, sudah kosong.


Gambar 1.4 Halaman Home Kosong

**jeng jeng, nah itu lah hasilnya kosong sudah. 
**secara otomatis data yang semula terisi pada database PhpMyAdmin akan langsung ikut terhapus, nah ini dia gambarnya:


Gambar 1.5 Hapus Berhasil PhpMyAdmin


Selesai lah sudah Tutorial Membuat Perintah CREATE, READ, UPDATE, DELETE (CRUD) 
Semoga bermanfaat.


Assalamualaikum Wr. WB

Tutorial membuat perintah UPDATE (CRUD)

Assalamualaikum Warahmatullah Hiwabarakatuh


Gambar 1.1 Halaman Utama

Okeh, Create udah, Read udah.
Saat nya membuat perintah UPDATE atau Ubah yaaa.
Berikut ini adalah tampilan sebelumnya, yaitu tampilan Read yang di halaman Home



Gambar 1.2 Halaman Home

**silahkan ikuti langkah-langkahnyaaa.

1. Buka kembali sublime text 3 nya, dan buka file nya di folder (..Praktikum/admin/pages), dan buat script seperti dibawah ini:
   
    # ubah.php
<div class="col-md-6 col-md-offset-3">
<?php
$sql_edit ="SELECT * FROM berita WHERE id_berita=".$_GET['id'];
$r = $conn->query($sql_edit)->fetch_array();
//eksekusi edit
if(isset($_POST['edit'])){
//variabel yang diedit
$gambar = $_FILES["gambar"]["name"];
$judul = $_POST['judul'];
$isi = htmlentities($_POST['isi']);
//pengecekan dan unggah gambar
if(!empty($_FILES["gambar"]["name"])){
$target_dir = "gambar/";
$target_file = $target_dir . basename($_FILES["gambar"]["name"]);
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
$check = getimagesize($_FILES["gambar"]["tmp_name"]);
if($check !== false){
if(move_uploaded_file($_FILES["gambar"]["tmp_name"], $target_file)){
$sql = "UPDATE berita SET judul='".$judul."', isi ='".$isi."', gambar ='".$gambar."' WHERE id_berita ='".$_GET['id']."'";
$ok = 1;
}else{
echo '<div class="alert alert-danger">';
echo '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>';
echo "Maaf Terjadi Kesalahan Saat Mengunggah Gambar";
echo '</div>';
$ok = 0;
}
}else{
echo '<div class="alert alert-danger">';
echo '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>';
echo "File Yang Diunggah Bukan Gambar";
echo '</div>';
$ok = 0;
}
}else{
$sql = "UPDATE berita SET judul='".$judul."', isi ='".$isi."', gambar ='".$gambar."' WHERE id_berita ='".$_GET['id']."'";
$ok = 1; }
if($ok ==1){
$result = $conn->query($sql);
if($result === TRUE) {
echo '<div class="alert alert-success">';
echo '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>';
echo "Berita Telah Berhasil Di Ubah";
echo '</div>';
header('Location: index.php');
}else{
echo '<div class="alert alert-danger">';
echo '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>';
echo "Error: " .$sql . "<br>" . $conn->error;
echo '</div>';
}
}
}
?>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 thumbnail">
<h4 class="text-center">Ubah Berita</h4>
<form method="post" enctype="multipart/form-data">
<label>Gambar Berita :</label>
<input type="file" name="gambar" class="form-control"><hr>
<label>Judul Berita :</label>
<input type="text" name="judul" class="form-control" required value="<?php echo $r['judul'] ?>"><hr>
<label>Isi Berita :</label>
<textarea name="isi" class="form-control" required><?php echo $r['isi'] ?></textarea><hr>
<input type="submit" name="edit" class="btn btn-success" value="Simpan">
</form>
</div>
</div>

2. Setelah dibuat script nya jangan lupa di save ya, dan selanjutnya klik icon Ubah pada halaman Home yang tersedia seperti gambar di bawah ini


Gambar 1.3 Halaman Home icon


Gambar 1.4 Halaman Ubah

3. Setelah selesai melakukan pengubahan isi berita jangan lupa di klik button Simpannya, dan hasilnya akan berubah..

jeng jeng ini dia hasilnya :


Gambar 1.5 Ubah Berhasil

Nah karena sudah berhasil mengubah isi berita
Selesai sudah Tutorial Membuat Perintah Update
Silahkan lihat Tutorial Membuat Perintah DELETE selanjutnya
Semoga bermanfaat.


Assalamualaikum Wr. WB


Tutorial membuat perintah READ (CRUD)

Assalamualaikum Warahmatullah Hiwabarakatuh

**Postingan ini saya akan membahas perintah READ

Nah, karena pada postingan sebelumnya telah membahas pembuatan atau penambahan data pada database "berita". Maka sekarang saatnya kita melihat hasilnya yag telah kita tambahkan, dengan kata lainnya "READ"

Karena secara otomatis sudah dapat tampil di dalam PhpMyAdmin nya, seperti gambar di bawah ini :



Gambar 1.1 Tampilan PhpMyAdmin

berarti sudah dapat tampil juga di Web nya (kalau scriptnya tidak ada yang salah / error ya sobat)
**Nah ini Scriptnya, di ikutin bener bener ya, script nya sama dengan postingan sebelum nya Create .

     # 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>

Jeng-jeng ini lah hasilnya :


Gambar 1.2 Halaman Home Terisi


Oke, karena hasilnya sudah tampil di dalam halaman Home jadi, selesai sudah Tutorial membuat Perintah READ
Silahkan lihat Tutorial Membuat Perintah UPDATE selanjutnya
Semoga bermanfaat.

Assalamualaikum Wr. WB

Tutorial membuat perintah CREATE (CRUD)

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

Rabu, 11 Oktober 2017

Tutorial Membuat Login Sederhana dengan Php dan Mysql

Assalamualaikum Warohmatullah Hiwabarokatu
semangat pagi,,
postingan kali ini akan melanjutkan pembahasan sebelumnya yaitu Tutorial Koneksi PHP ke Database Mysql

Nah, karena pada postingan sebelumnya sudah melakukan koneksi php ke Database Mysql maka sekarang kita akan membuat Login sederhana dengan Php dan Mysql.

okeh, mari ikuti langkah-langkah berikut ini :

1. 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 nya, maka selanjutnya isi tabel "user" sesuai keinginan anda



Gambar 1.3 Insert tabel user


Gambar 1.4 Tampilan Tabel user

4. Tahap ini kita akan membuat folder "admin" yang berada di dalam folder "praktikum" dengan 3 file yang berisi script login  yang akan kita buat.




Gambar 1.5 Folder admin

5. Sekarang buka Sublime Text 3  untuk melakukan / pengisian Script

       # login.php   
<?php
session_start();
require_once('../conn/conn.php');
if(isset($_POST['login'])){
$unm = $_POST['user'];
$ups = $_POST['pass'];
$sql = "SELECT * FROM user WHERE username='".$unm."' AND password='".$ups."'";
$result = $conn->query($sql);
//success
if($result->num_rows > 0){
$_SESSION['user'] = $unm;
header('location: index.php');
}else{echo "GAGAL LOGIN";}
}
?>
<!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">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-4 col-lg-offset-4">
<div class="account-wall">
<h1 class="text-center login-title">HALAMAN ADMIN</h1>
<form class="form-signin" method="post">
<input type="text" name="user" class="form-control" placeholder="userame" required autofocus>
<input type="password" name="pass" class="form-control" placeholder="password" required>
<input type="submit" name="login" class="btn btn-primary btn-block" value="Masuk">
</form>
</div>
</div>
</div>
</div>
<script src="../asset/js/jquery.min.js"></script>
<script src="../asset/js/bootstrap.min.js"></script>
</body>
</html>

       # logout.php       
<?php
session_start();
//menghapus sessions
if(session_destroy()){
//langsung mengarah ke home index.php
header("location: ../index.php")
}
?>

       # index.php       
<?php
session_start(); // memulai session
if(empty($_SESSION['user'])){
echo '
<script language="javascript">
document.location="login.php";
</script>';
}else{
echo 'SELAMAT DATANG : ' .$_SESSION['user'];
}
?>

nb: pastikan untuk penamaan file menggunakan huruf kecil saja

6. Selanjutnya buka akses Halaman Admn di browser "localhost/praktikum/admin"

Gambar 1.6 Halaman Admin


Gambar 1.7 Tampilan login berhasil



Sekian Tutorial membuat Login sederhana dengan menggunakan Php dan Mysql.
Semoga bermanfaat.
Assalamualaikum Wr. WB