Alright, this is a continuation from part 1. Having had a think about the layout a bit more i’ve come up with the following sketches.

This shows the layout of the main elements on the index page.

So when a user clicks the title of an article they will see the post show page with the full article text.

With a basic idea of the layout i made this mock-up of the design with photoshop.

So now i know how the site will look and the basic elements that i’ll be using. Now i have to think about how i’m going to actually build it.

I’m going to use Ruby On Rails , the ruby application development framework with a Mysql database. The heart of this app is the ability to create articles for other to read. So i’ll create a article function that will allow the author create and edit a simple text based article.

I’m sick of all the commercialization surrounding some topics on the net. What happened to just going to the URL and getting the info that is required, i don’t want to click around, i dont want to look at all the advertising. I’m going to build a web app for the football team that i support Glasgow Rangers.

The Concept

I want to create an application that allows fans to quickly find out the latest information on results, fixtures and general club happenings from a fans point of view. The app will allow the admins to publish articles in the format of a blog, organized into categories. I want a simple clean interface that focuses the user rather than distracting them with unrelated bumf.

So i came up with this sketch:

For anyone wondering i’m using Omigraffle , a diagraming application for Mac OSX.

Then i worked on just laying out the main features.

Then, to put myself in the shoes of the users of the app and try to visualize what they would want and need, i created some user stories index cards.

So Ruby is an object oriented language, almost everything in Ruby is an object. Objects are the fundamental building block that almost everything is made out off.

But what is an object?

The term object is used in programming terms because it is analogous to real world physical objects such as a person, a table, a chair etc.. Objects can also be non-physical such as the communication between 2 people objects.

In Ruby objects are actually an instance of a class. 2 people objects would be 2 instances of the class person. Both people objects are unique but they are both instances of the same class.

The basic object types are:

• Variables – well, actually variables are not objects (huh?), but they do allow us to reference objects easily (ahh, ok). Variables must be assigned to an object before we can use them.

Remember back to high school maths, all those x = 2, y = 3 equations? Well the x is a variable.

1
2

x = 1
x + 2 = 3

Ruby is quite a readable language and it’s conventional to use descriptive verbose variable names with underscores to separate words.

1
2

hair_colour #good variable name
hairColour #bad variable name

To take a screen capture of the iPad just press the home button and the sleep/power button together.

This is a logical continuation of a previous post install-rails-stack-on-ubuntu-9-10, here we set-up a basic firewall.

To start with, we’re going to have three ports open: ssh, http and https. We’re going to create two files, /etc/iptables.test.rules and /etc/iptables.up.rules. The first is a temporary (test) set of rules and the second the ‘permanent’ set of rules (this is the one iptables will use when starting up after a reboot for example). Note that we are logged in as the root user. This is the only time we will log in as the root user. As such, if you are completing this step at a later date using the admin user, you will need to put a ‘sudo’ in front of the commands.

Now let’s see what’s running at the moment:

1

iptables –L

You will see something similar to this:

Chain INPUT (policy ACCEPT) target prot opt source destination Chain FORWARD (policy ACCEPT) target prot opt source destination Chain OUTPUT (policy ACCEPT) target prot opt source destination

Create the file /etc/iptables.test.rules and add some rules to it; if you or another admin user for this slice has worked through these or similar steps previously, this file may not be empty:

1

nano /etc/iptables.test.rules

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

*filter


#  Allows all loopback (lo0) traffic and drop all traffic to 127/8 that doesn't use lo0
-A INPUT -i lo -j ACCEPT
-A INPUT -i ! lo -d 127.0.0.0/8 -j REJECT


#  Accepts all established inbound connections
-A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT


#  Allows all outbound traffic
#  You can modify this to only allow certain traffic
-A OUTPUT -j ACCEPT


# Allows HTTP and HTTPS connections from anywhere (the normal ports for websites)
-A INPUT -p tcp --dport 80 -j ACCEPT
-A INPUT -p tcp --dport 443 -j ACCEPT


#  Allows SSH connections
#
# THE -dport NUMBER IS THE SAME ONE YOU SET UP IN THE SSHD_CONFIG FILE
#
-A INPUT -p tcp -m state --state NEW --dport 30000 -j ACCEPT


# Allow ping
-A INPUT -p icmp -m icmp --icmp-type 8 -j ACCEPT


# log iptables denied calls
-A INPUT -m limit --limit 5/min -j LOG --log-prefix "iptables denied: " --log-level 7


# Reject all other inbound - default deny unless explicitly allowed policy
-A INPUT -j REJECT
-A FORWARD -j REJECT

COMMIT

The rules are very simple and it is not designed to give you the ultimate firewall. It is a simple beginning.
Hopefully you will begin to see the pattern of the configuration file. It isn’t complicated and is very flexible. You can change and add ports as you see fit. Don’t forget to change the port number 8888 to whatever you specified in sshd_config.

Then lets apply those rules to our server:

1

iptables-restore < /etc/iptables.test.rules

Let’s see if there is any difference:

1

iptables –L

Notice the change? (If there is no change in the output, you did something wrong. Try again from the start).
Have a look at the rules and see exactly what is being accepted, rejected and dropped. Once you are happy with the rules, it’s time to save our rules permanently:

1

iptables-save > /etc/iptables.up.rules

Now we need to ensure that the iptables rules are applied when we reboot the server. At the moment, the changes will be lost and it will go back to allowing everything from everywhere.
Open the file /etc/network/interfaces

1

nano /etc/network/interfaces

Add a single line (shown below) just after ‘iface lo inet loopback’:

1

pre-up iptables-restore < /etc/iptables.up.rules

As you can see, this line will restore the iptables rules from the /etc/iptables.up.rules file.

Restart SSH

1
2

/etc/init.d/ssh restart 
* Reloading OpenBSD Secure Shell server's configuration sshd [ ok ]

Test Login
From the local machine start a new terminal and try to connect (keeping the original connection in case of any problems)

1
2

ssh –p 8888 root@IPaddress #should not work
ssh –p 8888 yourusername@IPaddress 

Lightbox’s are easy to setup and add immediate value to a site. But they are not just for images, html elements and other files can be displayed in a jQuery pop up.

It’s the little things that can make the difference in user experience. A great technique is to fade out any user notifications, we don’t want them hanging around after they have been read anyway.

I have my flash messages inside a div to better control the layout after the fade out has finished. If you don’t have some control over it, after the fade out the rest of your content will jump up to fill in the missing space left by the messages. The messages themselves are contained in a div with the id being the type of message, in my case error or notice.

1
2
3
4
5

<div id="flash_messages">
  <%- flash.each do |name, msg| -%>
     <%= content_tag :div, msg, :id => "flash_#{name}" %>
  <%- end -%>
</div>

Style according to taste:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#flash_messages{
  width:500px;
  height:35px;
  margin-top:10px;
}

#flash_notice, #flash_error {
  padding: 5px 8px;
  margin:0;
}

#flash_notice {
  background-color: #CFC;
  border: solid 1px #6C6;
  color:green;
}

#flash_error {
  background-color: #FCC;
  border: solid 1px #C66;
  color:red;
}

The jQuery magic. The timeout value (2000) is the delay before the fadeout starts. The (4000) value is the time the fade out takes to complete.

1
2
3
4
5
6
7

$(document).ready(function() {
        setTimeout(hideFlashes, 2000);
});

var hideFlashes = function() {
  $("#flash_notice, #flash_error").fadeOut(4000);
}

To play the lotto in the UK you need 6 unique random numbers between 1 and 49:

1
2

# 6 unique random numbers between 1 and 49
 @numbers = (1..49).to_a.sort{rand() - 0.5 } [0..5]

The post takes heavily from hackido.com, Slicehost Articles and the Pragmatic Programmers Deploying Rails Applications.

Once you have purchased the VPS login to the server using root user and password.

Check the configuration

First thing is to confirm what OS you’re using.

1

cat /etc/lsb-release

Then lets check the memory on the box.

1

free –m

Obviously those should tie up with the set-up configuration from the VPS provider.

Running Security Updates

You’ll want to run security updates now. Doing so helps protect against unauthorized access to your server as a result of any outstanding security holes in packages.

1
2

sudo apt-get update
sudo apt-get upgrade --show-upgraded 

