Neighbor
เพื่อนบ้าน ภาครูปภาพ!
QR Code
สำหรับมือถือ
นกน้อย จิ๊บๆ
เพิ่มความเร็วเว็บด้วยการทำ Cookieless Domain
เล็กๆ น้อยๆ
เมื่อเว็บเราโตขึ้นเรื่อยๆ .. ปัญหาก็มากขึ้นเรื่อยๆ ด้วยเช่นกันและเมื่อมีเว็บไซต์ที่คล้ายๆ เรามากขึ้นเรื่อยๆ ตัวที่จะตัดสินคุณภาพของเว็บนั้นๆ ก็คือ ความเร็วครับ
ความเร็วเป็นปัจจัยที่ Google เพิ่งจะเพิ่มเข้ามาในบอทตัวใหม่ "คาเฟอีน"
อย่างไรก็ดี Google ไม่ได้บอกว่าเพิ่มเข้ามา แต่เขาตอบว่า "อาจจะ" แต่!
นั่นก็หมายความว่า ในอนาคตต้องมีการคิดถึงแฟกเตอร์นี้แน่นอน ฉะนั้นเราควรจะเตรียมพร้อมซะก่อน (ต่อยก่อนได้เปรียบ)
1 ใน วิธีการที่ผมจะแนะนำก็คือ Cookieless Domain ครับ
Cookieless Domain ก็คือ การที่เราลดการใช้ Cookie ลง ในการโหลดข้อมูลที่ "คงที่"
"คงที่" ในที่นี้คืออะไร ก็จำพวก รูปภาพ, วิดีโอ, เพลง ข้่อมูลที่ไม่เปลี่ยนแปลงนั่นเอง
เพราะว่าข้อมูลคงที่เหล่านี้ ไม่จำเป็นต้องใช้ Cookie ในการประมวลผลเลย
เวลา Client Request รูปเหล่านี้ ถ้าเป็นเว็บทั่วไป ก็จะมี Cookie ปนมาด้วย
Cookie อันที่จริงก็คือ ข้อมูล Text File ขนาดเล็กๆ ที่เก็บอยู่ในเครื่องผู้ใช้(Client) เป็นไฟล์ที่เล็ก ก็จริงอยู่
แต่ทำไมเราต้องเสียเวลาในการรับส่งข้อมูลแบบนี้ ทุกครั้ง ? ไม่จำเป็นเลยสักนิด! การโหลดรูปภาพไม่ได้ใช้ Cookie ประมวลผลสักหน่อย
แล้วยิ่งถ้าเราโหลดรูปเยอะๆ ไฟล์ CSS หลายไฟล์ ยิ่งเว็บที่เป็นภาพใหญ่ๆ แล้ว admin ไอเดียดีครับ ใช้ตัดเป็นภาพเล็กๆ ให้โหลดไวขึ้น (หารู้ไม่ว่าก็รับ-ส่ง Cookie หลายรอบเช่นกัน)
เหมือนปริมาณทวีคูณ 1 ครั้งละน้อยๆ ก็จริง แต่ถ้า 10 ครั้งล่ะ ขนาดเว็บผมยังประมาณ 10 ครั้งได้
ไม่ต้องนับถึงเว็บอื่นเลยครับ เว็บบล็อกกากๆ แบบนี้ยังโหลดกระจุย!
วิธีการแก้ก็คือ ให้เราแยกข้อมูลคงที่ไปไว้อีกโดเมนนึงครับ หรือก็คือซับโดเมนนั่นเอง (ของพี่ Google เขามี gstatic.com เลยนะครับ เอาไว้เก็บข้อมูลโดยเฉพาะ)
เพราะโดยธรรมชาติของ Cookie แล้ว ไม่สามารถที่จะข้ามโดเมนกันได้อยู่แล้วครับ (ซับโดเมนนนั้นเก็บแต่ข้อมูลคงที่ ไม่มีทางมี Cookie แน่นอน)
หรือ ถ้าแก้ทางโปรแกรมเมอร์ก็คือ กำหนด path ของ Cookie ครับ แต่ส่วนนี้แก้ยากหน่อย เพราะว่าส่วนมากไม่มีใครเขากำหนด path กันหรอกครับ ก็คือเขียนให้ใช้ทั้งเว็บเลย ควบคุมง่ายกว่าเยอะ
มั่วโดย: Luscentz เมื่อ: เจ็ดเดือนที่แล้ว ตอนตีสอง [ 0 ความเห็น | เพิ่มความเห็น ]
แท๊ก: Cookie Google Optimize
หมวดหมู่: Web Developer
แท๊ก: Cookie Google Optimize
หมวดหมู่: Web Developer
มาทำ Mod_rewrite ใน SMF กันดีกว่า!
เพิ่มความเสียว(SEO) ให้บอร์ด SMF ครับ!
ยาวมากขอบอก!!!ผมใช้ Appserv 2.5.2 นะครับ เป็นตัวอย่าง
Code:
root dir: C:\AppServ\www\Lab\SMF
เอาละครับ เริ่มจาก SMF 1.1.11 เพิ่งลดสดๆ หมาดๆ เลยครับ^^"
ผมโมภาษาอังกฤษนี้แหละนะครับ ไม่ต่างกัน
เราจะลองทำทีละขั้นนะครับ ลองกัดสดๆ ขั้นตอนไหนไม่ได้ก็แก้ปัญหาไป
ขั้นแรก! ออกแบบ URL ครับ!
ในตัวอย่างผมจะใช้แบบนี้ครับ
Code:
bbslab/board/1-General-Discuzz.html <--- ใช้เวลาเลือกเว็บบอร์ด
bbslab/topic/123453-สวัสดีชาวโลก.html <--- ใช้เวลาเลือกกระทู้ครับ
bbslab/topic/123453-สวัสดีชาวโลก.html <--- ใช้เวลาเลือกกระทู้ครับ
ขั้นที่สอง! มั่ว .htaccess ทำ Mod_Rewrite ครับ
เพิ่มไฟล์ .htaccess ไว้ที่ root โฟลเดอร์
ในที่นี้ก็คือ ->
Code:
C:\AppServ\www\Lab\SMF\.htaccess
ผมลองเขียนเนื้อหาไปว่า
Code:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^board/(\d )-.*\.html index.php?board=$1 [L]
RewriteRule ^topic/(. ?)-.*\.html index.php?topic=$1 [L]
</IfModule>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^board/(\d )-.*\.html index.php?board=$1 [L]
RewriteRule ^topic/(. ?)-.*\.html index.php?topic=$1 [L]
</IfModule>
ลองมั่ว regexp เอานะครับ ผมพูดตรงๆ อีกแล้วว่า ผมมั่วมาคร้าบบบบ (เทพๆ อย่าแอบยิ้มนะครับผมอาย)
เรามาลอง url โดยการพิมพ์เข้าไปที่ address bar ครับ แบบในรูปเลยครับ
--
--
ปรากฏว่าหน้าเข้าบอร์ดเปลี่ยนไปตามที่คำนวณมาอย่างเนิ่นนาน หึๆ (แล้วตะกี้ใครมันว่ามั่ว(วะ))
ลอง url ของหน้ากระทู้บ้างครับ
--
--
เข้ามาได้ครับ! เป็นอันว่าการออกแบบ url ผ่านครับ!!
(ในส่วนการออกแบบ url ท่านเอาไปประยุกต์ต่อได้เองตามสบายเลยครับ ต้องฝึกแก้ mod_rewrite แค่นั้นเอง)
*Note: บางท่านอาจจะสังเกตุเห็นแล้วว่า คีย์จริงๆ ของการ mod_rewrite แบบนี้ก็คือเลขที่อยู่ข้างหน้ากระทู้เองครับ! (กับต้องลงท้ายด้วย .html)
ไอตรงส่วนข้อความ ไม่ได้เอามาคิดอะไรเลย! เป็นคำพูดหลอกๆ ให้รู้ว่าลิ้งนั่นเกี่ยวกับอะไรเฉยๆ ตัวประมวลผลจริงๆ คือเลขครับ
bbslab/board/1-General-Discuzz.html หากท่านเปลี่ยนเป็น bbslab/board/1-อ็อด-อ็อด.html ก็ยังคงเข้าได้ครับ (เลข 1 เหมือนเดิม ลงด้วย .html เหมือนเดิม)
ต่อเนื่องนะครับ ขั้นตอนที่ 3!
ขั้นตอนที่เหลืออยู่มีเพียงแค่ว่า เราจะต้องแก้ลิ้งที่แสดงในเว็บบอร์ด จากเดิมที่เป็น ?board=xx, ?topic=xx ให้เป็นในฟอแมทของเรา
ก่อนอื่นเราต้องไปเคลียร์ url หน้าแรกของบอร์ดก่อนครับ! ให้เราเปิด Sources/QueryString.php (ในที่นี้จะอยู่ตำแหน่ง C:\AppServ\www\Lab\SMF\Sources\QueryString.php)
ค้นหา ->
Code:
$scripturl = $boardurl . '/index.php';
แล้วแก้ไขเป็น ->
Code:
$scripturl = $boardurl . '/';
ต่อมาเริ่มจากหน้าแรกบอร์ดครับ ต้องแก้ที่ไฟล์ Sources/BoardIndex.php (ในที่นี้จะอยู่ตำแหน่ง C:\AppServ\www\Lab\SMF\Sources\BoardIndex.php)
ค้นหา ->
Code:
$this_category[$row_board['ID_BOARD']] = array(
ค้นมาเรื่อยๆ จะเจอ
Code:
'href' => $scripturl . '?board=' . $row_board['ID_BOARD'] . '.0',
'link' => '<a href="' . $scripturl . '?board=' . $row_board['ID_BOARD'] . '.0">' . $row_board['boardName'] . '</a>'
'link' => '<a href="' . $scripturl . '?board=' . $row_board['ID_BOARD'] . '.0">' . $row_board['boardName'] . '</a>'
ก็ให้แก้ไขเป็น
Code:
'href' => $scripturl . 'board/' . $row_board['ID_BOARD'] . '-' . $row_board['boardName'] . '.html',
'link' => '<a href="' . $scripturl . 'board/' . $row_board['ID_BOARD'] . '-' . $row_board['boardName'] . '.html">' . $row_board['boardName'] . '</a>'
'link' => '<a href="' . $scripturl . 'board/' . $row_board['ID_BOARD'] . '-' . $row_board['boardName'] . '.html">' . $row_board['boardName'] . '</a>'
ต่อมา ค้นหา ->
Code:
$this_category[$row_board['ID_PARENT']]['children'][$row_board['ID_BOARD']] = array(
จะเจอเหมือนข้างบนเลยครับ แล้วก็แก้ด้วยวิธีเดียวกัน
มีขอระวังเล็กน้อยก็คือว่า ท่านต้องสังเกตุนะครับว่า 'link' ที่ท่านกำลังแก้ มันเป็นของ Board หรือ Topic หรือ User!
แล้วดูยังไง ?
Code:
'href' => $scripturl . '?board=' . $row_board['ID_BOARD'] . '.0', <--- ของบอร์ดชัดเลยครับ (?board=)
ในส่วนนี้ให้ท่านแก้แค่บอร์ดก่อนครับ ตามวิธีการด้านบน อย่าเพิ่งเก่งแก้ topic ด้วยครับ
พอแก้หมดแล้วลองรีเฟรชบอร์ด แล้วทดสอบดูครับ ดังรูป
--
พบว่า url เปลี่ยนไปแล้ว ก็ลองคลิกๆ ดูครับ เข้าได้จริงไหม!
ขั้นตอนนี้ เอาให้เคลียก่อนนะครับ !!
ต่อมาเราจะแก้ของ Topic ครับ โดยยังยึดที่ไฟล์เดิมครับ BoardIndex.php
คราวนี้ค้นหา ->
Code:
?topic=
จะเจอ
Code:
$this_last_post['href'] = $scripturl . '?topic=' . $row_board['ID_TOPIC'] . '.msg' . ($user_info['is_guest'] ? $modSettings['maxMsgID'] : $row_board['new_from']) . (empty($row_board['isRead']) ? ';boardseen' : '') . '#new';
ก็แก้เป็น
Code:
$this_last_post['href'] = $scripturl . 'topic/' . $row_board['ID_TOPIC'] . '.msg' . ($user_info['is_guest'] ? $modSettings['maxMsgID'] : $row_board['new_from']) . (empty($row_board['isRead']) ? ';boardseen' : '') . '-'.$row_board['short_subject'].'.html#new';
ผมเปลี่ยน ?topic= เป็น topic/ แล้วก็เติม '-'.$row_board['short_subject'].'.html#new'; เพื่อสร้าง title ต่อท้ายเลข 1 แล้วก็ปิดด้วย .html ตามสูตร
ค้นต่อไปคับ จะเจอ
Code:
$this_event['href'] = $this_event['topic'] == 0 ? '' : $scripturl . '?topic=' . $this_event['topic'] . '.0';
อันนี้ไม่สนใจครับ เป็นส่วยย่อยใน Calendar (ท่านจะทำก็ได้ แต่ผมไม่ทำคับ ขี้เกียจ -> เหตุผลง่ายไหมครับ)
หมดแล้วครับ สำหรับหน้าแรก ลองเปิดบอร์ดมาเลยครับ ลองกดๆ ดูว่าติดอะไรไหม ถ้าไม่ติดเราจะเข้าไปแก้อีกหน้านึงครับ (วิธีนี้แก้แค่ 2 หน้าก็พอครับ!)
--- หน้าแรกมันแค่เด็กๆ ครับ อีกหน้านึงอ้วกแน่!
คราวนี้มาแก้ที่ไฟล์ MessageIndex.php (ในที่นี้อยู่ที่ C:\AppServ\www\Lab\SMF\Sources\MessageIndex.php)
เราจะทำ Board ก่อนเหมือนเดิมนะครับ ค้นหา -> ?board=
(อันที่ผมไม่พูดถึง ผมไม่ทำนะครับ เราหวังผลเสียวอย่างเดียว ไม่ได้หวังเอาบอร์ดเทพ)
จนกว่าจะเจอ
Code:
'href' => $scripturl . '?board=' . $row_board['ID_BOARD'] . '.0',
'link' => '<a href="' . $scripturl . '?board=' . $row_board['ID_BOARD'] . '.0">' . $row_board['name'] . '</a>'
'link' => '<a href="' . $scripturl . '?board=' . $row_board['ID_BOARD'] . '.0">' . $row_board['name'] . '</a>'
แก้ไขเป็น
Code:
'href' => $scripturl . 'board/' . $row_board['ID_BOARD'] . '-' . $row_board['name'] . '.html',
'link' => '<a href="' . $scripturl . 'board/' . $row_board['ID_BOARD'] . '-' . $row_board['name'] . '.html">' . $row_board['name'] . '</a>'
'link' => '<a href="' . $scripturl . 'board/' . $row_board['ID_BOARD'] . '-' . $row_board['name'] . '.html">' . $row_board['name'] . '</a>'
เจอ
Code:
'href' => $scripturl . '?board=' . $row['ID_BOARD'] . '.0',
'link' => '<a href="' . $scripturl . '?board=' . $row['ID_BOARD'] . '.0">' . $row['name'] . '</a>'
'link' => '<a href="' . $scripturl . '?board=' . $row['ID_BOARD'] . '.0">' . $row['name'] . '</a>'
แก้ไขเป็น
Code:
'href' => $scripturl . 'board/' . $row['ID_BOARD'] . '-' . $row['name'] . '.html',
'link' => '<a href="' . $scripturl . 'board/' . $row['ID_BOARD'] . '-' . $row['name'] . '.html">' . $row['name'] . '</a>'
'link' => '<a href="' . $scripturl . 'board/' . $row['ID_BOARD'] . '-' . $row['name'] . '.html">' . $row['name'] . '</a>'
เจอ
Code:
$context['boards'][$row['ID_PARENT']]['link_children'][] = '<a href="' . $scripturl . '?board=' . $row['ID_BOARD'] . '.0">' . $row['name'] . '</a>';
แก้ไขเป็น
Code:
$context['boards'][$row['ID_PARENT']]['link_children'][] = '<a href="' . $scripturl . 'board/' . $row['ID_BOARD'] . '-'.$row['name'].'.html">' . $row['name'] . '</a>';
ที่แก้มาข้างบนจะใช้ในกรณีเป็น Child Board นะครับ - ช่างมันเถอะ
ต่อมาค้นหา ->
Code:
?topic=
จนกว่าจะเจอ
Code:
'href' => $row_board['subject'] != '' ? $scripturl . '?topic=' . $row_board['ID_TOPIC'] . '.new' . (empty($row_board['isRead']) ? ';boardseen' : '') . '#new' : '',
'link' => $row_board['subject'] != '' ? '<a href="' . $scripturl . '?topic=' . $row_board['ID_TOPIC'] . '.new' . (empty($row_board['isRead']) ? ';boardseen' : '') . '#new" title="' . $row_board['subject'] . '">' . $short_subject . '</a>' : $txt[470]
'link' => $row_board['subject'] != '' ? '<a href="' . $scripturl . '?topic=' . $row_board['ID_TOPIC'] . '.new' . (empty($row_board['isRead']) ? ';boardseen' : '') . '#new" title="' . $row_board['subject'] . '">' . $short_subject . '</a>' : $txt[470]
แก้ไขเป็น
Code:
'href' => $row_board['subject'] != '' ? $scripturl . 'topic/' . $row_board['ID_TOPIC'] . '.new' . (empty($row_board['isRead']) ? ';boardseen' : '') . '-'.$short_subject.'#new' : '',
'link' => $row_board['subject'] != '' ? '<a href="' . $scripturl . 'topic/' . $row_board['ID_TOPIC'] . '.new' . (empty($row_board['isRead']) ? ';boardseen' : '') . '-'.$short_subject.'#new" title="' . $row_board['subject'] . '">' . $short_subject . '</a>' : $txt[470]
'link' => $row_board['subject'] != '' ? '<a href="' . $scripturl . 'topic/' . $row_board['ID_TOPIC'] . '.new' . (empty($row_board['isRead']) ? ';boardseen' : '') . '-'.$short_subject.'#new" title="' . $row_board['subject'] . '">' . $short_subject . '</a>' : $txt[470]
ค้นต่อไป จะเจอ
Code:
'href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . '.new' . (empty($row['isRead']) ? ';boardseen' : '') . '#new'
แก้ไขเป็น
Code:
'href' => $scripturl . 'topic/' . $row['ID_TOPIC'] . '.new' . (empty($row['isRead']) ? ';boardseen' : '') . '-'.$short_subject.'.html#new'
ยังต่อเนื่อง
Code:
$tmppages[] = '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . '.' . $tmpb . '">' . $tmpa . '</a>';
แก้เป็น
Code:
$tmppages[] = '<a href="' . $scripturl . 'topic/' . $row['ID_TOPIC'] . '.' . $tmpb . '-'.$tmpa.'.html">' . $tmpa . '</a>';
ค้นต่อปายยย
Code:
'href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . '.0',
'link' => '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . '.0">' . $row['firstSubject'] . '</a>'
'link' => '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . '.0">' . $row['firstSubject'] . '</a>'
แก้เป็น * (ตอนผมลองทำ หลังจากแก้ตรงนี้ url ก็ใช้ได้เลย -> การแก้ที่ผ่านๆ มาใช้ใน child board)
Code:
'href' => $scripturl . 'topic/' . $row['ID_TOPIC'] . '-' . $row['firstSubject'] . '.html',
'link' => '<a href="' . $scripturl . 'topic/' . $row['ID_TOPIC'] . '-' . $row['firstSubject'] . '.html">' . $row['firstSubject'] . '</a>'
'link' => '<a href="' . $scripturl . 'topic/' . $row['ID_TOPIC'] . '-' . $row['firstSubject'] . '.html">' . $row['firstSubject'] . '</a>'
ค้นอีก * (อันนี้เป็นแก้ลิ้ง "ข้อความสุดท้าย")
Code:
'href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['ID_LAST_MSG']) . '#new',
'link' => '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['ID_LAST_MSG']) . '#new">' . $row['lastSubject'] . '</a>'
'link' => '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['ID_LAST_MSG']) . '#new">' . $row['lastSubject'] . '</a>'
แก้ไขเป็น
Code:
'href' => $scripturl . 'topic/' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['ID_LAST_MSG']) . '-'.$row['lastSubject'].'.html#new',
'link' => '<a href="' . $scripturl . 'topic/' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['ID_LAST_MSG']) . '-'.$row['lastSubject'].'.html#new">' . $row['lastSubject'] . '</a>'
'link' => '<a href="' . $scripturl . 'topic/' . $row['ID_TOPIC'] . ($row['numReplies'] == 0 ? '.0' : '.msg' . $row['ID_LAST_MSG']) . '-'.$row['lastSubject'].'.html#new">' . $row['lastSubject'] . '</a>'
ถึงจะใช้ได้แล้ว แต่ก็ยังค้นหาต่อไป (เผื่อมันไปติดกรณีไหนสักแห่ง -> อยากรู้ท่านต้องอ่าน Comment ครับ -> ผมขี้เกียจแปล -> ง่ายไหมครับ)
Code:
'new_href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . '.msg' . $row['new_from'] . '#new',
แก้ไขเป็น
Code:
'new_href' => $scripturl . 'topic/' . $row['ID_TOPIC'] . '.msg' . $row['new_from'] . '-'.$row['firstSubject'].'#new',
เป็นอันว่าเสร็จนะครับ!! อันที่จริงจะพบว่าแก้ไม่ยากเลยถ้าทำ .htaccess ออกมาได้แล้วก็อยู่ที่ขั้นตอนการแก้ไขธีมเท่านั้น
ว่าจะให้มันแสดงลิ้งยังไง ซึ้งส่วนนี้ลองแก้ดูเองได้ครับ! ดู Syntax ไม่ให้ Error แล้วก็ลองรีเฟรชดูเอาเลย ว่า url เป็นไปตามที่เราต้องการไหม!!
แค่นี้ก็ใช้ได้ในระดับหนึ่ง ผมขอทิ้งทวนไว้ให้ลองทำนะครับ
- แก้ "linktree" ให้แสดง url เป็น mod_rewrite
- แก้ subject ของ reply message เป็น subject หลักของ topic นั้นๆ
ลองแก้ดูครับไม่ยาก ^^"
มั่วโดย: Luscentz เมื่อ: แปดเดือนที่แล้ว ตอนสิบโมง [ 1 ความเห็น | เพิ่มความเห็น ]
แท๊ก: SMF SEO .htaccess Mod_Rewrite
หมวดหมู่: Web Developer
แท๊ก: SMF SEO .htaccess Mod_Rewrite
หมวดหมู่: Web Developer
มาบีบอัดขนาด Javascript กันเถอะ!
ให้ขนาดเล็กแต่คุณภาพเท่าเดิม
ก่อนเอ่ยก็ต้องสวัสดีปีใหม่ก่อนนะครับ ผมหายไปนานเลย..พอดีกลับบ้านนอกอ่ะครับ อิอิ มาเข้าเรื่องดีกว่า
อย่างที่ผมเคยพูดเรื่อง บีบขนาดไฟล์ CSS ง่ายๆ
คราวนี้มาลองบีบ Javascript ดูบ้างครับ
ประโยชน์ที่จะได้รับ
1. ลดแบนวิท (Bandwidth)
2. ทำไมแบนวิทลดลง ? ก็เพราะขนาดไฟล์ที่จะต้องโหลดลดลง
3. เมื่อขนาดไฟล์ลดลง ก็ทำให้เว็บโหลดเร็วขึ้น
4. แล้วจะเขียนทำไม ความจริงเหตุผลมันข้อเดียวครับ!!
5. ยังเนียนต่ออีก
6. ลองดูกันได้ที่นี้ครับ JSCompress.com
ผมเองเอามาใช้ในโปรเจคใหม่ ลดขนาดลงได้เกือบครึ่งๆ เลยครับถือว่าโอเคนะ สำหรับผม
ปล. เพิ่งขึ้นมาถึงกรุงเทพ เหนื่อยมาก ขอนอนก่อน ฮ่าๆๆ
มั่วโดย: Luscentz เมื่อ: แปดเดือนที่แล้ว ตอนบ่ายสอง [ 0 ความเห็น | เพิ่มความเห็น ]
แท๊ก: CSS Javascript
หมวดหมู่: Web Developer
แท๊ก: CSS Javascript
หมวดหมู่: Web Developer
มาทำ แคปช่าง่ายๆ สไตล์มึนๆ กันครับ
แบบที่ใครก็ทำได้!
หลักการขอบแคปช่าง่ายมากครับ เริ่มจาก1 -> สร้างตัวแปร Session มาเก็บค่าแคปช่าครับ (แนะนำให้ใช้ Session ครับ)
2 -> ทำการสุ่มข้อความ หรือตัวเลข ครับ
3 -> นำค่าที่ได้เก็บไว้กับตัวแปร Session ครับ
4 -> เวลาเช้คก็เอาค่าที่ user ส่งมา มาเช็คกับตัวแปร Session แล้วก็เคลียทิ้งครับ!
(ข้อที่ 4 นี้ต้องระวังเลยนะครับ เพราะผมเองก็เผลอมาแล้ว ในตอนนั้น)
เอาละครับ ปัญหาส่วนมากอยู่ตรงผู้คน "สร้างภาพ" กันไม่เป็นครับ ^^"
ผมเอาโค๊ดตัวอย่างมาให้แล้วกัน
Code:
<?php
$number = (string)(rand(1, 9).rand(1,9).rand(1,9).rand(1,9).rand(1,9)); // random number
$_SESSION['ss_captcha'] = $number;
$image = imagecreate(110, 36); // size 110 x 36
$bg = imagecolorallocate($image, 255, 255, 255); // white
// font
$font = 'arial.ttf';
$shadow = imagecolorallocate($image, 128, 128, 128); // grey
// print text
$color = imagecolorallocate($image, rand(0,255), rand(0,255), rand(0,255)); // random text color
$grey = imagecolorallocate($image, 128,128,128); // shadow color
imagettftext($image, 20, 0, 15, 27, $shadow, $font, $number); // shadow
imagettftext($image, 20, 0, 13, 25, $color, $font, $number); // text
// make border
$border = imagecolorallocate($image, 0, 0, 0); // black
imageline($image, 0, 0, 110, 0, $border);
imageline($image, 109, 35, 109, 0, $border);
imageline($image, 0, 0, 0, 35, $border);
imageline($image, 0, 35, 109, 35, $border);
#echo $number.'<br>';
imagepng($image);
imagedestroy($image);
header('Content-type: image/png');
exit;
?>
$number = (string)(rand(1, 9).rand(1,9).rand(1,9).rand(1,9).rand(1,9)); // random number
$_SESSION['ss_captcha'] = $number;
$image = imagecreate(110, 36); // size 110 x 36
$bg = imagecolorallocate($image, 255, 255, 255); // white
// font
$font = 'arial.ttf';
$shadow = imagecolorallocate($image, 128, 128, 128); // grey
// print text
$color = imagecolorallocate($image, rand(0,255), rand(0,255), rand(0,255)); // random text color
$grey = imagecolorallocate($image, 128,128,128); // shadow color
imagettftext($image, 20, 0, 15, 27, $shadow, $font, $number); // shadow
imagettftext($image, 20, 0, 13, 25, $color, $font, $number); // text
// make border
$border = imagecolorallocate($image, 0, 0, 0); // black
imageline($image, 0, 0, 110, 0, $border);
imageline($image, 109, 35, 109, 0, $border);
imageline($image, 0, 0, 0, 35, $border);
imageline($image, 0, 35, 109, 35, $border);
#echo $number.'<br>';
imagepng($image);
imagedestroy($image);
header('Content-type: image/png');
exit;
?>
ง่ายๆ ครับ ก็คือวาดเงาข้อความก่อน แล้วก็วาดข้อความทับลงไป (ให้ตำแหน่งการวาดเหลื่อมกันเล็กน้อย ในที่นี้ผมให้เหลื่อมกัน 2 พิกเซล ครับ)
จากนั้นก็มาวาดกรอบ แล้วก็ปิดด้วยแสดงภาพ png ครับ จะได้ภาพประมาณนี้
ถ้าอยากได้ลูกเล่นมากกว่านี้ ก็เอา imageline มาวาดมั่วๆ ก็ได้ครับ ถ้าทำ imageline สีเดียวกับข้อความแต่ละตัว บอทก็งงหมดละครับ
เพราะว่าแยก Histrogram แทบไม่ออกเลย ว่าสีอะไรเป็นข้อความ (บอกแนวให้ ถ้าใครอยากทำแหล่มๆ)
มั่วโดย: Luscentz เมื่อ: แปดเดือนที่แล้ว ตอนสี่โมงเย็น [ 0 ความเห็น | เพิ่มความเห็น ]
แท๊ก: Session Captcha
หมวดหมู่: Web Developer
แท๊ก: Session Captcha
หมวดหมู่: Web Developer
เคยคิดอยากซ่อนกราฟ(icon) Stats.in.th กันไหม ?
ก็แค่ไม่อยากให้ใครมาเที่ยวดูอะนะ
คือส่วนตัวผมติด Google Analytic อยู่แล้ว และค่อนข้างพอใจกับลูกเล่นของพี่ Google ด้วยเพียงแต่มันเคยมีรุ่นน้องมาทักว่า เวลาเขาโชว์สถิติกันเนี้ย เขามักจะใช้ Stats.in.th กันครับ
ก็มันส่งลิ้งไปให้ดูเลย ง่ายดี ถ้าเป็น Google Analytic ก็ต้องล็อกอินเข้าไป
แล้วก็เซฟรูป รูปอาจจะแต่งมาก็ได้ ปู่โธ่..
ผมก็เลย เอาวะ ลองไปสมัครมาติดดู แล้วก็เจอแบบนี้ครับ
เวน จะเก็บสถิติเว็บกระผมเงียบๆ ไม่ได้เหรอครับ
ไม่ต้องบอกใครหรอกครับ ว่ากระผมติด Stats.in.th กับเขาด้วย
ก็คือไม่ได้รังเกียจอะไรหรอกนะ แค่ผมไม่ชอบให้ใครมาดูสถิติเว็บผม(โดยที่ผมไม่รู้) เท่านั้นเอง
(ก็ถ้าสถิติมันสวยๆ ก็จะไม่รังเกียจหรอกนะ)
ผมเลยแก้ปัญหาแบบบ้านๆ เลยครับ เอาแท๊ก <div> คร่อม ตามโค๊ดนี้ครับ
Code:
<div style="display: none;">
<script type="text/javascript" src="http://tracker.stats.in.th/tracker.php?uid=ไอดีของคุณ"></script>
</div>
<script type="text/javascript" src="http://tracker.stats.in.th/tracker.php?uid=ไอดีของคุณ"></script>
</div>
icon Stats มันไม่โชว์แล้ว แล้วยังงี้มันจะนับหน้าที่เราเข้ารึเปล่าเนี้ย ?
- ผมว่านับนะครับ เพราะว่าผมลองดัก Header ที่ออกจากหน้าผมก็ยังมี Stats.in.th อยู่ (ความจริงเห็นลิ้งจริงๆ ของเขาเลยแหละ แต่ไม่อยากติดไปตรงๆเลย)
เดือนหน้า เอ๊ย ปีหน้าก็น่าจะรู้ละครับ ว่ามันเวิร์คไหม ^^"
มั่วโดย: Luscentz เมื่อ: แปดเดือนที่แล้ว ตอนสี่ทุ่ม [ 0 ความเห็น | เพิ่มความเห็น ]
แท๊ก: Stats Google Analytic
หมวดหมู่: Web Developer
แท๊ก: Stats Google Analytic
หมวดหมู่: Web Developer