Weblog of Novia Agustiar Rahmat » Web http://opik.unitiga.com Selalu rindu akan baris-baris code Mon, 15 Mar 2010 16:55:25 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Membuat Tulisan Diatas File Gambar Menggunakan PHP http://opik.unitiga.com/2009/02/05/membuat-tulisan-diatas-file-gambar-menggunakan-php/ http://opik.unitiga.com/2009/02/05/membuat-tulisan-diatas-file-gambar-menggunakan-php/#comments Wed, 04 Feb 2009 21:17:54 +0000 opik http://opik.unitiga.com/?p=243 Apakah anda sering merasa tidak nyaman karena file-file gambar yang anda publikasikan di website sering diambil dan digunakan oleh orang lain tanpa seijin anda sebagai pemilik dari file tersebut? Kebetulan ada beberapa teman yang pernah mengeluhkan hal tersebut kepada saya, terutama teman-teman yang mempunyai bisnis toko online.

Saya juga paling ndak “sreg” kalau gambar-gambar di website saya dipakai oleh orang lain tanpa mencantumkan sumber aslinya.

Itu kan sudah resiko mbah…
Mempublikasikan file di website berarti boleh diambil dan dipakai oleh siapapun.

Untuk itu saya iseng-iseng membuat sebuah class php kecil-kecilan yang berfungsi untuk membuat text on the fly pada file gambar yang kita publikasikan. Nantinya pada setiap file gambar yang dipublikasikan secara otomatis akan muncul sebuah tulisan diatasnya.

Contoh file gambar yang telah disisipkan tulisan

Contoh file gambar yang telah disisipkan tulisan

Cara penggunaan class php tersebut :
<?php
// Memanggil file class txtonimg
include_once ("txtonimg.class.php");
// Deklarasikan class
$txtonimg = new txtonimg;
// Buat aturan, setiap variabel dengan nama image, secara otomatis akan digenerate teks/tulisan diatasnya
if (isset($_GET['image'])) {
$txtonimg->txtoverlay($_GET['image']);
}
// Contoh penggunaan - ( ganti nama_file.jpg menjadi nama file gambar anda )
echo ("<img src=\"?image=nama_file.jpg\" border=\"0\" alt=\"\" />");
?>

Source code selengkapnya dapat di unduh disini.

]]> http://opik.unitiga.com/2009/02/05/membuat-tulisan-diatas-file-gambar-menggunakan-php/feed/ 5 Membuat Tulisan dengan Efek Shadow Menggunakan CSS http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/ http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/#comments Mon, 28 Apr 2008 15:58:32 +0000 opik http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/ Dengan memanfaatkan kemampuan Cascading Style Sheets (CSS) yang sangat powerfull kita dapat membuat tampilan website menjadi sangat indah. Salah satu kemampuan CSS yang akan dibahas disini adalah kemampuan membuat tulisan dengan efek shadow (tulisan dengan bayangan). Berikut script lengkapnya :

<html>
<head>
<title>Teks Dengan Efek Shadow</title>
<style type="text/css">
#teks_shadow:before { content: 'Teks Dengan Efek Shadow'; }
.teks {
font-size: 3em;
font-family: tahoma, verdana, arial;
color: #d20000;
text-align: left;
font-weight: bold;
}
.shadow {
/* untuk tampilan pada browser internet explorer */
height: 1em;
filter: shadow(color=#666, direction=135, strength=5);
line-height: 2em;
white-space: normal;
}
.shadow:before {
display: block;
margin: 0 0 -2.05em 0.05em;
padding: 0;
color: #666;
}
</style>
</head>
<body>
<div style="height:100px;" class="shadow teks" id="teks_shadow">Teks Dengan Efek Shadow</div>
</body>
</html>

Akan menghasilkan tulisan seperti berikut ini,

Tulisan Dengan Efek Shadow

]]> http://opik.unitiga.com/2008/04/28/membuat-tulisan-dengan-efek-shadow-menggunakan-css/feed/ 4 Membuat Meta Keyword Dinamis Menggunakan PHP http://opik.unitiga.com/2008/01/05/membuat-meta-keyword-dinamis-menggunakan-php/ http://opik.unitiga.com/2008/01/05/membuat-meta-keyword-dinamis-menggunakan-php/#comments Sat, 05 Jan 2008 02:41:02 +0000 opik http://opik.unitiga.com/2008/01/05/membuat-keyword-dinamis-menggunakan-php/ Salah satu teknik SEO (Search Engine Optimization) yaitu dengan mengoptimalkan penggunaan kata kunci/keyword website kita. Biasanya kebanyakan orang membuat kata kunci ini statis, atau itu.. itu.. saja. Padahal di setiap halaman website kita belum tentu kata kunci yang ada cocok dengan konten pada halaman tersebut. Lantas bagaimana mungkin para robot mesin pencari tertarik untuk ‘mengencani’ halaman web tersebut? (ingat ini yang dibahas hanya keyword loh, bukan yang lain :D )

Dalam baris kode-kode HTML (Hypertext Markup Language), peletakan kata kunci (meta keyword) didalam <head>………….</head>.
<meta name="keywords" content="kata satu, kata dua, kata tiga,dan seterusnya">
Setiap kata kunci harus dipisahkan dengan tanda koma (,). Lihat aturan-aturan penulisan kata kunci disini.

Untuk menyiasati agar kata kunci selalu up to date dan selalu sesuai dengan (minimal) judul pada tiap-tiap halaman, kita akan mencoba membuat aplikasi sederhana dengan menggunakan skrip PHP. Untuk lebih memudahkan pemahaman kita terhadap fungsi-fungsi yang nantinya akan dipakai, alangkah baiknya kalau kita bersama-sama membaca kembali tentang dasar-dasar PHP.

Karena pada postingan sebelumnya, untuk penggunaan database belum dibahas, maka saya akan membuat judul halaman dalam bentuk variabel. Bagi yang sudah paham dengan ‘tetek-bengek’ penggunaan database, monggo di sesuaikan saja, variabel tersebut anggap saja merupakan keluaran dari database.

Untuk lebih memperdalam pemahaman kita tentang fungsi array(), maka pada contoh berikut ini saya sengaja lebih memilih menggunakan fungsi explode() dari pada menggunakan fungsi strtok().Berikut contoh sederhana pembuatan kata kunci dinamis.
<?php
/*
Menentukan judul halaman dan buang spasi
diawal dan akhir (kalau ada).
*/
$judulHalaman = trim("Membuat Virtual Subdomain Menggunakan
.htaccess");
?>
<html>
<head>
<title><?php echo ("$judulHalaman"); ?></title>
<meta name="keywords" content="
<?php
/*
Menentukan elemen array yang akan diambil dimulai dari
nomor urut berapa?
*/
$angka = 0;
/*
Menentukan karakter yang akan digunakan sebagai pemisah
kata kunci.
*/
$separator = ",";
//Menghitung jumlah kata yang di pisahkan oleh tanda spasi.
$hitungString = substr_count($judulHalaman, " ") + 1;
/*
Memecah string menjadi kata demi kata, dengan tanda
pemisah berupa spasi.
*/
$string = explode(" ", $judulHalaman);
//Membuat proses looping
for ($angka = 0; $angka < $hitungString; $angka++) {
/*
Melakukan pengecekan pada jumlah elemen string yang
sudah ditampilan. Jika elemen string yang ditampilkan
sudah selesai, maka tanda koma (,) dihilangkan.
Jumlah kata harus dikurangi dengan nilai 1, karena
penghitungan awal dimulai dari angka 0, bukan angka 1.
*/
if ($angka == ($hitungString - 1)) {
$separator = "";
}
//Tampilkan kata kunci.
echo "$string[$angka]$separator";
}
?>
">
</head>
<body>
...... </body>
</html>
Contoh diatas dapat juga diaplikasikan untuk meta-meta lainnnya menjadi lebih dinamis. Selamat mencoba dan selamat bereksperimen.

]]> http://opik.unitiga.com/2008/01/05/membuat-meta-keyword-dinamis-menggunakan-php/feed/ 9 Membuat Navigasi Interaktif Menggunakan CSS http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/ http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/#comments Sat, 05 Jan 2008 00:53:45 +0000 opik http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/ Untuk membuat sebuah navigasi/menu yang interaktif tidak melulu harus dilakukan dengan animasi flash atau dengan menggunakan kombinasi 2 image yang berbeda.
Dengan memanfaatkan kemampuan CSS (Cascading Style Sheets) yang maha dahsyat, kita dapat membuat sebuah navigasi yang cantik.

Berikut contoh sederhana mempercantik navigasi menggunakan CSS.

<html>
<head>
<title>Tes Menu</title>
<style type="text/css">
#menu {
padding: 0px;
background: #000;
float: left;
margin: 0px;
width: 550px;
}
#menu ul {
padding: 0px;
margin: 0px;
}
#menu ul li {
padding: 0px;
display: block;
float: left;
margin: 0px;
font: 11px/30px Tahoma;
list-style-type: none;
text-align: center;
}
#menu li a {
display: block;
width: 110px;
color: #fff;
text-decoration: none;
border-bottom-style: double
}
#menu LI#active {
background: #0033cc;
color: #000;
}
#menu LI#active A {
background: #0033cc;
color: #000;
}
#menu A:hover {
background: #99cc00;
color: #fff;
border-bottom-style: none;
}
</style>
</head>
<body>
<div id=menu>
<ul>
<li><a href="#">Menu Satu</a></li>
<li><a href="#">Menu Dua</a></li>
<li><a href="#">Menu Tiga</a></li>
<li><a href="#">Menu Empat</a></li>
<li><a href="#">Menu Lima</a></li>
</ul>
</div>
</body>
</html>

Selamat mencoba!
PS: Banyak sekali situs yang menyediakan tutorial gratis tentang css. Coba googling saja dengan kata kunci “CSS Tutorial”.

]]> http://opik.unitiga.com/2008/01/05/membuat-navigasi-interaktif-menggunakan-css/feed/ 0