This post is basically a tutorial for my n342 Server Side Programming course at IUPUI.

You will need to download and install WinSCP in order to follow this tutorial exactly. Also, the first time through you will need to set up and save a new server profile, but each subsequent time you can just select the profile you saved the first time and click “login”.

View the Screencast (If it didn't show up above).

And, here's the simple text version:

1. Log into corsair (or whatever server you have apache install on) using WinSCP/SSH/PuTTY
2. Open the console/prompt/shell
3. Enter "apachectl start" (without quotes) and hit "Enter" to start the server
4. Enter "apachectl stop" (without quotes) and hit "Enter" to stop the server (Obviously if your goal was to start the server, you will want to skip this step...)

Creating buttons that resize/stretch themselves automatically for your iPhone Applications is pretty easy.

Buttons are created as .png files with three parts: Left end-cap, middle (the stretch-able part), Right end-cap. Basically, you create a little tiny .png file with the left and right end caps (or top and bottom) and a little bity middle part that the iPhone will automatically re-size to fit any width or height you make the button.

I’ll walk you through the process step by step and show you how to assign the image to your button.

If you are wondering how to get your Round Rect Buttons to look like the ones in the official iPhone apps (like the ones apple makes), this tutorial will show you how. Instead of creating your own button image, just use the ones from Apple, or download the zip file for this tutorial (the ones from Apple are in there too)

Creating the Stretchable iPhone App Button Image

To start with, you will need to actually create the button image. I used Fireworks to do this, but you could use Photoshop, Illustrator, Inkscape or Gimp if you are so inclined. I recommend Fireworks.

I wanted my button to mimic normal iPhone buttons, but also illustrate the concept of a “stretchy” button. So I made a square button with rotated square corners.

1. Create a new image 30 x 50 (or there-abouts)



2. Make sure to set the canvas color as “transparent”
3. Mock-up your button shape



4. Use the pen tool to trace it into a single shape
   

   I take the individual components from the last step, group them together, and lock them, and then trace around them with the pen tool. There’s probably a better way, but this is the way I know. Use the guides to help you tweak it until you are satisfied

5. Trace a smaller version of the button inside of the outline using the pen tool
6. Fill in the inner button, and remove the line on it
7. Fill in the outer button



If the shape looks how you want it at this point, move on, otherwise, rinse and repeat…

8. Color the button the way you want it
   

   The way I do this is to fill the outside shape with a dark grey (at the top) to light grey (at the bottom) linear gradiant with a 1px solid dark grey border (a little darker than the darkest part of the gradient). Then fill the inside shape with a custom linear gradient. This is the part that requires finesse. If you want it to look like an Apple button with the slick horizon line, start light, get progressively darker, and then in one pixel make a stark jump to the darkest shade of the color you are using, then get progressively light again.

   

9. Add a drop shadow to the inner shape
   

   Click the inner shape. Click the “+” next to “Filters” in the Properties inspector. Select “Shadow and Glow > Drop Shadow”. I’ve selected a distance of 2, Opacity of 100%, Softness of 1 and Angle of 267.

10. Decide on the stretching points of your button

    Pick a point in the middle of the image where if that one pixel got stretched (repeated over and over again) to widen the button, it would look good (I chose 15px for the button I’ve been creating for this tutorial). Pick a point in the middle of the image where if that one pixel got stretched to lengthen the button, it would look good (I chose 27px for the button I’ve been creating for this tutorial). Make note of these two points as you will need to know them later.

At this point you have completed the “up” state for the button.

11. Save your file (I saved as “customButtonImageDefault.png”)
12. “Save As” and rename your file for the pressed or “down” state for the button (I saved as “customButtonImageDown.png”)
13. Choose a color for the downstate, and change each gradient point to a shade of that color.
    

    It makes it easier if you click the color wheel in the color chooser and use the slider on the right. Also, once you have chosen your base color after clicking the color wheel and adjusting the slider, click “Add to Custom Colors” so you don’t have to re-find your base color again and again each time. You can just select it from the custom colors list at the bottom left of the color wheel menu and then use the slider to choose another shade of that color. Make sure not to move any of gradient points or they won’t match up with the points you took note of earlier. Up states and Down states can have different stretch points if you want since you define each state’s stretch points individually in the code, but it makes it easier if you just use the same points for up and down.

14. Once you have edited all of the points. Open the images in fireworks and switch back and forth between them to compare how it’s going to look when the button is pressed. When satisfied, save. Now you’re ready to get to coding!

Creating a Custom Re-sizable Button in an iPhone App

Ok, now that you’ve gotten your button created, it’s time to implement it.

I expect you to already know how to create I phone apps, but if not, here are un-annotated pictures of me building the scaffolding to hold our custom buttons. Following the images are the explanation on how to use custom buttons.

Creating the Scaffolding to place the custom button in

Again, if you already have an app you are trying to use the custom button in, skip this step…

Making the Custom Button in the iPhone App

1. Open the interface builder and click on the button you would like to customize
   
2. Open the “Button Attributes” pane (Apple + 1)
3. For “type” select “Custom”
   

   At this point, if you didn’t give the button a title, it will disappear (which is ok). If you need to find it and can’t, in the main window (titled yourFileName.xib) there will be several objects. Expand the one that says “View” (or wherever you put your button) and you should see your button. Clicking on it there will highlight it in the layout window.

4. Hold down “ctrl” and drag from the “File’s Owner” object to the button.

   This can all be done from within the .xib window by switching to “list” view mode

5. In the little context menu that pops up, select “customButton” (or whatever you called the button in your code)
   
6. Switch to the “size” window (Apple + 3)
7. Set the size to at least 100 x 100
   

   This is just so we can see our image stretch. When you are doing this in a non-tutorial setting, you will probably not set this at all.

8. Switch to the “Attributes” window (Apple + 1)
9. In the “View” section (at the bottom), click on “Background”
   
10. In the “color” window that pops up, set “Opacity” to “0″ (zero)
    
11. Switch back over to Xcode
12. Locate your button files and drag and drop them into the “Resources” folder of your project
    

    You will probably want to make sure and click the “Copy items into destination group’s folder” button

13. Click “Add” in the pop-up that appears
14. Switch to your view controller file

    (the one that corresponds with the view you were just editing in the Interface Builder. The one that ends with “.m”)

15. Add the following code to the -(void)viewDidLoad{} method:
    
    
    
    UIImage *buttonImageNormal = [UIImage imageNamed:@"customButtonImageDefault.png"];
    UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];
    [customButton setBackgroundImage:stretchableButtonImageNormal forState:UIControlStateNormal];

    UIImage *buttonImagePressed = [UIImage imageNamed:@"customButtonImageDown.png"];
