Posts Tagged ‘php’

PHP: Image Directory Repeater

There are lots of great prewritten scripts to build out relatively custom image slideshows. One of the main issues I’ve run into is that these plugins require a listing of images, and sometimes, it is more convenient to just pull images from a folder directory. Well, even if you don’t know much about PHP, it is incredibly easy to write one! Here, you’ll learn the basic PHP code you’ll need to repeat through all the JPG images within a folder.

<?php
   $dir = "directory/*.jpg";
   foreach(glob($dir) as $image)
      echo "<img src=\"".$image."\" />";
?>

That’s it! You just have to update the $dir variable to lead to the folder you want to run through. This script only repeats through JPG images, which you can change by altering the file extension within the $dir variable. Got questions? Ask away!

Server And Client Side: What’s the Difference?

It’s a pretty simple question if you know how the web works, but if you don’t, it is very complicated. To succeed working in the web world, you’ve got to have a firm grasp on the difference between server-side and client-side interactions. If you want the quick answer, here you go:

Server-Side: Server-side interactions require sending data to a server and the server sending data back to you, the client.

Client-Side: Client-side interactions don’t need a server, and data is exchanged or altered on your own computer browser without sending any information to a server.

Now if you need the longer explanation, you’ll first need a little background on how the internet works. The internet is just a mapping of connections between millions of computers around the world. When you type in a web address–such as http://www.google.com/–your computer knows that means go find the computer somewhere in the world that has the website for Google on it (I’m really simplifying things here if you can’t tell). The computer that has Google on it is called a "server". Servers aren’t typical computers. They don’t necessarily have any screens to view anything on, and for sites like Google, thousands of servers are collectively used to house the website.

So now that you understand the web (at least in a basic sense), we can start to learn about what server-side and client-side means with a more indepth explanation. So say you are on Google’s homepage. As a user (consumer) of Google, you can interact with their homepage in a multitude of ways. To understand each type of interaction, I’ll give an example using the Google homepage.

Client-Side: When you rollover a link in the navigation bar at the top and its display changes, you’ve just triggered the most basic client-side interaction, the pseudo class :hover in CSS. For a slightly more complex client-side interaction, by clicking on the "more" link in the navigation bar, a menu expands with more options. This is a very typical client-side interaction using simple javascript to hide and show something on your screen. In addition to CSS and Javascript being client-side languages, you should also include HTML, the basis of all displays in the web. Without HTML, the internet would be completely different from what we know it as today, and all three of those languages are interpreted on your own computer within your own browser, needing no interaction or data transfer from a server.

Server-Side: Now, after you’ve typed a search phrase into the search bar, when you click the "Search Google" button or click enter, you’ve now triggered a server-side interaction. Your computer doesn’t have the information it needs to conduct the search you are requesting, so it must send your search across a series of connections to a Google server somewhere in the world, that then sends back the results that it found for you. This is the basic concept behind server-side interactions. Typical server-side scripting languages include Perl, PHP, Java, and ASP.NET (I could keep going, but who is it really helping?). The key to identifying a server-side interaction is noting when your browser page reloads. Server-side interactions require reloading the browser window to show the results that were found. There is one exception to this rule.

A Combination Of Both: It is possible to conduct a server-side interaction without reloading the browser window. This requires a combination of both server-side and client-side interactions. Using a subset of Javascript called AJAX, we can send requests to a server, and then load those results into the client browser without a page reload. An example of this on the Google homepage is the suggested search phrases that change as you start typing. You type in a few characters, Google sends those characters to their server which then looks at frequent searches conducted by other people to make suggestions, and then sends them back and fills in the drop down menu for you to make a selection.

Now hopefully you’ve got a firm understanding of the difference between server and client side interactions and languages. If you’ve got any questions, don’t hesitate to ask.

PHP – Header and Footer Templates

Why use PHP header and footer templates? Luckily, there is a very simple answer to this question. When you need to change a piece of navigation, or an image such as your logo, or even just change the copyright year in your footer, do you want to have to go into every HTML file to change that one item? Of course not! Using a php header and footer will allow you to avoid changing all of your pages, and instead only make you change it once!

So how does it work? Simple. There are a few catches though first which you might not like, so pay attention! First, your website URLs will now end in .php instead of .html. Second, you won’t be able to test your website without using a server that can compile your PHP. As I explained in a previous post, PHP – What Is It Good For?, PHP is a server side language, as opposed to HTML, CSS, or Javascript, which are all client side languages. Client side languages are read and interpreted by an individual person’s browser, whereas server side languages are read and interpreted by the server that hosts the website before it arrives back to the individual user. Easy solutions are to either put it up live to test it (not advised), or to install an Apache server on your computer, which wasn’t the easiest thing for me to do (because I’m not very techy) but there are some good walk-throughs out there, and the software is free. I use it all the time now because I do all my sites in PHP.

But I’m not a web developer, I’m a web designer! Don’t be intimidated if you aren’t a programmer. Writing websites in php can be as little as 1% PHP and 99% HTML/CSS. I didn’t realize this until I actually tried to learn it, at which point I was much more comforted. You still make your entire site using your HTML or CSS, the PHP just decides essentially what content to put in where after you’ve made it all using your HTML/CSS.

How do I implement it? Alright, now here is your explanation. You’ll need 3 total files. One called “header.php”, one called “footer.php”, and one called “index.php”. Inside your header file, cut and paste all the header code (starting all the way at your opening html tag or doctype declaration if you have one… because you should). Then, do the same for your footer file with your footer HTML. Now, inside of your index.php file write two lines of code, one at the top, and one at the bottom, you can probably guess which goes where:

<?php include("header.php"); ?>
<?php include("footer.php"); ?>

And that’s it, run it on a server and you are set. Still a little confused? Well here, this is what each of your files should look like:

header.php

<html>
  <body>
    <div class="header">
      Logo, navigation, et cetera goes in here
    </div>

index.php

<?php include("header.php"); ?>
    <div class="mainContent">
      <h1>Header in here</h1>
      <p>Paragraph in here</p>
    </div>
<?php include("footer.php"); ?>

footer.php

    <div class="footer">
      Footer content goes in here
    </div>
  </body>
</html>

And that’s it, got any questions, ask away!

PHP – What Is It Good For?

So, interested in using PHP for your website? You are making a smart move. PHP is great for a relatively small and simple website like mine (say between 10 and 100 pages) and offers easy implementation of:

  1. Including template files. This allows you to have one file that you can pull in on your site at anytime in any place. A simple and common implementation of this is to write one file that includes the header, and another file for the footer. I use this on my own site.
  2. Storing data in array files. This is a great way of displaying different content on a simple template page. For example, on my site, I have one file that lays out what the page will look like in my photography section, and then another file that has different content for different photographs. Only 2 files can create an endless number of pages!
  3. A simple and functional formmail script. This can allow users and/or customers to fill out a form, sending an email to a specified account. This helps your users easily get in touch with you.

It is important to realize what PHP actually does before you use it. PHP is a server side scripting language. That means that the code you write in your files are interpreted by the server before it reaches the user. This is different from client side scripting languages like Javascript where the code reaches the user, and is then implemented. Usually, the PHP will be read by the server, and it will output plain markup or HTML. This is great because it doesn’t rely on your users’ browsers to do anything. Some users turn off Javascript which can be a problem if you use javascript to include certain code in your files.

Soon, I’ll write a post on simple code to get started on some of these uses of PHP. If you’ve never coded anything other than HTML/CSS before, then PHP will be a much different step because it uses logic statements. However, if you’ve ever coded anything with logic (C+, Java, ASP.NET, Javascript, Visual Basic, etc.) then PHP won’t be that hard to pick up.