php - Fancybox som login - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php mysql fancybox

Bruger #17072 @ 18.05.12 19:46

Hej
Jeg er igang med at lave et stor mængde ændringer på en gaming community og i den forbindelse vil jeg gerne slippe for at man skal hoppe ind i en fil hvor man skriver brugernavn og password, så sendes man videre til en fil der logger brugeren på, hvis dennes data findes i databasen. Til sidst sendes man til forsiden og der skrives LOGIN_SUCCESS i adresselinjen.
Jeg har før forsøgt mig med at lave login via fancybox, hvor jeg har brugt den funktion der åbner linket i en iframe, og man bliver skam også logget ind, problemet er bare at bruger får vist forsiden i det lille fancybox vindue og så selv skal lukke ned og reloade siden.
Lige nu laver jeg login således:
inc/login.php

HTML kode

 <form action="../admin/auth.php" method="post">
 Brugernavn: <input type="text" name="username" />
 Password: <input type="password" name="password" />
 <input type="submit" name="submit" value="Log ind" />
 <input type="button" name="tilbage" value="Tilbage" onClick="window.location.href='../index.php'" />
 </form>

admin/auth.php

PHP kode

 <?php
  session_start();
  
  include '../inc/connect.php';
  
 //Husk at sikrer dine ting imod SQL Injections
  $username = mysql_real_escape_string($_POST['username']);
  $password = mysql_real_escape_string($_POST['password']);
  
 //Lav en query der henter den ønskede bruger i stedet for alle sammen
  $data = mysql_query("SELECT * FROM login WHERE username = '" . $username . "' AND password = '" . md5($password) . "'") or die(mysql_error());
 
  if ($info = mysql_fetch_array($data))
  {
     //Hvis brugeren findes bliver de logget ind
     $_SESSION['loggedin'] = 1;
     $_SESSION['username'] = $info['username'];
     
     //gem brugerens gruppe
     $_SESSION['usergroup'] = $info['usergroup'];
 
 
     //redirect til index uden fejl
     $succes = 'LOGIN_SUCCESS';
     header('Location: ../index.php?msg=' . $succes);
  }
  else
  {
     //Redirect til index med fejl besked.
     $error = 'LOGIN_FAILED_NO_MATCH_FOUND';
     header('Location: ../index.php?msg=' . $error);
  }
 ?>

Lige nu sendes de alle mulige steder hen. Hvis man kunne lave det inden i fancybox, og så når login er udført, automatisk lukke fancybox igen derefter reloade den side de var på.
Har hørt noget omkring noget der hedder AJAX, som skulle være en eller anden speicel form for javascript, men har aldrig rigtig stiftet bekendskab med det.
Hvordan laver jeg bedst det login, så det virker ordentligt?

2 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #16824 @ 19.05.12 13:29

Hej Kenneth.

Jeg ville nok starte med at samle det lidt sammen, hvis du gerne vil have en mere dynamisk oplevelse.

For det første ville jeg ikke bruge iframe til login, da den, netop som du siger, kun arbejder indeni sin egen frame.

Så jeg ville benytte en division (div) i stedet, den skjuler man så den kun kommer frem når den åbnes i fancybox, det er der en funktion (i fancybox) til.

I og med det er en div, arbejdes der med content i samme html dokument.

Derefter ville jeg gøre sådan at det er samme php side der tager i mod login requests. Så skal man nemlig ikke rundt på flere sider for at logge ind.

Eksmpel på index.php:

PHP kode

 <?php
 require 'admin/auth.php';
 
 if($_GET['action'] == 'login'){
 $username = $_POST['username'];
 $password = $_POST['password'];
 if(login($username,$password)){
  // LOGGET IND!
 } else{
  // Ikke logget ind.
 }
 }
 
 ?>
 <html>
 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 
 <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
 </head>
 <body>
 
 <?php if($_SESSION['logget_ind']){
   echo '<a id="inline" href="#login">LOGIN</a>';
 ?>
 
 <div style="display:none;">
 <div id="login">  
  <form action="?action=login" method="post">
     Brugernavn: <input type="text" name="username" />
     Password: <input type="password" name="password" />
     <input type="submit" name="submit" value="Log ind" />
     </form>
 </div>
 </div>
 </body>

Bemærk at jeg kaldte auth.php internt i stedet for at sende brugeren derhen, det kræver at vi retter i auth.php så der er en funktion vi kan kalde:

auth.php

PHP kode

 <?php
 function login($username,$password){
     session_start();
     include '../inc/connect.php';
     //Husk at sikrer dine ting imod SQL Injections
        //$username = mysql_real_escape_string($_POST['username']);
        //$password = mysql_real_escape_string($_POST['password']);
     //Lav en query der henter den ønskede bruger i stedet for alle sammen
     $data = mysql_query("SELECT * FROM login WHERE username = '" . $username . "' AND password = '" . md5($password) . "'") or die(mysql_error());
     if ($info = mysql_fetch_array($data))
     {
     //Hvis brugeren findes bliver de logget ind
     $_SESSION['loggedin'] = 1;
     $_SESSION['username'] = $info['username'];
     //gem brugerens gruppe
     $_SESSION['usergroup'] = $info['usergroup'];
     //redirect til index uden fejl
     /*$succes = 'LOGIN_SUCCESS';
       header('Location: ../index.php?msg=' . $succes);
     */
     return true;
     }
     else
     {
     //Redirect til index med fejl besked.
 
     /*$error = 'LOGIN_FAILED_NO_MATCH_FOUND';
       header('Location: ../index.php?msg=' . $error);
     */
     return false;
     }
 }
 ?>

Bemærk at jeg har skrevet koden frit her i kommentar feltet (og lidt forhastet), koden er derfor ikke testet og der er risiko for syntaksfejl. Men det er den overordnede fremgangsmetode jeg ville bruge.

Håber det hjælper.

---

Nå ja!

AJAX er ikke en speciel form for JavaScript, det er nærmere en række metoder man kan bruge til at sende pakker asynkront med det der vises i browseren (Altså at det sker 'bag ved' om man vil). Det vil egentlig bare sige at man fx kunne sende loginoplysninger til din auth.php uden at behøve at genindlæse index.php.

Ajax er meget simpelt, hvis man kan javascript og w3schools.com/ajax kan anbefales.

Indlæg senest redigeret d. 19.05.2012 13:32 af Bruger #16824

Bruger #17072 @ 19.05.12 21:13

152

SÅ fik jeg det til at virke. Har dog ikke lavet min auth.php om til en funktion endnu, men det bliver måske lavet senere. Ville lige have alt til at virke først.
Men tak for hjælpen.
Her er lige en lille tilføjelse til hvordan det kom til at virke.
Login link

HTML kode

 <a class="fancybox" href="#login">Log ind</a>

Alt i forbindelse med fancybox i head:

HTML kode

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <link rel="stylesheet" href="jscripts/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />
 <script type="text/javascript" src="jscripts/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script>
 <script type="text/javascript">
         $(document).ready(function() {
                 $(".fancybox").fancybox({
                         maxWidth    : 500,
                         maxHeight    : 500,
                         fitToView    : false,
                         width        : '70%',
                         height        : '70%',
                         autoSize    : false,
                         closeClick    : false,
                         openEffect    : 'elastic',
                         closeEffect    : 'elastic'
                 });
         });
 </script>

Uden det sidste <script></script> ville det ikke virke.

Fancybox som login

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler