UberGallery ist ein einfaches PHP-Skript, das eine schöne Web-Bildergalerie erstellt, indem Miniaturansichten der Originalbilder erstellt werden. Sie müssen nur Bilder in ein bestimmtes Verzeichnis hochladen, und diese werden abgerufen, um die Fotogalerie zu erstellen.

Unser Ziel ist es, ein Modul zu erstellen, das das UberGallery-Skript zum Generieren der Galerie verwendet, jedoch auf eine OpenCart-Weise. Im Backend sollten Sie Parameter wie die Breite der Miniaturansicht, die Höhe der Miniaturansicht und dergleichen konfigurieren können. Darauf basierend wird ein Bildergalerieblock auf den Frontendseiten erstellt.

Heute gehen wir das Back-End-Setup durch, in dem wir die Dateien erstellen, die zum Erstellen eines benutzerdefinierten Konfigurationsformulars im Back-End-Modulteil erforderlich sind. Ich gehe davon aus, dass Sie mit dem grundlegenden Modulentwicklungsprozess in OpenCart vertraut sind, da wir die Grundlagen der Modulerstellungsschritte überspringen. Hier ist ein schöner Artikel, der die Grundlagen von OpenCart-Modulen erläutert, wenn Sie es näher kennen lernen möchten.

Ich gehe davon aus, dass Sie die neueste Version von OpenCart verwenden. Stellen Sie also sicher, dass Sie über diese verfügen, damit Sie die Codebeispiele verfolgen können.

Datei-Setup - kurz und bündig

Lassen Sie uns schnell die für das Backend erforderlichen Dateisetups durchgehen.

• admin / controller / module / uber_gallery.php: Es ist eine Controller-Datei, die die Anwendungslogik des in OpenCart üblichen Controllers bereitstellt.
• admin / sprache / englisch / module / uber_gallery.php: Es ist eine Sprachdatei, die beim Einrichten von Sprachbeschriftungen hilft.
• admin / view / template / module / uber_gallery.tpl: Es ist eine Ansichtsvorlagendatei, die die XHTML des Konfigurationsformulars enthält.
• System / Bibliothek / UberGallery: Es ist die UberGallery-Komponente selbst.

Das ist also eine Liste der Dateien, die wir heute implementieren werden. Es wird ein benutzerdefiniertes Konfigurationsformular für unser UberGallery-Modul erstellt, sodass Sie die verschiedenen Parameter vom Back-End aus konfigurieren können.

Ohne Zeit zu verlieren, tauche ich sofort in die geeky Sachen ein.

Richten Sie die Back-End-Moduldateien ein

Laden Sie UberGallery von der offiziellen Website herunter, und kopieren Sie die Ressource Verzeichnis so, dass es aussieht System / Bibliothek / UberGallery / Ressourcen.

Erstellen Sie nun eine Datei system / library / uberGallery / resources / oc.galleryConfig.ini mit folgenden Inhalten.

; Dies ist die Standard-UberGallery-Konfigurationsdatei. Kopieren Sie diese Datei in die galleryConfig.php. und ändern Sie die folgenden Werte, um Ihre Galerie anzupassen. [basic_settings] cache_expiration = [cache_expiration]; Cache-Ablaufzeit in Minuten; Für permanentes Caching auf -1 setzen enable_pagination = true; Auf 'true' setzen, um die Paginierung zu aktivieren. Paginator_threshold = 10; Maximale Anzahl der anzuzeigenden Seiten; im Paginator vor dem Abschneiden thumbnail_width = [thumbnail_width]; Thumbnail-Breite (in Pixel) thumbnail_height = [thumbnail_height]; Höhe der Miniaturansicht (in Pixel) thumbnail_quality = [thumbnail_quality]; Miniaturbildqualität von 1 - 100; Höher = bessere Qualität / langsamer Themenname = Uber-responsive; Theme zum Gestalten der Galerie [advanced_settings] images_per_page = [thumbnail_count]; Bilder pro Seite angezeigt, erforderlich; enable_pagination muss auf 'true' gesetzt werden images_sort_by = natcasesort; Methode zum Sortieren von Bildfeldern; Zu den verfügbaren Sortieroptionen gehören:; asort, arsort, ksort, krsort,; natcasesort, natsort, shuffle reverse_sort = false; Auf 'true' setzen, um die Sortierreihenfolge umzukehren enable_debugging = false; Debug-Meldungen ausgeben 

Diese Datei ähnelt der UberGallery-Konfigurationsdatei galleryConfig.ini, aber mit Platzhaltern. Es wird verwendet, um eine tatsächliche Konfigurationsdatei im laufenden Betrieb zu erstellen, wenn der Administrator das Konfigurationsformular vom Back-End speichert.

Schließlich müssen Sie gemäß den UberGallery-Anforderungen kopieren system / library / uberGallery / resources / sample.galleryConfig.ini zu system / library / uberGallery / resources / galleryConfig.ini. Stellen Sie auch sicher, dass system / library / uberGallery / resources / galleryConfig.ini und System / Bibliothek / UberGallery / Ressourcen / Cache sind vom Webserver beschreibbar.

Als Nächstes erstellen Sie eine Datei admin / controller / module / uber_gallery.php mit folgenden Inhalten.

