I'm following the above php,mysql tutorial on developPHP.com by Adam Khoury and struggling to create the sign up form.
Here is what I've created so far
http://www.geniusamigos.com/social/signup.php
This page can store details in the DB, but doesn't meet the if condition to load the success message to one of the div's inner HTML.
I'm fine with PHP but know nothing about Ajax and Js. So, I'm blind here...
So, does anybody have followed this tutorial series and created the signup page without any problem ?
Please help me...
Here is the code in the particular page signup.php
<?php
session_start();
// If user is logged in, header them away
if (isset($_SESSION["username"])) {
header("location: message.php?msg=NO to that weenis");
exit();
}
// Ajax calls this NAME CHECK code to execute
if (isset($_POST["usernamecheck"])) {
include_once("php_includes/db_conx.php");
$username = preg_replace('#[^a-z0-9]#i', '', $_POST['usernamecheck']);
$sql = "SELECT id FROM users WHERE username='$username' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
$uname_check = mysqli_num_rows($query);
if (strlen($username) < 3 || strlen($username) > 16) {
echo '<strong style="color:#F00;">3 - 16 characters please</strong>';
exit();
}
if (is_numeric($username[0])) {
echo '<strong style="color:#F00;">Usernames must begin with a letter</strong>';
exit();
}
if ($uname_check < 1) {
echo '<strong style="color:#009900;">' . $username . ' is OK</strong>';
exit();
} else {
echo '<strong style="color:#F00;">' . $username . ' is taken</strong>';
exit();
}
}
?><?php
// Ajax calls this REGISTRATION code to execute
if (isset($_POST["u"])) {
// CONNECT TO THE DATABASE
include_once("php_includes/db_conx.php");
// GATHER THE POSTED DATA INTO LOCAL VARIABLES
$u = preg_replace('#[^a-z0-9]#i', '', $_POST['u']);
$e = mysqli_real_escape_string($db_conx, $_POST['e']);
$p = $_POST['p'];
$g = preg_replace('#[^a-z]#', '', $_POST['g']);
$c = preg_replace('#[^a-z ]#i', '', $_POST['c']);
// GET USER IP ADDRESS
$ip = preg_replace('#[^0-9.]#', '', getenv('REMOTE_ADDR'));
// DUPLICATE DATA CHECKS FOR USERNAME AND EMAIL
$sql = "SELECT id FROM users WHERE username='$u' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
$u_check = mysqli_num_rows($query);
// -------------------------------------------
$sql = "SELECT id FROM users WHERE email='$e' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
$e_check = mysqli_num_rows($query);
// FORM DATA ERROR HANDLING
if ($u == "" || $e == "" || $p == "" || $g == "" || $c == "") {
echo "The form submission is missing values.";
exit();
} else if ($u_check > 0) {
echo "The username you entered is alreay taken";
exit();
} else if ($e_check > 0) {
echo "That email address is already in use in the system";
exit();
} else if (strlen($u) < 3 || strlen($u) > 16) {
echo "Username must be between 3 and 16 characters";
exit();
} else if (is_numeric($u[0])) {
echo 'Username cannot begin with a number';
exit();
} else {
// END FORM DATA ERROR HANDLING
// Begin Insertion of data into the database
// Hash the password and apply your own mysterious unique salt
$cryptpass = crypt($p);
include_once ("php_includes/randStrGen.php");
$p_hash = randStrGen(20) . "$cryptpass" . randStrGen(20);
// Add user info into the database table for the main site table
$sql = "INSERT INTO users (username, email, password, gender, country, ip, signup, lastlogin, notescheck)
VALUES('$u','$e','$p_hash','$g','$c','$ip',now(),now(),now())";
$query = mysqli_query($db_conx, $sql);
$uid = mysqli_insert_id($db_conx);
// Establish their row in the useroptions table
$sql = "INSERT INTO useroptions (id, username, background) VALUES ('$uid','$u','original')";
$query = mysqli_query($db_conx, $sql);
// Create directory(folder) to hold each user's files(pics, MP3s, etc.)
if (!file_exists("user/$u")) {
mkdir('user/' . $u, 0755, True);
}
// Email the user their activation link
$to = "$e";
$from = "tharinduboy@gmail.com";
$subject = 'Genius Account Activation';
$message = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Genius Message</title></head><body style="margin:0px; font-family:Tahoma, Geneva, sans-serif;"><div style="padding:10px; background:#333; font-size:24px; color:#CCC;"><a href="http://www.geniusamigos.com/social"><img src="http://www.yoursitename.com/images/logo.png" width="36" height="30" alt="yoursitename" style="border:none; float:left;"></a>yoursitename Account Activation</div><div style="padding:24px; font-size:17px;">Hello ' . $u . ',<br /><br />Click the link below to activate your account when ready:<br /><br /><a href="http://www.geniusamigos.com/social/activation.php?id=' . $uid . '&u=' . $u . '&e=' . $e . '&p=' . $p_hash . '">Click here to activate your account now</a><br /><br />Login after successful activation using your:<br />* E-mail Address: <b>' . $e . '</b></div></body></html>';
$headers = "From: $fromn";
$headers .= "MIME-Version: 1.0n";
$headers .= "Content-type: text/html; charset=iso-8859-1n";
mail($to, $subject, $message, $headers);
echo "signup_success";
exit();
}
exit();
}
?>
<!DOCTYPE html>
<html>
<?php include_once("header_main.php"); ?>
<head>
<script src="js/main.js"></script>
<script src="js/ajax.js"></script>
<script>
function restrict(elem) {
var tf = _(elem);
var rx = new RegExp;
if (elem == "email") {
rx = /[' "]/gi;
} else if (elem == "username") {
rx = /[^a-z0-9]/gi;
}
tf.value = tf.value.replace(rx, "");
}
function emptyElement(x) {
_(x).innerHTML = "";
}
function checkusername() {
var u = _("username").value;
if (u != "") {
_("unamestatus").innerHTML = 'checking ...';
var ajax = ajaxObj("POST", "signup.php");
ajax.onreadystatechange = function() {
if (ajaxReturn(ajax) == true) {
_("unamestatus").innerHTML = ajax.responseText;
}
}
ajax.send("usernamecheck=" + u);
}
}
function signup() {
var u = _("username").value;
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var c = _("country").value;
var g = _("gender").value;
var status = _("status");
if (u == "" || e == "" || p1 == "" || p2 == "" || c == "" || g == "") {
status.innerHTML = "Fill out all of the form data";
} else if (p1 != p2) {
status.innerHTML = "Your password fields do not match";
} else {
_("signupbtn").style.display = "none";
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "signup.php");
ajax.onreadystatechange = function() {
if (ajaxReturn(ajax) == true) {
if (ajax.responseText != "signup_success") {
status.innerHTML = ajax.responseText;
_("signupbtn").style.display = "block";
} else {
window.scrollTo(0, 0);
_("signupform").innerHTML = "OK " + u + ", check your email inbox and junk mail box at <u>" + e + "</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
}
}
}
ajax.send("u=" + u + "&e=" + e + "&p=" + p1 + "&c=" + c + "&g=" + g);
}
}
function openTerms() {
_("terms").style.display = "block";
emptyElement("status");
}
/* function addEvents(){
_("elemID").addEventListener("click", func, false);
}
window.onload = addEvents; */
</script>
</head>
<body>
<?php include_once("header_signup.php"); ?>
<div id="pageMiddle">
<div id = "signup">
<p style="font-size: 32px; font-weight: lighter; ">Create your Account </p>
<form name="signupform" id="signupform" onsubmit="return false;">
<div>Username: </div>
<input id="username" type="text" onblur="checkusername()" onkeyup="restrict('username')" maxlength="16">
<span id="unamestatus"></span>
<div>Email Address:</div>
<input id="email" type="text" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88">
<div>Create Password:</div>
<input id="pass1" type="password" onfocus="emptyElement('status')" maxlength="16">
<div>Confirm Password:</div>
<input id="pass2" type="password" onfocus="emptyElement('status')" maxlength="16">
<div>Gender:</div>
<select id="gender" onfocus="emptyElement('status')">
<option value=""></option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
<div>Country:</div>
<select id="country" onfocus="emptyElement('status')">
<?php include_once("countrylist.php"); ?>
</select>
<div>
</div>
<br /><br />
<button id="signupbtn" onclick="signup()">Create Account</button>
<span id="status"></span>
</form>
</div>
<div style="float: left; height:450px; width: 300px;">
<div style="float: left; height:450px; width: 300px; background: url('images/login-page-boy.png'); margin-left: 100px; margin-top: 100px; ">
</div>
<br>
<div style=" width:550px; height:100px; margin-right: 50px; margin-top: 550px; position: relative;">
<p style="font-size: 38px;font-weight: lighter;">It's free and anyone can join...</p>
</div>
</div>
</div>
<div id = "pageBottom">
<br>
<div><p style="margin:0 auto; width:200px;">© Tharindu Lakshitha</p></div>
</div>
</body>
</html>
