If you can place any of those quotes from the video games of yore, you’ll probably love the Server Challenge II. Taking cues from classic arcade games, we’ve teamed up with Supermicro to build a worthy sequel to our original Server Challenge:

If you come across Server Challenge II at a conference, your task is clear. You step up to the full-sized server rack and perform three simple tasks:

1. Load the data.
2. Connect the network.
3. Save the world.

You’ve got two attempts per day to install twenty-four drive trays into two 2U Supermicro servers and plug eighteen network cables into their correct switches. Get all of that done in the fastest time at the conference, and you walk away with a brand new Macbook Air. During booth setup at GDC Online, we shot a quick video of what that looks like:

The new challenge is sure to garner a lot of attention, and we’re excited to see the competition heat up as the show progresses. Beyond being a fun game, the Server Challenge II is also a great visual for what SoftLayer does. When you get to touch servers in a server hosting company’s booth, you’re probably going to remember us the next time you need to order a new server. You also get to see the Cisco and Supermicro switches that you’d see in all of our thirteen data centers around the world … It’s a tech geek’s dream come true.

In honor of the launch of Server Challenge II, we’re going to offer some “live” coverage of the competition at GDC Online this week. If you want to watch the Server Challenge II GDC Online 2012 remotely via “challenge-cast,” bookmark this blog post and refresh frequently. We’ll update the leader board every hour or two so that you can keep track of how the times are progressing throughout the show:

Game on.

**UPDATE** GDC Online has officially wrapped, and after some last-minute heroics, Derek Manns grabbed the top spot (and the MacBook Air) for his Server Challenge II efforts! If you’ve been watching the leader board throughout the conference, you saw the top attendee time fall from 1:59.30 all the way down to 1:09.48. We hope you’ve enjoyed the “challenge-cast” … Keep an eye on SoftLayer’s event schedule to prepare for your next chance to take on the Server Challenge II.

-@khazard

Before I get into the nitty-gritty of the project, I should probably unpack a few of the reasons why iframes are shunned. When a search engine indexes a page with iframes, each iframe is accurately recorded as a separate page — iframes embed the content of one we page inside of another, so it makes sense. Because each of those “pages” is represented in a single layout, if a user wanted to bookmark your site, they’d probably have a frustrating experience when they try to return to your site, only to find that they are sent directly to the content in one of the frames instead of seeing the entire layout. Most often, I see when when someone has a navigation bar in one frame and the main content in the other … The user will bookmark the content frame, and when they return to the site, they have no way to navigate the pages. So what’s a developer to do?

The project I was tasked with required the ability to resize only certain sections of a page, while asynchronously shrinking another section so that the entire page would always stay the same size, with only the two sections inside changing size.

Let’s look at an example with two divs, side by side on a web page:

One div will contain a navigation menu to jump to different pages of the website (#sidebar), and the second div will contain all the content for that page (#content). If some of the elements in #sidebar are too long to read with the default width of the div, we want to let the user freely resize the two divs without changing the width of the page.

Our task is straightforward: When #sidebar expands in width, also expand the navigation and shrink #content along with the main content inside #content. If #sidebar shrinks, the navigation, #content and main content would respond accordingly as well:

It’s a relatively easy concept to do with iFrames … But then you remember that iframes are no longer cool (yes, there was a time long ago when iframes were cool). I decided to turn to my favorite alternative — jQuery — and the fix was actually a lot easier than I expected, and it worked beautifully. Let’s run through a step-by-step tutorial.

1. HTML

Lay out your two divs:

<div id="sidebar"> 
	<div class="sidebar-menu">
		<!-- all your sidebar/navigational items go here -->
	</div>
</div>
<div id="content">
	<!-- all your main content goes here -->
</div>

2. CSS

Style your divs:

#sidebar {
       width: 49%;
}
#content {
	width: 49%;
        float: left;
}

3. jQuery

Now that we have our two divs side by side, let’s apply some jQuery magic. To do that, Let’s include our jQuery files in the <HEAD> of our document:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Now that we have the necessary scripts, we can write our function:

