|
|
 ทริคไม่ยาก สร้างข้อความรูปภาพยืนยันตอน Login
 จัดทำโดย : อ้ายคำปัน |
|
|
ทริคไม่ยากสร้างข้อความรูปภาพยืนยันตอน Login
หลายคนคงจะเคยเห็นแบบฟอร์ม Login หรือสมัครสมาชิกที่จะมีรูปภาพที่เป็นข้อความที่ผ่านการสุ่มขึ้นมา
เพื่อให้ท่านกรอกข้อความที่ปรากฏในรูปลงช่องรับข้อมูล ฟอร์มลักษณะนี้เป็นการ verify(ตรวจสอบ) ว่าผู้กรอก
ข้อมูลมากรอกเอง
ไม่ใช่พวกโปรแกรม robot หรือโปรแกรมอัตโนมัติอื่นใดมากรอกให้
ในบทความนี้เราจะมาทำความรู้จักกับโปรแกรมตัวนี้กันครับ
1.เริ่มแรกท่านหาไฟล์ font ที่แปลกมาซัก 1 font จะเป็น .ttf หรือ otf ก็ได้ครับ ในที่นี้ผมจะใช้ CaflischScriptPro-Regular.otf
2.ในโปรแกรมนี้จะใช้ 4 ไฟล์คือ
(1).
CaflischScriptPro-Regular.otf ไฟล์ font ที่เราจะใช้สร้างข้อความรูปภาพ
(2). from.php สำหรับกรอกข้อมูลข้อมูล
(3). pic_text.php สำหรับสร้างข้อความรูปภาพ
(4). result.php สำหรับทดสอบการรับค่าจากฟอร์ม
3.เริ่มกันเลยครับ เริ่มจากสร้างไฟล์ pic_text.php แล้วเขียนโค้ด ตามนี้
<?php
$font = "CaflischScriptPro-Regular.otf"; //ไฟล์ font ที่จะใช้
$image = imagecreate(100,30); //สร้างภาพโดยการกำหนดขนาด ยาว(แกน x), กว้าง(แกน y)
$bg = imagecolorallocate($image,200,220,220); //กำหนดสีพื้น (ภาพ,Red,Green,Blue)
$black = imagecolorallocate($image, 0, 0, 0); //กำหดนค่าสีของสีดำซึ่งจะใช้เป็นสีของตัวอักษร
imagettftext($image,28,0,2,25,$black,$font,$str); //นำตัวอักษรจากฟอร์มมาวาดเป็นรูป (รูปพื้นหลัง,ขนาด,มุม,พิกัด x-coordinate,y-coordinate,สีฟอนต์,ฟอนต์,ข้อความ) ***ระบบ coordinate (x=0,y=0)จะอยู่มุมซ้ายบนสุดนะครับ
header("Content-type:image/png"); //กำหนดชนิดของภาพตอนแสดงผลผ่าน browser
imagepng($image); //แสดงผลภาพที่สร้าง
imagedestroy($image); //เมื่อ browser ดึงไปแสดงแล้วก็คืนค่าหน่วยคืนค่าหน่วยความจำให้กับระบบ
//***การใช้หน่วยความจำอย่างประหยัดสำคัญมากในการเขียนโปรแกรม***
?> |
4.สร้างไฟล์ form.php ไฟล์นี้จะมีโค้ดอยู่ 2 ส่วน ส่วนแรกทำหน้าที่ random string
<?
function ranDomStr($length){
$str2ran = 'abcdefghijklmnopqrstuvwxyz0123456789'; //string ที่เป็นไปได้ที่จะใช้ในการ random ซึ่งสามารถเพิ่มลดได้ตามความต้องการ
$str_result = ""; //สตริงว่างสำหรับจะรับค่าจากการ random
while(strlen($str_result)<$length){ //วนลูปจนกว่าจะได้สตริงตามความยาวที่ต้องการ
$str_result .= substr($str2ran,(rand()%strlen($str2ran)),1); //ต่อ string จาก substring ที่ได้จากการ random ตำแหน่ง ทีละ 1 ตัว จนกว่าจะครบตรามความยาวที่ส่งมา
}
return($str_result);//ส่งค่ากลับ
}
$ran_str = randomstr(6); //สั่ง random string
?> |
ส่วนที่สองจะเป็นเกี่ยวกับฟอร์ม
<form name="form1" method="post" action="result.php">
Username ::<input type="text" name="name">
<br>
Password :: <input type="password" name="pass">
<br>
<img src="pic_text.php?str=<?=$ran_str?>"> <!-- ส่งสตริงที่ random ได้ไปสร้างรูปภาพ-->
<br>
Code :: <input name="code_input" type="text">
<input type="hidden" name="code_hidden" value="<?=$ran_str?>"> <!-- ซ่อนสตริงไว้ในฟอร์มไว้ตรวจสอบกับค่าที่ผู้ใช้ input-->
<br>
<br>
<input type="submit" name="Submit" value="Submit">
</form> |
6.ไฟล์ result.php ในที่นี้ผมจะเขียนเพียงคร่าว ๆ เพื่อทดสอบ ซึ่งท่านสามารถนำไปประยุกต์กับสิ่งที่ยากกว่านี้ได้
<?
if(strcmp($_POST['code_input'],$_POST['code_hidden'])==0){ /*ตรวจสอบว่า code ที่ซ่อนมาในฟอร์มกับที่ user กรอกเข้าไปเหมือนกันหรือไม่
***การตรวจสอบความเท่ากันของสตริงนั้นมีอยู่หลายฟังก์ชัน ในที่นี้ผมใช้ strcmp ตรวจสอบโดยไม่สนใจ case แต่ไม่แนะนำให้ใช้รูปแบบ if($str1==$str2) นะครับ เพราะลักษณะการใช้หน่วยความจำของสตริงนั้นไม่ได้คงที่เหมือนตัวเลข ฉะนั้นความผิดพลาดมันเกิดขึ้นได้ครับ*/
echo "<strong>Login success.</strong><br>";
echo "<br>Hello! Khrun <strong>".$_POST['name']."<strong>";
}
else{
echo "<strong><font color=\"#FF0000\">ERROR</font></strong>";
}
?> |
7.พร้อมแล้วมาทดสอบกันเลยครับ ^o^
----------------------------------------------------------------------------------------------------------------------------------
ส่งท้าย...บทความนี้ผมประยุกต์มาจากหนังสือ 2 เล่มขอขอบพระคุณนักเขียน 2 ท่านนั้นมา ณ ที่นี้ด้วยครับ
และหวังว่าท่านผู้อ่านจะนำไปประยุกต์ต่อ
เช่นกัน ^^
ผมแนบโค้ดมาด้วยนะครับ หากท่านไม่เข้าใจลองรันโค้ดของผมดู หากมีปัญหาหรือข้อสงสัยสอบถามได้ที่ webbord
นะครับ(เมล์ไม่ค่อยได้เช็ค - -'') หากความรู้ใดที่ผมให้ได้ผมจะให้อย่าง "ไม่มีกำมือของอาจารย์" เลยครับ (เป็น
สำนวนหนะครับ ผมไม่ใช่อาจารย์หรอก^^)
...เป็นกำลังใจให้ webthaidd.com สร้างสรรค์งานดี ๆ เพื่อสังคมอย่างนี้ตลอดไปครับ ^^
 Download Source Code
|
|
