How To Create Teleprompter Web Base III
12:28 AM
 |
| Teleprompter Web Based |
<?php
mysql_connect("localhost","usernamedb","passdb");
mysql_select_db("namadatabase");
?>
I split page into two, each of page i give left id for left side and right id for right side. First i will discuss on the left side that i will give news list that can be selected by the broadcaster. Source of news that emerged came from news writter that submit through menuisi.php. ( Sections are discussed at Tutorial create a Teleprompter Web Base Part II).
This is html code for table that is used to showing a selection of news
<table class="listberita"> <tr><th>Pilihan Berita</th></tr> <tr><td> List berita muncul di sini</td></tr> </table>
For retrieve news list of database, enter the code below in the table, but don’t put in the columns and rows.
<?php
include "koneksi.php";
$sql = " SELECT * FROM input ORDER BY judul ";
//echo $sql;
$sql = mysql_query($sql);
while ($data=mysql_fetch_array($sql)){
$d_id = $data["id"];
$d_judul = $data["judul"];
?>
As for the displaying the news list that has been stored in the database, enter this code in the table rows
<tr><td color="#FFFFFF"><a href="index.php?id=<?php echo $d_id;?>"><?php echo $d_judul;?></a></td></tr>
Above code is in left id, as for right id i am using code from cuepropter.com
<table width="950px" cellpadding="0" cellspacing="0" border="0" bgcolor="#666666">
<tr>
<td class="control">
<a href="Javascript:pgup()" class="control">PgUp^</a>
<a href="Javascript:rverse()" class="control"><< REVERSE</a>
<a href="Javascript:stop()" class="control">STOP <span class="stcontrol">||</span></a>
<a href="Javascript:fward()" class="control">FORWARD >></a>
</td>
<td class="control">
Speed:
</td>
<td class="control">
<a href="#" onclick="step='1';scspeed='50'" class="control">1</a>
<a href="#" onclick="step='2';scspeed='40'" class="control">2</a>
<a href="#" onclick="step='2';scspeed='30'" class="control">3</a>
<a href="#" onclick="step='2';scspeed='20'" class="control">4</a>
<a href="#" onclick="step='3';scspeed='30'" class="control">5</a>
<a href="#" onclick="step='3';scspeed='15'" class="control">6</a>
<a href="#" onclick="step='4';scspeed='15'" class="control">7</a>
<a href="#" onclick="step='5';scspeed='5'" class="control">8</a>
<a href="#" onclick="step='10';scspeed='5'" class="control">9</a>
Display mode:
<a onclick="document.getElementById('prom').style.filter='none'" class="control">Norm</a>
<a onclick="document.getElementById('prom').style.filter='flipH'" class="control">Mirror</a>
(Press "F11" for full screen)
</tr>
<tr class="vali">
<td colspan="3" class="vali">
</td>
</tr>
</table>
<script language="JavaScript1.2">
var scspeed = 20
iens6=document.all||document.getElementById
ns4=document.layers
</script>
<div id="container">
<div id="contents">
</div>
<div id="content" style="position:relative;width:100%;left:0;top:0;float:right;border:1px solid #CCC; z-index:-99">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td id="prom" class="teks">
<p>Isi berita dari database</p></td>
</tr>
</table>
<p class="cueprompter">disini tulisan kecil</p>
</div>
</div>
</div>
<div>
<script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck(e){
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 112:
alert("nothing!!");}
}
</script>
<script language="JavaScript1.2">
var step=1
if (iens6){
document.write('</div></div>')
var contentobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=contentobj.offsetHeight
if (document.getElementById&&!document.all){
step=1
}
}
else if(ns4){
var contentobj=document.nscontainer.document.nscontent
var contentheight=contentobj.clip.height
}
function fward() {
if(window.scrolltimerup){
clearTimeout(scrolltimerup)
}
if(iens6&&parseInt(contentobj.style.top)>=(contentheight*(-1)+100)){
contentobj.style.top=parseInt(contentobj.style.top)-step
}else if(ns4&&contentobj.top>=(contentheight*(-1)+100)){
contentobj.top-=step
}
scrolltimerdown = setTimeout("fward()",scspeed)
}
function rverse() {
if(window.scrolltimerdown){
clearTimeout(scrolltimerdown)
}
if(iens6&&parseInt(contentobj.style.top)<=0){
contentobj.style.top=parseInt(contentobj.style.top)+5
}else if(ns4&&contentobj.top<=0){
contentobj.top+=5
}
scrolltimerup = setTimeout("rverse()",scspeed)
}
function stop() {
if(window.scrolltimerup){
clearTimeout(scrolltimerup)
}
if(window.scrolltimerdown){
clearTimeout(scrolltimerdown)
}
}
function pgup(){
stop()
if (iens6) {
contentobj.style.top=0
}
}
function getcontent_height(){
contentheight=contentobj.offsetHeight
}
window.onload=getcontent_height
</script>
Enter this php code that serves to retrieve id of the database in div id content.
<?php
$id = $_GET['id'];
$sql = " SELECT * FROM input WHERE id = $id ";
//echo $sql;
$sql = mysql_query($sql);
while ($data=mysql_fetch_array($sql)){
$d_isi = $data["isi"];
}
?>
Enter php code below in the section where the content of news database is displayed
<?php echo $d_isi;?>Are you confused by the row of code above? This is final file that i used
<html>
<head>
<title>Teleprompter</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Copyright Hannu Multanen 2005 - 2009 -->
<!-- www.cueprompter.com -->
<div id="badan">
<div id="left">
<table class="listberita">
<tr><th>Pilihan Berita</th></tr>
<?php
include "koneksi.php";
$sql = " SELECT * FROM input ORDER BY judul ";
//echo $sql;
$sql = mysql_query($sql);
while ($data=mysql_fetch_array($sql)){
$d_id = $data["id"];
$d_judul = $data["judul"];
?>
<tr><td color="#FFFFFF"><a href="index.php?id=<?php echo $d_id;?>"><?php echo $d_judul;?></a></td></tr>
<?php
}
?>
</table>
<br>
</div>
<div id="right">
<table width="950px" cellpadding="0" cellspacing="0" border="0" bgcolor="#666666">
<tr>
<td class="control">
<a href="Javascript:pgup()" class="control">PgUp^</a>
<a href="Javascript:rverse()" class="control"><< REVERSE</a>
<a href="Javascript:stop()" class="control">STOP <span class="stcontrol">||</span></a>
<a href="Javascript:fward()" class="control">FORWARD >></a>
</td>
<td class="control">
Speed:
</td>
<td class="control">
<a href="#" onclick="step='1';scspeed='50'" class="control">1</a>
<a href="#" onclick="step='2';scspeed='40'" class="control">2</a>
<a href="#" onclick="step='2';scspeed='30'" class="control">3</a>
<a href="#" onclick="step='2';scspeed='20'" class="control">4</a>
<a href="#" onclick="step='3';scspeed='30'" class="control">5</a>
<a href="#" onclick="step='3';scspeed='15'" class="control">6</a>
<a href="#" onclick="step='4';scspeed='15'" class="control">7</a>
<a href="#" onclick="step='5';scspeed='5'" class="control">8</a>
<a href="#" onclick="step='10';scspeed='5'" class="control">9</a>
Display mode:
<a onclick="document.getElementById('prom').style.filter='none'" class="control">Norm</a>
<a onclick="document.getElementById('prom').style.filter='flipH'" class="control">Mirror</a>
(Press "F11" for full screen)
</tr>
<tr class="vali">
<td colspan="3" class="vali">
</td>
</tr>
</table>
<script language="JavaScript1.2">
var scspeed = 20
iens6=document.all||document.getElementById
ns4=document.layers
</script>
<div id="container">
<div id="contents">
</div>
<div id="content" style="position:relative;width:100%;left:0;top:0;float:right;border:1px solid #CCC; z-index:-99">
<?php
$id = $_GET['id'];
$sql = " SELECT * FROM input WHERE id = $id ";
//echo $sql;
$sql = mysql_query($sql);
while ($data=mysql_fetch_array($sql)){
$d_isi = $data["isi"];
}
?>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td id="prom" class="teks">
<p><?php echo $d_isi;?></p></td>
</tr>
</table>
<p class="cueprompter">disini tulisan kecil</p>
</div>
</div>
</div>
<div>
<script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck(e){
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 112:
alert("nothing!!");}
}
</script>
<script language="JavaScript1.2">
var step=1
if (iens6){
document.write('</div></div>')
var contentobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=contentobj.offsetHeight
if (document.getElementById&&!document.all){
step=1
}
}
else if(ns4){
var contentobj=document.nscontainer.document.nscontent
var contentheight=contentobj.clip.height
}
function fward() {
if(window.scrolltimerup){
clearTimeout(scrolltimerup)
}
if(iens6&&parseInt(contentobj.style.top)>=(contentheight*(-1)+100)){
contentobj.style.top=parseInt(contentobj.style.top)-step
}else if(ns4&&contentobj.top>=(contentheight*(-1)+100)){
contentobj.top-=step
}
scrolltimerdown = setTimeout("fward()",scspeed)
}
function rverse() {
if(window.scrolltimerdown){
clearTimeout(scrolltimerdown)
}
if(iens6&&parseInt(contentobj.style.top)<=0){
contentobj.style.top=parseInt(contentobj.style.top)+5
}else if(ns4&&contentobj.top<=0){
contentobj.top+=5
}
scrolltimerup = setTimeout("rverse()",scspeed)
}
function stop() {
if(window.scrolltimerup){
clearTimeout(scrolltimerup)
}
if(window.scrolltimerdown){
clearTimeout(scrolltimerdown)
}
}
function pgup(){
stop()
if (iens6) {
contentobj.style.top=0
}
}
function getcontent_height(){
contentheight=contentobj.offsetHeight
}
window.onload=getcontent_height
</script>
</body>
Hopefully you guys are already understand with writings and the line of code above :D
0 comments