arif.suparlan.com » Tutorial

Resize gambar proporsional & posisi tengah dengan CSS & Javascript (Update)

Arif — Wed, 18 Aug 2010 15:16:46 +0000

Saya hampir gila mencoba me-resize dan memposisikan tengah beberapa gambar di dalam div yang mempunyai property overflow: hidden. Terlalu berlebihan ya? hehehe… Tapi memang sulit. Ukuran gambar tersebut berbeda-beda, portrait atau landscape, yang jelas dia lebih besar dari ukuran div itu. Saya belum bisa ngakalinnya bermodalkan CSS saja.

Meskipun mentok dengan CSS, saya akhirnya ngakalin dengan bantuan Javascript. Dengan memanfaatkan Javascript saya bisa untuk merubah ukuran dan posisi gambar secara dinamis. Bisa lebih dari itu sih, tapi untuk pemula seperti saya ini bisa sangat membantu melayout halaman.

Dulu saya pernah buat script untuk Resize & crop gambar dengan Codeigniter. Nah script ini memakai hitung-hitungan yang sama. Kalau Codeigniter kalkulasinya oleh PHP di sisi server, yang ini di sisi client/browser. Cara ini bisa dipermudah dengan menggunakan framework Javascript. Saya belum coba, tapi kalau ada cara yang lebih mudah lagi, mohon dipost di sini. Makasih.

Di bawah berikut kira-kira contoh scriptnya. Kedua gambar yang berukuran besar dengan orientasi yang berbeda, portrait dan landscape ini saya letakkan sebagai icon dalam div dengan property overflow hidden. Prosesnya mudah, tetapi agak panjang, yaitu membandingkan rasio dua ukuran untuk menentukan orientasi kemudian me-resize dan menghitung posisi tengah. Ini contohnya: Demo.



 Resize proporsional & posisi center dengan Javascript






Resize proporsional & posisi center dengan Javascript

Update berikut untuk penggunaan dengan jQuery. Ada beberapa tambahan script untuk mengukur dimensi ketika dalam keadaan gambar hidden.

$(document).ready(function() {
 $('img').each(function() {
 var x = 150;
 var y = 150;
 var ratio = x/y;

 if ($(this).height() > 0) {
 var width = $(this).width();
 var height = $(this).height();
 } else {
 var elem_clone = $(this).clone()
 .attr("id", false)
 .css({visibility:"hidden", display:"block", position:"absolute"});
 $("body").append(elem_clone);
 var width = elem_clone.width();
 var height = elem_clone.height();
 elem_clone.remove();    
 }

 $new_size = resize_min(width, height, x, y);

 $(this).css("width", $new_size[0]);
 $(this).css("height", $new_size[1]);
 $(this).css("marginLeft", -(($new_size[0]-x)*.5) + "px");
 $(this).css("marginTop", -(($new_size[1]-y)*.5) + "px");
 });
 });

Download Youtube Video dengan Shell Script (Update)

Arif — Fri, 30 Jul 2010 14:50:43 +0000

Bulan lalu Youtube merubah metode untuk link file videonya. Sepertinya dia memang sering merubah link itu, jadi beberapa add-on firefox dan software-software untuk download youtube jadi gagal mendownload. Dan saya sebelumnya pernah ngoprek shell sederhana untuk download video dari Youtube di sini, dan pastinya cara itu juga sudah tidak bisa digunakan lagi. Kita hanya perlu cari cara yang lain.

Disini ada cara baru yang bisa digunakan untuk mendownload video dari Youtube. Agak berbeda dari cara yang lama, banyak parameter-parameter yang disertakan di-urlnya. Dan untuk di shell scriptnya perlu tambahan Regex (regular expression) untuk merubah string.

Buka source di browser halaman contoh ini

http://www.youtube.com/watch?v=jNQXAC9IVRw

Kemudian lakukan pencarian string ini "img.src =" temuan yang pertama, dan seharusnya string tersebut hanya ada satu di halaman itu. Ambil string itu sampai bertemu karakter ';.

Kemudian, hanya dengan mengganti semua string ini "\/" menjadi "/", dan "generate_204" menjadi "videoplayback", kita akan langsung dapat link untuk videonya. Jalankan url itu di browser akan mendownload video tersebut. Gampang banget kan? Contohnya seperti ini.

http://v3.lscache8.c.youtube.com/videoplayback?ip=111.0.0.0&sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Calgorithm%2Cburst%2Cfactor&fexp=907103%2C900073%2C901023&algorithm=throttle-factor&itag=34&ipbits=8&burst=40&sver=3&expire=1280523600&key=yt1&signature=6F96527E73C895221DF2D018BB1B8BFFD7FFFAF8.4651E6B8C7F7B0B638D39A41F1439FE4F3314B&factor=1.25&id=8cd417002f48551c

Dan untuk shell scriptnya, buat file dengan nama "yt-download.sh". Scriptnya kira-kira seperti ini:

#!/bin/bash

if [ $2 ]
then
fn=$2
else
fn=$1.flv
fi

if [ $1 ]
then
  wget -O $1.tmp "http://www.youtube.com/watch?v="$1
  st=$(grep -o "img.src = '.*';" $1.tmp)
  st=${st#img.src = \'}
  st=${st%\';}
  st=${st//\\\///}
  st=${st/generate_204/videoplayback}
  echo "Link:" $st
  echo "File:" $fn

  wget -O $fn "$st"
  rm $1.tmp
else
  echo "Usage: sh yt-download.sh [video_id] [file_name]"
  exit
fi

Jalankan shell ini dengan command sh yt-download.sh jNQXAC9IVRw atau seperti ini bash yt-download.sh jNQXAC9IVRw untuk di Ubuntu. Di mana "jNQXAC9IVRw" adalah video id. Hasil downloadnya adalah file jNQXAC9IVRw.flv.

Saya kurang lihai untuk masalah Regex, jadi kalau ada Regex yang lebih baik bisa dipost di sini. Thx.

Hosting Email di Google Apps

Arif — Mon, 12 Jul 2010 17:29:29 +0000

Mungkin banyak yang belum tau bahwa Google Apps memberikan layanan hosting email untuk domain kita secara gratis. Ini bukan hal baru sih, –berarti yang baru tau katrok! hehehe. Layanan ini sudah agak lama, saya sendiri sudah memakainya sejak tahun lalu. Lumayan banget untuk yang punya banyak domain dan memegang banyak email, saya tinggal hosting di Google Apps dan arahkan email-email tersebut ke email utama saya. Dan yang penting ga perlu pusing dengan kehabisan space, sebab Google menyediakan space lumayan besar.

Saya dulu tau ini dari Pak Uut. Pertama emang ga langsung nyoba sih, terus baru mulai pakai, waktu sudah mulai banyak pegang banyak domain. Ditambah lagi saya menggunakan tiga komputer bergantian, PC kantor, dan dua notebook, dan aplikasi email client seperti Outlook cukup bikin menyita waktu apalagi kalo sudah berhubungan dengan backup-restorenya. Ditambah lagi aplikasi email seperti Squirrel, halah. Siapa sih yang ga benci dengan aplikasi webmail seperti Squirrel atau Horde.

Beberapa teman saya bilang ini terlalu ribet. Mungkin tidak semua setuju dengan saya bahwa ini sangat membatu. Mungkin mereka ga pernah megang banyak email. Saya punya dua email utama di Yahoo dan Gmail, selain itu ada sekitar 10 email lagi kebanyakanya di hosting di Google, yang ditarik lewat pop3 ke email utama tadi. Jadi sehari-hari saya hanya perlu buka dua email utama tadi. Tapi sayangnya satu akun Gmail saat ini hanya diperbolehkan sekitar lima POP3.

Jadi buat yang belum tau caranya menghosting email di Google Apps, mari kita coba. Pertama yang perlu dipersiapkan adalah punya nama domain sendiri. Artinya ada akses untuk merubah MX record, yang bisa dilakukan melalui CPanel atau setting DNS pada domain control panel.

Kedua, daftar di Google Apps di sini: http://www.google.com/a/cpanel/domain/new. I want to use an existing domain name. Masukkan nama domain kemudian lanjutkan pendaftaran.

Google Apps requires changes to DNS to properly set up services. Learn more
* I understand that if I cannot alter DNS records for my domain,
I may impact my organization's ability to use Google Apps.

Centang bila setuju. Kemudian lanjutkan proses pendaftaran. Kemudian buat akun Google Apps pertama untuk domain tersebut.

Ketiga. Setelah pendaftaran selesai, untuk mengaktifkan diharuskan untuk memverifikasi domain tersebut. Di atas menu Dashboard ada tulisan To activate Google Apps services you must verify that you own your domain.... Cara yang termudah dengan mengupload sebuah file HTML. Sistem akan memberi sebuah kode yang harus ditulis didalam file ‘googlehostedservice.html’. Upload file tersebut dan pastikan dapat diakses di http://namadomain.com/googlehostedservice.html. Selesai kan proses verifikasi domain.

Keempat, aktifkan email pada menu dashboard. Disini akan diarahkan untuk mengubah MX entry domain. Banyak caranya dan itu tergantung pada Control Panel yang dipakai. Untuk yang termudah kita coba untuk CPanel. Setelah login CPanel, klik menu MX entry. Di bawah Change MX Entry pilih domain yang akan dipakai. Buat MX entry atau bila MX sudah ada, maka tinggal diedit saja. Isinya sebagai berikut:

priority 0
destination aspmx.l.google.com

Kalo perlu tambahkan satu lagi.

priority 10
destination alt1.aspmx.l.google.com

Perubahan ini kadang memerlukan waktu agak lama untuk resolve kadang bisa berjam-jam. Halaman webmail tadi bisa diakses melalui url berikut http://mail.google.com/a/namadomain.com. Supaya gampang di Google apps juga terdapat fitur untu menyetting url webmail tadi misalnya jadi webmail.namadomain.com. Untuk ini harus merubah di CNAME record.

Selanjutnya melakukan setting pada control panel Google Apps. Ini sangat mudah, kamu bisa nambah akun email baru dan mengakses fitur-fitur lainnya seperti Google Docs, Calendar, Chats, dan lain-lainnya. Selamat mencoba.

Shell Script untuk Mendownload Youtube dengan Wget dan Grep

Arif — Mon, 26 Apr 2010 16:27:56 +0000

Awalnya hanya liat-liat script python untuk mendonlod video dari Youtube.com, di sini. Tapi saya sama sekali ga ngerti python, -males lah, pusing lah, ga sempet belajar lah, nanti lah kapan-kapan belajar python, banyak alasan. Tapi seru juga loh dengan sedikit ngoprek, jadilah versi sederhana shell (bash) script untuk mendownload video dari Youtube. Hehehe norak ya? Padahal sudah banyak software seperti ini.

Buat yang belum tau, sebenarnya guuuaampang banget, hanya perlu tau link mana yang benar-benar video filenya. Saat ini ditulis, file video tersebut bisa didapat dengan menggunakan url “http://www.youtube.com/get_video?” dengan variable GET &video_id dan &t. Kalo ini ga jalan, kemungkinan besar ada perubahan dibagian itu di Youtube.

Cara kerjanya seperti ini. Dari url di bawah ini, ada nilai variable untuk &video_id yang nilainya sama saja dengan “?&v=” yaitu “jNQXAC9IVRw”.

http://www.youtube.com/watch?v=jNQXAC9IVRw

Kemudian buka source halaman youtube tadi di browser. Cari string ini “&t=” dan ambil isi variable tersebut seperti ini.

&t=vjVQa1PpcFO54PiDrAbT7aN25v9TCLrbRai9DKUR6DQ%3D

Gabungkan semuanya, jadi url ini adalah video file-nya –yang dapat di-download.

http://www.youtube.com/get_video?video_id=jNQXAC9IVRw&t=vjVQa1PpcFO54PiDrAbT7aN25v9TCLrbRai9DKUR6DQ%3D

Untuk mempermudah pekerjaan, buat file .sh dan tulis shell script berikut

~$ vim yt-download.sh

[ Cara dan Script ini tidak bisa digunakan lagi. Untuk update kunjungi: http://arif.suparlan.com/2010/07/30/download-youtube-video-dengan-shell-script-update ]

Jalankan shell script tadi

~$ sh yt-download.sh jNQXAC9IVRw

Nanti, hasilnya downloadnya akan menghasilkan file jNQXAC9IVRw.flv. Gampang kan? Selamat ngoprek!

Resize & Crop Gambar Proporsional di Codeigniter

Arif — Fri, 11 Sep 2009 06:38:13 +0000

Beberapa hari yang lalu saya memerlukan sebuah class atau library yang sederhana untuk melakukan upload gambar dan sekaligus menyesuaikan ukuran yang saya mau. Dulu saya pernah buat fungsi yang sama, waktu pertama kali kenal GD-nya PHP. Tapi sudah lupa bentuknya gimana. Yang sekarang saya buat adalah library extension untuk Codeigniter.

Codeigniter sudah punya library untuk upload, jadi upload tidak perlu dibahas lagi. Codeigniter juga sudah punya class untuk memanipulasi gambar diantaranya untuk melakukan Image Resizing, Thumbnail Creation, Image Cropping, dan lain-lain. Tapi untuk melakukan perubahan ukuran gambar dengan skala yang proporsional dengan ukuran yang spesifik, agak sedikit ada hitung-hitungannya.

Pertama kali, dengan membandingkan rasio ukuran awal dan ukuran yang baru, dapat menentukan menggunakan x atau y untuk menjaga proporsi gambar. Kalau mau meng-crop tepat di tengah-tengah gambar, maka axis x dan y juga ikut dihitung. Kecuali kalau cropnya mau dilakukan dari sebelah kiri-atas, axisnya tinggal diset x=0 & y=0. Lebih jelasnya lihat code-nya (my_image.php).

load->library('image_lib');
      $CI->load->library('baseintencoder');

      $img_size = getimagesize($config['source_image']);

      $t_ratio = $resize_width/$resize_height;
      $o_width = $img_size[0];
      $o_height = $img_size[1];
      if ($t_ratio > $o_width/$o_height)
      {
        $config['width'] = $resize_width;
        $config['height'] = round( $resize_width * ($o_height / $o_width));
        $y_axis = round(($config['height']/2) - ($resize_height/2));
        $x_axis = 0;
      }
      else
      {
        $config['width'] = round( $resize_height * ($o_width / $o_height));
        $config['height'] = $resize_height;
        $y_axis = 0;
        $x_axis = round(($config['width']/2) - ($resize_width/2));
      }

      $source_img01 = $config['new_image'];

      $CI->image_lib->clear();
      $CI->image_lib->initialize($config);
      $CI->image_lib->resize();

      $config['image_library'] = 'gd2';
      $config['source_image'] = $source_img01;
      $config['create_thumb'] = false;
      $config['maintain_ratio'] = true;
      $config['width'] = $resize_width;
      $config['height'] = $resize_height;
      $config['y_axis'] = $y_axis ;
      $config['x_axis'] = $x_axis ;

      $CI->image_lib->clear();
      $CI->image_lib->initialize($config);
      $CI->image_lib->crop();

      return $config['new_image'];
    }
  }
}

?>

Memanggil fungsinya seperti ini:

$config['image_library'] = 'gd2';
$config['source_image'] = $nama_source_image;
$config['new_image'] = $nama_hasil_image;

$this->load->library('my_image');
$this->my_image->resize_crop($config, '100', '200');

Saya termasuk noob di Codeigniter, mohon ma’af kalau ada yang salah tolong dikoreksi…

First of All – WordPress Theme

Arif — Tue, 21 Oct 2008 18:54:13 +0000

Ok, be nice and don’t make fun or anything. This is one of my wordpress themes, which I feel good to share it. My favorite, standard size, just below 800px width. Still very rough and I haven’t test it with all these plugins. Well, let me know if you like it.

And, my good friend Riano, posted quite interesting tutorials on how this theme is made: Simple web-layout design (1) and Simple web-layout design (2).

Features

Fixed width 800px. Yup, it’s a good idea to worry about the screen resolution.
2 columns.
Widget ready sidebar.
Valid XHTML (I guess).
Browser tested: Firefox, Opera, IE7, IE6, IE5, Safari.

Screenshot

Download

first_of_all.zip (Latest 2008-11-08).

Changes/Fixes

Sidebar default content.
IE6 & IE5 CSS hack.
Minor fixes.

Cara Meng-install WordPress

Arif — Mon, 18 Feb 2008 20:04:50 +0000

Sebelumnya maap dengan bahasa yang gw pake disini. Tutorial ini buru-buru gw bikin seadanya aja untuk menampung pertanyaan sekitar bikin blog dan WordPress. Jadi, di sini gw post beberapa hal yang berkaitan dengan WordPress, salah satu CMS (Content Management System) favorit gw untuk bikin blog. Selain itu ada diantaranya postingan tentang hal-hal yang berkaitan dengan FTP, CPanel dan juga Apache, MySQL, dan PHP.

Sebelum menginstall WordPress lu harus download installer wordpress di http://wordpress.org. Terus, lu mo install WordPressnya di mana? di hosting atau di localhost (lokal di kompie lu)?

Kalo mo masangnya di hosting lu harus punya domain & hosting dulu, ntar kan dapat username dan password untuk akses ke Cpanel. trus lu baca Cara Bikin Database di CPanel dan Cara Upload/download File Pake FTP Client.

Kalo lu mo masangnya di localhost lu harus install Apache, MySQL, dan PHP. Atau pake yang simple kayak WampServer, XAMPP dan lainnya yang gabungin Apache, MySQL, dan PHP dalam satu paket. Coba baca Cara Meng-install XAMPP (sori belum di bikin).

Di antara dua pilihan tadi harus tau dimana DocumentRoot dan tempat WordPressnya mo di-install. DocumentRoot tu kira-kira folder tempat naruk file-file lu sehingga kalo lu akses url di browser misalnya http://localhost, folder itulah yang dicari. DocumentRoot biasanya di htdocs, www, dan lain-lain. Bisa juga sih di install di folder tertentu misalnya di www/blog, atau www/wordpress. Untuk kasus ini gw ngasih contoh dengan url teman gw di http://www.rianology.com.

Download dan extract installer WordPress dari http://wordpress.org.
Pindahkan hasil extract tadi ke DocumentRoot atau folder tertentu di hosting pake FTP client atau kalo di localhost tinggal copy paste ke folder tertentu tersebut.
Buka web browser seperti Internet Explorer atau Firefox. Ketikkan Url dimana web lu tadi di-upload cth: http://www.rianology.com atau http://localhost/wordpress dan kalo berhasil muncul seperti ini.
Seperti gambar di atas tu artinya file wp-config.php belum dibuat. Klik aja create a wp-config.php file through a web interface, nanti installer ini yang langsung bikinin filenya. Halaman selanjutnya adalah info apabila kalo gagal bikin file wp-config.php. Lanjutkan dengan mengklik let’s go di bawah.
Sebelum mengisi field-field di halaman ini, lu harus bikin database dulu. Kalo lu bikinnya di hostingan lu bisa baca Cara Bikin Database di CPanel. Kalo lu bikinnya di localhost, lu bisa coba pake PhpMyAdmin untuk bikin databasenya.
Setelah bikin database, gw anggap bahwa lu dah tau nama database yang lu mo pake, username, dan password. Jadi sekarang lu tinggal isi field-fieldnya aja di sini. Sedangkan untuk host & prefix lu biarkan aja seperti itu. Dah gitu lu klik Submit. Dan jangan kaget, tombol-tombol di WordPress emang besar-besar.
Kalo ga ada masalah dengan akses ke database maka muncul perkataan “All right sparky!“. Lanjutkan dengan mengklik Run the Install.
Isikan judul blog lu dan e-mail lu. Klik Install WordPress.
Di sini installernya ngasih username dan sebuah password random untuk login. Copy paste password itu paste di notepad biar lu ga lupa dan simpan sampe lu ganti dengan password baru. Lanjutkan dengan mengklik wp-login.php.
Tampilan login adminnya seperti di bawah ini. Admin juga bisa di akses di misalnya http://www.rianology.com/wp-admin atau http://localhost/wordpress/wp-admin. Sekarang masukkan username dan password tadi.
Tampilan adminnya seperti ini.
Untuk ngerubah password dengan yang mudah diingat masuk ke menu Users. Di situ ada daftar administrator. Klik Edit (di sebelah kiri).
Di sini lu bisa ganti password, ganti nama dan ngedit Contact Info.
Ini tampilan standar halaman depan WordPress. Selamat mencoba.

Cara Bikin Database MySQL di CPanel

Arif — Mon, 18 Feb 2008 20:03:35 +0000

Nah ini buntutnya dari Cara Meng-install WordPress. Kalo lu mo nginstall WordPress di hosting, lu harus lewat CPanel dulu. Kebanyakan hosting biasanya pake CPanel sebagai control panel untuk mengatur website lu. Salah satu fasilitasnya adalah untuk mengatur database dalam hal ini yang kita gunakan adalah MySQL.

Kalo lu dah daftar/sewa hosting, lu dapat login ke cpanel hosting, misalnya seperti ini http://www.rianology.com/cpanel.
Masukkan username dan password. Kalo dah berhasil tampil seperti ini. Trus, cari fasilitas untuk pengaturan database MySQL.
Untuk membuat database baru, ketikkan nama database yang lu mau di field new database (cth: blog), trus klik Create database.
Muncul seperti ini kalo berhasil. Klik go back untuk balik ke halaman sebelumnya.
Ketikkan username untuk buat user baru (cth: blog) dan isikan password.
Muncul seperti ini kalo berhasil. Klik go back untuk balik ke halaman sebelumnya.
Kemudian tunjukkan database terhadap user yang sudah dibuat tadi. Pilih database dan username trus klik Add user to database.
Muncul seperti ini kalo berhasil. Klik go back untuk balik ke halaman sebelumnya.
Dan halaman sebelumnya jadi kayak begini. Ini artinya database sudah dapat di akses dengan username tersebut.
Coba lihat di PhpMyAdmin. Klik link ke PhpMyAdmin di bawah.
Tampil seperti di bawah. Ini artinya database baru dibikin dan belum ada table yang dibuat.
Kalo database sudah terisi table-table terlihat seperti ini.

Cara Upload/download File Pake FTP Client

Arif — Mon, 18 Feb 2008 20:01:52 +0000

Gw ga jago-jago banget tentang FTP (File Transfer Protocol) client, tapi tool ini sudah biasa gw pake untuk ngelola website. Mudah-mudahan berguna buat teman-teman yang belum ngerti menggunakan FTP client untuk upload/download file ke FTP Server.

Eniwei, tool ini, sangat mudah digunakan, sekali make bisa langsung ngerti, mirip-mirip kayak Windows Explorer aja. Gunanya nggak jauh dari transfer file dari local (kompie lu) ke server tujuan.

Buka FTP client. Contoh yang gw pake di sini adalah Filezilla FTP client. Software ini sudah cukup mumpuni banget untuk urusan ini. Lu bisa download di http://filezilla-project.org/download.php?type=client.
Ketikkan address FTP server yang mo di akses, username, dan password. Untuk address FTP server, gw kasih contoh misalnya lu dah punya/daftar domain dan hosting, misalnya www.rianology.com, jadi addressnya ftp.rianology.com. Trus selanjutnya klik Quickconnect.
Kalo berhasil login akan tampil seperti ini.
Tampilan Filezilla di sebelah kiri adalah local site, isinya direktori di komputer lu. Dan yang sebelah kanan remote site, yaitu remote site yaitu direktori yang ada di server yang lu akses (dlm hal ini contohnya rianology.com).
Perlu diperhatikan supaya hati-hati dalam menghapus dan melakukan perubahan karena ga bisa di ulang/undo.
Untuk mengupload, cari file yang mo diupload di local site, trus tinggal drag-drop ke remote site ke folder yang lu inginkan.
Untuk men-download, cari file yang mo di-download di remote site, trus tinggal drag-drop ke local site ke folder yang lu inginkan.
Gitu aja, gampang kan? Silakan mencoba.