Készítette: Balázs Gergő
[email protected]
XAMPP és hasznalata Windows réndszérékén 1. XAMPP letöltése: -
Letöltés az alábbi linkről: http://www.apachefriends.org/en/xampp.html
-
Ezután kiválasztjuk az XAMPP for Windows opciót, majd az alábbi lehetőségek közül a legelsőt választjuk:
-
A felugró oldalon pedig letöltjük a basic packagek közül az EXE-t, ebben benne van minden ami nekünk kell, így nem kell külön telepíteni semmit sem:
1
Készítette: Balázs Gergő
[email protected]
2. XAMPP Telepítése -
Ha letöltöttük, indítsuk el a telepítést: Kiválasztjuk a célmappát, szerintem célszerű a Windows partíciójára telepíteni, azon belül is a gyökérbe, mert onnan érhetők el és adhatók meg legegyszerűbben a későbbiek folyamán a fájlok, amikkel majd dolgozol:
-
A telepítési folyamat el fog tartani egy darabig, addig érdemes feltenni mellette az Adobe Dreamweaver CS5-t Ha sikeres a telepítés, érdemes újraindítani a számítógépet, hogy minden fontos szolgáltatás elindításra kerüljön Újraindítás után nyissuk meg az XAMPP Control-Paneljét a Start>Minden Program>xampp for windows>xampp Control Panel
2
Készítette: Balázs Gergő - A következő ablak fog fogadni minket:
[email protected]
-
Innen nekünk szükségünk van 2 modulra, Apache és MySql, telepítsük őket Pipáljuk be a mellettük lévő Svc (Service) négyzeteket:
-
Ha ez megvan, indítsuk el a szolgáltatásokat, kattintsuk a Start gombra mindkét modulnál: Indításkor Windows Vista/7 eseten az UAC (User Account Control) engedélyt kérhet a rendszergazdai fiók használatára, engedjük neki Ha minden jól ment, a következőt látjuk:
-
-
Ezzel sikeresen működésbe hoztuk a lokális php szerverünket és sql adatbázisunkat, a következőkben megnézzük miképpen lehet használni a rendszert.
3
Készítette: Balázs Gergő
[email protected]
3. XAMPP használata -
Nyissuk meg a böngészőnket és pötyögjük be az URL mezőbe a következő címet: 127.0.0.1 Valami ilyesmit kell látnunk:
-
Elsőként be kell állítanunk a root felhasználóhoz egy jelszót, hogy az adatbázisunkat majd biztonságban tudhatjuk, illetve megkönnyítsük a Dreamweaverrel történő használatot Ehhez a baloldali naracssárga menüben válasszuk a Security opciót:
-
4
Készítette: Balázs Gergő - Itt a következő linkre van szükségünk, kattintsunk rá:
[email protected]
-
A MySQL Section-nél állítsunk be a ROOT-hoz egy tetszés szerinti jelszót, majd fogadjuk el:
-
Ha kész, térjünk vissza a 127.0.0.1 –es címre, és a bal oldali menüpontok közül a Tools címke alatt válasszuk a phpMyAdmint: Az alábbi kép fog fogadni minket:
-
-
Itt válasszuk ki a Nyelvnél a Magyart, ha úgy tetszik, de nem feltétlen kell ragaszkodni hozzá 5
Készítette: Balázs Gergő
[email protected]
-
Itt megadjuk az általunk választott jelszót és belépünk:
-
Ha idáig eljutottunk, akkor bent vagyunk a szerverünk azon részén ahol tároljuk az adatbázisainkat, a mi feladatunk először is, hogy létrehozzuk a saját adatbázisunkat, a MySQL localhost alatt található mezők kitöltésével: Az első üres mezőbe írjuk be az adatbázisunk nevét, legyen mondjuk esetünkben: pelda a következő leugró menü (illesztés) számunkra most lényegtelen, ezért nélkülözzük, ha megadtuk a nevet kattintsunk a Létrehozásra:
-
Megjegyzés: Célszerű az ékezetes karaktereket mellőzni mind az adatbázis és a táblák nevében, táblán belül pedig a mezők címadásakor is, mert az SQL nem szereti az ékezetes karaktereket. Lehetőség van ’TáblaNév’ ’MezőNév’ való megadásra, de lekérdezésekkor okozhat galibát az ékezetek használata. Ha mód van rá, mellőzzük, űrlapok készítésénél egyébként is testre szabható, hogy miként jelenjen meg adatbázisunk tartalma.
6
Készítette: Balázs Gergő
[email protected]
-
Ha megvagyunk, belépünk az első adatbázisunk főoldalára, ahol nincs más tennivalónk, mint felvenni az első táblánkat:
-
Adjuk meg a táblánk nevét, valamint a mezők számát, pontosan annyit, ahány attríbutumot fog tartalmazni a 3. normálformában lévő táblánk, legyen mondjuk a név ’felhasznalok’, a mezők száma pedig 4, majd kattintsunk az indításra
7
Készítette: Balázs Gergő
[email protected]
-
Átkerülünk a következő oldalra, ahol meg kell adni az attribútumok tulajdonságait: mező neve, típusa, hossza, alapértelmezett értéke, indexet és még sok egyéb dolgot, amiből nekünk csak a felsoroltak kellenek. Töltsük ki a mezőket a következő módon:
-
Mező: Itt adjuk meg a mezőnk nevét, ami megadja, hogy milyen adatokat fog tartalmazni az oszlopunk Típus: A tárolt adataink típusától függően kell kiválasztanunk, szöveg esetén TEXT, számok esetén INT, dátum esetén DATE és így tovább Hossz: A mezőben megadható szám vagy szöveg hossza, számjegyekben kifejezve, pl. irányítószám esetén nem érdemes 4 számjegynél hosszabbra hagyni a mező méretét mivel Magyarországon 4számjegyű minden irányítószám Index: a képen nem látszik, de a következő tulajdonságai vannak: PRIMARY, INDEX, UNIQUE, FULLTEXT. FULLTEXT és UNIQUE-ról most nem kívánok szólni, számunkra a lényeg a UNIQUE és a PRIMARY. Az index segítségével állítod be egy táblán belül a kulcsokat, UNIQUE jelentése egyedi, tehát esetünkben erre van szükség az Azonosito mezőben, mert ez fogja egyértelműen azonosítani a felhasználóinkat. PRIMARY jelentése elsődleges, több kulcs esetén megadhatjuk, hogy mely kulcsot használjuk elsődlegesként, bővebben lásd az előadás jegyzetben. Ha megadtunk mindent, akkor kattintsunk a mentésre.
-
-
-
8
Készítette: Balázs Gergő
[email protected]
-
Létrehoztuk a felhasznalok táblánkat, amiben a következő adatokat tudjuk tárolni: felhasználó neve, jelszava és email címe:
-
Tanulmányozzuk kicsit a mezőnevek melletti műveleteket:
-
1. ikon: Különböző értékek tallózása – itt tudod lekérni a mezőhöz tartozó értékeket 2. ikon: módosítás – itt tudod szerkeszteni a mező tulajdonságait, amiket az előzőekben megadtunk (megjegyzés: a kulcs megadására itt már nincs lehetőség, csak a mező törlésével és újra-hozzáadásával tudunk új kulcsot megadni!) 3. ikon: Törlés – itt tudjuk törölni azt a mezőt, amire nincs szükségünk. Törlés után egy megerősítő oldalra kerülünk a véletlen törlések elkerülése végett 4. ikon: Elsődleges – elsődleges kulcs kijelölését végezhetjük el a használatával 5. 6. és 7. ikon: Ezek aszerint érhetők el, ahogyan beállítottuk az egyes mezők tulajdonságait
-
9
Készítette: Balázs Gergő
-
-
-
[email protected]
Most pedig vigyünk fel néhány demó adatot, amit a későbbiekben tesztelés céljából le tudunk kérni majd egy php oldalra Dreamweaver segítségével, ezt már nem fogom részletezni, ehhez útmutatást a http://www.ebookz.hu oldalon található Adobe Dreamweaver php & mysql segédlet nyújt útmutatást. Kattintsunk bal oldali oldalsávon az adatbázisunk nevére: pelda (1), így visszakerülünk az adatbázis főoldalára, ahol láthatjuk a benne található táblákat:
A Műveletek oszlopból válasszuk a 4. ikont (Beszúrás) ami tovább ugrik a következő oldalra:
10
Készítette: Balázs Gergő
-
[email protected]
Itt triviális mit kell tennünk, az Érték oszlopokba felvisszük az felvenni kivánt adatokat, értelemszerűen INThez számot, TEXThez szöveget. pl.: 1. felhasználó Azonosito: 1 felhasznalonev: admin jelszo: adminjelszo emailcim:
[email protected] 2. felhasználó Azonosito: 2 felhasznalonev: user1 jelszo: user1jelszo emailcim:
[email protected]
-
Ha kész, kattintsunk valamelyik Érték oszlop alatt található Indítás gombra és ha jól végeztük dolgunkat, a felhasznalok táblára klikkelve megjelenik a 2 felvitt demóadatunk:
-
Ezek paraméterei később módosíthatók a korábban már megismert módon, és törölhetők is.(Az ikonokat feltételezem, megismerjük) Ezzel készen is volnánk első használható adatbázisunkkal. Átvettük hogyan hozhatunk létre adatbázist, táblát és hogyan adhatunk hozzá adatokat. Másra itt nem is nagyon lesz szükség, a munka javarésze a megfelelő adatok felvitele után Dreamweaverben fog zajlani. Található pár példa adatbázis amik az XAMPP-al települtek, ezeket érdemes nézegetni. A következőkben még arról lesz szó, hogyan kapcsolódjunk adatbázisunkhoz Dreamweaver segítségével, ha használni szeretnénk majd a web fejlesztés folyamán.
-
11
Készítette: Balázs Gergő
[email protected]
4. Kapcsolódás Adatbázishoz Dreamweaverben -
Bízom benne mielőtt ennek a fejezetnek nekifogunk, előtte sikeresen telepítve lett az Adobe Dreamweaver CS5 Indítsuk el a programot, majd első feladatunk az lesz, hogy létrehozunk magunknak egy Site-ot:
-
Kattintsunk a Dreamweaver Site… -ra, majd adjunk meg egy tetszés szerinti nevet az oldalunknak:
-
Site Name: Az oldal neve, tetszés szerinti 12
Készítette: Balázs Gergő
[email protected] - Local Site Folder: Itt adjuk meg, hová mentse le a fájljainkat, ez most mindenképpen az xampp könyvtárába kell mentenünk, máskülönben nem tudjuk majd elérni localhostról az alkotásunkat. XAMPP-on belül is válasszuk a htdocs könyvtárat, ahogy a neve is adja, itt keresi a (ht=hyper text, html=hyper text marking language) html, php dokumentumainkat, amikor megadod majd böngésződben az elérési utat hozzá, ami a következőképpen néz ki: 127.0.0.1/oldalnev/fajlnev.php, azaz mi esetünkben 127.0.0.1/peldasite/fajlnev.php lesz. - kattintsunk bal oldalt a Servers pontra, itt megadjuk, hogy Helyben szeretnénk tesztelni az oldalunkat:
-
Pluszjelre kattintva megnyílik egy ablak, adjuk meg neki az alábbi beállításokat:
-
Ha ez megvan, mentsük őket a Save gombbal, majd a Remote oszlopban található pipát vegyük ki, a Testing oszlopot pedig pipáljuk be. Ha ez is megvan, akkor szintén Save. Ezzel kész a weboldalunk, amit localhost-on tudunk majd futtatni és tesztelni.
-
13
Készítette: Balázs Gergő
[email protected] - Most hozzunk létre egy üres php fájlt, hogy beállíthassuk az adatbázisunkat amit nemrég készítettünk: File>New> PHP:
-
Jobb oldalt nyissuk le a Bindigs, Server Behaviors, Databases fület:
14
Készítette: Balázs Gergő
[email protected] - Válasszuk ki a Databases fület és kattintsunk a képen is látható plusz jelre, ott pedig a MySQL Connection-re, és adjuk meg az alábbi adatokat:
-
-
-
-
Connection name: A kapcsolat neve, tetszőleges MySQL server: a szerver ahol az adatbázis található, mi esetünkben ez a saját számítógépünk (localhostunk), enek megadása kétféleképpen lehetséges: vagy localhostot írsz, vagy 127.0.0.1 –et, mind a kettő ugyanazt eredményezi. User name: jelen esetben root, de lehetőség van phpmyadminban az adatbázisunkhoz új felhasználók létrehozására, mivel nincs szüksége minden felhasználónak admin jogokra az adatbázis szerkesztéséhez, így elkerülhető, hogy valamilyen ártalmas php kóddal törölje mondjuk az egész adatbázisunkat. Password: Az előzőekben beállított password, amivel belépünk phpmyadminba. Database: az adatbázis neve, amivel dolgozni szeretnénk, ezt szintén létrehoztuk már korábban, pelda néven, így elég ha csak ezt beírod, de selectre kattintva válogathatsz a többi adatbázis közül is, amennyiben jól adtad meg a szerver címét. Az adatok megadása után tesztre kattintva ellenőrizheted a felvitt paraméterek helyességét, amennyiben jól dolgoztál, „Connection was made succesfully” üzenetet kapsz, ha nem, akkor nézd át mit írhattál el. Végeztünk, OK-t nyomunk, és a kapcsolatunk szépen létrejön. Innentől kezdve használhatjuk az adatbázisunkat az oldalunk megalkotása közben. Azt, hogy ezt miképpen kivitelezhető, (adatok felvitele, módosítása, törlése stb..) az ebook.hu videóiból lesz lehetőség megtanulni. Ez a Lecke itt véget ért.
A továbbiakban sok sikert, és remélem sikerült hasznát venned eme rövid kis útmutatómnak.
15