Muraii - Aplikasi waktu solat mengikut latitud & longitud menggunakan HTML5 dan Google Map

Beberapa hari lepas saya mula membangunkan sebuah aplikasi bagi mengira waktu solat berdasarkan latitud & longitud di mana kita berada. Seperti biasa, ia menggunakan CodeIgniter sebagai enjin dan Twitter Bootstrap bagi menghiasi GUI aplikasi ini.

Ia dipaparkan melalui peta Google Map, di mana latitud & longitud dikesan dengan menggunakan Geolokasi HTML5. Walau bagaimanapun, tidak semua browser menyokong Geolokasi HTML5. Untuk melayari Muraii, anda perlu menggunakan browser Internet Explorer 9, Firefox, Chrome, Safari atau Opera.

Dalam proses pengiraan waktu solat tersebut, saya telah memilih untuk menggunakan kaedah pengiraan Muslim World League (MWL) kerana hasil yang diperolehi hampir sama dengan jadual waktu solat yang disediakan oleh laman web Jakim.

Insyaallah, jika berkesempatan saya akan kongsikan bagaimana untuk menggunakan Google Map API bagi menghasilkan aplikasi yang sepertinya.



Anda boleh melayari Muraii untuk melihat waktu solat di kawasan anda melalui URL ini:

http://muraii.com

Saya berkira-kira banyak lagi ciri menarik yang boleh diletakkan dalam aplikasi ini. Namun ia memerlukan ruang dan masa. Semoga ia menjadi realiti dan dapat membantu ramai orang.

Read More

Latihan CodeIgniter

Alhamdulillah, semalam dan kelmarin telah dijalankan latihan kepada rakan-rakan staf di UTHM bagi memberi kefahaman tentang penggunaan framework CodeIgniter dalam pembangunan aplikasi web.

Dalam latihan tersebut, saya menggunakan nota seperti di bawah yang sempat saya sediakan beberapa minggu lepas.

Saya kongsikan nota itu di sisni, semoga nota tersebut juga dapat memberi manfaat kepada anda.

Membina Aplikasi Web Dengan CI

Read More

Bagaimana hendak sembunyikan butang 'Cetak' semasa mencetak?

Apabila pengguna kita meminta sistem yang kita bangunkan boleh mencetak dokumen tertentu, kemudian apabila dokumen tersebut dicetak, butang 'cetak' tersebut akan dicetak sekali ke atas dokumen tersebut.

Saya rasa kita pernah berjumpa dengan situasi tersebut. Dan pasti ramai juga yang tahu cara untuk mengatasi masalah tersebut.

Di sini saya tunjukkan caranya sebagai peringatan untuk kita semua. Ia menggunakan CSS.

Style:

<style>
@media print {
p#cetak {
display: none;
}
}
</style>

Ini adalah paparan HTML bagi butang cetak tersebut:

<p id=”cetak”>
<a href=”javascript:window.print();” class=”btn btn-info”>Cetak</a>
<a href=”javascript:window.close();” class=”btn btn-info”>Tutup</a>
</p>

Read More

Siapa kita 5 tahun lagi?

Apa yang kita lakukan hari ini menentukan siapa kita 5 tahun lagi. Orang bijak pandai sering menasihati, untuk berjaya kita mesti menetapkan matlamat. Kita perlu fikir dan gambarkan, bagaimana kita 5 tahun lagi. Siapakah kita pada masa tersebut?

Cakap memang mudah. Tapi untuk menetapkannya, memang sukar bagi kita yang tiada pendirian, tiada cita-cita. Maka bermacam alasan terlontar dari mulut untuk tidak menyokong, betapa hakikatnya orang yang berjaya itu telah menetapkan matlamat mereka dengan jelas.

Maka, kita terus berada di takuk yang lama pada 5 tahun akan datang. Bagaimana kita hari ini, begitulah kita pada masa itu.

Apakah kita mahu kekal begini? Jika ya, carilah alasan. Dan memang itulah yang selalu kita lakukan pun. Jika tidak, carilah cara. Carilah cara bagaimana kita boleh menjadi apa yang kita impikan 5 tahun dari sekarang.

Ketepikan segala apa yang kita lakukan sekarang ini jika ianya tidak menyumbang kepada merialisasikan impian tersebut. Sebaliknya, gandakan kesungguhan ke atas kerja-kerja yang memberi impak dalam mencapai sasaran kita.

Insyaallah, 5 tahun lagi kita mampu menjadi apa yang kita impikan sekarang. Asalkan kita terus beristiqamah.

Kenapa 5 tahun? Ia masa yang tidak terlalu panjang atau terlalu singkat. Lakukan dahulu, dan lihat hasilnya selepas 5 tahun. Selepas itu, baru kita fikirkan untuk tingkatkan matlamat dan mencapainya dalam masa 5 tahun berikutnya.

Ayuh, jelaskan matlamat kita. Apa yang akan kita lakukan? Siapa kita? Di mana kita? 5 tahun dari sekarang..

http://rusmaini.tumblr.com/post/33565696301/siapa-kita-5-tahun-lagi

Read More

CodeIgniter, API Instagram dan Aplikasi Anda

Saya tahu, ramai pengguna di Malaysia menggunakan Instagram untuk mengambil gambar, memuatnaiknya dan dikongsikan ke laman sosial. Tidak kiralah sama ada dengan menggunakan iphone atau gajet android. Maaf, tidak untuk blackberry, symbian, bada os atau windows phone.

Tetapi saya tidak pasti, berapa ramai developer di Malaysia yang menggunakan API Instagram ke dalam aplikasi mereka. Sebagai pihak ketiga, kita boleh menggunakan data-data daripada Instagram untuk kita gunakan dalam aplikasi yang kita bangunkan untuk pelbagai tujuan.

Jika kita lihat di luar Malaysia, banyak aplikasi yang bersumberkan data Instagram telah dibangunkan seperti Webstagram,  Pinstagram, Statigram dan bermacam lagi. Kesemuanya menggunakan API dari Instagram yang telah mereka sediakan.

Saya sendiri, ada membangunkan sebuah aplikasi yang hampir sama yang diberi nama Instagramy. Ia merupakan sebuah aplikasi web yang membenarkan pengguna-pengguna Instagram mencetak foto mereka ke atas sehelai t-shirt. Cuma, bahagian cetak foto ke t-shirt belum lagi saya sempurnakan kerana ketiadaan alat yang sesuai. Ada sesiapa sudi membantu? ;)

Jadi, bagaimana saya melakukannya? CodeIgniter + API Instagram = Instagramy. Ok, bahagian pertama ini saya akan tunjukkan langkah demi langkah untuk kita menggunakan API Instagram dari pendaftaran sehingga ke paparan foto popular dari Instagram. Dan untuk proses selanjutnya seperti proses Sign in with Instagram dan sebagainya, saya akan sambung penulisan ke bahagian kedua nanti, insyaallah sekiranya ada ruang dan kelapangan.

Tutorial ini sesuai untuk anda yang sudah mempunyai asas dalam pengaturcaraan PHP dan juga framework CodeIgniter.

Langkah pertama:

Anda boleh memuat turun library untuk membolehkan CodeIgniter berhubung dengan API Instagram di sini https://github.com/ianckc/CodeIgniter-Instagram-Library. Download fail tersebut dan masukkan ke dalan folder aplikasi anda. Ia mengandungi 3 fail iaitu:

1. application/config/Instagram_api.php


2. application/libraries/Instagram_api.php


3. application/libraries/MY_Input.php

Langkah kedua:

Anda perlu daftar aplikasi anda di http://instagram.com/developer/. Pilih menu Register Your Application — Register a New Client. Ada 4 item yang perlu diisi iaitu:

• Appliaction Name — Masukkan nama aplikasi anda.


• Description — Keterangan tentang aplikasi yang anda bangunkan.


• Website — URL aplikasi anda.


• OAuth redirect_uri — URL aplikasi anda setelah pengguna berjaya log masuk

Contohnya:



Selepas itu, anda akan diberikan Client ID & Client Secret.

Langkah ketiga:

Kemudian, buka fail application/config/Instagram_api.php dan masukkan Client ID, Client Secret dan juga maklumat yang anda daftarkan tadi ke fail tersebut. Lihat contoh di bawah:

