Tag awan (Cloud Tag)

Penghargaan: Badang
Tutorial asal: http://www.kripkornstudios.com.my/komuniti/viewtopic.php?f=47&t=346&start=0

Pastikan kita ada aplikasi: 
a. Dreamweaver (notepad pun boleh) atau sebarang editor PHP.
b. Pelayan web localhost ~ WAMP, EasyPHP (dicadangkan).

Jom, kita teruskan jer tutorial kita.

1. Bukak editor PHP, mulakan kod asas pembukaan PHP iaitu

<?php

2. Kemudian, buat fungsi bagi susunan perkataan yg kita nak paparkan:

function data_tag() {
    $susun = Array('Adik Ipar' => 22, 'Aturcara' => 18, 'Awek 3GP' => 35, 'Belakang' => 43, 'Budak Jolai' => 44, 'Cerita Lawak' => 33, 'Curahan Rasa' => 15, 'Cutting Edge' => 11, 'Dambaan Pilu' => 42, 
    'Dekat Padamu' => 13, 'Deposit' => 34, 'Duit-duit' => 8, 'Emak' => 12, 'Emosi' => 30, 
    'Eman Manan' => 28, 'Fitur' => 42, 'Flash' => 32, 'Fungsian' => 19, 
    'Gempak' => 44, 'Gitar' => 49, 'Grafik' => 35, 'Huhuhu' => 47, 'Ikan Bakar' => 8, 
    'Isteri' => 12, 'Javascript' => 47, 'Jpeg' => 15,     'Kunci' => 18, 'Lambat' => 28, 
    'Lelaki' => 30, 'Lembut' => 10, 'Logo' => 12, 'Mati Katak' => 22, 'Macromedia' => 26, 
    'Muncung' => 28, 'MySQL' => 18, 'Ooooic' => 13, 'Opsss' => 39, 'Padan Muka' => 25, 
    'Pertama' => 37, 'PHP' => 44, 'Photoshop' => 46, 'Pikir' => 17, 'Pulau' => 28,  
    'Rambut' => 50, 'Saturation' => 35, 'Simpan' => 28, 'Sombong' => 11, 'Sukan' => 41, 'Sotong' => 9, 'Sunting' => 49, 'Sepupu' => 41, 'Templates' => 11, 'Timbul' => 22, 
    'Tool Palette' => 30, 'Wakaf' => 50);
    return $susun;
}

Keterangan:

Kalau 'Adik Ipar' => 22, maksudnya nilai yg disediakan untuk adik ipar ialah 22. Buat masa ni, kita belum tentukan lagi nilai ni utk apa....yg penting setiap perkataan ada nilainya.

Manakala, kod "return $susun" tu pulak utk arahkan yg fungsi arahannya dah habis. Pastu, kembalikan nilai susunan pada "function data_tag()" utk dipegang. Kalau korang nak tau, dia kurung data tu suma dlm braket tu "()".

3. Sekarang, kita nak panggil balik nilai "data_ tag" dalam fungsi seterusnya.

function get_data_tag() {

    // Tetapkan saiz minimum dan maksimum paparan tag
    $saiz_font_min = 12;
    $saiz_font_mak = 30;

    // Pindah nilai data_tag ke dalam variable semua_tag
    $semua_tag = data_tag();

So, aku dah sediakan komen ringkas kat kod di atas tu untuk mudah paham. Fungsi ni belum habis lagi....dan ini sambungannya:

    $kira_min = min(array_values($semua_tag));
    $kira_mak = max(array_values($semua_tag));
    $jum_paparan = $kira_mak - $kira_min;

    if($jum_paparan == 0) {
        $jum_paparan = 1;
    }

Keterangan: Untuk nilai "$kira_min" ialah 8 atau $kira_min = 8. Ia akan memilih nombor output yg terkecil dlm susunan menggunakan panggilan "min(array_values($semua_tag))" Manakala, nilai "$kira_mak" pula ambil nombor paling besar dlm susunan iaitu 50.

Jadi, dengan congak matematik sikit, kita dapat agak untuk nilai "$jum_paparan", kan?

Dan, untuk struktur "if" pulak...."Kalau nilai kat $jum_paparan tu kosong atau takde apa-apa, kau bagi la dia satu".

Ok...ok, tak habis lagi utk fungsi dapatkan data tag nih. Ada lagi kat bawah ni:

    $html_awan = ''; // Ni utk generate hamparan HTML
    $tag_awan = array(); // Cipta susunan utk pegang kod tag yg telah kita buat
    foreach ($semua_tag as $tag => $hitung) {
        $saiz = $saiz_font_min + ($hitung - $kira_min) 
            * ($saiz_font_mak - $saiz_font_min) / $jum_paparan;
        $tag_awan[] = '<a style="font-size: '. floor($saiz) . 'px' 
            . '" class="tag_awan" href="http://www.kripkornstudios.com.my/forum/search.php?keywords=' . $tag . '&terms=all&author=&sv=0&sc=1&sf=all&sk=t&sd=d&sr=posts&st=0&ch=300&t=0&submit=Carian'
            . '" title="\'' . $tag  . '\' nilai hitung dikembalikan ialah ' . $hitung . '">' 
            . htmlspecialchars(stripslashes($tag)) . '</a>';
    }
    $html_awan = join("\n", $tag_awan) . "\n"; // Kat sini jugak hamparan HTML tamat
    return $html_awan;

} // Habis untuk fungsi get_data_tag

Ok, sebahagiannya aku dah letak komen utk keterangan langsung kat sintaks. So, aku amik mula dari "foreach" jer la. Keterangan: Foreach tu kita nak pastikan suma "array" yg kita dah buat tu hasilkan satu output yg kita nak.

Dalam bagi tutorial pun, elok gak rasanya kita test kemahiran matematik sikit, kan? Ok, gini, berapa nilai bagi "$saiz" kalau data (atau tag) yg kita masukkan ialah "'Aturcara' => 18"? Sapa cepat jawab memang pakar PHP + Math.

Bagi "$tag_awan" pulak, ia merujuk kepada nilai URL yg diumpukkan kpdnya. Seterusnya, "$html_awan = join("\n", $tag_awan)" meminta supaya setiap URL hanya utk satu tag awan...Lepas tu, kembalikan nilai "$html_awan" kat dlm braket fungsi get_tag_data. Dlm masa sama, ia menunjukkan fungsinya dah tamat kat situ.

4. Dah habis utk koding PHP....so, kena la tutup ngan koding akhir:

?>

5. Skang, kita nak print out put ni....tapi, sebelum tu, kita wat sikit utk nampak stylo iaitu dengan menggunakan CSS:

<style type="text/css">
.tag_awan { padding: 3px; text-decoration: none; }
.tag_awan:link  { color: #00A2FF; }
.tag_awan:visited { color: #019c05; }
.tag_awan:hover { color: #ffffff; background: #00A2FF; }
.tag_awan:active { color: #ffffff; background: #ACFC65; }
</style>

6. Akhir sekali, utk paparan Tag Awan mudah kita.

<h3>Tutorial Tag Awan Mudah</h3>
<div id="wrapper">
    <!-- MULA Tag Awan Aku --> 
    <?php
    // Papar tag awan dlm format HTML kat atas nun
    print get_data_tag();
    ?>
    <!-- TAMAT Tag Awan Aku -->
</div>

Dah selesai.