#header.callout {  }
#header .callout { }

They look nearly identical, but the top one has no space between “#header” and “.callout” while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it’s actually a quite useful selector. Let’s see the difference, what that top selector means, and exploring more of that style selector.

Here is the “plain English” of “#header .callout”:

Select all elements with the class name callout that are children of the element with an ID of header.

Here is the “plain English” of “#header.callout”:

Select the element which has an ID of header and also a class name of callout.

Maybe this graphic will make that more clear:

Combinations of Classes and IDs

The big point here is that you can target elements that have combinations of classes and IDs by stringing those selectors together without spaces.

ID and Class Selector

As we covered above, you can target elements by a combination of ID and class.

<h1 id="one" class="two">This Should Be Red</h1>

#one.two { color: red; }

Double Class Selector

Target an element that has all of multiple classes. Shown below with two classes, but not limited to two.

<h1 class="three four">Double Class</h1>

.three.four { color: red; }

Multiples

We aren’t limited to only two here, we can combine as many classes and IDs into a single selector as we want.

.snippet#header.code.red { color: red; }

Although bear in mind that’s getting a little ridiculous =)

Example

So how useful is all this really? Especially with ID’s, they are supposed to be unique anyway, so why would you need to combine it with a class? I admit the use cases for the ID versions are slimmer, but there are certainly uses. One of those is overriding styles easily.

#header { color: red; }
#header.override { color: black; } 

The second targets the same element, but overrides the color, instead of having to use:

.override { color: black !important }

or perhaps prefacing the selector with something even more specific.

More useful is multiple classes and using them in the “object oriented” css style that is all the rage lately. Let’s say you had a bunch of divs on a page, and you used multiple various descriptive class names on them:

<div class="red border box"></div>
<div class="blue border box"></div>
<div class="green border box"></div>
<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>
<div class="border box"></div>

They all share the class “box”, which perhaps sets a width or a background texture, something that all of them have in common. Then some of them have color names as classes, this would be for controlling the colors used inside the box. Perhaps green means the box has a greenish background and light green text. A few of them have a class name of “border”, presumably these would have a border on them while the rest would not.

So let’s set something up:

.box { width: 100px; float: left; margin: 0 10px 10px 0; }
.red { color: red; background: pink; }
.blue { color: blue; background: light-blue; }
.green { color: green; background: light-green; }
.border { border: 5px solid black; }

Cool, we have a good toolbox going here, where we can create new boxes and we have a variety of options, we can pick a color and if it has a border or not just by applying some fairly semantic classes. Having this class name toolbox also allows us to target unique combinations of these classes. For example, maybe that black border isn’t working on the red boxes, let’s fix that:

.red.border { border-color: #900; }

Border color on red box changed because it had both the red class and border class

Based on this demo page.

Browser Compatibility

All good current browsers support this as well as IE back to version 7. IE 6 is rather weird. It selects based on the first selector in the list. So “.red.border” will select based on just “.red”, which kinda ruins things. But if you are supporting IE 6, you are used to this kind of tomfoolery anyway and can just fix it with conditional styles.

IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6. While I generally refuse to pander to IE 6’s limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that’ll get you every time:

The Box Model

This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:

div#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

IE 6 will calculate the width of the box to be 100px.
Modern browsers will calculate the width of the box to be 124px.

This kind of discrepancy can cause HUGE layout problems. I even think the IE version makes a little bit more sense logically, but that is not how the spec was written. IE 6 can actually get it right if you are in standards-compliant mode, which is rare these days as just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.

I generally work around this issue by just not using padding on boxes I am using for layout. If that box has some text inside it in a <p> element, I’ll apply the padding it needs directly to that p element. Just side-steps the issue, but it works.

The Double Margin Bug

Using our box example from above, let’s say we need that floated to the right:

div#box {
   float: right;
   margin-right: 20px;
}

