Development:

03 Jul 2009

10

Create a Portfolio Client Area Using PHP and MySQL: Part 1

Today’s tutorial is the beginning of a series where we’re going to use PHP and MySQL to set up a client’s area on a personal portfolio. The client will be able to sign up/log in, view their current project, send notes to the designer, upload documents, view invoices, and more.

A client’s area is something that is not that common in portfolios, but is usually a great addition to any portfolio nonetheless. If you’re tired of using 10 different tools across the web to control your clients, here is a solution that will put it all in one place.

23 Jun 2009

0

PHP For Beginners: Part III

If you haven’t seen the first two posts for this series, be sure to check them out below:

This exercise assumes that you either have PHP installed on your computer already or that you have access to a server with PHP support.

Some might call it an absence, I prefer to call it a long nap. Yes, I’m back, bringing with me part three of my PHP tutorial line! Follow the program throughout the summer as I provide you at least weekly updates on this versatile language of Web 2.0.

Lets get down and dirty. This lesson will cover the following:

  • More operators
    • Concatenation operator
    • Combined assignment operators
    • Comparison operators
  • Incrementing and Decrementing
    • Operator precedence
  • Constants
  • Quiz

More Operators

Arithmetic Operators were discussed in part two of this series, but I’m sorry to say that was just the surface. Operators are necessary to manipulate information and data values to create a result desirable to the author. Thus, the more operators, the more possibilities of the script, and thus the more objectives achieved with the code! These operators are fairly common among any programming language that you find, but their unique use in PHP is what helps make it such a strong language.

Concatenation operator

We’ll start out simple. The concatenation operator is a single period (.) that essentially binds together two operands (remember, these are expressions or strings, basically values of data or information). This may not seem important now, but this operator is important in combining the results of an expression with some kind of string. Here’s an example:

$centimeters=245;
print “The width is “.($centimeters/100).” meters”;

Here I used a variable then printed it within a string operand. This script will return the output “The width is 2.45 meters”.

Combined assignment operators

Compacting code is important in a website because it means that you have fewer things to sift through when troubleshooting. Shorter code also means a smaller file size, and if you intend to enter into a serious programming profession then that is a huge plus.

The name “combined assignment operators” is pretty much the exact description of this entire section. Basically, we combine the functions of two operators into one in an effort to simplify the code. Below is an example:

$x=4;
$x=$x+4; //$x now equals 8
$x+=4; //$x now equals 12 by the combined operator

Here is a table detailing just a few of the basic combined operators:

Combined Assignment Operators

Operators

Comparison operators

Pretty simple so far right? Well here’s where one of the biggest parts of PHP comes into play: comparison operators. Comparison operators perform tests on their operands, returning the boolean result true or false. This is again important for relating various pieces of information to one another from the user input.

We’ll just be getting familiar with them for right now; we’ve already covered a lot this lesson and this is a very important topic to fully comprehend. For right now, it is important to understand that these values are equivalent to true or false; they do not actually return the boolean value. For example:

$x=4;
$x<9; // equivalent to the value true
$x>23; // equivalent to the value false

Below is a table of comparison operators. We will learn more about these in complex coding sequences next lesson.

Comparison Operators

Comparison Operators

Incrementing and Decrementing

Incrementing and decrementing, which is increasing or decreasing by one, respectively, is a handy little ability when it comes to integrating loops into your code. For example, say that you want the script to execute a certain operation eight times; you can’t simply say “do this eight times.” Instead, you must say “start at one, then at the conclusion of each execution, add one to this number. When the number reaches eight, stop executing the function.” This method is seen in almost every programming language so mastery of this is crucial in order to learn other languages with ease.

This tutorial guide has already showed you two ways to increment and decrement a variable: the arithmetic operator and the combined operator. Below are examples of this:

$x=$x+1; // incremented by 1
$x-=1; // decremented by 1

Because changing a variable by the value of one is so important, however, the whole operation has received its own operator! Below are the respective operators for incrementation:

$x++; // $x is incremented
$x--; // $x is decremented

Putting them together into a little test code, we receive the following:

$x=3;
$x++<4; // true

But hold on, if we refer to our comparison operators, we’ll see that the < sign means only less than. How can this function return true then? It’s true because the variable x is evaluated in the function BEFORE being incremented. THIS IS VERY IMPORTANT! In order to increment the variable before evaluation, you must do the following:

++$x; // incremented
--$x; // decremented

Now to replace it in the above code:

$x=3;
++$x<4; // false

Operator precedence

The above argument brings us into operator precedence, or what most people will be familiar with, what I like to call “order of operations.” Certain operators have precedence over one another in this wonderful language PHP. Below is an example:

4+5*2 // returns 14, multiple first
(4+5)*2 // returns 18, parentheses first

This is a pretty straightforward concept that you just need to familiarize yourself with. Beyond that, this table is just for basic reference:

Order of Precedence for Selected Operators

Order of Precedence for Selected Operators

I know that we have not yet touched numbers 9, 10, or 11, but hold on to your knickers because they’ll be there next lesson!

Quiz

School is fun, especially in the summer! That’s why I’ve included this quiz. That, and to help you retain your knowledge of what we’ve just learned. Don’t peak back!

#1: Which of the following will increase $x by 2?

  1. ++$x++
  2. $x + (3/2)
  3. 4*2/6 + $x

#2: 4*9+9+(4/1) will return the following:

  1. 49
  2. 76
  3. 39

#3: 4.0===4 will return the value TRUE.

  1. True
  2. False
  3. Not enough information

#4: The expression $x*=2 is equal to:

  1. $x=$x*$x
  2. $x=$x^2
  3. $x=$x*2

#5: Without looking, which operator is executed first from this list?

  1. + -
  2. &&
  3. ||

Answer key: A,A,B,C,A

Conclusion

That’s all folks! We’ve taken some great steps today, and hopefully we will take many more in my next tutorial, PHP for Beginners: Part IV.

21 Jun 2009

7

10 Killer Firefox Add-ons For Web Designers and Developers

I hope it doesn’t come as a big surprise that Mozilla Firefox is easily the most desirable browser for web designers and developers, but if it does, you’re in for a quite a treat!

So why does Firefox have a firm grip on all of the internet geeks out there? The answer is quite simple – add-ons. Downloadable add-ons can make your design and/or developing experience much more efficient and fun, and while there are thousands of add-ons available for nearly any situation, there are some that are truly geared towards web designers and developers.

Below, we’ll go over 10 of the hottest add-ons for web designers and developers.

1. Web Developer 1.1.6

Without a doubt, Web Developer should be on every Firefox “top add-ons” list. I’m sure most developers reading this will nod their head in agreement when I say, “What did we do before this came out?”

Web Developer

The Web Developer add-on adds a nice menu and toolbar to Firefox that is full of wonderful web developing tools to make your life easier. Web Developer allows you to do anything from disabling certain features on a page (like JavaScript, page colors, etc…) to editing the CSS of any webpage in real time. Features like that allow you to save all sorts of time, and in the design/development world, time is most definitely money. Web Developer is an absolute must-have.

Download Web Developer

2. Firebug

Another heavy hitter in the developer’s arsenal, Firebug is another one of those add-ons that you simply can’t live without. Firebug allows you to do things like “find HTML elements buried deep in the page”, and pretty much hands over a golden plate of information at your fingertips.

With Firebug, you can edit and debug HTML, JavaScript, and CSS in real time and figure out why you’re getting that pesky error message. You can also monitor network activity (to figure out why your page is taking so long to load), visualize CSS metrics (so that you can find out why CSS boxes aren’t lining up like they should be), and so much more. There are also a ton of different extensions for Firebug that are constantly being developed.

The best way to find out what Firebug can do for you is to check out their site.

Firebug

Download Firebug

3. ColorZilla 2.0.2

This is such a handy little add-on that so many different types of users could find useful. How many times have you been on a particular site and wondered exactly what color they used for a certain text or element on their page? Probably hundreds of times, right?

Colorzilla

Now, with the click of a button you can easily grab the RGB, hex, and even get information about DOM elements on the fly. ColorZilla also gives you the ability to zoom the page and measure the distance between any two points on the page you’re viewing. That’s just awesome.

Download ColorZilla

4. ScreenGrab 0.96.1

Think about how many times in your web development life that you’ve hit the “print screen” button. Exactly. Instead of doing things the old school way, someone was smart enough to launch a free way to quickly and easily grab a screenshot of an entire page, a specific section of a page, the entire window you’re looking at, and a few other options.

Screengrab

ScreenGrab will remind you of SnagIt, only you don’t have to shell out any cash for it and it works just as well. I don’t think anyone would argue that this is another standard add-on that should be in every developer and designer’s browser.

Download ScreenGrab

5. LinkChecker 0.6.3

Even the best of the best screw up the occasional link on a page. That’s why a genius by the name of Kevin Freitas built the simple, yet very useful LinkChecker add-on for Firefox. It will check if a link is valid or not, and this is easily one of those “use every day” type of add-ons that will be another valuable tool in your collection.

Linkchecker

Below is the plugin in action, on Webitect.

Bad Link Webitect

Download LinkChecker

6. Window Resizer 1.0

Testing your new site or project in several different screen sizes is crucial to your process. This simple add-on allows you to do just that. Window Resizer supports 640×480, 800×600, 1024×768, 1280×800, 1280×1024 and 1600×1200 resolutions. Talk about convenient!

Window Resizer

Download Window Resizer

7. IE View 1.4.3

Another essential step in the design/developer process is viewing the site in different browsers. The first and most important additional browser to check your work in is Internet Explorer.

IE View was created to quickly check to see how your project appears in IE, giving you a fast way to spot any problems. Again, another very simple add-on here that can help boost your efficiency.

IEViewer

Download IE View

(Note: Similar to IE View is Safari View. This is another one worth downloading.)

8. Dummy Lipsum 2.3.0

For the thousands of times you’ve copied and pasted “Lorem Ipsum” dummy text for all of your past projects, you’ll have wished you found Dummy Lipsum a lot sooner! This awesome add-on is a no-brainer for any designer or developer.

With a few clicks, you can easily generate a page full of space filler text, and you even have the option of including punctuation, showing or not showing html tags, and whether you want to start it with the infamous “Lorem ipsum dolor sit amet…” You can also have it generate the text in the form of a paragraph, words, bytes, or even a list!

Dummy Lipsum

Download Dummy Lipsum

9. HTML Validator 0.8.5.6

Instead of using a separate tool or website to validate HTML on a page, you can download this nifty little add-on which adds HTML validation inside of Firefox.

HTML Validator shows you the number of errors of a HTML page seen in an icon on the status bar when you’re browsing, which makes the process of spotting errors extremely fast and easy. While some other add-ons include this already, this is a nice hands free way to spot errors on the fly.

HTML Validator

Download HTML Validator

10. MeasureIt 0.3.8

I’m sure there have been countless times where you quickly needed the measurements of how large an image was, or how many thumbnails you could fit into one box, etc…

With MeasureIt, you can quickly and easily draw out a ruler to get the measurement (in pixels, width and height) of anything on a webpage. MeasureIt is another awesome tool for any designer to add to their Firefox browser, as it will surely speed up the process.

MeasureIt

Download MeasureIt

Wrapping Up

10 super efficient Firefox add-ons that should allow you to shave some time off of your many projects. I know there is a mess of additional helpful add-ons for designers and developers, but the 10 above are the ones that seem to be the staples among the thousands of others available.

Here are five more add-ons worth mentioning (just in case you can’t get enough):

  1. FireFTP – Instead of opening an external FTP for site updates, this is easier.
  2. Font Finder – Quickly show all the properties of selected text on a page.
  3. Colorblind Simulator – Experimental add-on that simulates what a page looks like to colorblind people. Since 10% of the population is colorblind, this is smart!
  4. SEOQuake – SEO is fundamental, so why not have a little help?
  5. Greasemonkey – Extremely popular add-on that allows you to run custom JavaScript against any webpage.

