How To Create Teleprompter Web Base IV - On this last part we will add chat feature thatcan be used communicate between broadcsater and news author. This chat feature is made by Anant Gart from inscript.com, to use it we need a database with name of chat table. To create table as requested by this feature, we can go to localhost/phpmyadmin. After that, open teleprompter database and select sql menu.
On run sql text area, enter the code below that will make table name with variable needed to use this chat feature
After username (at least two usernames). Next we need to enter a username and password of database on chat.php page. This section is located at the top of the file containing
 |
| Menu SQL |
CREATE TABLE `chat` ( `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, `from` VARCHAR(255) NOT NULL DEFAULT '', `to` VARCHAR(255) NOT NULL DEFAULT '', `message` TEXT NOT NULL, `sent` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00', `recd` INTEGER UNSIGNED NOT NULL DEFAULT 0, PRIMARY KEY (`id`) ) ENGINE = InnoDB;After the database is created, enter database with two users, broadcaster and author as username. In addition, it’s up to you to use your username as what, but you have to keep that in mind.
 |
| Add User |
define ('DBPATH','localhost');
define ('DBUSER','usernamedb');
define ('DBPASS','passworddb');
define ('DBNAME','namadb');
After username, password, and database name are set, next we will install this chat feature on the submit page. On the head, enter css link to pop up a chat using html code below
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" /> <link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />Next, enter menu to chat with newscaster, why newscaster? Because in this page is accessed by the news author. Here is the code for displaying chat menu with newscaster.
<a href="javascript:void(0)" onclick="javascript:chatWith('penyiar')">Chat dengan Penyiar</a>
Next insert chat.php into php file submit by way of adding this php code.
<?php include "chat.php"; $_SESSION['username'] = "penulis" //username penulis ?>And don’t forget to include external javascript to enable this chat feature
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/chat.js"></script>Here is the code that i use in submit.php file which serves as news author’s page for entering news data into database.
<html>
<head><title>User Input</title></head>
<link rel="stylesheet" type="text/css" href="form.css">
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />
<body>
<h2>Input Teleprompter</h2>
<form class="form" method="post" action="addtele.php">
<p class="judul">
<input type="text" name="judul" id="judul" value="<?php echo isset($_POST['judul']) ? $_POST['judul'] : '';?>" />
<label for="judul">Judul</label>
</p>
<p class="acara">
<input type="acara" name="acara" id="acara" value="<?php echo isset($_POST['acara']) ? $_POST['acara'] : '';?>"/>
<label for="acara">Acara</label>
</p>
<p class="creator">
<input type="creator" name="creator" id="creator" value="<?php echo isset($_POST['creator']) ? $_POST['creator'] : '';?>" />
<label for="creator">Author</label>
</p>
<p class="isi">
<textarea name="isi" value="<?php echo isset($_POST['isi']) ? $_POST['isi'] : '';?>"></textarea>
</p>
<p class="submit">
<input type="submit" value="Kirim" />
</p>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<?php
include "chat.php";
$_SESSION['username'] = "penulis" // Must be already set
?>
<a href="javascript:void(0)" onclick="javascript:chatWith('penyiar')">Chat dengan Penyiar</a>
</body>
</html>
Next we will add this chat feature into newscaster’s page. How to enter the chat feature on this page, the same way as how to enter chat feature on submit.php pages, therefore, Here is the final contents of index.php file i have.
<html>
<head>
<title>Teleprompter</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.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";
include "chat.php";
$_SESSION['username'] = "penyiar";
$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>
<a href="javascript:void(0)" onclick="javascript:chatWith('penulis')">Chat dengan Penulis</a>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
</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>
Anyone having problems with chat can be inputted but doesn’t show up anything? If you’re having the same problem with me, open chat.php file, then change the code below
if ($_GET['action'] == "chatheartbeat") { chatHeartbeat(); }
if ($_GET['action'] == "sendchat") { sendChat(); }
if ($_GET['action'] == "closechat") { closeChat(); }
if ($_GET['action'] == "startchatsession") { startChatSession(); }
Change to
if (isset($_GET['action'])) {
if ($_GET['action'] == "chatheartbeat") { chatHeartbeat(); }
if ($_GET['action'] == "sendchat") { sendChat(); }
if ($_GET['action'] == "closechat") { closeChat(); }
if ($_GET['action'] == "startchatsession") { startChatSession(); }
}
Already done? Teleprompter web base that you need to do is complete, with the chat feature for newscaster and author news, so they can communicate :D. Good luck with this tutorial.
