git ssb

0+

k4ml / belajar-js



Commit b7757616f9f45cb8a72a4ff4b974a46101673ebc

Browse Files

new article di-sebalik-form

Kamal Bin Mustafa committed on 3/2/2015, 3:55:00 PM
Parent: 17cd196cdb2128c2e176498189630eab8a0e4d06

Files changed

_posts/2015-03-01-di-sebalik-form.mdadded
_posts/2015-03-01-di-sebalik-form.mdView
@@ -1,0 +1,144 @@
1+---
2+layout: post
3+title: 'Di Sebalik Form'
4+date: 2015-03-01
5+author: kamalmustafa
6+permalink: /di-sebalik-form.html
7+level: 2
8+---
9+Sebagai web developer, anda sudah biasa dengan proses membina form, dan kemudian
10+menghantar (submit) form tersebut untuk di proses di server, sama ada menggunakan
11+platform *server-side* seperti PHP, Python, .Net, Rails dan sebagainya.
12+
13+Tapi pernahkah anda terfikir, bagaimanakah data daripada *form* tersebut dihantar
14+daripada *client* (*browser*) ke *server* ? Apakah format data tersebut ?
15+
16+<!--more-->
17+
18+Asas kepada *web development* adalah [HTTP][http] (Hypertext Transfer Protocol). Ia adalah
19+protokol, atau satu bentuk piawai yang menetapkan bagaimanakah data daripada *client*
20+dihantar ke *server*. Yang bagusnya, protokol ini adalah berasaskan *text*, iaitu data
21+dihantar dalam bentuk *plain text*, berbanding sesetengah protokol lain yang memerlukan
22+data dihantar dalam bentuk *binaries encoding*.
23+
24+Ini menjadikan HTTP tidak memerlukan sebarang peralatan (*tools*) khas jika kita ingin
25+membina client atau server yang boleh 'bercakap' dalam 'bahasa' HTTP. Apa saja yang boleh
26+menghantar dan menerima teks boleh digunakan.
27+
28+<div class="admonition-warning">
29+ Protokol baru HTTP/2 bagaimanapun berbeza dengan HTTP/1.1 yang digunakan sekarang
30+ kerana ia tidak lagi berasaskan teks, tetapi dalam bentuk binari.
31+</div>
32+<div>&nbsp;</div>
33+
34+Apakah contoh satu *tools* yang boleh menghantar teks dengan mudah ke server ? Telnet !
35+
36+Ya, untuk menghantar dan menerima data melalui HTTP anda tidak perlu membina sebuah *browser*
37+seperti Firefox atau Google Chrome. Contoh, anda boleh meminta (*request*) resource daripada
38+laman web Google menggunakan telnet seperti berikut:-
39+
40+```
41+telnet www.google.com 80
42+Trying 173.194.120.114...
43+Connected to www.google.com.
44+Escape character is '^]'.
45+GET /
46+HTTP/1.0 302 Found
47+Location: http://www.google.com.my/?gws_rd=cr&ei=xc3yVKKzMYuXuAS18oGABg
48+Cache-Control: private
49+Content-Type: text/html; charset=UTF-8
50+Set-Cookie: PREF=ID=48850ef362af9ca3:FF=0:TM=1425198533:LM=1425198533:S=6i5_XBkARR8adf6f; expires=Tue, 28-Feb-2017 08:28:53 GMT; path=/; domain=.google.com
51+Set-Cookie: NID=67=e2bqYqDM8NNvzFh0-2DoYBMXsff90Meli0u3otU0yxtBELBn7WbS7zqPOYE1gf8ukH7qb08OtGS8RLf96ECSlQuCcoTnGcYPRyUGY_8OA3dFnUOLKM1EFsMbVYovs5hT; expires=Mon, 31-Aug-2015 08:28:53 GMT; path=/; domain=.google.com; HttpOnly
52+P3P: CP="This is not a P3P policy! See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."
53+Date: Sun, 01 Mar 2015 08:28:53 GMT
54+Server: gws
55+Content-Length: 262
56+X-XSS-Protection: 1; mode=block
57+X-Frame-Options: SAMEORIGIN
58+Alternate-Protocol: 80:quic,p=0.08
59+
60+<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
61+<TITLE>302 Moved</TITLE></HEAD><BODY>
62+<H1>302 Moved</H1>
63+The document has moved
64+<A HREF="http://www.google.com.my/?gws_rd=cr&amp;ei=xc3yVKKzMYuXuAS18oGABg">here</A>.
65+</BODY></HTML>
66+Connection closed by foreign host.
67+```
68+Dalam contoh di atas, setelah berjaya *connect* ke server Google pada port 80, kita menghantar
69+*request* seperti berikut:-
70+
71+```
72+GET /
73+```
74+*Request* di atas adalah sama dengan kita menaip di *address bar* browser `http://173.194.120.114/`.
75+Teks seterusnya adalah *response* yang kita dapat daripada *server* Google. 302 adalah HTTP status
76+daripada Google, manakala baris berikutnya merupakan *headers* yang menunjukkan url yang boleh kita
77+capai seterusnya. Inilah yang dinamakan *redirect* dan *HTTP client* seperti browser akan *redirect*
78+kita ke url yang diberikan.
79+
80+Menggunakan telnet sebagai HTTP client bagaimanapun agak terhad apa yang kita boleh lakukan. Dalam
81+contoh di atas, selepas *connect* ke Google, saya hanya boleh taip sebaris `GET /` dan Google terus
82+menghantar response. Saya tidak sempat untuk menghantar *headers* lain seperti `HOST` dan sebagainya.
83+Satu lagi *tools* lain yang lebih fleksibel adalah `nc`. Saya ada [menulis][nc] mengenai penggunaanya sebelum
84+ini.
85+
86+Berbalik kepada tajuk tulisan ini, mari kita lihat apakah data yang dihantar apabila kita submit *form*
87+pendaftaran di laman Facebook.com. Untuk melihat data yang dihantar, saya menggunakan kaedah yang paling
88+*simple*, iaitu menukar bahagian `<form action=...>` *form* tersebut ke tempat lain.
89+
90+<img src="http://i.imgur.com/QUF21Lj.png"></img>
91+<img src="http://i.imgur.com/rccFhbx.png"></img>
92+
93+Dalam *screenshot* di atas, saya telah menukar `<form action=...>` *form* tersebut ke:-
94+
95+```
96+http://localhost:4000/
97+```
98+Ini adalah kaedah paling *simple*. Cara lain untuk 'menangkap' data yang dihantar adalah dengan menggunakan
99+perisian seperti Wireshark atau `tcpdump`. Saya lebih gemarkan cara ini kerana data yang kita dapat lebih
100+*raw* dan tidak melalui sebarang bentuk *processing*. Ia betul-betul data yang diterima daripada browser
101+pada *socket* di *port* 4000. Untuk menerima data tersebut, kita hanya perlu menggunakan perisian bernama
102+netcat atau nc. Jalankan arahan berikut:-
103+
104+```
105+nc -l 4000
106+```
107+Arahan diatas meminta `nc` *listen* pada *port* 4000, dan bersedia menerima sebarang data yang dihantar
108+melalui *port* tersebut. Setelah kita *submit* *form* pendaftaran Facebook tadi, kita akan dapati teks
109+dibawah dipaparkan pada konsol dimana `nc` tadi dijalankan.
110+
111+Ya, inilah contoh data yang dihantar, apabila kita *submit* form pada satu-satu laman web, dalam contoh
112+ini laman Facebook.com.
113+
114+```
115+POST / HTTP/1.1
116+Host: localhost:4000
117+Connection: keep-alive
118+Content-Length: 1022
119+Cache-Control: max-age=0
120+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
121+Origin: https://www.facebook.com
122+User-Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
123+Content-Type: application/x-www-form-urlencoded
124+Accept-Encoding: gzip,deflate
125+Accept-Language: en-US,en;q=0.8
126+
127+lsd=AVpzsLKs&firstname=Kamal&lastname=Mustafa&reg_email__=kmkml%40yahoo.com&reg_email_confirmation__=kmkml%40yahoo.com&reg_passwd__=abc123&birthday_month=7&birthday_day=26&birthday_year=1991&sex=2&websubmit=&referrer=&asked_to_login=&terms=on&ab_test_data=&reg_instance=l_byVOe0tUkXB8lG29Dte0Zj&contactpoint_label=email_or_phone&locale=en_US&captcha_persist_data=AZlcaJSuaa-rSMdsK8CsS8tRNMgau9HFF2b33fK7a-ydHKi7emqwu3y-_E8fOuL3m3e5SDmXANKzSRspsF1O6ugJdZ_aCGJy0QHpi4JU0JpDypQIx2_WpbzT6OV1UhSetMP05to2mFtVK0hS50NWSbZ1BJYv_ygKP5tt1BRCEiUHyW9-hxLG-nrWUF7DBlyMeEiyDLdknXabXEtfdqMpToPOxvsb1qMymwv-9fibK9CHGGV1yD8bK3RlhSWVdsDk2Rl1V8d0-PkynVcXbT5GaJBDy-bBtctrMHHHTjzIIGATS5mKr7Dyu4qrDuUEYC3L7ipfExwoewlqrISKoTyoUhwsWhageWVrm5f7IcnRHyLeIg&captcha_session=CnTabJ0C4tNIiH63kxKnrw&extra_challenge_params=authp%3Dnonce.tt.time.new_audio_default%26psig%3DjAKLb4KI5WqB-zg_RE5QcLV8sss%26nonce%3DCnTabJ0C4tNIiH63kxKnrw%26tt%3DRXdPBAAUdMa1cxL9bQ0irk2F0lQ%26time%3D1425209003%26new_audio_default%3D1&recaptcha_type=password&captcha_response=
128+```
129+
130+Di bahagian [*server-side*](/client-side-vs-server-side.html), data di atas kemudian akan diproses ke dalam bentuk yang lebih
131+mudah untuk *developer* gunakan. Contohnya dalam platform PHP, anda akan mendapat [data di atas dalam bentuk `$_GET` atau `$_POST`](http://k4ml.github.io/ms/posts/bagaimana-_post-dan-_get-terhasil.html).
132+
133+Kita boleh meneruskan eksperimen ini untuk melihat situasi-situasi lain, contohnya apabila *submit* form menggunakan
134+jQuery.AJAX contohnya tetapi saya akan berhenti disini terlebih dahulu.
135+
136+Poin terpenting yang saya ingin rumuskan disini
137+adalah apabila kita memahami bagaimana sesuatu teknologi itu berfungsi pada tahap yang paling asas, ia akan lebih membantu
138+kita dalam menyelesaikan permasalahan berkaitan teknologi tersebut.
139+
140+Sentiasa ajukan persoalan kepada diri sendiri, bagaimana sesuatu benda itu berfungsi dan jalankan eksperimen untuk
141+mendapatkan jawapannya.
142+
143+[nc]:http://metak4ml.blogspot.com/2013/05/craft-http-requests-using-nc.html
144+[http]:https://www.ietf.org/rfc/rfc2616.txt

Built with git-ssb-web