Thursday, October 26, 2017

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.........


Membuat Menu Navigasi Vertikal Sederhana

     No comments
Pada sebuah web perlu adanya menu navigasi guna untuk mempermudah user atau pengguna dalam mencari artikel dala halaman web yang dituju, tanpa adanya menu user akan mengalamai kesulitan mendapatkan info atau artikel yang dicari.
Nah, disini saya akan berbagi sedikit tutorial membuat menu navigasi vertikal yang sederhana dan semoga saja bermanfaat bagi agan yang membaca tutorial ini.
kodenya sebagai berikut :





<html><head>



<title>Menu Navigasi Sederhana</title>



<style type="text/css">



<!--



div {



width: 200px;



}





h2 {



font: 400 40px/1.5 Helvetica, Verdana, sans-serif;



margin: 0;



padding: 0;



}





ul {



list-style-type: none;



margin: 0;



padding: 0;



}





li {



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



border-bottom: 1px solid #ccc;



}





li:last-child {



border: none;



}





li a {



text-decoration: none;



color: #000;



display: block;



width: 200px;





-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;



-moz-transition: font-size 0.3s ease, background-color 0.3s ease;



-o-transition: font-size 0.3s ease, background-color 0.3s ease;



-ms-transition: font-size 0.3s ease, background-color 0.3s ease;



transition: font-size 0.3s ease, background-color 0.3s ease;



}





li a:hover {



font-size: 30px;



background: #f6f6f6;



}





-->



</style>



</head>



<body>



<div>



<h2>Navigasi Vertikal Sederhana</h2>



<ul>



<li><a href="#">Menu 1</a></li>



<li><a href="#">Menu 2</a></li>



<li><a href="#">Menu 3</a></li>



<li><a href="#">Menu 4</a></li>



<li><a href="#">Menu 5</a></li>



</ul>



</div>



</body>



</html>

kalau sudah  dicopas dan disimpan dengan benar maka tampilannya akan seperti gambar dibawah :