Magento extension: anc image: Unterschied zwischen den Versionen
F (Diskussion | Beiträge) (→block) |
F (Diskussion | Beiträge) (→Block und das Template) |
||
Zeile 158: | Zeile 158: | ||
=== block === | === block === | ||
+ | der Name der Block Klasse welches in [[Magento_Entwicklung#design_oberflächen_einbindung]] eingebunden wird, ergibt sich aus dem type Parameter | ||
+ | |||
+ | type="anc_image/owngallery" => Anc_Image_Block_Owngallery | ||
+ | |||
+ | also eigentlich fehlt nach dem Modulnamen nur der Hinweis das es sich um ein Block handelt, Klasse befindet sich im Block/ Ordner und der Dateiname heißt Owngallery.php | ||
+ | (falls die Klasse nun in einem Unterordner wäre, würde der Klassenname Anc_Image_Block_Unterordner_Owngallery heißen) | ||
+ | |||
+ | <source lang="xml"> | ||
+ | <anc_image_customer_owngallery><reference name="content"><block type="anc_image/owngallery" name="anc_image_owngallery" template="ancimage/customer_owngallery.phtml" /></reference></anc_image_customer_owngallery> | ||
+ | </source> | ||
<source lang="php"> | <source lang="php"> | ||
Zeile 198: | Zeile 208: | ||
das template welches in [[Magento_Entwicklung#design_oberflächen_einbindung]] eingebunden wird, wird über den [[Magento_Entwicklung#Controller_-_Schnittstelle_zum_Browser Controller]] Aufruf (über die url) aufgerufen | das template welches in [[Magento_Entwicklung#design_oberflächen_einbindung]] eingebunden wird, wird über den [[Magento_Entwicklung#Controller_-_Schnittstelle_zum_Browser Controller]] Aufruf (über die url) aufgerufen | ||
<source lang="xml"> | <source lang="xml"> | ||
− | <anc_image_customer_owngallery><reference name="content"><block type=" | + | <anc_image_customer_owngallery><reference name="content"><block type="anc_image/owngallery" name="anc_image_owngallery" template="ancimage/customer_owngallery.phtml" /></reference></anc_image_customer_owngallery> |
</source> | </source> | ||
* stellt die Anzeige unserer extension Model/Tabelle 'anc_image/ncimage' dar (aufgewertet durch [http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ prettyPhoto]) | * stellt die Anzeige unserer extension Model/Tabelle 'anc_image/ncimage' dar (aufgewertet durch [http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ prettyPhoto]) |
Version vom 14. April 2014, 20:50 Uhr
commit 06f0ace359776cba17c9c2b088030f36d7adaf99 Mon Apr 14 17:08:29 2014 +0200 commit 3914f86b1480b24e1d549bc268854cd22430bb39 Sun Apr 13 22:25:33 2014 +0200
Inhaltsverzeichnis
Extension Infos
- Entwickler/Firma Kürzel: Anc
- Modulname: Image
- Komplett: MyImage bzw my_image
- Extensionpfad: /var/www/Magento/AncImage/
- Magento Installation: /var/www/Magento/Magento18
die extension erweitert im frontend für den eingeloggten kunden den "mein benutzerkonto" bereich um eine einfache bildergallerie
- es besteht die möglichkeit per drag&drop bilder hinzuzufügen
- sie werden auf dem server in einem ordner speziell für den eingeloggten kunden gespeichert und
- der dateiname zusätzlich noch in einer einfachen flat tabelle gespeichert
xml Konfiguration
modul aktivierung
/var/www/Magento/AncImage/app/etc/modules/Anc_Image.xml
<?xml version="1.0"?>
<config>
<modules>
<Anc_Image>
<active>true</active>
<codePool>local</codePool>
</Anc_Image>
</modules>
</config>
config.xml - konfiguration der extension
/var/www/Magento/AncImage/app/code/etc/config.xml
<?xml version="1.0" encoding="UTF-8"?>
<config>
<!-- versionierung des moduls -
wichtig vor alle dem auch im Zusammenhang mit dem Datenbankinstallationsskript
-->
<modules>
<Anc_Image>
<version>0.0.1</version>
</Anc_Image>
</modules>
<!-- was im frontend passiert -->
<frontend>
<!-- einbindung der layoutkonfiguration (s.u.) -->
<layout>
<updates>
<Anc_Image>
<file>anc_image.xml</file>
</Anc_Image>
</updates>
</layout>
<!-- damit die controller funktionen über eine url erreichbar sind (s.u.) -->
<routers>
<!--Umleitung bzw aktivierung der controllers-->
<anc_image>
<use>standard</use>
<args>
<module>Anc_Image</module>
<frontName>ancimage</frontName>
</args>
</anc_image>
</routers>
</frontend>
<global>
<!-- dem system bekannt machen das block klassen existieren -->
<blocks>
<anc_image>
<class>Anc_Image_Block</class>
</anc_image>
</blocks>
<!-- die konfiguration der datenbank schnittstelle -->
<models>
<anc_image>
<class>Anc_Image_Model</class>
<!-- folgendes ist ein verweis auf den nachfolgenden tag <anc_image_resource> -->
<resourceModel>anc_image_resource</resourceModel>
</anc_image>
<anc_image_resource>
<class>Anc_Image_Model_Resource_Mysql4</class>
<!-- entitie's mit s hier können mehrere Tabellen(namen) untergebracht werden -->
<entities>
<ncimage>
<table>anc_image_ncimage</table>
</ncimage>
</entities>
</anc_image_resource>
</models>
<resources>
<!-- hier verbirgt sich das installationsskript um die datenbanktabellen zu erstellen -->
<anc_image_setup>
<setup>
<module>Anc_Image</module>
<class>Mage_Sales_Model_Mysql4_Setup</class>
</setup>
<connection><use>core_setup</use></connection>
</anc_image_setup>
<!-- datenbank verbindungen -->
<anc_image_write><connection><use>core_write</use></connection></anc_image_write>
<anc_image_read><connection><use>core_read</use></connection></anc_image_read>
</resources>
</global>
</config>
design oberflächen einbindung
anc_image.xml wird über #config.xml - konfiguration der extension eingebunden
<frontend><layout><updates><Anc_Image><file>anc_image.xml</file></Anc_Image></updates></layout></frontend>
/var/www/Magento/AncImage/app/design/frontend/layout/anc_image.xml
<?xml version="1.0"?>
<layout version="0.1.0">
<!-- in "meinem Benutzerkonto" wird ein weiterer link angezeigt, der über den Controller die neue seite anzeigt -->
<customer_account>
<reference name="customer_account_navigation">
<action method="addLink">
<name>owngallery</name>
<path>ancimage/customer/owngallery</path>
<label>Verwalten Sie Ihre Bilder</label>
<urlParams />
</action>
</reference>
</customer_account>
<!-- Kürzel_extensionname_contraller_funcion bzw module_controller_action
Ansicht wird konfiguriert -->
<anc_image_customer_owngallery>
<!-- einbindung von javascript und css -->
<reference name="head">
<action method="addJs"><script>ancimage/dropzone.js</script></action>
<action method="addCss"><stylesheet>css/ancimage/dropzone.css</stylesheet></action>
<action method="addJs"><script>ancimage/jquery.prettyPhoto.js</script></action>
<action method="addCss"><stylesheet>css/ancimage/prettyPhoto.css</stylesheet></action>
</reference>
<!-- einbindung des templates -->
<reference name="content">
<!--
type: module/block klasse
name: derzeit egal, so lange (wie gerade der fall) nicht zB mit getChildHtml aufgerufen wird
template: /var/www/Magento/Magento18/app/design/frontend/base/default/template/ancimage/customer_owngallery.phtml liegen
-->
<block type="anc_image/owngallery" name="anc_image_owngallery" template="ancimage/customer_owngallery.phtml" />
</reference>
</anc_image_customer_owngallery>
</layout>
Block und das Template
block
der Name der Block Klasse welches in Magento_Entwicklung#design_oberflächen_einbindung eingebunden wird, ergibt sich aus dem type Parameter
type="anc_image/owngallery" => Anc_Image_Block_Owngallery
also eigentlich fehlt nach dem Modulnamen nur der Hinweis das es sich um ein Block handelt, Klasse befindet sich im Block/ Ordner und der Dateiname heißt Owngallery.php (falls die Klasse nun in einem Unterordner wäre, würde der Klassenname Anc_Image_Block_Unterordner_Owngallery heißen)
<anc_image_customer_owngallery><reference name="content"><block type="anc_image/owngallery" name="anc_image_owngallery" template="ancimage/customer_owngallery.phtml" /></reference></anc_image_customer_owngallery>
class Anc_Image_Block_Owngallery extends Mage_Core_Block_Template{
/**
* gibt eingeloggten Benutzer zurück
*
* @return type
*/
public function getCustomer() {
return Mage::getSingleton('customer/session')->getCustomer();
}
/**
*
* @return Collection
*/
public function getNcImages() {
return Mage::getModel('anc_image/ncimage')->getCollection()->addFieldToFilter('ancii_customer_id', $this->getCustomer()->getId());
}
/**
*
* @return string
*/
public function getMediaPath() {
return $path = DS.'media'.DS.'anc'.DS.'image'.DS.'customer'.DS.$this->getCustomer()->getId().DS;
}
// existiert _toHtml() wird das template gar nicht erst mehr aufgerufen
// protected function _toHtml()
// {
// return 'Hallo Welt!';
// }
}
template
das template welches in Magento_Entwicklung#design_oberflächen_einbindung eingebunden wird, wird über den Magento_Entwicklung#Controller_-_Schnittstelle_zum_Browser Controller Aufruf (über die url) aufgerufen
<anc_image_customer_owngallery><reference name="content"><block type="anc_image/owngallery" name="anc_image_owngallery" template="ancimage/customer_owngallery.phtml" /></reference></anc_image_customer_owngallery>
- stellt die Anzeige unserer extension Model/Tabelle 'anc_image/ncimage' dar (aufgewertet durch prettyPhoto)
- beinhaltet ein formular um bilder per drag&drop (dank dropzonejs) hinzuzufügen.
- im formular als action ist wieder ein Magento_Entwicklung#Controller_-_Schnittstelle_zum_Browser Controlleraufruf enthalten
/var/www/Magento/AncImage/app/design/frontend/template/ancimage/customer_owngallery.phtml
<?php if(Mage::getSingleton('customer/session')->isLoggedIn()): ?>
<?php $customer = Mage::getSingleton('customer/session')->getCustomer(); ?>
<!-- Anzeige der Daten -->
<?php $ncimages = Mage::getModel('anc_image/ncimage')->getCollection()->addFieldToFilter('ancii_customer_id', $customer->getId()); ?>
<?php $path = DS.'media'.DS.'anc'.DS.'image'.DS.'customer'.DS.$customer->getId().DS; ?>
<ul class="gallery clearfix">
<?php foreach($ncimages->getItems() as $ncimage ): ?>
<a rel="prettyPhoto[pp_gal2]" href="<?php echo $path.$ncimage['ancii_file'] ?>" title="You can add caption to pictures.">
<img height="50" src="<?php echo $path.$ncimage['ancii_file'] ?>" >
</a>
<?php endforeach; ?>
</ul>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery("a[rel^='prettyPhoto']").prettyPhoto({});
});
</script>
<!-- Formular eingabe der Daten -->
<form action="<?php echo $this->getUrl('ancimage/customer/uploadImage'); ?>" class="dropzone">
<div class="fallback"><input name="file" type="file" multiple /></div>
</form>
<?php else: ?>
<h1>Bitte loggen Sie sich ein!</h1>
<?php endif; ?>
app code - die eigentliche code logik inklusive datenbank zugriff
Controller - Schnittstelle zum Browser
in anc_image.xml wird die controller funktion owngalleryAction() beschrieben
<layout version="0.1.0"><anc_image_customer_owngallery> <!-- hier steht dann weiteres zum controller --></anc_image_customer_owngallery></layout>
in #config.xml - konfiguration der extension wird der beschrieben das die controller funktionen über die browser url erreichbar sind
<config><frontend><routers><anc_image><!-- hier wird die umleitung beschrieben --></anc_image></routers></frontend></config>
/var/www/Magento/AncImage/app/code/controllers/CustomerController.php
<?php
/**
* Controller ist dank @see app/code/etc/config.xml im <routers> tag
* als url direkt im Browser erreichbar
*/
class Anc_Image_CustomerController extends Mage_Core_Controller_Front_Action {
protected function _initAction() {
$this->loadLayout();
return $this;
}
/**
* fnc ist in "mein Benutzerkonto" laut @see @see app/design/frontend/layout/anc_image.xml als link aufrufbar,
* * durch selbige anc_image.xml bekommt die fnc das template @see app/design/frontend/template/ancimage/customer_owngallery.phtml beigesteuert
*/
public function owngalleryAction() {
$this->loadLayout();
$this->getLayout()->getBlock('root')->setTemplate('page/1column.phtml');
// $this->getLayout()->getBlock('content')->append(
// $this->getLayout()->createBlock('anc_image/owngallery')
// );
$this->renderLayout();
}
/**
* fnc wird übers formular von owngalleryAction() bzw customer_owngallery.phtml
* bei einem datei upload aufgerufen und verarbeitet die post werte
* * kopiert datei in entsprechendes kunden verzeichniss
* * speichert dateiname im model / in tabelle
*/
public function uploadImageAction() {
if (Mage::getSingleton('customer/session')->isLoggedIn()) {
/* Get the customer data */
$customer = Mage::getSingleton('customer/session')->getCustomer();
if(isset($_FILES['file']['name']) && $_FILES['file']['name'] != '') {
try
{
$path = Mage::getBaseDir().DS.'media'.DS.'anc'.DS.'image'.DS.'customer'.DS.$customer->getId().DS; //desitnation directory
$fname = $_FILES['file']['name']; //file name
$uploader = new Varien_File_Uploader('file'); //load class
$uploader->setAllowedExtensions(array('jpg','jpeg','gif','png')); //Allowed extension for file
$uploader->setAllowCreateFolders(true); //for creating the directory if not exists
$uploader->setAllowRenameFiles(false); //if true, uploaded file's name will be changed, if file with the same name already exists directory.
$uploader->setFilesDispersion(false);
$uploader->save($path,$fname); //save the file on the specified path
$ncimage = Mage::getModel('anc_image/ncimage');
$ncimage->setData('ancii_customer_id',$customer->getId());
$ncimage->setData('ancii_path', $path);
$ncimage->setData('ancii_file',$fname);
$ncimage->save();
} catch (Exception $e) {
echo 'Error Message: !! '.$e->getMessage();
}
}
} else {
echo('nicht eingeloggt');
}
}
}
die datenbankverbindung
datenbank tabelle
folgende skriptdatei zur erstellung der datenbank tabelle wird (siehe #config.xml - konfiguration der extension ) über folgenden code eingebunden
<resources>
<anc_image_setup>
<setup><module>Anc_Image</module><class>Mage_Sales_Model_Mysql4_Setup</class></setup>
<connection><use>core_setup</use></connection>
</anc_image_setup>
</resources>
- sie wird übrings einmalig ausgeführt beim einfachen reload einer seite im magento backend
- dies führt zu folgendes
- in die tabelle: core_resource kommt ein Eintrag der extension inkl. version
- install-0.0.1.php wird ausgeführt und tabelle erstellt
- wenn also das skript noch mal ausgeführt werden soll, muss nicht nur die tabelle gelöscht werden, sondern auch der eintrag in der core_resource tabelle
- dies führt zu folgendes
app/code/sql/anc_image_setup/install-0.0.1.php
<?php
/**
* @var Mage_Sales_Model_Mysql4_Setup $installer
*/
$installer = $this;
$installer->startSetup();
$tableName = $installer->getTable('anc_image/ncimage');
$table = $installer->getConnection()->newTable($tableName)
->addColumn('entity_id', Varien_Db_Ddl_Table::TYPE_INTEGER,null,array('identity' => true,'unsigned' => true,'nullable' => false,'primary' => true,),'Id')
->addColumn('ancii_customer_id', Varien_Db_Ddl_Table::TYPE_INTEGER,null,array('unsigned' => true,'nullable' => false,'default' => '0',),'Who Created')
->addColumn('ancii_created_at', Varien_Db_Ddl_Table::TYPE_TIMESTAMP,null,array(),'When beginn')
->addColumn('ancii_updated_at', Varien_Db_Ddl_Table::TYPE_TIMESTAMP,null,array(),'When updated')
->addColumn('ancii_deleted', Varien_Db_Ddl_Table::TYPE_TINYINT,null,array('default' => '0'),'Deleted')
->addColumn('ancii_path', Varien_Db_Ddl_Table::TYPE_VARCHAR,null,array(),'file path')
->addColumn('ancii_file', Varien_Db_Ddl_Table::TYPE_VARCHAR,null,array(),'file')
->addColumn('ancii_comment', Varien_Db_Ddl_Table::TYPE_VARCHAR,null,array(),'comment')
;
$installer->getConnection()->createTable($table);
$installer->endSetup();
?>
datenbank zugriffs klassen
Anc_Image_Model_Ncimage
/var/www/Magento/AncImage/app/code/Model/Ncimage.php
class Anc_Image_Model_Ncimage extends Mage_Core_Model_Abstract {
protected function _construct()
{
parent::_construct();
$this->_init('anc_image/ncimage');
}
}
Anc_Image_Model_Resource_Mysql4_Ncimage
Achtung: der ort und name dieser klasse wird über #config.xml - konfiguration der extension bestimmt und ist eine so genannte Erweiterung vom Anc_Image_Model_Resource_Mysql4 string
<global><models><anc_image_resource><class>Anc_Image_Model_Resource_Mysql4</class></anc_image_resource></models></global>
/var/www/Magento/AncImage/app/code/Model/Resource/Mysql4/Ncimage.php
class Anc_Image_Model_Resource_Mysql4_Ncimage extends Mage_Core_Model_Mysql4_Abstract {
protected function _construct() {
$this->_init('anc_image/ncimage', 'entity_id');
}
protected function _beforeSave(Mage_Core_Model_Abstract $ncimage) {
if(!$ncimage->getId()) {
$ncimage->setAnciiCreatedAt(now());
}
$ncimage->setAnciiUpdatedAt(now());
return parent::_beforeSave($ncimage);
}
}
Anc_Image_Model_Resource_Mysql4_Ncimage_Collection
Achtung: der ort und name dieser klasse wird über #config.xml - konfiguration der extension bestimmt und ist eine so genannte Erweiterung vom Anc_Image_Model_Resource_Mysql4 string
<global><models><anc_image_resource><class>Anc_Image_Model_Resource_Mysql4</class></anc_image_resource></models></global>
/var/www/Magento/AncImage/app/code/Model/Resource/Mysql4/Ncimage/Collection.php
class Anc_Image_Model_Resource_Mysql4_Ncimage_Collection extends Mage_Core_Model_Mysql4_Collection_Abstract{
public function _construct(){
$this->_init('anc_image/ncimage');
parent::_construct();
}
}
weiteres
der vollständigkeitshalber sind hier noch die externen bibliohtken aufgelistet ... diese dateien lassen sich auf den jeweiligen seiten runterladen, desweiteren muss jquery noch eingebunden werden
css
/var/www/Magento/AncImage/skin/frontend/css/dropzone.css /var/www/Magento/AncImage/skin/frontend/css/prettyPhoto.css
js
/var/www/Magento/AncImage/js/dropzone.js /var/www/Magento/AncImage/js/jquery.prettyPhoto.js
Verlinkungen
ln -s /var/www/Magento/AncImage/app/code /var/www/Magento/Magento18/app/code/local/Anc/Image
ln -s /var/www/Magento/AncImage/app/etc/modules/Anc_Image.xml /var/www/Magento/Magento18/app/etc/modules/Anc_Image.xml
#
# folgende Verknüpfung fürs Design muss noch gemacht werden
#
# wenn base/default genommen wird, wird die extension (bzw in diesem fall das layout) in jedem design eingebunden
ln -s /var/www/Magento/AncImage/app/design/frontend/layout/anc_image.xml /var/www/Magento/Magento18/app/design/frontend/base/default/layout/anc_image.xml
ln -s /var/www/Magento/AncImage/app/design/frontend/template/ancimage/ /var/www/Magento/Magento18/app/design/frontend/base/default/template/ancimage
# folgendes führt dazu das die extension ausschließlich im default/default design eingebunden wird
ln -s /var/www/Magento/AncImage/app/design/frontend/layout/anc_image.xml /var/www/Magento/Magento18/app/design/frontend/default/default/layout/anc_image.xml
ln -s /var/www/Magento/MyImage/app/design/frontend/template/ancimage/ /var/www/Magento/Magento18/app/design/frontend/default/default/template/ancimage
# js und css
ln -s /var/www/Magento/AncImage/js/ /var/www/Magento/Magento18/js/ancimage
ln -s /var/www/Magento/AncImage/skin/frontend/css/ /var/www/Magento/Magento18/skin/frontend/base/default/css/ancimage