Test Block Top

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

Install Nginx Webserver Webmin Plugin

Tutorial Install Nginx Webserver Webmin Plugin



» Buka link 'Webmin' → 'Webmin Configuration' → 'Webmin Modules'

[caption id="attachment_1291" align="alignnone" width="150" caption="Webmin Modules"]Install Nginx Webmin Plugin[/caption]

» Pada halaman 'Install Module', silahkan pilih mode instalasi (local file, uploaded file, ftp/http url). Pada artikel ini akan menggunakan type instalasi ftp/http url. Klik checkbox 'From ftp or http URL', kemudian isikan dengan alamat url download.

Contoh: https://github.com/downloads/vixh/nginx-webmin/nginx0.0.2.wbm.gz (dapat dilihat pada alamat url https://github.com/vixh/nginx-webmin/downloads).

» Klik tombol Install Module


[caption id="attachment_1292" align="alignleft" width="150" caption="Install Module"]Install Nginx Webmin Plugin 2[/caption][caption id="attachment_1293" align="alignleft" width="150" caption="Module Installed"]Install Nginx Webmin Plugin 3[/caption]


Selesai. Manage Nginx di menu "Servers" > "Nginx Webserver".

[caption id="attachment_1294" align="alignnone" width="150" caption="Webmin Nginx Webserver"]Install Nginx Webmin Plugin 4[/caption]
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.

Loncat ke Atas ↑