Aplikasi Kirim SMS dengan PHP dan Gammu

SMS Gateway saat ini bisa dikatakan sudah menjadi sebuah kebutuhan dalam sebuah aplikasi. Lihat saja facebook, twitter, line, whatsapp, gmail dan aplikasi-aplikasi sosial media yang lain hampir semua menggunakan nomor handphone dan media sms untuk melakukan pendfaftaran dan verifikasi pendaftaran. Hal ini memeang lebih efektif karena kepemilikan sebuah Handphone yang sifatnya personal. Selain aplikasi sosmed, Aplikasi internet banking juga menggunakan media sms untuk memvalidasi transaksi yang dilakukan nasabahnya, Anggap saja seorang nasabah ingin melakukan transfer, maka kode mToken akan dikirimkan melalui sms ke nomor handphone nasabah yang bersangkutan. Pemberitahuan/Notifikasi juga dikirimkan melalui sms.

Aplikasi SMS Gateway saat ini sudah banyak dikembangkan oleh developer. salah satunya implementasinya yang cukup dikenal orang adalah Gammu. Gammu merupakan sebuah aplikasi yang dikembangkan oleh michal chihar, aplikasi ini dapat digunakan untuk mengelola fungsi-fungsi yang ada pada modem, handphone dan perangkat sejenis lainnya. Adapun fungsi yang dapat dikelola diantaranya adalah fungsi pengiriman sms, manajemen kontak dan sebagainya. Kita dapat memanfaatkan gammu untuk berkomunikasi dengan perangkat pengirim sms. Gambar dibawah ini adalah cara kerja gammu.

Aplikasi Kirim SMS dengan PHP dan Gammu

Gammu, dapat diintegrasikan dengan berbagai bahasa pemrograman termasuk PHP, Java, Python, Pascal/Delphi atau VB karena pada dasarnya Gammu adalah sebuah service pada komputer yang berjalan dibalik layar untuk berkomunikasi dengan perangkat. Jadi untuk dapat menggunakan gammu dengan maksimal anda harus memiliki perangkat pengirim sms yang sudah terhubung ke komputer. saya menyarankan anda menggunakan modem. pada contoh ini saya menggunakan modem huaweii. Sebelum kita mulai mengkonfigurasi gammu, silahkan download gammu disini. dan databasenya disini. Setelah selesai silahkan install gammu dikomputer anda.

Sampai langkah ini, kita sudah berhasil menginstall gammu di windows. kita perlu melakukan sedikit konfigurasi agar gammu dapat berjalan dengan baik. Pastikan modem anda sudah terhubung ke komputer.

1. Edit File gammurc yang ada di c:\gammu\gammurc

; isikan nomor port di bawah ini (lihat di device manager PORTS (COM & LPT))
port = com9: 

; isikan jenis connection di bawah ini (lihat di website gammu (http://wammu.eu/phones/))
connection = at

Lakukan pengujian dengan mengetikan gammu identify. Hal ini bertujuan untuk mengetes koneksi perangkat pengirim sms dengan gammu. jika tampilan yang muncul seperti dibawah ini, maka gammu sudah terhubung dengan modem.

Aplikasi Kirim SMS dengan PHP dan Gammu

2. Buat sebuah database lalu import database gammu yang sudah download sebelumnya. Pada contoh disini yang akan digunakan adalah mysql.

3. Langkah berikutnya adalah mengedit konfigurasi smsdaemon. Hal ini bertujuan untuk konfiguasi gammu dengan database yang telah dibuat pada step 2. isi file konfigurasi file c:\gammu\smsdrc adalah sebagi berikut.

[gammu]
# isikan no port di bawah ini
port = com9:
# isikan jenis connection di bawah ini
connection = at 

# -----------------------------
# Konfigurasi SMS Daemon
# -----------------------------

[smsd]
service = mysql
logfile = smsdlog
debuglevel = 0
phoneid = PonselGammu
commtimeout = 10
sendtimeout = 10
deliveryreport = no
PIN = 1234

# -----------------------------
# Konfigurasi koneksi ke MySQL
# -----------------------------
pc = localhost
# isikan user untuk akses ke MySQL
user = root
# isikan password user untuk akses ke MySQL
password = 
# isikan nama database untuk Gammu
database = gammu

Sampai langkah ini kita sudah selesai melakukan konfigurasi gammu. Sebenarnya dengan konfigurasi ini saja, kita sudah bisa mengirim sms menggunakan gammu teknik ini disebut dengan sms inject. anda dapat mengujinya dengan menggunakan perintah sebagai berikut pada command prompt. 

gammu sendsms TEXT 087765927xxx -text "ISI SMSNYA"

Berbekal informasi tersebut, dengan menggunakan PHP, Perintah gammu tersebut dapat kita terapkan menggunakan fungsi exec(), shell_exec(). contohnya menggunakan source code sederhana ini. 

<form method="post" action="">
No. HP Tujuan : <input type="text" name="hp" value="+62"><br>
Pesan : <textarea name="pesan"></textarea><br>
<input type="submit" name="kirim" value="Kirim SMS">
</form>

<?php
if (isset($_POST['kirim'])){
$hp = $_POST['hp'];
$pesan = $_POST['pesan'];
exec('c:gammugammu sendsms TEXT '.$hp.' -text "'.$pesan.'"');
}

?>

Selain menggunakan teknik sms inject diatas, ada cara lain untuk mengirim sms menggunakan gammu yaitu dengan menginputkan data ke tabel outbox. namun demikian, hal ini dapat berjalan dengan baik hanya jika service gammu sudah berjalan. Untuk manajemen service gammu termasuk menginstall, uninstall, menjalankan dan menghentikan digunakan perintah dibawah ini. Jalankan perintah dibawah ini menggunakan command prompt didalam direktori gammu

; Install Service
gammu-smsd -c smsdrc -i

; Jalankan Service
gammu-smsd -c smsdrc -s

; Uninstall Service
gammu-smsd -u

; Stop Service
gammu-smsd -k

Seperti yang telah saya jelaskan diatas, bahwa jika smsdaemon sudah berjalan (service gammu), maka setiap sms yang masuk ke nomor yang ada dimodem/handphone akan otomatis dipindahkan ke tabel inbox database gammu, sedangkan untuk mengirim sms, dilakukan dengan menginputkan data ke tabel outbox. Jika source code kirim sms dengan teknik sms inject diatas dimodifikasi maka kurang lebih hasilnya seperti berikut

<?php 
$link = mysqli_connect("localhost","root","password","namadb");
?>
<form method="post" action="">
No. HP Tujuan : <input type="text" name="hp" value="+62"><br>
Pesan : <textarea name="pesan"></textarea><br>
<input type="submit" name="kirim" value="Kirim SMS">
</form>

<?php
if (isset($_POST['kirim'])){
$hp = $_POST['hp'];
$pesan = $_POST['pesan'];
mysqli_query($link,"INSERT INTO outbox (DestinationNumber,TextDecoded) VALUES ('".$hp."','".$pesan."')");
}

?>

Untuk melihat sms terkirim silahkan lihat di tabel sentitems, untuk melihat sms masuk cek di tabel inbox. Mari Berdiskusi jika masih ada yang kurang jelas. happy coding. :)

Memahami Alur Pemrosesan Data Pada Codeigniter

Aplikasi website dibangun dan dikembangkan untuk menyederhanakan dan memudahkan setiap proses yang masih dikerjakan secara manual. Sebut saja aplikasi pengurusan KRS Online dan semacamnya. Dalam sebuah aplikasi website, baik dibangun menggunakan gaya prosedural, OOP atau menggunakan framewrok, pasti terdapat minimal sebuah aksi untuk melakukan pemrosesan data. Alur pemrosesan data tentu saja berbeda pada setiap teknik yang digunakan. Hal ini yang kadang-kadang membuat programmer yang terbiasa dengan teknik prosedural malas untuk mempelajari sebuah framework karena kebanyakan framework menggunakan teknik Objek Oriented Programming.

Berbicara tentang framework, saat ini banyak sekali framework yang dikembangkan oleh developer. Semua tentu saja memiliki kelebihan dak kekurangan masing-masing. Salah satu framework yang cukup terkenal adalah codeigniter atau yang juga akrab dipanggil ci. Menurut kebanyakan orang, framework ini tergolong mudah untuk digunakan, mendukung banyak library dan helper yang siap digunakan sehingga framework ini kerap menjadi pilihan. Untuk mendapatkan Codeigniter anda dapat mendownloadnya disini.

Memahami Alur Pemrosesan Data Pada Codeigniter

Codeigniter adalah framework yang menggunakan teknik MVC dalam pemrosesan data. MVC merupakan singkatan dari Model View Controller. Secara sederhana, dalam penerapannya, Model adalah Class yang bertugas untuk berkomunikasi dengan database, View merupakan Layout dari halaman website pada View inilah tampilan halaman website diatur, sedangkan Controller merupakan Class yang bertugas untuk menghandel setiap aksi yang dilakukan oleh user. Ambil contoh, seorang pengguna website mengisi form dan mengklik tombol simpan pada sebuah halaman website. Maka alur pemrosesannya adalah sebagai berikut (pastikan anda sudah mengatur config, database, routes dan autoload) :

1. Tampilan Halaman Website diatur oleh View Termasuk tombol close dan form input. pada halaman View ini diberikan sebuah aksi yang akan mengarah ke Controller. berikut adalah contoh source codenya. view ini kita simpan didalam folder view dengan nama belajar

<form method="post" action="<?php echo base_url();?>index.php/belajar/simpan">
  <p><input type="text" name="nama"/></p>
  <p><input type="text" name="email"/></p>
  <p><input type="submit" name="simpan" value="Simpan"/></p>
  </form>

Dari Source code diatas, dapat kita baca maksudnya bahwa terdapat sebuah form yang berisi input nama dan email, form tersebut memiliki sebuah tombol simpan yang jika diklik akan diarahkan ke controller belajar dan fungsi simpan. adapun base_url() adalah alamat url website yang dikonfigurasi dari config.

2. Controller bertugas untuk menangani setiap aksi dari user. pada contoh diatas aksi yang akan dilakukan oleh user adalah mengklik tombol simpan. Berikut adalah contoh source code dari controller yang menangani proses simpan dari form diatas. 

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class belajar extends CI_Controller {
 
 function __construct(){
  parent ::__construct();
  $this->load->model("msimpan");
 }

 public function index(){
  $this->load->view('belajar');
 }
 
 function simpan(){
 $nama = $this->input->post('nama'); 
 $email = $this->input->post('email'); 
 $simpan = $this->msimpan->simpan($nama, $email);
  if ($simpan){
   echo "Data Tersimpan";
  } else {
   echo "Data Gagal Disimpan";
  }
 }
}

Perhatikan bahwa code diatas adalah class yang akan menangangi aksi simpan dari form view diatas. adapun nama classnya adalah belajar. Pada class tersebut terdapat tiga buah fungsi yaitu construct yang ditujuan untuk meload class model pada contoh diatas model yang akan diload adalah msimpan. selanjutnya fungsi index. fungsi ini digunakan untuk meload view belajar dan fungsi simpan yang bertugas untuk berkomunikasi dengan fungsi simpanmodel dengan mengirimkan parameter berupa data yang akan disimpan ke database.

3. Model adalah class yang bertugas untuk berkomunikasi dengan database entah itu melakukan perintah query termasuk simpan, update, delete dan semacamnya. pokoknya tugas model hanya berkomunikasi dengan database. contoh model untuk menyimpan data adalah sebagai berikut.  

<?php defined('BASEPATH') OR exit('No Direct Script Access Allowed');

class msimpan extends CI_Model{
 
 function simpanmodel($nama,$email){
 $data = array(
   'nama'=>$nama,
   'email'=>$email,
   );
   
 $query = $this->db->insert('coba',$data);
 
 if (!$query){
  
  return FALSE;
 
 } else {
 
 return TRUE;
 
 }
 
 }
}

Dari Source code diatas, dapat kita pahami maksudnya bahwa class tersebut bernama msimpan dan memiliki sebuah fungsi simpanmodel dengan dua buah parameter yaitu nama dan email adapun nilai parameter ini diperoleh dari controller. parameter tersebut selanjutnya disimpan kedalam variabel array. perhatikan bahwa pada array tersebut string selain nilai parameter harus sama dengan field tabel database. Kemudian proses simpan data dilakukan ke tabel coba dengan data array. Jika proses simpan berhasil dilakukan maka return value bernilai TRUE, sebaliknya bernilai FALSE. Nilai inilah yang ditangkap oleh Codeigniter.

Jika ada yang masih kurang jelas, mari berdiskusi. Postingan ini akan saya lanjutkan untuk dapat menampilkan, mengubah dan menghapus data. Stay Tune. Happy Coding. 

Membuat Laporan dari Database dengan mPDF PHP

Bisa dikatakan adanya sebuah laporan pada aplikasi berbasis database adalah sebuah keharusan. Baik pada aplikasi desktop, website atau client server. Fasilitas Laporan pada aplikasi merupakan sebuah utilitas yang digunakan sebagai bentuk penyampaian informasi yang ada pada database ataupun aplikasi. Ambil contoh pada aplikasi penjualan yang tentu saja memiliki data barang, data transaksi penjualan dan sebagainya. Dengan menambahkan fasilitasi laporan seorang pengguna aplikasi tentu saja dapat melihat informasi data barang atau data transaksi penjualan berdasarkan tanggal tertentu yang tentu saja dapat dicetak jika diperlukan.

Membuat Laporan dari Database dengan mPDF PHP

Setiap bahasa pemrograman memiliki tool tersendiri dalam membuat report atau laporan. Tool yang untuk membuat laporan di bahasa pemrograman A tentu saja tidak akan dapat digunakan pada bahasa pemrograman B kecuali menggunakan tool pihak ketiga. Dalam PHP sendiri, tersedia banyak class dan library untuk membuat laporan kedalam bentuk PDF salah satunya adalah class mPDF. Class ini disediakan gratis dan open source. anda dapat mendownloadnya disini.

Seperti penjelasan di situs resminya, penggunaan mPDF sangatlah mudah, extrack dan copy ke htdocs/www jika anda menggunakan localhost. Bahkan untuk penggunaanyapun terdapat beberapa contoh yang sudah ada didalam folder example. dari contoh-contoh tersebut terlihat bahwa cara kerja mpdf ini adalah dengan mendefinisikan tag html pada variabel php kemudian menyisipkan string tersebut kedalam file pdf. Pada contoh disini saya akan membuat sebuah laporan dari tabel database menggunakan mPDF. Terlihat data pada tabel database saya seperti berikut ini :

Membuat Laporan dari Database dengan mPDF PHP

Data pada tabel siswa tersebut tersimpan didatabase saya dan akan saya tampilkan kedalam laporan data siswa yang dibuat menggunakan mPDF. Source code yang saya gunakan adalah sebagaimana dibawah ini. Hasilnya kurang lebih seperti gambar pertama diatas.

<?php

require_once("koneksi.php");

$html = '
<h2 style="text-align:center; ">Membuat Laporan Dari Database Menggunakan mPDF</h2>
<h4 style="margin-top: 10pt; text-align:center; margin-collapse:collapse;">Laporan Data Siswa</h4>

<table style="width:100%" class="bpmTopicC">
 <!-- Ini Header Tabelnya -->
 <thead>
 <tr style="text-align:left" class="headerrow">
 <th>NIS Lokal</th>
 <th>NISN</th>
 <td>Nama Siswa</td>
 <td>Tempat Lahir</td>
 <td>Tgl Lahir</td>
 <td>Kelamin</td>
 <td>No KK</td>
 </tr>
 </thead>
 <!-- Ini Body Tabelnya -->
 <tbody>';
 // Tampilkan Data Dari Tabel Siswa
 $no=1;
 $sql = mysql_query("select * from siswa");
 while ($data = mysql_fetch_array($sql)){  
  $html .= '<tr class="'; if (($no % 2) == 0){ $html.="evenrow"; } else { $html.="oddrow"; } $html.='">';
  $html .= '<th>'.$data['nis_lokal'].'</th>';
  $html .= '<th>'.$data['nisn'].'</th>';
  $html .= '<th>'.$data['nama_siswa'].'</th>';
  $html .= '<th>'.$data['tempat_lahir'].'</th>';
  $html .= '<th>'.$data['tanggal_lahir'].'</th>';
  $html .= '<th>'.$data['jenis_kelamin'].'</th>';
  $html .= '<th>'.$data['no_kk'].'</th>';
  $html .= '</tr>';
 $no++;
 }
$html .= '</tbody></table>';

include("mpdf/mpdf.php");
$mpdf = new mPDF('c','A4','','',32,25,27,25,16,13); 
$mpdf->SetDisplayMode('fullpage');
$mpdf->list_indent_first_level = 0; 
$stylesheet = file_get_contents('mpdf/mpdfstyletables.css');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html,2);
$mpdf->Output('laporan-dengan-mpdf.pdf','I');
exit;

?>

Show Hide Div Berdasar ID atau CLASS Menggunakan JQuery

Dalam dunia pemrograman website, seorang programmer dituntut untuk mengerti paling tidak dua bahasa pemrograman yaitu client side scripting dan server side scripting. keduanya sangat diperlukan untuk menjadikan aplikasi website menjadi lebih interaktif. Untuk client side scripting yang banyak digunakan oleh programmer adalah Javascript.

Saya ingin mengajak teman-teman untuk melihat contoh kasus website yang dibangun murni menggunakan bahasa server side (PHP/JSP/ASP) atau penggabungan server side dan client side. Untuk membedakannya mudah saja. Untuk website yang murni menggunakan pemrograman server side, akan memerlukan reload/refresh halaman untuk melakukan setiap aksinya, seperti pemrosesan data jika button simpan diklik dan semacamnya. berbeda dengan website yang dibangun dengan  menggabungkan pemrograman server side dan client side scripting. Pemrosesan data tanpa melakukan refresh halaman sangat mungkin dilakukan. Maka dari itu, saya tertarik untuk membahas bagaimana menyembunyikan dan memunculkan div menggunakan Jquery karena hal ini tidak pernah lepas guna menjadikan website yang kita bangun menjadi lebih interaktif.

Show Hide Div Berdasar ID atau CLASS Menggunakan JQuery

JQuery adalah library javascript yang dapat digunakan untuk menangani event handling, animasi dan manipulasi element HTML, pemrosesan data pada database menggunakan dapat menggunakan JQuery AJAX dan tentu saja tanpa refresh halaman. Disini saya akan mencontohkan penggunaan JQuery untuk menyembunyikan (hide) Div berdasarkan ID atau class nya serta bagaimana memunculkannya. Sebagai contoh berikut adalah coding sederhana untuk menghilangkan dan memunculkan DIV atau tag html lain berdasarkan ID atau classnya.

<html>
<head>
 <title>Show Hide DIV</title>
 <!-- 1. Meload JQuery -->
 <script src="jquery.js" type="text/javascript"></script>
</head>
 
 <!-- 2. Element HTML yang akan dipanggil menggunakan ID dan CLASS -->
 
 <input type="button" value="Hilangkan" id="hilangkan">
 <input type="button" value="Munculkan" class="munculkan">
 
 <div id="hilang">
  <p>Ini akan hilang jika anda mengklik tombol hilangkan di bawah dan akan muncul kembali
     jika anda mengklik tombol munculkan dibawah ini </p>
 </div>
 
 <!-- 3. Javascript untuk memunculkan dan menghilangkan -->
 <script type="text/javascript">
 
 $(document).ready(function(){
 
  $("#hilang").hide(); // Menyembunyikan Div Hilang berdasarkan ID
  $("#hilangkan").hide(); // Menyembunyikan Div Hilang berdasarkan ID
  
  // Jika tombol hilangkan diklik dipanggil berdasarkan ID
  $("#hilangkan").click(function(){
   $("#hilang").hide();
   $("#hilangkan").hide();
   $(".munculkan").show();
  });
  
  // Jika tombol munculkan diklik dipanggil berdasarkan CLASS
  $(".munculkan").click(function(){
   $("#hilang").show();
   $("#hilangkan").show();
   $(".munculkan").hide();
  });
 
 });
 </script>
</html>

Dari Source code diatas, ada beberapa yang sudah saya tandai menggunakan nomor. hal tersebut adalah penting agar script dapat berjalan sesuai keinginan. Tanda pertama adalah meload file JQuery yang kebetulan berada didalam folder yang sama dengan file source code diatas. jika anda belum memiliki jquery anda dapat mendownloadnya disini. Tanda kedua adalah membuat tag-tag HTML yang akan dihilangkan dan digunakan untuk menghilangkan dan memunculkan.

Terakhir adalah Script untuk menghilangkan dan memunculkan element HTML. Jika kita perhatikan baris code diatas (nomor 3 kebawah). Element HTML dengan id hilang dan hilangkan akan disembunyikan terlebih dahulu menggunakan fungsi hide(). Tombol hilangkan dipanggil berdasarkan IDnya untuk menghilangkan div hilangkan dan tombol munculkan dipanggil menggunakan CLASSnya untuk memunculkan div yang sudah disembunyikan. Pertahikan bahwa perbedaan dalam pemanggilannya terletak pada tanda yang digunakan yaitu menggunakan karakter pagar (#) untuk memanggil id dan titil (.) untuk memanggil class.   

Insert, Update dan Delete Dengan MSQLI PHP

Tidak ada kata sempurna pada karya manusia oleh karenanya pengembangan terus dilakukan selama itu diperlukan. lebih-lebih dibidang teknologi informasi. telah berkembang sangat pesat. dalam hal ini, kita dapat mengambil contoh pada teknologi yang ada seperti bahasa server side Hypertext Processor atau yang lebih dikenal dengan nama PHP. Dari waktu ke waktu terus dikembangkan oleh para developer seluruh dunia bersama-sama secara terus menerus merilis versi yang lebih baru. hal ini dimaksudkan untuk tetap menjaga stabilitas dan melengkapi kekurangan-kekurangan yang ada.

Sejak pertama kali dirilis oleh sang pendiri Rasmus Lerdorf, sampai saat ini telah mengalami banyak perbaikan dan perubahan. sehingga suatu misal jika seorang developer telah mengembangkan aplikasi beberapa tahun lalu menggunakan versi PHP yang lama dan hendak dijalankan menggunakan PHP Interpreter yang lebih baru, bisa saja akan terdapat banyak error karena ada fungsi yang dihapus atau diganti dengan yang lebih baru.

Begitu juga dengan fungsi-fungsi yang khusus untuk berkomunikasi dengan database MYSQL, menurut website resmi PHP, ada beberapa fungsi yang akan segera berstatus Deprecated (Usang) atau tidak dikembangkan lagi. sehingga saya sangat menyarankan anda untuk segera migrasi ke yang lebih baru agar source code anda nantinya dapat berjalan di PHP yang baru. Berikut akan saya contohkan penggunaan fungsi mysqli() yang akan menggantikan fungsi mysql().

Menurut situs resminya, penulisan code mysqli, dapat dilakukan dengan 2 cara yaitu secara prosedural dan secara OOP (Objek Oriented Programming). Sama saja. Hal ini tergantung kenyamanan seorang programmer dan gaya penulisan code yang digunakan. saya sendiri lebih suka menggunakan gaya prosedural. adapun penulisan code mysql() dengan mysqli() tidaklah jauh berbeda, hanya menambahkan huruf i setelah kata mysql. sehingga setiap fungsinya kurang lebih akan menjadi seperti berikut ini. 

$host = "localhost";
$user = "root";
$pass = "";
$db = "nama_db";
$sql = "SELECT * FROM data";

mysql_connect($host,$user,$pass); berubah menjadi $con = mysqli_connect($host,$user,$pass,$db);
mysql_select_db($db); tidak perlu menggunakan ini di mysqli
$query = mysql_query($sql); berubah menjadi $query = mysqli_query($con, $sql);
mysql_num_rows($sql); berubah menjadi mysqli_num_rows($con, $sql);
mysql_fetch_array($query); berubah menjadi mysqli_fetch_array($query, MYSQLI_BOTH);

Jika kita perhatikan terdapat beberapa perubahan disana yaitu penambahan parameter pada setiap
fungsi yaitu 

1. Fungsi mysqli_connect() : penambahan parameter nama database sehingga tidak perlu lagi menggunakan fungsi mysql_select_db()
2. Fungsi mysqli_query() dan mysqli_num_rows() : penambahan parameter variabel koneksi didepan string query
3. Fungsi mysqli_fetch_array() : penambahan parameter MYSQLI_ASSOC/MYSQLI_BOTH sebagai pendefinisian dengan apa data pada tabel database akan dipanggil apakah dengan nama field, nomor field atau keduanya

Saya kira sampai disana anda sudah memiliki gambaran. sebeneranya masih banyak fungsi-fungsi mysqli yang lain yang tidak dapat saya jelaskan satu persatu disini. tapi inti dari perubahan pada fungsi-fungsi yang sering kita gunakan sudah saya jelaskan diatas. Meski begitu, rasanya kurang afdol jika tanpa contoh studi kasus source code langsung. jadi mari kita mulai. Pada DBMS MySQL saya memiliki sebuah database dengan nama mysqli_belajar dengan sebuah tabel biodata sebagai berikut

Insert, Update dan Delete Dengan MSQLI & PHP

Selanjutnya, dengan informasi terbesut saya akan membuat sebuah proses input, update dan delete kedalam tabel database menggunakan PHP dan MYSQLI. Pertama-tama saya buat dulu file koneksinya sebagai berikut.

<?php 
$host = "localhost";
$user = "root";
$pass = "";
$db = "mysqli_belajar";

$con = mysqli_connect($host,$user,$pass,$db); 

if ($con->connect_error){
 die("Koneksi Ke MySQL GAGAL!");
}

?>

Kemudian saya membuat sebuah form input yang akan digunakan oleh user untuk mengisikan biodatanya lalu mengklik tombol simpan untuk proses penyimpanan, tombol update untuk proses edit data. pada halaman ini juga data akan ditampilkan untuk dapat di edit dan dihapus oleh user. adapun source code lengkapnya adalah sebagai berikut. 

<title>INSERT UPDATE & DELETE dengan FUNGSI MYSQLI</title>

<?php 
require_once("koneksi.php"); 
// Jika Edit diklik 
if (isset($_GET['id'])){
 $id = $_GET['id'];
 $sql = mysqli_query($con,"SELECT * FROM biodata WHERE id='".$id."'"); 
 if ($sql){
  $dataid = mysqli_fetch_row($sql);
  $button = "update";
  $nama = $dataid[1];
  $pass = $dataid[2];
 }
 } else {
  $button = "simpan"; 
  $nama = "";
  $pass = "";
 }
 
// Jika Hapus diklik
if (isset($_GET['hapus'])){
 $id = $_GET['hapus'];
 $sql = mysqli_query($con,"DELETE FROM biodata WHERE id='".$id."'"); 
 if ($sql){
  echo "<script>alert('DATA BERHASIL DIHAPUS'); window.location.href='index.php';</script>";
 } else {
  echo "<script>alert('DATA GAGAL DIHAPUS'); history.go(-1);</script>";
 } 
}
?>

<form method="post" action="">
 <input type="text" name="user" value="<?php echo $nama; ?>"/> </br>
 <input type="password" name="pass" value="<?php echo $pass; ?>" /> </br>
 <input type="submit" name="<?php echo $button; ?>" Value="SIMPAN"/> </br> </br>
</form>

<?php 
// Proses Simpan
if (isset($_POST['simpan'])){
$user = htmlentities($_POST['user']);
$pass = htmlentities($_POST['pass']);
$sql = mysqli_query($con,"INSERT INTO biodata (id,user,pass) VALUES ('','".$user."','".$pass."')"); 
 if ($sql){
  echo "DATA BERHASIL DISIMPAN";
 } else {
  die("GAGAL GAGAL DISIMPAN");
 } 
} 
// Proses Update
else if (isset($_POST['update'])){
$user = htmlentities($_POST['user']);
$pass = htmlentities($_POST['pass']);
$id = htmlentities($_GET['id']);
$sql = mysqli_query($con,"UPDATE biodata SET user='".$user."',pass='".$pass."' WHERE id='".$id."'"); 
 if ($sql){
  echo "DATA BERHASIL DIPERBARUI";
 } else {
  die("DATA GAGAL DIPERBARUI");
 } 
} ?>

<?php
// Proses MENAMPILKAN Data  
$sql = mysqli_query($con,"SELECT * FROM biodata"); 
 
 if ($sql){
  echo "<table border='1px'>";
  echo "<tr><td>No</td><td>Nama</td><td>Password</td><td>Aksi</td></tr>";
  while ($tampil = mysqli_fetch_row($sql)){
  echo "<tr><td>$tampil[0]</td><td>$tampil[1]</td><td>$tampil[2]</td><td><a href='index.php?id=$tampil[0]'>Edit</a> | <a href='index.php?hapus=$tampil[0]'>Hapus</a></td></tr>"; 
  }
  echo "</table>";
 } else {
  die("GAGAL MENAMPILKAN DATA");
 }
 
 ?>

Cara Mudah Membuat Grafik dengan PHP

Adakalanya dalam membangun aplikasi seorang programmer perlu menampilkan data-data yang ada pada tabel database kedalam sebuah grafik atau chart. Hal ini akan sangat bermanfaat untuk end user karena dengan melihat grafik, presentase data sudah dapat terlihat. selain itu seseorang cenderung lebih senang (mudah memahami) data yang ditampilkan dengan menggunakan grafik dari pada harus melihat data pada tabel.

Dalam pemrograman website utamanya PHP dan Javascript atau JQuery, ada banyak class yang dapat kita gunakan untuk membuat grafik. Namun demikian ada beberapa class yang saya jumpai yang tidak gratis. Artinya kita harus membayar lisensi untuk dapat menggunakan keseluruhan fitur yang ada. tapi tenang saja. saya tidak akan menggunakannya pada contoh kali ini.

Saya sendiri, untuk urusan menampilkan presentase data kedalam grafik lebih sukan menggunakan class PHPLOT. anda dapat mengunduhnya disini. tersedia gratis dan open source. anda dapat dengan bebas menggunakan, memodifikasi (jika anda bisa) dan menyebarluaskannya jika anda anggap ini bermanfaat. baiklah, hasil akhir yang akan kita peroleh nantinya kurang lebih seperti dibawah ini. contoh menampilkan grafik pengunjung website.

Mudah Membuat Grafik dengan PHP

Untuk menggunakannya sebenarnya tidak sulit. ada banyak blogger yang sudah membahasnya di blog-blog mereka. Bahkan dihalaman website phplot sudah ada refence manual yang dapat anda jadikan sebagai panduan. tidak cukup sampai disana, source code contoh juga disediakan untuk anda. Berikut adalah contoh source code yang saya gunakan untuk menampilkan grafik pengunjung seperti gambar diatas. 
<?php 

 require_once("koneksi");

    $hari = date("Y-m-d");
 $kemarintgl  = date("Y-m-d",mktime(0,0,0,date('m'),date('d')-1,date('Y')));
 $minggu  = date("Y-m-d",mktime(0,0,0,date('m'),date('d')-7,date('Y')));
 $bulan  = date("Y-m-d",mktime(0,0,0,date('m'),date('d')-30,date('Y')));
 
 $hari_ini = mysqli_num_rows(mysqli_query($con,"SELECT * from visitor WHERE tanggal='".date("Y-m-d")."'"));
 $kemarin = mysqli_num_rows(mysqli_query($con,"SELECT * from visitor WHERE tanggal='".$kemarintgl."'"));
 $seminggu = mysqli_num_rows(mysqli_query($con,"SELECT * from visitor WHERE (((tanggal) BETWEEN '".$minggu."' AND '".$hari."'))"));
 $sebulan = mysqli_num_rows(mysqli_query($con,"SELECT * from visitor WHERE (((tanggal) BETWEEN '".$bulan."' AND '".$hari."'))"));
 $total = mysqli_num_rows(mysqli_query($con,"SELECT * from visitor"));

  require_once("phplot/phplot.php"); // Sisipkan Class PHPlot
  $plot = new PHPlot(900,400); // Buat Sebuah Objek PHPlot
  
  $data_visitor = array(
       array('Hari Ini',$hari_ini),
    array('Kemarin',$kemarin),
    array('Seminggu',$seminggu),
    array('Sebulan',$sebulan),
    array('Total Pengunjung',$total)
    );

  $plot->SetFailureImage(False); 
  $plot->SetPrintImage(False); 
  $plot->SetDataValues($data_visitor);
  $plot->SetTitle("Grafik Pengunjung Website");
  $plot->SetXTickLabelPos('none');
  $plot->SetXTickPos('none');
  $plot->SetFont('x_label','4');
  $plot->SetFont('y_label','4');
  $plot->SetFont('title','5');
  $plot->DrawGraph();
?>

Sebenarnya, dengan source code diatas, grafiknya sudah dapat muncul. tapi jika anda ingin melakukan embeed code atau anda ingin menyisipkan grafik diantara code html, source code diatas belum cukup. Adakalanya memang hal ini perlu kita lakukan. maka untuk itu, yang perlu anda lakukan adalah memanggil fungsi encode image dengan objek phplot yang sudah dibuat kemudian menyisipkannya didalam tag img. berikut contoh yang saya gunakan. 
<img src="<?php echo $plot->EncodeImage();?>" alt="Grafik Data Pengunjung Website"/>

Menambahkan Gambar Icon di Button HTML dengan CSS

Pada postingan pertama ini saya akan berbagi trik cara mudah menambahkan gambar icon pada Inputan Button HTML dengan CSS. Cara ini bisa teman-teman terapkan untuk mempercantik tampilan website yang kalian buat. trik ini cukup gampang karena menggunakan tool pihak ketiga yaitu Css Sprite Generator yang dapat anda lihat disini. adapun hasil yang akan kita peroleh nantinya seperti gambar dibawah ini.

Menambahkan Gambar Icon di Button HTML dengan CSS

Didunia Web Desain alias Desain Web, teknik ini biasa disebut dengan teknik sprite tapi tentu saja yang dimaksud adalah bukan sprite minuman. teknik sprite ini adalah dengan menggabungkan beberapa icon kedalam sebuah gambar dan nantinya akan digunakan satu persatu dengan bantuan css. tekniknya adalah dengan memanfaatkan lokasi icon pada gambar. contoh gambar sprite adalah seperti dibawah ini. 

Menambahkan Gambar Icon di Button HTML dengan CSS

Lalu? Bagaimana menambahkan gambar icon-icon yang sudah digabungkan tersebut kedalam Button? caranya tidak sulit. silahkan kunjungi. CSS Sprite generator pada link yang sudah saya bagikan pada paragraf diatas. Pada halaman tersebut, anda perlu menambahkan beberapa icon terlebih dahulu setelah itu tunggu prosesnya beberapa menit. Hal ini tergantung pada koneksi internet dan jumlah gambar yang anda load. Jika sudah selesai silahkan klik tombol download maka akan mucul fasilitasi untuk mendownload gambar, code css dan contoh penerapannya (code html)

Menambahkan Gambar Icon di Button HTML dengan CSS

Tambahkan source code berikut pada file CSS yang telah anda download dari css sprite generator tersebut. Download dan letakkan file gambar css sprite generator didalam folder projek anda sehingga struktur foldernya menjadi berikut 

nama-projek
-sprite.css
-sprite.png
-index.html

[class^="cus-"],
[class*=" cus-"] {
  display: inline-block;
  width: 17px;
  height: 16px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("gambarsprite.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
[class^="cus-"]:last-child,
[class*=" cus-"]:last-child {
  *margin-left: 0;
}

.cus-accept {
    width: 16px;
    height: 16px;
    background-position: -5px -5px;
}

.cus-add {
    width: 16px;
    height: 16px;
    background-position: -31px -5px;
}
... dst ....

Untuk contoh source code HTML yang saya gunakan dapat anda lihat dibawah ini. Perlu anda ketahui pada contoh source code disini saya sudah merubah sprite menjadi cus sehingga code yang awalnya adalah sprite-add menjadi cus-add. Download contoh source codenya disini.

<link href="spritecss.css" type="text/css" rel="stylesheet">
<button><i class="cus-exclamation"></i>Contoh Button</button>
<button><i class="cus-accept"></i>Contoh Button</button>
... dst ....

Validasi Input Form dengan JQuery

Validasi input dalam membuat aplikasi sangatlah penting untuk dilakukan. Hal ini bertujuan untuk mengantisipasi hal-hal yang tidak diinginkan. Lebih-lebih untuk aplikasi berbasis website. Di Internet semua bersifat tabu. kita tidak bisa membatasi hal-hal yang dapat dilakukan seorang pengunjung pada halaman website kita. hal ini termasuk pada inputan form. menurut beberapa sumber yang saya baca, kerentanan suatu halaman website pada aktifitas hacking banyak ditemukan pada inputan form.

Validasi Input Form dengan JQuery

Validasi input adalah cara yang digunakan oleh programmer untuk memeriksa inputan dari pengujung atau user. Sesuai atau tidaknya dengan aturan-aturan yang telah dibuat. Jika inputan sesuai maka proses akan dilanjutkan ke halaman berikutnya namun jika tidak sesuai maka akan muncul sebuah pesan kesalahan.

Membuat validasi input dapat kita lakukan melalui server side ataupun client side scripting. Hal tersebut tentu saja memiliki kelebihan dan kekurangannya tersendiri. Namun saya tidak akan membahasnya disini melainkan saya akan berbagi sedikit trik tentang bagaimana melakukan validasi form menggunakan JQuery. disini saya contohkan untuk memvalidasi checkbox, input text dan combobox atau select. Download Source Codenya disini!

 <style type="text/css">
  .error {
   font-size:small;
   color:red;
  }
 </style> 
   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript" src="jquery.validate.min.js"></script>
   <script type="text/javascript">
   
  var $jnoc = jQuery.noConflict();
  
  $jnoc(document).ready(function(){
   
     $jnoc('#laporkan').validate({
      
    rules: {
     'carapas[]': {
      required: true,
      maxlength: 2
     }
    },
    messages: {
     nama: {
      required : "Nama Korban Pasung Harus diisi"
     },
        kab: {
      required : "Pilih Kabupaten!"
     },
        'carapas[]' : {
      required : "<b>Salah Satu Cara Pasung harus dipilih</b> "
     }
    }
   });
   
  });
  </script>

<div class="clear"></div>

 
<form class="form-horizontal" method="post" action="" enctype="multipart/form-data" id="laporkan">
<fieldset>

<!-- Form Name -->
<legend><center style="padding-bottom:10px;">Lengkapi Form Berikut</center></legend>

<fieldset>
<legend>Data Korban Pasung</legend>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="fn">Nama Lengkap</label>  
  <div class="col-md-4">
  <input id="nama" name="nama" type="text" placeholder="Nama Lengkap" class="form-control input-md required" value="<?php if (isset($_POST['nama'])){ echo $_POST['nama']; }?>"/>
  </div>
</div>

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="selectbasic">Kabupaten</label>
  <div class="col-md-4">
    <select id="kab" name="kab" class="form-control input-md required" style="color:black">
      <option value="">-- PILIH --</option>
      <option value="Mataram">Mataram</option>
      <option value="Lombok Barat">Lombok Barat</option>
      <option value="Lombok Utara">Lombok Utara</option>
    </select>
 
  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="selectbasic">Cara Pemasungan</label>
  <div class="col-md-4">

<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" value="Balok Kayu">Balok Kayu</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" value="Rantai">Rantai</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" value="Tali">Tali</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" value="Kurung">Kurung</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="carapas[]" id="lainnya" value="Lainnya" >Lainnya</label>
</div>

 </div>
</div>

</div>
</fieldset>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-4">
    <button id="submit" name="submit" class="btn btn-primary">K I R I M</button>
    </div>
</div>

</fieldset>
</form>
  
</div>
  
    </div>
  </div>
</div>
<!-- service end -->

<?php 
if (isset($_POST['submit'])){
 
echo $_POST['nama']; 
 
}?>

Integer to Rupiah dengan PHP dan Javascript

Dalam membangun aplikasi berbasis website kita selalu dituntut untuk membuat sebuah tampilan yang menarik. Selain itu, Halaman website yang user friendly menjadi tuntutan tersendiri bagi seorang web developer lebih-lebih bagi mereka yang single fighter atau bekerja sendiri (tanpa team). Selain itu, bagi seorang pemula yang baru menggeluti dunia web programming juga cenderung mengeluh dalam membuat aplikasi website yang user friendly.

Pasalnya, untuk membuat aplikasi website yang interaktif kita akan dihadapkan dengan berbagai persoalan yang tidaklah mudah semisal mendesain tampilan yang banyak berhubungan dengan CSS, segi keamaan agar tidak mudah ditembus hacker dan AJAX yang dapat menjadikan halaman website lebih interaktif. kok malah curhat? haha :D

Integer to Rupiah dengan PHP dan Javascript

Baiklah, mari kita fokus ke pembahasan, pada postingan ini saya ingin sedikit berbagi trik bagaimana merubah format angka atau yang dikenal dengan integer menjadi format rupiah. berdasarkan pengalaman saya, seringkali ini banyak diminta oleh client.

Pada contoh ini saya menggunakan dua buah scripting yaitu server side dan client side (PHP dan Javascript). Contohnya seperti gambar diatas bagaimana merubah format angka menjadi rupiah. silahkan download source codenya disini. Happy Coding. :)

Download 6 Template CSS Halaman Administrator Website

Dalam mengembangkan ataupu membangun sebuah halaman website kita tidak hanya dituntut agar website tersebut bisa berjalan dengan baik serta memiliki keamanan yang terjamin. Hal mendasar yang juga banyak dituntut adalah tampilan yang menarik. Hal ini karena sebuah halaman website tidak hanya diakses oleh pengguna lokal saja melainkan seluruh orang didunia.

Dewasa ini, para developer telah mengembangkan berbagai macam fitur gratis untuk halaman website sepeti Framework CSS (Bootstrap) dan semacamnya. selain itu pengembangan template template halaman website juga telah banyak dilakukan baik yang versi gratis atau berbayar. Hal ini tentu saja dapat memudahkan kita dalam mengembangkan website karena kita akan lebih difokuskan pada server side scripting saja karena hal-hal yang berurusan dengan client side scripting seperti template telah banyak di kembangkan dan tentu saja dapat kita gunakan dengan bebas.

Berikut saya sharing beberapa template CSS halaman administrator yang mungkin dapat sobat gunakan untuk membangun website. template ini gratis jadi tak perlu sungkan ataupun ragu untuk mendownloadnya. :)

1. Template Halaman Administrator (In Admin Theme) | Download

Download 6 Template CSS Halaman Administrator Website

2. Template Halaman Administrator (HTML 5 Admin Template) | Download

Download 6 Template CSS Halaman Administrator Website

3. Template Halaman Administrator (In Admin Panel) | Download

Download 6 Template CSS Halaman Administrator Website

4. Template Halaman Administrator (Profi Admin) | Download

Download 6 Template CSS Halaman Administrator Website

5. Template Halaman Administrator (SB Admin) | Download

Download 6 Template CSS Halaman Administrator Website

6. Template Halaman Administrator (Bootstrap Admin) | Download

Download 6 Template CSS Halaman Administrator Website

Capture Webcam dan Simpan ke Database dengan PHP

Saat ini Aplikasi-Aplikasi keren rata-rata sudah dilengkapi dengan utilitas yang mampu melakukan Capture pada webcam. Sebut saja Facebook dan beberapa aplikasi chating seperti Line ataupun Instagram. Oleh karena itu pada postingan ini saya ingin berbagi bagaimana melakukan capture Webcam dengan JQuery dan menampilkan hasilnya serta menyimpannya kedalam tabel database mysql. Sebagai gambaran, hasilnya adalah sebagai berikut

Source Code Capture Webcam dan Simpan ke Database dengan JQuery

Langkah Membuat Capture Webcam dengan PHP

1.  Buat Sebuah Database dengan Struktur Sebagai berikut 

Capture Webcam dan Simpan ke Database dengan PHP

2. Download Shockwave Flash Object disini kemudian Extrack kedalam folder projek anda. 

3. Buat sebuah file untuk melakukan koneksi kedatabase berinama koneksi.php 

4. Berikut adalah contoh script index.php yang saya gunakan
<?php include "koneksi.php"; ?>

<html>
 <head>
  <title>Capture Webcam dengan JQuery</title>
 </head>
 
<body>
<!--Camera-->
<div style="margin-left:35%;">
<object width="300" height="200" data="croflash.swf" type="application/x-shockwave-flash">
<param name="data" value="croflash.swf" /><param name="src" value="croflash.swf" />
<embed src="croflash.swf" type="application/x-shockwave-flash"  width="300" height="300"></embed>
</object>
</div >
<!--Tampilkan data-->
 <div style="margin-left:25%; margin-top:20px">
 <table border="1" style="text-align:center;">
  <tr style="background-color:#ccc;"><td width='10px'>No</td><td width='250px'>Nama</td><td width='250px'>Gambar</td><td width='50px'>Aksi</td></tr>
  <?php $sql=mysql_query("select * from hasil"); 
     while($tampilkan = mysql_fetch_array($sql)){
  ?>
  <tr>
  <td><?php echo $tampilkan['id']; ?></td>
  <td><?php echo $tampilkan['nama']; ?></td>
  <td><img src="<?php echo $tampilkan['gambar']; ?>.png" width="150px" height="100px"/></td>
  <td><a href="hapus.php?id=<?php echo $tampilkan['id']; ?>">Hapus</a></td>
  </tr>
  <?php } ?>
 </table>
 </div>
</body>
</html>

5. Buat sebuah file dengan nama saveimg.php akan digunakan Untuk Menyimpan Gambar hasil capture saya menggunakan source code berikut
<?php
error_reporting(0);
$url = 'http://localhost/webcam';
/**
 * Get the width and height of the destination image
 * from the POST variables and convert them into
 * integer values
 */
$w = (int)$_POST['width'];
$h = (int)$_POST['height'];

// create the image with desired width and height

$img = imagecreatetruecolor($w, $h);

// now fill the image with blank color
// do you remember i wont pass the 0xFFFFFF pixels 
// from flash?
imagefill($img, 0, 0, 0xFFFFFF);

$rows = 0;
$cols = 0;

// now process every POST variable which
// contains a pixel color
for($rows = 0; $rows < $h; $rows++){
 // convert the string into an array of n elements
 $c_row = explode(",", $_POST['px' . $rows]);
 for($cols = 0; $cols < $w; $cols++){
  // get the single pixel color value
  $value = $c_row[$cols];
  // if value is not empty (empty values are the blank pixels)
  if($value != ""){
   // get the hexadecimal string (must be 6 chars length)
   // so add the missing chars if needed
   $hex = $value;
   while(strlen($hex) < 6){
    $hex = "0" . $hex;
   }
   // convert value from HEX to RGB
   $r = hexdec(substr($hex, 0, 2));
   $g = hexdec(substr($hex, 2, 2));
   $b = hexdec(substr($hex, 4, 2));
   // allocate the new color
   // N.B. teorically if a color was already allocated 
   // we dont need to allocate another time
   // but this is only an example
   $test = imagecolorallocate($img, $r, $g, $b);
   // and paste that color into the image
   // at the correct position
   imagesetpixel($img, $cols, $rows, $test);
  }
 }
}

$waktu = date("H-i-s");
$nama = 'gambar-'.$waktu;
// print out the correct header to the browser
header("Content-type:image/jpeg");
imagejpeg($img,$nama.".png", 90);

include "koneksi.php";
$gambar = $nama;
// Simpan Data ke Database
$sql = "INSERT INTO hasil (nama,gambar) VALUES ('".$nama."','".$gambar."')";
$simpan = mysql_query($sql);

header("location:".$url);

?>

6. Sedangkan untuk menghapus gambar script yang saya gunakan sebagai berikut
<?php 
 include "koneksi.php";
 // Hapus Gambar
 $query = mysql_query("select * from hasil where id = '".$_GET['id']."'"); 
  $hapus = mysql_fetch_array($query);
  $file = $hapus['gambar'].'.png';
  unlink($file);
  
 // Hapus Dari Tabel
 $sql = "DELETE FROM hasil WHERE id = '".$_GET['id']."'";
 $hapus = mysql_query($sql);
 if ($sql){
 echo "<script>alert('Data Berhasil di Hapus'); window.location = 'http://localhost/webcam';</script>";
 } else {
 echo "<script>alert('Gagal di Hapus'); window.location = 'http://localhost/webcam';</script>";
 }
?>

Cara Menginstall dan Menggunakan Composer di Windows

Seperti yang kita ketahui bersama, Composer merupakan sebuah Dependency Manager milik PHP. Saya kira permasalahan tentang apa itu dependency manager sudah banyak yang sharing entah yang berbahasa indonesia ataupun yang berbahasa inggris. Jadi silahkan browsing dan cari tahu dulu jika anda belum paham karena disini saya hanya akan membahas cara install dan contoh penggunaannya.

Langkah -Langkah Instalasi Composer di Windows

Selain dengan Command Line kita dapat dengan mudah menginstall Dependency ini hanya dengan bermain klik (untuk sistem operasi windows) namun sebelumnya tentu saja kita harus memiliki master aplikasinya terlebih dahulu. untuk memperolehnya anda dapat mendownloadnya disini.

Cara Menginstall dan Menggunakan Composer di Windows

Usai mendownload. silahkan jalankan file executablenya. langkah-langkah instalasinya sama saja dengan menginstall aplikasi lain. hanya saja proses instalasinya membutuhkan koneksi internet (cloud). selain itu pastikan anda mengarahkan pada path file php anda pada step berikut

Cara Menginstal dan Menggunakan Composer di Windows

Saat Proses Instalasi berlangsung, jangan sampai putus koneksi internet ya. hhe
Setelah Proses instalasi selesai, anda dapat mengecek apakah composer sudah terpasang dikomputer anda dengan mengetikan perintah composer di command prompt seperti gambar berikut

Cara Menginstal dan Menggunakan Composer di Windows

Sampai disini kita sudah berhasil menginstall composer. Selamat :)

