Gulp.js คืออะไร ?


Gulp.js คืออะไร ? + สอนวิธีใช้



       ในการทำเว็บไซต์นั้น มักจะมีงานจุกจิกๆ มากมายที่เราทำกันจนชิน จนบางทีเราอาจลืมคิดไปเลยว่าเราเสียเวลาไปกับมันมากขนาดไหน ไม่ว่าจะเป็นการปรับคุณภาพของรูป การบีบอัดไฟล์ html, css และ js หรือแม้กระทั่งการรีเฟรชหน้าเว็บหลังจากที่เราได้แก้ไขโค้ดบางอย่างไป บทความนี้เราเลยจะมาพูดถึง tool ที่จะมาทำให้ปัญหาเหล่านี้หมดไปอย่าง gulp.js ลองมาดูกันว่ามันจะช่วยเราได้มากขนาดไหน

gulp.js คืออะไร

        gulp.js เป็น tool ที่เหมือนเป็น “คนใช้” ที่จะช่วยทำ task ต่างๆ แทนเรา แต่เดิมเราอาจต้องทำ task เหล่านั้นเอง แต่ถ้าเราใช้ gulp.js เราก็แค่บอก gulp.js ว่า task ทั้งหมดที่จะต้องทำมีอะไรบ้าง ที่เหลือก็แค่สั่งให้ gulp.js เริ่มทำงานเท่านั้นเอง

แล้วเราสั่งให้ gulp.js ทำอะไรได้บ้าง ?
task ต่างๆ ที่เราจะให้ gulp.js ช่วยทำนั้น เราจะต้องเขียนให้อยู่ในรูปของ JavaScript แต่ไม่ต้องกังวลว่าถ้าเราไม่เก่ง JavaScript แล้วจะทำไม่ได้ เพราะว่ามีผู้ใจดีมากมายที่เขียน task ต่างๆ มาให้เราเอาไปใช้ฟรีๆ ซึ่ง task ยอดนิยมที่คนมักขอให้ gulp.js ช่วยทำมีดังนี้

Compile
คอมไพล์ไฟล์ Sass/Compass หรือ LESS ให้กลายเป็นไฟล์ CSS

Minify
ย่อไฟล์ HTML, CSS และ JS รวมไปถึงรูปต่างๆ ให้มีขนาดเล็กลง

Combine
รวมไฟล์ CSS หรือ JS หลายๆ ไฟล์ให้กลายเป็นไฟล์เดียวกัน

Refresh
รีเฟรช Web Browser
ลองคิดดูว่าถ้าเราไม่ต้องมาทำ task เหล่านี้เองแล้ว เราจะทำเว็บได้เร็วขึ้นขนาดไหน ?

ลองใช้ gulp.js
เมื่อเราพอจะเข้าใจภาพรวมของ gulp.js แล้ว เราก็มาลองใช้มันดูเลยดีกว่า (เนื่องจาก gulp.js นั้นเป็น package ของ Node.js เราจึงควรมีพื้นฐานเกี่ยวกับ Node.js มาบ้าง)

1. ติดตั้ง gulp.js
อย่างแรกเลยให้เราติดตั้ง gulp.js ก่อน โดยการติดตั้งนั้น เราจะต้องทำอยู่ 2 ที่ด้วยกัน ดังนี้

1.1 Global

การติดตั้งที่ global นี้ เป็นการทำให้เราสามารถใช้คำสั่งของ gulp.js ใน command-line ได้ โดยเราจะทำเพียงแค่ครั้งเดียวเท่านั้น (งานหน้าไม่ต้องติดตั้งแบบนี้แล้ว) ให้เราพิมพ์คำสั่งด้านล่างนี้

npm install -g gulp

แต่ถ้าใครใช้ Mac อยู่ก็ให้ใส่ sudo เข้าไปข้างหน้าด้วย แบบนี้

sudo npm install -g gulp

เพียงเท่านี้ เราก็จะสามารถใช้คำสั่งของ gulp.js ใน command-line ได้แล้ว

1.2 Local

ต่อมาเราจะต้องติดตั้ง gulp.js แบบ local ด้วย ซึ่งก็คือการติดตั้ง gulp.js เอาไว้ที่ folder งานของเรานั่นเอง ให้เรา cd เข้าไปที่ folder งานของเราก่อน
cd myProject
จากนั้นก็ให้เรารันคำสั่งตามด้านล่างนี้

