logo Portfolio - Colomb Evan
Retour aux projets
Projet Personnel • Sep. 2025 - Présent

ToaruLN FR

Présentation du Projet

ToaruLN FR est un site dédié à la traduction de Light Novels (abrégés LN, qui signifie 'romans léger') de la franchise "A Certain Magical Index" comprenant plus de 100 tomes.

Le but de ce site est de fournir au plus grand nombre l'accès à la lecture, licenciée officiellement en France mais abandonnée. La franchise possédant plusieurs séries, nous ne travaillons que sur celles non licenciées.

Pour cela, nous avons designé le site, de sorte que l'experience utilisateur soit la plus agréable possible, que se soit sur PC, tablette ou téléphone, tout en ayant une D.A moderne.

Technique et Version Actuelle (V 3.0)

Technologies actuellement utilisées

Le projet actuel (site et administration), en V.3.0, utilise comme technologie PHP 8 pour le backend, basé sur un modèle MVC.

Le site est actuellement hégergé chez OVH. Cette hebergement possède plusieurs bases de données qui sont utilisé ici. Deux pour être exacte : une pour la production et une pour la pré-production.

Le front, lui, est assuré par le framework Tailwind CSS, couplé à du HTML/CSS standard.

Les structures du site et de l'administration sont disponibles sur leurs pages Github publiques respectives.

Site Administration

Historique des versions

Version 1.0

À l'origine, le site était conçu de façon dite "statique", ce qui signifie qu'il ne comportait que du HTML/CSS basique.

Même l'intégralité des volumes était rentrée à la main directement dans le code.

Exemple Structure V.1.0
  • root/www/
    • index.html // Accueil
    • pages/
      • series.html // Réference toutes les séries
      • contact.html
      • NT/
        • liste.html // Contient la liste de tous les tomes
        • NT1/
          • sommaire.html
          • prologue.html
          • Chapitre1.html
        • NT2/
          • sommaire.html
          • prologue.html
          • Chapitre1.html
    • shared/ // Fichiers partagés (css, etc.)
      • style.css
    • img/ // Illustrations et logos
Version 2.0

Se rendant compte que la structure précédente n'était pas adapté, et venant d'apprendre le PHP en mode MVC en cours, nous avons decidé de rajouter une administration pour gérer le site sans toucher au code source.

Cette administration est structurée en MVC et est un sous domaine du site relié à une base de données qui sera plus tard définie comme celle de production.

Elle a été faite avec le but de pouvoir manipuler le plus facilement toutes les données du site à ce moment. Cela inclut par exemple un "mini éditeur de texte" à l'ajout d'un chapitre, qui est un formulaire où l'on peut via des boutons, ajouter du html dans le texte, par exemple mettre une ligne en italic ou autre, qui sera par la suite affiché sur le site dans le fichier "read.php".

Le site en lui même n'a pas beaucoup changé d'architecture mais a eu le droit à plusieurs ajouts. L'une des principales modifications réside dans les listes répertoriant les tomes d'une série, qui, grâce à la base de données, nous permet d'ajouter facilement un tome en quelques clics puis juste d'ajouter son dossier avec les deux fichiers suivants. La seconde modification principale, elle, se situe au niveau des dossiers des tomes où tous les fichiers ont été remplacés par deux seuls fichiers "read.php" et "sommaire.php" qui sont reliés à la base de données.

Exemple Structure V.2.0
  • root/www/
    • index.php // Accueil
    • pages/
      • series.php // Référence toutes les séries
      • contact.php
    • NT/
      • liste.php // Contient la liste de tous les tomes de cette série
      • NT1/
        • sommaire.php // Liste de tous les chapitres d'un tome
        • read.php // Contient le chapitre sélectionné précédemment
      • NT2/
        • sommaire.php // Liste de tous les chapitres d'un tome
        • read.php // Contient le chapitre sélectionné précédemment
    • shared/ // Fichiers partagés (css, etc.)
      • style.css
    • img/ // Illustrations et logos
Ajout de la pré-production

Au moment de passer à la version 3.0 du site, nous avons eu l'idée de faire une pré-production car de lourdes modifications aller être faites.

Vu que nous ne possédions qu'une seule base de données à ce moment là, nous avons donc créé des tables spécifiques avec un préfixe "pre_" pour les distinguer. Cette distinction se fait par la différence de noms de domaine. La pré-production se trouvant dans un sous domaine. Il y a donc un léger traitement au niveau de la connexion où ça va comparer les domaines.

Peu avant la publication de la version 3.0, OVH a changé ses abonnements nous permettant d'avoir 5 bases de données, une a donc été utilisée pour la pré-production.

Performance

Optimisation du backend PHP pour un temps de réponse minimal malgré le volume de texte important.

Expérience

Interface minimaliste type "e-reader" pour maximiser le confort visuel sur de longues sessions de lecture.

Stack Technologique

Backend
PHP 8.x
Database
MySQL
Frontend
Tailwind CSS