Datepicker adalah widget popup kalender yang memungkinkan pengguna memilih tanggal dari kalender dan/atau waktu dari rentang waktu. Menurut wikipedia MySQL merupakan sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS. MySQL hadir dengan beberapa tipe data, salah satunya untuk menyimpan tanggal dalam sistem basis datanya: DATE, TIMESTAMP, DATETIME dan YEAR. MySQL telah ditetapkan sebagai platform basis data pilihan karena kualitas server basis data yang tak terbantahkan. Type data DATE, TIMESTAMP, DATETIME dan YEAR banyak digunakan dalam tanggal lahir, tanggal transaksi, tanggal posting artikel, tanggal login ke system dan banyak lagi. tutorial kali ini saya akan menyimpan input dengan data type date ke database MySQL dengan PHP
APA ITU DATEPICKER BOOTSTRAP
Bootstrap datepicker adalah sebuah plugin yang mempunyai fungsi memilih tanggal dan waktu tanpa harus menggunakan kode JavaScript khusus.
Disini saya menggunakan datepicker dari bootstrap untuk menampilkan tanggal, bulan dan tahun, datepicker mempermudah user dalam memilih tanggal yang akan diinput.
Content :
- Membuat database dan table di MySQL
- Membuat file config.php
- Membuat halaman index.php (Menampilkan Datepicker)
- Membuat halaman save.php
1.Membuat database dan table di MySQL
Pertama kita akan membuat databasenya dulu berikut kodenya :
CREATE DATABASE `datadate` /*!40100 DEFAULT CHARACTER SET utf8mb4 */
lalu buat table tanggal untuk menampung hasil input berikut kodenya :
CREATE TABLE `tanggal` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`dates` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4
yang sudah mempunyai database dan table tidak perlu membuatnya lagi, cukup ikuti langkah ke 2 dan sesuaikan dengan field data type datenya yang ada di database dan table anda.
2. Membuat file config.php
file config.php berfungsi untuk melakukan koneksi ke database dan table-table yang kita butuhkan, untuk variable $server, $user, $pass, $database sesuaikan data anda, berikut kodenya :
<?php
$server = "localhost";
$user = "root";
$pass = "";
$database = "datadate";
$conn = mysqli_connect($server, $user, $pass, $database);
if (!$conn) {
die("<script>alert('Gagal tersambung dengan database.')</script>");
}
?>3. Membuat file index.php (Menampilkan Datepicker)
File index.php merupakan tampilan awal yang berisi form, input untuk tanggal (bootstrap datepicker) dan tombol submit, dihalaman inilah user akan menginput tanggal dan klik tombol submit untuk menyimpan data input ke database. disini saya menggunakan datepicker untuk input tanggal, berikut kodenya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Save data date to database MySQL</title>
</head>
<body>
<form action="save.php" method="POST" name="savebeli">
<div class="form-group col-md-3">
<label for="inputPassword4">Tanggal </label>
<input class="form-control" id="date" name="date" placeholder="mm/dd/yyyy" type="text"/>
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
<script type="text/javascript" src="asset/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="asset/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="asset/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="asset/jquery-ui.css">
<script src="asset/jquery-ui.js"></script>
<script>
$(document).ready(function(){
//menampilkan datepicker
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
});
</script>
</body>
</html>untuk file js dan css bootstrap datepicker bisa di download di sini
- https://webbaliseo.com/download/bootstrap-datepicker.min.js
- https://webbaliseo.com/download/bootstrap-datepicker3.css
- https://webbaliseo.com/download/jquery-1.11.3.min.js
- https://webbaliseo.com/download/jquery-ui.css
- https://webbaliseo.com/download/jquery-ui.js
setelah di download di include dalam index.php anda, mungkin nanti jika anda menggunakan beda versi jquery akan bentrok dengan bootstrap datepicker ini, silahkan di sesuaikan dengan kebutuhan anda.
4. Membuat file save.php
File save.php berguna untuk menyimpan data type date ke database berikut kodenya :
<?php
require 'config.php';
$tgl = date('Y-m-d', strtotime($_POST['date']));
$result = mysqli_query($conn, "INSERT INTO tanggal(dates) VALUES ('$tgl')");
if($result)
{
echo "<script>alert('Data berhasil di simpan') </script>";
echo "<script>window.location.href ='index.php'</script>";
} else {
echo "<script>alert('Data GAGAL di simpan') </script>";
echo "<script>window.location.href ='index.php'</script>";
}
?>Demikian tutorial save data type date to MySQL, happy coding…