Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Création d’un réseau social en PHP

Par Mathieu ROSSETTO Publié le 02/05/2019 à 17:13:35 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Présentation

Un réseau social est un site internet avec des algorithmes relativement complexes destinés au partage d’informations entre les différents utilisateurs.

Ces différentes informations peuvent être de différentes sortes: des messages privés, des photos, des vidéos, ou tout simplement du texte.

Par exemple, Facebook, Netlog, Skyblog, Twitter, YouTube, Instagram et Snapchat sont les réseaux sociaux les plus utilisés.

Chaque réseau social a son utilité et sa cible d'utilisateur, mais on peut tout à fait créer un réseau social pour n'importe quelle type de cible d'utilisateurs. Par exemple, YouTube est plus axé sur le partage de vidéos publiques tandis que Facebook est plus axé sur le partage de texte et de photos en privé, à l'intérieur du cercle d'amis.

Rendu du réseau social

Conception

Pour se faire, on va utiliser du PHP pour le back-end, et MySQL pour la gestion des bases de données.

Avant de commencer à coder, on va concevoir un patron de conception pour les différents fichiers du site Internet ainsi que pour les différentes tables dans les bases de données.

Voici la liste des différents fichiers à créer dans notre IDE :

index.php va contenir la page d’accueil de la présentation du réseau social

users.php va contenir la liste des membres

profile.php va contenir la page du profil dans les paramètres sont indiqués dans l’URL

about.php va contenir un petit texte présentant le créateur du site Internet

En ce qui concerne les bases de données, on va en créer 2 pour le moment :

Users : va contenir la liste des membres

Messages : va contenir la liste des publications postés par les différents membres.

On va se servir de MySQL pour les bases de données c’est un moteur de gestion de base de données relationnelles très utilisée est très documenté c’est pour cela qu’on va l’utiliser.

Environnement de développement local

Pour développer le site Internet on ne développe pas directement sur le serveur on va de préférence coder en local et envoyer le site sur Internet en production, lorsque tout sera terminé.

Deux solutions s’offrent soit on va télécharger une Machine virtuelle installer Linux dessus installer PHP apache et MySQL cependant on est pas obligé de le faire on peut tous simplement télécharger un logiciel qui est une solution toute en un avec le PHP et SQL qui sont intégrés est-ce que surtout le système exploitation que vous ayez un Mac un PC ou Linux.

La première chose à faire et de télécharger soit MAMP, soit XAMPP, soit WAMP.

Sur MacOS, on vous conseille MAMP

Sur PC Windows, on vous conseille WAMP Server :

Sur un OS Linux, on vous conseille :XAMPP

NB: En ce qui concerne WAMP pas attention il utilise le même port que Skype attention à le fermer avant.

Une fois que vous aurez téléchargé et installé une ces solutions, on va voir passer à la pratique.

La page d'accueil

Le fichier index.php va contenir la page d’accueil du site. C'est sur celle-ci que l'on va s'inscrire ou se connecter. Après libre à vous de rendre belle la page d'accueil comme une landing page ou d'y intégrer votre propre design.

Lisez bien les commentaires pour comprendre le fonctionnement.

	
	<html>
		<body>
		<?php

		//lorsqu'un utilisateur se connecte, cette fraction de code sera chargée
		if(isset($_POST['pseudo']) && isset($_POST['passwd'])) {
			//faire la lecture dans la base de données et verifier que le mot de passe entré soit égal au mot de passe lu depuis la table de base de donnée
		} 

		//lorsqu'un utilisateur s'inscrit, cette fraction de code sera chargée
		if(isset($_POST['newpseudo']) && isset($_POST['newpasswd'])) {
			//faire une insertion dans la table users de la base de donnée.
		} 
		?>
		<h1>Réseau social des Supinfo</h1>
		<p>Connectez vous</p>
		<form method="post" action="index.php">
		<input type="text" name="pseudo" value="" />
		<input type="password" name="passwd" value="" />
		<input type="submit" name="submit" value="Se connecter" />
		</form>
		<p>Inscrivez vous</p>
		<form method="post" action="index.php">
		<input type="text" name="newpseudo" placeholder="Choisissez un pseudo" value="" />
		<input type="password" name="newpasswd" value="" />
		<input type="submit" name="submit" value="Créer un compte" />
		</form>
		</body>
		</html>
	
	

PDO, un standard PHP

PDO est une extension standard de PHP qui permet de le connecter à des bases de données, par exemple, MySQL.

Voici comment se connecter a une instance MYSQL avec PDO

		
		$pdo = new PDO("mysql:host=myhost;dbname=mydb, login, password");
		
	