<script type="text/javascript">
  $(document).ready(function() {
    $( "#sidebar" ).resizable({      
    });
    $("#sidebar ").bind("resize", function (event, ui) {
            var setWidth = $("#sidebar").width();
            $('#content).width(1224-setWidth);
            $('.menu).width(setWidth-6);
        });
  });
</script>

I know that might seem like an intimidating amount of information, so let’s break it down:

   $( "#sidebar" ).resizable({      
   });

This portion simply makes the div with the ID of “sidebar” resizable (which accomplishes 33% of what we want it to do).

   $("#sidebar ").bind("resize", function (event, ui) {

By using the .bind, we are able to trigger other events when #sidebar is called.

            var setWidth = $("#sidebar").width();
            $('#content).width(1224-setWidth);

This is where the magic happens. We’re grabbing the current width of #sidebar and subtracting it from the width you want your site to be. This code is what keeps your page stays the same width with only the divs changing sizes.

            $('.menu).width(setWidth-6);

This part of the code that expands the contents in the navigation along with #sidebar.

You can see a working example of iframe-like functionality with jQuery here: http://jqueryui.com/demos/resizable/

The only part you won’t find there is the trick to adjust a corresponding div’s size to make it grow/shrink with the first … I had a heck of a time searching that on the web, so hopefully this quick tutorial will help other developers who might be searching for this kind of functionality!

- Cassandra

What about the customers who aren’t able to visit us, though? We can post pictures, share stats, describe our architecture and show you diagrams of our facilities, but those mediums can’t replace the experience of an actual data center tour. In the interest of bridging the “data center tour” gap for customers who might not be able to visit SoftLayer in person (or who want to show off their infrastructure), we decided to record a video data center tour.

If you’ve seen “professional” video data center tours in the past, you’re probably positioning a pillow on top of your keyboard right now to protect your face if you fall asleep from boredom when you hear another baritone narrator voiceover and see CAD mock-ups of another “enterprise class” facility. Don’t worry … That’s not how we roll:

Josh Daley — whose role as site manager of DAL05 made him the ideal tour guide — did a fantastic job, and I’m looking forward to feedback from our customers about whether this data center tour style is helpful and/or entertaining.

If you want to see more videos like this one, “Like” it, leave comments with ideas and questions, and share it wherever you share things (Facebook, Twitter, your refrigerator, etc.).

-@khazard

Don’t worry … it’s really quit simple. If you can use FTP (File Transfer Protocol), you can handle this bit of server management. Depending on the exact problem, we might instruct you to free up space by removing files in one of the following directories:

• /var/log
• /usr/local/cpanel
• /usr/local/apache/logs
• /usr/local/apache/domlogs

The reason these directories are usually overlooked is because they are not accessible by normal FTP users — users who only upload website content. When you upload website content to the server via FTP, the FTP user is limited to the directory structure for that website. Directories starting with “/var” and “/usr” cannot be accessed by these non-root users (The “root” user can access anything). And while root is a powerful user, for the sake of security, it is not normally allowed to log in over FTP because FTP is not secure … That’s where SFTP (Secure File Transfer Protocol) comes in.

Most FTP clients support SFTP, so you don’t have to learn a new environment to securely access any file on the server. Every FTP client is different, but I’ll illustrate with FileZilla because it’s free and available on Mac, Windows and Linux. If you don’t already have an FTP client, I highly recommend FileZilla. Because there are a few ways to use FileZilla to get an SFTP connection, I can share different options for you to try:

Quick Connect

The Quick Connect bar is the quickest way to connect to your server. Start FileZilla and look immediately under the toolbar for the Quick Connect bar:

Enter the hostname (IP address or domain name), “root” in the Username field, the root password in the Password field, and “22″ in the port field. Remember, port 22 is for SFTP, the same as SSH. Click the Quickconnect button to connect.

Using the Site Manager

The Site Manager lets you save your login details. Start FileZilla and you’ll see the following:

To open the Site Manager, click the left-most icon in tool bar or go to File >> Site Manager in the menu.

Enter an IP address or domain name for your server in the Host field, and select “SFTP” as your protocol. You’ll enter the root user’s login information, and you’re ready to connect by clicking the “Connect” button or you can click the “OK” button to save and close the dialog box.

If you just saved your settings and the Site Manager is not open, click the Site Manager icon again. From there, you can select the site under the “Select Entry” box, and you just have to click “Connect” to initiate the SFTP connection with your saved settings.

If you see a pop-up that warns of an “Unknown host key,” clicking the “Always trust this host, add this key to the cache” option will prevent this interruption from showing in the future. Once you click “OK” to complete the connection, your FileZilla screen should look like this:

Notice the “Remote site” section on the middle right of the FileZilla screen:

This area in FileZilla is the directory and file listing of the server. Navigate the server’s file structure here, and click “/” to access the top of the folder structure. You should see the “/usr” and “/var” directories, and you can explore the filesystem to delete the files technical support recommended to create space!

Message Log

If you have a problem connecting to your server by FTP or SFTP, the open area below the Quickconnect bar is the Message Log. If you can copy and paste this text into a ticket, you’ll help technical support troubleshoot your connection problems. Below is an example log of a successful FTP session:

Status: Connecting to server.example.com...
Response:   fzSftp started
Command:    open "root@server.example.com" 22
Command:    Trust new Hostkey: Once
Command:    Pass: **********
Status: Connected to server.example.com
Status: Retrieving directory listing...
Command:    pwd
Response:   Current directory is: "/root"
Command:    ls
Status: Listing directory /root
Status: Calculating timezone offset of server...
Command:    mtime ".lesshst"
Response:   1326387703
Status: Timezone offsets: Server: -21600 seconds. Local: -21600 seconds. Difference: 0 seconds.
Status: Directory listing successful

And here’s an example of a failed connection:

Status: Resolving address of example.com
Status: Connecting to 192.0.43.10:21...
Error:  Connection timed out
Error:  Could not connect to server
Status: Waiting to retry...
Status: Resolving address of example.com
Status: Connecting to 192.0.43.10:21...
Error:  Connection attempt interrupted by user

If you have any questions, leave them in a comment below. Enjoy your new-found SFTP powers!

-Lyndell

Given the fact that nearly everything in the data center is the same, if you’ve ever seen a SoftLayer data center, this tour will seem very familiar. The configuration and architecture of all 13 of our data centers are identical, and with the exceptions of a few Dutch words on the walls, this tour could be given (and is frequently given to customers) in all of our facilities around the world:

As we were recording this video, I started thinking about all the similarities and differences between all the entrepreneurs I have worked with during my career — which coincidentally lines up well with Clayton’s “Building. Business. SoftLayer.” blog. I cut my technology teeth in Silicon Valley during the dot-com tsunami of the late 90′s, and since then, I have collaborated on-location with entrepreneurs from the Netherlands, United Kingdom, Spain, Germany, Austria, Switzerland, France, Chile, Ukraine and Italy. While these cultures often vary widely with customs, manners, food and methods of business, I would have to say that entrepreneurs have far more similarities than they do differences.

At the peak of the dot-com boom, money was raining from the sky, and anyone with a decent PowerPoint presentation containing the word “Internet,” could raise million dollars of dollars in a matter of days. After the bubble popped, funding all but dried up. Even real businesses with profitable business models couldn’t raise a cent. My neighbor went from being worth over $10M on paper and keeping company with the Queen of the Netherlands to scrambling to pay the rent and fighting for a seat at the local coffee shop.

In my opinion, that’s when the real magic happened: The creators just kept on creating. Despite all our friends making fun of us — telling us “the Internet thing” was dead — we kept building cool stuff and coming up with innovative products that pushed the limits of technology.

While entrepreneurs liked the idea of making tons of money and building a global company from a simple idea, money and fame are not the primary drivers of true entrepreneurs. They were really more interested in creating something that would impact peoples’ everyday lives and disrupt tired industries … Just look at SoftLayer. In 2005, “tired” would have been one of the nicest things you could have said about the hosting industry, and in response to that environment, our “Innovate or Die” mentality shot us to the front of the pack.

Entrepreneurs are a lot like our data centers … They may look a little different from the outside, but they are exactly the same on the inside. Ask them how they’d change the world, and take note of the wild look in their eyes. Our growth is fueled by the passions of our customers, and as long as we have brilliant customers doing amazing things, you can expect to see more and more of these “new data center” tour videos in the coming months and years.

-@jpwisler

P.S. If you don’t have time to watch the video right now, you can head to our Flickr page to see a few pictures we snapped while recording the tour: AMS01 – Amsterdam Data Center

P.P.S. Make sure you watch the video all the way to the end.

Configuring Your Server

1. Open Windows Services (Start -> Run -> Services.msc)
2. Change the properties of the Windows Audio Endpoint Service and Windows Audio Service to “Automatic”. If the services are not already started, you can manually start them at this time.
3. Open Terminal Services ( Start -> Run -> tsconfig.msc)
4. Right-click on the RDP-TCP connection and bring up its properties. Go to the “Client Settings” and make sure that on “Redirection Audio” is not disabled.
5. Fully log out and log back into the RDP connection to the server. You will see a balloon error on your speaker icon that states “No Audio Output Device is installed.”

Making Registry Changes

1. You will now need to back up your registry and some registry changes.
2. I want to reiterate the instruction to back up your registry … As with most technical guides/walkthroughs, SoftLayer will not be held liable for any corruptions that may result from you attempting these changes. The next two steps will show how to quickly back up your registry.
3. Log into your server on an account with Administrator rights, and open regedit (Start -> Run -> regedit)
4. Export the current registry (from the “File” menu) and copy it to a location off of your server so you have it backed up.
5. Locate the following key: HKEY_CLASSES_ROOT\AudioEngine\AudioProcessingObjects. This will contain several subkeys all each named with a GUID.
6. Click on each subkey, then right-click and select “Permissions.” You will then click on the “Advanced” button and the “Owner” tab. The current owner should be listed as “TrustedInstaller.”
7. Select the Administrative account and/or group from the list and click “OK” to change the ownership.
8. Select the account you just chose and give it “Full Control,” then click “OK.”
9. In the “Detail” box of each subkey, double-click on the DWORD value “MinOutputConnections” and change it from 1 to 0, then click “OK.”
10. Once you have done this for each subkey in HKEY_CLASSES_ROOT\AudioEngine\AudioProcessingObjects, you can close regedit and restart the Windows Audio and Windows Audio Endpoint services.

Configuring Your RDP Client

Now that you have everything ready on the server, you just need to make sure your RDP client recognizes the audio. Log off of the server so you can configure your RDP client. Open RDP, go to the “Options” menu, and under “Local Resources,” select “Configure Remote Audio Settings.” Select “Play on this Computer,” and hit “OK.” Voila! You now should be able to hear sound from your Windows 2008 RDP connection.

-Bill

Last month, we started a series focusing on web development tips and tricks with a post about JavaScript optimization. In this installment, we’re cover how to use HTML5 custom data attributes to assist you in validating forms.

Custom data attributes for elements are “[attributes] in no namespace whose name starts with the string ‘data-’, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).” Thanks W3C. That definition is bookish, so let’s break it down and look at some examples.

Valid:

<div data-name="Philip">Mr. Thompson is an okay guy.</div>
<a href="softlayer.com" data-company-name="SoftLayer" data-company-state="TX">SoftLayer</a>
<li data-color="blue">Smurfs</li>

Invalid:

// This attribute is not prefixed with 'data-'
    <h2 database-id="244">Food</h2>
 
// These 2 attributes contain capital letters in the attribute names
    <p data-firstName="Ashley" data-lastName="Thompson">...</p>
 
// This attribute does not have any valid characters following 'data-'
    <img src="/images/pizza.png" data-="Sausage" />

Now that you know what custom data attributes are, why would we use them? Custom attributes allow us to relate specific information to particular elements. This information is hidden to the end user, so we don’t have to worry about the data cluttering screen space and we don’t have to create separate hidden elements whose purpose is to hold custom data (which is just bad practice). This data can be used by a JavaScript programmer to many different ends. Among the most common use cases are to manipulate elements, provide custom styles (using CSS) and perform form validation. In this post, we’ll focus on form validation.

Let’s start out with a simple form with two radio inputs. Since I like food, our labels will be food items!

<input type="radio" name="food" value="pizza" data-sl-required="food" data-sl-show=".pizza" /> Pizza
<input type="radio" name="food" value="sandwich" data-sl-required="food" data-sl-show="#sandwich" /> Sandwich
<div class="hidden required" data-sl-error-food="1">A food item must be selected</div>

Here we have two standard radio inputs with some custom data attributes and a hidden div (using CSS) that contains our error message. The first input has a name of food and a value of pizza – these will be used on the server side once our form is submitted. There are two custom data attributes for this input: data-sl-required and data-sl-show. I am defining the data attribute data-sl-required to indicate that this radio button is required in the form and one of them must be selected to pass validation. Note that I have prefixed required with sl- to namespace my data attribute. required is generic and I don’t want to have any conflicts with any other attributes – especially ones written for other projects! The value of data-sl-required is food, which I have tied to the div with the attribute data-sl-error-food (more on this later).

The second custom attribute is data-sl-show with a selector of .pizza. (To review selectors, jump back to the JavaScript optimization post.) This data attribute will be used to show a hidden div that contains the class pizza when the radio button is clicked. The sandwich radio input has the same data attributes but with slightly different values.

Now we can move on to our HTML with the hidden text inputs:

<div class="hidden pizza">
    Pizza type: <input type="text" name="pizza" data-sl-required="pizza" data-sl-depends="{&quot;type&quot;:&quot;radio&quot;,&quot;name&quot;:&quot;food&quot;,&quot;value&quot;:&quot;sandwich&quot;}" />
    <div class="hidden required" data-sl-error-pizza="1">The pizza type must not be empty</div>
</div>
 
<div class="hidden" id="sandwich">
    Sandwich: <input type="text" name="sandwich" data-sl-required="sandwich" data-sl-depends="{&quot;type&quot;:&quot;radio&quot;,&quot;name&quot;:&quot;food&quot;,&quot;value&quot;:&quot;sandwich&quot;}" />
    <div class="hidden required" data-sl-error-sandwich="1">The sandwich must not be empty</div>
</div>

These are hidden divs that contain text inputs that will be used to input more data depending on the radio input selected. Notice that the first outer div has a class of pizza and the second outer div has an id of sandwich. These values tie back to the data-sl-show selectors for the radio inputs. These text inputs also contain the data-sl-required attribute like the previous radio inputs. The data-sl-depends data attribute is a fun attribute that contains a JSON-encoded object that’s been run through PHP’s htmlentities() function. For readability, the data-sl-depends values contain:

This first attribute says that our text input “depends” on the radio input with the name food and value pizza to be visible and selected in order to be processed as required. You can just imagine the possibilities of combinations you can create to make very custom functionality with very generic JavaScript.

Now we can examine our JavaScript to make sense of all these custom data attributes. Note that I’ll be using Mootools’ syntax, but the same can fairly easily be accomplished using jQuery or your favorite JavaScript framework. I’m going to start by creating a DataForm class. This will be generic enough so that you can use it in multiple forms and it’s not tied to this specific instance. Reuse is good! To have it fit our needs, we’re going to pass some options when instantiating it.

new DataForm({
    ...,
    dataAttributes: {
        required: 'data-sl-required',
        errorPrefix: 'data-sl-error',
        depends: 'data-sl-depends',
        show: 'data-sl-show'
    }
});

As you can see, I’m using the data attribute names from our form as the options – this will allow you to create your own data attribute names depending on your uses. We first need to make our hidden divs visible whenever our radio buttons are clicked – we’ll use our initData() method for that.

initData: function() {
    var attrs = this.options.dataAttributes,
        divs = [];
 
    $$('input[type=radio]['+attrs.show+']').each(function(input) {
        var div = $$(input.get(attrs.show));
        divs.push(div);
        input.addEvent('change', function(e) {
            divs.each(function(div) { div.hide(); });
            div.show();
        });
    });
}

This method grabs all the radio inputs with the show attribute (data-sl-show) and adds an onchange event to each of them. When a radio input is checked, it first hides all the divs, and then shows the div that’s associated with that radio input.

Great! Now we have our text inputs showing and hiding depending on which radio button is selected. Now onto the actual validation. First, we’ll make sure our required radio inputs are checked:

$$('input[type=radio]['+attrs.required+']:not(:checked)').each(function(input) {
    var name = input.get('name');
    checkError(name, isRadioWithNameSelected(name))
});

This grabs all the unchecked radio inputs with the required attribute (data-sl-required) and checks to see if any radio with that same name is selected using the function isRadioWithNameSelected(). The checkError() function will show or hide the error div (data-sl-error-*) depending if the radio is checked or not. Don’t worry – you’ll see how these functions are implemented in the JSFiddle below.

Now we can check our text inputs:

$$('input[type=text]['+attrs.required+']:visible').each(function(input) {
    var name = input.get('name'),
        depends = input.get(attrs.depends),
        value = input.get('value').trim();
 
    if (depends) {
        depends = JSON.encode(depends);
        switch (depends.type) {
            case 'radio':
                if (depends.name && depends.value) {
                    var radio = $$('input[type=radio][name="'+depends.name+'"][value="'+depends.value+'"]:checked');
                    if (!radio) {
                        checkError(input.get(attrs.required), true);
                        return;
                    }
                }
                break;
        }
    }
 
    checkError(name, value!='');
});

This obtains the required and visible text inputs and determines if they are empty or not. Here we look at our depends object to grab the associated radio inputs. If that radio is checked and the text input is empty, the error message appears. If that radio is not checked, it doesn’t even evaluate that text input. The depends.type is in a switch statement to allow for easy expansion of types. There are other cases for evaluating relationships … I’ll let you come up with more for yourself.

That concludes our usage of custom data attributes in form validation. This really only touched upon the very tip of the iceberg. Data attributes allow you – the creative developer – to interact in a new, HTML-valid way with your web pages.

Check out the working example of the above code at jsfiddle.net. To read more on custom data attributes, see what Google has to say. If you want to see really cool functionality that uses data attributes plus so much more, check out Aaron Newton’s Behavior module over at clientcide.com.

Happy coding!

-Philip

Nothing compares with the frustration of trying to make a program listen on a different port – like if you wanted to configure your mail client to listen on port 2525. Many times, configuring a program the hard way (some would say the “correct” way) using configuration files may not be worth your time and effort … Especially if the server is running on a control panel that does not natively support this functionality.

Fortunately, iptables offers an elegant solution:

iptables -t nat -A PREROUTING -p tcp --dport 2525 -j REDIRECT --to-ports 25

What this does:

1. This specifies -t nat to indicate the nat table. Typically rules are added to the “filter” table (if you do not specify another table), and this is where the majority of the traffic is handled. In this case, however, we require the use of the nat table.
2. This rules appends (-A), which means to add the rule at the bottom of the list.
3. This rule is added to the PREROUTING chain.
4. For the tcp protocol (-p tcp)
5. The destination port (--dport) is 2525 – this is the port that the client is trying to access on your server.
6. The traffic is jumped (-j) to the REDIRECT action. This is the action that is taken when the rule matches.
7. The port is redirected to port 25 on the server.

As you can see, by changing the protocol to either tcp or udp or by adjusting the dport number and the to-ports number, you can redirect any port incoming to any listening port on the server. Just remember that the dport is the port the client machine is trying to connect to (the port they configure in the mail client, for example).

But check this out: Say for example you have a website (shocking, I know). You don’t have a load balancer or a firewall set up, but you want to split off your email traffic to a second server to reduce strain on your web server. Essentially, you want to take incoming port 25 and redirect it … to ANOTHER SERVER. With iptables, you can make this work:

iptables -t nat -A PREROUTING -p tcp -d 123.123.123.123 --dport 25 -j DNAT --to-destination 10.10.10.10:25

What this does:

1. It specifies a destination (-d) IP address. This is not needed, but if you want to limit the email redirection to a single address, this is how you can do it.
2. It is jumped to DNAT, which stands for destination nat.
3. The destination and port are specified as arguments on to-destination

As you can see, this forwards all traffic on port 25 to an internal IP address.

Now, say you want to redirect from a different incoming port to a port on another server:

iptables -t nat -A PREROUTING -p tcp --dport 5001 -j DNAT --to-destination 10.10.10.10:25
iptables -t nat -A POSTROUTING -p tcp --dport 25 -j MASQUERADE

In this example, the incoming port is different, so we need to change it back to the standard port on the way back out through the primary server.

If you would like further reading on this topic, I recommend this great tutorial:
http://www.karlrupp.net/en/computer/nat_tutorial

Remember, when you are modifying your running configuration of iptables, you will still need to save your changes in order for it to persist on reboot. Be sure to test your configuration before saving it with “service iptables save” so that you don’t lock yourself out.

-Mark

Logs are like an overbearing mother who sneakily follows her teenage son around and writes down the addresses of each house he visits. When he realizes he lost a really important piece of baseball history at one of those houses, he’ll be glad he has that list so he can go desperately search for the soon-to-be-noticed missing bat. Ahem.

MAKE BEST FRIENDS WITH THIS DIRECTORY: /var/log/

When something goes wrong – when there’s hitch in the flux capacitor or too many gigawatts in the main reactor – your logs will be there to let you know what’s going on, and you can pinpoint the error with educated vengeance. So treat your logs with respect.

One of the best places to start harnessing this logged goodness is /var/log/messages. This log file reports all general errors with network and media, among other things. As you add to and learn your server’s command line environment, you’ll see specific logs for applications as well, so it’s a very good idea to keep a keen eye on these. They just might save your life … or server.

Some of the most commonly used logs (may vary with different Linux distributions):

• /var/log/message – General message- and system-related info
• /var/log/cron.log – Cron job logs
• /var/log/maillog – Mail server logs
• /var/log/kern.log – Kernel logs
• /var/log/httpd/ – Apache access and error logs
• /var/log/boot.log – System boot logs
• /var/log/mysqld.log – MySQL database server logs
• /var/log/secure – SSH authentication logs
• /var/log/auth.log – Authentication logs
• /var/log/qmail/ – Qmail log directory (more files inside this directory)
• /var/log/utmp or /var/log/wtmp – Login records file
• /var/log/yum.log – Yum log files

There are plenty more in-depth logs – particularly involving raw system components – and others that act similarly to logs but are a bit more active like tcpdumps. Those are a little more advanced to interpret, so I’ll save them for another guide and another day.

At this point in our UNIX workout series, you’re familiar with the command line, you know the basics of how to tell your server what to do and you just learned how to let the server tell you what it’s done. There’s still a bit of work to be done before you can call yourself a UNIX ninja, but you’re well on your way. In our next installment, we’re going to take a step back and talk about p455w0rd5.

Keep learning.

-Ryan

This post gets pretty technical and detailed, so it might not appeal to our entire audience. If you’ve always wondered how to get started with SOAP API development, this post might be a good jumping-off point.

Authentication
Before you start playing with the SoftLayer SOAP API, you will need to find your API authentication token. Go into your portal account, and click the “Manage API Access” link from the API page under the Support tab. At the bottom of the page you’ll see a drop down menu for you to “Generate a new API access key” for a user. After you select a user and click the “Generate API Key” button, you will see your username and your API key. Copy this API key, as you’ll need it to send commands to SoftLayer’s API.

PHP
In PHP 5.0+ there are built in classes to deal with SOAP calls. This allows us to quickly create an object oriented, server side application for handling SOAP requests to SoftLayer’s API. This tutorial is going to focus on PHP 5.1+ as the server side language for making SOAP function calls. If you haven’t already, you will need to install the soap client for php, here is a link with directions.

Model View Controller

Model-View-Controller or MVC is a software architecture commonly used in web development. This architecture simply provides separation between a data abstraction layer (model), the business logic (controller), and the resulting output and user interface (view). Below, I will describe each part of our MVC “hello world” web application and dissect the code so that you can understand each line.

To keep this entry a little smaller, the code snippits I reference will be posted on their own page: SOAP API Code Examples. Protip: Open the code snippit page in another window so you can seamlessly jump between this page and the code it’s referencing.

Model
The first entry on the API Code Examples page is “The Call Class,” a custom class for making basic SOAP calls to SoftLayer’s API. This class represents our model: The SOAP API Call. When building a model, you need to think about what properties that model has, for instance, a model of a person might have the properties: first name, height, weight, etc. Once you have properties, you need to create methods that use those properties.

Methods are verbs; they describe what a model can do. Our “person” model might have the methods: run, walk, stand, etc. Models need to be self-sustaining, that means we need to be able to set and get a property from multiple places without them getting jumbled up, so each model will have a “set” and “get” method for each of its properties. A model is a template for an object, and when you store a model in a variable you are instantiating an instance of that model, and the variable is the instantiated object.

• Properties and Permissions
  Our model has these properties: username, password (apiKey), service, method, initialization parameters, the service’s WSDL, SoftLayer’s type namespace, the SOAP API client object, options for instantiating that client, and a response value. The SOAP API client object is built into php 5.1+ (take a look at the “PHP” section above), as such, our model will instantiate a SOAP API object and use it to communicate to SoftLayer’s SOAP API.

  Each of our methods and properties are declared with certain permissions (protected, private, or public), these set whether or not outside functions or extended classes can have access to these properties or methods. I “set” things using the “$this” variable, $this represents the immediate class that the method belongs to. I also use the arrow operator (->), which accesses a property or method (to the right of the arrow) that belongs to $this (or anything to the left of the arrow). I gave as many of the properties default values as I could, this way when we instantiate our model we have a fully fleshed out object without much work, this comes in handy if you are instantiating many different objects at once.

• Methods
  I like to separate my methods into 4 different groups: Constructors, Actions, Sets, and Gets:
  • Sets and Gets
    Sets and Gets simply provide a place within the model to set and get properties of that model. This is a standard of object oriented programing and provides the model with a good bit of scalability. Rather than accessing the property itself, always refer to the function that gets or sets the property. This can prevent you from accidentally changing value of the property when you are trying to access it. Lines 99 to the end of our call are where the sets and gets are located.
    
    
  • Constructors
    Constructors are methods dedicated to setting options in the model, lines 23-62 of the call model are our constructors. The beauty of these three functions is that they can be copied into any model to perform the same function, just make sure you keep to the Zend coding standards.

    First, let’s take a look at the __construct method on line 24. This is a special magic php method that always runs immediately when the model is instantiated. We don’t want to actually process anything in this method because if we want to use the default object we will not be passing any options to it, and unnecessary processing will slow response times. We pass the options in an array called Setup, notice that I am using type hinting and default parameters when declaring the function, this way I don’t have to pass anything to model when instantiating. If values were passed in the $Setup variable (which must be an array), then we will run the “setOptions” method.

    Now take a look at the setOptions method on line 31. This method will search the model for a set method which matches the option passed in the $setup variable using the built in get_class_methods function. It then passes the value and name of that option to another magic method, the __set method.

    Finally, let’s take a look at the __set and __get methods on lines 45 and 54. These methods are used to create a kind of shorthand access to properties within the model, this is called overloading. Overloading allows the controller to access properties quicker and more efficiently.
    

  • Actions
    Actions are the traditional verbs that I mentioned earlier; they are the “run”, “walk”, “jump”, and “climb” of our person model. We have 2 actions in our model, the response action and the createHeaders action.

    The createHeaders action creates the SOAP headers that we will pass to the SoftLayer API; this is the most complicated method in the model. Understanding how SOAP is formed and how to get the correct output from php is the key to access SoftLayer’s API. On line 77, you will see an array called Headers, this will store the headers that we are about to make so that we can easily pass them along to the API Client.

    First we will need to create the initial headers to communicate with SoftLayer’s API. This is what they should look like:

    <authenticate xsi:type="slt:authenticate" xmlns:slt="http://api.service.softlayer.com/soap/v3/SLTypes/">
        <username xsi:type="xsd:string">MY_USERNAME</username>
        <apiKey xsi:type="xsd:string">MY_API_ACCESS_KEY</apiKey>
    </authenticate>
    <SoftLayer_API_METHODInitParameters xsi:type="v3:SoftLayer_API_METHODInitParameters" >
        <id xsi:type="xsd:int">INIT_PERAMETER</id>
    </SoftLayer_API_METHODInitParameters>

    In order to build this we will need a few saved properties from our instantiated object: our api username, api key, the service, initialization parameters, and the SoftLayer API type namespace. The api username and key will need to be set by the controller, or you can add in yours to the model to use as a default. I will store mine in a separate file and include it in the controller, but on a production server you might want to store this info in a database and create a “user” model.

    First, we instantiate SoapVar objects for each authentication node that we need. Then we store the SoapVar objects in an array and create a new SoapVar object for the “authenticate” node. The data for the “authenticate” node is the array, and the encoding is type SOAP_ENC_OBJECT. Understanding how to nest SoapVar objects is the key to creating well formed SOAP in PHP. Finally, we instantiate a new SoapHeader object and append that to the Headers array. The second header we create and add to the Headers array is for initialization parameters. These are needed to run certain methods within SoftLayer’s API; they essentially identify objects within your account. The final command in this method (__setSoapHeaders) is the magical PHP method that saves the headers into our SoapClient object. Now take a look at how I access the method; because I have stored the SoapClient object as a property of the current class I can use the arrow operator to access methods of that class through the $_client property of our class, or the getClient() method of our class which returns the client.

    The Response method is the action which actually contacts SoftLayer’s API and sends our SOAP request. Take a look at how I tell PHP that the string stored in our $_method property is actually a method of our $_client property by adding parenthesis to the end of the $Method variable on line 71.

View
The view is what the user interprets, this is where we present our information and create a basic layout for the web page. Take a look at “The View” section on SOAP API Code Examples. Here I create a basic webpage layout, display output information from the controller, and create a form for sending requests to the controller. Notice that the View is a mixture of HTML and PHP, so make sure to name it view.php that way the server knows to process the php before sending it to the client.

Controller
The controller separates user interaction from business logic. It accepts information from the user and formats it for the model. It also receives information from the model and sends it to the view. Take a look at “The Controller” section on SOAP API Code Examples. I accept variables posted from the view and store them in an array to send to the model on lines 6-11. I then instantiate the $Call object with the parameters specified in the $Setup array, and store the response from the Response method as $Result in line 17 for use by the view.

Have Fun!
Although this tutorial seems to cover many different things, this just opens up the basic utilities of SoftLayer’s API. You should now have a working View to enter information and see what kind of data you will receive. The first service and method you should try is the SoftLayer_Account service and the getObject method. This will return your account information. Then try the SoftLayer_Account service and the getHardware method; it will return all of the information for all of your servers. Take the IDs from those servers and try out the SoftLayer_Hardware_Server service and the getObject method with that id as the Init property.

More examples to try: SoftLayer Account, SoftLayer DNS Domain, SoftLayer Hardware Server. Once you get the hang of it, try adding Object Masks and Result Limits to your model.

Have Fun!

-Kevin