14 September 2023 - 3 Oktober 2023
Email sturen met AJAX
Prototypen en uitwerken
Bekijk
live demo
Bekijk
live demo
Inleiding
Bij mij derde stageopdracht, moest met PHP en Javascript, een formulier waar je data naar de PHP server kan sturen. Dit opdracht was meer bedoeld voor backend dan frontend. Voor dit opdracht moest ik veel met PHP en Javascript. Voor de formulier had ik geen ontwerp dus ik moest mij creativiteit gebruiken. Om dit opdracht te kunnen maken heb ik veel gelezen over PHP en ook enkele instructies videos gekeken. Met genoeg kennis ging ik aan de slag.
Beschrijving opdracht
Zoals ik al heb geschreven ik moet een interface maken waar gebruikers email sturen. Het formulier moet verschillende invoervelden bevatten namelijk een tekst veld, mail veld en een bericht veld. Per veld moet er gecontroleerd worden of de juiste data ingevoerd worden. Dus ik moet ervoor zorgen dat de gebruiker een foutmelding krijgt wanneer.
Doel van de opdracht
Met deze opdracht willen ze kijken, hoeveel kennis ik heb met Formulieren. Dus er wordt gekeken of ik de juiste HTML elementen gebruikt voor de invoervelden. Verder werd er ook mijn javascript vaardigheden beoordeeld en als laatste mijn
HTML Structuur van het formulier
Formulier HTML elementen
De eerste ding die ik heb gedaan is HTML stellen. Om een formulier te kunnen maken
moet je de <form> gebruiken. Voor de email formulier, heb ik drie
type invoervelden gebruikt, er zijn twee tekst invoervelden voor de onderwerp van de
mail en de voornaam van de zender. De volgende invoerveld is om de email adres in te
voeren. Van wat ik heb uitgehaald van de opdracht, heb ik voor mezelf een
'requirement list', zodat ik weet wat ik aan het formulier moet doen.
Functionaliteiten voor het email formulier
- Gebruiker moet een onderwerp kunnen verzenden
- Gebruiker moet email, voornaam en bericht kunnen invoeren
- Gebruiker moet feedback kunnen krijgen wanneer hij iets verkeerd of correct heeft ingevuld
- Gebruiker moet een bevestiging kunnen krijgen wanneer het formulier
Javascript
Javascript
Ik heb Javascript gebruikt om de data naar de PHP server te sturen. De code maakt gebruik van DOM-manipulatie om elementen op de pagina te selecteren en interacties met de gebruiker te beheren. De variabelen worden gebruikt om specifieke elementen op de pagina vast te leggen, zoals invoervelden, foutmeldingen en pictogrammen voor succes en fout. Er zijn ook event listeners toegevoegd om verschillende gebeurtenissen te volgen, zoals het invoeren van tekst in de invoervelden, het indienen van het formulier en het hoveren over de verzendknop.
Variabelen voor dom manipulatie
const subject = document.getElementById('subject');
const subjectError = document.querySelector('.subject-error');
const subjectPreview =document.querySelector('.subject-preview');
const form = document.querySelector('form');
const submitButton = document.querySelector('button');
const inputs = document.querySelectorAll('.input');
const email = document.querySelector('#sender');
const emailError = document.querySelector(".email-error");
const name = document.querySelector('#name');
const nameError = document.querySelector('.input-error');
const mailContent = document.querySelector('#message');
const mailContentError = document.querySelector('.message-error');
const sendButton = document.querySelector('.send-button');
const sendIcon = document.querySelector('.send-icon');
Formulier validatie
Bij het invoeren van gegevens in het formulier worden functies aangeroepen om de validiteit van de invoer te controleren en de bijbehorende foutmeldingen weer te geven. De foutmeldingen bevatten visuele indicatoren, zoals iconen voor succes en fout. Bovendien is er een animatie toegevoegd aan het verzend icoon wanneer de gebruiker de knop aanwijst.
Code voor formulier validatie
form.addEventListener('submit', (e)=>{
if(!subject.validity.valid){
showSubjectError()
e.preventDefault()
}
});
function showSubjectError(){
if(subject.validity.valueMissing){
subjectError.innerHTML = `${errorIcon} Voer een onderwerp in!`;
subjectError.classList.add('error');
} else if(subject.validity.tooShort){
subjectError.innerHTML = `${errorIcon} Het onderwerp moet minimaal ${subject.minLength} tekens bevatten!`;
subjectError.classList.add('error');
}
}
AJAX verzoek
Als het formulier wordt ingediend, worden alle ingevoerde gegevens gevalideerd en worden foutmeldingen weergegeven als de gegevens ongeldig zijn. Als alle gegevens geldig zijn, wordt een AJAX-verzoek naar 'sent.php' gestuurd met behulp van de Fetch API. Het script detecteert ook of het formulier op de pagina aanwezig is om te voorkomen dat het wordt uitgevoerd op pagina's waar het niet relevant is. Ten slotte wordt er een klasse toegevoegd aan de invoervelden terwijl de gebruiker tekst invoert om een visuele indicatie te geven dat er gegevens zijn ingevoerd.
Code voor AJAX verzoek
// send the form with ajax to php
function submitEmail(){
let fd = new FormData(form);
fetch('sent.php', {
method: "post",
body: fd,
})
.then(response => response.json())
.then(data => {
console.log(data)
})
.catch(error =>{
console.log(error)
})
}
Data ontvangen in PHP server
Data opslaan als JSON
Deze PHP-code verwerkt de gegevens die zijn verzonden via een formulier. Het begint door een lege array genaamd $errors te initialiseren en converteert de POST-gegevens naar JSON-formaat met behulp van json_encode. Vervolgens worden verschillende validaties uitgevoerd op de ontvangen gegevens, zoals het controleren op leegheid, het valideren van het e-mailadres en het beperken van de lengte van het onderwerp en de naam.
Data opslaan in $errors Array
$errors =[];
$jsonData = json_encode($_POST);
$subject = $_POST["subject"];
$subjectLength = strlen($subject);
$name = $_POST["name"];
$nameLength = strlen($name);
$email = $_POST["email_sender"];
$message = $_POST["messages"];
Data valideren vanuit de server
Als er fouten worden gedetecteerd tijdens de validatie, worden deze toegevoegd aan de $errors-array met bijbehorende foutmeldingen. Als er geen fouten zijn, wordt een succesfeedback gegenereerd en wordt de HTTP-statuscode ingesteld op 200. In het geval van fouten wordt een array met foutenberichten gegenereerd en wordt de HTTP-statuscode ingesteld op 400. Ten slotte wordt het resulterende feedback array omgezet naar JSON en uitvoer gegeven in de console.
Server validatie
if(empty($subject)) {
$errors["subject"] = "Voer een onderwerp in!";
}elseif($subjectLength < 3) {
$errors["subject"]="Het onderwerp moet minimaal 3 karakters bevatten!" ;
}elseif($subjectLength> 50) {
$errors["subject"] = "Het onderwerp moet maximaal 50 karakters bevatten!";
}
if(empty($name)) {
$errors["name"] = "Voer je naam in!";
}elseif ($nameLength < 2 ) { $errors["name"]="Je naam moet minimaal 2 karakter bevatten!" ;
} elseif($nameLength>50) {
$errors["name"] = "Je naam moet maximaal 50 karakter bevatten!";
}
if(empty($email)) {
$errors["email"] = "Voer je email in!";
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$errors["email"] = "Voer een geldig email in!";
}
if(empty($message)) {
$errors["message"] = "Voer een bericht in!";
}
if(empty($errors)) {
$feedback = array('success'=> 'Bedankt voor je bericht');
http_response_code(200);
include 'confirmation.php';
}else {
$feedback = array('errors'=> $errors);
http_response_code(400);
echo json_encode($feedback);
}
Geen fouten krijgen de gebruiker een bevestiging pagina
Als er geen fouten zijn, wordt de bedankpagina naar de gebruiker gestuurd bevat dat weergeeft dat het formulier succesvol is ingediend.
Alle verzamelde feedback en kritiekpunten
Ik heb de eerste versie van het formulier afgerond en ging op zoek naar feedback. Voor de feedback heb ik een overleg met de backend developer en niet mij stagebegeleider omdat dit opdracht was veel te maken met de backend. Voor de gesprek heb ik een zip bestand gestuurd naar Tim de backend developer. Tijdens het gesprek heeft hij door de feedback gelopen en ik heb daardoor alles in mij logboek genoteerd. Met de nieuwe feedback heb ik dan een nieuwe iteratie gemaakt.
Formulier met succes of foutmelding
Formulier is niet correct ingevuld
Foutmelding
Wanneer de gebruiker het formulier gebruikt, moeten ze feedback krijgen of ze iets niet goed heb ingevuld. De manier hoe ik dit heb aangepakt is een bericht zichtbaar maken met instructies hoe ze het fout kan verbeteren. Ik heb daarna met css de kleur rood gebruikt om het aan te geven dat de ingevoerde data verkeerd is. Voor mensen die kleurenblind zijn heb ik iconen gebruikt om de boodschap duidelijker te maken.
Hoe krijg je deze foutmeldingen?
- Wanneer je de verzend knop klikt zonder niks in te vullen
- Wanneer je ongeldige email adres invoert
- Wanneer je geen naam invoert
- Wanneer je geen bericht invoert
Hier is de javascript code voor het formulier foutmelding
// Show error if the user do not fill the form with the correct data
form.addEventListener('submit', (e)=>{
if(!subject.validity.valid){
showSubjectError()
e.preventDefault()
}
if(!name.validity.valid) {
showNameError();
e.preventDefault();
}
if(!email.validity.valid) {
showEmailError()
e.preventDefault();
}
if(!mailContent.validity.valid) {
showEmailContentError();
e.preventDefault();
}
})
function showSubjectError() {
if(subject.validity.valueMissing) {
subjectError.innerHTML = `${errorIcon} Voer een onderwerp in!`;
subjectError.classList.add('error');
} else if(subject.validity.tooShort) {
subjectError.innerHTML = `${errorIcon} Het onderwerp moet minimaal ${subject.minLength} tekens bevatten!`;
subjectError.classList.add('error');
}
}
function showNameError() {
if(name.validity.valueMissing) {
nameError.innerHTML = ` ${errorIcon} Voer uw naam in!`;
nameError.classList.add('error');
} else if(name.validity.tooShort) {
nameError.innerHTML = `${errorIcon} Uw naam moet minimaal ${name.minLength} tekens bevatten!`;
nameError.classList.add('error');
}
}
function showEmailError(){
if (email.validity.valueMissing) {
emailError.innerHTML = ` ${errorIcon} Voer uw email in!`;
emailError.classList.add('error');
} else if(email.validity.typeMismatch){
emailError.innerHTML = ` ${errorIcon} Voer een geldig email adres in!`;
emailError.classList.add('error');
}
}
function showEmailContentError(){
if(mailContent.validity.valueMissing){
mailContentError.innerHTML = `${errorIcon} Je moet nog een bericht schrijven!`
mailContentError.classList.add('error');
}
}
submitButton.addEventListener('click',()=>{
submitEmail()
});
Formulier is correct ingevuld
Aan de andere kant geef je ook feedback aan de gebruiker wanneer ze de juiste data invoert. Om dit te bereiken heb javascript gebruikt om een css class te maken wanneer de gebruiker goed heeft ingevuld. De class heb ik gezet bij de invoervelden. Dus wanneer de gebruiker de juiste data invoert ga de foutmeldingen weg en de border wordt verandert naar een groene kleur. Voor de mensen die geen groen kunnen zien heb ik een vinkje icoon gebruikt om aan te geven dat de formulier goed is ingevuld.
Hier is de javascript code voor het formulier foutmelding
const errorIcon = `
`;
const successIcon = `
`;
// feature detection let the code only run if the form element exists on the page
// used the same script file on the sent.php file
if(form) {
// get form data values with the input eventlisteners
subject.addEventListener('input',() => {
// console.log(emailSubject.value);
if(subject < 0){
subjectPreview.innerHTML="Nieuwe Bericht" ;
} else {
subjectPreview.innerHTML=`Onderwerp:
${subject.value}`;
}
if(subject.validity.valid) {
subjectError.innerHTML=`${successIcon}`;
subjectError.classList.remove('error');
}else{
showSubjectError()
} });
name.addEventListener('input', ()=>{
const nameValue = name.value;
console.log(nameValue);
if(name.validity.valid) {
nameError.innerHTML = `${successIcon}`;
nameError.classList.remove('error');
} else {
showNameError()
}
})
email.addEventListener('input' , ()=>{
if(email.validity.valid){
emailError.innerHTML = `${successIcon}`;
emailError.classList.remove('error');
}else{
showEmailError()
}
});
mailContent.addEventListener('input' ,()=>{
if(mailContent.validity.valid){
mailContentError.innerHTML = `${successIcon}`;
mailContentError.classList.remove('error');
}else{
showEmailContentError()
}
})
submitButton.addEventListener('click',()=>{
submitEmail()
});
}
Wat heb ik geleerd?
In deze opdracht heb ik kennis gemaakt met PHP. Het is een nieuwe programmeertaal die ik niet bij CMD heb geleerd. Dit opdracht voldoet aan de leerdoel: Nieuwe frameworks leren. Ik heb daardoor veel documentatie gelezen over PHP zodat ik beter kan begrijpen hoe deze opdracht kan maken. Wat ik heb gelezen over PHP is alleen de basis. Het bevat dingen zoals, variabele aanmaken, de soorten operators, hoe je met arrays kan werken en over formulier validatie. Ik ben niet dieper in gegaan.
Verder heb ik geleerd om feedback te vragen aan andere expertise. Dit opdracht is meer gefocust op de backend en niet frontend dus ik moest een backend programmeur vragen stellen wanneer ik vast liep. Dat ing best wel simpel het is gewoon een kwestie van vragen.
Als laatste heb ik veel met javascript kunnen doen om het formulier interactief te maken. Met javascript was het mogelijk om feedback aan de gebruiker te geven de data goed of fout is ingevuld.
Kernpunten
- Leren hoe je PHP kan implementeren in een project
- Formulier gegevens sturen vanuit de client naar de server me PHP
- Juiste HTML elementen gebruiken voor formulier
- Feedback ontvangen en verwerken
- Javascript gebruiken om de formulier data te controleren
- Feedback aan de gebruiker geven of de formulier goed of fout is ingevuld