Mobile CMS

Das zukünftige CMS ContentLion soll von Haus für mobile Geräte ausgestattet sein. Genau darum werden wir uns in diesem Artikel kümmern. Wir werden als erstes mobile Geräte erkennen und dann dementsprechend einen mobilen Skin einblenden.

Bereits im November haber ich ein mobiles Skin für unser CMS erstellt (http://forum.stevieswebsite.de/eigenes-cms-f12/mobiles-cms-t46.html). Heute werden ich den Code dafür veröffentlichen und das ganze ins CMS einbauen.

Fangen wir an mit dem Quellcode des Skins. Als erstes musst Du natürlich einen neuen Skin-Ordner anlegen: /system/skins/mobile.

Ich habe im Skin das Hauptmenü nur auf der Startseite eingeblendet. Auf allen Unterseiten ist das lokale Menü und ein Link zur Startseite.

Datei /system/skins/mobile/index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml/"xml:lang="de">
  <head>
    <?PHP
      sys::includeHeader();
    ?>
  </head>
  <body style="padding:3%">
        <h1 style="font-size:90%"><?PHP echo sys::getTitle(); ?></h1>
        <?PHP
          if(!$_GET['include']){
          sys::displayGlobalMenu("<ol>","</ol>","<li>"," </li>",
                                 "globalmenu");
          }
          else{
            echo "<ol><li><a href="/">Startseite</a></li>";
          }
        ?>
        <?PHP
          sys::displayLocalMenu("","</ol>","<li>","</li>",
                                "localmenu");
        ?>
        <div id="content">
          <?PHP
            sys::includeContent();
          ?>
        </div>
  </body>
</html>

Wie ihr seht habe ich mich nur auf das wesentliche konzentriert – Denn das ist das wichtige im mobilen Web.

Kommen wir nun zum wichtigsten Schritt: Das erkennen der mobilen Geräte. Dafür habe ich die neue Klasse /system/classes/mobile.php erstellt. Diese beinhaltet mehrere Methoden die den Browser überprüfen (dank technischen Problemen ohne Syntax-Highlighting und Zeilenumbrüchen):

<?PHP class Mobile{ public function isMobileDevice(){ $res = false; $res = self::isMobileAppleBrowser(); if(!$res) $res = self::isOperaMini(); if(!$res) $res = self::doesBrowserContainMobileKeywords(); return $res; } public function isMobileAppleBrowser(){ return eregi('apple',$_SERVER['HTTP_USER_AGENT'])&&eregi('mobile',$_SERVER['HTTP_USER_AGENT']); } public function isOperaMini(){ return eregi('opera mini',$_SERVER['HTTP_USER_AGENT']); } public function doesBrowserContainMobileKeywords(){ return ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'text/vnd.wap.wml')>0) or (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0)) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']))) or in_array(strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4)),array('acs-'=>'acs-', 'alav'=>'alav', 'alca'=>'alca', 'amoi'=>'amoi', 'audi'=>'audi', 'aste'=>'aste', 'avan'=>'avan', 'benq'=>'benq', 'bird'=>'bird', 'blac'=>'blac', 'blaz'=>'blaz', 'brew'=>'brew', 'cell'=>'cell', 'cldc'=>'cldc', 'cmd-'=>'cmd-', 'dang'=>'dang', 'doco'=>'doco', 'eric'=>'eric', 'hipt'=>'hipt', 'inno'=>'inno', 'ipaq'=>'ipaq', 'java'=>'java', 'jigs'=>'jigs', 'kddi'=>'kddi', 'keji'=>'keji', 'leno'=>'leno', 'lg-c'=>'lg-c', 'lg-d'=>'lg-d', 'lg-g'=>'lg-g', 'lge-'=>'lge-', 'maui'=>'maui', 'maxo'=>'maxo', 'midp'=>'midp', 'mits'=>'mits', 'mmef'=>'mmef', 'mobi'=>'mobi', 'mot-'=>'mot-', 'moto'=>'moto', 'mwbp'=>'mwbp', 'nec-'=>'nec-', 'newt'=>'newt', 'noki'=>'noki', 'opwv'=>'opwv', 'palm'=>'palm', 'pana'=>'pana', 'pant'=>'pant', 'pdxg'=>'pdxg', 'phil'=>'phil', 'play'=>'play', 'pluc'=>'pluc', 'port'=>'port', 'prox'=>'prox', 'qtek'=>'qtek', 'qwap'=>'qwap', 'sage'=>'sage', 'sams'=>'sams', 'sany'=>'sany', 'sch-'=>'sch-', 'sec-'=>'sec-', 'send'=>'send', 'seri'=>'seri', 'sgh-'=>'sgh-', 'shar'=>'shar', 'sie-'=>'sie-', 'siem'=>'siem', 'smal'=>'smal', 'smar'=>'smar', 'sony'=>'sony', 'sph-'=>'sph-', 'symb'=>'symb', 't-mo'=>'t-mo', 'teli'=>'teli', 'tim-'=>'tim-', 'tosh'=>'tosh', 'treo'=>'treo', 'tsm-'=>'tsm-', 'upg1'=>'upg1', 'upsi'=>'upsi', 'vk-v'=>'vk-v', 'voda'=>'voda', 'wap-'=>'wap-', 'wapa'=>'wapa', 'wapi'=>'wapi', 'wapp'=>'wapp', 'wapr'=>'wapr', 'webc'=>'webc', 'winw'=>'winw', 'winw'=>'winw', 'xda-'=>'xda-')); } } ?>

Weiter geht’s mit der Datei /system/classes/skincontroller.php. Hier müssen wir die Methode getCurrentSkinName bearbeiten und die Methode getCurrentMobileSkinId erstellen:

  function getCurrentMobileSkinId(){
    return getSetting("selectedmobileskin");
  }

  function getCurrentSkinName(){
    if(Mobile::isMobileDevice()){
      $res = $GLOBALS['db']->ReadField("SELECT name FROM {'dbprefix'}skins WHERE id = '".SkinController::getCurrentMobileSkinId()."'");
    }
    else{
      $res = $GLOBALS['db']->ReadField("SELECT name FROM {'dbprefix'}skins WHERE id = '".SkinController::getCurrentSkinId()."'");
    }
    if($res){
      return $res;
    }
    else{
      return "default";
    }
  }

Als aufmerksame Leser habt ihr bestimmt bemerkt, dass es einen neuen Setting gibt! In diesem wird der mobile Skin gespeichert. Außerdem müssen wir in der skins-Tabelle den mobilen Skin hinzufügen. Das geht so:

INSERT INTO `cms_settings` ( `property` , `value` , `activated` , `description` , `type` )
VALUES (
'selectedmobileskin', '1', '1', 'Mobiler Skin', 'skinselector'
);

INSERT INTO `cms_skins` VALUES (4, 'mobile');

Nun gibt es noch einen Bug im Skinselector: Es ist derzeit nur möglich einen Skinselector gleichzeitig anzuzeigen. Darum kümmern wir uns aber im nächsten Beitrag.

Am besten wäre es natürlich, wenn ihr das ganze alle mit euren Handys einmal testen könnt. So können wir nämlich sehen, bei welchen Modellen es nicht funktioniert. Wer mit seinem Handy nicht ins Netz kann / nicht will kann das ganze mal im Opera Mini Simulator testen.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Mobile CMS

Über uns

Cookie-Einstellungen