Setting up a Landing Page with Email Capture – Spring 5 MVC

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 following to create this:

  • Spring MVC 5.x and Hibernate 5.x running on Apache Tomcat 8.5
  • 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

  • /src/main/java/com/truelogic/spring5/
    • dao/
      • EmailsDAO.java – DAO for handling emails table
    • service/
      • EmailsService.java – Servce Wrapper for EmailsDAO
      • MailerService.java – Service to send mails
    • model/
      • Emails.java – Model for emails table
    • AdminController.java – Controller for admin pages
    • MainController.java – Controller for public pages
  • /src/main/resources
    • mails/
      • verification.html – mail template for verification email
  • /src/main/webapp
    • js/
      • admin-emails.js – javascript file for admin-emails page
      • home.js – javascript file for home page
      • verify-signup.js – javascript file for signup verification page
    • /WEB-INF/
    • views/
      • admin/
        • dashboard.jsp – admin dashboard
        • emails.jsp – view emails in database
        • login.jsp – admin login
      • components/
        • admin-footer.jsp – common footer for admin pages
        • admin-header.jsp- common header for admin pages
        • admin-scripts.jsp – common javascript files for admin pages
        • admin-styles.jsp – common css files for admin pages
        • footer.jsp – common footer for public pages
        • header.jsp – common footer for header pages
        • scripts.jsp – common javascript files for public pages
        • styles.jsp – common css files for public pages
      • spring5-servlet.xml – controller servlet
      • web.xml – web configuration file
  • pom.xml – Maven build file

ENHANCEMENTS AND NOTES

Almost all the configuration changes will be in spring5-servlet.xml . The database connection settings and smtp server credentials are stored there. So be sure to make changes there before testing at your end.

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:

https://github.com/amitonline/spring5mvcstarter

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.