Material Design Lite

Setelah sekian lama menanti akhirnya muncul juga sebuah boilerplate yang bebas jQuery. Material Design Lite ini baru saja dikeluarkan oleh Team Google. Saya mendapat tahu pun dari salah seorang penggiat javascript terkemuka, Encik Addy Osmani yang menyiarkannya di halaman Facebook peribadinya. Komponen yang terdapat dalam pustaka ini tidaklah sebanyak Twitter Bootstrap tetapi ternyata banyak komponennya adalah yang paling kritikal digunakan ketika membangun sebuah aplikasi. 

Saya berkesempatan mengujinya bersama Laravel (Sekadar suka-suka :) ). Saya mula memuat turun menggunakan NPM dan mengurus fail-failnya menggunakan Laravel elixir, yakni Gulp. Mudah dan kemas. Alhasil, saya sempat membuat landing page menggunakan template yang dibekalkan dan sedikit sahaja kerja-kerja pengubahsuaian perlu dilakukan. Harap anda semua boleh berkongsi pengalaman kalau kira ada menggunakan boilerplate ini ya.

More security added for your BackboneJS apps

I've been exploring this simple login mechanism used by Clint where he simply depends on the PHP session to authorize the user on every request made to PHP REST server. Alhamdulillah it solves my problem on how to authenticate user on BackboneJs apps (star or fork it here). But I still feel something is not right because when you are building the Ajax apps, you cannot simply authorize the session or cookie just like you usually do your traditional PHP apps. I read more about how to validate, authorize, authenticate, etc the AJAX apps.

After spending time reading this, I thought Clint's apps lack of basic CSRF. So here is snippet to make your BackboneJs Apps more secure

Please refer to index.php file where you can see all the slim framework code, look for function name "login" and "authorize" 

Simply replace the code above. The snippet now will authenticate every request made to the server. Check this out in your debugger console.

Before user login

After login and request protected data

As for the front end, you will need to modify your login script by define the request header

The flow with this approach may go something like this:

1. The user navigates in their browser to the BackboneJs application
2. The server returns a basic web page and a JavaScript application
3. The JavaScript application can’t find an authentication token in the web site’s cookies
4. The JavaScript application displays a login form
5. The user enters correct login credentials and then submits the form
6. The server validates the login information and creates an authentication token for the user
7. The server sets the authentication token in a cookie/session and returns it to the JavaScript application
8. The JavaScript application makes a request for some protected data, sending the authentication token in a custom header
9. The server validates the token and then returns the data

as you noticed, i used jQuery's function and Twitter Bootstrap's CSS class.

jQuery: Table Pagination yang ringkas (beserta Callback)

Buat masa ini saya sedang banyak meluangkan masa dengan paparan data menggunakan element TABLE. Secara umumnya saya mempunyai pilihan untuk mengatur langsung muka surat dari server atau diproses langsung di bahagian client. Tetapi pada saya lebih mudah kalau kita manfaatkan pilihan sedia ada; $.ajax. Sampel kali ini hanya akan memaparkan butang sebelum dan selepas sahaja. Tidak seperti kebanyakan pustaka yang ada diluar sana, kebanyakan lebih suka untuk memaparkan butang nombor muka surat.

Jom Install NodeJS dekat Windows

Niat asal nak cari cara pasang Ghost, tapi jumpa cara mudah pasang NodeJS pula untuk Windows. Nice...

Terus semangat belajar Javascript

Mulanya dulu niat menggunakan Javascript (JS) adalah sekadar suka-suka. Nak tau saiz skrin pengunjung, nak halang klik-kanan, nak elakkan orang curi artikel, nak tolong orang buat mouse ada api-api, nak bagi jadi lagi best, (nak belagak ahhaa..) dan macam-macam lagi. Semua kegunaan / logiknya tiada yang memberi manfaat pada business logic (logik niaga). Tapi ramai orang menganggap penting dengan keupayaannya sebab ia seolah-olah "membuai" pengunjung website, seolah-olah mereka ada hubungan yang unik terhadap laman yang dikunjunginya. Mereka mahu website yang hidup yang dapat memberikan mereka merasai.

Interaktif. Itulah dia kepentingan JS.

Memahami Javaskrip yang tak Segerak (Async, Asinkron)

Berlatarbelakang sebagai seorang pengaturcara PHP (yang tak serius), saya sudah terbiasa arahan koding dilaksana secara baris demi baris. Satu persatu. Pada saya itu agak mudah dan senang untuk menjangkakan hasilnya kerana dalam kehidupan seharian juga begitu. Fokus diberi pada satu-satu arahan / benda / misi agar pelaksana itu mudah menerima dan memahami arahan dan mudah juga untuk dikerjakan kerana hanya ada satu kepala, sepasang mata, dua tangan dan dua kaki, didegup satu jantung.

Berlainan dengan dunia pemprograman web client, arahan tidak dititah atau diturut seperti yang sepatutnya. Ada dua jenis ragam yang harus saya biasakan diri: sync (segerak) dan async (tak segerak). Kebiasaannya jenis yang segerak itu memang saya maklum kerana lakunya persis seperti arahan-arahan PHP yang biasa.

Belajar BackboneJS I

Pustaka BackboneJS ini boleh juga diibaratkan seperti makanan yang berat umpama Nasi Arab yang lambat dihadam oleh perut. Jika mahu menikmatinya, harus dicuit sikit demi sedikit, dikunyah sebaik-baiknya supaya tercerna sempurna. Jika tidak alamatnya anda mungkin tercekik, atau menjadi sedu bahkan lebih teruk lagi keracunan makanan. Sama juga halnya dengan BackboneJS. Jika mau menguasainya, Ia perlu dipelajari sikit demi sedikit. Ada tatatertibnya. Jika tidak anda akan jemu (atau muntah balik) jika tidak sabar menguasainya. Ada sifat tertentu untuk kuasainya. Sebagai contoh anda memerlukan ketekunan untuk memahami setiap objeknya yang boleh diupaya kebolehannya (extend).