IE 6 will double the 20px to 40px. Again, causing potentially huge layout borks. The commonly thrown-around “fix” for this is to add “display: inline;” to the div. I’m not sure how this “fix” got so much traction, but its a bit impractical. We can’t set static widths on inline elements, now can we?

I also like to side-step this bug whenever possible. If you really need to push that box away from the right side of it’s parent element, you can likely do so by adding padding to the parent element, which is more likely to keep your grid consistent anyway. Also don’t forget about padding. This bug does not affect padding, so you can offen get away with adding padding to the side you need an achieve the same result.

No Min Widths / Min Height

Setting min-width and min-height on elements is such a natural and logical thing that it makes me tear up sometimes thinking I can’t count on them. IE 6 doesn’t just get it wrong, it just completely ignores them. Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don’t want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack since it validates just fine.

Stepdown

Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”. The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. More on preventing stepdown here.

No Hover States

Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, and even then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.

No Alpha Transparent PNG Support

Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn’t natively support it (until IE 7)*. I have a whole roundup of different fixes for this. Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.

*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!

So…

All these bugs are either fixable or side-steppable, but they will get ya if you don’t do your testing. My general philosophy is: design with the most modern techniques possible, but then just make sure it ain’t busted in older ones.

This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.

If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Why use conditional stylesheets?

• You got problems, they need fixin’
• Keeps your code hack-free and valid
• Keeps your main stylesheet clean
• Perfectly acceptable technique, sanctioned by Microsoft

And remember, these conditional tags don’t have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.

The Code

This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that’s just regular ol’ HTML comments. Then between the brackets, “IF” and “IE” should be fairly obvious. The syntax to note is “!” stand for “not”, so !IE means “not IE”. gt means “greater than”, gte means “greater than or equal”, lt means “less than”, lte means “less than or equal.”

Target ALL VERSIONS of IE

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Universal IE 6 CSS

Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to server IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

Hacks

If you must…

IE-7 ONLY

* html #div {
    height: 300px;
}

NON IE-7 ONLY:

#div {
   _height: 300px;
}

Hide from IE 6 and LOWER:

#div {
   height/**/: 300px;
}

html > body #div {
      height: 300px;
}

Argument against conditional stylesheets

We shouldn’t need them. They are against the spirit of web standards.

Argument for conditional stylesheets

Yeah, but we do need them.

div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}

The situation is that the RGB fallback color only works when using shorthand. If you were to declare the fallback color like this:

div {
	background-color: rgb(255,0,0);
	background-color: rgba(255,0,0,0.5);
}

Using the background-color property only, it will fail and display no background color at all.

Solution

Using RGB for a fallback is nice. It’s no-brainer work because all you have to do is duplicated the RGBa value, remove the “a” and remove the 4th (opacity) parameter. If you want to keep using RGB as a fallback, just remember to set it using shorthand (if possible), or set the fallback using regular HEX codes or keywords.

In the example, the result of 50% red is a light red anyway, so using a hex code to specify that value might be a more appropriate fallback color anyway.

div {
  background-color: #fd7e7e;
  background-color: rgba(255,0,0,0.5);
}

 #someElement {
    background: red; /* modern browsers */
   *background: green; /* IE 7 and below */
   _background: yellow; /* IE6 exclusively */
}  

Untuk dapat mengembangkan aplikasi web dengan tehnik AJAX ini kita perlu mengkombinasikan beberapa hal berikut:

• Javascript untuk membuat object XMLHttpRequest yang kita gunakan untuk berkomunikasi dengan server secara behind the scene.
• DOM (Document Object Model), hasil proses yang diterima akan kita tampilkan dengan memanipulasi object DOM yang telah kita persiapkan sebelumnya untuk menampilkan data hasil proses yang diberikan server.
• XML (eXtensible Markup Language) format data yang dikembalikan oleh server, data XML ini siap dibaca dan ditampilkan untuk mengupdate content pada halaman web.

secara sederhana kita akan memanfaatkan beberapa kombinasi diatas untuk membuat aplikasi

web dengan tehnik AJAX ini, namun kita masih dapat mengembangkannya lebih lanjut setelah

mengetahui proses kerja dari tehnik AJAX ini.

Kelebihan utama AJAX sendiri terletak pada pemanfaatan class object XMLHttpRequest untuk

berkomunikasi dengan Web Server secara background dalam melakukan request.

Saat ini terdapat banyak aplikasi web browser, dan yang agak sedikit menyebalkan adalah

karena masing‐masing browser mempunyai standart dan cara berbeda untuk membuat object

XMLHttpRequest ini.

Untuk dapat berjalan dengan baik pada semua browser kita perlu menyiapkan beberapa

kondisi untuk mendeteksi web browser yang digunakan oleh user, dan kemudian membuat

object XMLHttpRequest tersebut sesuai web browser yang digunakan.

Saat ini setidaknya ada 5 web browser yang banyak digunakan (Firefox, Mozilla, IE7, IE sebelum

versi 7, Opera dan juga Safari), berikut pembuatan object XMLHttpRequest dengan javascript

pada masing‐masing web browse tersebut:

Untuk membuat class object pada browser Firefox, Safari, Mozila, Opera.

oAJAX = new XMLHttpRequest();

Untuk membuat class object pada browser IE7

oAJAX = new ActiveXObject(‘MSXML2.XMLHTTP’);

Untuk membuat class object pada browser IE versi lama

oAJAX = new ActiveXObject(‘Microsoft.XMLHTTP’);

Dari 3 kemungkinan diatas kita akan menyiapkan sebuat sebuah function untuk pembuatan

object dengan mendeteksi web browser yang digunakan oleh user, berikut

function javascript lengkapnya:

<script>
function createRequest(){
var oAJAX = false;
try {
oAJAX = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
oAJAX = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
oAJAX = false;
}
}
if (!oAJAX &amp;&amp; typeof XMLHttpRequest != 'undefined') {
oAJAX = new XMLHttpRequest();
}
if (!oAJAX){
alert("Error saat membuat XMLHttpRequest!");
}else{
alert("XMLHttpRequest sukses dibuat!");
}
return oAJAX;
}
</script>

header.php …………………. Header Section
index.php ……………………. Main Section
sidebar.php ……………….. Sidebar Section
single.php ………………….. Post Template
page.php ……………………. Page Template
comments.php ……………… Comment Template
search.php …………………. Search Content
searchform.php ………… Search Form Template
archive.php ………………. Archive Template
functions.php ……………. Special Functions
404.php ……………….. Error Page template
style.css …………………….. Style Sheet

The Loop

<?php if(have_posts());?>

<?php while(have_posts()); the_post();?>

// The Stuff… Custom HTML & PHP Code

<?php else;?>

<?php endif;?>

The Category Based Loop

<?php query_posts(‘category_name=

Category&showposts=10′); ?>

<?php while (have_posts()) : the_post(); ?>

// The Stuff… Custom HTML & PHP Code

<?php endwhile;?>

Theme Definition

/*

Theme Name: Wordpress

Theme URI: http://wordpress.org/

Description: Test Blog

Version: 1.6

Author: Ekin Ertaç

Author URI: http://ekinertac.com

Tags: powerful, cheat, sheet

*/

Template Include Tags

< ?php get_header(); ?>

< ?php get_sidebar(); ?>

< ?php get_footer(); ?>

< ?php comments_template(); ?>

WordPress Template Tags

<?php the_title() ?> …………………Displays the posts/pages title

<?php the_content() ?> …………Displays the content of the post/page

<?php the_excerpt() ?> ….Displays the excerpt of the current post/page

<?php the_time() ?> ……….Displays the time of the current post/page

<?php the_date() ?> …..Displays the date of a post or set of post/page

<?php the_permalink() ?> ………….Displays the URL for the permalink

<?php the_category() ?> ……………..Displays the category of a post

