Slide Scroll News Animation with PHP and Javascript- Agoes' Blog

Posted by admin | In: Web Programming

Assalamualaikum wr, wb…..

Hallo All… Hai hai hai hoi hoi hoi Bla bla bla……..

Kali ini kita akan mencoba untuk membuat Kotak Animasi Scroll Slide News… Yakni tampilan Latest News dari sebuah website yang dapat berganti-ganti secara otomatis…. Kita biasa melihat animasi semacam ini dibuat menggunakan Flash, tapi tidak sedikit pula yang membuatnya menggunakan Javasript. Dan kali ini saya akan mencoba mempraktekkannya menggunakan kode serderhana namun dengan hasil yang cukup Sempurna.. hm………

Biar ga penasaran dan biar penasaran. hmm… maksudku biar ga penasaran ama jadinya…. N biar penasaran ama cara bikinnya, dah nih tak kasih kesempatan buat nengok…

http://agoesdoubleb.i-bego.com/arsip/slide-scroll-news/view.php

Baik, pada latihan ini kita akan menggunakan sebuah database dan tabel. Pertama-pertama buat sebuah Database menggunkan mySQL dengan nama tutorial, kemudian buat sebuah tabel dengan nama tbldata. Dengan rincian field2 sebagai berikut….

1. id int auto increment primary key

2. judul vasrchar 125

3. isi text

4. tanggal date

Hoke hoke hoke…… Database ini dapat anda buat di localhost saja, kecuali anda ingin segera mencobanya di server silahkan, suka-suka lah…… hihihihi…..

Next, Karena latihan yang akan kita lakukan menggunakan bahasa pemrograman server-side PHP disini saya asumsikan anda sudah menginstal software apache server, php dan database mySQL. Jika ingin yang praktis silahkan download saja aplikasi Xamp, gratis hueheheh…..

Buat sebuah file dengan nama config.php. File ini berguna untuk menyimpan setting koneksi ke database.

<?php
$hostname_db = “localhost”;
$database_db = “tutorial”;
$username_db = “root”;
$password_db = “”;
$con_db = mysql_pconnect($hostname_db, $username_db, $password_db) or trigger_error(mysql_error(),E_USER_ERROR);
?>

Next buat sebuah file dengan nama view.php. pada file ini kita akan ketikkan kode yang berfungsi untuk menampilkan kotak animasi Scroll Slide News hitu….. :p

<?php
require_once(’config.php’);
mysql_select_db($database_db, $con_db);

$query = “select * from tbldata order by `id` desc limit 5″;
$Result = mysql_query($query, $con_db) or die(mysql_error());
$row_count = mysql_num_rows($Result);
?>
<html>
<head><title>Slide Scroll News</title>
<style type=”text/css”>
#topmain {
height:150px;
width:414px;
border-style:solid;
border-width:thin;
padding-top:5px;
padding-left:5px;
padding-bottom:5px;
padding-right:4px;
margin:5px;
float:none;
overflow:hidden;
background-color:#FFFFFF;
}

#topmain img {
border-style:solid;
border-width:thin;
padding:4px;
width:120px;

}

#topbutton {
padding-left:3px;
padding-right:3px;
padding-bottom:0px;
padding-top:0px;
margin-right:2px;
margin-bottom:5px;
float:right;
overflow:hidden;
background-color:#FFFFFF;
}

#topbutton:hover {
float:right;
overflow:hidden;
cursor:pointer;
font-weight:bold;
}

.topmainlink {
font-family:Tahoma;
color:#AAAAAA;
background-color:#000000;
font-size:18px;
text-decoration:none;
}

.topmainlink:hover {
font-family:Tahoma;
color:#0000FF;
background-color:#000000;
font-size:18px;
text-decoration:none;
}
</style>

</head>
<body>

<div align=”center”><font face=”Monotype Corsiva” color=”#993300″ size=”+4″>Slide Scroll News</font> <br>
<?php
while ($row_result = mysql_fetch_row($Result)){
echo “<div id=\”topmainberita\” name=\”topmainberita\” style=\”display:none\”>\n”;
echo “<table cellpadding=\”0\” cellspacing=\”0\”>\n”;
echo “<tr>”;
echo “<td valign=\”top\”>”;
echo “<b>”.$row_result[1].”</b></td>”;
echo “</tr>\n”;
echo “<tr>\n”;
echo “<td> <font size=1 color=\”blue\”>”.$row_result[3].”</font><br>\n”;
echo “<b> <font size=2 color=\”black\”>”.$row_result[2].”</font></b><br>\n”;
echo “</td>”;
echo “</tr>\n”;
echo “</table>”;
echo “</div>\n”;
}
echo “<table align=\”center\” width=\”100px\ border=\”1\”><tr><td><div id=\”topmain\” align=\”left\”></div>”; for($u = 0; $u < $row_count; $u++){
$nom = $u + 1;
echo “<div id=\”topbutton\” name=\”topbutton\” onclick=\”for (i=0; i < “.$row_count.”; i++) document.getElementsByName(’topbutton’)[i].style.background = ‘#FFFFFF’; document.getElementsByName(’topbutton’)[".$u."].style.background = ‘#CC9966′; document.getElementById(’topmain’).innerHTML = document.getElementsByName(’topmainberita’)[".$u."].innerHTML; nil=”.$u.”\”>”.$nom.”</div>”;
}
echo “</td></tr></table>”;
?>
<script type=”text/javascript”>
var nil = 0;
slash();
function slash() {
document.getElementById(’topmain’).innerHTML = document.getElementsByName(’topmainberita’)[nil].innerHTML;
for (i=0; i < <?php echo $u; ?>; i++) {
document.getElementsByName(’topbutton’)[i].style.background = ‘#FFFFFF’;
}
document.getElementsByName(’topbutton’)[nil].style.background = ‘#CC9966′;
nil = nil + 1;
if (nil == <?php echo $u;?>) nil = 0;
var t = setTimeout(”slash()”, 3000);
}
</script>
</div>
</body>
</html>

Ntar saya jelasin dikit…….

<style type=”text/css”>
#topmain {
height:150px;
width:414px;
border-style:solid;
border-width:thin;
padding-top:5px;
padding-left:5px;
padding-bottom:5px;
padding-right:4px;
margin:5px;
float:none;
overflow:hidden;
background-color:#FFFFFF;
}

#topmain img {
border-style:solid;
border-width:thin;
padding:4px;
width:120px;

}

#topbutton {
padding-left:3px;
padding-right:3px;
padding-bottom:0px;
padding-top:0px;
margin-right:2px;
margin-bottom:5px;
float:right;
overflow:hidden;
background-color:#FFFFFF;
}

#topbutton:hover {
float:right;
overflow:hidden;
cursor:pointer;
font-weight:bold;
}

.topmainlink {
font-family:Tahoma;
color:#AAAAAA;
background-color:#000000;
font-size:18px;
text-decoration:none;
}

.topmainlink:hover {
font-family:Tahoma;
color:#0000FF;
background-color:#000000;
font-size:18px;
text-decoration:none;
}
</style>

Yang ini CSS. Berfungsi mengatur tampilan halaman HTML.

$query = “select * from tbldata order by `id` desc limit 5″;
$Result = mysql_query($query, $con_db) or die(mysql_error());
$row_count = mysql_num_rows($Result);

Disini dilakukan query untuk melakukan seleksi data dari database.

while ($row_result = mysql_fetch_row($Result)){
echo “<div id=\”topmainberita\” name=\”topmainberita\” style=\”display:none\”>\n”;
echo “<table cellpadding=\”0\” cellspacing=\”0\”>\n”;
echo “<tr>”;
echo “<td valign=\”top\”>”;
echo “<b>”.$row_result[1].”</b></td>”;
echo “</tr>\n”;
echo “<tr>\n”;
echo “<td> <font size=1 color=\”blue\”>”.$row_result[3].”</font><br>\n”;
echo “<b> <font size=2 color=\”black\”>”.$row_result[2].”</font></b><br>\n”;
echo “</td>”;
echo “</tr>\n”;
echo “</table>”;
echo “</div>\n”;
}

Pada tahap ini, data hasil seleksi akan ditampilkan dalam bentuk div dengan atribut display = none. Artinya div-div itu tidak akan ditampilkan. Fungsi div-div ini yang nantinya akan ditampilkan pada div utama dalam halaman. perhatikan kode dibawah ini.

echo “<table align=\”center\” width=\”100px\ border=\”1\”><tr><td><div id=\”topmain\” align=\”left\”></div>”; for($u = 0; $u < $row_count; $u++){
$nom = $u + 1;
echo “<div id=\”topbutton\” name=\”topbutton\” onclick=\”for (i=0; i < “.$row_count.”; i++) document.getElementsByName(’topbutton’)[i].style.background = ‘#FFFFFF’; document.getElementsByName(’topbutton’)[".$u."].style.background = ‘#CC9966′; document.getElementById(’topmain’).innerHTML = document.getElementsByName(’topmainberita’)[".$u."].innerHTML; nil=”.$u.”\”>”.$nom.”</div>”;
}
echo “</td></tr></table>”;

Perhatikan yang ini :

Pada kode ini akan dibuat sebuah div tempat menampung data-data dari topmainberita diatas.

Kode dibawahnya, untuk membuat tombol-tombol navigasi beritanya.

<script type=”text/javascript”>
var nil = 0;
slash();
function slash() {
document.getElementById(’topmain’).innerHTML = document.getElementsByName(’topmainberita’)[nil].innerHTML;
for (i=0; i < <?php echo $u; ?>; i++) {
document.getElementsByName(’topbutton’)[i].style.background = ‘#FFFFFF’;
}
document.getElementsByName(’topbutton’)[nil].style.background = ‘#CC9966′;
nil = nil + 1;
if (nil == <?php echo $u;?>) nil = 0;
var t = setTimeout(”slash()”, 3000);
}
</script>

Kode javascript disinilah yang paling penting. Pada kode ini kita akan membuat sebuah fungsi yang akan mengatur jalannya animasi pada Kotak berita.

var t = setTimeout(”slash()”, 3000);

Untuk mengatur kecepatan silahkan ganti angka 3000 diatas. 3000 dalam hitungan milisecond.

Untuk file latihan silahkan anda donlod pada link ini http://www.4shared.com/file/157986791/df475c36/slide_scroll_news.html

Ok, Terima kasih telah menyempatkan membaca. Kritik, saran, Pertanyaan Silahkan dilayangkan ke Kotak Comment atau add YM saya aja….. Hueheheh

Akhir kata, Mohon maaf bla bla bla. Wassalamualaikum wr, wb.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Agoes' Blog

Kata Pengantar dari Saya (Agoes)

Leave a reply