Introduction to Mangento

Magento (eCommerce Solution)

This Presentation is about: -

What is Magento?

Magento Installation

Introduction to Magento Directory Structure

A simple module (“Hello World”) creation

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.

Small Intro to MVC Design Pattern

Part – I

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 -Models for maintaining data, Views for displaying all or a portion of the dataControllers for handling events that affect the model or view(s).

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.

Small Intro to MVC Design Pattern

Part - IIHow It Works ?

The MVC abstraction can be graphically represented as follows.

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.

Magento Installation

RequirementsAt the base level, Magento will require the following software. Before proceed to installation we can check system capability by downloading the file (http://www.magentocommerce.com/_media/magento-check.zip) and unzip this file inside your magento directory and run it. (http://localhost/magento/magento-check.php)

1 - Linux, Windows, or another UNIX-compatible operating system2 - Apache Web Server (1.x or 2.x)3 - PHP 5.2.0 or newer, with the following extensions/addons: PDO / MySQL MySQLi mcrypt mhash Simplexml DOM4 - MySQL 4.1.20 or newer InnoDB storage engine5 - Sendmail-compatible Mail Transfer Agent (MTA)

Magento InstallationDownload 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;

Magento InstallationIf 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”.

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

Magento InstallationConfiguration (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

Magneto InstallationConfiguration (Part -II)

Web Access Options: - 1 - Use Web Server (Apache) RewritesYou 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.

Magento InstallationAdministrative 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.

Magento InstallationAdministrative 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 )

Directory Structure

Part - I

Inside Magento Folder we have following directories: -

app(All Core Application files and for our created modules)var (Temporary storage files and for Dedug Information files)js (All Javascript files)skins (All CSS files and its Images)includes (Site configuration file)lib(Library folder for external resource used by Magento files)media (All files which are uploaded through Admin Panel)downloader (Usable Magento Core files which are not install during setup but now needed)

Directory Structure

Part – IIApp 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/frontendapp/etc (All configuration files for local modules as well as Magento modules)app/etc/modules

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)

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="1.0"?><config><modules><Mymodule_Example><active>true</active><codePool>local</codePool></Mymodule_Example></modules></config>

New Module CreationPart – 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.xmlAnd write XML as follows: -

<?xml version="1.0"?><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>

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. app\code\local\Mymodule\Example\Block\View.php

<?phpclass 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;}}

New Module CreationPart – II (Cont..)

Step 4: - Here we create our template (phtml) file. app\design\frontend\default\mymodule\template\example\view.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="color:#FF9933;"><?php echo $this->receiveMessage(); ?></span></div>

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)andb) 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.

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 pagesNow 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="mymodule_example/view" template="example/view.phtml" }}

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).