Category Archives: How-To

Belakang Tabir SBPA: Konfigurasi Pelayan

Pagi 8 Disember 2011 itu hari jangan cakap la dia punya debar. Pukul 6 pagi saja dah 7K pengunjung. Kemudian pukul 8 naik ke 23K pengunjung. Peh..naik risau brader. Tapi bila gua tengok graf pelayan masih lagi steady. Gua dah start senyum-senyum dah.. Pukul 11 pagi merupa maksimum concurrent. 32K pengunjung!. Ini mengikut kiraan sejam. Belum tengok lagi seminit punya concurrent. Gua sedang mengumpul data untuk kiraan terperinci hit mengikut saat dan minit pulak.

Gua ada buat artikel sebelum ni berkenaan pemilihan Nginx untuk pelayan SBPA dan membuat beberapa percubaan. Kali ni gua nak kongsikan berkenaan rangkaian, pelayan dan konfigurasi dalam proses menyiapkan laman SBPA. Harap-harap dapat membantu pembangun lain membuat konfigurasi dalam menghadapi pengunjung yang ramai. Continue reading Belakang Tabir SBPA: Konfigurasi Pelayan

Formatting Text in Google+

When writing message, some time you want to mark or highlight some words or sentences in you message body by keeping them in bold text format.

G+ Formatting Text

Google+ allows you to bold, strikeout, or italicize text within your new post or older posts. Don’t worry because G+ have features to allow us to edit older post.

Create new post or navigate your older post by click “j” or “k”   on the G+ stream to edit your message with some popular text format by enclosing the text in some special characters. Here is in details:

  • Bold: Write anything between *.
  • Italics Write: anything between _.
  • Strikethrough: Write anything between .

NOTE: You can also apply more than one formatting to a text for example if you will write like this: *-_Hariadi.Org_-*  and become like this Hariadi.Org

Formatting text in G+

Don’t forget to Hariadi.Org in your circles. Thanks!.

Try Google Hidden Navigation Menu

Just edit your Google cookie and use some values that trigger the new UI. If you’re not in the US and you’re using a different Google domain, replace “.google.com” with your domain in the code (for example: “.google.com.my” in Malaysia).

NOTE: This only works for the English interface, so you many need to adjust the language in the preferences page.

Step 1: Select Browser (Chrome, Firefox, Safari or Internet Explorer 8+)

Open new tab: www.google.com

Step 2: Open JavaScript Console

Open JavaScript Console depend on your browser.

  • Chrome’s JavaScript console (Ctrl+Shift+J)
  • Firefox’s Web Console (Ctrl+Shift+K)
  • Safari’s Web Inspector (refer how to do that)
  • IE’s Developer Tools (press F12 and select the “console” tab)

Step 3: Google cookie

Paste the following code

document.cookie="PREF=ID=03fd476a699d6487:U=88e8716486ff1e5d:FF=0:LD=en:CR=2:TM=1322688084:LM=1322688085:S=McEsyvcXKMiVfGds; path=/; domain=.google.com";window.location.reload();

Close the console. That’s It. Happy try!

Change Google Map Maker Profile Picture

Getting sick of “blue ghost” photo on your Google Maps Profile? You can change that photo (and other info in your profile) on Google Maps Profile by going to https://maps.google.com/maps/me?authuser=0 at any time. Click on “Edit your Places nickname and photo” menu to change username or photo.

If you make no changes, Google will NOT link to your Google profile, and will show a little “blue ghost” in place of a picture.

Setup Nginx, Apache (XAMPP) On Same Server

Overview:

  1. Nginx port 80
  2. Apache port 8080
  3. Nginx and Apache share root directory (F:\xampp\htdocs)
  4. Nginx catch request as front-end and proxy dynamic content (PHP) to Apache which will be running in the back-end.
  5. Install WordPress, Joomla and Drupal for development on localhost and work perfectly.
  6. Setup on Windows XP.

Things you need:

  1. nginx/Windows-1.1.5
  2. XAMPP 1.7.7

The Setups:

  1. Install XAMPP 1.7.7. For the purpose of this article, I put on F:\xampp
  2. Open F:\xampp\apache\conf\httpd.conf and change default listen to 8080:
    Listen 8080
  3. Save and start Apache from XAMPP Control Panel Application.
  4. Unzip the nginx-1.1.5 to XAMPP directory and rename to nginx:
    F:\xampp\nginx
  5. Open F:\xampp\nginx\conf\nginx.conf and follow this setting:
    worker_processes  1;
    error_log  logs/error.log;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include		mime.types;
    	include    	proxy.conf;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;
    
        gzip  on;
    	gzip_comp_level   5;
    	gzip_http_version 1.0;
    	gzip_min_length   0;
    	gzip_types        text/plain text/html text/css image/x-icon application/x-javascript;
    	gzip_vary         on;
    
        server {
            listen       80;
            server_name  localhost;
    
    		location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm)$
    		{
    			#root   html;
    			root   F:/xampp/htdocs;
    			expires max;
    		}
    		#set default location
            location / {
                proxy_pass         http://127.0.0.1:8080/;
            }
    		#Adding location for phpmyadmin
    		location /phpmyadmin {
    			proxy_pass         http://127.0.0.1:8080/phpmyadmin;
    			allow 127.0.0.1;
    			deny all;
    		}
    
            error_page  404              /404.html;
    
            # redirect server error pages to the static page /50x.html
            #
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    	#Optional. If you have a subdomain to serves static files so we have not set up a proxy_pass.
    	server {
    		listen 80;
    		server_name s0.jpa.gov.my s1.jpa.gov.my; # Alternately: _
    
    		error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
    
    		access_log logs/static.access.log;
    		error_log logs/static.error.log;
    
    		index index.html;
    
    		location / {
    			expires     max;
    			root   F:/xampp/htdocs;
    		}
    	}
    }
    
  6. Create the file proxy.conf in the F:\xampp\nginx\conf\ folder (same directory with nginx.conf) with the following contents:
    proxy_redirect          off;
    proxy_set_header        Host            $host;
    proxy_set_header        X-Real-IP       $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    client_max_body_size    10m;
    client_body_buffer_size 128k;
    client_header_buffer_size 64k;
    proxy_connect_timeout   90;
    proxy_send_timeout      90;
    proxy_read_timeout      90;
    proxy_buffer_size   16k;
    proxy_buffers       32   16k;
    proxy_busy_buffers_size 64k;
  7. Double click Nginx.exe on F:\xampp\nginx folder to start Nginx server.

Go to browser and enter http://localhost/. if you see XAMPP default home and don’t see any errors that is a good start. You can delete subdomain part on ingix.conf if you like. This method I used to setup POC for http://www.jpa.gov.my web server with Joomla, WordPress and PhpMyAdmin already installed and worl perfectly!. Hope this can help and if you need any support just leave a comment and we’ll try and help you.

Installing and Using Smartphone SDK Add-ons

Smartphone SDK add-ons like Samsung, Sony Ericsson, HTC or Motorola, when added to the Android™ SDK, allows you to run and debug your applications on an emulated smartphone. Note that while the device image that the add-on presents does not necessarily reflect the look of the actual device, from a functional standpoint it should be a fairly faithful emulation of the actual handset.

Prerequisites

Before installing the add-on, the Android SDK must be installed. The Android SDK can be downloaded from Android Developers.

Android SDK installation instruction is found at: http://developer.android.com/sdk/installing.html

Download add-ons

Here list of Samsung, Sony Ericsson, HTC and Motorola add-ons for SDK. If you found other smartphone add-ons for Android SDK just put to the comment below.

  1. Samsung – http://innovator.samsungmobile.com/down/cnts/toolSDK.list.do?platformId=1
  2. Sony Ericsson – http://developer.sonyericsson.com/wportal/devworld/search-downloads/docstools/sdk?cc=gb&lc=en
  3. HTC – http://developer.htc.com/index.html
  4. Motorola – http://developer.motorola.com/docstools/tools/

Installing the add-on

To install the smartphone SDK add-on, simply download it, extracting the add-on files, and copy the resulting directory into the “add-ons” directory of the Android SDK that you are using.

Note: If add-ons for Android SDK or Eclipse™ were running when you copied the SDK add-on, you will need to restart it for the add-on to be recognized by your development environment.

For this tutorial, I installing Sony Ericsson Xperia X10 SDK Add-on.

Creating an AVD

In order to launch the emulator using the add-on, an AVD must be created.

To create an AVD using the command line, do the following (you may need to be within the Android SDK’s “tools” directory):

  1. Before creating an AVD, the ID number that specifies the add-ons for the Android™ SDK must be found. To check if add-ons exist:
    android target list

    List of add-ons

    In the above case, 6 is the ID number for the add-on. If multiple add-ons have been installed, more
    targets are shown in the list.

  2. To create an AVD for add-ons for the Android™ SDK, the right ID number from the list must be chosen. Create an AVD by specifying the ID number of the add-on, in this example, ID = 6. Command for creating AVD:
    android create avd -n  -t 
    android create avd -n X10 -t 6

    In this example, the AVD is named “X10“. The AVD can be given any name.

To create it from within Android AVD Manage.

  1. Select Android AVD Manager from the Window menu. The Android Virtual Devices Manager dialog appears.
  2. Enter “X10” (or whatever name you want to give the new AVD) in the Name field.
  3. From the Target list, select the target named for the “X10 (Sony Ericsson Mobile Communications) – API Level 4”.
  4. If you want the emulated device to have an SD card, in the SDCard field either specify the path and filename to a file containing an existing SD card image, or specify a size (such as 64M) to create a new, empty SD card image. Leave this field blank if the device isn’t to have an SD card.
  5. From the Skin list, select default skin named for X10 target device.
  6. Click Create AVD.
  7. Click OOK to close the dialog.

Launching the emulator

If you start a Run or Debug configuration that specifies a SDK add-on AVD as the target device, the AVD will be automatically launched for you. If you want to start the AVD without deploying an application to it, you can do so either from the command line. From the command line, the following command will start the AVD named “X10”:

emulator -avd X10

Or, for Sony Erricson Add-ons:

emulator @X10

The word after “@” is the name of the created AVD, “X10” in this example.  To start from Android SDK and AVD Manager SDK select the AVD from within the Device Management view and click Start.

Of course it you set a hardware like GPS available on the emulator the running application will detect that it is available, but this ‘virtual’ GPS naturally can not provide a GPS coordinate on its own. On the next tutorial, I write about how to set location on emulator.

Disable Joomla System Session

Agak-agak pengunjung dah mencapai 35K – 50K sehari sejam tu sakit juga kalau guna Joomla System Session dekat pengguna guest. Ada baiknya disablekan Joomla System Session dekat front end. Mudah saja.

Buka fail /index.php dan cari kod ini:

$mainframe =& JFactory::getApplication('site');

Tukarkan line kod di atas dengan yang ini:

$user =& JFactory::getUser();
if ($user->guest) {
  $mainframe =& JFactory::getApplication('site',array('session'=>false));
}

Orait. Kod baru di atas menutup semua pengendalian session di front end bagi pengguna yang TIDAK berdaftar. Yang berdaftar boleh main guli macam biasa. Lu orang boleh handler session ke mekanisme cache seperti APC, Memcache. Gua sarankan APC.

HTML5: Forms

Bila buat forms yang bagus, banyak menggunakan bantuan CSS dan Javascript. Dengan HTML5, banyak jenis attributes dan ciri ciri baru yang membantu dan memudahkan proses pembangunan forms. Antaranya:

  • <input type=”text” placeholder=”teks”> – Paparan teks (warna kelabu) akan hilang bila anda klik/fokus pada input.
  • <input type=”text” autofocus> – Automatik fokus pada input apabila page selesai onload. Boolean. Peh, payah benar nak ekplen dengan simpel.
  • <input type=”text” required> – field mesti ada value sebelum submit. Boolean.
  • <input type=”text” autocomplete=”off”> – semua field lepas ni secara defaultnya “on”, atas sebab keselamatan.