30/12/2014

TeknikMembuatWebsiteKompatibeldenganMobileDevice(Part2)BlogARIJULIANTO

TeknikMembuatWebsiteKompatibel
denganMobileDevice(Part2)
OlehAriJulianto|pada30Desember2014jam02:21|6komentar|Dibaca5.263kali
Baru sempet lagi nih bikin posting, mingguminggu kemaren gak sempet buat lanjutin postingan
mengenaitrikwebsitekompatiblemobiledevice.Sekarangsayaakankembalimencobamelanjutkan
bahasannyayangtertunda
Dipostingsebelumnya,sayasudahmembeberkanbeberaparahasiauntukmendeteksiperangkatyang
digunakan, apakah berupa mobile ataukah PC. Dan pada kesempatan ini saya akan mencoba
meluangkanwaktubuattementemensemuauntukmemberikanrahasiamobilewebyangtelahsaya
janjikanitu
Di bahasan sebelumnya telah disebutkan bahwa triknya adalah menggunakan variabel global
$_SERVER['HTTP_USER_AGENT'].Stringsampelsampelnyapuntelahsayaberikantermasukkode
untukmendeteksipengunjungnyaitumenggunakanmediaapa,ponsel,smartphoneatauPCbiasa.
Kalokitamempunyaiwebsiteyangkompatibaelmobiledevice,makaada2pilihanyangharustemen
temenpilih.Halinidimaksudkankarenamasihbanyakwebsiteyangmediaaksesnyaharusselaludi
PC,padahalkalokitamelihatperkembanganteknologiyangnamanyaaksesinternetsudahsangatlah
mudah dan biayanyapun relatif tak terlalu mahal. Seperti saya misalnya, hanya bermodalkan Nokia
6120Classic,bisabrowsingsepuasnyauntukinternetan.SoalISP?Lahsekarangkansemuaprovider
pulsasudahmemberikanfasilitasinternet,adajugayangngasihhargamurahbangetbahkangratisan
Oya konsep pembuatan website yang dimulai dari nol ada beberapa dua, dua konsep paling umum
adalah:
1. Membagifilehalamanmenjadibeberapafile(header.php,sidebar.php,footer.phpdanfilefile
kontentelahsayabahasdisini).Konsepinimerupakankonsepfilemenu,yaknisatumenu
utamabisadibuatpadasatufile.Contohnya:punyamenu"Belajar"makakitabuatfile
belajar.phpdimanadidalamnyadilakukanincludeuntukheader,sidebar,danfooternya.
Konsepinibanyakyangmenggunakannya.Facebookjugamenggunakankonsepini.
Kelebihannyaadalahmudahdalampengelolaankarenanamafilemewakilinamamenuutama,
ketikaakanmelakukanupdatedesainkanaterasalebihmudahdanleluasa,resourceserveryang
digunakanpunrelatifnormalkarenarequestbebanditumpuolehfilefileberbeda,adapun
kekurangannyajikamenuutamanyabanyakmakaperlucukupbanyakfilejuga.
2. Membuatfiletemplatetersendirimisalnyauntukhalamankeseluruhannyamedia.phpnantidi
setiapmenumelakukanincludefile.Konsepinisayasebutsebagaikonsepquerystringkarena
untuksetiapmenunyaditentukansesuaidenganquerystring.Contohnya:punyamenu"Belajar"
makakitamelakukanpemanggilanhalamandenganmelakukanrequestmedia.php?
menu=belajar.Kelebihankonsepiniadalahsimpelsehinggabanyakdugunakanpadablogblog
jugacms.Adapunkelemahannyaadalahupdatedesaintertujukesatuhalamansehinggadesain
websecarakeseluruhannyahanyasatudesain,tidakbisadibuatberanekaragam,resourceserver
yangdigunakanpunrelatifberatkarenaprosesnyatertujupadasatufile.
3. Namunsudahbanyakpulayangmenggabungkankeduakonsepini,sepertihalnyasaya
Nahkembalike2haltadi.2Pilihanyangsayamaksudkanituadalah:
http://blog.arijulianto.com/2013/04/teknik_website_kompatibel_mobile_device2.html

1/4

30/12/2014

TeknikMembuatWebsiteKompatibeldenganMobileDevice(Part2)BlogARIJULIANTO

1.RedirectkeDomainKhususuntukTampilanMobileatauSmartphone
Cara ini adalah cara yang sudah umum namun kendala yang saya temui beberapa diantaranya
kebingungan mendeteksi media yang dipakai untuk membuka website tersebut ketika di akses di
domainutama(www).Untukkasusdisinisayaakanmemberikancontohyangsudahtidakasingbuat
kita, Facebook. www.facebook.com adalah sebuah domain yang aksesiliasinya dapat dilakukan
melalui PC atau media berukuran layar besar lain. Sudah tau kan kalo tementemen membuka
www.facebook.com dari HP apa yang terjadi? Ya benar, facebook mengalihkan kita ke situs versi
selulernya,yaknim.facebook.com.Nahsayaakanmencobaberbagimengenaicararedirectini.
Sebelumnya mungkin diantara kita ada yang bertanyatanya kenapa harus di redirect? Jawabannya
bisaberanekaragam,salahsatunyaagardalampengelolaanwebnyanantisangadmintidakkerepotan
ketika, misalnya ketika ingin melakukan editing file. Baiklah, kita akan masuk ke bahasannya.
Sebagai langkah pertama kita harus menggunakan script yang sudah saya tuliskan di postingan
sebelumnya. Kemudian siapkan domain khusus untuk web versi mobile, misalnya buat saja sub
domainm.domainanda.com.
Agartidakmengganggudesainwebkitayangudahjadi,buatsajadifileberbeda,misalnyabuatfile
dengannamacek_device.phplalulakukanincludedipalingatasfileatauletakandifileheader.php
sepertipadacontohberikut

