Appsntech.com The Tutorial Hub For Developers

Creating A Task List Using Craft Console

2017-01-01T21:17:00.000+05:30

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 will not 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!

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.

Travis CI: Continuous Integration for PHP Project

2015-10-06T00:21:00.001+05:30

Introduction:

While the last article was “Get Started With Test Driven Development: Unit Testing With PHPUnit?. ”, this article will help to getting started with Travis, which make collaboration with your team breeze.

Travis CI is an automation tool which allows team to commit and build project easily. Once you have configured your GITHUB project, whenever there is a new commit, Travis CI will sync code from GITHUB repository and initialize the build process. This way developer don't need to worry about running PHPUnit every time. Travis builds & deploy your software rapidly. I personally like Travis CI as an automation tool because it is easy to integrate, clean UI, plenty of features whereas getting started with other automation tool little tricky.

Travis CI supports multiple programming languages, you just need to define in your .travis.yml file (in root directory of the project) that which language project written and remaining Travis will take care. I will not be able to explain all language and environment they support, you can find from their documentation. In this article we will focus on “How to integrate Travis CI (continuous integration) tool with PHP project on GITHUB repository.”

Get Started With Travis CI:

Below are neat steps for Integrating Travis CI in your GITHUB projects.

Step1: Travis UI- Sign in:

Step2: Travis Setup- Activating for the repository:

Setting up Travis is very simple and straight forward. Once you logged into Travis, go to profile page and you can see your entire GITHUB repositories already synchronized and displaying into the page. Choose which repository you want to build, activate/deactivate it using simple “on”/“off” button as below screenshot.

If you have created a new repository into GITHUB under the same account and it is not displaying into Travis profile page, then simply click on “Sync” button as highlighted in above screenshot. Once you activate Travis for your repository every time you commit into the repository Travis will trigger build process.

Step3: Travis Aware- Add a .travis.yml file into your Repository

Different project will different environment setup. To inform Travis CI under what environment you require to build and test your project, you need to add a configuration file named .travis.yml in root directory of your GITHUB project. Below sample example,

Above .travis.yml configuration file informs Travis that it is PHP based project, Travis should run tests against 4 different versions of PHP as well as in HVVM. It also tells that project will accept failure in PHP v7.0, before build it should update the composer version. It will run all our tests suits located into tests directory.

By default on every Build Failure Travis will notify you via email. However you can stop notification by changing the notification flag as "false" as above screenshot.

To verify yml config file use http://lint.travis-ci.org/.

A great way to learn about .travis.yml is browse through various open source projects in GITHUB repositories that are uses Travis CI for build process. Here some example below,

Step4: Adding Travis CI Service into GITHUB:

Goto your Travis profile page by clicking Account, find token left hand side. This token will be used to identify your github project by Travis CI. See screenshot below,

Copy the token and while adding a service paste into the box, goto your repository settings, under “Webhooks & Services”. sample screenshot below to find location.

Step5: Travis Build- Triggering Build Process:

Now Travis is ready to build our awesome project, every time we push into GITHUB repository Travis will start building the project. You can see the build process or status in your travis page, under your githubu-username/repository-name. For example below.

https://travis-ci.org/cygnite/framework

See the build status on same page. You can see below screenshot as all tests passes for Cygnite it shows green, else it will display as red.

You can manually restart the build by clicking a button as above screenshot.

Build History:

Click on Build history tab to see history of builds it processed. Sample screenshot below.

Learn More:

You can find more information about Travis configuration in their official documentation. Some useful links below,

Wrapping Up:

I believe I gave you very good introduction of Travis CI Integration with GITHUB projects. It is really very easy to use. As popular dependency manager composer for PHP, Travis CI is also becoming favorite Continuous Integration tool for developers. So now it’s your turn, give it a try. You will be up and running fast.

You have anything to share? Please let us know by posting your comments below. Please don't forget to share this article with your friends. Thanks for reading.

Get Started With Test Driven Development: Unit Testing With PHPUnit?

2015-09-08T01:08:00.000+05:30

Introduction

While last article was "10 Best PHP Tools For Developers", choosing better tools for web development, this article is for those who want to write better testable code.

You might have come across such situations where you write bunch of code as library or component, where one library is depend on another, and when you fix one bug another comes up. This is frustrating when you need to go for production deployment and at the last moment you are identifying an bug which is related to your earlier fix or may be new one. You may need to sit back and debug entire application to find out where exactly going wrong. It happens for most of the developers, when we are most confident about our code, don't do unit testing or miss small piece of code which break down the application at end.

Well!! Is there any better way of delivering quality code? Yes!! Unit testing is the right approach. In this tutorial we will see how to make use of PHPUnit to develop error free application. This article is absolutely for beginner, as it will show you how to setup environment, write basic test cases using PHPUnit. You can start from here, do unit test in your future work.

Unit Testing & Why?

Before getting started with PHPunit to write some tests, let us find out "What is unit testing?", Why it required? How to get started with?

Unit testing is practice of testing unit of code or functions. By this way we can verify our code returns expected output.

From my personal experience, I would say if unit testing is in your mind, it helps you to write better testable code, refactoring existing code, helps you to build decoupled application. Consider you have been writing huge libraries for your project, due to time constraints you have skipped unit testing on the code, later on when you want to write some unit tests you couldn't, because code is not easy to test. And you will end up refactoring to write testable code. By this way unit testing helps to write testable code. It's always better to go for test driven approach, write code and keep unit testing in mind, do run tests after every changes in code, it will save you at end.

You may be wondering, If Unit Testing is de-facto standard then “Why People don't write Unit Tests?”. May be there are several reason,

• Most of the developers are confident about their code, they feel unit testing not required. But in real time some scenarios, it fails.

• It really takes lot time to test each class.

• Some people feel boring to write test assertions on every functions.

But believe me unit testing will save your ass at end and help you to deliver quality code.

Installing PHPUnit:

I will not go in detail as it is already explained in PHPUnit’s beautiful documentation. If you are using linux you can install PHPUnit using simple commands as below,



$ wget https://phar.phpunit.de/phpunit.phar
$ chmod +x phpunit.phar
$ sudo mv phpunit.phar /usr/local/bin/phpunit
$ phpunit --version

Above command will install PHPUnit globally.

PHPUnit - Composer Installation:

You can also install PHPUnit using composer, which is handy too. Just specify requirement into your composer.json as below,



{
"require": {
        "php": ">=5.4",
        "cygnite/framework": "dev-master",
   }, 
   "require-dev": {
       "mockery/mockery": "~0.9.1",
       "phpunit/phpunit": "4.8.*"
   },
}

See also: Cygnite composer.json

I hope you have composer installed already. Now go to terminal and enter "composer install" from the root directory of your project. Alternatively you can also install PHPunit globally using composer as below,



composer global require "phpunit/phpunit=4.8.*"

You can find vendor folder with PHPUnit libraries, and other packages.

Environment Setup:

In order to test the code we need some libraries. We have already installed Cygnite PHP Framework. For sample example we will test Cygnite's IoC Container class. You can define your configuration into the file phpunit.xml and the bootstrap file index.php or phpunit.php into your root directory.

Your phpunit.xml should look somewhat like below,

See also: Cygnite phpunit.xml



<?xml version="1.0" encoding="UTF-8"?>
<phpunit backupGlobals="false"
         backupStaticAttributes="false"
         bootstrap="phpunit.php"
         colors="true"
         convertErrorsToExceptions="true"
         convertNoticesToExceptions="true"
         convertWarningsToExceptions="true"
         processIsolation="false"
         stopOnFailure="false"
         syntaxCheck="false"
>
    <testsuites>
        <testsuite name="Cygnite Test Suite">
            <directory>./tests/</directory>
        </testsuite>
    </testsuites>

    <filter>
        <whitelist addUncoveredFilesFromWhitelist="false">
            <directory suffix=".php">src</directory>
            <exclude>
                <directory suffix=".php">vendor</directory>
            </exclude>
        </whitelist>
    </filter>
</phpunit>

And bootstrap file phpunit.php :

See also: Cygnite phpunit.php



define('CF_SYSTEM',1);
require __DIR__.'/vendor/autoload.php';

If you look at the xml configuration you can see we have defined the test directory also other configuration such as name of bootstrap file and colors=“true”. It helps to display success or failure in green or red respectively.

You can also specify configuration by passing argument from command line. You can read from here

Sample Application Structure:

It is sample directory structure; however it depends on your application. Now our environment ready to test something awesome.

Writing Our First Test Cases:

As a part of tutorial we will test Cygnite Framework's Container class. For sample, we will write some basic assertion to test Container class. All of our tests files are located inside tests directory.

Folder Structure:

Root Directory: phpunit/

Xml Configuration File: phpunit.xml

Bootstrap File: phpunit.php

Testable Class Path: phpunit/vendor/cygnite/framework/src/Cygnite/Container/Container.php

Test Class: phpunit/vendor/cygnite/framework/tests/Cygnite/Container/ContainerTest.php

We will also use Mockery to mock object with PHPunit. Make sure every class should be suffix with string "Test", for example below sample ContainerTest.php class.



use Mockery as m;

class ContainerTest extends PHPUnit_Framework_TestCase
{
    private $container;

    public function setUp()
    {
        $this->container = new \Cygnite\Container\Container();
    }

    public function testMakeClass()
    {
        $router = new \Cygnite\Base\Router\Router();
        $url = new \Cygnite\Common\UrlManager\Url($router);

        $madeUrl = $this->container->make('\Cygnite\Common\UrlManager\Url');
        $this->assertEquals($url, $madeUrl);
        $this->assertInstanceOf('\Cygnite\Container\Container', $this->container);
    }

    public function testClouserResolutionAsObject()
    {
        $this->container->name = function() {
             return 'Cygnite';
        };

        $this->assertEquals('Cygnite', $this->container->name);
    }

    public function testArrayAccess()
    {
        $this->container['greet'] = 'Hello World!!';
        $this->assertEquals("Hello World!!", $this->container['greet']);
    }

    /**
     * @expectedException     \Cygnite\Exception\Http\HttpException
     * @expectedExceptionMessage Not Found!
     */
    public function testException()
    {
        throw new \Cygnite\Exception\Http\HttpException(404, "Not Found!");
    }


    public function tearDown()
    {
        m::close();
    }
}

See also: ContainerTest.php

In the above example, you can see method “setUp” and “tearDown” similar as magic method __construct and __destruct, setUp is where you can do some configuration before executing test methods. For example you want to test database queries or you don’t want to create an object of class every time in all methods. In such cases, you can configure connection or create an instance of class one time into setUp() method and use it in any method of that test class. Similarly you can see, I have used tearDown() method to close Mockery object.

Few Basic Assetion Methods To Remember:

setUp() – setting up configurations etc.

tearDown() – Close connection or destroy mock objects

assertEquals – Check equality of output

assertTrue – Check method returning true or not.

assertEmpty – Check function or any argument value is empty

assetInstanceOf- Check given string is instance of specific class

assertNull – Check if value is null or not

Apart from that there are many assertion methods, you can make use of those based on the requirement. Find out those assertion functions from PHPUnit documentation. You can also use annotation for running assertion. For example you want to do some test to verify if method throws correct exceptions with exception message. Such case simply use annotation as below,



   /**
     * @expectedException  \Cygnite\Exception\Http\HttpException
     * @expectedExceptionMessage Not Found!
     */
    public function testException()
    {
        throw new \Cygnite\Exception\Http\HttpException(404, "Not Found!");
    }

