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

MySQL Abfrage als Ausgabe in Eingabefeld

Bourbon

Bourbon

Mitglied
Hallo Leute,

die Überschrift klingt vielleicht etwas verwirrend, ich weis aber gerade nicht, wie ich es besser beschreiben könnte.
Und zwar erstelle ich gerade eine Seite mit den Profildaten des Nutzers, mit der Möglichkeit, diese zu ändern.
Ich will aber kein separaten "bearbeiten"-Button, sondern eher Folgendes:

Vorname: $vorname
Nachname: $nachname

Sowie der Nutzer dann auf den Name klickt, wird daraus ein Input-Feld, in dem er Diesen direkt ändern kann.

Funktionieren könnte das theoretisch so:
Es ist von vornherein ein Input-Feld mit dem value $nachname. Mit einem verstecken Absendebutton (submit) wird dann der Datenbankeintrag mittels ON DUPLICATE KEY UPDATE geändert.

Und nun zur Frage, da das ganze ungetestet ist und mir auch etwas seltsam vorkommt:
Macht das Sinn?
Gibt es da vielleicht eine andere Lösung für?
 
nookie schrieb:
Du meinst "Edit In Place" oder versteh ich das falsch?

Hier eine Live Demo:
Gibt bestimmt noch andere Plug-Ins, aber das habe ich grade auf die schnelle gefunden.
Zum Vergrößern anklicken....

Zwei Alternative Lösungswege fallen mir noch ein:
1. Von Beginn an ein <input> verwenden, also auch für die Ausgabe der Werte. Dieses per CSS ohne Rahmen, Hintergrund, etc formatieren sodass es optisch kein Textfeld mehr ist. Vorteil: Kein JS wird benötigt.
2. "Contenteditable" Attribut setzen. Das wäre vermutlich ziemlich "overpowered" für deinen Einsatzzweck.

Nur der Vollständigkeit wegen.
 
Ja, so in die Richtung geht das schon.
Habe es inzwischen mal selbst versucht und das hier kam dabei raus:

PHP: 
<label for="vorname"><div class='div_flexbox'><div class='div_flexbox_item_left'>Vorname</div>    
                     <div class='div_flexbox_item'><?php echo "  <form action='' method='post'>
                                                  <input type='text' name='vorname' id='vorname' value='".$var_forename."' class='noBorder'/></form>" ; ?></div></div></label>

Also die variable $var_forename wird vorher vom Server abgefragt.

//EDIT
Genau so habe ich es dann auch gemacht. Ich denke das ist der "einfachste" Weg.
Jetzt brauch ich dann eigentlich nur noch einen unsichtbaren submit-button. :)
 
Bourbon schrieb:
Ja, so in die Richtung geht das schon.
Habe es inzwischen mal selbst versucht und das hier kam dabei raus:

PHP: 
<label for="vorname"><div class='div_flexbox'><div class='div_flexbox_item_left'>Vorname</div>  
                     <div class='div_flexbox_item'><?php echo "  <form action='' method='post'>
                                                  <input type='text' name='vorname' id='vorname' value='".$var_forename."' class='noBorder'/></form>" ; ?></div></div></label>

Also die variable $var_forename wird vorher vom Server abgefragt.

//EDIT
Genau so habe ich es dann auch gemacht. Ich denke das ist der "einfachste" Weg.
Jetzt brauch ich dann eigentlich nur noch einen unsichtbaren submit-button. :)
Zum Vergrößern anklicken....

Das ist eine einfache CSS Aufgabe ;)

Code: 
<button style="display:none">Absenden</button>

Du kannst ihn aber auch komplett weglassen und das Formular per jQuery abschicken:

Code: 
$('form').submit();
 
Update:
Das Formular wird jetzt bei jeder Änderung mittels onChange und this.form.submit() sowie dem unsichtbaren Submit-Button angeschickt.
Leider klappt jetzt das UPDATE nicht.

Hier Code vom Formular:
PHP: 
<form action='profil_change.php' method='post'>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>Vorname</div>
        <div class='div_flexbox_item'><?php echo "<input type='text' name='forename' value='".$var_forename."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>Nachname</div>
        <div class='div_flexbox_item'><?php echo "<input type='text' name='surname' value='".$var_surname."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>E-Mail-Adresse</div>
        <div class='div_flexbox_item'><?php echo "<input type='email' name='email' value='".$var_email."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>Handynummer</div>
        <div class='div_flexbox_item'><?php echo "<input type='text' name='phonenumber' value='".$var_phonenumber."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>Geburtsdatum</div>
        <div class='div_flexbox_item'><?php echo "<input type='date' name='birthday' value='".$var_birthday."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <input type="submit" name="abgeschickt"/>
  </form>

Und hier der Code von der "profil_change.php":
PHP: 
<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
$user_ID = $_SESSION['user_id'];


  $forename       = $_POST["forename"];
  $surname        = $_POST["surname"];
  $email          = $_POST["email"];
  $phonenumber    = $_POST["phonenumber"];
  $birthday       = $_POST["birthday"];

  $forename       = $mysqli->real_escape_string($forename);
  $surname        = $mysqli->real_escape_string($surname);
  $email          = $mysqli->real_escape_string($email);
  $phonenumber    = $mysqli->real_escape_string($phonenumber);
  $birthday       = $mysqli->real_escape_string($birthday);

  $update = "UPDATE account SET email=$email, forename=$forename, surname=$surname, phonenumber=$phonenumber, birthday=$birthday WHERE user_ID=$user_ID";
  if($ergebnis = $mysqli->query($update)) {
    header("Location: profil.php");
  } else {
    echo $mysqli->error;
  }
  $mysqli->close();
?>

Und das ist der Fehler:
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '@dieter.com, forename=, surname=, phonenumber=, birthday=2074-07-11 WHERE user_I' at line 1
Zum Vergrößern anklicken....

Ergo muss der Fehler ja im Update-Befehl liegen. Nur wo genau?
 
Bourbon schrieb:
Update:
Das Formular wird jetzt bei jeder Änderung mittels onChange und this.form.submit() sowie dem unsichtbaren Submit-Button angeschickt.
Leider klappt jetzt das UPDATE nicht.

Hier Code vom Formular:
PHP: 
<form action='profil_change.php' method='post'>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>Vorname</div>
        <div class='div_flexbox_item'><?php echo "<input type='text' name='forename' value='".$var_forename."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>Nachname</div>
        <div class='div_flexbox_item'><?php echo "<input type='text' name='surname' value='".$var_surname."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>E-Mail-Adresse</div>
        <div class='div_flexbox_item'><?php echo "<input type='email' name='email' value='".$var_email."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>Handynummer</div>
        <div class='div_flexbox_item'><?php echo "<input type='text' name='phonenumber' value='".$var_phonenumber."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <div class='div_flexbox'><div class='div_flexbox_item_left'>Geburtsdatum</div>
        <div class='div_flexbox_item'><?php echo "<input type='date' name='birthday' value='".$var_birthday."' class='noBorder' onChange='this.form.submit()'/>" ; ?></div></div><hr>
    <input type="submit" name="abgeschickt"/>
  </form>

Und hier der Code von der "profil_change.php":
PHP: 
<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
$user_ID = $_SESSION['user_id'];


  $forename       = $_POST["forename"];
  $surname        = $_POST["surname"];
  $email          = $_POST["email"];
  $phonenumber    = $_POST["phonenumber"];
  $birthday       = $_POST["birthday"];

  $forename       = $mysqli->real_escape_string($forename);
  $surname        = $mysqli->real_escape_string($surname);
  $email          = $mysqli->real_escape_string($email);
  $phonenumber    = $mysqli->real_escape_string($phonenumber);
  $birthday       = $mysqli->real_escape_string($birthday);

  $update = "UPDATE account SET email=$email, forename=$forename, surname=$surname, phonenumber=$phonenumber, birthday=$birthday WHERE user_ID=$user_ID";
  if($ergebnis = $mysqli->query($update)) {
    header("Location: profil.php");
  } else {
    echo $mysqli->error;
  }
  $mysqli->close();
?>

Und das ist der Fehler:


Ergo muss der Fehler ja im Update-Befehl liegen. Nur wo genau?
Zum Vergrößern anklicken....

Lass dir $update ausgeben, dann siehst du den Fehler gleich:
Keine prepared Statements und auch manuell nicht escaped.
Das führt nicht nur zu Fehlern wenn Reservierte Zeichen wie @ vorkommen, sondern ist auch einladend für Angreifer (SQL Injection).

