Script Deteksi Resolusi Layar Monitor

Posted By: Al-k

Script Deteksi Resolusi Layar Monitor

18-02-2009 | 09:47:02 | Halaman Ini dibaca 248 kali




Sekian lamaaa.... aku menunggu... untuk kedatanganmuuu… :D~ Itu kata bang Ridho Rhoma di lagu yang judulnya Menunggu.:D~. Mohon maaf, lagi-lagi penulis terlambat untuk mempublish artikel terbaru. Seperti biasa, alasan penulis adalah karena banyaknya kesibukan yang merupakan tuntutan kehidupan, penulis juga manusia. :D Mohon maaf.
Ya, baru-baru ini penulis mendapatkan sebuah kasus, seorang staff pada sebuah instansi bertanya kepada penulis, bagaimana caranya mencocokan tampilan website dengan resolusi layar monitor user. Tampilan website yang dibuka menggunakan PDA, Handphone, laptop, maupun PC itu berbeda satu sama lain. Bagaimana membuat tampilan website yang dibuka menggunakan handphone atau mobile tidak selebar ketika seorang user membukanya dengan menggunakan PC, ataupun laptop? Ya semua itu akan dibahas disini. Penulis coba jelaskan serinci mungkin.
Dalam tutorial php kali ini penulis akan memberikan sebuah contoh kasus, yakni tampilan website yang dibuka dengan laptop beresolusi 1280x800 px, berbeda dengan tampilan website ketika dibuka dengan menggunakan PC bersolusi 1024x768 px. Tampilan website yang dibuka dengan laptop beresolusi 1280x800 px sedikit lebih lebar, menyesuaikan resolusi yang ada.

Berikut adalah tampilan website ketika dibuka dengan Laptop beresolusi 1280x800 px.


Dan tampilan website ketika dibuka dengan PC beresolusi 1024x768 px.


Tampilan website yang dibuka dengan laptop beresolusi 1280x800 px sedikit lebih lebar diakibatkan dari script deteksi resolusi layar monitor.

Ya, berikut adalah source code inti dari script deteksi resolusi layar monitor :

session_start();

if (isset($_REQUEST['r']))
{
header("location: res.php");
}

echo "";

if(!isset($_SESSION['lebarlayar']))
{
echo ">";

if(isset($_GET['width']) && isset($_GET['Height']))
{
$_SESSION['lebarlayar'] = $_GET['width'];
$_SESSION['tinggilayar'] = $_GET['Height'];
}
}


else if (isset($_SESSION['lebarlayar']) && isset($_SESSION['tinggilayar']))
{
if ( $_SESSION['lebarlayar'] == 1024 && $_SESSION['tinggilayar'] == 768 )
{
echo "";
}

else if ( $_SESSION['lebarlayar'] == 1280 && $_SESSION['tinggilayar'] == 800 )
{
echo "";
}
}

else
{
echo "";
}

?>

Sebelum penulis jelaskan baris demi baris source code di atas, perlu diketahui cara kerja script ini adalah sebagai berikut :
Script ini menggunakan fasilitas yang dimiliki oleh javascript dalam mengecek resolusi browser, disini sebetulnya script deteksi resolusi layar monitor ini tidak secara langsung mengecek screen resolution milik sistem operasi yang ada, melainkan script deteksi resolusi layar monitor ini memanfaatkan fasilitas dari java script. Fasilitas tersebut adalah screen.width, dan screen.height. Fasilitas ini dimanfaatkan dengan cara meredirect browser menuju satu url dimana didalam url tersebut terdapat isi dari nilai screen.width.

Syntax javascriptnya seperti ini :
document.location=\"$PHP_SELF?r=1&width=\"+screen.width+\"&Height=\"+screen.height;

maka, hasil dari urlnya akan menjadi seperti ini
http://localhost/index.php?r=1&width=1024&Height=768;

kemudian, nilai dari resolusi layar tersebut diambil dan dijadikan ke dalam variable berikut :
$_GET['width'] dan $_GET['height']

Setelah itu variable global $_GET tersebut diregistrasikan sebagai session untuk dapat diakses diseluruh halaman. Penulis sarankan anda mengimplementasikannya dengan menggunakan cookie, karena session memiliki keterbatasan waktu, defaultnya hanya 15 menit, bergantung dari konfigurasi php.ini masing webhosting, berbeda halnya jika anda memiliki otoritas penuh untuk merubah php.ini seperti pada localhost. Dengan menggunakan cookie anda dapat mensetting waktu deteksi resolusi layar monitor jadi lebih lama, bahkan anda dapat menyetelnya sangat lama sekali. Namun, dalam tutorial kali ini, penulis hanya menjelaskan implementasi deteksi resolusi layar monitor menggunakan session saja....

Perhatikan barisan source code berikut :

Jika session yang menangani lebar layar belum di registrasikan ...
if(!isset($_SESSION['lebarlayar']))
{

maka lakukan redirect browser si user menuju url yang didalamnya telah terdapat 2 buah variable yang nilai kedua variable itu telah di isi screen.width dan screen.height
echo ">";

Statement intinya sebetulnya hanya :
document.location=\"$PHP_SELF?r=1&width=\"+screen.width+\"&Height=\"+screen.height;

yang jika dijalankan dilocalhost, maka akan menghasilkan :
http://localhost/index.php?r=1&width=1024&Height=768;

kemudian ambil nilai ke dua variable dalam url tersebut menggunakan $_GET.
if(isset($_GET['width']) && isset($_GET['Height']))
{

Registrasikan variable-variable tersebut sebagai session agar dapat diakses di seluruh halaman website (di sini anda dapat menggunakan cookie)
$_SESSION['lebarlayar'] = $_GET['width'];
$_SESSION['tinggilayar'] = $_GET['Height'];
}
}


Kemudian perhatikan kembali barisan berikutnya :

Jika session dari lebarlayar, dan tinggilayar telah diregistrasikan,
else if (isset($_SESSION['lebarlayar']) && isset($_SESSION['tinggilayar']))
{

Dan jika lebarlayar yang dihasilkan oleh screenwidth itu adalah 1024, dan tinggilayar yang dihasilkan oleh screen.height itu adalah 768,
if ( $_SESSION['lebarlayar'] == 1024 && $_SESSION['tinggilayar'] == 768 )
{

Jadikan ./templates/template.1024x768.css sebagai tampilannya,
echo "";
}

Begitu juga jika lebarlayar yang dihasilkan oleh screenwidth itu adalah 1280px, dan tinggilayar yang dihasilkan oleh screen.height itu adalah 800px,
else if ( $_SESSION['lebarlayar'] == 1280 && $_SESSION['tinggilayar'] == 800 )
{

Maka jadikan ./templates/template.1280x800.css sebagai tampilannya,
echo "";
}


Tentunya banyak sekali perbedaan, anda bukan hanya dapat mengganti templatenya saja melainkan keseluruhan tampilan website, baik itu bentuk form, ataupun banner, dalam bentuk css yang table less maupun table sekalipun. Dan terakhir lihat di paling atas source code tersebut :

Sebetulnya barisan code ini hanya berfungsi untuk menangani redirect browser, agar url website disetiap halaman tidak kotor. Karena script deteksi resolusi layar monitor ini akan selalu memiliki url seperti :
http://localhost/index.php?r=1&width=1024&Height=768;

Oleh karena itu untuk penanganannya adalah menggunakan barisan code dibawah ini :
if (isset($_REQUEST['r']))
{
header("location: res.php");
}

Ya, penulis rasa cukup jelas ya. Selanjutnya penulis akan bawakan penggunaan cookie dalam script deteksi resolusi layar monitor dan tentunya implementasinya dibuat agak sedikit kompleks. Source code tersebut dapat didownload di sini ...
download script deteksi resolusi layar monitor

Untuk melihat hasil dari script tersebut ...
http://www.kmmpt.info/zineilmuwebsite/tutorial/deteksi/res-detect.php

Selamat mencicipi. :D

Greetz : b_scorpio, abuzahra, peterpanz, kandar, phii_, syahrilrohman, ivan, dr.emi, safril, nadjwa, xfreecode, minang-media, safril, Lapak-online Team!