Pesan Utama

Blog ini saya buat untuk mempublikasikan hasil karya saya sebagai guru. Saya harap karya saya ini dapat membantu anda. Semoga pendidikan di Indonesia semakin maju, amin.

Klik disini !!!

MEMBUAT APLIKASI WEB SEDERHANA LAPORAN UNGGAH TUGAS ONLINE SISWA (KOLABORASI GOOGLE DRIVE)


Assalamulaikum..

Lama nih gak nulis-nulis, jadi kalau ada yang kurang pas, dimaafken saja ye 😋.
Mikir judul aja tadi lamaaa jadinya ðŸ˜‹.
Yang pasti tulisan ini perdana edisi #siagacovid19 hee..

Kali ini saya coba ceritakan salah satu cara sederhana saya melakukan rekapitulasi dan koreksi tugas siswa (jumlahnya ratusan guys ðŸ˜‹) di masa #learnfromhome. Cara ini saya pilih juga setelah beberapa hari sebelumnya mendapat cerita pengalaman dari dua orang rekan guru (nama dirahasiakan ya ðŸ˜‹) yang melakukan pengumpulan tugas siswa berupa file/foto/video lewat aplikasi sosial media Whatsapp, Facebook Massanger, Email, dan Telegram. Dari ceritanya ribet guys, harus cek satu-satu, bolak-balik antar media sosial, dicatat, apalagi media sosialnya sekaligus media konsultasi. Parah lagi media sosialnya gak cuma buat satu pekerjaan sebagai guru aja, plus jadi jualan online misalnya, apa gak merem melek tuh mata ngeceknya hee..😋. Saat ngasih rekapitulasi laporan ke siswa tentang siapa saja yang sudah mengumpulkan tugas juga timbul masalah, pasti ada yang terlewat (kalau gak malah banyak yang kelewat guys ðŸ˜‹), ya komplain lah yang merasa sudah ngumpul. Satu lagi nih, gara-gara siswanya ratusan, tugasnya lebih dari satu, file/foto/video yang dikirim sizenya gedhe-gedhe, masuk ke Whatsapp, secanggih apapun HP sang Guru, jamin HP nya “koma” ðŸ˜‹. Coba aja hitung misal satu video 100Mb x 100 siswa x 3 tugas = 30000Mb (30 GB guys ðŸ˜‹). Ukuran flashdisk sih keciiillll, tapi kalau urusan memori hp, nangis gak berdarah HP nya ðŸ˜‹.

Jadi sewaktu tiba saatnya saya mau mengumpulkan tugas bentuk video dari siswa, mikirlah diri ini bagaimana supaya gak ambyar ðŸ˜‹. Solusi pertama yang muncul adalah siswa upload ke form google yang saya sediakan, pikir-pikir google drive juga punya batasan, apalagi akun-akun google drive yang ada sudah full, bikin lagi? Malas ahh ðŸ˜‹. Solusi kedua siswa unggah ke google drive masing-masing lalu linknya saja dilaporkan ke form google, kayaknya ini yang aman, tapi guys, ribet pas mau konfirmasi file mana yang diterima, ditolak, atau dihapus, manual juga jadinya.

Solusi yang saya pilih akhirnya, memanfaatkan server website (domain dan hosting) yang sudah saya punya. Dengan sedikit script PHP sederhana, jadi deh form laporan tugas siswa, dimana siswa dapat melaporkan tugasnya. Video yang dilaporkan sudah di unggah ke akun google drive mereka masing-masing, jadi yg dipakai linknya saja, jadi tidak memakan ruang di server. Saya juga bisa langsung menonton/mengunduh video sekaligus langsung meng”klik” apakah tugas diterima atau ditolak. Siswa juga dapat memantau sendiri tugasnya, misal ditolak, baru konsultasi diarahkan ke media sosial Whatsapp ðŸ˜‹. Yang utama, saya gak ribet cek-cek media sosial, karena laporannya tercatat sendiri, waktu yang ada bisa buat hobi mancing hee..😋.

Oia sebelumnya, ada yang nanya, kenapa videonya gak diupload ke server aja langsung. Ora iso guys, hosting saya cuma 1 GB, sudah ada isinya lagi, gak sanggup kalau harus nerima serangan unggah video yang totalnya bisa pulahan GB ðŸ˜‹.

Dah ahh, pengantarnya cukup ya, cuss ke TKP..

Saya buat ada beberapa file utama (buatnya pakai notepad aja terus simpan dengan jenis file .php dan .css). File-file dibuat terpisah biar enak dipelajari tiap fungsinya yaitu :
1. index.php (script php tampilan siswa mengunggah video dan tabel rekapitulasi yang bisa dilihat siswa)
2. simpan.php (script php memproses form unggah video)
3. status.php (script php tampilan guru mengkoreksi laporan)
4. diterima.php (script php memproses jika laporan diterima guru)
5. ditolak.php (script php memproses jika laporan dihapus guru)
6. dihapus.php (script php memproses jika laporan ingin dihapus guru)
7. zzhg.css (script css untuk mempercantik sedikit tampilan webnya)
8. koneksi.php (script php untuk koneksi ke database server)
Selebihnya hanya file gambar/image pendukung yang disimpan di folder bernama img.

Nah, berikut gambaran isi file-file di atas.
index.php
<link rel="stylesheet" type="text/css" href="zzhg.css">
<center>
<table>
<th><h1>LAPORAN UNGGAH VIDEO PENDEK<br>MTK WAJIB COVID-2019 by HG</h1></th>
<tr><td><a href=''><img src="img/zzhg.jpeg" width='50' height='50' title="Halaman Depan"/></a>&nbsp&nbsp&nbsp&nbsp<a href='https://wa.me/6285249106725?text=Assalamualaikum' target='blank'><img src="img/zzhgwaadmin.jpg" width='50' height='50' title="Chat WA Admin"/></a>&nbsp&nbsp&nbsp&nbsp<img src="img/zzhgcovid19.png" height='50'/></td></tr>
<tr><td><i>Petunjuk :<br>Silahkan pilih kelas, tuliskan NISN & nama anda, pastekan link video pendek yang sudah diunggah ke google drive.<br>Kemudian klik Kirim Data. Pastikan link yang diberikan dapat digunakan untuk mengunduh video kembali.<br><br>Status : <b><i>Terkirim</i></b> (Laporan tercatat di sistem), <b><i>Diterima</i></b> (Laporan diterima, tugas selesai),<br><b><i>Ditolak</i></b> (Laporan ditolak karena nama & kelas tidak jelas atau video tidak bisa diunduh, hubungi admin untuk bisa upload ulang)</i></td></tr>
<form action="simpan.php" method="POST" name="aksiinput">
<tr><td><select name="kelas" size="1"><option><option>X IPA 1<option>X IPA 2<option>X IPA 3<option>X IPA 4</select>
&nbsp&nbsp&nbsp&nbsp <input type="text" name="id" size="5" placeholder='NISN...'>
&nbsp&nbsp&nbsp&nbsp <input type="text" name="nama" size="15" placeholder='Nama Lengkap...'>
&nbsp&nbsp&nbsp&nbsp <input type="text" name="link" size="25" placeholder='Link Video Pada Google Drive...'>
&nbsp&nbsp&nbsp&nbsp <input type="submit" name="Submit" value="Kirim Data"></td></tr>
<tr><td>
<table cellpadding="4" style="border-collapse:collapse;" border="1">
<th><center>No.</th>
<th><center>Kelas</th>
<th><center>NISN</th>
<th><center>Nama<br>Siswa</th>
<th><center>Unduh<br>Video</th>
<th><center>Status</th>
<?php
require_once('koneksi.php');
$query1="select * from daftarlink order by status asc";
$result1=mysql_query($query1) or die(mysql_error());
$no=1; //penomoran
while($rows=mysql_fetch_object($result1)){ ?>
<tr><td><?php echo $no; ?>.</td>
<td><?php echo $rows -> kelas;?></td>
<td><?php echo $rows -> id;?></td>
<td><?php echo $rows -> nama;?></td>
<td><a href='<?php echo $rows -> link;?>' target='blank'><img src="img/unduh.png" width='20' height='20' title="Unduh Video"/></a></td>
<td><font color='red'><b><i><?php echo $rows -> status;?></i></b></font></td></tr>
<?php $no++;}?>
</table>
</td></tr></table>
<center>

simpan.php
<?php include "koneksi.php";
$id=$_REQUEST['id'];
$kelas=$_REQUEST['kelas'];
$nama=$_REQUEST['nama'];
$link=$_REQUEST['link'];
if ($id == "" )
{ echo"<script>alert('NISN masih belum diisi');document.location='javascript:history.back(0);'</script>";}
else if($kelas == "")
{ echo"<script>alert('Kelas masih belum diisi');document.location='javascript:history.back(0);'</script>";}
else if($nama == "")
{ echo"<script>alert('Nama masih belum diisi');document.location='javascript:history.back(0);'</script>";}
else if($link == "")
{ echo"<script>alert('Link masih belum diisi');document.location='javascript:history.back(0);'</script>";}
else{
echo $query="INSERT INTO daftarlink (id, kelas, nama, link, status) VALUE ('$id', '$kelas', '$nama', '$link', 'Terkirim')";
$exe=mysql_query($query);
echo "<script>alert('Laporan anda telah tercatat sistem, terima kasih.') location.replace('index.php')</script>";}?>