load-> language ('module / uber_gallery'); $ this-> load-> model ('Erweiterung / Modul'); $ this-> document-> setTitle ($ this-> language-> get ('heading_title')); 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);  // Aktualisieren Sie die Uber-Konfigurationsdatei. $ config_file = implode ("\ n", Datei (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, $ replace, $ 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 ('Erweiterung / Modul', 'token ='. $ this-> session-> data ['token'], 'SSL'));  $ data ['heading_title'] = $ this-> language-> get ('heading_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 ['entry_name'] = $ this-> language-> get ('entry_name'); $ 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 ['error_name'])) $ data ['error_name'] = $ this-> error ['error_name'];  else $ data ['fehlername'] = ";  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 ['module_id'])) $ data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('heading_title') ), 'href' => $ this-> url-> link ('module / uber_gallery', 'token ='. $ this-> session-> data ['token'], 'SSL'));  else $ data ['breadcrumbs'] [] = array ('text' => $ this-> language-> get ('heading_title'), 'href' => $ this-> url-> link ('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 ('Erweiterung / Modul', 'token ='. $ this-> session-> data ['token'], 'SSL'); if (isset ($ this-> request-> get ['module_id']) && ($ this-> request-> server ['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 ('common / footer'); $ this-> response-> setOutput ($ this-> load-> view ('module / uber_gallery.tpl', $ data));  protected function validate () if (! $ this-> user-> hasPermission ('modify', 'module / uber_gallery')) $ this-> error ['warning'] = $ this-> language-> erhalten ('error_permission');  if (! $ this-> request-> post ['name']) $ this-> error ['error_name'] = $ this-> language-> get ('error_name');  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; 

Wie üblich finden Sie in jeder Back-End-Controller-Datei zwei Standardmethoden Index Diese Methode wird verwendet, um eine Standardlogik bereitzustellen, die sich auf das Speichern von Konfigurationsformularwerten bezieht, und die bestätigen Methode, mit der das Konfigurationsformular überprüft wird.

Wie ich bereits am Anfang des Artikels erwähnt habe, sollten Sie mit der Entwicklung von Basismodulen in OpenCart vertraut sein. Wir werden den für den UberGallery-Teil spezifischen Code besprechen.

Abgesehen von den üblichen Indexmethoden, dem Laden geeigneter Sprachen und Modelle und dem Einrichten von Variablen für die Ansichtsvorlagendatei gibt es in unserer Indexmethode einen interessanten Code. Schauen wir uns das genauer an.

// Update der Konfigurationsdatei $ config_file = implode ("\ n", file (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, $ replace, $ config_file); $ fp = fopen (DIR_SYSTEM.'library / uberGallery / resources / galleryConfig.ini ',' w '); @fwrite ($ fp, $ save_config_file, strlen ($ save_config_file));

Was wir hier zu erreichen versuchen, ist, dass das UberGallery-Konfigurationsformular immer im Back-End gespeichert wird, galleryConfig.ini sollte on the fly erstellt werden. Erinnere dich daran oc.galleryConfig.ini Wir haben am Anfang dieses Abschnitts erstellt, und Sie sollten jetzt den Trick dahinter verstehen.

Wir holen den Inhalt von system / library / uberGallery / resources / oc.galleryConfig.ini, Platzhalter durch tatsächliche Werte ersetzen und schließlich als speichern galleryConfig.ini Dadurch wird die vorhandene Standarddatei überschrieben.

Gehen Sie voran und erstellen Sie eine Datei admin / sprache / englisch / module / uber_gallery.php mit folgenden Inhalten.

Nichts Außergewöhnliches - wir deklarieren nur Sprachvariablen in dieser Datei.
Abschließend erstellen wir eine Ansichtsvorlagendatei, die XHTML für unser benutzerdefiniertes Konfigurationsformular enthält. Fahren Sie fort und erstellen Sie eine Datei admin / view / template / module / uber_gallery.tpl mit folgenden Inhalten.
 
 
 
 
  "data-toggle =" Tooltip "title ="">
 
 
  
">
  
 
 
 
  
  X 
  
 
 
 
 
 
 
 
  
   
  
 
 
  
          
 
 
  
   
  
 
 
  
   
  
 
 
  
  (zwischen 1-100)  
  
 
 
  
   
  
 
 
  
          
 
 
  
          
  
 
 
 
 
Das ist es also, was das Backend-Dateisetup angeht.
Testen Sie das Konfigurationsformular
Gehen Sie zum Back-End und navigieren Sie zu Erweiterungen> Module. Installieren Sie unser neu erstelltes uberGallery Modul und bearbeiten Sie es, um das Konfigurationsformular zu öffnen.
Füllen Sie die gewünschten Werte aus und speichern Sie das Formular! Natürlich werden die Moduleinstellungen in der Datenbank gespeichert, aber zusätzlich wird eine neue generiert galleryConfig.ini auch! Mach weiter und öffne dich system / library / uberGallery / resources / galleryConfig.ini, und es sollte die Parameterwerte mit den Konfigurationsformularfeldern widerspiegeln.
Also haben wir gerade einen Mechanismus zum Generieren entwickelt galleryConfig.ini on the fly mit einem Konfigurationsformular! Es wird im Frontend verwendet, wenn das Modul die Galerie anzeigen soll.
Das war es also für den heutigen Artikel. Ich komme bald mit dem nächsten Teil dieser Serie zurück.
Fazit
In diesem ersten Teil haben wir das Back-End-Dateisetup für das UberGallery-Modul durchlaufen. Im nächsten Teil werden wir das Gegenstück zum Front-End untersuchen. Verwenden Sie für Fragen den Kommentar-Feed unten!



		
			
	   
	




Code