OVERVIEW
Some days back I wanted to setup a landing page for a web app which I am planning to start soon. I wanted people to come and put their email id so that it goes into a mailing list . I could then use this mailing list to send out an email when the site is ready.
I thought of using my existing MailChimp account to simply create a mailing list and plug in its form creator widget into a new HTML page. MailChimp and other mailing list services are very powerful and provide all the functionality to create and maintain mailing lists. But all that comes at a hefty price and besides I dont really want so much functionality. I decided to create a small tool of my own .
What I needed are the following things:
- A landing page which will have some content and a form for people to submit their email id
- A database to capture the email id and store it. It will be validated for duplicates
- Once an email id is received, a verification email will be sent with a verification link which if clicked , will mark this email id as verified, in the database
- A single page admin backend, which will list all the email ids with their verification status
I am using the simplest of tools to create this:
- Core PHP 5.6
- BootStrap 4.1 and jQuery
- Mysql backend
SCREENSHOTS
There is only one landing page which is shown below.
The admin backend email listing page is shown below:
The verification mail which is sent is shown below:
The confirmation mail which comes after clicking on the verification link is shown below:
FILES AND FOLDERS
Given below is an explanation of the files and folders:
- index.php – main landing page
- verify.php – verification link landing page
- /ajax/
- add-email.php – adds email to database
- cookie-ok.php – handles cookie confirmation
- /classes/
- /PDOLib/ – small lib to handle DB access.
- emails.php – class to handle emails table
- generic-table.php – superclass for table handling from PDOLib
- /components/
- admin-footer.php – common footer for admin pages
- admin-header.php – common header for admin pages
- admin-scripts.php – javascript files for admin pages
- admin-styles.php – css scripts for admin pages
- footer.php – common footer for public pages
- header.php – common header for public pages
- scripts.php – javascript files for public pages
- styles.php – css scripts for public pages
- /includes/
- admin-emails.js – javascript for admin emails page
- globals.php – common php routines and global data
- home.js – javascript to handle landing page
- verify-signup.js – javascript to handle verification page
- /mails/
- confirmation.html – html template for confirmation email
- verification.html – html template for verification email
- /PHPMailer-master/ – PHP Mailing library
- /xadmin/
- dashboard.php – admin dashboard
- emails.php – admin emails listing page
- index.php – admin login page
- logout.php – admin logout script
- emails.sql – mysql dump for the database
ENHANCEMENTS AND NOTES
Almost all the configuration changes will be in globals.php . The database connection settings and smtp server credentials are stored there. So be sure to make changes there before testing at your end. Also be sure to set $g_docRoot and $g_webRoot as per your folder structure.
This is a basic application and is open to many changes and improvements. There is a column for name in the database, but its not used at the moment. The landing page form can include an optional name field . To prevent spamming, a Google Recaptcha can be added to the form as well.
The admin email listing can have filtering or sorting options. An export option to download the email list as a csv file would be also a good thing to have.
SOURCE AVAILABILITY
The complete source is available on GitHub:
Leave a Reply