popupphp

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- pop up -->
<style>
#ubahartikel {
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,.7);
	top: 0;
	left: 0;
	z-index: 9999;
	visibility: hidden;
}
#ubahartikel .window {
	width: 75%;
	height: 75%;
	background: #fff;
	margin: 5% auto;
	overflow-y: auto;
	overflow-x: hidden;
}
#ubahartikel:target {
	visibility: visible;
}
</style>

<!-- Tampilin data -->
<div class='col-md-10' style='min-height:600px'>
         <div class='col-md-12' style='padding:10px; padding-left:0;padding-right:0;'>
             <table class="table table-bordered">
            <tr><th class="info">News & Promotion</th></tr>
        </table>
         </div>
            <table class='table table-bordered'>
               <tr>
                  <th class='info'>Judul</th>
                  <th class='info'>Kategori</th>
                  <th class='info'>Tanggal</th>
                  <th class='info'>Action</th>
               </tr>
<?php
  // Load file koneksi.php
  include('connection.php');
  function tanggal_indo($tanggal){
	$bulan = array (
		1 =>   'Januari',
		'Februari',
		'Maret',
		'April',
		'Mei',
		'Juni',
		'Juli',
		'Agustus',
		'September',
		'Oktober',
		'November',
		'Desember'
	);
	$pecahkan = explode('-', $tanggal);
	// variabel pecahkan 0 = tanggal
	// variabel pecahkan 1 = bulan
	// variabel pecahkan 2 = tahun
	return $pecahkan[2] . ' ' . $bulan[ (int)$pecahkan[1] ] . ' ' . $pecahkan[0];
    }
  $query = "SELECT * FROM artikel ORDER BY id DESC"; // Query untuk menampilkan semua data siswa
  $sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query dari variabel $query
  $row = mysqli_num_rows($sql); // Ambil jumlah data dari hasil eksekusi $sql
  if($row > 0){ // Jika jumlah data lebih dari 0 (Berarti jika data ada)
  while($data = mysqli_fetch_array($sql)){ // Ambil semua data dari hasil eksekusi $sql
  $tanggal = date('Y-m-d', strtotime($data['tanggal']));
    echo "<tr>
            <td>".$data['judul']."</td>
            <td valign='middle'>".$data['kategori']."</td>
            <td valign='middle'>" . tanggal_indo($tanggal, true) . "</td>
            <td>
            <a href='#ubahartikel' id='".$data['id']."' class='btn btn-info'>Lihat / Ubah</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href='admin-tool/aksi/hapusArtikel.php?id=".$data['id']."' class='btn btn-info' onclick='return confirm(this.value)'>Hapus</a>
            </td>
            </tr>";
    }
    }else{ // Jika data tidak ada
        echo "<tr><td colspan='4'><center>Tidak Ada News & Promotion</center></td></tr>";
    }
?>
            </table>
        </div>

<!-- Pop up Lihat / Ubah -->
   <div id='ubahartikel'>
        <div class='window'>
        <center><br>
        <p>
        <legend><font size='5' color='#FF91A4'><b>Ubah Artikel</b></font></legend>
        </p></center>
        <?php
        $id = $_GET['id'];
        ?>
        <form method='post' action='admin-tool/aksi/ubahArtikel.php?id=".$data['id']."' enctype='multipart/form-data'>
            <div class='row'>
                <div class='col-md-12'>
            <div class='row'>
                <div class='col-md-2'>
                    &nbsp;
                </div>
                <div class='col-md-10'>
                    <b>Judul&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
                    :
                    <input type='text' name='judul' value='<?php echo " $data['judul'] "; ?>' style='width:590px;' style='height:300px;'>
                    <br>
                </div>
            </div>
            <div class='row'>
                <div class='col-md-2'>
                    &nbsp;
                </div>
                <div class='col-md-3'>
                    <table>
                    <tr>
                    <br>
                    <td><b>Kategori&nbsp;</b></td>
                    <td>:&nbsp;</td>
                    <td><select name='kategori'>
                    <option value=''>--Pilih Kategori--</option>
                    <option value='News'>News</option>
                    <option value='Promotion'>Promotion</option>
                    </select></td>
                    </tr>
                    <tr><td>&nbsp;</td></tr>
                    <tr>
                    <td><b>Tanggal</b></td>
                    <td>:&nbsp;</td>
                    <td><input type='date' name='tanggal'></td>
                    </tr>
                    </table>
                </div>
                <div class='col-md-1'>
                    &nbsp;
                </div>
                <div class='col-md-4'>
                    <center><b>Foto Artikel :</b></center>
                <div class='file-upload'>
                    <div class='image-upload-wrap'>
                        <input class='file-upload-input' type='file' name='foto' onchange='readURL(this);' accept='.jpg,.jpeg,.png' />
                        <div class='drag-text'>
                            <br><br>
                            <p><b>Silakan Tarik dan Lepas File Gambar Anda Ke Sini!</b></p>
                            <p><i class='fa fa-upload'></i></p>
                            <p><div class='btn btn-info'>Atau Klik Pilih Gambar</div></p>
                            <br>
                        </div>
                    </div>
                    <div class='file-upload-content'>
                        <img class='file-upload-image' src='#' alt='your image' />
                        <div class='image-title-wrap'>
                            <button type='button' onclick='removeUpload()' class='remove-image'>Hapus <span class='image-title'>Uploaded Image</span></button>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                </div>
                <div class='col-md-2'>
                    &nbsp;
                </div>
            </div>
            </div>
            </div>
            <div class='row'>
                <div class='col-md-2'>
                    &nbsp;
                </div>
                <div class='col-md-10'>
                    <b>Isi Artikel :</b>
                    <br><br>
                </div>
            </div>
            <div class='row'>
                <div class='col-md-2'>
                    &nbsp;
                </div>
                <div class='col-md-8'>
                    <textarea name='isi'></textarea>
                    <br>
                </div>
                <div class='col-md-2'>
                    &nbsp;
                </div>
            </div>
            <br>
            <div class='row'>
            <div class='col-md-12'>
            <center>
            <input type='submit' class='btn btn-info' onclick='return confirm(this.value)' value='Simpan'>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href='#' class='btn btn-info'>Batal</a>
            <br><br>
            </center>
            </div>
            </div>
        </form>
        </div>
    </div>