What not to do on your website

Or how to make me never come back.

Like other billions of times in the past (and I’m obviously not exagerrating) I just googled a very simple question and clicked on a link that seemed decent. And like many other times in the past I anded up on a website that I likely will not visit again, ever.

I would be willing to bet that many smarter people have already contributed to this topic, and a lot of them are more entertaining than me, but I just had to share something. There are a few very simple things that you can do to make me (and many others) never come back to your website. Quora.com just found one of them.

Experts-exchange is pretty famous for this one, and rightfully so. It seems like a basic Q&A site, but you don’t actually get to see the answers without registering. It also says you get a free trial, which makes me think that it will cost money after the 30 days. But I just never actually went to check it out because I can probably get better answers on a different site.

So now Quora.com pops up and I had never heard of the site before and is also asking me to register, or sign in with facebook. And the first thing I look for is literally the back button. I don’t spend another 3 seconds on the site checking out the features or whether or not it would be worth it. Although I do spend an hour writing a rant about it.

So since we now beat that specific problem to death, what are some other things that make me run from a website. Giant overlays are clearly at the top of the list. If you give me a full page overlay that doesn’t let me see the website there’s a good chance I’m gone by the time it finishes loading. If it’s an advertisement it’s probably even worse. Page load time finishes the trifecta. If it’s a full page advertisement that takes seconds to load I likely won’t see it because I’ll be long gone. Banners and ad blocks would be another, although fairly minor issue. If I do have to read something fairly long and I can’t focus on the text because something keeps blinking or moving on the side or top I might just get away. I do have advertising on this site, and I really wish I could tell google to only display text ads (But I would sell ad space if you have a non obnoxious ad you want to place !). And with that we have reached the obvious. If I get nauseated looking at your site I’ll probably leave, but colors and fonts aren’t actually that important as long as it’s fairly legible.

SQL Injection

and how to avoid it

SQL Injection seems to be one of the most common ways that hackers can steal passwords or other stuff that’s commonly saved in a database.

How it’s done: A lot of websites send some user input to a database inside of a query unfiltered. Heise has written an article on this EIGHT years ago, and yet it seems like quite a few people who should know better still don’t filter the input that gets sent to the database. This article goes into a bit of detail on how it’s done, but basically you find a way to get your own input sent to the database by the website. Let’s assume you have a Login form somewhere, that asks for username and password. Let’s then assume you have an SQL Query like this: “SELECT first_name from users WHERE username = ‘$username’ AND password = ‘$password'”. Now if you just replace $username and $password with whatever the user enters you might end up with a username like “‘; DROP TABLE users;–“. If you replace your username with that string that’s been entered into the username field of your form you will end up not having a table named users anymore.

The last article I linked goes into a bit more detail and how to use it more effectively on websites that are scripted to use index.php as the main page of the site and having it dynamically create websites with content from the database.

How to prevent SQL Injections: The obvious way would be to just str_replace(“”, “”, $username), but if it was that easy I wouldn’t bother writing this. Php even has a function that was supposed to account for all different ways people could mess with the user input. Now even the php manual says that it’s discouraged in favor of the top choices for avoiding SQL Injections. First, however, I suggest a different approach that no one really has commented on. You could just get the SHA-1 hash (hell even md5) for all the variables you’re using in a query. Obviously you would also have to save the hash of everything in the database. The where clause wouldn’t look like “WHERE id = 1” but “WHERE id = ‘356a192b7913b04c54574d18c28d46e6395428ab'”. Obviously the hash function always produces a string of the numbers 0-9 and the letters a-f, which means that it’s completely safe.

The more obvious choices, though, are either mysqli or PDO. Both of those php extensions support prepared statements and parameterized queries.

I have replaced all the SQL on my website to use PDO and the above query would look something like:

$query = $connection->prepare(“SELECT first_name FROM users WHERE username = :username AND password = :password”);

$query->bindParam(‘:username’, $username, PDO::PARAM_STR);

$query->bindParam(‘:password’, hashpassword($password), PDO::PARAM_STR);

obviously we calculate a hash of the password first. We bind both parameters and after that we can just $query->execute(); to send it to the database. Obviously inserting a row into the database like one would when putting a blog post into it gets quite a bit longer than it would ordinarily be, but as long as something that can be changed by users gets sent to the database one must take precautions.

I seriously hope people will be more security conscious in the future and at least think about what can happen when we send stuff to the database. Maybe eventually we can get rid of SQL Injections, cross site scripting, cross site request forgeries and session stealing. I have a feeling that it’ll be a while, though.

Webdesign chapter ten CMS Part 2

So basically we now have a table which could hold content if we wanted it to. Obviously that doesn’t get us all that far. Now we have the hard parts, first we need to get data into said table, then we need to get it back out.

I’m going to use php to do all of the data stuff, you could obviously also use ASP (which makes things very easy, considering the visual studio is free and an excellent tool, not just for ASP development (can write neat little programs with it pretty quickly, too), or you could use ruby, which has a nice framework for web development with ruby on rails, or even a number of other languages. I use php because it’s free, fast, and supported by damn near any web server out there.

So for now we’re going to make a page that has nothing but a form on it, a very simple one at that, with only a few text inputs, where one could just enter all the data we need to make a whole new website.

First we need to connect to the database (the following code is all php code, so i’m omitting the php tags):

$connection = mysql_pconnect(‘localhost’, ‘xyious’, ‘password’);

with that we’re making a new variable called $connection, to which we’re saving the result of the function mysql_pconnect. That function makes a persistent connection to the database, which I use in favor of mysql_connect for several reasons. mysql_connect should be used in most cases, though. The parameters for that function are server, user, password. Now we need to select the Database we’re using:

mysql_select_db(“WebsiteDB”, $connection) or die(mysql_error());

That function obviously selects our db, if no connection can be made to the database, the whole script will just stop functioning right there and then, and give out an error (that’s what that or die is for, which calls the function mysql_error() which gets the error that occurred.

Now we’re going to evaluate the input we get from our form (yes this seems weird, since we don’t even have that form yet…. but we’re getting there in a minute).

We’re going to make a variable named error that we increment every time there is an error, and then we check the variable after validating all the input to see if everything worked correctly:

$error = 0;
if (!$_POST[‘Author’]) $error++;

and we check URL, Headline and Content the same way. We don’t check tags or description because those don’t need to have a value. Next we’re going to build our query string, which will insert the values we get into our database:

if (!$error) {
$query = “INSERT INTO xyious_content (Author, URL, Headline, Content”;
if ($_POST[‘Tags’]) { $query .= “, Tags”;}
if ($_POST[‘Description’]) { $query .= “, Description”;}
$query .= “) VALUES (‘” . $_POST[‘Author’] . “‘, ‘” . $_POST[‘URL’] . “‘, ‘” . $_POST[‘Headline’] . “‘, ‘” . $_POST[‘Content’];
if ($_POST[‘Tags’]) { $query .= “‘, ‘” . $_POST[‘Tags’];}
if ($_POST[‘Description’]) { $query .= “‘, ‘” . $_POST[‘Description’];}
$query .= “‘)”;

That is quite a bit of code for someone just starting, but mainly we’re just making a new variable named query that holds the query string, and then just appends strings to the end of it, like tags if we entered any. The syntax (we use) to put our data into our database is:

INSERT INTO <tablename> (<column1>, <column2>, …) VALUES (“<value1>”, <value2>, …)

The columns do not have to be in the same order as they are in the database, but you don’t need to specify which columns you’re putting which values into if you put a value into every column you have. I need to specify the columns because I’m leaving out 2 columns (ID and Timestamp) which are automatically filled if no value is provided.

Now we just need to execute the query and our content will be in the database:

if (mysql_query($query, $connection)) {
echo “<h2>Content Added</h2>”;
} else {
echo “<h2>” . mysql_error() . “</h2>”;
}

We’re just giving out a short message if content was added successfully, and the error if it wasn’t.

Next we just display the form so we can actually get some data and then we’re done:

<form action='<?php echo $PHP_SELF;?>’ method=’post’>
<table frame=”void” rules=”none”>
<tr><td><label for=”Author”>Author</label></td>
<td><input type=”text” id=”Author” name=”Author” size=”100″></td></tr>

This is mainly just html. <form> will make a new form, action tells the web page what to do with the data it gets, in this case we’re just putting a php variable there that will put the address of itself (hence the evaluation code on top there, the form and the evaluation are the same page, it doesn’t have to be and in many cases you have one page for the form and another page that just does the evaluation, but it’s fairly straightforward to have it all together in one page, especially if it doesn’t get outrageously long), method is the method of submitting the data, get and post are the 2 options we could use. get doesn’t allow for values over 255 characters, so we have to use post here. Then we make a table just to align things right, and then we have the inputs. The label just puts a label on the input so we know what we have to enter, and then we just have input type text so we have a text field that we can enter data into. We do the same (label and input) for url, tags, headline, description. We use a textarea for the content, since it potentially gets very long, and then we just have a submit button that sends our values to the database:

<td><textarea id=”Content” name=”Content” Cols=”100″ rows=”25″></textarea></td></tr>
<tr><td></td><td><input type=”submit” name=”submit” value=”add”></td></tr>

And that’s it. Now we can put stuff into our database, with no way of getting it back out. It’s also not very comfortable.

Webdesign chapter nine: CMS part 1

CMS stands for content management system, and is what quite a few websites use to manage their content. The content of the whole website is stored in a database and tools are used to store data or display data. Which means that the php files on the webserver don’t even have content anymore, they’re just used to get the content from the database and send it to the browser.

What I’m going to do now is write my own CMS. Now I obviously won’t go so far as to include all the functions that any of the open source CMS have, I will just write a very basic CMS that is more of a proof of concept than something that actually should be used. I will, however, be using it to display my homepage at xyious.com. The CMS I will write will be so basic that it could be explained in a single blog post, it will be tiny compared to what’s out there for free (list here). Don’t try to go through that whole list and check out every single one of them, though. A few commonly used ones are Drupal,ImpressJoomla!Typo3 and WordPress. If you want to use a CMS, have a look at those first, see how they work, see if they do what you want them to do, and after all that, if you need something different, you can still have a look at other alternatives (or write your own !!! ;).

I will use MySQL as my database, since it’s the only one offered by my hosting provider. I would prefer using PostgreSQL, since there are no licensing issues at all, among other advantages.

A database is a glorified spreadsheet (please don’t send me hate mail, I do know that’s not quite true), you have rows and columns that you store data in (in 99% of all databases) and you have functions to get the data back out. Every column has a name or identifier that you can (or have to) use to get your data.

We’re gonna make a new table in our MySQL database like this:

CREATE TABLE `xyious_content` (
`ID` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
`Timestamp` TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL ,
`Author` VARCHAR( 255 ) NOT NULL ,
`URL` VARCHAR( 255 ) NOT NULL ,
`Tags` VARCHAR( 255 ) NOT NULL ,
`Headline` VARCHAR( 255 ) NOT NULL ,
`Description` VARCHAR( 255 ) NOT NULL ,
`Content` TEXT NOT NULL ,
PRIMARY KEY ( `ID` )
);

 

Create table obviously is the command to create a table (shocking i know), xyious_content is the name of the table we create, then on every line we have a column that we create. ID is the name of the first column, INT is the datatype, in the unsigned variety, not null means that we can never put “NULL” into this column and auto_increment means that we don’t need to actually put a value into this column, if no value is provided the last automatically entered value is incremented by one and that value will be used. The other datatypes we use are Timestamp, which saves a point in time (if no value is given the current date and time will be used), Varchar which means that a string of characters can be entered between 0 and 255 chars long, and Text which is a variable length text type that holds really long texts if it needs to. Primary Key means that we can reference any row by this column, which means that it has to be a unique value. I hope I didn’t add to the confusion with that paragraph. Please check the documentation of your database if anything is unclear.

Webdesign chapter eight: CSS media query (fixing chapter 6)

I just wanted to post a quick entry about the chapter 6 that I kinda screwed up.

In the mean time I have remade the layout that I had wanted to use for my website using float instead of fixed position. I do think that it should work using fixed position, but it apparently does not.

Mainly we just have 2 lines that give us the 2 column layout that we would like to have:
div.sidebar-left-outter {float: left; width: 15%; height: 100%; }
div.main-outter {float: right; width: 85%; height: 100%; }

And then in the media query CSS file we have the following block of code:
@media screen and (max-width: 799px) {
div.main-outter, div.sidebar-left-outter {float: none; width: auto; height: auto; margin: 0 auto;}
}

So mainly we’re just clearing the float to make text not float around our 2 columns (which it never does, which is why I think it’s a misapplication of the float property, but many people recommend doing it this way), then we set the width to auto, which tells the browser to use all the available space. Obviously we can’t have 100% height on both elements that both use 100% width, since then we could only see one of them, and we set the margins to 0.

Webdesign, chapter seven: CSS media query part 2

Ever since i wrote the last blog entry I’ve been wondering how we can have a layout for internet explorer (who to this day doesn’t get media queries) than for the browsers who understand media queries.

Now we have made a beautiful layout that changes from a standard 2 column layout to a 1 column layout depending on how wide the browser window is, and there’s no way to tell internet explorer what to do without the risk of screwing it all up…. well obviously there is. Actually there are a few ways, but i didn’t really like any of them, so eventually I came up with my own.

So for that we just take advantage of the fact that IE doesn’t get the media queries.

We just include the basic CSS file first like so:
<link rel=stylesheet href=”include/body.css” type=”text/css”>
<link rel=stylesheet href=”include/print.css” type=”text/css” media=”print”>
and then ! below the basic CSS file (so that it’s closer to the content, and therefore overwrites the basic CSS if neeeded:
<script>
@import url(‘include/queries.css’) screen and (min-width: 1px);
</script>

Now we have a basic style for our website in case the browser doesn’t get media queries yet, and we can have a nice layout for everyone who uses a decent browser (whole thing visible on my homepage).

Webdesign, chapter six: CSS media query

I think I have a new pet peeve. There are way too many designers who put specific dimensions on their websites/blogs/etc. Even the default blogger theme has a set width in pixels. Most designs on the CSS Zen Garden have a width in pixels. Now obviously they want their stuff to look good, and I have to respect that. However, I don’t really think it looks good when viewed on a monitor that isn’t the specific single one that they used to make the design. You can’t even make your design for the “most popular” monitor in use today since there are so many different sizes and even aspect ratios that it just doesn’t make sense. Yet still, A LOT, of websites use dimensions in pixels rather than percentages.

Now that I’m done with my rant…. We can’t really just make our content width and sidebar width use percentages instead of pixels and be happy with it. In the best case we will have a few users that will see a scrollbar on the navigation while not having very much room to see the content, in the worst case our site isn’t usable at all for some people. Also when someone wants to print out our page because of the excellent content we have, they’re probably not interested in seeing what links you have on the left there.

With that I give you CSS media types (not usable in Internet Explorer until version 9 comes out).

You can define CSS media types in 3 different ways (seems like anything in CSS has 3 different ways of doing it):
When loading a separate CSS file as we have been doing it:
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen”>,
The @media rule:
@media screen { p {color: blue;}}
The @import rule:
@import url(“style.css”) screen;

Now obviously we’re making a new style sheet for the print media type with dark text on white background, in case we’re not already having that as our standard style sheet.
But, and even more importantly, now we can use CSS 3 media queries to see how wide the user’s screen is, and, if necessary, put the navigation below the content:
In our print style sheet we change the three lines below:
div.sidebar-left {display: none;}
body {color: #000; background-color: #fff; font-size: 100%}
h1 {text-align: center; margin: 0;}

we also took out the div.main code since we only have the 2 columns and if we don’t give it any style information it will just inherit the styles from the body which is what we want right now. (note I actually changed the sidebar class to sidebar-left !)

Now we just have to change the style sheet for the screen a bit by putting in a few media queries:
For now I just appended the following to my style sheet:
@media screen and (max-width: 600px) {
div.main {position: fixed; top: 0%; left: 0%; width: 100%; height: auto;}
div.sidebar-left {position: static; width: 100%;}
}

The whole thing is visible here. It’s quite interesting to see what happens when you resize the window (changing width to less than 600 pixels).

Now as i said before, the Internet Explorer can not handle media queries and neither can older browsers. The first part of that last sentence is important, older browsers are obviously less and less of a problem as we go forward, all of the talk about having your browser up to date so you don’t get hacked and the media attention it has received lately has obviously helped that situation along a bit. Either way for now we have a style sheet that includes the styles that we want and we just hope that everyone using a browser that can’t handle media queries has at least 601 pixel wide monitors.

Webdesign, chapter five: PHP part one: replacing navigation frames

This post will just very briefly go over a few very basic functions of PHP, mainly just those we need to have a navigation “frame” on the left without having to put it into every single website we write.

PHP originally stood for Personal Home Page (tools) and is a scripting language (programming language) that i have not seen used anywhere but on websites. It is possible to use PHP on the command line but there are languages better suited for pretty much anything you do that is not web related.

To use PHP you need to have a web server (or web hosting) that can interpret php into html. Luckily nearly all of the web hosters today do that, and you can configure the usual web servers to work with php as well (I’m assuming that there are web servers that can’t do php, but I don’t think they would be very easy to find).

We only really need one line of php to put the navigation into our website, and thus one added line of php into all of our websites to put a navigation into all of them this way.
To add php to your website you need give your file the extension php instead of html and then you have to put your php code into tags like this: <?php <insert random php code here ?>.
The code we need to add to our website is include “<filename>”;.

We’re just going to throw the <?php include “navigation.html”; ?> into the left sidebar of our website and we already have a navigation frame …. given that we actually have a file called navigation.html in the same directory as our website.

The navigation file we’re including looks something like this:

<div class=”sidebar-right”>
<h1>Navigation</h1>
<ul>
<li><a href=”http://xyious.blogspot.com”>Blog home</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-intro.html”>Webdesign Post 1</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-two-css.html”>Webdesign Post 2</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-three-css-syntax.html”>Webdesign Post 3</a></li>
<li><a href=”http://xyious.blogspot.com/2010/08/webdesign-chapter-four-css-part-three.html”>Webdesign Post 4</a></li>
<li><a href=”http://xyious.com”>My Website</a></li>
</ul>
</div>

I have changed the CSS a tiny bit to make the colors a bit more friendly and reduce the gap between navigation and content to .5%.

The html code (between the body tags) looks like this (viewable here):
<?php
include “navigation.html”;
?>
<div class=”main”>
<h1>Hi There !</h1>
<p>some text</p>
</div>

And now you know one way of putting the navigation bar into all of your websites…. There are easier and harder ways to do it, some of which i might actually show you.

Webdesign, chapter four: CSS part three: replacing navigation frames

Everyone wants a navigation frame on the left, but everyone knows that frames have been outlawed…. or frowned upon anyway. Now you could use inline frames, which have not been obsoleted yet, but i think for the navigation of a website CSS (and a bit of php) works better.

Replacing the frames is pretty simple, but it would require us to put the navigation into every single page of the website…. and i will show you how ! I will later show you how to make it so you have a separate file for your navigation, just like you would when using frames.
For now, we just use a bit of CSS to make things appear where we want it to, which is navigation on the left and the main content on the right.

CSS has a few different ways of defining position: absolute, fixed, relative, static, and inherit. Inherit just inherits the position from the parent element. Static would place the element where the browser would ordinarily put it, in the flow of the website. Relative specifies where the element would be relative to the parent (you can move it to the left, right, up, down, relative to the parent element). Fixed positioned elements will stay where you put them, even if the website gets scrolled, even if an element would be covered by scrolling, the fixed element will stay right where you want it to be. Absolute position would put an element at a defined position relative to the first element that has a position other than static, if there aren’t any, the html tag is the one that will be picked.

So with that we’re obviously going to separate our website into 2 different areas with fixed positioning. The left one will be 15% wide and the main one will be 84% wide, with 1% left as a separator.

We’re going to use an external style sheet for that which will look like this (for now (saved in post4.css)):
body {color: #08f; background: #fff; font-size: 100%}
h1 {text-align: center; margin: 0;}
div.sidebar-right {position: fixed; top: 0; left: 0; width: 15%; height: 100%; background-color: #00b;}
div.main {position: fixed; top: 0%; left: 16%; width: 84%; height: 100%; background-color: #000;}

and the html for the page looks like this (viewable here):
<head>
<title>Webdesign: chapter four</title>
<link rel=”stylesheet” type=”text/css” href=”post4.css” />
</head>
<html>
<body>
<div class=”sidebar-right”>
<h1>Navigation</h1>
<p>link to something</p></div>
<div class=”main”>
<h1>Hi There !</h1>
<p>some text</p>
</div>
</body>
</html>

obviously the colors aren’t all that great yet, but it’s reasonably good for demonstration purposes. The body itself has a background color of fff (white), which is then covered by 00b (reasonably dark blue) on the left and 000 (black) on the right, leaving a 1% separator between the navigation and the main content, which is not covered and thus white.

Webdesign, chapter three: CSS syntax

This is going to be a very short post because all I’m saying here I should have said in the last one.

In the last post I have just briefly mentioned how to put CSS into an html document. I failed to mention what it is we’re actually doing. It is all pretty simple and the syntax is the same in all three forms of integrating it into an html document. In the previous post I had two examples:
<body style=”color: #f00;”>
and:
p {color: #00F;}.

The only difference here is that in the first option we put the CSS code inside the html tag itself and thus we obviously don’t have to specify which tag the CSS code applies to.

The second one is how it usually looks: We have a Selector and a declaration of property and value. Here we’re giving the property color (for text foreground color) the value #00F, which is blue. The Selector can be either a tag, a class, or an ID. If we’re writing code specific to one html tag we just put the exact tag into the CSS code, without the angle brackets, and define what we want to change. If we write code for an ID we’re changing one specific tag inside the html document, for example:
#uniqueelement {color: #F00;}
defines a specific element that would look something like this in html:
<p ID=”uniqueelement”>some red text</p>.

If we were to put two html tags into the same document with the same ID, the browser should only apply the CSS to the first of them.

Classes are more useful in my opinion, in the CSS code you define a class by putting a dot before the name of the class and then just add your declarations:

.italic {font-style:italic;}. Then you add that class to the tags that you want to be printed italic:
<p class=”italic”>This part should be italic</p>. You can even use multiple classes inside the same html tag.

So with that you should be able to write your own basic CSS code and get all the style information out of the html tags. enjoy.

ps. I also think it’s weird that I capitalize CSS but not html, but I think HTML looks weird.