![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/poll-web.jpg?resize=570%2C489\" "\\"\\"")
<\/figure>\nThe live demo is no longer online, but you can download a .zip<\/a> of all the files from this demo.<\/p>\n Create a brand new Photoshop document. In mine, I have filled the background with a dark blue (#233743) and have it sized at 700x700px. <\/p>\n Then create a brand new layer (press the little page icon in the layers palette) on top of your background layer. Select the gradient tool (sub tool of the paint bucket tool). Make sure you have the gradient tool set to Foreground to Transparent, radial, and full opacity like this:<\/p>\n In mine, I used a slightly lighter blue color (#364c5a) and drug out a gradient from near the top middle. The gradient can go “off” the top, but make sure it doesn’t go off either side or the bottom. The idea here is that we are going to center this over a background of a matching blue, so we don’t want the gradient to end abruptly. The reason we are making this on it’s own layer is so we can nudge it around without having to re-do it. <\/p>\n Now let’s add the fun “POLL!” text at the top. Here I used the font Agenda Black (one of my new favs) in an even lighter shade of blue (#e3f1fa). I free-transformed it (Command-T) in order to rotate it a bit and then gave it a slight drop shadow in the layer styles.<\/p>\n Now the graphic is ready to be saved out. You can “Save for Web & Devices” from the file menu. Use a high quality JPG setting (best for larger images with gradients). Name the file “page-bg.jpg” and save it into an “images” folder inside a directory you will use for this project.<\/p>\n A poll, in our case, is just a really simple form. Basically a series of radio button inputs and a submit button. Here is what the entire HTML markup looks like:<\/p>\n Few things to note in the markup here. I put my form inside a fieldset. Nothing functionality related here, I just like how the fieldset\/legend combination looks and gives us a hook for some CSS styling. Also notice how the inputs are inside the label elements. This allows users to click on the words as well as the radio button to select it, which is nice. Also notice the bit of PHP in the action for the form, we’ll get to that later.<\/p>\n Here is the CSS:<\/p>\n Notice the styles there at the bottom for things that aren’t in our markup yet, those are for the Results page which we’ll get to later.<\/p>\n Most hosting packages allow you to create databases on your server. If you don’t already know how, you may need to contact them or search around their help areas to find out how to add a new one. <\/p>\n CSS-Tricks is on Media Temple, so there is a handy little tool right in the domain admin area for creating new databases:<\/p>\n Make sure this is a MySQL database. The four things you will need to know are the hostname, the database username, the database “password”, and the name of the database.<\/p>\n Now you will need to create a new file in the directory you have started for this project called “conn_vote.php”. I have put mine inside a subfolder called “Connections”. Here is the PHP:<\/p>\n Notice the four lines in bold above, those are the four variables for the four things I said you would need to know. Chances are good that your host is going to be localhost, but it isn’t always. In the case of Media Temple like me, it’s something like this: internal-db.s12345.gridserver.com<\/em><\/p>\n Your brand new empty database is going to need a table structure and some fake data to get started. Here is some SQL you can run to get that done:<\/p>\n Most hosts also give you access to phpMyAdmin for running stuff like this. Make sure<\/strong> you are on your new database and then you can paste in that SQL and run it.<\/p>\n Now we are ready for some PHP coding magic to make this all work. I can’t pretend to understand all this, but the gist of it is that it will take your selected option, turn it into a nice readable and safe string value, and save it as a new entry in that table in our DB.<\/p>\n Huge thanks to Jonathan Feanfor the PHP that powers this thing and David Walsh for helping me work out some kinks and get it up and running on my server.<\/p>\n Insert this PHP code at the top (even before the DOCTYPE) of your poll.php file:<\/p>\n And this PHP at the very end of the poll.php file (even after the <html>):<\/p>\n So our polls is up and working and successfully gathering votes, but the results page is the true payoff! Not only is this the fun part, but our PHP function auto-re-directs to a “results.php” page after you press the vote button, so we kinda have to build one =)<\/p>\n This time I will give you all the markup and the PHP together in one big lump:<\/p>\n Notice there is a little math being done in the PHP which calculates the percentage of the total votes for each poll option. Not only is this good information, but we can use that percentage to set the width of a bar to add some visual flair to our results. Each poll option has it’s own list item where the total votes for that item is displayed along with a “results-bar”, who’s width is determined by setting an inline width value to the percentage calculated. Back in our CSS, we already have that div styled up with a subtle patterned background image.<\/p>\n1. Design the Background in Photoshop<\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/ps-poll-1.jpg?resize=570%2C616\" "\\"\\"")
<\/figure>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/gradient-options.jpg?resize=454%2C39\" "\\"\\"")
<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/ps-poll-2.jpg?resize=570%2C616\" "\\"\\"")
<\/figure>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/ps-poll-3.jpg?resize=570%2C616\" "\\"\\"")
<\/figure>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/saveforweb-poll.jpg?resize=570%2C407\")
<\/figure>\n2. Building the Page Structure<\/h3>\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\r\n<title>Poll<\/title>\r\n<link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<\/head>\r\n<body>\r\n<fieldset>\r\n\t<legend>What is your JavaScript library of choice?<\/legend>\r\n\t<form action=\"<?php echo $editFormAction; ?>\" id=\"form1\" name=\"form1\" method=\"POST\">\r\n\t\t<label>\r\n\t\t\t<input type=\"radio\" name=\"Poll\" value=\"mootools\" id=\"Poll_0\" \/>\r\n\t\t\tMootools\r\n\t\t <\/label>\r\n\t\t<label>\r\n\t\t\t<input type=\"radio\" name=\"Poll\" value=\"prototype\" id=\"Poll_1\" \/>\r\n\t\t\tPrototype\r\n\t\t<\/label>\r\n\t\t<label>\r\n\t\t\t<input type=\"radio\" name=\"Poll\" value=\"jquery\" id=\"Poll_2\" \/>\r\n\t\t\tjQuery\r\n\t\t<\/label>\r\n\t\t<label>\r\n\t\t\t<input type=\"radio\" name=\"Poll\" value=\"spry\" id=\"Poll_3\" \/>\r\n\t\t\tSpry\r\n\t\t<\/label>\r\n\t\t<label>\r\n\t\t\t<input type=\"radio\" name=\"Poll\" value=\"other\" id=\"Poll_4\" \/>\r\n\t\t\tOther\r\n\t\t<\/label>\r\n\t\t<input type=\"submit\" name=\"submit\" id=\"submit\" value=\"Vote\" \/>\r\n\t\t<input type=\"hidden\" name=\"id\" value=\"form1\" \/>\r\n\t\t<input type=\"hidden\" name=\"MM_insert\" value=\"form1\" \/>\r\n\t<\/form>\r\n<\/fieldset>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n* { \r\n\tmargin: 0; \r\n\tpadding: 0; \r\n}\r\nbody { \r\n\tfont-size: 62.5%; \r\n\tfont-family: Georgia, serif;\r\n\tbackground: url(images\/page-bg.jpg) top center no-repeat #233743; \r\n}\r\nh6 {\r\n\tfont-size: 1.4em;\r\n\tmargin-bottom: 15px;\r\n}\r\na { color: white; }\r\nlabel, li {\r\n\tdisplay: block;\r\n\tpadding: 5px;\r\n\tfont-size: 1.4em;\r\n\tcolor: #e3f1fa;\r\n}\r\nfieldset {\r\n\tmargin: 115px auto;\r\n\twidth: 400px;\r\n\tpadding: 8px 15px 15px 15px;\r\n\tborder: 1px solid white;\r\n\tdisplay: block; \/* IE 7 Requires This *\/\r\n\t}\r\n\tlegend {\r\n\t\tpadding: 4px 6px 4px 6px;\r\n\t\tborder: 1px solid white;\r\n\t\tfont-size: 2.0em;\r\n\t\tcolor: #e3f1fa;\r\n\t\tfont-style: italic;\r\n\t}\r\nul { list-style: none; margin-bottom: 15px;}\r\n.results-bar {\r\n\tpadding: 10px;\r\n\tcolor: white;\r\n\tbackground: url(images\/result-bar-bg.png) left center;\r\n\twhite-space: nowrap;\r\n}\r\nspan.total-votes {\r\n\tfont-size: 2.6em;\r\n}<\/code><\/pre>\n3. Create a Database to Store Results<\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/addnewdb.jpg?resize=570%2C256\")
<\/figure>\n<?php\r\n# FileName=\"Connection_php_mysql.htm\"\r\n# Type=\"MYSQL\"\r\n# HTTP=\"true\"\r\n$hostname_conn_vote = \"localhost\";\r\n$database_conn_vote = \"your-database-name\";\r\n$username_conn_vote = \"your-database-username\";\r\n$password_conn_vote = \"your-database-password\";<\/strong>\r\n\/\/$conn_vote = mysql_pconnect($hostname_conn_vote, $username_conn_vote, $password_conn_vote) or trigger_error(mysql_error(),E_USER_ERROR);\r\n$conn_vote = mysql_connect($hostname_conn_vote, $username_conn_vote, $password_conn_vote) or die('Can\\'t create connection: '.mysql_error());\r\nmysql_select_db($database_conn_vote, $conn_vote) or die('Can\\'t access specified db: '.mysql_error());\r\n?><\/code><\/pre>\n-- \r\n-- Table structure for table `poll`\r\n-- \r\nCREATE TABLE `poll` (\r\n `id` int(3) NOT NULL auto_increment,\r\n `question` varchar(200) default NULL,\r\n PRIMARY KEY (`id`)\r\n) ENGINE=MyISAM AUTO_INCREMENT=43 ;\r\n-- \r\n-- Dumping fake data for table `poll`\r\n-- \r\nINSERT INTO `poll` VALUES (42, 'jquery');\r\nINSERT INTO `poll` VALUES (41, 'mootools');\r\nINSERT INTO `poll` VALUES (40, 'other');\r\nINSERT INTO `poll` VALUES (39, 'mootools');\r\nINSERT INTO `poll` VALUES (38, 'jquery');\r\nINSERT INTO `poll` VALUES (37, 'mootools');\r\nINSERT INTO `poll` VALUES (36, 'spry');\r\nINSERT INTO `poll` VALUES (35, 'jquery');\r\nINSERT INTO `poll` VALUES (21, 'mootools');\r\nINSERT INTO `poll` VALUES (22, 'other');\r\nINSERT INTO `poll` VALUES (23, 'mootools');\r\nINSERT INTO `poll` VALUES (24, 'mootools');\r\nINSERT INTO `poll` VALUES (25, 'prototype');\r\nINSERT INTO `poll` VALUES (26, 'other');\r\nINSERT INTO `poll` VALUES (27, 'mootools');\r\nINSERT INTO `poll` VALUES (28, 'spry');\r\nINSERT INTO `poll` VALUES (29, 'jquery');\r\nINSERT INTO `poll` VALUES (30, 'mootools');\r\nINSERT INTO `poll` VALUES (31, 'prototype');\r\nINSERT INTO `poll` VALUES (32, 'mootools');\r\nINSERT INTO `poll` VALUES (33, 'mootools');\r\nINSERT INTO `poll` VALUES (34, 'mootools');<\/code><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/phpmyadmin.jpg?resize=570%2C244\" "\\"\\"")
<\/figure>\n4. Make it Work with PHP<\/h3>\n
<?php require_once('Connections\/conn_vote.php'); ?>\r\n<?php\r\nif (!function_exists(\"GetSQLValueString\")) {\r\nfunction GetSQLValueString($theValue, $theType, $theDefinedValue = \"\", $theNotDefinedValue = \"\") \r\n{\r\n $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;\r\n\r\n $theValue = function_exists(\"mysql_real_escape_string\") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);\r\n\r\n switch ($theType) {\r\n case \"text\":\r\n $theValue = ($theValue != \"\") ? \"'\" . $theValue . \"'\" : \"NULL\";\r\n break; \r\n case \"long\":\r\n case \"int\":\r\n $theValue = ($theValue != \"\") ? intval($theValue) : \"NULL\";\r\n break;\r\n case \"double\":\r\n $theValue = ($theValue != \"\") ? \"'\" . doubleval($theValue) . \"'\" : \"NULL\";\r\n break;\r\n case \"date\":\r\n $theValue = ($theValue != \"\") ? \"'\" . $theValue . \"'\" : \"NULL\";\r\n break;\r\n case \"defined\":\r\n $theValue = ($theValue != \"\") ? $theDefinedValue : $theNotDefinedValue;\r\n break;\r\n }\r\n return $theValue;\r\n}\r\n}\r\n\r\n$editFormAction = $_SERVER['PHP_SELF'];\r\nif (isset($_SERVER['QUERY_STRING'])) {\r\n $editFormAction .= \"?\" . htmlentities($_SERVER['QUERY_STRING']);\r\n}\r\n\r\nif ((isset($_POST[\"MM_insert\"])) && ($_POST[\"MM_insert\"] == \"form1\")) {\r\n $insertSQL = sprintf(\"INSERT INTO poll (id, question) VALUES (%s, %s)\",\r\n GetSQLValueString($_POST['id'], \"int\"),\r\n GetSQLValueString($_POST['Poll'], \"text\"));\r\n\r\n mysql_select_db($database_conn_vote, $conn_vote);\r\n $Result1 = mysql_query($insertSQL, $conn_vote) or die(mysql_error());\r\n\r\n $insertGoTo = \"results.php\";\r\n if (isset($_SERVER['QUERY_STRING'])) {\r\n $insertGoTo .= (strpos($insertGoTo, '?')) ? \"&\" : \"?\";\r\n $insertGoTo .= $_SERVER['QUERY_STRING'];\r\n }\r\n header(sprintf(\"Location: %s\", $insertGoTo));\r\n}\r\n\r\n$colname_rs_vote = \"-1\";\r\nif (isset($_GET['recordID'])) {\r\n $colname_rs_vote = $_GET['recordID'];\r\n}\r\nmysql_select_db($database_conn_vote, $conn_vote);\r\n$query_rs_vote = sprintf(\"SELECT * FROM poll WHERE id = %s\", GetSQLValueString($colname_rs_vote, \"int\"));\r\n$rs_vote = mysql_query($query_rs_vote, $conn_vote) or die(mysql_error());\r\n$row_rs_vote = mysql_fetch_assoc($rs_vote);\r\n$totalRows_rs_vote = mysql_num_rows($rs_vote);\r\n?><\/code><\/pre>\n<?php\r\n mysql_free_result($rs_vote);\r\n?><\/code><\/pre>\n5. Create a Results Page<\/h3>\n
<?php require_once('Connections\/conn_vote.php'); ?>\r\n<?php\r\nif (!function_exists(\"GetSQLValueString\")) {\r\nfunction GetSQLValueString($theValue, $theType, $theDefinedValue = \"\", $theNotDefinedValue = \"\") \r\n{\r\n $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;\r\n\r\n $theValue = function_exists(\"mysql_real_escape_string\") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);\r\n\r\n switch ($theType) {\r\n case \"text\":\r\n $theValue = ($theValue != \"\") ? \"'\" . $theValue . \"'\" : \"NULL\";\r\n break; \r\n case \"long\":\r\n case \"int\":\r\n $theValue = ($theValue != \"\") ? intval($theValue) : \"NULL\";\r\n break;\r\n case \"double\":\r\n $theValue = ($theValue != \"\") ? \"'\" . doubleval($theValue) . \"'\" : \"NULL\";\r\n break;\r\n case \"date\":\r\n $theValue = ($theValue != \"\") ? \"'\" . $theValue . \"'\" : \"NULL\";\r\n break;\r\n case \"defined\":\r\n $theValue = ($theValue != \"\") ? $theDefinedValue : $theNotDefinedValue;\r\n break;\r\n }\r\n return $theValue;\r\n}\r\n}\r\n\r\nmysql_select_db($database_conn_vote, $conn_vote);\r\n$query_rs_vote = \"SELECT * FROM poll\";\r\n$rs_vote = mysql_query($query_rs_vote, $conn_vote) or die(mysql_error());\r\n$row_rs_vote = mysql_fetch_assoc($rs_vote);\r\n$totalRows_rs_vote = mysql_num_rows($rs_vote);\r\n\r\n$resultQuestion1 = mysql_query(\"SELECT * FROM poll WHERE question='mootools'\");\r\n$num_rowsQuestion1 = mysql_num_rows($resultQuestion1);\r\n\r\n$resultQuestion2 = mysql_query(\"SELECT * FROM poll WHERE question='prototype'\");\r\n$num_rowsQuestion2 = mysql_num_rows($resultQuestion2);\r\n\r\n$resultQuestion3 = mysql_query(\"SELECT * FROM poll WHERE question='jquery'\");\r\n$num_rowsQuestion3 = mysql_num_rows($resultQuestion3);\r\n\r\n$resultQuestion4 = mysql_query(\"SELECT * FROM poll WHERE question='spry'\");\r\n$num_rowsQuestion4 = mysql_num_rows($resultQuestion4);\r\n\r\n$resultQuestion5 = mysql_query(\"SELECT * FROM poll WHERE question='other'\");\r\n$num_rowsQuestion5 = mysql_num_rows($resultQuestion5);\r\n\r\n$percentQuestion1 = ($num_rowsQuestion1 \/ $totalRows_rs_vote)*100;\r\n$percentQuestion2 = ($num_rowsQuestion2 \/ $totalRows_rs_vote)*100;\r\n$percentQuestion3 = ($num_rowsQuestion3 \/ $totalRows_rs_vote)*100;\r\n$percentQuestion4 = ($num_rowsQuestion4 \/ $totalRows_rs_vote)*100;\r\n$percentQuestion5 = ($num_rowsQuestion5 \/ $totalRows_rs_vote)*100;\r\n\r\n?>\r\n\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n\r\n<head>\r\n\t<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\r\n\t<title>Results<\/title>\r\n\t<link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<\/head>\r\n\r\n<body>\r\n\t<fieldset>\r\n\t\r\n\t\t<legend>Results<\/legend>\r\n\t\t\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<?php echo $num_rowsQuestion1 ?><\/span> Mootools\r\n\t\t\t\t<br \/>\r\n\t\t\t\t<div class=\"results-bar\" style=\"width: <?php echo round($percentQuestion1,2); ?>%;\">\r\n\t\t\t\t\t <?php echo round($percentQuestion1,2); ?>%\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\t\r\n\t\t\t<li>\r\n\t\t\t\t<?php echo $num_rowsQuestion2 ?><\/span> Prototype\r\n\t\t\t\t<div class=\"results-bar\" style=\"width: <?php echo round($percentQuestion2,2); ?>%;\">\r\n\t\t\t\t\t <?php echo round($percentQuestion2,2); ?>%\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\r\n\t\t\t<li>\r\n\t\t\t\t<?php echo $num_rowsQuestion3 ?><\/span> jQuery\r\n\t\t\t\t<div class=\"results-bar\" style=\"width: <?php echo round($percentQuestion3,2); ?>%;\">\r\n\t\t\t\t\t <?php echo round($percentQuestion3,2); ?>%\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\r\n\t\t\t<li>\r\n\t\t\t\t<?php echo $num_rowsQuestion4 ?><\/span> Spry\r\n\t\t\t\t<div class=\"results-bar\" style=\"width: <?php echo round($percentQuestion4,2); ?>%;\">\r\n\t\t\t\t\t <?php echo round($percentQuestion4,2); ?>%\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t\r\n\t\t\t<li>\r\n\t\t\t\t<?php echo $num_rowsQuestion5 ?><\/span> Other\r\n\t\t\t\t<div class=\"results-bar\" style=\"width: <?php echo round($percentQuestion5,2); ?>%;\">\r\n\t\t\t\t\t <?php echo round($percentQuestion5,2); ?>%\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t\r\n\t\t<h6>Total votes: <?php echo $totalRows_rs_vote ?><\/h6>\r\n\t\t\r\n\t\tBack to Voting<\/a>\r\n\t\r\n\t<\/fieldset>\r\n\t\r\n<\/body>\r\n<\/html>\r\n\r\n<?php\r\n mysql_free_result($rs_vote);\r\n?><\/code><\/pre>\n