Mit hogyan hova?
Kezdésképp, hozzunk létre egy új fájlt a számítógépünkön valahol, ez legyen „index.php”, majd nyissuk meg az általunk választott szövegszerkesztő programba. Adjunk a lapnak valami nevet, illetve írjunk bele egy kevés szöveget, majd mentsük el. Az alábbi ábrán egy példa látható.
- ábra: Kezdés példa
Ezt másoljuk is rá a PLC-re, hogy meglássuk, hova kell majd a későbbiek során a fájlokat másolni. Ehhez nyissuk meg a „FileZilla” alkalmazást, és csatlakozzunk rá a PLC-re. Ehhez meg kell adnunk a PLC ip címét, illetve a felhasználó nevet („root”) és jelszót („wago”). Természetesen csak alapbeállítások mellett ez a jelszó. Illetve a porthoz írjuk be, hogy a 22-es porton szeretnénk csatlakozni.
14.ábra: SFTP csatlakozás
Miután csatlakozunk, a „root” mappába vagyunk. Innen lépjünk vissza, és lépjünk be a „var” azon belül pedig a „www” mappába. ( „/var/www” )
15.ábra: var/www mappa
Ebben a mappában hozzunk újra egy új mappát, és adjunk neki olyan nevet amilyent szeretnénk. De későbbiekben még használnunk kell ezt a nevet, tehát saját érdekünk, hogy ne legyen túl bonyolult. Ha létrehoztuk a mappát ( „plcweb” ), másoljuk bele az előbbiekben megírt „index.php” fájlunkat.
- ábra: index.php plc-re helyezése
Ellenőrizzük le, hogy jó helyre másoltuk-e a szükséges fájlt. Ezt úgy tudjuk megtenni, hogy nyitunk egy webböngészőt. És a PLC ip címét, illetve az előbb létrehozott MAPPA nevét beírjuk. Például ahogy az alábbi képen is látható.
- ábra: PLC weboldal
Fontos megjegyeznem, ha nem „index.php” –nak lett elnevezve a fájl, hanem például „index2.php”-nak, akkor szimplán a mappa nevét megadva, nem tudjuk elérni a weboldalunkat. Ilyenkor a mappa után kell írni a fájl nevét is. Például ahogy az alábbi képen látható.
- ábra: Nem „index.php” fájl használatával az elérés
Így hogy tudjuk hova, és hogyan kell másolnunk a fájlokat, ahhoz, hogy azt egy böngészőből elérjük. Nekiállhatunk egy egyszerű program létrehozásának, amelyben nem csak HTML lesz, hanem CSS, JavaScript, és persze CSV-írás olvasáshoz PHP.
Hozzuk létre, hogy miket szeretnénk használni a weboldalon, tehát adjunk hozzá gombokat, bemeneti mezőket, illetve ha visszajelzést szeretnénk, akkor azt is hozzá kell adnunk.
19.ábra: Weboldal HTML formája
Fontos, hogy amit a későbbiekben formázni szeretnénk, annak adjunk legalább egy „class” attribútumot. Későbbiek folyamán szükségünk lesz arra, hogy meg tudjuk különböztetni az egyes gombokat, bemeneti mezőket, illetve visszajelzésre szolgáló „span” tageket, ezért ezeknek saját „id”-t kell megadnunk. Ezután másoljuk át a PLC-re, a megfelelő mappába.
A fenti kód a weboldalon a következő formában néz ki.
- ábra: Html a weboldalon
Formázzuk meg kicsit, hogy pofásabban nézzen ki. Ezt a CSS használatával tudjuk megtenni. Ehhez hozzunk létre, egy „.css” kiterjesztésű fájlt. A nevét természetesen tetszésünknek megfelelően megadhatjuk, nagy jelentősége nincs. Például legyen „style.css”. Természetesen ezt a css fájlt is át kell majd másolnunk a PLC-n létrehozott mappánkba, ahhoz hogy működjön. Továbbá, az „index.php” fájlunkba, hozzá kell adni, hogy használja a CSS-t. Ezt a következő képpen tehetjük meg.
21.ábra: CSS meghívása
Természetesen, ahhoz, hogy meg is változzon a kinézet. Néhány sort bele kell írnunk ebbe a CSS fájlba. Rengeteg formázási lehetőségünk van, ám erre érdemes az interneten rákeresni mindig, hogy melyik paramétert kell megadnunk, változtatnunk, ahhoz, hogy a kívánt eredményt kapjuk. Most csak szimplán megmutatom, hogy a szintaktika hogyan néz ki. És hogyan kell hivatkozni a számunkra szükséges, „class”-szal illetve „id”-val rendelkező tagre.
- CSS szintaktika
Mint látható a képen is, css írása közben, több féle képpen is hivatkozhatunk egy-egy elemre. Lehet, hogy magát a típusra hivatkozunk („html”, „div” stb..) ilyenkor, az oldalon látható összes olyan elem megkapja a megadott paramétereket. A „ . + class név” használatával tudunk classokra hivatkozni. Ekkor csak az így megadott class paraméterei változnak. Lehetőség van arra is, hogy egy classon belül hivatkozzunk egy típusra. Végül pedig ha „id”-ra szeretnénk hivatkozni, akkor a „#” szimbólumot kell az elem „id”-ja elé tennünk. Ez a css a következő képpen változtatja a weblap kinézetét.
- ábra: Weblap CSS-el
Ezt követően, már csak azt kell megoldanunk, hogy az itt megnyomott gombok, illetve a beírt értékek belekerüljenek a CSV fájlba, amit későbbiek folyamán a PLC olvasni tud. Ehhez van szükségünk a JavaScript-re, illetve a PHP-ra.
Mivel a JavaScript kliens oldalú, a PHP pedig szerver oldalú, így meg kell oldanunk az adat átadást, a kliens és a szerver között. Erre az egyik legegyszerűbb módszer, a POST alkalmazása. Ezzel tudunk küldeni a szerver oldal felé adatot, amelyet ott feldolgozunk.
Először is hozzunk létre egy „ .js” kiterjesztésű fájlt. Ez fogja tartalmazni a JavaScript kódunkat. Például „main.js”. Természetesen ezt is rá kell másolnunk majd a PLC-re.
Valahogy figyelnünk kell, hogy a gomb megnyomásával éppen Igazaba, vagy Hamisba szeretnénk változtatni az értéket. Ehhez létre kell hoznunk egy változót. Mind két gombhoz külön-külön. Ezeket „vargombBe”-nek, illetve „vargombKi”-nek neveztem el. Ezt követően meg kell írnunk a függvényt, amelyet a gombnyomáshoz hozzárendelünk. Így minden gombnyomásnál változik a CSV-be írt érték.
24.ábra: Gombok
Ezután hozzuk létre azt a függvényt, amellyel POST-on megküldjük a szerver oldal felé az adatokat.
- ábra: POST függvény
Létre kell hoznunk egy objektumot, amely majd elvégzi a számunkra szükséges POST-olást. Ebben az esetben nálunk ez a „req” nevű objektum lesz. Ezt követően egy string változót kell létrehozni, majd feltölteni a szerver oldal felé megküldeni kívánt adattal. Ahogyan a fenti képen is látható, ezt úgy tudjuk megtenni, hogy meg kell adnunk milyen néven szeretnénk elérni az egyes változókat PHP oldalon, ezt például a „(”&bm1=”)” reprezentálja. Így amikor a „bm1”-es bemeneti mezőhöz tartozó értéket szeretnénk elérni a PHP oldalon elég lesz csak a POST bm1- hez tartozó értékét vizsgálni.
Ha a küldeni kívánt stringbe, mindent megadtunk, akkor már csak a küldés van hátra. Ehhez az elején létrehozott „req” objektumot használjuk. Nyissuk meg a kapcsolatot az „req.open” paranccsal, ennek a második paramétere, az, hogy hova szeretnénk küldeni, ide írjuk be, hogy „writecsv.php”, mivel a későbbiekben ilyen nevű fájlt hozunk létre. Állítsuk be a küldeni kívánt típust, majd küldjük el az adatot, a „req.send(data)” paranccsal. A képen látható további programrész, csak visszajelzésre szolgál, nem szükséges beletenni, de ajánlott. Azonban, hogy ez a visszajelzés működjön, még néhány dolgot meg kell tennünk. Először is hozzunk létre egy olyan „id”-vel rendelkező HTML elemet az „index.php” fájlunkban, mint amit itt is megadtunk. Esetünkben „responsephp”.
26.ábra: Visszajelzés
Ezután pedig hozzunk létre egy „writecsv.php” nevű fájlt és a következő kódsort írjuk bele.
27.ábra: POST visszajelzése.
Ez annyit fog tenni, hogy amit POST-on küldünk a szerver felé, azt kiírja majd a lap aljára.
Elkészültünk a függvényinkkel, azonban ezeket hozzá kell rendelni a HTML elemekhez. A gomboknál ezt az „onclick” használatával, a bevitelimezőknél, pedig az „onchange” használatával tudjuk megtenni. Az „onchange” nem a legjobb megoldás, mivel ez csak akkor működik, ha a beviteli mezőbe új értéket írunk, tehát ha a meglévőt újra beírjuk, nem fogja frissíteni a CSV-t. Azonban ez a legegyszerűbb megoldás, és ritka, hogy ugyan azt az értéket újra beírjuk az adott mezőbe.
- ábra: Függvény hozzárendelés
Ha eddig eljutottunk, másoljuk rá a PLC-re az új, illetve változtatott fájlokat, és ellenőrizzük le, hogy működik-e a POST küldés.
Amennyiben mindent megfelelően csináltunk, akkor a bemeneti mezőbe beírt értékeket visszakapjuk a lap alján, illetve a gombok nyomására is változnak a megfelelő értékek.
- ábra: Teszt
Mielőtt rátérünk a PHP részre, ahol a CSV-be írást fogjuk lekódolni. Még hozzunk létre egy új mappát a PLC-n. A későbbiekben el kell majd érnünk ezt a mappát, tehát érdemes olyan nevet adni, ami egyszerűen megjegyezhető. Miután létrehoztuk, még annyit meg kell tennünk vele, hogy a fájl engedélyeket átállítjuk. Erre azért van szükség, hogy PHP-script maga írhassa a CSV-t. Ezt úgy tehetjük meg legegyszerűbben, hogy a létrehozott mappára jobb gombbal rákattintunk, és a „File permissions” lehetőségre kattintunk.
30.ábra: File permission
A felugró ablakban pipáljunk ki mindent, vagy írjuk be a mezőbe, hogy „777”.
- ábra: Minden engedélyezése
Ha ezzel megvagyunk, akkor nyissuk a létrehozott „writecsv.php” fájlt. Módosítsuk úgy a programot, hogy a POST-on érkező adatokat, beleírjuk egy CSV fájlba.
32.ábra: PHP program, CSV íráshoz
A POST-on érkező értékeket átadjuk változóknak, a jobb áttekinthetőség érdekében. Ezután ezeket az értékeket egy tömbbe mentjük le. Ezután megnyitjuk az írni kívánt CSV-t. Itt arra kell figyelnünk, hogy az előbb létrehozott mappába legyen az elérési út. Ha nem is létezik a CSV fájl, akkor létrehozza, és úgy írja bele az értékeket. Ezt követően az „fputcsv” függvénnyel, tudjuk beleírni a CSV-be az adatokat. Ennél meg kell adnunk, hogy melyik fájlba („$fp”), milyen adatokat („$list”), és mi legyen az adatok közti elválasztó karakter („ ; ”). A változtatott „writecsv.php” fájlt másoljuk át a megfelelő helyre.
Amint ezzel megvagyunk, tesztelhetjük, hogy tényleg beleíródnak az adatok. Tehát írjunk valamit a bementi mezőkbe, és nézzük meg, hogy létre jön-e a fájl, a megadott helyen.
- ábra: Létrejött CSV fájl
Ha sikeres a fájl írás, akkor a következő feladatunk, hogy megoldjuk azt is, hogy a weboldal újra töltése után, is megmaradjanak a beírt értékek. Ehhez létre kell hoznunk, egy új PHP fájlt, amely visszaolvassa a CSV adatokat.
- readcsv.php
Megnézzük, hogy létezik-e a fájl, és meg tudjuk-e nyitni. Ha igen, akkor beolvassuk az adatokat, és megküldjük a kliens oldal felé. Természetesen ezért szükségünk van JavaScript kódra is. A következőkben tehát ezt nézzük meg.
35.ábra: read függvény
Ezt a függvényt, még hozzá kell rendelnünk az „index.php”-ban található „body”-teg hez. Még pedig annak az „onload” paraméterét. Így az oldal betöltésekor lefut a függvény.
36.ábra: onload
Hasonló képpen működik, mint az előzőkben az írásnál az ellenőrzéshez való visszaküldés. A különbség annyi, hogy írnunk kell még egy függvényt amely, a visszajövő adatokat feldolgozza.
37.ábra: saját függvény
Látható, hogy ennek a függvénynek van egy bemenő paramétere, amely az előző beolvasás tömb elemét dolgozza fel. Ezek után már minden egyes újratöltésnél megjelennek az értékek a megfelelő helyen.
Érdekel, hogyan folytatódik? A következő részhez kattints ide!