Search Results for: building a data-driven web site

Yesterday, we installed a data-driven web site on your new Mac mini as part of our ISP-In-A-Box project, but it was the contents of my web site (see inset). So today, let’s finish your site by filling it with your content. First, we’ll cover replacing the Nerd Vittles image (see inset) with either your own photo or Google Ads. Then I’ll give you a brief tutorial on the structure of this data-driven web site and how to modify it with PhpMyAdmin. And you’ll be off to the races.

If you’re new to the computing world and short on money, one of the must-have photography tools for your new Mac or PC is Photoshop Elements. Lucky for you version 3 has just been released. But, if you don’t have $70, not to worry. You can get version 2 which runs on both the Mac and PC platforms (same CD) for about $20. I still use version 2. Works great! Just a little less (ful)filling. To replace the Nerd Vittles image in the web site, just create your own image (728 x 90 pixels), Save For Web as a JPEG image, and name it nerd.jpg. Now drag it into the /Library/WebServer/Documents/nerd folder and replace the existing nerd.jpg file. Refresh your browser display at http://localhost/nerd to see your finished product. Take a look at the one we did for our home page at mundy.org if you need ideas. Or, if you’d prefer Google Ads (see sample site), then edit index.php in /Library/WebServer/Documents/nerd folder using TextEdit, search for nerd.jpg, and delete everything between the CENTER codes surrounding it. Now paste your Google 728 x 90 Leaderboard ad code between the CENTER codes to complete your page. Save the document, and you’re all set.

Now let’s customize your new web site with your own content. First, take a look at the site as it looks today. Use http://localhost/nerd if you’ve already completed Part I. Otherwise, just look at mundy.org. There are four columns of site links: a favorites column on the left and three others which are subdivided into topics. As already mentioned, all of the data to generate this site is stored in a single MySQL table. So, to change the content, all we have to do is edit the MySQL table and plug in your own links. The only trick to this is an organizational one. Before beginning the editing process, you need to lay out on paper what site links you want to include on your web site. You probably don’t want my kids’ email links. In laying out your site, you also need to come up with the categories into which you will place your various site links. Also keep in mind that you can have just over a dozen favorites in the left hand column, and the remaining columns all need to have approximately the same number of site links. Fifty is a pretty good ballpark number for site links in each column, and those should be subdivided into about four topics per column. You can always start with less and add more later. Just divide them up evenly so they can be spread across three columns. If you haven’t figured it out yet, this is the hard part. Making the adjustments to the MySQL table using PhpMyAdmin is pretty easy. Once you finish this project, I hope a few of you will be brave enough to post a comment below with a link to your site so we can all take a look and give you a little friendly feedback.

While laying out your site on paper, you should have come up with the subheadings for each section, and you should have defined which sections will go in which column and in what order. Now let’s number the columns (1 through 4) and the subheads in each column starting with 1. You can start the subhead numbers over with 1 in each new column. Finally, number the site links in each category starting with 1. If you have more than 9, use the alphabet after 9. Then start the site links over with 1 for each new subhead. On another piece of paper, let’s make a chart with seven column headings: Web Site Name (subject), Web Site Address (url), Description (comments), Column Number (category), Subhead Sequence Number (majorsort), Subhead Title (majorcateg), and Sort Sequence within Subhead (sortcode). The headings in italics are the actual field names in the MySQL website table. The headings in bold identify what information goes there. Having a description for any or all entries is optional. The other fields all are required. Now fill in the chart with your information. And, yes, I know the field names could have been more helpful, but the margaritas sure were good the night I originally designed this. Now, just so you’ll know, when index.php builds your data-driven web site (on the fly), it sorts all of the information in the website table by column number (category), then subhead sequence number (majorsort), then subhead title (majorcateg), then sort sequence within the subhead (sortcode). The only real gotcha is to make sure all of your subhead titles (majorcateg) are the same within a given subhead sequence number (majorsort), or you get extra subheadings in your page. It’s still no big deal. Just edit the table again to fix it.

Now that we’ve got our data squared away, let’s open PhpMyAdmin and get started: http://localhost/php/. Click on the Database pull-down in the left frame and choose mundy. Now click on the website table under the mundy database. Information associated with the Structure tab of the website table should appear in the right frame. Let me just note here that there is a bug in the frame code of PhpMyAdmin that causes the right frame to open in the left frame once it awhile. That doesn’t work too well because there’s insufficient real estate in the left frame to see what you’re doing. Don’t get frustrated if this happens. Just close the PhpMyAdmin browser window and then reopen it, and all will be well.

Once the structure frame appears in the right frame, we’re going to build a quick index so you can see how the data actually lines up in the website table to match our current web site. Look in the Indexes section of the right frame and find the line that begins: Create an index on 1 columns. Click on the numeric field (with the 1) and change it to a 4. Then press the Go button. Name your new index MyIndex. Leave the index type set to Index. Then use the four pull-downs to specify the index fields in the following order: category, majorsort, majorcateg, sortcode. Now click the Save button. You should now see your MyIndex index in the listing of indexes. Make sure the index order is correct. If not, click the red X beside MyIndex to delete it, and try again. Now click on the Browse tab at the top of the right frame to bring up the table browsing window. Just above the data is a line which reads: Sort by key. Click on the pull-down, choose MyIndex (Ascending) and click the Go button. The website table should now be sorted in the same order as the display of web links on the actual web page at localhost/nerd. Using the tab feature of your browser, you can flip back and forth between the web site and the website table to verify that they do, indeed, match. Notice also that the first three records have the same sortcode. This is an easy way to adjust the placement of a newly added entry (to move it further up your list) without having to renumber every entry. The last thing we want to do before we begin editing the actual table is to expand the table display to include all of the records in our file. Just above the table data is a line which reads: Show: 30 rows starting from record # 30. Change the first 30 to 300, and change the second 30 to 0. Then click the Show: button. Now the entire website table is displayed just as it appears on your current web site. As you make changes to your web site now, my advice is add or change a few records at a time, and then refresh your web page and make sure it looks and works the way you expected. A tabbed browser is great for this exercise by the way so kiss Internet Explorer goodbye (if you haven’t already).

You have two choices now. You can either delete some or all of the existing records and then insert new records of your own, or you can edit the existing records to replace the existing content with your own data from your chart. I’d recommend the latter at least until you know what you’re doing. To edit a record, click on the Pencil icon just to the left of the red X for the record you want to edit. To delete a record, you click on the red X. If you leave the existing records, then you won’t have to worry about the majorsort, category, and sortcode fields for the time being. And don’t ever change the recno (record number) field which must remain unique. Just change the majorcateg data to match whatever subheads you have chosen for your own web site, and plug in your own data for the subject, url, and comments fields. Once you’ve made your changes to a record, click the Go button to save your data and move back to the table browser window. Wait until you have finished editing and deleting existing rows in the table before you add new ones because clicking on the Insert tab clears the settings for your table browser window. When you’re ready to add new records, just click on the Insert tab at the top of the right frame. Leave the recno field blank, and MySQL will automatically fill it with a new, unique sequence number. Click the Go button to save your new record once you fill in the information for each field. That’s all there is to it. Enjoy your new web site … and let us all know where to go look for it!

Our project for today and tomorrow is to construct a data-driven web site (see inset) using Apache, PHP, PhpMyAdmin, and MySQL. If you’ve followed along the past couple weeks and built an ISP-In-A-Box with us using your new Mac mini or any other Mac running a current version of Mac OS X, then you’re ready to go. If you’re from the Windows XP universe, you can do much the same thing using our Webifying XP tutorial from last year. Or, if you are using any computer or web hosting service that supports Apache, PHP, PhpMyAdmin, and MySQL, then you’re all set. Otherwise, pick one of the above, install the pieces, and then come back and join the party.

Game Plan. The plan of attack for today is to download and install my sample working data-driven web site on your server. You can look at a working version of what we are going to install here. Then tomorrow we’ll customize the web site with your content. We’ll use PhpMyAdmin to edit the MySQL database which actually stores all of the content for your new web site.

Prerequisites. In order to follow along on this project, you should already have bought your Mac mini and activated the Apache Web Server. Before you can actually build the data-driven web site, you must install MySQL and PHP and PhpMyAdmin. For your computer’s sake, we’d prefer you read the entire ISP-In-A-Box series (now in PDF format), but that, of course, is up to you. Before we begin, make certain that your web server and MySQL both are running. If you can’t remember the procedures to start them up, reread the tutorials referenced above.

Overview. As the name implies, a data-driven web site is one in which the content for the site is obtained from a database. The power and real beauty of PHP is that, when someone accesses your web site, Apache directs PHP to swing into motion and actually execute all of the instructions stored in your .php web page. In our case, the PHP instructions for the web site tell your computer to access a MySQL database and pour all the contents of the database into a web page template which we have constructed. PHP, however, is sufficiently flexible to allow you to build something much more sophisticated using virtually any database you or your company already has. That includes Oracle, Sybase, Informix, filePro, InterBase, mSQL, MySQL, PostgreSQL, and Microsoft SQL Server databases of any flavor as well as any other database with an ODBC connector. And the database need not reside on your home computer although in our case it will. Unless you will have a site with incredibly high transaction-oriented database processing activity such as a busy eCommerce web site which manages inventory as well as sales, MySQL databases are not only adequate but in many cases can run circles around expensive commercial databases such as Oracle and Informix. The moral of the story is don’t assume MySQL is going to clunk along just because it happens to be free. You will be amazed by its performance. Several of our beach webcam sites (pawleys.org and gardencitybeach.org) have thousands of visitors per day and use links to MySQL databases to look up tide and sunrise/sunset data from a huge 100-year MySQL table. The performance is virtually instantaneous, and you will see similar results. In the case of our sample web site, we’re only going to be accessing a hundred records or so which wouldn’t tax any database, but the idea here was to give you a model for future projects that might include large inventories of significant size. Using MySQL, the performance results will be almost identical with an indexed 100MB table as they are with our same database today. So let’s get started.

Installing the Sample Web Site. We’ve built a tarball (nerd.tar) containing all of the pieces you will need to construct the data-driven web site on your own computer. Just click here to download the file to your desktop which should decompress into a folder called nerd. If not, double-click on the nerd.tar file on your desktop to decompress it into a folder. Now there are three simple steps to complete today’s project. First, we need to create a MySQL database in which to store our website table. Then we need to import the sample data into the MySQL database. And finally we need to move our web site objects to their final home on your computer.

Creating a MySQL Database. To create the MySQL database in which to store our website table, we are going to use PhpMyAdmin which we installed last week. Using the web browser on your server, go to the following web site: http://localhost/php/. You should have a two-panel PhpMyAdmin display. If not, click on Home to open both panels. In the right-column box under the words "Create New Database" type mundy in lower-case letters. If there is a collation option in your version of PhpMyAdmin, choose UTF8_bin. Then click the Create button. MySQL should report that the mundy database was created. [If you’re doing this through a web hosting service instead of using your own server, then access cPanel for your web site, click on the MySQL icon, find the Db: section of the page, type in mundy for the database name, and click the Add Db button. To complete part (b) below, just click on the PhpMyAdmin link at the bottom of the screen you’re in.]

Populating the MySQL Database. Press the F11 function key to temporarily hide your web browser, and then Double-Click on the nerd folder to open it. Now Ctrl-Click on the website.sql file and choose Open With Other and pick the TextEdit application. When the file opens with TextEdit, click Edit in the TextEdit menu bar and then click Select All. All of the text in website.sql should now be highlighted. If not, try again. Now click Edit in the TextEdit menu bar again and then click Copy. This puts a copy of the website.sql file on your clipboard. Now press F11 to reopen your web browser. Double-click on the mundy database in the left column of PhpMyAdmin which will open a new window in the right column. Newer version of PhpMyAdmin have a tabbed interface in the right panel. If you see a SQL tab, click on it. Now click in the box immediately below Run SQL query/queries… to highlight it. Now choose Edit from your browser’s menu bar and click Paste to paste a copy of website.sql into the highlighted box in PhpMyAdmin. You should see several of the bottom lines of text from the file ending with an entry for "Atlanta gas prices." If you don’t see this, clean out the text box and repeat the steps above. Once all the text has been pasted into the text box, click the Go button immediately below the Run SQL Query box. MySQL will whirr away for a couple seconds and then report that the website table has been imported. Now close your web browser for the time being. And close the nerd folder on your desktop.

Bringing the Site On Line. Putting our data-driven web site into production is a piece of cake now. Using Finder, click on your local hard disk and move to the /Library/Webserver/Documents directory. Now click-and-drag the nerd folder from your desktop into the Documents directory you opened with Finder. Once the folder has been moved, you should be able to access your new web site by going to the following address with your web browser: http://localhost/nerd/. Or you can access it on the Internet using your new domain name with the syntax: http://yourdomain/nerd/. If you’d prefer to access the site as your default web site at http://yourdomain, then the contents of the nerd folder need to be copied or moved into /Library/Webserver/Documents and all the other files beginning with the word "index" (except index.php) need to be moved out of the Documents folder (either into a new folder for safekeeping or to the trash). You don’t need to move the website.sql file since we only needed it to import the original data into MySQL. [If you’re doing this through a web hosting service instead of using your own server, then you’ll need to make one minor change in the index.php file for this application. Open index.php with an editor and search for mundy. Most ISP’s use a MySQL database syntax like this: youraccountname_mundy. So just append your account name and then an underscore character before the existing database name mundy, and save the file.]

Meet us back here tommorow to learn all about customizing your new web site with your very own content. In the meantime, write down your favorite 100 web sites with appropriate links. We’ll need them tomorrow.