Simply Cutting Edge
Welcome Guest [Log In] [Register]
Welcome to zetaNetwork. We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as viewing zetaNetwork exclusive tutorials and articles, and access to our code snippets section. Registration is simple, fast, and completely free.


Click Here To Register


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
How To Make A PHP Mailing List Subscription - Part 1
Topic Started: Apr 17 2011, 09:34 PM (27,651 Views)
Pro
Member Avatar
Underground Coding

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
Pro | zetaNetwork Instructor & Admin
I Coded Most Of The Smexy Stuff You See :P
PM Me Any Questions
Need live support? Click here.
Offline Profile Quote ^
 
Pro
Member Avatar
Underground Coding

This tutorial has been found to be about PHP and has been moved to the PHP section.
Pro | zetaNetwork Instructor & Admin
I Coded Most Of The Smexy Stuff You See :P
PM Me Any Questions
Need live support? Click here.
Offline Profile Quote ^
 
Flavius
Member Avatar
Awesome Cool Dude

To center a div in the middle of the page, you do the following:

Code:
 
#container {
top:50%;
left:50%;
width: [defined.width]px;
height: [defined.height]px;
margin-left: -[half.defined.width]px;
margin-top: -[half.defined.height]px;
}


Regarding security I like to use mysql_real_escape_string and wouldn't it be better to do preg_match() and give an error instead of just replacing the problems with nothing?

I'd still like to know how the emails are then sent.

Otherwise, awesome!
Offline Profile Quote ^
 
Pro
Member Avatar
Underground Coding

But I don't wanna specify dimensions for #container you see.
Pro | zetaNetwork Instructor & Admin
I Coded Most Of The Smexy Stuff You See :P
PM Me Any Questions
Need live support? Click here.
Offline Profile Quote ^
 
Flavius
Member Avatar
Awesome Cool Dude

Pro
Apr 18 2011, 06:50 AM
But I don't wanna specify dimensions for #container you see.
I see. But others may want it in the middle. :D
Offline Profile Quote ^
 
Pro
Member Avatar
Underground Coding

The center tags center the container already though.
Pro | zetaNetwork Instructor & Admin
I Coded Most Of The Smexy Stuff You See :P
PM Me Any Questions
Need live support? Click here.
Offline Profile Quote ^
 
Flavius
Member Avatar
Awesome Cool Dude

Pro
Apr 18 2011, 06:56 AM
The center tags center the container already though.
Not vertically though. My snippet centers it in the middle of the page vertically and horizontally.
Offline Profile Quote ^
 
Pro
Member Avatar
Underground Coding

Well without a defined dimension your snippet won't work. You could choose to output an error, I just decided to replace the invalid characters with nothing using the preg_replace.
Pro | zetaNetwork Instructor & Admin
I Coded Most Of The Smexy Stuff You See :P
PM Me Any Questions
Need live support? Click here.
Offline Profile Quote ^
 
Flavius
Member Avatar
Awesome Cool Dude

Pro
Apr 18 2011, 07:04 AM
Well without a defined dimension your snippet won't work. You could choose to output an error, I just decided to replace the invalid characters with nothing using the preg_replace.
Yeah. The only reason I say output an error is because it may be fake in the first place, so why submit it anyway? :)
Offline Profile Quote ^
 
SlyCooperFan1
Member Avatar
Master Raccoon Thief
I noticed something that you didn't include that I probably would have, being the paranoid freak that I am. :P It's still possible to disable Javascript to let whatever's in the input box go through, isn't it?
Offline Profile Quote ^
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Tutorials · Next Topic »
Add Reply