In above testException method we are verifying if code throws “Cygnite\Exception\Http\HttpException” exception, and with the message “Not Found!”.

Likewise there are various "annotation" exists in PHPUnit to run assertions read from here.

Are you still wondering how to test code using PHPUnit ? Have a look at some sample tests, I executed on Cygnite PHP Framework core classes.

Running Tests:

Running tests is just simple using phpunit executable file, but you need to make sure you are pointing it to your test file. Here example:




phpunit\vendor\bin> phpunit –c ../../phpunit.xml --bootstrap ../../phpunit.php ../cygnite/framework/tests/Cygnite/Container/ContainerTest.php

// -c – Xml configuration file

// --bootstrap – Your bootstrap file to autoload all files or for some initial configurations etc.

Sample Output:

Assertion Failure:

Assertion Success:

PHPunit displays number of assertion, pass, failure, number of tests etc. If any of the tests fails it will display failed in red with method name, reason etc. And on success it will display green with number of assertion, tests etc.

Is it not easy?

Conclusion:

Though there are multiple things to cover, I believe I have given you good introduction of PHPUnit and How to write basic unit tests using PHPUnit.

So, why to be lazy? when you can deliver quality code. Start doing assertions tests on your code for current or future projects. Jump start from here with test driven development. Write code better, testable, modular. I hope this article is useful to you. Please don't forget to share with your friends and leave your comments below.

Keep Visiting.

10 Best PHP Tools For Developers

2015-08-31T22:40:00.000+05:30

Introduction

You may wish to read our last article "Backbone JS vs Angular JS- Uncovering key differences".

PHP (a recursive backronym which means PHP Hypertext Preprocessor) is one of the most popular scripting languages among web developers because it is open source and platform independent. Apart from that, the most important thing is that it is easier to learn than most other scripting languages. Still like any other coding languages, PHP takes a lot of concentration and practice to make use of its full functionality.

There are a lot of PHP tools that developers can use to make their workflow easier and faster. PHP documents also need proper error check which makes it difficult to do it manually. These tools help in providing error alerts and any potential error while writing the codes. The web is full of different tools for PHP. So to make it easier for you I have mentioned some of the most popular and useful PHP developer tools in this article.

1.TWIG–

It is a fast, secure and flexible template engine for PHP developers. It is fully documented, with a dedicated online book and a full API documentation. It is fast compared to other regular PHP code as the overhead has been reduced to the very minimum. It has a open architecture which will help you to create your own DSL.

2. DebugBar–

DebugBar has made debugging easier for PHP developers. You can easily integrate it in any projects without any other dependencies. It has a clean, fast and easy-to-use interface. Also, it is very well documented and includes generic data collectors.

3.Geocoder–

Geocoder is a library that helps you to create geo-aware applications and supports a lot of third party services like Google Maps, Bing Maps, TomTom and OpenStreetMap. It provides the user with an abstraction layer for geocoding manipulations and a powerful API. It provides complete documentation.

4.PHP Image Workshop–

Image Workshop is an open source tool using GD library that makes managing images in PHP easy. It is like a photo editing software where you can superimpose many layers or layer groups, with each layer having a background image. From simple to complex tasks, it is a highly flexible tool.

5. Sylius–

Sylius is an open source PHP tool for e-commerce and is based on Symfony2. It has a component-based approach where you can build a custom platform on top of Sylius. It is highly customisable and you can customise its core model easily. It has a clean architecture and has an easily understandable code.

6.SlimStarter–

Built on the top of a well established Slim Framework, SlimStarter is the perfect solution for bootstrapping small-to-middle web application and provide HMC environment in small footprint. It is powered by Eloquent ORM on database layer and TWIG template engine on presentation layer. It is also shipped with basic application features such as User and Group Manager.

7.SimpleTest–

It is a unit test and web test framework for PHP applications. It has support for SSL, forms, frames, proxies and basic authentication. It is well documented and easy to use.

8.Scavenger–

It is an open source real-time vulnerability management tool for PHP developers. It helps system administrators to track vulnerability findings and respond to it without “nagging” them with old vulnerabilities.

9.Hoa–

It is a modular, extensible and structured set of PHP libraries. You can compose and extend libraries to create applications of your own libraries. It aims at bridging the gap between industrial and research worlds. Hoa is a an open source tool and is an retro-recursive acronym for Hoa, Open Accessibility.

10.phpDocumentor-

It enables you to generate documentation directly from your PHP source code. It does not aim to replace the conventional documentation but is more of a supplemental one. phpDocumentor has an incredibly flexible template system which enables you to alter the output in any way imaginable.

These are amazing tools to help you in your PHP development projects and if you are a fresh PHP developer, it will help you in getting your job done easily.

Author Bio:

Hasib is a professional writer working and writes articles related to jobs, education and guides for fresh graduates. This post has been written keeping in mind PHP enthusiasts and professionals applying to jobs in PHP as fresher or experienced .He is an avid reader and lives for two things – football and food. Follow him @ twitter, Google+, LinkedIn.

Backbone JS vs Angular JS- Uncovering key differences

2015-08-25T00:14:00.000+05:30

Introduction

Our last article was about 8 Brilliant Tools That Empower Web Developers To Work With A Flair

Every since JavaScript development gained traction, the war of front-end JavaScript frameworks hasn't ceased to exist. As a JavaScript developer, I've tried hands on numerous JavaScript frameworks that have some of the finest features, helping in improving the overall productivity. Two of the best JavaScript frameworks that have proved utmost useful in building stunning web apps are BackboneJS and AngularJS. Today, in my post, I'd be taking up a simple and crisp comparison between these two JavaScript frameworks that have been embraced by JavaScript developers, both amateurs and experts.

BackboneJS vs AngularJS – Background

While BackboneJS is a 2010 product, AngularJS was released in the year 2009. Serving as a quick alternative to heavy frameworks, Backbone.js is a light weighted JavaScript framework that loads faster due to use of the Underscrore.js dependency framework. On the contrary, AngularJS is an open source framework that allows an easy extension of HTML in addition to two-way data binding via simple code testing. That means, with the two-way binding, you can use HTML for declaring the template, eliminating the need for writing any code.

BackboneJS vs AngularJS- Website Categories

While Backbone.js serves as an excellent choice for building eye-catchy websites for real estate, shopping, business & industry, arts & entertainment etc; AngularJS has been designed keeping in mind the need for building websites related to Career & Education, Internet & Telecom, Software, Computer & Electronics and many more.

BackboneJS vs AngularJS- Architecture

While the Backbone.js framework uses MVP(Model View Presenter) architecture, AngularJS uses the traditional MVC(Model View Controller) architecture. The main differences arising out of this variation in architecture include the following:

DOM -

Unlike AngularJS which rebuilds the DOM in accordance to the specified rules, BackboneJS manipulates direct DOM for representing the changes made to the data.
Data Binding -

Unlike AngularJS which comes with a two-way binding feature that allows it to run the applications, track and trigger data changes; BackboneJS lacks a data binding feature forcing the developer to create a custom binding mechanism or opt for a third-party data binding service.

BackboneJS vs AngularJS- Templating

Talking about templating, well it is in effective technique of reducing the amount of code that needs to be written for getting the single-page applications off the ground. While on one hand, we have BackboneJS which builds off the Underscore templates i.e. you're expected to write certain custom JavaScript for ensuring smooth functioning of the templates, on the other hand there is AngularJS which offers templating via dynamic HTML attributes that have already been incorporated into the document, ensuring the representation is concise and easy-to-grasp.

You may also like to read: AngularJS Is A Superior Javascript Framework

BackboneJS vs AngularJS- Validation

BackboneJS doesn't comprise of a function that can execute the validations part. That means, you're either supposed to write the logic by yourself or choose one from Backbone validations(9.5 unminified) or Backbone.validation(8.2HB minified) or Backbone.validator(8.2 non-minified) etc. In contrast to this, there is AngularJS which includes validation by default. That means, you can see some of the validations like min-length, max-length, email etc. implemented by default. Moreover, if you're interested in having a custom validation(s), then you can choose to create one.

BackboneJS vs AngularJS- Non-Restful Backend

While BackboneJS is purely meant for Restful backends, AngularJS comes with $http which allows you to go beyond the boundaries of a Restful backend. Well, when it's about Backbone.JS, for each end-point within the backend, there's a need for creating an associated model on the front-end. That means, if you aren't using a Restful backend, then there will be a need for performing a lot of tweaks that may lead to multiple overrides to Backbone.sync. On the contrary, AngularJS makes the concept of having a Restful backend easier. It comes with ngResource- an extra file that's required for adding 16KB min. Hence, you're free to either use this file or $http directly.

Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

BackboneJS vs AngularJS- Overall Performance

In simple words, BackboneJS is a lot more faster and better performing as compared to AngularJS. The basic reason for this is that as the page grows, AngularJS's two-way data binding feature tends to introduce negative performance effects into the framework. Unlike this, BackboneJS lacks a data binding feature, expecting you to write lengthy code. This allows you to focus on improving the performance, removing the need for hacking the framework from scratch. All in all, it is the compact data representation which makes AngularJS a low-performing JavaScript framework.

Final Thoughts

While each of the two JavaScript frameworks viz: BackboneJS and AgularJS have their own set of pros and cons, it is better to opt for the one which suits your project requirements fully. Remember, a framework that's been chosen after a lot of planning and analysis will fetch you the desired results instantly.

Author Bio:

My name is Andrey. I am a web developer in CMS Website Development Company. I am fond of finding simple solutions to complex problems. If you loved the topic, do share and comment. Also, you can follow me on Twitter for more updates.

8 Brilliant Tools That Empower Web Developers To Work With A Flair

2015-07-21T22:48:00.000+05:30

Introduction

Our last article was about "AngularJS Is A Superior Javascript Framework Let's Explore Why". The Internet has inevitably become an integral part of the life for most of us. This has certainly raised the level of expectations from web developers while adding to their business. With a fierce competition in the market, web developers need to be on their toes and deliver superlative products to attain a sustainable success in the wobbly marketplace.

Today, almost every business embraces an online presence that is optimized for mobiles to ensure their reach to a wider audience base. This has substantially created a lot of work load for web professionals, as they need to expeditiously deliver outstanding results that can let businesses boast unique and impressive web presence.

Fortunately, with the advancement in web technology, there is a slew of excellent tools that can help web developers to stay productive in their work without compromising on the quality. This post will uncover some marvellous tools that every web developer must know, as these can help them boost their performance and have an edge over the competition.

Let's distil a few of the amazing tools for accomplishing web development task with a breeze.

Read: 5 Best Things You Should Know About PHP 7

1. Freepik

If you need any type of vector images, illustrations, or any other vector art piece, Freepik makes a fabulous choice. It offers a gigantic collection of amazing vector art that too for free. Since, everything is kept in a well organized and uncluttered way, you can easily find a desired option. However, the huge list of options available there might make it hard and time consuming to streamline your choice.

2. ExpressionEngine

The ExpressionEngine is a wonderful content management tool that beautifully separates the web content from the design. It, thus, facilitates one to showcase the content in a desired manner and on desired location. This tool is flexible enough to work efficiently with any kind of website from eCommerce to a personal blog; it is custom made to support any niche business. Moreover, it is absolutely simple to install and use, even individuals with no technical knowledge can also operate this extensible tool. The huge community support further adds to its credibility, so whenever you feel that you get stuck and don't know how to proceed, you can reach the community; there are several experienced professionals and individuals who can help resolve your web-related issues.

