عمل صفحة اتصل بنا + شرح الكود

الموضوع في 'منتدى أخبار التقنية والتكنولوجيا العام' بواسطة SolimanHousin, بتاريخ ‏أكتوبر 14, 2013.

حالة الموضوع:
مغلق
  1. SolimanHousin

    SolimanHousin زيزوومي فعال

    إنضم إلينا في:
    ‏أكتوبر 14, 2013
    المشاركات:
    172
    الإعجابات المتلقاة:
    215
    نقاط الجائزة:
    250
    الإقامة:
    الرياض
    برامج الحماية:
    avast
    نظام التشغيل:
    Windows 8


    السلام عليكم ورحمة الله ويركاته

    كيفكم شباب ؟
    ان شاء الله بخير

    قبل امس و ااحد طلب مني برمجة صفحة اتصل بنا لموقعه

    فقلت بما اني سويته جديد احطه لكم هنا مع الشرح البسيط له

    مع الوعد اذا مافهمته اني اعمل شرح فيديو لكيفية برمجتهاولا
    السكربت هو بسيييط لابعد الحدود ,,
    نفرض انه عندك موقع و تريد عمل صفحة للتواصل بينك و بين الزائر يعني الزائر يرسلك رسالة الى بريدك ,,

    ببساطة اذا كنت لا تريد تعب نفسك :
    انسخ الكود هذا لل html

    كود:
    <html>
    <head>
        <title>ContactUs</title>
        <meta charset='UTF-8' />
    <style>
    
    
    .script {
        width: 40%; height: 500px; background: #f4f4f4; margin: auto; min-width: fit-content;
        border-radius: 10px; box-shadow: 0px 2px 2px #000;
    }
    
         
    input, textarea, select {
        font: normal 1em/1.4em Arial, Helvetica, sans-serif;
    }
    input[type=text], input[type=password], textarea {
        background: #e6e6e6;
        border: solid 1px #efefef;
        padding: 5px 7px;
    
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
    }
    textarea:focus, input[type=password]:focus, input[type=text]:focus {
        border: solid 1px #16498C;
        background: #fff;
        outline: none;
        box-shadow: 0 1px 4px #c5c5a2
        -webkit-box-shadow: 0 1px 4px #c5c5a2;
        -moz-box-shadow: 0 1px 4px #c5c5a2;
    }
    
    .ok {
      background: #3bff9f;
      text-align: center;
      padding: 30px;
      color: #ff2626; margin: auto;  width: 20%; 
    }
    
    .no {
        background:#ffdffd;
        text-align:center;
        padding: 20px;
        color:#000; margin: auto; width: 30%; font-size:18px;
    }
    </style>
    
    </head>
    <body>
    
    <div class='script'>
    <br /><br />
      <center> <h1>Script Contact US</h1>
    
    <form action='ContactUs.php' method='POST'>
    *Your Name <br /> <input type='text' name='name' /><br /><br />
    *Your Mail  <br /><input type='email' name='mail' /><br /><br />
    Subject Msg  <br /><input type='text' name='sub' /><br /><br />
    *Msg <br /> <textarea cols="40" name="msg"></textarea><br /><br />
        <input type="submit" value="Send" name="Send" /><br />
    </form>
    </center>
    </div>
    
    </body>
    </html>
    

    هذا الكود هو هيكلة + ستايل ال Css عبارة عن فورم بداخله 4 خانات
    1. خانة للاسم
    2. خانة للايميل تبع الزائر
    3. خانة لعنوان الرسالة
    4. خانة لوضع الرسالة

    بهذا الشكل

    [​IMG]


    طبعا الخانة الي باللون الابض هي عندما تضغط عليها


    الكود الي فوق باعطيكم الملف كامل مع الكود البرمجي لا تخافو [​IMG]


    الان شرح لكود ال php
    هذا هو ->

    كود PHP:
    <?php
       
    $name 
    $_POST['name'];
    $mail $_POST['mail'];
    $sub $_POST['sub'];
    $msg $_POST['msg'];

        if(isset(
    $_POST['Send']))
        {
        if(empty(
    $name) or is_int($name))
        {
          echo 
    '<div class="no">Where the Name ?!!</div>';
          echo 
    '<meta http-equiv="refresh" content="2; url=ContactUs.php" />'
          exit;
        }
       
        elseif(empty(
    $mail))
        {
          echo 
    '<div class="no">Where the Mail ?!!</div>';
          echo 
    '<meta http-equiv="refresh" content="2; url=ContactUs.php" />'
          exit; 
        }elseif(empty(
    $sub))
        {
            echo 
    '<div class="no">Where the Subject ?!!</div>';
            echo 
    '<meta http-equiv="refresh" content="2; url=ContactUs.php" />'
          exit;
        }elseif(empty(
    $msg))
        {
            echo 
    "<div class='ok'>Where the Message ?!!</div>";
        }else{
    //heare varibule for Function mail
    $ymail "..."// Heare Is Your Mail Ya Man :)

    $title $sub 'Is From : ' .$name;
    // Function Header ↓
    $header "MIME-Version: 1.0 \r/n" ;
    $header .= "From: $ymail $sub \r\n" ;
    $header .= "Content-Type: Text/html ; charcet=utf-8 \r\n" ;
    $header .= "X-Priority: 3 \r\n";

    mail ($ymail,$sub,$msg,$header); // function Mail

    echo '<div class="ok">The message has been sent</div>';
    echo 
    '<meta http-equiv="refresh" content="2; url=ContactUs.php" />'
    exit;
        }
    //else Maail
           

        
    }// start IF       

    ?>
    ايضا لا تخاف اذا ظهر الكود بلخبطة لان المنتدى في لخبطة في عرض الكود
    ماعلينا انا بعطيكم الملف كامل و فيه تعلقات

    لكن الان فقط شرح مبسط

    *

    نعمل اول حاجة الفورم و فيه مثل مااقلنا 4 خانات
    نخلي الخانات هذه لها Name و هذا ال Name نعوضها في ال php

    بعد مانكتب ال name للخانات

    نروح نعوض عن ال name ب متغيرات

    يعني لو عندنا خانة لها name = X
    نروح في الphp نكتب ->


    name=x$;

    بكذا نكون عرفنا ال x بمتغير ال name جميل [​IMG]

    و هكذا مع بقية الخانات (هذه مجرد مثال مختلف عن السكربت الاصلي)
    بعد ماعرفنا المتغيرات نعملها شروط

    اذا كان كذا اعمل كذا
    انت لا تتعب نفسك
    اهم شيء تفهم الاساسيات /)

    الان


    تحميل السكربت


    من هنا

    بعد تحميله نضعه في موقعنا بكل بساطة


    دمتم في حفظ الرحمن مع التنبيه بانه اذا كان اكثر من 5 يريدون شرح فيديو سنسجل الشرح [​IMG]


    اخوكم كونان حبي -> سليمان حسين​
     
    أعجب بهذه المشاركة ملك الحصريات
  2. سهران يا ليل

    سهران يا ليل زيزوومي VIP

    إنضم إلينا في:
    ‏يناير 11, 2012
    المشاركات:
    6,402
    الإعجابات المتلقاة:
    4,536
    نقاط الجائزة:
    1,220
    برامج الحماية:
    اخرى
    نظام التشغيل:
    أخرى
    جزاك الله خير
     
    أعجب بهذه المشاركة SolimanHousin
  3. SolimanHousin

    SolimanHousin زيزوومي فعال

    إنضم إلينا في:
    ‏أكتوبر 14, 2013
    المشاركات:
    172
    الإعجابات المتلقاة:
    215
    نقاط الجائزة:
    250
    الإقامة:
    الرياض
    برامج الحماية:
    avast
    نظام التشغيل:
    Windows 8
    و جزاكم بالمثل
     
  4. ملك الحصريات

    ملك الحصريات زيزوومي مميز

    إنضم إلينا في:
    ‏يوليو 6, 2013
    المشاركات:
    545
    الإعجابات المتلقاة:
    301
    نقاط الجائزة:
    570
    الإقامة:
    القاهره
    برامج الحماية:
    Avira
    نظام التشغيل:
    Windows XP
    سلمت عزيزي علي الطرح الراقي والمميز وتقبل مررروي
     
  5. SolimanHousin

    SolimanHousin زيزوومي فعال

    إنضم إلينا في:
    ‏أكتوبر 14, 2013
    المشاركات:
    172
    الإعجابات المتلقاة:
    215
    نقاط الجائزة:
    250
    الإقامة:
    الرياض
    برامج الحماية:
    avast
    نظام التشغيل:
    Windows 8
    شكرا لمروركم
     
  6. خالد الرماح

    خالد الرماح زيزوومي جديد

    إنضم إلينا في:
    ‏أكتوبر 12, 2008
    المشاركات:
    8
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    0
    برامج الحماية:
    Kaspersky
    نظام التشغيل:
    Windows 7
    شكراً جزيلاً
     
  7. SolimanHousin

    SolimanHousin زيزوومي فعال

    إنضم إلينا في:
    ‏أكتوبر 14, 2013
    المشاركات:
    172
    الإعجابات المتلقاة:
    215
    نقاط الجائزة:
    250
    الإقامة:
    الرياض
    برامج الحماية:
    avast
    نظام التشغيل:
    Windows 8
    العفو شكرا لتشريفك مواضيعي
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة

جاري تحميل الصفحة...
  1. كود اتصل بنا html

    ,
  2. كود اتصل بنا