status.php
<link rel="stylesheet" type="text/css" href="zzhg.css">
<center>
<table>
<th><h1>LAPORAN UNGGAH VIDEO PENDEK<br>MTK WAJIB COVID-2019 by HG</h1></th>
<tr><td><a href=''><img src="img/zzhg.jpeg" width='50' height='50' title="Halaman Depan"/></a>&nbsp&nbsp&nbsp&nbsp<a href='https://wa.me/6285249106725?text=Assalamualaikum' target='blank'><img src="img/zzhgwaadmin.jpg" width='50' height='50' title="Chat WA Admin"/></a>&nbsp&nbsp&nbsp&nbsp<img src="img/zzhgcovid19.png" height='50'/></td></tr>
<tr><td><i>Petunjuk :<br>Silahkan pilih kelas, tuliskan NISN & nama anda, pastekan link video pendek yang sudah diunggah ke google drive.<br>Kemudian klik Kirim Data. Pastikan link yang diberikan dapat digunakan untuk mengunduh video kembali.</i></td></tr>
<tr><td>
<table cellpadding="4" style="border-collapse:collapse;" border="1">
<th><center>No.</th>
<th><center>Kelas</th>
<th><center>NISN</th>
<th><center>Nama<br>Siswa</th>
<th><center>Unduh<br>Video</th>
<th><center>Ubah<br>Status</th>
<?php
require_once('koneksi.php');
$query1="select * from daftarlink order by nama asc";
$result1=mysql_query($query1) or die(mysql_error());
$no=1; //penomoran
while($rows=mysql_fetch_object($result1)){ ?>
<tr><td><?php echo $no; ?>.</td>
<td><?php echo $rows -> kelas;?></td>
<td><?php echo $id=$rows -> id;?></td>
<td><?php echo $rows -> nama;?></td>
<td><?php echo $rows -> status;?><br><a href='<?php echo $rows -> link;?>' target='blank'><img src="img/unduh.png" width='20' height='20' title="Unduh Video"/></a></td>
<td><font color='gold'><i><u><a href='diterima.php?nominta=<?php echo $id;?>'>Terima</a>&nbsp&nbsp&nbsp&nbsp<font color='gold'><i><u><a href='ditolak.php?nominta=<?php echo $id;?>'>Tolak</a>&nbsp&nbsp&nbsp&nbsp<font color='gold'><i><u><a href='dihapus.php?nominta=<?php echo $id;?>'>Hapus</a></td></tr>
<?php $no++;}?>
</table>
</td></tr>
</table>
<center>

diterima.php
<?php include ("koneksi.php");
$id=$_REQUEST['nominta'];
$mysql1=("UPDATE daftarlink SET status='Diterima' where id='$id'");
$result1=mysql_query($mysql1);
if ($result1){
echo "<script>alert('SELAMAT, LAPORAN BERHASIL DITERIMA') location.replace('status.php')</script>";
}else{
echo "<script>alert('MAAF, LAPORAN GAGAL DITERIMA') location.replace('status.php')</script>";}?>

ditolak.php
<?php include ("koneksi.php");
$id=$_REQUEST['nominta'];
$mysql1=("UPDATE daftarlink SET status='Ditolak' where id='$id'");
$result1=mysql_query($mysql1);
if ($result1){
echo "<script>alert('SELAMAT, LAPORAN BERHASIL DITOLAK') location.replace('status.php')</script>";
}else{
echo "<script>alert('MAAF, LAPORAN GAGAL DITOLAK') location.replace('status.php')</script>";}?>

dihapus.php
<?php include ("koneksi.php");
$id=$_REQUEST['nominta'];
$mysql1=("delete from daftarlink where id like '$id'");
$result1=mysql_query($mysql1);
if ($result1){
echo "<script>alert('SELAMAT, LAPORAN BERHASIL DIHAPUS') location.replace('status.php')</script>";
}else{
echo "<script>alert('MAAF, LAPORAN GAGAL DIHAPUS') location.replace('status.php')</script>";}?>

zzhg.css
h1{
  font-family: sans-serif;
}

table {
  font-family: Arial, Helvetica, sans-serif;
  color: #666;
  text-shadow: 1px 1px 0px #fff;
  background: #eaebec;
  border: #ccc 1px solid;
}

table th {
  padding: 15px 35px;
  border-left:1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  background: #ededed;
}

table th:first-child{ 
  border-left:none; 
}

table tr {
  text-align: center;
  padding-left: 20px;
}

table td:first-child {
  text-align: left;
  padding-left: 20px;
  border-left: 0;
}

table td {
  padding: 15px 35px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  background: #fafafa;
  background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
  background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}

table tr:last-child td {
  border-bottom: 0;
}

table tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 3px;
  -webkit-border-bottom-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

table tr:last-child td:last-child {
  -moz-border-radius-bottomright: 3px;
  -webkit-border-bottom-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

table tr:hover td {
  background: #f2f2f2;
  background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
  background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}

koneksi.php
<?php $host="localhost"; //host server
$user="root"; //user login phpMyAdmin
$pass=""; //pass login phpMyAdmin
$db="covid19"; //nama database
mysql_connect("$host","$user","$pass")or die("Koneksi gagal");
mysql_select_db("$db")or die("Database tidak di temukan");?>


Segitu dulu ya guys, selanjutnya kita diskusi saja ya, mohon masukan ilmunya, nanti sambil isi cerita di atas kita revisi ðŸ˜‹.

Salam sehat
#jagakebersihan
#workfromhome
#dirumahaja

Wassalamualaikum...

Comments
0 Comments

Tidak ada komentar:

Posting Komentar