npm install --save-dev gulp

หมายเหตุ: หากเราจะใช้ gulp.js กับงานไหน เราก็จะต้องติดตั้ง gulp.js แบบ local เอาไว้ที่ folder งานนั้นๆ เสมอ

2. กำหนด Task ต่างๆ ลงในไฟล์ gulpfile.js
ต่อมาเราจะต้องระบุว่าเราต้องการจะให้ gulp.js ช่วยทำอะไรบ้าง ให้เราสร้างไฟล์ที่มีชื่อว่า gulpfile.js ขึ้นมา แล้วใส่ task ต่างๆ ลงไปในไฟล์ โดยใช้รูปแบบนี้

// โหลด package "gulp" มาใช้ (บรรทัดนี้ต้องใส่เสมอ)
var gulp = require('gulp');

// สร้าง task ชื่อว่า "taskName" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ
gulp.task('taskName', function() {
    // ระบุว่า task นี้ทำอะไร
});


เพื่อเป็นการทดสอบว่า gulp.js ทำงานได้แล้ว เราอาจสร้าง task ง่ายๆ ขึ้นมา ลองดู task ต่อไปนี้
var gulp = require('gulp');

// สร้าง task ที่มีชื่อว่า "siamhtml"
gulp.task('siamhtml', function() {
    // ให้แสดงข้อความ "SiamHTML" ออกมาทาง console
    console.log('SiamHTML');
});

3. รัน gulp.js
เมื่อเราสร้าง task ง่ายๆ เรียบร้อยแล้ว สุดท้ายก็มาถึงการสั่งให้ task นั้นทำงาน ให้เราใช้คำสั่งในรูปแบบนี้
gulp [ชื่อ task ที่จะสั่งให้ทำงาน]
เนื่องจากเราได้สร้าง task ชื่อ “siamhtml” เอาไว้แล้ว เราก็เลยจะสั่ง gulp.js ให้ลองทำ task นี้ดู
gulp siamhtml
เมื่อลองรันดู เราก็จะเห็นข้อความ “SiamHTML” ขึ้นมาจริงๆ เราใช้ gulp.js เป็นแล้ว !

ลองใช้ Plugin ของ gulp.js
แน่นอนว่าในการใช้งานจริง เราคงไม่มานั่งเขียน task ยากๆ ขึ้นมาใช้เอง แต่เราจะโหลด plugin ดีๆ ของ gulp.js มาใช้เลย ลองมาดู plugin ที่น่าสนใจกันดีกว่า

Sass (gulp-ruby-sass)
คอมไพล์ Sass/Compass ให้เป็น CSS
Minify HTML (gulp-minify-html)
ย่อไฟล์ HTML ให้เล็กลง
Minify CSS (gulp-minify-css)
ย่อไฟล์ CSS ให้เล็กลง
Uglify (gulp-uglify)
ย่อไฟล์ JS ให้เล็กลง
Minify รูป (gulp-imagemin)
ย่อไฟล์รูปให้มีขนาดเล็กลง
Concat (gulp-concat)
รวมไฟล์ JS หลายๆ ไฟล์ ให้กลายเป็นไฟล์เดียว
Refresh (browser-sync)
รีเฟรช Web Browser
เมื่อเลือก plugin ที่ถูกใจได้แล้ว ก็ให้ลองติดตั้งดู สำหรับวิธีติดตั้ง plugin ของ gulp.js นั้นก็ไม่ยากเลย เพราะจะเหมือนกับการติดตั้ง package ของ Node.js ทั่วไป ซึ่งมีบอกไว้ในหน้า plugin นั้นๆ อยู่แล้ว

ลองติดตั้ง Plugin สำหรับคอมไพล์ Sass
สมมติว่าเราจะติดตั้ง plugin gulp-ruby-sass ก็ให้เราพิมพ์คำสั่งนี้ (มีบอกในหน้าเว็บหลักของ plugin)
npm install --save-dev gulp-ruby-sass
จากนั้น เราก็ต้องเข้าไปเพิ่ม task ใน gulpfile.js (มีบอกในหน้าเว็บหลักของ plugin)

// โหลด package "gulp" มาใช้ (บรรทัดนี้ต้องใส่เสมอ)
var gulp = require('gulp');

// โหลด package "gulp-ruby-sass" มาใช้ (บรรทัดนี้ต้องใส่เวลาติดตั้ง plugin เสริม)
var sass = require('gulp-ruby-sass');

// สร้าง task ชื่อว่า "sass" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ
gulp.task('sass', function () {
    // ให้คอมไพล์ .scss ทุกไฟล์ที่อยู่ในโฟลเดอร์ scss
    return gulp.src(['scss/**/*.scss'])
        .pipe(sass({
            compass: true, // ใช้ Compass
            style: 'compressed', // เลือก output แบบ compressed
        }))
        .on('error', function (err) {
            console.log(err.message);
        })
        .pipe(gulp.dest('css')) // เก็บไฟล์ css ไว้ที่โฟลเดอร์ css
});

จากนี้ไป เวลาเราจะคอมไพล์ไฟล์ Sass ให้เป็นไฟล์ CSS เราก็แค่พิมพ์คำสั่งนี้

gulp sass


กำหนด Default Task ให้ gulp.js
ในอนาคต หากเรามี task จำนวนมาก แล้วเราอยากสั่งให้ทำหลายๆ task เลยในทีเดียว เราก็อาจกำหนด task เหล่านั้นให้ทำพร้อมกับ default task ไปเลยก็ได้ แบบนี้

// สร้าง default task ขึ้นมา พร้อมกับระบุ task อื่นๆ ที่อยากให้ทำพร้อมกับ default task
gulp.task('default', ['taskName1', 'taskName2', 'taskName3'], function() {
    // ระบุว่า default task ทำอะไร (ไม่ต้องใส่ก็ได้ เพราะเราต้องการจะให้ทำ taskName1, taskName2, taskName3)
});
แต่ในตอนนี้เรามีแค่ task “sass” เพียง task เดียว หากเราจะให้ task นี้ ทำพร้อมกับ default task ไปเลย เราก็จะเขียนแบบนี้
// เพิ่ม sass ให้ทำพร้อมกับ default task
gulp.task('default', ['sass'], function() {
    // ระบุว่า default task ทำอะไร (เว้นไว้ก่อน)
});

จากนี้ไป เวลาเราจะสั่งให้ task “sass” ทำงาน เราก็สามารถพิมพ์สั้นๆ แบบนี้ได้เลย

gulp

หากลองดูที่ console เราก็จะเห็นว่า gulp.js นั้นเริ่มทำ task “sass” ก่อน แล้วตามด้วย task “default” ซึ่งในตอนนี้เป็นแค่ task เปล่าๆ



รู้จักกับ Watch ของ gulp.js
             บางคนอาจจะสงสัยว่า gulp.js จะมีประโยชน์อะไร ในเมื่อเราก็ต้องมานั่งพิมพ์คำสั่งเพื่อบอกให้มันทำงานอยู่ดี ให้มันรู้เองเลยได้มั้ยว่ามันควรจะทำตอนไหน ? คำตอบคือสามารถทำได้ เพราะ gulp.js มาพร้อมกับความสามารถในการเฝ้าดูการเปลี่ยนแปลงของไฟล์ต่างๆ (Watch) นั่นหมายความว่าเราสามารถสั่งให้ gulp.js ทำงานเมื่อตรวจพบว่ามีการแก้ไขไฟล์ได้นั่นเอง

สมมติว่าเราอยากจะให้ gulp.js ทำ task “sass” ทุกครั้งที่มีการแก้ไขไฟล์ scss เลย ก็ให้เราก็เพิ่มโค้ด watch ไปที่ default task แบบนี้

gulp.task('default', ['sass'], function() {
    // เมื่อไฟล์ scss มีการเปลี่ยนแปลง ก็จะสั่งให้ task "sass" ทำงาน
    gulp.watch("scss/**/*.scss", ['sass']);
});

จากนั้นก็สั่งให้ default task ทำงานเหมือนเดิม

gulp

สิ่งที่เกิดขึ้นก็คือ task “sass” จะเริ่มทำงานก่อน โดยการคอมไพล์ไฟล์ scss ทั้งหมดในขณะนั้นให้เป็น css เมื่อคอมไพล์เสร็จแล้ว task “default” ก็จะเริ่มทำงาน โดยการเฝ้าดูอย่างต่อเนื่องว่ามีไฟล์ scss อันไหนเปลี่ยนแปลงบ้าง ถ้ามีก็จะสั่งให้ task “sass” ทำงานทันที เพื่อคอมไพล์ไฟล์ scss นั้นๆ ให้เป็นไฟล์ css จากนี้ไป เวลาเราจะแก้ไฟล์ scss เราก็ไม่ต้องมาคอมไพล์ให้เป็น css เองอีกต่อไปแล้ว

