Underground Coding
- Posts:
- 458
- Group:
- Admins
- Member
- #1
- Joined:
- Sep 5, 2010
- Favorite Browser
- Google Chrome
- HTML & CSS Proficiency
- 10
- JavaScript Proficiency
- 9
- PHP Proficiency
- 7
- Graphic Design Proficiency
- 5
- Forrst
- Pro
|
How To Make A PHP Mailing List Subscription - Part 1
Difficulty: Medium Time: 30-45 Minutes
Today we will be making a PHP mailing list subscription similar to Web Box's. No not similar, we will be working off the Web Box source so you guys are in for a real treat today.
Let's look at it shall we? When you enter nothing and click subscribe it says "Valid Email Please". That is because it uses a regular expression to see if the user's input is an actual valid email or not. The regular expression used can be found here. Now if we enter an email that is already subscribed then it will say "Already Subscribed", and if we enter an email that is both valid and not in use, then it will say "Subscribed". Now let's get started.
We'll start with some base HTML and CSS like so.
- Code: HTML
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Web Box CMS</title> <link href="files/teaser.css" rel="stylesheet" type="text/css"/> </head> <body> <center> <div> <span id="logo"><span id="main">Web Box</span><span id="sub">A New Kind Of CMS</span></span> </div> <div id="container"> <form method="post" action="index.php"> <span id="form"> <input type="text" name="email" placeholder="you@email.com" /> <button type="submit">Subscribe</button> </span> </form> </div> </center> </body> </html>
- Code: Teaser.css
-
html, body { background: #fafafa; font-family: Calibri; color: #050505; font-weight: bold; zoom: 1.2; }
#container { margin-top: 5%; }
#form { padding: 15px; background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffffff), color-stop(100%, #f7f7f7)); background: -moz-linear-gradient(top, #ffffff 5%, #f7f7f7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7'); border: solid 1px #c4c4c4; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0px 0px 1px #828282; }
input, button{ padding: 8px 12px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
input { width: 300px; margin: 0px 10px; outline: none; border: 1px solid #c4c4c4; box-shadow: inset 0px 1px 2px #AFAFAF; background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffffff), color-stop(100%, #fcfcfc)); background: -moz-linear-gradient(top, #ffffff 5%, #fcfcfc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc'); }
input:focus { border: 1px solid #8e8e8e; }
button { background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#519CFF), color-stop(100%,#1E7CFF)); background: -moz-linear-gradient(top, #5182FF 15%, #1E7CFF 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5182FF', endColorstr='#1E7CFF'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5182FF', endColorstr='#1E7CFF'); color: white; border: 1px solid #479AFF; box-shadow: 0px 1px 2px #000000; text-shadow: 1px 1px 1px #1673FF; font-weight: bold; position: relative; bottom: 2px; cursor: pointer; }
button:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#60A5FF), color-stop(100%,#3089FF)); background: -moz-linear-gradient(top, #60A5FF 15%, #3089FF 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60A5FF', endColorstr='#3089FF'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60A5FF', endColorstr='#3089FF'); border: 1px solid #3D91FF; }
button:active { background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#1E7CFF), color-stop(100%,#519CFF)); background: -moz-linear-gradient(top, #1E7CFF 15%, #519CFF 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E7CFF', endColorstr='#519CFF'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E7CFF', endColorstr='#519CFF'); border: 1px solid #1E7CFF; }
center div { margin-top: 20%; }
#logo { font-size: 45px; text-shadow: 0px 0px 2px #000000; border-bottom: 1px solid #000000; }
#sub { zoom: 0.5; display: block; }
#main { -webkit-transition-property: bottom; -webkit-transition-duration: 0.7s; -moz-transition-property: bottom; -moz-transition-duration: 0.7s; -o-transition-property: bottom; -o-transition-duration: 0.7s; transition-property: bottom; transition-duration: 0.7s; position: relative; zoom: 1.5; }
#logo:hover #main { bottom: 25px; }
Now if we click the button it just goes back to the same page regardless of the contents of the input box. So we need to add some JS to make sure the contents of the input box is valid.
- Code: HTML
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Web Box CMS</title> <link href="files/teaser.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="files/jquery.js"></script> </head> <body> <center> <div> <span id="logo"><span id="main">Web Box</span><span id="sub">A New Kind Of CMS</span></span> </div> <div id="container"> <form method="post" action="index.php"> <span id="form"> <input type="text" name="email" placeholder="you@email.com" /> <button type="submit"><?php echo $button ?></button> </span> </form> </div> </center> <script type="text/javascript" src="files/teaser.js"></script> </body> </html>
- Code: Teaser.js
-
$('form').submit(function(e){ if(!$('input').val() || !$('input').val().match(/\b^[\w\.-\d]+@[\w\.-]+\.\w{2,4}$\b/gi)){ e.preventDefault(); $('button').text('Valid Email Please'); } })
What the Teaser.js file is basically saying, is when the subscribe button is clicked, if the contents of the input box is either empty, or if it is not a valid email, stop submitting the form, and change the text of the button to "Valid Email Please".
Now if the email is not valid, then it will stop submitting the form, but what if the email is valid? If it is, then we need to do something, so lets add some PHP into the mix.
- Code: HTML
-
<?php require 'files/data.php';
$button = 'Send Me Updates';
if(isset($_POST['email'])){ $email = $_POST['email']; $matches = mysqli_query($conn, 'SELECT * FROM emails WHERE email="' . $email . '" ORDER BY id ASC'); if(mysqli_num_rows($matches) != 0){ $button = 'Already Subscribed'; } else{ mysqli_query($conn, "INSERT INTO emails (email) VALUES ('$email')"); $button = 'Subscribed'; } } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Web Box CMS</title> <link href="files/teaser.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="files/jquery.js"></script> </head> <body> <center> <div> <span id="logo"><span id="main">Web Box</span><span id="sub">A New Kind Of CMS</span></span> </div> <div id="container"> <form method="post" action="index.php"> <span id="form"> <input type="text" name="email" placeholder="you@email.com" /> <button type="submit"><?php echo $button ?></button> </span> </form> </div> </center> <script type="text/javascript" src="files/teaser.js"></script> </body> </html>
- Code: Data.php
-
<?php session_start();
//Databases $dbhost = "host_url"; $dbuser = "mysql_username"; $dbpass = "mysql_password"; $dbname = "mysql_database";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass) or die('Error Connecting To Database'); mysqli_select_db($conn, $dbname); ?>
We need to die in case the connection fails so we add that in there in case.
The PHP in the main HTML is basically saying, include the MySQL data. Set the button text to "Send Me Updates". If the user submitted the subscription form then set $email to the user's email. Now check to see if that email is already in the database. If it is then set the button text to "Already Subscribed" and stop. Else, insert the email into the list of emails and set the button text to "Subscribed".
This is still not complete however, we need to make sure that this is completely fool proof so we add the following line under the line where $email is declared and set.
- Code:
-
$email = preg_replace('/[^\w\.-\d@]/gi', '', $email);
This will remove every character that can not possibly be in an email address thus preventing SQL injections.
Final Product:
- Code: HTML
-
<?php require 'files/data.php';
$button = 'Send Me Updates';
if(isset($_POST['email'])){ $email = $_POST['email']; $email = preg_replace('/[^\w\.-\d@]/gi', '', $email); $matches = mysqli_query($conn, 'SELECT * FROM emails WHERE email="' . $email . '" ORDER BY id ASC'); if(mysqli_num_rows($matches) != 0){ $button = 'Already Subscribed'; } else{ mysqli_query($conn, "INSERT INTO emails (email) VALUES ('$email')"); $button = 'Subscribed'; } } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Web Box CMS</title> <link href="files/teaser.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="files/jquery.js"></script> </head> <body> <center> <div> <span id="logo"><span id="main">Web Box</span><span id="sub">A New Kind Of CMS</span></span> </div> <div id="container"> <form method="post" action="index.php"> <span id="form"> <input type="text" name="email" placeholder="you@email.com" /> <button type="submit"><?php echo $button ?></button> </span> </form> </div> </center> <script type="text/javascript" src="files/teaser.js"></script> </body> </html>
- Code: Teaser.js
-
$('form').submit(function(e){ if(!$('input').val() || !$('input').val().match(/\b^[\w\.-\d]+@[\w\.-]+\.\w{2,4}$\b/gi)){ e.preventDefault(); $('button').text('Valid Email Please'); } })
- Code: Teaser.css
-
html, body { background: #fafafa; font-family: Calibri; color: #050505; font-weight: bold; zoom: 1.2; }
#container { margin-top: 5%; }
#form { padding: 15px; background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffffff), color-stop(100%, #f7f7f7)); background: -moz-linear-gradient(top, #ffffff 5%, #f7f7f7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7'); border: solid 1px #c4c4c4; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0px 0px 1px #828282; }
input, button{ padding: 8px 12px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
input { width: 300px; margin: 0px 10px; outline: none; border: 1px solid #c4c4c4; box-shadow: inset 0px 1px 2px #AFAFAF; background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ffffff), color-stop(100%, #fcfcfc)); background: -moz-linear-gradient(top, #ffffff 5%, #fcfcfc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc'); }
input:focus { border: 1px solid #8e8e8e; }
button { background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#519CFF), color-stop(100%,#1E7CFF)); background: -moz-linear-gradient(top, #5182FF 15%, #1E7CFF 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5182FF', endColorstr='#1E7CFF'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5182FF', endColorstr='#1E7CFF'); color: white; border: 1px solid #479AFF; box-shadow: 0px 1px 2px #000000; text-shadow: 1px 1px 1px #1673FF; font-weight: bold; position: relative; bottom: 2px; cursor: pointer; }
button:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#60A5FF), color-stop(100%,#3089FF)); background: -moz-linear-gradient(top, #60A5FF 15%, #3089FF 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60A5FF', endColorstr='#3089FF'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#60A5FF', endColorstr='#3089FF'); border: 1px solid #3D91FF; }
button:active { background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#1E7CFF), color-stop(100%,#519CFF)); background: -moz-linear-gradient(top, #1E7CFF 15%, #519CFF 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E7CFF', endColorstr='#519CFF'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1E7CFF', endColorstr='#519CFF'); border: 1px solid #1E7CFF; }
center div { margin-top: 20%; }
#logo { font-size: 45px; text-shadow: 0px 0px 2px #000000; border-bottom: 1px solid #000000; }
#sub { zoom: 0.5; display: block; }
#main { -webkit-transition-property: bottom; -webkit-transition-duration: 0.7s; -moz-transition-property: bottom; -moz-transition-duration: 0.7s; -o-transition-property: bottom; -o-transition-duration: 0.7s; transition-property: bottom; transition-duration: 0.7s; position: relative; zoom: 1.5; }
#logo:hover #main { bottom: 25px; }
Preview Here
|