Membangun Aplikasi Sms Berbasis Web [Part 2]

Disini kita melanjutkan pembuatan aplikasi SMS kita , disini kita akan mencoba membuat halaman Tulis Pesan, Pesan Masuk, dan Pesan Terkirim.
Buatlah sebuah folder di “Xampp-htdocs” dengan nama sesuka Anda. Selanjutnya kita buat file koneksi.php simpan di folder yang Anda buat tadi.



<?php
$host    = "localhost";
$user    = "root";
$pass    = "";
$database = "sms";
mysql_connect($host,$user,$pass);
mysql_select_db($database);
?>

Kemudian Anda buat file tulis_pesan.php adapun skipnya seperti dibawah ini..

<html>
<head>
    <title> Pesan Single </title>
    <script>
    function Count(){
        var karakter,maksimum; 
        maksimum = 160
        karakter = maksimum-(document.form1.isi_pesan.value.length); 
        if (karakter < 0) {
            alert("Jumlah Maksimum Karakter:  " + maksimum + ""); 
            document.form1.isi_pesan.value = document.form1.isi_pesan.value.substring(0,maksimum); 
            karakter = maksimum-(document.form1.isi_pesan.value.length); 
            document.form1.counter.value = karakter; 
        }
        else {
            document.form1.counter.value =  maksimum-(document.form1.isi_pesan.value.length);
        }
    }
    </script>
</head>
<body>

<form name="form1" method="post" action="proses_tulis.php">
<h3> Kirim Pesan Single </h3>
<table width="800" border="0" cellspacing="0" cellpadding="3">
<tr>
    <td width="100"> Nomor Tujuan </td><td width="10"> : </td>
    <td><input name="hp" type="text" size="20"></td>
</tr>
<tr valign="top">
    <td> Isi Pesan </td><td> : </td>
    <td>
        <textarea name="isi_pesan" cols="40" rows="7" OnFocus="Count();"
        OnClick="Count();" onKeydown="Count();" OnChange="Count();"
        onKeyup="Count();"></textarea>
    </td>
</tr>
<tr>
    <td colspan="2"></td>
    <td><input name="counter" type="text" size="5" maxlength="5" value="160" /></td>
</tr>
<tr>
    <td><input type="submit" value="Kirim Pesan" /></td>
</tr>
</table>
</form>
</body>
</html>


Lihat pada contoh tulis_pesan.php skrip

action dari form tersebut bahwa setelah button kirim pesan diklik maka akan menuju proses_tulis.php jadi kita akan membuat file dengan nama proses_tulis.php untuk proses pengiriman pesan kita. Adapun skripnya seperti ini.

<?php
include "koneksi.php";
$hp = $_POST['hp'];
$isi_pesan = $_POST['isi_pesan'];

$masuk = mysql_query("insert into outbox (InsertIntoDB,SendingDateTime,DestinationNumber,TextDecoded,SendingTimeOut,DeliveryReport,CreatorID)
        values (sysdate(),sysdate(),'$hp','$isi_pesan',sysdate(),'yes','system')");
if ($masuk){
    echo "<h4> Pesan Dikirim </h4>";
}
else {
    echo "<h4> Pesan gagal dikirim </h4>";
}
?>

Jika selesai maka buka browser Anda dengan mengetikkan localhost/sms/tulis_pesan.php dan tampilannya seperti gambar dibawah ini.




 Selanjutnya kita akan membuat halaman pesan masuk , buatlah file pesanmasuk.php seperti dibawah ini.

<link href="paging.css" rel="stylesheet" type="text/css">

<?
include "koneksi.php";
$sql = mysql_query("select * from inbox");
$hitung = mysql_num_rows($sql);

$offset = $_GET['offset'];

//Jumlah data yang ditampilkan per halaman
$limit = 5;
if (empty ($offset) ){
    $offset = 0;
}
if ($hitung == 0){
    echo "<br><font face=tahoma size=2><div align=center>Tidak Ada Pesan Masuk</div></font>";
}
else {
?>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="70%">
<tr >
    <td height="30" width=100%>
        <div align="left"><font size="3" face="tahoma">Semua Data Pesan Masuk (Inbox)<br></font>
        <font face="tahoma" size="2">Jumlah Data : <?php echo "$hitung";?><hr color=#CCCCFF></font></div></td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="0" width="70%">
<tr bgcolor="#999999" align="center">
    <td width="2%"><div align="center"><font size="2" face="tahoma" color="#FFFFFF">No</font></div></td>
    <td width="20%"><div align="center"><font size="2" face="tahoma" color="#FFFFFF">Time</font></div></td>
    <td width="18%"><div align="center"><font size="2" face="tahoma" color="#FFFFFF">Pengirim</font></div></td>
    <td width="50%"><div align="center"><font size="2" face="tahoma" color="#FFFFFF">Isi Pesan</font></div></td>
    <td><div align="center"><font size="2" face="tahoma" color="#FFFFFF"> Aksi </font></div></td>
</tr>
<?
echo "<div class=paging>";

if ($offset != 0){
    $prevoffset = $offset - 5;
    echo "<span class=prevnext><a href=pesanmasuk.php?offset=$prevoffset>Back</a></span>";
}
else {
    echo "<span class=disabled>Back</span>"; //cetak halaman tanpa link
}

//hitung jumlah halaman
$halaman = intval($hitung/$limit); //Pembulatan

if ($hitung%$limit){
    $halaman++;
}
for ($i=1; $i<=$halaman; $i++) {
    $newoffset = $limit*($i-1);
    if ($offset != $newoffset){
        echo "<a href=pesanmasuk.php?offset=$newoffset>$i</a>";
    }
    else {
        echo "<span class=current>".$i."</span>";//cetak halaman tanpa link
    }
}

//cek halaman akhir
if (! (($offset/$limit) + 1 == $halaman) && $halaman !=1){
    //jika bukan halaman terakhir maka berikan next
    $newoffset = $offset + $limit;
    echo "<span class=prevnext><a href=pesanmasuk.php?offset=$newoffset>Next</a></span>";
}
else {
    echo "<span class=disabled>Next</span>";//cetak halaman tanpa link
}
echo "</div>";
?>
<?
$hasil = mysql_query("select * from inbox limit $offset,$limit");
$k = 1 + $offset;
while($data = mysql_fetch_array($hasil)){
echo"
 <tr valign=top>
    <td height=24><div align=center><font size=2 face=tahoma>$k</font></div></td>
    <td><div align=center><font size=2 face=tahoma>$data[UpdatedInDB]</font></div></td>
    <td><div align=center><font size=2 face=tahoma>$data[SenderNumber]</font></div></td>
    <td><font size=2 face=tahoma>$data[TextDecoded]</font></div></td>
    <td><div align=center><font size=2 face=tahoma><a href='hapuspesanmasuk.php?id=$data[ID]'> Hapus</a></font></div></td>
 </tr>
    ";   
$k++;
}
echo"</table>";
}
?>

Kemudian buat paging.css untuk tampilan pagingnya.

div.paging {
    padding:2px;
    margin:2px;
    text-align:left;
    font-family:Tahoma;
    font-size:12px;
}

div.paging a{
    padding:2px 5px 2px 5px;
    margin-right:2px;
    border:1px solid #DEDFDE;
    text-decoration:none;
    color:#0061DE;
}

div.paging a:hover{
    border:1px solid #2B66A5;
    color:#000000;
    background-color:#FFFF80;
}

div.paging span.current{
    padding:2px 5px 2px 5px;
    margin-right:2px;
    border:1px solid navy;
    font-weight:bold;
    background-color:#2E6AB1;
    color:#FFFFFF;
}

div.paging span.disabled{
    padding:2px 5px 2px 5px;
    margin-right:2px;
    border:1px solid #999999;
    color:#999999;
}

div.paging span.prevnext{
    font-weight:bold;
}

Dan yang terakhir kita akan membuat file dengan hapuspesanmasuk.php

<?php
include "koneksi.php";
$id = $_GET['id'];

$hapus = mysql_query("delete from inbox where ID='$id'");
if ($hapus){
    echo "<h4> Pesan Berhasil Dihapus </h4>";
}
else {
    echo "<h4> Pesan Gagal Dihapus </h4>";
}
?>

Jika semua selesai lihat dibrowser Anda tampilannya seperti ini.



Mudah bukan ? sekarang kita akan membuat Pesan Terkirim (sentitems)
Buka file pesanmasuk.php cari semua tulisan “pesanmasuk.php” dan ganti dengan “pesanterkirim.php” dan cari tulisan “hapuspesanmasuk.php” dan ganti dengan “hapuspesanterkirim.php” setelah semua diganti maka save as dengan nama “pesanterkirim.php”
Kemudian buka file hapuspesanmasuk.php dan cari skrip $hapus= mysql_query (“delete from inbox where ID=’$id’”); ubah menjadi $hapus= mysql_query (“delete from sentitems where ID=’$id’”); jika selesai save as dengan “hapuspesanterkirim.php”





Gambar tampilan pesan terkirim, selesaii . kita telah berhasil membuat halaman tulis pesan , inbox , dan sentitems. Maaf saya tidak bisa mempraktekkan pengiriman pesan karena modem yang dipake buat artikel part 1 udah diambil yang punya , hahaha (ketauan minjem) tapi percaya aja kok , ini berhasil :D , ntar kita lanjut lagi yaaa… dadahhh.. masih banyak kerjaan lain xD~~


EmoticonEmoticon