This is a Quick Tip on how to connect to a MySQL database using Perl. Even though many other languages are sneaking their way onto Perl’s turf. There is still a great demand for Perl on the web, so don’t forget one of it’s primary uses. Here’s the code:

#!/usr/bin/perl
use DBI;

$database = “DATABASENAME”;
$hostname = “db.DOMAIN”;
$port = “3306″;
$username = “USERNAME”;
$password = ‘PASSWORD’;

$dsn = “DBI:mysql:database=$database;host=$hostname;port=$port”;

$dbh = DBI->connect($dsn, $username, $password) or die(”Could not connect!”);

$dbh->disconnect;

First we have to tell perl to use the DBI module. Define our variables. Then define the database information. Finally we’re able to connect to our database. This could be done in one line, but you’ll find that most people prefer to connect their scripts this way for clarity. That’s all. Thanks for reading…

This is a Quick Tip on how to connect to MySQL with PHP. We have all done it from time to time, but sometimes we forget just how to connect to those pesky MySQL databases directly using PHP. So here’s how it’s done:

<?php
function open( ){$db = mysql_connect( ‘localhost’, ‘root’, ‘password’ );
} ?>

Here we have custom a function “open”. Followed by the mysql_connect function which we will supply the url, username, and password. It’s pretty simple to do in PHP. Thanks for reading …

More times then not I have needed the use of a webserver to test various portions or web design that I’m working on for a client. In years past, this was not the easiest thing to do. You would first have to download your web server, and configure it for your system. Then you would have to track down, download, configure, and install various modules, extensions, and runtimes like Perl or PHP. In the end it was always a big hassle, and you were rarely able to install identical loads on two different machines.

Not anymore. Today there are a number of really good pre-configured web servers available that handle the job well. One of the most well known of these is Xampp. It consists of an Apache web server loaded with all the typical extensions. There are even several load package options available. If you want Tomcat, no problem. Don’t want PHP? They even have a bare version for a minimal install. No matter what your testing needs, more then likely Apache Friends has an answer, or they can help you find one. Now lets look at the install:

1. Go to the Apache Friends website and download the distribution of Xampp for your OS. If your not sure which one to get I would recommend getting the standard version with the installer. Save the file to an easy to find location on your hard drive.

2. Find the file on your hard drive, and start the install by double clicking it. The install works pretty much like any other installer. Just follow along as the main program is installed.

3. Once the install is complete you should see a dialog like the one below. If not you can go to the Apache Friends folder in the start menu and select “Xampp Control Panel”

4. Start Apache and MySQL. You will have to select if you want to run Xampp as a service or to start and stop it manually. If your only using Xampp as a test server, running it manually is your best option. If it runs as a service then it will be active all the time just burning up CPU cycles.

5. Open up your web browser and type in “localhost”. If you see the bright orange website of Xampp, your done.

That was easy. At this point your web server is up and ready for your website. I would go through and look at some of the examples, and set up the root password for MySQL. If you close the Xampp Control Panel dialog it will sit in the try for when you need it again. Apache Friends has a great site with even better documentation, so stop by there and read up if your still a little lost. Good luck.

In the first part of this five part series we covered how to start our design process from finding faults with our existing site to setting design criteria for our new site. I would recommend reading the first part of this tutorial before starting this section or some of the things I talk about will be confusing.

Introduction

This part of our tutorial will cover the layout and actual code found in the foundation of our website. First we’ll start with a basic layout. Then we will bring in our design criteria. I originally intended to add the PHP code to this page, but once I finished the first section I decided to add a an extra page for the Wordpress hooks. Otherwise this section would be really long and confusing for those of you who won’t be adding the PHP along with us.

The Layout

I want my layout to be simple and common place to prevent navigation hiccups. So I came up with a simple common two column layout that has some minor changes for usability, and to maximize available space. This design is based around screen “hot spots” which simply are the areas of the page your eyes are drawn to the most. I should mention that the pages design also revolves around how it will degrade in portable devices. We’ll cover that some more in our next section, but a full tutorial is really needed to understand exactly how small browsers handle websites. Here is a picture of that layout:

You will notice that this is a typical three column layout that has a few tweaks to the header. By color, here is how I divided the document space:

Blue – This area is for my site logo

Silver – This is for site login and meta information

Red – This is for the Sites search box

Cyan – This is where we will list the sites pages

Orange – This will be the main menu bar

Yellow – All website content will be displayed here

Green – This is the Footer

The Code

