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