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> 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> 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.
No comments:
Post a Comment