ConnectMobile 📱

Une application web mobile de réseau social permettant aux utilisateurs de partager leurs profils, leurs passions et de se connecter avec d'autres personnes via différents réseaux sociaux.

📋 Description

ConnectMobile est une plateforme de partage de contacts sociaux conçue spécialement pour les appareils mobiles. L'application permet aux utilisateurs de créer un profil complet avec leurs informations personnelles et leurs liens vers différents réseaux sociaux (WhatsApp, Facebook, Instagram, Telegram), de partager leurs passions avec des images, et de rechercher d'autres utilisateurs.

✨ Fonctionnalités principales

Gestion des utilisateurs

• Inscription : Création de compte avec informations personnelles (nom, prénom, email, ville, profession)
• Connexion : Authentification sécurisée avec email et mot de passe hashé
• Profil utilisateur : Page de profil personnalisée avec photo de profil et photo de couverture
• Modification de profil : Mise à jour des informations personnelles et des liens sociaux
• Suppression de compte : Possibilité de supprimer son profil et toutes les données associées

Réseaux sociaux

• Intégration de multiples plateformes :
  • 📱 WhatsApp
  • 👥 Facebook
  • 📸 Instagram
  • ✈️ Telegram
• Affichage des liens sur le profil avec icônes

Passions et centres d'intérêt

• Ajout de passions avec images personnalisées
• Galerie de passions sur le profil
• Upload d'images pour illustrer chaque passion

Recherche et navigation

• Moteur de recherche pour trouver d'autres utilisateurs
• Affichage des résultats avec cartes de profil
• Navigation intuitive avec barre de navigation fixe en bas

Interface mobile

• Design responsive optimisé pour mobile
• Navigation en bas de l'écran pour faciliter l'utilisation à une main
• Icônes Font Awesome pour une meilleure expérience utilisateur
• Interface en français

🛠️ Technologies utilisées

• Frontend :

  • HTML5
  • CSS3
  • JavaScript
  • Font Awesome 6.0.0

• Backend :

  • PHP (programmation côté serveur)
  • Sessions PHP pour la gestion de l'authentification

• Base de données :

  • MySQL
  • Tables : users, passions

📁 Structure du projet

connectmobile/
├── index_mobile.html          # Page d'accueil
├── login_mobile.php           # Page de connexion
├── signup_mobile.php          # Page d'inscription
├── profile_mobile.php         # Page de profil utilisateur
├── search_mobile.php          # Page de recherche
├── add_passion_mobile.php     # Ajout de passions
├── delete_profile_mobile.php  # Suppression de profil
├── logout_mobile.php          # Déconnexion
├── goodbye_mobile.php         # Page de confirmation après suppression
├── db_connect.php             # Connexion à la base de données
├── assets/                    # Images et médias
│   ├── passion_images/        # Images des passions
│   └── [photos de profil]     # Photos de profil et couverture
└── css/
    └── styles.css             # Feuilles de style

🚀 Installation

Prérequis

• Serveur web avec PHP (Apache, Nginx, etc.)
• PHP 7.4 ou supérieur
• MySQL 5.7 ou supérieur
• phpMyAdmin (recommandé pour la gestion de la base de données)

Étapes d'installation

1. Cloner le projet

   git clone https://github.com/jocha28/connectmobile.git
   cd connectmobile

2. Configurer le serveur web

   • Placer les fichiers dans le répertoire web de votre serveur (par exemple : /var/www/html/ ou htdocs)
   • Assurez-vous que PHP est activé sur votre serveur

3. Créer la base de données

   CREATE DATABASE social_network;

4. Créer les tables nécessaires

   USE social_network;
   
   -- Table des utilisateurs
   CREATE TABLE users (
       id INT AUTO_INCREMENT PRIMARY KEY,
       first_name VARCHAR(100) NOT NULL,
       last_name VARCHAR(100) NOT NULL,
       email VARCHAR(255) UNIQUE NOT NULL,
       password VARCHAR(255) NOT NULL,
       whatsapp VARCHAR(100),
       facebook VARCHAR(255),
       instagram VARCHAR(255),
       telegram VARCHAR(100),
       city VARCHAR(100),
       profession VARCHAR(100),
       profile_picture VARCHAR(255) DEFAULT 'assets/default.jpeg',
       cover_photo VARCHAR(255) DEFAULT 'assets/default.jpeg',
       consent TINYINT(1) DEFAULT 0,
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   );
   
   -- Note : Le code actuel utilise 'assets/🧸.jpeg' comme fichier par défaut.
   -- Pour production, renommez ce fichier en 'default.jpeg' et mettez à jour les références dans le code.
   
   -- Table des passions
   CREATE TABLE passions (
       id INT AUTO_INCREMENT PRIMARY KEY,
       user_id INT NOT NULL,
       name VARCHAR(255) NOT NULL,
       image_path VARCHAR(255),
       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
       FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
   );

5. Configurer la connexion à la base de données

   • La plupart des fichiers utilisent la base de données social_network
   • Si vous souhaitez utiliser un nom différent, modifiez les connexions dans tous les fichiers PHP
   • Exemple dans les fichiers login_mobile.php, signup_mobile.php, profile_mobile.php, etc. :

     $conn = new mysqli("localhost", "root", "", "social_network");

   • Note : Le fichier db_connect.php utilise actuellement social_contacts. Pour corriger cette incohérence, modifiez la ligne 2 de db_connect.php :

     // Remplacer :
     $conn = mysqli_connect('localhost', 'root', '', 'social_contacts');
     // Par :
     $conn = mysqli_connect('localhost', 'root', '', 'social_network');

6. Créer les dossiers pour les uploads

   mkdir -p assets/passion_images
   chmod 755 assets
   chmod 755 assets/passion_images

7. Accéder à l'application

   • Ouvrir votre navigateur
   • Accéder à : http://localhost/connectmobile/index_mobile.html

💡 Utilisation

Première utilisation

1. S'inscrire :

   • Cliquer sur "Inscription" depuis la page d'accueil
   • Remplir le formulaire avec vos informations
   • Uploader une photo de profil (optionnel)
   • Accepter les conditions d'utilisation
   • Valider l'inscription

2. Se connecter :

   • Entrer votre email et mot de passe
   • Cliquer sur "Se connecter"

3. Compléter votre profil :

   • Ajouter vos liens réseaux sociaux
   • Uploader une photo de couverture
   • Ajouter vos passions avec images

4. Rechercher des utilisateurs :

   • Utiliser la barre de recherche
   • Consulter les profils des autres utilisateurs

5. Gérer votre compte :

   • Modifier vos informations depuis votre profil
   • Déconnecter via le bouton de déconnexion
   • Supprimer votre compte si nécessaire

🔒 Sécurité

• Les mots de passe sont hashés avec password_hash() de PHP
• Sessions PHP pour gérer l'authentification
• Validation des uploads de fichiers (types d'images autorisés)
• Protection contre les accès non autorisés aux pages protégées

⚠️ Notes de sécurité importantes :

• Ce projet utilise des requêtes SQL directes dans plusieurs fichiers (login_mobile.php, signup_mobile.php, profile_mobile.php). Pour une utilisation en production, il est fortement recommandé d'utiliser des requêtes préparées (prepared statements) pour prévenir les injections SQL.
• Exemple de remplacement recommandé :

  // Au lieu de :
  $sql = "SELECT * FROM users WHERE email='$email'";
  
  // Utiliser :
  $stmt = $conn->prepare("SELECT * FROM users WHERE email = ?");
  $stmt->bind_param("s", $email);
  $stmt->execute();

• Les fichiers par défaut dans le code utilisent des emojis dans les noms (ex: 🧸.jpeg). Pour éviter des problèmes de compatibilité, il est recommandé de :
  1. Renommer le fichier assets/🧸.jpeg en assets/default.jpeg
  2. Mettre à jour les références dans signup_mobile.php (lignes 27-28) et autres fichiers qui utilisent ce nom de fichier

🎨 Personnalisation

Modifier les couleurs

Éditer le fichier css/styles.css et les balises <style> dans les fichiers PHP pour personnaliser :

• Couleur principale : #4CAF50 (vert)
• Couleurs de fond
• Styles des boutons et formulaires

Ajouter des réseaux sociaux

1. Modifier les fichiers PHP concernés (signup, profile)
2. Ajouter les champs dans la base de données
3. Ajouter les icônes Font Awesome correspondantes

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à :

• Signaler des bugs
• Proposer de nouvelles fonctionnalités
• Améliorer la documentation
• Soumettre des pull requests

📝 Licence

Ce projet est un projet éducatif open source.

👥 Auteur

Développé par jocha28

📞 Support

Pour toute question ou problème :

• Ouvrir une issue sur GitHub
• Consulter la documentation du code

---

Remarque : Cette application est conçue principalement pour un usage mobile. Pour une meilleure expérience, utilisez-la sur un smartphone ou un navigateur en mode développeur mobile.