$config['instagram_client_name']	= 'Instagra.my';
$config['instagram_client_id']		= '--client id anda--';
$config['instagram_client_secret']	= '--client secret anda--';
$config['instagram_callback_url']	= 'http://instagra.my/igram/authorize/';
$config['instagram_website']		= 'http://instagra.my';
$config['instagram_description']	= 'Cetak foto instagram kegemaran anda ke t-shirt';

Langkah keempat:

Buka fail controller anda dan bina satu method atau function untuk memaparkan skrin foto popular.

function popular()
{
	$this->load->library('instagram_api');
	$data['page_title']	= 'Foto Popular';
	$data['popular_media'] = $this->instagram_api->getPopularMedia();
	$data['content'] = 'popular';
	$this->load->view('bootstrap/index',$data);
}

 Langkah kelima:

Bina view anda dan gunakan kod seperti berikut untuk paparkan foto popular dari Instagram.

$atts = array(
	'width'		=> '660',
	'height' 	=> '700',
	'scrollbars' => 'yes',
	'status' 	=> 'yes',
	'resizable'	=> 'yes',
	'screenx'	=> '0',
	'screeny'	=> '0'
);
foreach($popular_media->data as $data):
	echo anchor_popup(	'igram/photopopular/?link='.$data->images->standard_resolution->url,
										'<img src="' . $data->images->thumbnail->url . '" />',
										$atts);
endforeach;

Ok, itu sahaja. Dan anda boleh lihat senarai foto popular yang dikeluarkan oleh Instagram. Untuk membina sebuah aplikasi yang lengkap, banyak lagi yang perlu dilakukan.

Ini hanya panduan awal bagaimana anda hendak memulakannya. Saya harap ia dapat membantu anda memahami bagaimana menggunakan API Instagram dengan CodeIgniter.

Selamat berusaha.

Read More

Buku CodeIgniter

Dulu, saya ada menulis sebuah panduan berkaitan membina aplikasi web dengan CodeIgniter. Namun penulisan tersebut sangat ringkas dan belum disusun dengan rapi. Ia digunakan untuk latihan ke atas sekumpulan staf di tempat saya bekerja.

Jika anda berminat dan tercarai-cari panduan mengaturcara atau membangunkan aplikasi web dengan menggunakan perisisan sumber terbuka, bahasa pengataurcaraan PHP dan menggunakan framework CodeIgniter, silakan.. rujuk buku panduan ini. Ia boleh membantu anda.

Buku Codeigniter

Sekarang, saya sedang menulis draf buku yang sama untuk diterbitkan. Insyaallah, dalam bulan ini jika tiada aral melintang, ianya akan dihantar kepada penerbit untuk merialisasikan impian saya, iaitu menjadi penulis buku IT ;).

Insyaallah, semoga ia menjadi kenyataan.

Read More

Tapis data yang mempunyai single & double quotes ke dalam Oracle

Katakan kita membangunkan satu sistem yang akan menerima input 'Nama Penuh' dari pengguna dan kita akan menyimpan data tersebut ke dalam pangkalan data Oracle.

Jika pengguna memasukkan nama seperti Fu'ad Bin Deris tanpa kita tapis data tersebut, apakah yang akan berlaku?

Saya rasa, kita pasti akan dapat error seperti ini:

Message: oci_parse(): ORA-01756: quoted string not properly terminated

Jadi, apa yang harus dilakukan?

Di dalam CodeIgniter, biasanya saya akan tapis item tersebut dengan kaedah seperti berikut sebelum melaksanakan Query bagi menyimpan data tersebut ke dalam pangkalan data:

$nama = str_replace("'", "''",$this->input->post('nama'));

Aturcara tersebut akan menukar simbol single quote (') kepada single quote yang lengkap atau berpasangan. Maka apabila Query dilaksanakan, ia secara automatik akan menukarkan semula data tersebut kepada data yang asal iaitu dengan satu single quote.

Diharap nota ringkas ini dapat membantu anda.

Read More

Developer Selamanya

Developer! Developer! Developer!

Read More