Blog Nur Akhwan

Membuat Skrip Login Mirip C-Panel dengan jQuery

Assalamu'alaikum warah matullohi wabarakatuh.. Pemiasah... eeee.. pemiarsa.. Selamat pagi.. Ane posting lagi, gan. Iya, mumpung koneksi internet lagi lancar jaya. Barusan aje, ane nonton streaming Real Soledad vs Manchester United, gak ada putus2nya (cuma babak 2, n kualitas kayak TV gak ada antenanya, jiakakaka). Lumayan lah, imbang, MU tetep puncak klasemen (belum liat update resminya dari Geol.Com). Selamat buat bang Felaini, buat kartu merah pertamanya,, haha. Sungguh sangat disayangkan, padahal maenya bagus, banyak melakukan interseption-isasi. Terus penalti van Persie yang kurang halal (lagi2 diving Young, hehe), dan van Persie pun "sengaja" gak di-gol-in, (fairplay, bro.. - fairplay kebetulan). Pergantian 2 straiker sekaligus (ronney - chicharito) dgn van persie - young, yang tidak pas menurut ane, seharusnya salah satu saja, entah ronney ato chicharito yg digantiin van persie, nah giggs baru di gantiin young (seharusnya juga bukan young, Januzaj ato sapalah).. heehehe..

Waduh, kebablasan, ane gan.. sambutan ketua panitianya beda ama judul acaranya. Iya ane mau posting itu gan, skrip login ala cPanel hosting, dengan memanfaatkan jQuery. Sebenarnya itu tulisan kemarin, pas libur, nah baru ditulis di-word, ane transfer ke blog pagi ini. Jadi nanti loginnya gak perlu refresh halaman, langsung jika login gagal ada notifikasi tanpa refresh halaman. Sengaja tampilan-nya ane ambilin persis sama cPanel, mohon jangan digugat karena melanggar hak cipta yak.. Langsung ke tekape, gan..

1. Langkah pertama adalah membuat database beserta tabel adminnya. Buat database baru lewat http://localhost/phpmyadmin/ dengan nama : “db_login”

Buat tabel “admin”, dengan copy paste skrip di bawah ini di tab “SQL” :

