PART I Basics of Web Publishing IN THIS PART CHAPTER 1 How Web Publishing Works 7 CHAPTER 2 Introduction to HTML 17 CHAPTER 3 Introduction to PHP 31 This page intentionally left blank IN THIS CHAPTER . What Do I Mean by Web Publishing,Anyway? . Simple Website in Five Steps . Anatomy of a URL . Smart Web Pages . Databases CHAPTER 1 How Web Publishing Works What Do I Mean by Web Publishing,Anyway? If you are reading this book, I feel I can safely assume that you are interested in building a website. Perhaps you are already familiar with Hypertext Markup Language (HTML), PHP, or the general concepts behind the broad topic of web publishing. To make sure we’re speaking the same language, I want to define my use of the term web publishing: “To make HTML available on the Internet for people to view in a web browser.” This is a very narrow definition of the term, but it’s all I am able to cover in this book. And, it’s plenty to get you started on the web. Because you are probably quite familiar with browsing the web, I will start my discussion of web publishing there. When you open a web browser (FireFox, Safari, Microsoft Internet Explorer, and so on) and load a uniform resource locator (URL; for example, http://www.google.com/), you are simply opening a text document that’s stored on someone else’s computer. The text document is more commonly referred to as a web page. Web pages are just plain old text files sitting on someone else’s computer. They really aren’t much different than any text document that you might have on your computer, except that they contain HTML. I cover HTML more in a bit, so for now just know that it is a simple, text-based format- ting system that browsers are able to read. The someone else’s computer, which I referred to earlier, is what we call a web server. A web server is just a plain old computer, with two special features: . It’s connected to the Internet all the time. . It has a program running on it that’s listening for requests from web browsers. Other than that, a web server is not really all that different from your home computer. In fact, it’s very likely that your home computer has everything it needs to be a web server. It probably won’t surprise you to hear that the communication between your local computer and a web server is a complicated matter. I can’t even begin to scratch the surface on most of the topics involved, so I will limit the discussion to practical stuff that I think you need to understand as a “web publisher.” That being said…. Simple Website in Five Steps Suppose you are starting a small business and you want to publish a web page that describes your services and tells people how to get in touch with you. You would need to complete several steps to make your web page available on the Internet: 1. Create an HTML document. 2. Buy a domain name. 3. Rent a web server. 4. Link the domain name to the IP address of the web server. 5. Put the HTML document on the web server. Step 1: Create an HTML Document It’s probably a safe bet that most of the applications that you use are document based, meaning that they work with documents. For example, Adobe Acrobat reads PDF docu- ments. Microsoft Word reads Word documents. By the same token, a web browser reads HTML documents. HTML stands for Hypertext Markup Language and its text-based format tells browsers: . What to display . How to display it Here is a snippet of HTML: Tim Berners-Lee is <i>wicked</i> smart CHAPTER 1 How Web Publishing Works 8 See the <i> and the </i>? Those are called HTML tags and they instruct the browser to show the word “wicked” in italic. See, I told you HTML was simple. I cover HTML in detail in Chapter 2, “Introduction to HTML,” so that’s all I’m going to say for now. Just remember that HTML is a text-based format that browsers can read. Oh wait, one more thing. You know how PDF filenames have to end in .pdf? Well, HTML documents have to end in .html for the browser to recognize them. Step 2: Buy a Domain Name Every computer that is linked to the Internet has a number associated with it that is called its IP address. At the time of this writing, the IP address of my web server is 208.109.20.55 As you can see, IP addresses are kind of long and can be tough to remember. In their infi- nite wisdom, the architects of the early web came up with the concept of domain names to make it easier to remember web addresses. My domain name is jonathanstark.com Although I have found that virtually no one spells Jonathan the same way twice, I would contend that it’s much easier to remember my domain name than my IP address. Interestingly, you can access web pages in a browser with either a domain name or the corresponding IP address. Assuming that I have not changed my IP address since the time of this writing—more on this in a second—both of these URLs would display the same page: http://jonathanstark.com/about.html http://208.109.20.55/about.html Another advantage of the domain name concept is that it creates a layer of separation between your web page and the machine the web page is on. In other words, thanks to the domain name system, I could move my web page from machine 208.109.20.55 over to machine 208.109.197.81 without causing a problem. I would just point the domain name jonathanstark.com from 208.109.20.55 over to 208.109.197.81, and any bookmarks that you have for jonathanstark.com would continue working. This would not be the case if you had bookmarked http://208.109.20.55/about.html If this sounds confusing, here’s a quick analogy…. The Parable of Ted Ted walks into a Sprint store and buys his first cell phone. The salesperson has Ted select a phone number from a list of available phone numbers. Then, the salesperson pulls Ted’s new cell phone out of the box and pops out the battery. Hidden inside is an ID number Simple Website in Five Steps 9 1 that is unique to Ted’s particular handset. There’s not another cell phone in the world with this same ID number. The salesperson then logs in to the Sprint computer system and associates the unique ID of Ted’s handset with the phone number that Ted selected. Now, if someone calls Ted’s new phone number, the Sprint computer system will receive the request, find the unique ID associated with the phone number, and route the call to Ted’s handset. Brrrrriiiiiing! Ted’s cell phone rings. Two, days later, Ted loses his new cell phone. This is extremely bad timing because he was out the night before and gave his new number to Jen. He thinks Jen is cute and he really doesn’t want to miss the call. So, Ted goes back to the Sprint store, buys a new phone, and the salesperson associates Ted’s existing phone number (the one he gave to Jen) with the unique ID of the new phone. Now, if Jen calls, Ted’s new phone will ring. What does this have to do with web publishing? In this analogy, Ted’s cell phone handset is like a web server, the phone’s unique ID is like a computer’s IP address, and the phone number is like the domain name. The same way that a phone number can point to one handset today and a different handset tomorrow, a domain name can point to one web server today and a different web server tomorrow. Where the analogy breaks down is that there is no store where you can walk in and “buy a website” the same way that you can buy a cell phone. Cell phone providers do every- thing for you from end to end. In the world of websites, you buy your domain name from one vendor (called a Domain Name Registrar) and your web server from another (called a Web Hosting Provider). This can get really confusing, and often results in people thinking that purchasing a domain name means that they have a website. In reality, purchasing a domain name is kind of like buying a phone number, but not having a phone. Of course, this brings us to the “buying the phone” part. Step 3: Rent a Web Server After you have purchased a domain name, you need to point it at the IP address of the specific machine where you will store your web pages. Technically, you might be able to use your home computer for this purpose, but it’s prob- ably not practical for a number of reasons: . Your Internet service provider (ISP) might have rules against hosting websites. . The upload speed of your home connection is probably really slow compared to your download speed, which means that your website would take a long time to load in a user’s browser. . Whenever your computer is not online, your website would be down. . Whenever your computer is without power, your website would be down. CHAPTER 1 How Web Publishing Works 10 Rental web servers are impossibly inexpensive, and are very fast and reliable. They come with everything that you need already installed and configured, which will save you hours of head-scratching. NOTE Renting a web server is not without its limitations, but by the time you start to encounter those, you will probably be very comfortable in the web publishing environ- ment and will be in a better position to consider hosting your website from your own computer. Earlier, I mentioned that one of the unique features of a web server is that “It has a program running on it that’s listening for requests from web browsers.” More specifically, the program that runs on a web server that listens for requests is called the web server process. The most common web server software is called the “Apache HTTP Server” (or just “Apache,” for short). It is a free, open source web server that is running on the vast majority of the world’s web servers. In fact, it comes installed on Mac and Linux, and can be installed on Windows. Because it is the most popular and can run on any major platform, it is the web server program I am going to focus on. Step 4: Link the Domain Name to the IP Address When you rent a web server, the hosting company will give you a bunch of information, the most important of which is . The IP address of the machine . How to upload your web pages to the machine After you have the IP address, you need to contact your Domain Name Registrar (the company that you bought the domain name from) and tell them to forward requests for your domain name to this IP address. The details of communicating this information to your Domain Name Registrar will depend on who you use, but the concept is the same for all of them. NOTE By the way, this step corresponds to the Sprint salesperson associating Ted’s phone number (see “The Parable of Ted” earlier in this chapter) with the unique ID of his handset. So, if you later decide to move your website to a different machine—and, therefore, a new IP address—you will have to contact your Domain Name Registrar and update your information. Simple Website in Five Steps 11 1 Step 5: Put the HTML Document on the Web Server All you have to do now is copy your HTML document (also known as a web page) to the web server. The specifics of how to do this will depend on who you chose as your hosting company. The hosting company usually provides an interface devoted to this task. NOTE Even though the hosting company’s interface will handle the file upload for you, you should be aware of a concept called the Web Root Directory. Remember when I said that a web server has Apache running on it, listening for requests from web browsers? Well, if you were setting up your own web server, one of the things you would do to configure Apache is to specify the Web Root Directory. This is the directory where Apache looks for files. You might think that the Web Root Directory is the same thing as the top level of the web server’s hard drive, but it never is (hopefully). This is because the Web Root Directory and any files or folders inside of the Web Root Directory are very public. Google can index them, users can browse them, and so forth. So, for security reasons, you would not want sensitive system files inside the Web Root Directory. If you are renting a web server, you don’t have to worry about any of this, but it’s good to know for later on. I elaborate on this topic in Appendix B, “Security Concerns.” After the web page is uploaded, you should be able to access it in a browser. Assuming that you purchased the domain name mintybacon.com, and you uploaded a file named chewing_gum.html, you could view the page in a browser as follows: http://mintybacon.com/chewing_gum.html Anatomy of a URL Now might be a good time to talk about URLs. Basically, a URL is the text that you see in the address bar of your web browser. As you might expect, there are rules to the structure of a URL, and it is helpful to understand URL structure when getting started in web publishing. Wikipedia defines a URL as the following: Strictly, the idea of a uniform syntax for global identifiers of network-retrievable docu- ments was the core idea of the World Wide Web. In the early times, these identifiers were variously called “document names,” “Web addresses,” and “Uniform Resource Locators.” These names were misleading, however, because not all identifiers were locators, and even for those that were, this was not their defining characteristic. Nevertheless, by the time the RFC 1630 formally defined the term “URI” as a generic term best suited to the concept, the term “URL” had gained widespread popularity, which has continued to this day. CHAPTER 1 How Web Publishing Works 12 That’s all fine and dandy, but what does it mean? Let’s look at the sample URL again: http://mintybacon.com/chewing_gum.html Starting from the left side, the first thing you see is http:// This beginning section of the URL defines the protocol and it gives the browser important information about how to handle the URL. There are all sorts of other protocols (“ftp” being the most obvious example), but they are not germane to our discussion of web publishing and, therefore, fall outside of the scope of this book. For now, all you need to know is that the URLs in this book will always start with http://. After the protocol, we see mintybacon.com As I said earlier, this is the domain name that you purchased from your Domain Name Registrar, and it corresponds to a particular computer on the Internet. The last portion of the string is the name of the web page that you uploaded to the web server: chewing_gum.html One Last Thing About URLs Finally, I want to explain something that confused me to no end when I first started out with web publishing. Consider the following URL: http://mintybacon.com/ See how there is no page name? If you type that link into your browser, a page will load nonetheless. How does the web server know what page you are looking for if you didn’t specify it? Well, there are a few default page names that Apache will look for if someone makes a request that does not include a page name. The most common default page name is index.html So, if I uploaded a page named index.html to mintybacon.com, both of the following URLs would return the index.html page: http://mintybacon.com/ http://mintybacon.com/index.html Anatomy of a URL 13 1 What Have We Learned So Far? At this point, you should have a basic understanding of what it takes to publish a simple website with static HTML pages. But even a casual web user knows there’s more to the average website than static pages. What if you want to publish a “not-so-simple” website? What if you want to accept user input? What if you want the website to look different depending on the day of the week? What if you want to publish your FileMaker data to the web? For any of these tasks, we need to get a little bit more in depth about what can happen on a web server. Smart Web Pages Let’s take another look at my definition of web publishing from the beginning of this chapter: “To make HTML available on the Internet for people to view in a web browser.” Notice that I didn’t say “making HTML documents available.” My reason for making this distinction is that the web server can dynamically generate HTML in response to a browser request, rather than reading HTML out of a static document. This is a weird thing to get your head around at first, so I will try to explain it from a variety of angles. As described previously, when a browser requests a page from a web server, Apache reads the HTML from the page into memory and sends the HTML to the browser. Now, imagine that the page that was requested by the browser was a “smart” page—not just a simple text document that contained HTML, but rather a script that outputs HTML. This script could do all sorts of calculations based on things like the time of day, the date, or the browser that was making the request. After performing all of its calculations, the script would output the HTML that’s appropriate to the current situation, and the web server would send that to the browser. It might help to think of it like this: Instead of writing a static HTML document that will always look the same, you can write a script that will consider a bunch of stuff, and write some HTML for you at the time of the request. So, every time a user requests the page that contains the script, the result could be different. This is what I mean when I say a dynamic page. Dynamic pages change all the time. Static pages don’t. A dynamic HTML page does not contain HTML; it’s a page that contains a script that writes HTML. A lot of names are used to refer to these sorts of scripts—CGI, server-side processing, and middleware all come to mind. Whatever you call them, the concept is the same—the browser requests a page, the script runs, and the HTML that’s written on the fly is returned. CHAPTER 1 How Web Publishing Works 14 [...]... for PHP Hypertext Preprocessor,” and PHP pages end with the php filename extension This is important because Apache recognizes php files and knows to hand them off to the PHP processor for handling I cover PHP in detail in Chapter 3, “Introduction to PHP, ” so for now just remember that you can write special web pages with PHP to generate dynamic HTML for Apache Databases The final piece of our website... supposed to sit there listening for and responding to requests from web browsers, which it does extremely well 16 CHAPTER 1 How Web Publishing Works 7 PHP reads the page 8 PHP realizes that it needs the product list from FileMaker 9 PHP requests the product list from FileMaker 10 FileMaker returns the product list to PHP as raw data 11 PHP formats the raw data as HTML 12 PHP returns the HTML to Apache... as HTML 12 PHP returns the HTML to Apache 13 Apache returns the HTML to the browser As with HTML and PHP, working with FileMaker data is a complex topic, which I cover in detail in Part III, Publishing FileMaker Data on the Web. ” For now, you just need to understand that PHP is the middleman between Apache and FileMaker Summary I feel compelled to reiterate that what I am saying here is about as oversimplified... online product catalog using PHP and FileMaker Even if your web publishing needs are not of the product catalog variety, the product catalog paradigm has a great assortment of features that are applicable to lots of common situations By the time you are done with this book, you should know everything you need to know to get a basic— but functional FileMaker website up and running CHAPTER 2 Introduction... the database (also known as the “website backend”) Because you are reading this book, you are probably already using FileMaker Server as your database server and are wondering how to publish your FileMaker data to the web At a high level, it is pretty straightforward—you write a PHP page that will talk to your FileMaker Server machine Here’s an example of the process, with all of the major components... called PHP There are a lot of programs that are more or less similar to PHP Each has its strengths and weaknesses, but in my opinion PHP is the all-around winner It’s powerful, it’s pretty simple, it’s extremely well documented, it runs on virtually any platform, and perhaps most important—it comes preinstalled on the vast majority of the world’s web servers Oh, and did I mention that it’s free? NOTE PHP. .. drawing board and decided to rewrite the chapter in three sections Each section begins with a screenshot of a web page, followed by a discussion of the HTML behind the web page I think that this is much more engaging and useful than a dry dissection of HTML elements However, I realize that I am running the risk of overwhelming you with long code examples If the HTML examples seem long and complex, please... browser requests http://mintybacon.com/view_product_list .php 2 The Domain Name Registrar where mintybacon.com was purchased converts the domain name to the current IP address 3 The request is forwarded to the web server with that IP address 4 Apache on the web server receives the request 5 Apache sees the php filename extension 6 Apache asks PHP to process the page 1 The thing is, Apache doesn’t run... referred to as “angle brackets,” and they are used to enclose HTML tags Consider this line: NewCo Home Page is the opening tag and is the closing tag Notice how the closing tag has a slash after the first angle bracket and the opening tag does not As a general rule, an HTML element always has an opening and closing tag Between the opening and closing tags is the content,... you can go back and take a second whack at the tougher stuff Ready…set…go! The Scenario Suppose I built a little website for a company called NewCo Foods They just wanted three pages on the site: a home page, a product list page, and a contact page for people to request information Case 3: Contact Page 18 CHAPTER 2 Introduction to HTML NewCo gave me a JPEG image of their logo, along with some text . Preprocessor,” and PHP pages end with the .php filename extension. This is important because Apache recognizes .php files and knows to hand them off to the PHP processor for handling. I cover PHP in. browser. As with HTML and PHP, working with FileMaker data is a complex topic, which I cover in detail in Part III, Publishing FileMaker Data on the Web. ” For now, you just need to understand that PHP. What Do I Mean by Web Publishing, Anyway? . Simple Website in Five Steps . Anatomy of a URL . Smart Web Pages . Databases CHAPTER 1 How Web Publishing Works What Do I Mean by Web Publishing, Anyway? If