Datensätze einer Tabelle bearbeiten

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

LudwigM

Mitglied
20 Mai 2013
42
2
8
Hallo,
ich generiere per PHP eine Tabelle <table>, die Daten aus einer postgres-Datenbank anzeigt. Wie könnte man eine Bearbeitung realisieren? Am besten wäre es, wenn man auf einen Button klicken könnte und sich dann ein Popup öffnen würde in dem die derzeitigen Daten angezeigt werden und bearbeitet werden können. Dann sollten die geänderten Daten an ein PHP Skript gesendet werden, sodass die DB entsprechend geupdatet werden kann.
Hauptsächlich geht es mir darum, wie man das Popup realisiert?

Gruß
Ludwig
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
Sieh dir mal jsgrid an, das ist genau dafür gemacht, Einträge aus der Datenbank zu bearbeiten:
Das arbeitet zwar nicht mit einem Popup, macht jedoch die Einträge in der Tabellenzeile editierbar.
 
  • Like
Reaktionen: LudwigM

LudwigM

Mitglied
20 Mai 2013
42
2
8
Im Prinzip genau das was ich brauche. Ich konnte aber kein Beispiel finden, wie die Kommunikation mit einer DB funktioniert. Oder muss man das noch mit PHP selbst implementieren?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
Es stimmt, die Kommunikation mit dem Server ist ein bisschen kompliziert und der Einstieg nicht ganz leicht. Es gibt da auch bei Github ein jsPHP aber dort wird es auch nötig sein, es an die eigene Datenbank anzupassen. Ich hatte es selber implementiert und werde versuchen, ob ich es wiederfinde.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
Gefunden, das PHP sah so aus:
Code:
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require_once '../../connect.php';

// $connect = new PDO("mysql:host=$dbserver;dbname=$dbname", $dbuser, $dbpass);
$connect = $pdo;
$method = $_SERVER['REQUEST_METHOD'];

if ($method == 'GET') {
    $data = array(
        ':voller_name' => "%" . $_GET['voller_name'] . "%",
        ':addresse' => "%" . $_GET['addresse'] . "%",
        ':mobil' => "%" . $_GET['mobil'] . "%",
        ':tel' => "%" . $_GET['tel'] . "%",
        ':mail' => "%" . $_GET['mail'] . "%",
        ':www' => "%" . $_GET['www'] . "%",
        ':lat' => "%" . $_GET['lat'] . "%",
        ':lng' => "%" . $_GET['lng'] . "%",
        ':kategorie' => "%" . $_GET['kategorie'] . "%",
    );

    $query = "SELECT * FROM markers WHERE voller_name LIKE :voller_name AND addresse LIKE :addresse AND mobil LIKE :mobil AND tel LIKE :tel AND mail LIKE :mail AND www LIKE :www AND lat LIKE :lat AND lng LIKE :lng AND kategorie LIKE :kategorie ORDER BY id DESC";

    $statement = $connect->prepare($query);
    $statement->execute($data);
    $result = $statement->fetchAll();
    $output = array();
    foreach ($result as $row) {
        $output[] = array(
            'id' => $row['id'],
            'voller_name' => $row['voller_name'],
            'addresse' => $row['addresse'],
            'mobil' => $row['mobil'],
            'tel' => $row['tel'],
            'mail' => $row['mail'],
            'www' => $row['www'],
            'lat' => $row['lat'],
            'lng' => $row['lng'],
            'kategorie' => $row['kategorie'],
        );
    }

    header("Content-Type: application/json");
    echo json_encode($output);
}

if ($method == "POST") {
    $addresse = $_POST['addresse'];
    $api_address = preg_replace('/,/ ', ' ', $addresse);
    $api_address = preg_replace('/ +/ ', '+', $api_address);
    $url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' . $api_address . '&key=AIzaSyAUKiRWWU2Iz8EBxuRt6lCAdJ7J5zL0nww';
    $response = json_decode(file_get_contents($url));
    $lat = $response->results[0]->geometry->location->lat;
    $lng = $response->results[0]->geometry->location->lng;
    $data = array(
        ':voller_name' => $_POST['voller_name'],
        ':addresse' => $_POST['addresse'],
        ':mobil' => $_POST['mobil'],
        ':tel' => $_POST['tel'],
        ':mail' => $_POST['mail'],
        ':www' => $_POST['www'],
        ':lat' => $lat,
        ':lng' => $lng,
        ':kategorie' => $_POST['kategorie'],
    );

    $query = "INSERT INTO markers (voller_name, addresse, mobil, tel, mail, www, lat, lng, kategorie) VALUES (:voller_name, :addresse, :mobil, :tel, :mail, :www, :lat, :lng, :kategorie)";
    $statement = $connect->prepare($query);
    $statement->execute($data);
    $id = $connect->lastInsertId();
    $response = [
        'id' => $id,
        'voller_name' => $_POST['voller_name'],
        'addresse' => $_POST['addresse'],
        'mobil' => $_POST['mobil'],
        'tel' => $_POST['tel'],
        'mail' => $_POST['mail'],
        'www' => $_POST['www'],
        'lat' => $lat,
        'lng' => $lng,
        'kategorie' => $_POST['kategorie'],
    ];
    header("Content-Type: application/json");
    echo json_encode($response);
}

if ($method == 'PUT') {
    parse_str(file_get_contents("php://input"), $_PUT);
    $data = array(
        ':id' => $_PUT['id'],
        ':voller_name' => $_PUT['voller_name'],
        ':addresse' => $_PUT['addresse'],
        ':mobil' => $_PUT['mobil'],
        ':tel' => $_PUT['tel'],
        ':mail' => $_PUT['mail'],
        ':www' => $_PUT['www'],
        ':lat' => $_PUT['lat'],
        ':lng' => $_PUT['lng'],
        ':kategorie' => $_PUT['kategorie'],
    );
    $query = "
 UPDATE markers
 SET voller_name = :voller_name,
 addresse = :addresse,
 mobil = :mobil,
 tel = :tel,
 mail = :mail,
 www = :www,
 lat = :lat,
 lng = :lng,
 kategorie = :kategorie
 WHERE id = :id
 ";
    $statement = $connect->prepare($query);
    $statement->execute($data);
}

if ($method == "DELETE") {
    parse_str(file_get_contents("php://input"), $_DELETE);
    $query = "DELETE FROM markers WHERE id = '" . $_DELETE["id"] . "'";
    $statement = $connect->prepare($query);
    $statement->execute();
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
... und das Javascript so:
Code:
    $('#grid_table').jsGrid({

        width: "100%",
        height: "870px",

        filtering: true,
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 20,
        pageButtonCount: 5,
        insertedRowLocation: 'top',
        deleteConfirm: "Willst du die Adresse wirklich löschen?",

        /* pagerFormat: "Seiten: {first} {prev} {pages} {next} {last}       {pageIndex} of {pageCount}",
        pagePrevText: "zurück",
        pageNextText: "nächste",
        pageFirstText: "erste",
        pageLastText: "letzte",
        pageNavigatorNextText: "...",
        pageNavigatorPrevText: "...", */

        controller: {
            loadData: function (filter) {
                var d = $.Deferred();
                $.ajax({
                    type: "GET",
                    url: "fetch_data-api-2.php",
                    data: filter
                }).done(function (response) {
                    console.log(response);
                    d.resolve(response);
                    return;
                });
                return d.promise();
            },
            insertItem: function (item) {
                var d = $.Deferred();
                console.log(item);
                $.ajax({
                    type: "POST",
                    url: "fetch_data-api-2.php",
                    data: item
                }).done(function (response) {
                    console.log(response);
                    d.resolve(response);
                    return;
                });
                return d.promise();
            },
            updateItem: function (item) {
                var d = $.Deferred();
                $.ajax({
                    type: "PUT",
                    url: "fetch_data-api-2.php",
                    data: item
                }).done(function (response) {
                    console.log(response);
                    d.resolve(response);
                    return;
                });
                return d.promise();
            },
            deleteItem: function (item) {
                return $.ajax({
                    type: "DELETE",
                    url: "fetch_data-api-2.php",
                    data: item
                });
            },
        },

        fields: [
            {
                name: "id",
                type: "hidden",
                // css: 'hide'
            },
            {
                name: "voller_name",
                type: "text",
                width: 60,
                validate: "required"
            },
            {
                name: "addresse",
                type: "text",
                width: 80,
                validate: "required"
            },
            {
                name: "mobil",
                type: "text",
                width: 30
            },
            {
                name: "tel",
                type: "text",
                width: 30
            },
            {
                name: "mail",
                type: "text",
                width: 60
            },
            {
                name: "www",
                type: "text",
                width: 60
            },
            {
                name: "lat",
                type: "text",
                width: 20
            },
            {
                name: "lng",
                type: "text",
                width: 20
            },
            /* {
                name: "kategorie",
                type: "text",
                width: 30
            }, */
            /* {
                name: "mobil",
                type: "text",
                width: 50,
                validate: function(value)
                    {
                        if(value > 0)
                    {
                        return true;
                    }
                }
            }, */
            {
                name: "kategorie",
                type: "select",
                items: [
                    { Name: "", Id: '' },
                    { Name: "Hotel", Id: 'Hotel' },
                    { Name: "Gasthaus", Id: 'Gasthaus' },
                    { Name: "Privat", Id: 'Privat' }
                ],
                valueField: "Id",
                textField: "Name"
            },
            {
                type: "control"
            }
        ]

    });
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.512
478
83
68
PS: Den Controller kann man noch etwas vereinfachen:
Code:
        controller: {
            loadData: function (filter) {
                return $.ajax({
                    type: "GET",
                    url: "fetch_data.php",
                    data: filter
                });
            },
            insertItem: function (item) {
                return $.ajax({
                    type: "POST",
                    url: "fetch_data.php",
                    data: item
                });
            },
            updateItem: function (item) {
                return $.ajax({
                    type: "PUT",
                    url: "fetch_data.php",
                    data: item
                });
            },
            deleteItem: function (item) {
                return $.ajax({
                    type: "DELETE",
                    url: "fetch_data.php",
                    data: item
                });
            },
        },
Bei der Version in #6 war mir noch nicht bekannt, dass man die Antwort vom Server ja jederzeit im Netzwerk-Tab der Entwicklerwerkzeuge einsehen kann.
 
Werbung:

Neueste Beiträge