Set the Hostname

Now we’ll set the hostname for your system. You can choose any name you like, but something unique and descriptive might be prudent. The hostname is what your machine calls itself, and you can choose any name you want. In this example, we will call it “george”.

1
2

echo "george" > /etc/hostname
hostname -F /etc/hostname

You’ll need a root user and a regular user

To create a regular user called “yourusername”

1

adduser yourusername

Be careful with root. After you’ve established your account, always log in to your machine as your own user instead of root. Simply use su or sudo to gain root privileges as needed. su stands for super user, and sudo stands for super user do.

Now edit /etc/sudoers.

1

 nano sudoers

Add this line at the end of the file:

1

yourusername ALL=(ALL) ALL

SSH keygen

One effective way of securing SSH access to the Server is to use a public/private key. This means that a ‘public’ key is placed on the server and the ‘private’ key is on our local workstation. This makes it impossible for someone to log in using just a password – they must have the private key.

To create the ssh keys, on your LOCAL workstation enter:

1

ssh-keygen -t rsa

If you do not want a passphrase then just press enter when prompted.
That created two files in the .ssh directory: id_rsa and id_rsa.pub. The pub file holds the public key. This is the file that is placed on the server. The other file is your private key. Never show, give away or keep this file on a public computer.

More guides on generating SSH keys for every main OS at Github Guides

SSH copy

Now we need to get the public key file onto the server. We’ll use the ‘scp’ (secure copy) command for this as it is an easy and secure means of transferring files. Still on your LOCAL workstation enter this command:

1

scp ~/.ssh/id_rsa.pub yourusername@IP address:/home/yourusername/

SSH Permissions

OK, so now we’ve created the public/private keys and we’ve copied the public key onto the server. Now we need to sort out a few permissions for the ssh key. On your server, create a directory called .ssh in the ‘yourusername’ user’s home folder and move the pub key into it.

1
2

mkdir /home/yourusername/.ssh 
mv /home/yourusername/id_rsa.pub /home/yourusername/.ssh/authorized_keys

Now we can set the correct permissions on the key:

1
2
3

chown -R yourusername:yourusername /home/yourusername/.ssh 
chmod 700 /home/yourusername/.ssh 
chmod 600 /home/yourusername/.ssh/authorized_keys

SSH config

Next we’ll change the default SSH configuration to make it more secure:

1

nano /etc/ssh/sshd_config

The main things to change, check, and add are:

1
2
3
4
5
6
7

Port 30000 #any integer between 1025 and 65536       
PermitRootLogin no 
PasswordAuthentication no 
X11Forwarding no 
UsePAM no 
UseDNS no 
AllowUsers yourusername

PasswordAuthentication has been turned off as we setup the public/private key earlier. Do note that if you intend to access your server from different computers you may want leave PasswordAuthentication set to yes. Only use the private key if the local computer is secure (i.e. don’t put the private key on a work computer).

If you would like to have a list of users who are the only ones able to log in via SSH, you can specify them in the sshd_config file. For example, let’s say I want to allow users rod, jane, and freddy to log in via SSH. At the end of sshd_config file I would add a line like this:

1

AllowUsers rod jane freddy 

Want an introduction to the Ruby programming language? Ruby is a general purpose object-oriented programming language that originated in Japan during the mid-1990s and was initially developed and designed by Yukihiro “Matz” Matsumoto.

It’s traditional to write a “hello world!” program in any new computer language. In Ruby to make your computer say hello you would type:

1

puts "hello world!"

Your computer would output:

1

hello world!

The puts tells the computer to print out whatever comes next. In this case a string containing the letters hello world!. A string in Ruby is just a bunch of characterless. The quote marks "" tell Ruby where the string starts and ends.

A string is one of the Ruby basic types. All the basic Ruby types are numbers, strings, arrays, hashes, ranges, symbols and regular expressions.

A string comes from the term – strung together, like stringing together letters to form words, sentences and paragraphs.

To make a link open in a new browser window or tab add a class:

1

<a href="http://www.starwars.com" class="new_window">star wars</a>

Add the following jQuery

1
2
3

$(document).ready(function() {
        $("a.new_window").attr("target", "_blank");
});