表示データ

ここに私のニュースサイトのメインページのコード（here is an image）
私は私のウェブサイトの例については
に現在位置のニュースを表示したいです...彼のセクションの二次的なニュース、彼のセクションの毎日のニュース。
ので、管理者は、彼らが以前のニュース

後にその場所に追加される二次的または毎日のニュースを追加するたびに、以前の後に追加する方法を...私はどのように私はそれを達成することができます気にいけない助けてください.. 。表示データ

<div class="container" style="padding-top:60px; height: auto;"> 
    <div class="row" id="main"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <marquee bgcolor="red" behaviour="scroll" direction="left" style = "color:white; font-family: 'Roboto', sans-serif;" > 
        <p> 
         <strong> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet        
         </strong>    
        </p> 
       </marquee> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <h3 style=" font-family: 'Lora', serif">Ads Here</h3> 
      <iframe src="" width="100%" height="300px"></iframe> 

       <h3 style=" font-family: 'Lora', serif">Secondary News Here</h3> 
       <div class="secondary-left clearfix"> 
        <a href="#"><h3>Header Text</h3><img src="Images/girl-791231_1920.jpg" width="50%" class="pull-left"></a>    
         <p> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e                 
         </p> 
       </div> 
       <div class="secondary-left clearfix"> 
        <a href="#"><h3>Header Text</h3><img src="Images/newspaper-595478_1920.jpg" width="50%" class="pull-left"></a> 
         <p>    
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit,                 
         </p> 
      </div> 


     </div>   
     <div class="col-md-6" id="center"> 
      <div id="sliderWrapper" style="display:none"> 
      <h2 style=" font-family: 'Lora', serif" class="text-center">Breaking News</h2>    
       <div id="breakingSlider" class="owl-carousel" > 
        <div class="item"> 
         <div class="sliderText"> 
          <h2>Breaking Heading</h2> 
           <p> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore e 
            t dolore magna aliqua.Lorem ipsum dolor sit amet  
           </p> 
         </div> 
         <a href="#"><img src="Images/asia-1177088_1920.jpg" class="img-responsive"></a> 
        </div> 
        <div class="item"> 
         <div class="sliderText"> 
          <h2>Breaking Heading</h2> 
           <p> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore e 
            t dolore magna aliqua.Lorem ipsum dolor sit amet        
           </p> 
         </div> 
         <a href="#"><img src="Images/newspaper-664620_1920.jpg" class="img-responsive"></a> 
        </div> 
        <div class="item"> 
         <div class="sliderText"> 
          <h2>Breaking Heading</h2>     
           <p> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore e 
            t dolore magna aliqua.Lorem ipsum dolor sit amet        
           </p> 
         </div> 
         <a href="#"><img src="Images/news-1172462_1920.jpg" class="img-responsive"></a> 
        </div> 
       </div>   
      </div> 
       <div class="daily clear-fix"> 
         <a href="#"><img src="Images/business-1031754_1920.jpg" class="img-responsive"><h3>Daily news heading</h3></a> 
          <p> 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
           sed do eiusmod tempor incididunt ut labore e 
           t dolore magna aliqua.Lorem ipsum dolor sit amet 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
           sed do eiusmod tempor incididunt ut labore e 
           t dolore magna aliqua.Lorem ipsum dolor sit amet  
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
           sed do eiusmod tempor incididunt ut labore e 
           t dolore magna aliqua.Lorem ipsum dolor sit amet  
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
           sed do eiusmod tempor incididunt ut labore e 
           t dolore magna aliqua.Lorem ipsum dolor sit amet                  
          </p> 
       </div> 
       <div class="daily clearfix">  
        <a href="#"><img src="Images/man-1386201_1920.jpg" class="img-responsive"><h3>Daily news heading</h3></a> 
         <p> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit,                
         </p>  
      </div>                        

     </div>      


     <!-- Simple Currency Rates Table START --> 


     <div class="col-md-3 clearfix"> 

      <h3 style=" font-family: 'Lora', serif">Exchange Rates</h3> 


<div id="erscrt2"><div id="erscrt2-widget"></div><div id="erscrt2-infolink"><a href="http://www.exchangerates.org.uk/British-Pound-GBP-currency-table.html" target="_new" ><img src='http://www.exchangerates.org.uk/widget/logo-333333.png' alt='ExchangeRates.org.uk'></a></div> 
<script type="text/javascript"> 
var tz = 'userset'; 
var w = '180'; 
var mc = 'GBP'; 
var nb = '10'; 
var c1 = 'USD'; 
var c2 = 'EUR'; 
var c3 = 'AUD'; 
var c4 = 'JPY'; 
var c5 = 'INR'; 
var c6 = 'CAD'; 
var c7 = 'ZAR'; 
var c8 = 'NZD'; 
var c9 = 'SGD'; 
var c10 = 'CNY'; 
var t = 'Exchange Rates'; 
var tc = '333333'; 
var bdrc = '000000'; 
var mbg = 'FFFFFF'; 
var fc = '111D33'; 

var ccHost = (("https:" == document.location.protocol) ? "https://www." : "http://www."); 
document.write(unescape("%3Cscript src='" + ccHost + "exchangerates.org.uk/widget/ER-SCRT2-1.php' type='text/javascript'%3E%3C/script%3E")); 
</script> 
</div> 

<!-- Simple Currency Rates Table END -->  


      <h3 style=" font-family: 'Lora', serif">Secondary News Here</h3> 
      <div class="secondary-right clearfix"> 
       <a href="#"><h3>Header Text</h3><img src="Images/man-791440_1920.jpg" width="50%" class="pull-left"></a>     
        <p>    
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore e 
         t dolore magna aliqua.Lorem ipsum dolor sit amet 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore e                 
        </p> 
      </div> 
      <div class="secondary-right clearfix"> 
       <a href="#"><h3>Header Text</h3><img src="Images/How-This-Introvert-Built-a-Successful-Career-as-a-Journalist_SOURCE_pixabay.jpg" width="50%" class="pull-left"></a>     
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore e 
         t dolore magna aliqua.Lorem ipsum dolor sit amet 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore e 
         t dolore magna aliqua.Lorem ipsum dolor sit amet  
         Lorem ipsum dolor sit amet, consectetur adipiscing elit,                 
        </p> 
      </div> 
      <h3 style=" font-family: 'Lora', serif">Weather</h3> 
<a href="http://www.accuweather.com/en/us/new-york-ny/10007/weather-forecast/349727" class="aw-widget-legal"> 

</a><div id="awcc1468436013708" class="aw-widget-current" data-locationkey="" data-unit="c" data-language="en-us" data-useip="true" data-uid="awcc1468436013708"></div><script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script> 

     </div> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <marquee bgcolor="red" behaviour="scroll" direction="left" style = "color:white; font-family: 'Roboto', sans-serif;" > 
        <p> 
         <strong> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet  
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore e 
          t dolore magna aliqua.Lorem ipsum dolor sit amet 
         </strong>    
        </p> 
       </marquee> 
      </div> 
     </div> 
    </div> 
</div>

出典

2016-07-19 Levon Matevosyan

これはhtmlですが、phpとmysqlスクリプトでデータベースに保存して取得しようとしたことはありますか？ – Michael

問題は、PHPや多分JavaScriptコードがどのように機能するのかわかりません...もし誰かが説明したり、いくつかの例を示したりすれば、私は非常に感謝します –

PHPサーバは既に稼働していますか？ MySQLの設定でも？ – Michael

私はそれでより多くの経験を持っているように、私は個人的にMySQLのPDOを使用します。あなたが代わりにmysqliを使用したい場合は、この答えをあなたのニーズに適応させることができます。これを達成するには2つの方法があります：1 - ページロードの一部としてニュースをプルする（推奨）、または2 - AJAXを通してニュースをプルする（少し技術的）。私は最初に説明します。

データベース表：

news 
|=======| 
|id  | 
|title | 
|content| 
|type | //To store 'Daily' or 'Secondary' tag 
|date | //To sort and pull most recent news stories

あなたは、まずデータベースに接続する必要があります。そして、あなたがセットアップする必要があり、あなたのクエリを実行します

<?php 
$config = array(
'host' => 'localhost', //Can also use your IP address 
'username' => 'your username here', 
'password' => 'your password here', 
'dbname' => 'your database name here' 
); 
$db = new PDO('mysql:host='.$config['host'] . ';dbname='. $config['dbname'],$config['username'],$config['password']); 
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

