Mittwoch, 20. August 2014

Laravel Notes

Details here:


1- Install Composer for Windows

2 - Install Laravel in your project folder

composer create-project laravel/laravel --prefer-dist

laravel is the target folder name

3 - Work with the laravel files

4 - Add in .htaccess after  RewriteEngine On, following line:
     RewriteBase /laravel/public

5 - Contet of routes.php will be appear on the public page

6 - Access the public page like this:
http://127.0.0.1/laravel/public

7 - If you have a line like this in routes.php:
Route::resource('tasks', 'TasksController');
Access to the folder tasks like this:
http://127.0.0.1/laravel/public/tasks

8 - For Database settings see the database.php

9 - Some commands for creating tables in MySQL

php artisan migrate:make create_tasks_table --table tasks --create  (tasks is the table name)

10 - then change the content of file like this: 2014-08-20-...-table.php like this:

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateTasksTable extends Migration {

/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('tasks', function($table)
{
$table->increments('id');
$table->string('title');
$table->boolean('completed')->default(0);
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('tasks', function(Blueprint $table)
{
//
});
}

}

11 - Run folloing command to create table elements in database:
php artisan migrate

12 - For seeding the table, put in the DatabaseSeeder.php like this:

<?php

class DatabaseSeeder extends Seeder {

/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
Eloquent::unguard();

$this->call('UserTableSeeder');
}

}
class UserTableSeeder extends Seeder {

    public function run()
    {
        DB::table('tasks')->delete();
        DB::table('tasks')->insert(array(
                'id' => 1,
                'title' => 'Go to the store',
        ));
        DB::table('tasks')->insert(array(
                'id' => 2,
                'title' => 'Finish Backbone cource',
        ));
        DB::table('tasks')->insert(array(
                'id' => 3,
                'title' => 'Get some sleep.',
          ));
    }
}

13 - After that run the following command:
php artisan db:seed

14 - For fetching data from database we need kind of Controller:
php artisan controller:make TsksController and function index like this:

public function index()
{
return Task::all();
}

15 - For autoloading of changes:
composer dump-autoload



















Sonntag, 1. Juni 2014

CSS with Bootstrap

Bootstrap makes it really easy and nice working CSS. In this page you can find every classes of Bootstrap and example for them.

Samstag, 31. Mai 2014

A good source for learning ionic framework

In this page you can find tons of ionic framework tutorials.
Remember, you need to know AngularJs if you want learn ionic. Here is the free AngularJs tutorial from code school.

Montag, 26. Mai 2014

Angular JS - Basics

This post is a summary of CodeSchool Angular.JS Course

Directives:
  • A Directive is a marker on a HTML tag that tells Angular to run or reference some JavaScript code.
index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="StoreController">
  . . .
  </body>
</html>

app.js:
function StoreController() {
  alert('Welcome, Gregg!');
}


controller is a Directive
StoreController is the name of function to call


Modules:
  • Where we write pieces of our Angular application.
  • Mahes our code more maintainable, testable and readable.
  • Where we define dependencies for our application.
How to create a Module in Angular.JS:

var app = angular.module('store', [ ]);

store is the Application (Module) name
[ ] is for dependencies - Other libraries we might need.

<html ng-app="store">


Runs the Module "store" when the document loads.
app is another Directive for auto-loading of an application


Expressions:
  • Allow you to insert dynamic values into your HTML
Exampls:
<p>
    I am {{4 + 6}} = <p>I am 10</p>
</p>

<p>
    {{"hello" + " you"}} = <p>hello you</p>
</p>

Controllers:
  • Controllers are where we define our app's behavior by defining functions and values.
app.js:

(function() {
    var app = angular.module('store', [ ]);
    app.controller('StoreController', function() {
        this.product = gem;
    });

  var gem = {
    name: 'Dodecahedron',
    price: 2.95,
    description: '. . .'
  }
})();


StoreController is the name of Controller (capital-case)
we always use the word controller.

<!doctype html>
<html ng-app="store">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example94-production</title>
  <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
<script src="angular.min.js"></script>
<script src="app02.js"></script>
</body>
</html>

  • We have access to the store controller just inside the div element!

Some useful Directives:
ng-show

<button ng-show="store.product.canPurchase"> Add to Cart </button>


Only shows the value, if canPurchase is true

 var gem = {
    name: 'Dodecahedron',
    price: 2.95,
    description: '. . .',
    canPurchase: false
  }


ng-hide:
not ng-show

ng-repeat:

<div ng-repeat="product in store.products">
<h1> {{product.name}} </h1>
<h2> ${{product.price}} </h2>
<p> {{product.description}} </p>
<button ng-show="product.canPurchase"> Add to Cart </button>
</div>


var gem = [
{
name: 'Dodecahedron',
price: 2.95,
description: 'description kommt hier',
canPurchase: true,
},
{
name: 'Pentagonal Gem',
price: 5.95,
description: 'description kommt hier',
canPurchase: true,
}
];



Filters:
Filters the output:

date:
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}} = 12/27/2013 @ 12:50AM

uppercase:
{{'octagon gem' |  uppercase}} = OCTAGON GEM

limitTo:
{{'My Description' | limitTo:8}} = My Descr
limit an array for first 3 products:
<li ng-reapeat="product in store.products | limitTo:3">

orderBy:
<li ng-reapeat="product in store.products | orderBy: '-price'"|> sorts by descending price. Without '-': ascending order
Allow us to sort our products

ng-source:
A Directive for src in img tags (todo)

ng-click:
When ng-click changes the value of tab, the {{tab}} expression automatically gets updated!
Expressions define a 2-way Data Binding.
<ul class="nav nav-pills">
    <li><a href ng-click="tab = 1">Description</a></li>
    <li><a href ng-click="tab = 2">Description</a></li>
    <li><a href ng-click="tab = 3">Description</a></li>
</ul>
{{tab}}

ng-init:
allows us to evaluate an expression in the current scope. (default value)

ng-class:
<li ng-class="{ active:tab === 3 }">     if tab is 3 the do this ...


Donnerstag, 22. Mai 2014

Access to Google Spread Sheet Node.js

Just have read a nice article about writing and reading Google Spread through node.js, using 'edit-google-spreadsheet'

Mittwoch, 21. Mai 2014

Nice remote pair programming tool:

https://c9.io

This tool gives the possibility to remote pair programming. For now, those, who have a GitHub account, can login with that but for checking in and out in terminal, use following git commands:

- Checking out from GitHub is simple: Just in the first page of c9.io the whole projects in GitHub are shown. Just select and ready.

- If you create a new file, for adding this file in GitHub:
  for example you have created css/style.css for adding this in GitHub:
  • git add css/style2.css
- For commiting:
  • git commit -am 'some descrition'
  • git push origin master
- For seeing status of project:
  • git status
  • git log

How to access to GPS sensor of a Mobile Device in Cordova-Generated Application?

For this purpose we need a plugin from cordova. This plugin is called Cordova Geolocation Plugin and is described here.
                                                                 


Just with executing the following command in cordova CLI, this plugin will be added and it can be used in mobile applications generated with cordova:

cordova plugin add org.apache.cordova.geolocation

Update: Plugins in cordova must be added for every project