Whatsapp
● online
- Kabel Jumper 20cm Dupont 20 cm Female to Female Pe....
- Max7219 Led Dot Matrix 32x8 Display Module For Ard....
- Dual Volt Amp Meter Digital Ampere Meter Voltmeter....
- 10X RESISTOR 1K 1KOHM 1/4W 1% METAL FILM....
- Kabel Jumper arduino Dupont Pelangi 30 cm Male to ....
- LCD 16x2 / 1602 Display Biru + I2C Backpack Sudah ....
- Push Button Tactile Switch Saklar Tombol Tinggi - ....
- DS3231SN DS3231 SN I2C RTC Module & Baterai Mo....
- Selamat Datang di Indomaker ❯ Silahkan pesan produk sesuai kebutuhan anda, kami siap melayani.
- Selamat Datang di Indomaker ❯ Silahkan pesan produk sesuai kebutuhan anda, kami siap melayani.
Cara membuat Export data dengan Filter range Tanggal
Pada kesempatan ini akan dijelaskan mengenai cara pembuatan export/download berupa file excel berdasarkan range tanggal yang dipilih. Filter ini sangat membantu dalam mendownload laporan berupa file excel sesuai kebutuhan user.
- Langkah pertama yang dilkaukan adalah mempersiapkan/membuat database. Database digunakan sesuai kebutuhan user, sebagai contoh disini kita membuat database dengan nama ‘sms’ dan membuat sebuah table dengan nama ‘data’.
2. Kemudian buat halaman index.php dengan source code berikut
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.css" />
<title>DATA</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 mt-5">
<h1 class="text-center">DATA </h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text bg-info text-white" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" id="start_date" placeholder="Start Date" readonly>
</div>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text bg-info text-white" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" id="end_date" placeholder="End Date" readonly>
</div>
</div>
</div>
<div>
<button id="filter" class="btn btn-outline-info btn-sm">Filter</button>
<button id="reset" class="btn btn-outline-warning btn-sm">Reset</button>
</div>
<div class="row mt-3">
<div class="col-md-12">
<!-- Table -->
<div class="table-responsive">
<table class="table table-borderless display nowrap" id="records" style="width:100%">
<thead>
<tr>
<th>No</th>
<th>msisdn</th>
<th>alias</th>
<th>siteid</th>
<th>tgl</th>
<th>jamm</th>
<th>jamk</th>
<th>aktivitas</th>
<th>status</th>
<th>wsms</th>
<th>timestamp</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<!-- Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<!-- Datepicker -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Datatables -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.js">
</script>
<!-- Momentjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script>
$(function() {
$("#start_date").datepicker({
"dateFormat": "yy-mm-dd"
});
$("#end_date").datepicker({
"dateFormat": "yy-mm-dd"
});
});
</script>
<script>
// Fetch records
function fetch(start_date, end_date) {
$.ajax({
url: "records.php",
type: "POST",
data: {
start_date: start_date,
end_date: end_date
},
dataType: "json",
success: function(data) {
// Datatables
var i = "1";
$('#records').DataTable({
"data": data,
// buttons
"dom": "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
],
// responsive
"responsive": true,
"columns": [{
"data": "no",
"render": function(data, type, row, meta) {
return i++;
}
},
{
"data": "msisdn"
},
{
"data": "alias"
},
{
"data": "siteid"
},
{
"data": "tgl",
"render": function(data, type, row, meta) {
return moment(row.tgl).format('DD-MM-YYYY');
}
},
{
"data": "jamm"
},
{
"data": "jamk"
},
{
"data": "aktivitas"
},
{
"data": "status"
},
{
"data": "wsms"
},
{
"data": "timestamp"
},
]
});
}
});
}
fetch();
// Filter
$(document).on("click", "#filter", function(e) {
e.preventDefault();
var start_date = $("#start_date").val();
var end_date = $("#end_date").val();
if (start_date == "" || end_date == "") {
alert("both date required");
} else {
$('#records').DataTable().destroy();
fetch(start_date, end_date);
}
});
// Reset
$(document).on("click", "#reset", function(e) {
e.preventDefault();
$("#start_date").val(''); // empty value
$("#end_date").val('');
$('#records').DataTable().destroy();
fetch();
});
</script>
</body>
</html>
Beberapa plugin penting yang digunakan yaitu Datepicker, datepicker dapat digunakan untuk membantu memasukkan tanggal dengan cara memilih kalender.
3. Lalu dilanjutkan membuat script PHP ‘records.php’
<?php
include 'model.php';
$model = new Model();
if (isset($_POST['start_date']) && isset($_POST['end_date'])) {
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];
$rows = $model->date_range($start_date, $end_date);
} else {
$rows = $model->fetch();
}
echo json_encode($rows);
4. Selanjutnya kita membuat sebuah model untuk mengambil data dari database dan mengambil data tanggal yang digunakan untuk dimasukan kedalam filter range tanggal.
<?php
class Model
{
private $server = "localhost";
private $username = "root";
private $password = "";
private $db = "sms";
private $conn;
public function __construct()
{
try {
$this->conn = new mysqli($this->server, $this->username, $this->password, $this->db);
} catch (\Throwable $th) {
//throw $th;
echo "Connection error " . $th->getMessage();
}
}
public function fetch()
{
$data = [];
$query = "SELECT * FROM `data`";
if ($sql = $this->conn->query($query)) {
while ($row = mysqli_fetch_assoc($sql)) {
$data[] = $row;
}
}
return $data;
}
public function date_range($start_date, $end_date)
{
$data = [];
if (isset($start_date) && isset($end_date)) {
$query = "SELECT * FROM `data` WHERE `tgl` > '$start_date' AND `tgl` < '$end_date'";
if ($sql = $this->conn->query($query)) {
while ($row = mysqli_fetch_assoc($sql)) {
$data[] = $row;
}
}
}
return $data;
}
}
- Apabila sudah selesai maka tampilannya akan seperti berikut. Terdepat fitur untuk mengeksport sebuah excel berdasarkan range tanggal yang dipilih sesuai dengan kebutuhan user. Selain itu juga terdapat button untuk mendownload file dengan format CSV,Excel dan PDF.
Cara membuat Export data dengan Filter range Tanggal
Sensor suara merupakan sensor yang dapat mengubah besaran suara menjadi besaran listrik dimana nilai diperoleh dari besarnya gelombang suara... selengkapnya
Motor servo adalah salah satu jenis motor listrik yang memiliki feedback berupa sensor posisi. Dengan adanya feedback tersebut, motor... selengkapnya
Sensor Inframerah atau infrared (IR) adalah sensor yang dapat mendeteksi hambatan menggunakan cahaya inframerah yang dipantulkan. Sensor ini memiliki... selengkapnya
Tombol adalah salah satu komponen input paling sederhana namun sangat penting dalam berbagai proyek elektronika. Dalam tutorial ini, kamu akan... selengkapnya
Siapa yang nggak kenal dengan running text? Running text merupakan sebuah teks berjalan pada sebuah papan yang berisi led-led... selengkapnya
Hallo semua, pada artikel kali saya ini akan membahas kembali seputar push button switch dimana pada artikel yang sebelumnya... selengkapnya
Mengendalikan LED dengan tombol bisa dilakukan dengan berbagai cara. Kali ini, kamu akan mempelajari dua metode umum dan sangat berguna:... selengkapnya
7 segment merupakan sebuah display yang berfungsi menampilkan sebuah karakter baik huruf maupun digit angka. Namun untuk huruf sangat... selengkapnya
LoRa merupakan singkatan dari Long Range, dimana module ini menggunakan frekuensi radio dengan jarak yang jauh dan konsumsi daya... selengkapnya
Sensor LM35 merupakan sebuah sensor yang dapat mendeteksi suhu ruangan dengan cara mengubah besaran suhu menjadi besaran listrik dalam... selengkapnya
Dimmer AC 220 Volt 4000 Watt + Casing Aluminium Potensiometer untuk mengatur tegangan output min/max pada tegangan AC PLN 220V…. selengkapnya
Rp 52.500
Spesifikasi : – 16×2 – Warna Biru – Tegangan kerja : 5v – Sudah include module I2C Backpack dan tersolder… selengkapnya
Rp 30.000
Kabel Jumper Dupont Pelangi 10 cm male to male 1 lembar = 40 kabel
Rp 13.000
Product Name: Tactile Switch; Material: Metal, Plastic Package Content: 30 Pcs x Tactile Switch; Main Color: Black, Silver Tone Total… selengkapnya
Rp 400
Bagaimana jika mikrokontroler yang anda gunakan tidak memiliki port ADC. atau anda masih kurang dengan spesifikasi resolusi ADC yang disediakan… selengkapnya
Rp 65.000
2000W SCR Electronic Voltage Regulator Speed Controller Dimmer Thermostat Aplikasi : Kontrol temperature heater, kontrol kecepatan fan/bor tangan/gurinda tangan, kompor… selengkapnya
Rp 19.500
Tang Crimping Press Skun Ratchet YTH SN-48B Model YTH SN-48B FOR NON INSULATED TERMINAL YTH SN-48B dengan mata Press 0.5… selengkapnya
Rp 150.000
Modul sensor tegangan AC bolak balik 3 fasa ini menggunakan optocoupler sehingga tegangan input (AC) tidak akan mengganggu/membahayakan tegangan output… selengkapnya
Rp 57.000
Support terus UKM indonesia dengan membeli produk-produk dalam negeri. Untuk kualitas tidak usah diragukan, udah kita tes QC dengan sangat… selengkapnya
Rp 8.500Cara membuat Export data dengan Filter range Tanggal
Kategori
Artikel Terkait
-
Bikin Stabilizer 1-Axis Low Budget Pakai Arduino dan PID
-
Jaga Tanaman Tetap Happy dengan Sistem Irigasi Pintar Berbasis PID dan Arduino
-
Tutorial Kendali Kecepatan Motor DC Arduino PID
-
Sistem Kendali Suhu pada Inkubator Penetasan Telur Berbasis PID Diskrit Menggunakan Sensor DHT11 dan Aktuator Lampu Pijar
- Cara Mengatur Kecepatan Motor DC dengan PWM Raspberry Pi dan TB6612FNG
Saat ini belum tersedia komentar.