HarryMahardhika.com » web development http://harrymahardhika.com Blog About Internet and Computer Related Things with Slight Detour to Some Other Things Tue, 08 Jun 2010 12:14:10 +0000 en hourly 1 http://wordpress.org/?v=abc Menggunakan Google Fonts http://harrymahardhika.com/menggunakan-google-fonts/ http://harrymahardhika.com/menggunakan-google-fonts/#comments Tue, 08 Jun 2010 11:32:36 +0000 harrymahardhika http://harrymahardhika.com/?p=485 Beberapa waktu lalu Google meluncurkan layanan barunya yaitu Font Directory dan Font API. Dengan diluncurkannya layanan tersebut berarti pengguna bisa menggunakan beragam font secara legal tanpa harus menginstall font tersebut di sistem. Ada 18 fonts baik serif, sans-serif, script dan fixed-width yang disediakan (dan akan bertambah) dengan lisensi open source.

Bagi saya pribadi, saya terkadang bosan dengan tampilan web yang fontnya begitu-begitu saja. Kalau ingin bereksperimen menggunakan typeface yang tidak umum, belum tentu di mesin lain font tersebut terinstall. Belum lagi mencari fallback-font yang serupa demi konsistensi tampilan. Jika menggunakan layanan seperti Typekit, sudah pasti saya belum kuat membayar dan belum mau dipusingkan dengan tagihannya :D .

Setelah baca-baca, ternyata tidak sulit untuk menggunakannya. Ada 3 cara untuk menggunakan Google Font.

  1. Dengan menggunakan tag <link>.
  2. Dengan menggunakan @import.
  3. Dengan menggunakan JavaScript WebFont Loader.

Menggunakan tag <link>

Cara ini sangat mudah, Anda hanya perlu menambahkan baris berikut di dalam tag <head> pada dokumen HTML Anda.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold">

Setelah itu definisikan font-family pada selector yang bersangkutan.

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold">
  <style>
    h1 {
      font-family: 'Droid Sans', serif;
      font-size: 48px;
    }
  </style>
</head>
<body>
  <h1>Hello World!!</h1>
</body>
</html>

Menggunakan @import

Cara ini pada dasar mirip dengan penggunaan tag <link> diatas, hanya saja pemanggilan font dilakukan di dalam file CSS. Tambahkan baris berikut pada file CSS Anda.

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);

Setelah itu definisikan font-family pada selector yang bersangkutan seperti biasa. Perlu diingat bahwa penggunaan @import wajib diletakkan pada bagian awal dari file CSS sebelum pendefinisian style untuk selector.

Menggunakan JavaScript WebFont Loader

Untuk yang satu ini agak ribet dan memusingkan. Pada saat menulis post ini saya juga sedang berusaha keras untuk memahaminya. Jika Anda betul-betul tertarik dan penasaran silahkan baca di sini :P .

Well, that’s it. Untuk baca-baca silahkan menuju ke sini dan ke situ.

]]> http://harrymahardhika.com/menggunakan-google-fonts/feed/ 0 Setup ApacheMySQLPHP + PHPMyAdmin di Ubuntu http://harrymahardhika.com/setup-apache-mysql-php-phpmyadmin-di-ubuntu/ http://harrymahardhika.com/setup-apache-mysql-php-phpmyadmin-di-ubuntu/#comments Fri, 07 May 2010 12:35:43 +0000 harrymahardhika http://harrymahardhika.com/?p=453 Sejak pertama mengenal XAMPP saya selalu bergantung kepadanya untuk local web development. Namun, setelah beralih ke Ubuntu Lucid 64 bit maka saya tidak dapat lagi bergantung pada XAMPP karena tidak tersedianya versi 64 bit. Walaupun memungkinkan untuk menggunakan XAMPP 32 bit dengan ia32-libs, saya lebih memilih untuk menggunakan Apache2 dan teman-temannya. Alasan utamanya adalah untuk membiasakan diri dengan pola dan cara kerja hosted webserver. Let’s get started…

Install Apache2

sudo apt-get install apache2

Install PHP

sudo apt-get install php5 libapache2-mod-php5

Install MySQL
Pada tahap peng-install-an MySQL anda akan diminta untuk memasukkan password untuk root user MySQL.

sudo apt-get install mysql-server

Install PHPMyAdmin
Pada tahap ini anda akan diminta untuk memasukkan user dan password untuk PHPMyAdmin. Masukkan  user dan password yang Anda definisikan pada saat peng-install-an MySQL.

sudo apt-get install libapache2-mod-auth-mysql php5-mysql phpmyadmin

Agar phpMyAdmin dapat diakses melalui http://localhost/phpmyadmin, edit file /etc/apache2apache.conf.

sudo gedit /etc/apache2/apache2.conf

Tambahkan baris berikut pada bagian akhir file tersebut.

Include /etc/phpmyadmin/apache.conf

Jangan lupa untuk me-restart service Apache2 dan MySQL.

sudo /etc/ini.t/apache2 restart
sudo /etc/ini.t/mysql restart

That’s it! LAMP stack sudah terinstall sepenuhnya di Ubuntu.

Root Directory
Root directory dari web server berada di /var/www. Untuk mencobanya, buat sebuah file dengan kode php sederhana di root directory tersebut, misal: test.php.

<?php phpinfo();?>

Kemudian akses file tersebut melalui http://localhost/test.php.

Enabling mod_rewrite (Optional)
Jika Anda menggunakan .htaccess, maka Anda membutuhkan konfigurasi mod_rewrite. Pertama Anda harus meng-enable modul tersebut.

sudo a2enmod rewrite

Kemudian edit file /etc/apache2/sites-enabled/000-default.

sudo gedit /etc/apache2/sites-enabled/000-default

Perhatikan konfigurasi AllowOverride none, ubah konfigurasi tersebut menjadi AllowOverride all.

<Directory />
  Options FollowSymLinks
  AllowOverride all
</Directory>
<Directory /var/www/>
  Options Indexes FollowSymLinks MultiViews
  AllowOverride all
  Order allow,deny
  allow from all
</Directory>

Jangan lupa untuk kembali me-restart service Apache2 dan MySQL.

]]> http://harrymahardhika.com/setup-apache-mysql-php-phpmyadmin-di-ubuntu/feed/ 3 Validatious 2.0: Validasi Form dengan Javascript http://harrymahardhika.com/validatious-2-0-validasi-form-dengan-javascript/ http://harrymahardhika.com/validatious-2-0-validasi-form-dengan-javascript/#comments Wed, 04 Nov 2009 20:06:55 +0000 harrymahardhika http://harrymahardhika.com/?p=437 Salah satu elemen penting yang seringkali ditemui dalam membangun aplikasi web adalah form. Elemen ini digunakan sebagai antarmuka untuk memasukkan data-data yang nantinya akan disimpan di dalam database. Satu hal yang tidak dapat dilepaskan dari form ini adalah validasi.

Validatious 2.0 adalah library JavaScript yang dapat membantu anda dalam melakukan validasi secara unobtrusive. Validatious 2.0 tidak tergantung pada library JavaScript tertentu (standalone) dan dapat dengan mudah digunakan. Selain menawarkan kemudahan penggunaan dan kustomisasi, Validatious 2.0 juga memungkinkan untuk digunakan berbagai web browser seperti IE6+, Firefox 2.0+, Opera 9.5+, Safari 3.0+ dan Chrome.

Library JavaScript besutan Christian Johansens juga mendukung penggunaan multi-bahasa. Validatious 2.0  ditawarkan dengan lisensi BSD . Untuk demo silahkan menuju kesini dan kesitu. :P

]]> http://harrymahardhika.com/validatious-2-0-validasi-form-dengan-javascript/feed/ 0