The Final Part: Pulling the Information Out

The first thing we are going to do is create 2 files in our root folder: index.php and database.php.

Open up database.php first. It should be a blank file; no HTML or anything. When writing PHP code, it should be contained within the tags. That way, the server knows to read it as PHP code and process it as such. We are going to reference our database and be able to work with it in our PHP file.

Type in the following code:

1.$host = "localhost";
2.$user = "root";
3.$password = "";
4.$db = "tut-portfolio";
5. 
6.$mysqli = new mysqli($host, $user, $password, $db) or die('Could not connect to database.');

In PHP, the $ sign represents a variable. A variable is a method of storing data; in our case, we are simply storing strings, and indicating the start of a new function.

What we have done is opened up a connection to our MySQL database. The $host is the location of the database; in our case, since it’s on our own computer, we will reference it as localhost. The $user is the username to the database; if you are using WAMP, it will be “root” unless you changed it. The $password is obviously the password; for WAMP, the default password is nothing, so leave it as such. Finally, the $db is the name of the database. I called mine tut-portfolio. It must be exactly the same as the one you created in phpmyadmin.

The last line is where the magic happens. We start a new variable called mysqli; within it, we are using the MySQL Improved method to make our database connection. You may have seen people using mysql_connect, but this method is semantically correct and a much better way. We indicate the start of the mysqli class by writing “new mysqli”. Within brackets, we call the variables we set earlier; when starting a new mysqli class, the parameters go in the following order: host, username, password, database. You could either type it in within strings (in quotation marks), or use variables like we did. I prefer the variable method; it allows you to use those variables multiple times and update them easily. The point of PHP is to simplify the amount of code you have to write; if you are typing in the same strings over and over again, when you go back to change even one character, you’ll have to do it multiple times. For example, what if you change the password? Having a variable will allow you to easily update the entire code by changing it in one place.

The or die() statement will only be shown if the script fails. If, for whatever reason, you are unable to connect to the database, the string, “Could not connect to the database.” will be shown. It will also stop the script from going any further. This helps as it points out exactly what’s wrong with your page according to your specifications, and tells the viewer that something is not right rather than just displaying a blank page.

Always remember that each PHP statement must be ended by the semi-colon, otherwise the browser will throw an error.

Alright, we’re done with database.php, so close that up. Now, open index.php. Since we’re going to be combining PHP and HTML on this page, you should start off with the standard HTML code (doctype, title declaration, etc.) On top of the doctype declaration, we will start our PHP code. Start your PHP tags () and enter this code:

1.require 'database.php';
2. 
3.$query = 'SELECT image, description, name, link, technologies_used FROM clients' or die('Could not complete query.');
4.$results = $mysqli->query($query) or die('Could not process results.');

Alright, let’s analyze this code. The “require” call selects the file we specify (in this case, database.php) and makes it absolutely necessary for the script to run. There are other calls like this, such as include, but I am using require because without connecting to the database, our page won’t run. If the script doesn’t find database.php, the script dies right there and does not execute any further.

1.$query = 'SELECT image, description, name, link, technologies_used FROM clients' or die('Could not complete query.');

We then create a new variable called query. A query is a statement that will be given to the MySQL database, and will perform the actions we tell it to. This is SQL code, by the way. Everything you see in caps is a command we’re giving to the database, basically. We’re telling it to SELECT certain fields from the database. There are two ways to select fields; you can either type their names out if you only want some of them, or you can use the asterisk (*) to select all the fields. We’re selecting all the fields, however, we’re listing them all out. Why? Because if we happen to use the asterisk and add, for example, 6 more fields to the table that don’t pertain to our script, those fields would be selected too. Listing them all out is not only a safer method in terms of overloading the script with data, but it is also easier to see which fields are being used.

The FROM states which table we’re selecting the fields from, which is called clients for us. We then end our query variable with an or die statement, just to stop the script from executing further if this part fails. Basically, what this query will do is get all the items under the fields we specified.

1.$results = $mysqli->query($query) or die('Could not process results.');

After our query variable, we start another variable called results. This variable will contain the results from our query. But we have only created a query variable; we have not actually sent it to the database. The way we do that is access our database connection variable ($mysqli) and use an arrow (->) to access the query parameter. Basically, what we’ve done is accessed our database, and used the query call to send our $query variable to the database. If that doesn’t work, the script dies and tells you that it could not process the results.

That’s it for our PHP ABOVE the HTML. This accesses the database, sends the query, and keeps the the results in a variable to be used later.

We have our results…but they’re not displayed on the page. The way we’re going to make them display is by using PHP code within our body. I created a div called page-wrap (just to center the page; I’m not getting into the CSS bit) and put the following PHP code in there:

01.if($results) {
02. 
03.while($row = $results->fetch_object()) {
04.$name = $row->name;
05.$image = $row->image;
06.$description = $row->description;
07.$link = $row->link;
08.$technologies_used = $row->technologies_used;
09. 
10.echo "<div class='project'>";
11. 
12.echo "<img src='$image' alt='$name' />";
13. 
14.echo "<div class='projects_links'>";
15.echo "<ul>";
16.echo "<li><a class='link'' href='#'>View Details</a></li>";
17.echo "<li><a class='link' href='$link'>View Site</a></li>";
18.echo "</ul>";
19.echo "</div>";
20. 
21.echo "<div class='technologies_used'> Technologies Used: $technologies_used </div>";
22. 
23.echo "<img src='images/projectSeparator.jpg' alt='project_separator' class='project_separator' />";
24. 
25.echo "<div class='project_title'>$name</div>";
26. 
27.echo "<div class='project_desc'>$description</div>";
28. 
29.echo "</div>";
30.}
31.}

Alright, this last chunk of code is pretty repetitive. We’re using an if statement to run our code; if there is data in our $results variable, then all this code will be run. The while statement will repeat itself as long as there are rows of data in the $results variable; we take each row one at a time and put all the data in a temporary variable called $row. This data will be contained as an array, which, in layman’s terms, contains multiple objects in 1 variable. I’ll get into more of that in another tutorial. Then, we fetch that data using the fetch_object command, and set each of the fields from the database to a variable. The way we target each field is using the $row->[field name] method; when using arrays, you call the variable first, use and use an arrow to the specify the object you want to use.

After we store each field as a variable, we begin to echo out our information. I’m not going to get into the HTML because it’s the way Total Pixelation Studios’ portfolio page is done (and it’s irrelevant to this tutorial). Basically what I’ve done is create a div with a class of “project”, and echoed out all our information within it.

The echo command basically spits out everything in front of it as HTML.

1.echo "<img src='$image' alt='$name' />";

We echo out an image tag, but instead of statically referencing an image, we put our variable there. Every row of data has a different image; since this echo statement is in the while loop, it will show a different image for every project. We also set the alt tag to the name of the project.

After that, I’ve basically done the same thing for each line. For the project links, I’ve made a simple unordered list navigation and put in the $link variable for the location. The project title is stored in the $name variable, so within the “project_title” div, I put wrote $name, rather than an actual name.

Now echoing all this information out may not be the best way to do this, but it sure is the simplest. I wanted to keep this tutorial simple for the newcomers to PHP, so there you go.

After the while loop is complete, it will run over and over again until there are no rows of data left within the $results variable. This way, it displays all the data that was retrieved from the MySQL database.

With a little bit of CSS, you can have a portfolio page that looks like this:

final
Final Product

I hope this helped you on your trek to learn PHP, and get coding!

Tools for Web Design and Development

I thought that an introduction to tools used in web development would be a good start for a first article. This will be good for beginners as a starting point, and will give you an idea of what you need to get started with your first website. By the way, this is a long article, so make sure you have time on your hands. So, let’s get started!

Graphics Software

