Tutorial

February 20, 2016

Membuat Blog Sederhana Dengan PHP – Mengambil Artikel Dari Database

Pada tutorial sebelumnya, kita sudah mempersiapkan sebuah database dan beberapa tabel untuk menyimpan artikel dan komentar. Kali ini saya akan mendemokan bagaimana mengambil data dari sebuah tabel dan menampilkannya ke halaman web. Sebelum mengambil data dari database, perlu dibuat sebuah koneksi dulu antara PHP dan Database dalam kasus ini menggunakan MySQL. Dibawah ini adalah step-step yang harus dilalui hingga mendapatkan sebuah data dari database:
  1. Buat koneksi PHP dengan database
  2. Pilih salah satu atau lebih database yang akan digunakan. Dalam kasus ini nama databasenya adalah blog.
  3. Menyiapkan query SQL
  4. Mengeksekusi SQL
  5. Mengambil hasil eksekusinya
  6. Menampilkan ke halaman web
Baca Selengkapnya...
February 19, 2016

Bermain Format DateTime dengan Javascript Dan Moment.js

[caption id="" align="aligncenter" width="600"]MomentJS MomentJS[/caption] Dalam post sebelumnya tentang Bermain Format DateTime dengan PHP dijelaskan bahwa PHP mempunyai Relative Format yang mempermudahkan developer dalam memanipulasi DateTime format. Berbeda dengan Javascript, tidak ada built-in class yang dapat membantu memanipulasi DateTime format. Untuk itu kita butuh class tambahan/plugin yang dapat menghandle semua hal tersebut. Salah satu library yang pernah saya pakai adalah Moment.js Baca Selengkapnya...
February 13, 2016

Bermain Format DateTime dengan PHP

Bagi sebagian orang mungkin pernah merasakan betapa rumitnya bermain dengan format DateTime. Format satu ini bikin kepala puyeng kalau belum mengerti cara kerjaanya. Kali ini saya akan mendemokan beberapa cara bermain dengan format DateTime. Sebelum masuk ke contoh kasus, ada baiknya jika mempelajari tentang beberapa hal berikut ini:
  1. Menggunakan TimeStamp [crayon-5f9c1b17b2118212715347/] Kamu bisa langsung mencoba script diatas menggunakan PHPFiddle. Contoh ditas akan memajukan tanggal hari ini selama seminggu. Contoh lain: Memajukan selama satu jam. [crayon-5f9c1b17b211c140870432/] Initnya time() + durasi waktu yang diinginkan. Contohnya jika ingin 3 bulan. Berangkat dari bulan hingga ke detik. Jadi, 3 bulan, 30 hari, 24 jam, 60 menit, 60 detik. time() + (3 * 30 * 24 * 60 * 60). Permasalahan timbul saat tiap bulan tidak mempunyai jumlah hari yang sama. Lalu bagaimana supaya bisa pas dengan jumlah hari tiap bulannya? Kita bisa memperbaikinya menggunakan Relative Formats yang akan saya jelaskan dipoint berikutnya.
  2. Menggunakan DateTime Class Penggunakan TimeStamp kurang cocok untuk jumlah yang relative atau berbeda tergantung dari tahun dan bulannya. Kalau untuk hal-hal yang sama seperti jam, menit, detik. Itu tidak masalah. Tetapi untuk jumlah hari? Berbeda cerita.Saya akan jelaskan contoh menggunakan Relative Formats: [crayon-5f9c1b17b211e083411399/] +1 day adalah salah satu contoh relative format. Kamu bisa menggantinya dengan +1 week atau +1 month+1 month disini sudah diperhitungan banyaknya hari tiap bulannya, termasuk bulan kabisat. Kamu juga bisa mencari misal hari senin pertama bulan berikutnya dengan First Monday of next month. Banyak hal yang bisa kamu lakukan dengan relative format.
February 12, 2016
Tutorial Inspect Element: KlikBCA, Mengubah Saldo Menjadi 1M

Tutorial Inspect Element: KlikBCA, Mengubah Saldo Menjadi 1M

Kali ini saya akan membagikan bagaimana cara mengubah saldo KlikBCA kamu menjadi 1M. Ya, kamu tidak salah dengar Rp 1.000.000.000,- (Satu miliar rupiah).

Bagi web developer ini bukan hal yang asing lagi. Semua bisa dilakukan dengan sangat mudah. Asal tau caranya.

Saya akan perkenalkan yang namanya inspect elemnt. Hampir semua browser memiliki fitur satu ini. Sekedar share masa lalu sebelum adanya inspect element. Browser opera lebih dahulu memperkenalkan fitur ini tetapi dengan fitur yang sangat minim. Harus ditrace secara manual, tidak seperti yang sekarang. Sudah sangat memudahkan para developer web.

Untuk tutorial kali ini, saya akan mendemokannya menggunakan browser Google Chrome.

1. SIlakan login ke klikBCA

2. Masuk ke Informasi Rekening > Informasi Saldo

KlikBCA - Informasi Saldo
KlikBCA - Informasi Saldo

3. Sekarang klik kanan tepat diangka saldo kamu. Dalam khasus diatas adalah "100.000.000" lalu pilih inspect

4. Kamu akan melihat sepert ini

KlikBCA - Inspect Element
KlikBCA - Inspect Element

6. Sekarang lihat saldo kamu. Taraaaaaaaaaaaaaaa…

KlikBCA - 1M
KlikBCA - 1M

Selamat, kamu sudah bisa meng-hack situs bank tersohor di Indonesia yaitu BCA. Sebentar-sebentar, itu bukan hacking kok. Saya hanya bercanda. Kamu baru saja mengubah tampilan luarnya saja. Bukan di-"dalam" systemnya. Tidak percaya? Coba kamu refresh browser kamu dan check saldomu. Sama saja kan? Iya, karena kamu hanya mengubah tampilan luarnya saja.

Penjelasan saya terlalu ribet? Terima saja, karena cukup rumit jika saya jelaskan semuanya. Intinya, ini bukan hacking, semua website dapat dimanipulasi sedemikian rupa sesuka hati kamu.

Tujuan saya membuat ini supaya tidak mudah tertipu dengan screenshot2 bertebaran didunia maya yang mengatakan mendapatkan sekian juta dalam 1 bulan bahkan beberapa ratus juta. Berhati-hatilah, karena itu bisa dilakukan dengan mudah.

Selalu berhati-hati, selalu check kebenarannya

Semoga tutorial kali ini bermanfaat.

February 11, 2016
Selenium

Selenium IDE: Browser Automation Testing

Sebagai web developer. Hal yang paling membosankan adalah testing. Dimana para developer harus mencoba satu per satu setiap fitur yang ada. Permasalahannya adalah saat fitur yang dikerjakan semakin banyak dan kebutuhan waktu untuk testing semakin meningkat. Waktu hanya akan terbuang pada testing saja. Belum lagi dampak(impact) yang ditimbulkan tiap kali membuat fitur baru atau memperbaiki bug dapat menyebabkan fitur lain yang kelihatannya tidak ada hubungannya menjadi error atau memunculkan bug baru. Disini saya akan memperkenalkan Selenium, sebuah software untuk mengotomatisasi testing sebuah website. Bisa dikatakan ini mirip sebuah bot yang akan selalu mengisi sebuah form dan mensubmitnya sesuai permintaan kita. Pertama kali menggunakan, selenium akan merekam semua aktifitas user. Seperti mouse klik, semua tombol keyboard, field yang diisi. Jika dirasa cukup, kamu dapat langsung mencoba menjalankannya lagi. Saya akan menunjukkan cara menggunakan Selenium menggunakan browser Firefox, karena untuk Selenium IDE hanya ada dibrowser Firefox.
  1. Buka Firefox
  2. Install plugin Selenium IDE
  3. Restart Firefox
  4. Cari Selenium IDE ke Tools > Selenium IDE
  5. Maka akan muncul windows seperti dibawah ini: [caption id="" align="aligncenter" width="674"]Selenium IDE Selenium IDE[/caption] Base URL: Link utama diaman dapat diubah-ubah sesuai yang diinginkan. Ini berguna saat develop web di domainA.com dan berpindah ke domainB.com. Untuk mengatasi kejadian ini, tidak perlu merekam ulang semua testing yang sudah dibuat. Tinggal ganti saja Base URL nya. Test Case: List test case yang sudah pernah direkam sebelunya. Banyak hal lain yang bisa diexplore, tetapi untuk sekarang itu dulu saja.
  6. Masuk ke google.com
  7. Tekan tombol merah kanan untuk memulai merekam semua kegiatan browsing.
  8. Lalu coba ketikkan keyword "selenium" di google dan tekan enter.
  9. Lalu lihat jendela Selenum IDE lagi. Pada tab tabel sudah terisi dengan berbagai perintah. Jika iya, berarti sudah benar.
  10. Stop dengan menekan tombol merah
  11. Lalu coba klik tombol hijau mirip symbol "play" di software musik.
  12. Jika benar, semua tindakanmu digoogle akan diulangi lagi.
Kamu juga bisa membuat test case baru dan memberi nama yang sesuai. Setelah itu test case dapat di simpan/save untuk di buka lain waktu. Semoga dengan ini bisa memperingan proses testing kamu ya. Sebenarnya banyak metode testing. Mungkin akan saya jabarkan lain waktu.
January 21, 2016

Membuat Blog Sederhana Dengan PHP – Membuat Draft Artikel Pada Database

Kali ini kita akan membuat draft artikel pada database yang sudah dibuat sebelumnya. Jika belum membaca artikel sebelumnya bisa langsung melihatnya disini. Ada sedikit perubahan struktur tabel pada posting sebelumnya Pembuatan Database. Silakan hapus(drop) semua tabel kamu dan jalankan script dibawah ini: [crayon-5f9c1b17b2539813525247/] Yang berubah adalah penambahan AUTO_INCREMENT. Sekarang jalankan script dibawah ini untuk menambahkan 5 draft artikel untuk selanjutnya di munculkan pada halaman depan blog: [crayon-5f9c1b17b253e140821097/] Lihat isi tabel articles kamu. Jika semua berjalan dengan benar maka akan muncul seperti dibawah ini: [caption id="" align="aligncenter" width="372"]Isi Tabel Articles Isi Tabel Articles[/caption]
January 21, 2016

Membuat Blog Sederhana Dengan PHP – Pembuatan Template

[caption id="" align="aligncenter" width="1200"]HTML5 - Hyperspace HTML5 - Hyperspace[/caption] Untuk template saya akan menggunakan template Hyperspace buatan HTML5 UP!. Untuk mendownloadnya bisa langsung ke websitenya atau melalui link ini Download. Baca Selengkapnya...
January 20, 2016

Setting Virtual Host Pada Windows 7

Kali ini saya akan menjelaskan bagaimana membuat virtual host pada Windows 7. Pada dasarnya semua OS sama, hanya saja mungkin tempat filenya berbeda. Apa itu virtual host? Jadi virtual host itu seperti membuat domain sendiri di komputer kita. Contoh: Kita dapat men-setting supaya kalau kita mengakses johanessurya.com bukan masuk ke website ini tetapi menjalankan file HTML local kita. Baca Selengkapnya...
January 12, 2016

Menggunakan GIT di Shared Hosting HostGator

Lebih mudah melakukan git pull dari pada harus upload satu persatu file yang berubah, tetapi kendalanya tidak semua hosting menyediakan fitur GIT apalagi yang hanya shared hosting. Kali ini saya akan berbagi bagaimana menggunakan git di shared hosting hostgator. Yang perlu dilakukan hanya 2 hal:
  1. Koneksi ke server menggunakan SSH
    • Silakan menggunakan software SSH
    • Jika menggunakan linux ketik "ssh -p 2222 usernamemu@domainmu_atau_ip_server"
    • Akan muncul untuk memasukkan password. Password sama dengan login cpanel
  2. Setting SSH Key kalau diperlukan. Bisa dilihat disetiap provider git. Contoh setting SSH Key di GitHub
  3. Menggunakan GIT seperti biasanya. Coba ketikkan "git". Maka kamu akan melihat bahwa HostGator menyediakan fitur GIT di shared hostingnya.
Sekian tutorial singkat ini. Semoga bermanfaat.