04 Jun 2009

2

Predefined Variables in PHP: For complete beginners

This is an overview made for beginners: and introduction to predefined variables in PHP. We’ll go over what they are, where you’ve probably seen them, and how and when to use them.

What are predefined variables?

Predefined variables in PHP are exactly what they sound like — variables in the PHP language that have been defined already. They can use used in any PHP script, with no need to create them yourself. They serve a purpose that is commonly used among programmers repeatedly, such as passing information from a form to a PHP script ($_POST would be used for this).

Here is the list of currently defined variables in PHP. Of course, you don’t need to understand all of these quite yet, but they can come in handy for any PHP developer.

All of these variables interact with the current server in some way. This means their purpose is to either get information from the server (e.g. Find the IP address of the user) or translate information to the server (e.g. send a user’s information from a form through the server to be handled by a PHP script.)

Let’s now get a closer look at some of the most commonly used predefined variables.

$_SERVER

This variable is an array of values, with the values containing information about the server.

If you don’t know what an array is, it’s quite simple: it is a collection of values, put into one component. For example, an array of numbers would be “1, 4, 6, 3, 3″. All these numbers can be stored in one place, called an array. The array can then be assigned to a variable name, like “$numbers”. There are more formal definitions of an array, as this definition may not be 100% ‘accurate’. However, it’s a good outline and way to think of arrays.

Let’s say we’re creating a fluid layout, and because different browsers handle pixels differently, we want to determine the browser type of the user so we can lead them to a specified stylesheet. This way, we can make sure a fluid layout never breaks.

In the PHP $_SERVER array (collection), there is one piece called “HTTP_USER_AGENT”. This piece of the array (index of the array) contains the user’s browser information. We can call it like so:

$_SERVER["HTTP_USER_AGENT"];

To see it in action, let’s echo it out:

<?php
     echo $_SERVER["HTTP_USER_AGENT"];
?>

The code above will return browser information in the form of a string. My browser information looks like this:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
     (.NET CLR 3.5.30729)

I won’t get too into it, but from here on we can see how we can use this information to specify a certain stylesheet for a user. If we store that String in a variable, (or part of the string), and send it through an if/else statement, we can give the user the correct stylesheet.

Note: This is just pseudo code below!

$browserType = $_SERVER["HTTP_USER_AGENT"];

if $browserType = "Mozilla..."
     then [switch user to the Mozilla Firefox stylesheet]

else if $browserType = "Internet Explorer..."
     then [switch user to the IE stylesheet]

else [use the default stylesheet]

Here are some of the other indexes in the $_SERVER array:

  • Get the user’s IP Address: REMOTE_ADDR
  • Get the hosting server’s name: SERVER_NAME
  • Retrieve the referrer URL: HTTP_REFERER
  • Retrieves the server identification string: SERVER_SOFTWARE
  • Retrieves the pathname of the current running script: SCRIPT_FILENAME
  • Retrieves the current page URL: SERVER_PROTOCOL
  • Retrieves how the script was requested (Did it use “Get” or “Post”): REQUEST_METHOD

If you don’t understand what they do based on the general description given above, do some more research on them, as well as try them out!

$_POST

This predefined variable is very commonly used, and incredibly useful when working with forms. You’ve probably seen this one before if you’ve ever tried to learn PHP.

The $_POST variable is linked to a method in PHP, called “post”, respectively. This method is often used in forms that need to send data to a PHP script. An example of this would be a sign up form: the user enters in data to the form, the form uses the post method to send it to the specified script, and the script can then process the data.

<form method="post" action="phpscript.php">

Easy enough, right? Well in order to carry the input from the form over to the script (in the example above, ‘phpscript.php’), it puts the data in an array, and assigns that array to a variable: $_POST. So, the $_POST variable contains all the data sent through the post method.

To specify the names of the indexes in the $_POST array, we clarify names in the input tags within the form:

<form method="post" action="phpscript.php">
<input name="username" type="text" />

After using the name=”" attribute, we can easily find that data in our $_POST variable array:

$_POST['username']

We have retrieved the data from a form, sent it to a PHP script, and can now work with it inside the PHP script. Using that, we can assign the username to a variable with in our PHP script, manipulate it, or send it to a database.

$_GET

The $_GET variable is very similar to the $_POST variable in that it can work with forms and a PHP method called “get”.

<form method="get" action="phpscript.php">

The difference is that the get method will send information through the URL, like so:

http://example.com/?name=Kayla&website=http://webitect.net

Let’s break that up a bit. We can see the example website: http://example.com. Then, we see a question mark (?). This question mark means that everything following it within this URL is now associated with the form, and contains the variables. We then see “name=Kayla”. This would be if I were to create an input field named “name”, and input “Kayla” for the variable to be passed:

<form method="get" action="thankyou.php">
<input name="name" type="text" />

Next, an ampersand (&) that will connect all the field names and variables. Finally, our second piece of data, named “website” with a value of “http://webitect.net”.

The URL will go to the page where the form wants us to go (the location of the action=”" attribute). In our case, ‘thankyou.php’. It can display a thank you message, or whatever other type of content you’d like to display. In addition, this page can retrieve data with PHP:

$_GET['name']

A better example of $_GET in action is:

<h1>Hello, <?php $_GET['name']; ?>!</h1>

Of course, that’s fairly useless, but you see how it could be used if needed. The point of $_GET is to easily pass information from a form that the user enters, and provide it to the next page. This is helpful for any sort of non-secure information, such as number of items to add to a shopping cart, or posting a website to a database.

You would not, however, ever want to use $_GET for a signup form or anything that uses secure information. Otherwise, important information (like a password) would be sent through the URL, and could be seen by anyone that could view the computer screen.

Conclusion

Hopefully with a more in-depth overview of these three predefined variables, it can get you started in understanding the rest of them. A great place to get started is the PHP Manual itself.

In a future tutorial I really want to go over the $_COOKIE variable, and how one can use cookies to identify users and work with specific users to the programmer’s advantage.

29 May 2009

5

The Ultimate WordPress Theme Developer List

I’ll probably be adding more as I find things, and feel free to add your own resources in the comments. I’ll add them to the list as well when I get a chance.

For a bit of motivation, here are the prizes again!

1st Place: $100 via PayPal or 1yr. of free advertising on Webitect.net

2nd Place: $50 via PayPal or 6mo. of free advertising on Webitect.net

3rd Place: $25 via PayPal or a free domain name

All participants have the choice of their WordPress theme being featured on Webitect during and after the contest, and available for download. As a benefit, any theme is allowed to host a personal link to your own blog or website.

General Code you can Copy

Cheatsheets

Tutorials and Walkthroughs

Blank Starter Themes

04 May 2009

8

30 jQuery Tutorials for Complete Beginners

jQuery (a friendly JavaScript library) seems to be substatially popular among programmers, and even non-programmers. It’s capability to add more visual appeal and dynamic solutions to websites makes it ideal for all webmasters.

I haven’t been able to continue the jQuery tutorials on Webitect at a pace I originally would’ve liked to, so I’m going to share 30 jQuery tutorials that are easy to follow, and most of which have helped me get started. First, let’s do a quick review on what jQuery is, for those who are unaware.

30 Apr 2009

14

How did you become interested in becoming a webmaster, designer, or developer?

Share your experience on how you got into creating websites, no matter what kind of webmaster you are. Was it something you stumbled upon, or were you assigned into a job? What was your first website like, and what did you learn from it? Did it lead you to go on to better things? What do you do now– code, design, blog?

This is a post for discussion. Use the commenting section to tell your story, and include what you’ve learned, and what you’d like to learn or become in the future.

31 Mar 2009

3

Web developer’s library: What you should have

Every web developer, or even aspiring web developer needs a set of tools that will help them keep up with the fast-pace coding world. Some are your own resources, while others are a must-have for every developer. Below are the seven things any web developer would absolutely need to be successful.

Page 4 of 512345