Algoritma Asimetris RSA dengan PHP

Salah Satu Algoritma Enkripsi yang terkenal adalah RSA. Nama Algoritma ini diambil dari Nama Tiga Orang yang menciptakannya (Ron Rivest, Adi Shamir & Leonard Adleman). RSA Adalah Algoritma Enkripsi Asimetris. Artinya Algortihma ini menggunakan dua Kunci yaitu Kunci Public dan Kunci Private.

Berikut Saya ingin sharing Source Code Implementasi Algortima yang dibuat dengan Bahasa Pemrograman PHP. Sebagai Informasi, Aplikasi Enkripsi RSA ini Menggunakan Library gmp yang secara Default tidak disediakan Oleh PHP. Adapun Librarinya Sudah Saya sediakan didalam Folder Downloadnya.

Sedangkan cara Menginstal Library gmp ini cukup mudah. Silahkan anda Copy Semua isi File yang ada didalam Folder gmp kedalam folder PHP anda yang ada di c:\xampp\php\ (Jika anda menggunakan Xampp) Lalu Edit File php.ini tambahkan baris code ini -> extension=php_gmp.dll Selanjutnya Restart Apache Anda. Untuk Source Code Serta Library nya silahkan anda Download disini. Untuk demo Lihat disini

Algorithma Asimetris RSA dengan PHP

Gambar di atas adalah Contoh Teks yang akan dienkripsi (Plain Teks) 

Algorithma Asimetris RSA dengan PHP

Gambar di atas merupakan Hasil Enkripsi Teks (Chipper Teks)

Algorithma Asimetris RSA dengan PHP

Gambar di atas adalah Hasil Deskripsi Chipper Teks Menjadi Plain Teks
Selamat Belajar dan Semoga Sukses.

Algoritma Chaesar Chiper dengan PHP

Chaesar Chipper Adalah Salah Satu Algorithma Kriptografi yang Juga Cukup Terkenal. Seperti Namanya, Algoritma ini dicetuskan Oleh Julius Caesar. Metode yang digunakan adalah Substitusi, dimana untuk menghasilkan Chipper Teks, Setiap Teks (Plain Teks) akan diganti dengan Teks yang Lain dengan Selisih tertentu yang telah ditentukan. Contohnya Seperti berikut Misalkan Sandinya adalah 3

Plain Teks -> CONTOH

Maka dengan Menggunakan Sandi 3, Chipper Teksnya akan Menjadi Seperti Berikut

Chipper Teks -> FRQWRK

Cara Kerjanya Sederhana. Setiap Huruf dalam Plain Teks Tersebut diganti dengan 3 huruf setelahnya. 
Huruf C diganti dengan F karena dalam alfabet, Huruf ke 3 Setelah C adalah F Begitu Juga dengan Huruf O, N, T, O dan H masing-masing akan diganti dengan huruf ke 3 Setelahnya. 

Berikut Saya Sharing Contoh Aplikasi Sederhana Algorithma Chaesar Chipper dengan Menggunakan Bahasa Pemrograman PHP. Anda Dapat Mendownloadnya disini

Algoritma Chaesar Chipper dengan PHP

Gambar diatas merupakan Contoh Enkripsi kata Contoh seperti yang telah kita bahas diatas

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 :)

Teknik Mencetak Laporan Data Pada Halaman Website

Laporan memang sangatlah diperlukan dalam sebuah aplikasi yang kita bangun. apalagi jika aplikasi yang kita bangun memiliki transaksi-transaki keuangan laporan tentu akan sangat membantu kita untuk mengetahui pemasukan dan pengeluaran yang ada pada sebuah perusahaan. selain itu, laporan juga banyak digunakan untuk memberikan bukti pembayaran ataupun bukti pendaftaran yang biasanya berbentuk dokument pdf.

oleh karena penting adanya sebuah laporan dalam sebuah aplikasi. disini saya akan coba berbagi tentang cara membuat laporan dan mencetak laporan dalam aplikasi website. Sejauh ini, ada dua cara mencetak laporan yang saya ketahui

1. Menggunakan Javascript  

Dengan cara ini kita dapat dengan mudah mencetak laporan halaman website tanpa perlu memikirkan desain laporan (membuatnya) terlebih dahulu. karena dalam javascript terdapat sebuah fungsi untuk mencetak/print. cara penggunaanya adalah sebagai berikut :
<input type="button" value="Cetak" onclick="cetak()"/>

Lalu kita perlu membuat sebuah script Javascript yang akan memanggil fungsi print sebagai berikut
<script type="text/javascript">
function cetak(){
 print();
}
</script>

Dengan begitu, ketika Button Cetak di klik, ia akan memanggil sebuah fungsi cetak yang ada didalam javascript. Sayangnya, perintah cetak ini akan mencetak keseluruhan data yang ada pada halaman ini. seperti pada gambar berikut. 

Teknik Mencetak Laporan Data Pada Website

Namun Hal ini dapat kita akali jika ingin mencetak data yang ada pada tabel saja dengan menampilkan data tersebut pada file berbeda kemudian mencetaknya dengan cara diatas.

2. Menggunakan FPDF

Cara kedua kita dapat memanfaatkan Library Class FPDF yang disedikan secara bebas. anda dapat mendownloadnya pada situs resminya disini. Seperti namanya, FPDF adalah sebuah library yang memungkinkan kita membuat sebuah file PDF. Ini tentu dapat menjadi sebuah jembatan bagi kita untuk membuat sebuah laporan. 

Cara Menggunakannya juga tidak terlalu sulit. 

1. Anda Perlu Mengincludkan Classnya kedalam file anda 
require('fpdf.php');

2. Membuat Sebuah Objek 
$pdf = new FPDF();

3. Menggunakan Objek tersebut untuk menggunakan utilitas yang ada didalam class fpdf ini.
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(40,10,'Hello World!');
$pdf->Output();

lebih lanjut tentang cara menggunakan Library ini sudah ada didalam dukomentasi demo/tutorial jika anda mendownload dari situs resminya. Selamat Mencoba. Happy Coding :)

