4elements, Amsterdam, Holland

  1. Website Launch Announcement

    DesignScan, Get insight in your website launches their site www.designscan.me

    After 3 years of development, in spare time, DesignScan is excited to announce the launch of their new service and website. The website goes live today, on Monday, June 2, 2014, and is located at: www.designscan.me

    It is time to retake control of your own website. At the newly launched DesignScan.me, instead of endlessly browsing or talking with web design agencies, owners get insight in their own website (Design age, flaws, Usability and others). DesignScan.me features cutting-edge, in-house developed, software that analyses your website design and reports back to the owner in human understandable language.

    DesignScan.me is on a mission to deliver perfect, readable, insights for website owners and to bring the two worlds together, website owners and web- designers, developers. By doing so we pave the way where we provide website owners with the tools and knowhow, and provide the designers and developers with potential new business, clients.

    ###

    Our website is divided into three main sections: MADE SCANS, DASHBOARD (after login) and SUPPORT. By moving to a more client-centric layout, we allow visitors to access information based on their own choice rather than sift through everything to decide what is of interest to them.

    In de MADE SCANS section our current and new members will find detailed information about the companies we made designscans for, this is also the place where you can start earning credits by participating in our “Vote & Earn” program. The DASHBOARD area is specially designed for our registered members. A place where your designscan results are shown and explained, in a human understandable language.

    The website will feature new types of rich content, inspired by our experience, gathered materials and a great team of people working for DesignScan.me. You will find this content in the SUPPORT section in the form of articles, case studies, videos, presentations, interactive forum and live email (Free, for members, one-on-one email help).

    We will update our website on a regular basis, with news, events, product launches and new content. We encourage our visitors to visit our website and sign up for our newsletter, the first issue of which will be released at the end of July. As this functionality shall be available within the next two weeks, please keep visiting our website: www.designscan.me.

    If you experience any problems using our website or if you have any suggestions, please contact us at marketing@designscan.me

     

    0 Comments

    Leave a comment › Posted in: Daily Sneak Peak

    1. Bubble.js: A 1.6K Solution to a Common Problem

      One of the most common tasks in web development is event management. Our JavaScript code is usually listening to events dispatched by the DOM elements. 

      This is how we get information from the user: That is, he or she clicks, types, interacts with our page and we need to know once this happen. Adding event listeners looks trivial but could be a tough process.

      In this article, we will see a real case problem and its 1.6K solution.

      The Problem

      A friend of mine works as a junior developer. As such, he doesn't have a lot of experience with vanilla JavaScript; however, he has had to start using frameworks such as AngularJS and Ember without having the fundamental understanding of DOM-to-JavaScript relationship. During his time as a junior developer, he was put in charge of a small project: A single page campaign websites with almost no JavaScript involved. He faced a small but very interesting problem which ultimately lead me to write Bubble.js.

      Imagine that we have a popup. A nicely styled <div> element:

      <div class="popup"> ... </div>

      Here is the code that we use to show a message:

      var popup = document.querySelector('.popup');
      var showMessage = function(msg) {
          popup.style.display = 'block';
          popup.innerHTML = msg;
      }
      ...
      showMessage('Loading. Please wait.');

      We have another function hideMessage that changes the display property to none and hides the popup. The approach may work in the most generic case but still has some problems. 

      For example, say we need to implement additional logic if the issues come in one by one. Let’s say that we have to add two buttons to the content of the popup - Yes and No.

      var content = 'Are you sure?<br />';
      content += '<a href="#" class="popup--yes">Yes</a>';
      content += '<a href="#" class="popup--no">No</a>';
      showMessage(content);
      

      So, how we will know that the user clicks on them? We have to add event listeners to every one of the links. 

      For example:

      var addListeners = function(yesCB, noCB) {
          popup.querySelector('.popup--yes').addEventListener('click', yesCB);
          popup.querySelector('.popup--no').addEventListener('click', noCB);
      }
      showMessage(content);
      addListeners(function() {
          console.log('Yes button clicked');
      }, function() {
          console.log('No button clicked');
      });

      The code above works during the first run. What if we need a new button, or even worse, what if we need a different type of button? That is, what if we were to continue using <a> elements but with different class names? We can't use the same addListeners function, and it's annoying to create a new method for every variation of popup.

      Here are where problems become visible:

      • We have to add the listeners again and again. In fact, we have to do this every time when the HTML in the popup’s <div> is changed.
      • We could attach event listeners only if the content of the popup is updated. Only after the showMessage calling. We have to think about that all the time and sync the two processes.
      • The code that adds the listeners has one hard dependency - the popup variable. We need to call its querySelector function instead of document.querySelector. Otherwise, we may select a wrong element.
      • Once we change the logic in the message we have to change the selectors and probably the addEventListener calls. It is not DRY at all.

      There must be a better way to do this.

      Yes, there is a better approach. And no, the solution is not to use a framework.

      Before to reveal the answer let’s talk a bit about the events in the DOM tree.

      Understanding Event Handling

      Events are an essential part of web development. They add interactivity to our applications and act as a bridge between the business logic and the user. Every DOM element can dispatch events. All we have to do is to subscribe for these events and process the received Event object.

      There is a term event propagation that stands behind event bubbling and event capturing both of which are two ways of event handling in DOM. Let’s use the following markup and see the difference between them.

      <div class="wrapper">
          <a href="#">click me</a>
      </div>

      We will attach click event handlers to the both elements. However, because there are nested into each other, they both will receive the click event.

      document.querySelector('.wrapper').addEventListener('click', function(e) {
          console.log('.wrapper clicked');
      });
      document.querySelector('a').addEventListener('click', function(e) {
          console.log('a clicked');
      });

      Once we press the link we see the following output in the console:

      a clicked
      .wrapper clicked

      So, indeed the both elements receive the click event. First, the link and then the <div>. This is the bubbling effect. From the deepest possible element to its parents. There is a way to stop the bubbling. Every handler receives an event object that has stopPropagation method:

      document.querySelector('a').addEventListener('click', function(e) {
          e.stopPropagation();
          console.log('a clicked');
      });

      By using stopPropagation function, we indicate that the event should not be sent to the parents.

      Sometimes we may need to reverse the order and have the event caught by the outer element. To achieve this, we have to use a third parameter in addEventListener. If we pass true as a value we will do event capturing. For example:

      document.querySelector('.wrapper').addEventListener('click', function(e) {
          console.log('.wrapper clicked');
      }, true);
      document.querySelector('a').addEventListener('click', function(e) {
          console.log('a clicked');
      }, true);

      That is how our browser process the events when we interact with the page.

      The Solution

      Okay, so why did we spend a section of the article talking about bubbling and capturing We mentioned them because bubbling is the answer of our problems with the popup. We should set the event listeners not to the links but to the <div> directly.

      var content = 'Are you sure?<br />';
      content += '<a href="#" class="popup--yes">Yes</a>';
      content += '<a href="#" class="popup--no">No</a>';
      
      var addListeners = function() {
          popup.addEventListener('click', function(e) {
              var link = e.target;
          });
      }
      
      showMessage(content);
      addListeners();

      By following this approach, we eliminate the issues listed in the beginning.

      • There is only one event listener and we are adding it once. No matter what we put inside the popup, the catching of the events will happen in their parent.
      • We are not bound to the additional content. In other words, we do not care when the showMessage is called. As long as the popup variable is alive we will catch the events.
      • Because we call addListeners once, we use the popup variable also once. We do not have to keep it or pass it between the methods.
      • Our code became flexible because we opted not care about the HTML passed to showMessage. We have access to the clicked anchor in that e.target points to the pressed element.

      The above code is better than the one that we started with. However, still doesn’t function the same way. As we said, e.target points to the clicked <a> tag. So, we will use that to distinguish the Yes and No buttons.

      var addListeners = function(callbacks) {
          popup.addEventListener('click', function(e) {
              var link = e.target;
              var buttonType = link.getAttribute('class');
              if(callbacks[buttonType]) {
                  callbacks[buttonType](e);
              }
          });
      }
      ...
      addListeners({
          'popup--yes': function() {
              console.log('Yes');
          },
          'popup--no': function() {
              console.log('No');
          }
      });

      We fetched the value of the class attribute and use it as a key. The different classes point to different callbacks.

      However, it is not a good idea to use the class attribute. It is reserved for applying visual styles to the element, and its value may change at any time. As JavaScript developers, we should use data attributes.

      var content = 'Are you sure?<br />';
      content += '<a href="#" data-action="yes" class="popup--yes">Yes</a>';
      content += '<a href="#" data-action="no" class="popup--no">No</a>';

      Our code becomes a little bit better too. We can remove the quotes used in addListeners function:

      addListeners({
          yes: function() {
              console.log('Yes');
          },
          no: function() {
              console.log('No');
          }
      });

      The result could be seen in this JSBin.

      Bubble.js

      I applied the solution above in several projects so it made sense to wrap it a library. It’s called Bubble.js and it is available in GitHub. It is 1.6K file that does exactly what we did above.

      Let’s transform our popup example to use Bubble.js. The first thing that we have to change is the used markup:

      var content = 'Are you sure?<br />';
      content += '<a href="#" data-bubble-action="yes" class="popup--yes">Yes</a>';
      content += '<a href="#" data-bubble-action="no" class="popup--no">No</a>';

      Instead of data-action we should use data-bubble-action.

      Once we include bubble.min.js in our page, we have a global bubble function available. It accepts a DOM element selector and returns the library’s API. The on method is the one that adds the listeners:

      bubble('.popup')
      .on('yes', function() {
          console.log('Yes');
      })
      .on('no', function() {
          console.log('No');
      });

      There is also an alternative syntax:

      bubble('.popup').on({
          yes: function() {
              console.log('Yes');
          },
          no: function() {
              console.log('No');
          }
      });

      By default, Bubble.js listens for click events, but there is an option to change that. Let’s add an input field and listens for its keyup event:

      <input type="text" data-bubble-action="keyup:input"/>

      The JavaScript handler still receives the Event object. So, in this case we are able to show the text of the field:

      bubble('.popup').on({
          ...
          input: function(e) {
              console.log('New value: ' + e.target.value);
          }
      });

      Sometimes we need to catch not one but many events dispatched by the same element. data-bubble-action accepts multiple values separated by comma:

      <input type="text" data-bubble-action="keyup:input, blur:inputBlurred"/>

      Find the final variant in a JSBin here.

      Fallbacks

      The solution provided in this article relies completely on the event bubbling. In some cases e.target may not point to the element that we need. 

      For example:

      <div class="wrapper">
          <a href="#">Please, <span>choose</span> me!</a>
      </div>
      

      If we place our mouse over "choose" and perform a click, the element that dispatches the event is not the <a> tag but the span element.

      Summary

      Admittedly, communication with the DOM is an essential part of our application development, but it is a common practice that we use frameworks just to bypass that communication. 

      We do not like adding listeners again and again. We do not like debugging weird double-event-firing bugs. The truth is that if we know how the browser works, we are able to eliminate these problems.

      Bubble.js is but one result of few hours reading and one hour coding - it's our 1.6K solution to one of the most common problems.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Magento: Why Choose It?

      So you've decided to take your store online - that's great! But what platform should you choose out of the many options available out there? 

      Magento is one of the best options and here's why: In today’s world, where everyone is connected to the web – if you're not online, the chances are high that your store will remain unknown. Unless you are selling bread and milk, you should probably consider an online store for your products. 

      Unlike a normal store, an online store gives you great visibility to a very broad range of customers. Online, you can sell locally, nationally and, why not, internationally.

      Once you have gotten this far, you are confronted with a problem: What platform should you use? Should you use a hosted solution (e.g. Shopify), a proprietary platform (one built by yourself from scratch), or use an open source e-commerce platform such as Magento, OpenCart, Prestashop, osCommerce? 

      Let’s look at some of these options.

      Hosted Solutions

      Online stores provided by companies such as Shopify are a good solution if you have no coding skills or just do not want the hassle of working under-the-hood. These platforms work out-of-the-box with minimal setup and offer user-friendly interfaces to help you get your products online quickly.

      They come with options of free or paid graphical themes to suit your visual preferences, they offer a couple of payment methods which are accessible to your customers, and they also provide you with web hosting.

      These services, depending on how complex you would like to go start out at about $9/mo (Volusion) up to $300/mo.

      The drawbacks (other than the costs – which you will have regardless of if you choose hosted or other solutions) are that they limit your ability to customize the aspect of the website and they usually have a per transaction fee or a certain percentage.

      Proprietary Platform

      While this solution offers a platform perfectly tailored to your needs without any other bulk and no limitations, this option is usually high-cost, high-maintenance and time-consuming. 

      If you were to build such a platform, it would take you a good two-to-three months to have it up and somewhat bug-free. If you were to hire someone to do this for you it would cost you somewhere from $3,000 and up, depending on what you want and need.

      Open-Source Platforms

      If you want to ditch the high monthly fees, have a fully customizable and robust platform, you are in luck, because there are a couple of options out there that will get you up and running in no time.

      The top platforms used by so many online stores around the world are Magento, OpenCart, Prestashop and osCommerce.

      osCommerce Merchant is an open-source PHP platform, which is free to download and use for your commercial needs. The user interface, both end-user and admin, is clunky in version 2.3 so I wouldn’t recommend it but it has been one of the longest running e-commerce platform so they deserve a mention in this thread. (There is a version 3 in development at the time of this article.)

      Prestashop is a newer and quite popular option at the moment. Free to download and use, one of its best features is the fact that its toll on your server’s hardware is not so bad so it can be used for smaller stores even in a shared web hosting account. It has multi-store management, stock keeper, users database, and reports of online sales and many more features. The interface is clean and user-friendly, out of the box-themes are pretty nice and there is some good support around the internet for Prestashop developers.

      OpenCart is one of our picks as a very good platform for medium-sized stores, which is also very popular and here at Tuts+ we are going to start featuring tutorials on working with this platform very soon.

      Magento is the biggest player in the game. It was created in 2007 by a team that used to work on osCommerce and has become a household name in the industry. It is an open-source PHP and MySQL platform with one of the most robust and complex backbone, highly customizable, easy to learn and user-friendly to manage. 

      Here are some of the features and reasons why Magento is one of our top picks:

      Robust Platform

      Because Magento offers an Enterprise version of their software, most if not all the features end up in their Community Edition, thus giving you an enterprise level platform, constantly up-to-date with security and out-of-the-box enhancements.

      User-Friendly

      The interface on both front-end and back-end are intuitive and familiar to you and your customers. While Magento is complex, it is not complicated, thus giving your clients a rich shopping experience.

      Multiple Store and Catalog Management

      One of the great features of Magento is the fact that it can seamlessly run multiple stores from the same back-end, making it easy to sell items in multiple stores (even with different domain names) but keeping your inventory in sync, managing invoices, shipping details, and payments under the same "roof".

      Internationalization

      As I mentioned in the beginning of this article, an online store helps you reach a broader audience, and Magento makes it so much easier because it handles any currency with automatic daily exchange rate updates, multiple language support (translations available for both front-end and back-end in pretty much any language) which can be triggered even by user IP address, thus giving your customers a tailored experience.

      Out-of-the-Box Functionality

      From the moment you install Magento, you have the ability to choose popular shipping methods such as UPS, FedEx, or USPS (giving you the ability to print labels and have up to date shipping rates pulled from their respective websites) and payment methods, e.g. PayPal, Authorize.net, Cash on Delivery, or Credit Cards.

      Integration

      You probably use a separate invoicing, inventory, or sales software. While you might consider Magento's platform as a good substitute, you can also easily integrate its database with software such as SalesForce or QuickBooks with modules found in the marketplace.

      Extensible - Large Marketplace

      Beyond the out-of-the-box features, you have access to a market of free and paid modules which can extend the functionality of Magento to suit your needs such as different shipping, payment, invoicing methods or marketing plugins to promote your products and content in a more dynamic way.

      If, for some reason, you cannot find a ready made module for something you have the possibility to create your own! We will have some tutorials on how to do this in future article.

      Look and Feel

      Magento's basic theme is pretty slick, but you have plenty of options for implementing themes for both desktop and mobile and the ability to change the design based on page, product type, season or holiday. You can find themes online, free or paid, or you can create your own - and we will show you how in future articles.

      Resources

      All this functionality does come with somewhat of a price: It is resource intensive. 

      Its robust and complex structure require more hardware resources than other platforms. While it may very well work on a shared web hosting account, once you start filling up your catalog and draw in more visitors, you will most likely experience a slower response from the website. It is recommended that you get a VPS with dedicated hardware to get the best user experience though this may increase your running costs.

      Conclusion

      If you need a small online shop to increase your products’s visibility, and do not want the hassles of programming and the such, a lower tier hosted solution might be the way to go.

      If on the other hand you want to move your business seriously online, implementing Magento as your online platform. We consider it to be one of the best open-source platforms available. 

      This was an introductory article to a number of articles and series which we will bring you over the coming months. As mentioned we will help you learn how to get set up, customize the look of your site with themes, the functionality of your store with plugins, add products and pages, raise your store's visibility in search engines, and much more.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Using Jekyll

      In the previous post, I talked about GitHub Pages and how to set it up on your GitHub repository. We used the site generator to get started and I mentioned that GitHub Pages also supports Jekyll

      In this post, I will talk about Jekyll and show you how to get it setup with your project. I have created an example project that you pull down and follow along with as well.

      What is Jekyll?

      What exactly is Jekyll? Here's their description on their site:

      Jekyll is a simple, blog-aware, static site generator.

      It is completely content driven and it also supports Markdown. It uses Liquid for its layouts so you have some reuse of things like your head, header, and footer. It will generate static pages based on your content and the layouts you specify.

      It is also blog aware, so it could be a potential replacement for WordPress or another CMS.

      Perhaps the most important thing to note is that, in Jekyll, permalinks, categories, pages, posts, and custom layouts are all first-class citizens.

      You are also able to generate and view your site locally, as well.

      Installation

      Jekyll is based on Ruby, so the easiest way to install is using RubyGems. If you are on Mac or Linux, you can install Jekyll via the command line by running gem install jekyll. If you run into any issues during that install I would suggest checking out the installation guide.

      If you are on Windows then there's a Windows-specific docs page that you will need to follow.

      Configuration

      The first thing that you will need to setup is the configuration file. You will want to add a _config.yml file to the root of your project. There are a number of configuration options you can add, I will use a subset of them for this example. Go ahead and add the following to your _config.yml file:

      # Dependencies
      markdown:         rdiscount
      pygments:         true
      
      # Permalinks
      permalink:        pretty
      
      # Server
      destination:      _gh_pages
      host:             0.0.0.0
      port:             9001
      baseurl:          /
      encoding:         UTF-8

      Now that we have our configuration file added, let's continue setting up the project structure.

      Project Structure

      There is a specific structure that you need to follow when creating a Jekyll-based site. It's important to follow the structure in order for your site to be generated correctly. Here's what it looks like,

      _layouts

      This is where you are going to have your different layouts for your pages. You can think of these to be like WordPress page templates. You might want your default layout to have a sidebar and have another layout that doesn't have a sidebar. You will reference these layouts in your content based on the name of the file.

      Go ahead and create a _layouts folder in the root of your project. Next let's say that you want to create the default layout. You will want to create a default.html inside the _layouts folder. You will then be able to reference the default layout in your different pages.

      There are a couple of things that you will probably want to add to each of your layout files, the page title and content. If you want to have your page title show up, then you will want to add it to your layout by using the following syntax:

      <h1>{{ page.title }}</h1>

      You will also want to specify where you want the content of each page to be populated in that layout. To do so, you will need to use the following syntax:

      {{ content }}

      These are used in the default.html in the example project.

      You will probably want to include some other things that will be reused in each page like the header, footer, navigation, and others. You will want to add these into your _includes folder.

      _includes

      The includes are going to be things that you will want to reuse on different pages like I mentioned above. You will want to add them in the _includes folder. Go ahead and create a _includes folder in the root of your project.

      Let's say you want to have the document head as an include. You would first need to add a head.html file in the _includes folder. You would then add everything you need for the document head like the doctype, meta data, scripts, etc.

      Next you will want to reference that head.html file in your default.html layout file. You will do this by using the following syntax:

      {% include head.html %}

      You can see this being used in the default.html in the example project.

      You would do the same for anything else you want to reuse between pages like your header and footer. You can also create subfolders inside the _includes folder and reference them as well. I like doing this to organize the difference sections of each page if they have a lot of content.

      Setting Up Your Pages

      Now that we have a default layout, let's make our first page. Go ahead and create an index.html file in the root folder of your project. Don't worry, it won't override your theme's index.php file if you using this to document your WordPress theme.

      The top of each file you will need to specify a few things about the page. This is what jekyll will reference when building each page. There are a number of things you are able to set, but I am going to focus on a few of them:

      • layout - the layout your want this page to use
      • title - the page title
      • slug - the pretty permalink for the page

      Here's an example to add to the top of your index.html file:

      ---
      layout: default
      title: Tuts+ GitHub Pages
      slug: tuts-github-pages
      ---

      Now that we have our page setup, all we have to do now is add our content. Simply add all of the HTML you want to show up in your page.

      Building and Serving Your Pages

      The building and serving of your pages is done through the command line. Go ahead and open up your command line tool of choice, type in jekyll serve and hit Enter. You should see the following output:

      If you are seeing the correct output, then your pages are built and ready to be viewed. Now you can view your pages by going to http://localhost:9001, or whatever port your specified in your _config.yml file, in your browser of choice.

      Conclusion

      I have covered the basics on getting started with using Jekyll with your project. I walked through how to set up the configuration file and the project structure. I also talked about how you can build and serve your pages. If you want to see everything put together, then you can take a look at this example project.

      In the next post, I will talk about how to serve your pages on GitHub Pages and distribute them in your WordPress theme or plugin.

      Resources

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Magento Custom Module Development

      Magento custom module development is a core part of any Magento development or Magento project, because at any stage you may want to integrate your own functionality/module in your existing Magento project. 

      In this series, I am going to cover the details of Magento custom module development.

      Throughout this series, I'm referring Magento Community Edition 1.7, though custom module structures are the same in all versions of Magento. Before going we're going to start actual module development, let's quickly understand the basic structure of Magento. 

      Whenever you install a fresh Magento, you will notice the following Magento directory structure:

      Introduction to Magento MVC Structure

      Like any other major frameworks such as Joomla, CakePHP, CodeIgniter, etc., Magento also follows the MVC-based architecture though this is little bit different than core PHP MVC architecture. Here, I'll explain the difference in Magento architecture by comparing it with simple PHP MVC architecture.

      PHP MVC architecture

      In the typical MVC pattern, the flow of the application is something like this:

      1. There is main entry point - index.php - from where the entire app routing mechanism is determined.
      2. Based on this routing mechanism and requested URL pattern, the app will call the appropriate controller.
      3. The controller then calls the appropriate views.
      4. Finally, the view files collect the data from model files and display the data.

      Magento MVC architecture

      Magento's MVC architecture adds a few layers to the MVC pattern, but the basic flow of control of an application is like this:

      1. There is main entry point - index.php - from where the whole app will be initialized.
      2. Base on the requested URL appropriate controller will be called. 
      3. Controller defines the pages and load the layout files for those pages.
      4. Layout files tells the controllers which block files to use.
      5. Block files collect the data from models and helpers files and pass it to templates files.
      6. Templates files receive data and render html.

      Initially, this may be difficult to understand since it contains a few extra layers. To get more familiar with the flow of control, let's develop a custom "Hello World" module.

      Before Starting With Modules

      • I am assuming that you already have a working copy of Magento with version 1.7 or 1.7+ (or else as version does not matter at this stage)
      • Disable the cache. To Disable the cache Go to Magento Admin Panel  > System > Cache Management  > Select all cache type from left side checkboxes > Select Action: disable from right top drop down > click Submit.

      The Structure of a Magento Module

      Code Pools

      Magento contains three type of code pools where the all custom and core modules of Magento are resides. 

      1. Core pools contain all the core modules which are by default comes with a Magento installation. These modules are written by Magento developers. It's recommended not to modify these modules because whenever you will upgrade your Magento installation, all the core modules will be overwritten and your modifications will be lost.
      2. Community pools contain all the modules - that is, custom modules - that are developed by third-party programmers to be installed through Magento Connect. These modules generally extend core modules and offer their own functionality that can often be used anywhere in Magento.
      3. Local pools contain all the custom module that are going to be used for a particular project but are not readled in Magento Connect

      Thus, we have two choice of pools: Community or Local. Since we are working on our own project, we are going to use a local pool, though there's no restriction on using the community pool, either.

      Structure

      Magento modules consist of the following components:

      • Blocks contain functions that are used to display data in templates.
      • Models contain the business logic of modules.
      • Resource Models contains functions that are used for database interaction.
      • Controllers defines page layout and blocks files and are loaded when a URL is requested.
      • etc contains configuration files in XML formats which tells Magento how many files modules have and how the module interacts.
      • Helpers contain functions that are used for defining common business logic (such as image resize, validation). These functions can used anywhere across the Magento application
      • sql contains SQL scripts to create, modify, or delete SQL tables.

      Module Naming

      We need to give a name to our module. Generally, Magento module names are made of two parts: <Namespace>_<Module>. The best practice to give a Magento module a name is choose <Namespace> as an author or a company name and <Module> as a actual module name.

      Based on these naming convention, I am giving our module the Chiragdodia_Mymodule name. We will reference this name throughout this series.

      Code Set Up and Configuration

       Lets create the directories base on above structure. Go to your Magento installation direction then navigate to app/code/local  and create the directories as shown below.

      Next, we will configure and activate our module by creating config file Chiragdodia_Mymodule.xml in the app/etc/modules directoryThis directory contains config files for all modules.

      <?xml version="1.0"?>
      <config>
          <modules>
              <Chiragdodia_Mymodule>
              <active>true</active>
              <codePool>local</codePool>
              </Chiragdodia_Mymodule>
          </modules>
      </config>

      This file will tell Magento about the location of our module. In the active tag, we have specified true to enable our module. If everything is correct thus far, then you will find your module in the Magento Admin Panel  > System > Configuration > Advanced > Advanced  > Disable Modules Output list. From here you can enable and disable your module.

      Getting Started: Development

      Next we will create our module configuration file. This file will tell Magento all about our module. This includes how many files our module contains, what type of files (models, helpers, database classes), and so on.

      Go to app/code/local/Chiragdodia/Mymodule/etc and create a config.xml file that will contain following content

      <?xml version="1.0"?>
      <config>
          <modules>
              <Chiragdodia_Mymodule>
                  <version>0.1.0</version>    <!-- Version number of your module -->
              </Chiragdodia_Mymodule>
          </modules>
          <frontend>
              <routers>
                  <mymodule>
                      <use>standard</use>
                      <args>
                          <module>Chiragdodia_Mymodule</module>
                          <frontName>mymodule</frontName>
                      </args>
                  </mymodule>
              </routers>
          </frontend>
      </config>
      

      Let's go through line by line to understand each tag. Here, the first tag is <module> that contains the name and version of our module. The version number is very important when it comes to updating your module update your module.

      The <frontend> tag will tell Magento about the controller dispatched. Inside the <frontend> tag, we have defined <routers> that tells Magento how to access our controllers via the routing mechanism. 

      In the <mymodule> tag, we have defined module name in <module> tag and frontend name in <frontName>. By using a frontend name, we can access our module in frontend like yoursitename.com/index.php/mymodule/index.

      By calling yoursitename.com/index.php/mymodule or yoursitename.com/index.php/mymodule/index Magento will look for index action of your module's controller file. As such, we need to create our controller file.

      Go to  app/code/local/Chiragdodia/Mymodule/controllers and create file IndexController.php with following content.

      Note that each file's name and class names are case sensitive in Magento It's very important that you are taking care in naming your work when creating files and classes.

      <?php
      class Chiragdodia_Mymodule_IndexController extends Mage_Core_Controller_Front_Action
      {
          public function indexAction()
          {
              echo "Hello tuts+ World";
          }
      }
      

      Now open URL yoursite.com/index.php/mymodule/index it will print "Hello tuts+ World". Awesome - we're finally done with our first hello world module.

      Controller Dispatch

      Here we have extend the class Mage_Core_Controller_Front_Action that contains all the methods which are using in routing of url. The Magento class name reflects the location of class file. So the class Mage_Core_Controller_Front_Action resides in location Mage > Core > Controller > Front > Action.php

      See the class name of our controller that is Chiragdodia_Mymodule_IndexController. Magento controller to be named in such a way that it reflects (<module>tag)_(Action Controllername)(keyword Controller).

      • <module>tag = Chiragdodia_Mymodule (we have defined this tag in config.xml)
      • Action Controllername = Index
      • Action controller followed by the Controller keyword 

      Based on this pattern, the name of our controller is Chiragdodia_Mymodule_IndexController

      Now see the URL pattern which is follow the below route pattern
      yoursite.com/index.php/frontendname/actionControllername/actionmethod

      • frontendname = mymodule
      • actionControllername = Index
      • actionmethodname = Index

      Based on this URL pattern, our module's URL is yoursite.com/index.php/mymodule/index/index. You can also access it using yoursite.com/index.php/mymodule because whenever you have not specified an actionController or actionmethod name, Magento loads the index controller and index action by default.

      Now let's create one more action: testAction .

      <?php
      class Chiragdodia_Mymodule_IndexController extends Mage_Core_Controller_Front_Action
      {
          public function indexAction()
          {
              echo "Hello tuts+ World";
          }
          public function testAction()
          {
              echo "test action";
          }
      }
      

      We can access the testAction using URL yoursite.com/index.php/mymodule/index/test. As explained earlier here

      • frontendname = mymodule
      • actionControllername = Index
      • actionmethodname = test

      This is how the controller works in Magento.

      At first, it can be difficult to understand everything at once so I've included all of the source code to this module so that you can review it and implement your own work while using it as a guide.

      What's Next?

      In next part, we are going to fill in some layouts in our module by creating layout and block files. We will understand how the layouts files works in Magento and what role blocks play within the context of Magento.

      Until then create your own module and let me know of anything that causes you trouble.

       

      0 Comments

      Leave a comment › Posted in: Daily

  • Page 1 of 23 pages  1 2 3 >  Last ›
  • Browse the Blog

    Syndicate

    governing-bruise