Langkah - Langkah Menggunakan Composer (Contoh)

Selanjutnya adalah kita akan coba menggunakannya pada projek aplikasi kita. Silahkan buat sebuah file dengan nama composer.json yang isinya sebagai berikut 
{
    "require": {
       "twitter/bootstrap": "*" 
    }
}

Pada contoh ini kita akan mencoba menggunakan Twitter Bootstrap melalui composer. Anda juga dapat menggunakan Package-Package lain yang sudah ada di composer. 
Kemudian langkah berikutnya adalah buka command prompt anda lalu masuk ke directory projek anda (sebagai contoh directory projek saya ada di c:\xampp\htdocs) lalu ketikan perintah composer install seperti gambar dibawah ini

Cara Menginstall dan Menggunakan Composer di Windows

Sampai disini akan terbentuk sebuah file baru bernama composer.lock dan sebuah folder yang didalamnya terdapat file auto load dan package-package yang anda install. Untuk menggunakannya anda hanya perlu menambahkan code berikut di file index projek anda
include_once 'vendor/autoload.php';
?>

Sebenarnya untuk masalah penggunaan dan implementasinya lebih lanjut saya juga masih kurang faham. jadi postingan ini saya cukupkan saja sampai disini. sampai bertemu dilain waktu. happy coding. :)

Insert Update dan Delete dengan PHP dan MySQL

Proses Menyimpan, Memperbarui dan Menghapus data dalam sebuah aplikasi adalah yang paling sering dilakukan. oleh karenanya bisa dikatakan ketiga proses tersebut (Simpan, Update dan Delete) merupakan sebuah pondasi yang harus diketahui dan dipahami dalam membangun aplikasi (berbasis database) dengan bahasa pemrograman apapun.

Sebelum dapat melakukan ketiga proses tersebut tentu saja kita harus memiliki database terlebih dahulu. dalam hal ini saya lebih memilih MySQL karena sifatnya yang free. Untuk membuat database dengan MySQLpun tidak terlalu sulit jika kita menggunakan tools visual  seperti PHPMyAdmin dan HeidiSQL. Untuk Bahasa Pemrograman, Pada kasus ini kita akan Menggunakan PHP (HyperText Processor).

Step 1 : Pastikan Anda Sudah Memiliki Database dan Minimal Sebuah Tabel. Berikut Penampakan Struktur tabel yang saya gunakan dari PHPMyAdmin

Insert Update dan Delete dengan PHP dan MySQL

Step 2 : Koneksikan Database Anda dengan coding sebagai berikut (sesuaikan, Host, Database User dan Password Database Anda)
mysql_connect('localhost','user_database','password_database');
mysql_select_db('nama_database');

Step 3 : Buatlah sebuah File PHP yang berisi Form Input. Seperti gambar berikut

Insert Update dan Delete dengan PHP dan MySQL

Gambar diatas adalah Contoh Form Input beserta contoh menampilkan data yang telah tersimpan didatabase. Untuk Proses Simpan source code yang saya gunakan adalah sebagai berikut 
// Jika Tombol Simpan ditekan
if (isset($_POST['submit'])){
// Cek Jika Input Masih ada yang Kosong
if ((!empty($_POST['nama'])) && (!empty($_POST['jk'])) && (!empty($_POST['agama'])) && (!empty($_POST['alamat']))){
// Simpan Data
$sql = "INSERT INTO data (nama,jenis_kelamin,agama,alamat) VALUES ('".$_POST['nama']."','".$_POST['jk']."','".$_POST['agama']."','".$_POST['alamat']."')";
$simpan = mysql_query($sql);

if ($simpan) {
echo "<script>alert('Data Tersimpan'); </script>";
} else { 
echo "<script>alert('Gagal disimpan');</script>";
}
// Jika Inputan Masih ada yang Kosong
} else {
echo "<script>alert('Input Masih ada yang Kosong'); history-go(-1);</script>";
}
}

Sedangkan untuk menampilkan data yang telah tersimpan pada tabel database saya menggunakan source code berikut ini 
<?php 
// Tampilkan data dari Database
$sql = "SELECT * FROM data";
$tampil = mysql_query($sql);
while ($tampilkan = mysql_fetch_array($tampil)) { ?>
<tr>
<td><?php echo $tampilkan['id']; ?></td>
<td><?php echo $tampilkan['nama']; ?></td>
<td><?php echo $tampilkan['jenis_kelamin']; ?></td>
<td><?php echo $tampilkan['agama']; ?></td>
<td><?php echo $tampilkan['alamat']; ?></td>
<td><a href="hapus.php?id=<?php echo $tampilkan['id']; ?>"><input type="button" onclick="return confirm('Anda Mau Hapus Data <?php echo $tampilkan['nama']; ?> ?');" value="Hapus"></a> | 
<a href="edit.php?id=<?php echo $tampilkan['id'];?>">Edit</a></td></tr>
<?php
}
?>

Lalu Kita perlu membuat sebuah file Edit.php. File Edit inilah yang akan ditampilkan jika user mengklik tombol Edit. Contoh code yang saya gunakan adalah sebagai berikut
<html>
<head>
<title>Insert Update dan Delete | PHP dan MySQL</title>
</head>
<body>

<?php 
// Ambil data Berdasarkan ID
$sql = "SELECT * FROM data WHERE id = '".$_GET['id']."'";
$tampil = mysql_query($sql);
while ($data = mysql_fetch_array($tampil)){ ?>

<form method="post" action="">
<table align="center">
<tr><td>Nama</td><td><input type="text" name="nama" value="<?php echo $data['nama']; ?>"></td></tr>

<tr><td>Jenis Kelamin</td><td>
<input type="radio" name="jk" value="Laki-Laki">Laki-Laki
<input type="radio" name="jk" value="Perempuan">Perempuan
</td></tr>

<tr><td>Agama</td><td>
<select name="agama">
<option value="">--Pilih--</option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Hindu">Hindu</option>
<option value="Budha">Budha</option>
<option value="Kong Hu Cu">Kong Hu Cu</option>
</select>
</td></tr>

<tr><td>Alamat</td><td><textarea name="alamat" cols="30" rows="5"><?php echo $data['alamat']; ?></textarea></td></tr>
<?php } ?>
<tr><td colspan="2"><center>
<input type="submit" name="submit" value="Update"/>
</center></td></tr>
</table>
</form>

</body>

</html>
Hasil yang saya peroleh seperti gambar dibawah 
Insert Update dan Delete dengan PHP dan MySQL
Selanjutnya kita perlu membuat sebuah file yang akan menghandle jika user mengklik tombol Update di file Edit.php seperti gambar diatas. anda dapat meletakannya didalam coding edit.php
<?php 
include "koneksi.php";

// Jika Tombol Simpan ditekan
if (isset($_POST['submit'])){
// Cek Jika Input Masih ada yang Kosong
if ((!empty($_POST['nama'])) || (!empty($_POST['jk'])) || (!empty($_POST['agama'])) || (!empty($_POST['alamat']))){
// Update Data
$sql = "UPDATE data SET nama= '".$_POST['nama']."', jenis_kelamin = '".$_POST['jk']."', agama = '".$_POST['agama']."', alamat = '".$_POST['alamat']."' WHERE id = '".$_GET['id']."'";
$simpan = mysql_query($sql);

if ($simpan) {
echo "<script>alert('Data Berhasil di Update'); window.location='index.php';</script>";
} else { 
echo "<script>alert('Gagal Di Update');</script>";
}
// Jika Inputan Masih ada yang Kosong
} else {
echo "<script>alert('Input Masih ada yang Kosong'); history-go(-1);</script>";
}
}

?>
Langkah Terakhir adalah membuat source code yang akan melakukan proses delete data. anda dapat melihat contohnya berikut ini. Simpan dengan nama hapus.php
<?php 
include "koneksi.php";

$sql = "DELETE FROM data WHERE id = '".$_GET[id]."'";
$hapus = mysql_query($sql);

if ($sql){
echo "<script>alert('Data Berhasil di Hapus'); window.location = 'index.php';</script>";
} else {
echo "<script>alert('Gagal di Hapus'); window.location = 'index.php';</script>";
}


?>
Adapun Source Code (Coding) Lengkap untuk Proses Simpan, Menampilkan Data dari Database, Form InputEdit dan Delete Beserta Database-nya Dapat Anda Download disini. Happy Coding! :)

Cara Upload dan Simpan Gambar ke Database dengan PHP

Menyimpan Gambar tidaklah sama dengan menyimpan sebuah karekter atau data-data yang bertipe string. sejauh pengetahuan saya, ada dua teknik yang kerap digunakan dalam menyimpan gambar di database. Teknik pertama dengan cara menyimpan gambar tersebut kedalam format BLOB/LONGBLOB. Anda perlu mendefinisikan sebuah field di tabel anda dengan format ini. Namun kita tidak akan membahas teknik ini. 

Sedangkan teknik yang kedua adalah dengan cara menyimpan nama gambarnya saja lalu memindahkan filenya (gambar) kedalam direktory yang telah ditentukan (Upload). Teknik ini yang akan coba saya jelaskan pada postingan ini. Stay tune ya. :)

Melakukan Proses Upload Gambar 

1. Buat Sebuah Form Input. Contoh Source Code Seperti gambar berikut
<form method="post" enctype="multipart/form-data">
<td colspan="4">Upload Gambar (Ukuran Maks = 1 MB) : <input type="file" name="gbjalan" required /> | Keterangan : <input type="text" name="kete"  /> | 
<input type="submit" value="Upload" name="save"></td>
</form>

2. Seperti Tulisan yang bercetak tebal diatas. anda perlu menambahkannya jika ingin membuat sebuah proses upload file. jika tidak maka file anda tidak akan terupload. tentang batas maksimal ukuran file yang bisa diupload dapat anda lihat di file php.ini  

3. Adapun Coding untuk proses Upload gambar adalah seperti berikut ini
<?php
 if (isset($_POST['save'])){
 $fileName = $_FILES['gambar']['name'];
  // Simpan di Folder Gambar
  move_uploaded_file($_FILES['gambar']['tmp_name'], "gambar/".$_FILES['gambar']['name']);
  echo"<script>alert('Gambar Berhasil diupload !');history.go(-1);</script>";
  
 } 
?>

Jangan Lupa Untuk membuat sebuah Folder dengan nama gambar didalam folder projek anda. 

Menyimpan Gambar ke Database MySQL

1. Buat Sebuah Database dan Sebuah Tabel Dengan Struktur Tabel Seperti gambar berikut

Cara Upload dan Simpan Gambar ke Database dengan PHP

2. Buat Sebuah File koneksi.php untuk mengkoneksikan database dengan projek anda. Isinya adalah Sebagai Berikut
<?php
mysql_connect('localhost','root','root');
mysql_select_db('gambar');
?>

3.  Untuk Form dan Proses Upload kita masih menggunakan contoh sebelumnya. Hanya saja terdapat sedikit penambahan didalam coding proses Uploadnya karena kita juga akan melakukan proses penyimpanan kedalam database 
<?php
 if (isset($_POST['save'])){
 $fileName = $_FILES['gambar']['name'];
  // Simpan ke Database
  $sql = "insert into simpan (gambar, keterangan) values ('$fileName', '".$_POST['keterangan']."')";
  mysql_query($sql);
  // Simpan di Folder Gambar
  move_uploaded_file($_FILES['gambar']['tmp_name'], "gambar/".$_FILES['gambar']['name']);
  echo"<script>alert('Gambar Berhasil diupload !');history.go(-1);</script>"; 
 } 
?>

Menampilkan Gambar yang telah di Simpan & Upload 

Untuk Menampilkan gambar yang telah tersimpan di database sebenarnya konsepnya sama saja dengan menampilkan data dari database hanya saja karena kita akan menampilkan gambar, kita perlu mendefinisikan sebuah tag img agar gambar dapat ditampilkan. contoh source code seperti dibawah ini 
<?php 
include "koneksi.php"; 
$sql = "select * FROM simpan";
$tampil = mysql_query($sql);
while ($data = mysql_fetch_array($tampil)){
// Tampilkan Gambar
echo "<img src='gambar/".$data['gambar']."' width='100px' height='100px'/>";
echo "</br>";
echo $data['keterangan'];
}
?>

Contoh Source Code Lengkap Beserta database dapat anda download disini. Selamat Mencoba. Happy Coding. :)

Cara Membuat Proses Upload dengan PHP dan JQuery

Kali ini saya ingin berbagi tentang cara membuat Proses Upload atau yang lebih akrab disebut dengan Progress. Untuk Membuat Proses Upload File dengan PHP kita membutuhkan bantuan dari Javascript. Pada contoh ini kita akan mencoba menggunakan Library Javascript yaitu JQuery. anda dapat menggunakannya dan menyebarluaskan dengan bebas karena sifatnya yang free.   

Step Pertama adalah membuat sebuah halaman yang berisi form yang akan bertugas untuk melakukan upload file. Contoh Source code yang saya gunakan adalah sebagai berikut :
<h1>File Upload</h1>
    <form action="file.php" method="post" enctype="multipart/form-data">
        <input type="file" name="userfile"><br>
        <input type="submit" value="Upload File to Server">
    </form>

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>

Code diatas akan menghasilkan sebuah form dimana aksi atau proses upload akan dilakukan oleh file berbeda yaitu file.php. sedangkan maksud dari tag div=status adalah untuk memberikan informasi tentang proses upload yang terjadi. Adapun source code file.php (yang akan menghandle proses upload ini) sebagai berikut.
<?php 
$upload_directory = "";
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $upload_directory . $_FILES['userfile']['name'])) {
print "";
print "Selamat, File Anda Berhasil Di Upload";
print "";
print "Nama File Yang Anda Upload {$_FILES['userfile']['name']} Ukuran File Anda {$_FILES['userfile']['size']} bytes ";
} else {
print "Mohon Maaf, File Anda Gagal Di Upload, Silakan Coba Lagi";
}
?>

Step Berikutnya. Silahkan copy dan simpan library Jquery disini.  lalu copy juga library tambahan disini lalu simpan dengan ekstensi (*.js). Setelah semua anda simpan dalam directory projek anda. anda perlu memanggil filenya didalam file form input yang dibuat pada step 1 
<script src="jquery.js"></script>
<script src="js.js"></script>

Langkah Terakhir adalah menggunakan library yang sudah kita tambahkan pada step diatas. karena ini adalah javascript kita perlu membuat sebuah baris code yang diapit dengan tag script. listing code selengkapnya seperti berikut :
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
        //console.log(percentVal, position, total);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 
})();       
</script>

