เพื่อให้ท่านกรอกข้อความที่ปรากฏในรูปลงช่องรับข้อมูล ฟอร์มลักษณะนี้เป็นการ 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| ผู้จัดทำ : วิวัฒน์ มณีจันสุข ที่อยู่อีเมลล์ : winnerww@hotmail.com website : http://computerpsycho.boxchart.com |