Migrasi Tampilan dari Desktop ke Mobile pada CodeIgniter
TI-STMIKNH.COM - Hay agan-agan semua, bagaimana kabar anda hari ini? Alhamdullah luar biasa Allahuakabar, sebelum kita melangkah pada pembahasan yang akan kita share pada kali ini, ada baikny kita memahami terlebih dahulu maksud dari judul yang penulis buat diatas.
Migrasi secara bahasa arti nya perpindahan penduduk dari suatu negara lain ke dalam suatu Negara ex(orang Prancis masuk ke Indonesia), berarti secara umum bisa kita artikan perpindahan. Desktop merupakan salah satu mode yang ditampilkan pada resolusi layar menggunakan komputer desktop resolusi 1024x768 px atau lebih. Sedang Mobile adalah mode yang kita akses melalui gadget (smartphone/tablet/dll).
Tujuan dari pembahasan kali ini adalah bagaimana menampilkan tampilan website yang ketika diakses melalui gadget (mobile device) bisa menampilkan tampilan yang berbeda dari versi desktopnya, yaitu menampilkan data-data sesuai dengan layar mobile device, seperti itulah kira-kira
Setelah di uraikan mungkin agan-agan paham apa yg dimaksud oleh penulis,. Yak anda benar,. Secara umum bisa di artikan perpindahan bentuk tampilan dari desktop ke mobile,. Belum paham juga, ane kasih contoh ni silahkan agan-agan buka wartakampus.com (website penulis) pada PC/Laptop kemudian buka lagi pada Mobile (android atau Apple) he he,. Liat beda nya,. Bedakan,.? Nah sekarang mulai muncul di benak agan bagaimana tuh cara buat nya? Kenapa bisa begitu? Ketika ada pertanyaan tentu ada jawaban,. Oke langsung kita langsung ke pembahasan, semoga membantu rekan-rekan yang membutuhkan.
Berikut Sorce Code beserta langkah-langkahnya:
1. Buat Controller home.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home extends CI_Controller {
public function __construct ()
{
parent::__construct();
$this->load->helper("html");
function detect_mobile()
{
if(preg_match('/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|panasonic|philips|phone|playbook|sagem|sharp|sie-|silk|smartphone|sony|symbian|t-mobile|telus|up.browser|up.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i', $_SERVER['HTTP_USER_AGENT']))
return true;
else
return false;
}
}
function index(){
$mobile = detect_mobile();
if($mobile === true)
{
$data["title"]="Mobile";
$this->load->view("v_mobile",$data);
}else{
$data["title"]="Dekstop";
$this->load->view("v_dekstop",$data);
}
}
}
?>
2. Buat Dua Buah View
- Versi Destop
<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
<h1>Ini View Dekstop</h1>
</body>
</html>
- Versi Mobile
<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
<h1>Ini View Mobile</h1>
</body>
</html>
3. Selesai deh Tinggal Di eksekusi
Untuk uji coba versi mobile pada Browser Komputer Desktop dibutuhkan plugin User-Agent Switcher, ini merupakan plugin yang berfungsi sebagai emulator mobile.
Jika ada masalah ketika menjalankan tutorial ini, penulis siap membantu 24 jam, cukup komentar di akhir artikel.
Berikut Source Code Pembahasan Migrasi Tampilan dari Desktop ke Mobile pada CodeIgniter