Cara Membuat Proses Upload dengan PHP dan JQuery
Setelah semua proses diatas dilakukan. coba jalankan script anda dengan membuka localhost/namafolderprojek di browser anda. Selamat mencoba dan semoga berhasil. Jika anda membutuhkan source code lengkapnya dapat anda download disini.
Happy Coding :)

Cara Mudah Membuat Paginasi dengan PHP

Teknik Pagination atau membatasi jumlah data yang tampil dari database sangat bermanfaat agar proses loading website menjadi lebih ringan hal ini tentu saja karena sebuah halaman tidak meload keseluruhan data dari database. Coba deh bayangin jikalau data yang ada di database jumlahnya ribuan bahkan ratusan ribu tentu hal ini menjadi sebuah masalah tersendiri. layout tampilan halaman website tentu akan menjadi berantakan karena jumlah data yang tampil tidak dibatasi. 

Cara Mudah Membuat Paginasi dengan PHP
Mengingat hal tersebut diatas, perlu kiranya kita membuat paginasi untuk setiap data yang akan kita tampilkan. contoh paginasi dapat anda lihat pada gambar diatas (dalam kotak merah). Hal ini juga sangat menguntungkan karena kita dapat menentukan layout halaman website kita. 

Untuk contoh kali ini saya menggunakan source code projek sebelumnya (Insert, Update dan Delete) dapat anda lihat pada postingan sebelumnya disini. Dengan Source Code Projek Sebelumnya, kita hanya perlu memodifikasi dan menambahkan beberapa coding untuk membuat sebuah paginasi. 

Jika Pada contoh sebelumnya kita menampilkan data dengan query select * from data, maka untuk menerapkan sebuah paginasi kita perlu sedikit memodifikasinya menjadi seperti berikut 
//mencari banyak data yang ada dalam tabel  
$rsCount = mysql_fetch_array(mysql_query(select count(nama) from data));  
$banyakData = $rsCount[0];  
$page = isset($_GET['data']) ? $_GET['data'] : 1;

// Banyak Data Yang akan ditampilkan
$limit = 4;  
$mulai_dari = $limit * ($page - 1);  
$result = mysql_query(select * from data order by id asc LIMIT $mulai_dari,$limit) or die(mysql_error());

// Tampilkan data dari Database
while ($tampilkan = mysql_fetch_array($result)) { // Kode Menampilkan Data Disini }


sedangkan untuk membuat paginasinya, kita perlu menambahkan code brikut setelah tag penutup table 
<?php 
//membuat pagination 
echo "</br><center>"; 
$banyakHalaman = ceil($banyakData / $limit);  
echo 'Halaman : ';  
for($i = 1; $i <= $banyakHalaman; $i++){  
if($page != $i){  
echo '[<a href="?data='.$i.'">'.$i.'</a>]';
}else{  
echo "[$i] ";  
}  
}
echo "</center>";  
?>

Setelah semua proses diatas dilakukan seharusnya akan muncul sebuah link paginasi dibawah data yang ditampilkan di tabel. anda dapat memodifikasi link paginasi tersebut dengan memanfaatkan CSS. jika anda membutuhkan source code lengkap anda dapat mendownloadnya disini.

Cara Mudah Membuat Artikel Readmore dengan PHP

Teknik Readmore banyak digunakan untuk membatasi jumlah kata/kalimat yang akan ditampilkan. Tujuan penggunaan teknik ini sama halnya dengan pagination yaitu untuk mempercepat proses loading halaman karena tidak akan menampilkan keseluruhan isi artikel yang ada didatabase melainkan hanya beberapa kata saja. selain itu, penggunaan readmore ini juga sangat bermanfaat dalam hal manajemen layout halaman website. 

Artikel Readmore Umumnya digunakan pada halaman home sebuah website sehingga pada halaman tersebut dapat menampilkan beberapa data artikel yang ada pada tabel database. sedangkan link readmore berfungsi mengalihkan pengunjung untuk dapat membaca keseluruhan isi artikel yang ada. 

Cara Mudah Membuat Artikel Readmore dengan PHP
Untuk membuat Readmore semacam ini kita dapat memanfaatkan fungsi substr() yang telah disediakan oleh PHP. penggunaanya juga tidak begitu sulit kita hanya perlu mengirimkan tiga parameter pada fungsi ini seperti contoh berikut ini :

echo substr($artikel, 0, 300);

Coding diatas akan menampilkan data artikel hanya 300 kata saja. adapun penggunaan secara rinci dapat anda lihat pada coding berikut :
// Tampilkan Artikel
$display = mysql_query("SELECT * FROM coba");
while ($data=mysql_fetch_array($display)){ 
$coba = $data['isi'];
echo "<table><tr>";
// Ambil Text Saja Dari Isi Artikel di Database
$panjang = strip_tags(html_entity_decode($coba,ENT_QUOTES,"ISO-8859-1"));
// Jika Panjang Artikel >=300 
if (strlen($panjang) >= 300){
 echo "<td>".substr($panjang, 0, 300)."<a href='readmore.php?id=".$data['id']."'> Readmore</a></td>";
 } else {
 echo "<td>".$panjang."<a href='readmore.php?id=".$data['id']."'> Readmore</a></td>";
  }
echo "</tr><table>";
}

Sedangkan jika user mengklik link readmore akan dialihkan kesebuah file yang bernama readmore.php. adapun coding untuk file readmore ini sama dengan source code diatas hanya saja kita tidak perlu membatasi kata yang akan ditampilkan dengan fungsi substr(). Source code lengkap beserta database dapat anda download disini. Happy Coding :)

Source Code Join Tabel Database dengan PHP

Dalam Membangun aplikasi, seringkali kita perlu melakukan relasi antar tabel-tabel yang ada pada database. dalam query database istilah ini disebut dengan istilah Join. Umumnya terdapat beberapa kategori query join yang dapat kita gunakan seperti; Inner Join, Left Join, Right Join dan Union. Berikut adalah contoh query untuk melakukan Inner Join dua buah tabel :
SELECT tabel1.nama, tabel1.jurusan, tabel2.nama_mk, tabel2.sks, tabel1.nilai FROM tabel1 INNER JOIN tabel2 ON tabel1.kode_mk=tabel2.kode_mk
Query diatas berfungsi melakukan Join pada dua buah tabel yaitu (tabel1 dan tabel2) dimana tabel1 adalah data mahasiswa sedangkan tabel2 adalah data mata kuliah. Hasilnya dapat anda lihat pada gambar diatas. Adapun penggunaan lengkap query join ini adalah sebagai berikut 
// Query Inner Join
$inner_join = mysql_query('SELECT tabel1.nama, tabel1.jurusan, tabel2.nama_mk, tabel2.sks, tabel1.nilai FROM tabel1 INNER JOIN tabel2 ON tabel1.kode_mk=tabel2.kode_mk');
// Tampilkan Inner Join Tabel
echo "Inner Join Tabel<br>";
echo "<table border='1'>";
echo "<tr><td>Nama</td> <td>Jurusan</td> <td>Mata Kuliah</td> <td>SKS</td> <td>Nilai</td></tr>";
while ($join=mysql_fetch_array($inner_join)){
echo "<tr><td>$join[0]</td> <td>$join[1]</td> <td>$join[2]</td> <td>$join[3]</td> <td>$join[4]</td></tr>";
}
echo "</table>";
Source Code Join Tabel Database dengan PHP
Jangan Lupa untuk melakukan koneksi database terlebih dahulu sebelum melakukan proses diatas. Jika anda berminat denga Source code lengkap beserta contoh databasenya dapat anda download pada link berikut ini. Selamat mencoba dan Happy Coding. :)

Framework CSS Pengganti Bootstrap

Bagi anda yang bergelut didunia web desain tentu sudah tidak asing lagi dengan framework CSS sekelas Bootstrap. Bootstrap sendiri adalah sebuah framework CSS milik twitter sehingga seringkali disebut twitter bootstrap. bisa dikatakan, di Indonesia Hampir semua Web Developer (Single Fighter) Menggunakan Framework CSS Boostrap ini. Tujuannya tentu sangat sederhana, untuk memudahkan dan mempercepat proses desain serta untuk menjadikan template menjadi lebih responsive. 

Sebenarnya, Selain Bootstrap ada banyak sekali Framework-Framework CSS yang dapat kita manfaatkan. kemampuannya pun tak kalah hebat dengan Bootstrap. Berikut adalah Beberapa Framework CSS yang saya himpun dan menurut saya menarik 

1. HTML Kick Start CSS Framework

Framework ini Hampir serupa dengan Bootstrap banyak sekali utilitas yang dapat kita manfaatkan semisal mempercantik form, tabel, gambar alert, popup dan semacamnya. saya sendiri lebih suka menggunakan Framework ini ketimbang bootstrap. Ingin mencobanya. klik disini

Framework CSS Pengganti Bootstrap

2. Yaml CSS Framework 

Selain HTML Kick Start, ada juga Yaml, Framework ini cukup canggih karena menurut informasi yang ada di websitenya, ia telah support oleh beberapa browser yang ada saat ini (Internet Explorer, Chrome, Mozila, Opera dan Safari) anda dapat mencobanya sendiri agar tahu kelebihan dan kekurangannya. cek disini

Framework CSS Pengganti Bootstrap

Kedua Framework diatas bersifat free. anda dapat dengan bebas menggunakan dan menyebarluaskannya. Sebenarnya masih banyak Framework-Framework CSS yang bisa kita manfaatkan dan mungkin akan saya sharing lain waktu. Salam Blogger :)