galih waskitho: October 2014

Thursday, October 9, 2014

membuat footer agar tetap selalu dibawah menggunakan css

Malam jumat ide untuk ngoding meningkat, sayang jika hanya tidur karena momen2 menyenangkan sulit didapat.. hehe. yah untuk menghilangkan rasa kantuk sekedar menuliskan something di blog mungkin bisa bermanfaat walupun hanya secoret catatan kecil. Terkadang hal kecil selalu terlupakan karena terlalu fokus dengan hal-hal yang besar. berikut adalah cara untuk membuat footer agar tetap dibawah menggunakan css walaupun code ini juga statusnya ngambil dari tempat lain dan hanya memindahkannya saja tetapi tidak apalah untuk belajar, semua asal dilandasi dengan rasa ingin tahu dan niat belajar dengan cara yang dikhalalkan insyaAllah berkah,, amiin, eh malah ceramah, berikut codenya tinggal tempel aja langsung jalan kayak stiker....


html,
body {
 margin:0;
 padding:0;
 height:100%;
}
#wrapper {
 min-height:100%;
 position:relative;
}
#header {
 padding:10px;
 background:#5ee;
}
#content {
 padding:10px;
 padding-bottom:80px;   /* Height of the footer element */
}
#footer {
 width:100%;
 height:80px;
 position:absolute;
 bottom:0;
 left:0;
 background:#ee5;
}

diatas adalah code untuk cssnya dan dibawah adalah code untuk htmlnya...


<body>
 <div id="wrapper">
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>
 </div>
</body>

Thursday, October 2, 2014

Membuat klik kanan menggunakan jquery-contextMenu

JQuery.contextMenu adalah salah satu plugin JQuery yang dapat digunakan untuk membuat klik kanan. Dalam pembuatan aplikasi web terkadang diperlukan klik kanan agar aplikasi lebih berfungsi secara optimal. Beberapa plugin menyediakan fungsi untuk menampilkan klik kanan pada aplikasi web. Tetapi yang ingin saya dokumentasikan pertama kali ini adalah menggunakan JQuery.contextMenu. Langsungsaja praktek sederhananya menggunakan beberapa file .html, .js, dan .css. Yang terpenting silahkan download dulu pluginnya disini.

Pertama buat folder dengan nama klikkanan dan didalamnya buat folder lagi dengan nama js dan css.

Setelah itu ambil file jquery.contextMenu.js dan jquery.contextMenu.css dari plugin yang didownload. Taruhlah file jquery.contextMenu.js di folder js dan jquery.contextMenu.css di folder css. sertakan juga folder images dari plugin dan taruh di folder css.

Setelah plugin sudah terpasang selanjutnya membuat file latihan.html di folder klikkanan dan isikan script html dibawah ini :

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script></script>  
 <script type="text/javascript" src="js/jquery.contextMenu.js"></script>  
 <link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />  
 <script type="text/javascript">  
 $(function(){  
   $.contextMenu({  
     selector: '.context-menu-one',   
     callback: function(key, options) {  
       var m = "clicked: " + key;  
       window.console && console.log(m) || alert(m);   
     },  
     items: {  
       "edit": {name: "Edit", icon: "edit"},  
       "cut": {name: "Cut", icon: "cut"},  
       "copy": {name: "Copy", icon: "copy"},  
       "paste": {name: "Paste", icon: "paste"},  
       "delete": {name: "Delete", icon: "delete"},  
       "sep1": "---------",  
       "quit": {name: "Quit", icon: "quit"}  
     }  
   });  
   $('.context-menu-one').on('click', function(e){  
     console.log('clicked', this);  
   })  
 });  
 </script>  
 <body>  
      <br/><br/>  
      <br/><br/>  
      <br/><br/>  
      <br/><br/>  
      <br/><br/>  
      <div class="context-menu-one box menu-1">  
           <strong>right click</strong>  
      </div>  
 </body>

Agar bisa menjalankan file diatas dengan baik masih harus terkoneksi dengan internet karena

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script></script>

masih load dari server code.jquery.com. Jika ingin menggunakan di localhost maka download dulu scriptnya. Download dapat dilakukan dengan klik kanan di web page dan inspect element sehingga dibrowser muncul code diatas. Selanjutnya klik kanan pada link di inspect element code.jquery.com/jquery-latest.js dan open link in new tab.
Setelah terbuka di new tab dapat disave as dan taruh di folder js dan ubah script

src="http://code.jquery.com/jquery-latest.js"

menjadi

src="js/jquery-latest.js"

Untuk pengembangan selanjutnya dapat lihat dokumentasi yang lebih lengkap hasil download plugin tersebut, karena sudah disertakan dokumentasinya. Atau dokumentasinya secara online disini.

css untuk menampilkan/ mengubah bentuk cursor

Ketika membuat aplikasi berbasis web sering hal yang sepele terlupakan, seperti ketika cursor menunjuk ke area dalam page maka dapat disesuaikan dengan fungsinya. Misalnya ketika menunjuk button maka cursor berubah menjadi telunjuk, ketika menunjuk garis yang bisa didrag berubah menjadi anak panah, ketika sedang loading maka menampilkan loading/ wait. Beberapa yang saya dokumentasikan agar jika suatu saat lupa dapat saya cek lagi.

Buatlah file .html dan isikan source dibawah ini ;

 <!DOCTYPE html>  
 <html>  
 <body>  
 <p>Mouse over the words to change the cursor.</p>  
 <span style="cursor:auto">auto</span><br>  
 <span style="cursor:crosshair">crosshair</span><br>  
 <span style="cursor:default">default</span><br>  
 <span style="cursor:e-resize">e-resize</span><br>  
 <span style="cursor:grab">grab</span><br>  
 <span style="cursor:help">help</span><br>  
 <span style="cursor:move">move</span><br>  
 <span style="cursor:n-resize">n-resize</span><br>  
 <span style="cursor:ne-resize">ne-resize</span><br>  
 <span style="cursor:nw-resize">nw-resize</span><br>  
 <span style="cursor:pointer">pointer</span><br>  
 <span style="cursor:progress">progress</span><br>  
 <span style="cursor:s-resize">s-resize</span><br>  
 <span style="cursor:se-resize">se-resize</span><br>  
 <span style="cursor:sw-resize">sw-resize</span><br>  
 <span style="cursor:text">text</span><br>  
 <span style="cursor:w-resize">w-resize</span><br>  
 <span style="cursor:wait">wait</span><br>  
 <span style="cursor:not-allowed">not-allowed</span><br>  
 <span style="cursor:no-drop">no-drop</span><br>  
 </body>  
 </html>

Source diatas merupakan beberapa bentuk cursor sederhana yang mungkin bisa digunakan.

mengimplementasikan try catch di PHP menggunakan Codeigniter

try and catch berfungsi untuk melihat apakah function yang dieksekusi terjadi kesalahan atau error atau tidak. jika terjadi kesalahan maka akan di catch. Dan catch akan menunjukan error yang ingin kita beritahukan. misalkan fungsi pembagian, ketika nilai pembagi adalah nol maka akan terjadi error defined by zero sedangkan kita ingin menampilkan nilai nol jika nilai pembaginya juga nol. Maka kita perlu menggunakan try and catch untuk menangkap pesan error tersebut dan menggantinya menggunakan nilai nol sesuai dengan yang ingin kita tampilkan. Berikut penjelasan ketika try and catch digunakan pada framework Codeigniter :

pertama kita membuat library dengan nama cek_error.php

dan mengisikan script dalam file tersebut seperti dibawah ini :

 <?php if (! defined('BASEPATH')) exit('No direct script access allowed');  
 class cek_error   
 {  
      public function __construct()  
      {  
           $this->CI =& get_instance();  
           ini_set('display_errors','on');  
           error_reporting(E_ALL^E_NOTICE);  
      }  
      function inverse($x,$y){  
           if($y==0){  
                throw new Exception('0');  
           }else{  
                return ($x/$y)*100;  
           }  
      }  
 }

setelah membuat library selanjutnya load library yang telah dibuat dicontroller dan menggunakan try and catch :

 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');  
 class latihan extends CI_Controller {  
   public function __construct()  
    {  
     parent::__construct();  
     $this->load->library(array('cek_error'));  
     ini_set('display_errors','on');  
     error_reporting(E_ALL^E_NOTICE);  
    }  
  function index(){  
       try{  
         $tfi = $this->cek_error->inverse(10,0);  
        }catch(Exception $e){  
          $tfi = $e->getMessage();  
        }  
       echo round($tfi,2);  
    }  
 }

Jika ingin menapilkan try and catch di view tinggal memindahkan saja try and catch tersebut diview.