Een nieuwsbrief systeem maken – DDT
Eindelijk nog eens een tutorial over een mogelijkheid met de fantastische extensie Dreamweaver Developer Toolbox. Voor degene die nog niet weten is welke extensie dit is lees even de introductie post over de Dreamweaver Developer Toolbox.
Kort omschrevenkan je hiermee PHP/MySQL websites mee maken zonder dat je enige kennis van programeren hebt.
Deze tutorial zal gaan over het opzetten van een nieuwsbrief systeem op je website. Wat is hiermee mogelijk :
- Bezoekers kunnen zich inschrijven en komen terecht in de database.
- Jij kan als website beheerder alle leden bereiken met 1 mail.
Wat heb je nodig om dit te maken :
- Dreamweaver CS3
- Dreamweaver Developer Toolbox
We openen phpMyAdmin en maken een database aan, als je deze nog niet hebt, en voegen een tabel ‘nieuwsbrief’ in met 3 cellen en vergeet niet op te slaan :
- id -> Met sleutel en auto_increment.
- naam
Zie voorbeeld :
Nu de database in orde is maken we 2 PHP pagina’s aan en noem deze inschrijven.php en versturen.php.
Op inschrijven.php gaan we het inschrijvingsformulier aanmaken waar de bezoekers zich kunnen inschrijven en in de database terechtkomen.
Indien je nog geen connectie hebt gemaakt binnen Dreamweaver doe je dit best eerst. Hoe? Lees even de tutorial ‘Connectie maken met de database‘.
Open nu inschrijven.php en ga via Application -> Server Behaviors -> + -> Developer Toolbox -> Forms -> Insert Record Form Wizard. Zie voorbeeld :
Nu start Dreamweaver een wizard op, we overlopen :
Stap 1 :
Connection : Selecteer de connectie die je hebt aangemaakt voor je website.
Insert into table : Selecteer de tabel die je hebt ingemaakt in phpMyAdmin.
Primary key column : Selecteer de cel id.
After inserting, go to : Selecteer de pagina waar de bezoeker terecht moet komen na het ingeven van zijn gegevens.
Klik op Next.
Stap 2 :
In deze stap is het enige nuttige om aan te passen het veld ‘Label’. Dit is de naam die voor het textvak komt te staan van je inschrijvingsformulier.
Klik op Next :
Stap 3 :
Hier kan je de velden een validatie meegeven.
Selecteer een veld in ‘Form fields’, bijvoorbeeld e-mail. Klik Required aan en zet Validation format’ op ‘E-mail adress’. Dit neemt nu enkel teksten aan in een vorm van een e-mail adres.
Custom message : Deze kan je aanvinken om een tekst te laten zien als een verplicht veld niet is ingevuld.
Klik op Finish en en het inschrijvings formulier staat nu op je pagina. Zie voorbeeld binnen Dreamweaver :
Button naam kan je gewoon veranderen via het properties paneel.
De error message die je ziet kan je gewoon selecteren en verwijderen door op delete te drukken. Best om deze NIET te laten staan.
Het inschrijvingsformulier is nu klaar. Je kan er ook voor zorgen dat bij het inschrijven de bezoeker een mailtje ontvangt met een bedankt tekst in en/of een gratis download. Hoe doe je dat? Lees even de tutorial ‘Automatisch een mail versturen‘.
Nu deze pagina klaar is gaan we een pagina aanmaken vanwaar je de ingeschreven leden allemaal een nieuwsbrief kunnen sturen door één druk op de knop.
Om de bezoekers de mogelijkheid te geven om de nieuwsbrief online te kunnen lezen en om oudere nieuwsbrieven te kunnen raadplegen gaan we deze opslaan in de database.
We openen phpMyAdmin en voegen een nieuwe tabel ‘berichten’ in met 2 cellen en vergeet niet op te slaan :
- id -> Met sleutel en auto_increment.
- bericht
Zie voorbeeld :
Nu de database is bijgewerkt gaan we een formulier aanmaken om de nieuwsbrief te versturen.
Open versturen.php en ga via Application -> Server Behaviors -> + -> Developer Toolbox -> Forms -> Insert Record Form Wizard. Zie voorbeeld :
Nu start Dreamweaver een wizard op, we overlopen :
Stap 1 : :
Connection : Selecteer de connectie die je hebt aangemaakt voor je website.
Insert into table : Selecteer de tabel die je hebt ingemaakt in phpMyAdmin.
Primary key column : Selecteer de cel id.
After inserting, go to : Selecteer de pagina waar de bezoeker terecht moet komen na het ingeven van zijn gegevens.
Klik op Next.
Stap 2 :
In deze stap veranderen we het veld ‘Displays as’. In plaats van een textvak kiezen we nu voor een textarea, een groter vak om de tekst in te schrijven.
Klik op Next :
Stap 3 :
Hier kan je de velden een validatie meegeven. Maak van de textarea een verplicht veld en geef ook een Error message mee.
Klik op Finish en en het inschrijvings formulier staat nu op je pagina. Zie voorbeeld binnen Dreamweaver :
Button naam kan je gewoon veranderen via het properties paneel.
De error message die je ziet kan je gewoon selecteren en verwijderen door op delete te drukken. Best om deze NIET te laten staan.
Selecteer nu de textarea en verander in je properties paneel ‘Num lines’. In plaats van 5 kiezen we voor 20, de textarea wordt nu een stuk langer. Handiger om in te schrijven.
Nu is alles bijna klaar. Op dit moment zal een verzonden bericht enkel in de database komen maar wordt nog niet verstuurd. Dit is de volgende stap.
Eerst moet er een recordset aangemaakt worden. Ga via Application -> + Recordset en maak de volgende recordset aan :
Name : Geef de recordset een naam
Connection : Selecteer de connectie van u website
Table : Selecteer de tabel in de database waar je e-mail adressen in zitten
Nu de recordset aangemaakt is, selecteer je de button van je formulier :
En ga via Application -> Server Behaviors -> + -> Developer Toolbox -> Send E-mail -> Send E-mail To Recipients From Recordset. Zie voorbeeld :
Nu start Dreamweaver een wizard op, we overlopen :
Recordset :Selecteer de recordset welke je hebt aangemaakt.
E-mail to field : Selecteer de cel van de database waar je de e-mail adressen opslaat.
From : Vul een e-mail adres in welke fungeert als afzender.
Subject : De titel van de e-mail.
Body : Laat op ‘Write Content’ staan.
Content : Hier kan je voor de content kiezen welke je hebt ingegeven in het teksvak van je formulier. Dat doe je door op de bliksem 
te klikken en het betreffende veld te kiezen. Zie ondestaande image :
Transaction field : Selecteer hier het juiste veld. Deze verschijnt nu bij ‘Content’. En klik OK.
Klik nogmaals op OK en de mailfunctie is nu toegevoegd aan je formulier. Alle ingeschreven leden zullen nu een e-mail ontvangen.
Het formulier om een mail mee te versturen ziet er zo uit in preview :
Zoals je merkt kan je enkel een simpele tekst ingeven zonder meer. Hier kan je wat aan doen door een Text Editor toe te voegen, deze laat het om HTML en afbeeldingen toe te voegen aan je e-mail. In deze post heb je keuze tussen 4 text editors.
Zelf kies ik nu om NicEdit toe te voegen. Het enige wat je moet doen is enkele regels code toevoegen in de head van je pagina, zoals is uitgelegd op de website. Zie afbeelding :
Kopiëren en plakken en de textarea ziet er nu zo uit :
Ziet er al veel beter uit… Je hebt nu veel meer mogelijkheden om je nieuwsbrief op te maken.
Nog 1 aanpassing en klaar is de nieuwsbrief. We dienen nog even een e-mail adres in te geven voor de mailserver. Gia via de toolbar en kies voor het uiterst rechtse symbool. zie afbeelding :
Nadat je op het uiterst rechtse symbool hebt geklikt kies je voor ‘E-mail settings’ en zie je volgend kadertje verschijnen :
Laat alle velden leegen vul enkel bij ‘Default sender’ een e-mail adres in.
Nieuwsbrief klaar! Versturen maar zou ik zeggen… Let wel op! Het versturen kan je enkel online testen, niet lokaal op je pc!
Nog vragen? Bezoek het forum...
:
Indien je het nuttig vond mag je altijd een bericht achterlaten of u inschrijven op onze nieuwsbrief om altijd op de hoogte te blijven.
[...] 20. Een nieuwsbrief systeem maken [...]