shad0w-share

Surat Elektronik (E-mail) merupakan salah satu fasilitas penting pada saat ini. dengan email semua surat digital dapat dikirim dengan sangat cepat sehingga proses pengambilan keputusan dapat diambil dengan cepat juga. Berbagai cara dapat dilakukan untuk melihat email baik dengan software yang terinstall maupun dari website.

Dengan adanya webmail client maka tidak perlu menginstall aplikasi pembaca email lagi di komputer user, cukup membuka halaman website yang terintegrasi dengan pembaca email. Saat ini banyak webmail client yang dapat digunakan baik bersifat berbayar maupun gratis (google, yahoo, hotmail dll) tapi bagi instansi, perusahaan dan lembaga-lembaga lain dapat membangun mail server sendiri dan dapat menggunakan webmail client yang terinstall di server.


Berikut beberapa webmail clinet yang bersifat opensource dan dapat dikembangkan sendiri sesuai dengan kebutuhan dalam perusahaan.

1. Roundcube Webmail Client

Roundcube webmail merupakan IMAP mail client berbasis web yang dibangun menggunakan platform PHP, MySQL  atau Postgres database. Fasilitas yang dimiiliki Roundcube webmail antara lain :

• Tersedia lebih dari 70 bahasa internasional
• Mendukung drag & drop pengelolaan pesan
• Mendukung penuh untuk pesan MIME and HTML
• Sophisticated privacy protection
• Membuat pesan dengan attachment
• Mendukung Identitas pengirim ganda
• Mendukung address book dengan grup dan koneksi LDAP
• Pencarian cepat address book
• Membuat pesan dengan Richtext/HTML
• Meneruskan pesan dengan attachment
• Pencarian pesan dan address book
• Mengurutkan pesan berdasarkan history pesan
• Mendukung IDNA
• Spell checking
• IMAP folder management
• Shared/global IMAP folders
• Mendukung eksternal SMTP server
• Mendukung access control lists (ACL)
• Mendukung caching untuk penampilan pesan
• Unlimited users and messages
• Template system untuk kustom skins

2. Squrrelmail
Squrrelmail merupakan webmail client berbasis PHP yang dapat dapat meggunakan IMAP dan SMTP server. Disamping itu squirrel mail di tampilkan dalam format HTML 4.0 (tanpa ada javascript) dengan demikian dapat mendukung disemua browser.

3. Afterlogic webmail lite

Afterlogic webmail lite merupakan webmail dengan tampilan yang modern yang mendukung ajax dan desain template. Mendukung IMA, POP 3 dan SMTP. Berikut beberapa fungsi yang disediakan Afterlogic webmail lite :

• Multiple domains
• Mail folders and nested folders
• Address Book (Contacts and Groups)
• Mail filters, via Sieve
• Auto-responder, via Sieve
• Forwarding, via Sieve
• Plugins (change password, etc)
• Mail Search
• IMAP synchronization
• IMAP quotas
• IMAP search
• Managing IMAP folders
• Delivery confirmation

4. Hastymail

Hastymail merupakan webmail untuk IMAP/SMTP yang ditulis dengan pemrogramam PHP. Dapat dibuka di PDA, handphone, browser teks dan browser-browser utama lainnya. Webmail client ini dapat dikembangkan dengan sangat mudah baik menggunakan CSS, XHTML, Ajax bahkan dapat dikoneksika dengan SQL Server.

5. Postaci

Postaci dikembangkan menggunakan PHP, sangat sederhana dan mudah untuk digunakan. Postaci mendukung POP3/IMAP/SMTP. dapat menangani dua protokol sekaligus dan memiliki konfigurasi dalam satu file. Untuk database Postaci dapat menggunakan berbagai macam database server, antara lain  MySQL, mSQL, Microsoft SQL, Sybase, PostgreSQL.
7. T-dah webmail

T-dah webmail merupakan webmail berbasis PHP dan mendukung POP3, SMTP. T-dah dapat dikembangkan sesuai dengan kebutuhan dan merupakan opensource, berikut fasilitas dari T-dah webmail :

• Mendukung server Apache
• Dapat berjalan di windows dan linux
• Instalasi yang mudah
• Tidak menggunakan database dan cookie
• Mendukung PHP 4.4 dan 5.x
• Ada beberapa template
• Kompatibel dengan Postfix dan Qmail
• Memiliki chat dan kalender

Untuk menampilkan data dari table yang memiliki banyak records sangat dibutuhkan sistem Paginasi, untuk memudahkan navigasi. Ada beberapa teknik membuat paginasi, berikut salah satu teknik paginasi menggunakan Ajax-PHP-MySQL.

Langkah pertama adalah membuat contoh database yang memiliki struktur tabel sebagai berikut :

CREATE TABLE `records` (
  `id` int(11) NOT NULL auto_increment,
  `img` varchar(255) NOT NULL,
  `message` varchar(200) NOT NULL,
  PRIMARY KEY  (`id`)
)

Isi tabel tersebut dengan beberapa contoh data dengan struktur data yang ada, Kemudian buat program PHP yang berfungsi untuk menghubungkan PHP dengan database, simpan file ini dalam bentuk PHP :

<?php
/* Database config */

$db_host  = 'localhost';
$db_user  = 'user database';
$db_pass  = 'password database';
$db_database  = 'nama database'; 

/* End config */

$link = @mysql_connect($db_host,$db_user,$db_pass) or die('Unable to establish a DB connection');

mysql_query("SET NAMES 'utf8'");
mysql_select_db($db_database,$link);
?>

Berikutnya membuat program PHP yang bertujuan untuk mengambil dan menampilkan isi dari tabe, simpan dalam bentuk PHP :

<?php
include("connect.php");

$per_page = 4;
$sqlc = "show columns from records  ";
$rsdc = mysql_query($sqlc);
$cols = mysql_num_rows($rsdc);
$page = $_REQUEST['page'];

$start = ($page-1)*4;
$sql = "select * from records order by id limit $start,4";
$rsd = mysql_query($sql);
?>
<?php
while ($rows = mysql_fetch_assoc($rsd))
{?>
 <div class="each_rec"> <img src="<?php echo $rows['img'];?>" height="50" width="70" style="float:left; margin-right:3px;" alt="" /> <?php echo $rows['message'];?></div>
<?php
}?>

Program javascript berikut untuk menampilkan data yang telah diambil menggunakan Program PHP di atas :

$(document).ready(function(){
 //show loading bar
 function showLoader(){
  $('.search-background').fadeIn(200);
 }
 //hide loading bar
 function hideLoader(){
  $('.search-background').fadeOut(200);
 };
 
 $("#paging_button li").click(function(){
  //show the loading bar
  showLoader();
  
  $("#paging_button li").css({'background-color' : ''});
  $(this).css({'background-color' : '#A5CDFA'});

  $("#content").load("data.php?page=" + this.id, hideLoader);
 });
 
 // by default first time this will execute
 $("#1").css({'background-color' : '#A5CDFA'});
 showLoader();
 $("#content").load("data.php?page=1", hideLoader);
});

Berikut style CSS untuk mengatur tampilan paginasi :

/* CSS Document  www.99points.info */
#heading
{
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:56px;
 color:#CC0000;    
}
 body{
 text-align:center;
 font-family:Arial, Sans-Serif;
 font-size:0.75em;
}

/* CSS Document */
#container {
            height:300px;
   padding:12px;
   -moz-border-radius: 6px; 
   -webkit-border-radius: 6px;
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
            text-align: center;
            text-decoration: none;
   width: 600px;
   margin-top:40px;
        }

#container .each_rec{

   color:#000066;
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   padding:5px 5px 12px 5px;
   border-bottom:solid #669900;
   text-align:justify;
   margin-bottom:11px;
  }
  
.search-background {
  display: none;
  font-size: 13px;
  font-weight: bold;
  height:160px;
  position: absolute;
  padding-top:140px;
  -moz-border-radius: 6px; 
  -webkit-border-radius: 6px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  text-align: center;
  opacity:0.5;filter: alpha(opacity=50) ;
  text-decoration: none;
  width: 600px;
 }
 
.search-background {
  background-color: #ff4242;
  color:#FFFFFF;
  text-shadow: #fff 0px 0px 20px;
 }

search-background label{ 

 border:solid #66FF00 1px;
} 

#paging_button ul{ width: 600px; padding:0px; margin:8px;}

#paging_button ul li { -moz-border-radius: 6px; 
  -webkit-border-radius: 6px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  float:left; height:20px; width:20px; list-style-image:none; 
  list-style-type:none; font-weight:bold; border:solid #CCCCCC 1px;
  margin:3px; cursor:pointer}

li:hover{ color: #CC0000; cursor: pointer; }

Akhirnya semua program tersebut dijadikan satu dalam sebuah halam :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paginasi Halaman dengan Ajax</title>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>


<?php
$per_page = 4;
include("connect.php");
$sql = "select * from records  ";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>
<div align="center">
 
 <h1>Paginasi Halaman dengan Ajax</h1>
 <div id="container">
 
  <div class="search-background">
   <label><img src="loader.gif" alt="" /></label>
  </div>
 
  <div id="content"></div>
 </div>
 <div id="paging_button">
  <ul>
  <?php
  //Show page links
  for($i=1; $i<=$pages; $i++)
  {
   echo '<li id="'.$i.'">'.$i.'</li>';
  }?>
  </ul>
 </div>
</div>


<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
</body>
</html>

Untuk meliha contoh dari program ditas bisa dilihat disini, dan untuk download contoh programnya disini.