Lokomobile : Template Mobile Lokomedia dengan Detektor dari Google Code


Testing lokomobile pada tiga merk hp yang berbeda

Melihat tampilan lokomedia di hp pasti ribet. Ukuran displai hp yang kecil membuat tampilan website menjadi sangat kecil dan harus memainkan fungsi zoom untuk bisa membaca tulisannya. Kebanyakan cms yang sudah tenar seperti joomla, wordpress, blogspot dll sudah menyediakan versi mobile bila diakses dari mobile device. Mungkin juga kita sudah populer dengan facebook versi mobile, atau juga portal berita yang menawarkan versi mobilenya bagi pengguna gadget berlayar mini. Sebut saja m.detik.com, wap.vivanews.com, dan banyak lagi situs berita lain yang menyediakan versi mobile. Pada umumnya mereka menggunakan subdomain khusus untuk menampilkan versi ini. Bisa dengan menggunakan nama mobile didepan nama domainnya, m, atau wap. Kalau membuat subdomain saja sebenarnya hanya perkara mudah, tinggal buat subfolder kemudian ditautkan ke subdomain yang kita buat. Permasalahannya sekarang adalah bagaimana sebuah website dapat mendeteksi browser yang mengaksesnya. Apakah yang mengakses itu adalah dekstop ataukah mobile, apakah menggunakan browser mozilla firefox ataukah opera.

Fungsi  $_SERVER['HTTP_USER_AGENT'] yang biasanya dipakai untuk mendeteksi browser pengakses website. Bagaimana cara menggunakannya ? Memang pusing jika pemula sudah ditantang untuk mengimplementasikan fungsi tersebut untuk mendeteksi apakah yang mengakses web kita adalah perangkat berjenis dekstop ataukah berjenis mobile. Sebenarnya google telah berbaik hati membuatkan script pendeteksi mobile yang mereka rilis disitus  http://code.google.com/p/php-mobile-detect/. Disana dijelaskan juga bagaimana cara penggunaanya. Sederhananya jika kita mempunyai situs versi dekstop dan versi mobile yang akan ditampilkan kepada user kita tinggal membuat pengkondisian dengan code google tersebut. Sebagai contoh perhatikan script berikut — tentunya setelah kita mendownload Mobile_Detect.php dan menguploadnya ke web kita– :

include "Mobile_Detect.php";
$detect = new Mobile_Detect();

if ($detect->isMobile()) {
    kode versi mobile
}else{
    kode versi dekstop
}

Mudahkan ? Sekarang kita akan menempatkan kode di atas ke cms lokomedia kita. Sebelumnya saya sudah membuat template lokomedia versi mobile yang diambil dari situs wap.vivanews.com sebagai templatenya (download disini). Pada cms lokomedia, pertama kali yang diakses adalah file index.php yang kemudian mengarahkannya ke media.php. Didalam file media.php inilah kita harus meletakkan Mobile_Detect.php dari google code. Supaya lebih jelas perhatikan script berikut :

include "Mobile_Detect.php";
$detect = new Mobile_Detect();

if ($detect->isMobile()) {
    $pilih_template=mysql_query("SELECT * FROM templates WHERE id_templates=’9′");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";
}else{
    $pilih_template=mysql_query ("SELECT * FROM templates WHERE aktif='Y'");
    $f=mysql_fetch_array($pilih_template);
    include "$f[folder]/template.php";
}

Id_templates pada script diatas adalah 9 karena template mobile yang saya upload mempunyai id = 9. Saya memilih template sebagai sasaran eksekusi setelah mobile terdeteksi karena hal ini akan memudahkan kita dalam membuat link seo. Link seo yang sudah disertakan dalam versi default masih bisa kita gunakan sehingga kita tidak repot-repot membuat file .htaccess baru. Jika kita menggunakan subdomain dengan membuat folder sebagai sasaran eksekusi maka kita harus memulai membangun web dari awal. Kemudian juga ketika kita men-share link web kita ke media sosial pasti link antara web mobile dan web dekstop akan berbeda sekali. Sehingga akan terjadi kesimpangsiuran disana. Sebagai gambaran coba cek http://lokomedia.cauza.web.id melalui dekstop dan mobile. Lihat perbedaannya.

Advertisements

28 thoughts on “Lokomobile : Template Mobile Lokomedia dengan Detektor dari Google Code

    1. file indexnya tetap yang bawaan lokomedia. Yang diedit cuma file media.php seperti script diatas.
      Panggil Mobile_Detect.php dengan metode include dst….

    1. yang dipake emulator apa mas. coba lihat di kode googlenya apakah jenis emulator yang digunakan terdaftar disana. Saya juga belum coba di emulator. Tapi di beberapa HP saya sudah coba. Kendalanya cuma di Opera Mini belum bisa muncul

    1. Betul banget mas, saya menerapkan itu karena terinspirasi dari m.detik.com, kalau diakses dari mobile gak bisa lihat versi dekstopnya… Tapi sebenernya tergantung selera mau letakinnya dimana. Bisa juga di folder template juga kok, jadi satu template dwi versi.

  1. sebelumnya saya sudah coba tanpa menggunakan template mobile. Ternyata berhasil. Setelah saya terapkan di templatenya sampai sekarang belum berhasil juga. Nanti dicoba periksa lagi dimana kesalahannya. Sebenernya ada cara lain untuk memasukkan mobile detect ini. Yaitu langsung dimasukkan di template yang bersangkutan.

      1. sudah diupload ulang gan, namun hasilnya tetap saja gk bisa diakses..
        apakah ada yang perlu diedit dari file tersebut, yg isi aslinya seperti ini:

        RewriteEngine on

        RewriteRule ^home$ media.php?module=home [L]
        RewriteRule ^galeri-(.*)\.html$ zoom.php?id=$1 [L]
        RewriteRule ^album-([0-9]+)-(.*)\.html$ media.php?module=detailalbum&id=$1 [L]
        RewriteRule ^berita-(.*)-(.*)\.html$ media.php?module=detailberita&id=$1 [L]
        RewriteRule ^agenda-(.*)\.html$ media.php?module=detailagenda&id=$1 [L]
        RewriteRule ^statis-(.*)\.html$ media.php?module=halamanstatis&id=$1 [L]
        RewriteRule ^hasil-pencarian\.html$ media.php?module=hasilcari&id=$1 [L]
        RewriteRule ^indeks-berita\.html$ media.php?module=indeksberita&id=$1 [L]
        RewriteRule ^hasil-poling\.html$ media.php?module=hasilpoling&id=$1 [L]
        RewriteRule ^lihat-poling\.html$ media.php?module=lihatpoling&id=$1 [L]
        RewriteRule ^profil-kami\.html$ media.php?module=profilkami&id=$1 [L]
        RewriteRule ^hubungi-kami\.html$ media.php?module=hubungikami&id=$1 [L]
        RewriteRule ^hubungi-aksi\.html$ media.php?module=hubungiaksi&id=$1 [L]
        RewriteRule ^semua-berita\.html$ media.php?module=semuaberita&id=$1 [L]
        RewriteRule ^halberita-(.*)\.html$ media.php?module=semuaberita&halberita=$1 [L]
        RewriteRule ^kategori-([0-9]+)-(.*)\.html$ media.php?module=detailkategori&id=$1 [L]
        RewriteRule ^halkategori-([0-9]+)-(.*)\.html$ media.php?module=detailkategori&id=$1&halkategori=$2 [L]
        RewriteRule ^semua-agenda\.html$ media.php?module=semuaagenda&id=$1 [L]
        RewriteRule ^halagenda-(.*)\.html$ media.php?module=semuaagenda&halagenda=$1 [L]
        RewriteRule ^semua-download\.html$ media.php?module=semuadownload&id=$1 [L]
        RewriteRule ^haldownload-(.*)\.html$ media.php?module=semuadownload&haldownload=$1 [L]
        RewriteRule ^semua-album\.html$ media.php?module=semuaalbum&id=$1 [L]
        RewriteRule ^halgaleri-([0-9]+)-(.*)\.html$ media.php?module=detailalbum&id=$1&halgaleri=$2 [L]
        RewriteRule ^halkomentar-(.*)-([0-9]+)\.html$ media.php?module=detailberita&id=$1&halkomentar=$2 [L]

        Options All -Indexes

    1. Errornya gimana mas? Mungkin mas dodo blm upload templete yang sesuai dg I’d template di script…

      1. untuk template di i’d yg saya punya udah pas ms, tapi erornya di baris ini ms:
        $f=mysql_fetch_array($pilih_template);
        include “$f[folder]/template.php”;
        Mohon pencerahan dunk masalahnya baru belajar php

  2. mas cauza..saya kok buat versi mobile gak detect kalo kita pake add on user agent firefox, kalo templatenya saya aktifkan dua2nya..tetep dia masuknya yg versi dekstop, padahal id templatenya sudah benar..salahnya dimana ya mas ??

  3. mas cauza.
    kok aku sering banget gagal posting berita
    httaccess nya juga dah tak upload berkali kali
    ku pake lokomedia 1.6.1
    hosting di idhostinger
    mohon pencerahanya mas

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.