顯示數據在當前位置

這裏是我的新聞網站主頁的代碼（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，則可以根據需要調整此答案。有兩種方法可以實現這一點：1 - 將新聞作爲頁面加載的一部分（推薦）或2 - 通過AJAX（技術稍微多點）將新聞拉進來。我會解釋第一個。

數據庫表：

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

首先，您需要連接到數據庫。隨着PDO，你會使用這樣的：

<?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();

從這裏，你需要回應的結果到您的頁面：

//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

偉大的解釋....非常感謝你邁克爾... –

顯示數據在當前位置

回答

相關問題