Test Block Top

The Blog...
Articles, Tips & Trick and Other Interesting Information...
09 Februari 2012

Upload Error: File Size Melebihi Batas Upload Maksimal

Upload Error: File Melebihi Batas Upload Maksimal. Berikut peringatan yang muncul ketika execute tombol upload:

"The uploaded file exceeds the upload_max_filesize directive in php.ini"

[caption id="" align="alignnone" width="700" caption="Upload Error WordPress"]The uploaded file exceeds the upload_max_filesize directive in php.ini[/caption]

Error di atas muncul jika file yang diimport melebihi ukuran batas maksimal, misal; 2 MB. Solusinya adalah dengan meningkatkan batas upload maksimal ke nilai (value) yang lebih tinggi, caranya seperti berikut:

» Buka File "php.ini" (/etc/php.ini) → asumsi, OS menggunakan CentOS.

» Edit value upload_max_filesize ke nilai yang lebih besar (misalnya; upload_max_filesize = 50M).

[apache collapse="false"]
;;;;;;;;;;;;;;;;
; File Uploads ;
;;;;;;;;;;;;;;;;

; Whether to allow HTTP file uploads.
file_uploads = On

; Temporary directory for HTTP uploaded files (will use system default if not
; specified).
;upload_tmp_dir =

; Maximum allowed size for uploaded files.
upload_max_filesize = 50M
[/apache]

» Restart apache webserver

Command:

service httpd restart

[bash collapse="false"]
[root@linggih ~]# service httpd restart
Stopping httpd: [ OK ]
Starting httpd: [ OK ]
[root@linggih ~]#
[/bash]

Atau jika anda tidak punya akses ke direktori file /etc/php.ini (menggunakan shared hosting account), cari atau buat file baru pada direktori root website (public_html atau htdocs) → edit/buat baru file .htaccess atau php.ini. Kemudian tambahkan code seperti di bawah:

php_value upload_max_filesize 50M

Simpan file & coba upload ulang.

Website Tidak Bisa Dibuka Meskipun Modul mod_rewrite On

Beberapa hari yang lalu saya coba installkan blog wordpress teman pada vps. Setting permalink saya set ke "Custom Structure → /%category%/%postname%/", file .htaccess baru sudah otomatis tersetup namun ketika test buka halaman posting website error (Not Found).

Berikut Solusinya:

Cek dulu apakah modul mod_rewrite sudah aktif pada webserver apache, login ssh & ketikkan command:

apachectl -M

[bash highlight="6"]
[root@victor ~]# apachectl -M
Loaded Modules:
...
...
alias_module (shared)
rewrite_module (shared)
...
...
cgi_module (shared)
version_module (shared)
...
...
python_module (shared)
ssl_module (shared)
Syntax OK
[/bash]

Jika modul rewrite sudah aktif (rewrite_module (shared))baris ke-6 pada code di atas, kemungkinan AllowOverride pada file konfigurasi apache (httpd.conf) masih di set ke "None" (AllowOverride None).

Edit value "AllowOverride None" ke "AllowOverride All" pada file httpd.conf (/etc/httpd/conf/httpd.conf) untuk semua dokumen root direktori (biasanya "/var/www/html") → lihat baris ke-17 pada code di bawah.

[apache highlight="17"]
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/var/www/html"

#
# Each directory to which Apache has access can be configured with respect
# to which services and features are allowed and/or disabled in that
# directory (and its subdirectories).
#
# First, we configure the "default" to be a very restrictive set of
# features.
#
<Directory />
Options FollowSymLinks
AllowOverride All
</Directory>
[/apache]

Restart apache daemon:

[bash collapse="false"]
[root@victor ~]# service httpd restart
Stopping httpd: [ OK ]
Starting httpd: [ OK ]
[root@victor ~]#
[/bash]

Selesai, refresh halaman yang tadinya tidak bisa di buka (Not Found).
13 Desember 2010

