Webshop adminisztrációs felület
 
Általános információk
Tanfolyamok ismertetése
Próba
Regisztráció
Belépés a rendszerbe
1. fejezet: Design elemek, css és javascript fájl elkészítése

Bevezető:

Ebben az oktatásban kilenc leckén keresztül fogjuk megismerni a webshop programhoz tartozó adminisztrációs felület elkészítését. Az előző leckében a webshop teljes elkészítését megtanultuk, de a zökkenőmentes működéshez szükség van egy adminisztrációs felületre. Nézzük meg, hogy miért is van szükség az adminisztrációra. Általában a webshopok karbantartását nem képzett szakemberek végzik, hanem az adott cégen belül erre a célra kijelölt dolgozók. A biztonságos adatkezelés érdekében tehát ki kell alakítani egy olyan online interface-t, ami egyszerűen kezelhető, könnyen átlátható és a hozzá nem értő emberek is zökkenőmentesen képesek ellátni benne az adminisztrálás feladatait. A termékek kezelése, módosítása, új termék bejegyzése, tartalom és megjelenítések szerkesztése így nem fog gondot okozni, pár órás egyszerű magyarázat után bárki képes lesz a feladat ellátására.

Adatbázis adatok:

Akik még nem végezték el a webshop oktatást, vagy még nem jutottak el az adatbázis részig, azok most letölthetik az adatbázis felépítéséhez szükséges sql fájlokat. A forrás letöltése linkre kattintva lehet letölteni a szükséges csomagot.


A webshop sql fájlok letöltése: [ Forrás Letöltése ]

A sql alapozásra nem térünk ki, ugyanis arról részletesen írtunk a webshop oktatásban. Az admin felület azt az adatbázis rendszert kezeli, amiből a webshop táplálkozik, az adatbázis neve 'cdb'. Ez az adatbázis található meg a letölthető csomagban.

A meglévő adatbázis szerkezetet ki kell egészítenünk két új táblával. Az első tábla az adminisztrációt kezelő felhasználók tárolására készül, névvel, címmel, belépési adatokkal. A második tábla az adminisztrációban történt eseményeket fogja eltárolni.

Először az adminisztrátorokat tartalmazó táblákat hozzuk létre. A tábla létrehozható a lenti kód használatával. Alkalmazhatunk sql terminált, vagy bármilyen mysql adminisztrációs programot.


CREATE TABLE `operator_tab` (
`op_key` int(20) NOT NULL auto_increment,
`op_nev` varchar(200) NOT NULL default '',
`op_beoszt` varchar(200) NOT NULL default '',
`op_cim` varchar(200) NOT NULL default '',
`op_telszam` varchar(200) NOT NULL default '',
`op_user` varchar(200) NOT NULL default '',
`op_pwd` varchar(200) NOT NULL default '',
`op_azon` char(1) NOT NULL default '',
`op_date` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY (`op_key`)
) TYPE=MyISAM AUTO_INCREMENT=21 ;

Javítás kezdete ------------------------------------->

Nézzük át röviden az újonnan létrehozott operator_tab nevű adattábla felépítését. Mint azt fentebb már említettük, ebben a táblában fogjuk tárolni azokat a kezelőket, akik az adminisztrációs felületet kezelik. A táblában lévő mezők a következők.

Név Típus Feladat
op_key int(20) A kezelő egyedi azonosítója. A későbbiekben minden mővelet során ennek segítségével lehet beazonosítani az aktuális kezelőt.
op_nev varchar(200) A kezelő nevét tárolja.
op_beoszt varchar(200) A kezelő cégen belüli beosztása kerül ebbe a mezőbe, pl.: titkár, vagy rendszergazda stb..
op_cim varchar(200) A kezelő címét fogja tárolni.
op_telszam varchar(200) A kezelő telefonszáma kerül ebbe a mezőbe.
op_user varchar(200) A kezelő személyes felhasználói nevét tárolja.
op_pwd varchar(200) A kezelő személyes jelszava kerül ebbe a mezőbe.
op_azon char(1) Ez a mező fogja tárolni a kezelő jogosultságát jelző azonosítót. Az azonosítók típusait lejjebb ismerhetjük meg.
op_date datetime A kezelő bejegyzésének dátumát és idejét tartalmazó mező.

A felhasználó jogosultságának elbírálása egyszerű. A jogosultságot az op_azon mező tárolja, mint azt fentebb már láthattuk. Ha a mező tartalma 'O', akkor a kezelő teljes jogú adminisztrátor lesz, ami azt jelenti, hogy a belépés után minden menü és opció elérhető lesz számára. Ha a mező tartalma 'A', akkor a kezelő korlátozott jogú adminisztrátorként fog dolgozni, tehát a belépés után csak bizonyos menüpontokat és opciókat érhet el. A jogosultságok kiosztását részletesebben megismerhetjük később a belépés elkészítésénél.

Hozzunk létre az új táblában két felhasználót. Ennek segítségével tudunk majd belépni, ha elkészítettük a beléptető rendszert. A felhasználók létrehozhatóak a lenti sql kódok segítségével. Az első teljes jogú felhasználó lesz, míg a második korlátozott jogokkal rendelkezik.


INSERT INTO `operator_tab` VALUES (
   '0', 'pentaschool', 'Rendszergazda', 'Budapest',
   '06063332222', 'online', 'oktatas', 'O', '2005-02-17 20:58:40');


INSERT INTO `operator_tab` VALUES (
   '0', 'pentaschool2', 'Titkárság', 'Budapest',
   '06063332223', 'online2', 'oktatas2', 'A', '2005-02-17 20:58:40');

A második tábla az események mentésére, (logolására) készül. Ha bármilyen módosító esemény történik az adatbázisban, akkor azt elmentjük, hogy a későbbiekben nyomon lehessen követni minden műveletet; a hibás műveletek esetén pedig könnyebb a helyreállítás. A tábla létrehozható a lenti sql kód alapján.


CREATE TABLE `log_tab` (
`log_key` int(20) NOT NULL default '0',
`log_log` text NOT NULL,
`log_dat` date NOT NULL default '0000-00-00',
`log_ido` time NOT NULL default '00:00:00'
) TYPE=MyISAM;

Nézzük át röviden az újonnan létrehozott log_tab nevű adattábla felépítését. Mint azt fentebb már említettük, ebben a táblában fogjuk tárolni az adminisztrációs felületen belül lezajlott eseményeket. A táblában lévő mezők a következőek.

Név Típus Feladat
log_key int(20) Az elmentett esemény egyedi azonosítója.
log_log text Az aktuális esemény szövege.
log_dat date Az esemény megtörténtének dátuma (év-hónap-nap).
log_ido time Az esemény megtörténtének ideje (óra:perc:másodperc).

<-------------------------------------Javítás vége

Az adatbázis szerkezetében mindössze ennyi módosítást hajtunk végre. Az adminisztrációs felület segítségével az összes adatbázis-elem elérhető és kezelhető lesz. Azt azonban le kell szögezni, hogy ezek az újonnan létrehozott adattáblák nem állnak kapcsolatban a webshop tábláival, csakis és kizárólag az adminisztrációs felület működéséhez szükségesek.

1. Ábra : Az shpadmin könyvtár.

Hozzunk létre egy új könyvtárat a webszerveren a neve legyen shpadmin. Ez az új könyvtár legyen a webshop könyvtárán kívül, ugyanazon a szinten. Ez nem követelmény, bárhol lehet a webszerveren belül, de akkor a programban használt fájlkezeléseknél ezt vegyük figyelembe és ennek megfelelően adjuk meg az elérési utakat. Az shpadmin könyvtárba kerül minden fájl, amit az oktatás alatt elkészítünk, tehát mindent ebben a könyvtárban mentsünk el.

Esztétikai (design) elemek:

Az adminisztrációs felületben négy egyszerű grafikai elemet fogunk használni. Lesz egy alap háttérelem a komplett html lapnak, illetve egy az adminisztráción belül. Lesz egy háttérkép a belépésnél és egy újabb a belépés után. A lenti forrás letöltése linkre kattintva letölthetőek a kész design elemek.


A webshop design fájlok letöltése: [ Forrás Letöltése ]

Tömörítsük ki a csomagot és a tartalmát másoljuk bele az shpadmin könyvtárba. Nézzük meg sorban, hogy mit is tartalmaznak ezek az image fájlok. Az első a html lap hátteréül szolgáló gif kiterjesztésű image fájl, a neve bg1.gif. A fájl ismétlődően jelenik meg háttérként és az alkalmazását majd a css fájl elkészítésekor fogjuk megismerni.

 
2. Ábra : A html lap háttere.

A második elem az adminisztrációs felületen belüli hátteret fogja biztosítani. Ez az elem szintén ismétlődésekkel jelenik meg és a css fogja megjeleníteni. Az image fájl neve bg2.gif.

 
3. Ábra : A belső oldalak háttere.

A harmadik design elemünk a belépéskor jelenik meg. Ebben az ablakban fogjuk bekérni a felhasználói nevet és a jelszót a belépés lebonyolításához. Az image fájl neve alap2.jpg és az index.php-ban fogjuk felhasználni.

 
4. Ábra : A beléptetés háttere.

A negyedik és egyben utolsó design elem a belépés utáni háttér. Ebben a háttérben fog megjelenni minden adat, gomb, stb.. A design elem neve alap1.jpg.

5. Ábra : A belső oldalak háttere.

Ezzel el is érkeztünk a design elemek felsorolásának végéhez. Természetesen tetszőlegesen lehet még több képet helyezni a programba, de mivel itt a sebesség és a könnyen kezelhetőség a fő cél, így a külalak nem annyira lényeges. Esztétikus legyen és egyszerű az elrendezés.

Css fájl elkészítése:

A design elemeket leszámítva, az adminisztrációs felület kinézetét, külalakját css kódokkal fogjuk kialakítani. A css alapokra nem térünk ki ebben az oktatásban, mivel azt előző webshop oktatásban részletesen megismertük.

Készítsünk egy új üres css fájlt az általunk használt szerkesztő program használatával. Ez akár egy sima notepad is lehet. Mentsük el az új css fájlt az shpadmin könyvtárba admin.css néven. Ebben a css fájlban fogjuk létrehozni az összes css kódot, amit az adminisztrációs felület használ majd. Kezdjük is el az elején. Rövid magyarázat után az aktuális kódrészt fogjuk látni, így könnyebb lesz a megértése.

Az első részben a body tag-ek tulajdonságait adjuk meg. Két csoportot hozunk létre, az első a külső html rész lesz, a második pedig a belső body tulajdonságait adja meg. Háttérkép, margók, text elhelyezése és a scrollbar tulajdonságai találhatóak benne.


/* webshop admin css */

/*-----------------------------------------------------------------------------*/
/************* body-k *************/
/* külso body */

.body1{ background-image: url(bg1.gif); }
/* belso body */
.body2{ background-image: url(bg2.gif); margin-top: 5px; margin-right: 5px;
margin-bottom: 5px; margin-left: 5px; background-repeat: repeat;
text-align: center; scrollbar-face-color: #DDDDDD; scrollbar-shadow-color: #DDDDDD;
scrollbar-highlight-color: #DDDDDD; scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #999999; scrollbar-track-color: #DDDDDD;
scrollbar-arrow-color: #333333; }
/*-----------------------------------------------------------------------------*/

A következő részben az adminisztrációs felületen szereplő táblázattípusokat adjuk meg, összesen kétfajta táblázattípust fogunk használni.


/*-----------------------------------------------------------------------------*/
/************* táblázatok *************/

.table1 { width: 720px; border: 1px solid #333333; background-color: #DDDDDD; }
.table2 { width: 550px; border: 1px solid #333333; background-color: #DDDDDD; }
/*-----------------------------------------------------------------------------*/

Ebben a részben az adminisztrációs felületben használt szövegformákat definiáljuk. A lent látható táblázatban vannak megjelenítve a szövegformák, hozzárendelve a css elem nevéhez.

.text1 {} sdsd
.text2 {} dsds
.text3 {} sdsd
.text4 {} dsd
.text5 {} dsd
.text6 {} sdsdsd

Minden szövegformának külön css elemet hozunk létre és más paraméterekkel látjuk el. Minden szövegformának meglesz a maga szerepe a programban.


/*-----------------------------------------------------------------------------*/
/************* szövegek *************/

.text1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; font-weight: bold; color: #999999; text-decoration: none; }
.text2 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #B30000;
font-size: 11px; font-weight: bold; text-decoration: none; }
.text3 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333;
font-size: 10px; font-weight: bold; text-decoration: none; }
.text4 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; font-weight: bold; color: #333333; text-decoration: none; }
.text5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
color: #333333; text-decoration: none; }
.text6 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
font-weight: bold; color: #F2F2F2; text-decoration: none; }
/*-----------------------------------------------------------------------------*/

A következő sorozatban az adminisztrációs felületen szereplő beviteli text mezők stílusait hozzuk létre. Minden beviteli mező css kódja után látható a megjelenő beviteli mező forma is.


/*-----------------------------------------------------------------------------*/
/************* szövegmezok *************/

.textm1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-weight: bold; color: #333333; text-decoration: none;
background-color: #DDDDDD; width: 300px; border: 1px solid #333333; }


.textm2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-weight: bold; color: #333333; text-align: center;
text-decoration: none; background-color: #DDDDDD; width: 250px;
border: 1px solid #333333; }


.textm3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-weight: bold; color: #333333; text-decoration: none;
background-color: #DDDDDD; width: 400px; border: 1px solid #333333; }


.textm4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
color: #333333; text-decoration: none; background-color: #DDDDDD;
width: 650px; height: 130px; border: 1px solid #333333; }


.textm5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
color: #333333; text-decoration: none; background-color: #DDDDDD;
width: 650px; height: 80px; border: 1px solid #333333; }


.textm6 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-weight: bold; color: #333333; text-align: center;
text-decoration: none; background-color: #DDDDDD; width: 30px;
border: 1px solid #333333; }


.textm7 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-weight: bold; color: #333333; text-align: center;
text-decoration: none; background-color: #DDDDDD; width: 90px;
border: 1px solid #333333; }


.textm8 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-weight: bold; color: #333333; text-align: center;
text-decoration: none; background-color: #DDDDDD;
border: 1px solid #333333; }


.textm9 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
color: #333333; text-decoration: none; background-color: #DDDDDD;
width: 400px; height: 100px; border: 1px solid #333333; font-weight: bold;}
/*-----------------------------------------------------------------------------*/

A fentiekben minden beviteli mező stílusát elkészítettük, most következnek az adminisztrációs felületen szereplő gombok. Ezek a gombok fogják vezérelni a programot. Az előző példákhoz hasonlóan itt is minden css kód után látható a megjelenő eredmény.


/*-----------------------------------------------------------------------------*/
/************* gombok *************/

.gomb1{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
font-weight: bold; color: #333333; text-align: center;
text-decoration: none; background-color: #DDDDDD; width: 110px;
border: 1px solid #333333; }


.gomb2{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
font-weight: bold; text-align: center; color: #333333;
text-decoration: none; background-color: #DDDDDD; width: 90px;
border: 1px solid #333333; }


.gomb3{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
font-weight: bold; text-align: center; color: #333333;
text-decoration: none; background-color: #DDDDDD; width: 300px;
border: 1px solid #333333; }


.gomb4{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
font-weight: bold; color: #333333; text-align: center; text-decoration: none;
background-color: #DDDDDD; width: 150px; border: 1px solid #333333; }
/*-----------------------------------------------------------------------------*/

A gombok után az utolsó rész következik, egy link stílus. Ez a stílus megváltoztatja a szöveg megjelenítési formáját, ha az egeret rávisszük az adott linkre, lásd a példát lent.

[:: PentaSchool Távoktatás ::]


/*-----------------------------------------------------------------------------*/
/************* linkek *************/

a.link1:link { color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; font-weight: bold; text-decoration: none; }
a.link1:visited { color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; font-weight: bold; text-decoration: none; }
a.link1:active { color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; font-weight: bold; text-decoration: none; }
a.link1:hover { color: #ffff00; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; font-weight: bold; text-decoration: none; }
/*-----------------------------------------------------------------------------*/

A css fájl ezzel el is készült. Minden stíluselemet létrehoztunk, ami az adminisztrációs felületen meg fog jelenni.


Komplett Css fájl megnyitása: [ Forrás Megtekintése ]

Természetesen menet közben tetszőlegesen bárki létrehozhat ebben a fájlban újabb stíluselemeket az oldalak megjelenésének módosítására.

JavaScript fájl elkészítése:

Az adminisztrációs felületen szereplő űrlapokat, eseményeket JavaSript függvényekkel ellenőrizzük, amit egy külön fájlban hozunk létre, és minden oldalon beágyazzuk. A javascript függvényekkel lehetőségünk lesz arra, hogy az egyes szövegmezők tartalmát kontrolláljuk, törléseknél, vagy módosításoknál figyelmeztetéseket küldjünk a felhasználó részére. A JavaScript alapokra nem térün ki, mivel a webshop oktatásban ezt is részletesen átvettük.

Hozzunk létre egy új üres JavaScript fájlt az általunk használt szerkesztőprogram segítségével, ez lehet akár egy Notepad is. Az üres fájlt mentsük el admin.js néven az shpadmin könyvtárba. Most végigmegyünk az összes függvényen, ami a fájlban szerepel és rövid magyarázatot fűzünk mindegyikhez, mint az előző css részben.

Kezdjük a JavaScript fájl elkészítését a kis ablakok nyitását végző függvények megírásával. Újonnan megnyíló kis ablakok jelennek meg bizonyos események hatására, ezeknek az ablakoknak a nyitását végzik el a függvények. A függvényben megadjuk az új ablak méreteit, elhelyezkedését a képernyőn és a keret html tulajdonságait, pl.: legyen scroll, keretgombok megléte, státusz, méretezhetőség, stb..


// Admin JavaScript
//
// kisablakok nyitása

function popup(mit) {
pwinwidth = 450 ;
pwinheight = 250 ;
winleft = 300 ;
wintop = 250 ;
winprop = 'menubar=no,scrollbars=no,resizable=no,location=no, directories=no,status=no,noresize,width='
+ pwinwidth + ',height=' + pwinheight + ',left=' + winleft
+ ',top=' + wintop ;
window.open( mit, 'popup', winprop ) ;
}


function popup2(mit) {
pwinwidth = 600 ;
pwinheight = 400 ;
winleft = (1024-pwinwidth)/2;
wintop = (768-pwinheight)/2;
winprop = 'menubar=no,scrollbars=yes,resizable=no,location=no, directories=no,status=no,noresize,width='
+ pwinwidth + ',height=' + pwinheight + ',left=' + winleft
+ ',top=' + wintop ;
window.open( mit, 'popup', winprop ) ;
}

A következő függvényt a belépéskor alkalmazzuk. Ellenőrizzük, hogy a belépési adatokat fogadó szövegmezők ki lettek-e töltve. Ha valamelyik üresen maradt, akkor hibaüzenetet küldünk a felhasználónak JavaScript alert formájában.

6. Ábra : Hibaüzenet belépéskor.


// belépés kontrol
function logincont(tex1, tex2) {
if (tex1.value == "" || tex2.value == "") {
alert("Üresen maradt beviteli mező!");
return false;
}else{
return true;
}
}

A felhasználók létrehozásánál alkalmazott kontroll függvény következik. Az űrlapon hat beviteli mező szerepel, mindet leellenőrizzük. Ha valamelyik üresen maradt, akkor hibaüzenet.


// operátor létrehozásánál ellenőrzés
function opreg_cont(tex1, tex2, tex3, tex4, tex5, tex6) {
if (tex1.value == "" || tex2.value == "" || tex3.value == ""
|| tex4.value == "" || tex5.value == "" || tex6.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else{
return true;
}
}

A következő függvényt akkor alkalmazzuk, ha valamelyik elemet törölni akarja a felhasználó. Kiírunk egy egyszerű figyelmeztetést, hogy a kiválasztott adatok törlésre kerülnek. Ebben a státuszban még visszaléphet a felhasználó a törléstől.

7. Ábra : Confirm üzenet törléskor.


// confirm törléshez
function delbizt() {
if (!confirm('FIGYELEM!\n\nA KIVÁLASZTOTT ADATOKAT TÖRÖLJÜK!!\nBIZTOSAN EZT AKARJA?')) {
return false;
}else{
return true;
}
}

A szövegek módosításánál alkalmazott függvény következik. A webshop oldalain megjelenő szövegeket is meg lehet változtatni az adminból. A szövegmezők ellenőrzésére használjuk ezt a scriptet.


// ellenőrzés, szövegek módosításához
function sovm (tex1, tex2) {
if (tex1.value == "" || tex2.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else{
return true;
}
}

A következő függvény az új szöveg bevitelénél kerül felhasználásra. Ez a script is azt ellenőrzi, hogy minden mező ki van-e töltve. Ha valamelyik üresen maradt, akkor hibaüzenet.

8. Ábra : Hibaüzenet üres mező esetén.


// ellenőrzés, új szöveg létrehozásához
function newsov (tex1, tex2, tex3) {
if (tex1.value == "" || tex2.value == "" || tex3.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else{
return true;
}
}

Felhasználó adatainak módosításához és új felhasználó létrehozásához alkalmazott függvény következik. A módosításnál ellenőrizzük a szövegmezők kitöltését: ha valamelyik üresen maradt akkor hibaüzenet. Az új felhasználó bevitelénél kontrolláljuk a szövegmezőket, a jelszavak egyezését és az e-mail cím helyességét egyaránt.

9. Ábra : Hibaüzenet, ha a jelszavak nem egyeznek.


// ellenőrzés user módosításhoz.
function usermod(text1,text2,text3,text4,text5,text6,text7,text8,text9) {
if (text1.value == "" || text2.value == "" || text3.value == "" || text4.value == ""
|| text5.value == "" || text6.value == "" || text7.value == "" || text8.value == ""
|| text9.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else{
return true;
}
}

// ellenőrzés új user létrehozásához
function nwusr(text1,text2,text3,text4,text5,text6,text7,text8,text9,text10,text11, text12,text13,text14) {
if (text1.value == "" || text2.value == "" || text3.value == "" || text4.value == ""
|| text5.value == "" || text6.value == "" || text7.value == "" || text8.value == ""
|| text9.value == "" || text10.value == "" || text11.value == "" || text12.value == ""
|| text13.value == "" || text14.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else if (text3.value != text4.value) {
alert ("A két jelszó nem egyezik!");
return false;
}else if (text13.value.indexOf('@') < 1 || text13.value.indexOf('.') < 1) {
alert ("Hibás e-mail cím!");
return false;
}else{
return true;
}
}

A felhasználói nevet és a felhasználóhoz tartozó jelszót külön lehet módosítani. Ezekhez a módosításokhoz tartoznak a következő függvények. A szövegmezőket és jelszóváltásnál a jelszavak egyezését ellenőrizzük. Hiba esetén JavaScript alert segítségével figyelmeztetjük a felhasználót.


// ellenőrzés usernév módosításhoz
function usmodct(tex1) {
if (tex1.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else{
return true;
}
}

// ellenőrzés user jelszó módosításához
function uspwdct(tex1, tex2) {
if (tex1.value == "" || tex2.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else if (tex2.value != tex1.value) {
alert ("A két jelszó nem egyezik!");
return false;
}else{
return true;
}
}

A törölt rendelések helyreállításánál alkalmazzuk a következő függvényt. A függvény kontrollálja a szövegmezőket és a tételek számánál az értéket is. Csak számot fogad el, és az érték nem lehet nulla. Ha valami nem egyezik, akkor hibaüzenet.

10. Ábra : Hibaüzenet, ha a beírt adat nem szám.


// ellenőrzés a rendelés helyreállítás első lapján
function viscont(tex1, tex2, tex3) {
adat = "1234567890";
counter = 0;
for (var i=0; i<adat.length; i++) {
if (adat.indexOf(tex3.value.charAt(i)) == -1) {
counter++;
}
}
if (tex1.value == "" || tex2.value == "" || tex3.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else if (counter != 0) {
alert ("A tételek száma, csak numerikus érték lehet!");
return false;
}else if (tex3.value == "0" || tex3.value == "00") {
alert ("A tételek száma, nem lehet nulla!");
return false;
}else{
return true;
}
}

A kosarak adatait is vissza lehet állítani az adminban, ennek az ellenőrzésére szolgál a következő JavaScript függvény. Ha üresen marad a beviteli mező, akkor hibaüzenetet küld.


// ellenőrzés a kosár helyreállítás első lapján
function kosvis(tex1, tex2) {
if (tex1.value == "" || tex2.value == "") {
alert ("Üresen maradt beviteli mező!");
return false;
}else{
return true;
}
}

Az új termék bejegyzésénél és a termék módosításánál használatos függvények következnek. Az összes szövegmezőt kontrolláljuk és ha valamelyik üresen marad, akkor a szokásos JavaScript alert módszerrel hibaüzenetet küldünk.


// ellenőrzés, termék beviteléhez
function termbev(tex1, tex2, tex3, tex4, tex5, tex6, tex7, tex8, tex9, tex10) {
if (tex1.value == "" || tex2.value == "" || tex3.value == "" || tex4.value == ""
|| tex5.value == "" || tex6.value == "" || tex7.value == "" || tex8.value == ""
|| tex9.value == "" || tex10.value == "") {
alert ("Üresen maradt beviteli mező!!");
return false;
}else{
return true;
}
}

// ellenőrzés, termék módosításához
function termmod(tex1, tex2, tex3, tex4, tex5, tex6, tex7, tex8, tex9) {
if (tex1.value == "" || tex2.value == "" || tex3.value == "" || tex4.value == ""
|| tex5.value == "" || tex6.value == "" || tex7.value == "" || tex8.value == ""
|| tex9.value == "") {
alert ("Üresen maradt beviteli mező!!");
return false;
}else{
return true;
}
}

Végezetül a termékekhez tartozó fotó módosításához tartozó ellenőrző függvény zárja a sort. Ha a beviteli mező üresen marad, akkor hibaüzenetet küldünk.


// ellenőrzés, termék képmódosításhoz
function kepmod(tex1) {
if (tex1.value == "") {
alert ("Üresen maradt beviteli mező!!");
return false;
}else{
return true;
}
}

Ezzel el is érkeztünk a JavaScript fájl elkészítésének végéhez. Ha minden függvényt beírtunk, mentsük el a fájlt. A teljes forrás egyben megtekinthető a lenti linkre kattintva.


Komplett JavaScript fájl megnyitása: [ Forrás Megtekintése ]

A JavaScript kódok természetesen tovább bővíthetőek igény szerint. Mivel ez a fájl minden megjelenítésnél be lesz ágyazva, így elég az új függvényeket ebben a fájlban létrehozni és máris működésre készek.

A következő leckében a beléptetést és a szövegkezelést fogjuk elkészíteni. A lent látható feladatokra a belső üzenő rendszeren keresztül várjuk a válaszokat. Kérjük, hogy a gyakorlati feladatok tömörítve (zip, rar) legyenek csatolva a válaszokhoz. Minden fájl mehet egyetlen tömörítésbe és a belső üzenőrendszerben a válaszok megadásánál lehet csatolni az üzenethez. Ha a csatolmány esetleg túl nagy méretű, akkor saját vagy ingyenesen regisztrált szerverre feltöltve az aktuális url-t kell csak elküldeni.




    Feladatok:

  1. Miért van szükség az adminisztrációs felületre?
  2. Milyen adatbázis elemeket hozunk létre az adminhoz?
  3. Van-e kapcsolat az új adatbázis-elemek és a webshop adatbázis-táblák között?
  4. Milyen esztétikai elemeket használunk a programban?
  5. Van-e megkötés arra, hogy az admin program milyen könyvtárba kerül?
  6. Milyen fő elemeket hozunk létre a css fájlban?
  7. Mi a szerepe a JavaScript függvényeknek a programban?
  8. Hogyan érjük el azt, hogy a JavaScript függvények minden fájlban elérhetőek legyenek?
  9. Személyes kérdés: Zavaró a tegező hangnem az oktatás alatt?
  10. Gyakorlat 1: Admin könyvtár létrehozása a webszerveren és az image fájlok bemásolása.
  11. Gyakorlat 2: Css fájl elkészítése.
  12. Gyakorlat 3: JavaScript fájl elkészítése.
  13. Egyéni feladat: Egy űrlap elkészítése lesz a feladat. Az űrlapban legyenek beviteli mezők, amiben meg lehet adni a vezeték nevet, kereszt nevet, címet, irányítószámot, telefonszámot, e-mail címet és a foglalkozást. Az űrlapot teljes egészében css segítségével kell megformázni. A szövegmezőket az elküldés pillanatában JavaScript segítségével kell ellenőrizni a következő szempontok szerint. Minden mező ki legyen töltve, e-mail címben szerepeljen a '@' és a '.' karakter, irányítószám és telefonszám csak számokat tartalmazzon. Ha minden mező rendben van, akkor azt is írassuk ki alert segítségével. A feladatra egy egyszerű példa megtekinthető a lenti linkre kattintva.
A válaszokat és a megoldásokat a belső üzenő rendszeren belül lehet elküldeni. Az elméleti válaszokat txt vagy doc formában a megoldásokkal együtt egybe tömörítve (rar, zip) lehet csatolni. A csatolt állományok nevében nem szerepelhetnek ékezetes vagy speciális karakterek és szóközök.


[ Példa megtekintése. ]




A Pentaschool Oktatási Központ bármely dokumentumának vagy dokumentum
részletének másolása kizárólag a tulajdonos írásos engedélyével történhet!

Copyright 2002-2003 Pentaschool Bt.
Minden jog fenntartva.

 
Címünk: 1051 Budapest, Sas utca 25. VI. em. Telefon/Fax: (1) 472-0679 E-mail nekünk