UIImage *stretchableButtonImagePressed = [buttonImagePressed stretchableImageWithLeftCapWidth:12 topCapHeight:0];
[customButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStatePressed];


    The first block of code defines the image for the normal (up) state of the button. The second block defines the image for the pressed (down) state of the button. The first line of each block loads the button image for that state into the app. The second line of each block you can set the stretch points of the button (you should have noted these earlier when you made the button). You can keep setting these to different things and viewing the result to refine until you like what you see. The third line assigns the now stretchable image to the actual button. If you have more than one button you want to assign the image to, just copy the third line and replace “customButton” at the beginning with the name of the next button you want to assign the image to:

    
UIImage *buttonImagePressed = [UIImage imageNamed:@"customButtonImageDown.png"];
UIImage *stretchableButtonImagePressed = [buttonImagePressed stretchableImageWithLeftCapWidth:12 topCapHeight:0];
[customButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStatePressed];
[anotherCustomButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStatePressed];
[thirdCustomButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStatePressed];


    In this way, you can assign the image to as many buttons as you want.

Your viewDidLoad method should now look something like this:


-(void)viewDidLoad {
UIImage *buttonImageNormal = [UIImage imageNamed:@"customButtonImageDefault.png"];
UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12 topCapHeight:0];
[customButton setBackgroundImage:stretchableButtonImageNormal forState:UIControlStateNormal];

