Introduction to Mangento


Published on

Introduction to Magento (eCommerce PHP CMS)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Mangento

  1. 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. 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.
  3. 3. Small Intro to MVC Design Pattern <ul><li>Part – I </li></ul><ul><li>Model-View-Controller (MVC) is a classic design pattern often used by applications that need the ability to maintain multiple views of the same data. The MVC pattern hinges on a clean separation of objects into one of three categories - </li></ul><ul><li>Models for maintaining data, </li></ul><ul><li>Views for displaying all or a portion of the data </li></ul><ul><li>Controllers for handling events that affect the model or view(s). </li></ul><ul><li>Because of this separation, multiple views and controllers can interface with the same model. Even new types of views and controllers that never existed before can interface with a model without forcing a change in the model design. </li></ul>
  4. 4. Small Intro to MVC Design Pattern Part - II How It Works ? The MVC abstraction can be graphically represented as follows.
  5. 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.
  6. 6. Magento Installation <ul><li>Requirements </li></ul><ul><li>At the base level, Magento will require the following software. </li></ul><ul><li>Before proceed to installation we can check system capability by downloading the file ( ) and unzip this file inside your magento directory and run it. ( http://localhost/magento/magento-check.php ) </li></ul><ul><li>1 - Linux, Windows, or another UNIX-compatible operating system </li></ul><ul><li>2 - Apache Web Server (1.x or 2.x) </li></ul><ul><li>3 - PHP 5.2.0 or newer, with the following extensions/addons: </li></ul><ul><li>PDO / MySQL </li></ul><ul><li>MySQLi </li></ul><ul><li>mcrypt </li></ul><ul><li>mhash </li></ul><ul><li>Simplexml </li></ul><ul><li>DOM </li></ul><ul><li>4 - MySQL 4.1.20 or newer InnoDB storage engine </li></ul><ul><li>5 - Sendmail-compatible Mail Transfer Agent (MTA) </li></ul>
  7. 7. Magento Installation Download latest stable version ( 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. 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. 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. 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. 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. 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. 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 )
  14. 14. Directory Structure <ul><li>Part - I </li></ul><ul><li>Inside Magento Folder we have following directories: - </li></ul><ul><li>app(All Core Application files and for our created modules) </li></ul><ul><li>var (Temporary storage files and for Dedug Information files) </li></ul><ul><li>js (All Javascript files) </li></ul><ul><li>skins (All CSS files and its Images) </li></ul><ul><li>includes (Site configuration file) </li></ul><ul><li>lib(Library folder for external resource used by Magento files) </li></ul><ul><li>media (All files which are uploaded through Admin Panel) </li></ul><ul><li>downloader (Usable Magento Core files which are not install during setup but now needed) </li></ul>
  15. 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. 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. 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. 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. 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. appcodelocalMymoduleExampleBlockView.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. 20. New Module Creation Part – II (Cont..) Step 4: - Here we create our template (phtml) file. appdesignfrontenddefaultmymoduletemplateexampleview.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. 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. 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).