2016. július 28., csütörtök

Látogatók regisztrálása

 Készítsünk egy olyan alkalmazást, mely fogadni és adatbázisban tárolni képes honlapunk látogatóinak a következő adatait (amennyiben a látogató ezeket egy űrlapon megadja és kéri a rögzítését): név, email cím, megye és IP cím. Egy IP címről csak egy adatsort fogadjon el. A megyék nevét külön táblában tároljuk, és a látogatói bejegyzéskor listából való kiválasztással lehessen rögzíteni.

A feladat megoldásának első lépéseként lépjünk be a phpMyAdmin felületre, hozzunk létre egy megye nevű táblát két mezővel. Az első azonosítója id legyen, típusa INT (egész), ne vehessen fel nulla értéket, automatikusan növekedjen, és elsődleges kulcsa legyen a táblának. A második mező azonosítója Megye és 32 karakter hosszú string típusú. Keressünk egy olyan kódtáblát, mely a magyar ékezetes betűket tudja kezelni (pl.: latin2 hungarian ci), majd mentsük a tábla struktúráját.

Írjunk egy egyszerű php kódot, mely feltölti a megye nevű táblát:


<html>
<head>
<title>Megyék</title>
</head>
<body>
<form name="" action="" method="POST">
<input type="submit" name="feltolt" value="Megyék feltöltése" />
</form>
<?php
            include("config.php");
$megyek = array("Budapest", "Baranya", "Bács-Kiskun", "Békés", "Borsod-Abaúj-Zemplén", "Csongrád", "Fejér", "Győr-Moson-Sopron", "Hajdú-Bihar", "Heves", "Jász-Nagykun-Szolnok", "Komárom-Esztergom", "Nógrád", "Pest", "Somogy", "Szabolcs-Szatmár-Bereg", "Tolna", "Vas", "Veszprém", "Zala");
            if ( isset($_POST['feltolt']) ){
                  mysql_query("TRUNCATE TABLE megye");
                  for ($i=0; $i<20; $i++){
                        $m = $megyek[$i];
                        mysql_query("INSERT INTO megye SET Megye='$m'");
                  }
            }
?>
</body>
</html>

Ha letöltjük az oldalt, azon csak egyetlen nyomógomb látható Megyék feltöltése felirattal. A nyomógomb megnyomása után először törlődik a megye tábla minden sora (TRUNCATE TABLE megye), majd a megyék nevét tartalmazó $megyek tömb minden elemét beszúrjuk a megye táblába. Az előzetes törlés biztosítja azt, hogy többszöri feltöltési kérés végrehajtása esetén is csak egyszer lesznek a megyék a táblába beírva.

Újra lépjünk be a phpMyAdmin felületre és hozzunk létre egy latogato nevű táblát a következő mezőkkel: id, LNev, Email, Megye, IP.
-         Az id a tábla elsődleges kulcsa, INT típúsú,
-         LNev a látogató neve, 32 karakter hosszúságú sztring,
-         EMail a látogató email címe, 48 karakter hosszúságú sztring,
-         Megye a látogató megyéjének id azonosítója, INT típusú,
-         IP a látogató IP címe, 15 karakter hosszú sztring.

Ezek után hozzáláthatunk az adatbeviteli felület kialakításához. A képernyő bal oldalán listadobozból lehessen kiválasztani a már regisztrált felhasználókat. Ha a listából kiválasztunk egy nevet, akkor jobb oldalon jelenjenek meg a kiválasztott felhasználó adatai. Ha a lista első, Válassz/Új! elemére kattintunk, akkor lehessen új felhasználót felvinni az adatbázisba. A lap alján táblázatos formában jelenjen meg az összes, már rögzített felhasználó, minden adatával. Először készítsük el a következő beviteli felületet kialakító html kódot:


Az oldal listája:


<html>
<head>
<title>Látogatók</title>
</head>
<body bgcolor="#eeeeee">
<blockquote><blockquote>
<h2>A honlap regisztrált látogatói:</h2>
</blockquote></blockquote>
<table border="1" bordercolor="#ffffff" cellpadding="10" cellspacing="0">
<tr>
            <td>
            <form name="" action="" method="POST">
            <select name="latoid" size="21" />
            <option selected value="valassz" />Válassz/Új!
            </select>
            </td>
            <td valign="top">
                  <table border="1" bordercolor="#ffffff" cellpadding="10" cellspacing="0">
                  <tr>
                        <td align="right"><b>id:</td>
                        <td><input type="text" name="lnev" size="22" disabled="disabled"></td>
                  </tr>

                  <tr>
                        <td align="right"><b>A látogató neve:</td>
                        <td><input type="text" name="lnev" size="22"></td>
                  </tr>
                  <tr>
                        <td align="right"><b>e-mail címe:</td>
                        <td><input type="text" name="email" size="22" value=""></td>
                  </tr>
                  <tr>
                        <td align="right"><b>Megye:</td>
                        <td><select name="megyeid" /><option selected value="valassz" />Válassz!</select></td>
                  </tr>
                  <tr>
                        <td colspan="2" align="center"><input type="submit" name="mentes" value="Az adatok mentése"></td>
                  </tr>
                  </table>
            </td>
</tr>
</table>
<br /><br />
<table border="1" bordercolor="#ffffff" cellpadding="4" cellspacing="0">
<tr>
            <th>id</th>
            <th>A látogató neve:</th>
            <th>e-mail:</th>
            <th>Megye:</th>
            <th>IP-cím:</th>
</tr>
</table>
</form>
</body>
</html>

Mivel az alkalmazás ezt az űrlapot mindig a képernyőn tartja, a html listát csak beszúrt php kódokkal fogjuk dinamikussá tenni. Ha az alkalmazás dinamikusan cserélné a teljes képernyő tartalmat, akkor szinte minden sorának php kódokat kellene tartalmaznia.

A bővítési helyek és tartalmak:
- A html lista elejére a mentési rutinokat helyezzük. Ha új látogatót veszünk fel, akkor az sql parancs INSERT, ha meglévőt javítunk, akkor UPDATE.
- A listadoboz onclick eseményéhez form submit-ot rendelünk, ezáltal az listaelemeken való kattintásra a lap kérést küld a szervernek, az aktív elemek beállított értékeinek POST-olásával.
- A listadoboz elemeit a latogato tábla LNev mezőivel töltjük fel.
- Az űrlap további mezőit a kiválasztott látogató lekérdezett adatival töltjük fel.
- A megyéket tartalmazó listát a megye tábla Megye mezőivel töltjük fel és a kiválasztott látogató megyéje szerint történik a select beállítása.
- Az űrlap alatti táblázat sorait a latogato táblán futtatott lekérdezés eredménytáblájának while-al történő feldolgozásával töltjük fel.

A megjelenő adatok mindegyikét ki kell tölteni, hogy a felvétel megtörténjen. Az id bevitelére nincs lehetőség, a neki megfelelő beviteli mező disabled tulajdonsága be van állítva. Mivel felvettünk négy látogatót, a beviteli felület alján az összes rögzített adat id szerint rendezve egy táblázatban látható.


            Nézzük az ezt megvalósító listát:


<?php
            include("config.php");
            $lid = $_POST['latoid'];
            $lnev = $_POST['lnev'];
            $email = $_POST['email'];
            $megye = $_POST['megyeid'];
            if ( isset($_POST['mentes']) && ($_POST['latoid'] == "valassz") && ($_POST['lnev'] !== "") && ($_POST['email'] !== "") && ($_POST['megyeid'] !== "valassz") ){
                  mysql_query("INSERT INTO latogato SET LNev='$lnev', EMail='$email', Megye='$megye'");
            }
            if ( isset($_POST['mentes']) && ($_POST['latoid'] !== "valassz") && ($_POST['lnev'] !== "") && ($_POST['email'] !== "") && ($_POST['megyeid'] !== "valassz") ){
                  mysql_query("UPDATE latogato SET LNev='$lnev', EMail='$email', Megye='$megye' WHERE id='$lid'");
            }
?>
<html>
<head>
<title>Látogatók</title>
</head>
<body bgcolor="#eeeeee">
<blockquote><blockquote>
<h2>A honlap regisztrált látogatói:</h2>
</blockquote></blockquote>
<table border="1" bordercolor="#ffffff" cellpadding="10" cellspacing="0">
<tr>
            <td>
            <form name="" action="" method="POST">
            <select name="latoid" size="21" onclick="this.form.submit()" />
            <option selected value="valassz" />Válasszj!
            <?php
                  $eredm = mysql_query("SELECT * FROM latogato ORDER BY LNev");
                  while ( $sor = mysql_fetch_object($eredm) ){
                        print "<option value=\"$sor->id\"";
                        if ( (isset($latoid) && $latoid == $sor->id) ){
                             print " selected";
                        }
                        print "> $sor->LNev\n";
                  }
            ?>
            </select>
            </td>
            <?php
if ( isset($_POST['latoid']) ){
                        $lid = $_POST['latoid'];
                        $eredm = mysql_query("SELECT * FROM latogato WHERE id='$lid'");
                        $sor = mysql_fetch_object($eredm);
                        $lnev = $sor->LNev;
                        $email = $sor->EMail;
                        $megye = $sor->Megye;
                  }
            ?>
            <td valign="top">
<table border="1" bordercolor="#ffffff" cellpadding="10" cellspacing="0">
                  <tr>
                        <td align="right"><b>id:</td>
                        <td><input type="text" name="lnev" size="3" <?php print "value=\"$lid\" ";?> disabled="disabled"></td>
                  </tr>
                  <tr>
                        <td align="right"><b>A látogató neve:</td>
                        <td><input type="text" name="lnev" size="22" <?php print "value=\"$lnev\" ";?> ></td>
                  </tr>
                  <tr>
                        <td align="right"><b>e-mail címe:</td>
                        <td><input type="text" name="email" size="22" <?php print "value=\"$email\" ";?> ></td>
                  </tr>
                  <tr>
                        <td align="right"><b>Megye:</td>
                        <td><select name="megyeid" /><option selected value="valassz" />Válassz!
                        <?php
                             $eredm = mysql_query("SELECT * FROM megye");
                             while ( $sor = mysql_fetch_object($eredm) ){
                                   print "<option value=\"$sor->id\"";
                                   if ( ($megye == $sor->id) ){
                                         print " selected";
                                   }
                                   print "> $sor->Megye\n";
                             }
                        ?>
                        </select></td>
                  </tr>
                  <tr>
                        <td colspan="2" align="center"><input type="submit" name="mentes" value="Az adatok mentése"></td>
                  </tr>
                  </table>
            </td>
</tr>
</table>
<br /><br />
<table border="1" bordercolor="#ffffff" cellpadding="4" cellspacing="0">
<tr>
            <th>id</th>
            <th>A látogató neve:</th>
            <th>e-mail:</th>
            <th>Megye:</th>
            <th>IP-cím:</th>
</tr>
<?php
            $eredm = mysql_query("SELECT * FROM latogato");
            while ( $sor = mysql_fetch_object($eredm) ){
                  print "<tr>";
                        print "<td>$sor->id</td>";
                        print "<td>$sor->LNev</td>";
                        print "<td>$sor->EMail</td>";
                        $megye = $sor->Megye;
                        $ered = mysql_query("SELECT * FROM megye WHERE id='$megye'");
                        $sora = mysql_fetch_object($ered);
                        print "<td>$sora->Megye</td>";
                        print "<td>&nbsp;$sor->IP</td>";
                  print "</tr>";
            }
?>
</table>
</form>
</body>
</html>

Ezek után már csak egy feladat van hátra. Meg kell oldani a kliens IP címének lekérdezését és tárolását, illetve megakadályozni azt, hogy ugyanarról a címről több felhasználói bejegyzést is lehessen tenni. Ehhez a lista elején lévő php kódot kell a következőképpen kiegészíteni:


<?php
      $ip = $_SERVER['REMOTE_ADDR'];
            include("config.php");
            $lid = $_POST['latoid'];
            $lnev = $_POST['lnev'];
            $email = $_POST['email'];
            $megye = $_POST['megyeid'];
            $ered = mysql_query("SELECT * FROM latogato WHERE IP='$ip'");
            $sszama = mysql_num_rows($ered);
            $sszama = $sszama+0;
            if ( ($sszama == 0) && isset($_POST['mentes']) && ($_POST['latoid'] == "valassz") && ($_POST['lnev'] !== "") && ($_POST['email'] !== "") && ($_POST['megyeid'] !== "valassz") ){
                  mysql_query("INSERT INTO latogato SET LNev='$lnev', EMail='$email', Megye='$megye', IP=’$ip’");
            }
            if ( isset($_POST['mentes']) && ($_POST['latoid'] !== "valassz") && ($_POST['lnev'] !== "") && ($_POST['email'] !== "") && ($_POST['megyeid'] !== "valassz") ){
                  mysql_query("UPDATE latogato SET LNev='$lnev', EMail='$email', Megye='$megye', IP=’$ip’ WHERE id='$lid'");
            }
?>

Nincsenek megjegyzések:

Megjegyzés küldése