Installer pas à pas TYPO3 6.0 sur un VPS

[Rectif]

Je précise dans un premier temps que je ne suis pas un sysadmin. Je n’ai pas non plus l’habitude de travailler avec les lignes de commandes bien qu’étant développeur web

Après avoir lu des articles un peu partout sur la toile, je décide de partager cette petite expérience qui est d’installer le package php, mysql, apache et TYPO3 sur un VPS.

Cet article se divise en plusieurs étapes. Les  étapes 4 et 5 sont spécifiques à TYPO3. Les autres étapes sont valables pour n’importe quel autre CMS.

Je me suis toujours contenté d’un hébergement mutualisé pour les sites développés avec TYPO3.  Malheureusement, ceci devient de plus en plus contraignant voire impossible pour les dernières versions de TYPO3 dont la 6.0. En effet, certaines extensions PHP utiles pour faire fonctionner cette version telles que fileinfo sont désactivées par l’hébergeur sur un serveur mutualisé car elles demandent trop de ressources.

Les offres d’hébergement dédiés ne sont pas non plus à la portée d’un simple particulier. Toutefois je trouve les offres VPS de chez OVH assez abordables.

Je recois un mail de OVH qui contient les identifiants de connexion au VPS, l’adresse IP du serveur et l’adresse URL provisoire (http://vpsxxxxx.ovh.net/).

Habitué à travailler sous windows, j’ai l’habitude d’utiliser le logiciel KITTY pour travailler sur un serveur Linux.

Je me connecte donc en SSH avec l’adresse IP du serveur VPS, l’utilisateur root et le mot de passe.

Dans la suite de l’article, les lignes de commandes seront dans un bloc comme ceci

LE VPS tourne avec le système d’Exploitation : Ubuntu.

Etape 1 – Installation Apache, PHP et Mysql

Dans un premier temps, une mise à jour des paquets est nécessaire.

J’installe ensuite Apache, PHP  et MYSQL

Dans la commande ci-dessus, il arrive que mysql vous demande de spécifier le mot de passe de connexion à l’utilisateur root.

J’en profite ensuite pour activer la réécriture d’URL de APACHE car je risque d’oublier

Je redémarre APACHE pour que ces modifications soient prises en compte :

Je teste ensuite mon serveur en ouvrant le lien http://vpsxxxxx.ovh.net/ dans mon navigateur. Et là j’ai un beau

Une petite modification dans la configuration Apache est nécessaire. en remplaçant 

AllowOverride None par AllowOverride All

dans la directive <Directory /var/www/> du fichier « /etc/apache2/sites-enabled/000-default »

Etape 2 – Configuration PHP

1. PHP-GD

L’extension GD (traitement d’image en PHP) est par défaut désactivée dans une installation PHP par défaut.

Pour vérifier que GD est installée, la commande suivante peut être utilisée :

Cette commande devrait retourner le code suivant si GD est installée : 

Pour l’installation de GD :

2. Activer les fonctions DISABLED

Plusieurs fonctions ont été désactivées dans l’installation par défaut de PHP. Pour activer toutes les fonctions, éditer le fichier /etc/php5/apache2/php.ini et commenter la ligne

en ajoutant un ; (point-virgule) devant « disable_functions ». Ce qui devrait donner

Un petit redémarrage de Apache est nécessaire pour prendre en compte ces modifications.

3. Utilitaire de connexion à la BDD mysql

J’utilise le script adminer -  (au lieu de phpmyadmin) pour me connecter au serveur mysql, créer une Base de données, créer des utilisateurs, leur donner des privilèges, créer et manipuler des tables dans la base de données…

Je  place le fichier adminer.php dans /var/www/.

Je lance l’url http://vpsxxxxx.ovh.net/adminer.php et je me connecte avec les identifiants :

root / motdepasse (que j’ai choisi lors de l’installation de mysql – cf plus haut).

A partir de là, je vais créer une base de données nommée typobdd (interlacement : utf8_general_ci) et aussi créer un utilisateur et lui donner des privilèges.

Etape 3 – Installation et Configuration de APC-PHP

APC-PHP (AlternativePHPCache) est un système de cache permettant d’accélérer la génération des pages PHP.

Pou l’installer, il faut exécuter les commandes suivantes :

Editer ensuite le fichier /etc/php5/apache2/conf.d/apc.ini et ajouter les lignes suivantes

NB : la première ligne est commentée expressément. Ceci afin de ne pas activer APC-php tout de suite car cela risquerait de bloquer l’installation de TYPO3 plus tard.

Un petit redémarrage de Apache est nécessaire pour prendre en compte ces modifications.

Pour pouvoir controller les actions du cache à partir de l’URL http://vpsxxxxx.ovh.net/apc.php, Copier le fichier de apc vers /var/www en faisant :

Etape 4 – Installation de TYPO3 6.0

Le répertoire d’installation des fichiers de TYPO3 sera /var/www/.

Dans un premier temps, récupérer les sources zip de TYPO3. Je choisis de télécharger le  (dummy + zip) .

Extraire l’archive téléchargé dans le même répertoire  :

Le dossier devrait être le suivant : /var/www/typo3_src%2Bdummy-6.0.4

Modifier les droits du dossier et de tout son contenu en lui affectant les mêmes droits que Apache.

Déplacer tout le contenu du dosser  typo3_src%2Bdummy-6.0.4  vers un niveau supérieur :

Supprimer le répertoire typo3_src%2Bdummy-6.0.4 qui doit être vide à cette étape.

Etape 5 – Installation de ImageMagick

TYPO3 utilise cette librairie ImageMagick pour traiter les images (redimensionner, recadrer).

Pour l’installer :

Ecrire dans la configuration de imagemagick

Un petit redémarrage de Apache est nécessaire pour prendre en compte ces modifications.

A partir de là on peut lancer dans le navigateur pour installer TYPO3 en allant sur http://vpsxxxxx.ovh.net/

Etape 6 – Réactiver APC-PHP

Lorsqu’on est sur que TYPO3 est bien installé et qu’on a fini tous les développements, on peut activer APC.

Il suffit d’éditer le fichier /etc/php5/apache2/conf.d/apc.ini et décommenter la ligne ;extension=apc.so. Ce qui devrait avoir le code suivant :

Un petit redémarrage de Apache est nécessaire pour prendre en compte ces modifications.

Bon courage

jQuery restructure son code avec la sortie de jQuery 1.9

jQuery 1.9 vient de sortir en version finale. Cette version et la version 2.0 (déja disponible en version Beta) ont la même API.

A terme, cette API ne fonctionnera que sur une dernière version de Internet Explorer (9 et supérieure).

Pour faciliter la migration de vos scripts développés avec jQuery 1.8 et inférieurs. Il est nécessaire d’installer un plugin créé par jQuery qui se nomme « jQuery Migrate« .

Ce plugin contient les anciennes fonctions et permet facilement la transition entre ces versions. En effet, plusieurs fonctions disponibles dans les versions 1.8 et inférieures ont été remplacées voire supprimées.

Parmi les nouveautés de la version 1.9 , on peut citer les suivantes :

Récupérer les propriétés CSS d’un élément dans un Array : (nouveau)

Supposons que notre code HTML ressemble à ceci

Grâce au code suivant :

Il est possible de récupérer la largeur (width), la hauteur (height) et la couleur de fond (backgroundColor) d’un élément sous forme d’objet

Voir la démo

Les fonctions browser(), live(), die(), sub()  supprimées.

Obsolète après la version 1.3, ces fonctions ont été supprimées dans la version 1.9.

Ainsi, pour récupérer les propriétés d’un navigateur avec la fonction browser() par exemple, jQuery recommande d’utiliser la librairie Modernizr.

Les autres nouveautés sont listées sur cette page.

jKit – Et si les fonctionnalités avancées de jQuery étaient embarquées dans du HTML?

Si on pouvait avoir telle ou telle fonctionnalité….ça serait idéal

De quoi je parle ? et bien des animations, du dynamisme qu’on voit un peu partout sur les sites qu’on utilise tous les jours. Par animation, je veux dire du carousel par exemple, des menus déroulants, des effets accordéons, des images défilantes (slideshow), des fenêtres dynamiques (lightbox), des onglets (tabs)….ou tout ce que le HTML ne peut pas apporter nativement sans ajout de couche Javascript et un peu de CSS.

La solution est claire et simple. Elle se trouve dans jQuery et les tas de plugins associés qui répondent à ces besoins.

A chaque ajout de nouvelle fonctionnalité, il faut donc ajouter un plugin. Non seulement, il faut ajouter le fichier du plugin dans le serveur, mais aussi il faut appeler le plugin dans la page HTML pour être exécuté. On n’est pas au bout de nos surprises, puisqu’il se peut qu’on rencontre un conflit avec un autre plugin déjà installé. Dans ce cas, soit on tombe sur une page blanche ou au pire des cas, le plugin fait planter le navigateur Et oui, le développeur d’un plugin ne va pas s’amuser à tester son plugin avec tous les plugins existants de la communauté.  L’essentiel est pour lui est que son plugin marche avec jQuery.

Cette dans cette optique qu’intervient jKit. C’est un plugin jQuery qui embarque presque toutes les fonctionnalités citées plus haut.

Lightbox, Slideshow, Tabs, Accordion, Carousel, Ticker, Formulaires…..et d’autres fonctionnalités existent. L’appel se fait en ajoutant un attribut « data-jkit » dans la balise HTML et le tour est joué.

Exemple pour créer un « news ticker », voici le code source utilisé

Le résultat est le suivant

L’avantage est multiple :

• Le chargement d’une page est plus légère.
• La prise en main est rapide.
• Une seule mise à jour suffit.
• Une syntaxe unique à connaître et respectueuse du standard.

Pour explorer ce plugin et ses fonctionnalités :

Eden-PHP – découverte du début de l’année 2013.

Bonne et heureuse année à tous.

Qu’elle vous apporte santé, joie et bonheur et un monde plus meilleur que les années passées.

Eden-PHP est la découverte en ce début d’année. Je sens qu’il va être utilisé par plusieurs développeurs d’ici quelques semaines, mois. En tout cas, c’est une merveille en consultant la documentation et les exemples. Il est destiné uniquement qu’aux développeurs PHP

Pour résumer l’utilité de cette librairie, je vais faire simple. Toutes les plateformes de réseaux sociaux ou non tels que Facebook, Twitter, Google, Paypal possèdent une API (Application Programming Interface). Une API est un protocole permettant à une application externe de se connecter au service souhaité, de récupérer les informations dedans et de les exploiter ensuite. Prenons un exemple. L’application tweetdeck (rachetée récemment par twitter) utilise l’api de twitter, récupère la timeline de votre compte et l’affiche dans tweetdeck.  Ce qui vous permet d’utiliser twitter avec plusieurs comptes. Ce qui est actuellement impossible à faire à partir d’un navigateur web via le site twitter.com. Pour pouvoir utiliser l’API de twitter, il faut au minimum se documenter sur l’API qui est disponible sur https://dev.twitter.com/.  Presque tous les services mettent à disposition une documentation sur leur API. Et il vous faut un peu de temps pour maîtriser l’API d’un service. C’est là qu’intervient eden-php.

Grâce à eden-php, il suffit de maîtriser une seule documentation qui est celle d’EDEN-PHP. La méthode est identique quelque soit le service utilisé.

Pour Twitter, il suffit de faire ceci

La documentation est assez vaste puisque plusieurs services sont disponibles. Je vous invite à y voir plus clair sur le site http://www.eden-php.com/

Nouvel article sur #TYPO3, et un article sur #WordPress dans le Best OF de @PHPSolutions1

PHPSOLMAG vient de publier un article sur TYPO3 que j’ai rédigé qui s’intitule « Créer une extension de A à Z avec TYPO3″ dans son édition du 30 juin 2012.

Cliquer sur cette couverture pour acheter le magazine et lire cet article. 

Aussi, un autre article que j’ai rédigé sur WordPress « Développement de shortcode et Hook dans WordPress » figure dans le « The Best Of PHP Solutions » du 22 juin 2012.

Voici le lien de ce dernier article.

Redactor.js – un autre éditeur wysiwyg en jQuery

Encore jQuery ! et oui, cela ne s’arrêtera pas du jour au lendemain

J’ai déjà créé un billet sur les éditeurs wysiwig en jQuery mais celui-là mérite un nouveau. Il a l’air très simple et très orienté interface utilisateur.

Il se nomme redactor.js. Il ne pèse que 200Ko (sans compter jQuery bien sur).  Les barres d’outils peuvent être configurées  comme les grands éditeurs tels que : Ckeditor, TinyMCE…On peut éditer le contenu en plein écran. La barre d’outils d’édition peut rester fixe en cas d’utilisation de l’ascenseur de droite (scroll). L’éditeur peut être dimensionné dynamiquement en hauteur et donc s’adapter au contenu (autogrow).

Implémenté avec Fancybox et de jQuery UI dialog, il peut très bien s’intégrer  à un système d’édition en live de contenu.  Les sous-menu de quelques barres d’outils ressemble beaucoup à Google doc texte.

Pour les DEMO et pour les détails .

Mon article sur wordpress dans phpsolmag ;)

« WordPress permet par défaut de créer un article,  une page, un lien, d’ajouter un média… WordPress permet également l’ajout d’autres fonctionnalités plus poussées telles que : transformer un shortcode ajouté dans l’éditeur de texte d’un article / page en contenu dynamique, ou encore profiter des Hooks WordPress pour des fonctionnalités ou affichages additionnels. Miary Rebehasy vous montrera les différentes façons d’étendre wordpress à travers les shortcode et hooks. »

Telle est l’introduction de l’article sur wordpress intitulé « Développement de shortcode et Hook dans WordPress » que j’ai rédigé dans phpsolmag. Je vous invite à lire cet article en suivant ce lien.

TYPO3 4.7 – la dernière version de la 4-x

La version 4.7 du cms (Content Management System) vient de sortir le 24 avril 2012. Cette version est la dernière de la branche 4-x.

Cette version est surtout axée sur l’accessibilité. Côté backend, il n’y a pas de différences avec la 4.6. Les nouveautés se voient plus dans le code source des fichiers. AdoDB (librairie d’abstraction de base de données) a été mis à jour. Pareil pour SwiftMailer (librairie d’envoi d’email). Le plugin pour gérer le moteur de recherche indéxée a été re-développé. En effet, il se gère maintenant avec Fluid.

De nouveaux boutons ont été ajoutés à l’éditeur de texte enrichi, pour prendre en compte les nouvelles balises du HTML5.

Pour découvrir cette nouvelle version et télécharger la bête.

JOOMLA 2.5 – Premières impressions

Parmi les nouveautés de la version 2.5 de Joomla sorti cette semaine, on retrouve :

• Un système de recherche avancée (matérialisé par le composant com_finder)
• un support multi-bases de données.
• la notification de mise à jour. (nouvel icône visible sur le panel accueil dans le back office).

Le préfixe des tables n’est plus jos_ mais est généré aléatoirement.

Dans la page « choix du mot de passe », il est possible de choisir également un « identifiant ». Dans les versions précédentes, l’identifiant « admin » est imposé par défaut.

A la fin de l’installation, il est proposé de supprimer le dossier « installation » avec un bouton.

Dans le Back-Office, 2 entrées ont été ajoutées dans le menu « Users » (User Note et User Note Category). Je ne vois pas exactement pour l’instant leurs utilités.

Une icone « Featured » a été ajouté dans la barre d’outils du content.

Le support technique de cette version sera assurée pendant 18 mois.

Une liste détaillée des nouveautés peut être retrouvée sur le site officiel de Joomla en Français.

Détecter le navigateur Mobile avec MobileESP

Le projet MobileESP est une API (Application Programming Interface)  à la disposition des développeurs souhaitant détecter si le navigateur de l’internaute est un mobile. J’ai déjà créé un post du même type (cf lien).

Avec cette API, on peut avoir le détail du type de navigateur (IPhone, Android, Blackberry…) Ce qui permettra vraiment de cibler l’internaute qui surfe sur le site Internet pour le proposer de télécharger l’application adéquate au smartphone.

Le script consiste en un seul fichier et est disponible dans différents langages de programmation telles PHP, Java, APS.NET (C#), Ruby et JavaScript.

En PHP, on peut détecter tout simplement comme ceci :

Pour télécharger les sources : http://blog.mobileesp.com/