Backup Database MySQL dengan PHP

Adanya Fasilitas Seperti Backup Data Pada Aplikasi yang kita bangun memang sangatlah penting untuk mengantisipasi adanya kerusakan data atau yang akrab disebut corrupt mengingat rentannya aksi hacking pada aplikasi yang berbasis website. File Backup inilah yang berfungsi sebagai cadangan Data jika terjadi hal-hal yang tidak diinginkan pada Database kita. 

Untuk membuat proses backup data, umumnya dilakukan dengan menggunakan utilitas mysqdump. Hal ini memang sah-sah saja dilakukan tapi sepertinya teknik seperti ini lebih cocok diterapkan pada aplikasi berbasis desktop karena akan menjadi masalah tersendiri jika website telah ditanam pada server hosting. 

Langkah Membuat Proses Backup Database dengan PHP

1. Buat sebuah file PHP yang berisi form input button yang akan kita gunakan untuk melakukan proses backup contoh code yang saya gunakan adalah sebagai berikut. simpan dengan nama index.php
<div class="container">
<form action="" method="post" name="postform" enctype="multipart/form-data" >
 <div class="asd">
  <label for="backup">Backup database</label>
  <input type="submit" name="backup" value="Proses Backup" />
 </div>
</form>

2. Buat sebuah aksi yang akan menangani jika button Backup di klik. saya menggunakan code PHP seperti berikut ini. anda dapat menyesuaikan attribut koneksi serta database pada code tersebut sesuai dengan database anda
<?php 
$database = 'Backup';
$file   = $database.'_'.date("DdMY").'_'.time().'.sql';
//Backup database
if(isset($_POST['backup'])){
    // Backup Semua Tabel
 backup("localhost","user_database","pass_database","nama_database",$file,"*");
 // Backup Hanya Tabel Tertentu
 //backup("localhost","user_database","pass_database","nama_database",$file,"tabel1,tabel2,tabel3");
 echo 'Backup database telah selesai <a style="cursor:pointer" href="?nama_file='.$file.'" title="Download">Download file database</a>';
 echo "<pre>";
 echo "</pre>";
}
else
{
 unset($_POST['backup']);
}
?>

3. Buat Sebuah Fungsi Backup pada file terspisah contoh source codenya dapat anda lihat disini. Copy dan simpan satu folder dengan projek anda dengan nama backup.php

4. Include-kan File backup.php pada file index.php include "backup.php";

5. Hasil yang saya peroleh seperti gambar berikut ini. Jika Proses berhasil, hasil backup akan berada didalam folder projek php anda yang ada di htdocs. 

Backup Database MySQL dengan PHP

Agar Aplikasi menjadi lebih user friendly, kita perlu menambahkan code untuk mendownload file tersebut di file index.php. saya menggunakan listing code yang ada pada link ini. Selamat Mencoba dan Happy Coding.

Restore Database MySQL dengan PHP

Setelah Membuat proses Backup, Perlu kirannya kita menambahkan utilitas agar aplikasi kita mampu melakukan Restore File Hasil Backup Database tujuannya tentu agar lebih memudahkan end user dan menjadikan aplikasi menjadi lebih user friendly. Jika anda belum mengetahui cara melakukan backup data dengan php anda dapat melihatnya disini. Perlu diketahui bahwa proses Restore ini hanya mampu merestore file *.sql. 

Langkah Membuat Proses Restore Database dengan PHP 

1. Buat sebuah file dengan nama restore.php yang berisi code form input html seperti berikut ini
<form action="" method="post" name="postform" enctype="multipart/form-data" >
 <div class="asd">
  <label for="backup">File Backup Database (*.sql)</label>
  <input type="file" name="datafile" size="30" id="gambar" />
  <input type="submit" name="restore" value="Restore Database" />
 </div>
</form> 

2. Tambahkan code php yang akan menangani proses penekanan Button Restore Database. Saya menggunakan code berikut
// Restore database
if(isset($_POST['restore'])){
 restore($_FILES['datafile']);
 echo "<pre>";
 echo "</pre>";
 }
 else
 {
 unset($_POST['restore']);
 }

3. Buat sebuah file dengan nama proses_restore.php kemudian copy dan letakan code yang ada pada link ini pada file tersebut. Sesuaikan Database serta attribut untuk melakukan koneksi pada code tersebut.

4. Include-kan file proses_restore.php kedalam file restore.php include "proses_restore.php";


Restore Database MySQL dengan PHP
Jika tidak ada masalah, akan mucul pesan "Berhasil Restore Database Silahkan Cek". Untuk menguji proses restore ini anda dapat menghapus beberapa data pada tabel database anda terlebih dahulu. jika proses restore berhasil maka Data yang telah anda hapus otomatis akan kembali lagi. Selamat mecoba. Happy coding :)

Cara Menggunakan Twitter Bootstrap

Bootstrap atau yang akrab juga disebut Twitter Bootstrap adalah salah satu Framework CSS yang banyak digunakan oleh Web Developer untuk memudahkan proses Desain. Saat artikel ini ditulis, Bootstrap telah merilis versi ke 3 dengan penambahan beberapa fitur seperti support tampilan mobile serta fitur untuk membuat tampilan website menjadi lebih responsive. 

Bootstrap sendiri dikembangkan oleh orang-orang Twitter sejak tahun 2010 yang lalu. Untuk menggunakan Bootstrap sebenarnya bisa dikatakan gampang-gampang susah oleh karenanya saya tertarik untuk membuat postingan ini. Jika kita melihat struktur utama Bootstrap, ada 3 folder disana, yaitu CSS, Fonts dan JS seperti gambar berikut. Jika anda bingung mendownload masternya sudah saya siapkan disini.

Cara Menggunakan Twitter Bootstrap
Langkah Menggunakan Bootstrap

1. Copy ketiga folder tersebut kedalam folder projek anda 

2. Buat Sebuah File dengan nama bootstrap.html sehingga struktut File pada folder projek anda menjadi seperti berikut

Cara Menggunakan Twitter Bootstrap
3. Edit dan Tambahkan tag-tag dasar HTML pada file bootstrap tersebut. Jangan lupa untuk menambahkan tag yang mendefinisikan HTML 5. Panggil juga file booststrap.css diantara tag head sehingga menjadi seperti berikut ini 
<!DOCTYPE HTML>
<html>
<head>
 <title>Menggunakan Boostrap</title>
 <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>

code anda disini

</body>
</html>

4. Setelah itu, anda hanya perlau memanggil class dan id yang sudah ada pada file bootstrap.css. suatu misal seperti berikut ini. letakan diantara tag body
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>

Cara Menggunakan Menu Dropdown Bootstrap

5. Untuk menggunakan menu Dropdown Bootstrap kita perlu memanggil dua buah file js berikut yang ada di folder js. Letakkan diantara tag head
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

6. Kemudian Tambahkan Code HTML yang ada pada link ini diantara tag body. Berikut adalah hasil yang saya dapatkan

Cara Menggunakan Twitter Bootstrap

Contoh Download File dengan PHP

Sebelumnya saya sudah membahas tentang cara melakukan upload file beserta proses loading atau progressnya dengan menggunakan PHP. Pada postingan ini saya ingin kembali berbagi tentang cara membuat link yang akan berfungsi untuk melakukan download file pada halaman website. 

Umumnya, kita juga dapat menggunakan sebuah link yang mengarah kepada file yang akan didownload maka secara otomatis browser akan mendownload file tersebut. namun sayangnya, teknik semacam ini kurang efektif untuk diterapkan karena pada beberapa kasus file seperti file pdf, browser seperti google chrome tidak akan melakukan proses download tapi malah menampilkan file tersebut.

oleh karena masalah tersebut diatas saya kira memang cukup penting untuk membuat sebuah script yang akan melakukan proses download secara mandiri untuk menanggulangi masalah tersebut. pada contoh ini saya mencoba membuat 3 buah link download untuk file gambar, pdf dan file exe seperti gambar berikut 

Contoh Download File dengan PHP

Saya menggunakan coding berikut pada contoh tersebut 
<?php
// Source Code Download File dengan PHP
if(isset($_GET['nama_file'])){
 $file = $back_dir.$_GET['nama_file'];
 
 if (file_exists($file))
 {
  header('Content-Description: File Transfer');
  header('Content-Type: application/octet-stream');
  header('Content-Disposition: attachment; filename='.basename($file));
  header('Content-Transfer-Encoding: binary');
  header('Expires: 0');
  header('Cache-Control: private');
  header('Pragma: private');
  header('Content-Length: ' . filesize($file));
  ob_clean();
  flush();
  readfile($file);
  exit;
 } 
 else 
 {
  echo "file {$_GET['nama_file']} sudah tidak ada.";
 }
}
?>

Gambar demo diatas akan mendownload sebuah file pdf dengan nama pdf. Source code lengkap penggunaannya dapat anda download disini. Happy coding :)
Cara Membuat Redirect Halaman Website

Cara Membuat Redirect Halaman Website

Redirect Halaman Website adalah Cara untuk mengalihkan sebuah Halaman menuju Halaman Lain Secara Otomatis artinya tanpa ada aksi apapun dari User. Cara ini biasanya digunakan dalam proses yang registrasi atau logout dari suatu halaman. Hal ini berbeda dengan Link karena link membutuhkan aksi klik dari User untuk menuju kesuatu halaman tertentu. Berikut adalah tiga cara yang biasa saya gunakan untuk melakukan redirect halaman website. 

1. Redirect dengan PHP
Cara ini cukup mudah karena kita hanya menggunakan sebuah fungsi header. adapun implementasinya adalah sebagai berikut :
<?php 
header("location:lokasi-dan-file.php");
?>
2. Redirect dengan Javascript
Cara ini cukup berbeda dengan PHP karena kita bisa melakukan set waktu berapa lama halaman akan dialihkan ke halaman lain (redirect). Adapun penerapannya adalah sebagai berikut :
<script type="text/javascript">
function red() {window.location.href = "http://google.com";}
setTimeout("red()",10000);
</script>

3. Redirect dengan HTML Meta Tag
Selain dengan dua cara diatas, sebenarnya dengan menggunakan tag HTML kita juga bisa melakukan redirect Halaman yaitu dengan tag Meta. adapun implementasinya adalah sebagai berikut. 
<meta http-equiv="REFRESH" content="10; url=http://canthafamily.blogspot.com"/>

Membatasi Jumlah Karekter dengan Javascript

Limit Karakter adalah sebuah teknik untuk membatasi jumlah karakter pada suatu inputan form. Biasanya teknik ini digunakan untuk melakukan Limit karakter pada Pesan SMS. Cara Seperti ini dapat kita buat dengan Client Side Scripting "Javascript" suatu misal untuk membatasi sebuah inputan karakter yang diketik pada form Textarea. Hal ini Banyak diterapkan pada Aplikasi SMS gateway berbasis Website. :)

Membatasi Jumlah Karekter Pada Textarea dengan Javascript
Langkah-Langkah Membuat Limit Karakter Pada Textarea  

1. Buat Sebuah Form yang berisi sebuah Input text dan Textarea. Source code yang saya gunakan adalah sebagai berikut :
<table>
<form id="limit_id" method="post" name="limit" >
<tr><td>Sisa <input name="maks" type="text" id="batas" size="1" value="148" readonly/> Char</td></tr>
<tr><td><textarea style="display:inline;font-size: 14pt;" name="pesan" wrap="off"rows="10" maxlength="148" cols="40"
onKeyDown="limit_karakter(document.limit.pesan,document.limit.maks,148,this)" 
onKeyUp="limit_karakter(document.limit.pesan,document.limit.maks,148,this)"></textarea>
<td></tr>
</form>
</table>

2. Selanjutnya Kita perlu membuat sebuah Fungsi di Javascript untuk mendeteksi adanya penekanan tombol keyboard pada form textarea. Disini kita memberikan jumlah maksimal karakter yang dapat diketik adalah 148 sehingga jika karakter limit maka karakter yang diketik tidak akan muncul. Berikut adalah Code Javascriptnya 
<script Language="JavaScript">
function limit_karakter(field,cntfield,maxlimit,f) {
var addition = 0;
 var newLines=f.value.match(/(rn|n|r)/g);
 if (newLines != null) {
 addition = newLines.length;
 }
 cntfield.value = (maxlimit - field.value.length) - addition;
}
</script>

Simpan dengan Ekstensi *.html lalu coba jalankan File Tersebut. Semoga Berhasil dan Happy Coding. :)
Membuat Back to Top Pada Halaman Web dengan CSS

Membuat Back to Top Pada Halaman Web dengan CSS

Saya Yakin anda sering menjumpai sebuah Fasilitas pada Halaman website yang memungkinkan kita kembali ke atas halaman. Pada Beberapa Website yang memiliki artikel yang cukup panjang khususnya akan memerlukan fasilitas Back to Top untuk memudahkan User guna menjelajahi halaman website tersebut. Dengan begitu, User hanya perlu sekali klik untuk kembali ke atas halaman website. 

Sebenarnya untuk membuat fasilitas Back to top pada halaman website tidaklah sulit karena hanya dengan CSS kita sudah bisa membuatnya. Disini saya berasumsi anda memiliki Sebuah Halaman Website yang memiliki artikel yang cukup panjang sehingga memungkinkan pengguna melakukan scroling halaman web anda ke bawah karena jika scroling tidak muncul pada browser, Back to Top ini tidak akan bisa bekerja dengan baik. Saya yakin anda paham maksud saya. :)

1. Buat Sebuah File CSS. Terserah mau dibuat file terpisah atau digabung dalam file HTML anda yang jelas isi file CSS tersebut adalah sebagai berikut
.toTop { border-bottom: solid 1px #a7ca63; margin: 25px 0 10px 0; }
.toTop a { float: right; margin-top: 8px; padding:10px; display:block; background-color:#ccc; text-decoration:none; margin-bottom:10px;}
2. Untuk Penggunaannya adalah sebagai berikut 
<div class='toTop'><a href='#'>Keatas</a></div>
Source code lengkap dapat anda Download disini. Selamat Mencoba. Happy Coding.

Membuat Jam Digital dengan Javascript dan CSS

Untuk dapat menampilkan informasi waktu pada halaman website, kita memerlukan Client Side Scripting seperti Javascript karena pada dasarnya, informasi waktu yang ditampilkan adalah sesuai dengan yang ada dikomputer yang menjalankan script tersebut. Jika script tersebut dijalankan dikomputer lokal maka informasi waktu yang ditampilkan sesuai dengan yang ada di komputer tersebut. 

Sebenarnya hanya dengan Javascript saja, kita sudah bisa menampilkan jam digital tapi untuk mempercantiknya kita memerlukan CSS. Disini saya akan berbagi trik Bagaimana Membuat Jam Digital dengan Javascript dan CSS.
Membuat Jam Digital dengan Javascript dan CSS
1. Buat Sebuah File HTML dengan nama jam.html Kemudian tambahkan code CSS yang isinya Sebagai Berikut
<style type="text/css">
#output{
font-size:200px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
margin-top:13%;
color:#666;
}
</style>

2. Tambahkan juga code Javascript yang isinya sebagai berikut
<script type="text/javascript">
    window.setTimeout("waktu()",1000);    
    function waktu() {     
    var tanggal = new Date();    
    setTimeout("waktu()",1000);    
    document.getElementById("output").innerHTML = tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();  
    }   
</script>

3. Agar Hasilnya Kelihatan, Tambahkan Code Berikut yang bertujuan untuk menampilkan hasil atau Outputnya 
<div id="output"></div>

Membuat Notifikasi Seperti Facebook dengan CSS

Membahas Web design memang gampang-gampang susah. Hal ini tergantung pandai-pandainya kita berimajinasi untuk membuat suatu interface yang user friendly. Karena hal ini sangat penting untuk memberikan kenyamanan serta memudahkan pengunjung untuk bereksporasi dalam website kita. 

Berikut saya ingin berbagi tentang cara membuat style notifikasi seperti yang ada di facebook dengan memanfaatkan CSS. Notifikasi seperti ini dapat kita gunakan pada halaman Administrator untuk memberitahukan Informasi semisal ada komentar terbaru dari pengunjung. 

Langkah Membuat Style Notifikasi Seperti Facebook

1. Buat Sebuah File HTML dengan nama notif.html kemudian tambahkan code css seperti berikut ini
<style type="text/css">
  /*Style Notifikasi*/
  .bubble
  {
    background: #e02424;    
    margin-left:7px;
    right: 5px;
    top: -5px;
    padding: 2px 6px;
    color: #fff;
    font: bold .9em Tahoma, Arial, Helvetica;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
  }
  /*Membuat Menu*/
  .menu ul{
  margin:0;
  padding:0;
  }
  .menu li{
  list-style:none;
  color:#FFF;
  float:left;
  display:inline;
  position:relative;
  }
  .menu li a{
  display:block;
  background:0;
  color:#000;
  text-decoration:none;
  font:bold 14px Arial;
  outline:none;
  padding:7px 30px;
  }
  .menu li a:hover{
  background:#2a2a2a;
  color:#FFF;
  }

2. Langkah Kedua adalah menambahkan Tag List untuk menu yang akan kita tampilkan beserta Notifikasinya. Potongan Codenya adalah sebagai berikut
<div class="menu">
  <ul>
  <li><a href="#">Pertemanan<span class="bubble" id="jumlah_konfirmasi">10</span></a></li>
  <li><a href="#">Notifikasi<span class="bubble" id="jumlah_pesanan">1</span></a></li>
  </ul>
  </div>
Membuat Style Notifikasi Seperti Facebook dengan CSS
Simpan dan jalankan file tersebut untuk melihat hasilnya. Sayangnya. Ini Hanya Sebatas Style karena tidak terhubung dengan Database. Tentang Bagaimana menghubungkannya dengan database akan saya bahas pada postingan berikutnya. Stay Tune dan Happy Coding. :)

Membuat Form Login Popup dengan CSS dan Javascript

Utilitas Popup semacam gambar diatas akan sangat bermanfaat untuk menghemat halaman yang akan ditampilkan pada sebuah website. Biasanya popup seperti itu disebut dengan istilah modal. jika anda menggunakan framework CSS seperti Bootstrap hal ini dapat dengan mudah anda buat karena dalam Bootstrap modal tersebut telah tersedia jadi tinggal dipanggil saja. Bagaimana jika tidak menggunakan Bootstrap ? Berikut saya berikan triknya. 

Untuk membuatnya kita memerlukan Library JQuery dan CSS. Jadi Silahkan Download File Javascript dan Library JQuery disini.
Membuat Form Login Popup dengan CSS dan Javascript
1. Buat Sebuah Folder yang akan menampung File-File Projek anda nantinya. Letakkan File Javascript yang telah anda download kedalam folder tersebut.

2. Buat Sebuah File CSS dengan nama style.css sedangkan isinya dapat anda lihat disini

3. Buat Sebuah File dengan nama index.html Lalu panggil File Javascript dan CSS yang telah anda buat dalam file tersebut. Source code lengkap untuk file index.html adalah sebagai berikut
<link href="css.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="login.js"></script>

<a href="#login-box" title="Login" class="login-window">Form Login</a>

   <!--Login Start-->
     <div id="login-box" class="login-popup">
        <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Tutup" alt="Close" /></a>
          <form method="post" class="signin" action="action/login.php">
                <fieldset class="textbox">
             <label class="username">
                <span>Username</span>
                <input id="username" name="username" value="" type="text" placeholder="Username" required/>
                </label>
                <label class="password">
                <span>Password</span>
                <input id="password" name="password" value="" type="password" placeholder="Password" required/>
                </label>
                <center><button class="button gray medium" type="submit" name="login">Login</button><button class="button gray medium" type="reset">Hapus</button></center>
                </fieldset>
          </form>
  </div>
  <!--Login End-->

Simpan File Index.html tersebut kemudian coba jalankan. Jika tidak ada kesalahan hasilnya seperti gambar diatas. Selamat mencoba dan Happy Coding. :)
Mencegah SQL Injection Pada Halaman Website

Mencegah SQL Injection Pada Halaman Website

Keamanan Sistem Informasi menjadi sangat penting mengingat rentannya serangan-serangan yang terjadi pada sejumlah halaman website. sebut saja situs presiden SBY yang beberapa tahun yang lalu berhasil di hack, situs KPU yang berhasil dilumpuhkan hanya dengan teknik SQL Injection oleh karena kita yang berprofesi sebagai website programming harus sedari dini mangantisipasi masalah ini.

Serangan-serangan yang umum diluncurkan pada aplikasi website tidak jauh dari variasi SQL Injection. Teknik SQL Injection sendiri adalah sebuah metode serangan pada halaman website yang memanfaatkan inputan-inputan yang tidak difilter dengan baik sehingga memungkinkan seorang attacker untuk memasukan perintah query secara illegal. suatu misal seperti URL website seperti berikut

htpp://www.target.com/?halaman=artikel&id=10

Pada URL diatas kita sudah bisa membaca bahwa user yang mengakses URL tersebut sedang melihat isi dari tabel artikel dengan id=10. Untuk mengujinya kita dapat menambahkan tanda petik diakhir angka 10 menjadi 10' atau menambahkan tanda minus -10 dan jika anda mendapati halaman website tersebut error maka bisa dipastikan website tersebut VULN terhadap serangan SQLI. Contoh script yang menjalankan URL diatas adalah sebagai berikut

<title>ISI Tabel Artikel Berdasarkan ID</title>

<?php  
 include "koneksi.php";
 // Ambil id dari URL
 $id=$_GET['id'];

 // Tampilkan Artikel
 $display = mysql_query("SELECT * FROM artikel where id = '$id'");
 while ($data=mysql_fetch_array($display)){ 
 $tampil = $data['isi'];
 echo "<table><tr>";
 echo '<td>'.$tampil.'</td>';
 echo "</tr><table>";
 }
?>

Pada source code diatas terlihat jelas bahwa ID dari URL diambil apa adanya maka jelas saja akan terjadi error jika user misalkan sedikit usil mengganti ID dengan karakter aneh seperti yang saya jelaskan diatas.

Solusi yang saya gunakan untuk serangan SQL Injection seperti diatas adalah dengan menambahkan fungsi untuk memfilter inputan yang diambil dari URL yaitu mysql_escape_string sehingga jika diterapkan pada script diatas kurang lebih hasilnya akan seperti berikut
<title>ISI Tabel Artikel Berdasarkan ID</title>

<?php  
 include "koneksi.php";
 // Ambil id dari URL
 $id=mysql_escape_string($_GET['id']);

 // Tampilkan Artikel
 $display = mysql_query("SELECT * FROM artikel where id = '$id'");
 while ($data=mysql_fetch_array($display)){ 
 $tampil = $data['isi'];
 echo "<table><tr>";
 echo '<td>'.$tampil.'</td>';
 echo "</tr><table>";
 }
?>

Selain dengan cara diatas sebenarnya anda juga bisa membuat fungsi sendiri untuk melakukan filter inputan semisal dengan menggunakan teknik Regular Expresi dan semacamnya. 
Mencegah XSS Attack Pada Halaman Website

Mencegah XSS Attack Pada Halaman Website

Sebagai seorang yang berprofesi di dunia website programming, hal-hal yang berhubungan dengan keamanan website tentu harus kita utamakan mengingat semakin banyaknya tutorial dan tools tools yang dapat digunakan oleh seorang pemula sekalipun dalam mengeksploitasi halaman website yang ada. Hal ini menjadi tantangan tersendiri utamanya bagi saya pribadi. hehe

ada berbagai macam teknik serangan yang kerap digunakan hacker dalam mengeksploitasi halaman website salah satunya dengan menggunakan teknik XSS Attack. Dalam implementasinya teknik ini cukup variatif namun biasanya seorang hacker akan menguji kerentanan websie pada teknik ini dengan memanfaatkan halaman inputan form dengan menginputkan karakter yang tidak biasa seperti tag tag html atau redirect link. suatu misal jika saya memiliki sebuah source code form komentar seperti berikut.
<form method="post">
<input type="text" name="nama" placeholder="Nama Kamu"/><br/>
<input type="text" name="email" placeholder="Email Kamu"/><br/>
<textarea name="komentar" cols="20" rows="5" placeholder="Komentar Kamu">
</textarea><br/>
<input type="submit" name="kirim" value="Kirim"/><br/>
</form>

<?php 
 // Jika Kirim ditekan
 if (isset($_POST['kirim'])){
 // aksi simpan ke database
 echo $_POST['nama']."<br/>";
 echo $_POST['email']."<br/>";
 echo $_POST['komentar']."<br/>";
 }
?>
Jika user menginputkan dengan inputan yang standar (artinya hanya huruf dan angka bukan karakter aneh atau tag html) maka hal ini tidak akan ada masalah. tapi coba inputkan tag html seperti berikut.
<script>
alert('test xss');
</script>
tentu hal ini akan menjadi sebuah masalah tersendiri karena hacker dapat memanfaatkan celah ini untuk mengeksploitasi website kita lebih lanjut semisal mencuri cookie atau menginputkan redirect link. lalu bagaimana solusinya ? seperti biasa kita perlu memfilter alisa menyaring inputan yang kita miliki dengan fungsi-fungsi yang ada semisal dengan htmlentities() atau htmlspecialchar() sehingga jika dimodifikasi source code diatas akan menjadi seperti berikut
<form method="post">
<input type="text" name="nama" placeholder="Nama Kamu"/><br/>
<input type="text" name="email" placeholder="Email Kamu"/><br/>
<textarea name="komentar" cols="20" rows="5" placeholder="Komentar Kamu">
</textarea><br/>
<input type="submit" name="kirim" value="Kirim"/><br/>
</form>

<?php 
 // Jika Kirim ditekan
 if (isset($_POST['kirim'])){
 // aksi simpan ke database
 echo htmlentities($_POST['nama'])."<br/>";
 echo htmlentities($_POST['email'])."<br/>";
 echo htmlentities($_POST['komentar'])."<br/>";
 }

?>
Coba Jalankan dan Lihat perbedaannya. :)
Menampilkan Nilai Array kedalam Tabel dengan PHP

Menampilkan Nilai Array kedalam Tabel dengan PHP

Jika diilustrasikan, Array itu mirip seperi sebuah tabel. Array memiliki dimensi-dimensi layaknya sebuah tabel database. Suatu misal array 1 dimensi dapat kita ibaratkan seperti Tabel dengan sebuah field didalamnya. Array 2 dimensi adalah tabel dengan dua buah field begitu seterusnya. dari ilustrasi tadi tentu kita sudah memiliki bayangan tentang bagaimana menampilkan nilai array kedalam sebuah tabel dengan php.

Jawabannya adalah dengan menggunakan perulangan sebanyak jumlah record yang ada didalam array tersebut. disini saya akan contohkan bagaimana menampilkan nilai array dengan perulangan foreach kedalam sebuah tabel. Suatu misal kita memiliki sebuah array 1 dimensi seperti berikut
<?php 
$data=array('satu','dua','tiga','empat','lima');
?>
Maka untuk menampilkan nilai array tersebut kedalam tabel codingnya adalah sebagai berikut
<?php 
$data=array('satu','dua','tiga','empat','lima');
 echo "<table border='1'>";
 echo "<tr><td>Nilai Array</td></tr>";
 foreach($data as $hasil){
 echo "<tr><td>$hasil</td></tr>";
 }
 echo "</table>";
?>
Sebuah contoh lagi dengan Array 2 Dimensi seperti berikut ini dengan nilai pertama adalah nama dan yang kedua adalah umur.
<?php
// Array Nama dan Umur
$umur=array("Nila"=>"35","Budi"=>"37","Hamid"=>"43");
Untuk menampilkannya kedalam tabel disini saya masih menggunakan perulangan foreach dengan script seperti berikut ini.
<?php
// Array Nama dan Umur
$umur=array("Nila"=>"35","Budi"=>"37","Hamid"=>"43");
 echo "<table border='1'>";
 echo "<tr><td>Nama</td><td>Umur</td></tr>";
foreach($umur as $nama=>$umur){
  echo "<tr><td>$nama</td><td>$umur</td></tr>";
  }
  echo "</table>";
?>
Download Tutorial PHP Untuk Pemula

Download Tutorial PHP Untuk Pemula

PHP adalah singkatan dari Hypertext Processor yang merupakan salah satu bahasa server side scripting. PHP sendiri merupakan perangkat lunak yang bersandar dibawah PHP Lisensi. PHP bisa dijalankan dihampir semua server website ataupun dengan cara shell mandiri atau yang akrab juga disebut PHP CLI (Command Line Interface).

Awalnya PHP dibuat oleh Rasmud Lerdorf pada tahun 1995 dan mengacu pada singkatan Personal Home Page yang selanjutnya dikembangkan oleh komunitas PHP dan bersifat kode sumber terbuka (Open Source) yang artinya bebas digunakan dan dikembangkan.

PHP adalah bahasa script yang disisipkan atau ditanamkan didalam tag html kemudian web serverlah yang bertugas menterjemah script tersebut hingga dapat ditampilkan dan dinikmati oleh user. selain itu PHP juga dapat ditulis murni (tanpa tag html).

