Archive for October, 2008

Simple Form Handling with PHP

Saturday, October 25th, 2008

I’ve seen some requests lately on how to handle form data. It’s pretty easy, and here is the most basic way of doing it. There isn’t any validation, or styling with CSS - just three separate files. You could actually do this with a little javascript/css and some php and do everything in one file - but like I said, this is the most basic way of doing it.

Your HTML Form

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <title>A simple form</title> </head> <body> <h1>A form</h1> <form action=”mail.php” method=”post”> <label for=”theName”>Name:</label><br> <input type=”text” name=”name” id=”theName”><br> <label for=”theEmail”>Email Address:</label><br> <input type=”text” name=”email” id=”theEmail”><br> <label for=”theMessage”>Message:</label><br> <textarea name=”message” id=”theMessage”></textarea><br> <input type=”submit” value=”send”> </form> </body> </html>

Your php file

<?php //enter the address to send the form to $toAddress = “someone@somewhere.com”; //enter the subject of the email you recieve $subject = “Contact from Web”; //enter the path to the file where the user gets sent to after submitting the form $thankYou = “thanks.php”; $name = $_REQUEST['name']; $email = $_REQUEST['email']; $message = $_REQUEST['message']; $body = “ $name $email $message”; mail($toAddress, $subject, $body, “From: $email”); header(”Location: $thankYou”); ?>

download

Tags: , ,
Posted in forms, php | 1 Comment »

CSS, HTML, and some PHP - part 3 - Header and Nav

Monday, October 20th, 2008

Let’s start making a website. At the bottom you can download what we’re going to finish this lesson. If you’d like, you can head back to part 1 and get the starting files, or you can pick up the layout files.

Now, this post we’re going to build our header and our main navigation. This sounds like a piece of cake, and if you’re so-so at CSS, you think this would be a breeze. However, if you look at the design, you’ll see something that’s going to make this a little more difficult. The background has a radial gradient positioned in the top left, and the body has a drop shadow. That means we can’t anticipate what shade of blue-green the body is going to be over, which means it’ll look funny. So, we need alpha transparency for the shadow - so we’ll have to use a PNG. Now, that header has a lot of detail in it, so unless you want a header that takes 40 seconds to download, we need to use a JPG. One or the other right? Wrong - we’re going to use both.

Now I didn’t comment my CSS and markup for learning purposes, I left it just how I would if I was making the site, however, I’ll comment the code here for instructional purposes.

This is a tutorial about how to use photoshop, so I’m not going into slicing up your images, but I will tell you this, preparation is 90% of the game - maybe more. If you take your time and slice up your images right, your job will be easier. Use your ruler, pull guides out where you want to slice. Then slice it up, zoom in - to 1200% if you need to and adjust your slice edges. If you’re slicing a drop shadow, put the object over a white background so you can get just what you need. For this, I’ve already sliced up the images we’re using, and saved them in the desired location - you can get the sliced images by downloaded the source files.

If you look at the packed image files you’ll see the page background image (for some reason I like to use camel case for naming files). You’ll also see a couple folders. We’ll be using the images in the header folder. You’ll see a large image, the JPG - and you’ll see some PNGs for the transparency for the sides and top. This may seem like a pain in the you-know-what, but since we’re using includes, the goes into 1 file, the header, and that’s it, so when you’re coding the pages it stays nice and clean.

We’re going to start off with the page background. You could add this to the skeleton body tag that’s already in the document, or just put another body in the css document, which is what I did. So, open up your default.css file located in the css folder.

Currently - your default style sheet should look like this.

/* css site: www. colors: #8f9e8b : background color; #feeab6 : yellow active color; —– */ /* —–general—– */ body {margin: 0; padding: 0; text-align: center; font-size: 62.5%;} img {border: none;} p {font-size: 1.2em; line-height:150%; font-family: Verdana, Arial, Sans-Serif;} h1 {font-size: 1.6em; font-family: Verdana, Arial, Sans-Serif; letter-spacing: -.1em;} h3 {font-size: 1.4em;} ul {padding: 0; margin: 0;} ul li {margin: 0 0 .5em 0;} a, a:visited {} a:hover {} /* —–utility—– */ .imgLeft {float: left; margin: 0 1em 1em 0; padding: 0;} .imgRight {float: right; margin: 0 0 1em 1em; padding: 0;} .clear {clear: both;}

If you look at it, you’ll see that I added some typography. Font families tell the browser which font to use, and if it doesn’t have that font installed it goes to the next one. Closing up the letter-spacing a bit means the letters sit closer together. Doing this to to headlines with Verdana has really renewed my interest in the font Verdana. So, below everything we already have, we’re going to add some more style to make the page look a little better.

/* here we're setting the background image to pageBg.jpg - if you look at the url you'll see the ../ preceding the directory, this is how you say up one directory, because the images are in relation to the css document, not the html or php file. So, it's up one directory, then into the image file. Then we’re telling that image not to repeat, we only want it to show once, then we tell it to fix itself on the top and left edge. Then we set the background color. All of these things are descriptions for the background attribute. You could split it up, using background-image: url(whatev); background-repeat: whatev; background-position: whatev; background-color: whatev; — that’s a lot of extra code though */ body {background: url(’../images/pageBg.jpg’) no-repeat top left #8f9e8b;}

So, if the images are in the right location, and you have your apache server up and running and open up and navigate to http://localhost/index.php file, you’ll see a page with a background. You may need a port number on your address.

So now - we’ll tackle that header. In the images/header folder we have a small slice that is the top shadow, then we have two images for the left and right edge that are also PNGs so we’ll get the transparency - unless you have IE6, which case you should stop reading, go to windows update, and install IE7 - or better yet, go to getfirefox.com and get firefox. You’ll also see a large image that is a JPG for the main part of the header.

First - here is the header css (from default.css) & markup (from the inc.head.php file)

/* here's the wrapper css as well, which now has a width */ #wrapper {text-align: left; margin: 0 auto; padding: 0; width: 910px;} /* —– header —– */ #header {padding: 0; margin: 0; position: relative; height: 130px; width: 910px; background: url(’../images/header/header.jpg’) no-repeat bottom 11px;} #header .leftEdge {position: absolute; width: 11px; height: 130px; left: 0; bottom: 0; background: url(’../images/header/headerLeft.png’) no-repeat;} #header .rightEdge {position: absolute; width: 11px; height: 130px; right: 0; bottom: 0; background: url(’../images/header/headerRight.png’) no-repeat;} #header .topEdge {position: absolute; top: 0; left: 11px; width: 888px; height: 4px; background: url(’../images/header/headerTop.png’) repeat-x;} #header h1 {font-size: 30px; color: #666; padding: 70px 0 0 20px; font-family: “Trebuchet MS”, Georgia, Serif;} #header h1 .css {font-family: Verdana, Arial, Sans-Serif; color: #000; letter-spacing: -.1em;} <div id="header"> <h1>howto<span class=”css”>CSS</span></h1> <div class=”leftEdge”></div> <div class=”rightEdge”></div> <div class=”topEdge”></div> </div><!–header–>

The HTML is pretty clean, the bottom three classes may be a bit confusing, but you see the start of the header div, a h1 tag, then the div closes. Now, the CSS for the header isn’t too bad. You’ll see every header style starts with #header - I believe in being specific, this helps for specificity. Let’s go through the CSS.

On the header div, most of it is pretty easy to follow. The position is set to relative though, which means that absolutely positioned elements inside of it will be positioned based on the header, as the container. If you leave the position: relative out, then the absolutely positioned elements would be based on the entire document. You’ll also see that on the background, we tell the image not-to repeat and then we position the background by telling it the bottom, and 11px. Positioning works in pairs, vertical and horizontal. They’re assumed to be center. I don’t want these centered on the div, well technically the image is centered horizontally, but I chose to use 11px because I know that’s the width of the side images.

Next comes the edges, which are absolutely positioned based on the relative item, or the header div. They all work the same. The left image is placed at the bottom and left, the right edge is placed at the bottom and right. The top edge is placed at the top, and 11 pixels from the left, for a width of 888 pixels. The key with the top edge is that it is repeated along the x axis, so horizontally.

I then style the headline, or name of the site. This is pretty basic, I do have a style called .css for the word CSS in the page name. I use a span style in the mark up to change the color and font of the word CSS.

Wow this is a long one - but we’re almost done

Next comes the navigation. In the mark up, in the header, after the page name, is an unordered list. It looks like this.

<ul id="nav"> <li><a class=”home” href=”index.php”>home</a></li> <li><a class=”about” href=”#”>about</a></li> <li><a class=”contact” href=”#”>contact</a></li> </ul>

The only thing out of the ordinary are the classes applied to the links, but I mentioned in a previous post why we do this. It’s for the navigation active state. Here’s the CSS for the navigation.

/* ----- nav ----- */ #nav {list-style: none; padding: 0; margin: 0; position: absolute; bottom: 0; right: 10px;} #nav li {float: left; font-size: 1.6em; margin: 0 20px; font-family: “Trebuchet MS”, Georgia, Serif; display: block;} #nav li a, #nav li a:visited {color: #fff; text-decoration: none; padding: 0 3px;} #nav li a:hover {background: #333;} #home #nav .home, #about #nav .about, #contact #nav .contact {color: #feeab6;}

First, you see that I used an ID and not a class for the navigation. Either would work, but ID is more semantically correct because main navigation shows up only once per page and all the items in the item with the ID of nav belong together. I tell the item with an ID of nav (which is going to be a list) that the list-style is none - which means no bullets. I strip the padding and margin off, I then absolutely position it, and set it to the lower right area to sit on that black bar. I could have used floats and margins but, this is easier. If you float the list items right inside the right floated list, then you have to list your links backwards, because the first listed is floated right, then it works its way back left.

For the li - I tell the list items to float left, so they show up horizontally. I also set the typography for the list items here, and put a margin on the left and right sides of the list items for some space. Next I style the links that are list items, I set the color and tell it text-decoration: none - which means no underlines on the links. I then set a hover style so when you mouse over a link the background color changes.

Lastly, here is where the magic happens, we tell the navigation that when the page id is “home” then the nav link with a class of “home” should be yellow. And when the page id is “about”, the link with a class of “about” is yellow. And when the page id is “contact”, the link with a class of “contact” is yellow. This idea may be a bit confusing at first, but it will make your life easier if you understand it.

This post was way to long, but we covered a lot of CSS. So, stay tuned for the next one in which we’ll look at the main content area and we’ll use sprites for our social links.

download

Tags: , , , ,
Posted in CSS, php | No Comments »

Layout File for CSS, HTML, PHP tutorial

Saturday, October 18th, 2008

I did just a one page layout in photoshop for the demo. You can download the photoshop file here. If you want to wait, I’ll upload all the images sliced up and ready to go. It may be beneficial to do both, so you can see the beginning file, and the ending file. If you want to customize any of the graphics or put your name at the top, whatever. You’ll find in the folder with the photoshop file a folder with some images in it that we’ll be using. We’re going to be using the sprite technique for the hover state for the social links. The reason why you use the sprites is because you end up with a smaller total file size, and you reduce the number of http requests on the server for the images. If I was really motivated, I would combine all of the social buttons into 1 big image, and for each button I would change the background position.

However, I’m feeling lazy this saturday and I’ve got some real work I need to take care of. Besides, if I cover every little trick, tip, and technique now, then what would I post about in the future? This is more of a taste.

download

Posted in CSS, php | No Comments »