How to install Magento Step by Step in WAMP server?


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


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


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.

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