Flex Subscriber Tutorial with PHP and SQL

In this tutorial I will show you how to make a Flex Subscriber(Newsletter), using Flex , PHP and of course SQL, because I will stock the informations in a database. First of all, I will show you the final result of this project and then I’ll try to explain how it is made. I think this is not such a complicated tutorial, but you need to stay focus.

Final Result Preview




This preview is not connected to any database, so it will not run as it should.

Database

The first thing that we need to do, is to create a table inside the database.Go to your phpMyAdmin and create a new table, name it subscribe. And below is a picture of how this table should look.
Create Table

As you can see it’s a very simple table, because we only need to store an email address. Now that we have our table, we can move to the next step.

Code

First of all, you will need to create a new Flex Project, by clicking File -> New – > Flex Project. Name the project however you want, and then click Finish.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="299" height="100" backgroundAlpha="0" minWidth="955" minHeight="600"
			   preloaderChromeColor="#000000">
	
	<fx:Script>
		<![CDATA[
			protected function sendEmail(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				var str:String = EmailTXT.text;
				if(checkEmail(str)==true)
				{
					var myData:URLRequest = new URLRequest("data.php");
					myData.method = URLRequestMethod.POST;
					var variables:URLVariables = new URLVariables();
					variables.email = EmailTXT.text;
					myData.data = variables;
					var loader:URLLoader = new URLLoader();
					loader.dataFormat = URLLoaderDataFormat.VARIABLES;
					loader.addEventListener(Event.COMPLETE,onComplete);
					loader.load(myData);
				}
				else
				{
					errorTXT.text = "Invalid Email";
				}
			}
			
			protected function onComplete(event:Event):void
			{
				if(event.target.data.writing == "Ok")
				{
					errorTXT.text = "Thank You";
				}
					
				else
				{
					errorTXT.text = "Server Error";
				}
			}
			
			protected function checkEmail(inputEmail:String):Boolean {
				//check for spaces
				if (inputEmail.indexOf(" ")>0) {
					return false;
				}
				//bust the email apart into what comes before the @ and what comes after
				var emailArray:Array=inputEmail.split("@");
				//make sure there's exactly one @ symbol also make sure there's at least one character before and after the @
				if (emailArray.length != 2 || emailArray[0].length == 0 || emailArray[1].length ==0) {
					return false;
				}
				//bust apart the stuff after the @ apart on any . characters
				var postArray:Array=emailArray[1].split(".");
				//make sure there's at least one . after the @
				if (postArray.length < 2) {
					return false;
				}
				//make sure there's at least 1 character in in each segment before, between and after each .
				for (var i:Number=0; i<postArray.length; i++) {
					if (postArray[i].length < 1) {
						return false;
					}
				}
				//get what is left after the last .
				var suffix=postArray[postArray.length-1];
				//make sure that the segment at the end is either 2 or 3 characters
				if (suffix.length < 2 || suffix.length > 3) {
					return false;
				}
				//it passed all tests, it's a valid email
				return true;
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Rect width="100%" height="100%">
		<s:fill><s:SolidColor color="0xF7F6F6"/></s:fill>
	</s:Rect>
	<s:TextInput x="14" y="10" width="276" borderColor="#00AAFF" chromeColor="#F7F6F6"
				 color="#000000" contentBackgroundColor="#FFFFFF" prompt="Email" id="EmailTXT"/>
	<s:Button x="119" y="40" label="Send" color="#000000" click="sendEmail(event)"/>
	<s:Label id="errorTXT" x="89" y="69" width="130" color="#FF0000" textAlign="center"/>
</s:Application>

I don’t think this piece of code is hard to understand . As you can see I have a very simple design, which incorporates components:one button, a Label, one TextInput, where users will write their email address and a Rectangle that plays the role of a background.
Let’s see what is happening when the -Send- button is clicked:

protected function sendEmail(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				var str:String = EmailTXT.text;
				if(checkEmail(str)==true)
				{
					var myData:URLRequest = new URLRequest("data.php");
					myData.method = URLRequestMethod.POST;
					var variables:URLVariables = new URLVariables();
					variables.email = EmailTXT.text;
					myData.data = variables;
					var loader:URLLoader = new URLLoader();
					loader.dataFormat = URLLoaderDataFormat.VARIABLES;
					loader.addEventListener(Event.COMPLETE,onComplete);
					loader.load(myData);
				}
				else
				{
					errorTXT.text = "Invalid Email";
				}
			}
			
			protected function onComplete(event:Event):void
			{
				if(event.target.data.writing == "Ok")
				{
					errorTXT.text = "Thank You";
				}
					
				else
				{
					errorTXT.text = "Server Error";
				}
			}
			
			protected function checkEmail(inputEmail:String):Boolean {
				//check for spaces
				if (inputEmail.indexOf(" ")>0) {
					return false;
				}
				//bust the email apart into what comes before the @ and what comes after
				var emailArray:Array=inputEmail.split("@");
				//make sure there's exactly one @ symbol also make sure there's at least one character before and after the @
				if (emailArray.length != 2 || emailArray[0].length == 0 || emailArray[1].length ==0) {
					return false;
				}
				//bust apart the stuff after the @ apart on any . characters
				var postArray:Array=emailArray[1].split(".");
				//make sure there's at least one . after the @
				if (postArray.length < 2) {
					return false;
				}
				//make sure there's at least 1 character in in each segment before, between and after each .
				for (var i:Number=0; i<postArray.length; i++) {
					if (postArray[i].length < 1) {
						return false;
					}
				}
				//get what is left after the last .
				var suffix=postArray[postArray.length-1];
				//make sure that the segment at the end is either 2 or 3 characters
				if (suffix.length < 2 || suffix.length > 3) {
					return false;
				}
				//it passed all tests, it's a valid email
				return true;
			}

Let’s imagine: A guy come thru my website, he likes what he sees, and he decides to give me his email address, in order to receive notification. This guy sees my Subscriber Form, and he is now writing his email address and then clicks the Send button. In that moment my application checks if his email address is correct or not. This function, that does this thing inside my application, is called checkEmail, and you can see it right above.
Then, if the email address is incorrect a message will appear, if the email address is correct we can move to the next step.
As I said, if the email address is correct, the program will connect to the PHP file and send that email address as a variable. Now is time to see how my PHP file looks:

<?php
$emailCopy = $_POST['email'];
$connect = mysql_connect("HOST", "USER", "PASSWORD");
mysql_select_db("DATABASE_NAME", $connect);

$result = mysql_query("INSERT INTO subscribe(email) VALUES('$emailCopy')");
if($result) echo "writing=Ok&";
else echo "writing=Error";

$query = 'SELECT * FROM subscribe';

	 
if($result = mysql_query($query)) {
	    $output = 'entries=';
	    while ($row = mysql_fetch_array($result)) {
	        $output .= "{$row['email']}<br />";
	    }
	    echo($output);
	}
?>

If the PHP file can connect to my database, he will send this email address to my table named subscribe.
This is a very simple way to create a Newsletter for your website, not very hard and easy to implement, and you have full control on your design. You can make it however you want. I will give you the source code, and of course if you have any question, feel free to ask and I will get back at you as soon as I can.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

WordPress SEO