Filter rentang tanggal di php

Question

CSV (nilai yang dipisahkan koma) adalah format file terkenal untuk menyimpan data tabular. Dalam tutorial kami sebelumnya, kami telah menerbitkan tutorial untuk Mengekspor Data ke CSV dengan PHP dan MySQL dan mendapatkan tanggapan yang sangat besar dari pembaca kami. Banyak dari mereka yang meminta tutorial untuk mengekspor data ke CSV dengan filter rentang tanggal

Table of Contents Show

Struktur Basis Data MySQL
Bagan Integrasi. js di dalam pustaka jQuery DataTable
Filter Rentang Tanggal dengan Tabel Data dan Bagan. js menggunakan Pemilih Rentang Tanggal
Bagaimana cara memfilter rentang tanggal di PHP?
Bagaimana Anda membuat filter rentang tanggal?
Apa itu filter rentang tanggal?
Bagaimana cara menampilkan data antara dua tanggal di PHP?

Jadi dalam tutorial ini Anda akan belajar cara mengekspor data ke file csv dengan filter rentang tanggal menggunakan PHP dan MySQL

Kami akan membahas tutorial ini langkah demi langkah dengan contoh langsung untuk semua catatan tampilan dengan tanggal mulai dan akhir untuk memilih rentang tanggal untuk memfilter data untuk diekspor ke file CSV

Struktur Basis Data MySQL

Untuk membangun aplikasi dinamis apa pun, kita harus menyimpan data ke dalam Database MySQL, Jadi di sini juga kita harus membuat satu test_order_table di mana kita harus menyimpan data pesanan selama tiga tahun terakhir. Jadi untuk menyimpan data ke dalam database, pertama kita harus membuat database ke dalam phpMyadmin lokal Anda dan di bawah itu Anda harus menjalankan skrip berikut, skrip ini akan membuat tabel di database MySQL Anda. Di sini kami hanya berbagi definisi tabel tetapi ketika Anda mengunduh kode sumber, maka di bawah kode sumber itu Anda dapat menemukannya. Skrip SQL dengan data sampel dengan query insert, jadi ketika Anda telah menjalankan skrip itu, maka tabel akan dibuat dengan data sampel


--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `test_order_table`
--

CREATE TABLE `test_order_table` (
  `order_id` int(11) NOT NULL,
  `order_number` int(11) NOT NULL,
  `order_quantity` decimal(10,2) NOT NULL,
  `price_per_unit` decimal(10,2) NOT NULL,
  `order_total` decimal(10,2) NOT NULL,
  `order_date` date NOT NULL,
  `order_status` varchar(100) NOT NULL,
  `product_name` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `test_order_table`
--
ALTER TABLE `test_order_table`
  ADD PRIMARY KEY (`order_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `test_order_table`
--
ALTER TABLE `test_order_table`
  MODIFY `order_id` int(11) NOT NULL AUTO_INCREMENT;

Bagan Integrasi. js di dalam pustaka jQuery DataTable

Dalam tutorial ini, pertama kita ingin mengintegrasikan Chart. js ke dalam pustaka jQuery DataTable. Jadi sebelum mengintegrasikan Bagan. js ke dalam pustaka jQuery DataTable. Pertama kami ingin memuat data MySQL dari ke pustaka jQuery DataTable dengan pemrosesan data di sisi server

Jadi pertama-tama kami ingin menyertakan tautan perpustakaan yang diperlukan di tajuk index. php di header halaman web yang dapat Anda lihat di sini


<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="library/bootstrap-5/bootstrap.min.css" rel="stylesheet" />
        <link href="library/daterangepicker.css" rel="stylesheet" />
        <link href="library/dataTables.bootstrap5.min.css" rel="stylesheet" />

        <script src="library/jquery.min.js"></script>
        <script src="library/bootstrap-5/bootstrap.bundle.min.js"></script>
        <script src="library/moment.min.js"></script>
        <script src="library/daterangepicker.min.js"></script>
        <script src="library/Chart.bundle.min.js"></script>
        <script src="library/jquery.dataTables.min.js"></script>
        <script src="library/dataTables.bootstrap5.min.js"></script>

        <title>Advance Date Range Filter in PHP MySQL using Date Range Picker</title>
    </head>

_

Setelah ini, kita harus membuat satu tabel HTML dengan id order_table dan kita akan mengonversi tabel HTML sederhana ini menjadi tabel advance dengan fitur inbuild seperti searching, pagination, sorting, paging dll dengan menggunakan jQuery DataTable library


<table class="table table-striped table-bordered" id="order_table">
                            <thead>
                                <tr>
                                    <th>Order Number</th>
                                    <th>Order Value</th>
                                    <th>Order Date</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

Setelah ini, kita telah bergerak untuk menulis kode jQuery untuk menginisialisasi plugin jQuery DataTable pada tabel HTML dengan menggunakan metode DataTable(). Di bawah metode ini kita harus menentukan opsi yang berbeda untuk mengirim permintaan Ajax untuk mengambil data tabel MySQL dan menerima data dalam format JSON dan menampilkan data pada halaman web di DataTable dalam format tabular


fetch_data();

    function fetch_data()
    {
        var dataTable = $('#order_table').DataTable({
            "processing" : true,
            "serverSide" : true,
            "order" : [],
            "ajax" : {
                url:"action.php",
                type:"POST",
                data:{action:'fetch'}
            },
     });
}

Jadi skrip ini akan mengirimkan permintaan Ajax untuk bertindak. php untuk mengambil data dari tabel MySQL

Setelah ini, kita harus beraksi. php dan di sini kita harus menulis skrip PHP untuk mengambil data dari text_order_table dan mengirim kembali data ke permintaan Ajax dalam format JSON


<?php

//action.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

if(isset($_POST["action"]))
{
	if($_POST["action"] == 'fetch')
	{
		$order_column = array('order_number', 'order_total', 'order_date');

		$main_query = "
		SELECT order_number, SUM(order_total) AS order_total, order_date 
		FROM test_order_table 
		";

		$search_query = 'WHERE order_date <= "'.date('Y-m-d').'" AND ';


		if(isset($_POST["search"]["value"]))
		{
			$search_query .= '(order_number LIKE "%'.$_POST["search"]["value"].'%" OR order_total LIKE "%'.$_POST["search"]["value"].'%" OR order_date LIKE "%'.$_POST["search"]["value"].'%")';
		}

		$group_by_query = " GROUP BY order_date ";

		$order_by_query = "";

		if(isset($_POST["order"]))
		{
			$order_by_query = 'ORDER BY '.$order_column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
		}
		else
		{
			$order_by_query = 'ORDER BY order_date DESC ';
		}

		$limit_query = '';

		if($_POST["length"] != -1)
		{
			$limit_query = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
		}

		$statement = $connect->prepare($main_query . $search_query . $group_by_query . $order_by_query);

		$statement->execute();

		$filtered_rows = $statement->rowCount();

		$statement = $connect->prepare($main_query . $group_by_query);

		$statement->execute();

		$total_rows = $statement->rowCount();

		$result = $connect->query($main_query . $search_query . $group_by_query . $order_by_query . $limit_query, PDO::FETCH_ASSOC);

		$data = array();

		foreach($result as $row)
		{
			$sub_array = array();

			$sub_array[] = $row['order_number'];

			$sub_array[] = $row['order_total'];

			$sub_array[] = $row['order_date'];

			$data[] = $sub_array;
		}

		$output = array(
			"draw"			=>	intval($_POST["draw"]),
			"recordsTotal"	=>	$total_rows,
			"recordsFiltered" => $filtered_rows,
			"data"			=>	$data
		);

		echo json_encode($output);
	}
}

?>

_

Jadi skrip di atas akan mengambil data dari tabel MySQL berdasarkan format data yang diperlukan untuk memuat data di jQuery DataTable dan skrip di atas akan mengirim data ke ajax yang diperlukan dalam format JSON

Sekarang kita harus menggunakan data yang sama untuk membuat diagram batang dengan menggunakan Chart. js, jadi untuk ini, kita harus pergi ke index. php dan di bawah file itu kita harus pergi ke kode jQuery dari metode DataTable ().

Di bawah metode DataTable() ini kita harus menambahkan drawCallback. fungsi(pengaturan) fungsi panggilan balik. Fungsi ini telah menerima data DataTable ketika DataTable telah menggambar ulang data lengkap dan pada setiap acara fungsi panggilan balik ini telah menerima data

Jadi untuk membuat grafik, pertama kita harus mendefinisikan satu var sale_chart; . js bagan perpustakaan maka itu akan menampilkan bagan lama di halaman web. Jadi untuk ini kita harus mendefinisikan grafik variabel global

Setelah ini, di bawah fungsi ini, kita harus mengambil data dari variabel argumen pengaturan ini dan menyimpannya di bawah variabel lokal ini dalam format array. Dan selanjutnya kita harus mendefinisikan Chart. konfigurasi js untuk membuat bagan batang dinamis dengan menggunakan data DataTable


fetch_data();

    var sale_chart;

    function fetch_data()
    {
        var dataTable = $('#order_table').DataTable({
            "processing" : true,
            "serverSide" : true,
            "order" : [],
            "ajax" : {
                url:"action.php",
                type:"POST",
                data:{action:'fetch'}
            },
            "drawCallback" : function(settings)
            {
                var sales_date = [];
                var sale = [];

                for(var count = 0; count < settings.aoData.length; count++)
                {
                    sales_date.push(settings.aoData[count]._aData[2]);
                    sale.push(parseFloat(settings.aoData[count]._aData[1]));
                }

                var chart_data = {
                    labels:sales_date,
                    datasets:[
                        {
                            label : 'Sales',
                            backgroundColor : 'rgba(153, 102, 255)',
                            color : '#fff',
                            data:sale
                        }
                    ]   
                };

                var group_chart3 = $('#bar_chart');

                if(sale_chart)
                {
                    sale_chart.destroy();
                }

                sale_chart = new Chart(group_chart3, {
                    type:'bar',
                    data:chart_data
                });
            }
        });
    }

Jadi skrip ini akan membuat diagram batang dinamis dengan data render dari jQuery DataTable. Jadi pada setiap server yang memproses data DataTable menggunakan Ajax maka data Chart juga akan diperbarui ketika data jQuery DataTable telah diubah. Jadi masih di bawah tutorial ini, kami telah mengintegrasikan Bagan. js menjadi jQuery DataTable menggunakan Ajax dengan pemrosesan data sisi Server menggunakan PHP dan database MySQL

Filter Rentang Tanggal dengan Tabel Data dan Bagan. js menggunakan Pemilih Rentang Tanggal

Setelah kami mengintegrasikan Bagan. js ke dalam jQuery DataTables sekarang kami ingin memfilter Data DataTables menggunakan filter rentang tanggal dan ketika data tabel DataTable telah difilter, maka Bagan. js bagan batang harus digambar ulang bagan dengan data DataTable yang diperbarui. Jadi untuk filter Rentang Tanggal dari DataTable & Chart. js data di sini kami telah menggunakan plugin JQuery Date Range Picker. Dengan menggunakan plugin ini, kita dapat menentukan beberapa rentang tanggal seperti memfilter data hari ini, data kemarin, data 7 hari terakhir, data bulan ini, data 30 hari terakhir, data bulan lalu dan plugin ini juga menyediakan filter rentang tanggal khusus, sehingga kita dapat

Untuk mengintegrasikan plugin pemilih rentang tanggal ke dalam aplikasi kita, pertama-tama kita perlu menambahkan pustaka pemilih rentang tanggal di bagian atas halaman web kita. Setelah memasukkan file library kita dapat menggunakan plugin jQuery Date Range Picker ke dalam aplikasi web kita


<link href="library/daterangepicker.css" rel="stylesheet" />
<script src="library/daterangepicker.min.js"></script>

_

Setelah ini, kita harus membuat satu kotak teks untuk menginisialisasi plugin pemilih rentang tanggal. Jadi ketika kita mengklik kotak teks maka plugin pemilih rentang tanggal akan muncul di halaman web dan di bawah kotak teks itu akan menampilkan rentang tanggal mulai dan akhir


<input type="text" id="daterange_textbox" class="form-control" readonly />

Selanjutnya kami ingin menginisialisasi plugin pemilih rentang tanggal pada kotak teks yang baru dibuat. Jadi untuk ini kita harus pergi ke bagian kode jQuery, dan di sini kita telah menulis Kode jQuery untuk menginisialisasi pustaka pemetik rentang tanggal. Dengan menggunakan metode daterangepicker() kita dapat menginisialisasi library daterangepicker. Dan di bawah metode kita dapat menentukan rentang tanggal yang telah ditentukan sebelumnya di bawah opsi rentang, dan untuk menentukan format tanggal, kita harus menentukan format tanggal di bawah fungsi format

Setelah menggunakan metode daterangepicker() ini, kita harus menulis satu fungsi callback, dengan argumen seperti tanggal mulai dan tanggal akhir. Fungsi ini akan dipanggil setiap kali metode ini dipanggil dan di bawah fungsi ini kita harus memanggil kembali fungsi fetch_date() dengan tanggal mulai dan tanggal akhir sebagai argumen untuk memfilter data dari dua rentang tanggal


<script>

$(document).ready(function(){

    fetch_data();

    var sale_chart;

    function fetch_data(start_date = '', end_date = '')
    {
        var dataTable = $('#order_table').DataTable({
            "processing" : true,
            "serverSide" : true,
            "order" : [],
            "ajax" : {
                url:"action.php",
                type:"POST",
                data:{action:'fetch', start_date:start_date, end_date:end_date}
            },
            "drawCallback" : function(settings)
            {
                var sales_date = [];
                var sale = [];

                for(var count = 0; count < settings.aoData.length; count++)
                {
                    sales_date.push(settings.aoData[count]._aData[2]);
                    sale.push(parseFloat(settings.aoData[count]._aData[1]));
                }

                var chart_data = {
                    labels:sales_date,
                    datasets:[
                        {
                            label : 'Sales',
                            backgroundColor : 'rgb(255, 205, 86)',
                            color : '#fff',
                            data:sale
                        }
                    ]   
                };

                var group_chart3 = $('#bar_chart');

                if(sale_chart)
                {
                    sale_chart.destroy();
                }

                sale_chart = new Chart(group_chart3, {
                    type:'bar',
                    data:chart_data
                });
            }
        });
    }

    $('#daterange_textbox').daterangepicker({
        ranges:{
            'Today' : [moment(), moment()],
            'Yesterday' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
            'Last 30 Days' : [moment().subtract(29, 'days'), moment()],
            'This Month' : [moment().startOf('month'), moment().endOf('month')],
            'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        format : 'YYYY-MM-DD'
    }, function(start, end){

        $('#order_table').DataTable().destroy();

        fetch_data(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));

    });

});

</script>

_

Setelah ini, kita harus beraksi. php dan di bawah file ini, kita harus menulis kueri MySQL untuk memfilter data dari dua rentang tanggal yang dapat Anda lihat di bawah


<?php

//action.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

if(isset($_POST["action"]))
{
	if($_POST["action"] == 'fetch')
	{
		$order_column = array('order_number', 'order_total', 'order_date');

		$main_query = "
		SELECT order_number, SUM(order_total) AS order_total, order_date 
		FROM test_order_table 
		";

		$search_query = 'WHERE order_date <= "'.date('Y-m-d').'" AND ';

		if(isset($_POST["start_date"], $_POST["end_date"]) && $_POST["start_date"] != '' && $_POST["end_date"] != '')
		{
			$search_query .= 'order_date >= "'.$_POST["start_date"].'" AND order_date <= "'.$_POST["end_date"].'" AND ';
		}

		if(isset($_POST["search"]["value"]))
		{
			$search_query .= '(order_number LIKE "%'.$_POST["search"]["value"].'%" OR order_total LIKE "%'.$_POST["search"]["value"].'%" OR order_date LIKE "%'.$_POST["search"]["value"].'%")';
		}



		$group_by_query = " GROUP BY order_date ";

		$order_by_query = "";

		if(isset($_POST["order"]))
		{
			$order_by_query = 'ORDER BY '.$order_column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
		}
		else
		{
			$order_by_query = 'ORDER BY order_date DESC ';
		}

		$limit_query = '';

		if($_POST["length"] != -1)
		{
			$limit_query = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
		}

		$statement = $connect->prepare($main_query . $search_query . $group_by_query . $order_by_query);

		$statement->execute();

		$filtered_rows = $statement->rowCount();

		$statement = $connect->prepare($main_query . $group_by_query);

		$statement->execute();

		$total_rows = $statement->rowCount();

		$result = $connect->query($main_query . $search_query . $group_by_query . $order_by_query . $limit_query, PDO::FETCH_ASSOC);

		$data = array();

		foreach($result as $row)
		{
			$sub_array = array();

			$sub_array[] = $row['order_number'];

			$sub_array[] = $row['order_total'];

			$sub_array[] = $row['order_date'];

			$data[] = $sub_array;
		}

		$output = array(
			"draw"			=>	intval($_POST["draw"]),
			"recordsTotal"	=>	$total_rows,
			"recordsFiltered" => $filtered_rows,
			"data"			=>	$data
		);

		echo json_encode($output);
	}
}

?>

_

Jadi di sini kode kita sudah siap dan aplikasi kita siap untuk memuat data ke plugin jQuery DataTable dan kemudian setelah kita harus memuat data DataTable ke dalam Bagan. perpustakaan js. Jadi ketika data Datatable telah diperbarui maka Chart. js bar chart akan digambar ulang dengan data yang diperbarui. Setelah ini, untuk memfilter data dan Bagan DataTable. data bagan batang js menggunakan filter rentang Tanggal, Jadi untuk filter rentang tanggal DataTable and Chart. js data bagan batang, di sini kami telah menggunakan pustaka pemilih rentang tanggal. Jadi dengan menggunakan pustaka pemilih rentang tanggal ini, kami dapat memfilter rentang tanggal DataTable dan Bagan. data bagan batang js

Jadi di sini kami telah menyelesaikan tutorial ini dan kami harap Anda telah mempelajari sesuatu yang baru dari tutorial ini. Anda dapat mengunduh kode sumber lengkap dengan filter pustaka dan. File SQL dengan data dengan mengklik tautan di bawah ini dan bahkan Anda juga dapat memeriksa demo online juga

Bagaimana cara memfilter rentang tanggal di PHP?

Anda dapat menggunakan fungsi array_filter() untuk memfilter array multidimensi berdasarkan rentang tanggal menggunakan PHP . Contoh ini akan menunjukkan cara memfilter array berdasarkan rentang tanggal tertentu di PHP. Cuplikan kode berikut membantu memfilter acara bulan lalu dari array menggunakan fungsi array_filter() dan strtotime() di PHP.

Bagaimana Anda membuat filter rentang tanggal?

Pada tab Tampilan, klik panah bawah Filter dan pilih Rentang Tanggal pada daftar tarik-turun . Kotak dialog Rentang Tanggal akan muncul. Dalam kotak perlihatkan tugas yang dimulai atau selesai setelah, isi awal rentang tanggal dan klik OK. Di kotak dan sebelum, isi akhir rentang tanggal dan klik OK.

Apa itu filter rentang tanggal?

Filter Rentang Tanggal digunakan untuk membatasi hasil di Dasbor ke data yang termasuk dalam (atau di luar) pengelompokan tanggal dan waktu tertentu . Filter Rentang Tanggal tersedia untuk properti dengan tipe data Tanggal, Waktu, dan Waktu.