Tag: HTML

  • Memanipulasi URL pada Status Bar Browser

    Mungkin teknik ini hanya digunakan oleh para penjahat dunia maya. Orang yang merasa perlu untuk menyembunyikan apa yang seharusnya bebas diketahui publik. Penting bagi kita untuk mengetahui teknik yang digunakan oleh para penjahat untuk melindungi diri bukan untuk sebaliknya. Biasanya ini digunakan untuk menyembunyikan/memanipulasi link referal atau sebagai langkah awal kejahatan phishing.

    Ketika kita menyorotkan mouse pada sebuah tautan (link), misalnya ini, maka akan muncul URL dari tautan tersebut pada status bar. Biasanya terletak pada pojok kiri bawah sebuah browser.

    Sebuah tautan yang benar adalah menggunakan tag HTML <a> dengan atribut href dan title. Atribut href wajib ada karena dibutuhkan sebagai tujuan sebuah tautan dan memunculkan URL pada status bar, sedangkan title opsional.

    <a href="http://sibudi.net" title="Websiteku">klik di sini</a>
    

    Berikut ini adalah 3 teknik yang digunakan untuk menyembunyikan atau memanipulasi tautan.

    Cara pertama

    <a style="cursor:pointer" onClick="location.href='http://sibudi.net'" >klik di sini</a>
    

    Pada kode di atas, atribut href sengaja tidak ditulis. Dalam keadaan normal hal tersebut tidak berbahaya, hanya akan menampilkan tulisan “klik di sini” pada browser dan tidak bisa diklik. Namun dengan tambahan sedikit kode JavaScript di atas, tautan di atas akan mengarah pada “http://sibudi.net” tanpa dapat dilihat tujuannya oleh pengguna awam.

    Untuk lebih meyakinkan dapat ditambahkan inline css cursor:pointer yang akan mengubah pointer menjadi gambar tangan. Bisa juga ditambahkan text-decoration:underline dan color sesuai dengan warna yang digunakan pada browser.

    Cara kedua (hanya bekerja pada browser IE):

    <a href="http://sibudi.net" onMouseOver="window.status='http://www.google.com'; return true" onMouseOut="window.status=''">klik di sini</a>
    

    Tautan di atas tidak lagi hanya menyembunyikan URL tapi memanipulasi URL. Jadi pada status bar tertulis “http://google.com” padahal jika diklik akan menuju ke “http://sibudi.net”. Namun teknik itu tidak akan bekerja pada browser selain IE.

    Cara ketiga

    <script>
    function redirect(URL) {
    
      document.location = URL;
      return false;
    }
    </script>
    
    <a href="http://google.com" onClick="return redirect('http://sibudi.net');">klik di sini</a>
    

    Teknik ketiga adalah gabungan dari 2 teknik sebelumnya, yaitu menggunakan atribut href dan onClick. Seperti yang kita tau, atribut href akan memunculkan URL pada status bar. Ketika tautan di atas diklik, maka akan membangkitkan event onClick dan memanggil fungsi JavaScript redirect.

    Perlu dicatat bahwa ketiga teknik di atas sangat bergantung pada JavaScript. Jadi tidak akan bekerja pada browser yang di-disable Javascript-nya. Tautan akan tetap mengarah sesuai pada atribut href dan hanya berupa teks biasa jika atribut href tidak ada. Untuk menangani masalah JavaScript ini, bisa mengacu pada tulisan menangani browser dengan JavaScript disable.

  • Membuat Tombol “Back”

    Pada umumnya browser sudah memiliki tombol “back” yang berfungsi untuk kembali ke halaman sebelumnya. Seorang web developer harus mempunyai alasan yang bagus untuk memasangnya pada website, misal karena adanya permintaan khusus dari klien. Namun, artikel ini ditulis bukan demi klien, melainkan demi ilmu pengetahuan 🙂

    Ada 2 cara yang bisa dipakai, yaitu dengan JavaScript dan PHP. Untuk mencoba kode-kode di bawah ini, dibutuhkan sebuah halaman lain yang berisi link menuju ke halaman yang berisi tombol “back” ini.

    <input type="button" value="Go Back" onclick="history.back(-1)" />
    

    Tentunya implementasi menggunakan JavaScript masih kurang, karena ada kemungkinan user mematikan JavaScript di browser-nya. Berikut ini adalah implementasi dengan PHP.

    <?php
      $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
    ?>
      <a href="<?=$url?>">Go Back</a>
    

    Pada snippet di atas digunakan fungsi PHP htmlspecialchars untuk mensanitasi input dari client. Meskipun secara fisik tidak ada input yang bisa disusupi oleh user, namun harus tetap berpegang pada prinsip dasar pengembangan website, yaitu jangan pernah percaya apa yang dikirimkan oleh client.

    Jika kode PHP di atas langsung dieksekusi tanpa melalui halaman lain, maka akan muncul pesan peringatan:

    Notice: Undefined index: HTTP_REFERER in /var/www/index.php on line 2

    Itu adalah pesan peringatan karena ada yang salah pada kode PHP. Untuk memperbaiki kesalahan itu bisa dipelajari di sini.

    <?php
      $url = isset($_SERVER['HTTP_REFERER']) ? htmlspecialchars($_SERVER['HTTP_REFERER']) : '';
    ?>
      <a href="<?=$url?>">Go Back PHP</a>
    

    Dalam artikel singkat ini selain dipelajari cara membuat tombol “back” namun juga pentingnya menulis kode yang baik dan berkualitas. Kode yang baik dan berkualitas akan membuat website yang dibuat menjadi lebih aman. Mulailah menulis kode yang berkualitas dari kasus yang paling sederhana.

  • Menangani Browser dengan JavaScript Disable

    JavaScript dibutuhkan pada hampir semua website modern. Tanpanya, maka sebuah website tidak akan berjalan sesuai keinginan. Namun apa yang harus dilakukan jika client men-disable dukungan terhadap JavaScript? Solusi yang paling sederhana adalah dengan memberikan peringatan pada client untuk mengizinkan browser menjalankan JavaScript.

    Pada sebuah dokumen HTML, JavaScript disisipkan di antara tag <script> dan </script>. Selain itu juga ada tag <noscript>, yang akan dijalankan pada saat JavaScript di-disable pada browser.

    <script>kode di dalam sini akan dieksekusi saat javascript enable</script>
    <noscript>kode di dalam sini akan dieksekusi saat javascript disable</noscript>
    

    Untuk menangani client yang men-disable JavaScript maka perlu me-redirect-nya ke sebuah halaman yang berisi peringatan untuk meng-enable JavaScript. Namun, bagaimana untuk me-redirect halaman tanpa menggunakan sebuah script? Yaitu dengan menggunakan HTML meta tag yang bernama meta refresh. Meta tag ini akan me-redirect user ke halaman lain dalam interval yang sudah ditentukan pada header.

    <noscript>
      <meta http-equiv="Refresh" content="1; url=warning.html">
    </noscript>
    

    Snippet yang ada di dalam tag <noscript> di atas adalah sebuah meta refresh yang menginstruksikan browser untuk me-refresh halaman website secara otomatis dalam interval yang sudah ditentukan dalam atribut content (dalam satuan detik). Atribut url berisi halaman yang dituju untuk menampilkan pesan peringatan.

  • Tab Sederhana dengan jQuery

    simple tab

    Keuntungan yang didapat dengan membuat sebuah navigasi tab dengan jQuery adalah halaman tidak perlu dimuat ulang hanya untuk berganti tab yang aktif. Kenapa hal itu bisa terjadi? Karena sebenarnya semua halaman yang ada di seluruh tab sudah dimuat sejak pertama kali kita membuka web. Teknik ini yang dipakai untuk bizcard saya. Berikut ini adalah kode jQuery yang digunakan.

    $(document).ready(function() {
      $('#tab1').fadeIn('slow');
      $('ul#nav li a').click(function() {
        $('ul#nav li a').removeClass('aktif');
        $(this).addClass("aktif");
        $('.tab_konten').hide();
        var aktif = $(this).attr('href');
        $(aktif).fadeIn('slow');
        return false;
      });
    });
    

    Sedangkan ini adalah HTML-nya.

    <ul id="nav"><!-- navigasi -->
      <li><a href="#tab1" class="about aktif"><span>About Me</span></a></li>
      <li><a href="#tab2" class="network"><span>Networks</span></a></li>
      <li><a href="#tab3" class="contact"><span>Contact</span></a></li>
    </ul>
     
    <div id="konten"><!-- mulai konten -->
      <div style="display: none;" id="tab1" class="tab_konten">
        <!-- konten #tab1 -->
      </div>
      <div style="display: none;" id="tab2" class="tab_konten">
        <!-- konten #tab2 -->
      </div>
      <div style="display: none;" id="tab3" class="tab_konten">
        <!-- konten #tab3 -->
      </div>
    </div>
    

    Penjelasannya adalah sebagai berikut. Pada kondisi awal, ketiga tab dalam posisi tidak aktif (style=”display: none;”). Kemudian pada saat halaman web dimuat pertama kali, #tab1 diaktifkan (lihat baris ke-2 kode JavaScript) dengan efek fade in, sekaligus menampilkan isinya.

    Berikutnya adalah ketika ada sebuah tab yang diklik, semua class=”aktif” dihilangkan kecuali pada tab yang dipilih (baris ke-4 dan ke-5 kode JavaScript). Begitu pula dengan isinya, semua disembunyikan kecuali tab yang dipilih.

    Bagaimana cara untuk menemukan tab yang aktif? Cari attribute href pada class yang aktif, value-nya menunjukkan mana tab yang harus ditampilkan (baris ke-7 dan ke-8 kode JavaScript).

    Catatan ini disadur dan ditulis ulang dengan modifikasi seperlunya dari blog ini. Gambar juga diambil dari situ.

  • Dasar File Upload dengan PHP

    file upload php
    Jika ingin membuat sebuah mekanisme pengunggah data umumnya kita menggunakan kode berikut:

    <form action="" method="post" enctype="multipart/form-data">
      <input type="file" name="berkas" />
      <input type="submit" value="Upload" />
    </form>
    

    Simpan kode HTML di atas dengan nama upload.php, kemudian lihat hasilnya di browser.

    Agar kode di atas agar dapat digunakan untuk meng-upload file maka tambahkan dengan script PHP berikut.

    <?php
    if(isset($_FILES&#91;'berkas'&#93;)) {
      move_uploaded_file($_FILES&#91;'berkas'&#93;&#91;'tmp_name'&#93;, "uploads/{$_FILES&#91;'berkas'&#93;&#91;'name'&#93;}");
    }
    ?>
    

    Letakkan kode tersebut setelah tag penutup html. Kemudian buatlah sebuah folder dengan nama “uploads” pada tempat yang sama script tersebut disimpan. Maka script sudah siap dicoba untuk meng-upload file yang akan diletakkan pada folder “uploads”.

    Fungsi move_uploaded_file() digunakan untuk memindahkan file dari folder “temp” ke folder yang telah kita tentukan. Kemudian darimana saya mendapatkan kedua parameter tersebut? Untuk menjelaskan hal tersebut, lebih mudah jika kita langsung mempraktekannya.

    Sekarang tuliskan kode dibawah ini untuk menggantikan fungsi move_uploaded_file() di atas, atau letakkan saja di bawahnya, tanpa menghapus fungsi tersebut.

    print_r($_FILES);
    

    Fungsi print_r($_FILES) akan menampilkan isi dari variable $_FILES. Lakukan upload file sekali lagi, maka selain meng-upload file ke server, browser akan menampilkan isi dari variable $_FILES.

    Array
    (
    [berkas] => Array
    (
    [name] => Boston City Flow.jpg
    [type] => image/jpeg
    [tmp_name] => /tmp/php1UOmUg
    [error] => 0
    [size] => 339773
    )
    )

    Pada contoh di atas terlihat variable $_FILES bertipe array. Untuk mengakses indeks “name” dengan menggunakan $_FILES['berkas']['name'], sedangkan untuk mengakses indeks “tmp_name” caranya sama, $_FILES['berkas']['tmp_name'].

    Bersambung ke catatan berikutnya untuk meng-upload banyak file sekaligus menggunakan HTML5 dan PHP. Source code lengkap tutorial ini ada di bawah. Kalau ada pertanyaan, silakan tinggalkan komentar.

    <!DOCTYPE html>
    <html>
      <head>
        <title>upload file</title>
        <meta charset="utf-8">
      </head>
      <body>
        <div>
          <form action="" method="post" enctype="multipart/form-data">
            <p>
            <input type="file" name="berkas" />
            <input type="submit" value="Upload" />
            </p>
          </form>
        </div>
      </body>
    </html>
     
    <pre>
    <?php
    if(isset($_FILES&#91;'berkas'&#93;)) {
      move_uploaded_file($_FILES&#91;'berkas'&#93;&#91;'tmp_name'&#93;, "uploads/{$_FILES&#91;'berkas'&#93;&#91;'name'&#93;}");
      print_r($_FILES);
    }
    ?>
    

    Catatan: Tulisan ini juga pernah diterbitkan di sini. Saya terbitkan kembali karena saya berencana membuat catatan berseri.