Wednesday, August 23, 2017

Search Engine dengan PHP, PDO & MySQL

Masalah yang muncul

Search Enggine merupakan komponen fundamental, hampir semua aplikasi berbasis web menggunakan search engine, degan search engine mereka dapat menyari suata data dari banyak data yang ada di database. Masalah ini saya dapat  ketika hampir semua orang mencari data dan mengetikan di kolom search engine tidak sesuai dengan data yang ada di database. SQL adalah bahasa yang tepat untuk masukan yang sesuai persis dengan data dalam database.


Solusi

Kebanyakan orang membuat SQL queri menggunakan wildcard (%). Script yang saya bagikan ini sangat bermanfaat buat penggunanya dan dapat mengexplore isi database sesuai yang di inginkan, misalkan ingin mencari data karyawan dengan nama, maka mereka akan membutuhkan semua data nama karyawan. coba lihat script dibawah ini
SELECT name, street_address, phone FROM employees WHERE name = '$users_input'

Dalam contoh ini, kesederhanaan mengabaikan jelas resiko SQL injection, informasi karyawan hanya dapat diambil jika pengguna memasukan dengan nama yang tepat. Misalkan mencari “tum” ketika nama karyawan dalam database adalah “tumiem” tidak mendapatkan hasil apa-apa jika ini menggunakan wildcard(%). Disini saya ingin membagikan  cara mencari nama karyawan hanya dengan bagian dari nama karyawan tersebut dan mendapatkan hasil yang sesuai. Lihat script dibawah ini.
SELECT name, street_address, phone FROM employees WHERE name LIKE '%$users_input%'

Perhatikan wildcard(%) yang berada di antara user_input, sebagian wildcard(%). Akan cocok setiap mencari nama “tum” dengan queri “tumiem” dengan script yang digunakan bukan =, sebagai wildcard(%) tidak akan kompetibel jika mengunakan =,

Mesin Pencarian Mengunakan Wildcard
<?php
$q = $_POST['q'];
$search = $db->prepare("SELECT `id`, `name` FROM `users` WHERE `name` LIKE ?");
$search->execute(array("%$q%"));
foreach($search as $s) {
echo $s['name'];
}
?>
Namun script diatas agak terbatas, saya  menggunakan metode ini untuk mencari database sementara waktu dan saat itu bekerja secara memadai dan efisien, namun tidak sesuai permintaan pengguna, masih tidak bisa menampilkan hasil yang relevan, seharusnya bisa menampilkan hasil yang sama persis sesuai yang ada di database, misalkan saya mencari nama “tum” maka jika di database namanya “tumiem” maka tidak akan mendapatkan hasil apapun. Wildcard membantu mengambil data yang sesuai permintaan pengguna.

Alternatif

SQL mempunyai batasan untuk menyelesaikan masalah, sehingga satu-satunya solusi yaitu mengunakan PHP untuk menyaring hasil, kelemahan dari solusi ini jika semua baris dalam database yang diperlukan untuk diperoleh dan kemudian diurutkan. Fungsi  PHP yang terutama adalah  lenshtein(), yang menghitung jarak atau jumlah karakter. Dan metaphone() yang berfungsi menghitung string atau jarak fonetika antara dua baris. Lihat script di bawah ini

<?php
$q = $_POST['q'];
$results = array();
foreach($db->query('SELECT `id`, `name` FROM `employees`') as $name) {
if (levenshtein(metaphone($q), metaphone($name['name'])) < 3) {
array_push($results,$name['name']);
}
}
foreach ($results as $result) {
echo $result."\n";
}
?>
Untuk menambah atau mengurangi apa yang dianggap relevan, ubah jarak minimum ke nomor yang berbeda, jumlah yang lebih tinggi akan mencakup lebih luas hasil seddangkan angka yang lebik kecil cakupanya akan sedikit pula.

Tidak terrasa sudah 3 jam membuat tutorial, maklumin aja tidak bisa ngarang tulisan, makanya kata-nya belepotan, yang penting ngerti maksudnya,, heheheh