Remplacez myhost par votre ip de serveur d’instance mysql

Remplacez dbname par votre nom de base de donnee

Remplacez login par le nom dutilisateur de la connexion a la base de donnee

Remplacez de meme avec password

Voici comment insérer des donnees dans une table

		
		//faire une insertion dans la table users de la base de donnée.
		$valeurs = ["pseudo" => $_POST["newpseudo"], "passwd" => $_POST["newpasswd"]];
		$req = "INSERT INTO users (pseudo, passwd) VALUES (:pseudo, :passwd)";
		$req = $pdo->prepare($req);
		$req->execute($valeurs);
		
	

Notons bien ici que l'on utilise ce qu'on appelle des requêtes préparées. Les requpêtes préparées sont des requêtes MySQL qui est sécurisée à travers le site. Parce qu'il ne faut jamais avoir confiance aux données saisies par l'utilisateur, il est très important pour la sécurité du site de bien protéger tous les formulaires, et ne laisser aucun message d'erreur visible à l'utilisateur en mode production.

Pour informations, voici comment afficher les erreurs sur la page en PHP:

error_reporting(E_ALL);

Voici comment n'afficher que les erreurs mais pas les Notice PHP:

error_reporting(E_ALL & ~E_NOTICE);

Enfin, voici comment ne plus les afficher:

error_reporting(0);

Voici comment lire le champ « password » dans une table avec un pseudo indiqué (celui que l'utilisateur rentre de lui-même, pour vérifier que le mot de passe qu'il a rentré correspond bien à celui de la table dans la base.

		
		//faire la lecture dans la base de données et verifier que le mot de passe entré soit égal au mot de passe lu depuis la table de base de donnée
		$pseudo = $_POST["pseudo"]
			$req = "SELECT password from users where pseudo=".$pseudo;
			$passbase = $req->fetch()["passwd"];
		  $passEntered = $_POST["passwd"];
		  if ($passEntered == $passbase) {
		  	//le login et le mot de passe étant ok, on est connecté.
		   echo "success";
		  }
		
	

Les bases de données

Tout cela est bien beau, mais pour stocker nos différents utilisateurs et leurs posts associés, il faut bien les enregistrer quelque part: On utilise pour cela les bases de données. Et les codes PDO qu'on a vu juste avant permettent justement de faire la liaison entre PHP et MySQL.

On va se connecter via http://localhost:8888/phpmyadmin a l’aide de PHPmyadmin pour créer les tables. tapez donc cette adresse dans votre navigateur Internet. Si vous utilisez MAMP, le port par défaut est 8888, mais si vous n'avez pas le même, adaptez-le bien sûr.

Vous devrez donc, grâce à l'interface, créer une base de donnée, et y insérer 2 tables: "users" et "messages".

Faites comme moi pour la table "Users"

Faites également de même pour la table "Messages" pour qu'elle contienne bien 3 champs: "id", "pseudo", et "message".

Le code complet : index.php

		
		<html>
		<head>
			<title>Bienvenue sur le réseau social</title>
			<link rel="stylesheet" href="style.css">
		</head>
		<body>
        <?php
		$pdo = new PDO("mysql:host=localhost:8889;dbname=mydb", "root", "root");
		if(isset($_POST['pseudo']) && isset($_POST['passwd'])) {
            $pseudo = $_POST["pseudo"];
            $req = "SELECT passwd from users where pseudo='".$pseudo."'";
            $passbase = $pdo->query($req)->fetch();
            $passbase = $passbase[0];
            var_dump($passbase);
			$passEntered = $_POST["passwd"];
			if ($passEntered == $passbase) {
				echo "success";
				setCookie("user", $pseudo);
				header("Location: profile.php?pseudo=".$pseudo);
			}
		} 
		if(isset($_POST['newpseudo']) && isset($_POST['newpasswd'])) {
			$valeurs = ["pseudo" => $_POST["newpseudo"], "passwd" => $_POST["newpasswd"]];
			$req = "INSERT INTO users (pseudo, passwd) VALUES (:pseudo, :passwd)";
			$req = $pdo->prepare($req);
			$req->execute($valeurs);
		} 
		?>
		<h1>Réseau social des Supinfo</h1>
		<p>Connectez vous</p>
		<form method="post" action="index.php">
		<input type="text" name="pseudo" value="" />
		<input type="password" name="passwd" value="" />
		<input type="submit" name="submit" value="Se connecter" />
		</form>
		<p>Inscrivez vous</p>
		<form method="post" action="index.php">
		<input type="text" name="newpseudo" placeholder="Choisissez un pseudo" value="" />
		<input type="password" name="newpasswd" value="" />
		<input type="submit" name="submit" value="Créer un compte" />
		</form>
		</body>
		</html>
		
	

Le fichier users.php

Il sert a lister les différents membres inscrits sur le réseau social. Voici le code complet

		
			<html>
			<head>
				<title>Liste des utilisateurs</title>
				<link rel="stylesheet" href="style.css">
			</head>
			<body>
			<p>Liste des différents membres</p>
			<?php
				$pdo = new PDO("mysql:host=localhost:8889;dbname=mydb", "root", "root");
				$req = $pdo->query("select * from users");
				
				while ($res = $req->fetch()) {
					echo $res["pseudo"]."</br>";
				}
			?>
			</body>
			</html>
		
	

La gestion des cookies en PHP

Les cookies est l'un des moyens, avec les sessions d'identifier un utilisateur connecté sur le site internet. Parce que une fois qu'un utilisateur est connecté au site internet, il va pas rentrer à chaque fois son nom d'utilisateur et son mot de passe; Ce serait bien trop complexe à réaliser pour l'utilisateur. Il faut donc pouvoir enregistrer sa connexion entre chaque page du site internet.

La différence entre les cookies et les sessions est que les cookies sont enregistrés sur le navigateur côté client, alors que les sessions sont enregistrée sur le serveur (seul le cookie PHPSESSID est enregistré sur le poste du client). Dans ce cours, on va s'intéresser aux cookies.

Voici comment initialiser un cookie en PHP:

		setCookie("nomDuCookie", "valeurDuCookie");
	

Voici comment récupérer la valeur d'un cookie client depuis PHP:

		$_COOKIE["nomDuCookie"];
	

Le code complet - profile.php

Ce script va contenir le profil de l'utilisateur passé en paramètre GET. de plus, si on est connecté, on va recupérer grace aux cookies si on est sur la page de notre propre profil. dans ce cas, on va pouvoir ajouter un nouveau post

		
		<html>
		<head>
		<title>Page de profil</title>
		<link rel="stylesheet" href="style.css">
		</head>
		<body>
		<p>Page de profil</p>
		<?php
		//initialisation PDO
		$pdo = new PDO("mysql:host=localhost:8889;dbname=mydb", "root", "root");
		//insertion du message 
		if(isset($_POST["newmessage"])) {
		    $valeurs = ["pseudo" => $_COOKIE["user"], "message" => $_POST["newmessage"]];
		    $req = "INSERT INTO messages (pseudo, message) VALUES (:pseudo, :message)";
		    $req = $pdo->prepare($req);
		    $req->execute($valeurs);
		}

		//on liste les messages
		if(isset($_GET["pseudo"])) {
		$req = $pdo->query("select * from messages where pseudo = '".$_GET["pseudo"]."'");
		echo 'Liste des messages du membre: '.$_GET['pseudo'].'<br><br/>';
		while ($res = $req->fetch()) {
		    echo $res["message"]."</br>";
		}
		}
		if (isset($_COOKIE["user"])) {
		    ?>
		    Votre pseudo : <?php echo $_COOKIE["user"] ?><br/><br/>
		    <form method="post" action="">
		        <input type="text" name="newmessage" placeholder="Ecrivez un message" value="" />
		        <input type="submit" name="submit" value="Publier" />
		    </form>
		    <?php
		    }
		?>
		</body>
		</html>
		
	

Améliorations possibles

Il est possible d'y rajouter du CSS et une belle bannière avec Photoshop pour mieux personnaliser votre propre réseau social à l'image de votre société ou de votre site de particulier.

Vous pourrez coder des mini-jeux en réseau, un système de partage de vidéo, et plein d'autres encore.

Il faut également renforcer la récurité du site, ou bien encore, vérifier qu'un nom utilisateur n'est pas déjà présent de la base avant de l'inscrire dans la table Users.

Conclusion

Si vous voulez tester ce réseau social sur mon site internet, voici le lien: http://piqueur.fr/social

Félicitaions ! Vous avez créé un petit réseau social minimaliste. Sachez tout de même qu'un réseau social necessite beaucoup de travail, non seulement pour le développer, mais aussi pour le maintenir et l'améliorer.

Ne négligez pas une bonne landing page et un bon design afin d'attirer l'oeil des visiteurs afin qu'ils aient vraiment envie d'utiliser votre réseau social.

Il faut également penser à faire de la publicité, par exemple en utilisant Facebook Ads ou Google Adwords pour le faire connaitre tout en ciblant les bons utilisateurs afin de faire venir beaucoup de monde.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels