Monday, March 3, 2014

Tute 25 : Latest Data Show in Home Page : Part Two

Now we go to home page in google chrome. Then refresh the page. We see in right side. A new line show with black background. We will show here our latest news.


Now we will work about php code in index.php file. Make  a new query for latest news. We write query code after " $query_run=mysql_query($query); " line :

---------------------------------------------------------------------------------------------
$query_lat = "SELECT `id`, `heading` FROM tute ORDER BY `id` DESC";
$query_lat_run=mysql_query($query_lat);
---------------------------------------------------------------------------------------------



Now we write some php and html code into "latest-news" div. We write this code after <h2></h2> :

----------------------------------------------------------------------------------------------
<ul>
      <?php
      while($query_lat_row=mysql_fetch_assoc($query_lat_run)){
      $heading_lat=$query_lat_row['heading'];
      $id_lat=$query_lat_row['id'];
      echo '<li> <a href="detailspage.php?id='.$id_lat.'">'.$heading_lat.'</a></li>';      }
      ?>
</ul>
----------------------------------------------------------------------------------------



Here we take unordered list. Then take a while loop and published post headline. We also link the heading via id. Before we do same work for link article heading.

After hat we save the document and go to google chrome and refresh the home page. We see some article heading show in right panel. We take the mouse this heading. The mouse pointer change in linkable pointer.

Now we will some decorate this list. So go to stylesheet.css file in notepad++. Write this code bottom of page :

----------------------
.latest-news ul{
padding:0;
margin:0 15px;
}

.latest-news ul li{
padding:5px 0px;
margin:0px;
color:#000000;
}

.latest-news ul li a, a:hover, a:visited{
color:#000000;
text-decoration:none;
}
-------------------------

Then refresh the home page in Google chrome. List style is changed.

No comments :

Post a Comment