├── CONTRIBUTING.md
├── README.md
├── assets
    ├── css
    │   └── style.css
    ├── images
    │   ├── arrow.png
    │   └── loading.gif
    └── js
    │   └── lib.js
├── create_table.sql
├── inc
    ├── Database.class.php
    └── Newsletter.class.php
├── index.html
├── screenshot.png
└── send.php


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 | 
3 | 1. Fork it!
4 | 2. Create your feature branch: `git checkout -b my-new-feature`
5 | 3. Commit your changes: `git commit -m 'Add some feature'`
6 | 4. Push to the branch: `git push origin my-new-feature`
7 | 5. Submit a pull request :D
8 | 
9 | English is the universal language nowadays, so please don't create or comment on issues using another language.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Ajax PHP MySQL Newsletter
 2 | =========================
 3 | 
 4 | A simple newsletter sign-up form using Ajax, PHP and MySQL.
 5 | 
 6 | ![](https://raw.github.com/pinceladasdaweb/Ajax-PHP-MySQL-Newsletter/master/screenshot.png)
 7 | 
 8 | How to use
 9 | -----------------
10 | 
11 | * Run [create_table.sql](create_table.sql) file to create the structure of the database.
12 | * Open [Database.php](inc/Database.class.php) class file and fill the variables with data from your database.
13 | * Enjoy.
14 | 
15 | Contributing
16 | -----------------
17 | 
18 | Check [CONTRIBUTING.md](CONTRIBUTING.md) for more information.
19 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-size: 62.5%;
  3 |     background-color: #64c6af;
  4 | }
  5 | 
  6 | #newsletterform {
  7 |     font-family: 'Raleway', sans-serif;
  8 |     margin: 0 auto;
  9 |     max-width: 780px;
 10 |     min-width: 320px;
 11 |     display: block;
 12 |     text-align: center;
 13 |     letter-spacing: 1px;
 14 |     position: relative;
 15 | }
 16 | 
 17 | #newsletterform .wrap {
 18 |     padding: 50px 40px;
 19 | }
 20 | 
 21 | #newsletterform h3 {
 22 |     font-family: 'Raleway', sans-serif;
 23 |     display: block;
 24 |     font-size:26px;
 25 |     font-weight:400;
 26 |     line-height:1.2;
 27 |     color:#fff;
 28 |     text-transform: uppercase;
 29 |     text-align: center;
 30 |     padding-bottom:20px;
 31 |     margin: 0 auto 30px auto;
 32 |     border-bottom:1px solid #fff;
 33 |     width:60%;
 34 | }
 35 | 
 36 | #newsletterform p {
 37 |     font-size:14px;
 38 |     line-height:26px;
 39 |     margin-bottom:25px;
 40 |     color:#fff;
 41 | }
 42 | 
 43 | #newsletterform input {
 44 |     font-family: 'Raleway', sans-serif;
 45 |     font-size: 16px;
 46 |     font-weight:500;
 47 |     display: block;
 48 |     width:55%;
 49 |     background:#fff;
 50 |     color:#888;
 51 |     padding:15px;
 52 |     text-align: center;
 53 |     text-transform: uppercase;
 54 |     margin: 0 auto 12px auto;
 55 |     border:2px solid #fff;
 56 |     outline:0;
 57 |     border-radius: 3px;
 58 |     -webkit-box-sizing: border-box;
 59 |     -moz-box-sizing: border-box;
 60 |     box-sizing: border-box;
 61 | }
 62 | 
 63 | #newsletterform input:focus {
 64 |     border:2px solid #ddd;
 65 | }
 66 | 
 67 | #newsletterform input[type="submit"] {
 68 |     background:#f77156;
 69 |     color:#fff;
 70 |     width:30%;
 71 |     padding:13px;
 72 |     cursor: pointer;
 73 |     margin-bottom:0;
 74 |     border:none;
 75 | }
 76 | 
 77 | #newsletterform input[type="submit"]:hover {
 78 |     background:#F8CA4D;
 79 |     color:#444;
 80 | }
 81 | 
 82 | #newsletterform .arrow {
 83 |     display: inline-block;
 84 |     background: url("../images/arrow.png") no-repeat;
 85 |     width: 139px;
 86 |     height: 48px;
 87 |     position: absolute;
 88 |     left: 120px;
 89 |     top: 290px;
 90 | }
 91 | 
 92 | #newsletterform #response {
 93 |     color: #fff;
 94 |     font-size: 1.4em;
 95 |     height: 25px;
 96 |     margin: 0 auto;
 97 |     padding-top: 15px;
 98 |     text-align: center;
 99 |     width: 320px;
100 | }
101 | 
102 | #newsletterform #response p {
103 |     margin: 0
104 | }
105 | 
106 | #newsletterform .loading {
107 |     background: url("../images/loading.gif") no-repeat center 20px;
108 | }
109 | 
110 | @media only screen and (max-width:769px) {
111 | 
112 |     #newsletterform .wrap {
113 |         padding: 40px 25px;
114 |     }
115 | 
116 |     #newsletterform .arrow {
117 |         display: none;
118 |     }
119 | 
120 |     #newsletterform input {
121 |         width: 100%;
122 |         margin-bottom: 7px;
123 |     }
124 | 
125 |     #newsletterform input[type="submit"] {
126 |         width: 100%;
127 |         padding: 16px;
128 |     }
129 | 
130 | }
131 | 
132 | @media only screen and (max-width:600px) {
133 | 
134 |     #newsletterform h3 {
135 |         width: 100%;
136 |     }
137 | 
138 | }


--------------------------------------------------------------------------------
/assets/images/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pinceladasdaweb/Ajax-PHP-MySQL-Newsletter/e64f1a864cca1564a65d70ff291b79ec91ec70bf/assets/images/arrow.png


--------------------------------------------------------------------------------
/assets/images/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pinceladasdaweb/Ajax-PHP-MySQL-Newsletter/e64f1a864cca1564a65d70ff291b79ec91ec70bf/assets/images/loading.gif


--------------------------------------------------------------------------------
/assets/js/lib.js:
--------------------------------------------------------------------------------
 1 | $(document).ready(function () {
 2 |     $('#newsletter').submit(function () {
 3 |         var $this     = $(this),
 4 |             $response = $('#response'),
 5 |             $mail     = $('#signup-email'),
 6 |             testmail  = /^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/,
 7 |             hasError  = false;
 8 | 
 9 |         $response.find('p').remove();
10 | 
11 |         if (!testmail.test($mail.val())) {
12 |             $response.html('<p class="error">Please enter a valid email</p>');
13 |             hasError = true;
14 |         }
15 | 
16 |         if (hasError === false) {
17 | 
18 |             $response.find('p').remove();
19 |             $response.addClass('loading');
20 | 
21 |             $.ajax({
22 |                 type: "POST",
23 |                 dataType: 'json',
24 |                 cache: false,
25 |                 url: $this.attr('action'),
26 |                 data: $this.serialize()
27 |             }).done(function (data) {
28 |                 $response.removeClass('loading');
29 |                 $response.html('<p>'+data.message+'</p>');
30 |             }).fail(function() {
31 |                 $response.removeClass('loading');
32 |                 $response.html('<p>An error occurred, please try again</p>');
33 |             })
34 |         }
35 | 
36 | 
37 |         return false;
38 |     });
39 | });


--------------------------------------------------------------------------------
/create_table.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE `signups` (
2 |   `signups_id` int(10) NOT NULL AUTO_INCREMENT,
3 |   `signup_email_address` varchar(250) DEFAULT NULL,
4 |   `signup_date` datetime DEFAULT NULL,
5 |   PRIMARY KEY (`signups_id`)
6 | ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
7 | 


--------------------------------------------------------------------------------
/inc/Database.class.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | class Database
 3 | {
 4 |     private static $dbName = '';
 5 |     private static $dbHost = '';
 6 |     private static $dbUsername = '';
 7 |     private static $dbUserPassword = '';
 8 | 
 9 |     private static $cont = null;
10 | 
11 |     public function __construct() {
12 |         die('Init function is not allowed');
13 |     }
14 | 
15 |     public static function connect() {
16 |         if (null === self::$cont) {
17 |             try {
18 |                 self::$cont =  new PDO('mysql:host='.self::$dbHost.'; dbname='.self::$dbName, self::$dbUsername, self::$dbUserPassword);
19 |             } catch(PDOException $e) {
20 |                 die($e->getMessage());
21 |             }
22 |         }
23 |         return self::$cont;
24 |     }
25 | 
26 |     public static function disconnect() {
27 |         self::$cont = null;
28 |     }
29 | }


--------------------------------------------------------------------------------
/inc/Newsletter.class.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | class Newsletter
 3 | {
 4 |     private static $email;
 5 |     private static $datetime = null;
 6 | 
 7 |     private static $valid = true;
 8 | 
 9 |     public function __construct() {
10 |         die('Init function is not allowed');
11 |     }
12 | 
13 |     public static function register($email) {
14 |         if (!empty($_POST)) {
15 |             self::$email    = $_POST['signup-email'];
16 |             self::$datetime = date('Y-m-d H:i:s');
17 | 
18 |             if (empty(self::$email)) {
19 |                 $status  = "error";
20 |                 $message = "The email address field must not be blank";
21 |                 self::$valid = false;
22 |             } else if (!filter_var(self::$email, FILTER_VALIDATE_EMAIL)) {
23 |                 $status  = "error";
24 |                 $message = "You must fill the field with a valid email address";
25 |                 self::$valid = false;
26 |             }
27 | 
28 |             if (self::$valid) {
29 |                 $pdo = Database::connect();
30 |                 $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
31 |                 $existingSignup = $pdo->prepare("SELECT COUNT(*) FROM signups WHERE signup_email_address='$email'");
32 |                 $existingSignup->execute();
33 |                 $data_exists = ($existingSignup->fetchColumn() > 0) ? true : false;
34 | 
35 |                 if (!$data_exists) {
36 |                     $sql = "INSERT INTO signups (signup_email_address, signup_date) VALUES (:email, :datetime)";
37 |                     $q = $pdo->prepare($sql);
38 | 
39 |                     $q->execute(
40 |                         array(':email' => self::$email, ':datetime' => self::$datetime));
41 | 
42 |                     if ($q) {
43 |                         $status  = "success";
44 |                         $message = "You have been successfully subscribed";
45 |                     } else {
46 |                         $status  = "error";
47 |                         $message = "An error occurred, please try again";
48 |                     }
49 |                 } else {
50 |                     $status  = "error";
51 |                     $message = "This email is already subscribed";
52 |                 }
53 |             }
54 | 
55 |             $data = array(
56 |                 'status'  => $status,
57 |                 'message' => $message
58 |             );
59 | 
60 |             echo json_encode($data);
61 | 
62 |             Database::disconnect();
63 |         }
64 |     }
65 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |         <title>Ajax Newsletter Form</title>
 7 |         <link href="http://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
 8 |         <link rel="stylesheet" href="assets/css/style.css">
 9 |     </head>
10 |     <body>
11 | 
12 |         <div id="newsletterform">
13 |             <div class="wrap">
14 |                 <h3>Get Email Update</h3>
15 |                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ullamcorper sapien luctus nisl laoreet, ac commodo tellus placerat. Etiam nec magna lacus. Curabitur quis felis vel nisl tincidunt hendrerit.</p>
16 |                 <form action="send.php" method="post" id="newsletter" name="newsletter">
17 |                     <input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" />
18 |                     <input type="submit" value="Subscribe" name="signup-button" id="signup-button">
19 |                     <span class="arrow"></span>
20 |                 </form>
21 |                 <div id="response"></div>
22 |             </div>
23 |         </div>
24 | 
25 |         <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
26 |         <script src="assets/js/lib.js"></script>
27 |     </body>
28 | </html>


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pinceladasdaweb/Ajax-PHP-MySQL-Newsletter/e64f1a864cca1564a65d70ff291b79ec91ec70bf/screenshot.png


--------------------------------------------------------------------------------
/send.php:
--------------------------------------------------------------------------------
1 | <?php
2 | require 'inc/Database.class.php';
3 | require 'inc/Newsletter.class.php';
4 | 
5 | if (!empty($_POST)) {
6 |     $email = $_POST['signup-email'];
7 | 
8 |     Newsletter::register($email);
9 | }


--------------------------------------------------------------------------------