UIImage *buttonImagePressed = [UIImage imageNamed:@"customButtonImageDown.png"];
UIImage *stretchableButtonImagePressed = [buttonImagePressed stretchableImageWithLeftCapWidth:12 topCapHeight:0];
[customButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStatePressed];

[super viewDidLoad];
}


16. Now hit Apple + R to compile, run and view the output!
    

A good amount of the information for this article came from
Beginning iPhone Development: Exploring the iPhone SDK. It’s an excellent book. By far the best iPhone development book out there right now. It’s really easy to read and understand. Each chapter is one or two example projects from start to finish, step by step, wonderfully explained. After buying this book I had my first iPhone App up and running within a week. The thing they don’t talk about (that I did) was actually creating the button image, and dealing with the opacity. Again, all of the files for this tutorial can be downloaded from here. Feel free to leave any feedback/questions/whatever in the comments… Good luck!

So, that said, and without further ado, I present to you (as if you hadn’t already seen this from reading PA or just having an appendage flaccidly placed in the vicinity of the pulse of video game culture) Metroid:Other M.

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHWSOME!!!!

I had a small adjustment I needed to make for printing a page on my site, and rather than creating an entirely new (duplicate) alternate style-sheet just for print media, I discovered a neat little CSS method you could use to put the print style right in with the main style.

It’s the @media print CSS method.

My original CSS code was as follows:

#dragLayer {
height:255px;
left:72px;
overflow:hidden;
position:absolute;
top:0px;
width:255px;
z-index:100;
}

For some reason the “Drag Layer” div was appearing over-top the image contained in a sub-div. I’m using scriptaculous to display a blown up version of an image when you hover over a smaller version of the image. But when you print, the smaller version of the image doesn’t show up. Making the dragLayer div display equal to none didn’t work for some reason. So instead I defined a print stylesheet with the dragLayer div’s height and width equal to 0. I didn’t want to have to make an entirely new duplicate stylesheet just for this one little CSS change for printing, so after some exploring I found the @media print css directive. Here is the style I ended up with:

#dragLayer {
height:255px;
left:72px;
overflow:hidden;
position:absolute;
top:0px;
width:255px;
z-index:100;
}

@media print{
#dragLayer{
height: 0px;
width: 0px;
}
}

This little trick was mentioned in passing in page 210 of Elizabeth Castro’s
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide), but Elizabeth claims it isn’t as widely supported or well known as the other standard methods of doing this. In all of my testing so far, however, it looks like it works in all of the newest versions of three of the major browsers (FF, IE & Chrome).

There’s a guy at my work who is trying to learn how to program. Somehow or another he stumbled upon my site. I showed him my game and he downloaded the source code and tried to modify it. He was having some trouble, so we went through and figured it out together.

This rekindled my interest in the game, and today over lunch I did a little modifying myself. I refactored the clock methods to be more clean and intuitive (these are the methods that control when the timed events happen, like the rubies falling etc. These are located in the Clock.as file). I also made it so that the sky would change with the time of day. Now when I get to work in the morning the sun is just drifting in from the left side of the screen. Then when five oclock hits it’s just drifting out of the right side. It’s fun to be able to look up and know approx. what time it is by seeing the sun in the sky of my imaginary world. My next goal is to get the cloads to go away at night and have stars come out.

I’ve got lots of other plans as well. I forgot how much fun it was working on this thing.

For some reason it never showed up in the Google Gadgets directory, or in the Google Desktop directory. Maybe once I get it working to the point where someone else might want to play with it I’ll remedy that.

I also set up a Subversion repository for it. It’s located at http://subversion.chomperstomp.com/chomperStomp/. It’s open to the public to check out from it if you are interested. If anyone mods it they are welcome to send me their changes and I’ll incorporate with credit given to the modder.

Well good! For a limited time only, I have the solution to your problem! That’s right, turn that paper weight into a super great! (Huh?)

Unplug it. Wait 30 seconds. Plug it back in. Try turning it on again. It should:

1. Boot up fine! (this means your RAM is A-OK, and that the error codes are just indicative of the fact that your computer is a piece of crap. Duh! You got a Dell!)

2. Error code again. (Take out a RAM stick and put a different one in and repeat the process of unplugging etc. till it boots up)

3. Error code different. If you hear beeps and just have a 1 showing, it means you took them all out and unplugged it and waited 30 seconds (or two minutes or longer) and then plugged it back in. That’s what I finally did. It accomplished some sort of hard reboot or something and cleared it’s memory or whatever. Torn it off, throw in some RAM (one stick if you don’t mind), and plug her in and boot her up. Should work unless you threw in the bad RAM.

If all this fails it means that all your RAM went bad at once. If so, please comment so i can know there’s someone out there more hated by their ocursed Dell minion than me!

So, again, the lesson here is that Dell sucks and no one should ever buy a Dell ever and that I hate Dell, and that I will never buy one again (and have put my money where my mouth is and although I have 10 Dells in my home, my most recent purchase was an HP).

So, yesterday I decided to buy a new laptop. I’m recording an online Lecture series with IUPUI CSCI Dept. and I need a laptop to do it on. Now, I know what you’re thinking, “Surely… surely, he didn’t buy a Dell… right?” At this point, you’re probably expecting me to say “wrong”, but actually, I’m not a fracking idiot. I’ll never give Dell another red cent in my entire life. I bought an HP.

Modest 15.4″ Screen

4 GB Ram

2.1 GHZ AMD Turion X2 Ultra 64

Vista Home Premium

ATI RADEON HD 3200 Graphics card

WiFi

LightScribe Direct Disc Labeling DVD Burner

SD-MS/Pro-MMC-XD media card reader

Removable Remote Control thingamabob (so I can use it as a TV)

Lots of lovely little ports some of which I don’t know the name for (USB/eSATA/HDMI/Network/phone/monitor/etc)

So, I get this thing home. Get my wifi network back up and running, and low an behold, aparently this pissed off my Dell.

She must have gotten jelous of the new girl in town, because when I walked in the room after getting my lappy all up and running, the dell was deader than a doornail.

She won’t even turn on. She just sits there with front panel error codes indicating she has bad memory. No bios screen, nothing. Just a number 3 and a number 4 lit up in green, as if to say, “Fine! I’m leaving!”.

I even ripped out all the memory and hit the power button to see if it would give me the correct error codes for “no memory found”, but nope. It still claims to have memory, but claims the memory is bad.

Well, guess what Dell? That’s BS! You were going to remain my primary, but now it really does look like I’m abandoning you to the cobwebs of irrelevancy! Good ridance you over priced piece of crap! You never worked right in the first place!

If I didn’t think there was a chance I could fix it (probably have to buy a new motherboard, this will be it’s third one) I’d take it out back and beat the snot out of it with a baseball bat.

I HATE DELL COMPUTERS!!!!!!

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHHHHHHHHHHHHHH!!!

I used these two tutorials to learn how to send HTML e-mails in PHP:

sitepoint.com advanced e-mail tutorial
webcheatsheets.com sending e-mail tutorial

For something that requires very strict accurate guidelines to be followed, you would think they wouldn’t just gloss over them or ignore them entirely. But they did.

So, here are five pointers to get you off on the right foot:

1. Use Content-Type: multipart/alternative; with a random hash

Don’t just send the e-mail as HTML. Many e-mail providers don’t allow for HTML e-mails, so you need alternative content. You will need a boundary string, but you will also want it to be random hash. Why? Well, I’m not really sure. I can easily imagine one scenario, which would be that if you are sending mail on behalf of someone, and they figure out your static boundary string, they could do some sort of injection attack and send some nasty thing through with your e-mail. Not really sure if this would work, or if this is the reason, but everyone else uses a random hash, so you should too!

<?php
//create a boundary string. It must be unique
//so we use the MD5 algorithm to generate a random hash
$random_hash = md5(date('r', time()));
//define the headers we want passed. Note that they are separated with \r\n
$headers = "From: webmaster@example.com\r\nReply-To: webmaster@example.com";
//add boundary string and mime type specification
$headers .= "\r\nContent-Type: multipart/alternative; boundary=\"PHP-alt-$random_hash\"";
?>

2. Don’t use HEREDOC syntax

At first I was trying to just do this:

$msg <<<HERE
--PHP-alt-$random_hash
Content-Type: text/plain; charset="iso-8859-1"
Content-Transfer-Encoding: 7bit

Plain text stuff

--PHP-alt-$random_hash
Content-Type: text/html; charset="iso-8859-1"
Content-Transfer-Encoding: 7bit

<html>
<body>
<p>
Blah blah blah $var blah!
</p>
</body>
</html>
--PHP-alt-$random_hash--
HERE;

But it just wouldn’t work! I figured out you have to do it like this:

$message = "--PHP-alt-$random_hash\n\r" .
"Content-Type: text/plain; charset=\"iso-8859-1\"" .
"Content-Transfer-Encoding: 7bit\n\r" .  

"Hello World!!! \n\r" .
"This is simple text email message. \n\r" .  

"--PHP-alt-$random_hash\n" .
"Content-Type: text/html; charset=\"iso-8859-1\"" .
"Content-Transfer-Encoding: 7bit\n\r" .  

"<h2>Hello World!</h2>\n\r" .
"<p>This is something with <b>HTML</b> formatting.</p> \n\r" .  

"--PHP-alt-$random_hash--";

Pay special attention to where you are putting your \ns and \rs!!!

3. Get the from right!

When building your headers, don’t forget to include a from. This will make your e-mail more recognizable and professional. Don’t just include the from though, include a human readable value as well!

$headers = "From: An actual name <email@email.com>\r\n";

4. Don’t forget those trailing “–” after the final bondary!

Don’t forget those last two dashes on your final boundary:

--==Multipart_Boundary_{$semi_rand}x--

See them there at the end? You don’t put those on the others, so they are easy to forget on the final one. Also, it’s boundary with an “a”, not “boundry”… Yeah, I misspelled it the first time…

5. If things aren’t working, experiment

It took me a good hour and a half to get this working right. It all came down to those little \r and \n things in the end. I had to carefully add and remove them from different places until I got everything just right. The webcheatsheet code conveniently uses some buffer trickery to avoid this, but my web host does not support that, so I had to figure it all out myself. Here is a version of their code that actually works on my web hose (Dreamhost):

<?php
//define the receiver of the email
$to = 'email@gmail.com';
//define the subject of the email
$subject = 'Test HTML email';
//create a boundary string. It must be unique
//so we use the MD5 algorithm to generate a random hash
$random_hash = md5(date('r', time()));
//define the headers we want passed. Note that they are separated with \r\n
$headers = "From: webmaster@example.com\r\nReply-To: webmaster@example.com";
//add boundary string and mime type specification
$headers .= "\r\nContent-Type: multipart/alternative; boundary=\"PHP-alt-$random_hash\"";
//define the body of the message.
$message = "--PHP-alt-$random_hash\n\r" .
"Content-Type: text/plain; charset=\"iso-8859-1\"" .
"Content-Transfer-Encoding: 7bit\n\r" .  

"Hello World!!! \n\r" .
"This is simple text email message. \n\r" .  

"--PHP-alt-$random_hash\n" .
"Content-Type: text/html; charset=\"iso-8859-1\"" .
"Content-Transfer-Encoding: 7bit\n\r" .  

"<h2>Hello World!</h2>\n\r" .
"<p>This is something with <b>HTML</b> formatting.</p> \n\r" .  

"--PHP-alt-$random_hash--";

//send the email
$mail_sent = mail( $to, $subject, $message, $headers );
//if the message is sent successfully print "Mail sent". Otherwise print "Mail failed"
echo $mail_sent ? "Mail sent" : "Mail failed";
echo $message;
?>

Have fun! Feel free to comment if you have any other tips/questions.

This is an explanation on how to automatically upload a file via FTP when you click “save” in the Aptana IDE. Let’s jump right in…

1. If you don’t have a project, create one. 

2. If you don’t have a “scripts” folder in your project, create one (I put mine in the root directory of my project. No clue if it will work from anywhere else). 

3. Create a new file inside your scripts folder with a .js extension (I named mine “upload_current_file_on_save.js”, not sure if it will work with any other name). 

4. Place this code inside the file: 

5. Save the file. 

A few notes on what needed changed in this file from the sample file I took this from: 

1. I added this line of code to the comment block at the top: 

I know there is a comment in this file that tells you to “add this to the top of this file”, but since I’m new to the whole scripts thing I didn’t get that when it said “top of the file” it meant “the middle of the comment block at the top of this file”. I thought I was literally supposed to make that line the very first line in the file… Which didn’t work at all… 

2. I changed the “menu” line to: 

from: 

For some reason it didn’t work until I changed this line. Since my project is code named “gMan” (It’s a user management system, you’ll make the connection…) I just named the menu item “gMan” after my project. Then the command is to upload on save, so that’s what I named it. As soon as I made this change is when the whole thing started working. Could be coincidence, or could be that you have to do this for the script to work (rename the menu command something other than what the sample is named). 

In case you haven’t figured it out, you run the script by going to the “Scripts” menu in the toolbar at the top of Apatan (and selecting the script, whatever you named it in the previous step). 

Want to read more about website creation in Aptana from this author? Check out his book:
HTML, XHTML, and CSS All-in-One Desk Reference For Dummies (For Dummies (Computer/Tech)). Support the Author of this post and buy the book from Amazon by clicking on the link on this page. Thanks for the help!

I’ve had some errors in the default SQl zen cart comes with. First I was getting an error about an invalid column name in the phpbb_user_groups table (specifically the group_description column not existing). Once I fixed that, I got a very cryptic “1062 Duplicate entry ” for key 2″ error every time I tried to create a new user.

Here’s how to fix BOTH of these problems:

Problem 1 – “column group_description does not exist”:

Edit line 196 in store>includes>classes>class.phpbb.php. Change “group_description” to “group_desc”

Problem 2 – 1062 Duplicate entry ” for key 2:

Edit line 187 (in the same file as in Problem 1). Change it from:

(user_id, username, user_password, user_email, user_regdate)

to:

(user_id, username, user_password, username_clean, user_email, user_regdate)

Edit line 189. Change it from:

(’” . (int)$user_id . “‘, ‘” . $nick . “‘, ‘” . md5($password) . “‘, ‘” . $email_address . “‘, ‘” . time() .”‘)”;

to:

(’” . (int)$user_id . “‘, ‘” . $nick . “‘, ‘” . md5($password) . “‘, ‘” . $nick . “‘, ‘” . $email_address . “‘, ‘” . time() .”‘)”;

phpbb requires that each user have a unique “username_clean”. This is the second “key” in the table requirements. The first creates an index on user_id, the second requires username_clean be UNIQUE, the third creates an INDEX on user_birthday, and so on. In fact, at NO POINT do they EVER REQUIRE THE USERNAME TO BE UNIQUE! WHAT????? yep. It’s username_clean that must be unique. zen cart doesn’t even try and insert anything into username_clean, it just tries to make the username (this makes no sense at all!!!).

Feel free to comment if you have any insights/questions!