Rasmus mengeluarkan Personal Home Page Tools versi 1 secara gratis pada tahun 1995 (umur saya baru 5 tahun.. haha). Isinya adalah sekumpulan script perl yang dapat menjadikan website menjadi dinamis. Kemudian pada tahun 1996 PHP versi 2 yang dikeluarkannya dan telah mampu mengakses database. lalu pada tanggal 1 Juni 1998 Rasmus merilis PHP versi 3 bersama Timnya. dan pada tanggal 22 Mei 2000 dirilis PHP 4 yang didukung oleh Zend Engines 1.0.

PHP5 dirilis pada tahun 2004 dan memiliki beberapa fitur seperti Object Oriented Programming alias pemrograman berorietasi objek serta PHP Data Objek.

Itulah sedikit pengatar dari saya tentang PHP dan berikut saya sharing Tutorial PHP untuk pemula (benar-benar pemula) yang ditulias oleh Tim PHP Indonesia. Tutorial PHP ini dibagikan secara gratis yang dapat anda download disini. Selamat belajar PHP. :) 

Download Tutorial PHP dan Ajax Untuk Pemula

AJAX merupakan singkatan dari Asynchronous JavaScript and XML. Jangan kaget! karena Ajax bukan bahasa pemrograman baru. AJAX terdiri dari beberapa element seperti JavaScript, HTML, DHTML dan DOM yang selanjutnya digabungkan dengan bahasa pemrograman disisi server semisal ASP dan PHP sehingga terbentuklah sebuah aplikasi website yang dinamis dan interaktif.

AJAX memungkinkan Javascript berkomunikasi dengan Script server side dengan menggunakan objek XMLHttpRequest (Komunikasi antara client side scripting dan server side scripting) sehingga ajax mampu melakukan proses dari PHP tanpa harus mereload halaman website alias refresh. Maka bisa dipastikan aplikasi yang dibangun dengan ajax menjadi lebih ringan karena untuk pemrosesan (semisal input, update dan delete data) tidak harus menunggu respon dari server terlebih dahulu (Asynchronous). Objek XMLHttpRequest lah yang bertanggung jawab mengurus itu. mantap bukan ? :)

Untuk menggunakan AJAX terlebih dahulu kita harus mendefinisikan sebuah objek dari XMLHttpRequest contohnya seperti script berikut
<script language="javascript" type="text/javascript"> 
var xmlHttp = new XMLHttpRequest(); 
</script>
Objek tersebutlah yang akan berkomunikasi dengan script server side (PHP). Berikut adalah contoh gambar cara kerja AJAX.
Download Tutorial PHP dan Ajax Untuk Pemula

Tunggu apalagi gan. yuk belajar ajax bareng-bareng. Tutorial tentang PHP dan Ajax dapat anda download disini. Selamat belajar. :)
Download Tutorial Codeigniter Untuk Pemula

Download Tutorial Codeigniter Untuk Pemula

Framework merupakan sekumpulan class, fungsi dan aturan-aturan. Hal ini berbeda dengan library yang biasanya hanya untuk tujuan tertentu saja. Framework sifatnya menyeluruh. Mengatur bagaimana kita membangun sebuah aplikasi agar lebih cepat karena kita hanya akan difokuskan pada logika dari penyelesaian masalah sedangkan hal-hal yang berhubungan dengan form validasi, koneksi database umumnya telah disediakan oleh framework.

Saat ini ada banyak framework PHP yang dapat kita gunakan dalam membangun aplikasi (berbasis website) semisal Codeigniter, Laravel, Symfony CakePHP, YII dan masih banyak yang lain. Framework umumnya menggunakan metode pemrograman berorientasi objek sehingga pengetahuan tentang pemrograman objek haruslah kita ketahui sebelum mempelajari framework.

Biasanya framework menggunakan metode pengembangan aplikasi dengan memisah antara View (Tampilan), Logika (Controller), dan Model (hal-hal yang berhubungan dengan database) disebut juga dengan metode MVC. Hal ini membuat pengembangan aplikasi menjadi lebih mudah dan terstruktur. konsep seperti ini juga kerap digunakan dalam team work (kerja tim) sehingga masing-masing job menjadi jelas : Desainer web cukup mengurusi View, Programmer Web berurusan dengan Controller dan database administrator akan bertanggung jawab atas Model.

Sebagai seorang web developer, kita dianalogikan sebagai seorang tukang bangunan dan framework adalah bahan materialnya. Jadi kita tidak perlu report mencari material yang diperlukan karena framework sudah menyediakan semuanya. tugas kita hanya mengimplementasikan saja.

Salah satu framework yang cukup terkenal dan menerapkan metode MVC adalah Codeigniter. Codiegniter dikembangkan oleh tim EllisLab yang dimotori oleh Rick Ellis. Framework ini tergolong cukup mudah untuk digunakan bila dibangingkan dengan yang lain seperti symfony atau Zend Framework. Buat anda yang ingin mempelajari Codeigniter atau yang akrab juga disebut CI, anda dapat mendownloadnya tutorialnya disini
Mengurutkan, Mentotal dan Menampilkan Data dengan PHP

Mengurutkan, Mentotal dan Menampilkan Data dengan PHP

Seringkali dalam membangun sebuah website dengan menggunakan bahasa pemrograman apapun (termasuk PHP) kita akan dihadapkan dengan proses pengolahan data. Itu pasti!. Proses pengolahan data yang saya maksud tersebut termasuk  mengurutkan, menjumlahkan, menampilkan output dan lain sebagainya.

Pada postingan ini kita akan belajar bagaimana mengurutkan data pada sebuah array berdasarkan parameter tertentu seperti dari angka paling awal, angka paling akhir atau dari huruf pertama/terakhir kemudian mentotal jumlah data tersebut lalu menampilkannya pada halaman website. suatu misal disini kita memiliki sebuah array sebagai berikut
<?php
 $nomor=array(4,6,2,22,11);
 ?>

Mengurutkan, Mentotal dan Menampilkan Data

