KLiK SocialMediaWebsite
velopment Release
Project Abandoned. Dieses Projekt wurde aufgegeben und könnte mit den aktuellen Standards veraltet sein, und in Bezug auf Sicherheit und Merkmale usw. kann ich dieses Projekt in Zukunft neu überarbeiten, aber es ist derzeit keine weitere Entwicklung geplant.
KLIK ist ein PHP -basierter Informationspool -System (oder einfach eine Social -Media -Website), das aus einem vollständigen Anmelde-/Registrierungssystem, einem Benutzerprofilsystem, einem Chatraum, dem Forum -System und dem Blog/Polls/Event -Management -System besteht.
Alle diese Anforderungen können sofort erfüllt werden, indem einfach ein Serverstapel wie
WampoderXamppusw. installiert wird.
Importieren Sie die Datei klik_database.sql in den includes -Ordner in phpmyadmin. Es ist keine Änderung in der .sql -Datei erforderlich. Dadurch wird die Datenbank erstellt, die für die Funktion der Anwendung erforderlich ist.
Bearbeiten Sie die Datei dbh.inc.php im includes -Ordner, um die Datenbankverbindung zu erstellen. Ändern Sie das Passwort und den Benutzernamen auf diejenigen, die innerhalb der aktuellen Installation von phpMyAdmin verwendet werden. Es besteht keine Notwendigkeit, etwas anderes zu ändern.
$ serverName = " localhost " ;
$ dBUsername = " root " ;
$ dBPassword = " examplePassword " ;
$ dBName = " klik_database " ;
$ conn = mysqli_connect ( $ serverName , $ dBUsername , $ dBPassword , $ dBName , 3307 );
if (! $ conn )
{
die ( " Connection failed: " . mysqli_connect_error ());
}Die Portnummer muss unter normalen Umständen nicht geändert werden. Wenn Sie jedoch auf ein Problem stoßen oder der Serverstapel auf einem anderen Port installiert ist, können Sie es gerne ändern, aber dies sorgfältig tun.
email-server.php Datei im includes Ordner und ändern Sie die Variablen entsprechend:$SMTPuser : E -Mail -Adresse auf gmail$SMTPpwd : Passwort für E -Mail -AdresseSMTPtitle : Name der hypothetischen FirmaDomain : Domain der Website, wie Localhost auf lokalem Server oder wenn auf Live -Domain, so etwas wie www.hypotheticalwebsite.com $ SMTPuser = ' [email protected] ' ;
$ SMTPpwd = ' some-example-password ' ;
$ SMTPtitle = " KLiK inc. " ;
$ Domain = ' localhost ' ;Dieser Schritt dient hauptsächlich für die Einrichtung eines E -Mail -Kontos, um das
contactundpassword reset systemzu aktivieren, von denen alle Versand erforderlich sind.
In der aktuellen Phase des Antrags werden nur
Gmail-Konten unterstützt.
Die Datenbankdatei enthält bereits viele Beispieldaten und Benutzer. Die meisten Benutzer in der Datenbank haben das gleiche Kennwort wie ihre Benutzernamen, mit Ausnahme einiger. Es ist nicht möglich, sich als Administrator durch die Anwendung anzumelden, da wir beschlossen haben, dass es sich um eine Ausbeutung handelt. Daher müssen Sie ein Konto erstellen und manuell zur users in der Datenbank gehen, um das BenutzerLevel dieses Kontos von 0 auf 1 zu ändern.
0 Stufe bedeutet einen normalen Benutzer und Stufe 1 bedeutet Administrator
Eine einfache Möglichkeit, auf alle Beispielkonten zugreifen zu können, ohne sie zu löschen und daher alle Beispieldaten zu verlieren, besteht darin, ihre email manuell in PhpMyAdmin in eine gültige E -Mail -Adresse zu ändern. Versuchen Sie dann, sich mit diesem Konto mit einem falschen Passwort anzumelden und verwenden Sie das bereitgestellte forgot password? link zum Zurücksetzen des Kontenkennworts. Die Account -E -Mail kann später wieder in irgendetwas Triviales geändert werden.
PHP 5.6.40
SQL 14.0
JavaScript ES 6
HTML5
CSS3
WampServer Stack 3.0.6
Windows 10
MySQL Database 8.0.13
phpMyAdmin 4.8.3
MySQLi APIs
JQuery v3.3.1
BootStrap v4.2.1
AJAX
[PHPMailer 6.0.6](https://github.com/PHPMailer/PHPMailer)
Dies wurde zum Erstellen eines
mail serverunterWindows localhostverwendet, da im Gegensatz zu Linux in Windows bereits keines installiert ist. Dieses Plugin wurde für das Senden und Empfangen von E -Mails auf Localhost verwendet und wird für eine Live -Domain nicht benötigt
Details der wichtigen Merkmale der Anwendung
Das Dashboard bietet eine zentrale Schnittstelle zu den meisten Funktionen der Anwendung. Die User profile card in der oberen linken Ecke des Bildschirms bietet eine Profilzusammenfassung sowie einen Link zum Profil- und der Profilbearbeitungsseite. Die Taste der Schöpfer in der oberen rechten Ecke bietet einen herausragenden Link zur Teamseite, auf dem die KLiK Creators vorgestellt werden.
Die 4 -Registerkarte -Schnittstelle im Zentrum bietet Zugriff auf latest oder zuletzt erstellten Forums , Blogs , Polls und Events . votes Komponenten zeigen die likes Eigenschaften der jeweiligen Elemente, days remaining upvotes Es gibt 2 weitere Schaltflächen, die in die KLiK Forums (die zentrale Schnittstelle für die Foren) und die KLiK Hub (die zentrale Schnittstelle für das Blog-, Umfrage- und Event -Management -System) gehen.
Forum System :
Blog Management System :
Like ein System in Blogs (Benutzern können entweder das Blog mögen oder ihre Like entfernen) Event Management System :
Poll Management System :
KLIK unterstützt ein vollständiges Anmelde-/Registrier- und Benutzerprofilsystem. Beim Start zeigt die Bewerbung Optionen zum Anmelden, Anmeldung oder Kontaktaufnahme mit dem Website -Administrator per E -Mail. Jeder Benutzer kann einen einzigartigen Benutzernamen erstellen, der später nicht geändert werden kann. Die passwords werden vor dem Speichern in der Datenbank hashed , sodass auch Administratoren auch keinen Zugriff auf die ursprünglichen Passwörter haben. Weitere Benutzerinformationen umfassen Full Name , email , Profile Image , Profile Headline , Gender und Bio .
Es gibt auch ein sicheres Password Recovery System , mit dem Benutzer seine Passwörter sicher zurücksetzen können. Die App generiert temporäre verschlüsselte Token-Links mit einer bestimmten Ablaufzeit, die bei der Eingabe von Benutzern zur Änderung des Kennworts verwendet wird. Da dies auch ein aktuelles Passwort erfordert, ist der Vorgang sicher und hat eine geringere Ausbeutungschancen.
server errors App verwendet mehrere Authentifizierungsmethoden SQL errors wrong image type sich anzumelden und anzumelden. Sie prüft nach empty fields , wrong password wrong username , corrupted image
Klik hat ein vollständiges User profile system . Jedem Benutzer wird ein Profil zur Anmeldung zugewiesen, mit dem der Benutzer Foren, Blogs, Ereignisse usw. erstellen und mit den Funktionen der App interagieren kann. Der vollständige Name, die Überschrift und die Biografie des Benutzers sowie das Profilbild sind optional, was bedeutet, dass sich jeder anmelden kann, ohne diese festzulegen. In diesem Fall wird dem Benutzer ein Standardbenutzerbild zugewiesen und die Überschrift, die Biografie und der vollständige Name sind leer.
Auf das user profile kann über die Option im Menü Einstellungen in der Navigationsleiste oder einfacher auf das Benutzerbild auf der Benutzerprofilkarte zugegriffen werden, die auf den meisten Seiten in der oberen linken Ecke des App -Bildschirms vorhanden ist. Auf der Profilseite werden die grundlegenden Benutzerinformationen wie Benutzername, Vollname, Geschlecht, Überschrift und Biografie angezeigt. Abgesehen davon zeigt es die verschiedenen Forums und Blogs , an denen der Benutzer zusammen mit den Polls erstellt wurde, an denen er/sie teilgenommen hat. Wenn der Benutzer nichts davon gemacht hat oder neu ist, zeigt die Seite eine niedliche kleine Bongo -Katze mit einer so leeren Beschriftung, um Sie daran zu erinnern, dass Sie aktiver sein müssen :)
Es gibt auch ein Profile Editing System , mit dem der Benutzer seine Profilinformationen bearbeiten kann. Es kann über die jeweilige Option im Menü Einstellungen in der Navigationsleiste oder durch einfaches Klicken auf das Bleistiftsymbol neben dem Benutzerprofil -Bild auf der Profilkarte zugegriffen werden. Das System ermöglicht es dem Benutzer, die meisten seiner Informationen mit Ausnahme des Benutzernamens zu ändern, der nicht geändert werden kann. Alle Felder haben bereits die aktuellen Informationen, sodass der Benutzer nicht alles weitergeben muss, wenn er nur die aktuellen Informationen leicht bearbeiten möchte. Das Kennwort kann jedoch auch geändert werden, nur indem das aktuelle Kennwort bereitgestellt wird, um eine sichere Schnittstelle zu behalten.
Klik hat auch eine Chatbox, die PHP & AJAX für Echtzeit-Chat mit anderen Benutzern verwendet. Der Abschnitt auf der linken Seite ist eine Liste aller Benutzer, die derzeit auf der Website sind, während der richtige Chat -Bildschirm die Anzeige der Ingoing- und ausgehenden Nachrichten darstellt. Ein Benutzer kann mit einem bestimmten Benutzer auf einen Chat zugreifen, indem er in der Benutzerliste auf ihn/sie klickt, wodurch alle Chat -Nachrichten aus der Datenbank abgerufen werden. Die Ingoing- und ausgehenden Nachrichten sind unterschiedlich gestaltet, um die Lesbarkeit aufrechtzuerhalten. Das Chating erfolgt in Echtzeit, ohne dass die Seite kontinuierlich aktualisiert werden muss.
Mögliche Verbesserungen :
optimization : Alle Nachrichten eines Chats werden gleichzeitig abgerufen, und dies kann zu Verzögerungen führen, wenn der Chat groß ist. Dies kann behoben werden, indem inkrementelles Last von Nachrichten implementiert wird, um nur die Meldungen auf dem Bildschirm zu laden.user search : Eine Suchfunktion kann in der Benutzerliste implementiert werden, um direkt nach einem bestimmten Benutzer zu suchen und so Zeit zu speichern. Password hashing vor dem Speichern in der Datenbank.
Kennwort zurückgesetzt, das durch individuell erstellte encrypted tokens per E -Mail als Form eines Links gesendet wurde. Die Token haben ein bestimmtes Ablaufdatum, nach dem sie nicht verwendet werden können.
Filterung von Informationen, die von $_GET und $_POST -Methoden zur Verhinderung header injection erhalten wurden.
Implementierung von MySQLi Prepared Statements für die Sicherheit der erweiterten Datenbank.
Beispiel:
$ sql = " select uidUsers from users where uidUsers=?; " ;
$ stmt = mysqli_stmt_init ( $ conn );
if (! mysqli_stmt_prepare ( $ stmt , $ sql ))
{
header ( " Location: ../signup.php?error=sqlerror " );
exit ();
}
else
{
mysqli_stmt_bind_param ( $ stmt , " s " , $ userName );
mysqli_stmt_execute ( $ stmt );
mysqli_stmt_store_result ( $ stmt );
}Eine Liste aller Hauptanwendungsfunktionen und ihrer jeweiligen Front-End- und Back-End-Dateien.
| Besonderheit | Front-End-Dateien | Back-End-Dateien |
|---|---|---|
| Armaturenbrett | index.php (Main Dashboard) , Forum.php , Hub.php | N / A |
| Forumssystem | categories.php , create-category , topics.php , create-topic.php , posts.php | create-category.inc.php , create-topic.inc.php , delete-category.php , delete-forum.php , delete-post.php |
| Blog -System | blog-page.php , blogs.php , create-blog | blog-vote.inc.php , create-blog.inc.php |
| Ereignissystem | event-page.php , events.php , create-event.php | create-event.inc.php |
| Wahlsystem | poll.php , polls.php , poll-voters.php | create-poll.inc.php , delete-poll.inc.php , poll.class.php , post-vote.inc.php |
| Chatraum | message.php | post_message_ajax.php , get_message_ajax.php , script.js |
| Anmeldung/ Login | signup.php , login.php | signup.inc.php , login.inc.php , logout.inc.php |
| Profilsystem | profile.php , edit-profile.php | profileUpdate.inc.php |
| Passwort zurücksetzen | reset-pwd.php , create-new-pwd.php | reset-request.inc.php |
| Bild -Upload | N / A | upload.inc.php |
| Creator Showcase | team.php , KLiK_anas-imran.php , KLiK_anas-kamal.php , KLiK_saad.php , KLiK_ubaid.php | N / A |
| Benutzer finden | users-view.php | N / A |
Hinweis: Die GUI -Dateien befinden sich im
root directory, und diebackend filessind imincludes-Ordner vorhanden. In ähnlicher Weise sind alle CSS- und JS -Dateien in ihren präcssundjs-Verzeichnissen vorhanden. Nur die Creator -Dateien im_KLiK Creators folderhaben ihre eigenen CSS -Dateien. Die wichtigsten HTML-Strukturierungsdateien sind dieHTML-head.phpundHTML-footer.php, die sich auch im Incluen-Ordner befinden
LaravelVue.js für Chatraum.Wenn Ihnen meine Arbeit gefallen hat, zeigen Sie bitte Support, indem Sie das Repository mitspielt! Es bedeutet mir viel und alles frage ich.
Ein großes Dankeschön an das wundervolle Team, ohne das dieses gesamte Projekt nicht möglich gewesen wäre. Schauen Sie sich unsere Profile an und spielen Sie unsere Repos! :)
 |  |  |  |
|---|---|---|---|
| MSAAD1999 | Skamal16 | Ubaidasim | Aitasadduq |
