membuat multiple upload , serta multiple insert serta validasi jquery dan ajax tak luput menggunakan notifikasi toastr js dan plugin lainnya

Input multiple field form menggunakan codeigniter + validasi dan Jquery

pertama download versi codeigniter 3.1.5 karena di tutor ini saya menggunakan versi terbaru dari codeigniter itu sendiri ,

berikut LINK : https://codeigniter.com/download

config terlebih dahulu base_url , database nya , dan autoload nya serta route nya jangan sampai lupa ya

yang terdapat di folder application / config /

autoload.php

$autoload['libraries'] = array('database','session','form_validation','pagination','user_agent');

/*
| -------------------------------------------------------------------
|  Auto-load Helper Files
| -------------------------------------------------------------------
| Prototype:
|
|	$autoload['helper'] = array('url', 'file');
*/
$autoload['helper'] = array('url','file','form','url_helper');

config.php

$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
$config['base_url'] .= "://".$_SERVER['HTTP_HOST'];
$config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

/*
|--------------------------------------------------------------------------
| Index File
|--------------------------------------------------------------------------
|
| Typically this will be your index.php file, unless you've renamed it to
| something else. If you are using mod_rewrite to remove the page set this
| variable so that it is blank.
|
*/
$config['index_page'] = '';

database.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
     'database' => 'nama database',-->nama database nya agan/sista
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

!------------------- tahap configurasi selesai ----------------!

buat controller terlebih dahulu dengan nama bebas sih apa aja yang agan dan sista mau .

application/controller/utama.php

<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Utama extends CI_Controller {
    var $data;
    var $link = 'utama';
    public function __construct() {
        parent::__construct();
        $this->load->database();
        //models connection back-end
        $this->load->model('M_settings', 'settings');// jangan lupa load model nya ya gan
        //end models connection back-end
    }
    public function index() {
    // -- pagination settings -- \\
              $page=$this->input->get('per_page');
              $batas=2; //jlh data yang ditampilkan per halaman
              if(!$page):     //jika page bernilai kosong maka batas akhirna akan di set 0
                 $offset = 0;
              else:
                 $offset = $page; // jika tidak kosong maka nilai batas akhir nya akan diset nilai page terakhir
              endif;

              $config['page_query_string'] = TRUE; //mengaktifkan pengambilan method get pada url default
              $config['base_url'] = base_url().'utama?';   //url yang muncul ketika tombol pada paging diklik
              $config['total_rows'] = $this->settings->count_angkatan_array(); // jlh total article
              $config['per_page'] = $batas; //batas sesuai dengan variabel batas
              $config['uri_segment'] = $page; //merupakan posisi pagination dalam url pada kesempatan ini saya menggunakan method get untuk menentukan posisi pada url yaitu per_page

              $config['full_tag_open'] = '<ul class="pagination">';
              $config['full_tag_close'] = '</ul>';
              $config['first_link'] = '&laquo; First';
              $config['first_tag_open'] = '<li class="prev page">';
              $config['first_tag_close'] = '</li>';

              $config['last_link'] = 'Last &raquo;';
              $config['last_tag_open'] = '<li class="next page">';
              $config['last_tag_close'] = '</li>';

              $config['next_link'] = 'Next &rarr;';
              $config['next_tag_open'] = '<li class="next page">';
              $config['next_tag_close'] = '</li>';

              $config['prev_link'] = '&larr; Prev';
              $config['prev_tag_open'] = '<li class="prev page">';
              $config['prev_tag_close'] = '</li>';

              $config['cur_tag_open'] = '<li class="current"><a href="">';
              $config['cur_tag_close'] = '</a></li>';

              $config['num_tag_open'] = '<li class="page">';
              $config['num_tag_close'] = '</li>';
              $this->pagination->initialize($config);

              $this->data['pagination']=$this->pagination->create_links();

              $this->data['jlhpage']=$page;
              // end pagination
              // get article list
              $this->data['angkatan_data'] = $this->settings->get_angkatan_array($batas,$offset);
            //main content
            $this->load->view('v_angkatan', $this->data);
            //end main content
        }
    }
