Creating A To-Do List:

Our previous article was on "Travis CI: Continuous Integration for PHP Project". A very happy new year. It is this year's first tutorial for appsntech.com readers. In this article I will discuss How To Create A Simple To Do List Using Craft Console (Cygnite Component). In this tutorial we will be using Cygnite PHP Framework v2.x.

I am not going to explain how to install cygnite framework & configure database connections, as it is already explained in its beautiful documentation. Cygnite directory structure explained here.

What is Craft Console?

Craft introduced in Cygnite v2.0. Craft is console based powerful code generator provided by Cygnite Framework. It is built on top of Symfony console component.

It helps you to create and generate fully customized Controllers, Models, Forms, Migrations, Commands, CRUD for database and more. To access craft in Cygnite, just go to:

cd /var/www/cygnite/console/bin/

Execute below command to see list of available commands for your application.

php craft list

To demonstrate, I will use Craft for building our simple To-Do list. Let's get started.

Creating a Table For To-Do List:

Configuration of database connection explained here. Once you have configured database connection. Let us create a new table for our "To-Do app".

Meet Migration & Schema Builder:

Before doing anything else we need to build a table schema. Cygnite has a Schema Builder to help you building table schema and Migrations class to build create database version control.

All though you can create a table schema executing query. But recommended way to build table schema is using Migrations . Execute below command to generate your migration file.

php craft migrate:init to_do

Go to /src/Apps/Resources/Database/Migrations/ directory and find out the file with name xxxx_to_do.php. Edit the file add below lines of code inside "up" method .

//Your schema to migrate
Schema::make('to_do', function ($schema)
{
    $schema->create([
            ['column'=> 'id', 'type' => 'int', 'length' => 11,
             'increment' => true, 'key' => 'primary'],
            ['column'=> 'title', 'type' => 'string', 'length' =>100],
            ['column'=> 'description', 'type' => 'string', 
             'length'  =>16],
            
            /*..Add columns to your table schema .*/
            ['column'=> 'created_at', 'type' => 'datetime', 
             'length' => 'null'],
            ['column'=> 'due_date', 'type' => 'datetime', 
             'length' => 'null'],

    ], 'InnoDB', 'latin1');
});

Execute below command to create table schema.

php craft migrate

You will see the below message in your console:

Now your "to_do" table is ready to store some tasks.

Generating CRUD Using Craft:

You don't have to do much stuff as Craft commands are ready to generate most of the stuffs for you. Open the console window and from the root directory of your project, go to /var/www/cygnite/console/bin/ directory and issue below command.

php craft generate:crud todo to_do

Your to do manager is ready, let us add a single route to the controller to test the newly created app by executing CRUD operations.

Open /var/www/cygnite/src/Apps/Routing/RouteCollection.php, add a route as below in the executeStaticRoutes() method.

$this->routesController->controller('Todo');

Go to the url: http://localhost/cygnite/todo/ You will see below screen.

This page will display empty records in the grid as we didn't add any to do tasks.

Creating And Updating the To-Do List

Let us add a new tasks by clicking Add Todo button. You will land to below form. Now let us add a new to-do task using this form.

Once you added a new to do task you will be redirected to task list page.

Now let's say added to do task needs to be updated. Click Edit button in the grid, it will take you to edit form.

Click on save button once you updated the Todo, it will update the todo list and redirect you to list page. You will see screen as below.

Liked this? Read these!

1. Get Started With Test Driven Development: Unit Testing With PHPUnit?
2. Backbone JS vs Angular JS- Uncovering key differences
3. 5 Best Things You Must Know About PHP7
4. Facebook wallscript - Facebook style wall posting using Cygnite PHP Framework, Jquery, Ajax

Wrapping Up:

I have explained you how to create a simple To-Do list using Cygnite Framework. That’s all for this tutorial. Isn't easy? This is just a basic tutorial. You can do much more. So now it’s your turn, give it a try. Use Cygnite framework, save time. You will be up and running fast.

Hope you like this tutorial and many more useful posts to publish for this year. If you have any questions, please let us know by posting your comments below. Please don't forget to share or like this article with your friends. Thanks for reading.

Introduction:

