Learning and Information Technology

Script Ajax Sederhana menggunakan jQuery

19 October, 2009 wawan saputro Leave a comment

AJAX adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dipanggil ulang hanya untuk mengganti sebagian kecil dari isi halaman.

Terimakasih kepada framework jQuery, proses development ajax bisa menjadi lebih mudah.
Salah satu fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), yang memiliki 3 buah parameter sbb:

load(url, params, callback)

keterangan:

url (String): URL dari file html yang akan di load
params (Object): Data yang akan dikirimkan ke server (optional)
callback (Function): Fungsi yang akan dijalankan ketika data berhasil di load (optional)

Contoh penggunaan pada sebuah link:

$(document).ready(function() {
	$('#link').click(function() {
		$('#container').load('content.php');
	});
});

keterangan:

link adalah id dari link/tombol yang akan diklik
container adalah id dari element yg akan memuat isi dari script content.php

Contoh penggunaan yang lebih dinamis (dengan mengambil nilai dari attribute href) :
Misalnya ada sekumpulan link di dalam sebuah div

<div id="menu">
	<ul>
		<li><a href="content.php?id=1">Menu 1</a></li>
		<li><a href="content.php?id=2">Menu 2</a></li>
		<li><a href="content.php?id=3">Menu 3</a></li>
		<li><a href="content.php?id=4">Menu 4</a></li>
	</ul>
</div>

Tanpa penambahan script, link-link tersebut akan diproses sebagai link biasa.
Supaya semua link-link tersebut bisa diproses dengan ajax, tambahkan script sbb:

$(document).ready(function() {
	$('#menu a').click(function() {
		var url = $(this).attr('href');
		$('#container').load(url);
		return false;
	});
});

Untuk lebih jelasnya silakan lihat demo:
Demo AJAX

Anda bisa mendownload source code nya di sini:

Categories: Ajax Tags: Ajax, ajax sederhana, html, javascript, jQuery, pemrograman, PHP, Programming, simple ajax, Tutorial, web

Validasi Form Menggunakan jQuery Validation Plugin

19 October, 2009 wawan saputro Leave a comment

jQuery Validation adalah sebuah plugin jQuery yang berfungsi untuk mempermudah validasi form client-side. Cara penggunaannya adalah dengan memanggil script jquery dan jquery-validate di dlm kode html anda (biasanya diletakkan di bagian head) :

1 2	<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.js"></script>

Ketikkan script validate nya:

<script type="text/javascript">
$(document).ready(function() {
	$("#myForm").validate();
})
</script>

Di mana myForm adalah id dari form yg akan divalidasi.

1	<form id="myForm" method="post">

Kemudian di bagian input yg akan kita beri validasi tambahkan class=”required”

Nama:
<input type="text" name="nama" class="required" />
Alamat:
<input type="text" name="alamat" class="required" />

Jika field masih kosong, kemudian kita tekan tombol submit, maka akan muncul peringatan bahwa field tsb harus diisi, dan form tidak akan di submit.
jQuery Validation Plugin

Pesan yang muncul di sebelah kanan input “This field is required.” itu adalah pesan default. Pesan tersebut bisa kita ganti dengan menambahkan attribute title di input, misalnya:

1	<input type="text" name="nama" class="required" title="Nama harus diisi" />

Maka pesan akan berganti menjadi pesan anda sendiri.

Validasi menggunakan jQuery Validation Plugin juga bisa diterapkan di semua jenis input, seperti radio button, checkbox, textarea, select option, dan lain-lain. Anda juga bisa menambahkan validasi yang lebih kompleks, seperti pengecekan alamat email, pengecekan URL, pengecekan jumlah minimal & maksimal karakter, pengecekan jenis file yang akan di upload, dan lain-lain.

Demo Validasi Form

Anda bisa mendownload source code nya di sini:

Downloaded a total of 1925 times

CATATAN: Validasi form menggunakan javascript/jQuery hanya berguna untuk mempermudah proses pengisian form, namun tidak akan melindungi aplikasi web anda. Untuk keamanan yang lebih baik, anda tetap harus menambahkan validasi secara server-side.

Categories: jQuery Tags: form, html, javascript, jQuery, pemrograman, Programming, Tutorial, validasi, validate, validation, web

Menghilangkan index.php pada URL CodeIgniter

7 September, 2009 wawan saputro Leave a comment

“Oy Website lw pake CI ya ?!”, gara-gara index.php di URL langsung deh ketauan!. Sewaktu instal CI otomatis url aplikasi kita kira-kira bentuknya akan menjelma menjadi seperti ini:http://localhost/NamaAplikasi/index.php/NamaController

Sepertinya aplikasi terlihat kurang keren ya karena ada embel-embel index.php, Pasti orang yang mengakses langsung tahu bahwa itu pake CI. Setelah blog walking saya coba sarikan langkah-langkah untuk menghilangkan index.php agar URL terlihat lebih bersih

Langkah 1:
Pastikan module mod_rewrite pada apache sudah diload. Jika belum aktifkan dahulu, caranya sebagai berikut :

Edit file httpd.conf Apache2 kamu , uncomment/tambahkan baris ini (biasanya ada di bagian Dynamic Shared Objects):LoadModule rewrite_module modules/mod_rewrite.soSesuaikan pathnya dengan tempat dimana modul apache2 disimpan. Pada contoh di atas dianggap mod_rewrite.so terletak di /usr/lib/apache2/modules, pada windows biasanya cukup uncomment saja, kemudian restart apache2 kamu.

Langkah 2:
Buka system/application/config/config.php, set parameter index file menjadi kosong.
$config['index_page'] = "";

Langkah 3:
Buat sebuah file .htaccess pada root directory code igniter (sejajar dengan index.php, /database, /public, /system ) isikan file tersebut dengan aturan ini:
RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L]
Sekarang coba akses aplikasi kamu tanpa index.php, misalnya:
http://localhost/Aplikasiku/SomeController ”EXPECTO PATRONUM!” , jengjeng…

Keterangan:

RewriteEngine On
Mengaktifkan engine Rewrite (engine untuk pola penulisan ulang pada URL)

RewriteCond %{REQUEST_FILENAME} !-f
Test, apakah file (-f ) yang diminta pada url {REQUEST_FILENAME} tidak (!) eksis.

RewriteCond %{REQUEST_FILENAME} !-d
Test, apakah direktori (-d) yang diminta pada url tidak (!) eksis.

RewriteRule ^(.*)$ index.php/$1 [L]
Bila kedua kondisi di atas (RewriteCond) terpenuhi maka terapkan aturan ini. Kita minta tolong sama apache agar menyisipkan kata index.php sebelum URI terakhir.

Misalnya kita merequest “SomeController” pada:
http://localhost/Aplikasiku/SomeController,

setelah di terapkan RewriteRule maka bentuk URL akan dirubah menjadi :
http://localhost/Aplikasiku/index.php/SomeController

Referensi:
http://zona90.wordpress.com/2009/07/20/menghilangkan-index-php-pada-url-codeigniter/

Categories: Codeigniter

CMS Indonesia Berbasis Codeigniter

1 September, 2009 wawan saputro Leave a comment

Assalamu’alaikum…
Siang, hehehhe posting lagee neehh…
kali ini aku mo share tentang CMS (Content Management System). Temen-temen pasti tau dunk CMS-CMS yang populer di dunia maya, Joomla, PHPNuke, Drupal dsb. Indonesia juga punya beberapa CMS karya anak bangsa yang cukup exist n banyak dipake. Auracms, Endonesia n masih banyak lagi (yang laenya gak tau,wkwkwkwk)…

Tapi ada satu CMS yang dah buat aku ngrasa tertarik banget, waktu tu aku lagi googling buat nyari tutor templating di Codeigniter n nemuin situsnya Mas Ervan (programernya jogjacamp). Gak sengaja seeh…
Eh disitu nemuin artikel tentang CMS yang basicnya Codeigniter, eamng seeh versi Codeigniternya masih 1.63, tapi yang penting konsepnya sama,hahahahaa…
kebetulan banget aku lagi mo belajar Codeigniter ibarat lagi haus disodorin es teh (eh puasa dink,hehehe). Namanya Tarichi langsung ajah aku buka situsnya…
Blaikkkk…situsnya dijual….
Haduuuuuhhhh…patah semangat???Gak no…!!
ku cari lagi di google “Tarichi” eh nemuin blog dari engine wordpress..
http://dotexe.wordpress.com/
hahahaa..ketemu…
aku baca-baca ada lik downloadnya…
AZZEEEEE…!!!
ketemu dech….

Aku download versi 3.0 final dari Ziddu…Kena..!!
pas aku extrak..eh gak ada file .sqlnya…haduwwww….balik lagi di blog dotexe.wordpress.com.disitu dah disertain dumpingan databsenya.tapi sayang g berbentuk file.sql tapi ketikan manual. Mau gak mau ya copy paste dech. Finaly…jadi dech Tarichinya. Emang ada sedikit config di base urlnya.Gak tau knapa rewrite modenya g jalan di localhostku. Aku ganti dech $config['index_page'] yang semula kosong aku jadiin default index.php…eh bisaa…so..sekarang aku bisa belajar CI dunk….hehehehe…

Fiturnya banyak kok, pake 2 bahasa inggris ma indonesia. N yang buat aku kagum tu…ada Ajaxnya juga loch…
wuizzzz salut bangeth dech ma yang develop. Tapi sayang websitenya g bisa diakses, gak tau sekarang gimana nasib pendevelopnya. Pokoknya aku kasih jempol 5 dueh buat yang dah develop Tarichi..Makaseeh byanget. Aku cuman berharap moga Tarichi masih didevelop lagi biar meramaikan CMS-CMS Indonesia. Bangga deh ma Indonesia…muah..muah…
n yang mo download filenya bisa di download disini
Woke…met belajar CI duechhhh….Moga bremanfaat
Wassalamu’alaikum

Categories: Codeigniter

Simple Tutorial CodeIgniter Episode (1)

15 August, 2009 wawan saputro Leave a comment

Belajar CodeIgniter tidaklah terlalu sulit. Bagi Anda yang sudah menguasai PHP dasar, saya kira Anda dapat menguasai CI dengan cepat. Saya sendiri pun (yang hanya autodidak) dapat mempelajarinya dengan lumayan cepat tanpa hambatan yang berarti. Mengapa? Berawal dari User Guide-nya CI yang sangat jelas, hingga community-nya yang sangat responsible membuat saya cepat dalam mempelajarinya. Saat ini, saya lumayan lancar dalam membuat aplikasi dengan CI, meskipun tidak terlalu canggih.

Sebelumnya, saya tekankan bahwa disini saya asumsikan Anda sudah menguasai dasar PHP, terutama konsep class. Mengapa class? Karena CI pada dasarnya adalah berorientasi objek, jadi, kita nantinya akan sering membuat class-class PHP dalam prosesnya. Jika Anda merasa belum menguasainya, silakan baca buku atau cari referensi di internet.

OK, kita mulai.

Kita akan mulai mini tutorial ini dari pembahasan Controller dan View. Dua komponen ini adalah minimal kita buat ketika membuat aplikasi dengan CI. Controller merupakan kumpulan function yang terangkum dalam suatu class. Bagaimana dengan View? View adalah file yang umumnya berisi HTML dan (sedikit) PHP script yang nantinya akan ditampilkan di browser. Secara mudah, prosesnya adalah Controller melakukan Query ke database, kemudian dia juga mem-parsing-kan data hasil query tersebut ke View. Nah, di view, kita looping data tersebut untuk ditampilkan.

Secara umum, struktur file controller seperti berukut ini.







Class Mycontroller extends Controller<br />


{


     function MyController()


     {


            parent::Controller();


     }


     function index()


    {


          // some code


     }


    function other_function()


    {


           // some code


    }


}


?>

Controller di atas bernama Mycontroller (huruf pertama harus kapital) dan disimpan dalam folder system/application/controllers/ dengan nama mycontroller.php (huruf pertama tidak kapital). Disini yang perlu kita ingat bahwa nama controller menjadi nama file controller tersebut.
Perhatikan, Mycontroller memiliki function index() dan other_function(). Dalam sistem URL CI (default), controller akan menjadi segmen pertama dari url kita, dan function menjadi yang kedua. Jadi, jika kita ingin mengeksekusi controller mycontroller dan function index, maka kita tulis dalam url :

http://example.com/root/index.php/mycontroller/index

dengan asumsi root adalah nama root folder anda di webserver. Perlu diingat bahwa khusus function index (yang selalu ada dalam setiap controller) tidak perlu dituliskan (optional). Untuk fungsi kedua, kita tulis dalam url :

http://example.com/root/index.php/mycontroller/other_function

Seperti itulah dasar controller.
Kita dapat juga memberikan parameter ke controller, lewat url, mulai dari segment ke 3 dan seterusnya. Misalkan url kita :

http://example.com/root/index.php/mycontroller/other_function/3/1

berarti kita memberikan parameter 3 dan 1 sebagai nilai yang akan diolah di controller (Kita akan membahas ini lebih dalam di episode mendatang).

Untuk tutorial lebih lengkap silahkan kunjungi http://putraweb.net/

Categories: Codeigniter

Pengenalan Codeigniter

15 August, 2009 wawan saputro Leave a comment

CodeIgniter adalah sebuah framework php yang dapat mempercepat developer untuk membuat sebuah aplikasi web. Ada banyak library dan helper yang berguna didalamnya dan tentunya mempermudah proses development.

Apa Keunggulan Codeigniter?

CodeIgniter sangat ringan, terstruktur, mudah dipelajari, dokumentasi lengkap dan support yang luar biasa dari forum codeigniter. Alasan lainnya adalah

Menggunakan pattern MVC yang mempermudah dan meningkatkan flesibilitas
Menghasilkan url yang search engine friendly
Mudah untuk membuat library dan helpernya
Jalan di PHP 4 (4.3.2+) dan 5
Support banyak database MySQL (4.1+), MySQLi, MS SQL, Postgres, Oracle, SQLite, dan ODBC.
Sekuritas aplikasi terjaga
Banyak library dan helper yang mempermudah pekerjaan

Apa itu MVC?

MVC adalah kepanjangan dari Model View Controller. MVC sebenarny adalah sebuah pattern yang bertujuan memisahkan bisnis logic, data logic dan persentation logic (interface) atau simplenya memisahkan antara desain, data dan proses.

Model: Model berhubungan dengan data dan interaksi ke database.
View: View berhubungan dengan segala sesuatu yang akan di tampilkan ke end user. bisa itu halaman web, rss, javascript dan lain-lain
Controller:Controller bertindak sebagai penghubung data dan view

Berikut ini adalah contoh penggunaan codeigniter untuk menampilkan berita yang ada di database.

Langkah 1: Download Codeigniter

Anda dapat mendownload codeigniter di website Codeigniter

Langkah 2: Ekstract Codeigniter

Setelah anda meng ekstrak, letakkan di folder htdoc anda. anda akan mendapatkan struktur direktori seperti ini :

struktur
Kita hanya akan bermain di folder application, di situlah aplikasi kita diletakkan.

Folder system menyimpan semua file, baik itu file aplikasi yang kita buat maupun core frameworknya.
- Folder application: disinilah aplikasi yang akan kita bangun diletakkan
  - Folder config : tempat menyimpan semua file konfigurasi yang ada di aplikasi mulai dari database, router dan autoload dari aplikasi
  - Folder controllers : tempat menyimpan semua file controller.
  - Folder errors : tempat menyimpan semua template error aplikasi
  - Folder helpers : tempat menyimpan helper-helper yang bukan berasal dari CI
  - Folder hooks : tempat menyimpan hook yang digunakan untuk mengubah alur fungsi dari core CI
  - Folder language tempat menyimpan bahasa-bahasa yang akan di gunakan
  - Folder libraries tempat menyimpan semua library buatan kita sendiri
  - Folder models tempat menyimpan semua model.
  - Folder views tempat menyimpan semua file view applikasi.
- Folder cache tempat menyimpan semua cache yang dibuat caching library.
- Folder codeigniter tempat menyimpan semua semua file internals CI.
- Folder database tempat menyimpan semua driver database drivers dan class yang akan digunakan.
- Folder fonts tempat menyimpan semua fonts yang digunakan image manipulation library.
- Folder helpers tempat menyimpan semua helper core CI.
- Folder language tempat menyimpan semua langguage core CI.
- Folder libaries tempat menyimpan semua library core CI
- Folder logs tempat menyimpan semua logs generated oleh CI.
- Folder plugin tempat menyimpan semua plugin core CI.
- Folder scaffolding tempat menyimpan semua file yang berfungsi sebagai scaffolding .
Folder user_guide berisi userguide/manual penggunaan CI.
Fileindex.php file yang akan menghandle semua request yang dilakukan oleh client.

Langkah 3: Konfigurasi Codeigniter

untuk menggunaka codeigniter setidaknya anda harus mengubah konfigurasi base_url. Semua request dan helper yang berhubungan dengan link akan menggunakan itu. buka file open up system/application/config/config.php

10	$config['base_url'] = "http://localhost/belajar_ci/";

Langkah 4: Testing Default Codeigniter

Mengecek apakah dengan konfigurasi dasar sudah jalan apa belum. apabila sudah jalan akan ada tampilan seperti ini
untitled-2

Categories: Codeigniter

Tips cara menambah / pasang shoutbox di blog kita

15 August, 2009 wawan saputro Leave a comment

Secara umum untuk meletakkan shoutbox di website atau bog kita bisa menggunakan module, plugin atau addon yang sudah ada dengan mengaktifkannya tergantung jenis blog gratisan yang kita pakai. Tapi jika tidak bisa, maka kita bisa coba menggunakan shoutbox gratisan dari pihak ketiga.

Ada banyak situs web yang menawarkan jasa hosting shoutbox gratis kepada kita, seperti antara lain :
- http://www.shoutmix.com/main/
- http://www.free-shoutbox.co.uk/
- http://www.shootbox.fr/en/
- http://www.yellbox.com/
- http://www.shoutboxes.com/

Cara menginstall shoutboxnya yang dari pihak eksternal :
- Daftar accout baru di situsnya
- Seting-seting dikit
- Copy dan paste kode yang diberikan pada situs atau blog kita
Shoutbox siap digunakan kalau kodenya diperbolehkan jalan di server blog.

Panduan memasang shoutbox di blogger / blogspot :
- http://tutorials-for-new-blogger.blogspot.com/2007/07/add-shoutbox-on-your-blogger.html
- http://server3.oggix.biz/howto/bloggerbeta.html

Panduan memasang shoutbox di blog wordpress :
- http://en.forums.wordpress.com/topic/adding-shoutbox-give-me-a-link?replies=5

Categories: Internet

Aku ingin mendekapmu

9 July, 2009 wawan saputro Leave a comment

Aku ingin mendekapmu. . . . . . .

Karena aku ingin memberi kekuatan yang tak sanggup kuucapkan dengan kata-kata

Apa pun ku ingin mendekapmu

karena telah kusaksikan banyak air mata mengalir dari pelupuk indahmu

Yang kulihat dengan hati bergetar