{"id":3638,"date":"2021-09-05T07:10:07","date_gmt":"2021-09-05T07:10:07","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=3638"},"modified":"2021-09-05T07:10:09","modified_gmt":"2021-09-05T07:10:09","slug":"setting-up-a-landing-page-with-email-capture-spring-5-mvc","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2021\/09\/05\/setting-up-a-landing-page-with-email-capture-spring-5-mvc\/","title":{"rendered":"Setting up a Landing Page with Email Capture &#8211; Spring 5 MVC"},"content":{"rendered":"\n<p><strong>OVERVIEW<\/strong><\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>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 . <\/p>\n\n\n\n<p>What I needed are the following things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A landing page which will have some content and a form for people to submit their email id<\/li><li>A database to capture the email id and store it. It will be validated for duplicates<\/li><li>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<\/li><li>A single page admin backend, which will list all the email ids with their verification status<\/li><\/ul>\n\n\n\n<p>I am using the following to create this:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Spring MVC 5.x and Hibernate 5.x running on Apache Tomcat 8.5<\/li><li>BootStrap 4.1 and jQuery<\/li><li>Mysql backend<\/li><\/ul>\n\n\n\n<p><strong>SCREENSHOTS<\/strong><\/p>\n\n\n\n<p>There is only one landing page which is shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"450\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-940x450.png\" alt=\"\" class=\"wp-image-3621\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-940x450.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-620x297.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-300x144.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1-768x367.png 768w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/screen1.png 1482w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p>The admin backend email listing page is shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"450\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-940x450.png\" alt=\"\" class=\"wp-image-3622\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-940x450.png 940w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-620x297.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-300x144.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2-768x367.png 768w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/2.png 1482w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<p>The verification mail which is sent is shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"821\" height=\"406\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1.png\" alt=\"\" class=\"wp-image-3624\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1.png 821w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1-620x307.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1-300x148.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail1-768x380.png 768w\" sizes=\"auto, (max-width: 821px) 100vw, 821px\" \/><\/figure>\n\n\n\n<p>The confirmation mail which comes after clicking on the verification link is shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"428\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2.png\" alt=\"\" class=\"wp-image-3625\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2.png 795w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2-620x334.png 620w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2-300x162.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2021\/08\/mail2-768x413.png 768w\" sizes=\"auto, (max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<p><strong>FILES AND FOLDERS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\/src\/main\/java\/com\/truelogic\/spring5\/<ul><li>dao\/<ul><li>EmailsDAO.java &#8211; DAO for handling emails table<\/li><\/ul><\/li><li>service\/<ul><li>EmailsService.java &#8211; Servce Wrapper for EmailsDAO<\/li><li>MailerService.java &#8211; Service to send mails<\/li><\/ul><\/li><li>model\/<ul><li>Emails.java &#8211; Model for emails table<\/li><\/ul><\/li><li>AdminController.java &#8211; Controller for admin pages<\/li><li>MainController.java &#8211; Controller for public pages<\/li><\/ul><\/li><li>\/src\/main\/resources<ul><li>mails\/<ul><li>verification.html &#8211; mail template for verification email<\/li><\/ul><\/li><\/ul><\/li><li>\/src\/main\/webapp<ul><li>js\/<ul><li>admin-emails.js &#8211; javascript file for admin-emails page<\/li><li>home.js &#8211; javascript file for home page<\/li><li>verify-signup.js &#8211; javascript file for signup verification page<\/li><\/ul><\/li><li>\/WEB-INF\/<\/li><li>views\/<ul><li>admin\/<ul><li>dashboard.jsp &#8211; admin dashboard<\/li><li>emails.jsp &#8211; view emails in database<\/li><li>login.jsp &#8211; admin login <\/li><\/ul><\/li><li>components\/<ul><li>admin-footer.jsp &#8211; common footer for admin pages<\/li><li>admin-header.jsp- common header for admin pages<\/li><li>admin-scripts.jsp &#8211; common javascript files for admin pages<\/li><li>admin-styles.jsp &#8211; common css files for admin pages<\/li><li>footer.jsp &#8211; common footer for public pages<\/li><li>header.jsp &#8211; common footer for header pages<\/li><li>scripts.jsp &#8211; common javascript files for public pages<\/li><li>styles.jsp &#8211; common css files for public pages<\/li><\/ul><\/li><li>spring5-servlet.xml &#8211; controller servlet<\/li><li>web.xml &#8211; web configuration file<\/li><\/ul><\/li><\/ul><\/li><li>pom.xml &#8211; Maven build file<\/li><\/ul>\n\n\n\n<p><strong>ENHANCEMENTS AND NOTES<\/strong><\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><strong>SOURCE AVAILABILITY<\/strong><\/p>\n\n\n\n<p>The complete source is available on GitHub:<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/amitonline\/spring5mvcstarter\">https:\/\/github.com\/amitonline\/spring5mvcstarter<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>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 <a class=\"mh-excerpt-more\" href=\"https:\/\/truelogic.org\/wordpress\/2021\/09\/05\/setting-up-a-landing-page-with-email-capture-spring-5-mvc\/\" title=\"Setting up a Landing Page with Email Capture &#8211; Spring 5 MVC\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":3635,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[319],"tags":[],"class_list":["post-3638","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=3638"}],"version-history":[{"count":6,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3638\/revisions"}],"predecessor-version":[{"id":3645,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3638\/revisions\/3645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/3635"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=3638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=3638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=3638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}