5 Kesalahan Dalam Melakukan Link Exchange

  1. Memasang semua link pada satu halaman web.

    Membuat halaman khusus yang berisi kumpulan link exchange dengan mudah akan terdeteksi oleh search engine. Search akan mendeteksi halaman ini sebagai halaman "Link Exchange" dimana aktifitas link exchange ini dikategorikan illegal oleh search engine.
  2. Tukar link dengan website/blog yang tidak relevan.

    Google tidak hanya memperhatikan kuantitas dan kualitas link, tetapi tingkat relevansi dari source link (link sumber) ke link lainnya juga dipertimbangkan. Karena, link dari web/blog lain yang mempunyai PageRank tinggi dengan topik yang sama biasanya lebih cepat meningkatkan PageRank web/blog anda. Harap selalu diingat dalam melakukan tukar link dengan situs lain, selalu pertimbangkan memilih situs yang memiliki topik yang sama (relevan) dengan situs anda.
  3. Tukar link tanpa ada backlink.

    Ini adalah kesalahan umum yang biasa dilakukan oleh blogger pemula. Ketika blogger pasang link, mereka yakin bahwa web/blog mereka juga akan dipasang pada web/blog partner link yang bersangkutan. Namun pada kenyataannya, blog owner partner link kadang-kadang lupa atau bahkan mengabaikan request link exchange ini. Hal ini bisa terjadi jika request exchange link yang diajukan masuk ke folder spam (SPAM Box), jadi dengan mudah mereka akan mengabaikan request link exchange ini atau pesan terhapus karena banyaknya email spam & webmaster partner link malas/tidak sempat cek spam satu-persatu.
  4. Menggunakan Anchor Text yang tidak relevan saat tukar link.

    Anchor Text adalah kata atau kalimat (text) yang tampak (muncul) pada suatu link. Jika ingin memeperoleh hasil optimal pada SERP (Search Engine Results Page) berdasarkan keyword tertentu, disarankan menggunakan relevan keyword pada anchor text link blog anda. Tetapi dengan syarat anchor text yang dipasang pada blog lain ini harus relevan dengan topic web/blog partner link yang bersangkutan. Tidak kalah penting, tambahkan juga title link pada anchor text link web/blog anda.
  5. Tukarlah link dengan web/blog yang mempunyai page rank tinggi.

    Memang benar tukar link dengan blog yang mempunyai PageRank tinggi dapat membantu meningkatkan PageRank web/blog anda. Namun, tolak ukur page rank google seperti dijelaskan di atas harus memperhatikan kualitas, kuantitas dan tingkat relevansi topic blog partner link.

Semoga bermanfaat...
:)
12 Desember 2010

Membuat Form Kontak Menggunakan Simple PHP Script


Jika pada posting sebelumnya tentang cara membuat form kontak dengan menggunakan google docs & online form generator, sekarang sedikit mengulas tentang Cara Membuat Kontak Form Dengan Menggunakan Simple PHP Script.

Langsung saja & tanpa banyak basa-basi. Begini tahapannya:

Buat dahulu file phpnya.

[php]
<?php

if(!$_POST) exit;

$email = $_POST['email'];


//$error[] = preg_match('/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i', $_POST['email']) ? '' : 'INVALID EMAIL ADDRESS';
if(!eregi("^[a-z0-9]+([_\\.-][a-z0-9]+)*" ."@"."([a-z0-9]+([\.-][a-z0-9]+)*)+"."\\.[a-z]{2,}"."$",$email )){
$error.="Alamat email yang anda masukkan tidak valid";
$errors=1;
}
if($errors==1) echo $error;
else{
$values = array ('nama','email','pesan');
$required = array('nama','email','pesan');

$your_email = "emailanda@email.com";
$email_subject = "Pesan baru: ".$_POST['subject'];
$email_content = "Isi pesan:\n";

foreach($values as $key => $value){
if(in_array($value,$required)){
if ($key != 'subject' && $key != 'subject') {
if( empty($_POST[$value]) ) { echo 'Jangan kosongkan field yang wajib diisi'; exit; }
}
$email_content .= $value.': '.$_POST[$value]."\n";
}
}

if(@mail($your_email,$email_subject,$email_content)) {
echo 'Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda.';
} else {
echo 'ERROR!';
}
}
?>
[/php]

Copy dan pastekan kode di atas pada text editor (notepad misalnya) dan berilah nama terserah & diakhiri dengan file extention php (.php), atau;

Download filenya di sini.

Yang harus anda edit:

"Alamat email yang anda masukkan tidak valid" → Notifikasi ke visitor jika input alamat email yang di isi tidak valid.

"emailanda@email.com" → alamat email dimana seluruh konten isi pesan akan dikirimkan (isikan dengan alamat email anda).

"Pesan baru: ".$_POST['subject']" → Subjek pesan yang akan ditampilkan di alamat email anda (Pesan baru: diikuti dengan subjek pesan yang diisikan pada form kontak). Ganti tulisan "Subjek pesan:" dengan text terserah anda.

"Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda." → Ganti dengan kata-kata anda.

Upload file php di atas ke web server, atau jika anda akan menggunakan form kontak ini di blogspot, upload ke google site.