It is virtually impossible to create a good website without developing a visually appealing layout first. Whether it is something simple such as a two-column layout or a complex website with loads of JavaScript and CSS hacks, you need to first develop a layout. The premier program for this is Adobe Photoshop. As one of the most versatile graphic-editing programs available, Photoshop is the most commonly used software by web designers. It’s multitudinous features allow for endless possibilities by simply tapping into your creative pool. Only problem is that, at $699, Photoshop is a little bit towards the expensive side. Although there are other programs such as GIMP available, I stand by my opinion the Photoshop is the best one. Seeing as it’s the only program I ever used, I’m just going to describe it a little here.

There are lots of tools in Photoshop that help to create a layout. Here are the most useful ones; you will get a more hands-on look at them during my first screencast, which will teach you how to create a layout in Photoshop.

    • Marquee Tool: The marquee tool allows you to make selections of varying shapes. Although it may seem basic, combining selections (adding and subtracting) can allow for some cool concepts in your design.
    • Move Tool: The move tool is self-explanatory; it may seem silly to mention it here, but it is obviously an important asset in Photoshop.
    • Brush/Pencil Tool: The brush tool is primarily used for design; you can select brushes of various styles (ex. grunge, tech, splatter, etc) and make use of them in your design. With the large amount of brushes available to download, the possibilities of creating a unique layout are endless. The pencil tool is a non-anti-aliased version of the brush tool – that’s not to say it isn’t useful, though. Use the pencil tool to add simple touches such as a 1 pixel line separator to your website; it may seem simple, but it does loads to enhance your design.
    • Fill/Gradient Tool: The fill tool fills a selection with a certain color; it is present even the simplest programs such as Paint, so I’m almost 100% sure you would know what it is. The Gradient tool fills a selection with a gradient, which is a gradual change from one color to another. Using subtle gradients can greatly liven up your design.
    • Eraser Tool: The eraser tool erases things. I don’t think I need to say more about it.
    • Pen Tool: The pen tool cannot simply be described in one little blurb. It is a versatile and important tool in the field of design, but it comes with the price of being extremely complex. You can use it to cut a person out of an image, make selections, use it to create gradual strokes, and much more. I might just dedicate a whole article to this tool.
    • Text Tool: The text tool allows you to write stuff. It comes with the option to write vertical/horizontal text. You can use the pen tool to create a line on which you can write text, and the text will follow the line exactly.

Those are just some of the tools that you see when you open Photoshop. There are many more features that are regularly used when creating a website. I suggest that you just play around in Photoshop, follow tutorials (resources at the end of this article), and get familiar with the program. Also learn the shortkeys, they can save you TONS of time.

Code Editor

The code editor is the most important program that is used for web development. After all, it doesn’t matter if you have a layout if you can’t put it into a browser, does it?

There are hundreds of code editors out there, and each of them advertise themselves as the best. I’ve experimented with many code editors, but I have found Aptana to be my favorite. It’s code hinting is very useful, and you can theme it to change its appearance. Of course, it comes with code highlighting, as do most editors. Also, it does not come installed with support for every single language; it has plugins that you can download to install support for the script you want. For example, let’s say you need to code for the iPhone. All you have to do is download their Apple iPhone plugin, and you have full support for that particular language. Yeah, it’s that easy. Best of all, it’s free.

Another code editor that I avidly used was Adobe Dreamweaver. Unlike Aptana, it has built-in support for all scripting languages. It doesn’t have the theme capabilities of Aptana, which I, personally, don’t like. I prefer working on a dark background as opposed to a white one; it’s a little less harrowing to the eyes. Dreamweaver also has a large snippet library, which comes useful when you’re still learning all the various codes. This is an expensive program at $399, but it is worth the money, considering its multitudinous features.

A great article was written by Andrew Burgess of Nettuts+. It outlines 18 IDEs for Windows, Mac, and Linux. You can view it here.

Other Programs/Tools/Tips

You need an FTP program to upload files onto your server. I recommend using FileZilla; it is a free program that uses minimal RAM and works efficiently. It looks ugly, but does that really matter?

As a rule of thumb, always design for Firefox. After you finish your coding for Firefox, go into other browsers (ex. Chrome, Safari, Opera, IE8, IE7, and the dreaded IE6) and fix anything that’s wrong there. If need be, you can use a browser-specific stylesheet. Anyways, there are two extremely useful addons for Firefox that you MUST have. Trust me, when you run into trouble, you will be able to easily figure the problem out using these two addons. The first one, the Web Developer Toolbar, has so many useful features that it isn’t possible to list them all here. Using it, you can view your site (and other people’s websites as well) with JavaScript disabled, cookies turned off, styles disabled (I haven’t found a reason to do that yet, though), and more. You can also inspect the various elements of a page by pressing Ctrl+Shift+F. This highlights each element and provides all the information you can imagine about it. You can also edit CSS live using this addon! Check it out here, and download it. Now.

The second addon is called Firebug, which allows you to inspect elements, just like the Web Developer Toolbar. However, Firebug pinpoints the area in the HTML where that element is present, as well as all the locations it is styled in ALL attached stylesheets. Talk about making life easier. You can edit and monitor HTML, CSS, Javascript, and a lot more. It also comes with a console that can be used for debugging (that’s much more advanced stuff), and a lot of other stuff.

A program that makes my web design life way easier is called FasterFox. Contrary to what it sounds like, it is NOT a Firefox addon. This program allows you to write snippets of code that are activated when a certain key combination is pressed. It makes writing code a lot faster. For example, if I type in “img” and press tab, it writes the whole HTML code for embedding an image. You have to write all the snippets yourself, but it’s a great time saver.

Alright, I think that I have covered a fair amount here. I am going to create a screencast (or a series, I haven’t decided yet) in which I will create a website in Photoshop, and code it using HTML/CSS. Hopefully, I can show you some features of everything I mentioned here in that screencast. I originally intended for this to be a short article and make a screencast introducing all these programs, but I saw no reason for that once I started writing this. Anyways, I hope this helped you out, and check back soon for that screencast!

SEO? Yeah, I Know How to Do That

Almost every single client I have had has asked me to implement their idea of SEO into their website. That idea is meta tags. Search Engine Optimization, although a highly desirable trait for a website (for obvious reasons), is extremely misunderstood. I’m not an expert, but I have enough of an understanding to explain how to implement some strategies that will help your website to properly get indexed by search engines.

“Just add the meta tags. That’s going to make me number one on Google, right?”

What is Search Engine Optimization?

SEO is the process of optimizing a website in ways that will help search engine spiders to index your website upon keyword search by a user. In layman’s terms, it is using a few strategies that will help your website attain a higher spot when someone searches for certain words.

The simplest way to explain how search engine spiders work is that they “crawl” through your website, picking up on repeated words and various tags that are in place. The most important thing to know is that they only crawl through text.That means that any content you display using Flash or within images will not be seen my search engines. You can (and should) use some SEO strategies that will make it easier for these spiders to quickly go through your website.

The Tips, Tricks, and Strategies

Contrary to popular belief, meta tags are not the most important search engine optimization tools. Your best bet would be to pay attention to your content – specifically, the keywords. Focusing on just a few keywords within your site will help boost your search engine spot tenfold. Easy, right? It may sound simple, but it takes a lot of thinking and work.

Let’s say that I’m making a web development firm’s website. The keywords they want are:

“Web Development, Web Programming, PHP Coding”

Note: I just made these up on the spot; when you decide keywords for you website, it will require a lot of research.

Out of these, one should be your PRIMARY keyword. This is the one you want to focus your search engine optimization tactics on. With that in mind, you will also work to raise your rankings for the other one.

The first thing you would want to do is include these in your website title. When search engines index a website, having your keywords in the title helps them to “realize” that these are important words. This will help you get higher in rankings for the keywords you choose. If you’re running a blog, it’s a good idea to incorporate within your post titles the keywords that actually represent your post. Page and post titles are extremely important factors for both, search engines and user desirability, and their value should be maximized as much as possible.

“So my title will be: Total Pixelation Studios | Web Development, Web Programming, PHP Coding”

Within your actual page, try to include the title in an H1 tag. If you have an image for your logo, put your title within an H1 tag, and use the CSS text-indent technique to offset the text. Then just include your logo as a background image. You would code your title like this:

1.<h1 id="title">Total Pixelation Studios</h1>

And then the CSS text-indent technique would be as follows:

1.#title {
2.text-indent: -9999px;
3.background: url(images/your-background.jpg);
4.width: xxxx px;
5.height: xxxx px;
6.}

Where xxxx px is equal to the width and the height of the background.

The next thing you want to do with keywords is to include them within your page’s content as much as possible. This is called keyword density. The higher your keywords occur, the higher your rankings go within search engines. But be careful; repeating a keyword too many times is bad. It may lead to search engines not even indexing your website. What’s worse is that repeating the same word hinders user readability; always remember that you’re writing for people not search engines. Ideally, you should aim for about 5%-7% keyword density (ex. if you have 1000 words in your page, then the keywords appear about 50 times, scattered throughout).

Also, update your website frequently. Obviously fresh content brings more visitors, but it also adds relevancy to your website in accordance with search engine spiders.

After you have sufficiently created ideal content using the above rules, you should move onto the meta tags. There are two important meta tags – the keywords, and the description. They’re self-explanatory; the keywords tag contains your keywords, and the description tag contains your website’s description. Meta tags go into the head of your document. For example:

1.<!--<meta name="description" content="Total Pixelation Studios is a web development company based in Toronto focusing on web design/development and graphic design." />
2. 
3.<meta name="keywords" content="Web Development, Web Programming, PHP Coding" />-->

Note: For some reason, the script I use to display code wasn’t showing the meta tags. I have enclosed them in HTML Comment tags just so they show up; you would use meta tags without them.

These meta tags are read by search engine spiders. The descriptions you see when you search something on Google usually come from them as well. If the spiders read your targeted keywords within your meta tags, then they will have a higher “word value” to them.

After you have sorted out your content and meta tags, the best thing to do is to get as many inbound links as possible. Inbound links are links to your website from other websites. For example, if I were to have a tutorial featured on Pixel2Life, their link to my website would be an inbound link.

The more inbound links you have, the higher your search engine rankings. If you run a website, submit it to as many directories as possible; start with dmoz, which is one of the largest directories in the world. A simple Google search for directories will get you many more just like it. If you have write content such as tutorials, submit them to tutorial websites! Pixel2Life, Good-Tutorials, and many more not only get you inbound links, but they also direct loads of traffic to your website. I submitted my Creating a Website series to Good-Tutorials, and got thousands of hits.

Keep in mind, though, that when you’re on a link-building crusade, quality has much more value over quantity. 500 links from regularly updated, popular websites is better than 2,000 links from crappy websites such as link farms.

Including a sitemap is also a good idea. If you run a website with an intricate navigation, it may be easy for users to view all your pages, but search engine spiders get confused. Having a sitemap that links to all your pages allows them to easily get around your website and index each page.

One of the most important things to remember is to include text in a basic way. This means keep it straight up HTML – no Flash, no text in images, no nothing. Spiders can’t crawl through that stuff (for now at least).

Finally, tweet! Using Twitter and promoting your website can be very beneficial. I know this is more advertising than SEO, but the goal is to bring visitors to your website. Do it in any, “white-listed” method possible. If you’re an aspiring designer with a large fanbase on Twitter, you’ll get tons of visitors to your website. All you have to do is talk about it!

Search Engine Optimization Services

If you don’t have the time, or all this is going over your head, have no fear! There are lots of agencies that will optimize your website for search engines. Having said that, these services are not cheap. A good SEO consultant can cost a lot of money.

Make sure you know just what you’re getting into, though. Some of these agencies will promise you a spot at the top of Google. As promising as it sounds, they may not mean that for a keyword that people normally search for. They could easily get you a spot atop Google for something like “maude-colored website design”. Hell, I could do that for you, and I’m not expert. Always get a good, reputable agency.

There you go. A few tips to get you started with SEO, as well as a few companies that will do it for you. Like I said before, I’m not expert, but if you’re designing websites, you have to know the basics in order to give your customer what they want.