TOSDN http://www.tosdn.com Thailand Open Source Development Network Mon, 22 Jun 2015 06:45:20 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.2 Flat Apple Devices Mockups (PSD) http://www.tosdn.com/designer/flat-apple-devices-mockups-psd http://www.tosdn.com/designer/flat-apple-devices-mockups-psd#comments Mon, 22 Jun 2015 06:42:23 +0000 http://www.tosdn.com/?p=1728 Posted by few on Flat Apple Devices Mockups (PSD)

A huge and now bigger collection of flat Apple devices mockups to showcase your responsive web designs. The PSD file includes iPhones, iPads, iMac and Macbook with different viewing angles and now even an Apple Watch!

The post Flat Apple Devices Mockups (PSD) appeared first on TOSDN.

]]>
Posted by few on Flat Apple Devices Mockups (PSD)

จัดเต็ม PSD Mockups ของ Apple Device มีทั้ง iPhones, iPads, iMac และ Macbook พร้อมคละขนาด สี

A huge and now bigger collection of flat Apple devices mockups to showcase your responsive web designs. The PSD file includes iPhones, iPads, iMac and Macbook with different viewing angles and now even an Apple Watch!

The post Flat Apple Devices Mockups (PSD) appeared first on TOSDN.

]]>
http://www.tosdn.com/designer/flat-apple-devices-mockups-psd/feed 0
AnimatedModal.js – แสดงกล่อง Modal แบบ Fullscreen ด้วย CSS3 Transitions http://www.tosdn.com/developer/javascript/animatedmodal-js-%e0%b9%81%e0%b8%aa%e0%b8%94%e0%b8%87%e0%b8%81%e0%b8%a5%e0%b9%88%e0%b8%ad%e0%b8%87-modal-%e0%b9%81%e0%b8%9a%e0%b8%9a-fullscreen-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css3-tran http://www.tosdn.com/developer/javascript/animatedmodal-js-%e0%b9%81%e0%b8%aa%e0%b8%94%e0%b8%87%e0%b8%81%e0%b8%a5%e0%b9%88%e0%b8%ad%e0%b8%87-modal-%e0%b9%81%e0%b8%9a%e0%b8%9a-fullscreen-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css3-tran#comments Fri, 06 Mar 2015 08:28:28 +0000 http://www.tosdn.com/?p=1718 Posted by few on AnimatedModal.js – แสดงกล่อง Modal แบบ Fullscreen ด้วย CSS3 Transitions

AnimatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions by animate.css or create your own transitions by yourself. It supports Firefox, Chrome, Safari, Opera and IE 10+. It is licensed under MIT License.

The post AnimatedModal.js – แสดงกล่อง Modal แบบ Fullscreen ด้วย CSS3 Transitions appeared first on TOSDN.

]]>
Posted by few on AnimatedModal.js – แสดงกล่อง Modal แบบ Fullscreen ด้วย CSS3 Transitions

AnimatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions by animate.css or create your own transitions by yourself. It supports Firefox, Chrome, Safari, Opera and IE 10+. It is licensed under MIT License.

The post AnimatedModal.js – แสดงกล่อง Modal แบบ Fullscreen ด้วย CSS3 Transitions appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/javascript/animatedmodal-js-%e0%b9%81%e0%b8%aa%e0%b8%94%e0%b8%87%e0%b8%81%e0%b8%a5%e0%b9%88%e0%b8%ad%e0%b8%87-modal-%e0%b9%81%e0%b8%9a%e0%b8%9a-fullscreen-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css3-tran/feed 0
LumX – Framework ตัวแรกที่รวม AngularJS และ Google Material Design เข้าด้วยกัน http://www.tosdn.com/developer/css-html/lumx http://www.tosdn.com/developer/css-html/lumx#comments Mon, 19 Jan 2015 04:37:05 +0000 http://www.tosdn.com/?p=1711 Posted by few on LumX – Framework ตัวแรกที่รวม AngularJS และ Google Material Design เข้าด้วยกัน

The first responsive front-end framework based on AngularJS & Google Material Design specifications. lumX will help you to design your applications faster and easier. We followed Google Material Design recommendations to bring the best experience to your users. Made with the latest technologies LumX will help you to design beautiful applications, faster and easier. We’ve […]

The post LumX – Framework ตัวแรกที่รวม AngularJS และ Google Material Design เข้าด้วยกัน appeared first on TOSDN.

]]>
Posted by few on LumX – Framework ตัวแรกที่รวม AngularJS และ Google Material Design เข้าด้วยกัน

The first responsive front-end framework based on AngularJS & Google Material Design specifications. lumX will help you to design your applications faster and easier. We followed Google Material Design recommendations to bring the best experience to your users.

Made with the latest technologies

LumX will help you to design beautiful applications, faster and easier. We’ve built it based on google guidelines, respecting metrics in a pixel perfect way.

Sass Preprocessor
Built with Sass, Bourbon and Neat, you’ll be able to quickly customize your application design. Moreover, your Sass and Javascript files will be automatically optimized with Gulp to improve your application performance.

AngularJS
We’ve choosen AngularJS for LumX because we think it’s the best Javascript MVC Framework to build robust and fast one-page applications. And of course, because it has been made and is still maintained by Google.
Javascript

Just a little bit of jQuery
Performance is highly important for any web application. That’s why we only use jQuery without any of its plugin. Each component was then home made to be perfectly plugged to your AngularJS application.

The post LumX – Framework ตัวแรกที่รวม AngularJS และ Google Material Design เข้าด้วยกัน appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/css-html/lumx/feed 0
droidicon – ไอคอน 1,600 ชิ้น! สำหรับทำแอปฯ บนแอนดรอยด์ http://www.tosdn.com/designer/freebie/droidicon-1600-icons-for-android http://www.tosdn.com/designer/freebie/droidicon-1600-icons-for-android#comments Tue, 02 Dec 2014 08:37:47 +0000 http://www.tosdn.com/?p=1706 Posted by few on droidicon – ไอคอน 1,600 ชิ้น! สำหรับทำแอปฯ บนแอนดรอยด์

NEW – 750+ Google Material Design Icons Icons From… Google Material Design FontAwesome Iconic Entypo Meteocons droidicon provides over 1600 customizable icons, 25 ready-made social badges and more! droidicon makes it super easy to add icons and badges to your app. All of the social badges are already styled. Just add them to your app! […]

The post droidicon – ไอคอน 1,600 ชิ้น! สำหรับทำแอปฯ บนแอนดรอยด์ appeared first on TOSDN.

]]>
Posted by few on droidicon – ไอคอน 1,600 ชิ้น! สำหรับทำแอปฯ บนแอนดรอยด์

NEW – 750+ Google Material Design Icons

Icons From…

droidicon provides over 1600 customizable icons, 25 ready-made social badges and more! droidicon makes it super easy to add icons and badges to your app. All of the social badges are already styled. Just add them to your app! Or you can customize the icons however you want.

Based on IconicDroid

  • 1600+ icons
  • use icons from FontAwesome, Iconic, Entypo, and Meteocons
  • 25 ready-made social badges using brand colors
  • add strokes, transparency, and color filters to icons
  • create badges and icons of any size or color, totally customizable

The post droidicon – ไอคอน 1,600 ชิ้น! สำหรับทำแอปฯ บนแอนดรอยด์ appeared first on TOSDN.

]]>
http://www.tosdn.com/designer/freebie/droidicon-1600-icons-for-android/feed 0
DropzoneJS – สคริ้ปอัพโหลดไฟล์ เพียงแค่ ลากวาง http://www.tosdn.com/developer/javascript/dropzonejs-drag-drop-upload http://www.tosdn.com/developer/javascript/dropzonejs-drag-drop-upload#comments Tue, 02 Dec 2014 08:22:13 +0000 http://www.tosdn.com/?p=1702 Posted by few on DropzoneJS – สคริ้ปอัพโหลดไฟล์ เพียงแค่ ลากวาง

Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX. Starting with version 2.0.0 this library does no longer depend on jQuery (but it still works as […]

The post DropzoneJS – สคริ้ปอัพโหลดไฟล์ เพียงแค่ ลากวาง appeared first on TOSDN.

]]>
Posted by few on DropzoneJS – สคริ้ปอัพโหลดไฟล์ เพียงแค่ ลากวาง

Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.

Starting with version 2.0.0 this library does no longer depend on jQuery (but it still works as a jQuery module).

It is written as a component but there’s a standalone version, and an AMD module that’s compatible with RequireJS in the downloads folder.

  • Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
  • Retina enabled
  • Multiple files and synchronous uploads
  • Progress updates
  • Support for large files
  • Complete theming. The look and feel of Dropzone is just the default theme. You can define everything yourself by overwriting the default event listeners.
  • Well tested

The post DropzoneJS – สคริ้ปอัพโหลดไฟล์ เพียงแค่ ลากวาง appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/javascript/dropzonejs-drag-drop-upload/feed 0
Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design http://www.tosdn.com/developer/css-html/material-ui-css-framework-for-googles-ma http://www.tosdn.com/developer/css-html/material-ui-css-framework-for-googles-ma#comments Wed, 19 Nov 2014 04:06:49 +0000 http://www.tosdn.com/?p=1697 Posted by few on Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design

Material-UI is a CSS framework and a set of React components that implement Google’s Material Design specification. Material-UI is available as an npm package. Use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you’ll need to compile that as well. The styles are separated into 2 […]

The post Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design appeared first on TOSDN.

]]>
Posted by few on Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design

Material-UI is a CSS framework and a set of React components that implement Google’s Material Design specification. Material-UI is available as an npm package. Use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you’ll need to compile that as well.

The styles are separated into 2 less files which allows you to override any variables defined in custom-variables.less without having to modify material-ui source files directly. It is licensed under MIT License.

The post Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/css-html/material-ui-css-framework-for-googles-ma/feed 0
สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js http://www.tosdn.com/developer/javascript/dropcap-js-makes-beautiful-drop-caps http://www.tosdn.com/developer/javascript/dropcap-js-makes-beautiful-drop-caps#comments Fri, 07 Nov 2014 10:09:01 +0000 http://www.tosdn.com/?p=1691 Posted by few on สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js

สคริ้ปจัดการให้อักษรตัวแรกเป็นตัวใหญ่ เอาไว้เป็นทริปสวยๆสำหรับแสดงข้อความ พัฒนาโดย Adobe เชียวนะครับ (สำหรับ Windows รองรับ IE10+, Firefox, Chrome และถ้าเป็น OSX จะรองรับ Firefox, Chrome, Safari)

The post สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js appeared first on TOSDN.

]]>
Posted by few on สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js

Decorative initials, also known as drop capitals or “drop caps”, should be positioned on a baseline of the adjoining text; they should also be tall enough to reach the cap height of the first line of text.

Though drop caps are very common in magazines and books, they remain rare on the web. We believe this is because doing it right simply and reliably is too difficult. A simple CSS float:left on a ::first-letter pseudo-element is not enough. Dropcap.js makes beautiful drop caps easy for the web. We tested dropcap.js on Windows (IE10+, Firefox, Chrome) and OSX (Firefox, Chrome, Safari).

The post สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/javascript/dropcap-js-makes-beautiful-drop-caps/feed 0
Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่ http://www.tosdn.com/developer/php/lychee-a-free-photo-management-tool1688 http://www.tosdn.com/developer/php/lychee-a-free-photo-management-tool1688#comments Fri, 07 Nov 2014 09:53:54 +0000 http://www.tosdn.com/?p=1688 Posted by few on Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่

Lychee is a free photo-management tool, which runs on your server or web-space. Installing is a matter of seconds. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely. You can upload, move, rename, describe, delete or search your photos in seconds. […]

The post Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่ appeared first on TOSDN.

]]>
Posted by few on Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่

Lychee is a free photo-management tool, which runs on your server or web-space. Installing is a matter of seconds. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely.

You can upload, move, rename, describe, delete or search your photos in seconds. All in one place, right from your browser. Look at all your images in full-screen mode, navigate forward and backward by using your keyboard or let others enjoy your photos by making them public.

The post Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่ appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/php/lychee-a-free-photo-management-tool1688/feed 0
ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection http://www.tosdn.com/developer/javascript/jquery-face-detection-works-images-videos http://www.tosdn.com/developer/javascript/jquery-face-detection-works-images-videos#comments Fri, 07 Nov 2014 09:30:32 +0000 http://www.tosdn.com/?p=1679 Posted by few on ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection

jQuery Plugin ที่ช่วยจับใบหน้าของคนในรูปและวีดิโอ จากที่ทดสอบ ค่อนข้างแม่นเหมือนกันนะครับ

The post ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection appeared first on TOSDN.

]]>
Posted by few on ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection

jQuery Face Detection Plugin detects faces on images, videos and canvases to get theirs coordinates. It tracks a face and outputs the coordinate positions of the face model as an array. We believe that face recognition will open up a ton of possibilities in how we interact not just with each other.

The post ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/javascript/jquery-face-detection-works-images-videos/feed 0
วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8) http://www.tosdn.com/developer/how-to-setup-laravel-4-windows http://www.tosdn.com/developer/how-to-setup-laravel-4-windows#comments Thu, 06 Nov 2014 08:04:31 +0000 http://www.tosdn.com/?p=1655 Posted by few on วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8)

เพิ่งมีโอกาสได้ลองเล่น Laravel ซึ่งเป็น PHP Framework ที่กำลังบูมมาก (จริงๆก็บูมมาพักใหญ่ๆแล้ว) ว่ากันว่า มีเครื่องมือช่วยเยอะพอสมควร เรียนรู้ง่าย ใช้งานง่าย ซึ่งบล็อกนี้ผมขอบันทึกการเรียนรู้ Laravel ไว้ ใครเพิ่งหัดเล่น ก็หัดไปพร้อมๆกันเลยครับ

The post วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8) appeared first on TOSDN.

]]>
Posted by few on วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8)

เพิ่งมีโอกาสได้ลองเล่น Laravel ซึ่งเป็น PHP Framework ที่กำลังบูมมาก (จริงๆก็บูมมาพักใหญ่ๆแล้ว) ว่ากันว่า มีเครื่องมือช่วยเยอะพอสมควร เรียนรู้ง่าย ใช้งานง่าย ซึ่งบล็อกนี้ผมขอบันทึกการเรียนรู้ Laravel ไว้ ใครเพิ่งหัดเล่น ก็หัดไปพร้อมๆกันเลยครับ

แต่ก่อนจะไปถึงตรงนั้น เรามาลองติดตั้งกันก่อน ซึ่งเท่าที่ผมหาข้อมูลจากเว็บไซต์ Laravel Official เอง หรือจากที่ต่างๆ ก็มักจะแนะนำให้ทำ Virtual Machine โดยการใช้ VirtualBox และติดตั้ง Vagrant Package ที่ชื่อว่า Homestead สำหรับอำนวยความสะดวก เพราะใน Package มันจะลง Ubuntu Linux+PHP+Apache และเครื่องมือต่างๆสำหรับพัฒนาเว็บไซต์ด้วย Laravel ให้ครบถ้วนเลย (คนเขียน PHP ปกติ ก็เหมาะครับ)

ใน Vagrant Homestead จะมี Software ที่ติดตั้งให้เราใน VirtualBox ดังนี้

  • Ubuntu 14.04
  • PHP 5.6 (Laravel ต้องการ PHP >= 5.4 และ MCrypt PHP Extension)
  • HHVM
  • Nginx
  • MySQL
  • Postgres
  • Node (With Bower, Grunt, and Gulp)
  • Redis
  • Memcached
  • Beanstalkd
  • Laravel Envoy
  • Fabric + HipChat Extension

(ที่ทำตัวหน้าคือ สิ่งที่ Laravel ต้องการใช้ (Server Requirements) ส่วนอื่นๆ ก็แล้วแต่งานของแต่ละคนว่าจำเป็นอะไรบ้าง)

ส่วนใครจะติดตั้งแบบปกติด้วยการลง Apache+PHP ใน Windows ก็สามารถทำได้ ไว้คราวหน้าผมจะเขียนให้อีกครั้งหนึ่ง

สิ่งที่เราจะใช้ติดตั้งทั้งหมดในบทความนี้ดาวน์โหลดมารอกันได้เลยครับ

  1. VirtualBox – สำหรับเป็นเครื่องเซฟเวอร์จำลอง (VIrtual Machine หรือเรียกย่อๆ VM)
  2. Vagrant – เครื่องมือช่วยติดตั้ง Package ในเครื่อง VM
  3. PuTTY – สำหรับล็อกอินเข้าเครื่อง VM ด้วย SSH
  4. PTTYgen – สำหรับสร้างไฟล์ SSL (ได้ทั้งแบบ public key และ private key)
  5. Homestead – เป็น Config เพื่อบอก Vagrant ว่า ต้องลง Package อะไรในเครื่อง VM บ้าง
  6. Laravel – PHP Framework พระเอกของเรา
  7. Composer – เครื่องมือจัดการ Library ของ PHP  (ในชุด Package ของ Homestead จะมีแจ้งติดตั้งในเครื่อง VM ให้เราด้วย)

1. ติดตั้ง Virtual Machine ด้วย VirtualBox + Vargrant + Homestead + SSH

เปิดไฟล์ Setup ของ VirtualBox เพื่อทำการติดตั้งเจออะไรก็กด Yes และ Next ไปเรื่อยๆ

2014-11-05 17_34_43-VirtualBox

เปิดไฟล์ Setup ของ Vagrant เพื่อทำการติดตั้ง แล้วก็เหมือนเดิมครับ ถ้าเจออะไรก็กด Yes และ Next ไปเรื่อยๆ

2014-11-05 17_35_01-Vagrant

เมื่อติดตั้งทั้ง VirtualBox และ Vagrant เสร็จแล้ว มันจะแจ้งให้ restart เครื่อง ก็ทำตามมัน

จากนั้นให้ทำการติดตั้ง homestead ด้วยการเปิด Command Line ขึ้นมา (กดปุ่ม Ctrl+R แล้วพิมพ์ cmd) มันจะขึ้น folder user ของเรา จากนั้นให้พิมพ์ดังนี้ (ในขั้นตอนนี้ต้องต่อ Internet ด้วย)

vagrant box add laravel/homestead

2014-11-06 12_00_18-C__Windows_system32_cmd.exe

ขั้นตอนนี้ Vagrant มันจะดาวน์โหลดไฟล์จาก Internet มาติดตั้งในเครื่อง VM ให้เราทั้งหมด ตามรายการ Software ข้างต้นที่ได้เขียนไว้

ระหว่างรอ Vagrant ทำงาน ให้เราไปดาวน์โหลดไฟล์ homestead config ที่ https://github.com/laravel/homestead (เมื่อเปิดหน้าเว็บไซต์มาแล้ว ให้กดที่ปุ่ม Download ZIP)

2014-11-06 12_07_14-Program Manager

จากนั้นคลาย ZIP ไว้ใน folder user ของเราเลยครับ ซึ่งของผมจะเป็น C:\Users\ifew\Homestead (ชื่อ ifew จะเป็นชื่อ user ซึ่งจะไม่เหมือนกับผม ส่วน Homestead จะเป็นตัวเล็กตัวใหญ่ก็ตามแต่สะดวกครับ) และไฟล์ข้างในก็จะมีประมาณนี้ครับ

2014-11-05 17_34_05-Homestead

จากนั้นเปิดโปรแกรม PuTTYgen ขึ้นมา ให้กดปุ่ม Generate แล้วเอาเม้าส์ลากๆๆ ตรงพื้นที่ว่างด้านบน สังเกตว่าจะมีแถบสถานะขึ้นมา ลากจนกว่ามันจะเสร็จ 100% นั่นแหละครับ และเมื่อเสร็จแล้ว ให้กด Save public key แล้วตั้งชื่อบันทึกไฟล์อะไรก็ได้ เอาไว้ใน Folder ที่เราทำไว้เมื่อสักครู่ (ของผมคือ C:\Users\ifew\Homestead) เสร็จแล้วให้กด Save private key แล้วทำการบันทึกไฟล์เหมือน public key เลยครับ (สำหรับขึ้นตอน save private key มันจะมีหน้าต่าง Warning เด้งขึ้นมา ให้กด Yes ผ่านไปเลย)

2014-11-05 17_35_24-PuTTY

ในรูป public key ผมใช้ชื่อ sshpublic, ส่วน private key ผมใช้ชื่อ sshprivate.ppk

2014-11-05 17_34_05-Homestead

เมื่อเราทำตามขั้นตอนเสร็จหมดทุกอย่างแล้ว ให้มาแก้ไข homestead config ดังนี้ (ถึงแม้ Vagrant จะยังกาวน์โหลดไม่เสร็จก็ทำ config ได้ครับ)

ใน Folder Homestead ที่เราได้ทำไว้ (ของผมคือ C:\Users\ifew\Homestead) ให้เปิดไฟล์ชื่อ Homestead.yaml เพื่อแก้ไข (ใช้ editor อะไรก็ได้ เช่น notepad, notepad++ ก็ตามสะดวก)

ในไฟล์จะมีช้อมูลตามรูปด้านล่างนี้ครับ

2014-11-05 17_34_22-C__Users_ifew_Homestead_Homestead.yaml - Notepad++

หมายเหตุ – ในที่นี้ ถ้าเห็น ~/Headstead/ มันหมายถึง  C:\Users\ifew\Homestead ครับ ซึ่งถ้าท่านทำตามผมโดยไว้ใน Folder User ก็แก้ตามนี้ครับ แต่ถ้าไม่ใช่ ต้องแก้เป็น path ที่ท่านเอาไว้ เช่น C:/Homestead (เครื่องหมาย / หรือ \ ให้ใช้ตามผมเลยครับ อาจจะสับสนหน่อย เพราะมันต้องระบุแบบ Linux)

อธิบาย Homestead Config

keys: 
เป็นที่เก็บไฟล์ SSL Private Key ซึ่งให้เราแก้เป็นที่อยู่ Private Key ที่เราได้สร้างไว้
(ที่อยู่ไฟล์ของผมคือ C:\Users\ifew\Homestead\sshprivate.ppk ดังนั้นผมจึงระบุว่า ~/Headstead/sshprivate.ppk)

folders: 
– map คือที่เก็บไฟล์เว็บไซต์ของเรา ในเครื่อง windows
to: คือที่เก็บไฟล์เว็บไซต์ของเราในเครื่อง VM
(ผมก็เพิ่งรู้ว่ามันทำแบบนี้ได้ คือมันสะดวกมากๆครับ โดยมันจะเชื่อม Folder จากเครื่องคอมพิวเตอร์เรา ตรงไปยังเครื่อง VM ได้เลย โดยเราไม่ต้อง FTP upload ให้ยุ่งยาก แก้ปุ๊บ ทดสอบได้ปั๊บ)

sites:
– map: คือชื่อ URL เว็บไซต์สำหรับเปิดใช้งานครับ ที่นี้ผมต้องการเปิดด้วย http://testlaravel/
to: คือที่อยู่ของไฟล์สำหรับเปิดเป็นหน้าแรกของเว็บไซต์เรา
(โครงสร้างของ Folder ใน Laravel ตัวไฟล์ที่เราจะแก้ไขได้มันอยู่ใน public ครับ, ซึ่งตอนแรกผมยังไม่รู้โครงสร้างของมัน ก็ก้มหน้าก้มตาทำตามคู่มือไป สุดท้ายเลยมี public ซับซ้อน 2 ชั้นเลย แหะๆ)

variables:
ไว้ระบุ environment ว่าเราพัฒนาอยู่บนระบบไหน เช่น local, staging, development, production ฯลฯ แต่ ณ ที่นี้ไม่ต้องแก้ ข้ามไปเลย

ขั้นตอนสุดท้าย  หลังจากติดตั้ง VirtualBox, Vagrant, แก้ไข Homestead Config เสร็จหมดแล้ว และรอจน Vagrant ดาวน์โหลดเสร็จทุกอย่างแล้ว ให้เราพิมพ์คำสั่งดังนี้

vagrant up

ซึ่งเป็นการสั่งให้ Vagrant ปรับค่าต่างๆตาม config เข้าไปในเครื่อง VM ของเรา, และรอจนมันเสร็จ

2014-11-05 17_33_12-C__Windows_system32_cmd.exe

หลังจากเสร็จแล้ว ให้ไปปรับค่า hosts ของ windows โดยการเข้าไปแก้ไขไฟล์ที่ C:\Windows\System32\drivers\etc\hosts โดยระบุ ดังนี้

192.168.10.10  testlaravel

หมายเหตุ* – testlaravel เป็นชื่อ URL ที่ผมใช้, ดังนั้นใน Homestead Config ท่านตั้งค่า sites: หัวข้อ map ไว้ชื่ออะไร ให้ใช้ชื่อเดียวกันนั่นเอง

2014-11-06 14_13_01-_C__Windows_System32_Drivers_etc_hosts - Notepad++

 ข้อควรทราบเกี่ยวกับเรื่อง Port

เนื่องจาก Homestead มันปรับเลข Port ของเราใหม่ เพื่อไม่ให้เป้นค่าปกติ (อาจเพื่อความปลอดภัย หรือเพื่อไม่ให้ Port ไปซ้ำซ้อนกับโปรแกรมอื่นๆในเครื่องเรา) ดังนั้น ต้องทราบไว้ตามนี้ครับ

ซ้ายคือ เลข Port ของ Homestead ที่เราจะใช้, ส่วน ขวาคือ เลข Port มาตรฐานเดิม
SSH: 2222 -> Forwards To 22
HTTP: 8000 -> Forwards To 80
MySQL: 33060 -> Forwards To 3306
Postgres: 54320 -> Forwards To 5432

2. ติดตั้ง Laravel ด้วย Composer

หลังจากทำเครื่อง VM เรียบร้อย คราวนี้ก็มาถึงตัวพระเอกของเรา คือ Laraval นั่นเอง
โดยขั้นแรกให้เราไป Download ไฟล์ Laravel ที่ Github โดยกดที่นี่ได้เลยครับ > Laravel lastest version (หรือใครดาวน์โหลดมาแต่แรกแล้วก็ข้ามขั้นตอนนี้ไป)

จากนั้นคลาย ZIP ไฟล์ ไว้ใน Folder เก็บเว็บไซต์ ที่เราได้ระบุในไฟล์ Homestead Config ส่วนของ folders หัวข้อ map ที่เราได้สร้างไว้ ( ในที่นี้ผมเก็บไว้ที่ D:/www/testlaravel/)