public function add() {
        
      $this->validate_add;    // validasi file      
          if(empty($_FILES['file_image']['tmp_name'])) {
            $firstname = count($this->input->post('firstname'));            
            for($i = 0; $i < $firstname; $i++) {
                $data = array (
                 'img' => "",
                 'date_created' => date("Y-m-d"),
                 'firstname' => $_POST['firstname'][$i],
                 'lastname' => $_POST['lastname'][$i],
                 'phone' => $_POST['phone'][$i],
                 'email' => $_POST['email'][$i],
                 'biography' => $_POST['biography'][$i],
                 'angkatan' => $_POST['angkatan'][$i],
                 'user_created' => $this->session->userdata('user_id'),
                 'website' => $_POST['website'][$i]
                );  
                $insert = $this->settings->save_angkatan($data); 
            }  
            
            
        echo json_encode(array("status" => TRUE)); 
                   
        } else {
        // cek berapa file yang akan di upload;
        $number_of_files = sizeof($_FILES['file_image']['tmp_name']);
        $firstname = count($this->input->post('firstname'));
        $files = $_FILES['file_image'];
        $errors = array();
        if(isset($_FILES['file_image'])){
             for($i = 0; $i < $firstname; $i++) {
             $this->image_path = realpath(APPPATH.'../image/alumni');
             $this->image_path_url = base_url().'image/alumni';      
                $config = array(
                    'allowed_types' => 'jpg|gif|GIF|jpeg|png|JPG|JPEG|PNG',
                    'upload_path'     => $this->image_path,
                    'encrypt_name'     => TRUE
                );
                if(!empty($files['name'][$i])) {
                    $_FILES['file_image']['name']         = $files['name'][$i];
                    $_FILES['file_image']['type']         = $files['type'][$i];
                    $_FILES['file_image']['tmp_name']     = $files['tmp_name'][$i];
                    $_FILES['file_image']['error']         = $files['error'][$i];
                    $_FILES['file_image']['size']         = $files['size'][$i];
                        $this->load->library('upload');
                        $this->upload->initialize($config);
                        if ($this->upload->do_upload('file_image')) {
                            $upload_data = $this->upload->data();
                            $data = array (
                             'img' => $upload_data["file_name"],
                             'date_created' => date("Y-m-d"),
                             'firstname' => $_POST['firstname'][$i],
                             'lastname' => $_POST['lastname'][$i],
                             'phone' => $_POST['phone'][$i],
                             'email' => $_POST['email'][$i],
                             'biography' => $_POST['biography'][$i],
                             'angkatan' => $_POST['angkatan'][$i],
                             'user_created' => $this->session->userdata('user_id'),
                             'website' => $_POST['website'][$i]
                            );  
                        } else {
                            $data['upload_errors'][$i] = $this->upload->display_errors();
                        }  
                        
                    } else {
                        $data = array (
                         'img' => "",
                         'date_created' => date("Y-m-d"),
                         'firstname' => $_POST['firstname'][$i],
                         'lastname' => $_POST['lastname'][$i],
                         'phone' => $_POST['phone'][$i],
                         'email' => $_POST['email'][$i],
                         'biography' => $_POST['biography'][$i],
                         'angkatan' => $_POST['angkatan'][$i],
                         'user_created' => $this->session->userdata('user_id'),
                         'website' => $_POST['website'][$i]
                        );  
                    }
                $insert = $this->settings->save_angkatan($data);       
                }          
            }
       
          
            echo json_encode(array("status" => TRUE)); 
        }
        
    }

 

  //berikut validasi nya gan
    public function validate_add(){
      $data = array();
      $data['error_string'] = array();
      $data['inputerror'] = array();
      $data['status'] = TRUE;
        
         $firstname = $this->input->post('firstname');
         if(!empty($firstname))
            {
                foreach($firstname as $id => $value)
                {
                    $this->form_validation->set_rules('firstname['.$id.']', 'nama depan', 'trim|required');
                    $this->form_validation->set_rules('lastname['.$id.']', 'nama belakang', 'trim|required');
                    $this->form_validation->set_rules('angkatan['.$id.']', 'angkatan ke', 'trim|required');
                    $this->form_validation->set_rules('biography['.$id.']', 'deskripsi tentang alumni', 'trim|required');
                    $this->form_validation->set_rules('phone['.$id.']', 'no telp/handphone', 'trim|required');
                    $this->form_validation->set_rules('email['.$id.']', 'email', 'trim|required|valid_email|is_unique[alumni.email]');
                    $this->form_validation->set_rules('website['.$id.']', 'link url', 'trim|required|callback_unique_url|prep_url');
                }
            }
        
         $this->form_validation->set_error_delimiters('', '');
         $this->form_validation->run();
        
         $loop = $this->input->post('firstname');
         if(!empty($loop))
            {
                foreach($loop as $id => $value)
                {
                    if(form_error('firstname['.$id.']')!= '')
                    {
                        $data['inputerror'][] = 'firstname['.$id.']';
                        $data['error_id'][] = 'firstname_'.$id.'';
                        $string = form_error('firstname['.$id.']');
                        $result = str_replace(array('</p>', '<p>'), '', $string);
                        $data['error_string'][] = $result;
                        $data['status'] = FALSE;
                    }
                    
                    if(form_error('lastname['.$id.']')!= '')
                    {
                        $data['inputerror'][] = 'lastname['.$id.']';
                        $data['error_id'][] = 'lastname_'.$id.'';
                        $string = form_error('lastname['.$id.']');
                        $result = str_replace(array('</p>', '<p>'), '', $string);
                        $data['error_string'][] = $result;
                        $data['status'] = FALSE;
                    }
                    
                    if(form_error('angkatan['.$id.']')!= '')
                    {
                        $data['inputerror'][] = 'angkatan['.$id.']';
                        $data['error_id'][] = 'angkatan_'.$id.'';
                        $string = form_error('angkatan['.$id.']');
                        $result = str_replace(array('</p>', '<p>'), '', $string);
                        $data['error_string'][] = $result;
                        $data['status'] = FALSE;
                    }
                    
                    if(form_error('email['.$id.']')!= '')
                    {
                        $data['inputerror'][] = 'email['.$id.']';
                        $data['error_id'][] = 'email_'.$id.'';
                        $string = form_error('email['.$id.']');
                        $result = str_replace(array('</p>', '<p>'), '', $string);
                        $data['error_string'][] = $result;
                        $data['status'] = FALSE;
                    }
                    
                    if(form_error('website['.$id.']')!= '')
                    {
                        $data['inputerror'][] = 'website['.$id.']';
                        $data['error_id'][] = 'website_'.$id.'';
                        $string = form_error('website['.$id.']');
                        $result = str_replace(array('</p>', '<p>'), '', $string);
                        $data['error_string'][] = $result;
                        $data['status'] = FALSE;
                    }
                    
                    $allowed =  array('png','jpg','jpeg','PNG','JPG','JPEG');

                    if (isset($_FILES['file_image['.$id.']'])){
                        $new = $_FILES['file_image['.$id.']']['name'];

                        $ext = pathinfo($new, PATHINFO_EXTENSION);
                        if(!in_array($ext,$allowed) ) {
                            $data['inputerror'][] = 'file_image['.$id.']';
                            $data['error_id'][] = 'file_image_'.$id.'';
                            $string = 'Type File PNG JPG JPEG';

                            $result = str_replace(array('</p>', '<p>'),'',$string);
                            $data['error_string'][] = $result;
                            $data['status'] = FALSE;
                        }
                    } 
                }
            }
        
        if($data['status'] === FALSE){
            echo json_encode($data);
            exit();
        }
    }
}

 

