คลังเก็บหมวดหมู่: Coding

Save CSS – Extension สำหรับ Google Chrome ที่ทำให้คุณบินได้

เขียนบน โดย
ตอบกลับ

สำหรับหลายคนที่ต้องทำการ dev ในส่วน Javascript มันคงเป็นเรื่องปวดหัวในวิธีแบบเดิมๆ คือ เปิด Editor แก้ไฟล์ บันทึก แล้วก็กด F5 ซึ่งมันก็เป็นเรื่องปวดหัวอย่างมาก พอบางท่านที่ได้รู้จัก Google Chrome ก็จะค้นพบว่าการ dev มันง่ายขึ้น เพราะ Google Chrome มีความสามารถในการทำ Live edit ได้ คือแก้ปุ๊บแล้วหน้าเว็บจะเปลี่ยนเลย ไม่ต้องกด F5 อีกต่อไป

ถ้าเป็นสมัยก่อนบน IE รุ่นเดอะ เราจะใช้การรัน Javascript บนช่อง Address Bar เพื่อจะทำจะแก้อะไรสักอย่าง แต่มันก็ได้แค่แก้หลังเกิด Event อะไรไปแล้ว ต่างกับ Live edit บน Google Chrome ที่เราแก้ได้แม้กระทั่ง Event ที่ bind ไว้แล้ว

สำหรับคนที่ไม่รู้ความสามารถเหล่านี้เลย ประมาณว่ามันคืออะไร มีด้วยเหรอ แนะนำดูคลิปข้างล่างนี้ ส่วนความสามารถ Live edit มันมีอยู่ในช่วงนาทีที่ 3 ครับ และสามารถทำได้ทั้ง JS และ CSS
[media url=”https://www.youtube.com/watch?v=nOEw9iiopwI” width=”853″ height=”480″]

กลับมาประเด็นของโพสนี้ต่อ คือเมื่อเราใช้ Live edit ได้ แม้จะแก้แบบเราเรียกว่า on the fly แต่เราก็ไม่ได้ fly จริงๆ สักที เพราะเราต้องก็อบ JS ใน Live edit กลับมาแปะลงบน Text editor หรือ IDE แล้วบันทึกจริง ผมเลยเกิดความคิดว่า แล้วมันไม่มีตัวช่วยอะไรที่ช่วยเซฟ JS หรือ CSS ลงเครื่องเราเลยเหรอ? แล้วในที่สุด… (จริงๆ ผมใช้เวลาไม่ถึง 3 นาทีก็เจอเว็บเขาใน Google ล่ะ)

http://tomicloud.com/2012/04/save-css-chrome-ext
save-css-chrome-extension

วิธีการใช้งานก็ดูตามเว็บเลย คือ ติด Extension จาก Chrome Web Store แล้วปิดเปิด Chrome รอบหนึ่ง แล้วเข้าไป map โดเมนของเรา เช่น localhost เข้ากับโฟลเดอร์ในเครื่องเรา แล้วติดตั้ง Ruby ลงเครื่อง สำหรับคนใช้ Windows ก็แนะนำให้โหลด http://rubyinstaller.org/ มาติดในเครื่อง แล้วตอนติดตั้งอย่าลืมตั้งให้เรียกคำสั่ง ruby ใน cmd ได้ด้วย กับเลือกให้ไฟล์ .rb ทำงานกับ Ruby ด้วย เพราะเวลาเราเปิด server จะได้ทำง่ายๆ ด้วยการดับเบิ้ลคลิก

สุดท้ายดาว์นโหลดไฟล์ server.rb มาลงเครื่อง แล้วเปิดมันทำงานขึ้นมา เมื่อเราแก้ JS CSS ใน Chrome มันจะเซฟลงเครื่องให้อัตโนมัติเลย

ส่วนใครที่คล้ายผม คืออยากแก้แค่ JS แล้ว CSS ไม่อยากยุ่ง กลัวเละ ตอนนี้ตัว Extension ยังไม่มีตัวเลือกให้ตั้งค่าตรงนี้ ก็แนะนำให้เอา server.rb ที่ผมแก้ไปรันแทน แก้ขัดไปก่อน

#!/usr/bin/ruby
# -*- coding: utf-8 -*-

# server.rb: receive CSS and JS files from Chrome extension
#   and save files locally
#
# Author: Tomi.Mickelsson@iki.fi
#   04.02.2012 - Created

require 'webrick'
include WEBrick

class MyServlet < HTTPServlet::AbstractServlet

  def do_POST(req, res)
    url   = req.header['x-origurl']
    fpath = req.header['x-filepath']
    bodylen = req.header['content-length']
    raw = req.body
    fpath = fpath.join("")

    if /\.css$/.match(fpath)
        print "It's CSS. Don't save it."
        res.status = "200"
        res.body = "OK"
        return false
    end

    print url, " -> ", fpath, " ", bodylen, "\n"

    reply = "OK"

    # save file
    begin
        f = File.open(fpath, "wb")
        f.syswrite(raw)
        f.close
    rescue => e
        puts "EXCEP " + e.message
        reply = e.message
    end

    res.status = "200"
    res.body = reply
  end

end

# start server
server = HTTPServer.new(:BindAddress => "localhost",:Port => 8080)
server.mount('/', MyServlet)

trap 'INT' do server.shutdown end

puts "Server running in port 8080..."
server.start

ขอให้มีความสุขกับการแก้บั๊กครับ  T-T

Laravel Security

เขียนบน โดย
1

หนึ่งในเรื่องที่ต้องคิดถึงในการเลือกใช้ Framework ที่ทุกคนคิดกันคือเรื่อง Security หรือการรักษาความปลอดภัย เพราะหลายคนก็คิดว่ามันเป็นเรื่องที่ต้องเจอกัน มีทุกงานเขียนทุกงาน เมื่อเราเลือก Framework มาลดภาระงาน งานนี้ก็ควรจะเป็นหน้าที่ของเขาด้วย วันนี้ผมจะไล่ทีละเรื่องให้ทุกคนฟังกัน ข้อมูลส่วนนี้พิมพ์จากการใช้งาน Laravel 3 นะครับ

1. CSRF protection หรือการปลอมแปลง http request ที่เรียกข้ามเว็บไซต์ เรื่องนี้ Laravel มีป้องกันอยู่แล้ว โดยเป็นการสร้าง Token ไว้ตรวจสอบ หาอ่านได้ที่ CSRF protection

2. Cookie Security ส่วนมากเรามักเจอคือการแก้ไขคุ๊กกี้ ซึ่งจุดนี้ Laravel ก็มีป้องกันไว้แล้วเช่นกัน โดยสร้าง signature hash มาตรวจสอบ ถ้ามีการแก้ไขค่า hash จะไม่ตรงกัน หาอ่านได้ที่ Cookies

3. SQL-Injection เรื่องนี้ไม่ต้องท้าวความเลย มีป้องกันไว้เหมือนกัน โดย Laravel จะทำงานผ่าน PDO หาอ่านได้ที่ PDO/Prepared statements and stored procedures สรุปให้สั้นๆ คือ ถ้าเรียกทำงานผ่าน Fluent หรือ Eloquent มันก็จะจัดการให้เสร็จ ส่วนถ้าใครอยากเขียน query ดิบๆ ก็ควรเขียนตามไกด์อันนี้ Raw Queries

4. XSS หรือการแทรกโค้ดไม่พึ่งประสงค์ลงหน้าเว็บ เรื่องนี้ Laravel ไม่มีการป้องกันครับ ซึ่งจริงๆ ถามว่าเป็นเรื่องดีไหมมันก็ดีนะครับ เพราะความต้องการปลีกย่อยบางคนไม่เหมือนกัน และ PHP ก็มีฟังค์ชั่นพื้นฐานมาเพื่อป้องกันเรื่องพวกนี้แล้วอย่าง strip_tags() and htmlentities() ส่วนถ้าใครไม่อยากปวดหัวอะไรมากมาย ได้มีคนทำ bundle HTMLPurifier ไว้แล้ว

หวังว่าโพสนี้จะช่วยลดความกังวลในการเลือกใช้ Laravel นะครับ

ทำระบบล็อกอินแบบโครตง่ายบน Laravel

เขียนบน โดย
ตอบกลับ

วันนี้อัพบล็อกสักหน่อย กลัวร้าง  /XD วันนี้ผมจะพูดถึงระบบล็อกอิน ซึ่งเป็นระบบที่ต้องเขียนกันมันทุกงานอยู่แล้ว ที่จะเขียนวันนี้เป็นระบบโครตง่ายแต่สบายสุดๆ ก่อนอื่นผมไม่เอ่ยพื้นอะไรมากมาย เริ่มกันเลย

1. สิ่งที่คุณต้องมีคือฐานข้อมูลตาราง users กับโมเดลตามมาตรฐาน Eloquent เลย คือ มีฟิลด์ id, username หรือ email (จะมีทั้งคู่ก็ได้) และ password เรื่องการสร้างโมเดลหาอ่านได้ที่เว็บ Laravel เลยครับ ตั้งค่าการติดต่อฐานข้อมูลให้เสร็จด้วยนะครับ

2.กำหนด route.php ตามนี้เลย

Route::any('/user/login', 'user@login');

3. สร้าง controller ชื่อ user.php แล้วก็ตามนี้เลย

<?php

class User_Controller extends Base_Controller {

	public $restful = true;

	public function __construct() {
		parent::__construct();
	}

	public function get_login()
	{
		return View::make('user.login')->with('error', Session::get('error'));
	}

	public function post_login()
	{
		$userinfo = array(
			'username'    => strtolower(Input::get('email')),
			'password'     => Input::get('password'),
			'remember'    => Input::get('remember')
		);

		if ( Auth::attempt($userinfo) )
		{
			return Redirect::home();
		}
		else
		{
			return Redirect::to('user/login')
				 ->with('error', 'อีเมล์หรือรหัสผ่านไม่ถูกต้อง')
				->with_input();
		}
	}

}

4. สร้าง view user/login.blade.php

<div class="span8 offset2 well">
	<h2>เข้าสู่ระบบ</h2>
	<hr />
	{{ Form::open(URL::current()) }}

	@if (!empty($error))
		<div class="alert alert-error">{{ $error }} </div>
	@endif

	<div class="control-group">
		{{ Form::label( 'email', 'อีเมล์', array( 'class' => 'control-label')) }}
		<div class="controls">
			<div class="input-prepend"><span class="add-on"><i class="icon-envelope"></i></span>
				{{ Form::text( 'email', Input::old( 'email')) }}
			</div>
		</div>
	</div>

	<div class="control-group">
		{{ Form::label( 'password', 'รหัสผ่าน', array( 'class' => 'control-label')) }}
		<div class="controls">
			<div class="input-prepend"><span class="add-on"><i class="icon-lock"></i></span>
				{{ Form::password( 'password') }}
			</div>
		</div>
	</div>

	<div class="control-group">
		<div class="controls">
			<label class="checkbox">
				{{ Form::checkbox( 'remember', '', Input::old('remember')) }} จดจำการล็อกอิน
			</label>
		</div>
	</div>

	<div class="controls">
		{{ Form::submit( 'เข้าสู่ระบบ', array( 'class' => 'btn btn-success' ) ) }}
	</div>

	{{ Form::close() }}
</div>

ถ้าผมพิมพ์ไม่ผิด ตามนี้จะได้ระบบล็อกอินเสร็จสรรพ มีระบบจดจำล็อกอินด้วย ที่เหลือก็ไปดูๆ กันเองนะครับ ว่าอะไรเป็นอะไร 555+

ปล. ถ้าหน้าตาออกมาแปลกๆ ให้ลง bundle bootstrapper นะครับ เพราะผมใช้ตัวนี้อยู่ครับ
ปล2. จริงๆ สามารถเขียน controller ให้สั้นกว่านี้ได้อีก แต่แบบข้างบนนี้จะคุมการใช้งานได้ดีกว่าหน่อยครับ