Dynamic News Ticker PHP and Mysql | News Scroller in PHP

Hello !!! its so long to see you again here. Today i am going to write an article about the Dynamic News Ticker using MYSQL and PHP. For ticker we will use the Jquery ‘Vticker plugin “. You can download it from here. First of all let me show you the vticker working. Below is the code for vticker.

HTML

<div id="example">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
  </ul>
</div>

Javascript

$(function() {
  $('#example').vTicker();
});

You can download the static version of the vticker form the official website – http://richhollis.github.io/vticker/.

Now you know about how the vticker work snow we will move to our main step that we will make this vticker dynamic and using mysql and php.

What we need is PHP and MySQL. Lets start with making our database so that we will concentrate on our programming part. We will create a table “news”. With 2 columns – Id,text.

MySQL Query

CREATE TABLE IF NOT EXISTS news(
  Id int(11) NOT NULL AUTO_INCREMENT, 
  text varchar(300),
PRIMARY KEY (`Id`)
);

As we have created a table now we will put some dummy rows in it. You can take the dummy rows from above. Lets insert some rows.

insert into news (text) values('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor');
insert into news (text) values('Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut');
insert into news (text) values('Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore');

Now we have 3 rows in our table now we can do our php part to fetch it. If you want to insert it through the PHP than you can also use these queries and put the text according to you. If you dont know how to insert than check out our article for how to submit form data in database.

PHP – Fetch database values.

Now we will fetch values from database using mysqli_fetch_array(). We will retrieve the text column.

function getNews(){
$query="select * from news"
//query to retrieve the values from news table.
$result=mysqli_query($con,$query); 
// we assume that we have a connection string that is $con.
$count=mysqli_num_rows($result);
//it will count the rows.

if($count < 1){ return "No news";}
else{
while($row=mysqli_fetch_array($result)){
$alert.="<li>".$row[text]."</li>";
}
return $alert;
}
//$alert is variable which will store all the values in it. 
}

Now we have our values and we will show it over the vticker. We will update our vticker and call the function “getNews()”.

<div id="example">
  <ul>
    <?php echo getNews(); ?>
  </ul>
</div>

Now when we run it you will that ticker is having the values which is coming from database. Other things will remain the same your css, your js everything only we will change the <ul> tag of vticker.

Hope you enjoyed it a lot if you have any issues or comments than please comment below.