Levon Matevosyan Levon Matevosyan - 4 months ago 12
PHP Question

Display data from database in current place at HTML page using mysqli php


  1. Here is my news website main page code...[Here is an image][Website]
    I want to display news in current positions in my website

  2. For Example...The secondary news in his section, daily news in his section.

  3. So every time the admin adds secondary or daily news they will be added in their places after the previous news

  4. PLease help i dont mind how can i achieve it...how to add the after their previous...

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


    [1]: http://i.stack.imgur.com/jPIbQ.jpg


Answer

I would personally use MySQL's PDO as I have more experience with it. You can adapt this answer to your need if you would like to use mysqli instead, though. There are two ways to achieve this: 1 - pull the news in as part of the page load (recommended) or 2 - pull the news in through AJAX (a little more technical). I'll explain the first.

Database Table:

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

You first need to connect to the database. With PDO, you'd use something like this:

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

Then you'll need to setup and execute your query:

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

From here, you'll need to echo the results into your page:

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

Use that as a model for where you want to put the daily news in your page. This should be your page up to this point:

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

Hopefully that helps at least get you through the basics.

Comments