قررت عمل درس بسيط عن برمجة صفحة إتصل بنا بسيطة بإستخدام Bootstrp و jQuery لكي تتم عملية الـProcessing بدون إعادة تحميل للصفحة.
في البداية هذا هو كود التصميم:
رمز PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<title>Traidnt Contact us</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<h3> Contact Form</h3>
</div>
</div>
</div>
<!-- Start Row -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Contact Form</h3>
</div>
<div class="panel-body">
<table class="table">
<tr>
<td>Name</td>
<td><input type="text" id="name" class="form-control" placeholder="YOUR NAME"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" id="email" class="form-control" placeholder="YOUR EMAIL"></td>
</tr>
<tr>
<td>Message</td>
<td><textarea id="message" class="form-control" placeholder="Type whatever you wanna send to us" rows="5"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" onclick="send()" value="SEND MESSAGE" class="btn btn-primary"</td>
</tr>
</table>
</div>
<div class="panel-footer">You can send me directly through ErwinChafros@gmail.com</div>
</div>
</div>
</div>
<!-- End Row -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-footer">All Rights Reserved 2015 ©</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
وهذا هو شكل التصميم:
كما تلاحظون فالصفحة بسيطة جدًا وهي بإستخدام Bootstrap، ولكن يجب ملاحظة التالي:
1- قمت بوضع إدراج للجي كويري خلال هذين السطرين:
1- قمت بوضع إدراج للجي كويري خلال هذين السطرين:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
3- في زر الإرسال قمت بوضع خاصية onclick وقمت بوضع send() والتي هي الدالة التي سنقوم بكتابتها، والتي تقوم بأخذ قيم الـinputs لتحولها عن طريق POST method إلى صفحة أخرى لكي يتم كتابة كود الـPHP ثم إرجاع النتيجة إلي مكان محدد في صفحتنا الأصلية بدون إعادة تحميل.
4- إستخدمنا خاصيات id للـinputs ولم نستخدم name لأننا سنستخدمها في كود جافاسكربت.
الآن سنقوم بكتابة كود الـjQuery والذي سيكون كالتالي:
رمز Code:
<script>
function registerusers(){
$(function() {
var name = $("#name").val()
var email = $("#email").val()
var message = $("#message").val()
$.ajax({
url: 'process.php?newmsg',
type: 'POST',
data: {name:name,email:email,message:message},
success: function(data) {
$("#result").html(data);
}
});
});
}
</script>
وحسب هذا الكود، ستظهر النتيجة في div له id اسمه result، لذلك في صفحتنا سنقوم بكتابة هذا السطر في أى مكان نريده:
رمز PHP:
<div id="result"></div>
وفي كود الجافاسكربت قمنا بإنشاء متغير name, email, message والذي
كل منهم يحتوى على قيمة الـinput الذي الـid الخاص به هو name, email,
message على الترتيب، ثم قمنا بتحديد أن صفحة الـPeocessing ستدعى
process.php في GET method تدعي newmsg، ولذلك يجب علينا إنشاء بجانب
ملفنا، ملف آخر يدعى process.php، والبيانات السابقة أخذها من الـinputs
سيتم إرسالها عبر Super Global Variable $_POST، وهذا هو الكود الذي يجب أن
يكون في صفحة process.php
رمز PHP:
<?php
if(isset($_GET['newmsg']))
{
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
}
هكذا نستطيع أخذ البيانات مع الأخذ في الإعتبار أن الـkey في $_POST
يجب أن يكون هو نفسه الموجود في كود الجافاسكربت، والآن سنكمل كتابة ملف
Process.php ونقوم بإرجاع ما نريده.
رمز PHP:
<?php
if(isset($_GET['newmsg']))
{
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
if($name != "" && $email != "" && $message != "")
{
$send = mail ("ErwinChafros@gmail.com","Message from: $name", $message, "Email: $email");
if($send)
{
echo "Your message has been sent, We'll contact you soon";
}
else
{
echo "There's something went wrong, We're working to fix this as soon as possible";
}
}
else
{
echo "You have to fill all fields";
}
}
الكود بسيط، وليس الهدف منه شرح كيفية عمل صفحة إتصل بنا بشكل
إحترافي، ولكن الهدف هو معرفة كيفية إستخدام كود الجافاسكربت البسيط هذا في
برامجك، حتى لا تضطر في كل موضع أن تجعل المستخدم مضطرًا لإعادة تحميل
الصفحة في كل مرة يتفاعل مع موقعك، لذلك فمن الأفضل إستخدام هذا الكود
البسيط في جميع الأجزاء التفاعلية في موقعك.
