Aller au contenu
Funky-Emulation Recrute
Akihira

 tutoriel / partage Développons notre CMS Metin2 #1 : Introduction et commencement.

Messages recommandés

Salut !

 

Comme les tutoriels de @Takuma on été (si j'ai compris) totalement détruit par le changement de moteur forum, je vais essayer de reprendre ses tutoriels avec plus de détails, et en publiant du contenue régulièrement. J'espère faire au moins aussi bien qu'il l'a fait. Voilà pourquoi j'ai repris son nom de poste, et que je vais partir sur la même branche que lui.

 

 

 

 

Introduction : 

 

Vous voulez apprendre à créer votre CMS metin2 ? Mais vous ne vous pensez pas capable d'apprendre tant de langage de programmation ? Pas d'inquiétude. Je vais vous guider pas à pas (dans l'élimination des pages de publicité... Ah non désolé ça c'est une pub !) pour vous familiariser avec l'HTML et le CSS. Je vous donnerais également quelques astuces en JavaScript, chose que il me semble @Takuma n'avait pas fait. Puis dans le même temps, nous allons parler de PHP, et même l'utiliser.

 

Citation

Merci Akihira de nous cité tout ça, mais... Ça s'utilise ? Quand ? Où ? Pourquoi ?

 

  • HTML : L'HTML est un langage de balisage. Il permet de donner une structure à votre code. Tout seul, il ne rend rien de beau. la mise en page s'effectue avec un autre langage.
  • CSS : Nous parlions de mise en page ? La voici. Le CSS est un lagage de style, il permet de mettre en page votre site web.
    • Vous pouvez déjà commencer rien qu'avec ses connaissances basiques à créer un site web. Cependant, il sera nommé site statique. Pour la simple raison que aucune interaction ne sera possible avec votre site. Ces deux langages permettent une création de page de présentation par exemple. Impossible de faire un espace membre digne de ce nom ou autre.
  • JavaScript/JS : C'est un langage de script. Il permet de faire des pages webs interactives. Malheureusement, nous ne pouvons nous contenter de celui-ci. Il est accessible au client, c'est à dire qu'il peut le modifier, et faire ce qu'il veut de son côté.
  • PHP : Le PHP ! Mon petit chouchou. Le PHP lui, par rapport aux trois aux langages ci-dessus, est exclusivement interprété par le serveur, le client ne recevra jamais aucune ligne de PHP. Votre PHP est traduit dans les trois langages ci-dessus avant d'être envoyer au client. Cela vous permet des opérations sécurisées et efficaces. Ne négligez cependant pas la sécurité de votre site web, elle est primordiale. PHP est très pratique, mais s'il n'est pas maîtrisé, en mettre sur votre site peut-être comme vous tirez une balle dans le pied.

 

Notre site web, se devra d'être complet. Comme je n'ai pas le temps de créer à la main un design, je ne l'évoquerai pas. Vous pouvez cependant utiliser vous des designs déjà partagés. Ou même créer le votre, vous trouvez tout ce dont vous avez besoin sur internet en vous renseignant sur l'HTML et le CSS.

 

Avant de vous dire ce que contiendra notre site web, je dois vous parler de la canon, la belle, la jolie, la sacrée, la légendaire, la divine et céleste documentation PHP ! Elle est complète, claire, disponible en français, courte et efficace. Ce sera pour mes tutoriels votre bible. Oubliez vos religions elle, vous prierez elle, et seulement elle.

 

Bien ! Que va contenir notre futur site web alors ?

  • Un système de news, vous pourrez les gérer entièrement sans aucune manipulation technique grâce à son panneau d'administration qui vous permettra :
    • Ajouter une news,
    • Supprimer une news,
    • Modifier une news,
    • Épingler des news afin qu'elles soient visibles en priorité par rapport aux autres.
  • Un espace membre complet :
    • Inscriptions :
      • Nom de compte,
      • Mot de passe crypté
      • Mot de passe clair si l'utilisateur le désire en cas de perte de mot de passe pour ne pas avoir à remettre à 0 son mot de passe :
        • Panneau de prévention en quoi cette option est déconseillée.
      • Mail valide.
      • Acceptation des règles.
    • Connexion,
    • Gestion du compte :
      • Suppression du compte,
      • Modification du mot de passe,
      • Gestion du mot de passe entrepôt si celui-ci est ouvert IG (activé),
      • Changer son adresse mail.
    • Inscription avec validation par mail.
  • Un système de vote :
    • Vérification du vote :
      • Si le joueur a bien voté
      • Si le temps entre les vote est respecté
    • Accréditation des crédits si le vote est validé.
  • Classements :
    • Classement joueurs complet :
      • Top 10 en page d'accueil,
      • Classement habituel avec les pages.
    • Classement de guilde complet :
      • Top 10 en page d'accueil en fonction du niveau et des victoires.
      • Classement habituel avec les pages.
    • Option permettant de trier le classement par ordre décroissant/croissant.
    • Option permettant de chosire le facteur pris en compte pour la classement :
      • Niveau
      • Nom (A->Z ou inversement)
      • Nom du chef (A->Z ou inversement)
      • Energie
      • etc...
  • Un ItemShop complet et opérationnel :
    • Gestion des catégories :
      • Ajout,
      • Suppression,
      • Modifications (ordre, nom, etc...).
    • Gestion des items :
      • Ajout,
      • Suppression,
      • Modifications (ordre, prix, nom, etc..).
    • Les icons seront placés automatiquement grâce au pack icon qui sera uplodad dans une destination bien spéciale.
  • Système de langue :
    • Un fichier spécifique par langue,
    • Modifiable sur le site,
    • Choix pour chaque personne la langue désirée qui sera stockée grâce à un système de cookies s'ils sont acceptés par le client.
  • Système de support :
    • Comptes :
      • Super-Administrateur (compte d'ID 1) :
        • Ajout de Super Administrateur,
        • Suppression,
        • Tous les droits.
      • Administrateurs (Implementor) :
        • Toute la modérations et l'administration nécessaire.
      • Modérateur (GM) :
        • Toute la modération permettant de répondre au sujet sans avoir tous les droits d'un administrateur.
  • Système d'installation :
    • Configuration générale du site :
      • Nom,
      • Date,
      • Copyrtight,
      • etc...
    • Configuration des base de données  :
      • Base de données du site :
        • Nom de la base de données.
      • Base de données du jeu :
        • Nom des bases de données :
          • Player,
          • Account,
          • Common.
        • Adresse IP,
        • Utilisateur,
        • Mot de passe,
        • Port,
  • Administration :
    • Configuration générale du site,
    • Gestion des GM,
    • Configuration des langues
    • Gestion du jeu.

 

J'oublie beaucoup de paramètre. Mais quand nous aurons déjà fait tout ça, nous aurons déjà travailler un petit bout de temps !

 

Vous êtes prêts ? Démarrage du tutoriel...

 

 

Les pré-requis: 

 

Pour suivre ce tutoriel, vous n'aurez pas besoin de beaucoup de chose, mais elles seront toutes obligatoires.

 

  • Un éditeur de texte adapté. Je ne compte pas vous faire un cours sur l'édition du code avec un bloc note, foncez prendre un éditeur adapté tel que :
    • Sublime texte
    • NotePad++
    • Atome
    • DreamWeaver
  • Un serveur WEB :
    • Distant :
      • Hebergement mutualisé
      • VPS, dédié avec Apache
    • Locale :
      • EasyPHP,
      • WAMP,
      • XAMP.
  • Des bases de données :
    • Player
    • Common
    • Account
    • Website

 

Si vous avez besoin d'aide pour ceci, je vous aiderais en pv. Où non demandez à @Takuma ça l'occupera, d'après ce qu'il m'a dit il n'a rien à faire de ces vacances d'étudiant. Fainéant.

 

 

L'arborescence : 

 

Mon arborescence est beaucoup utilisée, mais est des fois assez bizarre. Je vais m'adapter à une arborescence plus connu, cela donne :

  • assets
    • css
    • js
    • img
    • pages
    • db.php
    • functions.php
  • admin
  • capatcha
  • index.php

 

Nous ajouterons plus tard des dossiers comme celui de l'installateur par exemple, mais celui-ci se fera à la fin. En attendant pour conclure cette première partie au même point que @Takuma l'avait fait, je vais vous faire créer une connexion PDO.

 

 

 

La connexion à la base de données principale : 

 

Bien, pour ceci, nous allons nous rendre dans notre fichier index.php :

 

Nous allons tout d'abord dire au site : "Je veux écrire du PHP", pour cela il n'existe qu'un moyen (enfin deux... mais utilisez celui là) :

<?php

//J'écris ici mon code PHP

?>

Notez que tout le contenue précédé de // dans sa ligne est nommé commentaire. C'est à dire qu'il ne sera pas interprété par PHP, vous pouvez mette ce que vous voulez. Ce code ne sera pas visible pas le client non plus.

 

Ici, à la différence de @Takuma Je vais directement inclure mon fichier nommé functions.php dans mon index. Ce fichier va contenir toutes les fonctions PHP, mais aussi la connexion à la base de données, vous verrez.

<?php
require_once('assets/functions.php');
?>

Il existe trois façon d'inclure du code d'un fichier dans un autre :

  • require_once
  • include
  • require

Ces méthodes ont toutes les trois le même but, mais elles ont des subtilités :

  • include : Vous pouvez importez autant de fois que vous voulez le fichier. Si le fichier n'est pas trouvé le code ne s'arrête pas, et continue quand même.
  • require : Vous pouvez inclure autant de fois que nécessaire le fichier dans un autre. Cependant, si une seule fois le fichier n'est pas trouvé, le code s'arrête net, puis affiche une erreur.
  • require_once : Vous pouvez inclure seulement une seule fois un fichier dans un autre, et celui-ci doit obligatoirement être là, sinon erreur et arrêt immédiat du code.

 

Bien, une fois ceci tapez, ouvrons notre fichier functions.php (assets/functions.php), puis tapez :

<?php
require('db.php');
?>

Ici, nous donnons cette instruction au fichier : Tu importes le fichier db.php qui se trouve dans la même destination que toi, si tu ne le trouves pas, tu coupes tout Franky !

Pourquoi ne pas avoir faire un require_once ? Vous comprendrez plus tard, nous allons importer souvent ce fichier.

 

Passons pour finir à l'édition de notre fichier db.php :

Nous allons créer quatre variables :

  • IP : Elle contiendra l'adresse d'accès à nos base de données
  • USER : Elle contiendra l'utilisateur
  • PASS : Elle contiendra le mot de passe
  • WEBDBNAME : Elle contiendra le nom de la base de données du site.

 

Nous allons comme @Takuma créer une variable (un peu spécial) qui va contenir notre connexion PDO.

 

Créons déjà nos variables, en PHP pour créer une variable nous utilisons : $ puis le nom de la variable (ne doit pas commencer par _ car c'est le prefix des super variables, nous verrons ça plus tard).

Cela donne :

 

<?php 
	$IP = "192.168.1.29"; 
	$USER = "root";
	$PASS = "pF5tfiUH3f7KDyT49rQu52Hu88";
	$WEBDBNAME = "website" ;
?>

Adaptez selon vos identifiants.

 

Nous allons par contre rajouter un petit code qui vous nous permettre d'afficher absolument tous les warnings/errors possibles et imaginables dès qu'il y en aura en ajoutant ces deux lignes avant la déclaration de notre variable IP :

<?php
	ini_set('display-errors', true);
	error_reporting(E_ALL);
?>

(Je n'ajoute les balises PHP que pour que vous puissiez profiter de la coloration syntaxique).

 

Bien créons maintenant notre connexion dans un bloc try cela donne en théorie :

  • Essaye de :
    • Te connecter
  • Si cela echoue :
    • Tu coupes le code
    • Tu affiches l'erreur

Bien, je vous donne le code, vous ne pouvez pas le devinez de toute façon, en tout cela donne :

<?php
	ini_set('display-errors', true);
	error_reporting(E_ALL);
	$IP = "192.168.1.29"; 
	$USER = "root";
	$PASS = "pF5tfiUH3f7KDyT49rQu52Hu88";
	$WEBDBNAME = "website" ;
	try {
		$db = new PDO('mysql:host='.$IP.';dbname='.$WEBDBNAME, $USER, $PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
	} catch (PDOException $e) {
		print "DATABASE ERROR : " . $e->getMessage() . "<br/>";
		die;
	}
?>

 

 

Et voilà, vous avez crée votre variable $db qui contient les informations nécessaires à l'utilisation complète de PDO.

 

 

J'espère avoir été claire, désolé j'ai pas vraiment l'habitude de faire des tutoriels. D'habitude je reste un peu inactive, en ninja sur les autres forums.

 

Bonne lecture ! 

 

Modifié par FrancH

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, Holly a dit :

Hâte de voir la suite, ça me sera très utile :P 

Merci! +1 

Salut !

 

Merci beaucoup ! Je vais essayer ce soir de faire une autre partie avec les classements. Je suis assez prise ce soir. Je vais voir ce que je peux faire. Tu as des préférences dans l'ordre ?

Bonne soirée !

Partager ce message


Lien à poster
Partager sur d’autres sites

Hey ! 

Vas à ton rythme, j'ai le temps! Je comprend que ça te prennent énormément de temps tout ça :P 

La partie qui m'intéresse le plus étant la page de vote, je vais quand même suivre ton tuto de A à Z pour tenter de faire mon propre CMS que celui que j'ai déjà. 

Donc, c'est toi qui voit ! 

Merci beaucoup pour ta réponse, bonne soirée à toi! 

Partager ce message


Lien à poster
Partager sur d’autres sites

La page de vote c'est le plus simple ! Tu as 90% des codes déjà disponibles sur le topMetin2. Il ne te resteras plus qu'à faire la query pour créditer les monnaies au compte. ;)

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 5 minutes, Holly a dit :

mmmh... Ah bon? x) 

J'attends de voir ça :P 

C'est pas faute de te l'avoir déjà dis... xD

Partager ce message


Lien à poster
Partager sur d’autres sites

Je relisais pas curiosité le tutoriel, tu aurais pu rajouter :

Si le serveur se trouve sur la même machine que le serveur sql, il est conseillé de ne pas utilisé d'IP mais un socket pour PDO.

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 07/05/2018 à 10:33, Takuma a dit :

Je relisais pas curiosité le tutoriel, tu aurais pu rajouter :

Si le serveur se trouve sur la même machine que le serveur sql, il est conseillé de ne pas utilisé d'IP mais un socket pour PDO.

Tu aurais pu donner la méthode pour se connecter par socket au passage.

$d = NEW PDO('mysql:unix_socket=/tmp/mysql.sock;dbname='.$str, $str, $str);

 

Partager ce message


Lien à poster
Partager sur d’autres sites

×

Information importante

By using this site, you agree to our Conditions d’utilisation.