Magento extension: anc image

• commit 06f0ace359776cba17c9c2b088030f36d7adaf99 Mon Apr 14 17:08:29 2014 +0200
• commit 3914f86b1480b24e1d549bc268854cd22430bb39 Sun Apr 13 22:25:33 2014 +0200

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

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

weiteres

@anc_image_eingabetyp

Suchwort: @anc_image_eingabetyp ... im aktuellen anc_image code

• http://magento.ikantam.com/qa/custom-input-types-custom-options

Quellen und Links

• Magento: eigene Extension erstellen
• Magento: Eine eigene Extension erstellen
• Magento Developper’s Guide (Lesson 3) – Create your own Block