Kita akan belajar PHP bersama dan sharing ilmu dengan topik membuat aplikasi untuk mengirim pesan Sekaligus ke banyak orang dengan jquery. konsep pengiriman SMS serentak ini adalah memilih penerima yang ada di dalam database kita untuk dikirimi pesan. Lalu bagaimana jika orang yang ingin dikirimi SMS tersebut belum terdaftar di database??? Ya, kita daftarkan dulu.
Ada 5 tahapan yang harus dilakukan :step 1:
Membuat database untuk message-list dan membuat field dengan nama “list” dan “message”
Jangan lupa memasukkan data dummy ke dalam field list untuk mengidentifikasi namanya.create table list (
id int(15)auto_increment,
nama varchar(255),
primary key(id)
)
create table message (
id int(15)auto_increment,
untuk varchar(255),
pesan varchar(255),
primary key(id)
)
Setelah database selesai dibuat, kemudian kita membuat form untuk mengirim pesannya.
step 2 : Membuat file index.php
<html>
<head>
<title>Message list</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="Test Stylesheet" charset="utf-8" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/fcbkcomplete.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="test">
<div id='title-list'>
<h1>Message list Demo</h1>
</div>
<form action="submit.php" method="post">
<ol>
<li id="message-list">
<?
$cfr = $_GET['cfr'];
if($cfr == '1'){
echo "<center><h3>Sukses</h3></center>";
}
?>
<label>Input Name</label>
<input type="text" value="" id="message-demo" />
<ul id="preadded" style="display:none">
</ul>
<div id="message-auto">
<div>Ketik namanya</div>
<ul id="feed">
</ul>
</div>
</li>
</ol>
<div id='message-form'>
<label>Message</label>
<textarea name='message' cols='60' rows='5'></textarea>
</div>
<input type='submit' value='kirim'>
</form>
<script language="JavaScript">
$(document).ready(function() {
$.facebooklist('#message-demo', '#preadded', '#message-auto',{url:'fetched.php',cache:1}, 10, {userfilter:1,casesensetive:0});
});
</script>
</body>
</html>
step 3 : membuat file fetched.php
Selanjutnya kita membuat file fetched.php untuk include nama yang ada dalam field list, seluruh nama yang ada dalam field list akan di cetak ke dalam message input<?
$db='db_blog_message';
$con=mysql_connect('localhost', 'root', '');
mysql_select_db($db, $con);
$q='select * from list order by nama';
$h=mysql_query($q);
echo '[';
while($r=mysql_fetch_array($h)){
echo '{"caption":"'.$r['nama'].'","value":"'.$r['username'].'"},';
}
echo ']';
?>step 4 : membuat file submit.php
Berikutnya kita membuat file submit.php. File ini untuk insert data ke dalam field message dan kita gunakan array karena kita akan memasukan data lebih dari satu.<?phpdalam submit kita menggunakan foreach untuk mempermudah langkah kita, jangan lupa kita harus melakukan pengecekan apakah benar array kita sudah berjalan, cara untuk mengecek adalah dengan menambahkan script pada file submit.php seperti dibawah ini
$db="db_blog_message";
$con=mysql_connect('localhost', 'root', '');
mysql_select_db($db, $con);
$nama = $_REQUEST;
$isi = $_POST['message'];
$data = $nama['message-demo'];
foreach ($data as $to => $val) {
$q="insert into message(untuk, pesan)values('$val', '$isi')";
$h=mysql_query($q)or die(mysql_error());
//echo $q;exit;
}
if($h){
header('location:index.php?cfr=1');
}
?>echo "<pre>";hasilnya akan seperti dibawah ini :
print_r($data);
echo"</pre>";step 5 : membuat file css
Tahap terakhir, untuk tampilannya kita harus membuat file css-nya./* TextboxList sample CSS */Modul latihan di atas bisa di-download disini (sumber Message list like facebook).
ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; }
*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */
ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; }
ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; }
ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-input input { width: 150px; margin: 0; border: none; outline: 0; padding: 3px 0 2px; } /* no left/right padding here please */
ul.holder li.bit-input input.smallinput { width: 20px; }
/* message demo CSS */
form, #add { border: 1px solid #999; width: 550px; margin: 50px; padding: 20px 30px 10px; }
form ol li { list-style-type: none; }
form ol { font: 11px "Lucida Grande", "Verdana"; margin: 0; padding: 0; }
form ol li.input-text { margin-bottom: 10px; list-style-type: none; padding-bottom: 10px; }
form ol li.input-text label { font-weight: bold; cursor: pointer; display: block; font-size: 13px; margin-bottom: 10px; }
form ol li.input-text input { width: 500px; padding: 5px 5px 6px; font: 11px "Lucida Grande", "Verdana"; border: 1px solid #999; }
form ul.holder { width: 500px; }
form ul { margin: 0 !important }
#message-list ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; }
#apple-list ul.holder li.bit-input { margin: 0; }
#apple-list ul.holder li.bit-input input.smallinput { width: 5px; }
ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('../images/close.gif'); }
ul.holder li.bit-box a.closebutton:hover { background-position: 7px; }
ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; }
/* Autocompleter */
#message-auto { display: none; position: absolute; width: 512px; background: #eee; }
#message-auto .default { padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px; }
#message-auto ul { display: none; margin: 0; padding: 0; overflow: auto; }
#message-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; }
#message-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; }
#message-auto ul li.auto-focus { background: #4173CC; color: #fff; }
#message-auto ul li.auto-focus em { background: none; }
#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; }
#add a { color: #666; }
#add-test { width: 100px; padding: 2px; }
#button_container { margin-left: 70px; margin-bottom: 30px;}
.hidden { display:none;}
#message-form{ font : 14px "Lucida Grande", "Verdana";font-weight : bold;}
#title-list{margin-left : 200px;}
0 comments:
Post a Comment