Magento extension: anc image: Unterschied zwischen den Versionen

Aktuelle Version vom 20. Mai 2014, 09:45 Uhr

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

Magento extension: anc image: Unterschied zwischen den Versionen

Aktuelle Version vom 20. Mai 2014, 09:45 Uhr

Inhaltsverzeichnis

Extension Infos

xml Konfiguration

modul aktivierung

config.xml - konfiguration der extension

design oberflächen einbindung

Block und das Template

block

template

app code - die eigentliche code logik inklusive datenbank zugriff

Controller - Schnittstelle zum Browser

die datenbankverbindung

datenbank tabelle

datenbank zugriffs klassen

Anc_Image_Model_Ncimage

Anc_Image_Model_Resource_Mysql4_Ncimage

Anc_Image_Model_Resource_Mysql4_Ncimage_Collection

weiteres

css

js

Verlinkungen

weiteres

@anc_image_eingabetyp

Quellen und Links

Navigationsmenü

Ansichten

Meine Werkzeuge

Navigation

Suche

Werkzeuge