Tute 17 : Create Dynamic Right Panel in Website : Part One

This tutorial we know Create Dynamic Right Panel in our website. In right panel we will show many article or specific article or in one category's article. We work in our index.php file  and css file. First We open our index.php page in notepade++ or other text editor. Then we write this code into the <?php ?> code. We write code after this line : $query_run=mysql_query($query);



--------------------------------------------------

$query_r="SELECT `id`, `heading`, `image`, `details`, `category` FROM tute ORDER BY id DESC";
$query_run_r=mysql_query($query_r);

---------------------------------------------------

Then we write some code in write panel. Go to bottom. Before We make right panel and write "body-con-r." in "<h3>This is Right container.</h3>" code. We write this code after "<h3>This is Right container.</h3>" code.


------------------------------------

<?php
        while($query_row_r=mysql_fetch_assoc($query_run_r)){
            $heading_r=$query_row_r['heading'];
            $details_r=$query_row_r['details'];
            $image_r=$query_row_r['image'];
            $id_r=$query_row_r['id'];
            echo '<h3><a href="detailspage.php?id='.$id.'">'.$heading_r. '</a></h3>';
            echo '<img src=images/'.$image_r.' class="h-img">';
            echo $details_r. '<br><br>';
        }
        ?>

------------------------------------

Now we go to our Google chrome Home Page and refresh the page. We see our all article in right panel.


Now we some decorate out Right Panel. We replace "Latest Article" in "This is Right container." in <h3></h3> tag. And write <h2></h2>. Then open our "style.css" page in notepadd++. Then write css some code for heading two. We write this code bottom of page :

-------------------------------------

h2{
    font-size:20px;
    padding:5px 0;
    margin:0 0 20px 0;
    text-decoration:none;
    color:#FFFFFF;
    background-color:#000000;
    text-align:center;
}

------------------------------------------

Then Go to Google chrome Home page and refresh the page. We see our right panel of the site has been changed. We see "Latest News" in black background.

If not show see the code carefully and save file then refresh the Google Chrome Page.