Tuesday, August 22, 2017

Notifikasi Desktop Saat Browser di Tutup

Banyak orang yang sedang mencari sebuah tutorial tentang bagaimana cara membuat notifikasi seperti difacebook saat browser ditutup tapi notifikasi tetap muncul, mungkin jika saat ini belum mendapatkan tutorial tersebut bisa di bilang anda beruntung sudah nemu tutorial ini, dan paling tidak ada sedikit gambaran, walaupun notifikasi ini tidak sama persis seperti yang ada di pikiran anda. mungkin perlu dioprek sedikit saja sesuai keinginan,

Notifikasi Desktop  Saat Browser di Tutup

Setelah sudah mengerti, sebenarnya tidak sulit untuk membuat sebuah notifikasi seperti diatas, anda bilang sulit karena belum berusaha dan mencoba mencari refrensi atau tutorial.
Jika anda penasaran ingin melihat scripnya silahkan di copy script di bawah ini

Ini adalah button yang saat diclick maka notifikasi akan muncul, walaupun browser di tutup
<button onclick="notifyMe()">Pinjam Janda Sebentar</button>

Javascript letakan dimana saja terserah anda, yang pasti di dalam project anda, bukan di project orang
function notifyMe() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted")
Notification.requestPermision();
else {
var notification = new Notification('Script Program', {
icon: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA5tgiWMhHn7PYspn-yeGTTEiutqydf9gsW9m9oaDikXPhw5Iv1LOBLU7Mh63bcfprFNRkrRDMBxVwVdU-Zs2mnz7BfLIpvIEJpLv-82ZgWmcIRcAFxomNQDEvCUHEO2YXTlMs5V_p3iY/s113/Untitled-1.png',
body: "Ada yang Baru dari Script Program",
});

notification.onclick = function () {
window.open("https://codinkphp.blogspot.co.id/");
};
}
}

Setelah selesai tinggal di running dan dilihat sambil ngopi.. heheheheeh
Masih tidak mau copy paste? yaudah saya kasih link downloadnya..
Download http://cogismith.com/a1Y 

Monday, August 21, 2017

Membuat Laporan dengan FPDF

Setelah saya melihat banya pertanyaan yang muncul di group facebook mengenani bagaiman cara membuat laporan dengan PDF, kali ini saya akan membuat tutorial bagaimana cara membuat laporan dengan PDF, saya ambil contoh dari projrk skripsi saya dulu yang penampakanya seperti dibawah ini, contoh ini  saya buat berdasarkan kebutuhan saat mencetak tiket. untuk gambar saya buat dari coreldraw.

Membuat Laporan dengan FPDF Tiket bus GMS


Untuk membuat output PDF seperti gambar diatas adapun beberapa file yang di gunakan seperti:
1. File PDF yang nanti diinclude di header Script. untuk mendapatkannya bisa di download http://ceesty.com/q21zNe
2. File Berupa gambar agar terlihat profesional seperti aslinya, stap yang ini opsional, karena    tergantung kebutuhan


Untuk Scriptnya bisa dilihat dibawah ini.
<?php
include '../koneksi.php';
require('../../assets/pdf/fpdf.php');
$pdf = new FPDF("L","cm","A4");
$pdf->SetMargins(2.5,1,0.5);
$pdf->AliasNbPages();
$pdf->AddPage();
$pdf->SetFont('Times','B',14);
$pdf->Image('../../assets/img/lo.png',1.6,1,2,2);
$pdf->SetX(4);
$pdf->MultiCell(19.5,0.5,'PT. Gajah Mulia Sejahtera',0,'L');
$pdf->SetFont('Arial','B',9);
$pdf->SetX(4);
$pdf->MultiCell(19.5,0.5,'Telpon : (021) 8983 4339, 8983 4340 Fax. (021) 88983 4340',0,'L');
$pdf->SetFont('Arial','B',9);
$pdf->SetX(4);
$pdf->MultiCell(19.5,0.5,'JL. Industri Jababeka No.65 Pasir Gombong, Cikarang Utara, Bekasi',0,'L');
$pdf->SetX(4);
$pdf->MultiCell(19.5,0.5,'website : www.gms.com email : bis_gms@yahoo.com',0,'L');
$pdf->Line(1,3.1,28.5,3.1);
$pdf->SetLineWidth(0.1);
$pdf->Line(1,3.2,28.5,3.2);
$pdf->SetLineWidth(0);
$pdf->ln(1);
$pdf->SetFont('Arial','B',14);
$pdf->Cell(25.5,0.7,"Laporan Customer",0,10,'C');
$pdf->ln(1);
$pdf->SetFont('Arial','B',10);
$pdf->Cell(5,0.7,"Di cetak pada : ".date("D-d/m/Y"),0,0,'C');
$pdf->ln(1);
$pdf->SetFont('Arial','B',10);
$pdf->Cell(1, 0.7, 'No', 1, 0, 'C');
$pdf->Cell(2.5, 0.7, 'No Tiket', 1, 0, 'C');
$pdf->Cell(2.5, 0.7, 'No Pesan', 1, 0, 'C');
$pdf->Cell(3.5, 0.7, 'Nama', 1, 0, 'C');
$pdf->Cell(3, 0.7, 'Tujuan', 1, 0, 'C');
$pdf->Cell(3, 0.7, 'No HP', 1, 0, 'C');
$pdf->Cell(2.5, 0.7, 'TGL', 1, 0, 'C');
$pdf->Cell(3, 0.7, 'Kelas', 1, 0, 'C');
$pdf->Cell(1.7, 0.7, 'No kursi', 1, 0, 'C');
$pdf->Cell(3, 0.7, 'Kd Bus', 1, 0, 'C');
$pdf->ln(0.7);
$pdf->SetFont('Arial','',10);
$sql = myquery("SELECT pemesanan.id_pemesanan, detail_pemesanan.no_tiket, pemesanan.no_pemesanan, detail_pemesanan.nama, detail_pemesanan.no_hp, detail_pemesanan.no_seat, pemesanan.tujuan, pemesanan.tgl_berangkat, pemesanan.kd_bus, pemesanan.class_bus FROM pemesanan INNER JOIN detail_pemesanan ON pemesanan.id_pemesanan = detail_pemesanan.id_pemesanan");
$no=1;
while ($lihat = mysqli_fetch_array($sql)) {
$pdf->Cell(1, 0.7, $no , 1, 0, 'C');
$pdf->Cell(2.5, 0.7, $lihat['no_tiket'],1, 0, 'C');
$pdf->Cell(2.5, 0.7, $lihat['no_pemesanan'],1, 0, 'C');
$pdf->Cell(3.5, 0.7, $lihat['nama'], 1, 0,'C');
$pdf->Cell(3, 0.7, $lihat['tujuan'],1, 0, 'C');
$pdf->Cell(3, 0.7, $lihat['no_hp'], 1, 0,'C');
$pdf->Cell(2.5, 0.7, $lihat['tgl_berangkat'],1, 0, 'C');
$pdf->Cell(3, 0.7, $lihat['class_bus'],1, 0, 'C');
$pdf->Cell(1.7, 0.7, $lihat['no_seat'], 1, 0,'C');
$pdf->Cell(3, 0.7, $lihat['kd_bus'], 1, 1,'C');
$no++;
}
$pdf->Output("laporan_customer.pdf","I");
?>

Sedikit penjelasan tentang script.

Script diatas mengunakan koneksi untuk menghubungkan ke database
include '../koneksi.php';

Menarik file fpdf jika yang ini wajib digunakan
require('../../assets/pdf/fpdf.php');

Jenis kertas yang digunakan dan posisi laporan, Bisa landscape dan bisa potret, A4 adalah jenis kertas
$pdf = new FPDF("L","cm","A4");

Jika yang ini adalah menarik gambar yang akan digunakan biasanya Logo, tapi ini saya gambar full.
$pdf->Image('../../assets/img/lo.png',1.6,1,2,2);

