Archive for the ‘web 2.0’ Category
การทำ Mod Rewrite (url friendly)
July 2nd, 2009 Posted 4:36 pm
Mod_Rewrite คืออะไร?
Mod_Rewrite คือการแปลง URL ที่ดูยากให้อยู่ในรูปแบบที่เราต้องการ เพื่อประโยชน์หลายด้าน (ซึ่งจะกล่าวถึงต่อไป) และการแปลงเพื่อประโยชน์ด้าน SEO ก็เป็นอีกอันนึงที่มีการนำเอา Mod_Rewrite มาใช้ เพราะเรารู้กันดีว่า Search Engine ไม่ค่อยชอบ pages ที่เป็น dynamic ที่มี query string ยาวเฟื๊อย
อ้างถึง
ตัวอย่าง URL ที่ยาว และซับซ้อน
โค้ด:
http://www.site.com/viewcatalog.asp?category=hats&prodID=53
เมื่อผ่านการแปลง เราสามารถทำให้สั้นลงได้ดังนี้
โค้ด:
http://www.site.com/catalog/hats/53/
เริ่มทำ Mod_Rewrite
บาง Server ไม่สามารถจะทำ Mod_Rewrite ได้เนื่องจากไม่ได้ติดตั้ง Module Mod_Rewrite ดังนั้นถ้าเราจำเป็นต้องใช้ Mod_Rewrite ก็ต้องตรวจสอบดีๆก่อนเช่า host
.htaccess ไฟล์สำคัญในการทำ Mod_Rewrite
เราจะใช้ไฟล์นี้ในการกำหนด Rule ของการทำ Mod_Rewrite
เริ่มต้นด้วยคำสั่ง
RewriteEngine on
เพื่อเปิดการทำงาน เขียนไว้ในบรรทัดแรกสุดของไฟล์
ต่อไปจะเป็นการนำเอา Mod_Rewrite ไปให้งาน ซึ่งผมจะเริ่มด้วยตัวอย่างง่ายๆ และเขียน Rewrite Rule ง่ายก่อน แล้วก็ยกตัวอย่างต่อไปเรื่อยๆนะครับ
ใช้ Mod_Rewrite ในการทำ Redirects
ถ้าเราต้องการเปลี่ยน location เก่า ไปที่ Location ใหม่แบบถาวร
RewriteEngine on
RewriteRule ^old\.html$ new.html
ถ้าเราเขียนแบบนี้ เมื่อมีการใส่ url เป็น old.html มันก็จะถูกส่งไปที่ไพล์ new.html แต่ผู้เยี่ยมชมยังเห็น URL บน browser เป็น old.html อยู่เหมือนเดิม
อาจจะดูงงๆ อธิบายเพิ่มเติมดังนี้ RewriteRule จะประกอบด้วยกัน 3 ส่วน
1. Call to action RewriteRule ขึ้นต้นบรรทัด กำหนดว่าบรรทัดนี้เป็น Rewrite Rule
2. Pattern ^old\.html$ เป็นการตรวจสอบ URL ที่ใส่เข้ามาทาง Location Bar ของ Browser ซึ่งจะใช้ regex (Regular Expression) ในการตรวจสอบ (จะอธิบายเพิ่มเติมต่อไป)
3. Rewrite new.html เป็น URL ที่เราต้องการให้แปลงเป็นอันใหม่
หมายเหตุ: จริงๆมี 4 ส่วน แต่ในตัวอย่างเราใช้ 3 ส่วน
ขออธิบายในส่วนที่ 2 (Pattern) เพิ่มเติมดังนี้ ในส่วนนี้ประกอบด้วยเครื่องหมายสำคัญ 3 อย่างคือ
^old\.html$
- เครื่องหมาย The caret หรือ ^ เป็นการกำหนดจุดเริ่มต้น URL ที่อยู่ภายใต้ direcory ปัจจุบันที่เราจะตรวจสอบ ซึ่งก็คือ directory เดียวกับไฟล์ .htaccess
- เครื่องหมาย The dollar sign หรือ $ ซึ่งบอกจุดสิ้นสุดของการตรวจสอบ Pattern
- อีกเครื่องหมายนึงก็คือ The period หรือ . จุด ที่อยู่ข้างหน้านามสกุล html ซึ่งเครื่องหมาย จุด นั้นเป็นอักขระพิเศษ ใน regular expressions ซึ่งจะมีความหมายว่า แทนด้วยตัวอักษรใดๆ 1 ตัว (ดูเพิ่มเติมใน regular expressions ต่อจากนี้) แต่ในนี้เราจะตรวจสอบว่า ถ้า Pattern เป็น old.html หรือไม่ เราจึงต้องใส่ \ ซึ่งเป็น escape charactor ไว้ด้วย
เมื่อเราเขียนตามนี้ เมื่อผู้เยี่ยมชมเว็บกรอกมาเป็น old.html server ก็จะทำ transparently redirect ไปที่ new.html โดยที่ผู้เยี่ยมชมเว็บไม่รู้ตัวว่าเป็นข้อมูลอันใหม่แล้ว เพราะ URL บน browser เป็น old.html อยู่เหมือนเดิม
แต่ถ้าเราต้องการให้ URL ที่ปรากฏบน browser เป็น new.html ด้วย เราก็เพียงแต่เติม [R] เข้าไปต่อท้ายบรรทัด ดังนี้
RewriteRule ^old\.html$ new.html [R]
ซึ่ง [R] ก็คือ ส่วนที่ 4 ที่ผมบอกไว้ข้างบน
4. Command Flag [R] ซึ่งจะเป็นคำสั่งพิเศษกำหนดเงื่อนไขไว้ มีหลายคำสั่งซึ่งจะบอกไว้ตอนท้าย
การใช้ Regular Expressions
จะบอกว่า เป็นส่วนสำคัญที่สุดในการทำ Rewrite และมันก็ทำความความเข้าใจได้ยากพอควร ไม่ต้องห่วงครับ เดี๋ยวผมจะอธิบายเป็นขั้นตอน และยกตัวอย่างประกอบไปเรื่อยๆนะครับ
ตัวอย่างแรก
RewriteRule ^products/([0-9][0-9])/$ productinfo.php?prodID=$1
จะเปลี่ยนจาก
productinfo.php?prodID=11 หรือ productinfo.php?prodID=99
ให้เป็น
products/11/ หรือ products/99/
ดูที่ Pattern จะมีส่วนของที่อยู่ในปีกกาเหลี่ยม [ ] เราเรียกว่า ranges
ในตัวอย่างจะเป็น [0-9] ซึ่งจะใช้ตรวจสอบว่าเป็นตัวอักษรที่อยู่ในช่วง 0-9 ใดๆ
เราสามารถตรวจสอบ ranges อื่นได้ เช่น [A-Z] ตรวจสอบว่าเป็นตัวอักษรตัวใหญ่ตั้งแต่ A-Z
[a-z] ก็เป็นการตรวสอบตัวเล็ก, ถ้า [A-Za-z] ก็ตรวจสอบว่าเป็นทั้งตัวใหญ่และตัวเล็ก เป็นต้น
และใน Pattern ก็จะมีส่วนที่อยู่ในวงเล็บ ( ) เป็นการเก็บค่าที่เราตรวจสอบพบ และตรงตามเงื่อนไข ซึ่งเราสามารถเอาค่านี้ ส่งไปให้ PHP ในส่วนของ Query String ได้ เราเรียกค่าที่ได้จากวงเล็บนี่ว่า back-reference
เราสามารถตรวจสอบและแยก back-reference ออกได้หลายๆอันใน URL อันเดียว (ดูตัวอย่างต่อๆไป) ซึ่ง back-reference ในวงเล็บแรก เวลาเราอ้างถึงเราก็จะใช้ $1 ส่วนลำดับต่อๆไป ก็จะเป็น $2, $3 ไปเรื่อยๆ
ดังนั้นผู้เยี่ยมชมเว็บ(หรือ bot ก็ได้)ก็จะเห็น url เป็น products/11/ หรือ products/99/ ซึ่ง สั้นและกระชับ โดยหารู้ไม่ว่า เราได้ซ่อน URL ที่ไม่ค่อยสวยงามและอ่านยากไว้เบื้องหลัง
ใส่ / ต่อท้าย
บางครั้งผู้เยี่ยมชมเว็บ อาจจะพิมพ์ URL แค่ products/12 ซึ่งเมื่อเข้าไปตรวจสอบใน Pattern ด้านบน ก็จะไม่ตรง เพราะ Pattern ด้านบนจะต้องมี / ต่อท้ายด้วย มันจึงไม่ทำ transparently redirect ให้เรา
เราก็มีวิธีแก้เหตุการณ์แบบนี้ ซึ่งเราก็จะเขียน Rule ใหม่เพิ่มเข้าไปดังนี้
RewriteRule ^products/([0-9][0-9])$ products/$1/ [R]
RewriteRule ^products/([0-9][0-9])/$ productinfo.php?prodID=$1
ดังนั้น เมื่อ Server ตรวจเจอ products/12 ก็จะเปลี่ยน URL เป็น products/12/ และแสดง URL ให้บน Browser ด้วย เพราะเราใส่ [R] ไว้ด้วย เมื่อเจอเงื่อนไขบรรทัดที่ 2 ก็เลยไม่มีปัญหาใดๆ ซึ่งมันก็จะส่งเป็น transparently redirect ไปที่ productinfo.php?prodID=12 ตามความต้องการของเรา
การใช้ Match Quantifiers
จะเป็นว่าตัวอย่างข้างบน เรากำหนดเป็น ^products/([0-9][0-9])$ นั่นหมายความว่า ตัวเลขที่ตามหลัง products/xx ต้องมี 2 ตัวเท่านั้น ซึ่งก็จะเป็นไปได้สูงสุดแค่ 99 แล้วกรณี productinfo.php?prodID=100 ล่ะจะทำอย่างไร?
ในกรณีนี้ เราสามารถใช้ Quantifiers เป็นตัวกำหนดได้ (Quantifiers มีหลายตัว จะอธิบายต่อไปเรื่อยๆ) ดังตัวอย่าง
RewriteRule ^products/([0-9]+)$ products/$1/ [R]
เครื่องหมายบวก + แทนอักษรตั้งแต่ 1 ตัว ถึง n ตัว (ตั้งแต่ 1 ตัวขึ้นไป) ดังนั้น [0-9]+ ก็หมายความว่า เป็นตัวเลข 0-9 ตั้งแต่ 1 หลักขึ้นไป ถ้าเราใส่ products/1 หรือ products/1000 ก็สามารถ Match case นี้ได้แล้วครับ
ข้อมูลเพิ่มเติมของ Rewrite Rule
RewriteRule
Regular expressions
Some hints about the syntax of regular expressions:
Text:
. Any single character
[chars] One of chars
[^chars] None of chars
text1|text2 text1 or text2Quantifiers:
? 0 or 1 of the preceding text
* 0 or N of the preceding text (N > 0)
+ 1 or N of the preceding text (N > 1)Grouping:
(text) Grouping of textAnchors:
^ Start of line anchor
$ End of line anchorEscaping:
\ char escape that particular charPattern Matching metacharacter Definitions
\ Use before any of the following characters to escape or null the meaning or it. \* \. \$ \+ \[ \]
^ Start matching at this point
$ End point of the match
. Any character
[] Starts a range
| Starts alternative match this|that would mean match this or that
() starts a back reference point
? match 0 or 1 time Quantifier
+ match atleast 1 or more times Quantifier
* match 0 to infinite times Quantifier
{} match minimum to maximum Quantifier {0,3} match up to 3 timesRange Definitions []
^ Negates the class. [^A-Z]+ means don?t match any uppercases
\ Use before any of the following characters to escape or null the meaning or it. [\+]+
- Range for matching [0-9]+ [a-zA-Z]+Command Flag
[R] Redirect you can add an =301 or =302 to change the type.
[F] Forces the url to be forbidden. 403 header
[G] Forces the url to be gone 401 header
[L] Last rule. (You should use this on all your rules that don?t link together)
[N] Next round. Rerun the rules again from the start
[C] Chains a rewrite rule together with the next rule.
[T] use T=MIME-type to force the file to be a mime type
[NS] Use if no sub request is requested
[NC] Makes the rule case INsensitive
[QSA] Query String Append use to add to an existing query string
[NE] Turns of normal escapes that are default in the rewriterule
[PT] Pass through to the handler (together with mod alias)
Skip the next rule S=3 skips the next 3 rules
[E] E=var sets an enviromental variable that can be called by other rules?
LINK:
http://www.askapache.com/htaccess/mod_rewrite-tips-and-tricks.html#default-mod-rewrite-hint
Tags: .htaccess, mod rewrite, url friendly
Posted in php, seo, web 2.0
QR codes ด้วย Google Chart
May 13th, 2009 Posted 1:32 pm
Google เองมีบริการและโปรเจคเยอะมากนะครับ Google Chart เองก็เป็นบริการหนึ่งที่ ฟรี อิอิ และใช้งานได้ดีด้วยครับ
Google Chart คือบริการสำหรับสร้างกราฟ ตามชื่อเลยครับ เพียงเราส่ง agument ลงไป ให้ถูกต้องเราก็จะได้เป็น image ที่สวยงามกลับมาเลยทีเดียว ถึงจะไม่หวือหวามากแบบ flash แต่นี่ก็ดีถมไปแล้ว
Chart ที่มีตอนนี้ (Today = 12/5/2552) มีทั้งหมด 9 แบบ นะครับคือ
- Line charts
- Bar charts
- Pie charts Updated!
- Venn diagrams
- Scatter plots
- Radar charts
- Maps
- Google-o-meters
- QR codes
ที่เราจะสนใจวันนี้คือ QR codes ครับผม QR code ก็คือ barcode 2D หรือ barcode 2 มิติ นั่นเอง ซึ่งเริ่มมีการใช้งานมากขึ้นแล้วในไทยด้วย เช่นผมซื้อสินค้า nokia เมื่อวันก่อนเป็นหูฟัง ก็มี barcode แบบนี้อยู่ซึ่งมีนก็มีประโยชน์หลายอย่างเลยทีเดียว
ทีนี้เรามาดูวิธีการสร้าง QR codes barcode 2 มิติ นี้ด้วย google chart กันดีกว่า อย่างแรกเลยคือ Hello World ที่ google chart สร้างไว้เป็นตัวอย่างคือ
http://chart.apis.google.com/chart?chs=150×150&cht=qr&chl=Hello%20world&choe=UTF-8
ถ้าสังเกตุดีๆ ก็ส่ง parameter เข้าไปใน google chart แค่นี้เองก็ได้แล้ว อิอิ
มาดู parameter กันดีกว่าครับ
chs ก็คือ ขนาด ในที่นี้ก็คือ 150 x 150 px
cht ก็คือ รูปแบบกราฟ ในที่นี้คือ qr เพราะเราจะสร้าง QR codes
chl ก็คือ <text to encode> หมายถึงข้อมูลที่จะทำการ encode นั่นเอง
choe ก็คือ <output encoding> เวลาที่ ถอดรหัสออกมาให้เป็น encode แบบใหน จากตัวอย่างคือ UTF-8
ทีนี้ลองนี้บ้างครับ
555 link ของเว็บผมไงล่ะครับ
อ้างอิงจาก http://code.google.com/apis/chart/types.html#qrcodes
Tags: barcode, barcode 2 มิติ, barcode 2d
Posted in seo, web 2.0
เข้าใจ sphinx full text search engine
March 13th, 2009 Posted 3:01 pm
จากที่เคยเกริ่นเรื่องเกี่ยวกับ sphinx full text search ไปแล้วทีนึง คราวนี้เรามาดูวิธีและหลักการทำงานของ full text search กัน
full text search engine นั้นจะทำงานในลักษณะของการทำ data ที่มาจากที่เรา config ไว้ มาทำเป็น index เฉพาะแบบของ fulltext search นั้นๆ ซึ่งแต่ละตัวก็จะไม่เหมือนกัน บางที่อาจจะไม่ได้ใช้แนวคิดนี้ แต่เห็นหลายๆ ที่จะเป็นแบบนี้ เพื่อให้สามารถ ค้นหาข้อมูลในรูปแบบของตัวเองได้
sphinx ก็เช่นเดียวกัน เราจะต้อง config ว่าให้ seletct ส่วนใด มาทำเป็น เนื้อความสำหรับ search ได้บ้าง หลังจากนั้นเราก็ตั้งใช้คำสั่งสร้าง index ขึ้นมา sphinx ก็จะสร้าง index ของตนเองขึ้นมา ให้สามารถทำการ search ได้ง่ายตามรูปแบบที่ตั่งไว้
การใช้งาน search นั่นเวลาจะใช้งานจึงต้องเขียนออกมาเป็นอีกส่วน ในส่วนใหญ่แล้วโปรแกรมพวกนี้ก็จะเปิด port อีก port ไว้เลยเป็นของตนเองอย่าง sphinx เองก็เปิด port ไว้เหมือนกัน ซึ่งตอนที่รัน เราก็สามารถ config ลงไปได้ด้วยว่าอยากจะเปิด port อะไีร เวลาสร้าง connection ก็ต่อมาที่ port นั้นๆที่ตั้งไว้
Sphinx เองเปิด port 3312 เป็น default ดูได้จาก sphinx.conf
# IP address to bind on
# optional, default is 0.0.0.0 (ie. listen on all interfaces)
#
# address = 127.0.0.1
# address = 192.168.0.1# searchd TCP port number
# mandatory, default is 3312
port = 3312
full text search engine ส่วนใหญ่จะมี library สำหรับติดต่อกับตัวเองพร้อมทั้ง reference มาให้อยู่แล้วเพื่อความสะดวกในการใช้งาน sphix ก็มีเช่นกัน คือ folder api ที่มาพร้อมๆ กับตัวที่ download มาติดตั้งแหละ มีทั้ง ภาษา PHP, ptyhon, ruby และ java เลยทีเดียว
รวมทั้งยังมี reference การใช้งานอีกด้วยที่ http://www.sphinxsearch.com/docs/current.html#api-reference
จากการที่เราทำ index ครั้งนึงเราก็จะ search ได้เพียงสิ่งที่เรานั่นสร้าง index ไป ดังนั้นเราก็ต้องทำ index เรื่อยๆ เช่นการทำ cronjob ของ indexer เป็นต้น
แต่การทำ cron ก็จะได้ ข้อมูลในการ search ไม่เป็นปัจจุบันเสมอ แต่จะ search ไปตามช่วงเวลาแทน sphinx เองก็มี mode ในการทำทั้ง merge index หรือการสร้าง index เสมอทุกๆ การใช้งาน ก็เอาไว้ต่อกันทีหลังแล้วกันนะ
Tags: full text search, php, python, sphinx, sphinx config
Posted in linux, mysql, php, web 2.0
เว็บสำเร็จรูป
February 15th, 2009 Posted 7:33 pm
ช่วงนี้มีคนเปิดเว็บสำเร็จรูปเยอะจริงๆ แต่ก็เอาเถอะ ส่วนแบ่งางตลาดถึงจะลดลงแต่ที่ดีๆ ก็ไม่ค่อยจะมีเท่าใหร่ เพราะ app ของการจัดการหน้าเว็บแบบสำเร็จรปนั้นยากพอตัวเลยทีเดียว ต้อง ติดต่อกับ database ตลอดและยังต้อง ออกแบบ database ดีๆอีกด้วย ไม่อย่างนั้นล่ะ ตายแน่
ช่วงนี้กำลังจะเปิด test เว็บสำเร็จรูปแต่ก็ยังไม่สมบูรณ์เท่าใหร่ กำลังเก็บ payment gateway และการแสดงผลของ หน้าเว็บให้สมบูรณ์ซะหน่อย ไม่งั้นเด่วเปิดมาแล้วก็จะหาว่า เปิดมาเพื่อให้กล่างหา อิอิ
ช่วงนี้ก็มีหลายคนที่เอา web creater ของเมืองนอกมาทำแล้วขายไนไทย ซึ่งก็พูดกันได้ง่ายๆเลยว่า ไม่รุ่งแน่นอน
database ของ เว็บสำเร็จรูป นั้นเองก็ไม่ใช่ย่อยๆ เลย อิอิ ลองดูแล้วกันว่าของเราจะเด็ดขนาดใหน แต่รับรองว่า web 2.0 เต็มๆด้วย
Tags: update เว็บสำเร็จรูป, web 2.0, เว็บสำเร็จรูป
Posted in web 2.0, เว็บสำเร็จรูป
function tag clound
February 12th, 2009 Posted 10:48 am
วันนี้ต้องเขียน tag clound ขึ้นมาให้กับ SOBI2 ตอนแรกไปโหลด Smart Tag มาแล้วแต่แค่เอา keyword ออกมาเป็น list เฉยๆ เลยไม่ได้แบบที่ต้องการ เขียนใหม่เลยซะงั้น
เริ่มต้นด้วย ก็ get keyword ออกมา ปกติแล้วก็ วน loop กรองค่านิดหน่อย แต่ที่ ไม่รู้คือ เอ่ มันตัวใหญ่ตัวเล็กยังไงหว่า 555 ก็เลยหาๆ ดูมีคนเขียนไว้ให้ดูด้วย ที่
การเขียน function tag clound ทำ link ให้หน่อย เพื่อเชิดชูเจ้าของ อันนี้เป็นการแสดงออกมาในรูปแบบของ style ที่ มีค่าของ font size ต่างกันครับ
ขอบคุณไว้ ณ ที่นี้ครับผม
Tags: function tag, tag, tag cloud
Posted in php, web 2.0