CREATE TABLE `admin` ( `id` int(2) NOT NULL auto_increment, `username` varchar(20) NOT NULL, `password` varchar(100) NOT NULL, `nama` varchar(100) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
-- -- Dumping data for table `admin`--
INSERT INTO `admin` (`id`, `username`, `password`, `nama`) VALUES (1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'Nur Akhwan');

2. Buat halaman index.php, yang merupakan halaman login ke sistem. Skripnya minimal adalah sebagai berikut, agar mirip cPanel :

<!DOCTYPE html>
<html dir="ltr">
<head>
<title>cPanel Login</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img class="background-image" src="img/login-whisp.png">
<div id="login-wrapper">
<div id="notify">
<noscript>
<div class="error-notice">
<span class="login-status-icon"></span>
<div id="login-status-message">Javascript browser Anda sedang di-nonaktifkan. Aktifkan fitur Javascript Anda..!</div>
</div>
</noscript>
<div id="notifikasi"></div>
</div>
<div id="content-container">
<div id="login-container">
<div id="login-sub-container">
<div id="login-sub-header">
<img src="img/cpanel-logo.png" alt="logo" />
</div>
<div id="login-sub">
<div id="forms">
<form id="login_form" action="#" method="post">
<div class="input-req-login"><label for="user">Username</label></div>
<div class="input-field-login icon username-container">
<input name="user" id="user" autofocus="autofocus" value="" placeholder="Enter your username." class="std_textbox" type="text" tabindex="1" required>
</div>
<div style="margin-top:30px;" class="input-req-login"><label for="pass">Password</label></div>
<div class="input-field-login icon password-container">
<input name="pass" id="pass" placeholder="Enter your account password." class="std_textbox" type="password" tabindex="2" required>
</div>
<div class="controls">
<div class="login-btn">
<button name="login" type="button" id="login_submit" tabindex="3">Log in</button>
</div>
</div>
<div class="clear" id="push"></div>
</form>

</div>

</div>

</div>

</div>
<div id="locale-footer">
<div class="locale-container">
<ul id="locales_list">
<li><a href="http://nur-akhwan.blogspot.com/">English</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">Deutsch</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">espanol</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">espanol de Espana</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">francais</a></li>
<li><a href="http://nur-akhwan.blogspot.com/">Nederlands</a></li>
<li><a href="http://nur-akhwan.blogspot.com/"> ...</a></li>
</ul>
</div>
</div>
</div>

</div>
<div class="copyright">Copyright © 2013 cPanel, Inc.</div>
</body>
</html>

Penjelasan : Itu merupakan skrip dasar untuk menampilkan halaman login, tanpa bisa melakukan action loginnya. Saya pikir tak perlu penjelasan lebih lanjut, karena merupakan skrip HTML dasar. Perlu diperhatikan pada script yang tercetak tebal, bahwa skrip tersebut harus ada, agar dapat dipergunakan sebagaimana mestinya.

3. Selanjutnya, agar dapat dipergunakan untuk login, dengan proses mirip cPanel, maka tambahkan skrip di bawah ini (letakkan pada di antara tag <head> </head>, yang penting di bawah skrip pemanggilan jQuery dan CSS)

<script type="text/javascript">
$(document).ready(function(){
$("#login_submit").click(function() {
$("#notifikasi").fadeIn("fast");
$("#notifikasi").html("<div id='login-status' class='success-notice'><span class='login-status-icon'></span> <div id='login-status-message'>Pengecekan ... </div></div>");
var user = $("#user").val();
var pass = $("#pass").val();
if (user == "" || pass == "") {
$("#notifikasi").html("<div id='login-status' class='error-notice'><span class='login-status-icon'></span><div id='login-status-message'>Username / password tidak boleh kosong ... </div></div>");
$("#user").focus();
$("#notifikasi").fadeOut(3000);
return false;
} else {
$.ajax({
url: "do_login.php",
data: "user=" + user + "&pass=" + pass,
cache: false,
success: function(msg){
$("#notifikasi").html(msg);
$("#notifikasi").fadeOut(3000);
$("#user").focus();
$("#user").val('');
$("#pass").val('');
}
});
return false;
}
}); });
</script>

Penjelasan :

$(document).ready(function(){

// berarti jika dokumen telah siap / diload semua

$("#login_submit").click(function() {

// jika tombol login (ditandai dengan id=”login_submit”), diklik

$("#notifikasi").fadeIn("fast");

// maka <div> dengan id=”notifikasi” akan ditampilkan dengan efek fadeIn

$("#notifikasi").html("<div id='login-status' class='success-notice'><span class='login-status-icon'></span> <div id='login-status-message'>Pengecekan ... </div></div>");

// isikan pada <div id=”notifikasi”> tulisan : Pengecekan ....

var user = $("#user").val();

// Ambil variabel “user” dari input text dengan id=”user”

var pass = $("#pass").val();

// Ambil variabel “pass” dari input text dengan id=”pass”

if (user == "" || pass == "") {

// Jika variabel “user” atau “pass” kosong / tidak berisi, maka

$("#notifikasi").html("<div id='login-status' class='error-notice'><span class='login-status-icon'></span><div id='login-status-message'>Username / password tidak boleh kosong ... </div></div>");

// Tampilkan pada <div id=”notifikasi”> tulisan “Username/password tidak boleh kosong...”

$("#user").focus();

// Buat focus pada input text dengan id=”user”

$("#notifikasi").fadeOut(3000);

// Sembunyikan <div id=”notifikasi”> dengan efek fadeOut, dengan kecepatan 3000ms (3 detik kalo gak salah, hehe)

return false;

// Menghalangi form agar tidak melakukan submit proses dengan reload halaman

} else {

// Jika variabel “user” dan “pass” telah diisi

$.ajax({

// Lakukan proses ajax

url: "do_login.php",

// URL action ajax, mirip dengan action = “do_login.php” pada tag <form>

data: "user=" + user + "&pass=" + pass,

// Data yang dikirimkan dengan metode $_GET, yaitu user dan pass

cache: false,

// Ini ane belum tahu untuk apa, gan. Ehhehe..

success: function(msg){

// Jika proses ajax sukses, maka lakukan keluarkan output dari skrip “do_login.php” berupa teks yg disimpan dalam variabel javascript “msg”

$("#notifikasi").html(msg);

// Tampilkan pada <div id=”notifikasi”> berisi variabel “msg” tadi

$("#notifikasi").fadeOut(3000);

// Sembunyikan <div id=”notifikasi”> dengan efek fadeOut

$("#user").focus();

// Focuskan kursor pada <input id=”user”>

$("#user").val('');

// Kosongkan isian <input id=”user”>

$("#pass").val('');

// Kosongkan isian <input id=”pass”>

}

});

return false;

// Menghalangi form agar tidak melakukan submit proses dengan reload halaman

}

});

4. Buatlah skrip “koneksi.php”, untuk koneksi ke database :

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "db_login";
mysql_connect($host, $user, $pass) or die (mysql_error());
mysql_select_db($db) or die (mysql_error());
?>

Penjelasan : cukup jelas

5. Kemudian buak skrip “do_login.php” sebagai aksi dari form di atas :

<?php
session_start();
include "koneksi.php";
$username = empty($_GET['user']) ? "" : $_GET['user'];
$password = empty($_GET['pass']) ? "" : md5($_GET['pass']);
$q_admin = mysql_query("SELECT * FROM admin WHERE username = '$username' AND password = '$password'");
$j_admin = mysql_num_rows($q_admin);
if ($j_admin == 1) {
$d_session_admin = mysql_fetch_array($q_admin);
$_SESSION['id_admin'] = $d_session_admin['id'];
$_SESSION['username'] = $d_session_admin['username'];
$_SESSION['nama'] = $d_session_admin['nama'];
$_SESSION['is_logged'] = TRUE;
echo "<div id='login-status' class='success-notice'><span class='login-status-icon'></span><div id='login-status-message'>Login berhasil ... </div></div>
<meta http-equiv='refresh' content='2; url=dashboard.php'>";
} else {
echo "<div id='login-status' class='error-notice'><span class='login-status-icon'></span><div id='login-status-message'>Maaf, username dan password salah ... </div></div>";
}
?>

Penjelasan :

session_start();

//Menandakan dimulainya halaman dengan menggunakan variable session

include "koneksi.php";

//Ambil file koneksi.php

$username = empty($_GET['user']) ? "" : $_GET['user'];

//Ambil variabel ”user”, dari metode $_GET, jika tidak ditemukan maka berisi kosong

//Ini ane baru tahu skrip if sederhana dengan penulisan seperti ini, gan, yang artinya :

// $data = jika $_GET[’user’] sama dengan kosong, maka variabel $data = kosong, //jika tidak berisi $_GET[’user’], untuk menghindari error pada PHP versi terbaru

$password = empty($_GET['pass']) ? "" : md5($_GET['pass']);

//Ambil variabel ”pass”, dari metode $_GET, dan digunakan fungsi enkripsi md5,

$q_admin = mysql_query("SELECT * FROM admin WHERE username = '$username' AND password = '$password'");

//Query ke database, untuk melakukan login, yang artinya ambil dari tabel admin, yang username = variabel $username dan password = $password

$j_admin = mysql_num_rows($q_admin);

//Mendapatkan jumlah baris hasil query

if ($j_admin == 1) {

//Jika jumlah baris hasil query sama dengan 1 (logikanya jika jumlah baris kurang dari 1 maka username tidak terdaftar, atau username dan password tidak cocok, dan jika lebih dari 1, dimungkinkan terjadi usernamenya doble dan passwordnya juga sama, ini bahaya, gan)

$d_session_admin = mysql_fetch_array($q_admin);

//Ambil data hasil query $q_admin, sebagai data yang didaftarkan sebagai isi variabel session sebagai berikut

$_SESSION['id_admin'] = $d_session_admin['id'];

//Isikan pada variabel session ”id_admin” dengan isi pada field ”id”

$_SESSION['username'] = $d_session_admin['username'];

//Isikan pada variabel session ”username” dengan isi pada field ”username”

$_SESSION['nama'] = $d_session_admin['nama'];

//Isikan pada variabel session ”nama” dengan isi pada field ”nama”

$_SESSION['is_logged'] = TRUE;

//Isikan pada variabel session ”is_logged” dengan isi Boolean TRUE,dengan maksud sebagai trigger pada halaman web hanya boleh dimasuki admin, hanya jika variable session “is_logged” sudah berisi TRUE

echo "<div id='login-status' class='success-notice'><span class='login-status-icon'></span><div id='login-status-message'>Login berhasil ... </div></div>

//Mengisikan output pada halaman web ”do_login” yang nantinya sebagai teks yang akan tampil di <div id=”notifikasi”> pada halaman ”index.php”

<meta http-equiv='refresh' content='2; url=dashboard.php'>";

//Otomatis refresh halaman ke halaman “dashboard.php” dalam waktu 2 detik

} else {

//Jika login gagal atau username dan password salah

echo "<div id='login-status' class='error-notice'><span class='login-status-icon'></span><div id='login-status-message'>Maaf, username dan password salah ... </div></div>";

}

5. Halaman “dashboard.php”. Halaman ini merupakan halaman administrator, yang telah melalui proses login di atas, dan hasilnya berhasil login (session “is_logged”-nya berisi TRUE). Berikut skripnya :

<?php
session_start();
$_page = isset($_GET['p']) ? $_GET['p'] : "";
if ($_page == "logout") {
session_destroy();
echo "<meta http-equiv='refresh' content='0; url=index.php'>";
}

if ($_SESSION['is_logged'] == TRUE) {
echo "<h3>Anda telah login</h3>";
echo "<p>
<h5>Keterangan login : </h5>
<ul>
<li>Id Admin : <b>".$_SESSION['id_admin']."</b></li>
<li>Username : <b>".$_SESSION['username']."</b></li>
<li>Nama Admin : <b>".$_SESSION['nama']."</b></li>
</ul>
</p><br>
<a href='?p=logout'>Klik disini, untuk logout</a>";
} else {
echo "<h3>Maaf, Anda belum login</h3>";
echo "<a href='index.php'>Klik disini, untuk login</a>";
}
?>

Penjelasan :

session_start();

//Wajib ada jika halaman menggunakan session

if ($_SESSION['is_logged'] == TRUE) {

//Pengecekan session “is_logged” apakah bernilai TRUE, jika iya, maka penjajahan di atas dunia harus.. eh salah.., maka tampilkan teks di bawah ini

echo "<h3>Anda telah login</h3>";

//Teks “Anda telah login”

echo "<p>

<h5>Keterangan login : </h5>

<ul>

<li>Id Admin : <b>".$_SESSION['id_admin']."</b></li>

//Membuktikan bahwa variabel session “id_admin” telah terisi makan akan berisi id_adminnya

<li>Username : <b>".$_SESSION['username']."</b></li>

//Membuktikan bahwa variabel session “username” telah terisi makan akan berisi username-nya

<li>Nama Admin : <b>".$_SESSION['nama']."</b></li>

//Membuktikan bahwa variabel session “nama” telah terisi makan akan berisi nama admin-nya

</ul>

</p><br>

<a href='?p=logout'>Klik disini, untuk logout</a>";

//Tampilkan link untuk logout (menghapus isi variabel session)

} else {

//Jika session “is_logged” berisi bukan TRUE dengan kata lain FALSE

echo "<h3>Maaf, Anda belum login</h3>";

//Tampilkan teks “Maaf, Anda belum login

echo "<a href='index.php'>Klik disini, untuk login</a>";

//Tampilkan link ke halaman login

}

Di bawah ini merupakan proses untuk logout

$_page = isset($_GET['p']) ? $_GET['p'] : "";

//Ambil variabel GET[‘p’]

if ($_page == "logout") {

//Jika variabel $_page berisi logout,

// variabel $_page di dapatkan dari URL, perhatikan di address bar : “dashboard.php?p=logout”

session_destroy();

//Skrip menghapus variabel session, cukup simpel dan tidak sebanding dengan skrip saat kita mengisikan variabel session

echo "<meta http-equiv='refresh' content='0; url=index.php'>";

//Me-redirect ke halaman login

}

6. Selesai.

Begitu pemiarsah, skripnya. Untuk download full script tunggu dulu, yak.. Website download center ane lagi maintenens.. (haha,..)

Sekian, terima kasih, wassalam...

Oh, hiya... Jangan lupa klo membutuhkan WEBSITE PROFIL, WEBSITE SEKOLAH, SISTEM INFORMASI atau APLIKASI LAIN YANG BERBASIS WEB, hubungi ane saja, gan. Hubungi saja lewat YM di samping, atau untuk respon cepat tanggap (kayak PMI) hubungi 0856 4343 7024, SMS OK, telpon OK...

Aplikasi SederhanA Manajemen sURAT (ASAMURAT)

Maaf, pengunjung, bukannya nggak mau menerima komentar, cuma untuk komentar suruh ngirimin source code, mohon agar dibaca postingannya dengan lengkap. Link download aplikasi sudah tersedia di bawah, ini.. Keep reading..

Assalamu'alaikum... Selamat sore para pemiarsah.. Selamat sore Indonesah.. Selamat sore Jogjakardah... Sore ini Jogjakardah panas sekali. Dari situs termometer online Weather.com, didapatkan suhu udara kota Jogjakarta adalah sekitar 38 derajat Celcius. Hal ini tidak biasanya, jika dibandingkan dengan hari biasanya (haha.. ribet nulisnya).. Penyebabnya adalah karena terjadinya deklinasi matahari (ini istilah ilmiah beneran, gak mengada-ada, lho...). Deklinasi adalah gerak semu matahari dimana posisinya dilihat berdasarkan koordinat lintang bumi. Seperti yang saya baca di webnya Tribun Jogja (http://jogja.tribunnews.com/2013/10/17/yogya-panas-sekali-hari-ini-berapa-suhunya), yang diakses pada hari Jum'at, 18 Oktober 2013, pukul 16:28. (efek daftar pustaka skripsi, masih terasa)...

Kembali lagi berjumpa lagi dengan tulisan saya yang sangat me-ngangenisasi para pembaca sekalian ini. Dengan suasana yang agak beda lagi, bukan pelajar/mahasiswa lagi. Mohon maaf sekali, pemiarsah.. lama saya gak ngupdate blog ini. Terakhir saya liat tanggal BERSEJARAH itu adalah adalah hari Kamis, tanggal 16 Mei 2013, yaitu tanggal dimana saya posting di blog ini terakhir. Kira-kira 6 bulan yang lalu. Waktu yang cukup lama bagi seorang blogger untuk mengupdate postingannya. Mengutamakan masa depan dulu, gan.. nyelesain kuliah yang sekarang sudah guudbay..

Masih seputar dunia aplikasi web, ijinkanlah kali ini saya mau sharing kepada pemiarsah mengenai sebuah aplikasi sederhana yang namanya saya kira sangat keren, serem, lain daripada yang lain, dan sangat tidak layak dijadikan nama sebuah aplikasi. Perkenalkanlah namanya ASAMURAT. Dari namanya ini sudah mengejawantahkan sebuah benda yang sangat tidak berguna, tidak disukai manusia dan cenderung dijauhi. Namun disini ASAMURAT ini adalah akronim dari Aplikasi SederhanA Manajemen sURAT.

Latar belakang masalah dari pembuatan aplikasi ini adalah dikarenakan sulitnya pencatatan dalam mengelola surat jika masih menggunakan metode manual dengan ditulis dengan buku agenda. Selain itu karena mencatat dengan menulis manual menjemukan jika ditulis tangan, apalagi jika jumlahnya banyak. Selain itu, pembuatan aplikasi sederhana ini juga didorong oleh keadaan di tempat saya bekerja (di sebuah MTs / setingkat SMP, di MTs Negeri Sidoharjo - http://mtsn-sidoharjo.co.nr/) akan diakreditasi. Kebetulan saya kebagian tugas sebagai pengelola sistem informasi. Nah, dengan harapan bisa mendapatkan nilai lebih nantinya, saya berinisiatif membuat aplikasi sistem informasi manajemen surat.

Okeh langsung sajah, pemiarsah, berikut screenshot aplikasinya :

Halaman Login Aplikasi

Halaman Dashboard Admin setelah berhasil login

Halaman data referensi Kode Klasifikasi Surat (Peraturan Menteri Agam No. 44 Tahun 44)

Halaman manajemen data surat masuk

Form input data surat masuk

Isi disposisi surat masuk

Cetak lembar disposisi surat masuk

Halaman kelola data surat keluar

Form input data surat keluar

Halaman persiapan cetak data buku agenda surat masuk (setting parameter tanggal)

Print priview cetak data agenda surat masuk

Fasilitas yang akan dibuat pada pengembangan dimasa yang akan datang
Catat surat keputusan dan SPPD

Halaman setting nama instansi pengguna

Halaman manajemen user aplikasi.
(Hanya bisa diakses oleh "Super Admin)

Form edit password user

Disinilah menu LOGOUTnya, gan..

System Requirements :

1. Komputer atau laptop minimal Pentium IV

2. Harus sudah terinstall paket web server (Apache, PHP, MySQL).

Saya menggunakan WAMP Server versi 2.2. Dapat didownload DISINI

3. Web browser

Saya sarankan memakai Mozilla Firefox versi terbaru. Browser Mozilla Firefox bisa menampilkan hasil report dengan sangat baik, jika dibandingkan Google Chrome dan lainnya (ujicoba saya, walaupun saya pemakai Google Chrome)

Keunggulan aplikasi ini.

Memakai PHP Framework Codeigniter, sehingga insya Alloh lebih stabil di sisi frameworknya, klo di sisi program yg saya buat mungkin masih banyak kekurangannya.

Memakai CSS Framework Twitter Bootstrap, yang mendukung keindahan tampilan, stabil, dan tertata rapi.

Memakai jQuery Datepicker untuk mengambil inputan berupa tanggal, sehingga lebih memudahkan user dalam menginput data tanggal, sesuai dengan format yang dibutuhkan sistem

Memakai jQuery Autocomple untuk pengambilan data kode klasifikasi surat, sehingga lebih cepat dan interaktif

Sangat cocok diterapkan pada instansi di bawah Kementerian Agama, karena aplikasi ini saya bangun berdasarkan standar operasional prosedur pengelolaan surat di Kemenag.

Langsung saja, untuk demo bisa dilihat di link berikut ini, pemiarsah..

DEMO

Untuk link download maaf ditunggu dulu pemiarsa, karena saya baru bangun website download center saya, dengan harapan agar semua file saya dapat didownload, terpusat di website download center saya itu. hehehe :)

[Update 28 April 2014]
Namun, ternyata, menyempatkan waktu buat mengetik kode lagi, untuk membuat sebuah website download center, susahnya sekali pemiarsa. Jadinya, ane upload ziddu.com, saja. Itung-itung pembaca dapat sambil menambah counter download ziddu, untuk ngebuktiin apakah bisa di-redeem... wakaka.. ~~Ini gan, link download-nya. Didownload semua aja, gan, semuanya saling terkait lho :D :D..~~

[Update 31 Maret 2015]
Seiring jejak langkahku belajar dunia pemrograman, ada yang namanya Git Version Control, nah, ane ikut-ikutan buat nge-git ini, biar kekinian. URL Aplikasi ASAMURAT di GitHub :

https://github.com/akhwan90/asamurat

Terima kasih...

(Bag 2) – Pembuatan Template Website - Website Profil Sekolah dengan Codeigniter dan Twitter Bootstrap

Template Website...? Ya, ini adalah sebuah bahasa Inggris. Menurut kamus besar bahasa google 4 juta milliar (teringat kamus bahasa inggris SMP-ku dulu 4 milliar, loh gan) itu arti dari kata “Template” sendiri adalah “Contoh” (diakses pada tanggal 20/04/2013, pukul 09.41). Nah loh, gak begitu nyambung, yak. Ane cari lagi, di google, arti kata template, buat menemukan arti sebenarnya yang mudah dimengerti dari kata template ini. Nah, akhirnya dapet yang begitu nyambung, arti dari template website adalah sebuah desain tampilan halaman dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.

Itu kiranya pengertian template website. Klo ane ambil kesimpulan dari setiap ane membikin template adalah : membuat desain tampilan sebuah halaman web utama/utuh, yang dalam penggunaannya nanti ada salah satu bagian yang akan diisi oleh konten-konten dari website atau intinya bagian tertentu itu berubah-ubah... (kira-kira begitu, komandan). Lihat gambar dibawah ini :
Tapi dalam konteks ini, sesuai judulnya, kita akan memanfaatkan sebuah framework CSS Twitter Bootstrap, yang pengertiannya sudah dijelaskan dalam bagian pertama bahasan ini. Insya Alloh, Twitter bootstrap ini sudah mengadopsi teknologi yang bersifat “responsive design”, HTML5, dan CSS3.

Banyak cara mecari template website ini, salah satunya dengan mendownload template gratis yang banyak bertebaran di internet. Untuk akhir-akhir ini template yang paling populer adalah template yang bersifat “responsive design” atau template tersebut bisa menyesuaikan layar device user/pengunjungnya. Secara, hari gini, banyak orang yg mengakses lewat Smartphone, Tablet, Kapsul (eh.. ora, lho), Blackberry, dll (yang satupun ane kagak punya, lho gan.. HP ane, tipe Nokia 103 dan Motorolla WX-193, -- sebuah pengakuan jujur, lho ini, hahaha). Trus yang ngetren lagi yang sudah HTML5 dan CSS 3, yang merupakan teknologi pemrograman web statis saat ini (2013). Hehe.

OK, langsung saja. Pada pembuatan website ini kita akan membuat template dengan 2 kolom utama (kolom 2: sidebar, klom 3: konten), header (nomor 1), footer (4), seperti gambar di bawah ini :

Kita akan membuat templatenya dengan menggunakan twitter bootstrapnya. Langsung saja, karena saya tidak menjelaskannya satu-persatu, panjang bener, gan.. sumpah, maka akan langsung saya sertakan dalam file download di bawah ini.

Simpan file tersebut dengan nama index.html. Nah jika dibuka, makan belum menghasilkan template jadi, melainkan hanya menampilkan tampilan acak-acakan dan gak beraturan. Itu karena file CSS dan Javascript dari Twitter bootstrapnya belum kita sertakan. Buatlah sebuah folder dengan nama “aset” yang berfungsi untuk menyimpan file CSS dan Javascript dari Twitter Bootstrapnya.

Selanjutnya buka folder ekstrak’an dari hasil download Twitter bootstrapnya. Buka folder :

“twitter-bootstraps/docs/assets/”, akan didapatkan 4 folder seperti ini :

Untuk folder “img” itu banyak terdapat file yang sebenarnya tidak perlu, nah kita hapus saja file tersebut. Buka folder “img” tersebut, dan hapus beberapa file, dan sisakan hanya file-file berikut ini (file-file image intinya twitter bootstrap):

Kemudian balik ke folder “assets” , dan copykan semua foldernya (css, ico, js, dan img) ke folder “aset” di folder template yang kita buat tadi. Ilustrasinya seperti ini :

Nah, sekarang buka file “index.html” tersebut, maka akan ditampilkan template kita sudah jadi, dan akan seperti ini :

Mungkin agak berbeda dengan punya saya. Ada gambar yang tak tampil, dan lain sebagainya. Untuk gambar, itu nanti bisa diperbaiki sendiri, yak. Trus mungkin berbeda dengan punya saya yang ada warna biru-birunya, itu karena punya saya sudah saya ubah sedemikian rupa di file “aset/css/bootstrap.css”-nya. OK, sekian dulu untuk bahasan untuk Pembuatan Template dengan framework CSS , Twitter Bootstrap kali ini, akan kita lanjutkan di bahasan selanjutnya, yaitu mengisikan template ke Codeigniternya. Hehehe.. Untuk file template jadinya, bisa didownload di link berikut ini :

DOWNLOAD

Website Profil Sekolah dengan Codeigniter dan Twitter Bootstrap (Bag 1)

Selamat sore pemiarsa. Salam semangat super.. (motivator style).. Lamo tak jumpa dengan pengunjung setia blog saya tercinta ini, yak.. hahahaha. Yak, saya tidak akan lupa untuk memposting sesuatu di blog ini, karena saya telah berkomitmen, di tahun 2013 ini minimal 1 bulan ane harus posting 1 artikel di blog ini.. hahaha.. Komitmen lho, bukan nazarr kdi.. Yah, biar para pengunjung blog sekalian gak pada jeleh (orang nJowo bilang) atau bosan, postingannya kok masih-masih itu aja.. Namun kenyataannya kemarin bulan Januari aja cuma ada 2 postingan, itupun hanya postingan cerita seputar cerita Ngampus ane, melalui media Kartun Ngampus yang saat ini pupyulerr.... (minimal di kampus ane..). Download karakternya di blog ini (http://shirongampus.blogspot.com/), gan. Juga kemarin Januari merupakan bulan tersibuk ane (Boxing Day), di semester 7, dihadapkan pada kewajiban menyelesaikan Kerja Praktek (KP) beserta laporannya. Syukur, saat detik ini saya saya memposting tulisan ini Laporan KP sudah diseminarkan, disetujui, disahkan oleh dosen pembimbing dan kaprodi... hehehe... tinggal lanjudh, take off ke semester 8.. hahah.. (salam semangat super, buat fren-freen ane yang belum maju KP, di Teknik Informatika STMIK El Rahma Yogyakarta Angkatan 2009. hehehee...

OK, gan.. bek to topik, sesuai judul di atas, ane mo mosting tentang membuat website profil pribadi, dengan menggunakan Framework Codeigniter yang populer sangath jagad persilatan web programming. Untuk desain, website profil ini saya percayakan pada Twitter Bootstraap. Itu lho, gan, sebuah framework CSS, yang memudahkan kita untuk mendesain tampilan sebuah website. Singkatnya gitu.. lebih lanjutnya bisa klik link-nya disitu, atau klik disini, untuk mencari tutorialnya...

Untuk Codeigniternya, ane anggap pemiarsa semua udah pada paham, yak...? Intinya dalam membuat website kita sendirikan menjadi 3 sub bagian pokok, yaitu Model (pengambilan data dari database), View (tampilan website) dan Controller (proses-proses yang dilakukan).

Yang pertama sekali dalam membuat website dengan Codeigniter adalah mengatur konfigurasi website, yang pengaturannya dilakukan di file "application/config/config.php". Settingannya yang PALING UTAMA (minimal) adalah sebagai berikut :

17. $config['base_url'] = 'http://localhost/web_sd/';
227. $config['encryption_key'] = 'super90';

Penjelasan :
Baris (17. $config['base_url'] = 'http://localhost/web_sd/';) digunakan untuk mengatur alamat root website yang kita buat. Dalam kasus ini, folder web Codeigniter saya saya beri nama "web_sd" dan saya letakkan di folder WWW (Wamp Server). Jadi kalau di tempat pemiarsa foldernya diberi nama beda dengan ini, maka konfigurasinya menjadi :

17. $config['base_url'] = 'http://localhost/nama_folder_web_anda/';

Baris (227. $config['encryption_key'] = 'super90';). Ini gini pemiarsa. Dalam website ini nantinya kan menggunakan yang namanya session. Nah, di Codeigniter (selanjutnya kita sebut CI, males ngetiknya), jika mengaktifkan session, maka settingan ini harus disetting. Valuenya bebas, terserah Anda, pemiarsa.

Itu untuk setting konfigurasi dasar website CI kita kali ini. Selanjutnya kita melangkah ke setting database-nya. Setting database ini dapat kita temui di file "application/config/database.php". Oh iya, jangan lupa buat database dulu dengan nama "web_sd". Selanjutnya settingannya yang PALING UTAMA, seperti ini pemiarsa :

51. $db['default']['hostname'] = 'localhost'; //sesuaikan dengan server MySQL Anda
52. $db['default']['username'] = 'root'; // username mysql Anda
53. $db['default']['password'] = ''; //password mysql Anda
54. $db['default']['database'] = 'web_sd'; // kita sepakati, buat database dengan nama "web_sd"

Untuk skrip import file SQLnya adalah sebagai berikut :

CREATE TABLE `admin` (
`id` int(1) NOT NULL auto_increment,
`u` varchar(15) NOT NULL,
`p` varchar(15) NOT NULL,
`nama` varchar(30) NOT NULL,
`email` varchar(30) NOT NULL,
`level` enum('1','2','3') NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `agenda` (
`id` int(3) NOT NULL auto_increment,
`tgl` date NOT NULL,
`ket` varchar(255) NOT NULL,
`tempat` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `berita` (
`id` int(4) NOT NULL auto_increment,
`judul` varchar(255) NOT NULL,
`gambar` varchar(100) NOT NULL,
`isi` mediumtext NOT NULL,
`hits` int(4) NOT NULL,
`tglPost` datetime NOT NULL,
`kategori` varchar(75) NOT NULL,
`oleh` varchar(30) NOT NULL,
`publish` int(1) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

CREATE TABLE `berita_komen` (
`id` int(4) NOT NULL auto_increment,
`id_berita` int(4) NOT NULL,
`nama` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`komentar` varchar(250) NOT NULL,
`tgl` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `data_guru` (
`id` int(3) NOT NULL auto_increment,
`nama` varchar(100) NOT NULL,
`nip` varchar(30) NOT NULL,
`mapel` varchar(50) NOT NULL,
`jk` enum('L','P') NOT NULL,
`alamat` varchar(200) NOT NULL,
`foto` varchar(150) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `data_siswa` (
`id` int(3) NOT NULL auto_increment,
`nama` varchar(100) NOT NULL,
`nis` varchar(30) NOT NULL,
`kelas` enum('1','2','3','4','5','6','L') NOT NULL,
`jk` enum('L','P') NOT NULL,
`alamat` varchar(200) NOT NULL,
`foto` varchar(150) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `galeri` (
`id` int(4) NOT NULL auto_increment,
`id_album` int(3) NOT NULL,
`file` varchar(255) NOT NULL,
`ket` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE `galeri_album` (
`id` int(3) NOT NULL auto_increment,
`nama` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

CREATE TABLE `haldep` (
`isi` longtext NOT NULL,
`id` int(1) NOT NULL auto_increment,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `link` (
`id` int(3) NOT NULL auto_increment,
`nama` varchar(150) NOT NULL,
`alamat` varchar(150) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `pesan` (
`id` int(4) NOT NULL auto_increment,
`nama` varchar(100) NOT NULL,
`email` varchar(100) NOT NULL,
`pesan` varchar(200) NOT NULL,
`tgl` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

CREATE TABLE `poll` (
`id` int(3) NOT NULL auto_increment,
`tanya` varchar(255) NOT NULL,
`op_1` varchar(200) NOT NULL,
`op_2` varchar(200) NOT NULL,
`op_3` varchar(200) NOT NULL,
`op_4` varchar(200) NOT NULL,
`j_1` int(3) NOT NULL,
`j_2` int(3) NOT NULL,
`j_3` int(3) NOT NULL,
`j_4` int(3) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE `profil` (
`id` int(2) NOT NULL auto_increment,
`judul` varchar(200) NOT NULL,
`isi` longtext NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Jadi kita membuat 9 tabel, yaitu sebagai berikut :

admin : untuk menampung data username dan passwod login admin
agenda : untuk menyimpan data agenda kegiatan sekolah
berita : untuk menampung data berita website
berita_komen : untuk menampung data komentar berita website
data_guru : untuk menampung data guru
data_siswa : untuk menampung data siswa
galeri : untuk menyimpan data foto-foto di galeri foto
galeri_album : untuk menyimpan data albumd alam galeri foto
haldep : untuk menampung data page halaman beranda website
link : untuk menyimpan data link atau tautan dari website
pesan : untuk menampun data kontak masuk melalui web
poll : untuk menampung data polling
profil : untuk menampung data profil sekolah

OK, pemiarsa nampaknya ane untuk bagian 1 cukup sampe di sini, yak. Langkah yang sudah kita lakukan adalah :

Mengatur konfigurasi website (file : "application/config/config.php")
Mengatur konfigurasi database website (file : "application/config/database.php")
Membuat database, dengan 9 tabel. Jika kesulitan meliat skrip SQL di atas, bisa didownload, DISINI. Pilih yang "web_sd.sql"

Kita lanjutkan ke bagian ke-2 tutorial ini, yak pemiarsa, daripada kepanjangan tulisan, males bacanya.. hehehe.. Si yu neks taim... Ciyussss.. baaa....#GGMU...

LANJUTAN TUTORIAL INI , KLIK DISINI

Oh, hiya... Jangan lupa klo membutuhkan WEBSITE PROFIL, WEBSITE SEKOLAH, SISTEM INFORMASI atau APLIKASI LAIN YANG BERBASIS WEB, hubungi ane saja, gan. Hubungi saja lewat YM di samping, atau untuk respon cepat tanggap (kayak PMI) hubungi 085292747190, SMS OK, telpon OK...

Membuat Galeri Foto dengan PHP dan jQuery Fancybox

Tutorial ini merupakan lanjutan dari postingan sebelumnya yaitu : Membuat Gallery Foto dengan PHP - Bag. 1 yang dulu katanya admin ada lanjutannya, namun ternyata tidak dilanjutkan sama sekali.. :P haahahaa.. maklumlah, klu dulu tampilannya masih sangat aneh, dan minim animasi. Nah pada postingan kali ini adalah masih tentang membuat galeri dengan PHP, tapi dengan dengan embel-embel "dan jQuery Fancybox". Tahu FancyBox, kan, yak, itu, untuk menampilkan detail suatu gambar, dengan animasi jQuery (definisi menurut ane hahaaha).. contohnya adalah sebagai berikut :

Selain halaman depan, juga akan saya tambahkan halaman admin untuk galeri tersebut. Untuk struktur folder-foldernya adalah sebagai berikut :

Untuk databasenya, buat database dengan nama "lab" :

CREATE TABLE `galeri` (
`id` int(4) NOT NULL auto_increment,
`file` varchar(200) NOT NULL,
`kategori` int(2) NOT NULL,
`keterangan` varchar(255) NOT NULL,
`oleh` int(2) NOT NULL,
`tgl` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=25 ;
CREATE TABLE `galerikategori` (
`id` int(2) NOT NULL auto_increment,
`nama` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

Kemudian selanjutnya file "koneksi.php"

<?php
$h = "localhost";
$u = "root";
$p = "";
$db = "lab";
mysql_connect($h, $u, $p) or die ("Not connected, please try again later");
mysql_select_db($db);
//Fungsi Perkecil Ukuran Gambar //
//penggunaan ===> perkecil("img/siswa_1.JPG", "img/small/"); (folder/file, folder/folder/)
function perkecil($imgAsal, $imgTujuan) {
$pcImgAsal = explode("/", $imgAsal);
$jAr = count($pcImgAsal) - 1;
$namaFileAsli = $pcImgAsal[$jAr];
//identitas file asli
$im_src = imagecreatefromjpeg($imgAsal);
$src_width = imageSX($im_src);
$src_height = imageSY($im_src);
//Simpan dalam versi small 110 pixel
//set ukuran gambar hasil perubahan
$dst_width = 110;
$dst_height = ($dst_width/$src_width)*$src_height;
//proses perubahan ukuran
$im = imagecreatetruecolor($dst_width,$dst_height);
imagecopyresampled($im, $im_src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);
//Simpan gambar
imagejpeg($im, $imgTujuan."_s_".$namaFileAsli);

imagedestroy($im_src);
imagedestroy($im);
}
?>
<html>
<head>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="JS/fancybox/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="JS/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<title>Galeri dengan jQuery Fancybox</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="JS/tooltip.js"></script>

</head>
<body>

Selanjutnya file "index.php"

<div id="isi">
<h1>Galeri Foto</h1>
<p>
<?php
include "koneksi.php";
echo "<ul id='produk'>";
$QKategori = mysql_query("SELECT * FROM galerikategori");
while ($AKategori = mysql_fetch_array($QKategori)) {
$Kategori = $AKategori[0];
$QGetNamaKategori = mysql_query("SELECT nama FROM galerikategori WHERE id = '$Kategori'");
$AGetNamaKategori = mysql_fetch_array($QGetNamaKategori);
$QJumlahPerKategori = mysql_query("SELECT file FROM galeri WHERE kategori = '$Kategori'");
$JJumlahPerKategori = mysql_num_rows($QJumlahPerKategori);
$QGaleri = mysql_query("SELECT * FROM galeri WHERE kategori = '$Kategori' ORDER BY RAND()");
$AGaleri = mysql_fetch_array($QGaleri);
if ($JJumlahPerKategori == 0) {
echo "
<a href='#' onclick=\"javascript:alert('belum ada foto ..!')\" class='tooltip' title='$AGetNamaKategori[0]'>
<li class='lis-produk'>
<div class='isi'><img src='foto/no-image.jpg'></div>
</li>
</a>";
} else {
echo "
<a href='galeri_detil.php?kat=$Kategori' class='tooltip' title='$AGetNamaKategori[0]'>
<li class='lis-produk'>
<div class='isi'><img src='foto/$AGaleri[1]'></div>
</li>
</a>";
}
}
echo "</ul>";
?>
</p>
</div>

dan file "galeri_detil.php" :

<?php
include "koneksi.php";

$Kategori = $_GET['kat'];
$nKategori = mysql_fetch_array(mysql_query("SELECT nama FROM galerikategori WHERE id = '$Kategori'"));
?>
<div id="isi">
<h1>Galeri Foto | <?php echo $nKategori[0]; ?></h1>
<p>
<b><a href="index.php">Back to Gallery</a></b>
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>

<center>
<div class="ad-nav">
<div class="ad-thumbs">
<ul id='produk'>
<?php
$QGaleri = mysql_query("SELECT * FROM galeri WHERE kategori = '$Kategori'");
while ($AGaleri = mysql_fetch_array($QGaleri)) {
?>
<li class="lis-produk">
<h3><?=$AGaleri[3]?></h3>
<a class="fancybox" href="foto/<?=$AGaleri[1]?>" data-fancybox-group="gallery" title="<?=$AGaleri[3]?>">
<img src="foto/<?=$AGaleri[1]?>" alt="">
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
</center>
</div>
</p>
</div>
</body>
</html>

Selanjutnya membuat halaman admin, yang sengaja tidak saya beri autentifikasi atau proses login. Untuk membuat proses login dengan jQuery bisa dilihat di tutorial "membuat halaman login dengan jQuery".

Buat folder baru dengan nama admin, yang berisi 2 file :
1. index.php

<?php
include "../koneksi.php";
?>
<div id="isi">
<h1>Admin Galeri Foto</h1>
<?php
//variabel post
$p = $_GET['p'];
if ($p == "simpan_album") {
$QTambahKategori = mysql_query("INSERT INTO galerikategori VALUES ('', '".$_POST['kategori']."')");
if ($QTambahKategori) {
echo "<script>alert('Berhasil Ditambahkan'); window.open('index.php', '_self');</script>";
} else {
echo "<script>alert('Gagal Ditambahkan'); window.open('index.php', '_self');</script>";
}
}
//variabel Get
$mod = $_GET['mod'];
$id_kat = $_GET['id_kat'];
if ($mod == "del_kat") {
//hapus file

$QDelKategori = mysql_query("DELETE FROM galerikategori WHERE id = '$id_kat'");
$QDelGaleriKat = mysql_query("DELETE FROM galeri WHERE kategori = '$id_kat'");
if ($QDelKategori && $QDelGaleriKat) {
echo "<script>alert('Berhasil Dihapuskan'); window.open('index.php', '_self');</script>";
} else {
echo "<script>alert('Gagal Dihapus'); window.open('index.php', '_self');</script>";
}
} else if ($mod == "upload") {
$id_kat = $_POST['id_kat'];
$ket = $_POST['ket'];
//upload foto
$fileName = $_FILES['foto']['name'];
$fileSize = $_FILES['foto']['size'];
$fileError = $_FILES['foto']['error'];
$fileType = $_FILES['foto']['type'];
if ($fileType == "image/gif" || $fileType == "image/pjpeg" || $fileType == "image/jpeg") {
if (move_uploaded_file($_FILES['foto']['tmp_name'], '../foto/'.$fileName)) {
perkecil("../foto/$fileName", "../foto/");
mysql_query("INSERT INTO galeri VALUES ('', '$fileName', '$id_kat', '$ket', '0', now())");
}
echo "<script>alert('Berhasil Ditambahkan'); window.open('galeri_form.php?id_kat=".$_POST['kategori']."', '_self');</script>";
} else {
echo "<script>alert('Gagal Ditambahkan'); window.open('galeri_form.php?id_kat=".$_POST['kategori']."', '_self');</script>";
}
}
?>
 <div style="margin: 0 15px 0 15px">
<div id="tKategori">
<form action="?p=simpan_album" method="post" name="tmKategori" onsubmit="return cekNama();">
<input type="text" name="kategori" size="40" style="padding: 3px" placeholder="Isikan nama album" required> <input type="submit" value="Buat Kategori" name="tbKat" style="padding: 3px">
</form>
</div>
</div>
<div style="margin: 0 15px 0 15px">
<?php
$QKategori = mysql_query("SELECT * FROM galerikategori");
while ($AKategori = mysql_fetch_array($QKategori)) {
$Kategori = $AKategori[0];
$QGetNamaKategori = mysql_query("SELECT nama FROM galerikategori WHERE id = '$Kategori'");
$AGetNamaKategori = mysql_fetch_array($QGetNamaKategori);
$QJumlahPerKategori = mysql_query("SELECT file FROM galeri WHERE kategori = '$Kategori'");
$JJumlahPerKategori = mysql_num_rows($QJumlahPerKategori);
echo "
<div id='foto' style='background: #E3FFB5; padding: 5px; margin: 10px 0 10px 0; border: solid 1px #85C226; overflow: auto; width: 50%'>
<h3 style='font-size: 10px; font-weight: bold;'>$AKategori[1] ($JJumlahPerKategori foto) |
[ <a href='galeri_form.php?id_kat=$AKategori[0]'>Manajemen Kategori Foto</a> ] |
[ <a href='?p=galeri&mod=del_kat&id_kat=$Kategori' onclick=\"return konfirmasi('Menghapus Data ini - $Kategori - ')\">Hapus Kategori ini</a> ]
</h3>";
$QGaleri = mysql_query("SELECT * FROM galeri WHERE kategori = '$Kategori'");
$no = 1;
if ($JJumlahPerKategori == 0) {
echo "<font color='red'><b>Belum ada foto dalam kategori ini</b></font>";
} else {
while ($AGaleri = mysql_fetch_array($QGaleri)) {
echo "
<td align='center'>
<img src='../foto/_s_$AGaleri[1]' width='50px' height='50px' style='margin: 10px 10px auto; border: solid 3px #85C226'>
</td>";
$no++;
if ($no > 6 ) {
echo "</tr><tr>";
}
}
}
echo "</div>";
}
?>
</div>
</div>

2. galeri_form.php

<?php
include "../koneksi.php";
$p = $_GET['p'];
$id_kat = $_GET['id_kat'];
$id_foto= $_GET['id_foto'];
$mod = $_GET['mod'];
if (empty($id_kat)) {
echo "<script>alert('Pilih dulu albumnya')</script>";
echo "<meta http-equiv='refresh' content='0;url=http:index.php'>";
}
$q_ket_kategori = mysql_query("SELECT * FROM galerikategori WHERE id = '".$id_kat."'");
$ket_kat = mysql_fetch_array($q_ket_kategori);
if ($p == "upload") {
$id_kat = $_POST['id_kat'];
$ket = $_POST['ket'];
//upload foto
$fileName = $_FILES['foto']['name'];
$fileSize = $_FILES['foto']['size'];
$fileError = $_FILES['foto']['error'];
$fileType = $_FILES['foto']['type'];
if ($fileType == "image/gif" || $fileType == "image/pjpeg" || $fileType == "image/jpeg") {
$QUpload = mysql_query("INSERT INTO galeri VALUES ('', '$fileName', '$id_kat', '$ket', '0', now())");
$move = move_uploaded_file($_FILES['foto']['tmp_name'], '../foto/'.$fileName);
perkecil("../foto/$fileName", "../foto/");
echo "<script>alert('Berhasil Ditambahkan'); window.open('galeri_form.php?id_kat=$id_kat', '_self');</script>";
} else {
echo "<script>alert('Gagal Ditambahkan'); window.open('galeri_form.php?id_kat=$id_kat', '_self');</script>";
}
} else if ($p == "del_foto") {
$getNamaFile = mysql_query("SELECT file FROM galeri WHERE id = '".$id_foto."'");
$aNamaFile = mysql_fetch_array($getNamaFile);
$q_del = mysql_query("DELETE FROM galeri WHERE id = '$id_foto'");
if ($q_del) {
$del_file1 = unlink("../foto/".$aNamaFile[0]);
$del_file2 = unlink("../foto/_s_".$aNamaFile[0]);
echo "<script>alert('Berhasil Dihapuskan'); window.open('galeri_form.php?id_kat=$id_kat', '_self');</script>";
} else {
echo "<script>alert('Gagal Dihapuskan'); window.open('galeri_form.php?id_kat=$id_kat', '_self');</script>";
}

}
?>
<div id="isi">
<h1>Upload foto pada : <?php echo $ket_kat['nama']; ?></h1>
<a href="index.php">Back To beranda</a>
<form name="fUploadGaleri" action="?p=upload&id_kat=<?=$id_kat?>" method="POST" enctype="multipart/form-data">
<input type="hidden" name="id_kat" value="<?php echo $id_kat; ?>">
<table>
<tr>
<td>File</td>
<td><input type="file" name="foto" size="10"> *HANYA tipe .GIF dan .JPEG</td>
</tr>
<tr>
<td>Keterangan</td>
<td><input type="text" name="ket" size="45" placeholder="Isikan keterangannya" required></td>
</tr>
<tr>
<td width="124"> </td>
<td width="319"><input type="submit" name="tbUpload" value="kirim"></td>
</tr>
</table>
</form>
<hr>
<br>
<b>Daftar Foto dalam kategori ini</b><br>
<?php
$QJumlahPerKategori = mysql_query("SELECT file FROM galeri WHERE kategori = '".$id_kat."'");
$JJumlahPerKategori = mysql_num_rows($QJumlahPerKategori);
?>
<div id='foto' style='background: #E3FFB5; padding: 5px; margin: 10px 0 10px 0; border: solid 1px #85C226; overflow: auto; width: 50%'>
<h3 style='font-size: 10px; font-weight: bold;'><?=$ket_kat['nama']." ( ".$JJumlahPerKategori." foto) | "?>
[ <a href="index.php?mod=del_kat&id_kat=<?=$id_kat?>" onclick="return konfirmasi('Menghapus Data ini - <?=$ket_kat['nama']?> - ')">Hapus Kategori ini</a> ]
</h3>
<?php
$QGaleri = mysql_query("SELECT * FROM galeri WHERE kategori = '$id_kat'");
if ($JJumlahPerKategori == 0) {
echo "<font color='red'><b>Belum ada foto dalam kategori ini</b></font>";
} else {
while ($AGaleri = mysql_fetch_array($QGaleri)) {
?>
<div style="float: left">
<img src='../foto/_s_<?=$AGaleri[1]?>' width='50px' height='50px' style='margin: 10px 10px auto; border: solid 3px #85C226'>
<a style="font-size: 12px; margin-left: 23px; display: block" href='?p=del_foto&id_kat=<?=$id_kat?>&id_foto=<?=$AGaleri[0]?>' title='Klik Untuk Menghapus Foto Ini' onclick="return confirm('Anda yakin akan menghapus Foto ini ? ')">Hapus
</a>
</div> <?php }
}
echo "</tr></div>";
?>
</div>

Selanjutnya adalah membuat folder "foto" yang digunakan untuk menyimpan foto yang diupload, dan folder "JS" yang berisi file Javascript, seperti jQuery, dan plugin Fancybox.

Setelah, anda copy pastekan kode di atas (pastilah dicopy paste, kan....? :P, hehehe) jika berhasil akan menjadi seperti di halaman demo di bawah ini :

DEMO (10 sept 2014)

Nah, seperti itu, yak pemiarsa, sekian postingan dari saya, atas kunjungannya diucapkan terima kasih.

Oh, iya sampe lupa, pastilah, penginnya tinggal copas skrip yang udah jadi ke localhost, yak... haahahahaha... ini, linknya, yak.. silakan disedottt di link di bawah ini :

[UPDATE - 10 SEPTEMBER 2014]

1. Demo program :

http://nur-akhwan.web.id/demo/blog/fancybox/

2. Database :
http://www.4shared.com/document/iKsXPkkFce/Database_-_blog_fancybox.html

3. Source Code :
http://www.4shared.com/rar/53WFpYLyce/Source_Code_-_blog_fancybox.html

*) PROMOSI JASA
Jangan lupa klo membutuhkan website profil, website sekolah, sistem informasi, yang ada hubungannya dengan website, hubungi ane saja, gan. Hubungi saja lewat YM di samping, atau untuk respon cepat hubungi : 085292747190 (WA), 085643437024 (SMS), BB : 790d66d2.

Membuat Skrip Login Mirip C-Panel dengan jQuery

Aplikasi SederhanA Manajemen sURAT (ASAMURAT)

(Bag 2) – Pembuatan Template Website - Website Profil Sekolah dengan Codeigniter dan Twitter Bootstrap

Website Profil Sekolah dengan Codeigniter dan Twitter Bootstrap (Bag 1)

Membuat Galeri Foto dengan PHP dan jQuery Fancybox

Arsip Blog