Neueste Trends Individuelle Online-Anwendungen Design für die Zukunft

Kontakt
Webdesign aus Wernigerode / Harz

PHP Blog

Eigene News Seite mit PHP erstellen
zurück zur Übersicht
Eigene News Seite mit PHP erstellen von Jens Wiecker ( 30.12.2018 )

Es gibt unzählige News Plattformen, aber wäre es nicht schön aktuelle News sortiert auf einer Seite sehen zu können? Ich zeige Euch wir Ihr verschiedene XML News-Feed ganz einfach anzeigen lassen könnt. Ihr benötigt dazu nur 2 Dateien und natürlich einen Server (z.B. xampp).

 

 

 

 

 

 

Eine DEMO findet Ihr hier.

Als Erstes erstellen wir uns unsere 2 Dateien die wir benötigen.

  • index.php
  • style.css

Hier gibt es die fertigen Dateien zum Dowload.

Wir öffnen die index.php und erstellen uns erstmal ein Grundgerüst unsere News-Seite.


<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="style.css" rel="stylesheet">
  <title>News Feeds</title>
</head>
<body>
<h1 class="text-center pt-2">News Feeds </h1>

</body>
</html>

 

Die style.css sieht folgendermaßen aus.

Die style.css könnt Ihr natürlich individuell anpassen. Wichtig ist nur, dass Ihr Media Queries verwendet. Damit wird unsere News-Seite automatisch auf verschiedene Endgeräte angepasst.

 

Die style.css


@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,900);
body,html {
 font-family:Roboto,sans-serif;
 color:#6a6a6a;
}
a {
 color:#fff;
 text-decoration:none
}
a:hover {
 color:orange;
}
 .text-center {
 text-align:center
}
 .flex-wrapper {
 width:100%;
 background:#dadada;
}
.newselement {
 background:#374855;
 color:#fff;
 text-align:center;
 width:24.8%;
 margin:.1%;
 padding:15px 0 15px 0;
}
@media only screen and (max-width:996px){
 .newselement {
   width:49.8%;
  }
 .wrapper-settings input {
   width:100%;
  }
}
@media only screen and (max-width:590px){ 
 .newselement {
   width:99.8%;
 }
 .wrapper-settings input {
    width:100%;
 }
}
.flex-wrapper {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:start;
}
.head-wrapper h4 {
  margin-left:2.5%;
  font-size:1.4rem;
}
.news-head {
  display:block;
  top:0;left:0;
}
.newselement h6 {
  min-height:6rem;
  margin-top:0;
  margin-bottom:1.5rem;
  text-align:left;
  padding:.5rem;
  font-size:1.5rem;
  font-weight:400;
}
.hr-white {
  margin-top:.5rem;
  margin-bottom:.5rem;
  border:0;
  border-top:1px solid rgba(255,255,255,.4);
}
.newselement p {
  min-height:6em;
  padding:.5em;
  text-align:left;
  line-height:1.2;
}

 

Die index.php mit Inhalt füllen

Als Erstes überprüfen wir ob die Variable $_GET[`show`] gesetzt ist. Mit dieser Variable können wir bestimmen, wieviel News pro Anbieter angezeigt werden sollen. Ist die Variable nicht gesetzt werden 12 News pro Anbieter angezeigt. Als nächstes erzeugen wir ein array mit unseren News Anbietern. 


<?php
isset($_GET['show']) && is_numeric($_GET['show']) ? $anzahl = $_GET['show'] : $anzahl = 12;


$url = array('https://www.tagesschau.de/xml/tagesschau-meldungen/',
             'https://www.spiegel.de/schlagzeilen/rss/0,5291,,00.xml',
             'https://www.n-tv.de/rss',
             'https://www.bild.de/rss-feeds/rss-16725492,feed=news.bild.html',
             'https://www.bild.de/rss-feeds/rss-16725492,feed=politik.bild.html',
             'https://www.bild.de/rss-feeds/rss-16725492,feed=unterhaltung.bild.html',
             'https://www.bild.de/rss-feeds/rss-16725492,feed=sport.bild.html',
             'https://www.bild.de/rss-feeds/rss-16725492,feed=lifestyle.bild.html',
             'https://www.bild.de/rss-feeds/rss-16725492,feed=ratgeber.bild.html');
?>
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="style.css" rel="stylesheet">
  <title>News Feeds</title>
</head>
<body>
<h1 class="text-center pt-2">News Feeds </h1>

</body>
</html>

 

Das Herzstück unserer News-Seite



for ( $i = 0; $i <= count( $url ) - 1; $i++ ) {
    $y = 0;
    $z = 1;
    $xml = simplexml_load_file( $url[ $i ] )or die( "kann Url nicht finden!" );
    foreach ( $xml->channel->item as $item ) { 
        $y++;
     }
       if ( $anzahl > $y ) {
          $show_anzahl = '';
       } else {
          $show_anzahl = $anzahl . '/ ';
     }
     echo '<div class="head-wrapper">
     <h4>' . $xml->channel->title . '<small> ( ' . $show_anzahl . ' ' . $y . ' )</small></h4>
     </div>
     <div class="flex-wrapper">';
     foreach ( $xml->channel->item as $item ) {
         echo '<div class="newselement">
         <h6>' . $item->title . '</h6>
         <hr class="hr-white">
         <p>' . $item->description . '</p> 
         <hr class="hr-white"> 
         <a href="' . $item->link . '" target="_blank">news ansehen</a>
         </div>';
         if ( $z >= $anzahl ) {
             break;
         }
         $z++;
      }
  echo '</div>';
}

 

Mit der For-Schleife durchlaufen wir unser $url array(). Jeder Eintrag wird einzeln durchlaufen und die Inhalte des Anbieters abgerufen. Dabei werden unsere Inalte mit $xml = simplexml_load_file( $url[ $i ] )or die( "kann Url nicht finden!" ); in $xml gespeichert. Die $xml beinhaltet nun alle Objekte die wir benötigen.

Die Erste foreach Schleife dient uns dazu die Anzahl der News herauszufinden. Wir greifen dazu auf das $xml->channel->item Objekt zu. Für jeden Eintrag wird die Variable $y um eins erhöht. Wir erstellen uns jetzt eine Variable für die Formatierung der Überschrift. Mit echo geben wir nun unsere Überschrift unserer News-Seite aus.

Die Zweite foreach Schleife holt uns den Inhalt jedes einzelnen Eintrags unseres Anbieters. Mit echo können wir nun unsere Boxen für den News-Eintrag erstellen. Zum Schluss überprüfen wir noch, ob die Anzahl unserer $_GET['show'] nicht größer als $z ist. Sollte dies der Fall sein,  wird die Schleife abgebrochen und der nächste Eintrag unseres $url arrays wird verarbeitet. 

Wir können nun unsere News-Seite unter http://localhost/news/index.php?show=16 anzeigen lassen.

Der fertige Code Komplett.

 


<?php
isset($_GET['show']) && is_numeric($_GET['show']) ? $anzahl = $_GET['show'] : $anzahl = 12;

$url = array('https://www.tagesschau.de/xml/tagesschau-meldungen/',
              'https://www.spiegel.de/schlagzeilen/rss/0,5291,,00.xml',
              'https://www.n-tv.de/rss',
              'https://www.bild.de/rss-feeds/rss-16725492,feed=news.bild.html',
              'https://www.bild.de/rss-feeds/rss-16725492,feed=politik.bild.html',
              'https://www.bild.de/rss-feeds/rss-16725492,feed=unterhaltung.bild.html',
              'https://www.bild.de/rss-feeds/rss-16725492,feed=sport.bild.html',
              'https://www.bild.de/rss-feeds/rss-16725492,feed=lifestyle.bild.html',
              'https://www.bild.de/rss-feeds/rss-16725492,feed=ratgeber.bild.html');
?>
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="style.css" rel="stylesheet">
  <title>News Feeds</title>
</head>
<body>
<h1 class="text-center pt-2">News Feeds <?php echo date('d.m.Y'); ?> <small>(<?php echo count($url); ?> Anbieter)</small></h1>

for ( $i = 0; $i <= count( $url ) - 1; $i++ ) {
    $y = 0;
    $z = 1;
    $xml = simplexml_load_file( $url[ $i ] )or die( "kann Url nicht finden!" );
    foreach ( $xml->channel->item as $item ) { 
        $y++;
     }
       if ( $anzahl > $y ) {
          $show_anzahl = '';
       } else {
          $show_anzahl = $anzahl . '/ ';
     }
     echo '<div class="head-wrapper">
     <h4>' . $xml->channel->title . '<small> ( ' . $show_anzahl . ' ' . $y . ' )</small></h4>
     </div>
     <div class="flex-wrapper">';
     foreach ( $xml->channel->item as $item ) {
         echo '<div class="newselement">
         <h6>' . $item->title . '</h6>
         <hr class="hr-white">
         <p>' . $item->description . '</p> 
         <hr class="hr-white"> 
         <a href="' . $item->link . '" target="_blank">news ansehen</a>
         </div>';
         if ( $z >= $anzahl ) {
             break;
         }
         $z++;
      }
  echo '</div>';
}
?>
</body>
</html>

Hier gibt es die fertigen Dateien zum Dowload.

Über mich:

Mein Name ist Jens Wiecker und ich bin Gründer von ArtPicture-Design. In den letzten Jahren habe ich mich auf Webdesign & Grafikdesign spezialisiert. Meine Leidenschaft ist die Datenverarbeitung mit PHP und AJAX.


zurück zur Übersicht
0 Kommentare

Du musst angemeldet sein, um einen Kommentar zu schreiben.