Ini file query yang berfungsi untuk menarik data dari database, queri ini sama dengan query yang ada di view database,
$sql = myquery("SELECT pemesanan.id_pemesanan, detail_pemesanan.no_tiket, pemesanan.no_pemesanan, detail_pemesanan.nama, detail_pemesanan.no_hp, detail_pemesanan.no_seat, pemesanan.tujuan, pemesanan.tgl_berangkat, pemesanan.kd_bus, pemesanan.class_bus FROM pemesanan INNER JOIN detail_pemesanan ON pemesanan.id_pemesanan = detail_pemesanan.id_pemesanan");

yang ini adalah nama file ketika didownload, jika namanya di ganti mukidi maka nama yang muncul saat downloadpun jga mukidi :-)
$pdf->Output("laporan_customer.pdf","I");


Yaang terakir penjelasan angka dan huruf, jika angka itu untuk mengatur panjang, lebar dan tinggi posisi Tulisan.
Masih ada cara yang lebih praktis, bisa mengunakan DOMPDF, tinggal searcing aja di google Buanyak....
Sekian tutorial dari saya semoga bermanfaant buat kalian semua, jika sekiranya bermanfaan untuk anda jangan lpa like fans pages kami. tinggalkan komentar untuk bertanya

Sunday, August 20, 2017

Membuat Navbar Bertingkat Dengan Boostrap

Banyak jenis dan model navbar dari boostrap, salah satunya navbar bertingkat, komponen ini ada icon tanda panah jika tanda panah di klik maka akan bia buka dan tutup tergantung kondisi navbar,

Membuat Navbar Bertingkat Dengan Boostrap

Stap scripnya adalah.

1. Download dahulu komponen boostrap bisa di download https://getbootstrap.com/docs/3.3/getting-started/
2. Masukan script HTML seperti dibawah ini
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">codinkphp.blogspot.co.id</div>
<div class="panel-body">
<!-- TREEVIEW CODE -->
<ul class="treeview">
<li><a href="#">Index</a>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a>
<ul>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a>
<ul>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
</ul>
</li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
</ul>
</li>
<li><a href="#">Stick</a></li>
</ul>
</li>
<li><a href="#">Branch</a></li>
<li><a href="#">Branch</a></li>
</ul>
</li>
</ul>
<!-- TREEVIEW CODE -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Treeview Div</div>
<div class="panel-body">
<!-- TREEVIEW CODE -->
<div class="treeview">
<ul>
<li><a href="#">Tree</a>
<ul>
<li><a href="#">Branch</a></li>
<li><a href="#">Branch</a>
<ul>
<li><a href="#">Stick</a></li>
<li><a href="#">Stick</a></li>
<li><a href="#">Stick</a>
<ul>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a>
<ul>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
<li><a href="#">Leaf</a></li>
</ul>
</li>
<li><a href="#">Twig</a></li>
<li><a href="#">Twig</a></li>
</ul>
</li>
<li><a href="#">Stick</a></li>
</ul>
</li>
<li><a href="#">Branch</a></li>
<li><a href="#">Branch</a></li>
</ul>
</li>
</ul>
</div>
<!-- TREEVIEW CODE -->
</div>
</div>

3. Masukan CSS
div.panel:first-child {
margin-top:20px;
}

div.treeview {
min-width: 100px;
min-height: 100px;

max-height: 256px;
overflow:auto;

padding: 4px;

margin-bottom: 20px;

color: #369;

border: solid 1px;
border-radius: 4px;
}
div.treeview ul:first-child:before {
display: none;
}
.treeview, .treeview ul {
margin:0;
padding:0;
list-style:none;

color: #369;
}
.treeview ul {
margin-left:1em;
position:relative
}
.treeview ul ul {
margin-left:.5em
}
.treeview ul:before {
content:"";
display:block;
width:0;
position:absolute;
top:0;
left:0;
border-left:1px solid;

/* creates a more theme-ready standard for the bootstrap themes */
bottom:15px;
}
.treeview li {
margin:0;
padding:0 1em;
line-height:2em;
font-weight:700;
position:relative
}
.treeview ul li:before {
content:"";
display:block;
width:10px;
height:0;
border-top:1px solid;
margin-top:-1px;
position:absolute;
top:1em;
left:0
}
.tree-indicator {
margin-right:5px;

cursor:pointer;
}
.treeview li a {
text-decoration: none;
color:inherit;

cursor:pointer;
}
.treeview li button, .treeview li button:active, .treeview li button:focus {
text-decoration: none;
color:inherit;
border:none;
background:transparent;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
outline: 0;
}
.panel-heading{
font-weight:800;
color: #369;
}

4. Masukan JS
$.fn.extend({
treeview: function() {
return this.each(function() {
// Initialize the top levels;
var tree = $(this);

tree.addClass('treeview-tree');
tree.find('li').each(function() {
var stick = $(this);
});
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul

branch.prepend("<i class='tree-indicator glyphicon glyphicon-chevron-right'></i>");
branch.addClass('tree-branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');

icon.toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
$(this).children().children().toggle();
}
})
branch.children().children().toggle();

/**
* The following snippet of code enables the treeview to
* function when a button, indicator or anchor is clicked.
*
* It also prevents the default function of an anchor and
* a button from firing.
*/
branch.children('.tree-indicator, button, a').click(function(e) {
branch.click();

e.preventDefault();
});
});
});
}
});

/**
* The following snippet of code automatically converst
* any '.treeview' DOM elements into a treeview component.
*/
$(window).on('load', function () {
$('.treeview').each(function () {
var tree = $(this);
tree.treeview();
})
})

Tinggal santai jika blok ini bermanfaat bagi anda tolong like fans Page kami ya...
Happy Coding

Membuat reCapta dengaan PHP

Banyak fitur yang digunakan untuk validasi form, yang banyak digunakan akir-akir ini adalah validasi recapta. saya akan membagikan sedikit cara membuat form recapta tersebut.

Membuat re capta dengan php

1. HTML
<html>
<head>
/* Google reCaptcha JS */
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
<body>
<form action="" method="post">
Username
<input type="text" name="username" class="input" />
Password
<input type="password" name="password" class="input" />
<div class="g-recaptcha" data-sitekey="Google Site Key"></div>
<input type="submit"  value="Log In" />
<span class='msg'><?php echo $msg; ?></span>
</form>
</body>
</html>


2. Index.php
<?php
include("db.php");
session_start();

$msg='';
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$recaptcha=$_POST['g-recaptcha-response'];
if(!empty($recaptcha))
{
include("getCurlData.php");
$google_url="https://www.google.com/recaptcha/api/siteverify";
$secret='Google Secret Key';
$ip=$_SERVER['REMOTE_ADDR'];
$url=$google_url."?secret=".$secret."&response=".$recaptcha."&remoteip=".$ip;
$res=getCurlData($url);
$res= json_decode($res, true);
//reCaptcha success check 
if($res['success'])
{
//Include login check code
}
else
{
$msg="Please re-enter your reCAPTCHA.";
}

}
else
{
$msg="Please re-enter your reCAPTCHA.";
}

}
?>

3. Cek Login
$username=mysqli_real_escape_string($db,$_POST['username']);
$password=md5(mysqli_real_escape_string($db,$_POST['password']));
if(!empty($username) && !empty($password))
{
$result=mysqli_query($db,"SELECT id FROM users WHERE username='$username' and passcode='$password'");
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
if(mysqli_num_rows($result)==1)
{
$_SESSION['login_user']=$username;
header("location: home.php"); //Success redirection page. 
}
else
{
$msg="Please give valid Username or Password.";
}

}
else
{
$msg="Please give valid Username or Password.";
}

4. getCurlData.php
<?php
function getCurlData($url)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_TIMEOUT, 10);
curl_setopt($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16");
$curlData = curl_exec($curl);
curl_close($curl);
return $curlData;
}
?>

5. DB.php
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Mau download?? http://clkmein.com/q2L1LY

