Facebook style profile photo upload using PHP + JQuery +Ajax Part1


Introduction:

Hello guys, My last article was “How to build Facebook style Autocomplete using Angular JS, Cygnite PHP, Mysql and Bootstrap template” . Recently I received a request from one of my reader that “How to build Facebook style profile photo upload, creating thumbnail and save into server ?”. I will write the same here today. You might have notice in many social network site, in profile page when you mouseover in your photo "Update Picture" or "Upload Photo" displays. It's looks cool, as it is not displaying such old type of file upload html element. In this post I will not be able to cover whole tutorial. So I decided to divide the post into part. This tutorial will show you how to create "Facebook style profile photo upload using PHP, JQuery and Ajax."

To build this app, I am using Cygnite PHP Framework, JQuery, Ajax, Bootstrap template etc. Using framework make my job easier (Since bootstrap theme, inbuilt libraries, MVC, Widget etc), well structured, also gives flexibility to maintain code. If you don't wish use entire framework you can also use Cygnite File Component to do the same.

Installing Composer and Cygnite Framework:

So the first step is to install Cygnite framework to build our application, I will not write "How to install Cygnite into local machine", as it is covered in my previous article. Below links for Installation of Cygnite Framework but Cygnite v1.2.4 doesn't include File Upload feature, so please update composer.json to download latest framework code (dev-master) or manually update the framework core.

Cygnite Framework- Composer Installation

Manual Download from GITHUB

  Live Demo   Download

Step 1:
Let me consider you have already Cygnite installed into your machine. I have installed it into /www/cygnite/ directory. Now create a controller called ProfileController.php into your /cygnite/apps/controllers/ProfileController.php.

We will render the default view page using indexAction. We are not using layout here, but you can also use layout to make your view page much modular, flexible. Paste below code into your controller to call your view page.

 


namespace Apps\Controllers;

use Cygnite\Foundation\Application;
use Cygnite\Mvc\Controller\AbstractBaseController;
use Apps\Models\Country;
use Cygnite\Common\File\Upload\Upload;
use Cygnite\Common\UrlManager\Url;
use Cygnite\FormBuilder\Form;

class ProfileController extends AbstractBaseController
{
   protected $templateEngine = false;

   //Plain PHP layout
   //protected $layout = 'layout.base';
  /*
   * 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('index');
  }


   // Upload profile picture
  public function uploadAction()
  {
    $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'])) {

            if ($upload->save(array("destination"=> "upload",  "fileName"=>"user_profile_".time()))) {

                $response= array('status' => true, 'msg' => 'Uploaded Successfully!' );
            } else {
                $response = array('status' => false, 'msg' => implode(', \n', $upload->getError()) );
            }

            header('Content-type: application/json');
            return  json_encode($response);

        }
    });

    echo $status ;
  }
}


Step 2:
When you create a new controller you also need to create a folder into views/ as same name as controller but lowercase inside /cygnite/apps/views/ directory. I am creating my view page called index.view.php inside /apps/views/profile/index.view.php and paste below code to render our profile default image.



<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm-9">
    <form enctype="multipart/form-data">
        <div id="profile">
         <a href="javascript:void(0);">
             <img src="<?php echo Url::getBase(); ?>/assets/img/no_image.jpg" class="profile-image"  id="profileImg"/>
               <span id="uploadTrigger"><b>Update Picture</b></span>
               <input name="document"  type="file"  id="file-id" class="active"/>
             </a>
        </div>
        <div style="top:2px;"> </div>
        <div id="status_msg"> </div>
    </form>

</div>

Step 3:
Create a js file called profile.js into cygnite/assets/js/profile.js and paste below code. Cygnite is shipped with bootstrap so you can use it or use cdn link.



$(document).ready(function () {

    $("#uploadTrigger").on('click', function(event) {
        $("#file-id").trigger('click');
    });

//$('.hidden').removeClass('hidden').addClass( 'active');

$(":file").change(function() {

    var file = this.files[0],  name = file.name, size = file.size, type = file.type;
    //Your validation
    var imageType = new Array("image/png","image/jpeg", "image/gif", "image/bmp");

    if(jQuery.inArray(type, imageType )  == -1) {
        $("#status_msg").html("Valid file formats are: jpg, jpeg,png, gif").css('color', '#F00000');
        return false;
    }  else {

        $("#status_msg").html(" ");
        if ($("#file-id").val() !== '') {
            var formData = new FormData($('form')[0]);

            $.ajax({
                url: 'upload',  //Server script to process data
                type: 'POST',
                //Ajax events
                beforeSend: function () {
                    $('#profileImg').addClass( 'profile-image-loading')
                                    .removeClass('profile-image')
                                    .attr('src', '/assets/img/fb_loading.gif');
                },
                success: function (data) {

                    if (data.status) {
                        var reader = new FileReader();
                        reader.onload = function (e) {

                        $('.profile-image-loading')
                            .addClass('profile-image')
                            .removeClass('profile-image-loading')
                            .attr('src', e.target.result);
                           return false;
                        }
                        reader.readAsDataURL(file);

                        $("#status_msg").html(data['msg']).css('color', '#009900');
                    } else {
                        $("#status_msg").html(data['msg']).css('color', '#F00000');
                        return false;
                    }
                },
                // Form data
                data: formData,
                //Options to tell jQuery not to process data or worry about content-type.
                cache: false,
                contentType: false,
                processData: false
            });
        } else {
        alert("Please select valid image.");
        return false;
        }
        }

});

});


Using Standalone Cygnie File Component for File Upload:

If you have already built an application and willing to use only standalone file component you can simply install Cygnite/File component using composer. I have installed composer globally in my system.

Create a composer.json file into your root directory where you want to install component, paste below code and save it.


{
  "require": {
    "php": ">=5.4.0",
    "cygnite/file" : "dev-master"  
  },
  "autoload": {
    "psr-0": {
        "Cygnite\\Common\\File": "cygnite/file/"
     }
   }
}


Now open terminal/command prompt, change to your project directory where composer.json exists and issue below command to install File Upload Component to do the same stuff.



composer install 


I am creating index.php file to access Cygnite File component, and below code to access File Upload feature.




require 'vendor/autoload.php';

use Cygnite\Common\File\Upload\Upload;

$upload = new Upload();

//$upload->setUploadSize(62092);
$upload->file = 'document';
$upload->ext = array("JPG");
$upload->size = '1024';

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

    if ( $upload->save(array("destination"=> "upload", /* "fileName"=>"demo_icon","multiUpload"=>true*/)) ) {
        $response = json_encode(array('status' => true, 'msg' => 'Uploaded Successfully!' ));
    }  else {
        $response = json_encode(array('status' => false, 'msg' => $upload->getError() ));
    }

    echo header('Content-type: application/json') .$response;exit;
}


Or you can also use Closure beautiful syntax as below.



require 'vendor/autoload.php';

use Cygnite\Common\File\Upload\Upload;

function fileUpload()
{
    $status = Upload::process( function($upload)   {
        $upload->file = 'document';
        $upload->ext = array("JPG");
        $upload->size = '5000000';

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

            if ( $upload->save(array("destination"=> "upload",  "fileName"=>"demo_".time(),/*"multiUpload"=>true*/)) ) {
                $response= array('status' => true, 'msg' => 'Uploaded Successfully!' );
            }  else {
                $response = array('status' => false, 'msg' => implode(', \n', $upload->getError()) );
            }

            header('Content-type: application/json');
            return  json_encode($response);
        }
    });

    echo $status ;
}


Now you can call the fileUpload function as usual in core php and calling this method in ajax url will process your ajax file upload. Don't forget to Include all above necessary css and jquery files in order to make the app work.

Finally go to browser and call the application by issuing below url.



http://localhost/cygnite/index.php/profile/


Conclusion:

We sincerely hope you found this article helpful. I will write “How to create thumbnail image / cropping to make image fit into profile area?” in my next post(part 2). If you would like to learn specific tutorial, you can also request tutorial or you are really 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 posts. Have a nice day.

Facebook Style Autocomplete Using Angular JS + PHP + MYSQL + Bootstrap


Introduction:

Hello guys, in my last article shown you "Generate CRUD application within 2 min" . Today I would like to share with you "How to build Facebook style Autocomplete using 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.

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.

Generate CRUD application within 2 minute


Introduction:

Hello guys, my last article was about "How to install and configure Cygnite PHP Framework using Composer". Today I would like to share a tutorial which will help you day to day activity, also boost up your development. Generating CRUD application is day to day task for almost every developer. Why to spend numerous times on writing CRUD when it is just a 2 minute job to boost up your productivity. Generate you all necessary code for your project as like – INSERT, UPDATE, DELETE, Pagination, Sorting and Field Validation with bootstrap theme etc within just 2 minute.

Sound Interesting? Yes.

Cygnite PHP Framework makes your job easier with fun at working. Learning new framework is fun and gives you learning curve. So let me show you how you can generate all above functionalities with in just 2 minute.

Step 1:

Install Cygnite Framework into your local machine. Set up your database into apps/configs/database.php file

Step 2:

Cygnite CRUD is fully model based. So have your table ready against which you would like to generate CRUD. Or you can use Cygnite Migration to create table schema. Migration is the best practice to build schema but let me not go into Migration in this tutorial. I will explain Migration and seeding another post.

Step 3:

Open your command prompt or terminal. Change the directory to your project root. For example (I am using Windows) if we have installed cygnite into G:\\wamp\www\cygnite\ then you need to enter



 cd wamp/www/cygnite


We are going to use Cygnite CLI to generate CRUD application so now we need to change directory to



 cd console/bin


Okay cool! Now we are inside cygnite/console/bin then run below command to generate your CRUD application. Let us assume we are generating crud for table called “user_info”, database name "directory" and we want the controller name as “User”. So our command should be as follows.



 php cygnite generate:crud user user_info directory


The above command will generate you CRUD application as Controller, Model, Views, Form Component etc. You can find the files corresponding directories as below.

Controller:



     • cygnite/apps/controllers/UserController.php

Model:



     • cygnite/apps/models/UserInfo.php


Views:



     • cygnite/apps/views/user/index.view.php
     • cygnite/apps/views/user/create.view.php
     • cygnite/apps/views/user/update.view.php
     • cygnite/apps/views/user/view.view.php


Form Component:



     • cygnite/apps/components/form/UserForm.php


You can alter any code to make it fit for your project. That’s all! You are ready to see your application. Go to your browser and type http://localhost/cygnite/user/ you will find your application.

The complete code generation even takes less time if you have configured everything and simply to run crud command.

Conclusion:

Hope you found this article useful and make your life easier. Please post me if you have any queries. If you find above tutorial helpful, please don't forget to give a small like or share with friends, also leave your comments below. I really appreciate feedback regarding this CRUD generator from my readers.

Keep visiting for upcoming articles. Cheers! Have a nice day.

How to install and configure Cygnite PHP Framework using Composer


Introduction:

Hello guys, my last article was about "Facebook style wall posting using Cygnite PHP Framework, JQuery, Ajax" . Today I would like to share with you guys "How to install and Configure Cygnite PHP Framework using Composer". Composer is the awesome tool to manage your dependencies. Learning new framework is always adventurous and gives you a big learning curve.

Before going into the installation you should have composer installed in your local system. There is a beautiful documentation of Installation.

After downloading and installing composer we are ready to setup Cygnite into our local machine and configure database etc. to get started with our next project. You can watch the video embedded below.

Conclusion:

Hope you found this article useful. Please don’t forget to give a small like or share with friends, also leave your comments below.

Keep visiting for upcoming articles. Cheers! Have a nice day.

Follow Us On Facebook Open Source Web Developers by Appsntech facebook group Twitter Open Source Web Developers by Appsntech twitter group Google+ Open Source Web Developers by Appsntech Google group Linkedin Open Source Web Developers by Appsntech, LinkedIn group
Copyright @2011-2015 appsntech.com. All rights reserved. Powered By- Sanjoy Dey Productions