Memanfaatkan HTML 5 Untuk Alern

Mungkin judulnya agak kurang dimengerti oleh agan-agan sekalian. Tapi yang pasti ini adalah bagaimana cara kita memanfaat teknologi HMTL 5 agar user harus mengisi semua form yang kita buat. Contoh nya seperti ini :

Seperti gambar diatas , ada beberapa field yang harus diisi, tetapi pada saat di Submit akan muncul alern dari html nya mengenai field mana yang masih kosong.

Berikut source yang kita butuhkan untuk kasus diatas.

<td><input name="nm"  required="required" title="Nama harus diisi." size="40" type="text" placeholder="Nama Lengkap " /></td>

Fungsi nya ada di required, title dan placeholder sebagai pembantu alern.

Semoga bermanfaat. 

Read More

Membuat Breadcrumb Otomatis

Breadcrumb adalah salah satu bentuk navigasi. Biasanya digunakan untuk memberitahukan user dimana posisi dia berada sekarang. Dengan adanya breadcrumb maka akan memudahkan user untuk berpindah ke top level dari current page.

Berikut ini adalah salah satu library codeigniter yang bisa di gunakan untuk membuat breadcrumb. Baik secara otomatis dan manual

Langkah 1. Buat File library Breadcrumb.php

Buatlah sebuah file Breadcrumb.php di folder applications/library yang berisi :

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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108

<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); /** * Breadcrumb class * * DESCRIPTION : Class to show breadcrumb navigation * * MODIFICATION HISTORY * V1.0 2009-07-03 04:05 PM - Ibnu Daqiqil Id - Created * 2009-07-03 02:32 PM - Ibnu Daqiqil id - change html element to display using <ul> * * @package Markeet * @author Ibnu Daqiqil Id * **/   class Breadcrumb { protected $data = array();   /** * Class Constructor * * @return void * @author Ibnu Daqiqil Id **/ function __construct() {   }   /** * add new crumb element * * @param string $title The crumb title * @param string $uri Crumb url path * @return void * @author Ibnu Daqiqil Id **/   public function add($title, $uri='') { $this->data[] = array('title'=>$title, 'uri'=>$uri); return $this; }   /** * Fetch crumb data * * @return void * @author Ibnu Daqiqil Id **/   public function fetch() { return $this->data; }   /** * Reset crumb data * * @return void * @author Ibnu Daqiqil Id **/ public function reset() { $this->data = array(); }     /** * Dislpay all crumb element * * @param string $home_site first path title * @param string $id id of ul html * @return void * @author Ibnu Daqiqil Id **/ public function show($home_site ="home", $id = "crumbs" ) { $ci = &get_instance(); $site = $home_site; $breadcrumbs = $this->data; $out = '<ul id="'.$id.'">'; if ($breadcrumbs && count($breadcrumbs) > 0) { $out .= '<li><a class="pathway" href="' . base_url() .'"/>'. $site . '</a></li>'; $i=1; foreach ($breadcrumbs as $crumb):   if ($i != count($breadcrumbs)) { $out .= $sep . '<li><a class="pathway" href="' .site_url($crumb['uri']). '">'. $crumb['title'] .'</a></li>'; } else { $out .= $sep . '<li class="selected">'. $crumb['title'] .'</li>'; } $i++; endforeach; } else { $out .= '<li class="selected">' . $site . '</li>'; } $out .= '</ul>'; return $out; }   }   // END Breadcrumb class   /* End of file Breacrumb.php */ /* Location: /Applications/XAMPP/xamppfiles/htdocs/multishop/application/library/Breadcrumb.php */

Langkah ke 2. Contoh Penggunaan (secara Manual)

Buatlah sebuah controller yang berisi

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

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); /** * Contoh class * * @package default * @author Ibnu Daqiqil Id **/   class Contoh extends Controller {   function __construct() { parent::__construct(); }   /** * Index function * * @return void * @author Ibnu Daqiqil Id **/ function index() { $this->load->library('breadcrumb'); $this->breadcrumb->add('Pages','pages') ->add('Management','pages/manage') ->add('Add new Page','pages/manage/add'); $this->load->view('crumb'); }   }   // END Contoh class   /* End of file contoh.php */ /* Location: /Applications/XAMPP/xamppfiles/htdocs/multishop/application/controllers/contoh.php */

dan sebuah view

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

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Bread Crumb Example</title> <style type="text/css" media="screen"> body { font:71%/165% "Lucida Grande", Lucida, Verdana, sans-serif; } ul, li { list-style-type:none; padding:0; margin:0; } #crumbs { height:2.3em; border:1px solid #dedede; } #crumbs li { float:left; line-height:2.3em; color:#777; padding-left:.75em; } #crumbs li a { background:url(images/crumbs.gif) no-repeat right center; display:block; padding:0 15px 0 0; } #crumbs li a:link, #crumbs li a:visited { color:#777; text-decoration:none; } a:link, a:visited, #crumbs li a:hover, #crumbs li a:focus { color:#dd2c0d; } </style> </head> <body> <?php echo $this->breadcrumb->show() ?> </body> </html>

Untuk images/crumbs.gif bisa anda download di sini

(OPTIONAL) Penggunaaan Otomatis

Jika anda ingin menggunakan breadcrumb ini secara otomatis tampa harus menambahkannya satu-satu bisa dilakukan dengan meng extend controller. Contoh

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?php class My_Controller extends Controller{ /// add this function function _remap($func) {   $nama_controller = get_class($this); $this->load->library('breadcrumb'); $this->breadcrumb->add( ucwords(($nama_controller)), site_url($nama_controller)); if (method_exists($this,$func)) { $URI =& load_class('URI'); if ($func!='index') $this->breadcrumb->add( ucwords(($func)),site_url( $nama_controller.'/'.$func)); call_user_func_array(array(&$this, $func), array_slice($URI->rsegments, 2)); } else { show_404(get_class($this).'/'.$func); } } }

anda dapat langsung menggunakannya secara langsung tampa menambahkan satu satu seperti pada contoh sebelumnya

Sumber :http://www.koder.web.id

Read More