Membuat Tags Atau Label Dengan jQuery Tags Input

Membuat Tags Atau Label Dengan jQuery Tags Input  - Label atau dalam bahasa inggris tag adalah kata kunci yang berhubungan dengan konten yang diberikan tag, tags ini digunakan untuk menunjukan potongan - potongan infromasi sebagai petunjuk dari suatu konten. Hal ini juga dapat membantu memudahkan pencarian terhadap sesuatu yang berhubungan dengan tags tersebut.

Sebagai contoh apabila anda seorang blogger ketika anda selesai membuat sebuah konten kita memasukan label atau tags yang berhubungan dengan konten tersebut untuk mengkategorikan konten tersebut dan juga untuk mempermudah mesin pencari untuk menemukan konten yang kita buat.

Sekarang bagaimana jika kita ingin membuat website sendiri tentu kita harus membuat fitur tags kita sendiri. Nah, bagaimankah untuk membuatnya ?

Baca Juga : Cara Membuat Textarea Dengan Character Count dan Limit

Hal ini dapat dilakukan scara konvesional yaitu dengan menggunakan inputan kemudian setiap tags dipisah dengan koma. Akan tetapi hasil tampilannya tidak menarik karena tags yang di input hanya kita pisahkan dengan koma. untuk itu kita membutuhkan tambahan CSS untuk mempercantiknya tetapi hal ini juga di butuhkan bantuan Javascript dan jQuery.

Untuk lebih jelasnya sekarang langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Jquery Tags, sekarang untuk mempercantik bentuk tampilan inputan tags buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);
*, *:before, *:after { box-sizing: border-box; }
html { font-size: 100%;  }
body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: #0172c6;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h2 { 
  color: #fff;  
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: Center;
}

h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}

ul {
  width: 100%;
  min-height: 100px;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
  &:focus {
    outline: none;
    border: 1px solid darken(#ddd, 5%);
    box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
  }
  &[placeholder] { 
    font-style: italic;
    font-size: 0.875rem;
  }
}

#keywords{
 width:80%;
}
</style>

Simpan dalam folder Jquery Tags dengan nama style.css

Sekarang untuk memperncantik tampilan tagsnya buat lagi sebuah file baru dan ketikan script berikut :

.ui-autocomplete {
    background-color: #fff;
    position: absolute;
    cursor: default;
    list-style: none;
    margin: 25px 0 0;
    padding: 0;
    border: 1px solid #E5E5E5;
    border-top: none;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -moz-box-shadow: 0 3px 5px #888;
    -webkit-box-shadow: 0 3px 5px #888;
    box-shadow: 0 3px 5px #888;
    font-size: 12px;
}

.ui-autocomplete .ui-menu-item {
    padding: 0;
    margin: 0;
}

.ui-autocomplete  .ui-menu-item a {
    display: block;
    padding: 4px 6px;
    margin: 0;
    text-decoration: none;
    line-height: 12px;
    border-bottom: 1px solid #E5E5E5;
    border-top: 1px solid #fff;
    color: #78959D;

}

.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-active {
    background-color: #c0d1e2;
    color: #555;
    border-color: #a6cef7;
}

.ui-autocomplete-loading {
    
}

ul.tagit {
    cursor: text;
    overflow: auto;
    font-size: 14px;
    width: 97%;
    padding: 3px;
    margin-top: 2px;
    margin-right: 6px;
    margin-bottom: 16px;
    border: 1px solid #E5E5E5;
    background: #fff;
    color: #333;
}

ul.tagit li {
    display: block;
    float: left;
    margin: 2px 5px 2px 0;
    position: relative;
}

ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{
    float: left;
    width: 12px;
    margin-left: -5px;
    cursor: move;
}

ul.tagit li.tagit-choice {
    background-color: #5bc0de;
 margin: 2px 5px 2px 0;
 display: block;
 padding: 2px 15px 3px 4px;
 color: #fff;
 text-align: center;
 white-space: nowrap;
 vertical-align: baseline;
 border-radius: .25em;
 position: relative;
 float: left;
 font-weight: 500;
}

