Membuat Tab Upload Foto Di dashboard admin

Assalamu'alaikum Wr.Wb
Salam Dan Bahagia

Pendahuluan
Pada kali ini saya akan melanjutkan project pembuatan galery foto, langsung saja dibaca dan dipahami serta dicoba :)

 Latar Belakang
Latar Belakang saya membuat aplikasi Ini adalah, ada bebrapa sekolah yang setelah ada kegiatan tidak mempublikasikan Hasil Kegiatan disekolah, maka dari itu saya membuat aplikasi ini Agar setiap kegiatan yang ada disekolah dokumentasi dapat dilihat oleh siswa maupun warga sekitar

Maksud Dan tujuan
Maksud Dan tujuan saya adalah Agar Setiap Ada kegiatan yang ada disekolah hasil dokumentasi dapat diupload dan siswa dapat melihat maupun warga sekitar

Jangka Waktu yang Dibutuhkan
1 Jam

alat dan bahan
Teks Editor
Browser

Langkah Kerja
pada kali ini saya akan membuat tombol atau tab upload foto di dashboard admin, nah kenapa saya membuat tab untuk upload foto in? Karena data foto yang diupload akan secara realtime sehingga si admin dapat mengupload Foto Kapanpun tanpa harus mengoprek script, Nah Langsung saja ke pembuatan
yang dibutuhkan dalam pembuatan ini adalah hanyalah input type file yang dapat dibuat menggunakan HTML
Untuk membuat ini saya meletakkan dibagian dashboard admin biodata siswa sehingga saya membuat satu lagi tab kosong yang nantinya digunakan untuk upload foto ke galery
nah sekarang buat file baru denga nama gambar.php setelah itu isi dengan Source code berikut :

<div class="wrapper">
<script type='text/javascript'>
function preview_image(event)
{
 var reader = new FileReader();
 reader.onload = function()
 {
  var output = document.getElementById('output_image');
  output.src = reader.result;
 }
 reader.readAsDataURL(event.target.files[0]);
}
</script>
<div class="hed">
<h2 class="user-title">Upload Foto</h2>
</div>
<div id="wrapper">
<form action="proses_upload.php" method="post" enctype="multipart/form-data">
<input class="butt" type="file" onchange="preview_image(event)" name="gambar">
<img id="output_image"/>
<input class="text" type="text" placeholder=" Tambah Judul . ." required="" name="judul">
<input class="qw" type="submit" value="Upload" name="up">
</form>
</div>
</div>
</body>
</html>

Setelah itu save dan tambahkan script css Agar tampilan lebih menarik Berikut script Css nya :

#wrapper {
width: 300px;
height: 400px;
position: relative;
overflow: hidden;
margin: auto;
top: 50px;
}
.butt {
position: relative;
left: 90px;
display: block;
}
#output_image {
width: 295px;
height: 200px;
position: relative;
top: 30px;
border:2px solid black;
}
.text {
position: absolute;
top: 270px;
width: 285px;
height: 25px;
padding-left: 10px;
}

Save dan lihat hasilnya maka akan seperti ini

Untuk membuat bagian frontend ini dibutuhkan pemahaman tentang HTML dan CSS


Sekian yang dapat saya sampikan mohon maaf bila ada kesalahan dalm penulisan maupun tatabahasa sekian dan terima kasih
Wassalamu'alaikum Wr.Wb