So, instead of my yearly post I’ve done the past two years I’m going to announce something very exciting to start of 2015. Last week Apple approved my first app to the app store. Today is the day that I am going to make it live!
This is very exciting for me and even though the app is not 100% where I want it to be I will be adding in features throughout the year. The app is called Carbs to Go! and is a simple app to count your carb intake.
Carbs to Go! will be free to download and contain no ads. The only thing I ask for is donation to allow me to further develop the app and add all the features that I want to get in there.
The first new feature that will be added within the first part of the year will be the ability to search, yes search, for food! This one of the features that I have not yet completed. I wanted to get the app out the first of this year so I would hit my deadline. Even though this is a large piece that the app needs to have I submitted anyways.
Recently I have moved to a new affordable hosting solution for my cloud based servers. I wanted to pass on the savings to anyone looking. Check them out here (Digital Ocean), or look them up on Google! Happy Hosting!
1ST VERSE:
Oh, no. Don’t pretend I didn’t see
You roll your eyes at my gaming tee
Don’t know if you can read or if you’ve seen
The sweet piece in this week’s Wired magazine
The latest trend has hit its peak
They say that geek’s becomin’ chic
So now you’re out of style as you can be
And I’m in vogue, so you can bite me
To all the ass-hat jocks who beat me up in school
Now I’m the one that’s cool
I’m the one that’s cool
To all the prom queen bitches thinking they still rule
Now I’m the one that’s cool
I’m the one that’s cool
2ND VERSE:
Try to cop my style but I’m the real thing
While you played sports, I played Magic the Gathering
Never earned your part in nerd society
My Aquaman pajamas prove my pedigree
Watched my Next Gen every night
Wore a headgear to fix my overbite
Your black-rimmed glasses are prescription free, where as me
I literally can’t see my hand in front of my face
To all the asshat jocks who beat me up in school
Now I’m the one that’s cool
I’m the one that’s cool
To all the prom queen bitches thinking they still rule
Now I’m the one that’s cool
I’m the one that’s cool
And to my eighth-grade crush who pushed me in the pool
Now I’m the one that’s cool
I’m the one that’s cool
You may be tan and fit and rich but you’re a tool
And I’m the one that’s cool
I’m the one that’s cool
3RD VERSE:
Role reversal must be a total drag
But there’s no point, no point for me to humblebrag
I appreciate you for being cruel
I’m burning bright thanks to your rejection fuel
Have my in-jokes you won’t get
Like Honey Badger, Troll Face and Nyan Cat
So now your ballin’ parties seem so dumb
You can Evite me, and I’ll say yes, but I won’t really come
Got my comics
Got my games
All the things you thought were lame
Got my cosplay
Fanfic too
Got you pegged
STFU You
CHORUS
Outro
And I’m the one thats cool, I’m the one that… I’m the one thats cool
And I’m the one thats cool, I’m the one that… I’m the one thats cool
And I’m the one thats cool, I’m the one that… I’m the one thats cool
And I’m the one thats cool, I’m the one that… I’m the one thats cool
Hello. In this tutorial post I am going to show you how I made my simplified version of Craps. The purpose of this tutorial is to show the basics of using the HTML5 canvas tag and drawing simple 2D shapes. You can see the game in action on my website.
To start off lets lay out the simple rules so we know what we are trying to accomplish.
The player rolls two dice. The sum of the dice is the only thing that matters. (i.e. 1 and 3 is the same as 2 and 2)
Initial Roll
On a roll of 7 or 11 the player wins.
On a roll of 2, 3, or 12 the player looses.
Any other roll is stored as the players ‘Point’ and a Follow Up Roll is played.
Follow Up Roll
On a roll of 7 the player looses
On a roll of the players ‘Point’ the player wins.
Any other roll is discarded and play continues with another Follow Up Roll.
This is a very simplified version that only takes into account one player. If you want to expand this simple game with the full rules you can check out the wikipedia article for more info.
With the rules in place lets start digging into the code. On the first part we will go over the HTML and CSS that I use. Lastly I’ll go over the Javascript needed to implement the game logic and display the appropriate text when needed.
HTML/CSS
The HTML is pretty basic. We have a series of nested divs to control layout. Here is the full HTML:
This is the canvas tag. This is where we will be drawing out the dice when the player makes a roll. You can use the canvas tag to draw anything you need be it simple 2D graphics, 3D scenes, or just about anything you can think of. We will be covering how to draw basic 2D shapes.
I do not use anything out of the ordinary for the CSS so I won’t go over that in detail but for completeness here is the CSS code I use.
Before I move onto the Javascript and how to actually use the canvas element. You will notice one class in the HTML not listed here. It is the clearfix class attached to the main game wrapper div. This class is used to fix floated elements with no extra markup. You can read about it and obtain the CSS here.
Javascript
Now to go over the Javascript used. Before we get to the code lets go over the canvas tag and how to obtain it’s 2D context so you can start drawing.
Getting the canvas context
To get the canvas context you use the getContext method. We need to pass which context we want to use. to obtain the 2D context you pass the function the string ‘2d’. You call this method after obtaining the DOM element. Their are a couple ways of doing this depending on if you are using a javascript library or not. I personally use jQuery but you can use plain old Javascript as well. I will show both methods below.
// Using jQuery
ctx = $('#craps_game_demo')[0].getContext('2d');
// Using plain jane Javascript
ctx = document.getElementByID('craps_game_demo').getContext('2d');
While using jQuery notice the [0] after the selector. This is needed to get the context. If it is missing you will receive a Javascript error saying getContext is undefined. The canvas coordinate system starts with 0, 0, in the top left corner and counts up as you move right and down. Here is an illustration:
HTML5 Canvas Coordinate System
Now that we know how to obtain the canvas context I’ll go through the rest of the Javascript used in the game. I’ll post it piece by piece and go over each section in turn. The first part of the file is defining all the basic variables used.
var cwidth = 275; // Canvas width
var cheight = 150; // Canvas height
var dicex = 25; // Position of dice (x)
var dicey = 25; // Position of dice (y)
var dicew = 100; // Dice width
var diceh = 100; // Dice height
var dotrad = 6; // Radius of dots on dice face
var ctx; // Our context object
var roll1 = 0; // Die 1 roll
var roll2 = 0; // Die 2 roll
var rolltotal = 0; // Total roll
var point = 0; // Current 'Point' value
var round = 'initial'; // The round we are on. Either 'initial' or 'followup'
var total_loot = 100; // Current 'loot' total
var current_bet = 0; // Current bet amount
At the top of our javascript file we define all the variables used. The first two (cwidth, cheight) is the width and height of our canvas element. We use this to clear the canvas of all drawing when the game is reset. The next 5 variables define the dice. We start with dicex and dicey, this is the position on the canvas we will draw each die starting with it’s top left corner. Next we have dicew, and diceh. This defines the width and height of each die. Our dice will each be 100px wide and 100px high. Lastly we have dotrad. This is the radius of each dot on the dice.
Our next variable is ctx. This holds our canvas context object. We use this object to draw the dice onto the canvas. We will learn how to use it in more detail as we go over each function used in the game.
The last 7 variables holds various information needed to process each roll. We start with roll1, roll2, and rolltotal. Each of these store the current die roll and the total of the two. Next is point. This will store the current rounds ‘Point’ value. Then comes round. Here is a simple string to distinguish what round we are on. I could have used a boolean variable here which may be a better choice in the end. It’s not hard to change the code to use a boolean instead of a string so feel free to make the necessary adjustments. Next we store the players ‘total loot’ in a variable called total_loot. This will increase or decrease as the game goes by depending on if the player won or lost a round. The last variable needed is current_bet. This will keep track of the players current bet. The player wil have a chance to change this before each round starts.
After this I have a basic initialize function called when the page is loaded.
function crapsInit() {
ctx = $('#craps_game_demo')[0].getContext('2d');
crapsNewGame(); // Initialize a new game
// Reset some of the variables to the page open state
$('#craps_roll_button').hide();
$('#craps_setbet_button').hide();
$('#craps_newGame_button').show();
$('#craps_round_stage').html('');
}
This function gets our context using the jQuery method. It will next call crapsNewGame() (discussed next). Lastly is resets the buttons so only the ‘New Game’ button is displayed and then clears the stage value. (note: You do not have to use jQuery. If you have a preferred library you can easily replace the jQuery calls with the appropriate library calls.)
The next function in our file is crapsNewGame(). The purpose of this function is to set all the default values needed to start a new game of Craps. Below is the complete function:
function crapsNewGame() {
// Reset the variables
total_loot = 100;
current_bet = 0;
round = 'initial';
point = 0;
roll1 = 0;
roll2 = 0;
rolltotal = 0;
// Update all the HTML elements so they will
// be in their default state.
$('#craps_bet_input').val('10');
$('#craps_bet_span').html('???');
$('#craps_loot_span').html(total_loot);
$('#craps_point').html(' ');
$('#craps_current_roll').html(' ');
$('#craps_round_stage').html('Initial Throw');
$('#craps_winlose').hide();
$('#craps_newGame_button').hide();
$('#craps_roll_button').hide();
$('#craps_setbet_button').show();
// Clear the canvas of any previous drawing
ctx.clearRect(0,0,cwidth,cheight);
}
Here we reset all the Javascript variables and HTML layout elements to their default states. The most interesting part of this function is the call to clearRect() at the end of the function. This function is used to clear a rectangle shaped space on a canvas. It will remove any drawing done within that area. The function takes four arguments, the top (x) and left (y) and then the total width and height of the rectangle to clear. You pass the arguments in this order: clearRect(x, y, width, height). In this function we want to clear the entire canvas of any drawing so we can have a clean slate to draw on so we will be passing the following to the function: 0, 0, cwidth, cheight.
The next function used is crapsSetBet(). This function is called when the player sets their bet. Here is the complete function:
function crapsSetBet() {
round = 'initial';
current_bet = $('#craps_bet_input').val();
if (current_bet > total_loot) {
alert('You cannot bet less then your total loot. Please enter a different bet.');
return;
}
$('#craps_bet_span').html(current_bet);
$('#craps_point').html(' ');
$('#craps_current_roll').html(' ');
$('#craps_round_stage').html('Initial Throw');
$('#craps_winlose').hide();
$('#craps_newGame_button').hide();
$('#craps_setbet_button').hide();
$('#craps_roll_button').show();
ctx.clearRect(0,0,cwidth,cheight);
}
We start off in this function by setting the round to the ‘initial’ string so we know we are going to be making the Initial Roll. Next we get the value the player inputs for their bet. We then check to make sure the bet is less then the players total_loot. If the player is trying to bet more then what they have available we give them a nice Javascript alert letting them know they cannot bet more then their available loot then return from the function early so the player can enter a new bet value. After this we set the HTML Elements to the state we need them in to have the player make the Initial Roll. Lastly you will notice we make another call to clearRect(). This is to make sure we clear the canvas of any drawing that might have taken place before we make the initial roll.
Our next function crapsRollDice() contains the core logic for the game. Below is the complete function:
function crapsRollDice() {
// reset the dice x position
dicex = 25;
roll1 = 1 + Math.floor(Math.random() * 6);
roll2 = 1 + Math.floor(Math.random() * 6);
rolltotal = igz_roll1 + igz_roll2;
if (round == 'initial') {
switch (rolltotal) {
// WIN
case 7:
case 11:
$('#craps_winlose').html('YOU WIN!').show();
setScore(true);
break;
// LOSE
case 2:
case 3:
case 12:
$('#craps_winlose').html('YOU LOSE!').show();
setScore(false);
break;
default:
point = igz_rolltotal;
$('#craps_point').html(point);
$('#craps_round_stage').html('Follow up Throw');
round = 'followup';
}
} else {
// LOSE
if (rolltotal == 7) {
$('#craps_winlose').html('YOU LOSE!').show();
setScore(false);
}
// WIN
else if (rolltotal == point) {
$('#craps_winlose').html('YOU WIN!').show();
setScore(true);
}
}
if (total_loot <= 0) {
total_loot = 0;
$('#craps_roll_button').hide();
$('#craps_setbet_button').hide();
$('#craps_newGame_button').show();
}
$('#craps_current_roll').html(rolltotal);
// Display the dice
crapsDrawface(roll1); // Die 1
dicex = dicew + 50; // Move over the width plus 50
crapsDrawface(roll2); // Die 2
}
We start off this function by setting the dicex variable to it’s default of 25. This will make sure when when actually draw the dice the first die will be drawn in the correct position. Next we get two random numbers and assign them to roll1, and roll2.
We use the Javascript Math functions to do this. Here is the call we make: 1 + Math.floor(Math.random() * 6). Lets break this line down. The Math.random() function will return a value between 0.0 and 1.0. We then multiply this number by 6. For example lets say the function returns 0.4. The final value of the inner expression, Math.random() * 6, will be 2.4. We then use the Math.floor() function to strip away the decimal part of the number leaving us with 2. Lastly to get our random number between 1 and 6 we add 1 to the returned value of Math.floor(Math.random() * 6) giving us a final value of 3.
We repeat the above to get a random value for roll2. Next we add the two rolls together to get the value we will be using to check against for the rest of the function. You may wonder why I am getting two random numbers between 1 and 6 and not one random number between 2 and 12. I could have done this but I would have to split the number somehow in order to display the values of each individual die when we go to draw the dice. This way will make it much easier to call the drawing function to draw each individual die.
The next part of the function we determine what round we are in. If it is the Initial Roll we will be making different checks then if it is the Follow Up Roll. In the Initial Roll part of the if statement we use a switch() to see what the total roll is. If it is a 7 or 11 we display the message YOU WIN! then call the setScore() function to add the players bet to their total loot. If the total roll is either a 2, 3, or 12 we display the message YOU LOSE! then call setScore() to subtract the players bet from their total loot. If any other roll is found we set the point variable to the value of rolltotal and display the number in the Point box. We also update the round text to Follow Up Roll and update the round variable accordingly.
If we are already on the Follow Up Roll we check to see if the rolltotal is equal to 7. If it is we display the YOU LOSE! text and call setScore() to subtract the players bet from their total loot. If this isn’t true we check to see if the rolltotal equals the players point value. If it does we display YOU WIN! and call setScore() to update the score appropriately. If any other number is rolled we ignore it and move on.
Next we check to see if the players total_loot is less then or equal to 0. If it is we set the players total_loot to 0 then update the HTML Elements so the New Game button is showing. We then display the current totalroll in the appropriate spot.
After this we call the crapsDrawFace() function to draw the result of roll1 onto the canvas. Next we move dicex over the width of the die plus 50. Lastly we call crapsDrawFace() again to draw the results of roll2. crapsDrawFace() will take care of drawing the dice. I’ll be going over this function and it’s accompanying functions in a minute.
Before we get to the meat of the drawing code we have one more simple function to go over. The setScore() function. This function takes one argument, a boolean value. If we won the round and want to add the bet to the players total lot we pass true else we will pass false to subtract the bet from the players total loot. Here is the full function:
This function is simple. We check to see if the player has won the round. If so we add the value of current_bet to the players total_loot and update the HTML Elements. I call parseInt() to make sure I am adding integer numbers and not strings as the javascript + operator is used for both addition and concatenation of strings. If you don’t use parseInt() you may end up with a number like 10010 instead of 110 when adding the players bet and total loot together.
Now we get to the fun part, crapsDrawFace(). This function will draw a die onto the canvas at dicex and dicey. This function will call other functions depending on the number we need to draw. These function are crapsDraw1(), crapsDraw2() and crapsDraw2mid(). I’ll go ever each in turn.
function crapsDrawface(n) {
ctx.lineWidth = 5;
ctx.clearRect(dicex,dicey,dicew,diceh);
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(dicex,dicey,dicew,diceh);
ctx.fillStyle = "#000000";
ctx.strokeRect(dicex,dicey,dicew,diceh);
ctx.fillStyle = "#009966";
switch (n) {
case 1:
crapsDraw1();
break;
case 2:
crapsDraw2();
break;
case 3:
crapsDraw2();
crapsDraw1();
break;
case 4:
crapsDraw2();
crapsDraw2(true);
break;
case 5:
crapsDraw2();
crapsDraw2(true);
crapsDraw1();
break;
case 6:
crapsDraw2();
crapsDraw2(true);
crapsDraw2mid();
break;
}
}
The first thing we do inside this function is set the line width we will be drawing with. We do this by setting the lineWidth data member of our ctx variable. This is the complete call: ctx.lineWidth = 5;. This is setting the width to 5px. The next function should look familiar. We used it in two previous functions. It’s the clearRect() function. The difference here is that w are clearing only the space that the dice is occupying. Next will set the fill color we want to use, in this instance #FFFFFF or white. We do this be setting the fillStyle data member of the ctx object. The next function is new, fillRect(). This function is identical to clearRect in all ways except one. the fillRect() function will fill the rectangle provided with the setting of fillStyle. This gives our dice a nice white background (if your game is on a white background you can skip this). Next we change the fillStyle so it is #000000 or black. We want this to be the color of the border for our dice. We create this by calling the function strokeRect(). Once again this takes the exact same parameters as clearRect() and fillRect(). The only difference here is that the function will stroke (put a border) around the outside of the rectangle with a width of lineWidth and the color stored in fillStyle. Lastly we set the fillStyle one last time to a nice green color, #009966. This color wil be used for the dots on the face of the dice.
The function then uses a switch() statement to determine how to draw the dots. It will call one of the crapsDraw?() functions or a combination of them to accomplish this. All of these functions are almost identical besides how they calculate the dot position. I will show all three functions then go over the most interesting parts.
/*
* This function draws a dot in the center of the die.
*/
function crapsDraw1() {
var dot_x;
var dot_y;
ctx.beginPath();
dot_x = dicex + .5 * dicew;
dot_y = dicey + .5 * diceh;
ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );
ctx.closePath();
ctx.fill();
}
/*
* This function draws a dot in two oposit corners (lower right and upper left).
* If reverse is true it draws the dots in the oposite corners.
*/
function crapsDraw2(reverse) {
reverse = typeof(reverse) != 'undefined' ? reverse : false;
var dot_x;
var dot_y;
ctx.beginPath();
dot_x = dicex + 3 * dotrad;
dot_y = reverse ? dicey + diceh - 3 * dotrad : dicey + 3 * dotrad;
ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );
dot_x = dicex + dicew - 3 * dotrad;
dot_y = reverse ? dicey + 3 * dotrad : dicey + diceh - 3 * dotrad;
ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );
ctx.closePath();
ctx.fill();
}
/*
* This function draws two dots on either side (left and right) centered vertically
* on the y axis. It is used to create the '6'.
*/
function crapsDraw2mid() {
var dot_x;
var dot_y;
ctx.beginPath();
dot_x = dicex + 3 * dotrad;
dot_y = dicey + .5 * diceh;
ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );
dot_x = dicex + dicew - 3 * dotrad;
ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );
ctx.closePath();
ctx.fill();
}
There are four functions that we are concerned with that we need to look at, beginPath(), arc(), closePath(), and finally fill(). I will go over arc() last as that is the more interesting function of the bunch (Don’t forget to add ctx. in front of each function call). To tell the context we want to start drawing a path we use the beginPath() function: We tell the context we are done when we call closePath(). We then can either use fill() or stroke() to either fill the path or stroke is accordingly. I do not use the stroke() function in this game but the work the same as fillRect() and strokeRect().
Now for the real work. We use the arc() function to create our path. arc() is used as follows: arc(cx, cy, radius, start_angle, end_angle, direction). cx is the center horizontal coordinate and cy is the vertical coordinate of the circle. radius is the radius we want to use. Now the arc method uses radians for the angle arguments. In a circle their are 2 * PI radians (a little more then 6). Luckily Javascripts Math library has a PI function which returns PI with as many decibles as needed. So if we want to make a half circle we start at 0 and end at Math.PI. For a complete circle we start at 0 and end at Math.PI * 2. The last argument is the direction. This is either a true or false value. Setting it to true will draw counterclockwise and false is clockwise. This is more important when drawing arcs that are not whole circles. Since we are drawing a whole circle we can use either value.
Now that we know about the arc() function will pass it the calculated dot_x and dot_y variables along with the dotrad defined at the top of the file. The last three variables deals with the angles and since we are making a complete circle we pass 0, Math.PI * 2, and lastly the Javascript true value. The complete call is: ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true).
Finally at the end of the file we add the crapsInit() function to the document ready queue. I use jQuery but you can assign it in any manner that will work if you do not use the jQuery library.
$(document).ready(function () {
crapsInit();
});
Thats about it for the code. When the page is initially loaded it will call the crapsInit() function. This will set the stage and display the New Game button. Once the player clicks this it will call the crapsNewGame() function and prompt the user to set the bet for the round. Once the player enters their bet and clicks the button the crapsSetButton() function is fired off. Next the player clicks the Roll Dice button to call crapsRollDice() until they either win or loose the round. At this point it prompts the player to enter another bet and play continues till either the player stops or looses all his loot.
I hope this tutorial on how to build my simplified version of Craps was useful. The main parts I wanted to make sure to hit was how to draw basic 2d shapes on a canvas. You can do so much more with the canvas then I did here but hopefully this gave any one just jumping into HTML 5 some useful info to help them along.
I plan on doing more tutorials based around more complex games that will take full advantage of the canvas. I will also do some 3D based ones as well. If you liked this let me know. If you found any mistakes or know how I can do something better don’t hesitate to submit a comment.
UPDATE:
Here are some screen shots of the finished game ( should have added this a while ago 🙂 ):
A screenshot of me winning a round!This is a screenshot of me losing a round!
Welcome back. We’re in the midst of the holidays and I hope ever one is having a good time. I know It has been eventful so far for me. Anywho, this week I’ll do a quick overview of the str_replace() function. This is another function I use often in my projects. It is useful when you need to quickly replace parts of a string. It doesn’t take regular expressions so if you don’t need them then this is the function for you as it is quicker and less processor intensive. Please note however that it is case-sensitive. If you need to replace with case-insensitive strings use str_ireplace(). This function acts identical to str_replace except that it is case-insensitive.
Moving forward. Here is the official description taken from php.net for the str_replace() function:
Replace all occurrences of the search string with the replacement string
The function takes three required parameters and a fourth optional parameter. They are as follows:
The first parameter, $search, is the values you want to replace. This can be a single string or an array of multiple strings.
We next have $replace. This is the values you want to replace the $search values with. If $search is an array and $replace is a string then it will replace all occurrences in $search with the same value. If $replace is an array with a smaller size then $search then all remaining $search terms will be replaced with an empty string.
Lastly is $subject. This is the string or array that will be searched through. If it is an array each element will have the search and replace action performed. str_replace() will also return an array if the $subject is an array.
$count is the only optional variable. If a variable is passed it will be filled with the number of matches and replacements that have occurred.
Now that we have defined the function and gone over the parameters here are some examples:
// replace some values in a simple string
$string = "The house on the left is made up of wooden boards";
$modified = str_replace("left","right",$string);
echo $modified; // Outputs: The house on the right is made up of wooden boards
$modified = str_replace(array("left","wooden"),"green",$string);
echo $modified; // Outputs: The house on the green is made up of green boards
$modified = str_replace(array("left","wooden","boards"),array("green","stone"),$string);
echo $modified; // Outputs: The house on the green is made up of stone
$modified = str_replace(array("left","wooden boards"),array("right","brick"),$string);
echo $modified; // Outputs: The house on the right is made up of brick
The above examples are pretty simple but I think they show the basic use of the str_replace() function. Now there are a couple things to watch out for when using this function. You need to take care with the order you are replacing items with. The function will replace all items in the first index of the $search array, then continue to the next index and so on and so forth. This may give unexpected results. Here is an examples of this.
$string = "a simple apple tree";
$modified = str_replace(array("a","e"),$array("e","X"),$string);
echo $modified; // Outputs: X simplX XpplX trXX
In this example it replaces all occurrences of “a” with “e“. It then replaces all occurrences of “e” (including the ones that were placed when “a” was replaced) with “X“. I don’t run into this that often but it is something you will want to keep in mind.
Well this is it for this week. I hope as always that is was helpful to someone out there 🙂 Next week I’ll deal with strstr(). As always, thanks for reading.
Hello and welcome back for my next installment of PHP Functions 101. This week I’ll be discussing the array_push() function. This is another simple function that I use often when dealing with arrays. Here is the definition from php.net:
Push one or more elements onto the end of array
This is a simple function. As the definition states above it simply pushes an element onto an existing array. You can push any kind of element; an object, simple variables, even other arrays. The function takes at least two parameters. The first being the array we are adding (pushing) the elements onto and the remaining variables are the elements to be added (pushed) onto the array. You can push as many elements on as you want.
Here are a couple examples. I’ll do a simple one then a more complex example.
// The big 'ol array that stores everything
$bigOlArray = array();
// Simple variables
$someString = "This is a simple string";
$someInteger = 42;
$configurationArray = array(
"id" => "x302",
"power" => "Asgard",
"weapons" => true,
"shields" => true,
"shieldLevels" => 100
);
$strikeFirst = false;
// Push them all into the same array
array_push($bigOlArray, $someString, $someInteger, $configurationArray, $strikeFirst);
With this example we simple made the main array, $bigOlArray, and then created a bunch of different variables then pushed them all onto the one array. This next example will hopefully be a more practical use of the funciton. I will use it to read in a file and take all the configuration info from the file and combine it into an array using the array_push() function.
/* Open the file we want to read in */
$fh = fopen("/path/to/file/the_file",'r');
if (!$fh) {
// Put error checking code here
exit();
} else {
$elementData = array();
$temp = array();
$newField = false;
$value = "";
// Loop through the file
while (!feof($fh) {
$line = fgets($fh);
if (strstr($line,'[END FIELD]')) {
if ($newField) {
/* Put the temp config array into the element array */
array_push($elementData,$temp);
}
$newField = false;
$temp = array();
} else if (strstr($line,'[FIELD]')) {
$newField = true;
}
if ($newField) {
/* Add the configuration line to the temp array */
$ft = explode(" = ",$line);
if (isset($ft[1])) {
if (trim($ft[1]) == "true") {
$value = true;
} else if (trim($ft[1]) == 'false') {
$value = false;
} else {
$value = trim($ft[1]);
}
$temp[$ft[0]] = $value;
}
}
}
}
/* Close the file */
fclose($fh);
What this script does is read in a file, then it searches for field definitions. Once it finds one it reads each line of the field definition into a temp array. Once it reaches the end it pushes the entire array onto the end of the main elements array. The script keeps this up till it reaches the end of the file where it then closes the connection to the file. PHP does have a function called parse_ini_file() which will do basically the same thing. It reads a configuration file and returns it as an associative array. I’m hoping though that the example above gave some insight in how you can use the function and the power it can have.
Well I hope this has brought something to a few readers out their. I haven’t decided yet what I will do for next week. Maybe It’ll probrably be one of the various string funcitons like strstr() or str_replace() or something similar. As always if you have any requests let me know 🙂
Tonight I’m going to put down something I learned just yesterday. How to easily migrate MySQL Databases across servers via the command line. Now I’m a beginner Linux Admin as my focus is on PHP Development but ever since I got myself a dedicated box at Rackspace I’ve had to learn a few tricks. Over the past month I have learned a host of them due to migrating from one Rackspace box to another. My biggest challenge was moving some of my MySQL Databases. A couple of them were quite large and PHPMyAdmin was just not up to the challenge. So after some searching and one phone call to the excellent Rackspace support team I had my solution and I am going to share this tidbit with you all.
The solution is something that any MySQL guru probably already knows but I think beginners and amateurs in command line techniques will benefit. It consist of three commands. They are as follows:
The first and last commands are mysql commands and the middle one is a Linux command. What these three commands basically do when used in this sequence is:
Dump a DB to a SQL file
Transfer the created SQL file to another machine. (scp = Secure copy)
Fill a DB with the contents of a SQL file.
When you run the scp command you will be prompted for the password associated with the username you are trying to connect with. Now scp only works on the same network but you can get around this by downloading the sql file via FTP and then uploading it to the destination machine.
You will also need to create the DB before running the last command.
Now this is pretty straight forward and easy to accomplish and now that I have this knowledge I am able to move databases in less then a minute! This made my last night of migrating painless. Also it will make things easy when I need to synce the servers DB’s with my own local machine for development or bug testing.
Here are links to the documentation for each command if you want to delve deeper into any of the available options.
Hello all, this will be the first in a weekly tradition I am starting today. Every Thursday night I plan on publishing an article on one PHP function. I will start with the ones I use most frequently then move onto the more obscure ones so I can digest and learn all I can while passing that knowledge to others.
So to start of this week I’ll go with a function I use quit often while I am building a website; print_r(). Here is the official description taken straight form the php.net manual on what this function does:
Prints human-readable information about a variable
Now what does this mean exactly? It is really quit simple. The function takes a variable, it doesn’t matter the type. It could be an Object, Array, or a simple integer and it spits it out onto the screen so you can see exactly what it is. It is pretty useful when building and debugging a script.
One word of caution when using it though. Since it can and will most likely be displaying sesitive information about your application you want to use it in a secure environment if at all possible. If not then at least in a development environment (which should be secured anyways). If this is not possible I will use it on a refresh then quickly comment it out so it will hopefully not be seen by regular users. I hate doing this so in these cases I also add in an IF statement to only show the output to my IP address. The morale of this long rant. Be cautious, as you don’t want to allow any kind of security leak.
Now that my security rant is over lets move on. The print_r() function takes one required parameter and one optional parameter. They are as follows:
mixed $expression
bool $return = false [optional]
The first parameter is the actual variable you are examining.
The second parameter is optional and defaults to false. All this does is tell the function to either display the results to the screen or return the results as a variable for later use. I have never yet had a reason to set this optional parameter to true. Now onto some examples.
We have just used the print_r() function to print to the screen an array of fruit names for an application we are working on. Here is the code:
$fruit = array('Apple','Mango','Banana', array('Strawberry','Blueberry','Cranberry'));
print_r($fruit);
// The output of this call is as follows:
Array ( [0] => Apple [1] => Mango [2] => Banana [3] => Array ( [0] => Strawberry [1] => Blueberry [2] => Cranberry ) )
This is pretty useful if you have a complicated script and need to see what is inside an array or object that is set in another file or are the results of a DB query. The only problem I find with this is the output. With the example above it isn’t too bad but if you have a large array or object you are examining it can get very messy and confusing to look at. What I have done to overcome this shortfall to the function is create my own modification of it. The function is rather quite simple. I have seen people do this trick but since I like to write as little code as possible whenever I can and to reuse my code I created a function to accomplish it. My solution to the output problem is this:
function print_a($a) {
echo "<pre>";
print_r($a);
echo "</pre>";
}
$fruit = array('Apple','Mango','Banana', array('Strawberry','Blueberry','Cranberry'));
print_a($fruit);
// The output of this call is as follows:
Array
(
[0] => Apple
[1] => Mango
[2] => Banana
[3] => Array
(
[0] => Strawberry
[1] => Blueberry
[2] => Cranberry
)
)
Now we have a much more readable output and can understand the structure of the array much easier.What makes this possible is by echoing out the HTML <PRE> tabs. What these tags do is allow for text to display correctly within the browser as it is written. It keeps all it’s formatting and white space which is normally stripped out by the browser. With the function I created to accomplish this I can call print_a() in replace of print_r() any where in my code to have nicely formatted output with out any extra code.
For a wrap up. The print_r() function is a very useful function when building an application or debugging one. It allows you to examine any variable or expression to get a better understanding of it’s structure and what it contains. It is most useful when examining arrays and objects. You also have to be mindful of where you use it as you don’t want to expose sensitive data to the world. The function also prints the results, although readable, in an ugly format when not surrounded by the HTML <PRE> tags. Using a costume function like mine above you can get nicely formatted output without having to surround each call or print_r() with the <pre> tag.
I hope this has been helpful and any and all comments are welcome. If you know any more information you think should be added to this let me know and I’ll be glad to add it and give credit to the addition. Next week I’ll discuss another function from the PHP library that I use often, array_push(). If you would like me to discuss a certain topic please let me know.
I am building a CRM/Scripting System/Scheduler for a client and I needed an easy wrapper function to quickly grab the value of a form input with javascript. I use alot of AJAX and was noticing that I was repeating the same set of code over and over and over and over…. You get the jist 🙂 In programming this is a bad idea. You want to strive for reusable code. Now the code I was writting over again is pretty simple but I still wanted to save myself some typing, another thing you strive for as a programmer, so I came up with a couple simple wrapper functions that will get me the value of a form input with a single function call.
Without further ado:
/**
* Returns the value of a select box. It will
* work for both a multiselect box and a normal
* select box.
*
* The function returns an string of the selected
* values separated by a ','.
*/
function getSelectValue(selID) {
var selectList = document.getElementById(selID);
var optionsLength = selectList.options.length;
var results = "";
for (gsv_i = 0; gsv_i < optionsLength; gsv_i++) {
if (selectList.options[gsv_i].selected) {
value = selectList.options[gsv_i].value
if (results == "") {
results = results + value;
} else {
results = results + "," + value;
}
}
}
return results;
}
/**
* Returns the value of a form input.
*/
function getInputValue(id) {
if (document.getElementById(id).type.indexOf('select') != -1) {
// We have a select element. Lets call the function for selects.
return getSelectValue(id);
} else {
// Else we will just return the value of the element
return document.getElementById(id).value;
}
}
/**
* USAGE
*/
function getTestValues() {
var inputValue = getInputValue('textInput');
var selectValue = getInputValue('selectInput');
alert(inputValue);
alert(selectValue);
return false;
}
[/sourcecode]
And now for the HTML:
[sourcecode language='html']
<input type="text" name="textInput" id="textInput" value="Some Value" />
<select name="selectInput" id="selectInput">
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
</select>
<script type="text/javascript">
getTestValues();
</script>
Since I’m not a Javascript guru I am not guaranteeing this is the best way to do this. It is just what I found most convenient for me and I believe will be convenient for others 🙂
I hope you enjoy and if you have questions feel free to ask 🙂
Later!
– Miah
I believe that’s the dance of a brave little toaster.” – Xander, Something Blue
Musings of a lost developer 