<?php the_author(); ?> ………………Displays the author of the post

<?php the_ID(); ?> ……….Displays the numeric ID of the current post

<?php wp_list_pages(); ?> ……………………Displays all the pages

<?php wp_tag_cloud(); ?> ………………………Displays a tag cloud

<?php wp_list_cats(); ?> ……………………Displays the categories

<?php get_calendar(); ?> ……………………..Displays the calendar

<?php wp_get_archives() ?> ……….Displays a date-based archives list

<?php posts_nav_link(); ?> …Displays Previous page and Next Page links

<?php next_post_link() ?> …………………Displays Newer Posts link

<?php previous_post_link() ?> ………………..Displays previous link

<?php edit_post_link(__(‘Edit Post’)); ?> ……..Displays the edit link

<?php the_search_query();?> …………….Value for search form

<?php wp_register();?> …………….Displays the register link

<?php wp_loginout();?> …………..Displays the log in/out link

<?php wp_meta();?> …………………..Meta for administrators

<?php timer_stop(1);?> …………………Time to load the page

<?php echo c2c_custom(‘test’);?> …… Displays the custom field1

<?php get_links_list(); ?> ………..Display links from Blogroll

<?php get_calendar(); ?> ……….Displays the built-in calendar

<?php comments_popup_link(); ?> …….Link of the posts comments

BlogInfo Tags

<?php bloginfo(‘name’); ?> ………………………Title of the blog

<?php bloginfo(‘charset’); ?> ……………………The character set

<?php bloginfo(‘description’); ?> ……….The description of the blog

<?php bloginfo(‘url’); ?> ………………….The address of the blog

<?php bloginfo(‘rss2_url’); ?> ………………………..The RSS URL

<?php bloginfo(‘template_url’); ?> ………….The URL of the template

<?php bloginfo(‘pingback_url’); ?> ………………..The pingback URL

<?php bloginfo(’stylesheet_url’); ?> The URL for the template’s CSS file

<?php bloginfo(‘wpurl’); ?> ………….URL for WordPress installation

<?php bloginfo(‘version’); ?> ….Version of the WordPress installation

<?php bloginfo(‘html_type’); ?> ……………HTML version of the site

BlogInfo Tags

is_home() …………………..When the user is on the blog home page

is_front_page() ………………….When the user is on the home page

is_single() …………………………When the single post displayed

is_sticky() …………………………….Check if a post is sticky

is_page() ……………………………….When a page is displayed

is_category() …………………………When a category is displayed

Navigation Menu

Category Based Navigation

<ul id=”menu”>

<li <?php if(is_home()) { ?> class=”current-cat”< ?php } ?>>

<a href=”<?php bloginfo(‘home’); ?>”>Home</a></li>

< ?php wp_list_categories(‘title_li=&orderby=id’); ?>

</ul>

Pages based Navigation

<ul id=”menu”>

<li <?php if(is_home()) { ?> class=”current_page_item”< ?php } ?>>

<a href=”<?php bloginfo(‘home’); ?>”>home</a></li>

< ?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?>

</ul>

1. ip
2. proxy
3. koneksi

Silahkan memodifikasi script ini

 <?php
$agent = $_SERVER['HTTP_USER_AGENT'];
$uri = $_SERVER['REQUEST_URI'];
$user = $_SERVER['PHP_AUTH_USER'];
$ip = $_SERVER['REMOTE_ADDR'];
$ref = $_SERVER['HTTP_REFERER'];
$proxy = $_SERVER['HTTP_X_FORWARDED_FOR'];
$via = $_SERVER['HTTP_VIA'];
?>
<table width="140" border="0" style="border-collapse:collapse;">
<tr>
<td background="img/ket_2.jpg">
<img src="/img/h_3.jpg"><b>Informasi Anda</b>:
</td>
</tr>
<tr>
<td>
<span><b>IP:</b></span>
<br>
 <span style="padding-left:5px;"><?php echo $ip; ?></span>
</td>
</tr>
<tr>
<td>
<span><b>Proxy:</b></span>
<br>
<span style="padding-left:5px;"><?php echo $proxy; ?></span>
</td>
</tr>
<tr>
<td>
<span><b>Koneksi:</b></span>
<br>
<span style="padding-left:5px;"><?php echo $via; ?></span>
</td>
</tr>
</tr>
</table>

if ($_SERVER['REQUEST_METHOD']=='POST')
{
$tempat_data = "data.txt"; // ini nama file tempat text disimpan, CHMOD ke #777
$max_karakter = 500; // ini maksimal karakter untuk text
$max_nama = 32; // ini maksimal karakter untuk nama

$min_karakter = 8; // ini karakter minimal untuk text

$min_nama = 3; // ini karakter minimal untuk nama

<span id="more-117"></span>
$berapa_baris = 3; // ini jumlah berapa baris text yang akan dimunculkan
$buka_data = file($tempat_data);
$nama = htmlspecialchars(addslashes($_POST['nama']));
$text = $_POST['text'];

if (empty($nama))
{
die ('Empty name');
exit; }

if (empty($text))
{
die ('Empty text');
exit; }

if (strlen($nama) > $max_nama)
{
die ('namanya terlalu panjang, maksimal karakter adalah '.$max_nama);
exit;
}

if (strlen($text) > $max_karakter)
{
die ('text nya terlalu panjang, maksimal karakter adalah'.$max_karakter);
exit;
}

if (strlen($nama) < $min_nama)
{
die ('namanya terlalu pendek, minimal karakter adalah '.$min_nama);
exit;
}

if (strlen($text) < $min_karakter)
{
die ('text nya terlalu pendek, minimal karakter adalah'.$min_karakter);
exit;
}

if (!empty($nama) &amp;&amp; !empty($text))
{
$text = preg_replace("//span>, "<", $text);
$text = preg_replace("/>/", ">", $text);

if (strlen($text) < $max_karakter)
{
$tulis = fopen ($tempat_data, "w");
$text = stripslashes($text);
fwrite ($tulis, "$nama: $text
\n");

for ($i = 0; $i < $berapa_baris; $i++)
{
fwrite ($tulis, $buka_data[$i]);
}
}
fclose($tulis);
}
}

include("data.txt"); // include disini maksudnya adalah untuk menampilkan shout yang ada

echo "
\n";
// Dibawah ini adalah form nya
echo "
Nama:
Text:";

<?php
$ip=getenv(remote_addr);
$date=getdate(date(“U”));
$day=$date[mday];
$month=$date[month];
$year=$date[year];

if (!isset($_COOKIE["visitor"]))
{
setcookie(“visitor”, “$ip”, time() +3600);
mysql_connect(“localhost”, “user”, “password”); //sesuaikan host, user, dan password-nya !
mysql_select_db(“nama_db”) or die(mysql_error()); //sesuaikan nama database-nya

mysql_query(“INSERT INTO counter(ip, user_agent, tanggal) VALUES(‘$ip’, ‘$_SERVER[HTTP_USER_AGENT]‘, ‘$day/$month/$year’)”);
}
?>

Pada code di atas, saat pertama kalo diakses halaman website kita akan membuat cookies dengan nama visitor yang isinya IP address dari visitor kita. Kalo cookies belom diset, maka record table Counter akan ditambah satu.
Untuk mendapatkan jumlah pengunjung, kita tinggal menghitung berapa jumlah records dari table Counter, gunakan code berikut:

<?php
$qhit=mysql_query("SELECT * FROM counter");
$hit=mysql_num_rows($qhit);
echo "
Kamu adalah pengunjung ke: $hit
";
?>

Sekarang, kamu tinggal meletakkan code di atas untuk menampilkan berapa jumlah pengunjung website kamu.

Semoga bermanfaat dan mohon dimaafkan kalo ada kesalahan.