Now that we have a layout we can start working on the websites code. Remembering our design criteria at this point is very important. First and foremost we’ll be looking for performance and size. Usability comes naturally with a tried and tested layout like the one we will be using here. Since we are only using borders, white space, and background colors to dress up the site we shouldn’t have any issues from a final design perspective either. Luckily for this template I already know most of the layout requirements I have to meet. Otherwise I might have to test and retest a layout several times before getting exactly what I want when I go to dress up the appearance. Here’s the rough layout code for our layout:

<table align=”center” width=”945″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td valign=”top”>

<div id=”header” style=”background-color:blue; float:left; height:140px; padding:5px; width:305px;”></div>

<div id=”meta_box” style=”background-color:silver; float: left; height: 140px; width: 305px; padding:5px;”></div>

<div id=”search_box” style=”background-color:red; float: left; height: 140px; width: 305px; padding:5px;”></div>

<div id=”top_menu” style=”background-color:cyan; clear: left; float:left; height:25px; width:935px; padding:5px;”></div>

</td>

</tr>

<tr>

<td valign=”top”>

<div id=”left_menu” style=”background-color:orange; float:left; height:690px; padding:5px; width:235px;”></div>

<div id=”content” style=”background-color:yellow; float:right; height:690px; padding:5px; width:690px;”></div>

</td>

</tr>

<tr>

<td>

<div id=”footer” style=”background-color:green; float:left; height:30px; width:945px;”>

</div>

</td>

</tr>

</table>

Place the code into a standard XHTML template and viola, you will see a layout just like the picture above. Don’t forget to test the site in a couple different browsers before continuing. If you see any discrepancies go back and clean up the code until everything is good. Don’t just overlook issues. This is the very fabric of your site. Errors must be fixed now.

But wait you say! There are tables in that thar document, where’s the CSS for the divisions, and what’s the deal with all this strange code? There are some very good reasons for all of this as I’ll explain.

Tables are now considered not a part of the layout of typical web documents for a number of reasons. However to meet our criteria for speed and size they fit the bill nicely as overall containers. If I had used divisions to contain all of my other divisions I would either have to make an overall division with several smaller divisions inside, or I would have to add at least another two sub container divisions to make the code flow nicely, so that I wouldn’t have weird results to contend with in the final design stages. Using a minimal hidden table like this allows me to simplify the smaller divisions, because it offers me solid boundries to place my divisions in without impeding their display across the board. Since tables are not rendered in most smaller display devices there shouldn’t be any major issues there either.

Since this is our main template, and the divisions won’t be used again as they are here there is no reason to put them into an external stylesheet. In fact it’s cleaner and faster to put them in line. There are also a couple other reasons for this. If we put the style information in line their handled in line by the browser, so if someone loads your page with a slow connection they won’t get some glob of nasty unorganized text while the page is loading. Your sites information is available faster, even if the text styles are not applied yet. However, if you really must put these in the stylesheet you can add it in the section below.

Now lets create a basic style sheet for all of our other styles and call it “styles.css”. For right now just link it directly. We’ll add the Wordpress code to link it in the next section. Put the following styles into “styles.css”.

@charset “utf-8″;

* { font-family:Arial, Helvetica, sans-serif;

color:#333333;

font-size:12px; }

