In this tutorial I’ll cover most every Cascading Style Sheet property not covered in CSS Tutorial Pt 1 and CSS Text Properties. Specifically I’ll show you how to style:
I’ll also introduce you to the box element and its numerous properties. If you’d prefer to read this information please see Learn CSS.
In this video tutorial I’ll show you how to use every single CSS Text Property available. I’ll specifically cover the following text properties:
In this video tutorial I will begin going over every way you can style your web pages using Cascading Style Sheets (CSS). I specifically cover in this CSS Video Tutorial how to:
Anna wrote in and asked me to show here different ways to draw in Adobe Illustrator. Here I demonstrate a way to draw that should be easy for anyone to create beautiful illustrations.
I rely on only three tools to create this illustration:
In this Adobe Illustrator Video tutorial I’ll cover a bunch of tools that are often neglected. In the end you’ll be able to create this snowflake and do a bunch of cool things with text. Here is the file I created if you want it Illustrator Snowflake. Do what ever you want with it.
I’m going to show you how to:
I show you how to create a PHP / MySQL message board in this video tutorial. I start by showing you how to properly set up the database. this can be looked at as a review on how to write SQL as well.
I specifically will review how to:
In the last article I covered how to Learn HTML in 15 minutes. In this video I’ll teach you how to write xHTML 1.0 Strict code in 1o minutes!
It is actually pretty easy. You just have to:
I was dared to create an HTML video tutorial that covers the top 50 tags, in under 15 minutes. Well I did it!
I show how to use 50 different tags in HTML. I then give an example of each. You’ll either love it or hate it. I hope you love it of course.
If you would prefer to see this done more slowly check out Learn HTML. I go through everything much slower and provide examples as well.
I plan on covering JavaScript next and then moving back into the wonderful world of PHP and then everything WordPress Themes & Plugins.
The code used in the video follows the video. Leave questions or comments below.
Code From the Video
MAIL2.PHP
<! DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
<style type=”text/css”>
h1 {color:red}
</style>
<meta name=”description” content=”Welcome to Bob’s Hardware, We sell” />
<meta name=”keywords” content=”Flowers, Seeds, Rakes, Shovels, Hardware Store” />
<meta name=”author” content=”Bob Smith” />
<title>Welcome to Bob’s Hardware Store, we sell Flowers, Seeds, Rakes</title>
</head>
<body>
<h1>Text to Draw Attention to</h1>
<abbr title=”A much longer description”>Something Abbreviated</abbr>
<acronym title=”as soon as possible”>ASAP</acronym>
<b>I Want this to be Bold</b>
<big>This is going to be Big</big>
<blockquote>Indent me and show I’m important</blockquote>
<center>Center Me Please</center>
<em>I like Being Italicized</em>
<i>I like being Italicized too</i>
<p>This is a big paragraph. Really, it is!</p>
<q>You can quote me on that</q>
<s>I’ve been struck</s>
<small>I feel so small</small>
<strong>I’m the strongest</strong>
<sub>I’m Subscript</sub>
<sup>I’m Superscript</sup>
<img src=”http://www.newthinktank.com/wp-content/uploads/2010/03/marketing-examples45_sm_sm.jpg” alt=”Merrill Lynch Ad” height=”415″ width=”300″/>
<dl>
<dt>Bicycle</dt>
<dd>- Has two Wheels</dd>
<dt>Car</dt>
<dd>- Has Four Wheels</dd>
</dl>
<ol>
<li>Car</li>
<li>Truck</li>
<li>Bicycle</li>
</ol>
<ul>
<li>Car</li>
<li>Truck</li>
<li>Bicycle</li>
</ul>
<a href=”http://www.newthinktank.com” target=”_blank”>The New Think Tank Website</a>
<a href=”http://www.newthinktank.com#Great Stuff”>Some Great Stuff</a>
<a href=”mailto:derekbanas@example.com?Subject=Hello%20again”>Send Mail</a>
<table summary=”Here is my sample table and a description of what it’s about”>
<caption>
Here are some things I did
</caption>
<tr>
<th>Sat</th>
<th>Sun</th>
<th>Mon</th>
</tr>
<tr>
<td>Played Ball</td>
<td>Watched Football</td>
<td>Worked</td>
</tr>
</table>
<form action=”http://www.newthinktank.com/mail2.php” method=”post”>
<b>Send Message to this Email</b><br />
<input type=”text” name=”email” size=40><br />
<p><b>Subject</b><br />
<input type=”text” name=”subject” size=40></p><br />
<p><b>Text Area</b><br />
<textarea cols=40 rows=10 name=”message”>Default Text in Text Area Box</textarea></p><br />
<p><b>Text Input</b><br />
<input type=”text” name=”textinput” /></p><br />
<p><b>Password Input</b><br />
<input type=”password” name=”password” /></p><br />
<p><b>Radio Input</b><br />
<input type=”radio” name=”radioinput” value=”Love Radio Buttons” />Love Radio Buttons
<input type=”radio” name=”radioinput” value=”Hate Radio Buttons” />Hate Radio Buttons</p><br />
<p><b>Checkbox Input</b><br />
<input type=”checkbox” name=”checkboxinput” value=”Love Checkboxs” />Love Checkboxs
<input type=”checkbox” name=”checkboxinput” value=”Hate Checkboxs” />Hate Checkboxs</p><br />
<p><b>Select Input</b><br />
<select name=”selectinput”>
<option value=”loveselect”>I love select buttons</option>
<option value=”hateselect”>I hate select buttons</option>
</select></p><br />
<p><b>Option Input</b><br />
<select name=”optioninput”>
<option value=”loveselect”>I love option buttons</option>
<option value=”hateselect”>I hate option buttons</option>
</select></p><br />
<p><input type=”submit” value=”Send”></p>
<input type=”hidden” name=”submitted” value=”TRUE” />
</form>
</body>
</html>
In todays Programming tutorial I show you how to grab information from a website using Regular Expressions in PHP. The information was particularly hard to get for the following reasons:
I did it though using Regular Expressions and I’ll show you how.
In this web design and programming video tutorial I’ll show you how to make a secure forgotten password script. These scripts are attacked more than mosts and normally are full of security flaws.
I specifically cover how to:
All of the code used will follow the video. If you have any questions or comments leave them below.
If you have a recommendation for a future tutorial leave that below as well 🙂
Code From the Video
In this part of my PHP video tutorial, I’ll walk you step-by-step through the process of:
In this video tutorial I create an extremely secure PHP Login Script. If you didn’t watch part 20 of this tutorial, you should check it out to find out how to use PHP Sessions and Cookies.
To make this login secure I added all of the following security features:
I add a few additional tricks along the way. All of the code follows the video. If you have any ideas on how I could improve this script pass them along.
Code From the Video
Confighamdb.php Script
<?php
// Define these as constants so that they can’t be changed
DEFINE (‘DBUSER’, ‘mysqladm’);
DEFINE (‘DBPW’, ‘password’);
DEFINE (‘DBHOST’, ‘localhost’);
DEFINE (‘DBNAME’, ‘hamdb’);
if ($dbc = mysql_connect (DBHOST, DBUSER, DBPW)) {
if (!mysql_select_db (DBNAME)) { // If it can’t select the database.
// Handle the error.
trigger_error(“Could not select the database!<br />MySQL Error: ” . mysql_error());
exit();
} // End of mysql_select_db IF.
} else {
// Print a message to the user, and kill the script.
trigger_error(“Could not connect to MySQL!<br />MySQL Error: ” . mysql_error());
exit();
}
// A function that strips harmful data.
function escape_data ($data) {
// Check for mysql_real_escape_string() support.
// This function escapes characters that could be used for sql injection
if (function_exists(‘mysql_real_escape_string’)) {
global $dbc; // Need the connection.
$data = mysql_real_escape_string (trim($data), $dbc);
$data = strip_tags($data);
} else {
$data = mysql_escape_string (trim($data));
$data = strip_tags($data);
}
// Return the escaped value.
return $data;
} // End of function.
?>
In part 6 of my PHP Security video tutorial I cover a ton of ways hackers attack and how to hold them off. If you missed previous tutorials please watch them first. Here is the first one PHP Security.
In this specific tutorial I will cover:
A few months ago a friend asked me to take a look at their website because they had been receiving an immense amount of spam. Worse yet they were also receiving threats from others to stop sending spam to them. I immediately knew they were being targeted by code injection, but as I dug around I found more danger than I was expecting.
It seems that their grandchild (No doubt a future Mark Zuckerberg) had created the shopping cart for them. The shopping cart application had little to know security. In seconds I was able to dump all of their customers credit card information on to the screen before their frightened eyes.
In this video / article on PHP Security I will show you how to create more secure new user registration scripts. I’ll show you how to:
In this part of the Web Design and Programming Tutorial I will review how to use 3 global storage arrays available in PHP. Specifically in this video I’ll show you how to use:
I thought I’d have a bit of fun today and talk about a video game for once. Malcolm wrote in and asked me for a strategy to beat the Mud Slide level in Fieldrunners.
If you are unaware Fieldrunners is an iPhone / iPad game that many think to be the best game available. If you are one of my regular readers don’t worry. This website is not going to become a video game site anytime soon 🙂
While I’m not a great video game player I decided to give it a shot. It did take a few tries, but I finally beat the Mud Slide level. There is a screen shot that shows my layout at level 100. If you are having trouble seeing it, just click to enlarge it.
After I present the final screen shot, I’ll then go over how I laid this strategy out.
In part 3 of my PHP Security video tutorial I go over the most vulnerable ways hackers attack websites. I focus a lot on authentication and client side attacks. Specifically I go over the tools and techniques used to:
In this PHP Security Video tutorial I continue to show you how hackers break into web applications and how to better secure your site. If you missed part 1 of this tutorial definitely watch it first here PHP Security.
Specifically in this tutorial I will show you how SQL Injection works. Don’t do this on any site that you don’t own! I then go over all of the following:
All of the code follows the video. If you have any other questions or comments leave them below. Feel free to use the code however you like, but I’m not stating that it is 100% secure. The fact is all code can eventually be cracked. The goal is to make the code so complicated that hackers just give up and move on to an easier target.
Code From the Video
Register.PHP Code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Registration</title>
</head>
<body>
<div id=”main”>
<?php
require_once(“./includes/confighamdb.php”);
if (isset($_POST[‘submitted’])) { // Handle the form.
if (preg_match (‘%^[A-Za-z\.\’ \-]{2,15}$%’, stripslashes(trim($_POST[‘first_name’])))) {
$fn = escape_data($_POST[‘first_name’]);
} else {
$fn = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter your first name!</font></p>’;
}
// Check for a last name.
if (preg_match (‘%^[A-Za-z\.\’ \-]{2,30}$%’, stripslashes(trim($_POST[‘last_name’])))) {
$ln = escape_data($_POST[‘last_name’]);
} else {
$ln = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter your last name!</font></p>’;
}
// Check for an email address.
if (preg_match (‘%^[A-Za-z0-9._\%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$%’, stripslashes(trim($_POST[’email’])))) {
$e = escape_data($_POST[’email’]);
} else {
$e = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter a valid email address!</font></p>’;
}
// Check for a street.
if (preg_match (‘%^[A-Za-z0-9\.\’ \-]{5,30}$%’, stripslashes(trim($_POST[‘street’])))) {
$s = escape_data($_POST[‘street’]);
} else {
$s = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter your street address!</font></p>’;
}
// Check for a city.
if (preg_match (‘%^[A-Za-z\.\’ \-]{2,25}$%’, stripslashes(trim($_POST[‘city’])))) {
$c = escape_data($_POST[‘city’]);
} else {
$c = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter a valid city!</font></p>’;
}
// Check for a state.
if (preg_match (‘%^(A[KLRZ]|C[AOT]|D[CE]|FL|GA|HI|I[ADLN]|K[SY]|LA|M[ADEINOST]|N[CDEHJMVY]|O[HKR]|PA|RI|S[CD]|T[NX]|UT|V[AT]|W[AIVY])$%’, stripslashes(trim($_POST[‘state’])))) {
$st = escape_data($_POST[‘state’]);
} else {
$st = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter a valid state!</font></p>’;
}
// Check for a zip code.
if (preg_match (‘%^[0-9]{5}$%’, stripslashes(trim($_POST[‘zip’])))) {
$z = escape_data($_POST[‘zip’]);
} else {
$z = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter a valid 5 digit zip code!</font></p>’;
}
// Check for a phone number.
if (preg_match (‘%^([0-9]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})$%’, stripslashes(trim($_POST[‘work_phone’])))) {
$ph = escape_data($_POST[‘work_phone’]);
} else {
$ph = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter a valid phone number!</font></p>’;
}
// Check for a password and match against the confirmed password.
if (preg_match (‘%\A(?=[-_a-zA-Z0-9]*?[A-Z])(?=[-_a-zA-Z0-9]*?[a-z])(?=[-_a-zA-Z0-9]*?[0-9])\S{6,}\z%’, stripslashes(trim($_POST[‘password1’])))) {
if ($_POST[‘password1’] == $_POST[‘password2’]) {
$p = escape_data($_POST[‘password1’]);
} else {
$p = FALSE;
echo ‘<p><font color=”red” size=”+1″>Your password did not match the confirmed password!</font></p>’;
}
} else {
$p = FALSE;
echo ‘<p><font color=”red” size=”+1″>Please enter a valid password!</font></p>’;
}
if ($fn && $ln && $e && $p && $fn && $s && $c && $st && $z && $ph) {
$query = “SELECT user_id FROM users WHERE email=’$e'”;
$result = mysql_query($query) or trigger_error(“Sorry email is taken”);
if(mysql_num_rows($result) == 0) {
$a = md5(uniqid(rand(), true));
$query = “INSERT INTO users(email, pass, first_name, last_name, active, registration_date, street, city, state, zip, work_phone) VALUES (‘$e’, SHA(‘$p’), ‘$fn’, ‘$ln’, ‘$a’, NOW(), ‘$s’, ‘$c’, ‘$st’, ‘$z’, ‘$ph’)”;
$result = mysql_query($query) or trigger_error(“Sorry an error happened”);
if(mysql_affected_rows() == 1) {
$body = “Thanks for registering. Activate account by clicking this link: <br />”;
$body .= “http://localhost/activate.php?x=” . mysql_insert_id() . “&y=$a”;
mail($e, ‘Registration Confirmation’, ‘$body’, ‘From: derekbanas@verizon.net’);
echo ‘<br /><br /><h1>Thank you for registering! A confirmation email has been sent to your address. Please click on the link in that email in order to activate your account.</h1>’;
exit();
} else {
echo ‘<p><font color=”red” size=”+1″>You could not be registered due to a system error. We apologize for any inconvenience.</font></p>’;
}
} else {
echo ‘<p><font color=”red” size=”+1″>That email address has already been registered. If you have forgotten your password, use the link to have your password sent to you.</font></p>’;
}
mysql_close();
}
?>
<h1>Register</h1>
<form action=”register.php” method=”post”>
<fieldset>
<p><b>First Name:</b> <input type=”text” name=”first_name” size=”15″ maxlength=”15″ value=”<?php if (isset($_POST[‘first_name’])) echo $_POST[‘first_name’]; ?>” /></p>
<p><b>Last Name:</b> <input type=”text” name=”last_name” size=”30″ maxlength=”30″ value=”<?php if (isset($_POST[‘last_name’])) echo $_POST[‘last_name’]; ?>” /></p>
<p><b>Email Address:</b> <input type=”text” name=”email” size=”40″ maxlength=”40″ value=”<?php if (isset($_POST[’email’])) echo $_POST[’email’]; ?>” /> </p>
<p><b>Street:</b> <input type=”text” name=”street” size=”40″ maxlength=”40″ value=”<?php if (isset($_POST[‘street’])) echo $_POST[‘street’]; ?>” /> </p>
<p><b>City:</b> <input type=”text” name=”city” size=”25″ maxlength=”25″ value=”<?php if (isset($_POST[‘city’])) echo $_POST[‘city’]; ?>” /> </p>
<p><b>State:</b> <input type=”text” name=”state” size=”2″ maxlength=”2″ value=”<?php if (isset($_POST[‘state’])) echo $_POST[‘state’]; ?>” /> <small>Use only the two letter initials</small></p>
<p><b>Zip Code:</b> <input type=”text” name=”zip” size=”5″ maxlength=”5″ value=”<?php if (isset($_POST[‘zip’])) echo $_POST[‘zip’]; ?>” /> </p>
<p><b>Phone:</b> <input type=”text” name=”work_phone” size=”20″ maxlength=”20″ value=”<?php if (isset($_POST[‘work_phone’])) echo $_POST[‘work_phone’]; ?>” /> </p>
<p><b>Password:</b> <input type=”password” name=”password1″ size=”20″ maxlength=”20″ /> <small>Use only letters and numbers. Must be between 4 and 20 characters long.</small></p>
<p><b>Confirm Password:</b> <input type=”password” name=”password2″ size=”20″ maxlength=”20″ /></p>
</fieldset>
<div align=”center”><input type=”submit” name=”submit” value=”Register” /></div>
<input type=”hidden” name=”submitted” value=”TRUE” />
</form>
MySQL Connect Code
<?php
// Define these as constants so that they can’t be changed
DEFINE (‘DBUSER’, ‘mysqladm’);
DEFINE (‘DBPW’, ‘password’);
DEFINE (‘DBHOST’, ‘localhost’);
DEFINE (‘DBNAME’, ‘hamdb’);
if ($dbc = mysql_connect (DBHOST, DBUSER, DBPW)) {
if (!mysql_select_db (DBNAME)) { // If it can’t select the database.
// Handle the error.
trigger_error(“Could not select the database!<br />MySQL Error: ” . mysql_error());
exit();
} // End of mysql_select_db IF.
} else {
// Print a message to the user, and kill the script.
trigger_error(“Could not connect to MySQL!<br />MySQL Error: ” . mysql_error());
exit();
}
// A function that strips harmful data.
function escape_data ($data) {
// Check for mysql_real_escape_string() support.
// This function escapes characters that could be used for sql injection
if (function_exists(‘mysql_real_escape_string’)) {
global $dbc; // Need the connection.
$data = mysql_real_escape_string (trim($data), $dbc);
$data = strip_tags($data);
} else {
$data = mysql_escape_string (trim($data));
$data = strip_tags($data);
}
// Return the escaped value.
return $data;
} // End of function.
?>
This tutorial is a continuation of my Web Design and Programming Tutorial, but if you’re are well versed in PHP you should understand everything I present here.
I specifically will show you how to: