TCP/IP hálózaton keresztül szolgáltatunk tartalmat
§ Statikus vagy dinamikus weboldalakat jelenítünk meg. § A tartalmat web szerver szolgálja ki. A szerver több féle lehet, a §
§ § §
lényeg, hogy a HTTP protokollt teljesíteni tudja. A webszolgáltatás a szabvány szerint platform- és böngésző független (jó esetben). A tartalmat WEB böngésző programmal jelenítjük meg. Statikus tartalom – A megjelenítendő tartalom időben nem változik Dinamikus tartalom – A megjelenítendő különböző feltételektől függően változhat. A változást befolyásoló legfontosabb tényezők ▪ ▪ ▪ ▪ ▪ ▪
A böngésző típusa A felhasználó személye A megjelenítendő tartalom formája A fejlesztő szándéka Időpont És még sokan mások…
¡ ¡ ¡ ¡
A HTTP protokollon keresztül kommunikál a szerver és a kliens. Kérés-válasz típusú kommunikáció. Nem állapottartó a kapcsolat a szerver és kliens között. Szabványokon alapul. A legfontosabb webes szabványok ¡ ¡
HTTP protokoll A weboldalak meghatározó szabványai
¡ ¡ ¡ ¡
HTML – Az oldalak tartalmát írja le CSS – Az oldalak megjelenését írja le XML – a HTTP ennek az általános tartalomleíró szabványnak a szűkítése Javascript – Kliens oldali programozási nyelv
¡ ¡ ¡ ¡ ¡
1. A megrendelő megrendeli a fejlesztőtől az alkalmazást 2. A fejlesztő és a megrendelő pontosítják az igényeket 3. A fejlesztő készít egy tervezetet 4. A fejlesztő elkészíti a fejlesztés egy állomását 5. A fejlesztő teszt környezetben kipróbálja az alkalmazást § 5.a. Teszteli a fejlesztést, amíg az alkalmazás hibamentessé
nem válik – Alfa teszt
6. A megrendelő teszteli a fejlesztést – Béta teszt 7. Hiba esetén a tesztelés eredményei alapján módosul a fejlesztés => Vissza a 2., 3. vagy a 4. ponthoz ¡ 8. Feltölti az éles területre az eredményt ¡ 9. Az üzemeltető vagy a fejlesztő utógondozza az alkalmazást ¡ ¡
Fejlesztői környezet § Web szerver § Adatbázis szerver § Böngésző (több féle) § A HTML, CSS, JAVASCRIPT, JAVA, PHP, stb… forráskód szerkesztéséhez alkalmas program(ok) § Az adatbázis szerkesztéséhez, módosításához szükséges program § Grafikai szerkesztő program (png, gif, jpg) § Állandó internet kapcsolat § FTP kliens a webalkalmazás feltöltésére az éles szerverre
¡
Hasonlít az éles környezethez § Hasonló webszerver ▪ Hasonló pluginek, modulok stb… § Hasonló adatbázis szerver § Hasonló sávszélesség
¡
Statikus tartalmat megvalósító weboldal(ak) § Egy vagy több weboldal
¡
Dinamikus oldalakat megvalósító weboldalak § Saját fejlesztésű szerver (pl. PHP, Java servlet)
vagy kliens oldali (javascript, ajax, Flash, Java Applet) alkalmazás § Frameworkok használata § Tartalomkezelő (CMS = Content Management System) rendszerek használata
¡
A tartalmat általában valamilyen webszerkesztővel hozzuk össze
§ Tipikus: sablon oldal alapján készülő további statikus
oldalak alkotják
¡
Hátrány
§ A tartalom és a forma gyakran összekeveredik § Nehéz a forma utólagos módosítása § Nehéz karbantarthatóság
¡
Előny
§ Kezdeti gyors eredmények § Gyors alkalmazás létrehozása
¡ ¡ ¡ ¡
Saját kliens oldali és szerver oldali kód Sok munka, nem túl látványos eredménnyel A programozó ügyességétől, tapasztalatától függő kezelhetőség, karbantarthatóság, sebesség Előny § Speciális alkalmazások fejlesztésének lehetősége § Tanulási folyamat
¡
Hátrány
§ A szokásos webes feladatokat magunknak kell leprogramozni (Beléptetés,
adatbevitelek ellenőrzése, jogosultságkezelés, stb…) § Lassú eredmény § Gyakran a tartalom és a forma nem tud elkülönülni egymástól § Nehéz következetesnek maradni
Előre megírt programcsomagok A tipikus webes feladatokat végző kódok a csomag részei (beléptetés, captcha, listák generálása, adatbázis kapcsolat, stb…) ¡ Szinte mindig van szerver oldali és kliens oldali komponense ¡ Nem foglalkozik a megjelenítés módjával
¡ ¡
¡
Előnyük ¡ ¡
¡
Hátránya ¡ ¡ ¡
¡
Sok munkát megtakarít bonyolult fejlesztés esetén A fejlesztés sebessége sokkal jobb, mintha egyénileg programoznánk mindent Meg kell tanulni egy alkalmazás használatát Igazodni kell a framework által előírt felépítéshez Az alkalmazás futási sebessége a szerver oldali feldolgozás miatt lassabb
Tipikus frameworkok ¡ ¡ ¡
Zend Framework (szerver és kliens – PHP) http://framework.zend.com jQuery – kliens oldali, javascript alapú www.jquery.com FAT-Free-Framework (PHP könnyen tanulható) http://bcosca.github.com/fatfree/
¡ ¡ ¡
Előre megírt programcsomag, rengeteg, alapszolgáltatással A tartalom és a megjelenés elkülönül egymástól – skin Előny § § § §
¡
Hátrány § § §
¡
A fejlesztés sebessége gyors Nem kell vagy alig kell programozni Bővítő modulok léteznek, de nem garancia a megbízhatóság Skin-ek használata
Kötött a felhasználhatóság területe Viszonylag hosszú tanulási szakasz a profi megtanuláshoz Az alkalmazás lassabb, mint bármelyik korábbi módszer. Nagy az leterhelés (= overhead) a szerveren
Például § § § §
Joomla – Közkedvelt Drupal – Bonyolult, de nagyon jó Wordpress – Egyszerű, mint a faék e107
¡ ¡ ¡
Webáruház Blog motor Adatbázis adminisztrációs szoftver
¡
Szerver oldalon (leggyakrabban) § Windows rendszerek § Linux rendszerek § Macintosh rendszerek
¡
Fejlesztői, kliens oldalon
§ Windows rendszerek – a kezdők
leggyakrabban ezt használják § Linux rendszerek – profik gyakran ezt használják § Macintosh rendszerek – designerek ezt használják
¡
Apache 2.xx.xx § § § § §
minden operációs rendszeren létezik Moduláris, bővíthető Nem túl gyors Ingyenes Apache Tomcat ▪ Java Servlet fejlesztésekhez
¡
NGINX
§ Kissé ritkán használt, de szinte minden rendszeren működik § ingyenes
¡
IIS – Csak Windowsokon
§ A Windowsok része a WIN NT 4 óta § Win 2008 szerver => IIS7
¡
MYSQL § § § §
¡
PostgreSQL § § § §
¡
Ingyenes Sokféle operációs rendszeren fut Lassabb, bonyolultabb, mint a MYSQL, de jobb a teljesítménye A szerver oldalon jól programozható
MSSQL § § §
¡
Ingyenes Sokféle operációs rendszeren fut Gyors, ha myisam táblát használunk, lassabb az InnoDB táblák esetén A legelterjedtebb a webes világban
Csak Windowson fut Pénzbe kerül A szerver oldalon jól programozható
Oracle § § § § § §
Sokféle operációs rendszeren fut Pénzbe kerül (sokba) Nagy teljesítményű Rengeteg lehetőséggel rendelkezik Nagy adatbázisok esetén használható Innovatív
¡ ¡
Adobe DreamWeaver Microsoft
§ Microsoft Expression Web § Microsoft Sharepoint Designer § Microsoft Visual Studio
¡ ¡
¡
KompoZer További editorok: http://en.wikipedia.org/wiki/List_of_HTML_edit ors Megjegyzés § Képesek HTML, CSS, Javascript editálására
Netbeans IDE 7.2 * Zend Studio * Eclipse * PHPEdit Notepad+ Aptana További editorok: http://en.wikipedia.org/wiki/List_of_HTML_editors ¡ Megjegyzések ¡ ¡ ¡ ¡ ¡ ¡ ¡
§ A fenti editorok mindegyikével lehet PHP és Javascript,
HTML, CSS fájlokat editálni § A * jelzésű alkalmazások komplex fejlesztői környezetek
¡ ¡ ¡ ¡ ¡ ¡
MySQL – phpMyAdmin. Ingyenes, web alapú, törhető MSSQL – SQL Server Management Studio Oracle – SQL Developer PostgreSQL – pgAdmin A fentiekhez létezik egységes szerkezetű rendszer - fizetős SQL Manager család: http://www.sqlmanager.net/en/products/manag er
¡
XAMPP – Apache + MySql + PHP + phpMyAdmin + Mail Server § Általános PHP alapú website-ok fejlesztéséhez
¡
Acquia Drupal
§ Speciálisan Drupal 6 vagy Drupal 7 alapú fejlesztésekhez.
§ Általános PHP alapú website fejlesztés kiegészítve néhány
modullal § Xdebug – Ingyenes debuggolási lehetőség a PHP programok számára § sqlBuddy – MySQL adminisztráció § Webgrind – debug frontend xdebug-hoz
¡
WAMP - http://www.uwamp.com § Egy kattintásra cserélni lehet a PHP verziót!
¡
USBWebServer - www.usbwebserver.net § Akár pendrive-on is lehet futtatni egy komplett
fejlesztőrendszert
¡
Uniform Server - www.uniformserver.com § nem igénylő alkalmazáscsomag (AMP+Cron,
DtDNS, dbbackup)
¡
Z-WAMP - http://zwamp.sourceforge.net/ § Installálás nélküli WAMP szerver.
¡ ¡ ¡ ¡ ¡ ¡
RFC2616 A TCP/IP-re épülő szolgáltatás, a szerveren a default szolgáltatási portja: 80 Szokásos további címek: 81, 82, 83, 1080, 8080, 3128, stb… Kliens-szerver architektúra Kérés/Válasz protokoll Állapot nélküli protokoll
¡ ¡
A kliens parancssorába bekerül egy URL A kliens elküld egy kérést az URL címén várakozó WEB szerverhez § A kérés tulajdonképpen egy szerkezettel bíró szöveges fájl ▪ Van fejléce (Request header) ▪ Lehetnek azonosító: adat párok benne
¡
A szerver a beérkező kérés alapján megkeresi a fájlrendszerében a megadott útvonalon lévő fájlt és feldolgozza § Ha a kérés egy visszaküldendő fájl, akkor egy válasz fejléc (Response
header) után a fájl tartalmát együtt visszaküldi a kliensnek § Ha a kérés egy szerver oldalon futtatandó fájl, akkor a kérést átadja a futtatást végző szerver oldali motornak. A futás eredményeképpen a létrejövő tartalmat a válasz fejléccel együtt a motor átadja a szervernek, majd az visszaküldi a kliensnek
¡
http://[:port][<path>[?]]
§ http:// - http protokollt jelzi a böngészőnek – nem kötelező § § § §
default esetben https:// - titkosított http protokoll – kötelező, ha titkosított protokollt használunk - idomain név vagy IP cím - kötelező :port – nem kötelező, ha a 80-as portot használjuk <path> - nem kötelező, ha a szerver gyökérkönyvtárát használjuk ▪ Ha az útvonal vége nem fájl, akkor az adott könyvtár default fájlját szolgálja ki a szerver
§ ? - GET kérések esetén a paraméter éerétk
párokat jelenti – nem kötelező
¡ ¡ ¡ ¡
http://www.szily.hu – gyökérkönyvtárból a default fájl kiszolgálása http://www.szily.hu/owa - titkosított protokoll, az OWA könyvtárból a default fájlt szolgálja ki. http://www.szily.hu:8080 – A nem default portot hívja meg a program http://www.fzolee.hu/download/download.php? fname=./Webfejlesztes/01_webfejleszt%E9s_el melet.pdf – a megadott alkönyvtárból GET kéréssel hívok meg egy oldalt, amelynek az „fname” paramétere egy elérési útvonal
¡ ¡ ¡ ¡
Apache: index.html IIS: default.htm Minden szervernél lehet bővíteni a default fájltípusokat. Szokásos bővítések: § § § § §
Index.htm, PHP használata esetén: index.php, Python nyelv esetén: index.py Ruby esetén: index.rb Stb…
¡
Fejléc § A kérés típusa § URL § Egyéb paraméterek ▪ Az egyéb paramétereket általában a böngésző automatikusan csatolja a kérés fejlécéhez
¡
GET / HTTP/1.1
§ A kérés típusa (Metódusa= módszere), Verziószáma
User-Agent: Mozilla/4.0 (compatible;MSIE 6.0;Windows NT5.1 § A böngésző típusa
¡
Connection:Keep-Alive
§ Egy kapcsolatot több fájl átvitelére is használjon a szerver
¡
Cookie – A böngészőben letárolt max. 4 kb mennyiségű adat. Név=adat formában. Minden kéréskor a cookie tartalmát a böngésző hozzácsatolja a kérés fejlécéhez.
¡
A fenti képet a Firefox FireBug programjával készítettem
¡
A POST kérés a szokásos fejléceken kívül még tartalmazza a paraméter=érték párokat is a text fájlban. Az értékek „&” jellel vannak elválasztva
¡
HTTP/1.1 200 OK
¡
Date: Fri, 06 Sep 2010 08:39:05 GMT
§
A protokoll verziószám, státusz kódja - kötelező
§
Aktuális dátum
§
A szerver típusa
§
Utolsó módosítás időpontja
§
Egyedi azonosítás
§
Tartalom hossza
§
Mennyi ideig tart a nyitott kapcsolat szerver és kliens kközött
§
A kapcsolat keep-alive – lásd korábban
§
A kiküldött tartalom MIME típusa
§
Kiküldött cookie-k
§
A tartalom tartalom
¡
Server: Apache/2.1.2(Win32) PHP/5.1.15
¡
Last-Modified: Thu, 22 May2010 12:03:45 GMT
¡
ETag:"0-dc5-3eccbca1„
¡
Content-Length: 3525
¡
Keep-Alive: timeout=15, max=100
¡
Connection: Keep-Alive
¡
Content-Type: text/html
¡
Cookies
¡
…
¡ ¡
A válaszfejléc megelőzi a kiszolgált tartalmat. A fejléc adatai nem jelennek meg a böngészőben láthatóan, ugyanakkor vezérlik a böngésző viselkedését
1xx: információs kód 2xx: sikeres átvitel 200 OK 3xx: a böngésző átirányítása másik címre § 301 MovedPermanently ¡ 4xx: kliens hiba § 403 Forbidden – tiltott elérés – nincs elég joga a usernek § 404 NotFound – Nem találja a kérdéses fájlt ¡ 5xx: szerver hiba § 500 InternalServer Error – Belső hiba a szerveren § 503 Service Unavailable – egy szolgáltatás leállt a szervern és nem tudja kiszolgálni a kérést ¡ 505 HTTP Version Not Supported ¡ ¡ ¡ ¡
§ Az adott http változatot nem tudja kiszolgálni a szerver
¡ ¡ ¡ ¡ ¡ ¡
Host: a kérdéses szerver domain neve, IP címe If-Unmodified-Since: csak ha az adott dátum óta változott Referer: honnan történt a hivatkozás az erőforrásra User-Agent: böngésző típusa From: böngésző személy e-mail címe Accept-Encoding: Milyen kódolást fogad el
¡ ¡
Server: webszervertípusa, verziója Cache-Control: no-cache/no-store/max-age § az erőforrás cache-elési paraméterei
¡
Expires:
§ az erőforrás mikor évül el
¡
Content-Length, Content-Type § a válasz üzenet hossza és típusa
¡
Last-Modified:
§ az erőforrás utolsó módosításának dátuma
¡
¡ ¡
A Windowson kívül az operációs rendszerek nem ismerik a fájlnévben a „kiterjesztés” fogalmát, ezért a MIME típusok mondják el a böngészőnek, hogy milyen fajta adatot küld ki a szerver. Ennek alapján dönti el a böngésző, hogy értelmezze a kiküldött adatot Ha egy fájlnak nincsen MIME típusa, akkor azt letöltendőnek minősíti a legtöbb böngésző
¡
application/
- alkalmazások spéci fájljai
§ application/msword: Word dokumentum § application/octet-stream: futtatható program § application/zip: zip fájlok
§ video/mpeg: mpg, mpeg fájlok § video/x-msvideo: avi fájlok
¡ ¡
Web böngészés WEB szolgáltatások § Webáruházak telefonokra ▪ Google Market – Android Google play ▪ Iphone – App Store ▪ Microsoft – Windows Store
¡
Bújtatott szolgáltatások
§ Egy rendszerfelügyeleti vagy távoli elérési program a 80-as porton
kapcsolódik egy külső modulhoz. Pl: TeamViewer
¡
GET – URL része a paraméterlista § Bárki látja a böngészőben
¡
POST – a felhasználó elől eldugjuk § A Firebuggal megnézhetjük a tartalmát
¡
Kérések szerver oldali feldolgozása PHP segítségével § PHP: $_GET, $_POST globális tömbök. § Típus és tartalomellenőrzés után használható
csak fel a szerver oldali programban
¡ ¡ ¡ ¡ ¡ ¡
Hasolít a HTTP-hez 443-as TCP porton kommunikál a szerverrel a böngésző HTTPS:// …. SSL TLS titkosítás – jelenleg nem feltörhető A Webszerveren nyilvános kulcs igazolást (public key certificate), pl OPENSSL segítségével Öntanúsító igazolás § A böngészők nem fogadják el hitelesnek, mégis
használható
¡ ¡
¡ ¡ ¡
A webes tartalom nyilvános, bárki olvashatja Amit egyszer felteszünk a netre, az fent is marad, később is megtalálható, miután letöröltük a site-ot. A tartalom linkeken keresztül kapcsolódik más webes tartalmakhoz. Érdemes egy website-ot egy tartalomra kihegyezni A tartalom olyan legyen, ami érdekes a célközönségnek
¡
¡ ¡
A böngészők által használható betűtípusok korlátozottak – nem érdemes speciális betűtípust használni Nincs szóelválasztás, ezért a sorkizárt írásmód csúnya a keskeny oszlopok esetén Minden képernyőméret és felbontásra gondolni kell a designereknek
¡
A felhasználók fentről lefelé olvasnak
§ Ami nincsen a képernyő felső egyharmadában az már kevéssé
látszik
A felhasználók balról jobbra olvasnak (általában) A felhasználók átnézik az oldalt először és csak ha érdekes számukra, utána olvassák el a tartalmat ¡ Az olvasás átlagos ideje 300 szó esetén 38 sec. ¡ ¡
§ Képlet: az oldalon töltött idő = 25 + a szavak száma * 0,044
A hosszú oldalaknak csak a 20-50%-át olvassák el általában ¡ Az olvasás manapság információszerzést jelent ¡ A nagyobb betűméret, vastag betű, más színű szöveg ¡ A mozgó ábrák rontják az érthetőséget ¡
¡ ¡
Az információt legkönnyebben a keresőkön keresztül lehet megtalálni A keresők találatai közül menniyt néz meg a látogató § 1-10 - 90% § 10-100 - 9% § 100-tól - 1%
Következtetés: ¡ Ha olyan oldalt akarok készíteni, amelyet sokan látogatnak, akkor keresőre kell optimalizálni az oldalt ¡ SEO – Search Engine Optimalization
A megrendelőben felmerül az igény egy weboldalra Keres egy webfejlesztőt és megkéri a fejlesztésre A weboldalt megtervezi a webfejlesztő – interjúztatva a megrendelőt ¡ A fejlesztő elkészít egy vázlatot, amit a megrendelővel átnézet és pontosítják az igényeket ¡ A pontosított igények alapján fejlesztő módosítja a terveket, majd újra megbeszéli a megrendelővel az eredményt. ¡ A módosítások addig tartanak, amíg a megrendelőnél nem merül fel új igény vagy változat ¡ ¡ ¡
Egy felhasználó Több felhasználó jogosultsági szintekkel vagy mátrixxal
Kik lesznek a látogatók, milyen igényeik vannak az oldallal szemben? Mit szeretnénk bemutatni?
Melyek a kulcsfontosságú funkciók? Milyen visszajelzéseket várunk a látogatóktól?
Milyen irányban szeretnénk fejleszteni a szolgáltatást rövid és középtávon? Ki tartja karban az oldalt? A látogatók részt vesznek-e a tartalom előállításában? Milyen jogosultsági rendszerre lesz szükség?
Kell és ha igen, hol kell reklámozni az oldalt a neten? Szeretnénk-e látogatottsági statisztikát az oldalunkról? Fontos-e a SEO?
¡ ¡ ¡ ¡ ¡
Mekkora összeget szán a megrendelő az oldalra Mennyire fontos a biztonság? Saját domain, saját szerver, virtuális szerver? Mitől lesz friss a tartalom a weboldalon? Szükséges-e fejlesztőcsapat hosszú távon? § Általában egy weboldalt 2-4 évente érdemes
újratervezni, legalább a design-t.
¡
Heurisztikus megközelítési mód § Amennyit nem szégyell J § Ha nincs rászorulva, csak hobbiból dolgozik, akkor
alámehet az árnak – általában a túl alacsony ár alacsony minőséget is jelent
¡
Módszeres megközelítés
§ Megbecsülöm, hogy mennyi ideig tart a fejlesztés § Megnézem, hogy egy havi megélhetésem mennyibe kerül. § A munka mennyiségét összevetem a havi munkaórák
számával (egy hónap: 4,5 hét * 5 nap *8 óra = 180 óra).
▪ Pl: 360 óra munka, havi bruttó 300 eFt-ot akarok keresni, akkor 300 e Ft * 360/180 = 600 e Ft
¡
Döntsük el, hogy milyen oldalakat akarunk § § § § § § § § §
Kezdőoldal Bejelentkező oldal Kapcsolattartás Vendégkönyv Termékek Információk Oktatás Fotóalbum Stb…
¡ ¡ ¡
Alárendelt – fölérendelt Egymás mellérendelt oldalak Honnan hová jutunk
¡ ¡ ¡
Klasszikus 1,2,3 oszlopos elrendezés vagy formatervezési újítás Hol legyen a (ha kell egyáltalán) a logo, főcím, lábléc Hol legyen (ha kell egyáltalán) a menürendszer többféle menü, egy- vagy több szintű menü § Felső menü § Bal menü § Kenyérmorzsa (Breadcrumb) menü
▪ pl.Főmenü >> Fotoalbum >> Nyaralási képek
¡
Hol legyenek a „dobozok” és azoknak mi legyen a tartalma
¡
Célszerű lerajzolni az oldalak szerkezetét Logo
Főmenü Főoldal >> Képtár >> Nyári képek
Bal oldali oszlop menüve l
Aktuális tartalom
Reklá m doboz ok
Lábléc, impresszum
¡
Drótváz módszer – amikor kis dobozok jelzik az oldalakat
¡
Gyorsan fejleszthetünk viszonylag bonyolult alkalmazásokat § Átgondolt szerkezetű rendszer § Rengeteg előre megírt kód van benne § A tipikus helyzetekre ad megoldást § Biztonságos, tesztelt kód § Széles körű támogatás az alaprendszerhez § Skin támogatás
¡
Általános célú rendszerek § Több féle alkalmazásra használhatók
¡
Speciális rendszerek – kihegyezve néhány funkcióra § Blog motor § Webáruház § Rendelésnyilvántartó § Elektronikus újság
¡
Felhasználó-kezelés § § § §
¡
Új felhasználó Jelszó módosítás Felhasználó törlése Felhasználók csoportokba rendezése
Jogosultság kezelés
§ A felhasználóknak bizonyos fájlokhoz, beállításokhoz van
hozzáférésük § A jogosultság öröklődhet
¡
Beléptetés
§ Captcha § Ismételt hibás belépés után a felhasználó kitiltása
¡
Tartalom létrehozása § BLOG motor
▪ Rövid bejegyzések írása
§ Hozzászólások kezelése
▪ Meglévő tartalomhoz hozzászólás fűzése
§ Komplex tartalmak írása WYSIWYG módon § Fórum
¡ ¡
Fotó album Publikálás
§ RSS feed § Tartalom publikálásának és lejáratának kezelése automatikusan
¡
Űrlapok kezelése
§ Szavazások § Statisztikák előállítása a bevitt adatokon
¡ ¡
Tartalom konverzió – HTML => pdf Sablonok használata
¡ ¡ ¡ ¡ ¡
Meta adatok kezelése Taxonomia kezelés Keresés a tartalomban Archiválás Naplózás
Rendszer automatikus vagy félautomatikus frissítése Plug-in-ok, modulok létrehozásának lehetősége
¡ ¡ ¡ ¡ ¡ ¡
Tartalmak véletlenszerű (ciklikus megjelenítése) Tag-elés Thesaurus kezelése PHP vagy más forráskód beillesztése Saját lib-ek használata Komplex rendszerek kiszlgálása § Google analítics § Facebook § Flash
¡
A CMS rendszer használata Framework-ként
A CMS rendszerek általában keretet adnak a tartalom megjelenítéséhez ¡ A megjelenítés milyensége a SKIN ¡ Egy skin az alábbiakból állhat ¡
§ Sablon fájlok
▪ Leíró fájl – ez írja le, hogy a sablon milyen verziójú, szerző, stb… ▪ A sablonok tartalma lehet HTML kód és PHP kód vagy valamilyen sablon leíró nyelv kód. (pl. Smarty)
§ Képek § CSS fájlok § Javascript fájlok
¡ ¡
A sablonok az oldal megjelenítését határozzák meg A skin cseréje nem befolyásolja a tartalmat
Az egyik leggyorsabban fejlődő rendszer. Óriási nemzetközi és magyarországi tábora van – http://drupal.org , http://drupal.hu Moduláris – 5400 modul Smink – 406 ingyenes smink Több, mint 100 nyelvű fordítás Minőségbiztosított a core rendszer fejlesztése Rengeteg féle alkalmazás készíthető vele, nem csak CMS A különböző alkalmazások disztribúciókkal hozhatók létre a legkönnyebben - 511 disztribúció
¡
Használható háttér adatbázis szerverek § MySql § PostgreSQL § Microsoft SQL § SqLite § Oracle bizonyos mértékig támogatja
¡
Apache vagy IIS webszerver (más is lehet)
¡
Általános telepítés §
XAMP, WAMP telepítése (Setup » tovább » tovább típusú)
§
Adatbázis létrehozása a szerveren
§
Forrás letöltése ▪ ▪
§ §
A forrás bemásolása a wwwroot-ba Sites/default/settings.php létrehozása a default.setting.php-ból, majd módosítani
Böngészőből kell indítani a telepítést (install.php) Meg kell adni: User neve és jelszava, Site neve, az adatbázis neve, az adatbázishoz tartozó user
§
Fordítás letöltése és telepítése: ▪ ▪
§ §
¡
Címlap » Adminisztráció » Beállítások » Helyek és nyelvek » Nyelvek Címlap » Adminisztráció » Beállítások » Helyek és nyelvek » Felület fordítása » IMPORT
Disztribúcióként a teljes telepítőkészlet a rendszer része, plusz néhány alapvető plusz modul is. Varázsló szerű telepítés. Több site telepíthetősége egyszerre
- Alapértelmezett konfiguráció - A site-hoz tartozó fájlok helye - Egy modul egy könyvtárstruktúra - Egy smink egy könyvtárstruktúra - Egy site-egy könyvtárstruktúra
§
§
Alapértelmezett témák - Egy smink egy könyvtárstruktúra
Themes
¡
Biztonságos frissítési módszer - Ha frissítjük a rendszert, akkor a <sites> könyvtár tartalma változatlan marad mindig
§ A sites/all könyvtárba kerül minden modul és smink, amit
az összes site-hoz használni engedünk
¡
A módosításokat a rendszer automatikusan kezeli § Egy modul keresési útvonalai:
§ Egy smink keresési útvonala a fentihez hasonló § Ha egy modult vagy sminket beteszünk egy könyvtárba, a
következő futtatáskor a drupal automatikusan megtalálja és felveszi a telepíthető modulok/sminkek közé
¡
Egy core forráskód több site-ot is kiszolgálhat
¡
¡
A telepítés során a tábláknak lehet adni (célszerű adni) egy előtagot, pl: dr_. Ezzel az előtaggal fog rendelkezni minden tábla neve. Így lehet több Drupal-t is működtetni egy adatbázisból – más előtagot kell adni számukra. MYSQL-re való telepítéskor a táblák innoDB típusúak, azaz tranzakciót kezelik.
Felhasználókkal kapcsolatos táblák ¡ Users – A Drupal által kezelt felhasználók ¡ Users_roles – a felhasználókra vonatkozó jogosultsági csoportok ¡ Sessions – a bejelentkezett felhasználók munkameneteit tárolja ¡ Role – jogosultságok neveinek felsorolása ¡ Role_permission – a jogosultságok felsorolása ¡ Users_roles – a userek és a jogosultságok egymáshoz rendelése Tartalmak tárolásával kapcsolatos táblák ¡ Node – egy oldal fő adatait tárolja ¡ Node_type – tartalomtípusok listája ¡ Field_data_body – a node-ok body részét tartalmazza ¡ Field_config – a tartalmakhoz tartozó mezők leírásai ¡ Field_data_field_xxxx – különböző node-ok mezőihez tartozó tartalmakat tárol. ¡ Comment – kommenteket tároló adatok Egyéb rendszer táblák ¡ url_alias – a tartalmakhoz tartozó egyedi álnevek (pl. node/1 => fooldal) ¡ Languages – az oldalon használható nyelvek ¡ Variable – a drupal által tárolt változók értékei. ¡ Registry – a rendszerbe beregisztrált modulok alapadatai ¡ System - a rendszerben lévő modulok adatait tárolja
¡ ¡ ¡ ¡
nid – Node ID – egy tartalom egyedi azonosítója uid – User ID – a felhasználó tábla egyedi azonosítója vid – Views Id – Lekérdezések egyedi azonosítója sid – Session Id – munkamenet azonosító
¡ ¡ ¡ ¡
Letölteni a modul forrását a megfelelő verzióhoz innen http://drupal.org/project/modules sites/all/modules könyvtárba bemásolni kibontva a zip fájlból (vagy a megadott site-ba) Címlap >> Adminisztráció >> Modul listában a modul engedélyezése Ugyanitt az esetleges beállítások elvégzése a beállítások linken
Megjegyzések ¡ A felesleges modulokat ne telepítsünk, mert lassítja a rendszert. Elegendő ha kikapcsoljuk a modult, nem kell uninstallálni. ¡ Több ugyanolyan szerepű modult ne telepítsünk (pl. cron működtetése) ¡ Éles rendszerre csak végleges verziót telepítsünk, ne alfa vagy béta állapotúakat. ¡ Telepítés előtt készítsünk az adatbázisról biztonsági mentést éles szerveren – backup_migrate modullal
¡ ¡ ¡ ¡ ¡
¡ ¡
Töltsük le a Drupal.org felületről a frissítés kódját Készítsünk biztonsági másolatot az adatbázisról (pl. backup_migrate modullal) Készítsünk biztonsági másolatot a kódról. Kapcsoljuk Maintanence módba a drupal oldalt Írjuk felül a letöltött kóddal a drupal site-ot. Figyelem! A saját plusz moduljaink nem íródnak felül, a sites könyvtárban. A http://siteneve/update.php oldalt futtassuk le. Kapcsoljuk vissza a drupalt normál üzemmódba.
¡
Új nyelv hozzáadása § Címlap » Adminisztráció » Beállítások » Helyek és
nyelvek » Nyelv hozzáadása
¡ ¡
¡
Az idegen nyelvű fordítás letöltése innen http://localize.drupal.org/translate/languages/hu A fordítás feltöltése a Drupal site-ba Címlap » Adminisztráció » Beállítások » Helyek és nyelvek » Felület fordítása Több modulnak is létezik magyar nyelvű fordítása, amit szintén le lehet innen tölteni
A felület többnyelvűségét a language_switcher modullal lehet biztosítani ¡ A nyelvek megállapítása történhet
¡
§ Webcím alapján – http://localhost:8082/content/hu/fooldal § Munkamenet, vagy kérés ▪ Sessionban, ▪ Cookie ▪ Get metódussal átadva: http://localhost:8082/?language=hu
§ A felhasználó nyelvi beállítása § Böngésző nyelvi változata § Alapértelmezés
¡
A tartalmak idegen nyelvű változatát mindig el kell készíteni, az nem változik.
¡ ¡
Tetszőleges számú felhasználó Új felhasználó létrehozása három féle módon § Szabadon bárki § Szabadon bárki, de adminisztrátor moderálja § Csak adminisztrátor
¡ ¡ ¡ ¡ ¡ ¡
Új felhasználónál megerősítő email mehet Avatar megadása lehetséges (kis kép) Módosítás minden adat, kivéve a usernév Törlés – csak adminisztrátor A users tábla tartalmazza az adatokat A Users_roles tábla tartalmazza a userre vonatkozó elérési szabályokat
¡ ¡
Roles – Egy szerep. Roles_permission – Szerepek és jogok. § Minden szerephez hozzá lehet rendelni
jogosultságokat, melyik modullal, melyik tartalommal, melyik tartalomtípussal mit tehet a szerep
¡
User_roles – Minden userhez hozzá lehet rendelni szerepeket => ezáltal jogosultságokat is.
¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡
Block – tartalmak blokkos megjelenítése Blog – Blog lehetőség Book – Könyv jellegű tartalom tárolás Field – Tetszőleges tartalmú mezők megjelenítése az oldalon Forum – Fórum alkalmazás Locale – fordítható felülethez szükséges modul Menu – Menük létrehozásának lehetősége Node – Alapmodul. Kötelező Path – Aliasok használata Syslog – A rendszer logolni képes Update – A frissítést végzi User – felhasználók kezelését végzi
¡ ¡ ¡ ¡ ¡ ¡
Backup_migrate – Az adatbázis biztonsági mentése és visszaállítása Captcha – Képek használata a bejelentkezéshez Ckeditor – Wysiwyg szövegszerkesztő. Több féle létezik még, pl . TinyMCE Date – Dátumok könnyű kezelése Images – képkezelő Views – Tartalmak sokféle megjelenítését teszi lehetővé
További modulok letöltése: http://drupal.org/download
¡
Miért lehet rá szükség? § § § §
¡
Ha nem létezik megfelelő modul Nagyon speciális igény Egyedi fejlesztésű program Saját alkalmazás beágyazása Drupal oldalba
PHP kód futtatásának módja
§ PHP filter modul bekapcsolása § A node szerkesztése során a Szövegformátum: PHP code § A szövegben jelek közötti rész a PHP kód
lesz § A kódot a PHP eval() függvénye futtatja
Ebben az esetben nem érhetjük el a globális változókat sem és így a felhasználói jogosultságrendszert sem. Csak rövidebb kód esetén javasolt.
Ha az fz.php fájl tartalma az alábbi: "; echo "Szia hogy vagy"; echo "
"; phpinfo(); } ?> ¡
Hosszabb kód esetén tegyük külön fájl(ok)ba a kódot majd egy include és egy függvényhívás segítségével futtassuk.
¡
¡ ¡
A PHP kód elvileg minden rendszerváltozóhoz hozzáférhet, tehát olyan kódot ne írjunk, amely túl sok adatot megjeleníthet. A PHP kód esetén is használjuk a jogosultsági szabályokat: role-okat. Ha a PHP kód szintaktikai hibát tartalmaz, akkor a PHP hibaüzenetei túl árulkodóak lehetnek.
"; echo utf8_encode("Ez itt a védendő kód, csak bejelentkezett látogató látja"); echo "
"; }else{ echo utf8_encode("Ezt a nem bejelentkezett látogató látja"); } } ?> Az aktuális látogató adatait a $user objektum tartalmazza. Az objektum roles tömbje a userre érvényes szerepköröket tartalmazza. Azt lehet vizsgálni a kódban, hogy az aktuális user milyen szerepkörökben van (’authenticated user’ vagy ’anonymous user’). A szabálytól függően más és más kódot lát egy bejelentkezett és egy nem bejelentkezett felhasználó.
¡
MVC keretrendszer § Model – az
adatbázisban tárolt adatok meghatározzák az alkalmazást § Controller – Az adatbázisban tárolt adatok kezelésének a rétege § View – Az adatok megjelenítésének módja
Sajat_oldal.php fájl tartalma
- lerögzíti, hogy hol található a fájlrendszerben - betölti a drivereket - betölti a Drupal keretrendszert
print "Ez itt a sajat tartalom"; - Itt már fut a saját kód $uid = 1; $result = db_query('SELECT * FROM {node}'); - Hozzáférhetünk az adatbázishoz, a saját kódhoz print "<pre>"; {node} jelenti az adatbázis node nevű tábláját, foreach ($result AS $node) { ha van előtaggal együtt! print_r($node);// Perform operations on $node->body, etc. here. } print ""; ?>
Miután a Drupal betöltődött, a programunk hozzáfér minden Drupal függvényhez és tárolt adathoz, mint például • az aktuálisan belépett felhasználó adataihoz, • az adatbázis minden táblájához, • a jogosultsági beállításokhoz, • az adatbázisban tárolt oldalak adataihoz, • a letárolt fájlok jellemzőihez, • Stb… • Az írt programnak bolondbiztosnak kell lennie és biztonságosra kell megírni, mert esetleg SQL Injection segítségével feltörhető lesz az adatbázis A Drupal tehát alkalmas MVC keretrendszer céljaira
¡ ¡ ¡
Több száz előregyártott smink létezik Egy smink – egy könyvtárstruktúra Kötelező fájlok
§ smink_neve.info – A smink alapadatait tároló adatfájl § screenshot.png – A smink előképe
¡
Szokásos fájlok könyvtárak
§ A sablonfájlok (template-ek) ▪ page.tpl.php - egy teljes oldal sablonja ▪ node.tpl.php - egy oldal node részének a sablonja ▪ block.tpl.php - Egy blokk kinézetének a sablonja ▪ Stb… § Kinézetet definiáló fájlok (css) § Javascript fájlok § Images könyvtár
; $Id: calibrating.info $ name = Calibrating - A stílus neve description = Fabian Zoltán - Ki készítette a stílust screenshot = screenshot.png - A stílus előképét milyen fájl tartalmazza version = 1.0 - Hányadik verzió core = 7.x - Milyen drupal verzióhoz készült Base theme = garland - Ha egy másik téma módosításával készítünk engine = phptemplate - Milyen motor hajtja meg regions[sidebar_left] = Left sidebar - Régiók definíciói regions[vnavigation_left] = Left vertical menu regions[content] = Content regions[navigation] = Menu regions[banner1] = Banner 1 regions[banner2] = Banner 2 regions[user1] = User 1 regions[extra1] = Extra 1 regions[copyright] = Copyright regions[top1] = Top 1 regions[bottom1] = Bottom 1 regions[footer_message] = Footer stylesheets[all][] = style.css scripts[] = script.js
- Milyen css fájlokat tölt be a Drupal motor - Milyen javascript fájlokat tölt be a Drupal motor
¡ ¡ ¡ ¡ ¡
A sablon fájl vegyes html és PHP kódot tartalmaz. A php kód feltételeket és speciális változókat dolgoz fel. A sablon fájl általában
tag-ek segítségével rendezi el a régiókat A pge.tpl.php egy teljes oldalt ír le. A node.tpl.php egy node-ban megjelenő tartalmat ír le
A html oldal fejlécében betöltődő style.css beállításai minden szabványos böngészőn helyesen jelenítik meg az oldalt. Mivel az IE6 és IE7 nem szabványos, ezért azokon a böngészőkön egy trükköt lehet használni. Az alábbi tag-eket értelmezi az IE 6 és IE 7. Ennek hatására az Internet Explore 6 vagy 7 lefuttatja, azaz betölti a benne megjelölt css fájlokat. A CSS fájlok definíciói pedig felülírják a fő style.css néhány beállítását, így lehet a régi böngészőkön is hasonló kinézetet létrehozni, mint a szabványos böngészőkön.
A jQuery javascript libray a Drupal szokásos javascript könyvtára (http://www.jquery.com ) ¡ Olyan fájlok, amelyek a kinézet javascript segítségével történő módosításához kellenek. Használják a jquery-t. ¡
A stílusokat készíteni lehet az alap stílusok módosításával. Ld. Base theme beállítást az info fájlban ¡ Töltsünk le egy elképzeléseinkhez hasonló sminket és készítsünk egy alsminket. ¡ Stílusok készítéséhez lehet használni a Zen smink készletet. (Itt egy leírás, hogyan http://szantogabor.com/hirek/zen-61-smink¡
keszitese-smink-modositasa-alsmink-keszitesevel )
Használjuk az Artisteer smink készítő szoftvert (sajnos nem ingyenes) Megjegyzés ¡ Ha alsminket készítünk, azt tegyük külön könyvtűrba és a korábban jelölt módon hivatkozzunk az info fájlban az eredeti sminkre. Az eredeti sminkben viszont semmit ne változtassunk!
Ingyenes CMS rendszer Meglehetősen jó támogatása van– http://www.joomla.org/ Folyamatosan fejlődik Kiterjesztések száma nagy– http://extensions.joomla.org/ Smink – sok ingyenes smink Több, mint 80 fordítás Sok féle alkalmazás készíthető vele megfelelő extensionökkel, nem csak CMS
¡
Mambo § Zavaros, nem kellően átgondolt fejlesztés, § Bugokkal teli, feltörhető § A fejlesztő csapat kivált a fejlesztőkből
¡
Joomla § § § § § §
1.0 – 2005 – hibajavítás 1.5 – 2008 – Első stabil verzió – LTS – Long Time support 1.6 – Jogosultságkezelés módosult, Admin felület 1.7 – biztonsági fejlesztések, adat migráció 2.5 – 2012 – LTS – Long Time Support 3.0 – Fejlesztés alatt
¡
Használható háttér adatbázis szerverek § MySql § MySQLi § Microsoft SQL
¡
Apache vagy IIS webszerver (más is lehet) § WAMP § LAMP § XAMP
¡
¡ ¡ ¡
XAMP, WAMP telepítése (Setup » tovább » tovább típusú)
Adatbázis létrehozása a szerveren
Forrás letöltése - A forrás bemásolása a wwwroot-ba Forrás meghívása webszerveren keresztül § § § § §
¡ ¡ ¡
Admin felhasználó megadása Admin felhasználó jelszavának megadása Admin felhasználó email címének megadása Levelező szerver IP címének megadása Site nevének megadása
Tovább-tovább jellegű telepítés Telepítő fájlok törlése Utána lehet belépni a felületre
Root ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡
administrator § database attachements cache components language libraries media modules plugins templates tmp
- Adminisztrációs felület - Adatbázis interface-ek - a cikkekhez tartozó csatolások - Default modulok - kiterjesztések részei - nyelvi változatok - core rendszer részei - Média fájlok tárolása - Modulok kódjai - Feladatokat ellátó modulok - sablonrendszer - átmeneti könyvtár
¡
¡ ¡
A telepítés során a tábláknak lehet adni (célszerű adni) egy előtagot, pl: jml_. Ezzel az előtaggal fog rendelkezni minden tábla neve. Így lehet több Joomla-t is működtetni egy adatbázisból – más és más előtagot kell adni számukra. MYSQL-re való telepítéskor a táblák MyISAM típusúak, azaz tranzakciót kezelik. Az adatbázis lényegesen kevésbé összetett, mint a Drupal esetén
Felhasználókkal kapcsolatos táblák ¡ Users – A felhasználók táblái ¡ Usergroups – a felhasználókra vonatkozó jogosultsági csoportok ¡ Session – A bejelentkezett felhasználó állapotát tároló tábla Tartalmak tárolásával kapcsolatos táblák ¡ Attachments – A tartalmakhoz tartozó csatolt fájlok adatai ¡ Content – A tartalmakat tároló tábla ¡ Content* - többi tartalommal kapcsolatos tábla Egyéb rendszer táblák ¡ url_alias – a tartalmakhoz tartozó egyedi álnevek (pl. node/1 => fooldal) ¡ Extensions – telepített kiterjesztések adatait tároló tábla ¡ Finder* - A kereséshez használható táblák ¡ Languages – a telepített nyelvek ¡ Menu* - A menürendszer leírását tartalmazó táblák ¡ Modules* - A modulokkal kapcsolatos információk tárolása ¡ System - a rendszerben lévő modulok adatait tárolja ¡ Templater_* - Sablonokkal kapcsolatos táblák ¡ Update* - A rendszer frissítésével kapcsolatos táblák
¡
¡
Nincsen központi registry-hez hasonló tárolófelület. Minden modulnak saját táblákban kell eltárolnia a konfigurációs adatait A modulok tábláinak elnevezési konvenciója: modulnev_*
Letölteni a kiterjesztés forrását a megfelelő verzióhoz innen -http://http://extensions.joomla.org/ ¡ Az adminisztrációs felületen >> Bővítménykezelő >> Telepítés >> feltölteni a kiterjesztés zip fájlját ¡ A Bővítmények >> Modulkezelő | Beépülő modul kezelő konfigurálni a telepített modult. Megjegyzések ¡ A kiterjesztés telepítése URL-ről is működik ¡ A letiltott kiterjesztés kódja nem töltődik be a memóriába. ¡ Több ugyanolyan szerepű modult ne telepítsünk ¡ Éles rendszerre csak végleges verziót telepítsünk, ne alfa vagy béta állapotúakat. ¡ Telepítés előtt készítsünk az adatbázisról biztonsági mentést éles szerveren. ¡
¡
¡ ¡ ¡
A Joomla frissítése automatikusan történhet. Az admin felületre belépve a kód megnézi, hogy van-e frissebb kód és ha igen, akkor figyelmeztet. Készítsünk biztonsági másolatot az adatbázisról Készítsünk biztonsági másolatot a kódról. Írjuk felül a letöltött kóddal a joomla site-ot
¡
Menük – Menükezelő
§ Új menü létrehozása § Új menüpont létrehozása ▪ Menü kiválasztása ▪ Új menüpont létrehozása ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪
Menüpont típusa (Egy cikk,Külső URL, egyéb is lehet) A menüpont neve Menüpont aliasa Állapota (Közzétett, visszavont, kuka) Alapértelmezett oldal-e A menüben hova kerüljön (Szülő beállítása) Milyen nyelven jelenjen meg Egy cikk hozzárendelése (ha Egyszerű cikk a típusa)
¡
Cikk-kezelő § Új tartalom létrehozása, módosítása, törlése
¡
Kategória kezelő
§ Két szintű kategorizálás – jogosultságkezeléssel
adekvát
¡
Médiakezelő § Fájlok feltöltése, törlése, a szerveren
¡
Kiemelt cikk kezelő
§ Ezek azok a cikkek, amelyek az alapértelmezett
oldalon kiemeltként megjelennek.
¡ ¡ ¡
Az idegen nyelvű fordítás helyét a Joomla kódja tartalmazza Új nyelv hozzáadása – az adminisztrációs felületen Bővítmények » Nyelvkezelő » Telepített-webhely » Nyelv telepítése » §
Megjegyzés: ▪ ▪
¡
§
A tartalom oldalon fel kell venni az új nyelvet és paramétereit
§
A Rendszer-Nyelvszűrő – Engedélyezni kell és jobb oldalon beállítani
Bővítmények » Beépülőmodul-kezelő – ▪ ▪
¡
Azonos nyelvi fordítások közül mindig az utolsót célszerű telepíteni Ez egyúttal az Adminisztratív felületet is fordítja
Menütársítások – Igen, Alapértelmezett nyelvelőtag eltávolítása – igen
Menükezelő §
Egy segédmenü létrehozása ▪ ▪
§
Egy nyelvi menü létrehozása ▪ ▪ ▪
§
Egy kiemelt cikkek létrehozása Alapértelmezett legyen ez a kiemelt cikk Egy nyelvi menüben a menüpontok létrehozása Egy alapértelmezett oldal bejelölése – megjelenik a cikk mellett a nyelvhez tartozó zászló A menüpontoknál be kell állítani, hogy milyen nyelven jelenjenek meg
Többi nyelvi menü létrehozása ▪ ▪ ▪ ▪
Létrehozzuk a másik nyelven a tartalmakat Az eredeti menüpontok másolásával létrehozzuk a másik nyelvi menürendszert A menüpont felvételénél állítsuk be a menüpont társításokat az eredeti nyelvi menü menüpontjaival Ez azért kell, mert egy menüponton állva az adott nyelven társított menüpontra visz a nyelvváltás.
¡
Bővítménykezelő » Modulkezelő
§ Új modul létrehozása - Nyelvváltó típusú modul § Zászlóváltó modul bekapcsolása – Az összes oldalon legyen érvényes a modul
Megjegyzések: ¡ Akkor jelenik meg egy nyelv menürendszere és zászlója, ha az adott menünek van default menüpontja és a cikkek és menüpontok be vannak állítva, hogy az adott nyelven jelenjenek meg, vagy minden nyelven jelenjenek meg. ¡ Ha valamit elrontottunk, akkor az alábbi helyen találunk részletes leírást: http://joomlabs.hu/h%C3%ADrek/10-joomla-tippektr%C3%BCkk%C3%B6k/29-a-t%C3%B6bbnyelv%C5%B1s%C3%A9gbe%C3%A1ll%C3%ADt%C3%A1sa-1-7-joomla-eset%C3%A9n.html
¡ ¡
Készíts egy új mappát a templates nevű könyvtárban, pl: fz Utána készítsd el az alábbi struktúrát és hozd létre az alábbi fájlokat § /Css/ § § § §
- a css fájlok helye
▪ template.css
- css fájl
/Images/ /js/ Index.php templateDetails.xml
- képek helye - javascript fájlok helye - ez maga a sablon fájl - a sablon metaadatai
<extension version="1.6" type="template"> fz2008-05-01Fábián Zoltán[email protected]http://www.fzolee.huFzolee 2013GNU/GPL1.0.2 <description>Első tanuló template - A template-ben haszált folderek és fájlok listája index.phptemplateDetails.xmlimagescss <positions> - A weboldalon lévő helyek nevei, amire hivatkozhatunk <position>breadcrumb <position>left <position>right <position>top <position>user1 <position>user2 <position>user3 <position>user4 <position>footer
A HTML oldal fejlécét állítjuk össze <jdoc:include type="head" />
A HTML oldal Body részét állítjuk össze figyelembe véve, hogy a leíró xml fájlban milyen helyeket adtunk meg! <jdoc:include type="modules" name="top" /> - modulok megjelenési helye (modul position ) <jdoc:include type="component" /> - a tartalom megjelenésének helye <jdoc:include type="modules" name="bottom" /> - az alsó modul megjelenésének helye
A fenti leírás name=”top” részébe fogja behelyettesíteni azt a tartalmat, amit a top pozícióba teszünk. A component részen jelenik meg a tartalom A bottom rész lesz a lábléc.
¡ ¡ ¡ ¡ ¡
Célszerűen az oldalt
tagekkel blokkosítjuk A
tag-eknek pozíciót és méretet adunk A css fájlban megadjuk az egyéb paramétereket. Az index.pxp fejlécében megadjuk a js fájlok helyét Az index.php fejlécében megadjuk az esetleges egyéb stílusjegyeket leíró dolgokat.
¡
Használjuk az Artisteer smink készítő szoftvert (sajnos nem ingyenes)
¡
Az index.php fájlban az alábbi kódot alkalmazzuk:
A fájlban lejjebb a <jdoc:include type="head"/> oldal hatására jelenik meg a fejlécben az adat. Természetesen lehet a HTML oldalt hagyományosan is szerkeszteni… Célszerű használni valamilyen Javascript frameworkot, például jQuery-t. ekkor a megfelelő php részbe az alábbi kódot illesszük JHtml::_('jquery.framework');
Sourcerer beállításai
¡
A megadott jelzők közé {source} ... {/source} tesszük a forráskódot
¡
Jelöli, hogy hova tehetjük a HTML kódot, javascriptet és PHP-t.
¡
A php részben használhatunk include utasítást is.
¡
¡
A PHP kód elvileg minden rendszerváltozóhoz hozzáférhet, tehát olyan kódot ne írjunk, amely túl sok adatot megjeleníthet. Ha a PHP kód szintaktikai hibát tartalmaz, akkor a PHP hibaüzenetei túl árulkodóak lehetnek.
¡
Rétegek § Extension layer –
kiterjesztések rétege § Application – Alkalmazások rétege § Framework layer – Az alapvető szolgáltatások rétege Az API leírása http://docs.joomla.org/Framework/1.6
A html oldal fejlécében betöltődő style.css beállításai minden szabványos böngészőn helyesen jelenítik meg az oldalt. Mivel az IE6 és IE7 nem szabványos, ezért azokon a böngészőkön egy trükköt lehet használni. Az alábbi tag-eket értelmezi az IE 6 és IE 7. Ennek hatására az Internet Explore 6 vagy 7 lefuttatja, azaz betölti a benne megjelölt css fájlokat. A CSS fájlok definíciói pedig felülírják a fő style.css néhány beállítását, így lehet a régi böngészőkön is hasonló kinézetet létrehozni, mint a szabványos böngészőkön.
¡
Használjuk az Artisteer smink készítő szoftvert (sajnos nem ingyenes)
