Introduction to Magento (eCommerce PHP CMS)

1. Magento (eCommerce Solution) This Presentation is about: - What is Magento? Magento Installation Introduction to Magento Directory Structure A simple module (“Hello World”) creation

2. What is Magento ? Magento is an open source eCommerce solution. It is based on one of the most popular PHP Designing Pattern MVC (Module, View, Controller). It comes with a variety of tools, necessarily for building a successful online shop. Magento offers a lot of built-in capabilities, such as promo pricing and coupon codes, detailed statistics, and SEO (Search Engine Optimization) options.

4. Small Intro to MVC Design Pattern Part - II How It Works ? The MVC abstraction can be graphically represented as follows.

5. Small Intro to MVC Design Pattern Part – II (cont..) Events typically cause a controller to change a model, or view, or both. Whenever a controller changes a model’s data or properties, all dependent views are automatically updated. Similarly, whenever a controller changes a view, for example, by revealing areas that were previously hidden, the view gets data from the underlying model to refresh itself.

7. Magento Installation Download latest stable version (1.5.0.1) and unzip it to your web host directory Now you are ready to install the Magento. Before we proceed to installation you must have to check that you have Read and Write permission on following directories inside the magento folder. magento/app/etc magento/var magento/media Now Create a database on mysql with name “magento”. In Linux we can do so by writing the following commands (In windows you have to set path for mysql and than you can use the following command): - mysql -u<user_name> -p<password> (enter, you get mysql prompt) mysql> create database magento;

8. Magento Installation If every thing is fine open your favorite web browser type into url ( http://localhost/ <your Magento folder name>/) and press enter you will see the screen link below. Click on I agree to the above terms and conditions and press “Continue”.

9. Magento Installation Now you get the Local Settings Screen. Here you can select your language, time zone and currency for the site. These settings is for your Site default language and currency display to user. When you done click on Continue

10. Magento Installation Configuration (Part – I) After setting locale setting we get the following screen for Database configuration, Web Access Options and Session Storage Options. Database Configuration : - Here we can define the name of the database we previously created in mysql and Host IP or Host Name (if DNS available) in our case Host is “localhost” and at last DB User name and Password

11. Magneto Installation Configuration (Part -II) Web Access Options : - 1 - Use Web Server (Apache) Rewrites You could enable this option to use web server rewrites functionality for improved search engines optimization. Please make sure that mod_rewrite is enabled in Apache configuration. 2- Use Secure URLs (SSL) Secure connection during login and purchasing process. Based on web server configuration and availability of SSL Certificate. Session Storage :- Either you want that user login and working session is save in a DB or use your file system. We go for default (File System) When your done for Configuration press Continue to proceed Now you have to wait for installer response it will create a DB Tables. When it completed the process it will ask for Administrative Configuration.

12. Magento Installation Administrative Configuration You will get the screen like below: - Here you have to enter your name and email address for mail communication and the Administrator User ID and password. The last option is for Encryption Key which is used to encrypt site user passwords and for encryption of Credit Card information.

13. Magento Installation Administrative Configuration (Part – II) When all is done, press continue. You will complete the installation. It will show you, your encryption key please note it down. Here you have two options : - 1 – Go to Frontend ( To view your site) 2 – Got to Backend ( For Administrative settings )

15. Directory Structure Part – II App Directory (All Core Application files and for our created modules): - app/code (All Magento Core Files and our created modules) core Mage, Zend (PHP Framework) local (All Modules created by us) app/design (All View Files) app/design/adminhtml app/design/frontend app/etc ( All configuration files for local modules as well as Magento modules ) app/etc/modules

16. New Module Creation To create a module in Magento we have a first create a directory structure as follows: - Go to folder app/code/local and create directories as follows (all directory names are case-sensitive) <directory package_name> <directory module_name> Block (files that show contents) controllers (events/controllers/functions) etc (Module configuration files) Helper (Module helper files) Model (Business logic and DB communication files) sql (DB query [Schema] files)

17. New Module Creation Part – II Step 1: - Create a file inside app/etc/modules/Mymodule_All.xml Notice the _All in the xml file name. I can declare all of my modules here. (Say I have more than Example, I can also declare my Example2 module in this file). <?xml version=&quot;1.0&quot;?> <config> <modules> <Mymodule_Example> <active>true</active> <codePool>local</codePool> </Mymodule_Example> </modules> </config>

18. New Module Creation Part – II (Cont..) Step 2: Create file to configure your new module. Note the file locations (need to create directories as necessary). app/code/local/Mymodule/Example/etc/config.xml And write XML as follows: - <?xml version=&quot;1.0&quot;?> <config> <modules> <Mymodule_Example> <version>0.1.0</version> </Mymodule_Example> </modules> <global> <blocks> <mymodule_example> <class>Fido_Example_Block</class> </mymodule_example> </blocks> </global> </config>

19. New Module Creation Part – II (Cont..) Step 3: - Now we create a block code for our module. It doesn’t really do anything, but shows some functionality. appodeocalymodulexamplelockiew.php <?php class Mymodule_Example_Block_View extends Mage_Core_Block_Template { private $message; private $att; protected function createMessage($msg) { $this->message = $msg; } public function receiveMessage() { if($this->message != '') { return $this->message; } else { $this->createMessage('Hello World'); return $this->message; } } protected function _toHtml() { $html = parent::_toHtml(); if($this->att = $this->getMyCustom() && $this->getMyCustom() != '') { $html .= '<br />'.$this->att; } else { $html .= '<br />No Custom Attribute Found'; } return $html; } }

20. New Module Creation Part – II (Cont..) Step 4: - Here we create our template (phtml) file. appesignrontendefaultymoduleemplatexampleiew.phtml <?php /** * Mymodule view template * * @see Mymodule_Example_Block_View * */ ?> <div> <span><strong>This is the output of the Mymodule example:</strong></span><br /> <span style=&quot;color:#FF9933;&quot;> <?php echo $this->receiveMessage(); ?> </span> </div>

21. New Module Creation Part – II (Cont..) Step 4: - Cont.. This just outputs some HTML and also runs the receiveMessage() function from our block (view.php). Two caveats here. By placing our view.phtml file in it’s location, we have created our own theme. You must make sure that a) Magento knows about your theme (Admin->System->Design) and b) If you use the this block in a CMS page, you set the CMS page to use your theme (Admin->CMS->Manage Pages->’Your Page’->Custom Design->Custom Theme drop down) Now our custom module is now ready for use.

22. New Module Creation Part – III Now open Magento Admin Panel (by using your user name and password set during installation) Now click on Admin->CMS->Pages it will show the list of all available CMS pages Now click on “Home Page”. It will open Page Information section. Now click on “Content” form left side Options and than click on button “Show Hide Editor” and then write the following : - {{block type=&quot;mymodule_example/view&quot; template=&quot;example/view.phtml&quot; }} Now Click on save page button at top of the page. Now you should successfully have your block and the “Hello World” message being displayed (on your CMS page).