AJAX + PHP ilə əks əlaqə forması

2 Bəyənmə Şərh yazmaq

İnternet bizim həyatımızın artıq bir ayrılmaz hissəsidir. Müxtəlif saytları insanlar demək olar ki hər gün ziyarət edir. Bu saytlarda müxtəlif məlumatlar və formalar mövcuddur. Onların yaradılmasında isə əlbətdəki proqramçıların əməyi ilə ərsəyə gəlmişdir. Bu məqalədə sizə həmən blokların birindən – Əks əlaqə formasından bəhs edəcəm.

Saytlarda əgər fikir vermisinizsə bəzi formalarda yazı yazıb göndərərkən səhifə yenilənmir. Buna nail olmaq üçün isə AJAX texnologiyasından istifadə edilir. Gəlin birinidə biz yaradaq.

İlk öncə fayllarımızın strukturuna nəzər yetirək.

www/
│ 
├── js/
│   └── command.js
│   
├── img/
│    └── 35.gif
│
├── index.html
└── mail.php

Düşünürəm artıq aydındır ki, index.htmlmail.php qovluğun ən kökündə olacaq, və yanlarında iki qovluq js və img yaradılıb, müvafiq olaraq command.js35.gif yerləşdirilmişdir.

Sonra index.html faylını yaradaraq içərsinə aşağıdakı kodu kopyalıyırıq:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<title>AJAX ilə göndəriş forması</title>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h3>AJAX ilə göndəriş</h3>
		</div>
		<div class="col-md-12">

		<!-- Large modal -->
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Bizə yazın</button>

			<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
			  <div class="modal-dialog modal-lg" role="document">
			    <div class="modal-content">
					  <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="gridSystemModalLabel">Форма обратной связи</h4>
			      </div>
			      <div class="modal-body">
			      	<div class="row">
			      		<div class="col-md-12">
			      			<div class="hide" id="respons"></div>
					      	<form method="POST" action="mail.php" id="mailForm">
							  <div class="form-group">
							    <label for="labelEmail">Email ünvanınız</label>
							    <input type="email" class="form-control" name="email" id="email" placeholder="Email" required>
							  </div>
							  <div class="form-group">
							    <label for="labelPhone">Mobil nömrəniz</label>
							    <input type="text" class="form-control" name="mobile" id="mobile" placeholder="+994551234567" required>
							  </div>
							  <div class="form-group">
							    <label for="labelText">Məktubun mətni</label>
							    <textarea name="text" id="text" cols="30" rows="10" class="form-control"></textarea>
							  </div>
							  <button type="submit" class="btn btn-default">Göndərmək</button>
							</form>
						</div>
			      	</div>
			      	</div>	
			    </div>
			  </div>
			</div>

		</div>
	</div>

</div>

</body>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery AJAX SCRIPT-->
<script src="./js/command.js"></script>
</html>

Brauzerdə görünəcək mətnimiz hazırdı. İndi biz mail.php faylını yaratmalıyıq ki, doldurmuş olduğumuz məlumatlar bizə gəlib çatsın. Bunun üçün də mail.php faylının içinə aşağıdakıları kopyalıyırıq:

<?php
//Əks əlaqə məktubu kimə göndəriləcəl
define('COMP_MAIL_TO','CompBoard <info@bytes.az>');

//İnformator xarakerli göndərənin məlumatı
define('COMP_MAIL_AUTOR','CompBoard <info@bytes.az>');
 
/**Poçtumuza göndəriləcək məktubu yaradırıq
* @param string  $to - Kimə
* @param string  $from - Kimdən
* @param string  $title - Məktubun mövzusu
* @param string  $message - Məktubun mətni
*/
function sendMail($to, $from, $title, $message)
{
	//Məktubun başlığını formalaşdırırıq
	$subject = $title;
	$subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
   
	/*Məktubun mətnini formalaşdırırıq,
	və serverə bildiririk ki HTML dən istifadə olunacaq*/
	$headers = "Content-type: text/html; charset=\"utf-8\"\r\n";
	$headers .= "From: ". $from ."\r\n";
	$headers .= "MIME-Version: 1.0\r\n";
	$headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";

	//Məktubu ünvana göndəririk
	if(!mail($to, $subject, $message, $headers))
		return 'Göndərərkən xəta baş verdi!';  
	else  
		return true;  
}

//Daxil edilmiş məlumatları yoxlayırıq	
if(isset($_POST['email']))
{
	//Dəyişəni təyin edirik
	$resp = array();
	
	//Formanı validasiya edirik
	if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
		$resp['err'][] = 'Email düzgün deyil'; 
	}
	
	//Regex ilə telefonun standartını təyin edirik
	$pattern = '/(\+994)\d{9}/';
	
	//Sonra standart ilə yoxlayırıq
	if(!preg_match($pattern, $_POST['mobile'])){
		$resp['err'][] = 'Möbil nömrəni düzgün daxil edin';
	}
   
	//Başlığı formalaşdırıq
	$title = 'Məktubumuz var!';
		
	//HTML təqlərlə olan məktubun mətnini hazırlayırıq
	$msg  = 'Mobil nömrə <strong>'. $_POST['mobile'].'</strong><br />';
	$msg .= nl2br($_POST['text']);
	 
	//Xətaları yoxlayırıq
	if(!empty($resp['err']))
	{
		//Xətaları göstəririk
		$resp['status'] = 0;
		echo json_encode($resp);
	}
	else
	{
		//Məktubu göndərən formanı çağırıq
		if(sendMail(COMP_MAIL_TO, COMP_MAIL_AUTOR, $title, $msg))
		{
			//Məktubu göndəririk
			$resp['ok'] = 'Məktub göndərildi...';
			$resp['status'] = 1;
			echo json_encode($resp);
		}
	}
	
}

?>

Sual yaranırki, bəs bu formanı quraşdırarkən niyə səhifə yeniləndi? Çünkü biz AJAX-a cavabdeh olan command.js faylımızı hələm yaratmamışıq. Gəlin js qovluğunun içində onuda yaradaq. Aşağıdakı kodu faylın içinə kopyalayın

$(document).ready(function(){
    
    //Formanın məlumatlarını göndəririk
    $('#mailForm').submit(function(e){
        e.preventDefault();
        //formanın obyektini alırıq
        var form = $('#mailForm');
            
        //Efekt üçün loaderi qoşuruq
        var preloader = '<img src="./img/35.gif" alt="preloader"> Отправляем письмо...';
        $('#respons').removeClass('hide').addClass('alert alert-warning').html(preloader)

        //1,5 saniyəlik ləngimə təyin edirik
        setTimeout(function(){
            //Serverə AJAX ilə məlumatları göndəririk
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize(),
                dataType: "JSON",
                success: function( data ) {
                    if(data.status == 0)
                    {
                        err = '<ul>'
                        $.each(data.err, function(key, val){
                            err += '<li>'+ val +'</li>'
                        })
                        err += '</ul>'
                        $('#respons').removeClass().addClass('alert alert-danger').html(err)
                    }
                    else
                    {
                        $('#respons').removeClass().addClass('alert alert-success').html(data.ok)
                        setTimeout(function(){
                            form.trigger('reset');
                            $('#respons').removeClass().addClass('hide').empty();
                            $('.bs-example-modal-lg').modal('hide');        
                        }, 1500)
                    }
                }
            })      
        }, 1500)
    })
})

Və sonda da formaya gözləmə efekti verən 35.gif faylımızı aşağıdan kopyalayaraq img qovluğuna köçürürük.

Brauzerdə kodirovka problemi yaşamamaq üçün, mail.php faylının yanında .htaccess adlı bir fayl yaradıb içərsinə bunu kopyalıyırıq: AddDefaultCharset utf-8

Diqqət: Əgər siz lokal olaraq DENWER, XAMPP, kimi serverdə yuxarıdakı skripti test edirsinizə, o zaman yoxlanış zamanı sizə məktubun gəlməsini gözləməyin. Məktublarınız  sendmail adlı daxili qovluqda olacaqdır. Misal olaraq Denwer servedində məktublar Z:\tmp\!sendmail\ qovluğunda yığışacaqdır. Qovluqdakı faylları açmaq üçün, istənilən məktub proqramından istifadə edə bilərsiniz.

Orfoqrafik Səhv tapdınız? Səhv yazılmış sözü seçin və Ctrl + Enter düymələrini basın.

AJAX + PHP ilə əks əlaqə forması
5 / 2 səs

Digər maraqlı məqalələrimiz

loading...

Bir cavab yazın

Orfoqrafiya səhvi bildirişi

Aşağıdakı hissə sayt rəhbərliyinə göndəriləcəkdir: