Script Pencarian Berdasarkan Periode Tanggal Dengan PHP


Script Pencarian Berdasarkan Periode Tanggal Dengan PHP- MySQL. Sebelumnya terimakasih sudah berkunjung ke web blog sederhana saya ini. Pada kesempatan kali ini saya akan membahas tentang script pencarian data dengan PHP. Dalam suatu aplikasi web atau web aplikasi biasanya dibutuhkan kolom pencarian untuk memudahkan kita melihat data yang kita iniginkan.

Keberadaan kotak pencarian pada aplikasi atau website sangat penting dan vital keberadaannya. Selain untuk mempermudah dalam melakukan pencarian data, kotak pencarian juga merupakan suatu fungsi yang paling penting dan harus ada. Agar aplikasi atau website yang di buat lebih profesional.

Untuk mempersingkat pembahasan dalam membuat script pencarian data dengan PHP, kita langsung saja pada pembahasan.

Baca juga: Cara Membeli Domain di IDwebhost Terbaru 2018

Pertama pastikan anda membuat database nya terlebih dahulu, kurang lebih seperti pada gambar berikut ini. Jika Anda malas untuk membuatnya, silahkan untuk database bisa anda download di akhir postingan ini.

alt="script pencarian data dengan PHP"

Kemudian tuliskan script di bawah ini ke text editor yang biasa anda pakai, silahkan copy paste scriptnya dan jangan lupa untuk dipelajari. Kemudian save dengan nama index.php.

    <html lang="en">
    <head>
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
            <meta charset="utf-8" />
            <title>UD. Kondang Ksatria Niaga</title>
            <meta name="description" content="overview &amp; stats" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
      
          
            <!-- bootstrap & fontawesome -->
            <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
            <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
            <!-- page specific plugin styles -->
            <link rel="stylesheet" href="assets/css/chosen.min.css" />
            <link rel="stylesheet" href="assets/css/bootstrap-datepicker3.min.css" />

            <!-- text fonts -->
            <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />

            <!-- ace styles -->
            <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

            <!--[if lte IE 9]>
                <link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
            <![endif]-->
            <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
            <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />

            <!--[if lte IE 9]>
              <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
            <![endif]-->

            <!-- inline styles related to this page -->

            <!-- ace settings handler -->
            <script src="assets/js/ace-extra.min.js"></script>
            <script src="assets/js/jquery-2.1.4.min.js"></script>
          
            <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

            <!--[if lte IE 8]>
            <script src="assets/js/html5shiv.min.js"></script>
            <script src="assets/js/respond.min.js"></script>
            <![endif]-->

        <link rel="stylesheet" href="tabel.css" />
    </head>
    <body onLoad="document.postform.elements['tgl'].focus();">

    <?php
    //untuk koneksi database
    include "koneksi.php";

    //untuk menantukan tanggal awal dan tanggal akhir data di database
    $min_tanggal=mysql_fetch_array(mysql_query("select min(tgl) as min_tgl from tb_jual"));
    $max_tanggal=mysql_fetch_array(mysql_query("select max(tgl) as max_tgl from tb_jual"));
    ?>
    <div class="page-header">
    <center>
    <form action="index.php" method="post" name="postform">
    <table width="854" border="0">
        <td width="105">Tanggal Awal</td>
        <td colspan="2"><input type="text" name="tgl_awal" size="15" placeholder="yyyy-mm-dd"/>
        <a href="javascript:void(0)" onClick="if(self.gfPop)gfPop.fPopCalendar(document.postform.tgl_awal);return false;" ><img src="calender/calender.jpeg" alt="" name="popcal" width="34" height="29" border="0" align="absmiddle" id="popcal" /></a>              
        </td><td width="105">Tanggal Akhir</td> <td colspan="2"><input type="text" name="tgl_akhir" size="15" placeholder="yyyy-mm-dd"/>
        <a href="javascript:void(0)" onClick="if(self.gfPop)gfPop.fPopCalendar(document.postform.tgl_akhir);return false;" ><img src="calender/calender.jpeg" alt="" name="popcal" width="34" height="29" border="0" align="absmiddle" id="popcal" /></a>              
    <td width="188">
    <button type="submit" name="cari" class="btn btn-white btn-info btn-bold">Tampilkan Data</button>
    </td></tr>
    </table>
    </form></center><br/>
    </div>

    <?php
    //di proses jika sudah klik tombol cari
    if(isset($_POST['cari'])){
      
        //menangkap nilai form
        $tgl_awal=$_POST['tgl_awal'];
        $tgl_akhir=$_POST['tgl_akhir'];
        if (empty($tgl_awal) and empty($tgl_akhir)){
            //jika tidak menginput apa2
            $query=mysql_query("select * from tb_jual");
          
        }else{
          
            ?>
            <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                <div class="table-header"><i><b>Informasi Data Penjualan: </b> dari tanggal <b><?php echo $_POST['tgl_awal']?></b> sampai dengan tanggal <b><?php echo $_POST['tgl_akhir']?></b></i></div><?php
          
            $query=mysql_query("select * from tb_jual where tgl between '$tgl_awal' and '$tgl_akhir'");
          
        }
      
        ?>

    <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th class="center"><label class="pos-rel"><input type="checkbox" class="ace" /><span class="lbl"></span></label></th>
                                    <th><i class="ace-icon fa fa-lock bigger-110 hidden-480"></i> Invoice</th>
                                    <th>Tanggal</th>
                                    <th>Agen</th>
                                    <th>Produk</th>
                                    <th>Jumlah</th>
                                    <th></th>
                                </tr>
                            </thead>
    <?php
        //untuk penomoran data
        $no=0;
      
        //menampilkan data
        while($row=mysql_fetch_array($query)){
        ?>
        <tr>
            <td></td><td><?php echo $row['invoice']; ?></td>
            <td><?php echo $row['tgl'];?></td>
          
            <td><?php $tampilAge    =mysql_query("SELECT * FROM tb_agen WHERE id_agen='$row[id_agen]'");
                                            $age    =mysql_fetch_array($tampilAge);
                                            echo $age['nama']
                                        ?></td>
                                      
            <td><?php $tampilPro    =mysql_query("SELECT * FROM tb_produk WHERE id_produk='$row[id_produk]'");
                                            $pro    =mysql_fetch_array($tampilPro);
                                            echo $pro['nama']
                                        ?> <?php echo $pro['ukuran']?></td>
            <td><?php echo $row['jml'];?></td><td align="right">
        </tr>
        <?php
        }
        ?>

       
    </table>
    </div>
    </div>
    </div>
    </div>

    <?php
    }else{
        unset($_POST['cari']);
    }
    ?>

    <iframe width=174 height=189 name="gToday:normal:calender/normal.js" id="gToday:normal:calender/normal.js" src="calender/ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px; left:-500px;">
    </iframe>
    </body>
    </html>
    <!-- page specific plugin scripts -->
    <script src="assets/js/jquery.dataTables.min.js"></script>
            <script src="assets/js/jquery.dataTables.bootstrap.min.js"></script>
            <script src="assets/js/dataTables.buttons.min.js"></script>
            <script src="assets/js/buttons.flash.min.js"></script>
            <script src="assets/js/buttons.html5.min.js"></script>
            <script src="assets/js/buttons.print.min.js"></script>
            <script src="assets/js/buttons.colVis.min.js"></script>
            <script src="assets/js/dataTables.select.min.js"></script>

            <!-- inline scripts related to this page -->
            <script type="text/javascript">
                jQuery(function($) {
                    //initiate dataTables plugin
                    var myTable =
                    $('#dynamic-table')
                    //.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
                    .DataTable( {
                        bAutoWidth: false,
                        "aoColumns": [
                          { "bSortable": false },
                          null, null,null, null, null,
                          { "bSortable": false }
                        ],
                        "aaSorting": [],
                      
                        select: {
                            style: 'multi'
                        }
                    } );
              
                    $.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';
          
                    myTable.on( 'select', function ( e, dt, type, index ) {
                        if ( type === 'row' ) {
                            $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
                        }
                    } );
                    myTable.on( 'deselect', function ( e, dt, type, index ) {
                        if ( type === 'row' ) {
                            $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
                        }
                    } );
              
                    //table checkboxes
                    $('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
                  
                    //select/deselect all rows according to table header checkbox
                    $('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]').eq(0).on('click', function(){
                        var th_checked = this.checked;//checkbox inside "TH" table header
                      
                        $('#dynamic-table').find('tbody > tr').each(function(){
                            var row = this;
                            if(th_checked) myTable.row(row).select();
                            else  myTable.row(row).deselect();
                        });
                    });
                  
                    //select/deselect a row when the checkbox is checked/unchecked
                    $('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
                        var row = $(this).closest('tr').get(0);
                        if(this.checked) myTable.row(row).deselect();
                        else myTable.row(row).select();
                    });
              
                    $(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
                        e.stopImmediatePropagation();
                        e.stopPropagation();
                        e.preventDefault();
                    });
                  
                    //And for the first simple table, which doesn't have TableTools or dataTables
                    //select/deselect all rows according to table header checkbox
                    var active_class = 'active';
                    $('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
                        var th_checked = this.checked;//checkbox inside "TH" table header
                      
                        $(this).closest('table').find('tbody > tr').each(function(){
                            var row = this;
                            if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
                            else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
                        });
                    });
                  
                    //select/deselect a row when the checkbox is checked/unchecked
                    $('#simple-table').on('click', 'td input[type=checkbox]' , function(){
                        var $row = $(this).closest('tr');
                        if($row.is('.detail-row ')) return;
                        if(this.checked) $row.addClass(active_class);
                        else $row.removeClass(active_class);
                    });
              
                  
                    /********************************/
                    //add tooltip for small view action buttons in dropdown menu
                    $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
                  
                    //tooltip placement on right or left
                    function tooltip_placement(context, source) {
                        var $source = $(source);
                        var $parent = $source.closest('table')
                        var off1 = $parent.offset();
                        var w1 = $parent.width();
              
                        var off2 = $source.offset();
                        //var w2 = $source.width();
              
                        if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
                        return 'left';
                    }
                  
                    /***************/
                    $('.show-details-btn').on('click', function(e) {
                        e.preventDefault();
                        $(this).closest('tr').next().toggleClass('open');
                        $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
                    });
                    /***************/
                  
                    /**
                    //add horizontal scrollbars to a simple table
                    $('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
                      {
                        horizontal: true,
                        styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
                        size: 2000,
                        mouseWheelLock: true
                      }
                    ).css('padding-top', '12px');
                    */
                })
            </script>
            <script> // 500 = 0,5 s
                $(document).ready(function(){setTimeout(function(){$(".pesan").fadeIn('slow');}, 500);});
                setTimeout(function(){$(".pesan").fadeOut('slow');}, 7000);
            </script>
            
Selanjutnya kita akan membuat koneksi untuk mengakses databasenya, silahkan anda copy dan paste scriptnya kemudian simpan dengan nama koneksi.php.

     <?php
        $Open = mysql_connect("localhost","root","");
            if (!$Open){
            die ("Koneksi ke Engine MySQL Gagal !<br>");
            }
        $Koneksi = mysql_select_db("y_inventory");
            if (!$Koneksi){
            die ("Koneksi ke Database Gagal !");
            }
    ?>

Jika semuanya sudah selesai silahkan buka browser anda dan lakukan pemanggilan localhost nya sesuai folder htdocs yang anda buat. Maka hasilya akan seperti gambar di bawah ini. Silahkan anda edit-edit kembali agar sesuai dengan keinginan dan tampilannya semakin bagus

alt="script pencarian data dengan PHP'

Script Pencarian Berdasarkan Periode Tanggal Dengan PHP
 
Ok, itu saja yang bisa saya SHARE untuk kesempatan yang baik ini cara membuat script pencarian data dengan PHP. Jika tidak berhasil atau masih ada script yang eror silahkan untuk betanya di kolom komentar.

Untuk file database dan pendukungnya silahkan download di link di bawah ini

Comments