Contents
Tips dan trick kali ini bisa digunakan buat Kamu-kamu yang lagi nyari function atau trik untuk mempermudah pengkodingan website yang akan di buat.
Cara Perbesar input Radio dan Checkbox
input[type="radio"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}
input[type="checkbox"] {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
transform: scale(1.5);
}Gunakan style script diatas untuk membuat Radio dan Checkbox menjadi lebih besar seperti gambar berikut.
Disabled tombol sebelum ceklis persetujuan
Kadangkala jika mengisi kuesioner atau formulir dibeberapa website selalu ada persetujuan dengan cekbok dan tidak bisa klik tombol sebelim di ceklis, nah berikut nih cara tips pembuatannya dengan.
<input type="checkbox" id="myBtn2" name="Terms" /><button name="nextButton" id="nextButton">Selanjutnya</button>$('#nextButton').attr("disabled",true);
$("#myBtn2").click(function(){
if($(this).prop("checked") == true){
$('#nextButton').prop("disabled", false);
}
else if($(this).prop("checked") == false){
$('#nextButton').prop("disabled", true);
}
});Jadi keterangannya seperti ini, tombol dibuat disabled=true kemudian jika checkbox di klik maka tombol menjadi disabled=false dan jika di uncheck maka tombol menjadi disabled kembali.
Dynamic Grouping dan Shorting di jQuery DataTables
Jika dirasa ribet membuat tabel grouping dari html, bisa dicoba nih trick yang satu ini merupakan fitur dari DataTables.
var groupColumn = 2;
"drawCallback": function( settings, start, end, max, total, pre ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5"><b>'+group+'</b></td></tr>'
);
last = group;
}
} );
},
columnDefs: [ {
targets: groupColumn,
visible: false
} ],
"order": [[ groupColumn, 'asc' ]],
"initComplete" : function () {
dataIsa.buttons().container().appendTo( $('.box-tools'));
},pada baris berikut asumsi panjang kolom ada 5 dan pada kolom ke 3 akan di group dan di order berdasarkan ascending (asc) atau descending (desc)
<tr class="group"><td colspan="5"><b>'+group+'</b></td></tr>
"order": [[ groupColumn, 'asc' ]],
Membuat halaman SEO friendly dengan .htaccess
Pada website sekarang ini pasti jarang menggunakan parameter seperti index.php?act=add&mod=yes atau parameter sejenis. Alasannya supaya lebih informatif dan mudah dipahami oleh search engine sehingga mudah untuk di crawl oleh search engine seperti google, bing.
Berikut cara pembuatan SEO fiendly sederhana dengan bantuan .htaccess
$page = isset($_REQUEST['page']) ? $_REQUEST['page'] : '';
global $page;
include ("header.php");
$file ="apps/v_$page.php";
if (!file_exists($file))
{
include ("apps/v_home.php");
}
else if ($page=="" || $page=="home")
{
include ("apps/v_home.php");
}
else {
include ("apps/v_$page.php");
}
include ("footer.php");Buat file v_home.php atau v_quiz.php pada folder apps untuk menampilkan /home atau /quiz pada halaman, jika menggunakan parameter maka /?page=home atau /?page=quiz atau juga bisa menggunakan index.php?page=home
http://localhost/?page=home sama dengan http://localhost/home
http://localhost/?page=quiz sama dengan http://localhost/quiz
Berikut manipulasi dari .htaccess dan jangan lupa Enable mod_rewrite pada apache/nginx
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.+)$ index.php?page=$1 [QSA,L]Masih banyak Tips and Trick yang akan diberikan dan update pada halaman ini. Untuk kali ini cukup sekian dulu dan terima kasih. Salam Bar-bar!
Author Profile
- Hi my name is Ricki, I am a blogger from Indonesia. Founder of erkamoo.com, Besides creating Web Applications, I also write about Blogging Tips and Tutorials on Programming, Databases, HTML.
