วันเสาร์ที่ 9 กรกฎาคม พ.ศ. 2559

How to Download Composer for using Slim (a micro framework for PHP)


Step 1 : Download and run Composer-Setup.exe

Step 2 : Open Command Prompt on Windows and Run Script


-Download the installer to the current directory
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

-Verify the installer SHA-384 which you can also cross-check here
php -r "if (hash_file('SHA384', 'composer-setup.php') === 'e115a8dc7871f15d853148a7fbac7da27d6c0030b848d9b3dc09e2a0388afed865e6a3d6b3c0fad45c48e2b5fc1196ae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

-Run the installer
php composer-setup.php

-Remove the installer
php -r "unlink('composer-setup.php');"

-----------------------After Install and Telling Message-------------------------
All settings correct for using Composer
Downloading 1.1.3...
Composer successfully installed to: C:\Users\suttipong\composer.phar
Use it: php composer.phar

-Update Composer
php composer.phar self-update

HOW TO USE COMPOSER


Example : Create Project laravel with Composer : 
composer create-project laravel/laravel exampleProject --prefer-dist




Problems 1 : How to import vendor folder

If you have the problem (vendor/autoload.php) in your php file it's has not work.



Autoload File has not work and it show message in the windows


How to....

Step 1 : copy composer.phar file into your folder in server and you write the command


Step 2 : From this command. It has the generate file (vendor folder, composer.lock) in your folder


Problems 2 : class slim/slim not found with composer

You will must have to write script for test.

-How to test Autoload of Slim

<?php
   require 'vendor/autoload.php';   //call Autoload PHP Page
   $app = new \Slim\Slim();          //call Slim PHP class
   $app->get('/', function () {         //get root path
   echo "Hello World!";
});
$app->run();

-How to test Slim class

<?php
    //require 'Slim/Slim.php';
    require 'vendor/slim/slim/Slim/Slim.php';
    $app = new Slim();
    $app->get('/hello', 'hello');        //call hello page and call method hello
    $app->get('/hello/:name', function ($name) {
    echo "Hello, $name";
});
$app->run();

function hello() {
    echo "Hello World.";
}
?>

Reference :

Problems 3 : xampp server 404 page not found

index.php
<?php 
// Pull in our bootstrap file.
require_once '../src/ProjectName/bootstrap.php';
$app->run();
.htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME}% !-f
RewriteCond %{REQUEST_FILENAME}% !-d
RewriteRule ^ index.php [QSA,L]
<?php 
require_once '../vendor/autoload.php';
$app = new \Slim\App();
require_once 'Routes.php';
example.php
$app->get('/example/{name}', function ($request, $response, $args) {
    echo 'Hello ' . $args['name'];
}

Problems 4 : How to require function between class with using root path in PHP folder

/A
   foo.php
   tar.php
   B/
       bar.php
If you call foo.php (ex: http://example.com/foo.php), the working directory will be /A/. If you call bar.php (ex: http://example.com/B/bar.php), the working directory will be /A/B/.
foo.php call bar.php
<?php
require_once( 'B/bar.php' );
?>
bar.php call tar.php
<?php
require_once( 'tar.php');
?>
--------------------------------------------------------------------
URL :

1.) Composer - Dependency Management for PHP
https://github.com/kullawattana/composer

2.) Slim Framework 3 Skeleton Application
https://github.com/slimphp/Slim-Skeleton

3.) Download Composer for Create laravel and Slim Project
https://getcomposer.org/download/

4.) Laravel Project
https://laravel.com/docs/4.2/quick

5.) Install Composer on Windows
https://www.youtube.com/watch?v=ZocYVPP3nQY

6.) CURL
http://php.net/manual/en/book.curl.php

วันพุธที่ 29 มิถุนายน พ.ศ. 2559

How to install and configure AngularJS Web Project in Eclipse


ขั้นที่ 1 : ให้ไปที่ Menu Help > Install New Software


ขั้นที่ 2 : ให้ Add Repository เพื่อลง Package
Name : AngularJS
Location : http://oss.opensagres.fr/angularjs-eclipse/1.2.0/


ขั้นที่ 3 : ให้เลือก Select All เพื่อเลือก Package ทั้งหมด


ขั้นที่ 4 : ให้ทำการสร้าง Dynamic Web Project เพื่อทดสอบการใช้งาน Package


ขั้นที่ 5 : ตั้งชื่อ Project File แล้วกด Finish เพื่อสร้าง Project


