KLiK SocialMediaWebsite
velopment Release
Project Abandoned. Ce projet a été abandonné et pourrait être obsolète avec les normes actuelles et en ce qui concerne la sécurité et les fonctionnalités, etc. Je peux réorganiser ce projet à l'avenir, mais il n'y a pas de développement supplémentaire prévu pour le moment.
Klik est un système de pool d'informations basé sur PHP (ou simplement un site Web de médias sociaux), composé d'un système complet de connexion / d'enregistrement, de système de profil utilisateur, de salle de chat, de système de forum et de blog / sondage / système de gestion d'événements.
Toutes ces exigences peuvent être terminées en même temps en installant simplement une pile de serveurs comme
WampouXampp, etc.
Importez le fichier klik_database.sql dans le dossier includes dans phpmyadmin. Il n'est pas nécessaire de modifier le fichier .sql. Cela créera la base de données requise pour que l'application fonctionne.
Modifiez le fichier dbh.inc.php dans le dossier includes pour créer la connexion de la base de données. Modifiez le mot de passe et le nom d'utilisateur en ceux utilisés dans l'installation actuelle de phpMyAdmin . Il n'est pas nécessaire de changer autre chose.
$ 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 ());
}Le numéro de port n'a pas besoin d'être modifié dans des circonstances normales, mais si vous rencontrez un problème ou si la pile de serveur est installée sur un autre port, n'hésitez pas à la modifier, mais faites-le attentivement.
email-server.php dans le dossier includes et modifiez les variables en conséquence:$SMTPuser : adresse e-mail sur gmail$SMTPpwd : mot de passe de l'adresse e-mailSMTPtitle : le nom de la société hypothétiqueDomain : domaine du site Web, comme localhost sur le serveur local ou si sur le domaine en direct, quelque chose comme www.hypotheticalwebsite.com $ SMTPuser = ' [email protected] ' ;
$ SMTPpwd = ' some-example-password ' ;
$ SMTPtitle = " KLiK inc. " ;
$ Domain = ' localhost ' ;Cette étape est principalement pour la configuration d'un compte de messagerie pour activer le
password reset systemcontactet de mot de passe, qui nécessitent tous un envoi.
À l'étape actuelle de l'application, seuls les comptes
Gmailsont pris en charge.
Le fichier de base de données contient déjà beaucoup d'exemples de données et d'utilisateurs. La plupart des utilisateurs de la base de données ont le même mot de passe que leurs noms d'utilisateur, à l'exception de quelques-uns. Il n'est pas possible de s'inscrire en tant qu'administrateur via la demande, car nous avons décidé qu'il s'agissait d'une faiblesse exploitable. Par conséquent, vous devrez créer un compte et accéder manuellement à la table users dans la base de données pour changer le niveau UserEvel de ce compte à 1 à partir de 0 .
0 Le niveau signifie un utilisateur normal et le niveau 1 signifie administrateur
Un moyen simple d'accéder à tous les exemples de comptes sans les supprimer et, par conséquent, perdre toutes les exemples de données est de modifier manuellement leur email à partir de PhpMyAdmin à une adresse e-mail valide. Essayez ensuite la connexion avec ce compte à l'aide d'un mauvais mot de passe et utilisez le forgot password? link pour réinitialiser le mot de passe des comptes. L'e-mail du compte peut à nouveau être changé en toute sécurité en tout ce qui est insignifiant plus tard.
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)
Cela a été utilisé pour créer un
mail serversurWindows localhost, car contrairement à Linux, il n'y en a pas déjà installé dans Windows. Ce plugin a été utilisé pour l'envoi et la réception d'e-mails sur localhost, et n'est pas nécessaire sur un domaine en direct
Détails des fonctionnalités importantes de l'application
Le tableau de bord fournit une interface centrale à la plupart des fonctionnalités de l'application. La User profile card dans le coin supérieur gauche de l'écran fournit un résumé de profil, ainsi qu'un lien vers le profil et la page d'édition de profil. Le bouton Créateur dans le coin supérieur droit fournit un lien de premier plan vers la page de l'équipe, qui présente les KLiK Creators .
L'interface à 4 onglets dans le centre donne accès à Forums , Blogs , Polls et Events les latest ou récemment créés. Les composants montrent les caractéristiques individuelles des éléments respectifs, comme le total upvotes pour un forum, likes pour un blog, votes pour un sondage et days remaining pour les événements. Il y a 2 boutons supplémentaires, qui vont sur les KLiK Forums (l'interface centrale pour les forums) et le KLiK Hub (l'interface centrale pour le blog, le scrutin et le système de gestion d'événements).
Forum System :
Blog Management System :
Like le système sur les blogs (les utilisateurs peuvent aimer le blog ou supprimer leur semblable) Event Management System :
Poll Management System :
Klik prend en charge un système complet de connexion / d'enregistrement et de profil utilisateur. Au démarrage, l'application affiche des options de connexion, de l'inscription ou de la contact avec l'administrateur du site Web par e-mail. Chaque utilisateur peut créer un nom d'utilisateur unique qui ne peut pas être modifié plus tard. Les passwords utilisateur sont hashed avant de stocker dans la base de données, donc même les administrateurs n'ont pas également accès aux mots de passe d'origine. Les informations supplémentaires de l'utilisateur incluent Full Name , email , Profile Image , Profile Headline , Gender et la Bio .
Il existe également un Password Recovery System sécurisé qui permet à l'utilisateur de réinitialiser leurs mots de passe de manière sécurisée. L'application génère des liens de jetons chiffrés temporaires avec un certain temps d'expiration qui, lorsqu'il est utilisé par l'utilisateur, les invites à modifier le mot de passe. Étant donné que cela nécessite également le mot de passe actuel, le processus est sécurisé et a moins de chances d'exploitation.
L'application utilise plusieurs méthodes d'authentification pour l'inscription et la connexion. Il vérifie empty fields , wrong username , wrong password , SQL errors , server errors et en cas d'inscription, corrupted image ou wrong image type
Klik a un User profile system . Chaque utilisateur se voit attribuer un profil sur l'inscription, avec lequel l'utilisateur peut créer des forums, des blogs, des événements, etc. et interagir avec les fonctionnalités de l'application. Le nom complet de l'utilisateur, le titre et la biographie, ainsi que l'image de profil sont facultatifs, ce qui signifie que n'importe qui peut s'inscrire sans les définir. Dans ce cas, l'utilisateur se verra attribuer une image utilisateur par défaut et le titre, le bio et le nom complet seront vides.
Le user profile est accessible via l'option dans le menu Paramètres de la barre de navigation, ou plus simplement, en cliquant sur l'image utilisateur sur la carte de profil utilisateur, qui est présente dans le coin supérieur gauche de l'écran de l'application sur la plupart des pages. La page de profil affiche les informations de base de l'utilisateur comme le nom d'utilisateur, le nom complet, le sexe, le titre et la biographie. En dehors de cela, il montre les différents Forums et Blogs que l'utilisateur a créés avec les Polls auxquels il a participé. Si au cas où l'utilisateur n'aurait pas fait de tout cela ou est nouveau, la page montre un joli petit chat bongo avec une légende `` aussi vide '' pour vous rappeler que vous devez être plus actif :)
Il existe également un Profile Editing System qui permet à l'utilisateur de modifier ses informations de profil. Il est accessible via l'option respective dans le menu Paramètres de la barre de navigation ou en cliquant simplement sur l'icône du crayon à côté de l'image de profil utilisateur sur la carte de profil. Le système permet à l'utilisateur de modifier la plupart de ses informations, à l'exception du nom d'utilisateur, qui ne peut pas être modifié. Tous les champs ont déjà les informations actuelles, donc l'utilisateur n'a pas à tout taper à nouveau s'il souhaite seulement modifier les informations actuelles. Le mot de passe ne peut également être modifié qu'en fournissant le mot de passe actuel pour conserver une interface plus sécurisée.
Klik a également une Chatbox, qui utilise PHP & AJAX pour discuter en temps réel avec d'autres utilisateurs. La section à gauche est une liste de tous les utilisateurs actuellement sur le site Web, tandis que le bon écran de chat est pour afficher les messages ingoing et sortants. Un utilisateur peut accéder à une conversation avec un certain utilisateur en cliquant sur lui dans la liste des utilisateurs, qui récupérera tous les messages de chat de la base de données. Les messages en ingoing et sortants sont stylés différemment afin de maintenir la lisibilité. Le chat se fait en temps réel, sans avoir besoin de rafraîchir la page en continu.
Améliorations possibles :
optimization : tous les messages d'un chat sont récupérés immédiatement, ce qui peut entraîner des retards si le chat est important. Cela peut être corrigé en implémentant une charge incrémentielle de messages pour charger uniquement les messages affichés à l'écran.user search : une fonction de recherche peut être implémentée dans la liste d'utilisateurs pour rechercher directement un utilisateur particulier, ce qui permet d'économiser l'heure. Password hashing avant de stocker dans la base de données.
Réinitialisation de mot de passe effectuée via encrypted tokens créés individuellement envoyés par e-mail comme forme d'un lien. Les jetons ont une certaine date d'expiration, après quoi ils ne peuvent pas être utilisés.
Filtrage d'informations obtenues à partir des méthodes $_GET et $_POST pour empêcher header injection .
Implémentation des MySQLi Prepared Statements pour la sécurité avancée de la base de données.
Exemple:
$ 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 );
}Une liste de toutes les principales fonctionnalités d'application et de leurs fichiers frontaux et back-end respectifs.
| Fonctionnalité | Fichiers frontaux | Fichiers back-end |
|---|---|---|
| Tableau de bord | index.php (Main Dashboard) , Forum.php , Hub.php | N / A |
| Système de forum | 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 |
| Système de blog | blog-page.php , blogs.php , create-blog | blog-vote.inc.php , create-blog.inc.php |
| Système d'événements | event-page.php , events.php , create-event.php | create-event.inc.php |
| Système de sondage | poll.php , polls.php , poll-voters.php | create-poll.inc.php , delete-poll.inc.php , poll.class.php , post-vote.inc.php |
| Salle de discussion | message.php | post_message_ajax.php , get_message_ajax.php , script.js |
| Inscription / connexion | signup.php , login.php | signup.inc.php , login.inc.php , logout.inc.php |
| Système de profil | profile.php , edit-profile.php | profileUpdate.inc.php |
| Réinitialisation du mot de passe | reset-pwd.php , create-new-pwd.php | reset-request.inc.php |
| Téléchargement d'image | N / A | upload.inc.php |
| Vitrine de créateur | team.php , KLiK_anas-imran.php , KLiK_anas-kamal.php , KLiK_saad.php , KLiK_ubaid.php | N / A |
| Trouver des utilisateurs | users-view.php | N / A |
Remarque: Les fichiers GUI sont dans le
root directoryet lesbackend filessont présents dans le dossierincludes. De même, tous les fichiers CSS et JS sont présents dans leurs répertoirescssetjsprespectifs. Seuls les fichiers Créateur dans le_KLiK Creators folderont leurs propres fichiers CSS. Les principaux fichiers de structuration HTML sont leHTML-head.phpetHTML-footer.php, qui résident également dans le dossier incluse
LaravelVue.js pour salle de chat.Si vous avez aimé mon travail, veuillez afficher l'assistance en mettant en vedette le référentiel! Cela signifie beaucoup pour moi, et c'est tout ce que je demande.
Un grand merci à la merveilleuse équipe sans laquelle tout ce projet n'aurait pas été possible. Découvrez nos profils et jouez nos dépositions! :)
 |  |  |  |
|---|---|---|---|
| MSAAD1999 | skamal16 | UbaidaSim | Aitasadduq |
