Google analytics code

Friday, June 27, 2014

Zend Framework 2.x Learn ZF2 by Example: Protecting our Pages - Authentication type

I'm starting to implement authentication on my web app and I ran into a problem with the example in the book.

The example on page 146 uses MD5 as a encryption scheme.

$adapter = new DbAdapter($db,
                         'users',
                         'login',
                         'password',
                         'MD5(password)');

The adapter builds a simple SQL query that will check the table, match the user name and password then let you know if it's valid. The problem lies in the 5th parameter. When I tried to match an account I know works it kept saying the account wasn't valid. After digging into the documentation I found the 5th parameter wasn't configured right. It should be 'MD5(?)'.

$adapter = new DbAdapter($db,
                         'users',
                         'login',
                         'password',
                         'MD5(?)');

After the change the auth adapter works perfectly. Hope this helps save you some time.

Thursday, June 5, 2014

Sencha Touch Themes: Using built-in themes for iOS and Android

One of the things I like about Sencha Touch is the built in device themes. I like being able to make a web app look native.

I found many resources that talked about the themes but none gave very good instructions on how to make them work. I finally found a video that walked you through some of the process involved in making themes work. It left out some important stuff that I found through lots of trial and even more error.

I'll show you how to apply a theme to the default sencha project. You can apply these steps to your own project.

  1. Create an example app.
    • sencha -sdk [path to sdk] generate app [AppName] [path]
  2. You'll need to create scss files for the different platforms you want to support.
    • cupertino.scss (iOS 7 styling)
    • cupertino-classic.scss (iOS 6 styling) 
    • mountainview.scss (Android)
  3. Each of these files will include two imports lines that define our theme styles.

    @import 'sencha-touch/[platform name]';
    @import 'sencha-touch/[platform name]/all';

    [platform name] is the name of the style you're including. cupertino.scss will use "cupertino" and mountainview.scss will use "mountainview". All the platform names are available here under tip 2.
  4. Next you'll need to run "compass compile" or "compass watch" in the resources/sass folder. 
  5. Now we have to update app.json to include the new css files that were generated by compass. Look for the css option and add each platform as an object to the css array.
    {
        "path": "resources/css/cupertino.css",
        "platform": ["ios"],
        "update": "delta"
    }

    Make sure to update the platform value with the appropriate value. The options are available here under available platforms.

    IMPORTANT NOTE: Make sure to add the "platform": ['desktop'] to the app.css entry. If you don't app.css will be included in every theme and it will break the display. 

  6. Lastly you'll need to run sencha app build to bring everything together. You can test the different templates by appending ?platform=[platform name] to your uri.
    eg: senchaapp.io/?platform=ios
I've added the example project to github so you can pull that down as an example.