<?php
include"config/connect_db.php"
include"config/class.php":
include"config/function.php"
include"cek_device.php"
?>

Contohisifilecek_device.php

<?php
$is_mobile=
preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elain
e|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge|maemo|meego.+mobile|m
idp|mmp|netfront|operam(ob|in)i|palm(os)?
|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.
(browser|link)|vodafone|wap|windows(ce|phone)|xda|xiino/i',$useragent)
if($is_mobile){
header("location:http://m.domainanda.com")
exit
}
?>

preg_matchadalahscriptphpuntukmencarikecocokanstringsesuaiformat,lihatinfolengkapnyadi
http://blog.arijulianto.com/2013/04/teknik_website_kompatibel_mobile_device2.html

2/4

30/12/2014

TeknikMembuatWebsiteKompatibeldenganMobileDevice(Part2)BlogARIJULIANTO

dokumentasi resmi php. di script tersebut bila bila $user_agent ditemukan kecocokan maka akan di
redirectkesubdomainm.domainanda.commenggunakanperintahheader("location:fileatauurl").
2.MultipelTemplateFile
Cara kedua ini adalah akan sangat terasa efekti bila kita membuat website menggunakan konsep
pertama seperti telah saya sebutka di atas (konsep file menu). Mengapa? karena bila kita
menggunakankonseppertamakitahanyamenyediakan2filesajayakniheaderdanfooter,selanjutnya
tinggalmainkantrikcsssaja
Baiklah,sebagaibahanpraktikkitacontohkandenganmembuatwebsiteyangterdiridari2halaman,
homepage (index.php) dan menu Belajar (belajar.php) tentunya dengan pendukung file header.php
jugafooter.php.
Sebagaibahancontohsupayatidakterlalubanyakscriptsayaakancobamenggunakansampelscript
yangpernahsayabikinditambahfilebelajar.php
1.header.php(lihatphpcode)
2.footer.php(lihatphpcode)
3.sidebar.php(lihatphpcode)
4.index.php(lihatphpcode)
5.belajar.php(lihat)
Adapunisifilebelajar.phpsepertiberikut

<?phpinclude"header.php"?>
<h1>MediaBelajar</h1>
<p>Iniadalahhalamanmediabelajarbersama,disiniAndabisabelajar
beberapabahasapemrogramanwebyangmeliputiPHP,HTML,CSSdan
Javascript</p>
<p>SilahkanpilihsatuyanginginAndapelajaripadalinkdibawahini:
</p>
<ol>
<li>PHP</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<?phpinclude"footer.php"?>

ContohdiatasadalahcontohscriptphpstandaruntukwebsiteyangaksesnyauntukdiPC.Bilakita
ingin satu domain tapi otomatis switch template maka seperti yang saya sebutkan tadi, hanya
membutuhkan2file(sidebargakperlu),yakniheader.phpdanfooter.php.
Dalamhalinisayacobapraktikkandenganpemberianprefiks"mobile_"padafileheaderdanfooter
barumenjadimobile_header.phpdanmobile_footer.php
Berikutadalahfilenya
1.mobile_header.php(lihatphpcode)
2.mobile_footer.php(lihatphpcode)
http://blog.arijulianto.com/2013/04/teknik_website_kompatibel_mobile_device2.html

3/4

30/12/2014

TeknikMembuatWebsiteKompatibeldenganMobileDevice(Part2)BlogARIJULIANTO

Bilasemuafileyangdiperlukantelahsiap,sekarangsaatnyamenerapkanscriptdeteksiponsel.Script
deteksi tersebut dapat Anda simpan didalam file function yang menghasilkan nilai TRUE atau
FALSE,misalnyasepertiberikut

<?php
functionis_mobile(){
$agent=$_SERVER['HTTP_USER_AGENT']
$match=
preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elain
e|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge|maemo|meego.+mobile|m
idp|mmp|netfront|operam(ob|in)i|palm(os)?
|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.
(browser|link)|vodafone|wap|windows(ce|phone)|xda|xiino/i',$useragent)
if($match)
returnTRUE
else
returnFALSE
}
?>

Kalo fungsi tersebut sudah siap, tinggal beralih ke file header.php dan footer.php. Kenapa harus di
header.php dan footer.php? Jawabannya adalah supaya tidak merubah banyak script dan dapat
digunakanditemplatePCjugaMobiledengnsatufileyangsama.

http://blog.arijulianto.com/2013/04/teknik_website_kompatibel_mobile_device2.html

4/4