Friday, March 2, 2018

NodeJS Vs AngularJS

AngularJS and Node.js are two of the most popular leading JavaScript Application frameworks, which are used for building interactive and feature rich cross-platform web applications. Both the frameworks use techniques like AJAX, DHTML, DOM scripting and much more. The following infographic explains their differences in detailed points.
From: https://blog.sagipl.com/node-js-vs-angular-js/

NodeJS Express Framework


Introduction

Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.

Features:

  1. Allows to set up middlewares to respond to HTTP Requests.
  2. Defines a routing table which is used to perform different actions based on HTTP Method and URL.
  3. Allows to dynamically render HTML Pages based on passing arguments to templates.


How To Install Express?

  1. Run NodeJS command to install Express
    • e.g. sudo npm install express --save
    • The above command saves the installation locally in the node_modules directory and creates a directory express inside node_modules.
  2. Run NodeJS command to install important modules
    • e.g. sudo npm install body-parser --save
      • This is a node.js middleware for handling JSON, Raw, Text and URL encoded form data.
    • e.g. sudo npm install cookie-parser --save
      • Parse Cookie header and populate req.cookies with an object keyed by the cookie names.
    • e.g. sudo npm install multer --save
      • This is a node.js middleware for handling multipart/form-data.


Simple Demo

  1. Go to your target http root folder.
  2. Prepare server.js script file
    • var express = require('express');
    • var app = express();
    • app.get('/', function (req, res) {

    •    res.send('Hello World');
    • })

    • var server = app.listen(8081, function () {
    •    var host = server.address().address
    •    var port = server.address().port
    •    
    •    console.log("Example app listening at http://%s:%s", host, port)
    • })
  3. Type NodeJS command to start the server
    • e.g. sudo node server.js
  4. Browse the web page
    • e.g. http://localhost:8081/
    • This app responds with Hello World! for requests to the homepage. For every other path, it will respond with a 404 Not Found.
  5. To stop the server, press (in the console window):
    • CTRL-C


NodeJS Simple HTTP Server (Local Web Server)


  1. Install NodeJS
  2. Install http-server package
    • e.g. sudo npm install -g http-server
  3. Go to your target http root folder
    • e.g cd\web\root
  4. Type command to run http-server
    • e.g. http-server
  5. To stop the server type:
    • CTRL-C

Friday, January 19, 2018

Heroku Dashboard Create App


1. Create new app in Heroku Dashboard


https://dashboard.heroku.com/apps

Find the NEW Button.


Select Create new app.

Give a name eg test247 .


2. Using Heroku CLI


https://dashboard.heroku.com/apps/test247/deploy/heroku-git

Notice that in the Deployment Method section, Heroku Git button is selected.


3. Follow the guide


https://dashboard.heroku.com/apps/test247/deploy/heroku-git



Heroku Getting Started PHP On Uwamp




1. Register with heroku

https://signup.heroku.com/account



2. Select PHP in Heroku Dashboard


https://dashboard.heroku.com/apps

3. Prepare Local System Environment

This tutorial uses the following Local System Environment:

3.1. Windows 7 Professional SP1
3.2. Uwamp version 3.1.0 (https://www.uwamp.com/file/UwAmp.exe)
3.3. Visual C++ Redistributable for Visual Studio 2012 Update 4  vcredist_x86.exe (https://www.microsoft.com/en-us/download/confirmation.aspx?id=30679) [this is required by Apache]

... otherwise Apache will not run in this WAMP package

3.4. Visual C++ Redistributable for Visual Studio 2015 - vc_redist.x86.exe (https://www.microsoft.com/en-us/download/details.aspx?id=48145) [this is required by PHP runtime]
...otherwise windows will report missing dll files

4. Install Required Tool


4.1. Composer - https://getcomposer.org/download/

Install Composer and select the PHP version that you have selected via Uwamp in step 3.2 above (Heroku requires PHP version 7+)

4.2. Heroku CLI - https://devcenter.heroku.com/toolbelt-downloads/windows32


5. Check That All Installations Were Successful

Run Commands

5.1. PHP:  php -v
5.2. Composer: composer -v
5.3. Git: git --version  (installed by Heroku CLI in step 4.2)
5.4. Heroku: heroku (it will require you to enter your heroku account name and password)


6. Setting Up Test Project

Follow the steps in https://devcenter.heroku.com/articles/getting-started-with-php#prepare-the-app


git clone https://github.com/heroku/php-getting-started.git

cd php-getting-started

heroku create

git push heroku master

heroku ps:scale web=1

heroku open

Refer the following screenshots:



7. Check in Heroku Web Dashboard





8. Edit and Commit Changes

Edit your codes and then type the following commands:

git commit -a -m "a message describing what you did"

git push origin master



Monday, January 1, 2018

Slim PHP Simple Setup


1) Download Package


slim.zip


2) Apache ModRewrite

the .htaccess contains the following code:

RewriteEngine On

# Some hosts may require you to use the `RewriteBase` directive.
# If you need to use the `RewriteBase` directive, it should be the
# absolute physical path to the directory that contains this htaccess file.
#
# RewriteBase /

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]


3) Get and Post Method test codes


the index contains the following code:

<?php

require 'Slim/Slim.php';
\Slim\Slim::registerAutoloader();

$app = new \Slim\Slim();

$app->get('/testget/:params+','testGet');
$app->post('/testpost','testPost');

$app->run();

function testGet($params){
   echo json_encode($params);
}

function testPost(){
   $app = \Slim\Slim::getInstance();
   $postvars = $app->request->post();
   echo json_encode($postvars);
}

?>






Silex PHP Simple Setup


1) Download Package


silex.zip

2) Apache ModRewrite

the .htaccess contains the following code:

RewriteEngine On

# Some hosts may require you to use the `RewriteBase` directive.
# If you need to use the `RewriteBase` directive, it should be the
# absolute physical path to the directory that contains this htaccess file.
#
# RewriteBase /

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]


3) Test Functions


Objectives:
Get "/"
Get "/testget/1"
Post "/testpost" with form data key message (x-www-form-urlencoded)
Get "/testgetcontents" to call Get "/testget/"
Post "/testpostcontents" to call Get "/testpost/"  with form data key message (x-www-form-urlencoded)


Codes:
<?php

require_once __DIR__ . '/vendor/autoload.php';

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

$app = new Silex\Application();

$app->get('/', function(){
return new Symfony\Component\HttpFoundation\Response("Hello Silex");
});


$app->get("/testget/{id}", function($id){
   return "testget - {$id}";
   
});

$app->post('/testpost', function (Request $request) {
    $message = $request->get('message');
    $reply = 'You have sent the following message:'.$message;
    return new Response($reply, 201);
});


$app->get('/testgetcontents',function(){
   $contents = file_get_contents('http://demo.razoph.com/silex/api/');
   return $contents;
});


function file_post_contents($url, $data, $username = null, $password = null){
   $postdata = http_build_query($data);

   $opts = array('http' =>
       array(
           'method'  => 'POST',
           'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
           'content' => $postdata
       )
   );

   if($username && $password)
   {
       $opts['http']['header'] .= ("Authorization: Basic " . base64_encode("$username:$password")); 
       // .= to append to the header array element
   }

   $context = stream_context_create($opts);
   return file_get_contents($url, false, $context);
}

$app->get('/testpostcontents',function(){
   $data = array("username" => "duser", "firstname" => "Demo", "message" => "testing", "email" => "example@example.com");  
   $contents = file_post_contents('http://demo.razoph.com/silex/api/testpost',$data);
   return $contents;
});


$app->run();


REFERENCES:

https://silex.symfony.com/

https://silex.symfony.com/doc/2.0/cookbook/index.html

https://www.gajotres.net/creating-a-basic-restful-api-with-silex/

http://www.robertprice.co.uk/robblog/posting-json-to-a-web-service-with-php/

https://stackoverflow.com/questions/11319520/php-posting-json-via-file-get-contents

https://symfony.com/doc/current/components/http_foundation.html

https://www.gajotres.net/creating-a-basic-restful-api-with-silex/

https://www.sitepoint.com/introduction-silex-symfony-micro-framework/

https://stackoverflow.com/questions/37346700/get-post-body-data-in-silex-restful-api

https://sleep-er.co.uk/blog/2013/Creating-a-simple-REST-application-with-Silex/

http://editor.swagger.io/

https://swagger.io/swagger-editor/

http://www.yaml.org/start.html

http://yaml-online-parser.appspot.com/

https://learnxinyminutes.com/docs/yaml/

https://stackoverflow.com/questions/1726802/what-is-the-difference-between-yaml-and-json-when-to-prefer-one-over-the-other

https://dzone.com/articles/working-angularjs-and-silex

https://gonzalo123.com/2015/02/02/handling-angularjs-post-requests-with-a-silex-backend/

https://gonzalo123.com/2013/06/03/working-with-angularjs-and-silex-as-resource-provider/

https://gonzalo123.com/2013/12/16/enabling-cors-in-a-restfull-silex-server-working-with-a-phonegapcordova-application/

https://stackoverflow.com/questions/643355/https-url-with-token-parameter-how-secure-is-it

https://stackoverflow.com/questions/36157059/angularjs-http-post-request-with-json-parameter-and-query-string

https://stackoverflow.com/questions/24545072/angularjs-http-post-send-data-as-json

http://tutlane.com/tutorial/angularjs/angularjs-http-post-method-http-post-with-parameters-example

https://github.com/vesparny/silex-simple-rest

https://github.com/shahroznawaz/Rest-API-in-Silex

https://github.com/mbezhanov/silex-rest-api-example

http://marinbezhanov.com/demo/vuejs-rest-client-example/#/diary

https://www.cloudways.com/blog/create-rest-api-silex/