ขั้นที่ 6 : เราจะได้ไฟล์ Project ขึ้นมา 1 ไฟล์


ขั้นที่ 7 : ให้ทำการ Config File Project จาก Dynamic Web Project ไปเป็น AngularJS Project


ขั้นที่ 8 : การตั้งค่าให้ใช้ NodeJS โดยให้ไปที่ Windows > Preferences




ขั้นที่ 9 : ให้ Config Properties Project เป็น AngularJS



Reference Packages :
https://github.com/angelozerr/angularjs-eclipse/wiki/Getting-Started
https://github.com/angelozerr/tern.java/wiki/Tern-Script-Path
https://github.com/angelozerr/angularjs-eclipse
https://github.com/angelozerr/angularjs-eclipse/wiki/Installation-Update-Site
https://github.com/angelozerr/angularjs-eclipse/tree/master/samples

Bootstrap Test : https://github.com/BlackrockDigital/startbootstrap-modern-business

References :
https://techanand.wordpress.com/2014/03/09/how-to-install-and-configure-angularjs-in-eclipse/
http://javahonk.com/install-angularjs-plugin-eclipse/
https://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app

ทดสอบการสร้าง Project :
http://blog.diniscruz.com/2014/02/using-angularjs-in-eclipse-part-1.html

วันอังคารที่ 28 มิถุนายน พ.ศ. 2559

How to install Package in Sublime Text 3 to build AngularJS 2 Web Project

สวัสดีครับ วันนี้ท๊อปจะมานำเสนอขั้นตอนการติดตั้ง Package ที่จำเป็นใน Sublime Text 3 ซึ่งทุก Package ที่ติดตั้งเข้าไป นำมาสู่การพัฒนา Web Application ของ AngularJS 2 ทั้งหมด

โดยขั้นตอนการติดตั้ง มีดังนี้

ขั้นที่ 1. เข้าไป Download Sublime Text 3 ที่ https://www.sublimetext.com/3


เมื่อ Download เสร็จเรียบร้อยแล้ว ให้ทำการติดตั้งลงเครื่อง

ขั้นที่ 2. ก่อนที่จะติดตั้ง Package ต่างๆ ในขั้นตอนนี้ ให้เข้าไปติดตั้ง Package Control ให้กับ Sublime Text 3 ที่ https://packagecontrol.io/ ก่อน เพื่อที่จะได้ลง Package อื่นๆ ในลำดับต่อไป



ขั้นที่ 3. เข้าไปที่ https://packagecontrol.io/installation แล้ว Copy คำสั่ง


ขั้นที่ 4. ให้เปิดโปรแกรม Sublime ขึ้นมา แล้วให้ไปที่ View > Show Console


ขั้นที่ 5. ให้ Copy คำสั่งแล้วไปวางใน Console จากนั้นกด Enter เพื่อ Run คำสั่ง โดยเมื่อเราลง Package เสร็จแล้ว ให้ Restart Program ขึ้นมาใหม่


ขั้นที่ 6. ให้กด Ctrl+Shift+P เพื่อค้นหา Install Package และเมื่อเจอแล้ว ให้ Double Click เข้าไป


ขั้นที่ 7. หลังจาก Double Click เข้าไปแล้ว ให้พิมพ์คำว่า Emmet เพื่อที่เราจะลง Emmet Package ใน User Package ของเรา แล้วก็ Double Click ลงได้เลย....


ถ้าหน้าจอปรากฏขึ้นมาแบบนี้ แสดงว่า ลงเสร็จเรียบร้อยแล้ว ให้ทำการ Restart ขึ้นมาใหม่


โดยวิดีโอแสดงวิธีการ Setup ก็ตามนี้ครับ...



ต่อมา คือ... ขั้นตอนการลง Snippets จาก Github โดยให้ทุกคนเข้าไปที่ https://packagecontrol.io/packages/AngularJS%20Snippets เพื่อใช้งานคีย์ลัดสำหรับการเรียก Service ของ AngularJS ซึ่งจะมีให้ใช้ตามหัวข้อดังนี้

-Services
-Directives
-Globals
-jQuery lite
-Scope functions
-Log functions
-Variables



