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 !

Saturday, April 29, 2017

Membuat Kotak Galeri

     No comments
HALAMAN khusus galeri, gambar, atau image diperlukan bagi blog toko online untuk menampilkan koleksi produk atau barang jualan.
Web pribadi juga bisa membuat halaman statis berisi galeri atau koleksi gambar pilihan.
Cara membuatnya cukup mudah, dan biasanya masalah yang sering ditemui jika kita memasukkan gambar lebih dari satu, maka posisi gambar tidak akan sejajar horizontal, tapi akan berderet vertikal.
Tutorial kali ini saya akan membagikan solusinya, mau tau ?
copas kode dibawah :





<html>

<head>


<title>Galeri</title>


<style type="text/css">


<!--


* {


margin: 0;


padding: 0;


}




body {


background: #333;


}




div {


width: 900px;


margin: 0 auto;


overflow: auto;


}




ul {


list-style-type: none;


}




li img {


float: left;


margin: 10px;


border: 5px solid #fff;




-webkit-transition: box-shadow 0.5s ease;


-moz-transition: box-shadow 0.5s ease;


-o-transition: box-shadow 0.5s ease;


-ms-transition: box-shadow 0.5s ease;


transition: box-shadow 0.5s ease;


}




li img:hover {


-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 


box-shadow: 0px 0px 7px rgba(255,255,255,0.9);


}


-->


</style>


</head>


<body>


<div>


<ul>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


</ul>


</div>


</body>


</html>

Jadinya bakal seperti gambar


Semoga Bermanfaat !

Menu Vertikal Dengan Gambar

     No comments
Dalam membangun sebuah web, menu memiliki peran yang sangat penting, selain mempermudah mencari artikel atau info dari sebuah web yang dituju, menu juga berperan mempercantik halaman web.
Disini saya akan membuat menu navigasi vertikal disertai dengan gambar.
kodenya dibawah, langsung copas aja biar cepat, hehehehee...





<html><head>



<title>Menu Dengan Gambar</title>



<style type="text/css">



<!--



* {margin: 0; padding: 0;}





div {



margin: 20px;



}





ul {



list-style-type: none;



width: 500px;



}





h3 {



font: bold 20px/1.5 Helvetica, Verdana, sans-serif;



}





li img {



float: left;



margin: 0 15px 0 0;



}





li p {



font: 200 12px/1.5 Georgia, Times New Roman, serif;



}





li {



padding: 10px;



overflow: auto;



}





li:hover {



background: #eee;



cursor: pointer;



}



-->



</style>



</head>



<body>



<div>



<ul>



<li>



<img src="1.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="2.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="3.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="4.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>



</ul>



</div>



</body>



</html>

kalau copasnya benar gambarnya bakal begini nih

  OKE.........