Thursday, October 26, 2017

Membuat Tabel Responsive dengan bootstrap

     1 comment

Hai... Jumpai lagi..
Kali ini saya akan membuat saya membuat tutorial bagaimana cara membuat tabel responsive menggunakan bootstrap pada perangkat yang kecil atau mempunyai ukuran setara atau lebih kecil dari 768px, maka akan terdapat scroll yang secara horizontal.
Dalam pembuatan tabel responsive di bootstrap, ada beberapa class untuk membuat berbagai style atau bentuk pada tabel yang akan dibuat. beberapa perbedaan tabel :

dan dari beberapa class diatas ada juga class untuk mengubah warna setiap kolom dan baris pada tabel. Class ini dapat digunakan sesuai dengan kebutuhan. Untuk dapat lebih memahaminya, anda dapat menerapkan script dibawah ini.


Dalam pembuatan tabel, file bootstrap yang dibutuhkan adalah

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/css/table-responsive.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

script css letakkan setelah <head> dan sebelum </head>
Gimana gan, cukup mudah bukan ?. Semoga bermanfaat !

Cara Show-hide Password menggunakan bootstrap show-password js Plugin

     2 comments


Ingin melihat password yang anda ketik ? Fasilitas ini memastikan anda untuk mengisi password dengan benar. Anda dapat melihat hasil ketikan password pada form login. Bagaimana cara membuat fasilitas ini ? Jangan khawatir, di tutorial ini saya akan membagikan script gratis yang bisa anda gunakan pada form login.
Coba pelajari layout dan kodenya. Untuk melihat hasil priview silahkan anda isi terlebih dahulu username dan password maka akan terlihat simbol mata. Klik dan tahan simbol ini untuk melihat password yang baru saja anda ketik. Selamat Mencoba.

Script < / > :
=========|

css dan js nya letakkan setelah <head> dan sebelum </head>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
dan html nya letakkan setelah <body> dan sebelum </body>

 <div class="container">
<form>
<div class="form-group">
<label>Username:</label>
<input type="text" name="username" class="form-control">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="password" name="password" class="form-control" data-toggle="password">
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$("#password").password('toggle');
</script>

 Semoga berhasil !

Wednesday, October 25, 2017

Mengkonversi Waktu menjadi waktu lampau

     No comments
Pada sebuah web sangat tidak menarik jika pada tanggal atau waktu posting sebuah artikel atau apalah namanya masih menggunakan tanggal format dari database. 
Sangat lebih baik lagi jika artikel yang diposting memiliki sebuah tanggal atau waktu tapi lebih baik lagi jika waktu atau tanggal tersebut di konversikan menjadi waktu lampau kapan artikel itu di posting. Misalnya kita posting artikel seperti saat ini dan beberapa detik atau jam atau mungkin hari, bulan, tahun maka akan menjadi sebuah waktu yang lampau saat artikel tersebut di posting ketika dilihat di waktu yang berbeda.

Oke langsung TKP aja biar simpel dan gak membingungkan,


 
<?php
date_default_timezone_set("Asia/Jakarta");

function datediff($tgl1, $tgl2){
$tgl1 = strtotime($tgl1);
$tgl2 = strtotime($tgl2);
$diff_secs = abs($tgl1 - $tgl2);
$base_year = min(date("Y", $tgl1), date("Y", $tgl2));
$diff = mktime(0, 0, $diff_secs, 1, 1, $base_year);
return array( 
 date("Y", $diff) - $base_year, 
 "months_total" => (date("Y", $diff) - $base_year) * 12 + date("n", $diff) - 1, 
 "months" => date("n", $diff) - 1, 
 "days_total" => floor($diff_secs / (3600 * 24)), 
 "days" => date("j", $diff) - 1, 
 "hours_total" => floor($diff_secs / 3600), 
 "hours" => date("G", $diff), 
 "minutes_total" => floor($diff_secs / 60), 
 "minutes" => (int) date("i", $diff), 
 "seconds_total" => $diff_secs, 
 "seconds" => (int) date("s", $diff) 
);
}
$tgl1 = '2017-10-24 23:39:00';
$tgl2 = date("Y-m-d H:i:s");
$a = datediff($tgl1, $tgl2);
echo 'tanggal 1 = '.$tgl1; echo '
';
echo 'tanggal 2 = '.$tgl2; echo '
';
echo 'Selisih = '.$a['years'].' tahun '.$a['months'].' bulan '.$a['days'].' hari '.$a['hours'].' jam '.$a['minutes'].' menit '.$a['seconds'].' detik';
?>

Kurang lebih script nya seperti itu dan silahkan dicopas lalu dicoba !
itu hanya sesimpel-simpelnya aja gan, untuk lebih bagus nya kembangkan lagi biar sama-sama belajar. Hehehehe...
Semoga Bermanfaat !