P30-ART


ارسال موضوع ارسال پاسخ
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ساخت کپچا و کد امنیتی
نویسنده پیام
مدیر بخش آموزش
******

ارسال‌ها: 435
تاریخ عضویت: اردیبهشت 1393
اعتبار: 47
وضعیت : غایب
جنسیت:
سپاس ها 389
سپاس شده 397 بار در 181 ارسال
ارسال: #1
آموزش ساخت کپچا و کد امنیتی
نیازمندی های درک آموزش:
  1. آشنایی با مفاهیم HTML و CSS
  2. آشنایی با PHP در حد مبتدی




شروع آموزش:

مرحله اول: طراحی فرم تماس با ما (html)

در ابتدا یک صفحه php در نرم افزار DreamWeaver میسازیم و داخلش یک فرم شبیه به زیر طراحی میکنیم. نام این صفحه رو میزاریم contact.php
(طراحی Table یا CSS بستگی به خود شما داره)
من چند فیلد و یک دکمه در این فرم گذاشتم که name (نام) هر فرم به صورت زیر هست:
نام: name
ایمیل:email
موضوع:subject
متن پیام:message
بعدا هم قراره برای کد امنیتی یک فیلد با نام code تعریف کنم.
و دکمه (submit)


من فرم خودم رو طراحی کردم و به این صورت در اومده:کد HTML:
کد php:
[color=#000080]<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/color]
[color=#000080]<html xmlns=[color=#0000FF]"http://www.w3.org/1999/xhtml"[/color]>[/color]
[color=#000080]<head>[/color]
[color=#000080]<meta http-equiv="Content-Type" content=[color=#0000FF]"text/html; charset=UTF-8"[/color]>[/color]
[color=#000080]<title>[/color]تماس با ما[color=#000080]</title>[/color]
[color=#000080]<link href=[color=#0000FF]"style.cیss"[/color] rel=[color=#0000FF]"stylesheet"[/color] type=[color=#0000FF]"text/css"[/color]>[/color]
[color=#000080]</head>[/color]
[color=#000080]<body>[/color]
[color=#000080]<div id=[color=#0000FF]"main"[/color]>[/color]
[color=#000080]<div class=[color=#0000FF]"content"[/color]>[/color]
[color=#000080]<h2>[/color]ارتباط با ما[color=#000080]</h2>[/color] 
    
[color=#000080]<p>[/color]برای تماس با ما میتوانید از فرم زیر استفاده نمایید[color=#000080]</p>[/color]
    
[color=#000080]<div class=[color=#0000FF]"forms"[/color]>[/color]                        
    
[color=#FF8000]<form action=[color=#0000FF]""[/color] method=[color=#0000FF]"post"[/color]>[/color]
    
[color=#FF8000]<label for=[color=#0000FF]"username"[/color]>[/color] نام : [color=#FF8000]</label>[/color]
    
[color=#FF8000]<input type=[color=#0000FF]"text"[/color] class=[color=#0000FF]"form"[/color] value=[color=#0000FF]""[/color] name=[color=#0000FF]"name"[/color]>[/color]
    
[color=#000080]<br/>[/color][color=#000080]<br/>[/color][color=#000080]<br/>[/color]
    
[color=#FF8000]<label for=[color=#0000FF]"email"[/color]>[/color] ایمیل : [color=#FF8000]</label>[/color]
    
[color=#FF8000]<input type=[color=#0000FF]"text"[/color] id=[color=#0000FF]"email"[/color] value=[color=#0000FF]""[/color] class=[color=#0000FF]"form-ltr"[/color] name=[color=#0000FF]"email"[/color]>[/color]
    
[color=#000080]<br/>[/color][color=#000080]<br/>[/color][color=#000080]<br/>[/color]
    
[color=#FF8000]<label for=[color=#0000FF]"sub"[/color]>[/color] موضوع : [color=#FF8000]</label>[/color]
    
[color=#FF8000]<input type=[color=#0000FF]"text"[/color] id=[color=#0000FF]"sub"[/color] value=[color=#0000FF]""[/color] class=[color=#0000FF]"form"[/color] name=[color=#0000FF]"subject"[/color]>[/color]
    
[color=#000080]<br/>[/color][color=#000080]<br/>[/color][color=#000080]<br/>[/color]
    
[color=#FF8000]<label for=[color=#0000FF]"mess"[/color]>[/color] پیام شما : [color=#FF8000]</label>[/color]
    
[color=#FF8000]<textarea class=[color=#0000FF]"form"[/color] id=[color=#0000FF]"mess"[/color] rows=[color=#0000FF]"7"[/color] name=[color=#0000FF]"message"[/color]>[/color][color=#FF8000]</textarea>[/color]
    
[color=#000080]<br/>[/color]

    
[color=#000080]<br/>[/color][color=#000080]<br/>[/color][color=#000080]<br/>[/color]
    
[color=#FF8000]<input type=[color=#0000FF]"submit"[/color] name=[color=#0000FF]"submit"[/color] value=[color=#0000FF]"  ارسال  "[/color]>[/color]
    
[color=#FF8000]</form>[/color]
    
[color=#000080]</div>[/color]
    
[color=#000080]</div>[/color]
    
    
[color=#000080]</div>[/color]
[color=#000080]</body>[/color][color=#000080]</html>[/color] 
همون طور که میبینید من فرم رو به وسیله POST به همین صفحه ارسال میکنم.
پیشنمایش:form-1.jpg

--------------------------
مرحله دوم - طراحی CSS:
من برای زیبا کردن طرح فرم تماس با ما, کد CSS رو طراحی کردم. برای class form,content,... همچنین برای input و textarea هم CSS تعریف کردم که به این صورت در اومده:کد:
کد php:
body {
    
font-family:tahoma;
    
font-size:8pt;
    
color:#787878;
    
direction:rtl;
    
text-align:right;
    
margin:0 auto;
    
width:500px;
    
padding:0px;
    
background-color:#fff;
    
}

.
error{
    
width:400px;
    
border:1px #d3400d solid;
    
-webkit-border-radius5px;
    -
moz-border-radius5px;
    
margin:5px 10px 10px 10px;
    
padding:10px 10px 10px 10px;
    
background:#ff8053;
}

.
ok{
    
width:400px;
    
border:1px #a1cb45 solid;
    
-webkit-border-radius5px;
    -
moz-border-radius5px;
    
margin:5px 10px 10px 10px;
    
padding:10px 10px 10px 10px;
    
background:#eaf8cc;
    
display:block;

}

#main{
    
background-color:#ffffff;
}

.
clear{clear:both}

form {
    
margin:0px;
    
padding:0px;
}

{
    
color:#ffffff;
    
text-decoration:none;
}

a:hover {
    
color:#fec053;
}

inputselecttextarea {
    
font-family:tahoma;
    
padding:5px;
    
font-size:8pt;
    
border1px solid #cacaca;
    
-webkit-border-radius5px;
    -
moz-border-radius5px;
}
input[type="submit"]{
    
font-family:tahoma;
    
padding:5px;
    
font-size:9pt;
    
border1px solid #cacaca;
    
-webkit-border-radius5px;
    -
moz-border-radius5px;
}

input[type="submit"]:hover{
    
font-family:tahoma;
    
padding:5px;
    
font-size:9pt;
    
border1px solid #7613ae;
    
background:#7613ae;
    
color:#fff;
    
-webkit-border-radius5px;
    -
moz-border-radius5px;
}

input:hover ,select:hover,textarea:hover {
    
border1px solid #6295f3;
    
padding:5px;
    -
webkit-border-radius5px;
    -
moz-border-radius5px;
}

.
content {
    -
webkit-border-radius20px;
    -
moz-border-radius20px;
    
margin:50px 0 0 0;
    
padding:10px;
    
text-align:justify;
    
border:1px solid #F2F2F2;
    
}

#copyright{padding-top:20px;text-align:center}

.forms {
    
directionrtl;
    
padding-right:20px;
    
text-alignright;
    
fontnormal 11px TahomaGenevasans-serif;
}
.
forms h2 {
    
fontbold 11px tahoma;
    
padding8px 2px;
    
border-bottom1px solid #CCC;
}

.
forms label {
    
width100px;
    
floatright;
    
margin5px 0 0 0;
}

.
forms .form, .forms .form-ltr {
    
width200px;
    
floatright;
    
padding2px;
    
fontnormal 11px TahomaGenevasans-serif;
    
margin5px 0;
}
.
forms .form-ltr {
    
directionltr;
    
text-alignleft;
}
.
forms .text {
    
width250px;
    
height100px;
    
overflowauto;
    
fontnormal 11px/1.4 TahomaGenevasans-serif;

پیشنمایش:form-2.jpg

-----------------------

مرحله سوم - ساخت فایل کد امنیتی:
من قصد دارم یک تصویر بسازم که داخلش چند عدد (چهار رقم) رو به صورت تصادفی بسازه و به کاربر نمایش بده. بعدا قراره ما با استفاده از سشن (session) ها بررسی کنیم که آیا مقدار وارد شده کاربر با مقدار داده شده درست هست یا خیر

کد ساخته شده به شرح زیر هست: این کد رو با نام captcha.php ذخیره میکنیم.کد PHP:

کد:
[code]
[color=#000000][color=#0000BB]<?php

session_start[/color][color=#007700]();[/color]

[color=#0000BB]$string [/color][color=#007700]= [/color][color=#DD0000]''[/color][color=#007700];

for ([/color][color=#0000BB]$i [/color][color=#007700]= [/color][color=#0000BB]0[/color][color=#007700]; [/color][color=#0000BB]$i [/color][color=#007700]< [/color][color=#0000BB]4[/color][color=#007700]; [/color][color=#0000BB]$i[/color][color=#007700]++) {
    [/color][color=#FF8000]// this numbers refer to numbers of the ascii table (lower case)
    [/color][color=#0000BB]$string [/color][color=#007700].= [/color][color=#0000BB]chr[/color][color=#007700]([/color][color=#0000BB]rand[/color][color=#007700]([/color][color=#0000BB]48[/color][color=#007700], [/color][color=#0000BB]57[/color][color=#007700]));
}[/color]

[color=#0000BB]$_SESSION[/color][color=#007700][[/color][color=#DD0000]'rand_code'[/color][color=#007700]] = [/color][color=#0000BB]$string[/color][color=#007700];[/color]

[color=#0000BB]$dir [/color][color=#007700]= [/color][color=#DD0000]'fonts/'[/color][color=#007700];[/color]

[color=#0000BB]$image [/color][color=#007700]= [/color][color=#0000BB]imagecreatetruecolor[/color][color=#007700]([/color][color=#0000BB]170[/color][color=#007700], [/color][color=#0000BB]60[/color][color=#007700]);[/color]
[color=#0000BB]$black [/color][color=#007700]= [/color][color=#0000BB]imagecolorallocate[/color][color=#007700]([/color][color=#0000BB]$image[/color][color=#007700], [/color][color=#0000BB]0[/color][color=#007700], [/color][color=#0000BB]0[/color][color=#007700], [/color][color=#0000BB]0[/color][color=#007700]);[/color]
[color=#0000BB]$color [/color][color=#007700]= [/color][color=#0000BB]imagecolorallocate[/color][color=#007700]([/color][color=#0000BB]$image[/color][color=#007700], [/color][color=#0000BB]100[/color][color=#007700], [/color][color=#0000BB]100[/color][color=#007700], [/color][color=#0000BB]90[/color][color=#007700]);[/color]
[color=#0000BB]$white [/color][color=#007700]= [/color][color=#0000BB]imagecolorallocate[/color][color=#007700]([/color][color=#0000BB]$image[/color][color=#007700], [/color][color=#0000BB]255[/color][color=#007700], [/color][color=#0000BB]255[/color][color=#007700], [/color][color=#0000BB]255[/color][color=#007700]);[/color]

[color=#0000BB]imagefilledrectangle[/color][color=#007700]([/color][color=#0000BB]$image[/color][color=#007700],[/color][color=#0000BB]0[/color][color=#007700],[/color][color=#0000BB]0[/color][color=#007700],[/color][color=#0000BB]399[/color][color=#007700],[/color][color=#0000BB]99[/color][color=#007700],[/color][color=#0000BB]$white[/color][color=#007700]);[/color]
[color=#0000BB]imagettftext [/color][color=#007700]([/color][color=#0000BB]$image[/color][color=#007700], [/color][color=#0000BB]30[/color][color=#007700], [/color][color=#0000BB]0[/color][color=#007700], [/color][color=#0000BB]10[/color][color=#007700], [/color][color=#0000BB]40[/color][color=#007700], [/color][color=#0000BB]$color[/color][color=#007700], [/color][color=#0000BB]$dir[/color][color=#007700].[/color][color=#DD0000]"acmesai.ttf"[/color][color=#007700], [/color][color=#0000BB]$_SESSION[/color][color=#007700][[/color][color=#DD0000]'rand_code'[/color][color=#007700]]);[/color]

[color=#0000BB]header[/color][color=#007700]([/color][color=#DD0000]"Content-type: image/png"[/color][color=#007700]);[/color]
[color=#0000BB]imagepng[/color][color=#007700]([/color][color=#0000BB]$image[/color][color=#007700]);[/color]

[color=#0000BB]?>[/color] [/color]

همون طور که در کد بالا میبینید ما از یک پوشه با نام fonts یک فونت با نام acmesai.ttf رو برای نمایش اعداد با این فونت میخونیم.
و از آخر به صورت خروجی تصویر چاپ میکنیم.(تنظیمات دیگه ای مثل رنگ اعداد و... هست که خودتون میتونید به دلخواه وارد کنید.

-------------
حالا ما برای نمایش کد امنیتی در فرم خودمون این کد رو به فرم اضافه میکنیم.کد HTML:
کد php:
[color=#FF8000]<label for=[color=#0000FF]"Email"[/color]>[/color] کد امنیتی : [color=#FF8000]</label>[/color]
    
[color=#000080]<image src=[color=#0000FF]"captcha.php"[/color] />[/color]
    
[color=#000080]<br/>[/color][color=#000080]<br/>[/color][color=#000080]<br/>[/color]
    
[color=#FF8000]<label for=[color=#0000FF]"code"[/color]>[/color] وارد کنید : [color=#FF8000]</label>[/color]
    
[color=#FF8000]<input type=[color=#0000FF]"text"[/color] value=[color=#0000FF]""[/color] id=[color=#0000FF]"code"[/color] class=[color=#0000FF]"form-ltr"[/color] name=[color=#0000FF]"code"[/color]>[/color]
    
[color=#000080]<br/>[/color][color=#000080]<br/>[/color][color=#000080]<br/>[/color] 
مرحله چهارم - بررسی و ارسال ایمیل:

در این مرحله ما وارد فایل contact.php میشیم و بالای کد های html , دستورات php رو آغاز میکنیم.

مینویسیم :کد PHP:

کد:
[code]
[color=#000000][color=#0000BB]<?php

session_start[/color][color=#007700]();

if(isset([/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'submit'[/color][color=#007700]])) {

    if(!empty([/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'name'[/color][color=#007700]]) && !empty([/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'email'[/color][color=#007700]]) && !empty([/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'message'[/color][color=#007700]]) && !empty([/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'code'[/color][color=#007700]]) && !empty([/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'subject'[/color][color=#007700]])) {

        if([/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'code'[/color][color=#007700]] == [/color][color=#0000BB]$_SESSION[/color][color=#007700][[/color][color=#DD0000]'rand_code'[/color][color=#007700]]) {

            [/color][color=#FF8000]// send email
            
            [/color][color=#0000BB]$accept [/color][color=#007700]= [/color][color=#DD0000]"پیغام شما با موفقیت ارسال شد. با تشکر"[/color][color=#007700];
            [/color][color=#0000BB]$to [/color][color=#007700]= [/color][color=#DD0000]"persianscript.ir@gmail.com"[/color][color=#007700];
            [/color][color=#0000BB]$subject [/color][color=#007700]= [/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'subject'[/color][color=#007700]];
            [/color][color=#0000BB]$from [/color][color=#007700]= [/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'email'[/color][color=#007700]];
            [/color][color=#0000BB]$user_message [/color][color=#007700]= [/color][color=#0000BB]$_POST[/color][color=#007700][[/color][color=#DD0000]'message'[/color][color=#007700]];
            
            [/color][color=#0000BB]$body [/color][color=#007700]= [/color][color=#DD0000]"\n"[/color][color=#007700].
            [/color][color=#DD0000]"نام: [/color][color=#0000BB]$name[/color][color=#DD0000]\n"[/color][color=#007700].
            [/color][color=#DD0000]"ایمیل: [/color][color=#0000BB]$from[/color][color=#DD0000] \n"[/color][color=#007700].
            [/color][color=#DD0000]"توضیحات: \n "[/color][color=#007700].
            [/color][color=#DD0000]"[/color][color=#0000BB]$user_message[/color][color=#DD0000]\n"[/color][color=#007700].
            
            [/color][color=#0000BB]$headers [/color][color=#007700]= [/color][color=#DD0000]"From: [/color][color=#0000BB]$from[/color][color=#DD0000] \r\n"[/color][color=#007700];
            [/color][color=#0000BB]$headers [/color][color=#007700].= [/color][color=#DD0000]"Reply-To: [/color][color=#0000BB]$from[/color][color=#DD0000] \r\n"[/color][color=#007700];
            
            [/color][color=#0000BB]mail[/color][color=#007700]([/color][color=#0000BB]$to[/color][color=#007700], [/color][color=#0000BB]$subject[/color][color=#007700], [/color][color=#0000BB]$body[/color][color=#007700], [/color][color=#0000BB]$headers[/color][color=#007700]);
        } else {

            [/color][color=#0000BB]$error [/color][color=#007700]= [/color][color=#DD0000]"کد امنیتی را اشتباه وارد کرده اید! دوباره امتحان کنید"[/color][color=#007700];

        }

    } else {

        [/color][color=#0000BB]$error [/color][color=#007700]= [/color][color=#DD0000]"لطفا تمامی فیلد ها را تکمیل نمایید."[/color][color=#007700];

    }

}[/color]

[color=#0000BB]?>[/color] [/color]

در ابتدا ما لایه جلسه رو روشن میکنیم. (سشن ها - برای بررسی صحت درست ارسال شدن کد امنیتی)

سپس با دستور شرط میگیم اگر کاربر دکمه submit را زده بود دستورات زیر مجموعه را اجرا کن

بعد از مرحله بالا ما شرط میزاریم که اگر فیلد های name,emailmsubject,message,code توسط کاربر خالی ارسال نشده بود کد های زیر رو اجرا کن در غیر اینصورت مقدار error برابر هست با "لطفا تمامی فیلد ها را تکمیل نمایید."
(قرار هست بعدا مقدار error یا accept چاپ بشن که کاربر رو از وضعیت فرم اگاه کنن)

در دستور بعدی ما میگیم در صورتی که سشن code که توسط کاربر ارسال شده برابر با مقدار داده شده کد تصادفی (rand_code) هست محتویات رو ایمیل کن و به کاربر بگو که فرم شما ارسال شد در غیر اینصورت بگو کد امنیتی رو اشتباه وارد کردی!

حالا در صورتی که کاربر کد رو درست ارسال کرده بود و تمامی شرط ها بر قرار بود و کاربر کد امنیتی رو درست ارسال کرده بود ما میایم و مقدار های ارسال شده توسط کاربر رو داخل یک متغیر میریزیم و بعد با استفاده از تابع mail() میفرستیم به کاربر

کدوم کاربر؟ همون کاربری که ایمیلش داخل قسمت متغیر $to هست.


در آخر برای نمایش وضعیت فرم ارسالی به کاربر کافیه فقط کد های زیر رو در محل دلخواه قرار بدیدکد PHP:

کد:
[code]
[color=#000000][color=#0000BB]<?php [/color][color=#007700]if(!empty([/color][color=#0000BB]$error[/color][color=#007700])) echo [/color][color=#DD0000]'<div class="error">'[/color][color=#007700].[/color][color=#0000BB]$error[/color][color=#007700].[/color][color=#DD0000]'</div>'[/color][color=#007700]; [/color][color=#0000BB]?>
<?php [/color][color=#007700]if(!empty([/color][color=#0000BB]$accept[/color][color=#007700])) echo [/color][color=#DD0000]'<div class="ok">'[/color][color=#007700].[/color][color=#0000BB]$accept[/color][color=#007700].[/color][color=#DD0000]'</div>'[/color][color=#007700]; [/color][color=#0000BB]?>[/color] [/color]

این کد ها میگن در صورتی که مقدار error یا accept خالی نبود اون وقت چاپشون کن!

به همین سادگی و راحتی؟؟؟؟؟؟؟.....
 

 

بخاطر اینکه نمیتونم دیگه توی این پست فعالیت کنم به مدت 8 ماه این پست رو به یکی از کاربران ایران تمپ اهدا خواهم کرد!
واجدین شرایط پ.خ دهند
(آخرین ویرایش در این ارسال: 02-26-1393 04:50 ب.ظ، توسط Black Ghost.)
02-26-1393 04:49 ب.ظ
یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Bahamin ، sajjad ، admin
ارسال موضوع ارسال پاسخ


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان