6. Sign Up Form and Email Activation PHP MySQL JavaScript Programming Tutorial

hello welcome back to the web in a sec 2.0 social network production training series this video will cover the sign up page a wedgy situation script and the activation through e-mail logic now all of the code these particular files within this video will be available underneath the video where it lives undeveloped PHP comm now before I explain things in depth in the code we have to prove to you that to sign up and activation through email work live online at web intersect com this way you'll have no doubts about the working condition of the code examples that I offer I'm going to sign up there now and you can witness it okay here I am in webinar SEC comm I'm just going to go to a forward slash signup PHP hit enter you can see I made everything very basic on purpose so I'm not going to polish everything up at something you can do with the CSS and your creative design skills so the username field is connected to some Ajax to where by putting my name Adam and then I go to fill another filled in it checks that it says Adams okay because it's not in the database yet and it's clear for me to use but if I was to make my name ad for instance and then go to another field it says three to sixteen characters please if I try to start my name with a number for instance like that go to another field says user names must begin with a letter so there's some logic behind the username field so I'll just put in my user name now if at any time I press create account it's going to tell me fill out all the form data you can handle that any way you want then when they go to use the fields again that message goes away then I'm going to put in the rest of my data choose my gender and my country now I set up something optional which you can just remove out of the code altogether if they hit create account without viewing the Terms of Use first it says please view the Terms of Use so when I click that link the Terms of Use comes into play the create account button goes down so that you know they have to scroll down and look at the Terms of Use at least before they create their account so I hit create account we get a message that says okay Adam check your email inbox and junk box at your email in a moment to complete the signup process by activating your account you'll not be able to do anything on the site until you activate successfully I'll check my email and my website system should have sent me an activation email says web intersect account activation from autoresponder at web intersect com if I click show images it shows my little logo in the top and this is an HTML formatted email so even you can make this as fanciful as you like depending how good your skills are with HTML and CSS so with the email says it says hello Adam click the link below to activate your account when ready and you can also right click that and you can copy that shortcut and you can inspect what the whole link looks like before you even click on it but I'm going to click on it and see if my account actually activates through my website system activation success your account is now activated click here to login and we don't have the login page yet so that link won't actually go anywhere yet but we have successful activation and you can check inside of phpMyAdmin to confirm that yes you do have a new member and yes they are activated okay so you're going to get four different files from me that all revolve around the sign up and activation process so we have sign up PHP activation dot PHP message PHP and ran string generator dot PHP which you guys might already have that if you don't have it yet I'm going to also offer it again but I'll start with explaining the sign up page and we'll talk about how the sign up page is related to those other files the first thing we'll discuss is the basics which would be the HTML of the signup form so you can see there is the whole thing right there and I even put the div of the terms right inside of the signup form but this form is connected to Ajax so it doesn't post to a parsing script post directly to Ajax and we talk to PHP and we send response back and we handle things and this page is set up just like your index dot PHP that we created initially the only thing different you have to make sure you're including these two files but you're going to get all of this code as it is on the page of develop PHP underneath this video so if you have any question about differences in your code from mine you can just actually grab mine and run that and see if it works so in sign up dot PHP we just make sure we're including main Jas and Ajax Jas ok back to the form you can see the signup form has a name of signup form and an ID of signup form and it's on submit it's set to return false because we're using Ajax so we just want to make sure there is no on submit of this form and I've just separated each field label in a div that way it separates it all down the page just to make everything have its own little blocks of space the first input is called username and that has to event handlers on it and in the JavaScript I show an example of how you can use add event listener in JavaScript to add all these events if you would like but I just put it straight into the HTML you can remove it and put it into a devant listener methods if you like so on blur of this username text field and on blur is when they stop interacting with an element and move to interact with something else on the page that is when onblur fires off and we just run a JavaScript function that I have up here I'm going to show you in a second it's called check user name now we also have a non-key up event for that user name field so when the user is typing in the user name every time they hit a key and then release the key when they release their key that's when the on key up event fires off and we run a function called restrict and we pass the argument of the field that we want to restrict in the field is user name and we gave that a max length of 16 now this element here you see is span you name status that's the one that was showing you whether or not your user name is okay whether it's taken whether it has enough characters that's where that little message displays right next to the user name field and that's connected to this check user name function so every time the check user name occurs using Ajax this element will get the response and display it now in these next couple of fields in the next few fields you'll see an empty element function running on the on focus event on focus event is when the user actually goes to interact with that item or that element so I just made it to where the user goes to interact with any of these fields the empty element function will run and it will clear the status field which is the one that was down by the submit button down here c-span ID of status that lives right next to the submit button so every time you know you might have some error message that you want to display to the user but when they go to use a field again you don't want that error message to sit there so we're running empty element all right the next field is email and that also uses the restrict now the restrict is set up so the user can't put spaces for instance in their user name so as they're typing in you're actually restricting the field as they're typing in so if they type something in that you don't want your field will magically remove it and we're using JavaScript for that this restricts functions I'm going to show you that in just a second and this is all basic HTML stuff so you can see what's there and you can experiment with it and play with it when you get the code you're just in taking people's information using certain HTML elements that you choose - now this did right here holds the terms of use for the website you don't have to have your setup like this you can do some other method for making them agree to the Terms of Use or you don't even have to have that a lot of sites they won't even make you agree to anything and you just put in a couple of things and you remember you can see this div is set to display:none that way by default it's closed now the last thing of relevance is this signup button and that's the one where when they click it the signup function runs and that's in our JavaScript as well which we'll be covering in a second so that's how the the form data is actually submit to JavaScript is when this button gets clicked we run the signup function now this thing may be at the end of the video we'll have a discussion about this this is a very long list of options for the country and since that's going to be in multiple forms within your website you might want to externalize this maybe I'll show you how to externalize that towards the end of the video we'll take it right out of here and we'll use PHP include too easily just add it to any forms on any pages of the site that need that very very long list you don't want to have that actually in your source code when you can make a little module out of it I'll go ahead and collapse this form and we'll move to the JavaScript actually let's explain the CSS really quick this is just the CSS that affects the form and the way it looks and you would want to make yours a lot more fantastical looking than mine you can see it's very basic I didn't do much at all to make it look fancy okay so we'll discuss the JavaScript and then we'll discuss the PHP now I put the JavaScript and the PHP directly in the file because since these particular parsing mechanisms are not going to be used for any other files or any other functionality you can have them sitting directly in this file if you want or you can make a separate parse file that Ajax will call - I just have ajax calling directly to sign up dot PHP to do its magic so most of this PHP up top here will not run in you'll Ajax calls it okay and then you also have the JavaScript which you can also make external as well for instance you can take all of this JavaScript that I have here and put it into an external javascript file and just call it like we're calling Ajax and main to be included into sign up that PHP but I'm just going to leave it all in one file and you guys can handle it any way you see fit okay let's discuss the JavaScript real quick this is the restrict function this function runs every time that the user is typing into the username field or the email field now we have condition in there to see if it's the email field or the username field that is being cleaned or restricted of certain characters and I'm using regular expressions here in the email I don't want them to put in a single quote spaces and I don't want to put it in double quote so those are the things that I've established within my regular expression and I made it global and in case sensitive so that if it's uppercase or lowercase or whatever actually there's no letters in there so the eye doesn't even have to be there but it could be there and it won't hurt this but here's where the eye comes into play so when you're dealing with letters so you can just put lowercase a through Z so for the username we're restricting everything except a through Z and 0 through 9 and the G which is the global flag makes it to where that all throughout the string and not only the first occurrence all throughout the string where these things are found they'll be removed that's what the global means because if you didn't have the G they're only the first character that was found that was not desired would be removed and in case sensitive to account for uppercase letters as well so they can put in uppercase letters lowercase letters and numbers basically that's what that means so that's how the restrict function works now the empty element function is very simple you just feed it the element ID that you want to empty we're using our document get element by ID selector there that's in our main j/s that's how we're easy getting to these HTML elements so we can just empty out the one specified when the function is called by saying dot innerhtml is equal to nothing for that target element now next we have the check username function the check user name function is pretty simple you just establish a variable that is the value of the username field then you just want to make sure that it's not empty so if the username field is not equal to nothing that means if it does have a value then you're going to update that little span that's next to the username field and you're just going to put checking now anywhere where I have in the Ajax where I have this checking chore please wait dot that's where you can insert you can directly insert an image tag an HTML image tag for an animated gif so anywhere throughout the whole website where you see me putting dot or please weight dot or processing dot that's where you can put an image tag that's an animated fan loader or something really cool I'm not going to make that for you but you can just put the HTML code right there for an image tag so whatever animated gif you want and then that animated gif will show up in the inner HTML of the status or you can make it show up in another div that's sitting somewhere else on the page close by that's up to you this approach to Ajax is a modular one that we set up custom and if you want to see that video you can go to my youtube channel right here in the list is Ajax module it's called the video is called Ajax framework tutorial JavaScript module and you can actually just search that title right there in the video will come up you can search the title Ajax framework tutorial the video will come up right away so you watch that video if you want to understand the approach we're taking to ajax or you can use any ajax approach that you are comfortable with already so when we send the ajax call we're sending the user name check variable that's going to be equal to whatever value that they've typed into the username field so we send that to the little PHP which all of the PHP is sitting directly in this page and like I said you can externalize that don't expect me to do everything for you guys or you can choose to leave it directly in this page since this is the only page that's going to need that script so here you're calling signup directly see the Ajax post is going to sign up PHP and you're sending URL encoded variables here or you're sending one URL encoded variable all you're sending is the value of the username to check it against the database to see what's available and then the response comes right here when the Ajax return is true and then you can deal with the response text okay now we have one more little function actually it's the biggest function here actually we have another one for opening the site terms div I'll explain this little one first this function open terms this is the one that runs when they hit that link that says view the site terms it simply targets that terms div and you set the style display property to block instead of none which none is what it is set to in the CSS by default for that div and you empty the status element that's very simple little function and then we have an example function here for you guys if you want to see how to use the new add eventlistener function that's recommended recommended as the new approach that people should use for modern web applications instead of having listeners directly on the HTML elements you set up your event listeners in your JavaScript that will affect those elements the event handler and the function that fires off when that event occurs and you just put it into window dot onload you make that fire off the add events function so whenever the window is finished loading you fire off function add events and you can use your add event listener method all day long to set up the handling of listeners for your HTML elements like I said right here all of these do not need to be here you can put them you establish them using add eventlistener if you like but I'm not doing it for you I'll comment that back out okay so now the last thing is this function sign up now when the user hits the sign up button in the form the first thing you do is you gather up the values from the fields that's what these lines are doing is we're gathering up the values from those fields into local JavaScript variables that are smaller than easier to work with so the first thing we run into is an if condition it says if the username is equal to nothing or if the email is equal to nothing or if the password 1 is equal to nothing or if the password 2 or if the country or if the gender is equal to nothing in the status band inner HTML property you pop it in this text fill out all of the form data because they're missing something so basically these if in else conditions are your form error handling but you also do the form error handling in PHP because people can bypass your JavaScript but they can't bypass your PHP so you really want to do the main checking in PHP ultimately but for user interfacing it's nice to just do some of your checking for form validation on the client side that way no server-side scripts need to be tapped into unless it's necessary to send that Ajax call so that's why you can just do some checking before any of the data goes to PHP now this next condition if that one passes and is not caught this next one checks to see the password one value and password two value don't match so if P 1 is not equal to P 2 then you tell them your password fields do not match and no Ajax call happens and everything stops now if their passwords do match this next one says else if the terms div dot style that display is equal to none that means if it's still hidden they haven't opened it up yet we want to give them a message saying please view the Terms of Use and again if this is caught in the form will not process the PHP until they fix that now else is where you actually process the form using Ajax to send all of that data to PHP and then wait for a response so if and else if and else if none of these conditions are met this final else condition will make the form process the code within the final else condition and what I like to do when a form is actually going to process the PHP or something I like to hide the the actual button that they click so that's what this line does it hides the signup button and actually you want to make sure the signup button comes back right here if there's an error or something coming back from PHP you want to make this block I guess I don't know I haven't tested that yet but I'll explain that in a second so the first thing you do is you hide the signup button then in the status element you put please wait dot or your animated gif so you put please wait or your animated gif because that is when the actual call to PHP the send is about to occur so you can go ahead and let them know that things are processing then we set up our Ajax object we have our onreadystatechange function and inside of that function we're going to check to see if the Ajax return data is true that means the response text is back so we can evaluate it we say if Ajax dot response text is not equal to signup success which will be a message that the PHP file spits back to Ajax if there is successful signup so but if it's not if the response text from PHP is not signup success and you want to give them some kind of ever message which I have it set up to just display the error messaging from the actual PHP file so you can leave it like that if you want and since you took away the signup button you want to make sure you put the signup button back most normal situations they would get signup success and this code right here will never run and you would never have to put the signup and back so if the response text is not equal to success in that unlikely event you run this code else you do have success so you run this code now what I did was I just put window dot scroll to the top coordinates of the page that way if the user has scrolled down into the page you want to make it snap back up to the top when the PHP replies to the Ajax and everything is successful then the last thing you do is you target the signup form itself that's the whole signup form see this element is ID signup form so you're targeting that element removing everything out of its inner HTML basically all of this is getting removed from the opening to the closing form tag will be wiped out and replaced with okay username check your email inbox outbox up at email blah blah blah in a moment to complete the signup process of that you already saw that message when I was signing up now that's what happens when Ajax gets some response from PHP only after you run this send method so the last line here shoots all those variables off to the PHP script so once this line executes this on ready state change function is what is the complete listener for when that data gets back okay that's every bit of the JavaScript so go ahead and collapse that collapses form back up and now we can check out the PHP I've set the PHP up into three different sections the first section is simply your heading them to a page called message PHP and the message variable is going to be no to that weenus and that just happens to be if the user is logged in header them away because if it's a logged in user they're already signed up why are they going to the signup page I don't know they want to create another account they can freakin log out in the next two sections are where the Ajax is calling to this script and here's your name check portion of code and here is your registration portion of code so up top please start session and that way we can use the session variables within our script so the first if condition is if the username session variable is set then we header them away to a page called message dot PHP which you're going to be getting underneath this video at develop PHP and I'm going to explain message that PHP in just a second to you basically it's just a file that in takes a variable and displays it on the page and there's also some condition logic in it okay so to the Ajax if is set post variable of username check so this code only runs and this code only runs if the Ajax request is calling it so basically if you go directly to sign up PHP this code these code blocks don't run because this if conditions are set up to make them not run unless those posted variables are present in the request and that is only possible if it's the Ajax request so this bit of code runs if they're doing the username check and this bit of code runs when they finally fill out the whole form and press submit and everything checks out in JavaScript and the Ajax call fires off and all the variables are sent via Ajax to be placed into your database so let's look at the username check script really quick the first thing you do is you include the database connection script because it hasn't been established on this page yet because you're going to access the database to check the name to see if it's already present in the database so you scoop up the posted variable and you sanitize it at the same time so this username variable is cleaned and ready to be queried against the database because we used preg replace and we set it up to restrict everything but a through Z and uppercase a through Z and zero through nine so the only accepted characters are zero through nine a through z and capital A through Z so anything else that would happen to be in that username string such as funny characters single quotes or double quotes it's all going to just be instantly removed by preg replace the only thing preg replace will let remain in this variable are A through Z zero 9 no spaces not anything else just alphanumeric characters so once it's filtered you set up your SQL to say select ID field from the users table where the username is equal to that username that's being checked then you actually execute the MySQL I query and then we can use MySQL einem rows on that query to get a number of how many matches were found where username equals that username so this will hold the number of either 0 or 1 0 means there was no match found 1 means there was a match found so then we commence to running if conditions and this first one is if the string length of the username is less than 3 or if the string length of the username is greater than 16 you want to echo back to the Ajax request 3 to 16 characters please and you can send any HTML styled any way you want and you run exit that way the script doesn't process any further it stopped processing right there for that particular Ajax request then the next if condition is checking to see if the username is started with a number because we want to make sure that everybody's user name starts with a letter if they start the user name with a number we want to echo out the message user names must be given the letter so you can use the is numeric function on the user name variable and you treat it sort of like an array and you can just put the first index because the first index in any array is usually 0 so running your username variable through there with that zero on it on the end like that we'll just pluck the first and you can see if that first that is returned is numeric and if it is numeric you want to tell them hey you got to put a letter as the first character in your username and you exit once again then we evaluate the you name check variable here remember this is the one that gives you a 0 or a 1 this will be 0 if there is no match found for that name that means they can use it there'll be a 1 returned in this value if there is a match found and they can't use it so you say if you name check is less than one that means if it's zero everything is okay else you tell them that name is taken and that is it for that so we can collapse that back up there we go now the last little bit of code to explain is when the user fills out all the form data everything passes in your JavaScript checking and then the Ajax request is fired off to send all of the registration information to this parser right here so if is set post you from the forum which is the way we're sending the Ajax remember down here we're posting you we're posting e a P a C and a G so all we have to do is check to see that if one of those variables are posted then we can run this code and let's explain that real quick the first thing we're going to do is connect to the database yes you have it in here too because these run independently and you gather the posted data into local variables so what you're doing here is you're taking all the posted variables from the request you're placing them into local PHP variables and we're sanitizing them at the same time so we're making sure this field is restricted to only having a through Z characters and 0 through 9 no spaces nothing else but numbers and letters that's for the username the email were sanitizing by running the MySQL I real escape string function on the posted email variable that way we don't restrict the characters that can be in it because there's a lot of strange characters that you wouldn't expect to be valid in the email address that are in fact valid in an email address so we're just going to use my sqli real escape string and what this function is made for is for sanitizing data before you make queries with that data so your database is safe it puts back slashes before any dangerous characters that way there's no arm that can come to your database within this post Eve area below then the next line is we to post password variable into a local variable called P but you can see there's no sanitation here we're not filtering it at all that's because we don't have to at all you don't want to restrict anything that the people can use in their password then the next line is we scoop up the gender so if you haven't figured it out yet you stands your username east and for email P stands for password G stands for gender and C stands for country so you can see with country we're accepting all a through Z uppercase and lowercase and spaces for the gender we're only accepting a through Z lowercase and it's only though it would be uppercase - if I had the I there so it's only lowercase because it should be only an M or an F that we get and we're not accepting numbers in either of these then we get the user IP address and we also sanitize that just in cases and we make sure that only numbers and dot can be within that string and preg replace handles that nicely basically preg replace is a function that can use regular expression to replace things within your string or restrict your string to only have a certain set of characters that you want okay now these two next little blocks this first one but it says duplicate data checks for username and email so this first one queries for the username to see if that username is already taken and then you run the query and then you get to num rows from that query and it winds up in this variable called you check the same thing for the email you query to see if that email that they're trying to establish their account with is already taken and you run the query and then you can run mysqli numrows on that query to get the number of rows that were found and both of these should return zero for somebody who is or doesn't have the username or email taken yet if the username is taken this will be a 1 if the email is also taken this will be a 1 - and we're going to be checking those things down here in the form data ever handling section so here you have all of your form data ever handling the first thing we want to evaluate is if the username field or the email field or the password field or the gender or the country is equal to nothing if any of those are equal to an empty value you want to echo back to the Ajax request whether I've got the wrong string in here this should say there the form submission is missing values if this occurs and then you exit because you don't want this to keep running anymore because a never was found in the form processing is missing values and if all the values are there this next one says if do you check which was the username check up here is greater than zero that means if it's a one you echo back the username you entered is already taken then you say if the email check is greater than zero that means if it's a one you echo back that email address has already been used in the system then you exit then the next condition is if the string length of the username is less than three or the string length we username is greater than sixteen you let go back username must be between a certain amount of characters and then exit now you can see that we did some of these checks in JavaScript already but you want to make sure and it's more important to make sure you do these checks in PHP before any of this data hits your database because you don't want anything to be wrong or missing so even though you might have checked it with JavaScript already for better form handling and user interfacing you still want to do those checks in PHP because a lot of people they're slick they know how to bypass your forms and submit straight to your parsers mechanisms so that's what when I program I just I figure on everybody being smart enough to bypass my forms and parse straight to my parsing mechanisms and the last bit of ever handling is we're checking to see if the first letter of the first character in the username is numeric and if it is you say username cannot begin with a number and you exit once again but if none of these conditions are met and everything is cool with their data then you actually add them in to the database and they become part of the system okay we hash the password and apply your own mysterious unique salt you don't really want to sit with the one that I have you want to make yours very unique complex and special just to your system and you don't share your method with anyone else but if you want to start with what I have you can okay the first thing we do is run Crypt function on the password variable so that's why we didn't have to clean their password variable up here or sanitize it with the rest because we're running it through the Crypt function which will sanitize it then you have a variable called crypt pass and to understand what I'm doing with the password and the salt and the random strings you want to watch these two tutorials I'm not going to go over it again right now because I explained them both in depth in those two tutorials and you can see the title of them so if they're not sitting right here on my channel and I've made a whole bunch of other videos you might be catching this video six months from after the time that I made it maybe these videos won't be directly here on my channel is my search right here search my channel for those two titles because you'll have to watch those two videos if you really want to understand what we're doing with this R and string generator function and how that's giving us a little random string of twenty characters there okay so what we do is we put the password through crypt and that makes the password cryptic and it gives it a 34 bit cryptic hash so whatever the length of their password is it doesn't matter this is going to be a 34 bit a 34 character cryptic hash then we want to make sure we include once inside the PHP includes folder the file called R and string gen PHP and here's my ran string Gen PHP and I'm going to have this code available underneath the video with all the other code from sign up dot PHP in these other files so if you can't see something here the exact syntax it'll be on the page a develop PHP where you just copy and paste it all right so that's the file that gets included right here so basically that function is going to be available to be called right here on the next line so what we're doing is and we're making a mash by putting a randomly generated 20 character string here and a randomly generated 20 character string here now why we're using randomly generated strings is because we don't want each salt to be exactly the same through the database because if somebody compares to salted hashes next to each other they'll see the similarities too easily so you can just add another layer of security by making everybody's different by giving making at random strings then after you have the password already to be securely stored in your database we're going to add all of the user input to the database using SQL insert syntax so the SQL string reads insert into users table the fields of username email password gender all of those etc etc all of those fields will get data inserted into them on this insert and the values are these here corresponding values match these fields so these fields up here that are sitting in your database waiting for data are going to get these values placed into them and now it's just a way to take like the current timestamp when the insert occurs and that's the time that will get placed into your day time field and then you execute the query using that SQL syntax and MySQL I insert ID what that does is it pulls the last inserted ID so if this is the first user he's going to have an ID of 1 so this UID is going to be 1 when the next user joins he's going to have an ID of 2 automatically so this my SQL insert ID we'll know that B what it does is it pulls the the ID for the last inserted row so you have the user ID available to you then we establish their row in the user options table as well so that SQL syntax reads insert into user options the ID field username field and background field these corresponding values the user ID so they match up perfectly from table to table this user name and the original string I just put the string original because everybody when they join up they're going to have the original background design on their profile and then you run that query on that SQL syntax next we create a directory a folder to hold each user's files their pics their mp3s etc so when you just watched me join there was a a folder that I created with my name inside of the user folder so in your public HTML folder on your live website you have to make a user folder right now so where your index dot PHP lives and your images folder your Styles folder your PHP includes folder in that same directory with all that stuff you make a folder named user and that's going to have to be there because each time a person joins is going to be a folder created in there magically with their name the folder name will be their user name so basically this if condition says if a folder with that user's name in the user folder does not exist then you're going to make the folder using the make dir function and that allows you to establish any folder that you want with the name that you want and these are the folder permissions the chin mod ok so after they're inserted into the users table and the user options table and you've made the folder for them we're going to finally email the user the activation link and this is the last little bit now the mail function in PHP it gives four parameters for basic usage the first parameter is the recipient who is the mail going to that's what you put right there you can see our two is set up to be to the person's email address who's joining the site right now in the next parameter is the email subject and you can just put in any string you want I just put in web intersect account activation the next parameter is the actual message body and what I have here is basically an HTML page and you can do the same thing you can set it up same way I did you can have an HTML page and just remove all the whitespace and the lines to where it's all in one line you can see my whole document my whole HTML document there is sitting in one line there's no line breaks and there's not much whitespace going on so I just designed a page in a temporary file on Dreamweaver and then when I had the desired look that I wanted for that page I just collapsed all the whitespace and the lines and compressed everything and I stuck it here in this message variable I put it in between single quotes that way I could use double quotes all throughout my HTML here and inside the message body the email that gets sent to the person to put variables all you have to do is use the single quote to break the string and put the dynamic variable in to render so that way this will say hello John or hello Susan the users name now what's in the body is pretty important because in it is going to be a link and here's that link now you would want to change this to be your website of course and when the user clicks this link they're going to be sent to the activation dot PHP script which you're also going to be getting from me today now we're sending get type variables URL encoded variables over that URL that way the activation dot PHP script will be able to scoop them up when that link is clicked so the activation dot PHP script will be able to scoop up the user's ID the user's name users email and the users hashed password and then the just write the text that you want to say I just wrote click here to activate your account now so when they click that link all those variables are going to be passed to activation dot PHP and activation that PHP is going to be opened up in whatever their default browser is to activate them and I also wrote under that login after successful activation using your email address and your password so that's the message body and to send HTML format message like this like a full HTML page like this designed any way you want you have to use content type text HTML not just plain text it has to be HTML okay so let me collapse that up and then the headers is where you set the from variable that's who the message is from and in my case it's autoresponder at web intersect com you would want to change this to be the email address that you've created on your hosting server so you want to go to your hosting account right now at your control panel and you want to make an email that is connected directly to that hosting account if you don't want to use some Gmail as some other crap that's not created and established on your hosting server so go to your website a hosting account go to your control panel click email and create an email that says do not reply at whatever your comm is or autoresponder at your comm because it's important to establish that email on your host server because if you don't a lot of your messages are going to be going into people's junk boxes because the server does not validate that email address because it's not actually on your server if you have an email address that can be validated on the server your messages will be going into people's inboxes a lot more then it will be going into their junk so if that email is not created and it's just some make-believe email that you put there the people you're trying to send this email to might not get it in their inbox it might go straight to the junk box or the spam box or whatever that's why having the actual email created on the hosting account when your server is important so in the headers you send the from variable which is your email address you also establish the mime version and these backslash-n that you see here these are newline symbol so newline characters represents a newline in text and then in the headers you also want to pack in the content type which like I said has to be text HTML if you wish it to have nice HTML tags and formatted the way you want you can send a plain text email if you choose and the character encoding so that is what the email consists of that's going to be sent right here the recipient the subject the message and the headers and then you simply echo signup success because everything has gone through smoothly to this point and then you just exit the script so Ajax is going to get a return data from PHP saying signup success so that way your JavaScript knows what to do with the user at that point and we already explained all that down here we're going to see right here we're getting if the Ajax response text is not equal to sign up success we actually echo out the response text so up here if any of these echoes occur that's where it's going to wind up is in that condition for ever handling but if it says sign up success this code is going to run you scroll back up to the top you remove everything from the signup form and you say okay everything's cool now just go and check your email inbox back get back so that's how all the PHP works I've explained every little bit of it now that's a pain in the butt and let's see right here you'll see a lot of people they will have if conditioned on this saying if male like that and then they'll echo out success because this will return a value of true if the male is sent successfully it will return a value of false if there's any problems so you can put if and else condition there just like that so you say if male true you echo whatever you want to echo else you echo something bad went wrong with the mailing thing and you can log things to text files if you want but it's not necessary for me okey-dokey let me collapse that now these other files are a lot smaller and they don't do as much so explaining them won't take half as long I already explained ran string gen to you and I'm going to be giving that code to you anyway so I don't need to explain that one so let's move along to activation this is going to be the script like it's called when people click in that email that you send them to activate their account they click that email this page gets opened up in their favorite browser automatically and we attempt to activate their account with the data that they're passing to us through the URL variables so if is set the URL variables of ID you e and P so that's their ID their user name their email and their password if those variables are set within the URL string then and only then will all of this code run else if there's anything missing from the URL variables this code will run let me show you that we're going to header to that message PHP script that I'm going to show you in just a second we're going to send a message of missing get variables and then we exit the script that's just in case any of these variables happen to be missing this code will execute and I have a little note that says log this issue of missing initial get variables now anywhere in this script where I give that no of log this issue that means is that you can either email you can use the mail function in PHP to email yourself at any of these intervals when bad things happen in your script that aren't expected or you don't like you just send the mail function right there send it to your email address and you send the details of what went wrong or some kind of error code associated is you can email yourself the problem all the details about what went wrong at any place in your script within any of these if conditions or any functions or whatever any point in the script where you want to know when something has occurred you just shoot an email to yourself using the PHP mail function and all the details about what if it's kurd and you can also log it into a text file because PHP can create text files it can also open a text file sitting on your server and append data to it it won't overwrite it it'll take the data that's already in it and add another little bit to the bottom and that's how people create log files now if all the variables are set in coming into this activation dot PHP script then we start running this code the first little bit is connect to the database and sanitize all the incoming get variables let's see what that looks like looks similar to the way we did it before so I'm not going to go into that very much collapse that back up next thing we'll evaluate the lengths of the incoming get variables see what that looks like if the ID is equal to empty string or the string length of the username is less than 3 or if the string length of the email is less than 5 characters or if the string length of the password is not equal to exactly 74 characters then we're going to let them know that there's a problem we'll header them to message dot PHP with the message of activation string length issues buddy we cannot continue exit the script because you have to make sure all these things have a value and actually you can check for all four of these just like we're doing for the ID just to see if it's empty but I want it to be a little more direct and make sure that password is exactly 74 characters but you don't have to be that strict you can just check to see if there's at least one character in the password same for email so that's evaluating the lengths and if the lengths are cool then this code will run we have the SQL syntax of select all fields from the users table where the ID equals this users ID and the username equals this user's name and the email equals this users email and the password equals this user's password so that's how you check their credentials against the database you're taking the incoming variables and you're just checking to see if that row even exists and if it is then you know you can activate them if all of these match up exactly so you simply run that syntax in a query and you get the number O's using the MySQL I num rows function on that query and that will give you either a 0 or a 1 0 meaning false that no match was found 1 meaning true that yes a match was found and now if a match is found and the value is 1 for that num rows you can activate them okay so we have num roles established now we're going to evaluate for that match saying if num rows is equal to 0 then you have a problem send them the message that PHP message your credentials are not matching anything in our system if you get this message and you want to make sure in the database that the information stored in there for that user matches what's coming into this script or you actually you can check in the email by right-clicking the email and copy shortcut target if you copy the shortcut you just put it into notepad or whatever you can see all the data make sure it matches up to what's in the database but you shouldn't have that problem because I didn't have that problem okay so we've made sure that their num Rose didn't return a zero we wanted to return a one that means a match was found so we run this code the syntax says update user set activated so you're updating the user's table field activated the activated field for this user where ID equals this user's ID you're changing their activated field from zero like it is by default when they join to one and that's how you activate them you run that query right here okay so I can collapse that back now what else we got here optional double check to see if activated in fact is now one yeah this is optional and I just put it in there so you can do a double check it says select all from users where ID equals this user's ID and where activated equals one so you're just making sure that user with that ID is now activated one and you run that query here and then you can run MySQL num rows on that query to get how many rows were selected and we should have a one if everything is cool so let's go ahead and collapse that now and look at this so if num rows equals zero that means everything was not cool and ahead of them to message that PHP saying activation failure then we exit the script else if num rows is equal to one everything is cool and they are activated now so then we can header them to message that PHP saying activation success okay and that's it I already explained the last else condition that was that runs only if any of these variables are missing all right so there you go I explained every freaking little bit of that and that's how all of it works and I'll leave all those comments in place now all you have see since you've seen random strange any is message PHP and that's all it is to it now I didn't fancy mine up at all or give it any design I didn't make it part of my template design or anything like that I simply put a PHP block up top to catch that incoming message variable c this.get message so this file message PHP which is going to live in your public HTML folder this is always looking for a get message because the only time this page should display to the user is when you're sending people to it with a get message attached just like we were doing all through this activation file anytime there was some kind of issue or something wasn't right with their data we would header them to message that PHP with some kind of message attached to the URL so basically this page is just for rendering those dynamic messages to people and this HTML here is just to show you that you can have any HTML you want this can actually be part of your design you can have full doctype and everything up in here you can echo this message variable anywhere you want in your HTML page but you just want to have this part up top above your doctype declaration now let's see what this says this starts with the message variable that message variable is equal to no message by default so if there is no message coming into this page what the user is going to see if they run this page is no message because message this variable is the output variable see this output variable that finally gets echoed at the bottom that's what that's for and we can change this the value of it within these if conditions see how we're changing the value of it within these if conditions okay so first thing we do is we grab up the get message from the URL encoded variable and we filter it we're going to sanitize it and make sure it can only have a through z space 0:09 dot : underscore and those two that's the only characters it is able to have anything else like question mark commas all that's going to be wiped right out of the string it will be replaced removed so now the little msg the incoming get variable is clean now if that message is equal to activation failure you want to give them some HTML like I did here saying activation error sorry there seems to have been an issue activating your account blablabla blablabla and I wrote we have already notified ourselves of this issue because you are supposed to be emailing yourself and making log files when any problems occur so you should get an email when anything goes wrong and people can't activate ok so that's if they get activation failure but 99.999% of people will get activation success and they will get this message activation success in big h2 element your account is now activated and then you simply put a link to your login page you say click here to login now this else condition is for if it's neither activation failure or neither activation success as the message coming into this page then you're just going to display whatever the message coming into the pages let me explain that again if the message coming into the page dynamically through get is not activation failure or it's not activation success that means it's something else you just want to just to render that something else into the message variable and it gets echoed right here on the page see what I'm saying ok that's it I'm going to explain it no more cuz that's all the files you got sign up that PHP activation dot PHP message dot PHP these all three go in your public HTML folder sitting right there with your index dot PHP homepage and all that good stuff this ran string gen dot PHP this goes in your PHP includes folder so that's the only one that would go in a different folder PHP includes folder message that PHP activation dot PHP signup that PHP all three of those just go straight into your main directory your public HTML folder online so when you put up these three files into your public HTML folder and then you put up this one file into your PHP includes folder you should be ready to navigate to sign up dot PHP and sign up to your website if you happen to have any problems that means you didn't change something that you were supposed to change maybe you don't have Ajax Jes in the Jes folder yet because you skipped the previous video or something that we already did I don't know but it'll be on you you see I just had my whole system working and these exact files that I'm showing you are the ones that I demonstrated with showing you proving to you that my system works online so these are the exact files I'm using guys if you have a problem with your system your your server is either you're or your server is make sure you change everything that you're supposed to change to make this system yours for instance the email in the right here in the sign up script the registration script this has to be changed to your email it can't say autoresponder at web intersect comm because then people aren't might not get your email because this email is not going to be associated to your hosting account it's associated to my hosting account so you definitely got to change that there okay I've got one little last tip let's see let's open up one of these here in activation dot PHP you see all of these MySQL query functions MySQL query functions any time you're running a MySQL query you can put or die here or die and research this function alright so like I said the sign PHP the full code will be underneath this where this video plays at develop PHP along with activation the PHP message dot PHP and ran string Genda PHP but just don't use it as it is you want to take it tinker with it make it your own make it better than what it is

Channel: Adam Khoury

Views: 151,426

Keywords: php tutorial, mysql tutorial, mysqli tutorial, javascript tutorial, web intersect, mysqli, php 5, php 6, build membership, how to build a website, module, script, dynamic website, learn css, learn, how to program web site, framework, html tutorial, build social network, learn ajax, howto, program, web, development, design, online, free, lesson, teacher, student, educational, school, class, PHP (Programming Language), adam khoury

Id: a8x-pdQM9Cc

Length: 63min 51sec (3831 seconds)

Published: Sat Jan 19 2013