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ásaszabvá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ásfeltö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 Használható technikák Kliens oldalon: Javascript, JAVA Applet, Flash animáció, Szerver oldalon: PHP, JAVA Servlet, Python, stb Adatbázis-kezelők használata
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 Sok munkát megtakarít bonyolult fejlesztés esetén A fejlesztés sebessége sokkal jobb, mintha egyénileg programoznánk mindent Hátránya 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 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-ekhasználata Hátrány 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 Blogmotor 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 designerekezt használják
Apache 2.xx.xx minden operációs rendszeren létezik Moduláris, bővíthető Nem túl gyors Ingyenes ApacheTomcat 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 Ingyenes Sokféle operációs rendszeren fut Gyors, ha myisam táblát használunk, lassabb az InnoDBtáblák esetén A legelterjedtebb a webes világban 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 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 ExpressionWeb 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
NetbeansIDE 7.2 * ZendStudio * 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 Drupal6 vagy Drupal7 alapú fejlesztésekhez. Apache+PHP+MySQL+Drupal disztribúciók elkészítése villámgyorsan WAMP Apache+MySQL+PHP+phpMyAdmin Általános PHP alapú website fejlesztés kiegészítve néhány modullal Xdebug Ingyenes debuggolásilehetőség a PHP programok számára sqlbuddy MySQL adminisztráció Webgrind debugfrontend xdebug-hoz
WAMP - http://www.uwamp.com Egy kattintásra cserélni lehet a PHP verziót! USBWebServer-www.usbwebserver.net Akár pendrive-onis 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 defaultszolgá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 (Requestheader) 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://<host>[:port][<path>[?<query>]] http:// -http protokollt jelzi a böngészőnek nem kötelező defaultesetben https:// - titkosított http protokoll kötelező, ha titkosított protokollt használunk <host> -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?<query> -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 Host: www.szily.hu URL Accept: */* Egyéb paraméterek Accept-language: hu A válaszban milyen nyelv fogadható el. Accept-Encoding: gzip, deflate lehet-e tömöríteni 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 cookietartalmát a böngésző hozzácsatolja a kérés fejlécéhez. A fenti képet a Firefox FireBugprogramjá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 A protokoll verziószám, státusz kódja - kötelező Date: Fri, 06 Sep 2010 08:39:05 GMT Aktuális dátum Server: Apache/2.1.2(Win32) PHP/5.1.15 A szerver típusa Last-Modified: Thu, 22 May2010 12:03:45 GMT Utolsó módosítás időpontja ETag:"0-dc5-3eccbca1 Egyedi azonosítás Content-Length: 3525 Tartalom hossza Keep-Alive: timeout=15, max=100 Mennyi ideig tart a nyitott kapcsolat szerver és kliens kközött Connection: Keep-Alive A kapcsolat keep-alive lásd korábban Content-Type: text/html A kiküldött tartalom MIME típusa Cookies Kiküldött cookie-k <HTML><HEAD> A tartalom tartalom
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
GET: Erőforrás kérés (oldal lekérés) POST : adatok küldése PUT: fájl feltöltés DELETE: fájl törlése HEAD: erőforrás paramétereinek lekérdezése
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 NotSupported Az adott http változatot nem tudja kiszolgálni a szerver
Host: a kérdéses szerver domainneve, 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 audio/ -hangfájlok audio/midi: midi fájlok audio/mpeg: mp3 fájlok
image/ image/bmp: bmpfájlok image/gif: giffájlok image/jpeg: jpgfájlok text/ text/html: htmlfájlok text/plain: txt fájlok video/ -képek -szövegfájlok -video fájlok video/mpeg: mpg, mpegfájlok video/x-msvideo: avi fájlok
Web böngészés WEB szolgáltatások - Webáruházak telefonokra GoogleMarket AndroidGoogleplay Iphone AppStore 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 portonkommuniká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), plopenssl 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-otegytartalomra 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 EngineOptimalization
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
Mi a célunk a honlappal? Pénzkereset, szórakozás, magunk megmutatása, kapcsolattartás, stb Kik lesznek a látogatók, milyen igényeik vannak az oldallal szemben? Szűk csoport, szélesebb rétegek, a saját partnereink Mit szeretnénk bemutatni? Általános információt, speciális információt, konkrét célra akarjuk használni Melyek a kulcsfontosságú funkciók? Milyen visszajelzéseket várunk a látogatóktól? Legyenek-e megjegyzések, cikkek, hirdetések, hozzászólások 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? Írhatnak-e cikket, tehetnek-e fel tartalmat Milyen jogosultsági rendszerre lesz szükség? Egy felhasználó Több felhasználó jogosultsági szintekkel vagy mátrixxal 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átszerver, 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-otakarok 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 Bal oldali oszlop menüve l Főmenü Főoldal >> Képtár >> Nyári képek 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 Hozzáférés naplózása Tartalom módosításának naplózása Backup Restore Adatbázis és/vagy egyéb forrá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 Googleanalí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 skinaz 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 skincseréje nem befolyásolja a tartalmat
Themes/<Téma> -alkönyvtár Tema.info a leíró fájl Sablon fájlok Page.tpl.php Block.tpl.php Node.tpl.php
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 Apachevagy IIS webszerver(más is lehet)
Általános telepítés XAMP, WAMP telepítése (Setup» tovább» továbbtí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 Modulok letöltése telepítése: Címlap» Adminisztráció» Modulok Smink letöltése és beállítása: Címlap» Adminisztráció» Megjelenés Acquia Drupal telepítése (http://www.acquia.com ) 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
Root Includes -Alaprendszer (core) részei Database -Adatbázis interface-ek Misc -jquery, javascript, png, stb Modules -Defaultmodulok Profiles -Különböző telepítési profilok Scripts -Tesztelési környezet Sites Default -Alapértelmezett site Settings.php -Alapértelmezett konfiguráció Files -A site-hoz tartozó fájlok helye All Modules Közös modulok helye -Egy modul egy könyvtárstruktúra Themes <Saját sminkek> -Egy smink egy könyvtárstruktúra <További siteok> -Egy site-egy könyvtárstruktúra Themes Alapértelmezett témák -Egy smink egy könyvtárstruktúra
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: Root/modules => sites/all/modules=> sites/<specialissite>/modules 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 drupalautomatikusan 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-tis működtetni egy adatbázisból más előtagot kell adni számukra. MYSQL-revaló 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 NodeID egy tartalom egyedi azonosítója uid User ID a felhasználó tábla egyedi azonosítója vid ViewsId 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 zipfá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. cronmű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_migratemodullal
Töltsük le a Drupal.orgfelületről a frissítés kódját Készítsünk biztonsági másolatot az adatbázisról (pl. backup_migratemodullal) 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 Getmetó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 Aliasokhasználata Syslog A rendszer logolniké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 Drupaloldalba PHP kód futtatásának módja PHP filter modul bekapcsolása A nodeszerkesztése során a Szövegformátum: PHP code A szövegben <?php?> 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: <?php function fz() { echo "<div style='font-size: 22px; '>"; echo "Szia hogy vagy"; echo "</div>"; 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.
<?php function fz() { global $user; //A globális user változó importálása if(in_array('authenticated user',$user->roles) )//A bejelentkezettségvizsgálata { echo "<div style='font-size: 22px; '>"; echo utf8_encode("ez itt a védendő kód, csak bejelentkezett látogató látja"); echo "</div>"; }else{ echo utf8_encode("ezt a nem bejelentkezett látogató látja"); } }?> Az aktuális látogató adatait a $userobjektum 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 ( authenticateduser vagy anonymoususer ). 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 <?php define('drupal_root', getcwd()); require_once ("./includes/bootstrap.inc"); drupal_bootstrap(drupal_bootstrap_full); -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 operationson $node->body, etc. here. } print "</pre>";?> Miután a Drupalbetöltődött, a programunk hozzáfér minden Drupalfü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 bolondbiztosnakkell lennie és biztonságosra kell megírni, mert esetleg SQL Injectionsegítségével feltörhető lesz az adatbázis A Drupaltehá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 node.tpl.php block.tpl.php Stb Kinézetet definiáló fájlok (css) Javascript fájlok Imageskönyvtár -egy teljes oldal sablonja -egy oldal node részének a sablonja -Egy blokk kinézetének a sablonja
; $Id: calibrating.info $ name= Calibrating -A stílus neve description = FabianZoltá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] = Leftsidebar -Régiók definíciói regions[vnavigation_left] = Leftvertical 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 <div> tag-ek segítségével rendezi el a régiókat A pge.tpl.phpegy teljes oldalt ír le. A node.tpl.phpegy node-banmegjelenő tartalmat ír le
Kinézetet definiáló fájlok (css) Style.css Style.ie6.css Style.ie7.css -Általános css fájl -IE6 esetén betöltődő -IE7 esetén betöltődő A stílusok beállításainak elfedése <style type="text/css" media="all"> @import url("http://localhost:8082/sites/all/themes/calibrating/style.css?medhih"); </style> <!--[if IE 6]> <link rel="stylesheet" href="/sites/all/themes/calibrating/style.ie6.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="/sites/all/themes/calibrating/style.ie7.css" type="text/css" media="screen" /> <![endif]--> 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. <!--[if IE 6]>..<![endif]--> <!--[if IE 7]>..<![endif]--> Ennek hatására az Internet Explore6 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-sminkkeszitese-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!
http://nagygusztav.hu/drupal-7- alapismeretek http://drupal.org http://drupal.hu http://www.fzolee.hu/framework/drupal/ http://jquery.com
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 Apachevagy 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 webszerverenkeresztü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 -Adminisztrációs felület database -Adatbázis interface-ek attachements -a cikkekhez tartozó csatolások cache -Defaultmodulok components -kiterjesztések részei language -nyelvi változatok libraries -corerendszer részei media -Média fájlok tárolása modules -Modulok kódjai plugins -Feladatokat ellátó modulok templates -sablonrendszer tmp -á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-tis működtetni egy adatbázisból más és más előtagot kell adni számukra. MYSQL-revaló 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 Drupaleseté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-hezhasonló 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 Joomlafrissítése automatikusan történhet. Az adminfelü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 Joomlakó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: 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 A tartalom oldalon fel kell venni az új nyelvet és paramétereit Bővítmények» Beépülőmodul-kezelő A Rendszer-Nyelvszűrő Engedélyezni kell és jobb oldalon beállítani Menütársítások Igen, Alapértelmezett nyelvelőtag eltávolítása igen Menükezelő Egy segédmenü létrehozása Egy kiemelt cikkek létrehozása Alapértelmezett legyen ez a kiemelt cikk Egy nyelvi menü létrehozása 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/ template.css -a css fájlok helye -css fájl /Images/ -képek helye /js/ -javascript fájlok helye Index.php -ez maga a sablon fájl templatedetails.xml -a sablon metaadatai
<?xml version="1.0" encoding="utf-8"?> <extensionversion="1.6" type="template"> <name>fz</name> <creationdate>2008-05-01</creationdate> <author>fábián Zoltán</author> <authoremail>fz@fzolee.hu</authoremail> <authorurl>http://www.fzolee.hu</authorurl> <copyright>fzolee 2013</copyright> <license>gnu/gpl</license> <version>1.0.2</version> <description>első tanuló template</description> <files> <filename>index.php</filename> <filename>templatedetails.xml</filename> <folder>images</folder> <folder>css</folder> </files> <positions> <position>breadcrumb</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>footer</position> </positions> </extension> -A template-ben haszáltfolderek és fájlok listája -A weboldalon lévő helyek nevei, amire hivatkozhatunk
A HTML oldal fejlécét állítjuk össze <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language;?>" lang="<?php echo $this- >language;?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template;?>/css/template.css" type="text/css" /> </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! <body> <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 </body> 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 componentrészen jelenik meg a tartalom A bottom rész lesz a lábléc. </html>
Célszerűen az oldalt <div> tagekkel blokkosítjuk A <div> tag-eknekpozíciót és méretet adunk A css fájlban megadjuk az egyéb paramétereket. Az index.pxpfejlécében megadjuk a js fájlok helyét Az index.phpfejlécében megadjuk az esetleges egyéb stílusjegyeket leíró dolgokat.
Használjuk az Artisteersmink készítő szoftvert (sajnos nem ingyenes)
Az index.phpfájlban az alábbi kódot alkalmazzuk: <?php // Add the path parameter if the path is different than 'media/system/js/' JHTML::script('sample.js', 'templates/custom/js/');?> 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');
Sourcererbeá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
Kinézetet definiáló fájlok (css) Style.css Style.ie6.css Style.ie7.css -Általános css fájl -IE6 esetén betöltődő -IE7 esetén betöltődő A stílusok beállításainak elfedése <style type="text/css" media="all"> @import url("http://localhost:8082/sites/all/themes/calibrating/style.css?medhih"); </style> <!--[if IE 6]> <link rel="stylesheet" href="/sites/all/themes/calibrating/style.ie6.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="/sites/all/themes/calibrating/style.ie7.css" type="text/css" media="screen" /> <![endif]--> 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. <!--[if IE 6]>..<![endif]--> <!--[if IE 7]>..<![endif]--> Ennek hatására az Internet Explore6 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 Artisteersmink készítő szoftvert (sajnos nem ingyenes)