ต่อมา ให้เราเปิดโปรแกรม PuTTY  แล้วทำการ connect ไปยังเครื่อง VM ของเรา ดังนี้

Host Name: 127.0.0.1
Post: 2222 (ปกติ SSH จะใช้ 22 แต่ Homestead มันแก้ให้เราเป็น 2222)

2014-11-05 17_44_02-Blog

เมื่อเข้าไปแล้ว จะเจอหน้าจอให้กรอก login ซึ่งค่ามาตรฐานของ vagrant คือ (เปลี่ยนภายหลังได้)

login: vagrant
password: vagrant

2014-11-05 17_44_19-Blog

หลังจากกรอกผ่านแล้วตามรูปด้านบน ให้เข้าไปที่ Folder ของไฟล์ ที่เราระบุไว้ใน Homestead Config ส่วนของ folders หัวข้อ to (ในที่นี้ ผมตั้งไว้ว่า testlaravel ดังนั้น path ของผมคือ /home/testlaravel/)

2014-11-05 17_44_54-Blog

สังเกตนะครับ ว่า ไฟล์ที่เราคลาย ZIP ไว้ในเครื่องจริงของเราที่เป็น Windows มันจะต้องตรงกับในเครื่อง VM ที่เป็น Linux เพราะมันได้เชื่อมถึงกัน (โครตเจ๋งเลย)

2014-11-05 17_45_26-laravel

เมื่อทุกอย่างครบแล้ว ให้กลับไปที่หน้าจอของ PuTTY และเช็คให้แน่ใจว่าเราอยู่ใน Folder User ของเรา (ของผมคือ /home/testlaravel/) คราวนี้เราจะใช้ composer ในการ install โดยพิมพ์ดังนี้

composer install

เจ้าตัว composer มันก็จะไปโหลด library เวอร์ชั่นล่าสุด ที่เป็นตัวมาตรฐานของ Laravel มาให้ทั้งหมด โดยเราไม่ต้องไปนั่งหาดาวน์โหลดเองเลย (เจ๋งโครตอีกแล้ว)

เมื่อดาวน์โหลดเสร็จแล้ว ให้ไปแก้ไขไฟล์ใน Folder ของ Laravel ดังนี้ /app/config/app.php (ซึ่งถ้าเทียบกับ path ของผม คือ D:/www/testlaravel/public/laravel/app/config/app.php)

แก้ 3 หัวข้อ ดังนี้

‘url’ => ‘http://testlaravel/’, << ใช้ URL ตามที่คุณตั้งชื่อใน Homestead Config

‘timezone’ => ‘Asia/Bangkok’, << ใครอยู่ประเทศอื่นก็ตั้งให้ตรงนะ โดยดูได้ที่ PHP Timezones

‘local’ => ‘th’, << หรือจะปล่อยเป็น en ก็ได้

เมื่อแก้เสร็จแล้วก็ลองเปิดเว็บไซต์ด้วย URL ที่คุณได้ตั้งไว้ (ในที่นี้ผมตั้งไว้ว่า http://testlaravel/) มันก็จะขึ้นหน้าจอ Laravel หมายถึงได้ติดตั้งเรียบร้อยแล้วครับ

2014-11-05 17_36_14-Program Manager

หมายเหตุ* – เวลาเรา ปิด/เปิด เครื่องคอมพิวเตอร์เราใหม่ ก็ให้เข้า Command Line แล้วไปที่ Folder Homestead Config ที่เราตั้งไว้ จากนั้นทำการสั่ง vagrant up เพื่อเปิดเครื่อง VM ก่อน แล้วจึงใช้งานได้ครับ (ไม่มีมีวิธีอื่นหรือวิธีอัตโนมัติไหม ใครมีแนะนำด้วยนะครับ)

2014-11-06 15_01_09-C__Windows_system32_cmd.exe - vagrant  up

The post วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8) appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/how-to-setup-laravel-4-windows/feed 2