Selanjutnya, copy dan pastekan kode di bawah ini antara tag "<head> Kode di sini </head>" (blogspot → sisipkan kode ini pada tab "Edit HTML").

[jscript]
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$.post(action, {
Nama: $('#nama').val(),
eMail: $('#email').val(),
Subject: $('#subject').val(),
Pesan: $('#pesan').val()
},
function(data){
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'');
$('.response').slideDown();
if(data=='Pesan terkirim! Terima Kasih. Secepatnya kami akan menanggapi pesan anda.') $('#contactform').slideUp();
}
);
return false;
});
});
// ]]>
</script>
[/jscript]

Buat property css untuk kontak form. CSS ini terserah mau anda buat seperti apa, namun ID form harus sama dengan tag ID & Class yang ada pada kode script di atas ("#contactform" dan ".response").

Untuk blogspot, copy dan pastekan kode di bawah ini di atas kode "]]>" pada tab "Edit HTML".

[css]
#contactform {margin:0; padding:5px 10px;}
#contactform * {color:#222222;}
#contactform ol {margin:0; padding:0; list-style:none;}
#contactform li {margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons {margin:5px 0 5px 0;}
#contactform label {margin:0; width:110px; display:block; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#2c2c2c; text-transform:capitalize;}
#contactform label span {display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text {width:440px; border:1px solid #dcdcdc; margin:5px 0; padding:5px 2px; height:16px; background:#f5f5f5;}
#contactform input.text:hover {border: 1px solid #048bfe;background:#fff; cursor: default}
#contactform input.text:focus {color:#222; border: 1px solid #048bfe; background:#fff; cursor:text;}
#contactform textarea {width:440px; border:1px solid #dcdcdc; margin:10px 0; padding:2px; background:#f5f5f5;}
#contactform textarea:hover {border: 1px solid #048bfe;background:#fff; cursor: default}
#contactform textareat:focus {color:#222; border: 1px solid #048bfe; background:#fff; cursor:text;}
#contactform li.buttons input {padding:3px 0; margin:0; border:0; color:#FFF;}
p.response {text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto; }
#contactform li.buttons {margin:5px 0 5px 0;}
.kirimpesan {margin: 1em 0 1em 0; width: 116px; height: 30px; position: relative; overflow: hidden; padding: 0; border: none; }
.kirimpesan input{background: url(kirim_pesan.jpg) 0 0 no-repeat; width: 116px; height:30px; float:left; padding: 0; overflow: hidden; border: 0; text-indent: -9000px; cursor: pointer;}
.kirimpesan input:hover{background-position: 0 -30px;}
[/css]

Sekarang tinggal buat halaman presentasi (visual) kontak form. Kode html nya seperti contoh di bawah ini:

[html]
<form action="contact.php" method="post" id="contactform">
<ol>
<li>
<label for="name">Nama <span>Isikan nama anda</span></label>
<input id="name" name="name" class="text" />
</li>
<li>
<label for="email">Email <span style="text-align:left">Isikan alamat email valid</span></label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="subject">Subjek <span>Subjek pesan anda</span></label>
<input id="subject" name="subject" class="text" />
</li>
<li>
<label for="message">Pesan <span style="text-align:left">Yang ingin anda sampaikan</span></label>
<textarea id="message" name="message" rows="6" cols="50"></textarea>
</li>
<li class="buttons">
<span class="kirimpesan"><input name="imageField" type="submit" /></span>
</li>
</ol>
</form>
[/html]

Ganti "contact.php" dengan alamat url dimana script php contact anda letakkan.

Tampilannya akan seperti ini:



















Selesai. Semua pesan yang diisikan melalui form kontak di atas akan dikirimkan ke alamat email sesuai dengan alamat email pilihan anda.

Monggo dicoba.
25 Oktober 2010

.exe Windows Media Center Problem

Problem Windows 7 & Vista » Semua File Berekstensi .exe Otomatis Terbuka Oleh Windows Media Center.





Biasanya problem seperti ini terjadi karena tidak sengaja membuka file yang berekstensi ".exe" dengan Windows Media Center. Ketika file dibuka/dijalankan keluar announcement yang bertuliskan "Windows can't open this file: bla.. bla.. bla..dst", kemudian text kalimat selanjutnya "What do you want to do?" anda memilih "Select a program from a list of installed programs". Biasanya untuk file .exe, otomatis point ke Windows Media Center setelah pilih opsi Select a program from a list of installed programs.

Semisal anda tekan tombol OK tanpa melihat dengan teliti termasuk opsi "Always use the selected program to open this kind of file" masih tercentang, maka semua file yang berextensi ".exe" kedepannya akan selalu terbuka oleh program Windows Media Player Center.

File-file video, audio (MP3, WMA, dlsb), Excel, Word, PowerPoint, PSD, FLA, program browsing internet dan semua program lainnya akan terbuka oleh Windows Media Center.

Sangat mengesalkan bukan!!!

Bagi anda semua yang mengalami masalah serupa, jangan khawatir. Ada trik sederhana yang dapat anda pakai untuk mengatasi masalah tersebut.


  1. Download file registry untuk fix extenstion registry (.reg) di sini, kemudian extrak ke hardisk atau media penyimpanan lainnya.

    Tujuan menggabungkan file ini adalah agar semua value yang terdapat pada file berekstensi ".reg" berhasil di-merge semua (karena program registry "regedit.exe" masih terbuka oleh Windows Media Center).

  2. Setelah terekstrak, klik kanan pada "reg_fix_w7.reg", pilih "Merge". Jika keluar kotak dialog konfirmasi bahwa file berhasil digabungkan, log off atau restart komputer anda.

  3. Nah setelah extensi ".reg" sudah di fix, sekarang dowload file untuk fix ekstensi ".exe" di sini. Ektrak filenya, ada dua file ("exe_fix_w7.reg" dan "exefix_vista.reg"), sesuaikan dengan sistem operasi yang anda pakai.

    Klik kanan dan pilih "Merge", setelah file berhasil digabungkan, Log off restart komputer anda.

  4. Nah... sampai di sini, semua program sudah dapat dijalankan dengan normal. Namun ada satu masalah, icon program masih tetap menggunakan icon Windows Media Center.

    Cara paling gampang, gunakan tool ini untuk merubah iconnya. Install di komputer anda, kemudian jalankan program.



Selesai.

Semoga membantu.
:D
22 September 2010

Simple CSS Trik - Embossing Text CSS

Membuat efek text umumnya dilakukan pada object text gambar, baik itu menggunakan program image editor Adobe Photoshop, Adobe Illustrator maupun menggunakan software image editor lainnya. Namun pada posting kali ini saya akan mencoba membuat embossing text effect menggunakan simple css trik.

Terdapat dua opsi yang dapat digunakan untuk membuat emboss text effect, pertama efek teks timbul dan kedua efek teks tenggelam.