มี 2 วิธีที่จะสามารถติดตั้ง Pagkage นี้ได้ คือ
-วิธีที่ 1 : ไปที่ github แล้ว Clone ด้วย NPM หรือ Download Project ลงมาแล้วไปที่โปรแกรม Sublime และ Browse Package ไปที่ Folder User ของตัวเอง หลังจากนั้นก็ Copy File Shippets มาแล้ววาง
-วิธีที่ 2 : ใช้ Ctrl+Shift+P แล้วไปที่ Install Package หลังจากนั้นค้นหาคำว่า AngularJS Snippets แล้วลง Package

โดยขั้นตอนนี้ท๊อปจะสาธิตวิธีแรกให้ดูก่อนนะ...


โดยใน Github บอกว่า ให้คุณดาวโหลดแล้วเข้าไปที่ Menu User Folder ของคุณแล้ว Copy File มาวางและก็ใช้งานได้เลย...


เราก็เริ่มทำตามที่เขาบอกกันเลย... ไปที่ Preference > Browse Packages


แล้วไปที่ User Folder


หลังจากนั้น Copy File มาวางแล้วใช้งาน Tag ได้เลยยย


ทดสอบการทำงานด้วยการสร้างไฟล์ javascript ขึ้นมา 1 ไฟล์และเรียกใช้คำสั่ง



Reference Packages:

ส่วนขั้นตอนการสร้างโปรเจค ติดตามได้ที่นี่เลย เรื่อง AngularJS Structure...

root-app-folder
├── index.html
├── scripts
   ├── controllers
      └── main.js
      └── ...
   ├── directives
      └── myDirective.js
      └── ...
   ├── filters
      └── myFilter.js
      └── ...
   ├── services
      └── myService.js
      └── ...
   ├── vendor
      ├── angular.js
      ├── angular.min.js
      ├── es5-shim.min.js
      └── json3.min.js
   └── app.js
├── styles
   └── ...
└── views
    ├── main.html
    └── ...

วันจันทร์ที่ 27 มิถุนายน พ.ศ. 2559

How to Clone AngularJS 2 Web Project from github with NPM Command and Git Bash

สวัสดีครับ วันนี้ท๊อปจะมานำเสนอวิธีการทดสอบ Web Application ที่ถูกพัฒนาด้วย AngularJS 2 ซึ่ง ณ.ปัจจุบันนี้ ก็เป็นที่นิยมอย่างมากในหมู่นักพัฒนา Web Application



สิ่งที่เราจะต้องมี คือ...

1. NodeJS เพื่อการลอง Package ด้วย cmd
2. github
3. Typescript Library
4. Json Package

วันนี้ท๊อปจะยกตัวอย่าง Dashboard Project จาก https://github.com/start-angular/SB-Admin-BS4-Angular-2 โดยที่ท๊อปจะ Clone Project มาไว้ที่เครื่องตัวเอง...


ขั้นตอนการ Setup Project

ให้เราเริ่ม Setup Package ที่จำเป็นตามคำสั่งดังต่อไปนี้

$ npm install -d : คำสั่งสำหรับลง Package



$ npm update -d : คำสั่งเพื่อ Update Package
$ npm -v : คำสั่งเพื่อตรวจสอบเวอร์ชั่นของ npm
$ npm install gulp -g : คำสั่งเพื่อลง gulp Package



$ npm install typescript-node -g : คำสั่งเพื่อลง Typescript Package



ขั้นตอนการ Clone Project

1. เราต้องการ Clone โปรเจคจาก github มาไว้ที่เครื่องของเรา
$ git clone https://github.com/start-angular/SB-Admin-BS4-Angular-2.git

2. ตรวจสอบ npm เพื่อลง Type Script
npm install -g ts-node


โดยเมื่อ Clone ลงมาที่เครื่องตาม Path ที่ระบุแล้ว ก็จะมี Folder ของ Project ปรากฏออกมา ดังรูป


3. เขียน command prompt เพื่อ Run คำสั่ง $ cd `project-directory` เพื่อ Setup Project ตาม Folder ที่ได้ Clone จาก github ลงมา


หลังจากนั้น Git Bash จะสั่ง Run Command ด้วยคำสั่ง $ npm install เพื่อลง Web Project


เมื่อลง Clone Project เสร็จแล้ว เราจะสั่ง Run Web Project ด้วยคำสั่ง $ npm start


หลังจากนั้น Server ก็จะสั่ง Start Server ขึ้นมา ผ่าน Localhost ตามที่ได้ Configuration ไว้


Project ถูก Start ขึ้นมาเรียบร้อย....



References :