Share
Graag presenteer ik u deel één van een tweedelige serie over het maken van een fotosite met behulp van PHP, jQuery en AJAX. Oorspronkelijk was ik van plan om de hele tutorial in één screencast te passen, maar dat werd al snel een pijprus toen ik me realiseerde dat er gewoon te veel te coveren was. Niettemin, zelfs als je alleen deze eerste video bekijkt, zou je veel moeten leren.
We halen afbeeldingen op uit een database, maken een eenvoudig loginformulier met authenticatie en zorgen ervoor dat onze database asynchroon wordt bijgewerkt. Klinkt goed? Als dat zo is, laten we erin stappen.
Voor deze les is ons doel om een gedeelte voor fotobeheer te maken waarin een beheerder foto's uit een database kan ophalen en de titel van zijn foto's kan bijwerken door op de betreffende tekst te klikken. Om deze pagina veiliger te maken, maken we ook een eenvoudig lidmaatschapssysteem. In volgende zelfstudies zullen we deze concepten verder uitdiepen.
Open PHPMyAdmin en maak een database met de naam "db". In deze database moeten we twee tabellen toevoegen: 'foto's' en 'gebruikers'.
In plaats van onze afbeeldingen hard te coderen in ons document, slaan we ze op in een database. Hoewel we deze tabel zo geavanceerd kunnen maken als we willen, houden we het eenvoudig voor nu.
Om onze foto's te kunnen bewerken, moeten we een eenvoudig lidmaatschapsysteem maken waarmee onze gebruiker kan inloggen en zijn foto's kan bewerken. We willen duidelijk niet iedereen gelijk geven!
Maak een nieuw php-document en voeg het volgende toe aan uw document.
Mijn fotosite
Maak je niet al te veel zorgen om wat van wat hier is. We zullen alles op tijd bespreken. Maar als snel overzicht importeren we onze jQuery-bibliotheek, een jQuery-lightbox-plug-in en onze aangepaste scripts (die we binnenkort zullen maken). Neem een paar seconden de tijd om het CSS-bestand te bekijken. Ik ga er niet te veel over in dit geschreven artikel - want het is al lang genoeg! Raadpleeg de screencast voor meer informatie. Maar ik verzeker je dat het vrij standaard en eenvoudig is.
Het belangrijkste waar u zich op moet concentreren, is:
Dit is het gedeelte waar we onze foto's uit de database halen. Laten we daar nu aan werken. Maak een nieuwe pagina
genaamd "getPhotos.php".
Laten we snel bespreken wat we moeten doen met deze code.
Plak de volgende code in uw document:
query ($ query) of sterven (mysqli_error ($ mysqli)); if ($ resultaat) echo "
\ n "; echo"Het eerste wat we moeten doen is een verbinding maken met onze database. In de loop van dit project zullen we dit echter vele malen doen. Laten we dus een andere pagina maken met de naam "database.php" en de informatie daar opslaan. Op die manier hoeven we slechts één bestand te bewerken, mocht dit nodig zijn. Voeg de volgende code toe aan uw database.php-bestand.
We maken een variabele met de naam "$ mysqli" en stellen deze in op een nieuw exemplaar van het "MySQLi" -object. We moeten vier parameters doorgeven:
Om dingen schoon te houden, zullen we die waarden in variabelen plaatsen en ernaar verwijzen. Als de verbinding niet tot stand is gebracht, zeggen we dat hij "zal sterven".
Laten we nu teruggaan naar ons bestand "getPhotos.php". De volgende stap is om de database te doorzoeken.
$ query = "SELECT ID, title, src FROM photos"; $ result = $ mysqli-> query ($ query) of die (mysqli_error ($ mysqli));
Onze vraag is uiterst eenvoudig. We halen eigenlijk alles uit de database. Misschien wil je dit aanpassen
vraag om in uw eigen toepassing te passen. We geven de query door met behulp van "$ mysqli-> query ($ query)".
Als die vraag met succes is uitgevoerd, maken we onze ongeordende lijst en voegen we onze afbeeldingen toe.
echo "
\ n "; echo"We maken een variabele genaamd $ rij die gelijk is aan elk exemplaar van een rij in de database. Zolang er rijen zijn
om te worden opgehaald, zal deze variabele de informatie van die specifieke rij bevatten.
We slaan alle informatie op die we nodig hebben in variabelen. Laten we zeggen dat we in één rij de volgende gegevens hebben.
Door $ row-> title uit te voeren, kunnen we die waarde pakken en opslaan in onze $ title variabele. Dus in dit geval $ title = "Mijn favoriete foto"; $ src = "10.jpg"; $ id = 4;.
Alles wat we nu moeten doen, is die informatie toevoegen aan onze afbeelding en ankertags. De laatste regel voegt een invoerveld toe. Hierdoor kan de gebruiker uiteindelijk de titel van de afbeelding asynchroon bijwerken.
Als u "index.php" in uw browser uitvoert, ziet u het volgende:
Nu we de basisindeling van onze site hebben, laten we het ajaxificeren! We beginnen met een samenvatting van wat we met onze PHP moeten doen. Ik vind dat dit veel helpt tijdens het werken.
Maak een PHP-bestand met de naam "changePhotoTitle.php" en plak de volgende code in:
?
query ($ update_query) of sterven (mysqli_error ($ mysqli)); if ($ resultaat) echo "Succes!
"; echo" De titel van deze foto is gewijzigd in: $ title";?>
We hebben het databasebestand opnieuw nodig. (Zijn we niet blij dat we dat in een apart bestand hebben opgeslagen?) Vervolgens maken we er twee
variabelen. $ title is gelijk aan wat de gebruiker invoert in dat invoerveld. $ id is gelijk aan het respectievelijke id-veld in
de databank.
Om een SQL-injectie te voorkomen, pakken we die postwaarden in met mysql_real_escape_string ().
De update is vrij eenvoudig. Werk de tabel met foto's bij en wijzig het titelveld in wat de gebruikers in dat tekstvak invoeren; Wijzig alleen het titelveld met een id gelijk aan $ id. (Raadpleeg de screencast voor een beter begrip.)
Als de update is uitgevoerd, geven we een e-mail van harte door.
Om de update zonder postback uit te voeren, zullen we jQuery gebruiken. Maak een nieuw Javascript-bestand met de naam "scripts.js" en
plak in het volgende:
Accentsconagua
$ (functie () $ ('h4'). klik (functie () $ (this) .slideUp (). volgende ('invoer'). slideDown ();); $ ('ul # foto's invoer' ) .change (function () var id = $ (this) .parent ('li'). find ('img'). attr ('id'); var thisParam = $ (this); var title = $ ( this) .val (); $ .ajax (type: 'POST', url: 'changePhotoTitle.php', data: 'title =' + title + '& id =' + id, success: function (response) $ ('invoer'). slideUp (); $ (thisParam) .prev ('h4'). tekst (titel) .slideDown (); $ ('# response'). fadeIn (1000) .empty (). toevoegen ( respons) .prepend ('X'); $ ('span # x'). klik (functie () $ ('div # reactie'). fadeOut ('slow');); ); ); ); Met "$ .ajax" bellen we de update. $ .ajax accepteert vier parameters.
Het is duidelijk dat we niet willen dat alleen iedereen de titels van deze afbeeldingen kan bewerken. Dus we zullen een eenvoudig lidmaatschapssysteem maken.
Maak een nieuwe pagina met de naam "login.php" en voeg de volgende code toe:
Login om foto's te bewerken
Binnen de body-tag hebben we een eenvoudig formulier met twee velden: één voor de gebruikersnaam en één voor het wachtwoord. Wanneer de gebruiker op de knop "Aanmelden" klikt, wordt de informatie van die tekstvakken gepost naar "confirmLoginCredentials.php". Ga je gang, maak die pagina nu meteen en voeg het volgende toe.
query ($ q) of sterven (mysqli_error ($ mysqli)); if (! mysqli_num_rows ($ result) == 1) header ("Locatie: login.php"); else setcookie ('authorized', 1, 0); header ("Locatie: index.php"); ?> Normaal slaan we de waarden van die tekstvakken op in variabelen die respectievelijk $ gebruikersnaam en $ wachtwoord worden genoemd. We halen opnieuw ons database.php-bestand op. Onze query haalt de rij uit de database waarin de gebruikersnaam en het wachtwoord gelijk zijn aan wat in die twee tekstvakken is ingevoerd. Er moet slechts één rij worden geretourneerd. Als dat niet gebeurt, wordt de gebruiker teruggeleid naar "login.php". Anders sturen we ze naar de hoofdpagina 'index.php' en stellen een cookie in.
setcookie ('geautoriseerd', 1, 0); De naam van onze cookie zal "geautoriseerd" zijn; de waarde is gelijk aan 1; en de vervaldatum is 0. 0 betekent in feite dat wanneer de gebruiker zijn browser sluit, die cookie vervalt.
Wanneer de gebruiker naar de index.php-pagina wordt geleid, moeten we een snel codebestand schrijven dat ervoor zorgt dat de vereiste cookie op de computer van de gebruiker staat. Ga terug naar index.php en voeg de volgende code helemaal bovenaan uw document toe.
Als de gebruiker een cookie heeft met de naam 'geautoriseerd' op zijn computer en die cookie heeft een waarde die gelijk is aan 1, geeft u de pagina weer. Maar als ze dat NIET doen, stuur ze dan terug naar login.php.
De laatste stap in deze zelfstudie is dat de gebruiker kan uitloggen. Zoek de tag op je index.php-pagina die er als volgt uitziet:
uitloggen
Ik voeg een sleutel / waarde-paar toe aan deze URL. Die waarde wordt doorgegeven aan 'login.php'. Ga naar deze pagina en voeg je laatste stukje code helemaal toe.
Als in de querystring de sleutel 'afmelden' gelijk is aan 1, stelt u een cookie in met een verloopdatum van een uur geleden. Hiermee wordt de cookie van de computer van de gebruiker verwijderd.
Dus we hebben nogal wat gecreëerd. Helaas zou alles wat ik zou willen doen, pagina's en pagina's bevatten. Misschien zal volgende week Deel 2 worden vrijgegeven. In deel 2 implementeren we het volgende:
Heel erg bedankt voor het bekijken van de screencast en het beoordelen van het artikel. Er komt nog meer!
