ساخت فرم تماس با ما Ajax با PHP و جاوا اسکریپت
ساخت فرم تماس با ما Ajax با PHP و جاوا اسکریپت – این آموزش تشابه زیادی به این مقاله دارد . درخواست ها با فناوری ایجکس ارسال شده و توسط ادمین مشاهده و حذف می گردد .
همان 4 فایل استفاده می شود اما با تغییرات نامی فایل و متغیر و …
اکثر فایل ها از همان زیر ساخت بهره می برند که نمونه آن moderate.php می باشد .
1- index.php فرم ارسال درخواست تماس با ما
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RapidCode.IR - فرم ارتباط با ما ajax</title>
<style>
body {
text-align: center;
overflow-x: hidden;
}
#introduce {
color: white;
text-decoration: none;
font-weight: bold;
display: block;
width: 100%;
padding: 5px 10px;
background-color: #4CAF50;
text-align: center;
font-size: 25px;
margin-bottom: 45px;
}
.ds-none{
display: none;
}
.container{
width: 70%;
margin: 15px auto;
}
#the-content{
border:2px solid lightblue;
color: black;
direction: rtl;
border-radius: 4px;
margin: 15px auto;
padding: 15px;
}
/* contact Form */
.contact-wrapper h3{
background-color: #03A9F4;
color: white;
padding: 15px;
display: inline-block;
width: 400px;
border-radius: 2px;
border-bottom: 2px solid black;
margin-bottom: 20px;
}
.inp-cls{
border: 3px solid lime;
color: black;
outline: none;
border-radius: 2px;
padding: 5px;
display: block;
margin-bottom: 5px;
width: 80%;
margin-right: 10%;
height: 32px;
font-size: medium;
}
#cnt-form{
direction: rtl;
width: 70%;
margin-left: 15%;
}
#cnt-email{
direction: ltr;
text-align: left;
}
#cnt-content{
height: 120px;
font-size: large;
}
#cnt-submit{
width: 40%;
margin-right: 30%;
cursor: pointer;
}
#cnt-submit:hover{
background-color: lime;
}
/* contact List */
.contact-user{
width: 50%;
margin-left: 25%;
margin-bottom: 30px;
border: 3px solid #FF9800;
padding: 10px;
border-radius: 8px;
}
.contact-user #contact-user-fullname{
font-weight: bold;
border-bottom: 2px solid #4CAF50;
padding-bottom: 5px;
}
.contact-user #contact-user-content{
text-align: right;
line-height: 2;
direction: rtl;
}
/* Modal Style */
.modal{
width: 70%;
position: fixed;
left: 15%;
bottom: 25px;
opacity: 0.95;
z-index: 5;
background-color: #ccc;
color: white;
font-weight: bold;
font-size: 30px;
padding: 100px 0;
}
.modal.warning{
background-color: red;
}
.modal.success{
background-color: #4CAF50;
}
</style>
</head>
<?php
require_once "inc/class-DB.php";
$db = new DB();
?>
<body>
<a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>
<section class="modal ds-none"></section>
<div class="container">
<article id="the-content">
<img width="250" src="https://rapidcode.ir/wp-content/uploads/2020/04/contact.jpg" alt="">
<h1>ارتباط با ما</h1>
<p>می توانید درخواست خود را از طریق فرم پایین ارسال نمایید</p>
</article>
<section class="contact-wrapper">
<section class="contact-form">
<h3>ارسال درخواست</h3>
<form id="cnt-form" method="POST" action="contact.php">
<input class="inp-cls" type="text" name="cnt-name" id="cnt-name" placeholder="نام">
<input class="inp-cls" type="email" name="cnt-email" id="cnt-email" placeholder="EMAIL">
<textarea class="inp-cls" name="cnt-content" id="cnt-content" placeholder="متن ..."></textarea>
<input type="hidden" name="cnt-post-id" id="cnt-post-id" value="<?php echo POST_ID ?>">
<input class="inp-cls" type="button" id="cnt-submit" onclick="submitFormHandler(event)" value="ثبت درخواست">
</form>
</section>
</section>
</div>
<script src="app.js"></script>
</body>
</html>
2- app.js برای کنترل درخواست های کلاینت
function submitFormHandler(e) {
const thisElement = e.target;
const contactForm = document.querySelector("#cnt-form");
thisElement.setAttribute("disabled" , "disabled");
const xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open("POST", location.origin + "/contact.php");
xhr.onload = function(e) {
const modal = document.querySelector(".modal");
const message = this.response.msg;
if(message.search("required fields") !== -1){
modal.innerHTML = "لطفا تمامی فیلد ها را پر کنید
";
modal.classList.add("warning");
}else{
modal.innerHTML = "درخواست با موفقیت ثبت گردید و پس از بررسی ، نتیجه به ایمیل تان ارسال خواهد .
";
modal.classList.add("success");
contactForm.reset();
}
modal.classList.remove("ds-none");
setTimeout(function(btn){
modal.classList.remove("warning");
modal.classList.remove("success");
modal.classList.add("ds-none");
modal.innerHTML = "";
btn.removeAttribute("disabled");
},3000 , thisElement)
}
xhr.onerror = function(e) {
console.log("error");
}
const frmData = new FormData(contactForm);
xhr.send(frmData);
};
function actionFormHandler(e){
const thisElement = e.target;
const contactID = thisElement.dataset['contactId'];
const action = thisElement.dataset['action'];
const formAction = document.querySelector("#form-action");
const inpAction = document.querySelector("#form-action #action");
const inpcontactID = document.querySelector("#form-action #contact-id");
inpAction.value = action;
inpcontactID.value = contactID;
formAction.submit();
}
3- contact.php برای کنترل و دریافت اطلاعات ارسال شده از فرم تماس با ما در index.php
<?php
header("Content-Type: application/json");
$post_data = $_POST;
$post_data_keys = ["cnt-name" , "cnt-email" , "cnt-content" , "cnt-post-id"];
$is_form_valid = true;
foreach($post_data_keys as $key){
if(empty($post_data[$key])){
$is_form_valid = false;
break;
}
}
if($is_form_valid){
require_once "inc/class-DB.php";
$db = new DB();
$timestamp = time();
$contact_id = $db->row_insert([
"table" => "contact_list",
"content" => "(`post_id` , `fullname` , `email` , `content` , `timestamp`) VALUES (? , ? , ? , ? , ?)",
"types" => "issss",
"values" => [
$post_data['cnt-post-id'],
$post_data['cnt-name'],
$post_data['cnt-email'],
$post_data['cnt-content'],
$timestamp,
],
]);
$message = ["contact_id" => $contact_id , "msg"=>"success" , "status" => 1];
}else{
$message = ["msg"=>"Please fill in the required fields" , "status" => 0];
}
echo json_encode($message);
?>
4- moderate.php برای مشاهده ، تایید و حذف درخواست ها
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RapidCode.IR - فرم ارتباط با ما ajax</title>
<style>
body {
text-align: center;
overflow-x: hidden;
}
#introduce {
color: white;
text-decoration: none;
font-weight: bold;
display: block;
width: 100%;
padding: 5px 10px;
background-color: #4CAF50;
text-align: center;
font-size: 25px;
margin-bottom: 45px;
}
.ds-none{
display: none;
}
.container{
width: 70%;
margin: 15px auto;
}
table{
width: 80%;
margin-left: 10%;
border-collapse: collapse;
}
table td , table th{
border: 1px solid;
}
table td .action{
border:none;
font-size: medium;
font-weight: bold;
padding: 5px 15px;
cursor: pointer;
outline: none;
}
table td .action#approve{
background-color: greenyellow;
}
table td .action#delete{
background-color: tomato;
}
</style>
</head>
<?php
require_once "inc/class-DB.php";
$db = new DB();
if (!empty($_GET['contact-id']) && !empty($_GET['action'])) {
$contact_id = $_GET['contact-id'];
if (strtolower($_GET['action']) == "delete") {
$res = $db->row_delete([
"table" => "contact_list",
"content" => "`id`=? AND `approved`=?",
"types" => 'ii',
"values" => [$contact_id, 0],
]);
} else if (strtolower($_GET['action']) == "approve") {
$res = $db->row_update([
"table" => "contact_list",
"content" => "`approved`=? WHERE `id`=?",
"types" => 'ii',
"values" => [1 , $contact_id],
]);
}
}
?>
<body>
<a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>
<div class="container">
<table>
<thead>
<tr>
<th>نام</th>
<th>ایمیل</th>
<th>متن</th>
<th>اعمال</th>
</tr>
</thead>
<tbody>
<?php
$contact_list = $db->row_select([
"table" => "contact_list",
"content" => "`post_id`=? AND `approved`=? ORDER BY `id` ASC",
"types" => 'ii',
"values" => [POST_ID, 0],
]);
foreach ($contact_list as $contact):
?>
<tr>
<td><?php echo $contact['fullname'] ?></td>
<td><?php echo $contact['email'] ?></td>
<td><?php echo $contact['content'] ?></td>
<td>
<button data-contact-id="<?php echo $contact['id'] ?>" data-action="approve" class="action" id="approve" onclick="actionFormHandler(event)">تایید</button>
<button data-contact-id="<?php echo $contact['id'] ?>" data-action="delete" class="action" id="delete" onclick="actionFormHandler(event)">حذف</button>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<form id="form-action" action="" method="get">
<input type="hidden" id="action" name="action" value="">
<input type="hidden" id="contact-id" name="contact-id" value="" >
</form>
</div>
<script src="app.js"></script>
</body>
</html>
دموی پروژه فرم تماس با ما Ajax
قبل از اجرای برنامه وارد پوشه contact DATABASE to import شده دیتابیس را import کنید
ارسال نظر