In Bitesize HTML5 – Switch from HTML to PHP Coding we switched the file extension from .html to .php. Some of you may have tried to open and view the pages in you browser and it did not work. That is because .php scripts Must be served by a server, no exceptions are allowed! If you have a hosting account, perhaps on Ubuntu running Apache, you can put your pages there. If not, you can try putting your .php pages on one of the following. All of these are Apache Web Servers with the .htaccess file working.
LAMP
– Works Great on Linux Mint with the Mate desktop (what I use). Any Linux can run this. Just search the Internet to get started. This is really the best because it is the same as your Linux Hosting Company uses!
XAMPP
– Many people recommend this. It is cross platform and has good online tutorials.
MAMP
– OS-X, Mac, and some Windows can use this.
WAMP
– If you are still using Windows, I feel sorry for you. You can use this, but you still have to deal with the problems of Windows. Remember the adage, “Two things stop working when you open Windows, air-conditioners and computers!”
EasyPHP
– a slight improvement (easier?) over WAMP – also for Windows.
The Folder / Directory Structure
After you have your server running in your computer you can create this file structure starting at your document root…
- / (document root)
- /cafe-zoe/
- /cafe-zoe/avatars/
- /cafe-zoe/css/
- /cafe-zoe/img/
- /cafe-zoe/js/
- /cafe-zoe/php/
- /cafe-zoe/php/annex/
- /cafe-zoe/php/class/
- /cafe-zoe/php/inc/
Fill Up the Folders
- /cafe-zoe/css/
I put the site css files here.
- /cafe-zoe/img/
I put the site graphics here.
- /cafe-zoe/php/annex/
I put all the .php (former .html) files here.
The rest of the folders are empty. When I tried to run a page from within the Apache server, it came out messy and not appealing at all. It was obvious I had moved the css and img files.
The Basic Structure
The reason I did this is to keep my internal files (.php files) together where I can protect them from cracker type hackers. I also put the external files (css, js, etc) and image files where the browser can access them. External, down to, but not including, the php folder. Internal, the php folder and below.
The empty folders are for future use and could be deleted at this point.
Fixing the CSS and Graphics
The old CSS link looked like this:
css/style.css
The new one needs to look like this:
/cafe-zoe/css/style.css
We could obviously add /cafe-zoe/ to this on every page. But we can now use PHP to fix this in a better way. We need a variable! All variables in PHP begin with a dollar sign followed by some name. For this I will call it $document_start and assign it the needed value like this:
<?php $document_start = '/cafe-zoe/';?>
Then I will put this at the top of every page. Later I will replace this with something automatic!
With that in place, all I need to do is put a little code wherever I need this adjustment…
<?= $document_start;?>
Like This:
<link rel="stylesheet" type="text/css" href="<?= $document_start;?>css/style.css" />
The final output will look like this:
<link rel="stylesheet" type="text/css" href="/cafe-zoe/css/style.css" />
At this point it may seem like extra work, but later you will see how this becomes automatic and can be moved from place to place or even from website to website for more website projects.
The Image Codes
Now that you have this, a quick look at the broken img elements and you will see they can be fixed in exactly the same way.
Add This:
<?= $document_start;?>
To This:
<img src="img/logo2.jpg" alt="CafeZoe Coffee Logo" />
Like This:
<img src="<?= $document_start;?>img/logo2.jpg" alt="CafeZoe Coffee Logo" />
To Get This:
<img src="/cafe-zoe/img/logo2.jpg" alt="CafeZoe Coffee Logo" />