ساخت فرم تماس با ما 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 کنید
لیست نظرات
سلام کد هاتون علی ولی اطلاعات mysqlهم میدادید خوب میشد
درود لطفا در خواندن مقاله دقت فرمایید در پایین مطلب لینک دیتابیس و پروژه گذاشته شده بود .
سلاام من امپورت کردم و خوبم ایمپورت شد ولی ارور میداد و بالا میومد که دیتابیس رو وارد کن چرا؟؟!!!
فایل inc/config.php را با توجه به سرور خود بررسی کنید .