Skip to content

Bouwen

Jump to bottom
SanHont edited this page Jun 12, 2024 · 12 revisions

Navigatie:

Voor het responsive maken van de navigatie gebruik ik normaal gesproken JavaScript tijdens het ontwikkelproces. Helaas is dit niet altijd optimaal voor de prestaties. Voor de website Nadine Beauty wil ik echter dat de site snel blijft, omdat dit een van de eisen van de opdrachtgever was. Tijdens mijn onderzoek ontdekte ik dat het veel eenvoudiger en efficiënter kan in Svelte. Gelukkig gebruiken we Svelte voor dit project.

Hier is een voorbeeld van de code die ik gebruik:

let navActive = false;
  
const toggleNav = () => {
  navActive = !navActive;
};

Deze code doet het volgende:

let navActive = false;: Dit creëert een variabele navActive die bijhoudt of de navigatiebalk actief is (zichtbaar) of niet. const toggleNav = () => { navActive = !navActive; };: Deze functie wisselt de waarde van navActive tussen true en false elke keer dat deze wordt aangeroepen. Als navActive false is, wordt het true, en vice versa. Met slechts een paar regels code kunnen we een performant en netjes werkend menu maken dat goed functioneert met tab-navigatie. Dit zorgt ervoor dat de website snel en gebruiksvriendelijk blijft, wat essentieel is voor de eindgebruiker. en dat kan je terug lezen in deze artikel : https://linguinecode.com/post/create-a-navbar-in-svelte

Footer

De Footer is opgebouwd in verschillende delen. Het logo, de socials, een kaart en een formulier zijn hier allemaal in terug te vinden. Hoe deze onderdelen zijn gemaakt wordt hier onder uitgelegd.

Google Maps implementatie

Om een kaart in de website te laten weergeven heb ik gebruik gemaakt van een iframe die rechtstreeks van google maps zelf komt. Door deze iframe in je code te plaatsen kun je de kaart laten weergeven.

<iframe
	title="My location in Łódź"
	src="https://www.google.com/maps/embed?"
	width="400" 
        height="300"
	style="border:0;" 
        allowfullscreen="" 
        loading="lazy"
	referrerpolicy="no-referrer-when-downgrade"
></iframe>

Het logo en de socials

Het logo en de socials zijn op een simpele manier ingeladen. Het logo is gewoon een image en de socials staan in een ul > li. Hoe de svg's worden ingeladen is wel wat minder simpel. Deze worden namelijk geimporteerd vanuit een icon folder en vervolgens weer geroepen op de juiste locatie. Hierdoor hoef je niet steeds ergens de hele svg te laden.

import { Instagram, FaceBook, WhatsApp } from '$lib/index.js';
<ul>
	<li>
		<a href="https://www.instagram.com/nadiiine.beauty?igsh=b3BqbDN5ZzR4MHYw" target="_blank"
			><img src={Instagram} width="35" height="35" alt="Click to go to my instagram" /></a
		>
	</li>
</ul>

Contact Formulier

Het formulier is ingewikkeld opgebouwd en is zo gemaakt dat het ook zonder JavaScript kan werken. Ik heb in de code comments gezet zodat de code ook beter te begrijpen is. Een groot deel van het formulier speelt zich al af in de +page.server.js.

Deze code verwerkt een formulier met SvelteKit. Het controleert of de ingevulde naam, e-mail en bericht correct zijn en stuurt deze vervolgens naar een externe API. Als de gegevens niet kloppen, wordt er een foutmelding gegeven. Als het versturen naar de API lukt, krijg je een succesbericht. Anders krijg je een foutmelding. De code gebruikt moderne JavaScript technieken om de API-aanvragen goed te verwerken en fouten af te handelen.

import { fail } from '@sveltejs/kit';
import fetch from 'node-fetch';


// Load function to fetch data from Hygraph
export async function load() {
	return await hygraph.request(query);
}

// Actions object to handle form submission
/** @type {import('./$types').Actions} */
export const actions = {
	default: async ({ request }) => {
		const formData = await request.formData();
		const name = formData.get('name');
		const email = formData.get('email');
		const message = formData.get('message');

		// Validate form data
		const validationResult = validateFormData(name, email, message);
		if (validationResult.error) {
			return fail(400, {
				error: validationResult.error,
				values: { name, email, message }
			});
		}

		// Prepare payload
		const payload = preparePayload(name, email, message);

		try {
			// Send API request
			const result = await sendApiRequest(payload);

			if (result.success) {
				return {
					success: true,
					message: 'Your message has been sent successfully!',
					values: { name: '', email: '', message: '' }
				};
			} else {
				return fail(500, {
					error: 'Something went wrong. Please try again!',
					values: { name, email, message }
				});
			}
		} catch (err) {
			return fail(500, {
				error: 'Something went wrong. Please try again!',
				values: { name, email, message }
			});
		}
	}
};

// Function to validate form data
function validateFormData(name, email, message) {
	if (!name || !email || !message) {
		return { error: 'Form incorrectly filled out!' };
	}
	return { error: null };
}

// Function to prepare payload for the API request
function preparePayload(name, email, message) {
	return {
		access_key: '4eec04be-f0f8-4133-92b1-7f8ba059c9c9',
		name: name,
		email: email,
		message: message
	};
}

// Function to send API request
async function sendApiRequest(payload) {
	const response = await fetch('https://api.web3forms.com/submit', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify(payload)
	});

	const result = await response.json();

	return {
		success: response.ok,
		result
	};
}

In het footer document, waar het formulier zich bevindt is er ook nog wat JavaScript aanwezig die zorgt dat het formulier werkt.

	import { enhance } from '$app/forms';

	// Declare reactive variables to track submission state and messages
	let isSubmitting = false;
	let successMessage = '';
	let errorMessage = '';

	// Function to handle the form enhancement
	function handleEnhance({ formElement }) {
		// Handle the form submission
		const handleSubmit = async ({ result }) => {
			// Reset submission state and messages
			isSubmitting = false;
			successMessage = '';
			errorMessage = '';

			// Handle the result of the form submission
			if (result.type === 'failure') {
				// Set error message if the submission failed
				errorMessage = result.data.error;
			} else if (result.type === 'success') {
				// Reset the form and set success message if the submission succeeded
				formElement.reset();
				successMessage = result.data.message;
			}
		};

		// Return the handleSubmit function to be used by the form
		return handleSubmit;
	}

De HTML van het formulier zelf is verder niet heel ingewikkeld, hier maak ik alleen de input fields aan en verschillende error messages.

<form
	method="POST"
	use:enhance={handleEnhance}
	on:submit={() => (isSubmitting = true)}
	class="contact-form"
>
	<input type="hidden" name="subject" value="You have received a new message from your form." />
	<input type="text" name="name" placeholder="Joe Burger" required />
	<input type="email" name="email" placeholder="joeburger@gmail.com" required />
	<input type="message" name="message" placeholder="Message" required />

	{#if successMessage}
		<p class="success-message">{successMessage}</p>
	{/if}

	{#if errorMessage}
		<p class="error-message">{errorMessage}</p>
	{/if}

	<button type="submit" class="submit-button" disabled={isSubmitting}>
		{#if isSubmitting}
			Sending...
		{:else}
			Send
		{/if}
	</button>
</form>

De code voor mijn formulier behandelt het versturen van een formulier via de website. Ik heb hier onder kort uitgelegd hoe die dat precies doet, en heb vervolgens een schets gemaakt om het beter te kunnen begrijpen.

Formulierverwerking:

  • Wanneer het formulier wordt ingediend, haalt de code de gegevens op uit het formulier (naam, e-mail en bericht).
  • De gegevens worden gevalideerd om te controleren of alle velden zijn ingevuld. Als er iets ontbreekt, wordt een foutmelding gegeven.
  • Als de gegevens correct zijn, wordt een payload (pakket met gegevens) gemaakt die naar een externe API (webservice) wordt gestuurd om de gegevens verder te verwerken.

API-aanroep:

  • De payload bevat de ingevoerde naam, e-mail en het bericht, samen met een toegangsleutel.
  • Deze gegevens worden als JSON (een gestandaardiseerd gegevensformaat) naar een API (hier: 'https://api.web3forms.com/submit') gestuurd.
  • De API verwerkt deze gegevens en stuurt een antwoord terug.

Resultaatverwerking:

  • Als de API-aanroep succesvol is, ontvangt de gebruiker een succesbericht en wordt het formulier leeggemaakt.
  • Als er iets misgaat, krijgt de gebruiker een foutmelding en blijven de ingevoerde gegevens staan, zodat ze eventueel verbeterd kunnen worden.

Formuliereenhancement:

  • De code bevat ook een functie om het formulier op een verbeterde manier af te handelen, wat ervoor zorgt dat eventuele fout- en succesberichten correct worden weergegeven zonder de pagina te verversen.

Dus kort samengevat zorgt deze code ervoor dat als iemand een formulier op een website invult en verstuurt, de ingevulde gegevens worden gecontroleerd en veilig naar een server van web3forms worden gestuurd. Afhankelijk van het resultaat krijgt de gebruiker dan een succes- of foutmelding te zien.

Clone this wiki locally