Edit:
Sorry, du escapest ja, nur nicht richtig ;)
Wenn du prepared Statements schon kennst, solltest du auch dabei bleiben.
 
So, es gibt doch keine Hilferuf.
Ich hab es hinbekommen.

Hier mal der Code, für Diejenigen, die den Thread eventuell lesen.

PHP: 
<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
$user_ID = $_SESSION['user_id'];

  if($update = $mysqli->prepare("UPDATE account
        SET email=?, forename=?, surname=?, phonenumber=?, birthday=? WHERE user_ID=$user_ID")) {

  $forename       = $_POST["forename"];
  $surname        = $_POST["surname"];
  $email          = $_POST["email"];
  $phonenumber    = $_POST["phonenumber"];
  $birthday       = $_POST["birthday"];

  $update->bind_param("ssssi", $email, $forename, $surname, $phonenumber, $birthday);

  $forename       = $mysqli->real_escape_string($forename);
  $surname        = $mysqli->real_escape_string($surname);
  $email          = $mysqli->real_escape_string($email);
  $phonenumber    = $mysqli->real_escape_string($phonenumber);
  $birthday       = $mysqli->real_escape_string($birthday);

    $update->execute();
    $update->close();
    $mysqli->close();
    header("Location: profil.php");
   }
?>

Das sollte doch jetzt eigentlich sicher sein oder?

Ich hab jetzt nur noch ein Problem:
Das Geburtsdatum wird zwar als Value in das Input-Feld geladen, aber sobald ich dieses ändere, hat es den Wert 0000-00-00. Und ich kann das Geburtsdatum gar nicht bis zu Ende eintragen. Ich gebe bspw. 10.10.19 ein schon aktualisiert sich die Seite, als ob ich etwas geändert hätte.
 
Bourbon schrieb:
So, es gibt doch keine Hilferuf.
Ich hab es hinbekommen.

Hier mal der Code, für Diejenigen, die den Thread eventuell lesen.

PHP: 
<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
$user_ID = $_SESSION['user_id'];

  if($update = $mysqli->prepare("UPDATE account
        SET email=?, forename=?, surname=?, phonenumber=?, birthday=? WHERE user_ID=$user_ID")) {

  $forename       = $_POST["forename"];
  $surname        = $_POST["surname"];
  $email          = $_POST["email"];
  $phonenumber    = $_POST["phonenumber"];
  $birthday       = $_POST["birthday"];

  $update->bind_param("ssssi", $email, $forename, $surname, $phonenumber, $birthday);

  $forename       = $mysqli->real_escape_string($forename);
  $surname        = $mysqli->real_escape_string($surname);
  $email          = $mysqli->real_escape_string($email);
  $phonenumber    = $mysqli->real_escape_string($phonenumber);
  $birthday       = $mysqli->real_escape_string($birthday);

    $update->execute();
    $update->close();
    $mysqli->close();
    header("Location: profil.php");
   }
?>

Das sollte doch jetzt eigentlich sicher sein oder?

Ich hab jetzt nur noch ein Problem:
Das Geburtsdatum wird zwar als Value in das Input-Feld geladen, aber sobald ich dieses ändere, hat es den Wert 0000-00-00. Und ich kann das Geburtsdatum gar nicht bis zu Ende eintragen. Ich gebe bspw. 10.10.19 ein schon aktualisiert sich die Seite, als ob ich etwas geändert hätte.
Zum Vergrößern anklicken....

Das Feld Birthday müsste mit Typ "string" eingetragen werden, denke ich.
Du hast "integer".

Wenn sich die Seite automatisch aktualisiert, hast du irgendwo ein Javascript welches das auslöst.
 
Ja, es lag am integer. Ich dachte der Datentyp Date ist ein integer und kein string.

Die Aktualisierung wird dadurch ausgelöst:
onChange='this.form.submit()'

Habe ich bei jedem Feld. Bei allen Feldern klappt das auch, nur bei dem Geburtstag ist das Mist, weil der sowie ich nur eine Ziffer eingebe, der das aktualisiert.

scbawik schrieb:
Das ist eine einfache CSS Aufgabe ;)
Du kannst ihn aber auch komplett weglassen und das Formular per jQuery abschicken:
Code: 
$('form').submit();
Zum Vergrößern anklicken....
Wo muss das denn stehen?
 
Bourbon schrieb:
Ja, es lag am integer. Ich dachte der Datentyp Date ist ein integer und kein string.

Die Aktualisierung wird dadurch ausgelöst:
onChange='this.form.submit()'

Habe ich bei jedem Feld. Bei allen Feldern klappt das auch, nur bei dem Geburtstag ist das Mist, weil der sowie ich nur eine Ziffer eingebe, der das aktualisiert.


Wo muss das denn stehen?
Zum Vergrößern anklicken....

Dann würde ich statt "onChange" "onBlur" verwenden (== nach dem Verlieren des Focus; beim Verlassen).
Dann wird erst abgeschickt wenn man das Textfeld wieder verlässt.

Übrigens würde man so ein Formular eher mit AJAX umsetzen, das ständige Neuladen der Seite ist nicht sonderlich nutzerfreundlich. Aber eines nach dem anderen ;)
 
Bourbon schrieb:
Ich hab bereits ein Buch über AJAX, aber so richtig komm ich da noch nicht voran :)
Zusätzlich dazu hatte ich es mal mit dem Tutorial hier probiert, aber das hat noch nicht geklappt.
http://www.php-einfach.de/codeschnipsel_10207.php

Also mit AJAX muss der Browser dann sicherlich auch weniger Daten laden und folglich schneller. Oder liege ich da falsch?
Zum Vergrößern anklicken....

Es ist nicht wirklich nötig sich lange mit AJAX auseinander zu setzen.
Ich für meinen Teil hatte noch gar nie Kontakt mit "reinem" AJAX - setze es jedoch seit einigen Jahren auf allen meinen Seiten ein.

Grund dafür ist, dass Libraries wie jQuery einem die ganze Arbeit abnehmen und solche Technologien vereinheitlichen. Es wäre Zeitverschwendung sich damit genauer auseinander zu setzen.

Ajax ist insofern schneller, dass einerseits nur Teile der Website ausgeliefert werden können, was sowohl Server-, Browser wie auch Internet-Kapazität schont. Andererseits können auch gänzlich andere Datenformate übermittelt werden, wie bspw. JSON, die sich perfekt eignen um von JavaScript verarbeitet zu werden.

Wenn du mit Ajax jedoch ganze HTML Dokumente lädst und anzeigst, ist der Geschwindigkeitsvorteil nur minimal gegeben und fühlt sich unter Umständen sogar länger an (da während dem Seitenwechsel nicht das gewohnte Verhalten auftritt).
 
Statt die jQuery wurde ich die Zepto.js nutzen.

Ich dachte auch eher daran, nur das Formular neuladen zu lassen. Somit würde ich schon mal den Footer, Header sowie das komplette CSS sparen.
Denke das sollte schon etwas an Geschwindigkeit bringen.

So, dann setze ich mich mal an eine Art Chat (nur hinzufügen von Nachrichten).
Denke das sollte erstmal das einfachste werden.

Oder hast du ein Tutorial, mit dem du dir das zum Teil beigebracht hast?
 
Bourbon schrieb:
Statt die jQuery wurde ich die Zepto.js nutzen.

Ich dachte auch eher daran, nur das Formular neuladen zu lassen. Somit würde ich schon mal den Footer, Header sowie das komplette CSS sparen.
Denke das sollte schon etwas an Geschwindigkeit bringen.

So, dann setze ich mich mal an eine Art Chat (nur hinzufügen von Nachrichten).
Denke das sollte erstmal das einfachste werden.

Oder hast du ein Tutorial, mit dem du dir das zum Teil beigebracht hast?
Zum Vergrößern anklicken....

Ich glaube in Zepto läuft das gleich.

Zu lernen gibt es nicht viel, wenn man sich bereits mit jQuery/Zepto auseinander gesetzt hat und callback-Funktionen einem ein Begriff sind. Ich habe es daher gleich in der Praxis umgesetzt und keine Tutorials gemacht.

Das einfachste wäre ein Seitenwechsel, bei dem nur ein bestimmter Bereich (<article>) ausgetauscht wird:

Code: 
$('nav a').click(function () {
  $('article').load($(this).attr('href')+' article', function () {
    $(this).contents().unwrap();
  });
  return false;
});

.load ist ein shorthand für .ajax, bei dem der Inhalt sofort in das DOM eingefügt wird.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben