.png)
Membuat Tags dengan PHP, AJAX dan Bootstrap Tokenfield
Pernahkah anda melihat tags di blog atau website?
Bagaimanakah cara membuatnya, kali ini kita akan membuat sistem tags dengan
plugin bootstrap tokenfield, kemudian menyimpan datanya ke database dengan PHP
dan AJAX.
langkah pertama kita buat dulu HTMLnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Bootstrap Tags with PHP and AJAX</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js" charset="utf-8"></script>
</head>
<body>
<br>
<div class="container">
<div class="row">
<h2 align="center">Insert Bootstrap tokenfield data using PHP AJAX</h2>
<br>
<div class="col-md-6" style="margin:0 auto;float:none">
<!-- pesan suksess -->
<span id="success_message"></span>
<!-- form -->
<form method="post" id="programmer_form">
<div class="form-group">
<label>Enter Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label>Enter your Skill</label>
<input type="text" name="skill" id="skill" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#skill').tokenfield({
autocomplete: {
source: ['PHP', 'Code Igniter', 'Ajax', 'JQuery', 'laravel', 'slim', 'mongo db', 'html', 'Bootstrap',
'css', 'javascript', 'JSON', 'angular js', 'node js', 'express js', 'socket.io', 'symphony',
'yii', 'mysql', 'oracle', 'xml', 'android', 'java', 'ember', 'cake php', 'git', 'Zend', 'Phalcon'],
delay: 100
},
showAutocompleteOnFocus: true
});
$('#programmer_form').on('submit', function(event){
event.preventDefault();
if ($.trim($('#name').val()).length == 0)
{
alert("Please enter your name");
return false;
}
else if ($.trim($('#skill').val()).length == 0)
{
alert("Please enter your skill");
return false;
}
else
{
var form_data = $(this).serialize();
$('#submit').attr("disabled", "disabled");
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
// untuk progress dialog atau loading
beforeSend:function(){
$('#submit').val('Submiting...');
},
// ketika suksess
success:function(data){
// jika data tidak kosong
if (data != '')
{
// kosongkan input nama
$('#name').val('');
$('#skill').tokenfield('setTokens',[]);
$('#success_message').html(data);
$('#submit').attr("disabled", false);
$('#submit').val('Submit');
}
}
});
setInterval(function(){
$('#success_message').html('');
}, 5000);
}
});
});
</script>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Bootstrap Tags with PHP and AJAX</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js" charset="utf-8"></script>
</head>
<body>
<br>
<div class="container">
<div class="row">
<h2 align="center">Insert Bootstrap tokenfield data using PHP AJAX</h2>
<br>
<div class="col-md-6" style="margin:0 auto;float:none">
<!-- pesan suksess -->
<span id="success_message"></span>
<!-- form -->
<form method="post" id="programmer_form">
<div class="form-group">
<label>Enter Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label>Enter your Skill</label>
<input type="text" name="skill" id="skill" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#skill').tokenfield({
autocomplete: {
source: ['PHP', 'Code Igniter', 'Ajax', 'JQuery', 'laravel', 'slim', 'mongo db', 'html', 'Bootstrap',
'css', 'javascript', 'JSON', 'angular js', 'node js', 'express js', 'socket.io', 'symphony',
'yii', 'mysql', 'oracle', 'xml', 'android', 'java', 'ember', 'cake php', 'git', 'Zend', 'Phalcon'],
delay: 100
},
showAutocompleteOnFocus: true
});
$('#programmer_form').on('submit', function(event){
event.preventDefault();
if ($.trim($('#name').val()).length == 0)
{
alert("Please enter your name");
return false;
}
else if ($.trim($('#skill').val()).length == 0)
{
alert("Please enter your skill");
return false;
}
else
{
var form_data = $(this).serialize();
$('#submit').attr("disabled", "disabled");
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
// untuk progress dialog atau loading
beforeSend:function(){
$('#submit').val('Submiting...');
},
// ketika suksess
success:function(data){
// jika data tidak kosong
if (data != '')
{
// kosongkan input nama
$('#name').val('');
$('#skill').tokenfield('setTokens',[]);
$('#success_message').html(data);
$('#submit').attr("disabled", false);
$('#submit').val('Submit');
}
}
});
setInterval(function(){
$('#success_message').html('');
}, 5000);
}
});
});
</script>
kemudian untuk kode PHP nya seperti dibawah:
<?php // insert data if (isset($_POST["name"])) { $connect = new PDO("mysql:host=localhost;dbname=tag","root",""); $query = "INSERT INTO programmer(name, skill) VALUES (:name, :skill)"; $statement = $connect->prepare($query); $statement->execute( array( ':name' => $_POST["name"], ':skill' => $_POST["skill"] ) ); $result = $statement->fetchAll(); $output = ''; if (isset($result)) { $output = ' <div class="alert alert-success"> Your data has been successfully saved to system </div> '; } echo $output; }
dan untuk tabel databasenya seperti ini:
-- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: 25 Sep 2017 pada 23.47 -- Versi Server: 10.1.16-MariaDB -- PHP Version: 5.6.24 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `tag` -- -- -------------------------------------------------------- -- -- Struktur dari tabel `programmer` -- CREATE TABLE `programmer` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `skill` text NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1; -- -- Dumping data untuk tabel `programmer` -- INSERT INTO `programmer` (`id`, `name`, `skill`) VALUES (1, 'Jhon Smith', 'PHP, Ajax, JQuery, css'), (2, 'Marina', 'Phalcon, Bootstrap, mongo db, angular js'); -- -- Indexes for dumped tables -- -- -- Indexes for table `programmer` -- ALTER TABLE `programmer` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `programmer` -- ALTER TABLE `programmer` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Silakan Jalankan Program anda, bila ada yang kurang jelas
atau ada yang ditanyakan silakan tinggalkan komentar dibawah, terimakasih sudah
berkunjung ke blog kami, jika artikel ini bermanfaat silakan di share
