zweites Dropdown Menü abhängig vom ersten Dropdown anzeigen

Hier will ich euch mal zeigen, wie ich mir eine Navigation mit zwei Dropdown Menüs gebaut habe. Anforderung war allerdings, dass das zweite Dropdown Menü sich abhängig von der Auswahl des ersten Dropdown Menüs ändern soll. Im ersten Dropdown Menü lasse ich mir alle Router anzeigen die in der Datenbank stehen. Wenn ich einen Router ausgewählt habe, soll das zweite Dropdown Menü eingeblendet werden und nur die Interfaces auswählbar sein, die am Router verfügbar sind.

Ich habe hier meine altbewährte Mysql Tabelle „router“ genommen und noch eine zweite Tabelle „interfaces“ erstellt.

-- Tabelle "interfaces" erstellen und befüllen

CREATE TABLE `interfaces` (
  `if_id` int(11) NOT NULL,
  `rtr_id` int(11) NOT NULL,
  `ifname` varchar(256) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Daten für Tabelle `interfaces`
--

INSERT INTO `interfaces` (`if_id`, `rtr_id`, `ifname`) VALUES
(1, 1, 'TenGigE0/1/0/0'),
(2, 1, 'TenGigE0/1/0/1'),
(3, 1, 'TenGigE0/1/0/2'),
(4, 1, 'TenGigE0/1/0/3'),
(5, 2, 'TenGigE0/2/0/0'),
(6, 2, 'TenGigE0/2/0/1'),
(7, 2, 'TenGigE0/2/0/2'),
(8, 2, 'TenGigE0/2/0/3'),
(9, 3, 'TenGigE0/3/0/0'),
(10, 3, 'TenGigE0/3/0/1'),
(11, 3, 'TenGigE0/3/0/2'),
(12, 3, 'TenGigE0/3/0/3'),
(13, 4, 'TenGigE0/4/0/0'),
(14, 4, 'TenGigE0/4/0/1'),
(15, 4, 'TenGigE0/4/0/2'),
(16, 4, 'TenGigE0/4/0/3'),
(17, 5, 'TenGigE0/5/0/0'),
(18, 5, 'TenGigE0/5/0/1'),
(19, 5, 'TenGigE0/5/0/2'),
(20, 5, 'TenGigE0/5/0/3'),
(21, 6, 'TenGigE0/6/0/0'),
(22, 6, 'TenGigE0/6/0/1'),
(23, 6, 'TenGigE0/6/0/2'),
(24, 6, 'TenGigE0/6/0/3'),
(25, 7, 'TenGigE0/7/0/0'),
(26, 7, 'TenGigE0/7/0/1'),
(27, 7, 'TenGigE0/7/0/2'),
(28, 7, 'TenGigE0/7/0/3'),
(29, 8, 'TenGigE0/8/0/0'),
(30, 8, 'TenGigE0/8/0/1'),
(31, 8, 'TenGigE0/8/0/2'),
(32, 8, 'TenGigE0/8/0/3');

-- Tabelle "router" erstellen und befüllen

CREATE TABLE `router` (
  `id` int(11) NOT NULL,
  `routername` varchar(256) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Daten für Tabelle `router`
--

INSERT INTO `router` (`id`, `routername`) VALUES
(1, 'router1'),
(2, 'router2'),
(3, 'router3'),
(4, 'router4'),
(5, 'router5'),
(6, 'router6'),
(7, 'router7'),
(8, 'router8');

Zur Erklärung, in der Tabelle „interfaces“ gibt es eine Spalte „rtr_id“, das ist die „id“ aus der Tabelle „router“. Router 4 hat die id=4, somit gehören alle Interfaces aus der Tabelle „interfaces“ dem Router 4, wo die „rtr_id“ = 4 ist. Zur Vereinfachung haben alle Interfaces als zweite Zahl die Nummer des Routers (Router 4 = TenGigE0/4/x/y).

Ich habe mir nun eine PHP Script „inc.functions.php“ erstellt in dem ich all meine PHP Funktionen reinschreibe. Wir müssen in zwei PHP Scripten die DB Verbindung aufbauen und ich habe jeweils eine Funktion für die Dropdown Menüs geschrieben. Dieses Script include ich in jeder anderen PHP Datei.

<?php

// Verbindung zur Mysql DB herstellen
function db_connect() {

    //database Production credentials
    define('DBHOST', 'localhost');
    define('DBUSER', 'testingdb_admin');
    define('DBPASS', 'secure');
    define('DBNAME', 'testingdb');
    try {

        //create PDO connection
        $db = new PDO("mysql:host=" . DBHOST . ";dbname=" . DBNAME, DBUSER, DBPASS, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8mb4"));
        echo 'Verbunden mit ' . DBNAME . '!';
    } catch (PDOException $e) {
        //show error
        echo '<p class="error">' . $e->getMessage() . '</p>';
        exit;
    }
    return $db;
}

// Dropdown Menü fur Router erstellen
function createDropDownRouter($id) {

    // Funktion erzeugt ein Dropdown Menu aus der DB
    try {
        $statement = db_connect()->prepare("SELECT * FROM router;");
        $statement->execute();
        $router = $statement->fetchAll(PDO::FETCH_ASSOC);
        
    } catch (PDOException $e) {
        echo '<p class="error">' . $e->getMessage() . '</p>';
    }
    for ($i = 0; $i < count($router); $i++) {
        if (!isset($id) || empty($id)) {
            echo '<option value="' . $router[$i]['id'] . '">' . $router[$i]['routername'] . '</option>';
        } else {
            echo '<option value="' . $router[$i]['id'] . '" ' . ($router[$i]['id'] == $id ? "selected" : "") . ' >' . $router[$i]['routername'] . '</option>';
        }
    }
}

// Dropdown Menü für Interfaces erstellen
function createDropDownInterfaces($if) {

    // Funktion erzeugt ein Dropdown Menu aus der DB
    try {
        $statement = db_connect()->prepare("SELECT * FROM interfaces WHERE rtr_id='" . $if . "';");
        $statement->execute();
        $interface = $statement->fetchAll(PDO::FETCH_ASSOC);
        
    } catch (PDOException $e) {
        echo '<p class="error">' . $e->getMessage() . '</p>';
    }
    for ($i = 0; $i < count($interface); $i++) {
        echo '<option value="' . $interface[$i]['if_id'] . '" ' . ($interface[$i]['if_id'] == $id ? "selected" : "") . ' >' . $interface[$i]['ifname'] . '</option>';
    }
}

Nun erstellen wir uns eine HTML Seite mit einem Formular in dem zunächst nur das Dropdown Menü für die Router und der Submit Button angezeigt werden. Des Weiteren erstellen wir noch einen DIV Container „interfaces“ für das Dropdown Menü interfaces und einen DIV Container „wait“ für die Lade Grafik. Da wir das Dropdown Menü „router“ abschicken müssten um das Dropdown Menü „interfaces“ zu erstellen machen wir das ganze mit Ajax. Wir rufen per Ajax Post Request das Script „interfaces.php“ auf. Wenn der Ajax Request abgeschickt wurde blenden wir die Lade Grafik, das Dropdown Menü „interfaces“ und den Submit Button ein. Wenn das Dropdown Menü „router“ ein zweites Mal betätigt wird, blenden wir das Dropdown Menü „interfaces“ und den Submit Button wieder aus. Dann wird der Ajax Post Request abgeschickt, und wir blenden die Lade Grafik aus und den Rest wieder ein.

<?php
include_once 'inc.functions.php';
?>
<!-- Dropdown Menü interfaces -->
<select name = "interfaces">
    <option value = "" > W&auml;hle ...</option>
    <?php createDropDownInterfaces($_POST['wert']);
    ?>
</select>


Das PHP Script mit dem „router“ Dropdown Menü.

<?php
// HTML Header und jquery includen
include_once 'inc.header.php';
// PHP Funktionen includen
include_once 'inc.functions.php';

if (!empty($_POST['router'])) {
    $id = $_POST['router'];
} else {
    $id = '';
}
?>
<form method="POST">
    <table>
        <td>
            <div class="router_select">
                <select name="router">
                    <option value="">W&auml;hle ...</option>
                    <?php createDropDownRouter($id); ?>
                </select>
            </div>
        </td>
        <td>
            <div id="wait" style="display: none;">
                <img alt="Please Wait" src="ajax-loader.gif"/>
            </div>
            <div id="interfaces" style="display: none;">
            </div>
        </td>
        <td>
            <input name="senden" type="submit" value="Senden">
        </td>
    </table>
</form>

Nun kommt noch die ganze Jquery Logik dazu, die dieses Vorhaben ermöglicht. Die Zeile 5 in der Java Script Datei bräuchte man normalerweise nicht, wenn man den Submit Button in der router.php per default ausblendet (style=“display: none;“). Ich wollte hier nur mal die verschiedenen Möglichkeiten aufzeigen.

            $(document).ready(function () {
                // Submit Button nach dem Aufrufen der Seite erstmal ausblenden
                // bräuchte man nicht, wenn man "style="display: none;" dem Submit Button hinzufügt
                $('input[name = "senden"]').hide();
                $('.router_select').change(function () {
                    // Wenn man das Router Menü schon mal bedient hat und es ein zweites Mal macht,
                    // müssen das Menü Interfaces und der Submit Button wieder ausgeblendet werden
                    $('#interfaces').hide();
                    $('input[name = "senden"]').hide();
                    // Loading Grafik anzeigen
                    $('#wait').show();
                    // Sending AJAX request
                    $.ajax({
                        url: 'interfaces.php',
                        type: 'post',
                        data: {
                            // wert wird als $_POST['wert'] an die interfaces.php geschickt
                            wert: $('.router_select option:selected').val()
                        },
                        success: function (data) {
                            // Daten von interfaces.php anzeigen
                            $('#interfaces').html(data);
                            // Loading Grafik anzeigen und nach 1,5s ausblenden
                            $('#wait').fadeOut(1500);
                            // DIV interfaces nach 1,5s einblenden
                            $('#interfaces').delay(1500).fadeIn(2000);
                            // Submit Button nach 1,6s einblenden
                            $('input[name = "senden"]').delay(1600).fadeIn(2000);
                        }
                    });
                });
            }
            );

Anbei ein paar Bilder wie das Menü aussieht, das erste ist der Ausgangszustand, es wird nur ein Dropdown Menü gezeigt, dann das Bild mit der Ladegrafik, dann sieht man wie das zweite Dropdown Menü und der Submit Button eingeblendet. Als letztes sieht man die Auswahl der verfügbaren Interfaces am Router1. Hübsch machen müsst ihr das Menü selber. 🙂

So sieht es mit bewegten Bildern aus. 🙂

Mysql und MysqlDump Befehle

Ich habe hier mal eine kleine Übersicht der gängigsten Mysql und Mysqldump Befehle erstellt, da ich diese auch immer wieder brauche.

Datenbank erzeugen und User für diese Datenbank anlegen.

-- DB erstellen
CREATE DATABASE testingdb;

-- User erstellen
CREATE USER 'testingdb_admin'@'localhost' IDENTIFIED BY 'securepassword';

-- dem User alle Rechte für die DB zuweisen
GRANT ALL PRIVILEGES ON myblog . * TO 'testingdb_admin'@'localhost';

-- Rechte neu einlesen
FLUSH PRIVILEGES;

-- Rechte verifizieren
SHOW GRANTS FOR 'testingdb_admin'@'localhost';

Das Passwort vom Mysql User ändern wir in dem wir mit „mysqladmin“ das alte und danach das neue Passwort eingeben.

-- Passwort ändern von User "testingdb_admin"
./mysqladmin -u testingdb_admin -psecurepassword password secure

-- Start Mysql mit dem alten Passwort --> funktioniert nicht
./mysql -u testingdb_admin -psecurepassword testingdb
ERROR 1045 (28000): Access denied for user 'testingdb_admin'@'localhost' (using password: YES)

-- Start Mysql mit dem neuen Passwort --> funktioniert
./mysql -u testingdb_admin -psecure testingdb

Nun erstellen wir mit „mysqldump“ ein Backup unserer Datenbank. Wir benutzen mysqldump dafür und leiten die Ausgabe in eine Datei um.

-- Mysql Dump der gesamten Datenbank mit allen Tabellen erstellen
./mysqldump -u testingdb_admin -p testingdb > testingdb.sql

-- Mysql Dump für Tabelle "router" erstellen
./mysqldump -u testingdb_admin -p testingdb router > testingdb.sql

-- aus Mysql Dump die Datenbank wieder herstellen
./mysqldump -u testingdb_admin -p testingdb < testingdb.sql

Wenn wir ein regelmäßiges Backup unserer DB benötigen, sollten wir uns ein Bash Script schreiben und dieses dann per Cronjob täglich starten. Ich habe mal zwei Versionen meines Shell Scripts aufgezeigt. Ich gehe mal davon aus, das das Shell Script täglich gestartet wird.

Der Befehl in Zeile 5 speichert den Dump mit Tag im Dateinamen (testingdb_dump_08.sql), das bedeutet unser ältestes Backup ist 30 oder 31 Tage alt, je nachdem wieviel Tage der aktuelle Monat hat.

Der Befehl in Zeile 8 speichert den Dump mit Tag und Monat im Dateinamen (testingdb_dump_08_03.sql), das bedeutet unser ältestes Backup ist ein Jahr alt. Am 08.03. des nächsten Jahres wird diese Datei überschrieben.

Der Befehl in Zeile 11 speichert den Dump mit Tag, Monat und Jahr im Dateinamen (testingdb_dump_08_03_2018.sql), das bedeutet wir können auf jeden Tag mit dem Backup zurück springen, da die Dateien nie überschrieben werden.

#!/bin/bash

# Script speichert den mysql dump in Datei "testingdb_dump_08.sql"
/usr/bin/mysqldump -u testingdb_admin -psecure testingdb > /db_backup/testingdb_dump_$(date "+%d").sql

# Script speichert den mysql dump in Datei "testingdb_dump_08_03.sql" 
/usr/bin/mysqldump -u testingdb_admin -psecure testingdb > /db_backup/testingdb_dump_$(date "+%d_%m").sql

# Script speichert den mysql dump in Datei "testingdb_dump_08_03_2018.sql" 
/usr/bin/mysqldump -u testingdb_admin -psecure testingdb > /db_backup/testingdb_dump_$(date "+%d_%m_%Y").sql

 

Datum in PHP formatieren

Hier will ich euch zeigen wie wir das Datum aus einer Mysql Datenbank in einem deutschen Format anzeigen lassen. Mysql gibt den Wert aus der Zelle mit dem Daten Typ „Timestamp“ wie folgt zurück:

2018-03-06 22:04:16

Nun möchten wir aus diesem Format ein ordentliches deutsches Datumsformat ausgeben. Dafür schreiben wir uns eine eigene Funktion in PHP. Wir haben eine ganz einfache Mysql Tabelle mit einer „id“ und einer „zeitstempel“ spalte. Continue Reading