PHP include per Button Klick

Flyingbaby · 26. März 2014

Hallo zusammen,

ich mal wieder

Beim Erstellen meiner neuen Website, bin ich nun auf das nächste Problem gestoßen...

Ich habe folgenden Aufbau:

HTML:

<div id="content">
<div id="menü">
<a href="beispiel1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/button_ueberuns_mouseover.png',1)"><img src="http://www.tutorials.de/images/button_ueberuns.png" width="200" height="50" id="Image2" /></a> <br />
<br />
<a href="beispiel2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/button_verlobung_mouseover.png',1)"><img src="http://www.tutorials.de/images/button_verlobung.png" width="200" height="50" id="Image1" /></a><br />
<br />
</div>
<?php include (""); ?>
</div>

Sooo... nun soll bei Klick auf einen der Buttons im Menü die dazugehörige Datei im Content erscheinen (dort wo ich das php include gesetzt habe).

Wie bekomme ich das jetzt am elegantesten gebacken?

Vielen Dank für eure Hilfe!

Parantatatam · 27. März 2014

Du musst Dir bewusst sein, dass es da nur zwei Wege gibt: entweder lädst Du die Seite komplett neu, dann könntest Du beispielsweise die zuladende Seite über einen GET-Parameter angeben, oder Du lädst die Seite per AJAX nach, dann könntest Du die Seite ohne include laden. Was willst Du also?

mermshaus · 27. März 2014

Da scheint es noch so ein wenig am Verständnis von Client/Server zu mangeln und wo PHP dort einzuordnen ist.

Einige Lesetipps:

- http://phpforum.de/forum/showthread.php?t=218055
- http://php-de.github.io/jumpto/eva-prinzip/
- https://de.wikipedia.org/wiki/PHP#Funktionsweise
- …

Flyingbaby · 27. März 2014

Lieben Dank für eure Antworten!

Hmm.. also mir geht es darum. Bisher habe ich immer für jeden Menüpunkt einer Website eine komplette HTML-Seite erstellt, sodass ich, wenn sich irgendwo eine Kleinigkeit geändert hat, komplett alle Seiten überarbeiten musste....

Nun suche ich für meine neue Website eine Möglichkeit dies zu umgehen. Im Internet hatte ich dann gefunden, dass man mit PHP include einfach einen Teilbereich einfügen kann, ohne das ganze drum herum immer erstellen/verändern zu müssen.

Wie bekomme ich das denn am besten hin?

Leider kenne ich mich mit AJAX überhaupt nicht aus. Die Seite könnte ruhig neu laden, das wäre jetzt nicht so schlimm, denke ich. Wie funktioniert das denn dann mit GET-Parameter?

Wenn jemand noch eine bessere Lösung hat, bin ich auch gerne dafür zu haben...

Ich habe auch schon überlegt, ob ich es nicht einfach umdrehe... dass ich praktisch das was immer gleich bleibt in alle Seiten als include in die einzelnen Menüseiten einfüge....

Parantatatam · 27. März 2014

Mit GET-Parametern:

PHP:

# index.php
if ( !array_key_exists( "page", $_GET ) || empty( $_GET[ "page" ] ) ) {
  $page = "default";
} else {
  $page = trim( $_GET[ "page " ] );
}

$whitelist = array(
  "login",
  "default",
  "error",
  "blog"
);

if ( !in_array( $page, $whitelist ) ) {
  $page = "error";
}

include "header.php";
include "{$page}.php";
include "footer.php";

PHP:

# header.php
<!DOCTYPE html>
<html>
<head>
  <title><?= $title ?></title>
  <meta charset="utf-8" />
  <!-- scripts & stylesheets -->
</head>
<body>

PHP:

# footer.php
</body>
</html>

PHP:

# *.php
# Inhalt deiner einzelnen Seiten

... und jetzt kannst Du die Seiten wie folgt aufrufen:

index.php
index.php?page=default
index.php?page=login
index.php?page=error
index.php?page=blog

Flyingbaby · 27. März 2014

Danke für den Code.

Aber irgendwie komme ich damit nicht so ganz hin....

Ich habe jetzt die header.php , die footer.php , index.php erstellt eine willkommen.php.

Du hast ja praktisch gesagt, dass der header bei <body> aufhört und der footer bei </body> anfängt. Das heißt alles zwischendrin muss ja dann in die index.php außer den wechselnden Text im Menü-Bereich, oder?

Wo genau setze ich denn dann meine Buttons hin?

<a href="beispiel1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/button_ueberuns_mouseover.png',1)"><img src="http://www.tutorials.de/images/button_ueberuns.png" width="200" height="50" id="Image2" /></a>

Und wo gebe ich denn in dem PHP-Get-Parameter die Beziehung zu den Buttons an?

Sorry, in PHP bin ich wirklich ein absoluter Anfänger und die Beschreibungen im Internet sind für mich irgendwie total chinesisch *seufz*

Danke für deine Geduld.

Parantatatam · 27. März 2014

Also um genau zu sein, fügst Du in die index.php überhaupt keinen HTML-Quelltext ein, sondern nur in die entsprechenden Seiten. In diesen kannst Du aber wiederum andere PHP-Dateien einbinden. Es kommt also darauf an, wie Deine Seite aussieht. Ansonsten bräuchte ich genauere Informationen, wenn wir Dir hier helfen sollen.

Flyingbaby · 27. März 2014

Okay, also....

Die komplette aktuelle Index.php Datei (ohne deine Änderungen) sah mal so aus:

Code:

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml"]
[head]
[link rel="stylesheet" type="text/css" href="format.css" /]
[meta http-equiv="Content-Type" content="text/html; charset=utf-8" /]
[title]Unsere Hochzeit[/title]
[script type="text/javascript"]
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
[/script]
[/head]
[body] onload="MM_preloadImages('images/button_geschichte_mouseover.png','images/button_ueberuns_mouseover.png','images/button_verlobung_mouseover.png','images/button_standesamt_mouseover.png','images/button_trauung_mouseover.png','images/button_feier_mouseover.png','images/button_polterabend_mouseover.png')"]
[div id="header"]
[h1][p class="text-shadow"]Unsere Hochzeit[/p][/h1]
[/div]
[div id="contentWrapper"]
[div id="content"]
[div id="menue"]
[a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/button_ueberuns_mouseover.png',1)"]
[img src="http://www.tutorials.de/images/button_ueberuns.png" width="200" height="50" id="Image2" /]
[ /a ][br /]
[br /]
[a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/button_verlobung_mouseover.png',1)"]
[img src="http://www.tutorials.de/images/button_verlobung.png" width="200" height="50" id="Image1" /]
[ /a ][br /]
[br /]
[a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/button_polterabend_mouseover.png',1)"]
[img src="http://www.tutorials.de/images/button_polterabend.png" width="200" height="50" id="Image7" /][ /a ][br /]
[br /]
[a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/button_standesamt_mouseover.png',1)"]
[img src="http://www.tutorials.de/images/button_standesamt.png" width="200" height="50" id="Image4" /]
[ /a ][br /]
[br /]
[a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/button_trauung_mouseover.png',1)"]
[img src="http://www.tutorials.de/images/button_trauung.png" width="200" height="50" id="Image5" /]
[ /a ][br /]
[br /]
[a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/button_feier_mouseover.png',1)"]
[img src="http://www.tutorials.de/images/button_feier.png" width="200" height="50" id="Image6" /]
[ /a ] 
[/div]
<?php include ("willkommen.html"); ?>
[/div]
[/div]
[div id="footer"]
[a href="fotoalbum.html"][font class="text-shadow"]Fotoalbum[ /font ][ /a ]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
[a href="gaestebuch.html"][font class="text-shadow"]Gästebuch[ /font ][ /a ]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
[a href="kontakt.html"][font class="text-shadow"]Kontakt[ /font ][ /a ]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
[a href="impressum.html"][font class="text-shadow"]Impressum[ /font ][ /a ]
[/div]
[/body]

Jetzt weiß ich nicht, wo ich außer dem Header und Footer den ganzen mittleren Teil hin stecke und wie ich das in das PHP-Get-Parameter verknüpfe...

Parantatatam · 27. März 2014

Formatiere es bitte vorher noch einmal, sonst wird sich das hier niemand ansehen: [code=html][/code]

Flyingbaby · 27. März 2014

Wie meinst du das Formatieren?

PHP include per Button Klick

Flyingbaby

Grünschnabel

Parantatatam

mag Cookies & Kekse

mermshaus

Erfahrenes Mitglied

Flyingbaby

Grünschnabel

Parantatatam

mag Cookies & Kekse

Flyingbaby

Grünschnabel

Parantatatam

mag Cookies & Kekse

Flyingbaby

Grünschnabel

Parantatatam

mag Cookies & Kekse

Flyingbaby

Grünschnabel

Neue Beiträge