2. tahap kedua membuat models untuk pengambilan database nya berikut source code nya :

 

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

// -- settings -- \\
class M_settings extends CI_Model {
    //settings page\\
    function get_angkatan_array($batas =null,$offset=null,$key=null) {
	    $this->db->select('a.*,a.id as alumni_id,b.*');
    $this->db->join('users as b', 'a.user_created = b.id','left');
    $this->db->from('alumni as a');
	    if($batas != null){
	       $this->db->limit($batas,$offset);
	    }
	    if ($key != null) {
	       $this->db->or_like($key);
	    }
	    $query = $this->db->get();

	    //cek apakah ada info
	    if ($query->num_rows() > 0) {
	        return $query->result();
	    }
	}

	function count_angkatan_array(){
		$this->db->select('a.*,a.id as alumni_id,b.*');
    $this->db->join('users as b', 'a.user_created = b.id','left');
    $this->db->from('alumni as a');
	    $query = $this->db->get()->num_rows();
	    return $query;
	}

	function count_angkatan_array_search($orlike) {
	    $this->db->or_like($orlike);
	    $this->db->select('a.*,a.id as alumni_id,b.*');
    $this->db->join('users as b', 'a.user_created = b.id','left');
    $this->db->from('alumni as a');
	    $query = $this->db->get();
	    return $query->num_rows();
	}



    function save_angkatan($data) {
    return $this->db->insert('alumni', $data);
	// return $this->db->insert_id();
    }

}

 3. tahap ketiga adalah membuat view nya serta javascriptnya untuk menyimpan data :

<link rel="stylesheet" type="text/css" href="<?=base_url();?>assets/back-end/build/css/custom.css">
<link rel="stylesheet" type="text/css" href="<?=base_url();?>assets/back-end/plugins/dropify/dist/css/dropify.min.css">

<!-- jQuery-->
    <script type="text/javascript" src="<?=base_url();?>assets/back-end/plugins/jquery/dist/jquery.min.js"></script>
    <!-- jquery form -->
    <script type="text/javascript" src="<?=base_url('assets/back-end/');?>/plugins/jquery/dist/jquery.form.js"></script>
    <!-- Bootstrap JavaScript-->
    <script type="text/javascript" src="<?=base_url();?>assets/back-end/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- toastr-->
    <script type="text/javascript" src="<?=base_url();?>assets/back-end/plugins/toastr/toastr.min.js"></script> <!-- Custom JS--> <script type="text/javascript"> var base_url = "<?=base_url('utama/');?>"; var url = "<?=base_url('utama/');?><?=$this->uri->segment(2);?>/"; var asset_url = "<?=base_url('assets/back-end/');?>"; var uri = "<?=$this->uri->segment(2); ?>"; var image_url = "<?=base_url();?>"; var default_url = "<?=base_url();?>"; </script> <script src="<?=base_url();?>assets/back-end/build/js/fourth-layout/custom.js"></script> <!-- END STYLE & JAVASCRIPT --> <div class="page-content container-fluid"> <div class="widget"> <div class="widget-body"> <div class="row mb-15"> <div class="col-md-7"> <p class="form-control-static"><i>manajemen konten sistem</i> alumni</p> </div> <div class="col-md-5"> <form action="<?=base_url()?>ad-min/c_angkatan/search" method="get"> <div class="input-group"> <input name="key" placeholder="pencarian..." required="" class="form-control pr-15" type="text"> <div class="input-group-btn"> <button type="submit" class="btn btn-outline btn-default"><i class="ti-search"></i></button> </div> </div> </form> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="row"> <?php if (empty($angkatan_data)){ ?> <div class="col-lg-12" id="error_not_found"> maaf, tidak ada data {elapsed_time} </div> <?php } ?> <?php for ($i = 0; $i < count($angkatan_data); ++$i) { ?> <figure<?php if($angkatan[$i]->angkatan=="angkatan_1"){?>class="snip0057 blue"<?php } else { ?>class="snip0057 red"<?php } ?>> <figcaption> <h2><?php if($angkatan_data[$i]->firstname!=""){ ?><?=$angkatan_data[$i]->firstname;?> <?php } else { ?>firstname zero records {elapsed_time}<?php } ?> <span><?php if($angkatan_data[$i]->lastname!=""){ ?><?=$angkatan_data[$i]->lastname;?> <?php } else { ?>lastname zero records {elapsed_time}<?php } ?> </span></h2> <p><?php if($angkatan_data[$i]->biography!=""){ ?><?=$angkatan_data[$i]->biography;?> <?php } else { ?>biography zero records {elapsed_time}<?php } ?></p> <div class="icons"><a href="<?php if($angkatan_data[$i]->website!=""){ ?><?=$angkatan_data[$i]->website;?><?php } else { ?>#<?php } ?>"><i class="ion-ios-home"></i></a><a href="<?php if($angkatan_data[$i]->email!=""){ ?><?=$angkatan_data[$i]->email;?><?php } else { ?>#<?php } ?>"><i class="ion-ios-email"></i></a><a href="<?php if($angkatan_data[$i]->phone_number!=""){ ?><?=$angkatan_data[$i]->phone_number;?><?php } else { ?>#<?php } ?>"><i class="ion-ios-telephone"></i></a></div> </figcaption> <div class="image"><img src="<?=base_url(); ?>image/alumni/<?php if($angkatan_data[$i]->img!=""){ ?><?=$angkatan_data[$i]->img;?><?php } else { ?>image404.png<?php } ?>" alt="<?=$angkatan[$i]->firstname;?>"/></div> <div class="position"><?=$angkatan[$i]->angkatan;?></div> </figure> <?php } ?> </div> </div> </div> <nav> <?php echo $pagination; ?> </nav> </div> </div> </div> <!-- END CONTAINER --> <!-- modal for adding angkatan --> <div id="modalform" tabindex="-1" role="dialog" aria-labelledby="myAnimationModalLabel" class="modal animated fadeInLeft bs-example-modal-animation"> <div role="document" class="modal-dialog modal-lg"> <form method="POST" id="c_angkatan_form" class="form-horizontal" enctype="multipart/form-data"> <div class="modal-content"> <div class="modal-header"> <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> <h4 id="myAnimationModalLabel" class="modal-title"></h4> </div> <div class="modal-body"> <!-- field by id --> <!-- <input type="hidden" value="" name="id" /> --> <!-- field form each --> <div class="form-body"> <div class="form-group"> <label class="control-label col-md-3">nama depan alumni *</label> <div class="col-md-9"> <input class="form-control" placeholder="nama depan alumni" name="firstname[0]" value=""/> <span id="firstname_0" class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">nama belakang alumni *</label> <div class="col-md-9"> <input class="form-control" placeholder="nama belakang alumni" name="lastname[0]" value=""/> <span id="lastname_0" class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">email **</label> <div class="col-md-9"> <input placeholder="contoh : mnwnbk@gmail.com" name="email[0]" class="form-control"/> <span id="email_0" class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">website **</label> <div class="col-md-9"> <input placeholder="contoh : https://www.instgram.com/nama alumni" name="website[0]" class="form-control"/> <span id="wesbsite_0" class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">no telp/handphone **</label> <div class="col-md-9"> <input placeholder="contoh : +6287778784550" name="phone[0]" class="form-control"/> <span id="phone_0" class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">angkatan ke **</label> <div class="col-md-9"> <select name="angkatan[0]" class="form-control"> <option value="angkatan_1">Angkatan ke 1</option> <option value="angkatan_2">Angkatan ke 2</option> </select> <span id="angkatan_0" class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">biography **</label> <div class="col-md-9"> <textarea placeholder="deskripsi alumni" name="biography[0]" class="form-control"></textarea> <span id="biography_0" class="help-block"></span> </div> </div> <div class="form-group"> <label for="fileInputHor" class="col-sm-3 control-label">berkas gambar</label> <div class="col-sm-9"> <input id="fileInputHor" name="file_image[0]" type="file" class="dropify"> <span id="file_image_0" class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label"></label> <div class="col-sm-9"> <p>* <i style="color:red;">harus diisi</i> / ** <i style="color:red;">sangat di anjurkan diisi</i></p> <button type="button" onclick="bttn_adding_angkatan_field()" class="btn btn-outline btn-primary"><i class="ti-plus"></i> tambah field</button> </div> </div> <div id="angkatan-form"></div> </div> <!-- end field form --> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-raised btn-default"><i class="ti-close"></i> tutup</button> <button type="submit" onclick="bttn_save_c_angkatan()" id="btnSave" class="btn btn-raised btn-black"><i class="ti-save"></i> simpan perubahan</button> </div> </div> </form> </div> </div> <!-- end modal -->

 4. membuat javascriptnya save dengan nama custom.js