3. Play Framework

Play Framework is a prolific web framework that supports rapid web application development with Java and Scala. To work with this framework, only a text editor and browser is required. It includes resourceful testing tools, and also displays the outcomes corresponding to the amendments made by you by simply clicking on refresh button.

Built on Akka, this framework consumes minimal resources, and delivers highly scalable web applications. While supporting a plethora of useful Java libraries, and compiling and running apps on the JVM for quick performance, it ensures responsive web apps that can run seamlessly on any device.

4. Hotjar

Now, you can easily learn and understand how your website is perceived by your web as well as mobile users. All this is possible with this awesome web development tool. It comes complete with features like Heatmaps, and offers you the appropriate analytic result to help you proficiently improve the usability of your site. You can scour and analyse the elements that grab your viewers' interest, as it offers insights of your visitors' behaviour (including number of taps, click, scrolling and so forth) while interacting with the website.

5. HTML5 Maker

Today, adding captivating graphics in a website can enhance its look and feel, which has become quite essential nowadays to stay ahead of the competition. If you want to grab your viewers' attention, animations can definitely help you achieve your goal with ease. The HTML5 Maker is one of the most recommended online tool that facilitates one to efficiently generate animated multimedia content. Whether you like to have an impressive sliders or banners, this blissful tool can cater to your needs.

The best thing about this tool is that it doesn't even require design and development skills. It comprises several resourceful features, including Online Image Editor, Online Animation Editor, built-in templates that help generate innovative web solutions. The animations generated via this tool are compatible with Google Double-Click and Google AdWords. Moreover, these animations can be shared with others as templates.

6. Cygnite - A Modern Toolkit For Web Developers

Cygnite is a new toolkit designed to augment the development of full-featured web applications. This elegant and effective framework delivers ultimate performance and allows professionals to create exquisite and feature-rich web solutions with ease. It features clean and legible syntax, which makes it extremely convenient for one to proficiently develop the code. This PHP framework is power-packed with an array of useful features, including Code Generator, ActiveRecord, Container, Finders, RESTful routing, Schema Builder, and many more. The integrated Composer tool facilitates one to incorporate a desired third-party plugins into his web application. Cygnite 1.3.1 is the small footprint; however, its major update Cygnite Framework 2.0 version will be available soon with tons of awesome features.

Read: Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

7. Apache Couch DB

Apache Couch DB forms another highly useful web development tool. Yes! It is an open source database where you can stack all the requisite documents in the cloud with JSON documents. Once you have stored your data, it automatically indexes, combines and transforms your data by implementing JavaScript. With this tool, you can use HTTP to query your indexes with a web browser, and it offers real-time notifications for every change made on a website. This web database features an intuitive interface that facilitates the admin to make amendments with ease.

8. Google Fonts

I don't think Google Fonts needs any introduction, most of you might have been already using it. This list would have been incomplete without including this tool. It is basically Google's font library that offers a great list of web-compatible fonts. You can search any font that best suits the look and feel of your website.

Reflection

Today, it has become more than imperative to make your website stand out with an impressive appearance and valuable functions. This ultimately adds to the web developers' job. If you are a web professional and seeking cutting edge tools that can augment your performance and help deliver an invaluable web solution, go through the aforementioned list of tools. I hope this list will surely heighten your business success while making your life much easier.

Author Signature:

Victoria Brinsley is a skilled Android app developer for Appsted Ltd - a outsource Android app development company. You can explore more about the development tips and tricks by clearing your queries with her.

AngularJS Is A Superior Javascript Framework Let's Explore Why

2015-07-15T21:00:00.000+05:30

Introduction

Last article was about the Unerring Tips for High Performing WordPress Themes you may like to read out.

One of the probable reasons why JavaScript is extolled across the globe is the availability of prolific frameworks that support JavaScript development. However, it has been observed that most of the frameworks only wraps a slew of existing tools, and do nothing much in addition to it.

Fortunately, AngularJS is a brilliant framework that has an edge over its competitors. It embraces a set of resourceful tools that have been incorporated after ensuring their smooth and flawless performance. Although one needs to have proper insights into the framework and get the requisite expertise to reap its benefits, there are several outstanding advantages that make it a much sought after choice.

Read: Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

This post will unleash a few worthy benefits of AngularJS.

1. Has an ideal framework size that helps develop a variety of apps

The most common cause that add to the bounce rate of a product is its loading time. If your application consumes a lot of time to load, most of your users will certainly prefer abandoning your app. Thus, it is better to scour the impact of a framework on the loading time. This can be proficiently analyzed by taking the framework size and time taken by the framework for bootstrapping into account. AngularJS consumes ~50 KB, and allows professionals to develop beautiful, feature rich applications with a flair.

2. Helps generate an intuitive UI

You can create dynamic interfaces for your web apps, as AngularJS allows one to extend the definition of HTML. This certainly makes it easy to tweak the UI design in a suitable manner and create a desired look and feel. The framework offers a list of various UI elements and ensure that all of them work seamlessly when integrated in a design. This adds to the agile app development, and delivers fabulous apps with an impressive UI design that are sure to enhance the UX.

3. Delivers precise results while catering to your client's needs

Programming for AJAX and DOM is not a child's play, but it definitely an arduous task. However, while working with AngularJS, the code becomes much organized and uncluttered that helps you efficiently manage the development of CRUD apps. The framework offers a better conceptualization to deal with it in a precise way while creating applications.

4. Augments parallel development

AngularJS brilliantly manages dependencies, though the dependencies are not completely eradicated. The integrated massive grid facilitates one to streamline multitasking and testing while keeping the risk to crashing at bay.

5. Minimal coding is required

Loaded with a whopping number of useful functions, AngularJS offers valuable features without demanding lengthy codes. Here are a few of its incredible functions.

It completely handles the MVC pipeline.

You can support a required data model by writing only a few code chunks.

You can implement HTML to create a desired view.

By the virtue of filters, you can easily tweak the data in a desired fashion without affecting the controller.

You won't need to tinker the code in order to manage the directives, as they can be handled in another way.

All these blissful features of the framework make it absolutely convenient for one to generate a high end application with just a simple and precise code.

Read: Building a Simple Form Using Angular JS and Cygnite PHP Framework

6. Makes single page app development easier

Although developing a single page application (SPA) is a daunting task, it has incessantly garnered a great popularity. By implementing the AngularJS framework for the same, you can proficiently create a high quality single page application, while ensuring a responsive design. This further facilitates an app with smooth and consistent performance that amazingly adds to a better UX.

Moreover, as these kind of apps are rendered on the client side, it dramatically reduces the network traffic and further improves the loading time. The framework is jampacked with resourceful templates, routing, and more features that facilitate one to develop highly functional apps.

7. Aids application testing

The significance of testing cannot be overseen. One must test his application before launching it in the market. This helps one to ensure its flawless performance and deliver an impressive app that can compete with the fierce competition out there. AngularJS framework has been developed while keeping the testing into account. Understanding the proliferation of mobiles and the fact that app testing requires a lot of precision, the framework is powered with powerful services to deliver an astonishing product.

Conclusion

AngularJS is an invaluable JavaScript framework that is consistently going through reinventions. This is certainly further enhancing the framework and making it a better companion for developing stunning, intuitive and highly engaging applications. The above are just a few of its utile features, you will get a lot more under its hood.

Author Biography:

I am Savy Nacion, working as a technology specialist in Markupcloud, HTML to Wordpress Service company, based in Rochester, New York. With over 10 years of experience in the technology domain, I aim at bringing new and innovative technology solutions to the company to help it keep thriving in the industry.

Unerring Tips for High Performing WordPress Themes

2015-07-05T14:35:00.000+05:30

Introduction:

In the last article we discussed about "Advantages and Disadvantages of Ecommerce Business".

“Doing The Same Thing Over And Over Again And Expecting Different Results”

This is what we call insanity. If you think that you are doing everything right but the desired result is still awaited, then you need to go back, test and then optimize your policies. We all have been ranting and raving about responsive themes, but we never dared to look beyond it. In this blog, we will discuss how to get high performance from your WordPress themes.

Gauging the performance of your Responsive theme

Choosing the size of a responsive web theme matters because it affects the end users as well as the web servers. Due to heavy weightage, server needs more time to get extra file and with each such file, extra milliseconds are added in the loading time. On the other hand the user have to wait till the total number of kilobytes are loaded. Apart from using Media Queries various WordPress themes now use several other techniques to respond to the browser's.

Being choosy pays off!

Designing a responsive website is more than just defining different number of columns in a website. This question was for all the websites designed for mobile users, without concerning the fact that these were CMS. Before choosing a theme you need to first go through the following set of questions:

Does your project needs a mobile development?

With the proliferation in the mobile devices it is highly unlikely for business owners with up to date market knowledge and trends to say no to mobile first technology. However, one cannot go on for adopting all kind of technological development. Though, earlier we had a choice for adopting mobile designs, but now with the advent of Google's algorithm it becomes crucial.

Read: Creating Mobile Responsive Design

How many steps do we need?

Performance of a responsive website depends highly on the screen it is viewed on. Responsive design does not mean that the screen should adjust on the mobile devices such as tablet, phablet or smartphones, wherein responsive means that your website must be fit to wide screen sizes. The best option is follow device-agnostic approach which focuses on web design instead of device functionalities.

Do you understand the layout and formatting of the responsive pages?

In order to craft a successful layout you need to display the elements one by one. Now, when it comes to wide screens we must make sure that the headings must be larger than the content, whereas when it comes to smaller screen the ratio drastically changes.

How to tailor your application for mobile devices?

Displaying content via multiple columns needs a particular hierarchical flow, as each page comprises of its own unique content and secondary content is the one which is displayed on more than one page. This content approach is difficult to follow while designing for mobile screen. You need to ensure that you need to remove the irrelevant content from the mobile screens. On contrary if you think that you need all those pages then draw out a proper methodology such as long scrolling to display you content. Further, as per thumb rule the elements which do not supports the title of the page is not the primary content.

Measure your Websites performance

Now after all the detailed analysis and study you have finally chosen a WordPress theme and have decided on the content placement and stuff, do not think that you have accomplished your goal. The next step is to know whether you did it right and is your website well accepted by users. There are numerous tools present in the market to gauge the performance of a website. However, you can count on Google Page Speed and for second choice keep Gtmetrix for analyzing the current performance of your website.

Read: 5 Best Things You Should Know About PHP 7

With 7 Google Page rank and Alexa rank 11, Gtmetix serves as an incredible tool for analyzing your website. Along with page speed results this tool uses YSlow ( a tool from Yahoo for measuring performance). Do not worry as you do not have to do much and all you need to do is to enter the url of your website to get a comprehensive performance report. Further, it allows comparative analysis for a healthy competition.

Poor performance!

Plugins can ameliorate the performance

One can certainly meter the performance of their website, however this leads to the crux: how to improve?

With a wholesome development of community existing for more than a decade have found solution of this unnerving questions. We have plugins namely auto optimize, WP Super Cache and several other which can work as a performance booster for your WordPress website. These plugins are easy to install and ready to use which have the potential to ameliorate the performance of a poor performing websites.

Present the cached version

Caching works as a performance booster!

As we know that every time a user enters a website, content is fetched from the server and then displayed on the browser. In case of static resources the data will fetched every single time a user visits the website. This is certainly not an optimal technique, as the server has to do a single task over and over again.

In order to optimize this functionality we have well engineered plugins such as WP Super Cache, which ensures that the users get to access the cached website which removes the unnecessary loading of content again and again.

I hope this might help you!

Conclusion:

The long and short of the complete article is that we need to pull up our socks in order to do reach another level of web development. There are a lot of optimization techniques for WordPress which one can harness to provide top notch solutions.

Author Biography:

I am Savy Nacion, working as a technology specialist in Markupcloud, PSD to Wordpress conversion company, based in Rochester, New York. With over 10 years of experience in the technology domain, I aim at bringing new and innovative technology solutions to the company to help it keep thriving in the industry.

Advantages and Disadvantages of Ecommerce Business

2015-06-26T23:13:00.002+05:30

Introduction:

e-Commerce business is increasing day to day. It has created opportunity for everyone to start online business with little investment. Many people are not aware that starting eCommerce business require steps and decision to work together at right time. Like offline business, online business also have some advantages as well as disadvantages. Review the pros and cons of e-Commerce business.

You may also like to read "How to Guide to Create Mobile Responsive Design".

Advantage of eCommerce Business

1. Limitations –

Unlike e-Business, offline business have certain limitations to reach the customers. In e-Business owner can target the whole country at the same time and takes the lead on offline business because whole world is its playground.

2. New Customers –

There are limited customers for offline business. It cannot cross the limit. But on the other side Online business targeted area is too big. It receives new customers from Search Engine and other different methods.

3. Time Saving –

e-Commerce business is time saving for customers, they don't have to travel to purchase a products.

4. Physical Store –

Online business doesn't require a physical store and hence saves the cost of establishing a physical store. For users, it becomes easy to visit online website to purchase product instead of visiting physical store.

5. Low Startup Cost –

Offline business requires good amount to setup a business. But eCommerce business can be started with a little investment. If a person does not have any website, he can sell his products on various eCommerce portals available online as there are so many Ecommerce store development companies like shopify offering affordable and ready to use eCommerce portal.

Disadvantage of e-Commerce Business

1. Personal Touch -

Offline business builds the relationship with its customers personally. But on the other side e-Commerce business missed this important part. In offline business user visits again to the store because of personal touch, but not the same with online business.

2. Internet Connection –

Internet is the life of eCommerce business. Once the internet is down it will miss all the sales. It is like no internet no revenue online. But offline business never faces this types of issue.

3. Technical Issues –

Shopping carts and payment processing are very important parts of any eCommerce Business. But sometimes, a little technical bug can create issues in website and website stop working. Hence, it won't do any conversion until that issue get fixed.

4. Return Policy –

In online business business owner have to take the responsibility of products even after its delivery. If user is not satisfy with product he received, he will return it to the owner and owner have to refund the amount.

VERDICT :

Well with this article we may conclude that every business has advantage and disadvantage. Although we cannot avoid disadvantages but certainly, we can take measure to manage risks and get abundant advantages from eCommerce business. Advantages are undoubtedly teasing, and we will appreciate such simple exchange nowadays. It is suggested that always try to manage risks before it hinders your online business. Appreciate more your web searching and appreciate more your e-business exercises!

Author Biography:

James Anderson is an professional content writer. Email: ja9663019@gmail.com

How to Guide to Create Mobile Responsive Design

2015-06-20T16:06:00.000+05:30

Introduction:

Hey Guys! Last article was about "How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)".

Unlike a conventional desktop oriented website, the one which has been created for the mobile screens is a lot more in demand. It is a responsive website which automatically adjusts itself to fit the screen of device that the site is being viewed on. All the content, whether it is the text, images or video get moderated to ensure best display on the screen under focus. Whether you're a publisher, a designer or a developer, taking care of your site's mobile responsive design is something that can render flawless experience to the targeted users. In this post, I'll be walking you through the vital steps that must be followed for building a fine quality mobile responsive design.

What kind of mobile responsive design are we going to create in this tutorial?

Here, I'll be creating a simple e-commerce product detail page for a t-shirt firm. So, while ensuring that the customers are able to make the purchases conveniently, we'll also be making the product review easy-to-access, followed by utilizing customer's location for enhancing the overall mobile shopping experience.

A look at the basic structure

It is essential to author a semantic HTML5 markup that will allow you to ensure completely manageable and fully accessible adaptive experiences. The reason for this being that semantic markup is fully portable and can be easily accessed on a variety of mobile devices, desktop browsers, tablets etc.

Coming to the individual steps for creating mobile responsive design

Step 1- Set the Viewport

While for a majority of non-mobile-optimized websites, most of the contemporary browsers set up a larger browser viewport, in case of designing a website using mobile responsive design, we'll be using viewport meta tag for setting the screen width to the device width as shown below:



<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2- Adding the flexibility to load the website content conditionally

Here, we'll be creating two new HTML documents for the auxiliary content viz: reviews.html and related.html. Unlike the default way in which the content is accessible via links available on the page, we can use a little bit of javascript for loading the content as and when user requests for the same or when the screen's resolution reaches a specific breakpoint.

Step 3- Use HTML special characters

As an attempt to decrease the need for background images, it is recommended to use HTML special characters. In this tutorial, I've used $#9733 for creating a solid star (★) and ☆ for creating empty stars (☆) for the product ratings.

Step 4- Include a clickable link within footer

Here, we'll use the tel URI scheme for including a clickable link to customer service number, within the footer. Here's a look at the tel URI scheme:



<a href="tel:1234567891">123 456 7891</a>

Step 5- Add style enhancements

With a strong semantic markup in place, it's time to add some style enhancements as explained below:

Create separate style sheet for screens with larger displays

Here, we'll be creating two CSS files viz: style.css and enhanced.css for delivering basic styles for screens with dimension less than 967px. We'll be using media queries for serving the new styles for screens with dimension greater than 967px as shown below:



<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style-967.css" type="text/css" media="screen  and (min-width: 967px)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->

Adding Mobile-first styles

Next, we can start off with adding shared styles and advanced layout rules as shown below:




/* Avoid this style */
.customer-list img {
  width: 30%;
  float: left;
}
@media screen and (max-width: 967px) {
  .customer-list img{
    width: auto;
    float: none;
  }
}

The mobile-first approach will now look like this:




@media screen and (min-width: 967px) {
.customer-list img {
    width: 30%;
    float: left;
  }
}

Next, we'll be applying media queries as shown in the below code snippet:



/*Display 2 per row for medium displays*/
@media screen and (min-width: 480px) {
  . customer-list li {
    width: 50%;
    float: left;
  }
}
/*Display 3 to a row for large displays*/
@media screen and min-width: 768px) {
  . customer-list li {
    width: 33.33%;
    float: left;
  }
}

Step 6- Use CSS for reducing HTTP requests

Have a look at the below CSS which will play a vital role in saving HTTP requests so as to improve the overall performance of your website. For instance, CSS gradients can replace background images for decreasing the count of image requests and rendering a greater control over the original design.




/*Using CSS gradients rather than background images*/
header {
  background: #333; 
  background: +linear-gradient (top, # 333 0%, #555 100%);
}

Step 7- Add Javascript enhancements

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:



<ul  id="top-menu" class="top-menu">
  <li><a href="#">Menu</a></li>
  <li><a href="#">Search</a></li>
</ul>
<nav id="main-menu" class=" main-menu">
  <ul role="main-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

Additionally, we will include a resize listener which will find whether there's any possibility of displaying the search bar and navigation. Have a look at this:




var swidth, sheight ;
$(window).resize(function(){
  swidth = document.documentElement.clientWidth;
  sheight = document.documentElement.clientHeight;
  setElements();
});
  
//Set elements according to differ screen size
function setElements() {
  device = (swidth < breakpoint) ? true : false;
  if (!device) { 
    $('#top-menu').show(); 
  } else {
      $('#top-menu').hide();
  }
}

Adding functionality to the Image Gallery

Have a look at the below code snippet which will allow us to build an image carousel using the available thumbnail images:




function intslide() {
  container.html('<div id="img-slider"><ul /></div>');
  imgSlider = $('#img-slider');
  $('nav a:first-child').addClass('active');
  
  $('nav a').each(function() {
    var href = $(this).attr('href');
    imglist += '<li data-src="'+href+'"></li>';
  });
  
  imgSlider.find('ul').append(imglist);
      
  $('nav a').on('click', function(e) {
    var slidepos = $(this).parent().index();
    e.preventDefault();
    loadImg(slidepos);
    if(swipeEnabled) {
      mySwipe.slide(index, 500);
    }
    updateNav(slidepos);
  });
}

Adding functionality for Related Content

A code snippet will allow us to pull in related content in case any one of the below two conditions are met:

 When a mobile user clicks on related t-shirts or the product reviews links

 When screen has enough space for loading the auxiliary content

The code snippet that I'm referring to is shown below:




function setElements() {
    device = (swidth < breakpoint) ? true : false;
  
  if (!device) {
    loadContent(); 
  }
}

//Set up content
function loadContent() {
  var $content = $('.content');
  $content.each(function(index) {
    var $this = $(this);
    var contentLink = $this.find('a');
    var contentFragment = contentLink.attr('href');
    var realContent = $this.find('.demo');
    if (realContent .size()===0 && $this.hasClass('loaded')===false) {
      getContent(contentFragment,$this);
    }
  });
}

function getContent(src,container) {
  container.addClass('showcontent');
  $('<div class=”demo” />').load(src +' #content > div',function() {
    $(this).appendTo(container);
  });
}

As an approach to keep the web pages lightweight, I recommend using Closure Compiler for chopping off all the unused bits of the jQuery library. Other impressive alternatives include popular micro-frameworks like Zepto.js etc. Finally, don't forget to pay special attention to ensuring seamless off line access to your website. This will serve as a brilliant surprise to mobile users who aren't connected to the Internet at times.

We're done!

Conclusion:

With that it's a wrap on this post which made you familiar with the basic steps of creating a mobile responsive design. Hope by having a responsive design, it will become convenient for you to adapt to all the future mobile devices and browsers quite conveniently and instantly.

Author Biography:

Samuel Dawson is a comprehensive expert in Designs2HTML Ltd involved in the process of to convert HTML to Wordpress in a top manner.

How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)

2015-05-30T02:41:00.000+05:30

Introduction:

Hey Guys!

In my last article shown you How to install LAMP stack with easy steps. Today I would like to write about “How to install Ubuntu 15.04 along with Windows 8”. Recently I was trying to make my system dual boot (Ubuntu 15.04 alongside Windows 8), I have faced couple of issue before I am successful. It is not anymore that easy to install Ubuntu 14.10/ 15.04 alongside Windows 8, earlier we were able to install directly using WUBI installer. I thought I can post steps here, so that it will also help others. If you have Windows 8 pre-installed, you may find difficult to install Ubuntu or any other OS alongside. Microsoft has introduced several new features which made a mess for Linux based operating system. Windows 8 introduced UEFI and secure booting which is preventing any other operating system to install. UEFI is basically similar as BIOS booting.

You should know that until UEFI mode and secure booting is enabled you cannot directly boot/use Ubuntu. Installing Ubuntu inside Windows using WUBI is not supported in Windows 8.

Here I am posting some steps as I followed towards successful Ubuntu installation alongside Windows 8.

You might also be interested on reading “Installing LAMP stack on Ubuntu 15.04”

Step 1: Download Ubuntu ISO File

Download Ubuntu from the website. Make sure you are downloading 64 bit, 32 bit may not work. In my case I have downloaded 64 bit version.

Step 2: Use Universal Installer to Install Ubuntu

Make sure you have space least 10 GB in separate drive. In my case I have created a drive with 100GB for Ubuntu installation. Burn the Ubuntu into Live CD, DVD or USB in windows. I have used USB drive to boot Ubuntu. Download USB installer and install it. Browse downloaded Ubuntu ISO as below screenshot below.

Choose USB drive and click create to install Ubuntu into your USB drive.

Step 3: Disable Fast Startup (Windows 8 or 8+)

This technique introduced in Windows 8 to reduce booting time. When we shut down our Windows 8 system, it use hibernate concept to write some system data from RAM to disk. Doing this when next time windows boot it restore the data faster. By this way Windows 8 manage to boot in 10 seconds on SSD. This is creating a problem for Ubuntu or any other operating system installation process.

So it’s important to disable Fast Startup in Windows 8 / 8.1 before installing Ubuntu.

Go to Power option and click on the “Choose What Power buttons do” link from left menu. You will be landed on screenshot below.

Click on the highlighted link “Change settings that are currently unavailable” to change settings and uncheck “Turn on fast startup” screenshot below.

That’s it well good to go for installation process.

Step4: Disable Secure Boot

Next important thing is to disable secure boot. You can go to boot manager from BIOS (By Pressing ESC/Delete or F1-F12 keys) setup when system starts, In my case I pressed ESC to go to “BIOS settings” from there “boot manager” in that section you also will find “Secure Boot” make sure it is disabled. Windows 8 has UEFI design which is replacement of BIOS.

Save changes and we are ready to install Ubuntu now.

Step 5: How to Install Ubuntu 15.04

Install Using USB drive

Plug in USB drive into your system and restart. When you restart system you will find screen to “Try Ubuntu” and “Install Ubuntu”. Click on “Try Ubuntu” as this helps to check your hardware compatibility. You will login into Ubuntu and see screen below.

Click “Install Ubuntu 15.04” highlighted above. This is lead you to installation process.

Select Installation Type:

On the “Installation type” screen you need to select “Something else” as we are going to make “Duel Boot” with Windows, screenshot below.

Select appropriate drive to install. Before pressing next button remember to format drive using “change” button and it should be “Ext4” file system. Mounting point should be “/” as it will install Ubuntu into that primary drive. Screenshot below.

That’s all we are done with main job, now you need to do regional, language, account settings etc. for successful installation. Wait till process completes and it will ask to restart, do restart.

First Time Ubuntu Booting:

Remove USB and after system restart, you will see screen below where you need to select Ubuntu to boot.

Boot Repair

Some time you may not see the above screen and Ubuntu may directly boot. I was facing the same issue. If you don't see screen prompting you to choose which Operating system to use “Windows 8” or “Ubuntu” you need to execute below command from Ubuntu Terminal to enable GRUB window on startup.




 sudo apt-get update
 sudo apt-get upgrade
 sudo add-apt-repository ppa:yannubuntu/boot-repair
 sudo apt-get update
 sudo apt-get install -y boot-repair && boot-repair

Above command will repair boot screen issue. Restart the system. You will be able to see screen where you can choose “Windows” or “Ubuntu” to boot.

Step 6:

That's all we are done. Enjoy the Linux flavor alongside Windows.

Conclusion:

Setting up Ubuntu 15.04 alongside Windows 8 for open source development is little challenging but following above steps you can easily achieve it. I faced couple of issue before successfully installation. Don’t wonder if Ubuntu installed drive is missing in Windows 8 “This PC”, it won’t display since the drive is “ext4” formatted for Ubuntu installation.

I hope this tutorial will help you. If useful please share, leave comments below. I will continue writing and try to bring some tutorial of real time challenges.

Stay Tuned! Have a nice day.

Installing LAMP Stack In Ubuntu Step By Step

2015-05-13T01:16:00.001+05:30

Introduction:

Hey Guys!

Last article was “5 Best things you should know about PHP7”. If you are planning for PHP based development I would definitely recommend you to go for Linux based environment. I personally like the Ubuntu flavor. It is really developer friendly and power of terminal enable you the development much enjoyable. LAMP stack is combination of all open source software which helps to make dynamic web applications. This article can be considered as beginner article with LAMP stack.

The word LAMP is an acronym of Linux, Apache, Mysql, PHP / Python / Perl, combination of all first character. You might have used WAMP, XAMPP and most probably if you are looking for same bundle software in LINUX, than you can make use of tasksel to enable all features together. There are many tutorials around guide you to install LAMP stack but if you are not willing to run many commands and installing separately software than solution here.

This step by step process assumes that you have already Ubuntu installed in your machine.

You might also be interested on reading “How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)”

3 Easiest Ways to install LAMP:

There are there different ways you can easily install LAMP server on Ubuntu as below.

• Using Tasksel GUI

• Using Single Line Tasksel Command

• Using XAMPP bundle software

Step by Step Procedure:

Step1: Update Ubuntu:

Once you have Ubuntu installed, make sure everything up to date. You can update / upgrade Ubuntu by issuing below commands.



sudo apt-get update

sudo apt-get upgrade

Step2: Opening Tasksel Interface:

Our next step is to install tasksel which enable you to install LAMP stack bundle software. Generally many people do install all software separately. In this article I will show you how you can save time simply using apachefriends project or simple command to wrap up all together. Open your terminal and type below command to open tasksel.



sudo tasksel

Step3: Select LAMP Server:

Once you enter the above command you can see the window as below.

Select LAMP server by pressing space and tab to select “ok” to start installation process.

Step4: Setting Mysql Password:

When the process will prompt you to set new password for mysql server, type and confirm the password again and hit ok.

The installation process will continue as below screen.

• Using Single Line Tasksel Command:

You can also install the same using single line of command by issuing below command from your terminal window.



sudo tasksel install lamp-server

To make sure PHP running fine we will create a file called info.php into the /var/www/ directory. Paste below code into it.



<?php
  phpinfo();
?>

Now go to browser and enter http://localhost/info.php

That's all. You are done.

Conclusion

Hope this article helpful to guide you step by step LAMP stack installation on Ubuntu. Feel free to share or like us on facebook/ google plus. Keep visiting.

Have a nice day.

5 Best Things You Should Know About PHP 7

2015-04-27T00:37:00.000+05:30

Introduction:

Hey Guys!

Last article was “Building A Simple Product Management App Using Angular JS + Cygnite PHP Framework + Bootstrap - Part1”.. Tutorial part2 will be posted coming days. I have drafted this article couple of days back and finally got some time post here. You might have heard about the new major version of PHP is under active development since a year and finally scheduled to release this year. The PHP 7 timeline was approved by core members and aims to release PHP7 in OCT 2015. Even though little delay but we are lucky to see PHP7 end of this year. With the RFC for PHP7 timeline passed (32 to 2). We have now entered into new generation and PHPng is almost ready to speed you up.

The features of PHP7 are fairly enough for advance web application development and making use of latest resources to boost you development. There are lot of talks about PHP5.7, PHP6 or PHP 7. The main reason behind the PHP7 is PHP6 has never reached to stable version, also there are many resources available about PHP6. So PHP community has chosen PHP5.6 to directly PHP7.

Let us get into some details.

1# Performance:

You might have heard about Facebook HVVM out there, to provide you maximum performance for PHP based application. So PHPNG (PHP-Next-Gen) started with the idea to provide maximum performance as Facebook HVVM provides. The performance improvement source was led by ZEND to speed up PHP based applications. As per Zend performance improvement is huge! You can find some benchmark against HVVM here. Without changing single piece of code, just upgrading to PHP7 gives you enormous performance. Deprecating many redundant features also part of performance improvement of PHP7.

2# Scalar Type Hints & Return Types:

While many developers would like able to declare return type for the function or method. By default PHP7 will allow developers to declare what kind of return type function is expected to return a value. It is almost similar as Type hinting parameters as below.

Example:




  public function isValidUser(int $id) : bool 
  {
     return isset($this->users[$id]) ? true : false;
  }

Above example is similar as Facebook HACK syntax. In this example bool indicates the function will return only boolean value. You can also have look at many example in RFC here.

This allows developers to set expecting strings, int, float or bool to be passed or returned.

3# Spaceship Operator

PHP7 will introduce a new operator called spaceship operator (<= >) otherwise called combined comparison operator. It can be used mostly in sorting and combined comparison. It works like strcmp() or version_compare().

As per the PHP RFC common uses of sorting as below.

Example:

Before PHP7:




  function order_func($a, $b) 
  {
    return ($a < $b) ? -1 : (($a > $b) ? 1 : 0);
  }

After PHP7:




  function order_func($a, $b) 
  {
    return $a <=> $b;
  }

It is a beautiful addition to the PHP version. You can find more example here.

4# Additional Features

Apart from above changes there are few new features added into the PHP7 core. I am listing few major changes below.

• Abstract Syntax Tree: – Another big change on the core. But most likely to be visible to developers. It makes parsing php code easier, less error, and way to build better things in future.
• Closure::call() : – This is the new method added into core. It allows variable binding at call time rather pre-binding.
• Null Coalesce Operator : – The coalesce operator or ?? added to the core, which returns the first operand is exists or null.

Example:

Before PHP7:
```
    $id = isset($_GET[‘id’]) ? $_GET[‘id’] : null;  
```
In PHP7:
```
    $id = $_GET[‘id’] ?? null;  //equivalent of writing old above syntax 
```
• Uniform Variable Syntax : – The main deference of existing syntax and new syntax is to keep consistence and complete variable syntax. Allows advance expressions.

Example:
```
    $$foo['bar']['baz']   interpreted as   ($$foo)['bar']['baz']
    $foo->$bar['baz']()   interpreted as   ($foo->$bar)['baz']()
```
• Unicode Codepoint Escape Syntax: – PHP7 introduced syntax to escape unicode codepoint as below.

Example:
```
    echo "\u{202E}Reversed text"; // outputs ‮Reversed text
    echo "\u{1F602}"; // outputs 😂
```

5# Cleanups:

Developers can stop recognizing method name as class name to be a constructor as per PHP4 . It has been controversial early to remove but later has been removed completely as currently we no longer required to warn PHP developer how PHP4 works. This removal added as simplicity.

mysql_* functions are completely removed as extension removed by default.

Multiple default clause support has been removed from the switch case.

Support of ASP tags (<%) and script tags (<script language="php"> </script>) has been removed meaning that you can use those tags to enter php mode.

You can find more, list of deprecated or removed functionalities here, Removed deprecated functionalities in PHP7 .

Conclusion:

Personally I believe recent changes of PHP versions, makes PHP as much more matured language. But it is good message to all PHP developers for building awesome enterprise level applications using latest PHP version.

What do you feel about PHP7 / New RFCs ? Do you think PHP development taking a turn towards better enterprise development? Let me know your thought by passing your valuable feedback or commenting below.

Feel free to share or like us. Keep visiting. Have a nice day.

Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

2015-04-03T18:57:00.001+05:30

Introduction:

My previous article was “How to install custom theme in Magento”. Recently AngularJS has occupied the market space. It became one of the most essential frontend framework. Building application using core javascript is really very painful. The code looks such messy as you need to write bunch of code or building everything from scratch. Modern application needs compact solution with the flavour of objects, this is where Angular JS enters into the web. It does fulfill all your basic needs. RESTful routing, Two-way binding, Model, dependency injection service make you to love developing web application. But in order to build full-featured web application you also need a powerful backend framework to do some of the job for you with an ease.

In this tutorial I will show you how you can make use of Angular routing to build single page application without refreshing page. I will make use of Cygnite PHP Framework, as it is easy, powerful and does awesome job handling your backend.

Getting Started:

Very first thing we need to do is install Cygnite. I will not explain installation briefly, as it is described well in Cygnite'sbeautiful documentation.

Installation:

After downloading cygnite package from github repo, unzip and rename the folder to "cygnite". Now open your browser and navigate to http://localhost/cygnite/. You will see Cygnite’s welcome page as below.

Live Demo Download

After downloading the skeleton package from GITHUB, we need to install Cygnite core packages in order to make the application work. Please ensure you have composer installed already into your machine, and issue below command from your project root directory to install framework into your system.



  composer install

Database Configurations:

Before getting started with migrations you need to configure database connections into /apps/configs/database.php file. If you open the file you can see sample database connection provided. You may change accordingly. You can see we are making use of “cygnite” database, you may create same database, follow the steps or use different database and make changes accordingly.



  'db' => array(
            'driver' => 'mysql',
            'host' => 'localhost',
            'port' => '',
            'database' => 'cygnite',
            'username' => 'root',
            'password' => '',
            'charset' => 'utf8'
         )

Once you configure database connection, you are ready for running migrations.

You may be also interested to read Facebook Style Autocomplete Using AngularJS + Cygnite PHP Framework + MySQL

Migrations & Seeding:

If you open /apps/database/migrations/ folder you can see some files with number prefixed (xxxx_product.php etc.). These are the migration files we will run. Open your terminal, if you are using windows obviously command prompt and execute below command from your installation directory to create schema file and run migrations.

Before running migration please make sure you are running migrations.sql query into your database which is available into apps/database/migrations.sql.




 cd console/bin 

 php cygnite migrate

Before running above command make sure you are changing the database connection name into the migration file (apps/database/migrations/xxxx_user.php). Then run the command you will see new table “user” created into your database with sample data. To check you may manually open phpmyadmin and find table over there. This is the table by which we will authenticate users.

RESTful Routing:

We will display some basic layout page where angular templates will render. Want to display multiple theme based on the page ? Cygnite layout just made it simple. You can see if you just enter the base url it will display different page and different page when uri match with routing uri "angular". Simply define layout in your controller and it will make use of the theme you wish. You can controllers using routing and also directly via uri. In the apps/ directory you will also find "routes.php" file where we can define routing for our application. Open the file and add below routing to the file in order to display our login page by default.




 $app->router->get('/', function ($router)
 {
   echo Widget::make('home:index'); // apps/views/home/index.view.php
 });

It will display the basic page from where you will find login link, click on that and login page will appear. You can login into the application using your credentials.

Default credentials are below:




Email: admin@cygnite.com

Password: admin@123

You can make use of Migrations files to seed some sample users to authenticate.

Controllers:

You will find AuthController available into your apps/controllers/ directory. This controller used to authenticate users. You can find checkAction and logoutAction. You don't need write authentication code as AuthController shipped with Cygnite skeleton project. Auth Controller looks like below.



namespace Apps\Controllers;

use Cygnite\Common\Encrypt;
use Cygnite\Common\Input\Input;
use Cygnite\Foundation\Application as App;
use Cygnite\Mvc\Controller\AbstractBaseController;
use Application\Components\Authentication\Auth;

/**
* This file is generated by Cygnite CLI
* You may alter code to fit your needs
*/

class AuthController extends AbstractBaseController
{
    //protected $layout = 'layout.base';

    protected $templateEngine = false;

    private $auth;

    /**
    * Your constructor.
    * @access public
    *
    */
    public function __construct()
    {
        parent::__construct();
        $this->auth = Auth::model('\Apps\Models\User');
    }


   /**
    * Default Action
    */
    public function indexAction()
    {
    }

    /**
    * Authenticate user and login into the system
    *
    */
    public function checkAction()
    {
        $input = Input::make();
        $post = $input->json();

        $crypt = new Encrypt();
        $credentials = array(
            'email' => $post->email,
            'password' => $crypt->encode($post->password)
        );

        if ($this->auth->verify($credentials)) {
            $this->auth->login();
            $userInfo = $this->auth->userInfo();
            echo json_encode(array('success' => true, 'flash' => 'Logged In Successfully!!', 'name' => $userInfo['username']));
        } else {
            echo json_encode(array('success' => false, 'flash' => 'Invalid username or password', 'name' => ''));
        }
    }

    /**
    * Display specific information into the form to edit.
    *
    */
    public function logoutAction()
    {
        $this->auth->logout(false);

        echo json_encode(array('success' => true, 'flash' => 'Successfully Logged Out!'));
    }
}//End of your LoginController

Models:

Cygnite model classes are interacting with database. You can find the model user available in apps/models/User.php so you may not need to create it. You can also create a new model manually into apps/models/User.php and change database name.

Feeling lazy? Yes. No worry! Cygnite makes your job simple, you can simply issue below command to generate model for you.




php cygnite model:create user cygnite

Above command “cygnite” represent your database name and “user” your model name.

Index View Page:

You can simply open /apps/views/user/index.view.php file, which is the landing page of our application. This single view page render all angular templates into it. In this page you will also find ng-app="MyTutorialApp" in the tag, “ng-init” and “ng-view” directives of angular js framework. You may get more informations about those in angular documentation.

In your view page you must have below tag with angular module name, baseurl, and ng-view. Apart from that you also required to include angular.min.js script, app.js, and bootstrap css etc. You can find the view in apps/views/home/index.view.php file.




  <html lang="en" ng-app="MyTutorialApp">
 <head>
<link rel="stylesheet" type="text/css" title= '' href="/mycygnite/assets/css/bootstrap/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" title= '' href="/mycygnite/assets/css/bootstrap/css/bootstrap-theme.min.css" >
 </head>

 ..............


 <base href="{{baseUrl}}" ng-init="baseUrl = '<?php echo Url::getBase(); ?>'" />


 <div id="view" ng-view></div>

 <!-- load angular and angular route via CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
 <script type="text/javascript" src="/mycygnite/assets/js/angular/app.js"></script>

Our all angular templates will render into “ng-view” directive.

Angular Templates:

If you open assets/ folder you will find another folder called templates/ where all your templates located. Each template called via angular routing. I will not display template html code here as you can find easily there.

Angular Module Script:

If you open /assets/js/angular/ you will find app.js which is has all necessary code for angular to work with Cygnite to authenticate users. For this tutorial we are making use of Angular routing, Factory Service, Controllers etc. So end of this tutorial you will be able to understand how Angular routing, Authentication Service, Controllers works.

Below code to define and getting the app object. We are also using ngRoute as dependency below.




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

and in the next line we are configuring routes to repond to our url.




 app.config(function($routeProvider) {
    //………………
 });

And next AuthenticationService factory to authenticate user against database.




 app.factory("AuthenticationService", function($http, UrlService) {
     //…………………

 });

This factory helps us to authenticate and login user, checking if user logged in, logout and get username from session.

Apart from that we have LoginController, LogoutController, HomeController to perform needed openration.

Below entire code for our angular authentication app.



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

/**
 * Configure routing for application
 */
app.config(function($routeProvider) {

    $routeProvider
        // route for the login page
        .when('/login', {
            templateUrl : 'assets/templates/login.html',
            controller  : 'LoginController'
        })

        // route for the home page
        .when('/home', {
            templateUrl : 'assets/templates/home.phtml',
            controller  : 'HomeController'
        })

        // route for the contact page
        .when('/logout', {
            templateUrl : 'assets/templates/logout.html',
            controller  : 'LogoutController'
        });
});

/**
 * Url Service manager
 */
app.factory("UrlService", function($rootScope) {
    return {
        set: function(url) {
            $rootScope.baseUrl = url;
        },
        get: function() {
            return $rootScope.baseUrl;
        }
    }
});

/**
 * Authentication Service handler
 */
app.factory("AuthenticationService", function($http, UrlService) {

    var cacheSession = function () {
        sessionStorage.setItem('authenticated', true);
    };

    return {
        login: function(credentials, url) {
            UrlService.set(url);

            var input = {'email': credentials.email, 'password': credentials.password};
            var login = $http.post(UrlService.get()+"auth/check", JSON.stringify(input));

            login.success(function (data) {
                sessionStorage.setItem('authenticated', true);
                sessionStorage.setItem('username', data.name);
            });

            return login;
        },
        logout: function() {
            var logout = $http.get(UrlService.get() +"auth/logout");

            logout.success(function () {
                return sessionStorage.removeItem('authenticated');
            });

            return logout;
        },
        isLoggedIn: function() {
            return sessionStorage.getItem('authenticated');
        },
        getUser: function() {
            return sessionStorage.getItem('username');
        }
    };

});

/**
 * Handle Login request. Authenticate user against database
 * and login into application
 */
app.controller("LoginController", function($scope, $location, AuthenticationService) {

    $scope.credentials = { email: "", password: "" };

    if (AuthenticationService.isLoggedIn()) {
        $location.path('/home');
    }

    $scope.login = function() {

        AuthenticationService.login($scope.credentials, $scope.baseUrl).success(function(response, status, headers, config) {

            //console.log(response);
            if (response.success == true) {
                $location.path('/home');

            } else {
                alert(response.flash);
                return false;
            }
        }).error(function(response, status, headers, config) {
            alert("Login error: " + status + response);
            return false;
        });
    };


});

/**
 * Logout from current session
 */
app.controller("LogoutController", function($scope, $location, AuthenticationService) {

    $scope.logout = function () {

        AuthenticationService.logout().success(function(response) {

            //console.log(response);
            if (response.success == true) {
                alert(response.flash);
                $location.path('/login');

            }
        }).error(function(response, status) {
                alert("Login error: " + status + response);
                return false;
            });
    };
});

app.controller("HomeController", function($scope, $location, AuthenticationService) {

    $scope.username = '';
    if (!AuthenticationService.isLoggedIn()) {
        $location.path('/login');
        return false;
    }
    $scope.content = true;
    $scope.username = AuthenticationService.getUser();
    $scope.title = "Hello Developer!!";
    $scope.cygnite = "Cygnite PHP Framework";
    $scope.angular = "Angular JS";

});

If you have a look at the code you can see all templates getting included only if there is a matching uri, angular routing made it just simple. AuthenticationService use to validate user against database using Ajax request, and display error if user credential doesn't match with database or if success redirect user to home page.

Conclusion:

That’s all we are done with the “Angular + Cygnite PHP + Bootstrap“ tutorial part1. You can see the entire application works without refreshing the page. That is how most of the modern application works. In the part 2 tutorial I will show you “How to Manage Products (CRUD) using Angular JS + Cygnite PHP Framework + Bootstrap”.

Hope you enjoyed the article and helpful to you to understand how Angular and Cygnite PHP Framework does awesome job together to build interactive applications. You may feel free to add more features to your application. In case if you don’t find more information about Cygnite PHP Framework or Angular JS you are looking for, take a look at Cygnite Framework and Angular JS documentation .

Got some idea? Send some love back. Please feel free to like, share or tweet. You will find more in coming days. Keep visiting.

Good Day!

How to create custom module in Magento?

2015-02-22T21:29:00.000+05:30

Introduction:

In our last post we discussed about “How to install custom theme in Magento”.. In this post I will talk about creating a custom module in magento.

Though Magento community provides you lot of modules to download or install from various third party, but what if those built in modules or third party modules doesn’t fulfill your current requirement? In such case developers can create their own custom module by understanding the Magento architecture and building it to enhance existing functionalities.

Many developers get stuck while creating their custom module into magento. That is the reason I thought to give you a sample example of creating custom module in magento with very few simple steps. It is not possible to explain everything about Magento custom module creation, so in this article I will just explain about simple custom module then next series of tutorial for the rest.

Where to start with?

I assume you have installed Magento already into your system if not you may follow Magento step by step installation tutorial.

All magento modules are located into /app/code/ directory. This directory consists of -

a. code:

- core
- community
- local

i. core: Consists of all core classes of Magento.
ii. community: Consists of community modules of Magento.
iii. local: You may not find this directory on installation of latest Magento. You can manually create it, where our custom module will be placed.

We will call above three directories together as “code pool”.

Another two main directory we should know are: “design” and “etc”

b. design: This folder consists of all your layout and view files.

c. etc: Consists of module configuration files.

Getting Started with Magento Module Development:

Step1: Module Naming

We need to give your custom module name as per the Magento standard. Your module name should be look as below.



  <Namespace>_<Module>

For example I am creating custom module

  <Cygnite>_<HelloWorld>

Step2: Custom Module Structure:

Magento custom module consists of below.

Block: Consists of classes that are used to display data in view template file.

controllers: This folder consists of controller classes. Controllers are request handler (when user request url), used to define page layout, block etc.

etc: Consists of module configurations files. It has config.xml file. It tells magento how many files module has and module version etc.

Helper: Consist of helper classes. Helpers are act as utility class with functions, which can be used anywhere in the application.

Model: Consists of business logic of the module. Generally models are to interact with the database and processing data.

sql: This folder consists of sql script file, which is used to create, update or delete tables.

Now go to app/code/local/Cygnite/HelloWorld/controllers/ and create controller class called IndexController.php with below content.




class Cygnite_HelloWorld_IndexController extends Mage_Core_Controller_Front_Action
{
    public function indexAction()
    {
       echo "Hello 'appsntech.com' World!!";
    }
}

Step3: Creating Frontend Module and Routing Mechanism:

Now go to etc folder inside the same Cygnite > HelloWorld module and create a file called config.xml and paste below contents inside.



<?xml version="1.0"?>
<config>
    <modules>
        <Cygnite_HelloWorld>
            <version>0.1.0</version>
        </Cygnite_HelloWorld>
    </modules>
	
    <frontend>
        <routers>
            <helloworld>
                <use>standard</use>
                <args>
                    <module>Cygnite_HelloWorld</module>
                    <frontName>cygnite</frontName>
                </args>
            </helloworld>
        </routers>        
    </frontend>     
</config>

In this above xml file in the tag we are defining module name and version. Inside tag we have where we will define our routing to our module, by this magento will understand how to access our module via url. Inside the tag will define the front name by which we can access the controller.

Now we can access the IndexController using below url.



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

Before that we need to active our custom module.

Step4: Configure and Activating Custom Module:

We need to active our custom module in order to access it. We will create a config file inside app/etc/modules/ folder by naming it “Cygnite_HelloWorld.xml” and paste below code.



<?xml version="1.0"?>
<config>
    <modules>
        <Cygnite_HelloWorld>
            <active>true</active>
            <codePool>local</codePool>
        </Cygnite_HelloWorld>
    </modules>
</config>

This configuration file will tell magento where our module is located. In the above tag used to activate or deactivate the module. We have specified true inside tag, meaning that our module is activated. To confirm you can also login into admin panel and go to System -> Advance -> Cygnite_HelloWorld and enable or disable it.

Congrats! We are done with. Now go to url http://localhost/index.php/cygnite/index and it will print “Hello appsntech.com World!!”. We are done with our first hello world custom module.

Conclusion:

Hope you found this article helpful for step by step magento custom module creation. If you are also interested to write tutorial for us you can post me. If this tutorial helps you then please don't forget to like, share with friends, or leave your comments below to share some love us back.

Keep visiting for upcoming posts. Have a nice day.

How to install custom theme in Magento?

2015-01-19T03:08:00.000+05:30

Introduction:

My last article was “How to install Magento step by step in wamp server”. . Recently I came across a task where I need to integrate a custom theme into Magento. I would like to share my experience with you step by step. Magento is another most demanded open source ecommerce platform by e-bay inc. Its modular structure, flexibility and robustness made it very well known in PHP world. In this article I will show you how to integrate custom theme in Magento.

To achieve this we will download any theme from online and install into magento. Magento uses “app/design/” and “skin” directory for enhancing visual experience of the store shortly we call theming / skinning.

• app/design: used to render template and html into browser.

• skin: used to hold all your CSS, JS, Images etc.

I am using Magento 1.9 version and community edition. Below are the steps to install your custom theme into magento.

Download Magento Theme & Save Into Magento Directory:

Step 1:

Download the theme according to your application needs, I have downloaded ebajes theme from https://www.halothemes.com/theme/ebajes-free-responsive-electronics-magento-ce-theme and we will install it into our magento application.

Step 2:

I have created package name as myebajes into my app/design/frontend and copy all files into it, from the downloaded theme. After copying my folder structure look like below.

app/design/frontend/myebajes/ebajes/default/

I have copied layout, template, locale etc. folder from the downloaded theme into my custom theme ebajes directory.

Step 3:

Copy all files and folders to respective magento folder. I copied downloaded theme skin and paste it contents into magento skin directory, likewise you need to copy all respective contents into your magento local directory. Make sure you are following same folder structure while copying things.

Directory Structure of Custom Package:

Switching Theme Using Magento Admin Panel:

Step 4:

Now login to magento admin panel and visit design tab from system/configuration link.

System > Configuration > Design

From the upper left corner you will find drop down box called “Current Configuration Scope” by which you can select the store for which you are applying theme configurations.

Step 5:

Now enter your package name (“Current Package Name”) where your custom theme exists. In my case my package name is “myebajes”. If Current Package Name left blank magento automatically take “default” one.

Some cases if only for home page you want different theme then you may go to cms > home > design tab, in the “Custom Design” select "Custom Theme" to preferred one. Doing so you will be able to see different theme only for the home page.

Step 6:

Now click on “Save Config” to save your configuration changes in order to reflect into out frontend pages. Reload your website and you will be able to see your new custom theme.

If you wish to switch to your default theme then you need to change all configuration which we have changed above as “Current Package Name” to “default”, change “Templates”, “Skin (Images / CSS” name, “Layout” name etc. if you made changes.

Conclusion:

Hope you found this article helpful for step by step magento theme customization. If you are also interested to write tutorial for us you can 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.

How to install Magento Step by Step in WAMP server?

2014-12-12T02:43:00.000+05:30

Introduction:

My last article was “Google No Captcha reCAPTCHA”. . Magento is another most advance open source ecommerce platform. Its modular structure, flexibility and robustness made it very well known in PHP world. If you are beginner and wondering “How to install and configure Magento” then this article I will show you simple steps how to install Magento v1.9 into WAMP server.

Magento Installation & Configuration - Step by Step guide

Step 1:
Go to Magento website (http://www.magentocommerce.com/download) and download the magento community edition as your choiceble format. I have downloaded zip format.

Step 2:
Extract the zip file and paste it inside your www root directory. We will rename folder to magento as below screenshot.

Step 3:
Go to phpmyadmin and create a database called “magento”. This is where all magento tables will generate.

Step 4:
Before next step make sure curl extension enabled and max_execution_time increased in your php.ini file.

Step 5:
Open your browser and enter http://localhost/magento/ will display below page, agree terms and condition and click continue.

Step 6:
Next screen you will find Localization, you can keep as it is or change it later on from the admin panel. Click continue and you will be landed on configuration screen where you are required to give your database connection details as screen below. In my case I have configured database name as magento, username root and no password. Once you filled click continue to proceed next.

Step 7:
Next screen you may create admin account. That’s it. We are done with the configuration. You will find two button end of the page called “frontend” and “backend” as screen below. Save the encryption key in safe place.

You have successfully installed magento in WAMP server. You can click visit frontend by clicking frontend button and admin panel to manage store.

Conclusion:

Hope you found this article helpful. I will continue the magento series in my next posts. Upcoming tutorial you will find “How to do magento theme customization?”, “How to create custom module in Magento?” etc. Don't forget to like, share, or leave your comments below.

Stay tuned! Keep visiting for upcoming posts. Have a nice day.

Google introduced reCaptcha-“Are you a Robot ?” app using PHP

2014-12-06T00:54:00.000+05:30

Introduction:

My last article was “Facebook style profile photo upload + Thumbnail Image + Saving into database”.

Bored looking at old Captcha test?

Google introduced latest security update “No CAPTCHA reCAPTCHA API” to protect your website from spam, robots and abuse. It is a complete redesign of Captcha system by Google. They made Captcha system very clear, easy to use. Simple checkbox to confirm they are human or not. Its sound very simple, but it is not, Google does all the magic behind the hood that makes this system more secure and reliable.

Impressive! I have implemented new API class with simple registration form using PHP and HTML. I would like to share with you all step by step.

You can have a look at the demo page, also can download the API class from below.

Live Demo Download

Step 1: To get reCAPTCHA Click Here

Step 2: Register your website domain to generate reCAPTCHA secret key as below.

Step 3: Click register to get reCAPTCHA secret key and site key. Store and keep it safe.

i. Use Site key in html code where you want reCAPTCHA should appear.
ii. Google Secret key to communicate with Google API service. Keep it safe place.

Step 4: Create a new page called index.php copy and paste below html code into it.




<!doctype html>
<html lang="en">
  <head>
  <meta charset="UTF-8" />
    <title>Google reCAPTCHA Demo</title>	
	<script src='https://www.google.com/recaptcha/api.js'></script>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
	<style type="text/css">
		.formbox { width:400px; height:auto;margin: 0px auto;padding: 20px;border: 1px solid #e5e5e5;box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;margin-top:140px;}
	</style>	
  </head>  
  <body>
<?php
include 'lib/ReCaptcha.php';
include 'ActionController.php';
include 'database.php';

$dns = "mysql:host=localhost;dbname=google";
$username = 'root';
$password = '';
$secretKey = '6Lddzf4SAAAAALZFILTYX36qnXvKI3EQk3qDEIia';

$app = new ActionController(new ReCaptcha, new Database($dns,  $username, $password));

$error = "";

if($_SERVER["REQUEST_METHOD"] == "POST")
{
    if (isset($_POST['g-recaptcha-response']) && $_POST['g-recaptcha-response'] !="") {
        $reCaptcha = $_POST['g-recaptcha-response'];

        $app->setGoogleSecretKey($secretKey);
    
        if (!$app->verify($reCaptcha)) {
            $error =  "Please enter your reCAPTCHA again!";
        }  else {
            $app->saveRegistrationInfo($_POST);
        }

    } else {
        $error = "Please check recaptcha before submiting form.";
    }
}
?>

  
  <div class="container" id="content">
  <div class="row formbox">
			<form action="" method="POST" role="form">
			
					<div class="form-group">
						<label class="col-sm-2 control-label">Username </label> 
									<input type="text" name="username" class="form-control" placeholder="Username"/>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">Password </label>
									<input type="password" name="password" class="form-control"  placeholder="Password"/>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">Phone</label> 
									<input type="text" name="phone" class="form-control" placeholder="Phone"/>
					</div>				
				  <!-- Your reCAPTCHA will appear here-->
				  <div class="g-recaptcha" data-sitekey="6Lddzf4SAAAAAHDKXw0TOcJoG_h-0APraljsIh8W"></div>
				  
				  <span class='msg'><?php echo $error; ?></span>
				  <br>
				  <input type="submit" name="btnSubmit" value="Submit" class="btn btn-sm btn-success">
				  
			</form>
	
	</div>
	
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</div>

  </body>
</html>

Step 5: Create a PHP file called /lib/ReCaptcha.php paste below code where we will validate reCAPTCHA via Google API and receive response.




class ReCaptcha
{
    public $captchaUrl = "https://www.google.com/recaptcha/api/siteverify";

    public $googleSecretKey;

    public $remoteIp;

    public function setReCaptchaSecretKey($key)
    {
        $this->googleSecretKey = $key;
    }

    public function getGoogleSecretKey()
    {
        return isset($this->googleSecretKey) ? $this->googleSecretKey : null;
    }

    public function validate($reCaptcha)
    {
        $url = null;
        $curlInfo = array();
        $url = $this->captchaUrl."?secret=".$this->getGoogleSecretKey()."&response=".$reCaptcha."&remoteip=".$_SERVER['REMOTE_ADDR'];

        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_TIMEOUT, 10);

        $curlInfo = curl_exec($curl);
        curl_close($curl);

        return $curlInfo;
    }

    public function process($reCaptcha)
    {
        $result =$this->validate($reCaptcha);
        return json_decode($result, true);
    }
}

Step 6: Create a file called ActionController.php via which we will interact with ReCaptcha API. Paste below code into it.




class ActionController
{
    private $connection;

    private $reCaptcha;

    final public function __construct(ReCaptcha $reCaptcha, Database $connection)
    {
        $this->reCaptcha = $reCaptcha;
        $this->connection = $connection;
    }

    public function setGoogleSecretKey($key)
    {
        $this->reCaptcha->setReCaptchaSecretKey($key);
        return true;
    }

    public function verify($reCaptcha)
    {
        $response= array();
        $response = $this->reCaptcha->process($reCaptcha);

        return $response['success'] ? true : false;
    }

    public function saveRegistrationInfo($data)
    {
        // Save information into database
    }
}

Step 7: Create a file database.php paste below code into it. This class act as wrapper class to manipulate database operation.




class Database extends \PDO
{
    public $db;
    
    public function __construct($dns,  $username, $password)
    {
        $this->db = parent::__construct($dns,  $username, $password);
    }
    
    public function getConnection ()
    {
        return isset($this->db) ? $this->db : null;
    }
}

[Note: Make sure curl extension enabled in your php.ini file.]

Using Javascript API for reCAPTCHA:

Another easiest way to integrate reCAPTCHA into your website is using javascript API. You can simply include api.js and div to render reCAPTCHA as below.




<div class="g-recaptcha" data-sitekey="your_site_key"></div>

Explicitly render using javascript onload




<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
  </body>
</html>

Minimum Browser Requirement:

Chrome 3.0.195, Firefox 3.0, Internet Explorer 7.0, Opera 10.10, Safari 4.0

Conclusion:

Hope you found this article helpful. Don't forget to like, share with friends, or leave your comments below.

Keep visiting for latest posts. Have a nice day.

Facebook style profile photo upload + Resize Image + Saving into database

2014-12-02T04:07:00.000+05:30

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.

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

2014-11-24T00:14:00.001+05:30

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

2014-11-15T13:46:00.000+05:30

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.

May be Interested, Check : 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.

Generate CRUD application within 2 minute

2014-11-06T00:28:00.000+05:30

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

2014-11-02T22:50:00.000+05:30

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.

Facebook style wall posting using Cygnite PHP Framework, Jquery, Ajax

2014-10-25T03:00:00.001+05:30

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 you will like the small app. Top of this script you can build implement much modular features as Facebook or any other social network has. Will add more features. Stay tuned!

If you find above tutorial helpful, please dont forget to give a small like or share with friends, also leave your comments below. Have a nice day. Keep visiting for interesting articles.

Reading and importing CSV file into database using PHP

2014-10-18T18:19:00.000+05:30

Introduction:

Hi guys, my last article was about "Building RESTful Web Service using Cygnite PHP Framework, MySQL" . Today I would like to write about “Reading csv file using php”. This article may be useful for beginners or if you are willing to write flexible CSVReader library. Let me show you how you can read and return simple array as Column and value pair using simple line of code.

Step 1: Reading CSV file:

Create a file call CsvReader.php and paste below code.




 function readCsvToArray($path, $delimiter = ';')
    {
        $csvArray = $headerArray = $csvFilledArray = array();

        if (($handle = fopen($path, "r")) !== FALSE) {
            $i = 0;
            while (($dataArray = fgetcsv($handle, 4000, $delimiter)) !== FALSE) {

                $count = count($dataArray);

                for ($j=0; $j< $count; $j++) {

                    if ($i ==0) {
                        $headerArray[$i][$j] = str_replace(' ', '_', $dataArray[$j]);
                    } else {
                        $csvArray[$i][$j] = $dataArray[$j];
                    }
                }

                if ($i != 0) {
                    $csvFilledArray[$i] = array_combine($headerArray[0], $csvArray[$i]);
                }

                $i++;
            }
            fclose($handle);

            return $csvFilledArray;
        }
    }

Step 2 : Returning output as Array:

Now include the library file and call the function. Find the demo CSV file here.




require 'CsvReader.php';
$path = 'country_csv_reading_using_php.csv';

$csvArray = array(); 
$csvArray =  readCsvToArray($path, ‘;’);

echo "";
print_r($csvArray);
echo "
";

Step3: Importing data into Mysql Database:

Let us consider our table is “CountryInfo” and table has columns as follows.




"Sort_Order", "Common_Name", "Formal_Name", "Type",
"Sub_Type", "Sovereignty", "Capital", "ISO_4217_Currency_Code",
 "ISO_4217_Currency_Name", "ITU-T_Telephone_Code", "ISO_3166-1_2_Letter_Code", 
"ISO_3166-1_3_Letter_Code", "ISO_3166-1_Number", "IANA_Country_Code_TLD"

Now we can loop throw the array and insert values into the database.

Paste below code to prepare all queries together and execute it.




$sql = '';

$sql = 'INSERT INTO `CountryInfo` (`Sort_Order, `Common_Name`, `Formal_Name`, `Type`,
      `Sub_Type`, `Sovereignty`, `Capital`, `ISO_4217_Currency_Code`,
      `ISO_4217_Currency_Name`, `ITU-T_Telephone_Code`, `ISO_3166-1_2_Letter_Code`, `ISO_3166-1_3_Letter_Code`,
      `ISO_3166-1_Number`, `IANA_Country_Code_TLD`) VALUES';

$data = array();

foreach ($csvFormatedArray as $key => $value) {

    $data[] = " VALUES ( '".$value['Sort_Order']."', '".
                  $value['Common_Name']."', '".
                  $value['Formal_Name']."', '".
                  $value['Type']."', '".
                  $value['Sub_Type']."', '".
                  $value['Sovereignty']."', '".
                  $value['Capital']."', '".
                  $value['ISO_4217_Currency_Code']."', '".
                  $value['ISO_4217_Currency_Name']."', '".
                  $value['ITU-T_Telephone_Code']."', '".
                  $value['ISO_3166-1_2_Letter_Code']."', '".
                  $value['ISO_3166-1_3_Letter_Code']."', '".
                  $value['ISO_3166-1_Number']."', '".
                  $value['IANA_Country_Code_TLD']."' )";
}

if (count($values)) {
    $sql = $sql.implode(',', $data);
    # build query
}

As the "Best Coding Practice" you can see we are not doing any database operation inside the loop, building the query and finally executing as single query. By doing this you are not running n number of queries instead single optimised query to save all.

Step 4: Inserting into database:

Let us now connect with the database and import csv content into database.




try {
    $conn = new PDO("mysql:host=localhost;dbname=tutorials", 'root', '');
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line
    $q = $conn->prepare($query);
    $q->execute();
} catch(PDOException $e) {
    echo $e->getMessage();
}

Conclusion:

Hope enjoyed the post and you can build modular library on the top of this small step by step article.

If you find above tutorial helpful, please don’t forget to give a small like or share with friends, also leave your comments below.

Have a nice day. Keep visiting for interesting articles.

Appsntech.com The Tutorial Hub For Developers

Creating A Task List Using Craft Console

Creating A To-Do List:

What is Craft Console?

Creating a Table For To-Do List:

Meet Migration & Schema Builder:

Generating CRUD Using Craft:

Creating And Updating the To-Do List

Liked this? Read these!

Wrapping Up:

Travis CI: Continuous Integration for PHP Project

Introduction:

Get Started With Travis CI:

Step1: Travis UI- Sign in:

Step2: Travis Setup- Activating for the repository:

Step3: Travis Aware- Add a .travis.yml file into your Repository

Step4: Adding Travis CI Service into GITHUB:

Step5: Travis Build- Triggering Build Process:

Build History:

Learn More:

Wrapping Up:

Get Started With Test Driven Development: Unit Testing With PHPUnit?

Introduction

Unit Testing & Why?

Installing PHPUnit:

PHPUnit - Composer Installation:

Environment Setup:

Sample Application Structure:

Writing Our First Test Cases:

Few Basic Assetion Methods To Remember:

Running Tests:

Sample Output:

Assertion Failure:

Assertion Success:

Conclusion:

10 Best PHP Tools For Developers

Introduction

1.TWIG–

2. DebugBar–

3.Geocoder–

4.PHP Image Workshop–

5. Sylius–

6.SlimStarter–

7.SimpleTest–

8.Scavenger–

9.Hoa–

10.phpDocumentor-

Backbone JS vs Angular JS- Uncovering key differences

Introduction

BackboneJS vs AngularJS – Background

BackboneJS vs AngularJS- Website Categories

BackboneJS vs AngularJS- Architecture

DOM -

Data Binding -

BackboneJS vs AngularJS- Templating

BackboneJS vs AngularJS- Validation

BackboneJS vs AngularJS- Non-Restful Backend

BackboneJS vs AngularJS- Overall Performance

Final Thoughts

8 Brilliant Tools That Empower Web Developers To Work With A Flair

Introduction

1. Freepik

2. ExpressionEngine

3. Play Framework

4. Hotjar

5. HTML5 Maker

6. Cygnite - A Modern Toolkit For Web Developers

7. Apache Couch DB

8. Google Fonts

Reflection

Author Signature:

AngularJS Is A Superior Javascript Framework ­ Let's Explore Why

Introduction

1. Has an ideal framework size that helps develop a variety of apps

2. Helps generate an intuitive UI

3. Delivers precise results while catering to your client's needs

4. Augments parallel development

5. Minimal coding is required

6. Makes single page app development easier

7. Aids application testing

AngularJS Is A Superior Javascript Framework Let's Explore Why

How to Guide to Create Mobile Responsive Design