Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.

HTML
DOWNLOAD

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt."

Kinga Varga
9 évvel ezelőtt
Látták:

1 Csempe kalkula tor A küldetésünk az, hogy segítsünk kiszámítani egy fürdőszoba csempeszükségletét (felületét). Sőt, ha a kalkulátort használó ügyfél elégedett egyből elküldheti az címét, hogy a megadott méretek, alapján megkereshessük egy árajánlattal. A feladat rendkívül egyszerűnek tűnik. Program csempekalkulátor Be mélység, szélesség, magasság csempeszükséglet = mélység * szélesség + 2 * mélység * magasság + 2 * szélesség * magasság Ki csempeszükséglet Ha elküld akkor adat adatbázisba Program vége Persze, ha ezt az interneten szeretnénk publikálni, akkor a HTML kevés. Mire van szükségünk? HTML Tags, hiszen ezen a nyelven publikáljuk dokumentumainkat. CSS, hiszen ki kell nézni valahogy, ráadásul jól. JAVASCRIPT, hiszen számolnunk kell. PHP, MYSQL, hiszen tárolni szeretnénk a megkereséseket és majd reagálni rá. Kezdjünk hozzá: Notepad++ A későbbi kellemetlenségek elkerülése véget állítsuk be az új dokumentumok kódolását UTF-8-ra. Beállítások Program beállítások Új dokumentum/alapértelmezett mappa Kódolás UTF-8 és ugyan itt az alapértelmezett nyelv: HTML legyen. File Új dokumentum File Mentés másként index.html Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt. Kivételesen másold be az alapstruktúrát innen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <meta http-equiv="content-language" content="hu" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> </head> <body> </body> </html> Legyen a címke: Csempe kalkulátor <title>csempe kalkulátor</title>

Program csempekalkulátor Be mélység, szélesség, magasság csempeszükséglet = mélység * szélesség + 2 * mélység * magasság + 2 * szélesség * magasság Ki csempeszükséglet Ha elküld akkor adat

2 Írd ki 1-es címsorral szintén, hogy Csempe kalkulátor <h1>csempe kalkulátor</h1> Hozz létre egy űrlapot, amelyben az adatokat fogod bekérni. <form name= adat method= get action= > </form> Illessz be egy 1 soros 2 oszlopos táblát az űrlapba, legyen a szélessége 500 px. Az első cellába az A vevő címe: szöveg kerüljön. A második cellába pedig egy beviteli mezőt illessz, amelyikbe a felhasználó beírhatja az címét. <table style= width: 500px > <td> A vevő címe:</td> <td> <input name=" cim" type="text" /></td> </table> Illessz be még egy új táblázatot az űrlapba, legyen 500 px széles és 5 soros és 3 oszlopos legyen. Nézd meg a kódot és rajzold le a táblát: <table cellspacing="0" cellpadding="0" style="width: 500px"> <td style="width: 80px" colspan= 2 > Szoba adatai:</td> <td> </td> <td style="width: 80px">mélység:</td> <td><input name="me" type="text" value="" /> cm</td> <td rowspan="3" style="width: 175px" valign="top"> <div id="eredmeny"></div> </td> <td style="width: 80px">szélesség:</td> <td><input name="sz" type="text" value="" /> cm</td> <td style="width: 80px">magasság:</td> <td><input name="ma" type="text" value="" /> cm</td> <td style="width: 80px"> </td> <td> <input name="szamol" type="button" value="számol" /></td> <td class="jobbra"> <input name="elkuld" type="submit" value="elküld" /></td> </table>

A második cellába pedig egy beviteli mezőt illessz, amelyikbe a felhasználó beírhatja az e-mail címét.

3 JAVASCRIPT Notepad++ Hozz létre egy új dokumentumot és mentsd el script.js néven (Figyelj oda, hogy a file típusa javascript legyen), valamint arra is ügyelj, hogy a csempe könyvtárba kerüljön. Készítsd el a következő függvényt: function szamolj() { var e; var szoveg="<b />Szükséges csempe:<br />"; e = (adat.me.value * adat.sz.value); e += 2*(adat.me.value * adat.ma.value); e += 2*(adat.sz.value * adat.ma.value) ; szoveg = szoveg + e/ " m2"; document.getelementbyid("eredmeny").innerhtml=szoveg; Mentsd el a script.js állományt. Ahhoz azonban, hogy működjön, rá kell vennünk az index.html állományt, hogy betöltse a script.js állományt is. Valamint rá kell, hogy vegyük a számolj feliratú gombot, hogy meghívja a függvényt. Illeszd be a következő utasítást az index.html állományba. <script type="text/javascript" src="script.js"></script> Keresd meg a számolj feliratú gombot beillesztő utasítást és egészítsd ki a következő attribútummal. onclick = szamolj() Ez egy eseménykezelő tulajdonság, amely akkor hajtódik végre, amikor rákattintasz a számolj feliratú gombra kattint a felhasználó. Az teljes eseménykezelő tulajdonságlistát a oldalon találjátok. Ez itt néhány gyakran használt eseményhez a magyarázat: Eseménykezelő tulajdonság onchange onclick ondblclick onfocus onkeypress onload onunload onmouseover onmouseout végrehajtódik amikor a tartalom megváltozik egérrel kattint az objektumon egérrel duplán kattint az objektumon az objektum fókuszba kerül a billentyű meg lett nyomva az oldal vagy a kép teljesen betöltődött a felhasználó bezárta az oldalt az egér az objektum felé kerül az egér az objektumot elhagyja Mentsd el a változásokat és próbáld ki! Sajnos elég egyszerű, és ha minden jól megy, működik. A feladatod csak annyi, hogy a bevitt adatokat ellenőrizd: Az valóban formátumú-e, hiszen a valódiságát nem tudjuk ellenőrizni. A bevitt centiméter értékek valóban számok-e.

value); e += 2*(adat.sz.value * adat.ma.value) ; szoveg = szoveg + e/10000 + " m2"; document.getelementbyid("eredmeny").innerhtml=szoveg; Mentsd el a script.js állományt.

4 Az cím ellenőrzésére vedd igénybe az internetet, ha a keresőbe beírod, javascript ellenőrzés akkor, a kapott találatok között biztos találsz egy használható leírást. Hirtelen használjuk ezt: Mindig érdemes több lehetséges megoldást is megnézni, mert van köztük jobb is rosszabb is. Természetesen a megoldást adaptálni kell a mi környezetünkre, de hát csak az étteremben kapni készételt. function check() { var elsopont = document.adat. cim.value.indexof('.',0); var lastpont = document.adat. cim.value.lastindexof('.'); var kukac = document.adat. cim.value.indexof('@',0); var last_kukac = document.adat. cim.value.lastindexof('@'); var _size = document.adat. cim.value.length; if (document.adat. cim.value=='' kukac==(-1) kukac==0 elsopont==0 elsopont==(-1) (lastpont==( _size-1)) (kukac==( _size-1)) ((kukac+1)==elsopont) (kukac!=last_kukac)) { alert('hibás cím formátum!') document.adat. cim.focus() document.adat. cim.select() return false; return true; Nincs más hátra, mint rávenni az index.html, hogy valamikor meghívja az check() függvényt. Vagyis ki kellene találni, melyik eseményhez rendeld hozzá! Az eredeti feladatleírásban a <form> elhagyásakor, vagyis a submit gomb lenyomásakor az onsubmit eseményhez rendeli a függvény meghívását. De csak akkor hagyja el a <form>-t, ha a függvény visszatérési értéke true (igaz), vagyis az cím formátuma rendben van. Ekkor meghívásra kerül az action tulajdonságban leírt URL. Természetesen ez lesz a rögzítése az adatoknak. (rogzit.php) <form name="adat" method="get" action="rogzit.php" onsubmit="return check()"> A számok ellenőrzését sajnos már neked kell kitalálni. Ments és próbálkozz! Sajnos még mindig elég egyszerű, és ha minden jól megy, működik.

Természetesen a megoldást adaptálni kell a mi környezetünkre, de hát csak az étteremben kapni készételt. function emailcheck() { var elsopont = document.adat.emailcim.value.indexof('.

5 PHP, MYSQL Az utolsó feladat, hogy ha leellenőrizted a kliens oldalon az adatokat, akkor a server oldalon egy adatbázisba rögzítsd, hogy később egy ajánlattal megkereshesd a csempe iránt érdeklődőket. Notepad++ Hozz létre egy új dokumentumot. Mentsd el rogzit.php néven. Ügyelj a fájl típusára, állítsd át php-re mentéskor. Hozz létre egy adatbázist. A 000webhost.com tárhelyen 2 adatbázis létrehozására van lehetőség, de azokban korlátlan mennyiségű tábla hozható létre. Az adatbázist létrehozásakor a kapcsolathoz szükséges adatokat másold át rogzit.php állományba, és nagyon pontosan jegyzeteld is le, hiszen mindig ezekkel az adatokkal fogsz tudni csatlakozni az adatbázishoz. Indítsd el a phpmyadmin-t és importáld be az adatbázisba a csempe.sql SQL állományt. Ezzel létrehoztál egy táblát, amelyben rögzíteni fogjuk az adatokat az űrlapból. Eddig ez a rogzit.php tartalma, természetesen a te adataiddal: $mysql_host = "mysql3.000webhost.com"; $mysql_database = "a _csempe"; $mysql_user = "a _user"; $mysql_password = ""; Először a kapott adatokat kell ellenőrizni. <? if (isset($_get[" cim"]) && isset($_get["me"]) && isset($_get["sz"]) && isset($_get["ma"])) { $ cim = $_GET[" cim"]; $me = $_GET["me"]; $sz = $_GET["sz"]; $ma = $_GET["ma"]; $mysql_host = "mysql3.000webhost.com"; $mysql_database = "a _csempe"; $mysql_user = "a _user"; $mysql_password = "";?> Majd felépíteni az adatbázissal a kapcsolatot. A résznél kell folytatni $kapcsolat = mysql_connect($mysql_host, $mysql_user, $mysql_password); if (!$kapcsolat) { die("a kapcsolat az adatbázissal nem hozható létre!");

com tárhelyen 2 adatbázis létrehozására van lehetőség, de azokban korlátlan mennyiségű tábla hozható létre. Az adatbázist létrehozásakor a kapcsolathoz szükséges adatokat másold át rogzit.

6 Ha a kapcsolat rendben van, és az adatok is megérkeztek, akkor be lehet az adatokat illeszteni az adatbázisba. else { $adatbazis = mysql_select_db($mysql_database, $kapcsolat); $sql = "INSERT INTO `$mysql_database`.`csempe` "; $sql.= (` cim`, `me`, `sz`, `ma`) VALUES "; $sql.= "('$ cim', $me, $sz, $ma)"; mysql_query($sql); echo "adatok rögzítve!"; mysql_close($kapcsolat); Természetesen itt is nagyok a biztonsági problémák, hiszen a rogzit.php bárki meghívhatja és bármit átadhat a $_GET tömbbe, amit később feldolgozva kihasználhatnak rosszindulatúan. Ezért például érdemes a $_GET tömbből kivétel után, megszabadítani a STRING-eket a HTML tag-aktől így nem lehet futatható kódot elhelyezni a beviteli mezőben. Cseréld le a sorokat a biztonság kedvéért: $ cim = strip_tags($_get[" cim"]); $me = strip_tags($_get["me"]); $sz = strip_tags($_get["sz"]); $ma = strip_tags($_get["ma"]);

= "('$emailcim', $me, $sz, $ma)"; mysql_query($sql); echo "adatok rögzítve!"; mysql_close($kapcsolat); Természetesen itt is nagyok a biztonsági problémák, hiszen a rogzit.

Hasonló dokumentumok

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs

Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1 DOM események (events) JavaScriptben interaktív programok készítésére az események által vezérelt programozási modellt