//-- function angkatan --//
function bttn_remove_angkatan_field(id) {
    var scntDiv = $('#angkatan-form');
        
        var i = id;
        
            $('#angkatan-form #field_'+id+'').remove();
        
        i--;
        
    return false; 
}
function bttn_adding_angkatan_field() { 
    
var scntDiv = $('#angkatan-form');
    
var i = 1 + $('#angkatan-form .toclone').size();
    
  $('<div id="field_'+i+'" class="toclone"><div class="form-group"><label class="control-label col-md-3">nama depan alumni*</label><div class="col-md-9"><input class="form-control" placeholder="nama depan alumni" name="firstname['+i+']" value=""/><span id="firstname_'+i+'" class="help-block"></span></div></div><div class="form-group"><label class="control-label col-md-3">nama belakang alumni*</label><div class="col-md-9"><input class="form-control" placeholder="nama belakang alumni" name="lastname['+i+']" value=""/><span id="lastname_'+i+'" class="help-block"></span></div></div><div class="form-group"><label class="control-label col-md-3">email**</label><div class="col-md-9"><input placeholder="contoh : mnwnbk@gmail.com" name="email['+i+']" class="form-control"/><span id="email_'+i+'" class="help-block"></span></div></div><div class="form-group"><label class="control-label col-md-3">website**</label><div class="col-md-9"><input placeholder="contoh : https://www.instgram.com/nama alumni" name="website['+i+']" class="form-control"/><span id="wesbsite_'+i+'" class="help-block"></span></div></div><div class="form-group"><label class="control-label col-md-3">no telp/handphone**</label><div class="col-md-9"><input placeholder="contoh : +6287778784550" name="phone['+i+']" class="form-control"/><span id="phone_'+i+'" class="help-block"></span></div></div><div class="form-group"><label class="control-label col-md-3">angkatan ke**</label><div class="col-md-9"><select name="angkatan['+i+']" class="form-control"><option value="angkatan_1">Angkatan ke 1</option><option value="angkatan_2">Angkatan ke 2</option></select><span id="angkatan_'+i+'" class="help-block"></span></div></div><div class="form-group"><label class="control-label col-md-3">biography**</label><div class="col-md-9"><textarea placeholder="deskripsi alumni" name="biography['+i+']" class="form-control"></textarea><span id="biography_'+i+'" class="help-block"></span></div></div><div class="form-group"><label for="fileInputHor" class="col-sm-3 control-label">berkas gambar</label><div class="col-sm-9"><input id="fileInputHor" name="file_image['+i+']" type="file" class="dropify"><span id="file_image_'+i+'" class="help-block"></span></div></div><div class="form-group"><label class="col-sm-3 control-label"></label><div class="col-sm-9"><p>*<i style="color:red;">harus diisi</i>/**<i style="color:red;">sangat di anjurkan diisi</i></p><button type="button" onclick="bttn_adding_angkatan_field()" class="btn btn-outline btn-primary"><i class="ti-plus"></i> tambah field</button>&nbsp;<button type="button" onclick="bttn_remove_angkatan_field('+i+')" class="btn btn-outline btn-primary"><i class="ti-minus"></i> kurangi field</button></div></div></div>').appendTo(scntDiv);
            
  $('#fileInputHor_'+i+'').dropify({// default file for the file input
        defaultFile: "",
        // max file size allowed
        maxFileSize: 0,
        // custom messages
        messages: {
            'default': 'tarik dan jatuh berkas gambar anda disini',
            'replace': 'tarik dan jatuh berkas gambar anda disini untuk merubah',
            'remove':  'hapus',
            'error':   'oops, terjadi kesalahan.'
        },
        // custom template
        tpl: {
            wrap:        '<div class="dropify-wrapper"></div>',
            message:     '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
            preview:     '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
            filename:    '<p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>',
            clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
            error:       '<p class="dropify-error">{{ error }}</p>'
        }
    });
          
    i++;
    return false;

}
function bttn_adding_c_angkatan() {
    save_method = 'add';
                $('#c_angkatan_form')[0].reset(); // reset form on modals
                $('.form-control').removeClass('has-error'); // clear error class
                $('.form-group').removeClass('has-error'); // clear error class
                $('.help-block').removeClass('has-error'); // clear error class
                $('.help-block').empty(); // clear error string
                $('.col-md-9').removeClass('has-error'); // clear error class
                $('.modal-title').text('menambah data alumni'); // Set Title to Bootstrap modal title
                $('[name="website[0]"]').val('');
                $('[name="firstname[0]"]').val('');
                $('[name="lastname[0]"]').val('');
                $('[name="email[0]"]').val('');
                $('[name="phone[0]"]').val('');
                $('[name="biography[0]"]').val('');
                $('#btnSave').html('simpan perubahan'); //change button text
                $('#fileInputHor').dropify({// default file for the file input
                    defaultFile: "",
                    // max file size allowed
                    maxFileSize: 0,
                    // custom messages
                    messages: {
                        'default': 'tarik dan jatuh berkas gambar anda disini',
                        'replace': 'tarik dan jatuh berkas gambar anda disini untuk merubah',
                        'remove':  'hapus',
                        'error':   'oops, terjadi kesalahan.'
                    },
                    // custom template
                    tpl: {
                        wrap:        '<div class="dropify-wrapper"></div>',
                        message:     '<div class="dropify-message"><span class="file-icon" /> <p>{{ default }}</p></div>',
                        preview:     '<div class="dropify-preview"><span class="dropify-render"></span><div class="dropify-infos"><div class="dropify-infos-inner"><p class="dropify-infos-message">{{ replace }}</p></div></div></div>',
                        filename:    '<p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>',
                        clearButton: '<button type="button" class="dropify-clear">{{ remove }}</button>',
                        error:       '<p class="dropify-error">{{ error }}</p>'
                    }
                });
                $('#modalform').modal('show'); // show bootstrap modal } function bttn_save_c_angkatan() { $('#c_angkatan_form').ajaxForm({ url: url + 'add', dataType: 'json', beforeSerialize: function() {}, beforeSubmit: function() { $('#btnSave').text('menyimpan...'); //change button text $('#btnSave').attr('disabled', true); //set button disable }, success: function(data) { if (data.status) //if success close modal and reload ajax table { $('#modalform').modal('hide'); // show bootstrap modal when complete loader toastr.options = { closeButton: true, progressBar: true, showMethod: 'fadeIn', hideMethod: 'fadeOut', timeOut: 8000 }; toastr.success('berhasil, menyimpan data', 'system says,'); //location.reload(); } else { for (var i = 0; i < data.inputerror.length; i++) { $('[name="' + data.inputerror[i] + '"]').parent().parent().addClass('has-error'); $('#'+data.error_id[i]+'').text(data.error_string[i]); } } $('#btnSave').html('save changes'); //change button text $('#btnSave').attr('disabled', false); //set button enable }, error: function(jqXHR, textStatus, errorThrown) { toastr.options = { closeButton: true, progressBar: true, showMethod: 'fadeIn', hideMethod: 'fadeOut', timeOut: 8000 }; toastr.error('terjadi kesalahan, tidak bisa menyimpan data', 'system says,'); $('#btnSave').html('save changes'); //change button text $('#btnSave').attr('disabled', false); //set button enable } }); }

jika tutorial ini susah untuk anda mengerti comment saja untuk download source code full nya agan dan sista ...

 

by @890.pte.ltd backend developping @maulana@890-indonesia.com


About Author

Achmad Maulana

code, photography, fun


Comment & Discussions

    Please LOGIN before if you want to give the comment.