MyCity » Web dizajn / HTML » Pomoć oko login forme PHP+jQuery

Pomoć oko login forme PHP+jQuery

Napisano na dan: 12.10.2012
1

Pomoć oko login forme PHP+jQuery
Sledeća strana Pagination

Idi na vrh

Poslao: 12 Okt 2012 06:39
Idi na vrh
offline
  • Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
  • Pridružio: 13 Jun 2010
  • Poruke: 307
  • Gde živiš: Subotica

Treba mi pomoć pošto radim u Javascriptu i PHP-u.
Naime moj Javascript kod koji sam "maznuo" sa interneta izgleda ovako:

  1. <script>
  2. $(document).ready(function() {
  3.    $("#submit").click(function() {
  4.    
  5.       var action = $("#login").attr('action');
  6.       var form_data = {
  7.          username: $("#username").val(),
  8.          password: $("#password").val(),
  9.          is_ajax: 1
  10.       };
  11.       $.ajax({
  12.          type: "POST",
  13.          url: action,
  14.          data: form_data,   
  15.          success: function(response)
  16.          {
  17.                if(response == 'success')
  18.                      $("#login").slideUp('slow', function() {
  19.                         $("#message").html("<div>Prijava je uspešna!</div><meta>");
  20.                      });
  21.                   else
  22.                      $("#message").html("<div>Pogrešno korisničko ime i šifra!</div>");         
  23.          }         
  24.       });
  25.       
  26.       return false;
  27.    });
  28.    
  29. });
  30. </script>


PHP forma izgleda ovako:

  1. if(isset($_REQUEST['is_ajax']) && $_REQUEST['is_ajax'])
  2.    {
  3.       $username = $_REQUEST['username'];
  4.       $password = $_REQUEST['password'];
  5.       
  6.       if($username == 'demo' && $password == 'demo')
  7.       {
  8.          echo "success";   
  9.       }
  10.    }

a HTML ovako:

  1. <div>
  2.   <h1>Login Form</h1>
  3.   <form>
  4.     <p>
  5.       <label>Username: </label>
  6.       <input>
  7.     </p>
  8.     <p>
  9.       <label>Password: </label>
  10.       <input>
  11.     </p>
  12.     <p>
  13.       <input>
  14.     </p>
  15.   </form>
  16.     <div></div>
  17. </div>

A to sve zajedno izgleda ovako: http://blog.webwizo.com/demo/login_jquery_ajax/

Dodao sam malo i CSS3 pa izgleda super. Ovo koristim za ulazak u administrativni panel na jednom mom CMS-u ali ako bi mi neko od vas prijatelja hteo pomoći da dogradim u jQuery poruku i formu gde će pisati obaveštenje: "Polja nisu popunjena".

jQuery najslabije poznajem ali ako treba zauzvrat pomoć oko HTML, PHP, CSS tu sam...
Hvala!



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 12 Okt 2012 11:05
Idi na vrh
offline
  • Pridružio: 10 Avg 2006
  • Poruke: 1009
  • Gde živiš: Beograd

  1. <script>
  2. $(document).ready(function() {
  3.    $("#submit").click(function() {
  4.     var username = $("#username").val();
  5.     var password = $("#password").val();
  6.     if (username == "" || password = "") {
  7.     $("#message").html("<div>Morate uneti i korisničko ime i lozinku!</div>");
  8.     return;
  9.     }
  10.  
  11.       var action = $("#login").attr('action');
  12.       var form_data = {
  13.          username: username,
  14.          password: password,
  15.          is_ajax: 1
  16.       };
  17.       $.ajax({
  18.          type: "POST",
  19.          url: action,
  20.          data: form_data,   
  21.          success: function(response)
  22.          {
  23.                if(response == 'success')
  24.                      $("#login").slideUp('slow', function() {
  25.                         $("#message").html("<div>Prijava je uspešna!</div><meta>");
  26.                      });
  27.                   else
  28.                      $("#message").html("<div>Pogrešno korisničko ime i šifra!</div>");         
  29.          }         
  30.       });
  31.        
  32.       return false;
  33.    });
  34.    
  35. });
  36. </script>
Poslao: 12 Okt 2012 14:11
Idi na vrh
offline
  • Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
  • Pridružio: 13 Jun 2010
  • Poruke: 307
  • Gde živiš: Subotica

Ne radi na žalost. Umesto da unutar koda odradi poziv za PHP stranicu, on se prebaci na login.php

Poslao: 12 Okt 2012 14:45
Idi na vrh
offline
  • Pridružio: 10 Avg 2006
  • Poruke: 1009
  • Gde živiš: Beograd

Promeni u HTML-u vrstu dugmeta iz "submit" u "button"

Poslao: 12 Okt 2012 15:34
Idi na vrh
offline
  • Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
  • Pridružio: 13 Jun 2010
  • Poruke: 307
  • Gde živiš: Subotica

Napisano: 12 Okt 2012 15:18

igorpan ::Promeni u HTML-u vrstu dugmeta iz "submit" u "button"

Svaka čast! Radi!
Još mi je malo konfuzan jQuery, neke sitnice znam ali nisam ulazio u dublja programiranja.
Sad kako se sve više traži moraću se malo više posvetiti jQuery-u.
Hvala ti!

Dopuna: 12 Okt 2012 15:34

Na kraju evo i moje konačne forme.
Shvatio sam sintaksu i još sam malo "unapredio" kod.

  1. <script>
  2. $(document).ready(function() {
  3.    $("#submit").click(function() {
  4.     var username = $("#username").val();
  5.     var password = $("#password").val();
  6.    if (username == "" & password == "")
  7.    {
  8.       $("#message").fadeTo(0, 0);
  9.       $("#message").fadeTo("slow", 1).html("<center><div>Morate uneti i korisničko ime i šifru!</div></center>");
  10.       return;
  11.    }
  12.    else if (username == "")
  13.    {
  14.       $("#message").fadeTo(0, 0);
  15.       $("#message").fadeTo("slow", 1).html("<center><div>Zaboravili ste uneti korisničko ime!</div></center>");
  16.       return;
  17.    }
  18.    else if(password == "")
  19.    {
  20.       $("#message").fadeTo(0, 0);
  21.       $("#message").fadeTo("slow", 1).html("<center><div>Zaboravili ste uneti šifru!</div></center>");
  22.       return;
  23.    }
  24.  
  25.       var action = $("#login").attr('action');
  26.       var form_data = {
  27.          username: username,
  28.          password: password,
  29.          is_ajax: 1
  30.       };
  31.       $.ajax({
  32.          type: "POST",
  33.          url: action,
  34.          data: form_data,   
  35.          success: function(response)
  36.          {
  37.           $("#message").fadeTo(0, 0);
  38.                if(response == 'success')
  39.                      $("#login").slideUp('slow', function() {
  40.                         $("#message").fadeTo("slow", 1).html("<meta><center><div>Uspešno ste se prijavili.<br>Molimo sačekajte koji tren da verifikujemo podatke.</div></center>");
  41.                      });
  42.                   else
  43.                      $("#message").fadeTo("slow", 1).html("<center><div>Vaš e-mail ili šifra nisu ispravni.<br>Unesite pravilno korisničko ime i šifru.</div></center>");         
  44.          }         
  45.       });
  46.        
  47.       return false;
  48.    });
  49. });
  50. </script>
Poslao: 12 Okt 2012 15:50
Idi na vrh
offline
  • Pridružio: 10 Avg 2006
  • Poruke: 1009
  • Gde živiš: Beograd

jQuery je jako jednostavan, tj i napravljen je da pojednostavi manipulisanje HTML elementima preko javascripta. Jako ćeš se brzo navići i videti koliko su neke stvari za koje si ranije morao da pišeš cele funkcije sada jednostavnije. Da ne pominjem "chaniability" tj vezivanje stvari.

Recimo

  1. $("#elementId").fadeIn(500).animate({ left : 300 },500).animate({color : #F00},500).fadeOut(500)


Zamisli koliko bi koda morao preko "čistog" javascripta da pišeš da bi napravio ovako element koji se polako pojavi pa proleti po stranici pa polako pretopi boju u crvenu pa iščezne.

CSS3 tu pomaže, ali nije niti gotov niti podržan još svuda Smile

Poslao: 12 Okt 2012 16:21
Idi na vrh
offline
  • Pridružio: 05 Maj 2010
  • Poruke: 112

Ma Jquery je smešan, svaka metoda sama objasni šta radi...

Poslao: 13 Okt 2012 16:40
Idi na vrh
offline
  • Web Designer, PHP Developer; HTML, CSS, SQL, jQuery Programmer
  • Pridružio: 13 Jun 2010
  • Poruke: 307
  • Gde živiš: Subotica

Jeste smešan i jednostavan ali mene zeza ponekad kada nešto napišem pa neće da radi a nema nikakav DEBUG da znam gde sam pogrešio. Sa PHP-om je bar lako kada pogrešiš ispiše ti i linije i gde je grešlka a jQuery prosto ne radi.

Sad opet se vraćam na ovu priču, na FireFox i IE mi ne radi refresh. Ja sam ubacio običan HTML refresh ali ne radi. Pa sam ubacio i u jQuery-u refresh opciju ali ne radi. Šaljem opet moju "dopingovanu" skriptu.

  1. <script>
  2. $(document).ready(function() {
  3.    $("#submit").click(function() {
  4.     var username = $("#username").val();
  5.     var password = $("#password").val();
  6.    if (username == "" & password == "")
  7.    {
  8.       $("#message").fadeTo(0, 0);
  9.       $("#message").fadeTo("slow", 1).html("<center><div>Morate uneti i korisničko ime i šifru!</div></center>");
  10.       return;
  11.    }
  12.    else if (username == "")
  13.    {
  14.       $("#message").fadeTo(0, 0);
  15.       $("#message").fadeTo("slow", 1).html("<center><div>Zaboravili ste uneti korisničko ime!</div></center>");
  16.       return;
  17.    }
  18.    else if(password == "")
  19.    {
  20.       $("#message").fadeTo(0, 0);
  21.       $("#message").fadeTo("slow", 1).html("<center><div>Zaboravili ste uneti šifru!</div></center>");
  22.       return;
  23.    }
  24.  
  25.       var action = $("#login").attr('action');
  26.       var form_data = {
  27.          username: username,
  28.          password: password,
  29.          is_ajax: 1
  30.       };
  31.       $.ajax({
  32.          type: "POST",
  33.          url: action,
  34.          data: form_data,   
  35.          success: function(response)
  36.          {
  37.           $("#message").fadeTo(0, 0);
  38.                if(response == 'success')
  39.                      $("#login").slideUp('slow', function() {
  40.                         $("#message").fadeTo("slow", 1).html("<meta><center><div>Uspešno ste se prijavili.<br>Molimo sačekajte koji tren da verifikujemo podatke.</div></center>");
  41.                    
  42.                   /* OVDE SAM UBACIO REFRESH DEO */
  43.                 $("#submit").click(function() {
  44.                 delay(4000).location.reload();
  45.             });
  46.            /* Treba da posle 4 sekunde osveži index.php */
  47.  
  48.                      });
  49.                   else
  50.                      $("#message").fadeTo("slow", 1).html("<center><div>Vaš e-mail ili šifra nisu ispravni.<br>Unesite pravilno korisničko ime i šifru.</div></center>");         
  51.          }         
  52.       });
  53.        
  54.       return false;
  55.    });
  56. });
  57. </script>


Treba da posle 4 sekunde osveži index.php
Nervira me već... Smile

Poslao: 13 Okt 2012 19:29
Idi na vrh
offline
  • Pridružio: 16 Jan 2010
  • Poruke: 241
  • Gde živiš: Zemun

Aj pokušaj ovako umesto:

  1. /* OVDE SAM UBACIO REFRESH DEO */
  2.               $("#submit").click(function() {
  3.               delay(4000).location.reload();
  4.           });
  5.          /* Treba da posle 4 sekunde osveži index.php */


ubaci ovo:

  1. setTimeout(function(){location.reload();},4000);

Ovako kako si ti napisao da bi odradio relaod stranice korisnik bi ponovo morao da klikne na dugme i čudi me kako i radi u nekim browser-ima.

Poslao: 13 Okt 2012 22:20
Idi na vrh
offline
  • Pridružio: 10 Avg 2006
  • Poruke: 1009
  • Gde živiš: Beograd

Ima debug preko "Firebug" plugina za Firefox, dok Chrome/Chromium imaju ugrađen u sebi. Ja sam nekako navikao da čak i PHP debugujem preko "echo" naredbe pa za javascript koristim "console.log" odnosno "console.debug" kada testiram na Firefoxu.

Što se tiče konkretno novog problema,jQuery vidim da nisi skontao još potpuno Wink
Ne možeš da pozoveš "delay(4000).location.reload();" tek tako. Sve jQuery funkcije moraju biti pozvane na jQuery objektu tj na "$".

Ovo što ti je cvrle predložio je tačno ono što ti treba. Tebi je cela funkcija već event handler za klik na submit dugme, nema potrebe opet da ubacuješ '$("#submit").click'.

Da malo zakomplikujem priču, zatrebaće ti pre ili kasnije: vezivanje funkcija za evente na elementima u novijim verzijama jQuery (mislim od 1.7+) je kumulativno što bi značilo:

  1. $("#elementId").click(function() {
  2.     alert("Prvi");
  3. });
  4. $("#elementId").click(function() {
  5.     alert("Drugi");
  6. });

Pri kliku na element taj će ti se pojaviti oba alerta, dok bi se u starijim verzijama samo poslednja funkcija pokrenula. U novom ukoliko želiš da očistiš prethodno vezane funkcije moraš koristiti ".unbind".

Nije vezano za tvoj problem konkretno, ali je nešto oko čega sam se ja dugo lomio dok nisam saznao da su to promenili pa ne može da škodi Wink

MyCity » Web dizajn / HTML » Pomoć oko login forme PHP+jQuery

Ko je trenutno na forumu
 

Ukupno su 1072 korisnika na forumu :: 95 registrovanih, 8 sakrivenih i 969 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: A.R.Chafee.Jr., acatomic, acov34, Adaminho1985, AMCXXL, Arsenije, Automaticar, Bojke549, Bole72, bolimejoli, boromir, Brot, Carl Gustaf, Chainsaw, coaaco, comi, cvrle312, Dambi, damirZR, darionis, delrey, Denaya, djordje92sm, DovlaODR, Draganeli, Dragon Order, dulleo, francis begbie, Frunze, g_g, GveX, HrcAk47, icemilos, ikan, Jakonjveliki, JimmyNapoli, Kajzer_Soze, Koja79, koom0001, Kubovac, kybonacci, lucko1, Magarac, mane123, Manjane, marko308, markomacii9, mat, mercedesamg, Mercury, mgolub, Miki 84, mikrimaus, milenko crazy north, Milo97, Najax, nazgul75, nemkea71, nenooo, opt1, Papadubi, pceklic, Pilence, pobeda, probisic, proka89, R_038, rakivan, Raso75, rebro1974, Recce, redstar011, Romuluss, rovac, royst33, savuni, Sir Budimir, sova72, SOVO515, Strasni JA, strelac07, Toper, vaso1, vathra, veljkovicdani, Vlada1389, vuksa72, Vzor50, Wrangler, XBMC, Yellow Pinky, zauzet, Zukov, šumar bk2, 1107