Blog - KMS

Tabuľka v HTML formulári

<table id="datova_tabulka" class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>Položka</th>
            <th>Merná jednotka</th>
            <th>Počet jednotiek</th>
            <th>Cena za jednotku (bez DPH)</th>
        </tr>
    </thead>

    <tbody>
        <?php for ($x = 0; $x <= 9; $x++) { ?>

        <tr>

            <td align="left">
                <input id="polozka" name="polozka[]" placeholder="" type="text">
            </td>

            <td align="left">
                <input id="jednotka" name="jednotka[]" placeholder="" type="text">
            </td>

            <td align="left">
                <input id="kusy" name="kusy[]" placeholder="" type="text">
            </td>

            <td align="left">
                <input id="cena" name="cena[]" placeholder="" type="text">
            </td>
                
        </tr>

        <?php } ?>

    </tbody>
</table>

Datatables – zoskupenie stĺpcov

Zoskupenie stĺpcov v hlavičke tabuľky:

<thead>
  <tr>
    <th colspan="3">Registrácia</th>
    <th colspan="5">POS dáta</th>
  </tr>
  <tr>
    <th>Meno</th>
    <th>Telefón</th>
    <th>Dátum</th>
    
    <th>Formát</th>
    <th>Ulica</th>
    <th>Mesto</th>
    <th>Obec</th>
    <th>Manažér</th>
  </tr>
</thead>

Výsledok:

Existuje záznam v MySQL?

Tento kód ľahko zistí či existuje (1) alebo neexistuje (0) hľadaný záznam v MySQL tabuľke

SELECT EXISTS (SELECT 1 FROM stastna_objednavka WHERE kod = 981423) AS vysledok;

PHP Mailer – composer

require_once  $_SERVER[ 'DOCUMENT_ROOT'] . '/vendor/autoload.php';

echo "Mailer";

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

$mail = new PHPMailer(true);

Datatables – rozšírený filter a excel export

<script type="text/javascript" class="init">
  $(document).ready(function() 
  {
  console.log("pause")
  $.fn.dataTable.moment( 'DD-MMM-YYYY' );
    $('#datova_tabulka').DataTable(
      {
        language: {url: 'https://cdn.datatables.net/plug-ins/1.11.4/i18n/sk.json'},
		buttons: [
                'copyHtml5',
                    {
                        extend: 'excelHtml5',
                        autoFilter: true,
                        sheetName: 'xEP_export',
                        messageTop: 'Tieto údaje boli vyexportované zo systému TMV xEP.',
                        title: 'TMV_xEP_export'
                    },
                    
                    {
                        extend: 'pdfHtml5',
                        messageTop: 'Tieto údaje boli vyexportované zo systému TMV xEP.',
                        title: 'TMV_xEP_export'
                    }
                ],
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Všetko"]],
        fixedHeader: true,
        colReorder: true,
        iDisplayLength: 50,
        order: [[ 0, "desc" ]],
		dom: 'QBblfrtip'
      });
  });

Dependencies:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.3.0/js/dataTables.searchBuilder.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js"></script>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.3.0/css/searchBuilder.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css">


<script src="https://cdn.datatables.net/searchpanes/1.2.1/js/dataTables.searchPanes.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.3/js/dataTables.colReorder.min.js"></script>

PHP Mailer

Použitie:

require $_SERVER[ 'DOCUMENT_ROOT']. "/PHPMailer-master/PHPMailerAutoload.php";
    $mail = new PHPMailer;
    include TEMPLATE_DIR . "/mail_config.php";
    //Mail adresy
    $mail->addAddress('karol.kassovic@miticka.eu');               // Name is optional
    $mail->addAddress('miticka@miticka.eu');
    $mail->addAddress('obchod@miticka.eu');
    $mail->AddCC ($ziadatel_email);   

    //Predmet a body
    $mail->Subject = "Nová priama objednávka";
    $work_body .= "<h2>Notifikácia o novej priamej objednávke</h2>";
            $work_body .= "<p>Detaily</p>";
            $work_body .= "<hr>";
            $work_body .= "<p>Pozrite detaily v EP v tejto zostave:" . "</p>";
            $work_body .= "<p>https://newep5.kassovicms.com/app/03_priame_obj_v2_php.php" . "</p>";
            $work_body .= "<p>Zaznamenal: <strong>" . $ziadatel_meno . "</strong></p>";
            $work_body .= "<p>Objednávka sa do 5 minút automaticky prenesie do Navi - netreba nič importovať.</p>";

    include TEMPLATE_DIR . "/mail_footer.php";

    $mail->Body = $work_body;

    //$mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

    if(!$mail->send()) {
        echo 'Message could not be sent.';
        echo "Host name: " . E_HOST;
        echo 'Mailer Error: ' . $mail->ErrorInfo;
    } else {
    //echo 'Message has been sent';
    }

PivotTable.js – použitie

HTML:

<div id="output" style="margin: 30px;"></div>

JS:

<script type="text/javascript">

	$(function()
	{
        $("#output").pivotUI($("#tab_akvi"),
        {
            rows: ["Produktová skupina"],
            cols: ["Dátum"],
            vals: ["Predaj"],
    		aggregatorName: "Integer Sum",
            hiddenFromDragDrop: [],
            hideTotals: true,
        });
     });
</script>

Formátovanie čísiel:

<script type="text/javascript">
    // This example loads data from the HTML table below.

	$(function()
	{
		var sum = $.pivotUtilities.aggregatorTemplates.sum;
        var numberFormat = $.pivotUtilities.numberFormat;
        var intFormat = numberFormat({digitsAfterDecimal: 0, thousandsSep:" "});
		var heatmap =  $.pivotUtilities.renderers["Heatmap"];

        $("#output2").pivot($("#tab_akvi"),
        {
            rows: ["Produkt popis"],
            cols: ["Mesiac", "Week"],
			aggregator: sum(intFormat)(["Forecast ks"]),
			renderer: heatmap

        });
     });
</script>

PivotTable.js – inštalácia

https://github.com/nicolaskruchten/pivottable

https://cdnjs.com/libraries/pivottable

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.css" integrity="sha512-BDStKWno6Ga+5cOFT9BUnl9erQFzfj+Qmr5MDnuGqTQ/QYDO1LPdonnF6V6lBO6JI13wg29/XmPsufxmCJ8TvQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.23.0/pivot.min.js" integrity="sha512-XgJh9jgd6gAHu9PcRBBAp0Hda8Tg87zi09Q2639t0tQpFFQhGpeCgaiEFji36Ozijjx9agZxB0w53edOFGCQ0g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Datatables – inštalácia

https://datatables.net/download/

https://cdn.datatables.net/

CDN oklady (6.11.2022):

    <!-- Datatables CDN scripts -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.4.0/css/autoFill.dataTables.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.6/css/colReorder.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.4/css/fixedHeader.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.7.0/css/keyTable.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.2.0/css/rowGroup.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.7/css/scroller.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.3.4/css/searchBuilder.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/2.0.2/css/searchPanes.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/staterestore/1.1.1/css/stateRestore.dataTables.min.css"/>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <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/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/autofill/2.4.0/js/dataTables.autoFill.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.6/js/dataTables.colReorder.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.4/js/dataTables.fixedHeader.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/keytable/2.7.0/js/dataTables.keyTable.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.2.0/js/dataTables.rowGroup.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.7/js/dataTables.scroller.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/searchbuilder/1.3.4/js/dataTables.searchBuilder.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/searchpanes/2.0.2/js/dataTables.searchPanes.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/staterestore/1.1.1/js/dataTables.stateRestore.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js"></script>

Data tables – search panes

<script type="text/javascript" class="init">
  $(document).ready(function() 
  {
  console.log("pause");
    $.fn.dataTable.moment( 'DD-MMM-YYYY' );
    $('#tab_akvi').DataTable(
      {
      language: {url: 'https://cdn.datatables.net/plug-ins/1.11.4/i18n/sk.json'},
      searchPanes:
      {
        cascadePanes: true,
        viewTotal: true
      },
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Všetko"]],
      fixedHeader: true,
      colReorder: true,
      iDisplayLength: 50,
      order: [[ 0, "desc" ]],
      columnDefs:
        [
          {
              searchPanes:{show: false},
              targets: [0,2,3,4,7], // Index of columns (starting at 0) that you want show/hide
          }
        ],
      buttons: [ 'searchPanes' ],
      dom: 'Plfrtip'
      });
  });
</script>