UberGallery est un script PHP simple qui crée une belle galerie d'images Web en générant des vignettes des images originales à la volée. Il vous suffit de télécharger des images dans un répertoire spécifique. Elles seront ensuite récupérées pour générer la galerie de photos..

Notre objectif est de créer un module qui utilise le script UberGallery pour générer la galerie, mais de manière OpenCart. Dans le back-end, vous devriez pouvoir configurer des paramètres tels que la largeur de la vignette, la hauteur de la vignette, etc. Sur la base de cela, il va créer un bloc de galerie d'images dans les pages front-end.

Aujourd'hui, nous allons passer en revue la configuration du back-end dans laquelle nous allons créer les fichiers nécessaires à la création d'un formulaire de configuration personnalisé dans la partie module du back-end. Je suppose que vous connaissez le processus de développement de module de base dans OpenCart, car nous allons passer à travers les étapes de base de la création d'un module. Voici un bel article expliquant les bases des modules OpenCart si vous souhaitez l'explorer..

Je suppose que vous utilisez la dernière version d'OpenCart, assurez-vous de l'avoir pour pouvoir suivre les exemples de code..

Fichier Setup-in a Nutshell

Passons rapidement en revue la configuration de fichier requise pour le back-end.

• admin / controller / module / uber_gallery.php: C'est un fichier de contrôleur qui fournit la logique d'application du contrôleur habituel dans OpenCart..
• admin / language / english / module / uber_gallery.php: C'est un fichier de langue qui aide à configurer les étiquettes de langue.
• admin / view / template / module / uber_gallery.tpl: C'est un fichier de gabarit de vue qui contient le XHTML du formulaire de configuration.
• système / bibliothèque / uberGallery: C'est le composant UberGallery lui-même.

Voilà donc une liste des fichiers que nous allons mettre en œuvre aujourd'hui. Il va créer un formulaire de configuration personnalisé pour notre module UberGallery afin que vous puissiez configurer les différents paramètres à partir du back-end.

Sans perdre de temps, je vais tout de suite plonger dans le truc geek.

Configurer les fichiers du module back-end

Avant de créer nos fichiers de module personnalisés, téléchargez UberGallery à partir du site officiel et copiez le Ressource répertoire de telle sorte qu'il ressemble système / bibliothèque / uberGallery / ressources.

Maintenant, créez un fichier système / bibliothèque / uberGallery / resources / oc.galleryConfig.ini avec le contenu suivant.

; C'est le fichier de configuration par défaut d'UberGallery. Copiez ce fichier dans galleryConfig.php; et modifiez les valeurs suivantes pour personnaliser votre galerie. [basic_settings] cache_expiration = [cache_expiration]; Temps d'expiration du cache en minutes; Défini à -1 pour la mise en cache permanente enable_pagination = true; Défini sur 'true' pour activer la pagination paginator_threshold = 10; Nombre maximum de pages à afficher; dans la pagination avant de tronquer thumbnail_width = [thumbnail_width]; Largeur de la vignette (en pixels) thumbnail_height = [thumbnail_height]; Hauteur de la vignette (en pixels) thumbnail_quality = [thumbnail_quality]; Qualité des vignettes de 1 à 100; Elevé = meilleure qualité / plus lent theme_name = uber-responsive; Thème utilisé pour styler la galerie [advanced_settings] images_per_page = [thumbnail_count]; Images affichées par page, nécessite; enable_pagination est défini sur 'true' images_sort_by = natcasesort; Méthode utilisée pour trier le tableau d'images; Les options de tri disponibles incluent:; asort, arsort, ksort, krsort,; natcasesort, natsort, shuffle reverse_sort = false; Définissez sur 'true' pour inverser l'ordre de tri enable_debugging = false; Messages de débogage en sortie 

C'est un fichier similaire au fichier de configuration UberGallery galleryConfig.ini, mais avec des espaces réservés. Il sera utilisé pour créer un fichier de configuration réel à la volée lorsque l'administrateur enregistrera le formulaire de configuration à partir du back-end.

Enfin, conformément aux exigences d’UberGallery, vous devez copier système / bibliothèque / uberGallery / resources / sample.galleryConfig.ini à système / bibliothèque / uberGallery / resources / galleryConfig.ini. Aussi, assurez-vous que système / bibliothèque / uberGallery / resources / galleryConfig.ini et système / bibliothèque / uberGallery / resources / cache sont inscriptibles sur le serveur web.

Ensuite, allez-y et créez un fichier admin / controller / module / uber_gallery.php avec le contenu suivant.

load-> language ('module / uber_gallery'); $ this-> load-> model ('extension / module'); $ this-> document-> setTitle ($ this-> language-> get ('titre_titre')); if (($ this-> request-> server ['REQUEST_METHOD'] == 'POST') && $ this-> validate ()) if (! isset ($ this-> request-> get [module_id '] )) $ this-> model_extension_module-> addModule ('uber_gallery', $ this-> request-> post);  else $ this-> model_extension_module-> editModule ($ this-> request-> get ['module_id'], $ this-> request-> post);  // met à jour le fichier de configuration uber $ config_file = implode ("\ n", fichier (DIR_SYSTEM.'library / uberGallery / resources / oc.galleryConfig.ini ')); $ tokens = array ("[cache_expiration]", "[thumbnail_width]", "[thumbnail_height]", "[thumbnail_quality]", "[thumbnail_count]"); $ replacements = array ($ this-> request-> post ['thumb_caching'], $ this-> request-> post ['thumb_width'], $ this-> request-> post ['thumb_height'], $ this- > request-> post ['thumb_quality'], $ this-> request-> post ['thumb_count']); $ save_config_file = str_replace ($ tokens, $ remplacements, $ config_file); $ fp = fopen (DIR_SYSTEM.'Library / uberGallery / resources / galleryConfig.ini ',' w '); @fwrite ($ fp, $ save_config_file, strlen ($ save_config_file)); $ this-> session-> data ['success'] = $ this-> language-> get ('text_success'); $ this-> response-> redirect ($ this-> url-> link ('extension / module', 'token ='. $ this-> session-> data ['token'], 'SSL'));  $ data ['heading_title'] = $ this-> language-> get ('titre_title'); $ data ['text_edit'] = $ this-> language-> get ('text_edit'); $ data ['text_enabled'] = $ this-> language-> get ('text_enabled'); $ data ['text_disabled'] = $ this-> language-> get ('text_disabled'); $ data ['nom_entrée'] = $ this-> language-> get ('nom_entrée'); $ data ['entry_status'] = $ this-> language-> get ('entry_status'); $ data ['entry_thumb_caching'] = $ this-> language-> get ('entry_thumb_caching'); $ data ['entry_thumb_quality'] = $ this-> language-> get ('entry_thumb_quality'); $ data ['entry_thumb_width'] = $ this-> language-> get ('entry_thumb_width'); $ data ['entry_thumb_height'] = $ this-> language-> get ('entry_thumb_height'); $ data ['entry_thumb_count'] = $ this-> language-> get ('entry_thumb_count'); $ data ['entry_enable_module_paging'] = $ this-> language-> get ('entry_enable_module_paging'); $ data ['button_save'] = $ this-> language-> get ('button_save'); $ data ['button_cancel'] = $ this-> language-> get ('button_cancel'); if (isset ($ this-> error ['warning']))) $ data ['error_warning'] = $ this-> error ['warning'];  else $ data ['error_warning'] = "; if (isset ($ this-> error ['nom_erreur'])) $ data ['nom_erreur'] = $ this-> erreur ['nom_erreur'];  else $ data ['nom_erreur'] = ";  if (isset ($ this-> error ['error_thumb_width']))) $ data ['error_thumb_width'] = $ this-> error ['error_thumb_width'];  else $ data ['error_thumb_width'] = "; if (isset ($ this-> error ['error_thumb_height'])) $ data ['error_thumb_height'] = $ this-> error ['error_thumb_height'];  else $ data ['error_thumb_height'] = ";  if (isset ($ this-> error ['error_thumb_quality']))) $ data ['error_thumb_quality'] = $ this-> error ['error_thumb_quality'];  else $ data ['error_thumb_quality'] = "; if (isset ($ this-> error ['error_thumb_count'])) $ data ['error_thumb_count'] = $ this-> error ['error_thumb_count'];  else $ data ['error_thumb_count'] = ";  $ data ['breadcrumbs'] = array (); $ data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('text_home'), 'href' => $ this-> url-> link ('common / dashboard' , 'token ='. $ this-> session-> data ['token'], 'SSL')); $ data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('text_module'), 'href' => $ this-> url-> link ('extension / module' , 'token ='. $ this-> session-> data ['token'], 'SSL')); if (! isset ($ this-> request-> get ['id_module']))) $ data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('titre_titre' ), 'href' => $ this-> url-> link ('module / uber_gallery', 'token ='. $ this-> session-> data ['token'], 'SSL'));  else $ data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('titre_titre'), 'href' => $ this-> url-> lien ('module / uber_gallery ',' token = '. $ this-> session-> data [' token '].' & module_id = '. $ this-> request-> get [' module_id '],' SSL '));  if (! isset ($ this-> request-> get ['module_id'])) $ data ['action'] = $ this-> url-> link ('module / uber_gallery', 'token ='. $ this-> session-> data ['token'], 'SSL');  else $ data ['action'] = $ this-> url-> link ('module / uber_gallery', 'token ='. $ this-> session-> data ['token']. '& module_id ='. $ this-> request-> get ['module_id'], 'SSL');  $ data ['cancel'] = $ this-> url-> link ('extension / module', 'token ='. $ this-> session-> data ['token'], 'SSL'); if (isset ($ this-> request-> get ['module_id'])) && ($ this-> request-> serveur ['REQUEST_METHOD']! = 'POST')) $ module_info = $ this-> model_extension_module- > getModule ($ this-> request-> get ['module_id']);  if (isset ($ this-> request-> post ['name'])) $ data ['name'] = $ this-> request-> post ['name'];  elseif (! empty ($ module_info)) $ data ['name'] = $ module_info ['name'];  else $ data ['name'] = "; if (isset ($ this-> request-> post ['thumb_width'])) $ data ['thumb_width'] = $ this-> request-> post ['thumb_width']; elseif (! empty ($ module_info)) $ data ['thumb_width'] = $ module_info ['thumb_width']; else $ data ['thumb_width'] = ";  if (isset ($ this-> request-> post ['thumb_height'])) $ data ['thumb_height'] = $ this-> request-> post ['thumb_height'];  elseif (! empty ($ module_info)) $ data ['thumb_height'] = $ module_info ['thumb_height'];  else $ data ['thumb_height'] = "; if (isset ($ this-> request-> post ['thumb_quality'])) $ data ['thumb_quality'] = $ this-> request-> post ['thumb_quality']; elseif (! empty ($ module_info)) $ data ['thumb_quality'] = $ module_info ['thumb_quality']; else $ data ['thumb_quality'] = ";  if (isset ($ this-> request-> post ['thumb_count'])) $ data ['thumb_count'] = $ this-> request-> post ['thumb_count'];  elseif (! empty ($ module_info)) $ data ['thumb_count'] = $ module_info ['thumb_count'];  else $ data ['thumb_count'] = "; if (isset ($ this-> request-> post ['thumb_caching'])) $ data ['thumb_caching'] = $ this-> request-> post ['thumb_caching']; elseif (! empty ($ module_info)) $ data ['thumb_caching'] = $ module_info ['thumb_caching']; else $ data ['thumb_caching'] = ";  if (isset ($ this-> request-> post ['enable_module_paging']))) $ data ['enable_module_paging'] = $ this-> request-> post ['enable_module_paging'];  elseif (! empty ($ module_info)) $ data ['enable_module_paging'] = $ module_info ['enable_module_paging'];  else $ data ['enable_module_paging'] = "; if (isset ($ this-> request-> post [" status "])) $ data ['status'] = $ this-> request-> post ['status']; elseif (! empty ($ module_info)) $ data ['status'] = $ module_info ['status']; else $ data ['status'] = ";  $ data ['header'] = $ this-> load-> controller ('common / header'); $ data ['column_left'] = $ this-> load-> controller ('common / column_left'); $ data ['footer'] = $ this-> load-> controller ('commun / footer'); $ this-> response-> setOutput ($ this-> load-> view ('module / uber_gallery.tpl', $ data));  function protégée validate () if (! $ this-> user-> hasPermission ('modify', 'module / uber_gallery')) $ this-> error ['warning'] = $ this-> language-> get ('error_permission');  if (! $ this-> request-> post ['name']) $ this-> error ['nom_erreur'] = $ this-> language-> get ('nom_erreur');  if (! $ this-> request-> post ['thumb_width']) $ this-> error ['error_thumb_width'] = $ this-> language-> get ('error_thumb_width');  if (! $ this-> request-> post ['thumb_height']) $ this-> error ['error_thumb_height'] = $ this-> language-> get ('error_thumb_height');  if (! $ this-> request-> post ['thumb_quality']) $ this-> error ['error_thumb_quality'] = $ this-> language-> get ('error_thumb_quality');  if (! $ this-> request-> post ['thumb_count']) $ this-> error ['error_thumb_count'] = $ this-> language-> get ('error_thumb_count');  return! $ this-> error; 

Comme d’habitude, vous verrez deux méthodes standard dans tout fichier de contrôleur principal: indice méthode, utilisée pour fournir une logique standard traitant du stockage des valeurs de formulaire de configuration, et de la valider méthode, utilisée pour valider le formulaire de configuration.

Comme je l'ai déjà mentionné au début de l'article, vous devriez être familiarisé avec le développement de modules de base dans OpenCart. Nous allons discuter du code spécifique à la partie UberGallery..

Outre les tâches habituelles de la méthode d'index, le chargement de langages et de modèles appropriés et la configuration de variables pour le fichier de modèle de vue, il existe un élément de code intéressant dans notre méthode d'index. Regardons cela de près.

// met à jour le fichier de configuration uber $ config_file = implode ("\ n", fichier (DIR_SYSTEM.'library / uberGallery / resources / oc.galleryConfig.ini ')); $ tokens = array ("[cache_expiration]", "[thumbnail_width]", "[thumbnail_height]", "[thumbnail_quality]", "[thumbnail_count]"); $ replacements = array ($ this-> request-> post ['thumb_caching'], $ this-> request-> post ['thumb_width'], $ this-> request-> post ['thumb_height'], $ this- > request-> post ['thumb_quality'], $ this-> request-> post ['thumb_count']); $ save_config_file = str_replace ($ tokens, $ remplacements, $ config_file); $ fp = fopen (DIR_SYSTEM.'Library / uberGallery / resources / galleryConfig.ini ',' w '); @fwrite ($ fp, $ save_config_file, strlen ($ save_config_file));

Ce que nous essayons de faire ici, c’est que chaque fois que l’administrateur enregistre le formulaire de configuration d’UberGallery dans le back-end, galleryConfig.ini devrait être créé à la volée. Rappeler que oc.galleryConfig.ini nous avons créé au début de cette section, et vous devriez maintenant comprendre le truc derrière cette.

Nous allons chercher le contenu de système / bibliothèque / uberGallery / resources / oc.galleryConfig.ini, remplacer les espaces réservés par des valeurs réelles et enfin l'enregistrer en tant que galleryConfig.ini qui écrase le fichier par défaut existant.

Aller de l'avant, créer un fichier admin / language / english / module / uber_gallery.php avec le contenu suivant.

Rien d'extraordinaire - nous ne faisons que déclarer des variables de langue dans ce fichier.
Enfin, nous allons créer un fichier de modèle de vue contenant le XHTML pour notre formulaire de configuration personnalisée. Allez-y et créez un fichier admin / view / template / module / uber_gallery.tpl avec le contenu suivant.
 
 
 
 
  "data-toggle =" tooltip "title ="">
 
 
  
">
  
 
 
 
  
  × 
  
 
 
 
 
 
 
 
  
   
  
 
 
  
          
 
 
  
   
  
 
 
  
   
  
 
 
  
  (entre 1-100)  
  
 
 
  
   
  
 
 
  
          
 
 
  
          
  
 
 
 
 
Donc, c'est tout ce qui concerne l'installation du fichier back-end.
Tester le formulaire de configuration
Dirigez-vous vers le back-end et accédez à Extensions> Modules. Installez notre nouvellement créé uberGallery module et le modifier pour ouvrir le formulaire de configuration.
Entrez les valeurs requises et enregistrez le formulaire! Bien sûr, les paramètres du module seront sauvegardés dans la base de données, mais en plus, cela générera une nouvelle galleryConfig.ini ainsi que! Allez-y et ouvrez système / bibliothèque / uberGallery / resources / galleryConfig.ini, et il devrait refléter les valeurs de paramètre avec les champs du formulaire de configuration.
Donc, nous venons de construire un mécanisme pour générer galleryConfig.ini à la volée en utilisant un formulaire de configuration! Il sera utilisé en mode frontal lorsque nous activons le module pour afficher la galerie..
Donc, c'est tout pour l'article d'aujourd'hui. Je serai bientôt de retour avec la prochaine partie de cette série.
Conclusion
Dans cette première partie, nous avons suivi la configuration du fichier back-end pour le module UberGallery. Dans la prochaine partie, nous en explorerons la contrepartie initiale. Pour toute question, utilisez le fil de commentaires ci-dessous!



		
			
	   
	




Code