Zufällige Artikel bzw. divs auf der Startseite

    Hallo zusammen,



    ich bin leider noch blutiger Anfänger, habe aber nun meine erste Frage.


    Mit dem html-seminar.de bin ich soweit durch und habe dadurch einiges lernen können! Vielen Dank für diese tolle Seite!


    Nun arbeite ich an einer Seite.


    Auf der Startseite sollen z.B. 9 Divs (3 x 3 ) mit einem Bild und kurzem Text inkl. Link erscheinen.
    Diese sollen dann eine kleine Vorschau auf die Artkel, die sich hinter den Links befinden, sein.


    Die einzelnen Divs zu Schreiben inkl. Bild einfügen wäre wohl kein Problem.


    Allerdings würde ich das gerne zu allen Artikeln machen, welche natürlich mit der Zeit mehr werden sollten.


    Somit sollen dann immer zufällige Artikel in den o.g. 9 Divs erscheinen.


    Ich hoffe Ihr versteht worum es mir geht.


    Ich möchte selbstverständlich keinen fertigen Code von euch, sondern Wissen wonach ich Beispielsweise googlen soll, wo ich mich da einlesen sollte usw.


    Viele Grüße und schon vorab Danke für eure Hilfe!

    Ich könnte mir vorstellen, dass eine Möglichkeit folgende wäre:


    ich packe 50 fertige Vorschau-Divs auf die Seite, welche ich alle mittels CSS ausblende (display: none;).


    Dann sollen mittels jQuery oder ähnliches nur 9 zufällige divs die klasse randomvorschau erhalten, welche display:block; beinhaltet.


    Auf der Html-seminar homepage habe ich etwas ähnliches gelesen, da wurden dann beispielsweise jeder 2te Absatz geändert, oder nur die ersten 3.



    Ist das völliger Schwachsinn, oder gibt es da eine passende jQuery funktion die einer bestimmten Anzahl von Zufällige divs eine klasse hinzufügen kann?


    Gruß Reschke

    Ich würde auch empfehlen, es mit PHP zu machen, dann kannst Du die Ladezeit reduzieren, wenn es im Laufe der Zeit viele divs werden.
    Informiere dich über Arrays in PHP und lege den HTML-Text der divs in ein Array. Dann mische dieses Array mit der Funktion shuffle, um eine zufällige Reihenfolge zu bekommen. Dann brauchst Du nur noch in einer for-Schleife die ersten fünf Element auszulesen und mit echo auf deiner Seite auszugeben.

    Vielen Dank für die Antworten!


    Dann schaue ich mir mal den Php Kurs an, da wir ja sicherlich auch auf das Thema hingearbeitet, und melde mich sobald ich soweit bin.

    So, erstmal vielen Dank für den Tipp mit den Arrays.
    Nach nun 4 Stunden Php-Kurs, habe ich schon wieder einiges lernen können.


    Einen kleinen Code habe ich nun schon selber schreiben können, der auch soweit funktioniert:


    PHP
    <?php
$zufall[] = "<div style="background-color:blue; width:500px; color:white;"><p>Div 1</p></div>";$zufall[] = "<div style="background-color:green; width:500px; color:white;"><p>Div 2</p></div>";$zufall[] = "<div style="background-color:gray; width:500px; color:white;"><p>Div 3</p></div>";$zufall[] = "<div style="background-color:yellow; width:500px; color:black;"><p>Div 4</p></div>";$zufall[] = "<div style="background-color:brown; width:500px; color:white;"><p>Div 5</p></div>";$zufall[] = "<div style="background-color:black; width:500px; color:white;"><p>Div 6</p></div>";$zufall[] = "<div style="background-color:limegreen; width:500px; color:white;"><p>Div 7</p></div>";$zufall[] = "<div style="background-color:lightblue; width:500px; color:white;"><p>Div 8</p></div>"; shuffle ( $zufall );
echo "Zufalls-Div 1: $zufall[1] <br />";echo "Zufalls-Div 2: $zufall[2] <br />";echo "Zufalls-Div 3: $zufall[3]";
?>



    Natürlich sind nun neue Fragen entstanden :D


    Meine erste Frage:

    Würdet Ihr den PHP Code nun auslagern, oder einfach in die Section um die 3 x 3 Divs packen?


    Dann könnten da natürlich nach gewisser Zeit einige 100 Arrays mit zugeordneten Divs im Quellcode stehen.



    Zweite Frage:


    Wenn ich die PHP Datei auslagere, wie bekomme ich dann die Divs bzw. Arrays in die html Datei?


    Und ist es möglich zu einer PHP Datei eine CSS Datei zu verlinken, wie bei einer HTML Datei? Andernfalls vielleicht den CSS Code mit in die PHP Datei integrieren, wie es auch bei html-Dateien mittels style möglich ist.
    Die Divs sollen nun mal alle identisch aussehen, bis auf den Inhalt ( verschiedene Bilder und Kurzbeschreibnungen).














    Das ging ja schnell!

    Zitat

    Würdet Ihr den PHP Code nun auslagern, oder einfach in die Section um die 3 x 3 Divs packen? Dann könnten da natürlich nach gewisser Zeit einige 100 Arrays mit zugeordneten Divs im Quellcode stehen.

    Gute Idee. Ich bin immer dafür, Daten und Logik zu trennen - das würde dafür sprechen, die Definition des Arrays in eine Datei auszulagern und diese mit include einzuziehen.

    Zitat

    Wenn ich die PHP Datei auslagere, wie bekomme ich dann die Divs bzw. Arrays in die html Datei?

    Das ist kein Problem: Wenn Du den ausgelagerten Code mit include einziehst, ist der Effekt derselbe, als wenn Du ihn mit einem Editor an der Position des include eingefügt hättest. D. h. wenn Du in der inkludierten Datei etwas mit echo ausgibst, wird es in der übergeordneten Datei eingefügt und zwar an der Position, wo das echo steht.

    Zitat

    Und ist es möglich zu einer PHP Datei eine CSS Datei zu verlinken, wie bei einer HTML Datei?

    Selbstverständlich, Du kannst deine CSS-Datei genauso wie gewohnt einziehen. Weil das PHP serverseitig ausgewertet wird, sieht der clientseitige Browser nichts davon sondern nur das generierte HTML.

    Vielen vielen Dank für die rasche Antwort!


    Leider konnte ich das ganze heute erst ausprobieren..., aber es funktioniert mit dem include und der Css Code greift auch bei den klassen in der PHP Datei!


    Aber eine Frage hätte ich noch:


    ich packe meine php Datei mittels include in die Section:


    include ('url,php');


    Dann sind die Arrays nur im "PHP Rahmen" (?PHP....also hier....?) abrufbar, oder gibt es da eine Möglichkeit, die anschließend im gesamten HTML Code abzurufen?


    Ansonten muss ich im "PHP Rahmen" alle Befehle in echo ".."; setzten, oder?


    Beste Grüße und noch einmal 1000 Dank!

    Meinst Du mit PHP-Rahmen dieses:

    PHP
    <?php    ?>


    Ja, PHP kannst Du nur zwischen diesen Tags verwenden. Du kannst diese jedoch an einer beliebigen Stelle in deinem Dokument notieren, auch mehrfach, und kannst dann auch auf die Variablen bzw. Arrays zugreifen, die Du in der includierten Datei definiert hast.
    echo brauchst Du nur, um HTML- oder auch Javascript auszugeben, das im Dokument an den Browser geliefert wird.

    Genau das meinte ich mit PHP-Rahmen :D


    Dann werde ich also so vorgehen:


    PHP
    <div class="links">	<?php 		include('url.php'); 		echo "$zufallsdiv[1]";	?></div>
<div class="mitte">	<?php 		include('url.php'); 		echo "$zufallsdiv[2]";	?></div>
<div class="rechts">	<?php 		include('url.php'); 		echo "$zufallsdiv[3]";	?></div>


    Ist das korrekt, oder unkonventionell, oder darf man ein und die selbe PHP Datei überhaupt mehrfach includen?


    Vielen Dank vorab! :D

    Nein, Du darfst die PHP-Datei nur einmal einziehen, wenn Du das getan hast, steht sie ein für alle Mal zur Verfügung:

    PHP
    <?php include('url.php'); ?><div class="links"><? echo "$zufallsdiv[1]";	?></div><div class="mitte"><?php echo "$zufallsdiv[2]";	?></div> <div class="rechts"><? echo "$zufallsdiv[3]";	?></div>

    Und wenn Du fünf Zufallsdivs haben willst, wie Du anfangs geschrieben hast, wäre es eleganter, sie in einer for-Schleife zu generieren.

    Ah, okay danke für die Antwort.


    Du hast jetzt teilweise <? ... ?> benutzt ohne <?php ist das eine kurzform, oder war das jetzt lediglich ein Flüchtigkeitsfehler?

    Nochmal vielen Dank für alles, bin schon sehr gut voran gekommen.


    Allerdings hätte ich jetzt noch eine Frage:


    Ist es möglich einen button zu erstellen, welcher vor meine 9 Zufalls-Divs kommt, der nach dem klicken nur diese Divs aktualisiert?



    Gruß Reschke

    Nur ein bestimmtes Div aktualisieren oder alle 9 gleichzeitig?


    Ich liege doch richtig mit der Annahme, dass deine 9 Divs bei jedem Reload der Seite neu zusammengestellt werden, oder?


    Alle gleichzeitig könntest du dementsprechend mit einem einfachen JS-Reload der Seite aktualisieren, wenn auf den Button geklickt wird.

    Ja die Divs werden mit jedem Page-Reload aktualisiert, demnach würde deine Methode natürlich funktionieren,


    allerdings hätte ich am liebsten noch zusätzlich einen Button der lediglich die Divs reloaded, bzw. den Array Shuffle durchführt und anschließend in den Divs aktualisiert ohne dass der Rest der Seite aktualisiert wird.


    Ist das auch möglich?

    Zitat

    allerdings hätte ich am liebsten noch zusätzlich einen Button der lediglich die Divs reloaded

    Das geht mit Ajax, wie ich sehe, gibt es darüber auch ein Kapitel hier bei HTML-Seminar. Mit der jQuery-Funktion load() kannst Du auf einfache Weise deine divs in einen Container hineinladen. Du musst nur eine passende PHP-Datei anlegen; den Code dafür hast Du ja schon.

    So nach etwas einarbeit:
    Ich habe bisher in meiner Section ein "Gitternetz" mit den 3 x 3 Divs in einem Container.


    Wenn ich dass nun richtig verstanden habe, packe ich den Inhalt des Container-Div zusätzlich in eine extra Datei, also den folgenden Inhalt:

    PHP
    <?php include('url.php'); ?>
<div class="links">		<?php echo "$zufallsdiv[1]";	?>	</div>
<div class="mitte">		 <?php echo "$zufallsdiv[2]";	?>	</div>
<div class="rechts">		 <?php echo "$zufallsdiv[3]";	?>	</div>


    weiterhin habe ich aber die PHP Datei mit den Arrays und dem Shuffle.


    Dann erstelle ich meinen Button zum reloaden vor dem Container Div + folgenden script:


    JavaScript
    $(document).ready(function(){	$("button").click(function(){	$("#container").load("zufallsreload.txt");    });});




    Wäre dann eine txt Datei Sinnvoll, da ja letztlich ein Text eingefügt werden soll?


    Ich hoffe man kann verstehen was ich meine :D


    Vielen Dank vorab für die Hilfe!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden