Website creation Infographics: Cheap Online Services vs. Web Design Agencies

Web-servers and database set ups

This is not going to be an in-depth post for advanced folks. Rather, this is a post for beginners to help them make heads and tails from all the things that seem to be so complicated. Or this can be treated as a base or auxiliary material after which you should go hit up Google for more information. You should just get a basic understanding of how things work out of this post.

Alright so. Database is a place where you keep your data - the stuff that you will need repeatedly or that will need to be updated or added in the same format. You can create many tables in a single database. And each table can have as many columns as you want. Each column needs to have a type - string, integer etc, can have a limitation of how many characters long will the type be like varchar 255.

For example if you're making a category menu for your website I'd rather put it into a database - this way I can easily change and add categories without having to go into the code, finding the right spot, and modifying the same code in many files.

Anyway. So if database is a place for data it also needs to be somewhere - needs to have a physical location just like anything. So, when you go host a website that provides you with a databse of any kind you should get an email from them letting you know the HOST name of that database, and other information. In this case setting it all up is easy - you either get an email or you can log in to the website that's doing the hosting and find all the info you need.

Now say you don't have a website, or didn't get a database with it but suddenly you need to test some stuff out with databases.

No problem there - go download WAMP servers (or something similar. WAMP is my personal preference) and install it. What happens is it creates a virtual server - in reality the server is on your computer there is a folder where all of the data, files, etc is stored. Now RUN the servers. This kind of server is accessible only on your computer - locally. Since it's local it got the name localhost.

Once this is done open your browser and type in localhost in the address bar and hit enter (or get there some other way). Go to phpmyadmin. Create a database there - can be empty (no tables).

On the right of your phpmyadmin homepage there is all kinds of information:

Server: localhost (localhost via TCP/IP)

Software: MySQL

Software version: 5.5.24-log - MySQL Community Server (GPL)

Protocol version: 10

User: root@localhost

Server charset: UTF-8 Unicode (utf8)

This means your HOST NAME or SERVER is localhost.
Your database is MySQL (there are many other databases like Django etc. MySQL is a database but not all databases are MySQL :D )
and the default user is root . root@localhost is the same as myName@gmail.com gmail is the SERVER and myName is the user. so if you're logging into gmail you only input the name before @. but if you're giving your email to somebody it will be the whole thing. Remember that localhost is running locally :)

By user they mean database user. Like admin or just somebody who is allowed to view or edit the data in the database. This is not a user of your website that needs to register. Different things.

By default the password for root user is empty.

So this is enough information for your page to be able to connect to your database. Here's an example in PHP:

$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
$dbname = 'myDB';
mysql_select_db($dbname);

Of course you can just do :

mysql_connect('localhost', 'root', '');
mysql_select_db('myDB');

MySQL_connect is a function that takes STRING arguments so everything is in quotes. Since there is no password you write an empty string - '' or "".

If you are using a framework or software where you're give fields to fill out you write all of that without quotes. Here's a wordpress example:

Database Name: myDB (your database. can be empty but must be in existence :) )
Username: root
Password : (leave blank)
Database Host: localhost
Table Prefix: wp_ (your tables in that database will always start with wp_ )

This is a very basic set-up and is quite simple you need at very minimum 4 things - server / host , username, password, database name. That's it. Usually there are tooltips or descriptions that tell you what the field needs to be - make sure to read it. Don't panic if something doesn't work - maybe you need to provide additional information like port number or what have you. Read the documentation, look things up on your localhost, just Google for a specific question. Trust me you're not the only person with that problem - There are communities online where you can ask questions and get answers and solutions and if you Google for something you will most likely come across a solution exactly for your problem :)

 

Twitter Bootstrap - Layouts

About Bootstrap

(skip this part if you know about this project)

 

http://twitter.github.com/bootstrap/index.html

Bootstrap is a tool that will make web-development and web-design very easy. You can make a very clean, professional looking website in a very short time and with very little effort if you choose to use it. It's absolutely free and doesn't really require working knowledge of JavaScript or jQuery, although that would certainly help and give more versatility to what you can do and how you can use other components. But that will be a separate post. For now, I'm just going to explain the layouts
Bootstrap provides.

So, first things first, go download Bootstrap and include the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My page</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>

If you are planning on using the JavaScript components you will also need to get jQuery and include the following in <head></head>:

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

But I will talk about this later and for now you just need the css stylesheet from Bootstrap.

Bootstrap Layouts

Remember what a painful experience it was making sure that your layout will look good across browsers? Making tables to tie all the components together or using CSS styles to position divs? And adding special extra codes to make sure it will all look the same in IE and Mozilla? As if that wasn't enough for poor web-developers and web-designers then phones came out adding even more headache. Forget all that.

Bootstrap provides a layout system that will look the same across any major browser (IE7 and up), phone, and tablet. It is done through a grid system. There are 2 grid systems - fixed and fluid. Fixed is based on pixels, and fluid is based on percentages. The standard width of your page is 940px but you can use a variable-width grid as well.

The grid system uses 12 columns. They can be wrapped into rows. The sum of column numbers must be equal to 12 for fluid layout. Like column 1 and column 11. Or 3 column 4s, or 12 column 1s etc.

Also you can offset columns to leave some empty space equal to the width of any of the 12 columns.

So all of that sounds like making a table only instead of actual values you use numbers 1 through 12 and can merge columns. Wrong. You use divs and assign them classes. Here's basically how you do it.

At first you make a 'container' div.

<body>
<div class="container">
...
</div>
</body>

For fluid grid set class="container-fluid"

<div class="row">

<div class="span4">...</div>

<div class="span8">...</div>

</div>

 

For fluid layout use row-fluid instead.

 

.span1 is the smallest column and .span12 is the widest. The code above will look like a 2 column layout with first column being narrow and second being wide.

 

The way offsetting works is through adding an .offset class where N varies 1 through 11.

 

<div class="row-fluid">

<div class="span2 offset2">...</div>

<div class="span8">...</div>

</div>

 

This will offset the first column by the width of span2 to the right. Notice that the sum of span numbers and offset numbers must equal 12. It's important for the fluid layout as it is based on %s.

You can also nest rows inside rows. Still simple code.

<div class="row">
<div class="span12">
Level 1 column

<div class="row">
<div class="span4">
Level 2
</div>
<div class="span8">
Level 2
</div>
</div>

</div>
</div>

Now that almost looks like the layout of this blog.

Bottom line is you don't have to worry about sizes, margins, paddings, etc and your code will look very clean and short.

If you're a fan of drawing a basic look of your page in Photoshop or Illustrator you can do it quite loosely now and just use the graphics rather than slicing everything up and calculating margins and offsets. I think of it as building blocks - build the skeleton of your website, loosely add artwork and text and convert it to html. This way instead of showing a picture to your client you can just show the page right away which to most clients will look like you did a lot more work. And you can show it on your phone, too, making the client even happier.

And as you can see all you have to keep in mind is the Bootstrap classes for divs - container, row, spanN, offset. Quite intuitive and easy to remember.