Pertama membuat text effect tenggelam. Ilustrasi; background text berwarna abu-abu (silver/#666), warna text hitam. Pertama buat dahulu class selector css seperti ilustrasi di bawah ini:



p.tenggelam {
color: #000;
text-shadow: 0px 1px 0px #999;
font-weight:bold;
}

Untuk membuat effect text tenggelam dengan asumsi background latar berwarna abu-abu (#666), maka text yang digunakan harus lebih gelap dari warna background latar. Text Shadow (text-shadow: 0px 1px 0px #999;) harus lebih terang dari warna text dan warna background latar.
Sedikit teori:.

0px yang pertama, merupakan koordinat X (atau bisa dibilang posisi vertikal / posisi ke kanan atau ke kiri). Jika nilainya 0 maka sama artinya dengan tidak ada perpindahan posisi. Jika nilainya "+" (positif) maka posisi akan bergeser ke arah kanan, jika "-" posisi bergeser ke arah sebaliknya (bergeser ke kiri).

1px yang kedua, merupakan koordinat Y (posisi horizontal / posisi ke atas atau ke bawah). Jika nilainya positif, posisi akan bergeser ke bawah, jika negatif posisi berada pada wilayah sebaliknya.

0px yang ketiga, merupakan radius blur dari text efek yang akan dihasilkan. Nilai "0" sama artinya dengan tidak efek blur sama sekali. Semakin besar nilainya, maka akan semakin buram efek blurnya.

Penerapan pada dokumen html, seperti ilustrasi di bawah:


<div style="background-color:#666; padding:5px;">
<p class="tenggelam">
Ini adalah text berwarna hitam, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna abu-abu cerah
</p>
</div>

Hasilnya akan tampak seperti contoh di bawah ini:

Ini adalah text berwarna hitam, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna abu-abu cerah



Kedua text effect timbul. Warna background latar sama, warna text biru (#09F), properti text-shadow css yang diterapkan sama seperti di atas namun warna bayangan menggunakan warna yang lebih gelap dari warna background latar maupun warna text yang digunakan (hitam / #000). Maka class selector CSS yang digunakan adalah seperti ilustrasi di bawah ini:



p.timbul {
color:#09F;
text-shadow: 0px 1px 0px #000;
font-weight:bold;
}

Penerapan pada dokumen html, seperti ilustrasi di bawah:



<div style="background-color:#666; padding:5px;">
<p class="timbul">
Ini adalah text berwarna biru, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna hitam.
</p>
</div>


Maka hasilnya akan tampak seperti di bawah ini:

Ini adalah text berwarna biru, background berwarna abu-abu dengan ditambahkan effect text bayangan berwarna hitam.


Nah.. Bisa kan. Silahkan bereksperimen dengan warna dan property text-shadow css menurut selera kamu masing-masing.

21 September 2010

Rollover Image CSS - Hemat Space & Bandwidth


Umumnya rollover image (gambar rollover) CSS biasa menggunakan 2 gambar terpisah atau 2 gambar pada satu file image.

Jika menggunakan dua gambar terpisah, contohnya seperti berikut. Pertama harus ada dua gambar yang akan dijadikan objek rollover image (contoh: logo Facebook). Terdapat 2 gambar, pada gambar di bawah masing-masing gambar normal dan rollover / hover mouse.

Gambar Normal

rollover image facebook

Gambar Hover

rollover image facebook Hover

CSS yang dipakai adalah seperti di bawah ini:

[css]
.fbDua {
width:125px;
height:125px;
margin:20px auto;
}

.fbDua a {
display: block;
width: 125px;
height: 125px;
background: url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook-hover.jpg);
text-decoration: none
text-indent: -9000px;
}

.fbDua a:hover {
background:url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook.jpg)
}

.fbDua a img {
border: none
}
[/css]

Code HTML yang dipakai pada CSS di atas adalah:

[html collapse="false"]
<div class="fbDua">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Maka hasilnya akan seperti ini:





Jika menggunakan dua gambar yang terdapat pada satu file image, pertama siapkan dahulu file gambar yang ingin dipakai. Contoh seperti gambar di bawah ini dengan dimensi ukuran lebar 125px dan tinggi 250px.

Rollover image Facebook

Kemudian buat properties CSS seperti di bawah

[css]
.fbDuasatu {
width:125px;
height:125px;
margin:20px auto;
}

.fbDuasatu a {
display: block;
width: 125px;
height: 125px;
background: url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook-dua-satu.jpg) left top no-repeat;
text-decoration: none
text-indent: -9000px;
}

.fbDuasatu a:hover {
background-position: left bottom
}

.fbDuasatu a img {
border: none
}
[/css]

Code HTML yang dipakai pada properties CSS di atas:

[html collapse="false"]
<div class="fbDuasatu">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Hasilnya akan tampak seperti di bawah ini:



Nah yang terakhir menggunakan trik yang menjadi fokus utama artikel kali ini, adalah hanya dengan menggunakan satu gambar saja untuk membuat rollover image css yang irit space dan bandwidth. Pertama siapkan dahulu satu gambar yang ingin dibuat rollover. Contoh seperti logo facebook yang satu ini:

rollover image facebook Hover

Kemudian buat properties CSS seperti di bawah ini:

[css]
.fbSave {
width:125px;
height:125px;
margin:20px auto;
}

.fbSave a {
background:url(http://linggihnote.blogspot.com/images/css/rollover-image-facebook.jpg);
margin:0;
opacity: 0.5;
-moz-opacity:0.5;
display: block;
width: 125px;
height: 125px;
overflow: hidden;
float: left;
text-indent: -9000px;
margin-right: 7px;
clear:left
}

.fbSave a:hover {
opacity: 1;
-moz-opacity:1
}
[/css]

Code HTML sama seperti sebelumnya, namun sesuaikan dengan properties Class CSSnya

[html collapse="false"]
<div class="fbSave">
<a href="#" title="Rollover image hemat space &amp; Bandwidth">Keyword anda tulis di sini.</a>
</div>
[/html]

Hasilnya akan tampak seperti di bawah ini



Pada properties CSS di atas, untuk mengatur tingkat kecerahan gambar, edit "opacity" & "-moz-opacity". Semakin kecil nilainya, maka akan semakin pudar objek gambar.

Untuk "width" & "height" pada properties css, ganti dengan ukuran dimensi sesuai gambar yang anda pakai. Bagian text yang bertuliskan "Keyword anda tulis di sini." isikan dengan keyword (kata kunci) anda, tulisan keyword ini tidak akan muncul ketika dibuka pada halaman browser karena Selector text link disetting tidak munculkan oleh property (text-indent: -9000px;).
Loncat ke Atas ↑