หมายเหตุ: watch ของ gulp.js นั้น เป็น process ต่อเนื่อง คือหลังจากที่เราสั่งให้มันทำงานแล้ว มันก็จะไม่หยุด watch จนกว่าเราจะยกเลิกเองด้วยการกดปุ่ม Ctrl + c หรือ control + c

เสริมความสามารถด้วย BrowserSync
ถึงแม้ว่าเราไม่ต้องมาคอมไพล์ไฟล์ให้เป็น css เองแล้ว แต่เราก็ยังต้องมากดปุ่มรีเฟรช web browser เองอยู่ดี ลองนึกดูว่าเวลาเราทำ responsive web เราก็จะต้อง test กับ device มากมาย การต้องมารีเฟรชทุกๆ device ทุกครั้งที่มีการแก้โค้ดก็คงไม่ค่อยสะดวกเท่าไรนัก

เพื่อให้การทำเว็บเป็นไปอย่างราบรื่นมากขึ้น ให้เราติดตั้ง plugin ที่มีชื่อว่า “BrowserSync” เพิ่มเข้ามาอีกตัว

npm install browser-sync gulp --save-dev

ความสามารถของ BrowserSync ก็คือ มันจะสามารถสั่งให้รีเฟรช web browser ทั้งหมดที่เปิดหน้าเว็บที่ระบุไว้ได้ ไม่ว่าจะอยู่ใน device ไหนก็ตาม แค่พูดอาจยังไม่ค่อยเห็นภาพ เรามาลองใช้กันเลยดีกว่า ให้เราเข้าไปเพิ่ม task ต่อไปนี้ ใน gulpfile.js (มีบอกในหน้าเว็บหลักของ plugin)

// โหลด package "browser-sync" มาใช้ (บรรทัดนี้ต้องใส่เวลาติดตั้ง plugin เสริม)
var browserSync = require('browser-sync');

// สร้าง task ชื่อว่า "browser-sync" ขึ้นมา พร้อมกับระบุงานที่จะให้ task นี้ทำ
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

สุดท้ายก็ให้เรากำหนดให้ task “browser-sync” ทำพร้อมกับ default task ไปเลย

// เพิ่ม task "browser-sync" ให้ทำพร้อม default task
gulp.task('default', ['sass', 'browser-sync'], function() {

    // เมื่อไฟล์ html หรือ css มีการเปลี่ยนแปลง ก็ให้รีเฟรช web browser
    gulp.watch(['**/*.html'], browserSync.reload);
    gulp.watch(['css/**/*.css'], browserSync.reload);

    // เมื่อไฟล์ scss มีการเปลี่ยนแปลง ก็ให้ทำ task "sass"
    gulp.watch("scss/**/*.scss", ['sass']);
});

จากโค้ดด้านบน จะเห็นว่าเราได้ watch ไฟล์ html และ css เพิ่มด้วย เพราะเราต้องการจะให้ BrowserSync ช่วยรีเฟรช web browser เมื่อไฟล์เหล่านี้มีการเปลี่ยนแปลงนั่นเอง (ด้วยคำสั่ง browserSync.reload)

เมื่อทุกอย่างพร้อมแล้ว ก็สั่งให้ default task ทำงานเหมือนเดิม

gulp

เมื่อสั่งให้ gulp.js เริ่มทำงาน สิ่งที่ต่างไปจากครั้งก่อนๆ ก็คือ default web browser ของเราจะเปิดหน้าเว็บที่เราทำอยู่ขึ้นมาโดยอัตโนมัติ ที่เป็นเช่นนี้ก็เพราะผลจาก task “browser-sync” นั่นเอง จากนั้นให้เราลองแก้ไขโค้ด html, css หรือ  scss ดู เราก็จะพบว่าหน้าเว็บนั้นอัพเดทตามในทันที โดยที่เราไม่ต้องทำอะไรเลย

หากเราสังเกตที่ URL ก็จะพบว่าเป็น URL ที่ task “browser-sync” สร้างมาให้โดยเฉพาะ ตัวอย่างเช่น http://localhost:3000/ เป็นต้น ให้เราใช้ URL นี้ในการ test เสมอ เพราะมิฉะนั้น เราจะไม่ได้ความสามารถในการรีเฟรชของ BrowserSync เลย (แต่ถ้าจะ test กับ device อื่นๆ ก็ให้ใส่เป็น IP Address ตามปกติ แต่ขอให้ระบุ Port เดียวกันกับที่ BrowserSync กำหนดมาให้ เช่น http://192.168.1.xxx:3000 เป็นต้น)

บทสรุปการใช้ gulp.js

จะเห็นว่า gulp.js ช่วยให้เราเอาเวลาไปโฟกัสที่การเขียนโค้ดมากขึ้น เพราะว่างานอื่นๆ gulp.js จะทำแทนเราทั้งหมด และหากใครมี 2 จอ การใช้ gulp.js ก็จะยิ่งมีประโยชน์มากขึ้นไปอีก เนื่องจากเราสามารถเขียนโค้ดจอนึง แล้วดูพรีวิวอีกจอนึงได้ทันที จริงๆ แล้ว gulp.js ยังสามารถทำอะไรได้มากกว่านี้อีก ขึ้นอยู่กับเราแล้วว่าจะสามารถนำ plugin ต่างๆ มาประยุกต์ใช้ให้เหมาะกับงานได้มากน้อยแค่ไหน ?

[FREE] Blocky Flat Vector UI Kit เซ็ต UI สวย ม๊ากๆ


แจกฟรี UI Kit หน้าตาดี สไตล์ Flat

- มีทั้งแบบ .sketch สำหรับใช้กับ Sketch 3 และ .svg ที่ใช้กับโปรแกรมอื่น ๆ ได้หมด
- มีหน้าเว็บไซต์ตัวอย่างพร้อม
- มี UI Kit สำหรับส่วนต่าง ๆ ของเว็บ



Download:
http://medialoot.com/item/blocky-flat-ui-kit/




The Best Programming Language to Learn in 2014: Mid-Year Update



We last looked at the best languages to learn in February 2014. The results were ranked by data obtained from:

Jobs Tractor; a company which analyzes job adverts on Twitter
Lynda.com; an online video training course provider, and
the RedMonk survey which examined the frequency of projects on GitHub and questions on StackOverflow.
The IEEE Spectrum Survey

IEEE Spectrum recently completed a survey which uses no less than ten sources to rank the popularity of programming languages:


  • search results in Google
  • data from Google Trends
  • tweets sent on Twitter
  • GitHub repositories
  • StackOverflow questions
  • Reddit posts
  • Hacker News posts
  • demand for jobs on the Career Builder job site
  • demand for jobs on the Dice job site
  • IEEE Xplore journal articles


Languages were allocated to web, mobile, enterprise and embedded categories. The interactive tool allows you to make your own comparisons and apply custom weightings to the data sources if you don’t agree with IEEE Spectrum’s methodology. In summary:

IEEE Spectrum All Languages Top 20


  1. Java
  2. C
  3. C++
  4. Python
  5. C#
  6. PHP
  7. JavaScript
  8. Ruby
  9. R
  10. MATLAB
  11. Perl
  12. SQL
  13. Assembly
  14. HTML
  15. Visual Basic
  16. Objective-C
  17. Scala
  18. Shell
  19. Arduino
  20. Go



Source: IEEE Spectrum’s 2014 Ranking

If you omit ‘Embedded’ languages, the positions stay the same but Assembly and Arduino disappear.

IEEE Spectrum Web Top 10

  1. Java
  2. Python
  3. C#
  4. PHP
  5. JavaScript
  6. Ruby
  7. Perl
  8. HTML
  9. Scala
  10. Go

IEEE Spectrum Mobile Top 10

  1. Java
  2. C
  3. C++
  4. C#
  5. JavaScript
  6. Objective-C
  7. Scala
  8. Delphi
  9. Scheme
  10. ActionScript
  11. The Weird Stuff

There are a few classifications and results I would question…

Python is classified as both ‘web’ and ‘enterprise’ although PHP and Ruby are just ‘web’?
Yes, HTML isn’t a language but it’s classified as ‘web’ only and somehow comes below SQL, Perl and even Assembly?
Is C# mobile development really above JavaScript and Objective-C? And who’s creating phone apps in Scala, Delphi and Scheme?
The sources are a little IEEE Xplore and US-centric which could sway the chart.
Is it Wrong?

Overall, the data sources and survey methodologies seem reasonable. But it will be questioned by developers because it can never match our unique reality bubble which is focused on specific technologies.

Perhaps it’s not surprising to find Java topping most charts because it can be used in so many places; application development, server-side web development, Android development and — importantly — education. Many schools, colleges and universities teach Java so resources and questions are littered throughout the web. More recently, Python has gained traction as an introductory language so it will enjoy similar benefits.

Next, we have C and C++ which been around for 45 years in various incarnations. If all C-based projects ceased today, a rich history of the language would remain on the web for many years to come.

C# is slightly unusual given ASP.NET lingers at number 30 in the all-languages chart. That said, it has been in use for more than a decade and is almost as ubiquitous as Java. Many businesses sole output is Microsoft-based software.

As we reach the lower places it becomes more difficult to compare relative positions. Technologies such as HTML and SQL have a wide reach, but may only be mentioned in passing for PHP, JavaScript and Ruby job opportunities and articles.

Is it Useful?

These surveys are interesting but, again, I stress that you should NEVER use them the basis for changing or enforcing your career path. The survey shows a historical snapshot in time; it’s the technologies we have been using. It doesn’t follow they’re the ‘best’ options today or whether they’ll still be used tomorrow.

Developers are in a fortunate position; the demand for skilled workers outstrips supply throughout most of the world. Few professionals went hungry in even the darkest days of the economic depression. You therefore have the luxury of choosing technologies which interest you, whether that’s websites, mobile gaming, statistical analysis or intelligent toaster development.

Concentrate on work you enjoy and it won’t seem difficult to become a great software engineer. Choosing a language for financial gain or because someone else suggested “it’s a good idea” is significantly harder. You’ll resent the effort; it’s soul-destroying and you may never become the well-paid superstar you wanted to be.

That said, never stop learning. There is one fundamental difference between good and mediocre developers: curiosity. A good developer will enthusiastically leap into their sectors of ignorance to learn and adopt new techniques. The IT world moves rapidly and even the highest-paid Java gurus should not expect to constrain their knowledge forever.

In summary, take a look at the chart, nod sagely, moan loudly then get back to the more interesting Fortran, Visual Basic or Cobol project you’re working on!

Have you recently chosen a new language? What influenced your choice? Have you regretted your decision?



Resizing images with PHP



<?php

class SimpleImage {

    var $image;
   var $image_type;

    function load($filename) {

       $image_info = getimagesize($filename);
      $this->image_type = $image_info[2];
      if( $this->image_type == IMAGETYPE_JPEG ) {

          $this->image = imagecreatefromjpeg($filename);
      } elseif( $this->image_type == IMAGETYPE_GIF ) {

          $this->image = imagecreatefromgif($filename);
      } elseif( $this->image_type == IMAGETYPE_PNG ) {

          $this->image = imagecreatefrompng($filename);
      }
   }
   function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {

       if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image,$filename,$compression);
      } elseif( $image_type == IMAGETYPE_GIF ) {

          imagegif($this->image,$filename);
      } elseif( $image_type == IMAGETYPE_PNG ) {

          imagepng($this->image,$filename);
      }
      if( $permissions != null) {

          chmod($filename,$permissions);
      }
   }
   function output($image_type=IMAGETYPE_JPEG) {

       if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image);
      } elseif( $image_type == IMAGETYPE_GIF ) {

          imagegif($this->image);
      } elseif( $image_type == IMAGETYPE_PNG ) {

          imagepng($this->image);
      }
   }
   function getWidth() {

       return imagesx($this->image);
   }
   function getHeight() {

       return imagesy($this->image);
   }
   function resizeToHeight($height) {

       $ratio = $height / $this->getHeight();
      $width = $this->getWidth() * $ratio;
      $this->resize($width,$height);
   }

    function resizeToWidth($width) {
      $ratio = $width / $this->getWidth();
      $height = $this->getheight() * $ratio;
      $this->resize($width,$height);
   }

    function scale($scale) {
      $width = $this->getWidth() * $scale/100;
      $height = $this->getheight() * $scale/100;
      $this->resize($width,$height);
   }

    function resize($width,$height) {
      $new_image = imagecreatetruecolor($width, $height);
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
      $this->image = $new_image;
   }      

 }
?>

 ////////////////////////////////////////////////////////////////////////////////////////////////
ตัวอย่าง การใช้งาน 

 <?php
   if( isset($_POST['submit']) ) {

       include('SimpleImage.php');
      $image = new SimpleImage();
      $image->load($_FILES['uploaded_image']['tmp_name']);
      $image->resizeToWidth(150);
      $image->output();
   } else {

?>

   <form action="upload.php" method="post" enctype="multipart/form-data">
      <input type="file" name="uploaded_image" />

      <input type="submit" name="submit" value="Upload" />

   </form>

<?php
   }
?>


Node.js คืออะไร ?




Node.js คืออะไร ?

 สำหรับคำถามที่ว่า Node.js คืออะไร หากจะตอบแบบสั้นๆ มันก็คือ การเขียนโปรแกรมด้วย JavaScript ที่ฝั่ง server แทนที่ปกติแล้วจะเป็นฝั่ง client แต่จริงๆ แล้ว Node.js นั้นจะรวมไปถึง environment ต่างๆ ที่ทำขึ้นเพื่อให้เราเขียน JavaScript เอาไว้ที่ฝั่ง server ได้ด้วย(webserver,  runtime และอื่นๆ) เรียกได้ว่ามันก็คือ platform นั่นเอง

แล้ว Node.js เกี่ยวอะไรกับเรา ?

 เนื่องจาก Node.js นั้นขึ้นชื่อในด้านความเร็วของการประมวลผล จึงทำให้ application ที่เขียนด้วย Node.js นั้นมีจำนวนเพิ่มขึ้นอย่างรวดเร็ว ซึ่งรวมไปถึง application ที่จะช่วยให้การพัฒนาเว็บไซต์เป็นไปอย่างราบรื่นมากขึ้นด้วย โดยบทความนี้จะขอเน้นไปที่วิธีการนำ application เหล่านั้นมาใช้ให้เกิดประโยชน์ในการทำเว็บไซต์


วิธีติดตั้ง Node.js
การจะนำ application ที่เขียนด้วย Node.js มาใช้งาน เราจะต้องติดตั้ง Node.js เสียก่อน => Download



ให้เราเลือก download แบบ installer มาก็ได้ เพราะขั้นตอนการติดตั้งจะไม่ยุ่งยากเท่าไรนัก





เมื่อติดตั้งเสร็จแล้ว ให้เราเปิด Command-line Interface(Command Prompt, Terminal) ขึ้นมา แล้วลองพิมพ์คำสั่งนี้ดู

node -v

หากเลขเวอร์ชันของ Node.js แสดงขึ้นมา ก็แปลว่าเราได้ติดตั้ง Node.js เรียบร้อยแล้วค่ะ


รู้จักกับ npm

 อย่างที่ได้กล่าวไปแล้วว่า เราไม่ได้จะมาเขียน application ขึ้นมาใช้เอง แต่เราจะเลือกหยิบ application ที่มีคนเขียนเอาไว้ดีแล้วมาใช้เลยต่างหาก ในขั้นตอนที่ว่านี้ เราจะทำผ่านสิ่งที่เรียกว่า “npm”

npm นั้นจะถูกติดตั้งมาพร้อมกับ Node.js เพื่อทำหน้าที่จัดการ package เสริมต่างๆ ไม่ว่าจะเป็นการติดตั้ง application หรือการติดตั้ง module ต่างๆ ที่เป็น dependency ของ application เพียงแค่เราระบุชื่อ package ที่ต้องการจะใช้ มันก็จะไปตรวจสอบชื่อ package นั้นใน registry เมื่อพบแล้ว มันก็จะดาวน์โหลด package นั้นๆ มาให้เราทันที นอกจากนั้น การนำ application ที่เราเขียนเองไปเพิ่มไว้ใน registry ของ npm ก็สามารถทำผ่าน npm ได้เช่นกัน

สำหรับวิธีใช้ npm นั้นก็ไม่มีอะไรยากเลย เพียงแค่เราเปิด Command-line Interface ขึ้นมา แล้วเข้าไปยัง path ที่ต้องการจะติดตั้ง(ที่อยู่ของ project เรา)


 npm install ชื่อเพคเกจ

 เพียงเท่านี้ package ที่เราระบุก็จะถูกติดตั้งเรียบร้อยแล้ว

แล้วเราจะหา package ได้จากไหน ?

 ให้เราลองเข้าไปดู package ที่น่าสนใจได้จาก official website ของ npm ได้เลย ที่ npmjs.org โดยทางเว็บไซต์จะมีหน้าจัดอันดับ package ที่มียอดดาวน์โหลดสูงสุดเอาไว้ด้วย ทำให้เรารู้ว่าในขณะนี้ คนกำลังนิยมใช้ package อะไรกันอยู่บ้าง

สำหรับวิธีใช้งานของแต่ละแพคเกจนั้นจะแตกต่างกันออกไป โดยเราสามารถอ่านวิธีใช้งานพื้นฐานของ package นั้นๆ ได้ที่หน้ารายละเอียดของ package ที่ทาง npmjs.org ได้จัดทำไว้ แต่ถ้ายังไม่ละเอียดพอ เราก็สามารถเข้าไปอ่านคู่มือการใช้งานได้ที่เว็บไซต์หลักของ package นั้นๆ

แนะนำ package สำหรับ Front-end Engineer
bower
เป็น package manager ที่สร้างโดย Twitter เอาไว้สำหรับติดตั้ง/อัพเดท 3rd-party ต่างๆ(เช่นพวก jQuery plugin) ได้ในการรันคำสั่งเพียงครั้งเดียว ทำให้เราไม่ต้องไปเข้าทีละเว็บแล้วดาวน์โหลดมาอีกต่อไป
gulp
เอาไว้รัน task ต่างๆ เพื่อที่จะได้ไม่ต้องมาทำเองอีกต่อไป เราสามารถสั่งให้คอมไพล์ไฟล์ Sass ในทันทีที่มีการแก้ไข หรือแม้แต่สั่งให้รีเฟรช Web Browser ทุกครั้งที่มีการแก้ไข HTML เป็นต้น
เมื่อเราได้ลองใช้ทั้ง bower และ gulp แล้ว ก็จะเห็นว่า Node.js นั้น ช่วยเราได้มากเลยจริงๆ หากใครเคยคิดจะศึกษา Node.js มาก่อนหน้านี้ แล้วยังไม่ค่อยเข้าใจ เราอาจไม่จำเป็นต้องรู้วิธีเขียนของมันก็ได้ ขอเพียงแค่เรารู้วิธีนำมันมาใช้ให้เกิดประโยชน์กับงานของเราก็น่าจะเพียงพอแล้ว







PHP Connect MySQL Database


<html>
<head>
<title>ThaiCreate.Com</title>
</head>
<body>
<?php
$host = "us-cdbr-azure-west-b.cleardb.com";
$username = "bf8b0efb6c1b5b";
$password = "325bfa78";
$objConnect = mysql_connect($host,$username,$password);

 if($objConnect)
{
echo "MySQL Connected";
}
else
{
echo "MySQL Connect Failed : Error : ".mysql_error();
}

 mysql_close($objConnect);
?>
</body>
</html>

 หรือ จะเขียน แบบ ฟังก์ชั่น

 แสดงปกติพิมพ์โค้ดนี้?
// ฟังก์ชันสำหรับเชื่อมต่อกับฐานข้อมูล  

<?php
function connect()  
{  
  // เริ่มต้นส่วนกำหนดการเชิ่อมต่อฐานข้อมูล //  
  $HOST="localhost"; // ชื่อ server หรือ domain name ปกติใช้ localhost  
  $PORT=""; // กำหนดหรือไม่ก็ได้  
  $DB_USER="root"; // ชื้อผู้ใช้  
  $DB_PWD="test"; // รหัสผ่าน  
  $DB_NAME="test";   // ชื่อฐานข้อมูล  
  // สิ้นสุุดส่วนกำหนดการเชิ่อมต่อฐานข้อมูล //   
  $DB_HOST=(!emptyempty($PORT)) ? $HOST.":".$PORT : $HOST;  
  if(@mysql_connect($DB_HOST,$DB_USER,$DB_PWD)){  
      $conServ=@mysql_select_db($DB_NAME) or die("SQL Error: <br>".mysql_error());        
  }else{  
      die("SQL Error: <br>".mysql_error());       
  }  

}  
?>

สมัครสมาชิก: บทความ (Atom)