How to Build a Tagging System For Blogs
View PDF | Print View
by: Guest
Total views: 20
Word Count: 1722
In this article I will cover the basics of how to create a tagging system as seen on other blogs. This system will also have the function of adjusting font size depending on the number of articles that have said tag.
sex shop | waterproof vibrators | ivibe rabbit
It has been a little while since my previous article and since I have also been struggling to write a clear and concise tutorial for creating a content management system, the second part currently rests at eight pages, I decided to clear my mind and right a simple yet helpful tutorial on how to create a blog-like tagging system for your PHP/MySQL based site.
The article is meant to be a tutorial on how to create a blog like tagging system. It will be similar in its layout to the one on this site. You can make whatever changes you feel necessary. Now on with the code.
To begin let us create the html/css markup for our tag system. This should be pretty self explanatory. We will begin with the css:
The CSS here should be pretty self explanatory. To begin with we create a div element with an id of tags. This will house all of our individual tag elements. I personally only use percentages for widths on rare occasions but for this tutorial I felt it was the way to go. Therefore we can see that the div#tags is set at 90% width and adjusted to the left 5% therefore it fills 90% of whatever element it is in and also centers itself. Next we set the text-alignment to center as this makes our individual tag elements center up when they are displayed. We also set the position to relative, since we want it positioned relative to the previous element.
Next we have the class "tag" these are for the individual tag elements. Since each of our tags will also be a link I created an anchor text class rather than a universal class. Here we float all elements to the left and set the width to auto. This means that the individual links will be only as big as the text in them and sit next to each other rather than one per line. However since we do want some spacing between each element, we put a padding of 5px on both the left and right sides. Finally we centered the text for the anchor element and set the text decoration to none, since I did not want the default underline to appear in the anchor text.
The last piece of our css is the h1.tag_head. This is used to create a separator that basically says the word "Tags" followed by a line then the individual tags. If you look at the bottom of the page on this article you will see an example. I am failing at describing it. I wanted this item to fill nearly the entire element it was in, leaving only a 50px margin on the left and right sides. For this reason I did not set a width and only set the margin.
Now that we have our styles laid out for our tagging system it is time to move onto the php aspect of it. I am making the assumption, in this tutorial, that the tags are stored in a MySQL table in the following format "tag1, tag2, tag3,...". Therefore our code will need to accomplish to feats. The first is get each set of tags from our table then count how many times each of the tags occurs and create and array which will hold the value of each tag plus the number of occurrences of each tag. Luckily PHP has a very handy built in function that can solve the second part of this, the "array_count_values" function. This function will take an array then create a new array with the values of the original array as keys and the number of occurrences of said value as the arrays value. This seems like a mouthful so let me demonstrate it:
As you can see this is a very handy function for our purposes. Now that we know how it works it is time to use it for our tagging system:
That is our function, seems a little lengthy but it does exactly what we need, it gives us all of our tags and the number of times they occur in the following format: $array_name['tag_name'] = 'number of occurrences'. Let me explain how this works. The first part of the function is used to connect to your MySQL database. After we have made a connection we then run a query. I made the assumption that our table name is "articles" and the column that we store the tags in is "tags".
Now that the basic part of connecting to our database and running a query is out of the way we need to get our tag values. To do this I created a for statement and set the logical operator as $row = mysql_fetch_array($result). What this will do is loop through each row that we have in our results column. While it is doing that I need to pull the individual tags from our tag cell. To do this I use the explode function since I know that all of our tags are separated by a ",". Therefore the for statement creates a multidimensional array called $tags_arr[$i]. The $i is equal to whatever row we get from our $result variable. For example $tags_arr[1][2] would mean second row, third tag since arrays and mysql start counting from 0.
Now that we have all of our values stored in a multidimensional array it is time to get them into a single dimensional array so that we can use our array_count_values function. To accomplish this we use a nested for statement. The first for statement loops through the first dimension of our $tags_arr variable. It will allow us access to $tags_arr[$i]. However since the values of our individual tags are stored in $tags_arr[$i][$other-variable], we need to add a second for statement. This one will loop through each of the individual entries in $tags_arr[$i]. Now that the for statements are setup we need to firstly create a single dimension array, to use later, and make certain that all of our tags are properly formatted. To do this we create a new array called $tags and set it equal to the $tags_arr value we want to grab. You will notice that there are two variables with our $tags_arr, this is how the nested for statements allow us to traverse the multidimensional array of $tags_arr. We also use the function strtolower. This will make sure that all values in our tags are lower case so that there are no differences in formatting and there will be no mistake when we run our array_count_value function later. Finally we add $t++ at the end since it is our counter, you will also notice we set $t = 0 before we started our for statements.
After all of that we can run our array_count_values function. As in the previous example the function will go through our array and find duplicate values. It will then return an array that is of the following form $array_name['tag'] = 'number of times it occurs'; which is just what we want for our tagging system. Finally we use the return function to return the array we have created with our function.
We have our styling for the tagging system and we have our php function for it. Now we simply need to present it on our site. To do this we enter the following into a php page, most likely your index page:
Let me explain what is going on. For starters I use the echo function to create the division we need for our tags. Next we set the variable, which will soon be an array, $tags equal to our function showTags(). This will pass all the values we generate with our show tags function to our variable now know as $tags. Since our $tags array is in the following format $tags['tag-name'] = 'number of occurrences', we need to find a way to pull out the tag name and display it. To do this we use the foreach statement. The foreach statement is specifically meant to be used with arrays and therefore has some handy features. Among them is the ability to easily get the value of the arrays key as well as the value of the individual entry at that key as well. To do this we use the following format foreach($array as $key => $values). What that will do is set the $key variable equal to each of the entries in the arrays key. The $values variable will hold the value of the that specific element in the array. You could use any variable name for $key or $value, those are just the ones I felt like using. However if you wish to be able to get both the key and the value of an element in an array you must separate the two with "=>".
Now that we have a way get the names of our tags and the number of times they occur it is time to put them into action. I am used to seeing tagging sections where certain tags are larger than others. To do this we simply get the number of tags we have with the count() function. Next we divide our the number we get from value, from our foreach statement, by the total number of tags from our count function. Multiply it by 12 or whatever constant you feel is appropriate for your tagging system. Now that we have our font size we simply need to use an echo statement and display each of our tags plus change the font size. To do that we echo the
That is how I created a tagging system for my site. I hope it can help with yours.
About the Author
Rating: Not yet rated