Online Course

TFT13 - Membuat Pengaturan Artikel di Halaman Admin (Latihan)

Membuat Pengaturan Artikel di Halaman Admin (Latihan)

Silahkan mencontoh bagain profil atau slider

Pertama, Buat folder di dalam folder images dengan nama artikel

Kedua, Buat tabel baru dengan nama tb_artikel

Struktur dari tabel seperti ini

tb-artikel

Ketiga, Edit file setting_navbar.php

Sehingga muncul tampilan menu seperti ini

menu

Link Publikasi Artikel = artikel.php

 

Keempat, Buat file Baru dengan nama artikel.php simpan di folder adminweb

Isi file seperti ini

<?php
//pemanggilan file metatag
include "setting_metatag.php";

//pemanggilan file navbar
include "setting_navbar.php";
?>

        <div id="page-wrapper">

            <div class="container-fluid">
                <!-- .row -->
                <!-- Page Heading  breadcumb-->
                <div class="row">
                    <div class="col-lg-12">
                        <h3>
                            Artikel
                        <a href="input_artikel.php" title="Input data"><button name="input" class="btn btn-primary pull-right"><i class="fa fa-plus fa-fw"></i> Tambah Artikel</button></a>

                        </h3>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Home
                            </li>
                            <li class="active">
                                <i class="fa fa-list"></i> Artikel
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <!-- .row -->
                <div class="row">

                <!-- .col lg 12 -->
                    <div class="col-lg-12">

                    <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
                        <div class="panel panel-success">

                        <!-- panel heading -->
                            <div class="panel-heading">
                            Daftar Artikel
                             </div>
                        <!-- /.panel heading -->

                        <!-- panel body -->
                            <div class="panel-body">
                    <!-- /.tabel responsive -->
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>Judul Artikel</th>
                                                <th>Penulis Artikel</th>
                                                <th>Isi Artikel</th>
                                                <th>Gambar Sampul</th>
                                                <th>Action</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                        <?php
                                        $pg = isset( $_GET['pg'] ) ? $_GET['pg'] : "";
                                        $batas = 10; /*batas tampilan setiap halaman*/
                                        if ( empty( $pg ) ) {
                                        $posisi = 0;
                                        $pg = 1;
                                        } else {
                                        $posisi = ( $pg - 1 ) * $batas;
                                        }
                                        /*Jika variabel $pg kosong maka akan menampilkan halaman pertama dengan batas baris 10*/

                                        $ambildata=mysqli_query($conect, "select*from tb_artikel order by id_artikel desc limit $posisi, $batas");
                                        $jumlah=mysqli_num_rows($ambildata);  /*mysql_num_rows untuk menghitung total baris di tabel databse*/
                                        if($jumlah == 0){  //jika tidak ada data
                                            ?>
                                        <tr>
                                            <td colspan="6">Tidak Terdapat Data</td>
                                        </tr>
                                        <?php
                                        }else{
                                        //jika ada data di tb_brand
                                        while($a=mysqli_fetch_array($ambildata)){ /*mysql_fetch array untuk mengambil data di setiap field di tabel databse*/
                                        ?>
                                        <tr>
                                            <td><?php echo $posisi=$posisi+1;?></td>
                                            <td><?php echo $a['judul_artikel'];?></td>
                                            <td><?php echo $a['penulis_artikel'];?></td>
                                            <td><?php echo substr(strip_tags($a['isi_artikel']),0,200);?></td>
                                            <td><img src="<?php echo $hostname;?>/assets/images/artikel/<?php echo $a['gambar_artikel'];?>" class="img-thumbnail" style="width:100px; height:70px;"></td>
                                            <td><a href="hapus_artikel.php?id_artikel=<?php echo $a['id_artikel'];?>" onclick="return confirm('Yakin akan meghapus data ini')" title="Hapus data"><button class="btn btn-danger btn-sm">Hapus</button></a>
                                            <a href="edit_artikel.php?id_artikel=<?php echo $a['id_artikel'];?>" title="Edit data"><button class="btn btn-info btn-sm">Edit</button> </a>
                                            </td>
                                        </tr>
                                        <?php
                                            }
                                        }
                                        ?>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.tabel responsive -->

                                <div class="text-center">
                                    <?php
                                //script paging, untuk menampikan setiap halaman
                                $jml_data = mysqli_num_rows(mysqli_query($conect, "select*from tb_artikel order by id_artikel desc"));
                                $JmlHalaman = ceil($jml_data/$batas); //ceil digunakan untuk pembulatan keatas
                                if($jml_data != 0){
                                if ( $pg > 1 ) {
                                $link = $pg-1;
                                $prev = "<a href='?pg=$link'><button name='prev' class='btn btn-primary btn-sm'>Prev</button></a> ";
                                } else {
                                $prev = "<button name='prev' class='btn btn-default btn-sm'>Prev </button> ";
                                }
                                $nmr = '';
                                for ( $i = 1; $i<= $JmlHalaman; $i++ ){

                                if ( $i == $pg ) {
                                $nmr .= "<button name='prev' class='btn btn-primary btn-sm'>$i</button> ";
                                } else {
                                $nmr .= "<a href='?pg=$i'><button name='prev' class='btn btn-default btn-sm'>$i</button></a> ";
                                }
                                }
                                if ( $pg < $JmlHalaman ) {
                                $link = $pg + 1;
                                $next = "<a href='?pg=$link'><button name='prev' class='btn btn-primary btn-sm'>Next</button></a> ";
                                } else {
                                $next = "<button name='prev' class='btn btn-default btn-sm'>Next</button> ";
                                }
                                echo $prev.$nmr.$next;
                                ?>
                                <br><br>
                                <span class="text-muted">Menampilkan <?php echo $jumlah; ?> dari <?php echo $jml_data; ?> Record </span>
                                <?php
                                }
                                ?>
                                </div>
                            </div>
                            <!-- /.panel body -->

                        </div>
                        <!-- /.panel -->

                    </div>
                    <!-- /.col lg 12-->

                </div>
                <!-- /.row -->


           </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

<?php
//pemanggilan file setting footer
include "setting_footer.php";

?>

Hasil dari file tersebut seperti ini

artikel

Kelima, Buat file Baru dengan nama input_artikel.php simpan di folder adminweb

isi file input_artikel.php seperti ini

<?php
//pemanggilan file metatag
include "setting_metatag.php";

//pemanggilan file navbar
include "setting_navbar.php";
?>

        <div id="page-wrapper">

            <div class="container-fluid">
                <!-- .row -->
                <!-- Page Heading  breadcumb-->
                <div class="row">
                    <div class="col-lg-12">
                        <h3>
                            Tambah Artikel
                        </h3>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Home
                            </li>
                            <li class="active">
                                <i class="fa fa-list"></i> Tambah Artikel
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <?php
                //variabel setiap input di form
                $nama=mysqli_real_escape_string($conect, $_POST['nama']);  //variabel dari name input nama
                $penulis=mysqli_real_escape_string($conect, $_POST['penulis']);     //variabel dari name input url
                $des=mysqli_real_escape_string($conect, $_POST['des']);     //variabel dari name input url

                $foto=$_FILES['foto']['tmp_name'];               //variabel dari temporary foto
                $nama_foto=$_FILES ['foto']['name'];             //variabel dari name input foto
                $type=$_FILES['foto']['type'];                   //variabel dari type foto
                $ukuran=$_FILES['foto']['size'];                 //variabel dari ukuran foto
                $files= strtolower(substr(strrchr($nama_foto,"."),1)); //variabel untuk extensi file

                //jika menekan tombol simpan
                if(isset($_POST['simpan'])){
                if(empty($nama)){  //jika field nama kosong
                $er_nama="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Judul </div>";
                }
                elseif(empty($penulis)){ //jika field url kosong
                $er_penulis="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Penulis</div>";
                }
                elseif(empty($des)){ //jika field url kosong
                $er_des="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Isi Artikel</div>";
                }
                elseif(empty($foto)){  //jika foto kosong
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Foto</div>";
                }
                elseif($files !="jpg" && $files !="png"){ //jika foto tidak berekstensi .jpg atau .png
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Format Gambar yang diizinkan hanya .jpg dan .png</div>";
                }
                elseif($ukuran > 2000000){   //jika ukuran lebih besar dari 2MB
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Maksimal ukuran gambar 2MB </div>";
                }
                elseif(strlen($nama_foto) > 100){  //jika jumlah karakter nama foto lebih dari 100 karakter
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Nama File Gambar Mak 100 karakter</div>";
                }
                else{ //jika semua field terpenuhi maka smpan gambar ke folder brand dan simpan data ke tb_brand
                move_uploaded_file($foto,"../assets/images/artikel/$nama_foto");
                $save=mysqli_query($conect, "INSERT INTO tb_artikel (id_artikel,judul_artikel,penulis_artikel,gambar_artikel,isi_artikel)values('','$nama','$penulis','$nama_foto','$des')");
                if($save){ //jika simpan berhasil
                echo "<script>alert('Data Berhasil Ditambahkan');document.location='artikel.php'</script>";
                }
                else{  //jika simpan gagal
                $error="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Error</div>";
                }

                }
                }
                ?>
                <!-- .row -->
                <div class="row">

                <!-- .col lg 12 -->
                    <div class="col-lg-12">

                    <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
                        <div class="panel panel-default">

                        <!-- panel heading -->
                            <div class="panel-heading">
                                <a href="artikel.php" title="Input data"><button name="input" class="btn btn-primary">Kembali</button></a>
                            </div>
                        <!-- /.panel heading -->

                        <!-- panel body -->
                            <div class="panel-body">
                            <form action="" method="post" enctype="multipart/form-data" role="form">
                            <?php echo $error;?>
                            <div class="form-group">
                                <label>Judul Artikel</label>
                                <input type="text" class="form-control" placeholder="Judul Artikel" name="nama" value="<?php echo $_POST['nama'];?>">
                            </div>
                            <?php echo $er_nama;?>
                            <div class="form-group">
                                <label>Penulis</label>
                                <input type="text" class="form-control" placeholder="Penulis" name="penulis" value="<?php echo $_POST['penulis'];?>">
                            </div>
                            <?php echo $er_penulis;?>
                            <div class="form-group">
                                <label>Isi Artikel</label>
                                <textarea class="form-control" placeholder="Isi Artikel" name="des" id="editor1"><?php echo $_POST['des'];?></textarea>
                            </div>
                            <?php echo $er_des;?>

                            <div class="form-group">
                                <label>Gambar Sampul</label>
                                <input type="file" class="form-control-file" name="foto" accept=".jpg, .png">
                            </div>
                            <?php echo $er_foto;?>

                            <button type="submit" name="simpan" class="btn btn-success">Simpan</button>

                            </form>
                                <!-- /.form -->
                          </div>
                            <!-- /.panel body -->

                        </div>
                        <!-- /.panel -->
                    </div>
                    <!-- /.col lg 12-->

                </div>
                <!-- /.row -->


           </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

