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