Development site

Where are we?

When you work with a site owner, you need to have a way to get feedback from him or her about your work. This lesson shows you how to create a private version of a site that only you and the owner can access.

This lesson’s goals

By the end of this lesson, you should:

  • Understand why you need a development site.
  • Know about several options for development sites.
  • Be able to password protect a directory.
  • Know that using relative URLs will make publishing a site easier.

Why you need a development site

Let’s assume you’re working on a site for someone else. Your boss, a client, whomever.

You talk a lot with the site owner. You show the owner something, and ask for feedback. You change the site, and ask again.

Weber and owner working together

Figure 1. Weber and owner working together

Of course, the site owner could be you, in which case you talk to yourself a lot. Try to keep those conversations private, or you could find yourself spending time in a “special” kennel.

You don’t want regular people to see the site as you’re working on it. Just the owner, and other people you want to get feedback from.

Only when the site is ready do you show it to the outside world. This is often called publishing the site.

So you need:

  • A development site. A version of the site that only a few people can see.
  • A production site. The finished site, copied from the development site.

Weber publishing the final site

Figure 2. Weber publishing the final site

Sometimes the development site is hosted on a special development server, a machine (or Web hosting account) that is physically separate from the production server. But sometimes the development and production sites are on the same server.

Let’s look at some ways you can create a development site that only you and the site owners can see. I’ll assume that the production site will be on a shared Web host, like Hostgator.

For this page, let’s say you’re working on a site about dog blankets. It will be at dogblanket.com.

Your PC

You can create the development site on your own PC (or Mac or whatever). This works well if you are building a site for yourself, or if you and the owner can easily get together over the same computer.

Where to put your development site’s files? The easiest is just to create a directory somewhere on your disk drive. Put the files for the site there. For example, if you are working on the dog blankets site on a Windows computer, you might put the files in My documents\websites\dogblanket.

Another way is to install Web server software on your PC. I recommend XAMPP from ApacheFriends. XAMPP packages the Apache server with some other common server software. You usually install it on C:\ (for Windows). The root of the XAMPP Web server will be something like C:\xampp\htdocs\. So you would put the files for your dog blanket site in C:\xampp\htdocs\dogblanket\.

You need to install XAMPP if you want to run PHP programs on your computer. These could be programs you write yourself, or things like content management systems, photo galleries, newsletter programs, etc., that other people write. More about this in the book ServerCore.

So that’s the first option for a development site: your own computer.

A portable file system

USB flash drive

Another alternative is to put your development Web site on a portable file system, that you can carry around with you. One way to do that is with a USB flash drive. Plug it in to your own computer when you want to work on the site yourself. When you go talk to the owner, plug it in to his/her computer.

You can also put software on the device, like the editor Notepad++. You can make quick changes to the site when you’re working in the site owner’s office.

But remember, do most of your work with an intelligent tool like NetBeans. Use Notepad++ just for quick edits.

The ultimate portable file system is a laptop. It comes with a computer attached. This is a good option, because you don’t have to use the site owner’s computer when you visit him/her. You have all of your own software, browser bookmarks, and so on.

So far, we have two options for a development site: your regular computer, and a portable file system.

A directory on your Web host

The problem with using your own computer or a portable file system is that you and the owner have to be physically in the same place to work together. It would be nice if you could make a change to the development site, and send an email to the owner, asking “What do you think of that?”

One approach is to create a directory on your Web hosting account, and use it to host the development site. The directory tree on your Web server for the dog blanket project might look like this:

Development site in directory

Figure 3. Development site in directory

The development site (the green box) is another version of the actual site (the blue box). It’s inside the production site’s directory tree. You can mess with the development version without affecting what users of the production site see.

The domain name is dogblanket.com. The URL of the production home page would be http://dogblanket.com/index.html. The URL of the development home page would be http://dogblanket.com/development/index.html.

Home pages

Figure 4. Home pages

You can password protect the development directory, so that only people you give the password to can access it.

Password protect the development directory

Hostgator’s control panel gives you an easy way to put passwords on directories. If you use another hosting company, there’s probably a way to do this, but it might be different.

This is from the homepage of one of Hostgator’s control panels:

Protect a directory with a password

Figure 5. Protect a directory with a password

You select a directory to protect (like the development directory), then enter a user name and password for it:

Creating a user name and password

Figure 6. Creating a user name and password

You can create more than one user name and password for the directory. But usually you won’t need to.

When a user tries to access a file in the directory, s/he has to enter a user name and password:

Authentication

Figure 7. Authentication

You can give the user name and password to anyone you want to get feedback from.

A subdomain

We just saw how you can put your development site on a subdirectory on your host. You then access your development home page with a URL like:

http://dogblanket.com/development/index.html

There’s another approach that’s similar. Your development files are kept in a directory on your server, as before. But the URL you use is different. You use something like:

http://development.dogblanket.com/index.html

development.dogblanket.com is a subdomain of dogblanket.com.

The Hostgator control panel lets you make subdomains easily. Find the domain section:

Domain menu

Figure 8. Domain menu

Click Subdomains.

Fill in the form to add a subdomain. In this example, I wanted to create the subdomain borderlands.coredogs.com.

Creating a subdomain

Figure 9. Creating a subdomain

The files for borderlands.coredogs.com will be stored in the directory public_html/borderlands. The directory will be created for you if it doesn’t exist. You can password protect the directory.

Now put your development files in public_html/borderlands, and you have a development site. W00f!

Version control

Earlier, we talked about simple version control. After you’ve done some work on your site, take a snapshot of it. If you mess up, you can go back to the last snapshot.

You can do this no matter where you put your development files. Laptop, subdomain, whatever. It’s a Good Idea. Just takes a moment, and could save you lots of pain.

Use relative URLs

When your development site is ready, you want to copy it to its final destination on the Web. This is often called “publishing” the site.

You have to be careful. It’s easy to break pages when you do this.

The problem has to do with the difference between relative and absolute URLs. We talked about this before. Let’s do a quick review.

Suppose you were writing the page at http://dogblanket.com/development/index.html. This is the home page of the development site.

Development site in directory

Figure 3 (again). Development site in directory

You wanted a link to the main page of the products section of your site. So you added this HTML, with an absolute link:

<p>Check out our awesome <a href="http://dogblanket.com/development/products/index.html">products</a>.</p>

Works just fine. Now suppose you publish the site. You copy all of the files from the development directory into the main part of the site. That means you copy the file http://dogblanket.com/development/index.html to http://dogblanket.com/index.html. That is, you take the file out of the development directory, and put it in its final place on the real site.

You copy http://dogblanket.com/development/products/index.html to http://dogblanket.com/products/index.html. Out of development, into the live site.

You want the link in the new home page to go to http://dogblanket.com/products/index.html. But of course, it doesn’t, because you’ve hard-coded the link to http://dogblanket.com/development/products/index.html into your file.

Rats! You have to go through every file, find every link, and change it. That takes time. And it would be easy to make a mistake.

But suppose you had used the following HTML in http://dogblanket.com/development/index.html:

<p>Check out our awesome <a href="products/index.html">products</a>.</p>

This is a relative link. It says, “From wherever you are right now, go down into the products directory and find index.html.”

When you copy files from the development directory to the live site, everything would work just fine. As long as you maintain the relationship between index.html and products/index.html (that is, “from here, go down into the products directory”), you can put the files anywhere you want.

So, when you work on your site, use relative links. If you have to use an absolute link, make a note of it. Then remember to check the link after you publish your site.

For more on relative, absolute, and root relative links, see the lesson making links.

Exercise: Dog parks development site

You’ll be making a Web site for dog parks in this chapter. Set up a development site for it, that is, a place to store files you’re working on. Use any of the methods in this lesson. A USB flash drive, a subdomain, whatever.

Maybe you work on CoreDogs in more than one place (home, kennel, library, ...). Use a portable file system for your development work. Or maybe a subdomain, so you can access your files from wherever you are.

Below, explain where you are keeping your development files. Why there?

(Log in to enter your solution to this exercise.)

Summary

In this lesson, you learned:

  • Why you need a development site.
  • Several options for development sites.
  • How to password protect a directory.
  • That using relative URLs will make publishing a site easier.

What now?

Now you have a place to work. Let’s get started on the goals of the site.


How to...

Lessons

User login

Log in problems? Try here


Dogs