My last article was “How to build Facebook style profile photo upload using PHP + JQuery + Ajax Part1”. . This is continuation of my last article, last tutorial I show you how to upload profile picture using jquery, ajax, in this tutorial I will show you how to create thumbnail to fit the profile picture and saving into database.

Profile Picture Upload and Thumbnail Creation:

To achieve this I am using Cygnite PHP framework, if you had built application already, would like to use tiny component rather than using entire framework, you can use standalone Cygnite File component for image uploading and creating thumbnail image.

In previous tutorial we already created controller, view and js files. Open apps/controllers/ProfileController.php, import namespace to include thumbnail component, and add below code after uploading the file upload success to generate thumbnail image. I am adding piece of code to upload, creating thumbnail image and saving into database below, you can update below code into our ProfileController.php uploadAction() as discussed in the part1 tutorial.

use Apps\Models\Profile;
use Cygnite\Common\File\Thumbnail\Image; // available in dev-master 
use Apps\Components\Thumbnail\Image; //available in v1.2.4


$status = Upload::process(function($upload)
{
    $upload->file = 'document'; // Your file input element name
    $upload->ext = array("JPG", "PNG"); // Add validation for image upload
    //$upload->size = '6144';// limit the size

    if  (isset($_FILES['document']))  {

        $fileArray = array();
        $fileArray = pathinfo($_FILES['document']['name']);

        if ($upload->save(array("destination"=> "upload",  "fileName"=>$fileArray['filename'])) ) {

            // Create thumbnail object
            $thumb = new Image();
            $thumb->setRootDir(CYGNITE_BASE);
            $thumb->directory = 'upload/'.$_FILES['document']['name'];
            $thumb->fixedWidth = 100;
            $thumb->fixedHeight = 100;
            $thumb->thumbPath = 'upload/thumbnail/';
            $thumb->thumbName = $fileArray['filename'];

            if ( $thumb->resize() ) {

                // Save profile information into database
                 $profile = new Profile();
                 $profile->name = 'Sanjoy Dey';
                 $profile->original_image_path = CYGNITE_BASE.'upload/';
                 $profile->image = $_FILES['document']['name'];
                 $profile->thumbnail_image_path = CYGNITE_BASE.'upload/thumbnail/';
                 $profile->save();
            }

            $response= array('status' => true, 'msg' => 'Profile Picture Uploaded Successfully!' );
        } else {
            $response = array('status' => false, 'msg' => implode(', \n', $upload->getError()) );
        }
        header('Content-type: application/json');
        return  json_encode($response);
    }
});

echo $status ;

We are storing the thumbnail image into /cygnite/upload/thumbnail/ directory and saving into table 'profile'.

We will save the thumbnail image path and original image path into database as above. let me assume you have already set database connection into apps/configs/database.php

If you are building session based application. You can simply check user session id to identify user profile image and display it.

Using Standalone Cygnite File Thumbnail Component for creating thumbnail image:

If you are using standalone file thumbnail component to create thumbnail image (Discussed in previous post) than install file component from composer repository and below code to resize.

 require 'vendor/autoload.php';

 use Cygnite\Common\File\Thumbnail\Image;


 $thumb = new Image();
 $thumb->setRootDir(getcwd());
 $thumb->directory = getcwd().'/upload/profile-picture.jpg';// your dynamic image path
 $thumb->fixedWidth = 100;
 $thumb->fixedHeight = 100;
 $thumb->thumbPath = 'upload/thumbnail/';
 $thumb->thumbName = 'profile_thumbnail_image';
        
 if ( $thumb->resize() ) {
    // success
 }

Conclusion:

Hope you found this article helpful. If you are interested to write tutorial for us please post me. Please don’t forget to like, share with friends, or leave your comments below.

Keep visiting for upcoming article. Have a nice day.

Introduction:

Hello guys, in my last article we have explained to "Generate CRUD application within 2 min". Today I am going to discuss "How to make a Facebook style Autocomplete utilizing Angular JS, Cygnite PHP, Mysql and Bootstrap template”. Angular JS is awesome front end framework by Google used to build interactive web UI. Angular allow you to build clean structured, maintainable front end applications. This tutorial will help you to learn how to make autocomplete textbox using Angular JS, PHP, MySql, Bootstrap theme etc.

To achieve this we will also use Bootstrap UI with Angular JS. To save our time from writing queries and build clean MVC architecture we are also using Cygnite PHP Framework. You may use core php and mysql functions.

After downloading and installing composer we are ready to set-up Cygnite into our local machine and configure database etc. to get started with our next project.

• You May Also Like: Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

Step 1:

First download the Cygnite either using composer or manually from GITHUB repository. You may also follow video tutorial to setup Cygnite into local system.

You may be interested to read Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

Step 2:

Download Angular JS, ui-bootstrap.js and paste into /assets/js/angular/ path. Create a view page called autocomplete.view.php into the apps/views/angular/ directory. Paste below code into your view page.

<!DOCTYPE html>
<?php
use Cygnite\AssetManager\Asset;
use Cygnite\Common\UrlManager\Url;
use Cygnite\AssetManager\AssetCollection;

$asset =  AssetCollection::make(function($asset)
{
  $asset->add('style', array('path' => 'assets/css/angular/bootstrap.min.css', 'media' => '', 'title' => ''))                
    /* ->add('script', array('path' => 'assets/js/cygnite/jquery.js'))
     ->add('script', array('path' => 'assets/js/angular/angular.min.js'))*/
     ->add('script', array('path' => 'assets/js/angular/ui-bootstrap.js'))
     ->add('script', array('path' => 'assets/js/angular/app.js'));
			
  return $asset;
});
?>
<html ng-app="MyTutorialApp">
<head>
<title>Facebook Style Autocomplete Using AngularJS + PHP + MySQL</title>
	
<?php $asset->dump('style');// Style block ?>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css"> </link>
<link rel="shortcut icon" href="<?php echo Url::getBase(); ?>assets/img/cygnite/fevicon.png" > </link>

 </head>
 <body>
	
 <input type="hidden" id="baseUrl" value="<?php echo Url::getBase(); ?>"/>
    
 <div class="navbar navbar-default" id="navbar">
 <div class="container" id="navbar-container">
 <div class="navbar-header">
 <a href="#" class="navbar-brand">
 <small>
 <i class="glyphicon glyphicon glyphicon-log-out"></i>
   Angular JS Demo
 </small>
 </a><!-- Brand -->
		
</div><!-- /.navbar-header -->

	<div class="navbar-header pull-right" role="navigation">
        <a href="http://www.appsntech.com/2014/11/facebook-style-autocomplete-using-angular-js-php.html" class="btn btn-sm btn-default nav-button-margin"> <i class="glyphicon glyphicon-book"></i>&nbsp;Tutorial Link</a>
        <a href="https://app.box.com/s/yqyq0toxuo5n7ton0vol" class="btn btn-sm btn-success nav-button-margin"> <i class="glyphicon glyphicon-download"></i>&nbsp;Download Project</a>
	</div>
	</div>
	</div>
<div class="row">
	<div class="container">
	 <div class="col-sm-9"> 
	  <div>
	 <!-- Bind the country into the template -->
	<script type="text/ng-template" id="autocomplete-template">
        <a>
        <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
	<i>({{match.model.country_name}})</i>
        </a>
	</script>

	<blockquote><h1><a href="http://www.appsntech.com/2014/11/facebook-style-autocomplete-using-angular-js-php.html">Facebook Style Autocomplete Using AngularJS + PHP + MySQL</a></h1></blockquote>

	<form class="form-search" ng-controller="angularAutocompleteController">
	Selected Country: {{selectedCountries.country_name}}
	<br>
	<!-- Typehead to input field-->
	<input type="text" ng-model="selectedCountries" auto-complete ui-items="countries"   
	placeholder="Search Countries" typeahead="c as c.country_name for c in countries | filter:$viewValue | limitTo:10" 
	typeahead-min-length='1' 
	typeahead-on-select='onSelectPart($item, $model, $label)' 
	typeahead-template-url="autocomplete-template" 
	class="form-control" style="width:350px;">
							
       <i class="icon-search nav-search-icon"></i>
      </form>
     </div>				
    </div>    	
   </div>
</div>
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

 <?php
 //Script block. Scripts will render here
 $asset->dump('script');
 ?>
<style type="text/css">
.navbar{border-radius: 0;background: #438EB9;color: #fff;}
.navbar .navbar-brand {color: #FFF;font-size: 24px;text-shadow: none;}	
</style>	
    </body>
</html>

We are binding the typehead into the input field.

Step 3:

Create a model class called Country.php into apps/models/Country.php and paste below code.

namespace Apps\Models;

use Cygnite\Database\Schema;
use Cygnite\Foundation\Application;
use Cygnite\Common\UrlManager\Url;
use Cygnite\Database\ActiveRecord;

class Country extends ActiveRecord
{

    //your database connection name
    protected $database = 'tutorials';

    // your table name here (Optional)
    protected $tableName = 'countries';

    protected $primaryKey = 'id';

    public function __construct()
    {
        parent::__construct();
    }
}// End of the ShoppingProducts Model

Step 4:

Configure database connection into your apps/configs/database.php. Than Create a controller called AngularController.php inside your apps/controllers/ directory and paste below code.

namespace Apps\Controllers;

use Cygnite\Foundation\Application;
use Cygnite\Mvc\Controller\AbstractBaseController;
use Apps\Models\Country;

class AngularController extends AbstractBaseController
{
    protected $templateEngine = false;
     /*
     * Your constructor.
     * @access public
     *
     */
    public function __construct()
    {
        parent::__construct();
    }
    /**
     * Default method for your controller. Render welcome page to user.
     * @access public
     *
     */
   public function indexAction()
   {    
        $this->render('autocomplete');//Render view page
   }
   
   public function countryListAction()
   {
      $countryList = array();
      $country = new Country();
      $countryList = $country->select("*")->findAll('ASSOC');
  
       if (count($countryList) > 0 ) {
    # JSON-encode the response
    echo  json_encode($countryList);
       }
   }

}//End of your controller

Step 5:

Create a table called “countries” and import countries.sql from here.

Step 6:

Now create a js inside your /assets/js/angular/app.js and paste below code. In this file we will inject bootstrap ui module and use ajax to fetch countries from the database and we will bind the countries into the input field.

 

var app = angular.module('MyTutorialApp',  ['ui.bootstrap']);

app.controller('angularAutocompleteController', function($scope, $http) {

var baseUrl = $("#baseUrl").val();
 
 getCountryList(); // Load all countries with capitals
  
  function getCountryList(){  
  
  $http.get(baseUrl+"angular/country-list").success(function(data){
      
        $scope.countries = data; // set the data into the countries
  
    });
    
  };
  
});

Step 7:

Go to browser and enter the url http://localhost/cygnite/angular/ type the country name and you will see countries are populating into the textbox.

Conclusion:

We sincerely hope you found this article helpful. I will write more about angular coming days. If you would like to see specific you can also request tutorial. Please don't forget to like, share with friends, or leave your comments below.

Keep visiting for upcoming articles. Have a nice day.

Introduction:

The last article was about “Reading and importing CSV file into database using PHP” . Today I have interesting thing for you guys. Are you looking for social script as facebook comment posting with MVC architecture? Which contains share thoughts on wall, comment posting, delete using jquery, load more, ajax, you want to share Facebook like video. You may get many script from different sites but mostly paid and not modular MVC architecture and you will end up restructuring into MVC. So I thought to share with you the application where you will find all these features and many more on coming days. Also you can find the script hosted on GITHUB.

Step 1:

Download and extract (wallscript-master.zip) the code from GITHUB. Rename wallscript-master to wallscript.

Step 2:

Configure your database name into /wallscript/apps/configs/database.php. I have configured database: “tutorials” localhost with empty password, you can change if you have different.

Step 3:

Find the demo sql script inside /wallscript/apps/database/wallscript.sql. Run the sql file into your database using phpmyadmin or Mysql Workbench.

Step 4:

That's all. You are done. Now go to your browser and type url : http://localhost/wallscript/ You can see the screen as below.

Extract video from url:

 

Conclusion:

Hope this small application is useful. You may alter the script to build much more features like Facebook or any other social network. 

If you are finding this tutorial helpful, please don't forget to share with friends, also leave your comments below. Have a nice day. Keep visiting for interesting articles.