Tutorial: Rainbow Text Generator

This is a fairly simple little starter tutorial for people interested in coding their own generators. Hopefully we'll end up with something that looks like [ This ].

You will need:

• A fairly good understanding of HTML
• A basic understanding of what PHP is
• A file host that supports PHP like [ 110mb.com ]

Let's start with the HTML form. We're going to want the user to select from a choice of color schemes, so we'll use radio buttons for those fields since they allow an either-or choice. For the text the user wants to rainbow-ify, we're going to use a textarea.

Code:
Notice that the form action is empty, which means it'll post to the same page its on, so we can put the PHP we're going to use to process the form right above it.


Now to start writing the PHP, so that something happens when you submit the form! You can write PHP so that it executes as soon as someone opens that page, but in this case, we only want the PHP code to go off if someone actually submits the form, so we're going to put it all inside an if statement:

Code:
The <?php tag tells the server that the next bit of code is in PHP. Then the if statement checks whether the posted value of the submit button is "Generate Rainbow Text" (notice that's the value it has on the form above). This works because the $_POST vars are only created when the form is posted, so initially $_POST['sumbit'] will be empty. Anything we put between the curly bracket after the if statement, and the closing curly bracket } that we're going to put at the end of our php code, will only execute if the form is posted.


Next, we want to tell PHP which colors to make the text. I'm going to use arrays of hex codes here, one that contains rainbow colors and one that contains pinks and blues:

Code:
As you can see, it doesn't matter how many different colors you have in each array, and you can use color names instead of hex codes if you like, or a mix of both.


Next we're going to take the message the user wants to rainbow-ify, and make sure it isn't empty and doesn't contain any malicious code.

Code:
The very first thing we're doing in this bit of code, is getting the posted value of the form field named "message" (the textarea) and making sure it doesn't contain anything it shouldn't. strip_tags means that $message becomes whatever was in the textarea, but with any tags removed.

Next, if the message is empty we want to show the user an error. Echo statements make something display on the page, so if the message is empty, the user will see "Oops! You didn't type any text to rainbow-ify!" on the page.

Finally we have an else bit. This is because we only want the next bit of code to execute if the message isn't empty, and there's some text to color! (We need to remember to end this else statement with a } closing curly bracket at the end of the section).

Since we have 2 choices of colorscheme, the next thing to do is decide which one to use:

Code:
$_POST['colorscheme'] contains the value of the selected radio button on the form. Since there's only 2, we know it's going to be either "rainbow" or "pinkblue", so we set the $colorarr variable to equal whichever array of color codes matches the radio button selected. Now $colorarr is either $rainbow or $pinkblue, depending which one the user chose.

Now for the really clever part. We're going assign each letter in $message a different color from $colorarr. To do that, we first have to split $message into an array of individual letters, so we can work through them in a foreach loop.

Code:

Because we want each letter in the message a different color from $colorarr, we need to keep a count of which color we're up to. (remember $colorarr[0] is the first hex code, $colorarr[1] is the second, etc). We also need to know how many hex codes are in the color array altogether, so that when we get to the last one, we can reset this count to zero, and run through the colors again, as many times as we need to color all the letters in the message.

Code:
Now for the loop. Look out for a new var in the code below, called $rainbowmsg. By the time the loop has finished, $rainbowmsg will contain the entire rainbow-ified message. We're going to add it one letter at a time:

Code:

Notice that our choice of font color on each loop is defined by $colorarr[$i]. This is clever because $i is increasing by one each loop, so is the next value from $colorarr each time. The last line in the loop checks whether $i has reached the total number of colors in $colorarr yet, and if so resets it back to zero, so the next loop uses the first color in the array again.

Finally, we want to display the rainbow-ified text in a text box for the user to copy:

Code:

Finally, we want to remember to end the else, and if statements that we started way up there somewhere, and end the php section (the input form is in plain html):

Code:
And if you did it all right, you should have something that looks like this:

Complete Code:

Now save your page as yourfilename.php, and upload it to your web server to try it out!

As a final finishing touch, I ran the colorscheme titles from the input form through the generator so that people using it will be able to see what their rainbow text will look like.