：

//You can go a couple ways at this point: extract this into a function, pull all news types in one DB query and then in PHP sort the results depending on the type of news and display them based on that type, or perform two DB queries and place those results where they need to be. 
//I'll show the last example for simplicity 
//Pull Daily news types 
$query = $db->prepare("SELECT * FROM news WHERE type = 'daily' ORDER BY date DESC LIMIT 10"); //Limiting the number of news articles that are pulled 
$query->execute(); 
$daily_news = $query->fetchAll(); 

//Pull Secondary news types 
$query = $db->prepare("SELECT * FROM news WHERE type = 'secondary' ORDER BY date DESC LIMIT 10"); //Limiting the number of news articles that are pulled 
$query->execute(); 
$secondary_news = $query->fetchAll();

ここから、あなたがに結果をエコーする必要がありますPDOを使用すると、このようなものを使用したいですページ：

//At the bottom of your left column 
<div class="secondary-left clearfix"> 
    <a href="#"><h3>Header Text</h3><img src="Images/newspaper-595478_1920.jpg" width="50%" class="pull-left"></a> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit,                 
    </p> 
</div> 
<div class="secondary-left clearfix"> 
    <a href="#"><h3>Secondary News<h3><img src="Images/newspaper-595478_1920.jpg" width="50%" class="pull-left"></a> 
    <?php 
    foreach($secondary_news as $snews){ //This will loop through every entry that met the criteria in the query and echo a bolded title and the news article 
     $title = $snews['title']; 
     $content = $snews['content']; 
     echo "<p><b>$title</b><br>$content</p>"; 
    } 
    ?> 
</div>

使用することをあなたのページに毎日のニュースを配置する場所のためのモデルとして。基礎を通してあなたを取得し、少なくとも助け

<?php 
$config = array(
'host' => 'localhost', //Can also use your IP address 
'username' => 'your username here', 
'password' => 'your password here', 
'dbname' => 'your database name here' 
); 
$db = new PDO('mysql:host='.$config['host'] . ';dbname='. $config['dbname'],$config['username'],$config['password']); 
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); 
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

//Pull Daily news types 
$query = $db->prepare("SELECT * FROM news WHERE type = 'daily' ORDER BY date DESC LIMIT 10"); //Limiting the number of news articles that are pulled 
$query->execute(); 
$daily_news = $query->fetchAll(); 

//Pull Secondary news types 
$query = $db->prepare("SELECT * FROM news WHERE type = 'secondary' ORDER BY date DESC LIMIT 10"); //Limiting the number of news articles that are pulled 
$query->execute(); 
$secondary_news = $query->fetchAll(); 
?> 
<div class="container" style="padding-top:60px; height: auto;"> 
    <div class="row" id="main"> 
     <div class="row"> 
     ... 
     </div> 
     <div class="secondary-left clearfix"> 
      <a href="#"><h3>Header Text</h3><img src="Images/newspaper-595478_1920.jpg" width="50%" class="pull-left"></a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit,                 
      </p> 
     </div> 
     <div class="secondary-left clearfix"> 
      <a href="#"><h3>Secondary News<h3><img src="Images/newspaper-595478_1920.jpg" width="50%" class="pull-left"></a> 
      <?php 
      foreach($secondary_news as $snews){ 
       $title = $snews['title']; 
       $content = $snews['content']; 
       echo "<p><b>$title</b><br>$content</p>"; 
      } 
      ?> 
     </div> 
     ... 
     <!-- Section for the daily news --> 
     <div class="secondary-left clearfix"> 
      <a href="#"><h3>Daily News<h3><img src="Images/newspaper-595478_1920.jpg" width="50%" class="pull-left"></a> 
      <?php 
      foreach($daily_news as $dnews){ 
       $title = $dnews['title']; 
       $content = $dnews['content']; 
       echo "<p><b>$title</b><br>$content</p>"; 
      } 
      ?> 
     </div> 
     ... 
    </div> 
</div>

うまくいけば、これは、この時点まであなたのページにアップしなければなりません。

出典

2016-07-19 22:31:47 Michael

素晴らしい説明....非常にマイケルありがとう... –

答えて

関連する問題