Tutorials
[ Zurück ]


"Gefällt mir" Box selbstgemacht | mit Ip Sperre


So hallo Leute! Mein erstes Tutorial. Hier könnt ihr lernen wie man mit Hilfe von PHP einer Datenbank und minimalen CSS Kenntnissen eine Art "Gefällt mir"  Box in diesem Stil erstellen kann. Austesten könnt ihr das ganze hier =>  http://www.counter4free.tk/bewertung/tutorial/gut.php




Hier eine Übersicht mit den Benötigten Dateien die wir erstellen werden 
  • mysql.php                      [Für die Datenbankverbindung]
  • like.php                           [Ist für die Bewertung an sich zuständig]
  • gut.png                            [Hintergrundbild aufdem die ANzahl erscheinen wird. Kann auch selbst erstellt werden]
  • gutbutton.png                 [Der Button, der die Anzahl der Personen denen die Seite gefällt um eins erhöht]
Also gut fangen wir mit der mysql.php an!
Das wird unsere Datenbankverbindung. Ergänze die daten die mit einer # gekennzeichnet wurden mit den entsprechenden Benutzerinformationen (Wichtig entferne alles aus den "  "
 weil wenn die # drinne bleibt dann funktioniert es nicht ;) )
<?php
$verbindung = mysql_connect("#dbserver", "#dbuser" , "#dbpasswort")
or die("Verbindung zur Datenbank konnte nicht hergestellt werden");
mysql_select_db("#dbname") or die ("Datenbank konnte nicht ausgewählt werden"); ?>


 

So damit wir Später auch unsere Daten wie z.B.: die Ip des Nutzer's sichern können erstellen wir eine neue Tabelle im phpmyadmin. Logt euch hierzu in euren Datenbankaccount ein (Hier ist es eure Homepageadresse mit einem /cwpma angehängt) und führt den untenstehenden Befehl aus.
CREATE TABLE IF NOT EXISTS `bewertung` (
`id` int(11) unsigned NOT NULL auto_increment,
`ip` varchar(30) NOT NULL,
`wertung` varchar(1) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;



So jetzt haben wir die Arbeiten an der Datenbank auch abgeschlossen. Beginnen wir mit der like.php. Erstellt sie und danach werden wir den Hauptteil schreiben.

 Das ist der obere Teil ich erkläre hinter jedem /* TEXT */ was genau da eigentlich passiert.
<?php
include("mysql.php");/*Wir binden unsere Datenbankverbindung ein.*/

$ip=$_SERVER['REMOTE_ADDR'];/*Hier lesen wir die IP unseres Benutzers aus.*/

$abfragen=mysql_query("SELECT ip FROM bewertung WHERE ip='$ip'");/*Wir fragen die Datenbank nach allen Einträgen ab, die die gleiche Ip haben.*/

$anz=mysql_num_rows($abfragen);/*Wir zählen alle Einträge, die die gleiche IP haben.*/

 if($_GET['action']=="up" and $anz=="0"){
$eintrag = "INSERT INTO bewertung (id, ip, wertung) VALUES ('', '$ip', '1')"; /*Oben checken wir ob die Anzahl der Einträge 0 ist also der User hat noch keine Einträge oder ob er bereits abgestimmt hat*/

$eintragen = mysql_query($eintrag);/*Hier tragen wir die Daten unseres Benutzers in die Datenbank ein.*/

}
$abfragen=mysql_query("SELECT * FROM bewertung WHERE wertung='1'");/*Wir fragen die Datenbank nach allen Einträgen in der Tabelle ab*/

$zahl=mysql_num_rows($abfragen);/*Wir zählen wieder alle Einträge.*/

?>


 
So jetzt fügen wir noch unseren HTMLCode unten an (immernoch die gleiche Datei!)
<div id="gesamt">
<div id="gut" style="height:60px; width: 60px; background-image: url(gut.png); background-repeat: no-repeat; color: #cccccc;">
<div align="center">
<br />
<?php echo $zahl; ?>
</div>
</div>
<a href="gut.php?action=up">
<img src="gutbutton.png" alt="a" />
</a>
</div>


Eigentlich währe es jetzt schon funktionstüchtig jetzt brauchen wir aber noch die Grafiken sonst sieht es nichts aus ;) Speichert sie euch ab. Ändern könnt ihr sie immernoch.

Das ist das Bild
gut.png

Und das ist das Bild gutbutton.png

Alles in einem Ordner abgespeichert und auf dem Webspace hochgeladen sollte funktionieren. Jetzt haben wir aber das Problem, dass es eine extraseite ist. Wie bekommen wir es nun auf unsere Seite die wir zum "Mögen" freigeben wollen? Wir binden das ganze einfach durch einen Iframe ein!
<iframe src="pfad_zum_script/like.php" width="90" height="120" style="border: 0px;"></iframe>


Eine Bitte habe ich zum Schluss noch. Mir als Entwickler ist es wichtig, dass meine Codes funktionieren und einfach sind. Wenn ihr Logische Fehler entdeckt habt oder irgendetwas nicht funktionieren sollte meldet es bitte, damit ich es berichtigen kann. Ich würde mich über eure Kommentare freuen.


Erstellt:03.12.10 14:18
Autor: free-counter

Letzte Änderung:
Geändert von:

Bewertungen:4
Bewertung: 4.3

Freigeschaltet: Ja
Views 4924

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 433] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE