Assalam,.. oke saya berikut tahapannya untuk edit soal dengan modal,
Pertama buka file : application/quiz_ujian_soal.php
lalu pada baris : 263 dan 297 tambahkan tombol untuk editnya :
tombol edit essay : <a class='btn btn-success btn-xs edit-essay' data-id='$k[id_pertanyaan_essai]' href='#'><span class='glyphicon glyphicon-edit'></span></a>
tombol edit objektif: <a class='btn btn-success btn-xs edit-objektif' data-id='$ko[id_pertanyaan_objektif]' href='#'><span class='glyphicon glyphicon-edit'></span></a>
Oke untuk tombol sudah selesai. selanjutnya kita masuk ke js-nya,
buka file index.php pada folder utama, lalu tambahkan script js untuk memanggil modalnya saat tombol edit di klik :
<script>
$(function(){
$(document).on('click','.edit-essay',function(e){
e.preventDefault();
$("#myModall").modal('show');
$.post("edit-essay.php",
{id:$(this).attr('data-id')},
function(html){
$(".boody").html(html);
}
);
});
});
</script>
<script>
$(function(){
$(document).on('click','.edit-objektif',function(e){
e.preventDefault();
$("#myModall").modal('show');
$.post("edit-objektif.php",
{id:$(this).attr('data-id')},
function(html){
$(".boody").html(html);
}
);
});
});
</script>
<div class="modal fade" id="myModall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body boody"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Lalu buat file baru pada folder utama edit-essay.php, isi dengan :
<?php
include "config/koneksi.php";
$row = mysql_fetch_array(mysql_query("SELECT a.*, c.kodejdwl, b.id_quiz_ujian, c.kode_kelas, c.kode_pelajaran FROM `rb_pertanyaan_essai` a JOIN rb_quiz_ujian b ON a.id_quiz_ujian=b.id_quiz_ujian JOIN rb_jadwal_pelajaran c ON b.kodejdwl=c.kodejdwl where a.id_pertanyaan_essai='$_POST[id]'"));
echo "<h4 class='modal-title' id='myModalLabel'>Edit Soal Essay</h4>
<form method='POST' action='index.php?view=soal&act=semuasoal&jdwl=$row[kodejdwl]&idsoal=$row[id_quiz_ujian]&id=$row[kode_kelas]&kd=$row[kode_pelajaran]' class='form-horizontal'>
<div class='modal-body'>
<div class='form-group'>
<label for='inputEmail3' class='col-sm-2 control-label'>Soal</label>
<div class='col-sm-10'>
<input type='hidden' value='$row[id_pertanyaan_essai]' name='id'>
<textarea rows='6' name='a' class='form-control' placeholder='Tuliskan Soal Essai...'>$row[pertanyaan_essai]</textarea>
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='submit' name='essai_update' class='btn btn-primary'>Update</button>
</div>
</form>";
?>
Lalu buat file baru pada folder utama edit-objektif.php, isi dengan :
<?php
include "config/koneksi.php";
$row = mysql_fetch_array(mysql_query("SELECT a.*, c.kodejdwl, b.id_quiz_ujian, c.kode_kelas, c.kode_pelajaran FROM `rb_pertanyaan_objektif` a JOIN rb_quiz_ujian b ON a.id_quiz_ujian=b.id_quiz_ujian JOIN rb_jadwal_pelajaran c ON b.kodejdwl=c.kodejdwl where a.id_pertanyaan_objektif='$_POST[id]'"));
echo "<h4 class='modal-title' id='myModalLabel'>Edit Soal Objektif</h4>
<form method='POST' action='index.php?view=soal&act=semuasoal&jdwl=$row[kodejdwl]&idsoal=$row[id_quiz_ujian]&id=$row[kode_kelas]&kd=$row[kode_pelajaran]' class='form-horizontal'>
<input type='hidden' value='$row[id_pertanyaan_objektif]' name='id'>
<div class='modal-body'>
<div class='form-group'>
<label for='inputEmail3' class='col-sm-2 control-label'>Soal</label>
<div class='col-sm-10'>
<textarea rows='3' name='a' class='form-control' placeholder='Tuliskan Soal Objektif...'>$row[pertanyaan_objektif]</textarea>
</div>
</div>
<div class='form-group'>
<label for='inputEmail3' class='col-sm-2 control-label'>Jawab A</label>
<div class='col-sm-10'>
<input style='width:50%' type='text' name='b' class='form-control' value='$row[jawab_a]'>
</div>
</div>
<div class='form-group'>
<label for='inputEmail3' class='col-sm-2 control-label'>Jawab B</label>
<div class='col-sm-10'>
<input style='width:50%' type='text' name='c' class='form-control' value='$row[jawab_b]'>
</div>
</div>
<div class='form-group'>
<label for='inputEmail3' class='col-sm-2 control-label'>Jawab C</label>
<div class='col-sm-10'>
<input style='width:50%' type='text' name='d' class='form-control' value='$row[jawab_c]'>
</div>
</div>
<div class='form-group'>
<label for='inputEmail3' class='col-sm-2 control-label'>Jawab D</label>
<div class='col-sm-10'>
<input style='width:50%' type='text' name='e' class='form-control' value='$row[jawab_d]'>
</div>
</div>
<div class='form-group'>
<label for='inputEmail3' class='col-sm-2 control-label'>Jawab E</label>
<div class='col-sm-10'>
<input style='width:50%' type='text' name='f' class='form-control' value='$row[jawab_e]'>
</div>
</div>
<div class='form-group'>
<label for='inputEmail3' class='col-sm-2 control-label'>Kunci</label>
<div class='col-sm-10'>
<input style='width:50%' type='text' name='g' class='form-control' value='$row[kunci_jawaban]'>
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='submit' name='objektif_update' class='btn btn-primary'>Update</button>
</div>
</form>";
?>
Terakhir pada index.php pada folder utama di atas tag </body> tambahkan :
<script>
$(function(){
$(document).on('click','.edit-essay',function(e){
e.preventDefault();
$("#myModall").modal('show');
$.post("edit-essay.php",
{id:$(this).attr('data-id')},
function(html){
$(".boody").html(html);
}
);
});
});
</script>
<script>
$(function(){
$(document).on('click','.edit-objektif',function(e){
e.preventDefault();
$("#myModall").modal('show');
$.post("edit-objektif.php",
{id:$(this).attr('data-id')},
function(html){
$(".boody").html(html);
}
);
});
});
</script>
<div class="modal fade" id="myModall" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body boody"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Simpan dan selesai, silahkan di edit datanya,..
Berikut kita perlihatkan hasil dari script di atas, semoga berhasil... ^_^