<?php
//pemanggilan file setting footer
include "setting_footer.php";

?>

Hasil dari file tersebut seperti ini

input-artikel

Keenam, Buat file Baru dengan nama edit_artikel.php simpan di folder adminweb

isi file edit_artikel.php

<?php
//pemanggilan file metatag
include "setting_metatag.php";

//pemanggilan file navbar
include "setting_navbar.php";
?>

<div id="page-wrapper">

            <div class="container-fluid">
                <!-- Page Heading  breadcumb-->
                <div class="row">
                    <div class="col-lg-12">
                        <h3>
                            Ubah Artikel
                        </h3>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Home
                            </li>
                            <li class="active">
                                <i class="fa fa-list"></i> Ubah Artikel
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->

                <?php
                //ambil data dari tabel berdasarkan id
                $tampildata=mysqli_query($conect, "select*from tb_artikel where id_artikel='$_GET[id_artikel]'");
                $b=mysqli_fetch_array($tampildata);

                //variabel setiap input di form
                $judul=mysqli_real_escape_string($conect, $_POST['judul']);
                $des=mysqli_real_escape_string($conect, $_POST['deskripsi']);
                $penulis=mysqli_real_escape_string($conect, $_POST['penulis']);
                $lama=$_POST['foto_lama'];  //variabel foto lama

                $foto=$_FILES['foto']['tmp_name'];               //variabel dari temporary foto
                $nama_foto=$_FILES ['foto']['name'];             //variabel dari name input foto
                $type=$_FILES['foto']['type'];                   //variabel dari type foto
                $ukuran=$_FILES['foto']['size'];                 //variabel dari ukuran foto
                $files= strtolower(substr(strrchr($nama_foto,"."),1)); //variabel untuk extensi file

                //jika menekan tombol simpan
                if(isset($_POST['simpan'])){
                if(empty($judul)){
                $er_judul="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Judul </div>";
                }
                elseif(empty($penulis)){ //jika field url kosong
                $er_penulis="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Penulis</div>";
                }
                elseif(empty($des)){
                $er_des="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Masukan Deskripsi </div>";
                }
                else{
                if(empty($foto)){  //jika foto tidak diubah maka
                $save=mysqli_query($conect, "UPDATE tb_artikel set judul_artikel='$judul', penulis_artikel='$penulis', isi_artikel='$des' where id_artikel='$_GET[id_artikel]'");
                if($save){   //save
                echo " <script>alert('Data Berhasil Diubah');document.location='artikel.php'</script>";
                }
                else{    //gagal
                $error="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Error</div>";
                }
                }
                else{ //jika foto ikut diubah maka
                if($files !="jpg" && $files !="png"){ //jika foto tidak berekstensi .jpg atau .png
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Format Gambar yang diizinkan hanya .jpg dan .png</div>";
                }
                elseif($ukuran > 2000000){   //jika ukuran lebih besar dari 2MB
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Maksimal ukuran gambar 2MB </div>";
                }
                elseif(strlen($nama_foto) > 100){  //jika jumlah karakter nama foto lebih dari 100 karakter
                $er_foto="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Nama File Gambar Mak 100 karakter</div>";
                }
                else{ //jika semua field terpenuhi maka simpan gambar ke folder dan simpan data ke tabel

                unlink('../assets/images/artikel/'.$lama); //hapus foto lama di folder
                move_uploaded_file($foto,"../assets/images/artikel/$nama_foto");  //upload foto baru
                //simpan ke tabel database
                $save=mysqli_query($conect, "UPDATE tb_artikel set judul_artikel='$judul', penulis_artikel='$penulis', isi_artikel='$des', gambar_artikel='$nama_foto' where id_artikel='$_GET[id_artikel]'");
                if($save){ //jika simpan berhasil
                echo "<script>alert('Data Berhasil Ditambahkan');document.location='artikel.php'</script>";
                }
                else{  //jika simpan gagal
                $error="<div class='alert alert-warning alert-dismissable'>
                <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                <i class='fa fa-info-circle'></i> Error</div>";
                }
                }
                }

                }
                }
                ?>
                <!-- .row -->
                <div class="row">

                <!-- .col lg 12 -->
                    <div class="col-lg-12">

                    <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
                        <div class="panel panel-default">

                        <!-- panel heading -->
                            <div class="panel-heading">
                                <a href="artikel.php" title="Input data"><button name="input" class="btn btn-primary">Kembali</button></a>
                            </div>
                        <!-- /.panel heading -->

                        <!-- panel body -->
                        <div class="panel-body">
                        <form action="" method="post" enctype="multipart/form-data" role="form">
                            <?php echo $error;?>
                            <div class="form-group">
                                <label>Judul Profil</label>
                                <input type="text" class="form-control" placeholder="Judul Artikel" name="judul" value="<?php echo $b['judul_artikel'];?>" maxlength="100">
                            </div>
                            <?php echo $er_judul;?>
                            <div class="form-group">
                                <label>Penulis</label>
                                <input type="text" class="form-control" placeholder="Penulis" name="penulis" value="<?php echo $b['penulis_artikel'];?>">
                            </div>
                            <?php echo $er_penulis;?>

                            <div class="form-group">
                                <label>Deskripsi</label>
                                <textarea class="form-control" placeholder="Isi Artikel" name="deskripsi" id="editor1"><?php echo $b['isi_artikel'];?></textarea>
                            </div>
                            <?php echo $er_des;?>
                            <div class="form-group">
                                <label>Gambar Sampul</label>
                                <input type="file" class="form-control-file" name="foto" accept=".jpg, .png">
                                <input type="hidden" name="foto_lama" value="<?php echo $b['gambar_artikel'];?>">
                            </div>
                            <?php echo $er_foto;?>

                            <button type="submit" name="simpan" class="btn btn-success">Simpan</button>

                            </form>
                                <!-- /.form -->
                            </div>
                            <!-- /.panel body -->

                        </div>
                        <!-- /.panel -->
                    </div>
                    <!-- /.col lg 12-->

                </div>
                <!-- /.row -->


           </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

<?php
//pemanggilan file setting footer
include "setting_footer.php";

?>

Hasil dari file tersebut seperti ini

edit-artikel

Ketujuh, Buat file Baru dengan nama hapus_artikel.php simpan di folder adminweb

file hapus berfungsi menghapus data artikel

<?php
session_start();
//panggil koneksi
include "../assets/relasi/koneksi.php";

$id=$_GET['id_artikel'];  //dapatkan id

if(isset($id)){ //jika ada id
//ambil data di tabel berdasarkan id
$data=mysqli_fetch_array(mysqli_query($conect, "select * from tb_artikel where id_artikel='$id'"));

//hapus gambar di folder
unlink("../assets/images/artikel/$data[gambar_artikel]");

//hapus data di tabel
$hapus=mysqli_query($conect, "DELETE from tb_artikel where id_artikel='$id'");
//jika hapus berhasil
if($hapus){
    echo"<script>alert('Data Berhasil di Hapus');document.location='artikel.php'</script>";
}
else{ //jika gagal
    echo"<script>alert('Error Bos !!');document.location='artikel.php'</script>";
}

}
?>

Selesai.

 

Develindo Web | Tutorial Pemrograman Website