Weboltalt az iPhonera!

iPhone és iPad kompatibilis nézet készítése gyakorlatilag bármely php+mysql alapú
honlaphoz bloghoz.

Mire van szükség?
OS X számítógépre és telepített iPhone SDK-ra, pontosabban ennek a Dashcode komponensére.
Mielőtt belekezdenél, nézd meg, nincs -e esetleg a tartalomkezelő rendszeredhez már meglévő ilyen megoldás. Az egyik legnépszerűbb blogmotorhoz, a WordPresshez például rendelkezésre áll a WPtouch theme plugin, ami teljesen ingyenes, ezt tudom javasolni.Első lépés:
Dashcode (legegyszerűbben a jobb felső SpotLight segítségével találod meg), ez első indítás alklmával fel is adja a lehetőséget, hogy templatek közül válaszunk. Válasszuk a Web Applications - Browser templatet.

Második lépés:
Szabjuk testre. A fejlécben a 'Browser' és a 'Back' szöveget cseréljük ki, nézzük át az 'Application Attributes' oldalt és csináljunk egy ikont, amit a 'WebClip icon' oldalon adjunk hozzá.

Harmadik lépés:
A 'Share' oldalon a 'Save to Disk' opcióval mentsük el, majd töltsük fel az állományokat a kedvenc FTP kliensünkel a yourdomain.com/mobile helyre pédául. A /mobile könyvtárat nekünk kell létrehozni. Ha jók voltunk, akkor ezek után a céleszközökön már be kell jönnie egy csomag mintaadatnak.

Negyedik lépés:
A /mobile/main.js nevezetű fájlt nevezzük át /mobile/main.php-ra, és chmod 755-öljük, ha a szerver így kívánja. A /mobile /index.html-ben keressük meg az egykori main.js-re való hivatkozást, és azt is írjuk át main.php-ra.

Ötödik lépés:
Kicsit elkanyarodunk a témától: szükség lesz a mysql adatbázisunkra. Keressük meg benne a táblát (pl.: phpmyadminban), amely a nekünk kellő bejegyzéseket tartalmazza. A tábla nevében valószínűleg valami content, vagy articles, vagy hasonló utal erre. Három mező (oszlop) kell nekünk: a cím, a dátum, és a szöveg. Ezek neveit, és a mysql hozzádérési információkat (szerver, adatbázis, felhasználónév, jelszó, táblanév, és a 3 mező) jegyezzük fel.

Hatodik lépés:
Nyissuk meg szerkesztésre a /mobile/main.php-t. Keressünk meg azt a sort, hogy:
detailDescription.innerHTML = valami, és azt a valamit cseréljük ki:
"this._park.detail;"-re (Nem tudom milyen megfontolásból tért itt el a logikától az Apple
programja).

Hetedik lépés
A fájl végén vannak mintaadatok, egy javascript tömbben (var parks = [ ... ];). Itt láthatjátok a mintaadatokat. Ezt a rész kell átírni az alábbi módon:

var parks = [
<?php
$link = mysql_connect("dbhost", "dbuser", "dbpass"); // Felvesszük a kapcsolatot az
adatbáziskiszolgálóval
if (!$link) {
die('Database Error: ' . mysql_error());
}
mysql_select_db ("dbname",$link); // Kiválasztjuk az adatbázist
$query = "SELECT * FROM `tablanev`"; // Adott esetben sorbarendezhető valami
elsődeleg kulcs alapján: ORDER BY `id` DESC
$result = mysql_query($query) or die('Database Error: ' . mysql_error()); // Lekérdezünk
while($row = mysql_fetch_array($result)){ // Bejárjuk a táblát

$text = str_replace("'","\"",$row['text']); // A szimpla aposztrófokat kicseréljük duplára, mert gondot okozna.

$title = str_replace("'","\"",$row['title']); // Hasonló módon itt is.

$date = date("y/m/d G:i", strtotime($row['date'])); // Unix időből emberi időt faragunk.

echo "{ name: '"; echo $title; echo "', location: '"; echo $date; echo "', detail: '"; echo $text; echo "' },\n"; // Átadjuk a javascript tömbnek az adatokat.
}
mysql_close($link); // Lezárjuk a kapcsolatot
?>
];

A megfelelő helyekre ebben kell beilleszteni az előbb feljegyzett infomációkat. Mentsük el a fájlt, és próbáljuk ki a frissítést a céleszközön. Ha valami nem okés, akkor a Mobile Safariban nagyon jó JS debugger van, amit a Settings - Safari - Debug Console-nál kapcsolhatunk be. Majdnem készen vagyunk!

Nyolcadik lépés:
Ismertessük fel a rendszerrel a böngészőnket. Ne is kelljen a mobil felhasználóknak tudni a /mobile helyről. Ehhez keressük meg a tartalomkezelőnk /index.php -ját. Mindjárt az elejére, a <?php sor után új sorba írjuk be:

if((strlen(strstr($_SERVER['HTTP_USER_AGENT'],"iPhone"))>0) ||
(strlen(strstr($_SERVER['HTTP_USER_AGENT'],"iPad"))>0)){
header("Location: http://yourdomain.com/mobile/"); // Értelem szerűen ide kell kitölteni e helyes címet.
}

Ez a böngésző azonosító sztringjében keresi az iPhone és iPad subsztringeket.
Egyébként az iPhone böngészőé valahogy így néz ki:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Persze verziótól függően.

Nagyjából ennyi volt a nagy tudomány, amit közkincsé szerettem volna tenni. Várom a
véleményeket, észrevételeket, megjegyzéseket.

Sperl Viktor