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. New Course: Getting Started With Laravel 4

      What You'll Learn

      It is no exaggeration to say that Laravel has taken the PHP community by storm. If you're ready to start learning Laravel, our latest course will cover all the basics to get you ready to go. You'll get set up with all the tools you need to build your own apps in Laravel, and you can start learning straight away with our 14 day free trial!

      The course is taught by our expert instructor, Joost Van Veen, and a few of the topics covered include:

      • Routing
      • Controllers
      • Models
      • Views
      • The blade tempting engine
      • Eloquent
      • Authentication
      • Resources
      • Validation
      • ...and much more!

      To complete this course, you'll build a hands-on project that'll put all the skills you've learned into practice.

      Watch the Introduction

      Start Learning With a 14 Day Free Trial

      You can take our new Laravel course straight away with a completely free 14 day trial of a Tuts+ subscription.

      Take a look at our subscription options to get started or, if you're just interested in this course, you can buy it individually for $15!

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. From Beginner to Advanced in OpenCart: Module Development

      In the previous articles, we examined the MVC architecture and created our first controller, model, and view in the OpenCart application. We did this in order to help gain a better understanding of the core application. 

      To take things a step further, we're going to look at creating a custom module for OpenCart.

      What Are OpenCart Modules?

      OpenCart modules are analogous to add-ons, plugins, or extensions in other content management systems. It's through modules that OpenCart gives us the ability to extend its functionality without having to edit the application's files.

      As with many other content management systems, it's generally considered to be a best practice to extend functionality of the core application through the provided APIs and OpenCart is no different. Modules allow us to introduce, remove, or modify functionality of the core application that's done in a compartmentalized and maintainable way.

      Additionally, OpenCart has its own Extension Market where a large number of extensions are already available. 

      Our First Module

      In order to get acclimated with OpenCart's module system, we can write the obligatory "Hello World" module. This will take input from the dashboard and display it on the front-end of the site.

      Note that OpenCart has a number of pre-build modules. As such, we'll try to leverage those when possible when working on our own. To get started, perform the following:

      1. Create an Controller to Admin Path: admin/controller/module/helloworld.php .
      2. Create a Language File to Admin Path: admin/language/english/module/helloworld.php .
      3. Create a View to Admin Path: admin/view/template/module/helloworld.tpl .

      1. The Language File

      As discussed in our previous articles, the language file contains the static text what should be displayed in our view file. For the helloworld.php language file, the following variables contain the possible text fields what we require to display in our module:

      <?php
      // Heading
      $_['heading_title']       = 'Hello World';
      
      // Text
      $_['text_module']         = 'Modules';
      $_['text_success']        = 'Success: You have modified module Hello World!';
      $_['text_content_top']    = 'Content Top';
      $_['text_content_bottom'] = 'Content Bottom';
      $_['text_column_left']    = 'Column Left';
      $_['text_column_right']   = 'Column Right';
      
      // Entry
      $_['entry_code']          = 'Hello World Code:';
      $_['entry_layout']        = 'Layout:';
      $_['entry_position']      = 'Position:';
      $_['entry_status']        = 'Status:';
      $_['entry_sort_order']    = 'Sort Order:';
      
      // Error
      $_['error_permission']    = 'Warning: You do not have permission to modify module Hello World!';
      $_['error_code']          = 'Code Required';
      ?>

      1. The Controller

      Open the "Hello World" controller file that we just created and add the class class ControllerModuleHelloworld extends Controller {} following the Class Naming Convention. Next, place the following code inside the class.

      Step 1: The Default Function 

      private $error = array(); // This is used to set the errors, if any.
      
      public function index() {   // Default function 
          $this->language->load('module/helloworld'); // Loading the language file of helloworld 
      
      	$this->document->setTitle($this->language->get('heading_title')); // Set the title of the page to the heading title in the Language file i.e., Hello World
      
      	$this->load->model('setting/setting'); // Load the Setting Model  (All of the OpenCart Module & General Settings are saved using this Model )
      
      
      
      	if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) { // Start If: Validates and check if data is coming by save (POST) method
      		$this->model_setting_setting->editSetting('helloworld', $this->request->post);		// Parse all the coming data to Setting Model to save it in database.
      
      		$this->session->data['success'] = $this->language->get('text_success'); // To display the success text on data save
      
      		$this->redirect($this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL')); // Redirect to the Module Listing
      	} // End If
      
      	/*Assign the language data for parsing it to view*/
      	$this->data['heading_title'] = $this->language->get('heading_title');
      
      	$this->data['text_enabled'] = $this->language->get('text_enabled');
      	$this->data['text_disabled'] = $this->language->get('text_disabled');
      	$this->data['text_content_top'] = $this->language->get('text_content_top');
      	$this->data['text_content_bottom'] = $this->language->get('text_content_bottom');		
      	$this->data['text_column_left'] = $this->language->get('text_column_left');
      	$this->data['text_column_right'] = $this->language->get('text_column_right');
      
      	$this->data['entry_code'] = $this->language->get('entry_code');
      	$this->data['entry_layout'] = $this->language->get('entry_layout');
      	$this->data['entry_position'] = $this->language->get('entry_position');
      	$this->data['entry_status'] = $this->language->get('entry_status');
      	$this->data['entry_sort_order'] = $this->language->get('entry_sort_order');
      
      	$this->data['button_save'] = $this->language->get('button_save');
      	$this->data['button_cancel'] = $this->language->get('button_cancel');
      	$this->data['button_add_module'] = $this->language->get('button_add_module');
      	$this->data['button_remove'] = $this->language->get('button_remove');
          
      
          /*This Block returns the warning if any*/
      	if (isset($this->error['warning'])) {
      		$this->data['error_warning'] = $this->error['warning'];
      	} else {
      		$this->data['error_warning'] = '';
      	}
      	/*End Block*/
      
      	/*This Block returns the error code if any*/
      	if (isset($this->error['code'])) {
      		$this->data['error_code'] = $this->error['code'];
      	} else {
      		$this->data['error_code'] = '';
      	}
      	/*End Block*/
      
      
      	/* Making of Breadcrumbs to be displayed on site*/
      	$this->data['breadcrumbs'] = array();
      
      	$this->data['breadcrumbs'][] = array(
      		'text'      => $this->language->get('text_home'),
      		'href'      => $this->url->link('common/home', 'token=' . $this->session->data['token'], 'SSL'),
      		'separator' => false
      	);
      
      	$this->data['breadcrumbs'][] = array(
      		'text'      => $this->language->get('text_module'),
      		'href'      => $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'),
      		'separator' => ' :: '
      	);
      
      	$this->data['breadcrumbs'][] = array(
      		'text'      => $this->language->get('heading_title'),
      		'href'      => $this->url->link('module/helloworld', 'token=' . $this->session->data['token'], 'SSL'),
      		'separator' => ' :: '
      	);
      
      	/* End Breadcrumb Block*/
      
      	$this->data['action'] = $this->url->link('module/helloworld', 'token=' . $this->session->data['token'], 'SSL'); // URL to be directed when the save button is pressed
      
      	$this->data['cancel'] = $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'); // URL to be redirected when cancel button is pressed
      
      	
      	/* This block checks, if the hello world text field is set it parses it to view otherwise get the default hello world text field from the database and parse it*/
      
      	if (isset($this->request->post['helloworld_text_field'])) {
      		$this->data['helloworld_text_field'] = $this->request->post['helloworld_text_field'];
      	} else {
      		$this->data['helloworld_text_field'] = $this->config->get('helloworld_text_field');
      	}	
      	/* End Block*/
      
      	$this->data['modules'] = array();
      
      	/* This block parses the Module Settings such as Layout, Position,Status & Order Status to the view*/
      	if (isset($this->request->post['helloworld_module'])) {
      		$this->data['modules'] = $this->request->post['helloworld_module'];
      	} elseif ($this->config->get('helloworld_module')) { 
      		$this->data['modules'] = $this->config->get('helloworld_module');
      	}
      	/* End Block*/			
      
      	$this->load->model('design/layout'); // Loading the Design Layout Models
      
      	$this->data['layouts'] = $this->model_design_layout->getLayouts(); // Getting all the Layouts available on system
      
      	$this->template = 'module/helloworld.tpl'; // Loading the helloworld.tpl template
      	$this->children = array(
      		'common/header',
      		'common/footer'
      	);  // Adding children to our default template i.e., helloworld.tpl 
      
      	$this->response->setOutput($this->render()); // Rendering the Output
      }
      
      

      Step 2: Validation Method

      As we tried to validate data on save in default function. So here comes the validation method.

      /* Function that validates the data when Save Button is pressed */
          protected function validate() {
      
      		/* Block to check the user permission to manipulate the module*/
      		if (!$this->user->hasPermission('modify', 'module/helloworld')) {
      			$this->error['warning'] = $this->language->get('error_permission');
      		}
      		/* End Block*/
      
      		/* Block to check if the helloworld_text_field is properly set to save into database, otherwise the error is returned*/
      		if (!$this->request->post['helloworld_text_field']) {
      			$this->error['code'] = $this->language->get('error_code');
      		}
      		/* End Block*/
      
      		/*Block returns true if no error is found, else false if any error detected*/
      		if (!$this->error) {
      			return true;
      		} else {
      			return false;
      		}	
      		/* End Block*/
      	}
      	/* End Validation Function*/

      Now save the file and you're done with the Admin Controller of our Hello World Module!

      3. View File

      As previously done in controller, you have to create some HTML for the view. For that, we'll do the following:

      Step 1: Build Some Basic Controls

      A form is an element that will contain elements like an text input element, a textarea, and buttons for saving or canceling input.

      To create a form like this, review the code below:

      <?php echo $header; ?>
      <div id="content">
        <div class="breadcrumb">
          <?php foreach ($breadcrumbs as $breadcrumb) { ?>
          <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
          <?php } ?>
        </div>
        <?php if ($error_warning) { ?>
        <div class="warning"><?php echo $error_warning; ?></div>
        <?php } ?>
        <div class="box">
          <div class="heading">
            <h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
            <div class="buttons"><a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a><a href="<?php echo $cancel; ?>" class="button"><?php echo $button_cancel; ?></a></div>
          </div>
          <div class="content">
            <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
              <table class="form">
                <tr>
                  <td><span class="required">*</span> <?php echo $entry_code; ?></td>
                  <td><textarea name="helloworld_text_field" cols="40" rows="5"><?php echo $helloworld_text_field; ?></textarea>
                    <?php if ($error_code) { ?>
                    <span class="error"><?php echo $error_code; ?></span>
                    <?php } ?></td>
                </tr>
              </table>

      Step 2: Adding a Table List

      Under the form, a table list will appear where we can settle the module position and the page where the module to be displayed.

      <table id="module" class="list">
                <thead>
                  <tr>
                    <td class="left"><?php echo $entry_layout; ?></td>
                    <td class="left"><?php echo $entry_position; ?></td>
                    <td class="left"><?php echo $entry_status; ?></td>
                    <td class="right"><?php echo $entry_sort_order; ?></td>
                    <td></td>
                  </tr>
                </thead>
                <?php $module_row = 0; ?>
                <?php foreach ($modules as $module) { ?>
                <tbody id="module-row<?php echo $module_row; ?>">
                  <tr>
                    <td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][layout_id]">
                        <?php foreach ($layouts as $layout) { ?>
                        <?php if ($layout['layout_id'] == $module['layout_id']) { ?>
                        <option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option>
                        <?php } else { ?>
                        <option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option>
                        <?php } ?>
                        <?php } ?>
                      </select></td>
                    <td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][position]">
                        <?php if ($module['position'] == 'content_top') { ?>
                        <option value="content_top" selected="selected"><?php echo $text_content_top; ?></option>
                        <?php } else { ?>
                        <option value="content_top"><?php echo $text_content_top; ?></option>
                        <?php } ?>
                        <?php if ($module['position'] == 'content_bottom') { ?>
                        <option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option>
                        <?php } else { ?>
                        <option value="content_bottom"><?php echo $text_content_bottom; ?></option>
                        <?php } ?>
                        <?php if ($module['position'] == 'column_left') { ?>
                        <option value="column_left" selected="selected"><?php echo $text_column_left; ?></option>
                        <?php } else { ?>
                        <option value="column_left"><?php echo $text_column_left; ?></option>
                        <?php } ?>
                        <?php if ($module['position'] == 'column_right') { ?>
                        <option value="column_right" selected="selected"><?php echo $text_column_right; ?></option>
                        <?php } else { ?>
                        <option value="column_right"><?php echo $text_column_right; ?></option>
                        <?php } ?>
                      </select></td>
                    <td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][status]">
                        <?php if ($module['status']) { ?>
                        <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                        <option value="0"><?php echo $text_disabled; ?></option>
                        <?php } else { ?>
                        <option value="1"><?php echo $text_enabled; ?></option>
                        <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                        <?php } ?>
                      </select></td>
                    <td class="right"><input type="text" name="helloworld_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td>
                    <td class="left"><a onclick="$('#module-row<?php echo $module_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
                  </tr>
                </tbody>
                <?php $module_row++; ?>
                <?php } ?>
                <tfoot>
                  <tr>
                    <td colspan="4"></td>
                    <td class="left"><a onclick="addModule();" class="button"><?php echo $button_add_module; ?></a></td>
                  </tr>
                </tfoot>
              </table>
            </form>
          </div>
        </div>
      </div>

      Step 3: Adding Some JavaScript

      As you can see in the previous step, there is an "Add Module" button. Specifically, we have:  <a onclick="addModule();" class="button"><?php echo $button_add_module; ?></a> where user can add multiple rows to display the output of the module in different layouts on different positions. 

      For that, we need to write some JavaScript that will append a row to the table list. This will improve the user interface for those using our module:

      <script type="text/javascript"><!--
      var module_row = <?php echo $module_row; ?>;
      
      function addModule() {    
      	html  = '<tbody id="module-row' + module_row + '">';
      	html += '  <tr>';
      	html += '    <td class="left"><select name="helloworld_module[' + module_row + '][layout_id]">';
      	<?php foreach ($layouts as $layout) { ?>
      	html += '      <option value="<?php echo $layout['layout_id']; ?>"><?php echo addslashes($layout['name']); ?></option>';
      	<?php } ?>
      	html += '    </select></td>';
      	html += '    <td class="left"><select name="helloworld_module[' + module_row + '][position]">';
      	html += '      <option value="content_top"><?php echo $text_content_top; ?></option>';
      	html += '      <option value="content_bottom"><?php echo $text_content_bottom; ?></option>';
      	html += '      <option value="column_left"><?php echo $text_column_left; ?></option>';
      	html += '      <option value="column_right"><?php echo $text_column_right; ?></option>';
      	html += '    </select></td>';
      	html += '    <td class="left"><select name="helloworld_module[' + module_row + '][status]">';
          html += '      <option value="1" selected="selected"><?php echo $text_enabled; ?></option>';
          html += '      <option value="0"><?php echo $text_disabled; ?></option>';
          html += '    </select></td>';
      	html += '    <td class="right"><input type="text" name="helloworld_module[' + module_row + '][sort_order]" value="" size="3" /></td>';
      	html += '    <td class="left"><a onclick="$(\'#module-row' + module_row + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>';
      	html += '  </tr>';
      	html += '</tbody>';
      	
      	$('#module tfoot').before(html);
      	
      	module_row++;
      }
      //--></script>

      Step 4: Adding a Footer

      The last thing, we need to add a child footer in the end of the view:

      <?php echo $footer; ?>  

      At this point, we're done preparing our first Hello World module. At this point, it's time to check whether our module is working or not. 

      To do that, login to dashboard and go to the Extensions > Modules page where you'll see a list of modules of OpenCart System. There will also be "Hello World" listed with an "Uninstalled" State, click on "Install" and try editing the module and you'll see a screen something like this:

      You can input some random value and try saving it, Now try editing the module again and you'll see you input entered as default.

      Conclusion

      In this article, we tried to build a basic OpenCart Module using MVC. It's easy to manipulate OpenCart Modules if you're familiar with the core concepts of MVC. This article gives just a basic idea how to develop a simple module following some simple steps.

      In our next article, we're going to work with the frontend and will try to extend it for a store frontend. Please provide us with your feedback in the comments below!

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Get Started Building Your Blog with Parse.js

      Final product image
      What You'll Be Creating

      Have you ever gotten excited by the idea of a web project, but found it miserable to make it run and work on a server? With Parse.js, everyone who understand the basics of HTML, CSS, and JavaScript can create dynamic websites and working web apps with ease. 

      In this tutorial, I will take you through the entire process of creating a blogging system with Parse.js from scratch. You will utilize all the bootstrapping tools, and really practice the idea of rapid prototyping, refactoring, and MVC framework. By the end of this series, you should be able to create any CMS site by yourself.

      Though trying to be as detailed as possible, this tutorial does assume basic knowledge about HTML, CSS, JavaScript / jQuery, and GitHub. If you are not familiar with the aforementioned tools, there are lots of great tutorials here on Tuts+ that you can check out.

      Setup the Development Environment

      Let's get started by setting up our development environment. You will need a local testing server, a web server, a data server, and version control in place. As mentioned before, this tutorial requires no previous knowledge about the backend. I will take you through step by step. Feel free to skip this part if you already have those in place.

      Step 1: Install XAMPP

      After trying several different solutions, XAMPP is still the easiest way to setup a local test server I found. Therefore, I will use XAMPP as the local testing server in this tutorial.

      If you haven't already, start by downloading XAMPP here. Choose the one that suits your system and install it.

      XAMPP website

      I use Mac here so I will use that as the example from now on. If you use other operating system, the process should be pretty similar.

      After you install it, Launch XAMPP, and start "Apache Web Server".

      XAMPP - Manage Servers - Start Apache Web Server

      Now if you visit http://localhost/ in your browser, you should see this default XAMPP page. That means it's up and running!

      Localhost when XAMPP is running

      Step 2: Create a New GitHub Page

      Moving on, let's create a new git repo at GitHub. I call it blog just so it's short and clear to me. To make it work as a web sever, we need to set it as a GitHub Page.

      First, add a new branch, gh-pages.

      Add a new branch gh-pages

      Then go to settings, set gh-pages as the default branch.

      Set gh-pages as the default branch

      Great. Now let's get into the command lines, and clone that branch on GitHub into XAMPP's htdocs folder.

      $ cd /Applications/XAMPP/xamppfiles/htdocs
      $ git clone https://your-git-HTTPS-clone-URL-here

      Navigate into the Git repo folder you just cloned, create a simple index.html file, and just write Hello World in it.

      $ cd blog
      $ echo 'hello world' > index.html

      Check your localhost and make sure it's working.

      Localhost - hello world

      Great. Then let's push it to GitHub.

      $ git add index.html
      $ git commit -am "Add index.html"
      $ git push

      Go to http://yourusername.github.io/reponame, give it a few minutes, and you will see your index.html is now live smile

      GitHub Page - hello world

      Step 3: Get Your Account on Parse.com

      It's very easy to host static content on GitHub Page, but when it comes to the backend, things can get tricky with GitHub Page. Luckily, we now have Parse.js. We can use Parse.com as our data server and communicate with it JavaScript. In that way, we only need to host HTML, CSS, and JavaScript files on GitHub.

      Go ahead and register at Parse.com if you haven't done so. 

      Parsecom website

      Now, you have your data server in the cloud.

      Bootstrap Static HTML Template

      Now  let's prepare a static version of the blog system we are going to make. To show you how fast you can bootstrap through this, I will just utilize the example blog template from Bootstrap. Again, if you are already pretty familiar with Bootstrap or you have a static website designed already, feel free to do it your way. If you are new to Bootstrap, follow along.

      Step 1: Download Bootstrap

      First, download Bootstrap (currently we are using version 3.2.0 here), unzip it, and put its content in your XAMPP/xamppfiles/htdocs/blog folder. 

      Put Bootstrap in blog folder

      Step 2: Start With Bootstrap's Basic Template

      Then, edit index.html to have the basic template of Bootstrap. It provides a basic HTML structure with links to bootstrap.min.css, bootstrap.min.js, and jquery.min.js. Starting with a template like this will save you a lot of time.

      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Bootstrap 101 Template</title>
      
          <!-- Bootstrap -->
          <link href="css/bootstrap.min.css" rel="stylesheet">
      
          <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
          <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
          <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
        </head>
        <body>
          <h1>Hello, world!</h1>
      
          <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <!-- Include all compiled plugins (below), or include individual files as needed -->
          <script src="js/bootstrap.min.js"></script>
        </body>
      </html>

      Refresh and make sure it's working.

      Add Bootstrap basic template

      Step 3: Copy the Example Blog Template Over

      Now, move on an open the example blog from Bootstrap: http://getbootstrap.com/examples/blog/

      On the webpage, right click and choose "View Source". We want to copy all the content in <body> over to our index.html and replace the <h1>Hello, world!</h1> in the basic template.

      Don't copy the <script> tags since we already have all the Javascript files we need.

      You should now have this page:

      Add example blog template

      Step 4: Copy the Example Blog Style and Add It in index.html

      Notice the styles are not right yet. That's because we need blog.css, the blog specific stylesheet built on top of bootstrap basic styles.

      Go ahead and find it from the source code: http://getbootstrap.com/examples/blog/blog.css

      Copy that file, and put in your blog/css folder.

      Link it in index.html below bootstrap.min.css:

      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/blog.css" rel="stylesheet">

      And now the styles should be right, and we have our static template ready.

      Static template

      Setup and Connect to the Parse Database

      To make our static blog dynamic, we need to first setup it's own database on Parse.com.

      Step 1: Create a New App

      Go to Parse.com dashboard, and click "Create New App". 

      Let's call it Blog for now.

      Create a blog app on Parsecom

      Once it's created, go to "Quickstart Guide - Data - Web - Existing project"

      Parse Quickstart Guide

      Step 2: Add Parse.js in index.html

      Following the Quickstart Guide, add Parse.js to your index.html first. But instead of putting it in <head>, you can put it just below jQuery:

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <!-- Parse.js -->
      <script src="//www.parsecdn.com/js/parse-1.2.19.min.js"></script>

      Step 3: Test Parse SDK

      Moving on, create a blog.js under your blog/js folder with your Application ID and JavaScript key, and some test code. They all can be found in your Quickstart Guide:

      $(function() {
      
          Parse.$ = jQuery;
      
      	// Replace this line with the one on your Quickstart Guide Page
      	Parse.initialize("W8vTW6MTre3g0ScTeyPzqc6Uzj2KZoQ6GBv0j6ZC", "VVayP3EdZ6QH0QMttzpWgeJ2if4f2m8QjA10SaFQ");
      
      	var TestObject = Parse.Object.extend("TestObject");
      	var testObject = new TestObject();
      	testObject.save({foo: "bar"}).then(function(object) {
      	  alert("yay! it worked");
      	});
      
      });

      Save it, and link this JavaScript file in your index.html, below bootstrap.min.js.

      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
      <script src="js/blog.js"></script>

      Now, refresh index.html on your localhost again, and you should be able to see this alert message:

      Success alert message

      That means now you are connected to your Blog database in the cloud smile

      If you check your "Data Browser" on Parse.com now, you will see the TestObject you just created.

      Parse Data Browser

      Conclusion

      Today, we have set up all the servers we need: XAMPP as our local testing server, GitHub Pages as our web server, and Parse.com as our data server. We also have a basic blog template in place, and it's now connected to the database.

      In the next session, I will teach you how to add blog posts from Parse's data browser, retrieve it with JavaScript, and render it on the front end.

      Check the source file if you got stuck. And please leave a comment if you meet any difficulties following along.

       

      0 Comments

      Leave a comment › Posted in: Daily

    1. Create a Custom Theme With OpenCart: Part Two

      In the first article of this series, we explored the basic theme structure of OpenCart. Now, let's move one step further and learn how to can create a custom theme.  If you haven't gone through the first part of this tutorial series yet, read through it so that you understand where we're headed in this article as we continue to build our own theme.

      OpenCart comes with the decent default theme which will serve as a base theme for our new custom theme. Generally speaking, there are two scenarios in which you would want to create your custom theme:

      1. You want to replace the default front-end interface completely with a new interface of your choice,
      2. You would like to change couple of things like color combination, layout structure and branding related changes.

      In either case, I recommend creating a new custom theme instead of modifying the default theme files directly as it'll make the life easier during the version upgrade of the OpenCart.

      Before proceeding, you should have a working installation of OpenCart. If you haven't done that, go ahead and set up the same. 

      Once done, let's get started!

      Setting Up the Skeleton

      Let's create a new directory, named mycustomtheme underneath catalog/view/theme. This will serve as a container for the other files like images, stylesheets, and templates. Furthermore, you need to create three more directories within the mycustomtheme  directory: image, stylesheet, and templates.

      Basic Skeleton Structure

      You have set up the basic skeleton structure needed for your custom theme once you've done with this. In fact, you can just go ahead and enable your custom theme from the back-end and it'll work just fine. 

      Activate the New Theme

      Let's go ahead and activate your custom theme from the back-end. Once you're logged in the back-end, go to System > Settings. It'll list out all the stores available in your OpenCart installation.

      Default Stores Listing

      In most cases, it'll display a single store entry, but if you have multiple stores set up, you'll see more than a single row. OpenCart allows you to set up multiple stores using single installation. 

      This is really an important feature if you've multiple stores and you don't want to set up OpenCart installation for each and every store. You can manage all the stores using single admin interface! Multi-store set up is something out of the scope of this tutorial but it's an important feature worth to explore.

      Back to our business, click on the Edit link in the Action column which should open the store configuration interface.

      Store Edit Configuration Interface

      Click on the Store tab. This will open the configuration form that allows us to select a front-end theme. You should see that our custom theme, mycustomtheme, is also listed along with the default theme in the Template dropdown box. Select that and click on Save button to apply our changes.

      Store Edit Configuration Interface - Store Tab

      Now if you check the front-end, everything is working fine. We haven't created a single file in our custom theme yet - how does this work? That's where template overriding comes into play.

      Understand the Magic of Template Overriding

      Even if we have set up our new theme, mycustomtheme, as an active theme of the store, the front-end is still looking exactly like as it was before we enabled our new theme from the back-end. This is due to the fact that the template overriding system is in place.

      Let's take a look at a quick example so we can more easily understand this: To render the home page, OpenCart uses template located at catalog/view/theme/*/template/common/home.tpl. The asterisk here in the path maps to the theme name. Now OpenCart will execute following procedure in order to find the home.tpl template:

      • As we have set up mycustomtheme as an active theme for the store, first it will try to find the file at catalog/view/theme/mycustomtheme/template/common/home.tpl. If it's found, OpenCart is happy and it will take that file and stop the process here.
      • If OpenCart can't find home.tpl in the active theme, it will fallback to the default theme and try to pull catalog/view/theme/default/template/common/home.tpl. Obviously, it's guaranteed that home.tpl will be there unless you've tyed with the default theme template files!

      OpenCart will always fallback to default theme whenever it can't find the required template file in the active custom theme. So virtually we can say that it's the default theme serving files at the moment even if mycustomtheme is in place. 

      This is really handy in the case where you only need to tweak few selected template files. In that case, you would only copy those files to the custom theme directory to fulfill the job.

      Extending the Blank Custom Theme

      It's an empty basket as far as our custom theme, mycustomtheme, is concerned. Lets enrich it with some useful content.

      Go ahead and create a new directory named common under the template directory of our custom theme. Now copy home.tpl and header.tpl template files from the template/common directory of the default theme. You should paste those files in newly created common directory of our theme.

      Similarly, copy all the stylesheet files from the stylesheet directory of the default theme and paste it under the stylesheet directory of our theme. Repeat the same process for all the images under image directory although we'll ignore this directory for now. 

      At this point, your new theme directory tree should look something this like:

      Custom Theme Structure

      There are couple of important things to note here before we proceed further. You should only copy the template files to the custom theme that requires customization. The reason is that the missing file will be always picked up from the default theme so there's no need to keep the duplicate of the same file unless you need to modify it. 

      Another thing to notice is that you should maintain the structure of the files similar to the default theme specifically in the case of template files. As you've seen, we created a common directory when we copied home.tpl and header.tpl files to mimic the structure with the default theme.

      From now on, I'll mention all the file paths relative to our custom theme directory. Going further, open the template/common/header.tpl file in your favorite text editor. The code in this file is responsible for displaying header part throughout the site. If you look at the code closely, there are few stylesheet references hard coded to the “default” theme. 

      Let's change it so it's fetched from the custom theme.

      Find the following code,

      <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

      And replace the same with,

      <link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/stylesheet/stylesheet.css" />

      Do the same for the other stylesheet references elsewhere required. 

      In this way, we make sure all the stylesheet files are loaded from our custom theme. Now open the template/common/home.tpl file and replace all the contents of that file with following.


      <?php echo $header; ?>
      
      <?php echo $column_left; ?>
      <?php echo $column_right; ?>
      
      <div style="background: #00F;color: #FFF;font-weight: bold;padding-left: 10px;">If this line appears, Our custom theme is doing it's part!</div><br/>
          <div id="content">
              <?php echo $content_top; ?>
              <h1 style="display: none;"><?php echo $heading_title; ?></h1>
              <?php echo $content_bottom; ?>
          </div>
      </div>
      
      <?php echo $footer; ?>

      Check your home page and you should see the change. 

      This is just one example of how to override and customize the templates using your custom theme. In the real world, of course, you may need to alter a lot of templates so that they correspond with the custom design you would like to integrate. Later in this series, we'll see how to find a template related to a specific page in the front-end.

      Summary

      Ultimately, this article aimed to help you understand the nuances of creating a custom theme. You can go ahead and explore the code of other template files for a better understanding of the workings of OpenCart theme.

      In the next part, we'll take a look at some of the common templates in detail. Of course, your feedback is most welcome so please leave questions, comments, and so on in the comments.

       

      0 Comments

      Leave a comment › Posted in: Daily

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

    Syndicate

    governing-bruise