Pertama kita akan coba Mengurutkan data dari angka paling bawah sehingga urutannya menjadi 2,4,6,11,22 adalah dengan menggunakan fungsi asort() maka source code phpnya adalah sebagai berikut
<?php
 $nomor=array(4,6,2,22,11);
 asort($nomor);
 foreach($nomor as $data){
 echo $data;
    echo "<br/>";
 }
?>
sedangkah source code untuk mengurutkan data berdasarkan berdasarkan angka paling tinggi sehingga menjadi 22,11,6,4,2 adalah dengan menggunakan fungsi arsort() sebagai berikut
<?php
 $nomor=array(4,6,2,22,11);
 arsort($nomor);
 foreach($nomor as $data){
 echo $data;
    echo "<br/>";
 }
?>
Kemudian yang terakhir adalah menampilkan jumlah data yang ada pada array tersebut. Hal ini dapat kita lakukan dengan menggungakan fungsi count() seperti script dibawah ini
<?php
 $nomor=array(4,6,2,22,11);
 asort($nomor);
 foreach($nomor as $data){
 echo $data;
    echo "<br/>";
 }
 echo "Jumlah Data = ".count($nomor);
?>
Cara ini dapat juga anda coba untuk data dengan nilai array huruf (bukan angka). Silahkan dicoba. Happy Coding :)

Penggunaan Login dan Logout dengan Session PHP

Konsep login dan logout ini sebenarnya dan biasanya menggunakan dua metode yaitu dengan memanfaatkan cookie dan yang kedua dengan memanfaatkan session. Pada kesempatan ini saya akan coba bahas tentang bagaimana cara membuat proses login dan logout dengan memanfaatkan session di PHP. Sebelum kita mulai, ada beberapa hal yang mungkin perlu kita ketahui terkait dengan masalah login dengan session ini sebagai berikut

1. Biasanya proses login ini akan melibatkan minimal dua buah halaman website yaitu halaman login dan halaman Administrator website (halaman yang dituju setelah login). Jadi pastikan anda sudah membuat halaman tersebut.

2. Pada implementasinya, Penerapan metode ini tidak harus menggunakan Database, tapi pada contoh ini saya akan bahas dengan menggunakan database. Jadi pastikan anda sudah membuat sebuah database dan minimal memiliki sebuah tabel (tabel user)

3. Untuk keamanan, biasanya proses login akan dilengkapi dengan metode hashing (md5 atau sha1)

Contoh Login dan Logout dengan Session PHP

1. Pertama, Kita mulai dari database. berikut adalah contoh tabel yang saya gunakan jika dilihat dari phpmyadmin

Login dan Logout dengan Session PHP

2. Sebagai contoh, disini saya inputkan sebuah data user pada tabel tersebut dengan penerapan hashing pada password dengan sha1.

Login dan Logout dengan Session PHP

3. Seperti biasa, langkah berikutnya adalah melakukan koneksi ke Database yang telah kita buat sebelumnya dengan contoh script sebagai berikut
<?php 
 // Script Koneksi
 mysql_connect("localhost","root","");
 // Memilih Database
 mysql_select_db("login_logout");
?>
4. Selanjutnya Membuat Halaman Login yang akan digunakan oleh user untuk melakukan proses authentikasi (login) dengan contoh script sebagai berikut
<!DOCTYPE html>
<html>
 <head>
  <title>Contoh Login dan Logout dengan SESSION PHP</title>
 </head>
 
 <body>
 <form method="POST" action="">
 <table class="table">
  <tr>
   <td>Username</td><td><input type="text" name="user" required /></td>
  </tr>
  <tr>
   <td>Password</td><td><input type="password" name="pass" required /></td>
  </tr>
  <tr>
   <td colspan="3">
   <center>
   <input type="submit" value="Login" name="login"/> 
   <input type="reset" value="Hapus"/>
   </center>
   </td>
  </tr>
 </table>
 </form>
 </body>
</html>

5. Berikutnya adalah membuat sebuah proses login, Proses login ini akan kita letakan didalam script halaman login yang telah kita buat sebelumnya atau bisa juga disisipkan dengan metode include. Letakan script berikut tepat sebelum tag penutup </body>
<?php 
 session_start();
 // Sisipkan File Koneksi
 include "koneksi.php";
 // Jika Login
 if (isset($_POST['login'])){
 $user=$_POST['user'];
 // Hashing Password dengan Sha1
 $pass=sha1($_POST['pass']);
 // Mencari User yang cocok yang ada di tabel database
 $cek_user = mysql_query("SELECT * FROM user WHERE username = '$user' AND password = '$pass'");
 if (mysql_num_rows($cek_user)==1){
  $hasil = mysql_fetch_array($cek_user);
  // Simpan Session USER
        $_SESSION['user'] = $hasil['username'];;
  // Arahkan ke Halaman Admin
  header("location:admin/index.php");
  } else{
  echo "<center>ops, username atau password salah!</center>";
 }
 }
?>

6. Buat sebuah folder didalam folder projek anda dengan nama admin lalu buat sebuah file dalam folder tersebut dengan nama index.php. contoh script file sebagai berikut
<?php 
 session_start();
 // Cek Login Apakah Sudah Login atau Belum
 if (!isset($_SESSION['user'])){
  // Jika Tidak Arahkan Kembali ke Halaman Login
  header("location:../");
  } else {
?>
<!DOCTYPE HTML>
<html lang="en">
  <head>
  <title></title>
  </head>

 <body>
 Selamat Datang <?php echo $_SESSION['user']; ?> <b><a href="logout.php">Logout</a></b>
 </body>
</html>
<?php 
}
?>
7. Langkah Terakhir, Buat Sebuah File logout.php yang akan menghandel jika tombol logout diklik dengan contoh script sebagai berikut. letakan didalam folder admin
<?php 
/* Proses Logout :
   Hapus Session User Lalu Arahkan ke Halaman Login
*/
session_start();
session_destroy();
header("location:../");
?>
Silahkan coba dijalankan. Selain itu anda dapat coba mengakses langsung ke halaman admin (tanpa proses login) melalui address bar browser. maka akan langsung dialihkan ke halaman login. Happy Coding. :)