a { color:#336699;}

body { background-color:#FFFFFF;

margin-top: 20px; }

table { background-color:#FFFFFF;

border:none;

min-width:315;

max-width:945;

padding:0px; }

This is just a few styles to get us started we will add more as needed. I have been asked about the “*” style in the past. Wildcards are available to stylesheets so I’m applying the “*” style to everything in the document unless we specifically override it with another style. As for links, I only want to make them in blue regardless of their status. The final style here sets some basic options for our table to insure everything works properly.

Stop right there! We’re done with our layout for now. We’ll finish working on our framework in the next part of this tutorial which will be purely on the Wordpress PHP code. If your not going to be using Wordpress, you can skip the part 3 and go directly to part 4.

Introduction

This is the beginning of a four part tutorial on a ground up template design for constructing a Wordpress website template. I’ll cover everything from initial design to layout to code and final testing during the course of the article. I’ll also give you insight into my thoughts on how a website should be implemented, and possibly give you some design ideas for your future or existing sites as well.

In the first part of this article we’ll discuss general foundation design, and have a look at not only the criteria that we want to meet, but what was wrong with my existing site first. In the second portion of the article we’ll start building a layout keeping these thoughts in mind. We’ll then clean everything up and make it pretty in my third installment. Finally, in the fourth installment, we’ll test the site to ensure that everything works and looks as it should. Do our final round of checks, and any minor tweaks that slipped through the cracks. On to the first part:

Design and Foundation Brainstorming

First you need to consider your design goals. Not the content, not the layout, not even the images or colors, but your goals. We need to look deep into the inner workings of your site. How will your site respond? How fast should it load? How easily will it be to update? How much attention can I apply to the code? How extensible can I make the site? Who will be viewing it? What will they be viewing it with? All of these questions and more should be answered before ever starting your sites layout.

Major design decisions are not based on a whim. They are carefully thought out and explored. Many companies spend a considerable amount of money on design, and you will see why through the course of this article. Since I am writing this tutorial as I create a template for WSD.com, I’ll provide you with not only my design decisions, but also with the thoughts that I have while creating my template.

Now the question you should ask yourself is; what is wrong with my site now? Why do I want to redesign it? Do I have time to do a redesign? How will I test it? Can I get by with minor updates to what I have? Once you have a clear idea of what the problems are you can start brain storming on how you want to design your site. Here are the issues that I want fixed with the new version of WSD.com.

1. The website is in general too slow.

2. There are too many references to exterior files.

3. The templates code is hard to read.

4. The CSS calls could be drastically simplified

5. The sites layout is a little to plain.

6. The sites appearance could use some tweaks.

7. Some of the PHP code currently running will never be used.

8. Final page load size is larger then what it should be.

This list only took me a few minutes to complete, and gives a good understanding of what my major issues are. I could have easily spent several hours nit picking each little piece of the site, but that’s only important when doing updates. Not complete redesigns. For a redesign, we just need to be sure that what we’re doing couldn’t be accomplished easier with some updates and tweaks to our existing site. Now that I know what is wrong with the current site, we need to figure out a framework design criteria for a new site. Let’s look at my design criteria in order of most to least important.

1. Speed – Why is speed my top concern? Well simply put, if it takes to long to load your page, no ones going to visit it. I remember seeing a figure recently that over half of collage students are still using dialup. So if your catering to students, it would be very important to have a fast site. One should also consider the hardware people are using. Think of all those people that use sub-DSL/cable connections like wi-fi or cellular modems. A prime example of this is Google. One of the most used websites ever. Google’s main page only contains one image, a search bar, a drop down menu, and a few text links. Thats it. No fancy graphics, no flash, no ads, just a thin shell before you get to the juicy center.

2. Size – Size and speed go hand and hand so it’s my second design criteria, but it’s not just the size of the page that’s a concern. Todays websites contain more linked files then they have ever before. Whenever WSD.com’s current page loads it doesn’t just load images. It loads templates, images, scripts, layout modules, makes several database requests, etc. A web master that doesn’t look at all of these factors when designing a site has no right to be one in the first place. Size matters. It matters when considering speed. It matters in bandwidth. It matters with CPU load. It matters in how many hit misses you have because your page just was to poky to read an article.

3. Legibility/Accessibility – If a person can’t read your page, then the data you spent your nights and weekends compiling is useless. It’s as simple as that. Some will find ways around it. Most will simply leave. What about the handicapped that want to view your site? Will they be able to read it? Will your site work on small display devices like PDAs, cell phones, and UMPCs? Can the average person understand how to navigate it? How will your site render differently in different browsers?

4. Reliability / Backup – A reliable page is one of the most important, and probably one of the most overlooked aspects of web development. A well designed site requires very little maintenance, however some are far harder then others to backup. If your web server suffers major failure, can you have your site back up and running in less then a day with minimal loss? What if your ISP or Website provider suddenly closes your account do to some obscure line in your terms of service? Backup and backup often. It’s not just a saying. It’s law among serious web developers.

5. Appearance – Finally we’re at my last design criteria. Appearances are important, but not as important as getting content to those that want it. My site should be clean and neat with minimal graphics. I’ll use white space, borders, and the occasional background color to highlight certain aspects of the content. Links should all be the same color regardless of status, and should obviously stand out from the other content without making them hard to read. Text should be no smaller then 12 pixels, which is standard for most print documents. Headers, section, and subject titles should stand out above the rest of the content, and use the standard <H> tags. Menus should be obvious, and easily accessible on the page. Finally the total layout should be what most people would consider as typical. This will lessen confusion among less web savvy visitors.

Now that we know what’s wrong with the existing site, and have formulated a design criteria to compensate for our existing issues you can start building your website foundation. In part two of this tutorial we’ll start building our website, and start putting our layout together with our criteria.