Composer telepítése
Ha még nincsen, akkor telepítsd a Composer-t. Letöltés innen
Lib-ek telepítése
Composerrel: Állj a site gyökérkönyvtárába és írd ki a következő két parancsot
PHPMailer letöltése és telepítése
Állj a site-od gyökér könyvtárába és add ki az alábbi parancsot:
composer require phpmailer/phpmailerHa eddig még nem jött létre, akkor létrejön a /vendor könyvtár, abban az autoload.php fájl és a vendor/phpmailer/phpmailer könyvtárban a megfelelő lib.
GMail jelszó létrehozása
2022.05.30 óta a 3. féltől származó webes alkalmazásoknál levélküldéshez kell egy webes alkalmazásokhoz külön kell készíteni jelszót az eredeti jelszóból. Az eredmény 16 jegyű digitális karaktersorozat lesz. Leírás itt található.
- Fontos: 2 lépéses authentikációt kell beállítani a Google Accounton. Ha ezt beállítottad és az alkalmazásod autentikácója nem sikerül, akkor kell egy App password.
- Ha beléptél a Google Accountodba utána ide lépsz: https://myaccount.google.com/
- Bal oldalon kiválasztod a Security (Biztonság) menüpontot
- Kiválasztod a "How you sign in to Google," (A Google-ba történő bejelentkezés módja) alatt a "2-Step Verification" ( Kétlépcsős azonosítás) pontot.
- Az oldal alján kiválasztod az "App password" (Alkalmazásjelszavak) részt
- Beírsz egy emlékeztetőt, hogy milyen applikáció kap jelszót.
- Kiválasztod a Generate (Létrehozás)
- Beírod az App jelszavát és követed a lépéseket a felületen. Az eredmény 16 karakterből álló jelszó lesz.
- Done (Készen vagy)
Ezt a 16 karakterből álló kódot kell használni majd a $mail->Password: értékhez.
Az alábbi példa egy bootstrap oldal példája.
Innentől a kód:
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
$dir = realpath(dirname(__FILE__)."/..");
// Nyelvi beállítások, recaptcha és email tesztelés átvétele
$lang = "en";
session_start();
if( isset( $_SESSION["lang"] ) ){
$lang = $_SESSION["lang"];
}
// PHPMailer nyelvi osztály betöltése. Csak akkor kell, ha nem angol a nyelv
if( $lang != "en" ){
require $dir."/vendor/phpmailer/phpmailer/language/phpmailer.lang-$lang.php";
}
// Language setting
if( $lang == "hu"){
// an email address that will be in the From field of the email.
$fromName = "Teszt Űrlap";
$sendToName = "Teszt Tulajdonos";
$subject = "Új üzenet a Teszt honlapról";
// form field names and their translations.
// array variable name => Text to appear in the email
$fields = [
'name' => 'Keresztnév',
'surname' => 'Vezetéknév',
'phone' => 'Telefon',
'email' => 'Email',
'message' => 'Üzenet',
'server' => "Szerver"
];
$okMessage = "Az üzenetet sikeresen elküldtük. Hamarosan válaszolunk!";
$errorMessage = "Hiba történt az üzenet elküldése közben. Kérjük próbálja később újra vagy írjon az oldalon található email címre";
$emailText = $subject."\n=============================\n";
$emailTextHTML = "<h1>$subject</h1><hr/>";
$mailerError = "Levelező program hiba: ";
$emailCoding = "UTF-8";
}else{
$fromName = "Teszt Form";
$sendToName = "Teszt Owner";
$subject = "New message from Teszt Form";
$fields = [
'name' => 'Name',
'surname' => 'Surname',
'phone' => 'Phone',
'email' => 'Email',
'message' => 'Message',
"server" => "Server"
];
$okMessage = "Contact form successfully submitted. Thank you, I will get back to you soon!";
$errorMessage = "There was an error while submitting the form. Please try again later or write an email to address on the page";
$emailText = $subject."\n=============================\n";
$emailTextHTML = "<h1>$subject</h1><hr />";
$mailerError = "Mailer Error: ";
}
// Ha nem keresel hibát, akkor a hibaüzeneteket elnyomod, azaz error_reporting(0);
error_reporting( E_ALL & ~E_NOTICE );
try {
// Email összeállítása
$emailTextHTML .="<table>";
// Ha minden ok, akkor összerakod a html emailt.
$_POST['server'] = $_SERVER["SERVER_NAME"];
foreach ($_POST as $key => $value) {
// Akkor lesz mező, ha az űrlapon kitöltötték
if ( isset( $fields[ $key ] ) ) {
$emailText .= "$fields[$key]: $value\n";
$emailTextHTML .= "<tr><td><strong>$fields[$key]:</strong></td><td>$value</td></tr>";
}
}
$ReplayToEmail = isset($_POST["email"]) ? $_POST["email"] : "";
$emailTextHTML .= "</table><hr />";
// Gmail App password leírása
// https://mailtrap.io/blog/phpmailer-gmail/?fbclid=IwAR0LgfIVH_35GUYw0Z56xoVzcUbY0txV8oiGaa2mikJWeBjqu6PWTIwC8-E
$mail = new PHPMailer();
$mail->Mailer = "smtp";
$mail->isSMTP();
$mail->SMTPAuth = true; // authentikáció előírása
$mail->SMTPDebug = SMTP::DEBUG_OFF;
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // titkosítás: tls/ssl
$mail->Port = 587; // Set the SMTP port number - 587 for authenticated TLS 465
$mail->Host = "smtp.gmail.com"; // SMTP szerver $mail->Host = gethostbyname("smtp.gmail.com");
$mail->Username = "testoldal@gmail.com"; // Küldő, authentikáló adatai Google Accounttal lehet létrehozni
$mail->Password = "kuqyrfdgklqantls"; // Gmail kulcskészítés
$mail->SetFrom( "testoldal@gmail.com", $fromName ); // A küldő email címe
$mail->AddAddress( "testoldal@gmail.com", $sendToName ); // A címzett email címe és neve
$mail->addReplyTo( $ReplayToEmail ); // A válasz email cím. Az űrlap email címe
// Ékezetes címek miatt
$mail->CharSet="UTF-8";
$mail->Subject = "=?UTF-8?B?".base64_encode($subject)."?=";
$mail->isHTML(true);
$mail->msgHTML( $emailTextHTML );
// Hibaüzenetek eltüntetése
ob_start();
if( !$mail->send() ){
throw new \Exception("Mailer Error:" .$mail->ErrorInfo);
};
$responseArray = array('type' => 'success', 'message' => $okMessage);
$out = ob_get_contents();
ob_end_clean();
} catch (\Exception $e) {
$responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}
header('Content-Type: application/json');
echo json_encode($responseArray);Ha a fenti oldalt AJAX-szal javascript segítségével POST-tal hívjuk meg, akkor JSON-ként kapjuk vissza a hibaüzenetet.
Javascript kód:
(function($){
// when the form is submitted
$('form#contact-form').submit( function (e) {
if ( !e.isDefaultPrevented() ) { // if the validator does not prevent form submit
var url = SiteUrl + "/lib/request.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button id="messageAlert" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
$("button#messageAlert").click(function(){
$("div.messages").html("");
});
}
}
});
return false;
}
})
})(jQuery);A HTML kód:
<!doctype html>
<html lang="hu">
<head>
<title>Test oldal </title>
<meta charset="utf-8" />
</head>
<body>
<div id="request-container">
<h2 id="request">Ajánlatkérés</h2>
<div id="request-content">
<form id="contact-form" method="POST" action="lib/request.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Vezetéknév *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Írd be a vezetékneved *" required="required" data-error="A vezetéknév kötelező.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Keresztnév *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Írd be a keresztneved *" required="required" data-error="A keresztnév kötelező.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Írd be az email címed *" required="required" data-error="Érvényes email címet használj!">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_need">Válaszd ki az üzenet típusát *</label>
<select id="form_need" name="need" class="form-control" required="required" data-error="Válaszd ki az üzenet típusát.">
<option value=""></option>
<option value="Request quotation" >Árajánlat kérés</option>
<option value="Request order status">A Rendelés állapota</option>
<option value="Request copy of an invoice">Számlamásolat kérése</option>
<option value="Other">Rgyéb</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Üzenet *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Az üzenet szövege *" rows="6" required="required" data-error="Kérjük hagyjál üzenetet."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input id="request-submit" type="submit" class="btn btn-success btn-send" value="Küld el az üzenetet">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> Ezek kötelezően kitöltendő mezők! </p>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="assets/jquery-3.7.1.min.js"></script>
<script src="assets/popperjs/popper.min.js"></script>
<script src="assets/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<script>
var SiteUrl = "/p/request";
</script>
<script src="js/request.js"></script>
</body>A példában nincsen reCaptcha, azt a következő cikkben írom le!