Comment ajouter dynamiquement du contenu de la base de données à Div Elements?

Question

J'ai récemment décidé de travailler sur une application Web dynamique. Je vais utiliser HTML, CSS, JSP, MS SQL DB et Servlets (et peut-être PHP) dans mon application. J'ai choisi un site de vente de billets en ligne comme source d'inspiration pour ma propre application. Depuis que je n'ai travaillé que sur les sites statiques, j'ai rencontré un problème très frustrant.

Je vais expliquer mon problème avec un site Web de nouvelles. Dites, quand un éditeur de nouvelles soumet un article de nouvelles, comment l'article est-il ajouté à l'élément div (je suppose qu'il s'agit d'un élément Div) sur la page d'actualités principale? De plus, ce nouvel article reporte les dernières nouvelles au bas de l'échelle et prend la première place.

Pour mon propre projet, je souhaite créer une page Web dans laquelle l'administrateur insère divers détails sur les événements (tels que les sports, les émissions musicales), puis ces événements sont transmis aux balises div de l'autre page. Les événements les plus récents sont affichés en haut, tandis que les plus anciens sont poussés vers le bas.

Ma compréhension de base est que les données entrées par l'administrateur sont envoyées et stockées dans la table DB. Les données de cette table sont maintenant récupérées par la page Web contenant les balises div/article/section. Après cela, je n'ai aucune idée de ce qui se passe.

Beaucoup d'excuses pour ne pas apporter super clair et pour ne pas comprendre ce concept. Je ne peux juste pas envelopper ma tête autour de cela:/J'apprécierai vraiment votre aide :)

Answer 1

Tout d'abord, je vais vous suggérer d'utiliser PHP et non JSP ... PHP est plus facile pour les débutants et vous pouvez trouver plus de solution à vos problèmes.

Maintenant, se connecter à la base de données, sélectionnez l'élément dans votre table d'événements et de les imprimer dans votre document:

<?php 
    $servername = "localhost"; 
    $username = "username"; 
    $password = "password"; 
    $dbname = "myDB"; 

    // Create connection 
    $conn = new mysqli($servername, $username, $password, $dbname); 
    // Check connection 
    if ($conn->connect_error) { 
     die("Connection failed: " . $conn->connect_error); 
    } 

    $sql = "SELECT * FROM EVENTS_TABLE ORDER BY 'DATE' ASC"; // ASC means you're ordering from newest to oldest 
    $result = $conn->query($sql); 

    if ($result->num_rows > 0) { 
     // output data of each row 
     while($row = $result->fetch_assoc()) { 
      echo "<div class='event'><h3>". $row["EVENTNAME"] . "</h3><h6>" . $row["EVENTGENRE"] . "</h6></div>"; // Obviously you have to use your COLUMN_NAMES 
     } 
    } else { 
     echo "0 results"; 
    } 
    $conn->close(); 
?> 

qui créera une structure comme ceci:

<div class="event"> 
    ... 
</div> 
<div class="event"> 
    ... 
</div> 
<div class="event"> 
    ... 
</div> 

Vous » Il suffit d'envelopper le code ci-dessus dans une simple balise div comme ceci:

<div class="event-wrapper"> 
    <?php 
     ... // The code above 
    ?> 
</div> 

Quelques liens utiles:

• SQL ORDER BY date problem
• https://www.w3schools.com/php/php_mysql_intro.asp