Design To Website, Blog How To Set Up, Google Update Pagerank, Google Crawl, Free Submit Site
I’m creating a massive WordPress Theme and Plugin Tutorial, so I will first show you how to install WordPress on a Localhost for development purposes.
If you’re on a PC, you’ll probably want to get the Microsoft Web Platform Installer or Wamp Server. I prefer to install Apache, MySQL and PHP outside of a package system, but I leave that to you.
If you’re on a Mac or UNIX type system the following steps will work easily for you.
In this tutorial I finish the PHP Forum. If you missed the first part it is here PHP Forum Part 1.
This forum isn’t just built in PHP however. It also uses MySQL, JavaScript and JQuery. Watching this tutorial is a great way to see if you understand how to program more complicated sites.
In part 5 of my PHP Message Board Tutorial, I show you how to create a proper login system.
This isn’t a simple system though. It is multi-layered and very secure. I specifically cover how to:
And, a whole bunch more. All of the code follows the video like always.
This is a more advanced script and you may need help with the following topics:
Code From the Video
<?php
include(‘header.html’);
?>
<style>
#recaptcha_image img {
width: 185px;
height: 28.5px;
border: 1px solid gainsboro;
}
#recaptcha_widget {
height:400;
}
</style>
<script type=”text/javascript”>
// Changes the styling for the Captcha image
var RecaptchaOptions = {
theme : ‘custom’,
custom_theme_widget: ‘recaptcha_widget’
};
</script>
<?php
if (isset($_POST[‘submitted’])) { // Check if the form has been submitted.
// Security check for a valid username
if (preg_match (‘%^[A-Za-z0-9]\S{8,20}$%’, stripslashes(trim($_POST[‘userid’])))) {
// Scrub username with function in header.php
$u = escape_data($_POST[‘userid’]);
} else {
$u = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter a valid User ID!</font></p>’;
}
// Security check for a valid password
if (preg_match (‘%^[A-Za-z0-9]\S{8,20}$%’, stripslashes(trim($_POST[‘pass’])))) {
// Scrub password with function in header.php
$p = escape_data($_POST[‘pass’]);
} else {
$p = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter a valid Password!</font></p>’;
}
// PHP Code for the CAPTCHA System
$captchchk = 1;
$privatekey = “Public Key Here”;
$resp = recaptcha_check_answer ($privatekey,
$_SERVER[“REMOTE_ADDR”],
$_POST[“recaptcha_challenge_field”],
$_POST[“recaptcha_response_field”]);
if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
echo ‘<p><font color=”red” size=”+1″>The CAPTCHA Code wasn\’t entered correctly!</font></p>’;
$captchchk = 0;
}
// Query the database. Verify the username, password and captcha
if ($u && $p && $captchchk) {
$query = “SELECT user_id, first_name, last_name, email, username, passwd, active FROM users WHERE username=’$u’ AND passwd=SHA(‘$p’)”;
$result = mysql_query ($query) or trigger_error(“Either the Userid or Password are incorrect 1”);
if (mysql_affected_rows() == 1) { // A match was made
$row = mysql_fetch_array ($result, MYSQL_NUM);
mysql_free_result($result);
// If they haven’t activated the account redirect
if ($row[6] != NULL)
{
header(“Location: http://localhost/msgbrd/mbforgotpass.php”);
mysql_close(); // Close the database connection.
exit();
}
$_SESSION[‘first_name’] = $row[1];
$_SESSION[‘userid’] = $row[4];
// Create Second Token for security
$tokenId = rand(10000, 9999999);
$query2 = “update users set tokenid = $tokenId where username = ‘$_SESSION[userid]'”;
$result2 = mysql_query ($query2);
$_SESSION[‘token_id’] = $tokenId;
// Reset session id for security
session_regenerate_id();
// Redirect the user
header(“Location: http://localhost/msgbrd/mblogin.php”);
mysql_close(); // Close the database connection.
exit();
}
} else { // No match was made.
echo ‘<br><br><p><font color=”red” size=”+1″>Either the Userid or Password are incorrect 2</font></p>’;
mysql_close(); // Close the database connection
exit();
}
} // End of SUBMIT
?>
<body>
<div id=”header”><h2>Message Board</h2></div>
<div id=”login”>
<?php
echo ‘<h1>Welcome’;
if (isset($_SESSION[‘first_name’])) {
echo “, {$_SESSION[‘first_name’]}!”;
}
echo ‘</h1>’;
// Display links based upon the login status
// If user is on the logout page disable the login
if (isset($_SESSION[‘userid’]) AND (substr($_SERVER[‘PHP_SELF’], -10) != ‘logout.php’)) {
echo ‘<a href=”logout.php”>Logout</a><br />
<a href=”change_password.php”>Change Password</a><br />’;
} else { // Not logged in.
echo ”
<form action=’mblogin.php’ method=’post’>
<p><b>Userid:</b> <input type=’text’ name=’userid’ size=’20’ maxlength=’20’ /></p>
<p><b>Password:</b> <input type=’password’ name=’pass’ size=’16’ maxlength=’30’ /></p>”;
// Captcha stuff from Google
echo ”
<div id=’recaptcha_widget’ style=’display:none’>
<div id=’recaptcha_image’></div>
<div class=’recaptcha_only_if_incorrect_sol’ style=’color:red’>Incorrect please try again</div>
<span class=’recaptcha_only_if_image’>Enter the words above:</span><br />
<span class=’recaptcha_only_if_audio’>Enter the numbers you hear:</span>
<input type=’text’ id=’recaptcha_response_field’ name=’recaptcha_response_field’ />
<div><a href=’javascript:Recaptcha.reload()’>Get another CAPTCHA</a></div>
<div class=’recaptcha_only_if_image’><a href=’javascript:Recaptcha.switch_type(\’audio\’)’>Get an audio CAPTCHA</a></div>
<div class=’recaptcha_only_if_audio’><a href=’javascript:Recaptcha.switch_type(\’image\’)’>Get an image CAPTCHA</a></div>
<div><a href=’javascript:Recaptcha.showhelp()’>Help</a></div>
</div>
<script type=’text/javascript’
src=’http://www.google.com/recaptcha/api/challenge?k=Public Key Here’>
</script>
<noscript>
<iframe src=’http://www.google.com/recaptcha/api/noscript?k=Public Key Here’
height=’300′ width=’500′ frameborder=’0′></iframe><br>
<textarea name=’recaptcha_challenge_field’ rows=’3′ cols=’40’>
</textarea>
<input type=’hidden’ name=’recaptcha_response_field’
value=’manual_challenge’>
</noscript>
“;
echo “<div align=’left’><input type=’submit’ name=’submit’ value=’Login’ /></div>
<input type=’hidden’ name=’submitted’ value=’TRUE’ />
</form>”;
echo ‘<a href=”register.php”>Register</a><br />
<a href=”forgot_password.php”>Forgot Password</a><br />’;
}
?>
</div>
</body>
</html>
In part 4 of my PHP Message Board tutorial I show you how to create an account activation script.
In the previous video PHP Message Board pt 3, I created a user registration script. As an added security measure it sent an email with a link to this activation script. The new user will only be able to login if they click on that link.
At that point we check that the userid and 32 character key are the same. If they are we activate the account.
In the last part of this tutorial PHP Message Board Part 2 I set up the database access file, some security stuff and a user registration page. In this part of my message board tutorial I finish off the user registration page.
In this tutorial I’ll show you how to do the following:
A few articles ago I started creating a PHP Message Board, but then I got side tracked. Here is the original video PHP Message Board. You must watch it before you watch this one.
In this video tutorial I’ll start explaining how to create a new user registration system for the message board. You can also use this as a review of all I taught on PHP, MySQL, CSS, HTML, JavaScript and JQuery. If you click on those links you can see all of my tutorials on those subjects as well.
In this part of the JQuery Video Tutorial I show you how to create all kinds of cool things using the JQuery UI and plugins.
I’ll show you how to create a really nice JQuery Lightbox using fancybox. It has all the bells and whistles you want.
I’ll then show you how to create a tab interface that is: draggable, resizeable, sortable, and more.
In this part of the JQuery Video Tutorial I will show you how to retrieve information from your server dynamically. It is amazingly easy to implement AJAX concepts using JQuery.
By the end of this tutorial you’ll be able to retrieve plain text and XML. You’ll also be able to access PHP code that can access databases, or any other type of information on your server. And, yes this works dynamically!
In part 6 of my JQuery tutorial I answer many of the questions I’ve received.
I’ll show you how to download the code needed to use JQuery widgets. The JQuery UI website is here.
I then show you how to create Accordions in 2 ways and how to create a image slide show.
In this JQuery video tutorial I introduce the JQuery UI library. I also show you numerous ways to animate elements using JQuery. I cover hide, show, toggle, fadeOut, fadeTo, slideUp, slideDown, animate and effect. I also cover numerous other properties.
If you missed part 1 of this tutorial watch it first JQuery Video Tutorial.
If you want the JQuery UI library, it can be found here JQuery UI Library
I’ve received many requests to cover Document Object Model manipulation with JQuery. So, in this JQuery Video Tutorial I’ll show you numerous ways to add and delete elements to the DOM.
JQuery provides numerous ways to add elements and precise ways to delete others. I’ll specifically cover the following functions: before(), insertBefore(), prependTo(), appendTo(), append(), insertAfter(), after() and remove().
In this JQuery Video Tutorial I will cover numerous topics with a focus on Event Handling. If you missed part 1 check it out first JQuery Video Tutorial.
I’ll show you below how to:
Wow, did the last JQuery Video Tutorial generate a lot of emails! I’m glad you guys and gals are interested in JQuery. Yes I will cover everything there is to know about the JQuery Framework in this tutorial.
If you missed the past tutorial it is here JQuery Video Tutorial.
In this video I’ll answer many of the questions I received such as:
This is the first part of my JQuery Video Tutorial. I will also cover all of the techniques that go into implementing a dynamic site using Asynchronous JavaScript and XML (AJAX).
It is extremely easy to use AJAX techniques with JQuery. First you must understand that AJAX is not a language, it is just a series of techniques used to dynamically change websites with out page reloads.
If you’d prefer to read about AJAX, here is another article Ajax What is it?
It’s not very often that I make a video tutorial that I really love, but I think I did it today!
In this video tutorial I show you everything that goes into making a full website design with a Horizontal Menu.
I not only show you everything, I try to do it using the least amount of code possible. In doing that I think you will be able to easily make your own web designs.
In this JavaScript Video Tutorial, I show you how to create, change, delete and retrieve the values in JavaScript cookies.
I also review some useful string functions and other ways to use the Document Object Model.
If you missed previous versions of this video tutorial, it all started with this JavaScript Video Tutorial Part 1. By the end of this tutorial you’ll not only understand how to do anything with cookies, you’ll also have an intimate knowledge of the DOM.
In this tutorial I go over a bunch of JavaScript tricks with a focus on error handling in general. If you missed the other parts of this tutorial you should start here JavaScript Video Tutorial.
I’m going to touch on how to dynamically update the web page, because you guys have some questions about that. I’ll then explain how JavaScript Error Handling works by showing you how Try, Throw and Catch works.
All of the code follows the video below and it is free to use however you’d like.
In this part of my JavaScript Video Tutorial, I explain how to dynamically validate forms using JavaScript. This is also a review on how to use the Document Object Model and Regular Expressions.
If you missed the first part of this tutorial, it is available here JavaScript Video Tutorial.
I specifically cover how to:
In this part of the JavaScript Video tutorial I will introduce Regular Expressions. A large number of people have trouble with Regular Expressions. I think it is because the name is so confusing? They aren’t!
A Regular Expression is a series of codes used to describe a series of characters in a string.
They are used to search for a specific string of characters in another string.
I have received many questions about how to manipulate the Document Object Model (DOM) with JavaScript. In this tutorial I will focus on the many ways to do just that.
I’ll show you how to easily dramatically change your web pages the easy way using getElementById. I’ll then show you how to: