Friday, 19 July 2013

Bootstrap Modal (View, Edit, Delete)

11:14 am    1 comment

Assalamualaikum dan salam sejahtera..

Berikut adalah contoh coding untuk proses View, Edit dan Delete menggunakan bootstrap modal..




List 

 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php echo $this->load->view('jq_work'); ?>  
 <?php echo $this->load->view('modal_wDelete'); ?>  
 <?php echo $this->load->view('modal_wView'); ?>  
 <?php echo $this->load->view('modal_wEdit'); ?>  
 <table class="table table-bordered">  
 <thead>  
 <tr>  
 <th width="5%">No</th>  
 <th width="15%">Position Held</th>  
 <th width="35%">Place of Work</th>  
 <th width="15%">Sector</th>  
 <th width="20%">Duration</th>  
 <th width="10%">Action</th>  
 </tr>  
 </thead>  
 <tbody class="record">  
 <?php if($CountWork>0)  {    
       foreach($workData as $row):                 
       $no++;  
 ?>          
 <tr>  
 <td><?php echo $no;?>.<?php echo form_hidden('id_applicantpc_experience', $row['id_applicantpc_experience']);?>  
 </td>  
 <td><?php echo $row['desc_position'];?></td>  
 <td><?php echo $row['workplace'];?></td>  
 <td><?php echo $row['desc_sector'];?><?php if($row['sector']==4){ echo " - ".$row['other_sector'];}?></td>  
 <td><?php echo date('d/m/Y',strtotime($row['date_from']))." - ".date('d/m/Y',strtotime($row['date_to']));?></td>  
 <td>  
 <div class="btn-group">  
 <a id="view<?php echo $no;?>" href="" class="btn btn-mini" data-toggle="modal" data-target="#myModal_WorkView" onClick="document.getElementById('idExp').value=<?php echo $row['id_applicantpc_experience'];?>"><i class="icon-search"></i></a>  
 <a id="edit<?php echo $no;?>" href="" class="btn btn-mini" data-toggle="modal" data-target="#myModal_WorkEdit" onClick="document.getElementById('idExp').value=<?php echo $row['id_applicantpc_experience'];?>"><i class="icon-pencil"></i></a>            
 <a href="" class="btn btn-mini" data-toggle="modal" data-target="#myModalDel" onClick="document.getElementById('idExp').value=<?php echo $row['id_applicantpc_experience'];?>"><i class="icon-trash"></i></a>  
 </div>  
 </td>  
 </tr>  
 <?php endforeach; ?>    
 </tbody>  
 </table>  
 <input type="hidden" name="idExp" id="idExp">



Modal

Modal Work View : modal_wView.php 



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div id="myModal_WorkView" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
 <div class="modal-header">  
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
 <h3 id="myModalLabel">Applicant's Work Experience</h3>  
 </div>  
 <div class="modal-body">  
 <table width="95%" border="0" cellpadding="2" cellspacing="2" align="center">  
 <tr>  
   <td colspan="3">&nbsp;</td>  
 </tr>  
 <tr>  
   <td width="20%">Position Held</td>  
   <td width="2%">:</td>  
   <td width="73%"><span id="Vposition"></span></td>        
 </tr>  
 <tr>  
   <td>Designation</td>  
   <td>:</td>  
   <td><span id="Vdesignation"></span></td>        
 </tr>  
 <tr>  
   <td>Place of Work</td>  
   <td>:</td>  
   <td><span id="Vworkplace"></span></td>  
 </tr>  
 <tr>  
   <td>Duration</td>  
   <td>:</td>  
   <td><span id="Vduration"></span></td>  
 </tr>  
 <tr>  
   <td>Sector</td>  
   <td>:</td>  
   <td><span id="Vsector"></span></td>  
 </tr>  
 <tr>  
   <td>Grade</td>  
   <td>:</td>  
   <td><span id="Vgrade"></span></td>  
 </tr>  
 <tr>  
   <td colspan="3">&nbsp;</td>  
 </tr>  
 </table>  
 </div>  
 <div class="modal-footer">  
 <button id="btn_Ok" class="btn btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove icon-white"></i>Close</button>  
 </div>  
 </div>


Modal Work Edit: modal_wEdit.php 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php echo form_open('', array('name' => 'frm', 'id' => 'frm')) ?>    
 <div id="myModal_WorkEdit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
 <div class="modal-header">  
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
 <h3 id="myModalLabel">Applicant's Work Experience</h3>  
 </div>  
 <div class="modal-body">  
 <table width="95%" border="0" cellpadding="2" cellspacing="2" align="center">  
 <tr>  
   <td width="20%">Position Held</td>  
   <td width="2%">:</td>  
   <td width="73%">  
     <?php echo form_dropdown('Eposition', $position, set_value('Eposition'), 'class="input-xlarge" id="Eposition"') ?>  
   </td>        
 </tr>  
 <tr>  
   <td>Designation</td>  
   <td>:</td>  
   <td>  
     <?php echo form_input('Edesignation', set_value('Edesignation'), 'class="input-large" id="Edesignation" maxlength="60"' ) ?>  
 </td>  
 </tr>  
 <tr>  
   <td>Place of Work</td>  
   <td>:</td>  
   <td>  
     <?php echo form_textarea('Eworkplace', set_value('Eworkplace'), 'class="span3" id="Eworkplace" maxlength="255"' ) ?>  
   </td>  
 </tr>  
 <tr>  
   <td>Duration</td>  
   <td>:</td>  
   <td>From <?php echo form_input('Edate_from', set_value('Edate_from'), 'class="input-small" id="Edate_from"') ?>  
     To <?php echo form_input('Edate_to', set_value('Edate_to'), 'class="input-small" id="Edate_to"') ?>      </td>  
 </tr>  
 <tr>  
   <td>Sector</td>  
   <td>:</td>  
   <td>  
   <?php   
     foreach($sector as $row):  
     $i++;  
     ?>  
     <input type="radio" name="Esector" id="Esector<?php echo $i;?>" value="<?php echo $row['id_sector'];?>" <?php echo set_radio('Esector', $row['id_sector']); ?> />             
     <?php echo $row['description']; ?><br>  
     <?php endforeach; ?>       
   </td>  
 </tr>  
 <tr>  
   <td>Grade</td>  
   <td>:</td>  
   <td>  
     <?php echo form_dropdown('Egrade', $grade, set_value('grade'), 'id="Egrade"') ?>      
   </td>  
 </tr>  
 <tr><td colspan="2">&nbsp;</td><td><span id="error_message" class="required"></span></td></tr>  
 </table>  
 </div>  
 <div class="modal-footer">  
 <input type="hidden" name="id" id="id">  
 <button id="btn_Cancel" class="btn btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove icon-white"></i>Cancel</button>  
 <button type="submit" class="btn btn-primary" id="btn_wEdit" name="btn_wEdit"><i class="icon-ok icon-white"></i> Save</button>    
 </div>  
 </div>  
 <?php echo form_close() ?>


Modal Work Edit: modal_wDelete.php 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="myModalDel" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
 <div class="modal-header">  
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
 <h3 id="myModalLabel">Warning</h3>  
 </div>  
 <div class="modal-body">  
 <p>Are you sure want to delete the record? Click 'Yes' to proceed otherwise click 'No'.</p>  
 </div>  
 <div class="modal-footer">  
 <button id="btn_No" class="btn btn-primary" data-dismiss="modal" aria-hidden="true"><i class="icon-remove icon-white"></i>No</button>  
 <button id="btn_YesDel" class="btn btn-primary"><i class="icon-ok icon-white"></i>Yes</button>  
 </div>  
 </div>


JQuery

jQuery : jq_work.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script type="text/javascript">  
 $(document).ready(function(){    
 //modal - action after click button Delete->Yes  
 $('#btn_YesDel').click(function(){              
   var idExp = $('#idExp').val();      
   $(location).attr('href','<?php echo base_url() ?>index.php/applicant_work/delete/'+idExp);  
 });        
 for(var i=1;i<=$('#bilExp').val();i++) {  
 //modal - action after click button View      
 $('#view'+i).click(function(){  
   var idExp = $('#idExp').val();  
   $.post('<?php echo base_url() ?>index.php/applicant_work/view/'+idExp,function(data){                                      
     var obj = $.parseJSON(data);  
     $('#Vposition').html(obj.desc_position);          
     $('#Vdesignation').html(obj.designation);    
     $('#Vworkplace').html(obj.workplace);    
     $('#Vduration').html(obj.date_from+" - "+obj.date_to);    
     $('#Vsector').html(obj.desc_sector);    
     $('#Vgrade').html(obj.desc_grade);  
   });        
 });      
 //modal - action after click button Edit  
 $('#edit'+i).click(function(){              
   var idExp = $('#idExp').val();               
   $.post('<?php echo base_url() ?>index.php/applicant_work/view/'+idExp,function(data){                                      
     var obj = $.parseJSON(data);    
      $('#id').val(obj.id_applicantpc_experience);  
     $('#Eposition option[value=' + obj.position +']').attr("selected",true);  
     $('#Edesignation').val(obj.designation);          
     $('#Eworkplace').val(obj.workplace);    
     $('#Edate_from').val(obj.date_from);  
     $('#Edate_to').val(obj.date_to);  
     $('input[name=Esector][value=' + obj.sector +']').attr("checked",true);    
   });                  
 });    
 } //end function for  
 //modal - action after click button Save  
 $("#btn_wEdit").click(function( e ) {  
   e.preventDefault();  
   var id = $('#id').val();  
   var position = $('#Eposition').val();  
   var designation = $('#Edesignation').val();  
   var workplace = $('#Eworkplace').val();  
   var dtFrom = $('#Edate_from').val();  
   var dtTo = $('#Edate_to').val();  
   var sector = $('input:radio[name=Esector]:checked').val();    
   var grade = $('#Egrade').val();  
   $.ajax({  
     type: "POST",  
     url: "<?=base_url()?>index.php/applicant_work/update",  
     cache: false,  
     dataType: "json",  
     data: 'id='+id+'&Eposition='+position+'&Edesignation='+designation+'&Eworkplace='+workplace+'&dtFrom='+dtFrom+'&dtTo='+dtTo+'&Esector='+sector+'&Egrade='+grade,  
     success: function(result){  
       if(result.error) {  
         $(".alert").fadeIn('slow');  
         $("#error_message").html(result.message);  
       } else {        
         $(location).attr('href','<?php echo base_url() ?>index.php/applicant_work/refresh/'+modul_id);        }  
     }  
   });  
 });  
 }


Controller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php  
 class Applicant_Work extends MY_Controller {    
     public function __construct(){  
     parent::__construct();  
     $this->load->model('applicant_model');                  
    }  
    function index() {         
     $userid = $this->Mymodel->get_one_field('id_user_pc',array('ic_no'=>$this->session->userdata('username')),'tr_user_pc');  
     $id = $userid['id_user_pc'];  
     $data['workData'] = $this->applicant_model->app_work($id);     $data['position'] = $this->Mymodel->get_select_list('lt_profession', array('key'=>'id_profession', 'val'=>'description'));  
     $data['sector'] = $this->applicant_model->get_data('lt_sector');  
     $data['grade'] = $this->applicant_model->get_select_list('lt_grade', array('key'=>'id_grade', 'val'=>'description'));  
     $this->data = $data;      
     $this->content_view = "applicant/v_work_experience";  
     $this->_render_page($data);  
    }  
   public function view($expID) {  
     echo json_encode($this->applicant_model->v_work($expID));  
   }  
   public function update() {            
     $dd = substr($this->input->post('dtFrom'),0,2);  
     $mm = substr($this->input->post('dtFrom'),3,2);  
     $yy = substr($this->input->post('dtFrom'),6,4);  
     $date_from = $yy."-".$mm."-".$dd;  
     $dd2 = substr($this->input->post('dtTo'),0,2);  
     $mm2 = substr($this->input->post('dtTo'),3,2);  
     $yy2 = substr($this->input->post('dtTo'),6,4);  
     $date_to = $yy2."-".$mm2."-".$dd2;  
     $dtFrom = date('Y-m-d', strtotime($date_from));  
     $dtTo = date('Y-m-d', strtotime($date_to));        
     $data['post']['position'] = $this->input->post('Eposition');    
     $data['post']['designation'] = $this->input->post('Edesignation');     
     $data['post']['workplace'] = $this->input->post('Eworkplace');    
     $data['post']['date_from'] = $dtFrom;            
     $data['post']['date_to'] = $dtTo;        
     $data['post']['sector'] = $this->input->post('Esector');      
     $data['post']['grade'] = $this->input->post('Egrade');  
     // form validation  
     $this->form_validation->set_rules('Eposition', '<b>Position Held</b>', 'required');    
     $this->form_validation->set_rules('Edesignation', '<b>Designation</b>', 'required');      
     $this->form_validation->set_rules('Eworkplace', '<b>Place of Work</b>', 'required');      
     $this->form_validation->set_rules('dtFrom', '<b>Duration Form</b>', 'required');      
     $this->form_validation->set_rules('dtTo', '<b>Duration To</b>', 'required');      
     $this->form_validation->set_rules('Esector', '<b>Sector</b>', 'required');  
     $this->form_validation->set_rules('Egrade', '<b>Sector</b>', 'integer');          
     $result = array();  
     if ($this->input->is_ajax_request()) {  
       if ($this->form_validation->run() == FALSE) {  
         $result['error'] = true;  
         $result['message'] = validation_errors();                  
       } else {                  
         $result['error'] = false;  
         $this->applicant_model->update_data('tr_applicantpc_experience', array('id_applicantpc_experience'=>$this->input->post('id')), $data['post']);               
       }   
       $json = json_encode($result);  
       die($json);  
     } else {  
       redirect('applicant_work', 'refresh');  
     }      
   }  
   public function delete($expID,$modul_id) {  
     $this->applicant_model->delete_data('tr_applicantpc_experience', array('id_applicantpc_experience'=>$expID));  
     flashMsg('Data has been deleted', 'success');  
     redirect('applicant_work');  
   }  
   public function refresh($modul_id) {  
     flashMsg('Information successfully update', 'success');  
     redirect('applicant_work');  
   }  
 }


Model

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php  
 class Applicant_Model extends CI_Model {      
     public function __construct() {  
     parent::__construct();      
   }  
   public function app_work($id){      
        $query = $this->db->query("SELECT a.*, b.description as desc_position, c.description as desc_sector  
        FROM tr_applicantpc_experience a, lt_profession b, lt_sector c  
        WHERE a.position = b.id_profession  
        AND a.sector = c.id_sector  
        AND a.id_user_pc = '$id'");  
     return $query->result_array();  
     }  
   public function v_work($idExp){      
     $this->db->select("a.*, DATE_FORMAT(a.date_from, '%d/%m/%Y') as date_from, DATE_FORMAT(a.date_to, '%d/%m/%Y') as date_to, b.description as desc_position, c.description as desc_sector, d.description as desc_grade", FALSE);  
     $this->db->join('lt_profession b', 'b.id_profession=a.position');  
     $this->db->join('lt_sector c', 'c.id_sector=a.sector');  
     $this->db->join('lt_grade d', 'd.id_grade=a.grade', 'left');  
     $this->db->where('a.id_applicantpc_experience', $idExp);  
     $query = $this->db->get('tr_applicantpc_experience a');  
     return $query->row_array();        
   }  
   function update_data($table,$key,$data) {  
     $this->db->where($key);  
     $this->db->update($table, $data);  
   }  
   function delete_data($table,$where=0) {  
     if($where != 0) {  
       foreach($where as $key=>$val){  
         $this->db->where($key, $val);  
       }    
     }  
     $this->db->delete($table);  
   }  
   function get_select_list($table,$cols=array('key' => 'id','val' => 'name'),$with_select=1, $where='x') {  
     extract($cols);  
     $this->db->order_by($val);  
     if($where!='x')  
       $this->db->where($where[0], $where[1]);  
     $query = $this->db->get($table);  
     $arr = $query->result_array();  
     if ($with_select) $data[''] = '-- Select --';  
     foreach ($arr as $k => $v){  
       extract($v);  
       $data[$$key] = $$val;  
     }  
     return $data;  
   }  
   function get_data($table) {  
     $this->db->select('*');  
     $this->db->from($table);     
     $query = $this->db->get();          
     return $query->result_array();  
    }  
   function get_one_field($col,$where,$table) {  
     $this->db->select($col);  
     $this->db->where($where);  
     $query = $this->db->get($table);  
     return $query->row_array();  
   }  
 }


   
----------------------------------------------------------
Disediakan Oleh : Haslina Shamsudin
Sumber : Sistem AHPiS

1 comment:

  1. tikanosa8:01 pm, January 03, 2014

    terimakasi sangat membantu. bisakah saya minta desain databasenya kak? kebingunggan itu. :D

    ReplyDelete

Subscribe to: Post Comments (Atom)