Membuat Form Dengan Validasi Wizard Boostrap

Mempercantik tampilan website adalah salah satu cara agar pengunjung betah di website kita, semakin cantik tampilan website kita semakin bvanyak jga pengunjung yang mampir, kali ini saya membagikan tutorial bagaimana cara membuat form input agar tampil cantik dan profesional yaitu dengan model tabs. sedikit penjelasan tentang form seperti gambar di bawah, dmana jika form sudah di isi dan di save maka lingkaran warna biru akan pindah ke tabs sebelahnya yaitu icon pensin.

membuat input dengan tab melingkar
Tidak usah panjang lebar ya ngomongya, langsung aja saya kasih source codenya.

1. HTML Silahkan di copy di dalam projek anda
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">

<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>

<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>

<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>

<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<div class="step1">
<div class="row">
<div class="col-md-6">
<label for="exampleInputEmail1">First Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="First Name">
</div>
<div class="col-md-6">
<label for="exampleInputEmail1">Last Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Last Name">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="col-md-6">
<label for="exampleInputEmail1">Confirm Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="exampleInputEmail1">Mobile Number</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="col-md-6">
<label for="exampleInputEmail1">Email address</label>
<div class="row">
<div class="col-md-3 col-xs-3">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="col-md-9 col-xs-9">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</div>
</div>
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<div class="step2">
<div class="step_21">
<div class="row">

</div>
</div>
<div class="step-22">

</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<div class="step33">
<h5><strong>Basic Details</strong></h5>
<hr>
<div class="row mar_ned">

</div>
<div class="row mar_ned">
<div class="col-md-4 col-xs-3">
<p align="right"><stong>Date of birth</stong></p>
</div>
<div class="col-md-8 col-xs-9">
<div class="row">
<div class="col-md-4 col-xs-4 wdth">
<select name="visa_status" id="visa_status" class="dropselectsec1">
<option value="">Date</option>
<option value="2">1</option>
<option value="1">2</option>
<option value="4">3</option>
<option value="5">4</option>
<option value="6">5</option>
<option value="3">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<div class="col-md-4 col-xs-4 wdth">
<select name="visa_status" id="visa_status" class="dropselectsec1">
<option value="">Month</option>
<option value="2">Jan</option>
<option value="1">Feb</option>
<option value="4">Mar</option>
<option value="5">Apr</option>
<option value="6">May</option>
<option value="3">June</option>
<option value="7">July</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
</select>
</div>
<div class="col-md-4 col-xs-4 wdth">
<select name="visa_status" id="visa_status" class="dropselectsec1">
<option value="">Year</option>
<option value="2">1990</option>
<option value="1">1991</option>
<option value="4">1992</option>
<option value="5">1993</option>
<option value="6">1994</option>
<option value="3">1995</option>
<option value="7">1996</option>
<option value="8">1997</option>
<option value="9">1998</option>
</select>
</div>
</div>
</div>
</div>
<div class="row mar_ned">
<div class="col-md-4 col-xs-3">
<p align="right"><stong>Marital Status</stong></p>
</div>
<div class="col-md-8 col-xs-9">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Single
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> Married
</label>
</div>
</div>
<div class="row mar_ned">
<div class="col-md-4 col-xs-3">
<p align="right"><stong>Highest Education</stong></p>
</div>
<div class="col-md-8 col-xs-9">
<select name="highest_qualification" id="highest_qualification" class="dropselectsec">
<option value=""> Select Highest Education</option>
<option value="1">Ph.D</option>
<option value="2">Masters Degree</option>
<option value="3">PG Diploma</option>
<option value="4">Bachelors Degree</option>
<option value="5">Diploma</option>
<option value="6">Intermediate / (10+2)</option>
<option value="7">Secondary</option>
<option value="8">Others</option>
</select>
</div>
</div>
<div class="row mar_ned">
<div class="col-md-4 col-xs-3">
<p align="right"><stong>Specialization</stong></p>
</div>
<div class="col-md-8 col-xs-9">
<input type="text" name="specialization" id="specialization" placeholder="Specialization" class="dropselectsec" autocomplete="off">
</div>
</div>
<div class="row mar_ned">
<div class="col-md-4 col-xs-3">
<p align="right"><stong>Year of Passed Out</stong></p>
</div>
<div class="col-md-8 col-xs-9">
<select name="year_of_passedout" id="year_of_passedout" class="birthdrop">
<option value="">Year</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</div>
</div>
<div class="row mar_ned">
<div class="col-md-4 col-xs-3">
<p align="right"><stong>Total Experience</stong></p>
</div>
<div class="col-md-8 col-xs-9">
<div class="row">
<div class="col-md-6 col-xs-6 wdth">
<select name="visa_status" id="visa_status" class="dropselectsec1">
<option value="">Month</option>
<option value="2">Jan</option>
<option value="1">Feb</option>
<option value="4">Mar</option>
<option value="5">Apr</option>
<option value="6">May</option>
<option value="3">June</option>
<option value="7">July</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
</select>
</div>
<div class="col-md-6 col-xs-6 wdth">

</div>
</div>
</div>
</div>
<div class="row mar_ned">

</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<div class="step44">
<h5>Completed</h5>


</div>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>

2. CSS
.wizard {
margin: 20px auto;
background: #fff;
}

.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}

.wizard > div.wizard-inner {
position: relative;
}

.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}

span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;

}
.wizard li.active span.round-tab i{
color: #5bc0de;
}

span.round-tab:hover {
color: #333;
border: 2px solid #333;
}

.wizard .nav-tabs > li {
width: 25%;
}

.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
}
.step_21 {
border :1px solid #eee;
border-radius:5px;
padding:10px;
}
.step33 {
border:1px solid #ccc;
border-radius:5px;
padding-left:10px;
margin-bottom:10px;
}
.dropselectsec {
width: 68%;
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
outline: none;
font-weight: normal;
}
.dropselectsec1 {
width: 74%;
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
outline: none;
font-weight: normal;
}
.mar_ned {
margin-bottom:10px;
}
.wdth {
width:25%;
}
.birthdrop {
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
width: 16%;
outline: 0;
font-weight: normal;
}


/* according menu */
#accordion-container {
font-size:13px
}
.accordion-header {
font-size:13px;
background:#ebebeb;
margin:5px 0 0;
padding:7px 20px;
cursor:pointer;
color:#fff;
font-weight:400;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px
}
.unselect_img{
width:18px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.active-header {
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
background:#F53B27;
}
.active-header:after {
content:"\f068";
font-family:'FontAwesome';
float:right;
margin:5px;
font-weight:400
}
.inactive-header {
background:#333;
}
.inactive-header:after {
content:"\f067";
font-family:'FontAwesome';
float:right;
margin:4px 5px;
font-weight:400
}
.accordion-content {
display:none;
padding:20px;
background:#fff;
border:1px solid #ccc;
border-top:0;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px
}
.accordion-content a{
text-decoration:none;
color:#333;
}
.accordion-content td{
border-bottom:1px solid #dcdcdc;
}



@media( max-width : 585px ) {

.wizard {
width: 90%;
height: auto !important;
}

span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}

.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}

.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
} margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}

.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}

.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}

.wizard .nav-tabs > li a:hover {
background: transparent;
}

.wizard .tab-pane {
position: relative;
padding-top: 50px;
}

.wizard h3 {
margin-top: 0;
}
.step1 .row {
margin-bottom:10px;
}


3. JS
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();

//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

var $target = $(e.target);

if ($target.parent().hasClass('disabled')) {
return false;
}
});

$(".next-step").click(function (e) {

var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);

});
$(".prev-step").click(function (e) {

var $active = $('.wizard .nav-tabs li.active');
prevTab($active);

});
});

function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}


//according menu

$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');

//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({});

//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');

// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}

else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});

return false;
});

Selesai tinggal santai.. heheheheh
Jika masih males copy paste nih saya kasih link  http://ceesty.com/q21VJv