Codeigniter No More POP-UP Pains

on
Huhh, hampir semua client yg gw pegang selalu
telp dan menanyakan kenapa ini ga jalan, kenapa
itu ga bisa. Buntut2 nya ehh krn pop-up nya di
block ama tuhh browser. Emang sihh jaman nya
pop-up udah lewat, byk an diblock ama browser.

Karena begitu tinggi nya masalah yg disebabkan
karena pop-up yg ke block. Maka skg gw mau bagiin,
bagaimana supaya kita tidak bergantung pada pop-up
tetapi masih memiliki fitur seperti pop-up.

Ok, cara ini kita tempuh dg kerjasama CSS, AJAX
dan pasti nya PHP. Kita ga lama2 lagi lsg aja.
Struktur CI gw sperti ini,

CI/
  CSS/
    file_css_pop_up.css       
  JAVASCRIPT/
    pop_up_handler.js
  SYSTEM/
    APPLICATION/
      CONTROLLERS/
        welcome.php
      ...
    ...
  ...

Gw kluarin CSS dan JAVASCRIPT dari folder
system/application krn utk alasan security aja sehh.
Coba aja di cek user guide dari CI, mereka memang
menyarankan itu di luar folder system.

/* file_css_pop_up.css */
#pop-up{
  
  display         : none;
  overflow        : auto;
  padding-left    : 10px;
  padding-bottom  : 10px;
  background-color: #DDF;
  border          : 1px solid rgb(100,100,225);
  Z-Index         : 24;
  top             : 30%;
  left            : 10%;
  width           : 80%;
  height          : 60%;
  position        : absolute;
}
/* end of css */

/* pop_up_handler.js */
var GMisc={

  // _ROOT silahkan di sesuiakan sendiri
  _ROOT                       : 'http://localhost/ci_svc/', 
  _DEFAULT_POPUP_ID           : 'pop-up',
  _DEFAULT_POPUP_CONTENT_ID   : 'pop-up-content',
  _VK_ESC_KEY                 : 27,
  _LOADING_TEXT_STATUS        : 'Please wait, loading...',
  
  escKey_kill_popup : function (event,
                                id){
  
    if(event.which){
      
      keynum = event.which;
      
      if(keynum == this._VK_ESC_KEY){
    
        id = document.getElementById(id);
        
        id.style.display  = 'none';
        id.innerHTML      = this._LOADING_TEXT_STATUS;
      }
    }
  }
}

var MiscControllers={

  set_show_id : function (id_popup, str_mode){
  
    id_popup = document.getElementById(id_popup);
    
    if(str_mode == '1'){
    
      id_popup.style.display = 'block';
    }else{
    
      id_popup.style.display = 'none';
    }
  }
  
  set_some_data : function(id_object){
  
    var str_data        = 'You could replace this static 
                              data with your ajax call or else';
    id_object           = document.getElementById(id_object);
    id_object.innerHTML = str_data;
  }
}
/* end of js */

/* controllers/welcome.php */
...
  function index(){
    $this->load->view('footer');
    $this->load->view('includes');
    $this->load->view('content');
    $this->load->view('footer');
  }
...
/* end of controllers */

/* view/includes.php */

<script type="text/javascript" 
        src="<?=base_url() ?>javascript/pop_up_handler.js">
</script>
<link rel="stylesheet" 
      type="text/css" 
      href="<?=base_url() ?>css/file_css_pop_up.css" />

/* end of view */

/* view/content.php */

<body onKeyDown='GMisc.escKey_kill_popup(event,
                      GMisc._DEFAULT_POPUP_ID)'>
       
  <div id='content-wrapper'>
    <div id='content'>
      <?php
      // gw ga specified type='submit' 
      // krn emg supaya ini button ga submit
      // setelah di klik atau mungkin utk safe 
      // di akhir dari JS nya
      // ditambah dg "return false;"
      $button_js         = 
        "\" onClick='MiscControllers.set_show_id(
            GMisc._DEFAULT_POPUP_ID, 1);
          MiscControllers.set_some_data(
            GMisc._DEFAULT_POPUP_CONTENT_ID)' \"";
      
      $button_attributes = 
        array('name'     => 'dummy',
              'content'  => 'Klik gw donk!!!',
              $button_js);
      ?>
    </div>
  </div>
  
  <div id='pop-up'>
    Press (ESC) to close
    
    <div id='pop-up-content'>
      Please wait, loading...
    </div>
  
  </div>
  
</body>
/* end of view */

Message "Please wait, loading..." mungkin tidak akan terlihat,
krn proses id_object.innerHTML = ... ini sangat cepat.
Tetapi akan terlihat bila data yg hendak di munculkan bersumber
dari ajax call. Mungkin kalau ada masukan atau komentar silahkan,
jgn ragu. Thx.
Coding for life, coding with ethic.

Comments

Post a Comment