kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Daten per Link/URL an Zielseite übergeben

Wenn ihr Daten von einer Quellseite an eine Zielseite übergeben wollt, stehen euch verschiedene Möglichkeiten offen. Die Variante, auf die ich in diesem Beitrag kurz eingehen möchte überträgt die Daten mit Hilfe der URL an eine Zielseite. Dazu werden dem Link verschiedene Parameter mitgegeben und auf der Zielseite mit dem PHP-Befehl GET wieder ausgelesen.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Grundsätzliche Funktionsweise

Das Prinzip ist denkbar einfach. Ihr setzt einen ganz gewöhnlichen Link auf eine andere Seite und erweitert diesen lediglich um verschiedene Parameter/Werte-Paare. Verschiedene Parameter werden mit „&“ von einander getrennt.

Beispiel für einen Link mit zwei Parametern:

<a href="ziel.php&parameter=wert&parameter2=wert2">Link</a>

Auf der Zielseite wird anschließend der Wert zu einem bestimmten Parameter wieder ausgelesen. Das funktioniert mit folgendem Snippet:

<?php echo $_GET["parameter"]; ?>
<?php echo $_GET["parameter2"]; ?> 

Beachtet bitte, dass die Parameter in der URL sichtbar sind und daher leicht manipuliert werden können. Für sensible Daten ist diese Art der Übertragung daher absolut nicht geeignet!

Beispielseite

Ich habe ein Beispiel zu diesem Thema erstellt, das ihr hier live testen und herunterladen könnt. Es geht darum eine Farbe auszuwählen und die Eigenschaften dieser Farbe zu erfahren. Je nach Wahl werden unterschiedliche Paramenter mit dem Namen der Farbe, dem Hexadezimalcode und den Eigenschaften an die Zielseite übertragen und dort entsprechend zusammengesetzt.

Live-Demo

Live-Demo in neuem Fenster öffnen

HTML/PHP-Code der Ausgangsseite (start.php)

<body>
<ul>
<li><a href="ziel.php?Farbe=Rot&Code=ff0000&Eigenschaften=selbstbewusst, Liebe, Leidenschaft, Aufregung, Glück, glühend, dramatisch, kräftig, Lust, Kampf">Rot</a></li>
<li><a href="ziel.php?Farbe=Orange&Code=ff9000&Eigenschaften=ausgelassen, Vergnügen, süß, Kreativität, Genuss, energiegeladen, ungezwungen, inspirierend, ehrgeizig, spritzig">Orange</a></li>
<li><a href="ziel.php?Farbe=Gelb&Code=fff000&Eigenschaften=Gold, lustig, Hitze, strahlend, Glanz, Lebensfreude, aktiv, Fröhlichkeit, Energie, Sonne">Gelb</a></li>
<li><a href="ziel.php?Farbe=Grün&Code=29c100&Eigenschaften=Natur, Harmonie, Ruhe, Frische, Neid, beruhigend, Hoffnung, gesund, Leben, Erneuerung">Grün</a></li>
<li><a href="ziel.php?Farbe=Blau&Code=0072c1&Eigenschaften=zuverlässig, sympathisch, vertrauenswürdig, sicher, vernünftig, mutig, Offenheit, Intelligenz, Ferne, Autorität">Blau</a></li>
<li><a href="ziel.php?Farbe=Violett&Code=7600c1&Eigenschaften=kreativ, mächtig, extravagant, modisch, weiblich, unseriös, magisch, eitel, künstlich, sensibel, geheimnisvoll">Violett</a></li>
</ul>
</ul>

HTML/PHP-Code der Zielseite (ziel.php)

<body>
<h1 style="color:#<?php echo $_GET["Code"]; ?>"> Du hast <?php echo $_GET["Farbe"]; ?> gewählt. Eine schöne Farbe! </h1>
<p>Wusstest du schon, dass mit <?php echo $_GET["Farbe"]; ?> folgende Eigenschaften, Wirkungen und Assiziationen verbunden werden?</p>
<p><?php echo $_GET["Eigenschaften"]; ?></p>
<a href="start.php">← Zurück zur Farbauswahl</a>
</body>

Ihr könnt alle Dateien des Beispiels auch herunterladen.

Beispieldateien herunterladen

Die Farbwirkungen für das Beispiel habe ich mir vom Webdesign Blog ausgeliehen. Vielen Dank dafür!

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Jonas Hellwig

    Verfasst am 15. Dezember 2011 um 16:08 Uhr.

    @Bernhard: Vielen Dank für deinen Kommentar. Ich habe den Hinweis noch deutlicher in einer Info-Blase dargestellt. Ich dachte es wäre als technisches Beispiel erkennbar gewesen und war ebenfalls der Meinung, dass ich ausreichend auf die Risiken dieser Technik hingewiesen habe. Offenbar war dem nicht so – ich denke jetzt ist es auffälliger.

  2. .faileN

    Verfasst am 20. Dezember 2011 um 15:51 Uhr.

    Hi,

    Für die Anfänger könnte folgendes verwirrend sein: Du gibst oben das Beispiel: ziel.php&parameter=wert&parameter2=wert2

    Später leitest Du den Querystring mit ? ein, was ja auch richtig ist. Das Beispiel mit zwei & würde also auch nicht funktionieren. Ich würde schreiben, dass die Parameter/Wert-Paare mit & getrennt, aber mit ? eingeleitet werden. Denn ohne eine derartige Erklärung lässt du den Leser im Regen stehen und der wundert sich: Warum in Beispiel ein & und in Beispiel2 dann ?

    Das folgende ist nun wirklich Besserwisserei, aber im ersten Absatz schreibst du …der Zielseite mit dem PHP-Befehl GET wieder ausgelesen

    GET ist allerdings kein Befehl, sondern nur ein Superglobales Array :P

  3. Rene Woerz

    Verfasst am 9. Januar 2012 um 2:06 Uhr.

    Hallo,
    Die Variante an sich ist keines Wegs falsch. Es genügt einfach der Hinweiß, dass man mit bestimmten Funktionen die übertragenen Werte gegen SQL-Injections schützen sollte. In deinem Beispiel wäre das htmlspecialchars():

    XSS ist somit nicht mehr möglich.

  4. Par Nik

    Verfasst am 15. April 2016 um 13:17 Uhr.

    Wie wäre es, wenn die zu übergebenden Parameter (php variable) in einer Form stünden, aber sie ausserhalb der Form per und POST zu übertragen ?

  5. canju

    Verfasst am 2. August 2018 um 18:04 Uhr.

    Vielen Dank für die Erklärung.
    Kannst du mir unter die Arme greifen wenn ich jetzt anhand des eines bestimmten URL-Parameters unterschiedliche Logos anzeigen möchte?

    Sprich die eingehende URL example.com?logo=1 soll dafür sorgen dass auf der gleichen Zielseite das google Logo angezeigt werden soll.
    Kommt der Nutzer allerdings über example.com?logo=2 auf die Zielseite soll das amazon-Logo angezeigt werden.

    Wäre dir dankbar für deine Hilfe

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.