Magento extension: anc image: Unterschied zwischen den Versionen

Aus Vosp.info
Wechseln zu:Navigation, Suche
(→‎design oberflächen einbindung)
(→‎design oberflächen einbindung)
Zeile 117: Zeile 117:
  
  
−
     <!-- Kürzel_extensionname_contraller_funcionaction - ansicht wird konfiguriert -->
+
     <!-- Kürzel_extensionname_contraller_funcion bzw module_controller_action  - ansicht wird konfiguriert -->
 
     <anc_image_customer_owngallery>
 
     <anc_image_customer_owngallery>
 
<!-- einbindung von javascript und css -->
 
<!-- einbindung von javascript und css -->

Version vom 13. April 2014, 22:22 Uhr

commit 3914f86b1480b24e1d549bc268854cd22430bb39

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 -->
    <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>	
    <!-- globale einstellung, derzeit die konfiguration der datenbank schnittstelle -->
	<global>
		<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">
        	    <block type="core/template" name="anc_image_customer_owngallery" template="ancimage/customer_owngallery.phtml" />
        	</reference>
    </anc_image_customer_owngallery>	
	
</layout>

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="core/template" name="anc_image_customer_owngallery" template="ancimage/customer_owngallery.phtml" /></reference></anc_image_customer_owngallery>


/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

/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->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

Quellen

Abgerufen von „https://vosp.info/index.php?title=Magento_extension:_anc_image&oldid=3023“