Browsing Posts in Web Development

This is an update to a previous post on enabling PHP on Leopard.  These instructions will get you ready with Apache setup, PHP enabled and MySQL installed

Mac OS X 10.6 (Leopard) comes with both Apache 2.2.6 and PHP 5.2.4 pre-installed, but they’re not enabled by default.

These instructions involve editing some hidden files.  You could the free text editor TextWrangler (a free, cut-down version of BBEdit available from www.barebones.com), which can now install directly from the Mac App Store.   Whichever editor you use, you need to make sure it is setup to edit hidden files.  If you don’t want to worry about file permissions, then you can just make all the changes using the terminal, which the following instructions are based on.

Apache

It should already be installed with Snow Leopard but not turned on.  Open the terminal and start Apache

sudo apachectl start

Check that it is working by using your browser and enter:

http://localhost/

You should see:

It works!

PHP

Start the terminal an open the file:

/etc/apache2/httpd.conf

Find the line:

#LoadModule php5_module libexec/apache2/libphp5.so

Uncomment it (remove the # in front of the line). If you find you can not save the file due to file permissions, then fire up the terminal and enter:

sudo pico /etc/apache2/httpd.conf

Make the change and save the file. Restart Apache

sudo apachectrl restart

Next open System Preferences/Sharing and enable Web sharing. Note there the address for your site, which is a folder “Site” under your user folder. You will then be able to see it that works by entering a URL into your webrowser, using the name you gave your computer original:

http://macbook-pro/~UserName/

Create a single file with the name phpinfo.php with this content:

<?php
phpinfo(INFO_ALL);
?>

Save the file to your local Sites folder (/Users/UserName/Sites). Then test using the URL (substitute your computer name and user name)

http://localhost/~UserName/phpinfo.php

You will get a page showing all the settings for PHP with a heading something like, followed by all the PHP settings.

So where is the php.ini file?  There is not any, but you can add one to /etc by copying

/etc/php.ini.default to /etc/php.ini

Use the terminal and enter

sudo cp /etc/php.ini.default /etc/php.ini

Make it writable

sudo chmod 666 php.ini

In the php.ini file find the line

;date.timezone =

Uncomment it and insert your time zone (http://php.net/manual/en/timezones.php):
Restart Apache

sudo apachectl restart

MySQL

Download and install the latest MySQL version from mysql.com. With my new Mac Book Pro (early 2011) I installed the x86_64 version for Intel. Since Oracle has taken over MySQL it is a bit harder to find since you are presented with commercial offerings. Look for the MySQL Community Edition.

Test it is working in the terminal

/usr/local/mysql/bin/mysql

Edit the phi.ini file

vimo /etc/php.ini

Replace the three occurences of /var/mysql/mysql.sock by using /tmp/mysql.sock

pdo_mysql.default_socket=/tmp/mysql.sock
mysql.default_socket = /tmp/mysql.sock
mysqli.default_socket = /tmp/mysql.sock

Finally restart Apache

sudo apachectl restart

Open System Preferences and click on the MySQL preferance pane (which was installed above).  From here you can not start and stop MySQL, and enable it to start automatically when your system starts.

That’s it!

These are the steps I followed to install phpMyAdmin on my local machine, which is a MacBook Pro.  Substitute your own user name for “franz”.

  • Download the zip file from http://www.phpMyAdmin.net .  I downloaded version 2.11. Although there is a later version.
  • After Unzipping the file, I copied the folder to my Sites directory under /users/franz/sites
  • Using the finder, I navigated to those files, and created a folder called config in the phpMyAdmin folder.  I then set the write permission to read/write for that folder
  • I renamed the config.sample.inc.php by adding .bak, since I will be creating a new file with this name.
  • I started the configuration program by opening up a browser and entering:
http://localhost/~franz/phpMyAdmin/scripts/setup.php
  • I clicked under Servers the “Add” button
  • The only item I entered was the root password for the MySQL installation I had done
  • Click Add
  • On the next screen, make sure you click the “Save” under the Configuration section
  • This created a new file in the folder I created called “Config”.  I copied that file up to the parent directory and then deleted the Config folder.
  • I tried to start by entering the browser: http://localhost/~franz/phpmyadmin/
  • I had this error, which can happen on a Mac because it is looking for a file that has been moved to a new location.

phpmyadmin-error

  • To solve this, I openned up the terminal window and after loggin in entered the following commands:
sudo mkdir /var/mysql
sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock
  • I was then able to run phpMyAdmin by entering this into the browser
http://localhost/~franz/phpMyAdmin/
  • I then downloaded version 3 of phpMyAdmin and found the setup is a bit different.  You still have to create the config folder and make it read/write.
  • To configure use this URL instead:
http://localhost/~franz/phpMyAdmin/setup
  • Create a new server as shown above and then be sure to save the configuration.

With Leopard, the System Preferences pane is different.  There is now just a single option for web sharing.  Open System Preferences, Sharing and enable Web Sharing.  Apache2 is installed as a default.  You should see your local website using this in the browser (using your own user short name in place of “shortname”.

localhost/~shortname

If you upgrade to Leopard from a previous version of OS X, then you may get a “Forbidden 403″ message” instead of seeing your web page.  To fix go to this solution on the Apple website.

http://support.apple.com/kb/TA25038?viewlocale=en_US

Your web pages are stored in the folder /user/shortname/sites.  A default html page is located there, which should now come up.

MySQL is an open source database that is used by millions of people each year.  It is very robust and scalable.  But to access it usually requires some type of custom program or a MySQL front end.  There are other good database applications, such as Microsoft Access and FileMaker Pro.  These applications make it easy to design forms to add and edit the data, and to create custom reports such as mailing labels.  By using ODBC you are able to get many of the benefits of these local programs and the benefits of using a MySQL database.  This is how to get start.

OBDC Driver

First you need to install a ODBC driver if you don’t already have one.  A good source for a free driver is the MySQL website.  Look for the MySQL connector for the operating system you have. They have a version for Windows, Mac and Linux you can download for free.  Download one of the packaged drivers that include an installation program.

Setup The Connection

After you have the ODBC driver installed, you need to setup to use it to connect to your MySQL database. How you do that depends on your operating system.

Windows

Open the Control Panel, Administrative Tools, Data Sources (ODBC).  Click on the System DNS Tab and select to Add.  From the drop down select the ODBC driver you just installed.

odbc-connector-setup

Enter the information about your MySQL database, including the server and login information, then press Finish.

Mac

To setup for the Mac, it is similar.  In the Applications/Utilities folder you will find the “ODBC Aministrator” application.  Run that and select the System DNS tab, then click Add.  Select the driver you just added and then enter the login information for your MySQL database.  The form looks just the same as the figure above.

Connecting Microsoft Access to your MySQL database.

After starting Access, either open an existing database or start a new one.  Click on Tables and then click New.  Select the option for a Link Table.   For the File type, select ODBC databases.  Click on the Machine Data Source tab.  You should find the data source you setup in the step above, so select that, then select the table in the MySQL database you want to use.

If you have an existing Microsoft Application setup with a local database, if you export that data to a MySQL database using the same name, delete the table from the Access application, then add the MySQL table, it will use that table for the application in place of the local version you removed.  Your existing reports, queries and forms should work.

Connecting  File Maker Pro to your MySQL database.

Start File Maker Pro and either open an existing database or create a new local one.   Select File, Manage, External Data Sources.  Click on New and then select ODBC.  When you click the Specify button, you should be able to select the connector you setup already.

Conclusion

This tutorial is meant only to get you started  with installing an ODBC driver and making a connection to your MySQL database from either Microsoft Access or File Maker Pro.  Once you make that connection, you can then use the features in your database application with the MySQL table.  It should be noted that once you link the MySQL datbase to Access, it will be treated like a Access table and you would need to use Access SQL statements.  You will also find some limitations with this approach since some functions in Access will not work and some of the features of MySQL will not be available. But for many applications you will be able to work with Access as a front end to your MySQL database.

Moving Blog to Different Domain

A WordPress blog is a combination of three parts:

  • Web Hosting Control Panel.  This is only an issue if you wish to use the control panel provided by your web hosting company to install and update your WordPress installation.
  • Files on the domain (WordPress, configuration, plugins, templates, image uploads, etc.)
  • MySQL database with several tables.  Each starts with a $table_prefix variable (found in wp-config.php), with a default of “wp_”.

I have been keeping a blog dealing with photography. I initially put the blog under subdomain www.photo.franzkelsch.com. I decided to use get a new domain for my photography work and I wanted to move my blog to a subdomain there using www.blog.kelschphoto.com.

Since I was self-hosting using the WordPress blog publishing system on my own web hosting server with my own registered domain name moving the blog was not as simple as just exporting and reimporting the MySQL database. There are some steps that should be done to ensure the proper migration and no breaking links.  I also wanted to have my web hosting company install the new blog so I could upgrade it from their control panel.

Here are the steps I used to move my blog.

Backup Old Blog First

  • I made sure my old blog was running the latest WordPress software
  • I used FTP to download download all files from my old blog
  • I used the admin panel in my old WordPress blog to export the database.

Install New Blog

  • I first created a new WordPress blog in the subdomain using a brand new MySQL database table, including setting up user accounts.
  • From the FTP backup, I restored to the new location, the themes and plugins under “\ wp-content”  I has manually added to my old blog.
  • I activated the plugins and changed the theme to match.

Fixing the New Installation

  • Using the WordPress admin panel in the new blog, I selected to import the WordPress export from the old blog.  I checked the blog so it would find the uploads on the old blog and include them in the new blog.
  • To fix the links inside the blog I used phpMyAdmin on the newly imported database and issued these commands.

To update WordPress options with the new blog location:

These steps are not needed if you follow the new export/import functions show above
——————————————

UPDATE wp_table_prefix_options SET option_value = replace(option_value, 'http://www.old-domain.com', 'http://www.new-domain.com') WHERE option_name = 'home' OR option_name = 'siteurl';

To fix URLs of the WordPress posts and pages:

UPDATE wp_table_prefix_posts SET guid = replace(guid, 'http://www.old-domain.com','http://www.new-domain.com');

——————————————

To update any internally links within blog posts or pages with absolute URLs first find the table_prefix in the wp-config.php file so you know the name of you tables.  Then do this SQL querry update

UPDATE wp_table_prefix_posts SET post_content = replace(post_content, 'http://www.old-domain.com', 'http://www.new-domain.com');

  • I then tested the new blog and when I determined all was working, I deleted the old blog.

Changing Database Name

I had started to accumulate so many blogs that the casual type names I had given to the databases got out of hand.  I decided to change the names of the database to be similar to the domain name where I was hosting the WordPress blog.  So if the blog is at sports.franzkelsch.com I would want to use a database that shows the type of data it contains and the domain it is associated with such as wp_sports_franzkelsch .  That would be enough for me to quickly know it is a WordPress blog that is hosted at sports.franzkelsch.com.  I am currently hosting my sites at Dreamhost and I can not just rename the database since the blog is setup to use a particular database.

Matters are more complicated when I wanted to use the control panel on dreamhost.com (where I host my domains).  If it were not for this, I could simple create a new MySQL database and import to it the contents of the old database, then edit the wp-confg.php file to show the new database name.  But to keep the right settings in my Dreamhost control panel, so I could use it to update the WordPress files in the future, I had to follow:

  • Backup the MySQL database (Use phpMyAdmin or some other program)
  • Backup all the files in the domain/folder
  • Use the control panel to remove the WordPress installation.  You must do this before deleting the old MySQL database.
  • Either wait for the hosting company to delete the files or use FTP to delete them from the domain/folder
  • Create a new WordPress blog using the new MySQL database name
  • Manually delete the files that were added to the domain/folder by this installation.
  • Restore your MySQL backup to the new database
  • Edit the wp-config.php file to change the name of the data base in your backup files
  • Restore the files to the domain/folder
  • Check all is working
  • Delete the old MySQL database
  • Do a new WordPress install using your web hosting control panel.
  • Restore the files you backed up since the new install will be missing all your uploads.
  • Restore the MySQL database backup since the new install of WordPress will overwrite this
  • Go to the Site Admin, select Settings, then Permalinks.  Click Save to recreate the permalinks.
  • Remove the old MySQL database

That will get things synced in your webhosting control panel. Not sure it is worth all the effort, however.

Flash 10 Breaks WordPress File Upload

With the update of WordPress to version 2.6 you are allow you to switch from the flash uploader or Browser uploader (see the above image).  That was working just fine after upgrading WordPress.  At least it was until I came upon a website that said I did not have Adobe Flash installed in my browser.  I knew I had it installed but went ahead and did the update, which installed Flash 10.

That broke the WordPress Flash based file upload so each time I wanted to upload a file, I had to click the link for Browser based, select the file, then click Upload.  Lots of extra clicks.

Later when I was attempting to post a new Word Press blog entry and upload a file, the Choose File button did not work.

I was forced to select the use “Browser Upload” method instead.  That mean everytime I went to use upload a file I had to change the upload method. I found this anoying.  Research showed Flash 10 introduced a new security measure which prohibits the calling of the File Browse dialog from code. This means all flash based file uploader applications need to be radically changed in order to function with Flash 10. This change is affecting all flash based file uploaders across the web including Pixie, Flickr, WordPress etc.

Okay, so I did not need this headache so I decided to go back to Flash 9.  That was not so simple.  I finally found Flash 9 on the Adobe website.  It was there for developers to use to test software, just assuming everyone would want to use Flash 10.  Then I had to figure out how to uninstall version 10.  If found an unistaller here: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14157 .

Intially the uninstaller stalled when it started to access my Time Machine external drive.  I had to a force quite, take that drive off line, and then start over.  Finally after getting Flash 10 uninstalled, I installed version 9.  Now I can still click to choose the file using the flash uploader, but when when I select a file, it does not seem to upload.  So more trouble shooting is needed.

So the real question, who needs Flash 10 when it crippled things? They should have given a warning before they install.

Personal Websites Make-over

Long before most people had up a personal website, I started a website at one of my domains, kelsch.com. The problem with websites is trying to keep them current and updated. Eventually the information there was so out of date that I gave up and changed kelsch.com to a family blog. Blogs, such as this one are much easier to keep up and post new information.  I have setup several blogs for different purposes, as have most all of my children.

I still have several websites I do maintain. I decided to do a make over on all of them using some of the techniques I have found including:

  • Flash based slide show that goes through about several images.
  • RSS feeds from the various blogs and photo galleries.
  • Contact form

So with these feeds the website keeps current without any need for me to do anything. I can change the images for the slide shows at any time by using Lightroom, selecting 30 images, and doing an export to the right folder, then FTPing them to the site. It only takes a minute.  I also setup a photo gallery on the website, which is accessed at http://www.kelsch.org/gallery .  This is a gallery created entirely within Lightroom send directly to the webserver.  I am still playing around with this feature.

See the screen shots below.  Click on any of them and visit that website.

Here is a screen shot of what Kelsch.ORG looks like now [Visit Site].

Here is a screen shot of what the FranzKelsch.com site looks like now [Visit Site].

Here is a screen shot of what KelschFamily.NET looks like now [Visit Site].

Here is a screen shot of what my Photography site looks like now [Visit Site].

Here is a screen shot of what my Tech site looks like now [Visit Site].

I did have one issue with the kelsch.org site that that showed up only on Windows based browsers. I am using a Spry hortizontal menu and when I would click on the menu item, the drop down portion of the menu would be hidden by the flash slide show below.  Doing some research, I solved this by adding this command to the flash slide show coding:

<param name="wmode" value="transparent" />

This makes the background transparent.  Inside Dreamweaver, select the Flash slide show and in the properties select Parameters.  Add “wmode” with a value of “transparent”.  Change the order so this is the first parameter in the list.  That solved the issue.  For more information refer to this item:

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523&sliceId=1

It might be good to list down now all the domains I have, along with the subdomains, and what they are currently being used for.

Franz Kelsch Hosted Domains

Domain
Subdomain
Now Hosting
kelsch.com
root
F&A Blog
franz.kelsch.com
Collection Blog
john.kelsch.com
J&ABlog
jeff.kelsch.com
Jeff Blog
photo.kelsch.com PhotoBlog – Favorite Images
franzkelsch.com
root
Franz Website
sports.franzkelsch.com
Sports Blog
photo.franzkelsch.com Photography Bog
tech.franzkelsch.com Technology Blog
kelschfamily.net root Family History Website
annekelsch.com root Anne Website
ultracycle.net root Ultra Cycling Website
blog.ultracycle.net Blog
johnkelsch.com John Owns – Not Being Use
Remote Update of a Website using an iPhone

I am part of a two man relay team that will be competing in a 508 mile bike race called the Furnace Creek 508.  I setup a website for our team and wanted to have a way to update it while on the road using only my iPhone.

You can see the solution I developed here: http://www.ultracycle.net/prairiedog/index.php

Embedded into the website are two different RSS feeds.  One is from a gallery on SmugMug and the other from a WordPress blog.

I use two applications on my iPhone.  One is called SmugShots that allows me to take pictures with the iPhone and upload them to a gallery on Smugmug.  The pictures are saved on the iPhone until I am in a location where I get network access.  The thumbnails will soon appear on our team website.  I set the coding to show the last 7 photos.  If someone clicks any thumbnail they are taken to the SmugMug gallery.

The other application called WordPress allows me to post blog entries to a WordPress Blog.  The first part of the blog entry will show up on the website via RSS.  Those than want to read the whole entry just click on it.

Both applications are free.  This seems to be the easiest way to update the website using only the iPhone.  I would like to figure out one other item.  Near the top of our website I am using a Flash player to show a slideshow of images.  I am using some photos from last year’s race by our team but would like to figure out how to use the iPhone to upload some of the photos to the right folder on the webserver.  If anyone has an idea how to do that, please contact me at franz@kelsch.com.

Gmail Issues on POP Download to Multiple Devices

In the prior blog entry I talked about moving my domain for email over to GMail. Hosting my website at Dreamhost makes this simple.  I configured Gmail to allow POP access and changed my settings in Entourage to use the Gmail POP and SMTP settings.  It all seemed to work fine, except I notice that not all the emails were being downloaded.  When I checked my Gmail Inbox using a browser, I found messages there that did not download.

It was difficult to find out what was going on.  It seems that unlike most POP clients, with Gmail when any device downloads using POP, it marks the message as downloaded and then when another device tries to download the message, it does not download.  I had my iPhone setup for POP access, as well as using an app in MyYahoo to see the messages.  I view this to be a issue with Gmail that should have been fixed since all other POP clients can tell if a different device is attempting a download.

So how to fix?  I found this information: http://mail.google.com/support/bin/answer.py?hl=en&answer=47948

Basically you setup the mail client by adding “recent” in front of the username, as in “recent:name@gmail.com”.  You have to also leave a copy on the server, but that is true for all POP clients if you want to download to multiple devices.

When I added the “recent:” in front of my user name, I was able to get a bunch of messages.  I have to see how this works and see if I get multiple messages in my Inbox.

Using Google Apps with Your Own Domain

If you host your domain, you can use Google Apps using your own domain name, including using their gmail application.   If you use Dreamhost the steps are different and much simplified.  Be sure to setup the new email accounts in Google BEFORE you change tell Dreamhost to make the chagne, or you change the MX Records or you will lose emails.  Google provide excellent help on how to do all this, including videos.  However these don’t take into account what Dreamhost is doing for you so I have written these notes.

1. Sign up and sign in.

Dreamhost: If you are using Dreamhost to host your domain, go to your Dreamhost control plane and select Domain/Manage Domain.  Select to edit the domain.  Towards the bottom look for Google Hosted and click the link “register at Google Apps for your Domain”.  Do NOT try to have Google host yet since your email will be routed to Google and you have not yet setup user accounts.

Other: If you are not using a hosting company that provides the support, from the Google Apps home page, click ‘Compare Editions and Sign Up’ to get started and access to the control panel.  For most everyone the free Standard Edition would provide all that is needed.  You might wish to pay for the Premier Edition if you need more disk space, need to migrate your old email over or want 24/7 support.  After you make your selection on which plan, then enter your domain name.  Be sure to check that you are an administrator.  Learn more

2. Verify domain ownership.

Dreamhost: For one domain I setup I did not need to verify.  It seemed that once I clicked in the Dreamhost control panel to switch over to Google mail, verification worked.  For another domain I had to follow the steps below.  I choose to create a HTML file and upload to the domain.  It might be that for this second domain I had a WordPress blog setup on it instead of a website, as was the case for the first domain I switched over.  Once I had it verify using the HTML file I uploaded it said it woudl take up to 48 hours to verify domain ownership, however it worked in a matter of minutes.

Other: Otherwise go sign in and go to the dash boarad and then confirm that you own the domain you signed up with to activate Google Apps.  If you did not purchase your domain from Google, you will need to verify you are the owner.  This requires you to ypload a special file to your site and then create a special CNAME record for your domain. Learn more

3. Customize Google Apps.

This is the same if you use Dreamhost or not.  Google Apps lets you easily modify a variety of settings that apply to your entire organization.  Learn more

4. Create User Accounts.

This is the same if you use Dreamhost or not.  From the Google  control panel, create your user accounts accounts to match the users email accounts you already have setup.  Do this BEFORE you change the MX records in the next step.  You can bulk upload a list of user accounts if you wish.  Learn more

5. Turn on Email.

Dreamhost: If you are using Dreamhost, go to the Dreamhost control panel there and select Domains/Manage Domains.  Select Edit for the domain you are hosting and click “Google Host this domain now”. Dreamhost will re-route your email rather than you needing to change the MX records for that domain.  Then go to the control panel in Google Apps and activate email.  Although I did not actually change the MX records, I had to tell the google control panel that I had.

Other: If you are not using Dreamhost, to receive your email at Google, you need to modify the MX record for your domain.  You do this at the company where you have your domain registered.  Once you make the change, your email will not longer be routed where it was previously sent.  If you wish to check things out before you change the MX record, you can use a temporary email address to send to using this format: user.name@your_domain.com.test-google-a.com. You can use the webmail function in Gmail to send out an email directly.  Learn more

6.  Migrate Email.

If you use Micosoft Windows, Google offers a tool to migrate your existing email from some applications, such as Outlook, to your new Google Inbox. For Mac users, I did find one commercial program.  I also found one approach but have not tested it:

  • Using Thunderbird connect to your old email account through IMAP,
  • Do the same with your new Gmail account. You need to have Imap activated in Gmail in order to access it from Thunderbird. .
  • Copy email from each folder of your old accout to gmail.

If you are going to continue to use POP access it is not really important since you will use your email client to retrieve your new email and it will go into the same inbox as before.  If you wish to switch to IMAP, then prior emails will not be online, but that will be an issue of less importance as time moves on.