ul.tagit li.tagit-choice.selected {
    background: #ff3019; /* old browsers */
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff3019', endColorstr = '#cf0404', GradientType = 0); /* ie */
    border-color: #f76464;
}

ul.tagit li.tagit-choice:hover {
    background: #0172c6;
}

ul.tagit li.tagit-new {
    padding: 2px 4px 3px;
    padding: 2px 4px 1px;
    padding: 2px 4px 1px 0;
}

ul.tagit li.tagit-choice input {
    display: block;
    float: left;
    margin: 0 5px 0 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

ul.tagit li.tagit-choice a.tagit-close {
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    outline: medium none;
    padding: 3px 0 2px 3px;
    text-decoration: none;
    position: absolute;
    display: block;
    top: 0;
    right: 3px;
    text-shadow: -1px -1px 0 rgba(150, 150, 0, 0.7);
}

ul.tagit li.tagit-choice a.tagit-close:hover {
    color: #f00;
}

ul.tagit div.tagit-label.hidden {
 display: none;
}

ul.tagit input.tagit-edit {
 margin: 0px 0px 0px 2px;
 border: none;
 line-height: 16px;
}

ul.tagit input[type="text"] {
    -moz-box-sizing: border-box;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: inherit !important;
    outline: none;
}

.tagit-hiddenSelect {
    display:none;
}

Simpan dalam folder Jquery Tags dengan nama tagit-stylish-yellow.css

Javascript

Sekarang untuk jQuery dan jQuery ui anda dapan mengunduhnya di sini :

Download jQuery

Download jQuery-Ui

Simpan dalam folder Jquery Tags.

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
  <title>Jquery Tag | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet">
  <link href="tagit-stylish-yellow.css" rel="stylesheet">  
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script src="tagit.js" type="text/javascript"></script>
  
  <script type="text/javascript">
   $(function() {
    $('#demo9').tagit({ 
     editable: true,
     triggerKeys:['comma', 'tab'] 
    });
    
   $('#send').click(function (){
     showTags($('#demo9').tagit('tags'))
   });
    
   function showTags(tags){
     var string = "";
     for (var i in tags) string += tags[i].value + ",";
     $('#keywords').val(string);
   }
   });
  </script>
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Jquery Tagit</h2>
   <ul id="demo9" name="demo9"></ul>   
   <button type="submit" id="send" >Get Tags</button>
   <input type="text" class="form-control" name="keywords" id="keywords" readonly/>
  </div>   
 </body>
</html>

Simpan dengan nama index.html.

Sekarang jQuery Tags anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Coba ketikan beberapa ketika kemudian untuk setiap tags anda dapat pisahkan dengan koma maka dia akan otomatis berpisah.

Coba anda klik get tags maka sekarang inputan yang di bawah akan berisi value dari tags tersebut. apa bila anda ingin menyimpan tags tersebut di dalam database gunakanlah inputan yang di bawah untuk menangkapnya dan untuk tombol get tags anda dapat ubah menjadi bertipe submit. 

Jika anda tidak ingin menampilkan inputan yang di bawah anda cukup ubah typenya menjadi hidden.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Read More

Cara Membuat Textarea Dengan Character Count Dan Limit

Cara Membuat Textarea Dengan Character Count Dan Limit - Textarea adalah sebuah komponen dari HTML yang digunakan untuk mengetikan atau menginput text yang biasanya panjang. Pada dasarnya fungsi textarea sama dengan text field yaitu untuk menginput karakter tapi textarea lebih ditujukan untuk ke arah jumlah karakter yang lebih banyak karena bentuk field text area yang luas atau lebih besar dibandingkan dengan text field.

Baca Juga : Cara Membuat Form Pada HTML

Textarea sering digunakan untuk menginput text yang panjang seperti artikel, akan tetapi dalam beberapa kasus terkadang jumlah karakter yang dimasukan kedalam textarea di batasi, contohnya seperti dalam tweeter kita hanya dapat memasukan 140 karakter. Nah, Bagaimana sih sebenarnya membuat limitasi karakter pada textarea ?

Jika kita ingin membatasi karakter yang di inputkan kita dapat menggunakan atribut dari textarea tersebut yaitu maxlength  anda cukup menambahkan maxlength="140" sebagai contoh :

<textarea maxlength="140" placeholder="Enter Your Text Here"></textarea>

Akan tetapi jika hannya menggunakan cara di atas kita hanya membatasi jumlah karakter yang masuk tapi tidak mengetahui jumlah karakter yang sudah di masukan. Sekarang bagaimana kita mengetahui jumlah karakter yang sudah dimasukan yaitu dengan menambahkan javascript. Untuk lebih jelasnya langsung saja meluncur ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup.

CSS

Pertama buatlah sebuah folder dengan nama Textarea, sekarang untuk mempercantik bentuk tampilan textarea buka notepad++ kemudian buatlah sebuah file baru dan ketikan script berikut :

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);
*, *:before, *:after { box-sizing: border-box; }
html { font-size: 100%;  }
body { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  background: #0172c6;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h2 { 
  color: #fff;  
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: Center;
}

h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}

textarea {
  width: 100%;
  min-height: 100px;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  padding: 0.5rem;
  color: #666;
  box-shadow: inset 0 0 0.25rem #ddd;
  &:focus {
    outline: none;
    border: 1px solid darken(#ddd, 5%);
    box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
  }
  &[placeholder] { 
    font-style: italic;
    font-size: 0.875rem;
  }
}

#the-count {
  float: right;
  padding: 0.1rem 0 0 0;
  font-size: 0.875rem;
}
</style>

Simpan dalam folder Textarea dengan nama style.css

HTML

Sekarang untuk markupnya buatlah sebuah file baru lagi dengan notepad++ kemudian ketikan script berikut :

<!DOCTYPE html>
<html>
 <head>
  <title>Textarea Character Count | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet">   
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Textarea Character Count</h2>
    <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
    <div id="the-count">
   <span id="current">0</span>
   <span id="maximum">/ 140</span>
    </div>
  </div> 
 </body>
</html>

Simpan dalam folder Textarea dengan nama index.html

Javascript

Sekarang untuk counter kita tambahkan javascript di dalam markup HTMLnya, buka file Index.hml anda di Notepad++ kemudian ubah scriptnya menjadi :

<!DOCTYPE html>
<html>
 <head>
  <title>Textarea Character Count | Jin Toples Programming</title>
  <link href="style.css" rel="stylesheet"> 
  <script src="jquery.min.js"></script>
 </head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Textarea Character Count</h2>
    <textarea name="the-textarea" id="the-textarea" maxlength="140" placeholder="Enter Your Text Here"></textarea>
    <div id="the-count">
   <span id="current">0</span>
   <span id="maximum">/ 140</span>
    </div>
  </div> 
  <script>
   $('textarea').keyup(function() {   
     var characterCount = $(this).val().length,
      current = $('#current'),
      maximum = $('#maximum'),
      theCount = $('#the-count');
    
     current.text(characterCount);
      
     if (characterCount == 140) {
    maximum.css('color', '#8f0001');
    current.css('color', '#8f0001');
    theCount.css('font-weight','bold');
     } else {
    maximum.css('color','#fff');
    theCount.css('font-weight','normal');
     }
     
      
   });
  </script>
 </body>
</html>

Kemudian simpan.

Jika kalian perhatikan script di atas maka terlihat javascript tambahan di bagian bawah dan jquery di bagian atas. Untuk jquery anda dapat menggambilnya di website resminya atau anda dapat mengunduhnya di sini : Download

Sekarang Textarea Character Count anda sudah selesai anda dapat mencobanya dengan cara klik 2x pada file tersebut, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD

Read More