Friday, December 19, 2014

แสดง Code ใน Blog ให้สวยงามด้วย Syntax Highlighter

/***********************************
 ** Multiline block comments
 **********************************/
 
$stringWithUrl = "http://alexgorbatchev.com";
$stringWithUrl = 'hello world';
 
ob_start("parseOutputBuffer");      // Start Code Buffering
session_start();
 
function parseOutputBuffer($buf) {
    global $portal_small_code, $portal_gzcompress;
    global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
 
    // cleaning out the code.
    if($portal_small_code && !$portal_gzcompress) {
        $buf = str_replace("    ", "", $buf);
        $buf = str_replace("\n", "", $buf);
        $buf = str_replace(chr(13), "", $buf);
    }
}
  • ก่อนหน้านี้ก็ใช้แต่ Quote ของ Blogger เค้าอย่างเดียวเลย ไม่ค่อยจะสนใจทำให้มันสวยงาม ทั้ง command line ทั้ง code programing ต่างๆ 
  • วันนี้เรามาแสดงโค้ดใน blogger ให้สวยงามกันซะทีเริ่มตั้งแต่โพสนี้แล้วกัน
ขั้นแรกเราต้องแก้ไข template blogger เราก่อน
  •  Log in เข้า dashboard blogger แล้วเมนูด้านซ้ายคลิกที่ template
  • จากนั้นมันจะแสดง template ที่เราใช้งาน ณ ปัจจุบันอยู่ให้เราคลิกที่ Edit HTML 

  • ทำการเพิ่มโค้ดตามนี้เข้าไปในโค้ด template ของเราซะหน่อย โดยให้โค้ดเราอยู่ก่อน close tag </head>
<!-- SyntaxHighlighter START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
 
<script language='javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter END -->
  • จากนั้นคลิกปุ่ม Save template 
  • เพิ่มเติมเราสามารถเปลี่ยนธีมการแสดงโค้ดได้โดยเปลี่ยนค่าบรรทัดนี้ 
  • http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css ค่า shThemeDefault.css เปลี่ยนเป็นค่าอื่นจากเว็บนี้ได้เลย
  •  http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html 
  • เมื่อเปลี่ยนค่าแล้วอย่าลืม Save template ด้วยนะครับ 
การเขียนโพสให้แสดงโค้ดของเราแบบ SyntaxHighlighter 
  • ใช้โหมด HTML นะครับจะง่ายกว่า โดยใช้ 
  • <pre class="brush: X">... code progarming ...</pre>
  • โดยที่ค่า X คือ ภาษาของโค้ดเรา เช่น js, java, php หรือ bash เป็นต้น ดูตัวอย่างด้านล่างน่าจะเข้าใจ
  • หรือถ้าไม่ถนัดอยากใช้โหมด Compose ผู้เขียนแนะนำให้เขียนใส่ dreamweaver หรือ html edit ที่มันแสดงหน้า design ด้วย สักตัวก่อน จึงค่อยโพสขึ้น Blogspot เพราะตอนเขียนเป็นยังไงตอนโพสด้วยโหมด Compose มันก็จะแสดงไม่น่าจะเพี้ยนนะ
  • ข้อควรจำโค้ดที่จะแสดงเป็น syntax highlight เรื่อง เครื่องหมาย น้อยกว่า < ต้องเปลี่ยนเป็น &lt; และ เครื่องหมายมากกว่า > ต้องเปลี่ยนเป็น &gt; มาดูตัวอย่างเลยโพสแบบนี้ เราจะแสดงโค้ด php นะครับ ให้เรานำโค้ดด้านล่างนี้ไปวางในโหมด HTML แล้ว Save ครับพี่น้อง
  • ซึ่งเราสามารถใช้ web site ในการช่วยแปลงเครื่องหมายพิเศษของ HTML เหล่านี้ได้
  • เช่นเว็บเหล่านี้ เป็นต้น
  • http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
  • http://www.web2generators.com/html/entities
  • http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx
แทรกโค้ด PHP ผ่าน HTML editor mode
<pre class="brush: php">
&lt;?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";
?&gt;
</pre>
ผลลัพธ์ (สังเกตุ &lt; จะกลายเป็น < และ &gt; จะกลายเป็น >)
<pre class="brush: php">
<?php
$servername = "localhost";
$username = "username";
$password = "password";

// Create connection
$conn = new mysqli($servername, $username, $password);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
echo "Connected successfully";
?>
</pre>
แทรกบรรทัดคำสั่ง (bash shell)
<pre class="brush: bash">
sudo service apache2 restart
sudo /etc/init.d/apache2 restart
</pre>
เพิ่มเติม 
  • เราสามารถลบ shBrushX.js ในภาษาที่เราไม่ได้ใช้ออกจากโค้ด template blogger เราได้นะเพื่อความรวดเร็วในการโหลด blog เรา
เครดิต
  • http://webdevformula.blogspot.com/2013/11/blog-syntax-highlighter.html
  • http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/default.html
  • http://web264.blogspot.com/2013/07/syntaxhighlighter-code-blogger.html?spref=bl
  • http://www.w3schools.com/tags/ref_urlencode.asp
  • http://stackoverflow.com/questions/10335463/how-to-setup-syntax-highlighter-on-blogger

Tuesday, December 16, 2014

How to install Cacti on Debian 7 Wheezy (7.5)

  • ก่อนอื่นเลยเครื่องที่จะลง Cacti ต้องติดตั้ง Web Server และ MySQL Server ด้วยนะครับพี่น้อง
  • ในที่นี้ผู้โพสได้ติดตั้ง Apache และ MySQL เรียบร้อยแล้ว
Install snmpd and config /etc/snmp/snmpd.conf
sudo apt-get install snmpd
sudo cp /etc/snmp/snmpd.conf /etc/snmp/snmpd.conf
sudo nano /etc/snmp/snmpd.conf
  • เพิ่ม view systemonly included .1 (บรรทัดที่ 45 ไง เพิ่มประมาณนี้แหละ) เพื่อให้ snmp client สามารถ get ค่าได้ทุกอย่างที่ snmpd สามารถบอกได้
  • เปลี่ยนค่า community string ซึ่งค่าเริ่มต้นจะเป็น public เปลี่ยนเป็นค่าอื่นซะ ซึ่งตามภาพจะอยู่ที่บรรทัดที่ 53 จะได้ประมาณนี้ rocommunity mykey default -v systemonly
  • ในที่นี้ community string คือ mykey
  • สุดท้าย restart snmpd
sudo /etc/init.d/snmpd restart
Install Cacti
sudo apt-get install cacti
  • มันจะโพรเซสโหลดเพคเกจไปเรื่อยๆ แล้วมันจะขึ้นหน้าต่างใน text mode ถามเราเรื่อยๆ ดังนี้
  • อย่างแรก เกี่ยวกับค่าคอนฟิก PHP ก็เลือก Ok ไปก่อน
  • เลือก web server ในที่นี้ใช้ apache จากนั้น Ok
  • อันนี้เกี่ยวกับ dbconfig-common เลือก Ok ไปก่อน
  • กรอกพาสเวิร์ด root ของ MySQL นะอันนี้
  • กรอกพาสเวิร์ดสำหรับ user MySQL ที่ cacti จะใช้ เป็น user สำหรับเชื่อมต่อของ web app กับ MySQL
  • กรอกพาสเวิร์ดสำหรับ user MySQL ของ web cacti อีกครั้ง
  • ติดตั้ง cacti เรียบร้อย มันจะมีการ reload web server ครั้ง
ตั้งค่าเริ่มต้นให้ Cacti
  • ติดตั้งเรียบร้อยให้เปิด web browser แล้ว address bar พิมพ์ http://localhost/cacti ประมาณนี้
  • หน้านี้ก็ คลิก Next ต่อได้เลย
  • เลือก New Install แล้วคลิก Next
  • ค่าทุกอย่างถูกต้องแล้ว ไม่ต้องเปลี่ยนค่าอะไรคลิก Finish ได้เลย
  • กรอก user และ password ใช้เป็น admin ทั้ง 2 ค่าเลย
  • มันจะให้เราเปลี่ยน password ใหม่หว่า เราจะใส่ค่าเดิมหรือค่าใหม่ก็แล้วแต่เราครับ
เพิ่ม Device พร้อมสร้างและแสดง Graph กัน
  • เมื่อเรา Login เข้าสู่ระบบแล้วให้เลือก Console โหมด ปุ่มจะอยู่ด้านบนนะ จากนั้นคลิกเมนู Devices
  • เราจะพบค่า devices เริ่มต้นใน list อยู่ 1 อันคือ localhost แต่ในที่นี้เราจะเพิ่ม device ของเราเองเข้าไปด้วย โดยคลิกปุ่ม Add มุมขวาบน

  • จากนั้นเราจะพบหน้าฟอร์มให้เรากรอก ที่สำคัญต้องกรอกก็มี Description , Hostname และ SNMP Community (Hostname ให้เรากรอกเป็น 127.0.0.1 ไปเลย เพราะ ใส่เป็น localhost อาจมีปัญหาเกี่ยวกับ permission ของ snmp) เมื่อใส่ข้อมูลเรียบร้อยให้คลิกปุ่ม Create ที่มุมขวาล่าง
  • เพิ่ม device ใหม่สำหรับจะได้ค่าประมาณภาพนี้ Save Successful. (ในกรณีที่ไม่สำหรับ เช่น มีการแสดงคำว่า SNMP Error สีแดงด้วย ให้เราไปดู config ของ snmpd ให้ดี หรือกลับไปดูตรง hostname เราใส่เป็น localhost หรือเปล่าถ้าใช่ให้เปลี่ยนค่าเป็น 127.0.0.1 แล้ว บันทึกค่าใหม่)
  • ต่อเลย ให้เราคลิกที่ เมนู Devices ที่อยู่ด้านซ้ายมือเรา แล้วมันจะแสดงรายการ device ทั้งหมดเราจะพบ device ที่เราพึ่งเพิ่มเข้าไปดังกรอกสีแดง ให้เราทำการคลิกชื่อ device ใหม่
  • ที่รายการ Grahp Template Name เลือก Template ตามที่เราต้องการได้เลย
  • และที่ Data Query Name ก็เลือกได้เลเราต้องการอะไรบ้าง
  • ในที่นี้ Graph Template Name ผู้เขียนเลือก 
Linux - Memory Usage
ucd/net - CPU Usage
Unix - Logged in Users
Unix - Ping Latency
  • ส่วน Data Query Name ผู้เขียนเลือก 
SNMP - Get Mounted Partitions SNMP - Interface Sstatistics
  • เพิ่มเติมในส่วนของ Status รายการ SNMP - Interface Statistics ตรงหลัง Success บางทีมันจะได้ค่า [0 Items, 0 Rows] ระบบอาจจะ แฮ้งๆ อยู่ให้เราทำการลบรายการนี้ แล้วแล้วเพิ่มรายการเดิมนี้อีกรอบ มันก็น่าจะแสดง Item ที่ไม่เป็น 0 แล้วครับ
  • เมือเลือกทั้งหมดแล้วว่าจะ moniotor อะไรบ้างก็คลิกปุ่ม Save ที่อยู่ขวาล่างได้เลย
  • จากนั้นไปสร้าง Graph โดยคลิกเมนูซ้าย New Graphs
  • มันจะแสดง Query ที่เราได้เพิ่มไว้ในขั้นตอนก่อนหน้านี้ไงครับ มันเตรียม query ต่างๆ ไว้สำหรับสร้าง graph นี่เอง เลือกได้เลยว่าจะเอา query ใหนไปสร้าง graph มั่ง โดย ติ๊กถูกที่ช่อง ขวาสุดของรายการ
  • จากนั้นคลิกปุ่ม Create
  • เกี่ยวกับค่าสีที่แสดง คลิก Create ต่อเลย
  • สร้าง Graphs สำเร็จ มันจะแสดงประมาณ 2 ภาพด้านล่างนี้
  • สร้าง Graphs แล้ว มาสร้าง Tree สำหรับแสดง Graph ต่อครับ โดยคลิกที่ Graph Trees และคลิก เมนู Add ซึ่งจะอยู่ขวาบนดังภาพ
  • ที่ Name ให้เราระบุชื่อ Node ครับ จากนั้นคลิกเมนู Add ของ Tree Items

  • จากนั้นเลือก Tree Item Type ว่าจะให้อะไรแสดงใน Node นี้บ้าง
  • Host คือ ให้แสดง graph ทั้งหมดของ device ที่จะเลือกใน Node นี้
  • Graph คือ เลือกเฉพาะ graph ลง Node นี้ 
  • Header คือ จะแสดง graph เป็นรายการ title ใน Node tree ไปเลย
  • ซึ่งในที่นี้เลือก Host แล้วเราเลือก device ที่เราพึ่งได้ทำการเพิ่มเข้ามาในขั้นตอนก่อนหน้านี้เลย
  • สุดท้ายคลิก Create ได้เลย เป็นอันสร้าง Tree และเพิ่ม Graph เข้าไปใน Tree เรียบร้อยแล้ว
  • คลิกที่ Graphs mode เพื่อแสดง Graphs ได้แล้วครับ
Related
  • http://juuier.blogspot.com/2011/03/cacti-on-ubuntu-1010-part-1.html
  • http://juuier.blogspot.com/2011/03/cacti-on-ubuntu-1010-part-2.html
  • http://juuier.blogspot.com/2011/03/cacti-on-ubuntu-1010-part-3.html
อ้างอิง
  • Debian 7.5 64 bit , Cacti 0.8.8
  • http://ewams.net/?date=2014/07/14&view=How_to_install_Cacti_on_Debian_7_Step_by_Step

Friday, December 12, 2014

Tunnelling MySQL Over SSH by MySQL Workbrench 6.2 on Windows 8.1

  • ประเด็นมีอยู่ว่า ทำ Tunnelling MySQL Over SSH ใช้ putty ประกอบคอนฟิกนี้ด้วย บน windows 8.1 ประมาณนี้
  • MySQL Workbrench 6.2 รุ่น 64 bit ในการเชื่อมต่อ มันทำไม่ได้ 
  • ทั้งที่ก่อนหน้านี่จำได้ว่ามันทำได้นะ แต่ทำไมตอนนี้มันทำไม่ได้หว่า
  • ทดสอบ Connection ใน  dbForge Studio Express for MySQL 6.3 Express Edition มันสร้าง Connection ไปที่ server ที่เรากำลัง SSH remote อยู่ได้นะครับ
  • แล้วทำไม MySQL Workbrench 6.2 Community Edition มันสร้าง Connection ไม่ได้หว่า
Solved
  • การใช้ MySQL Workbrench ตามโพสนี้ ไม่มีความจำเป็นต้องพึ่ง putty หรือ โปรแกรมอื่นๆ เพื่อทำ tunneling เลย เพราะ ตัว MySQL Workbrench มันมี ฟังก์ชั่นนี้ในตัวมันเองแฮะ เยี่ยมจริงๆ
  • โดยเลือก Connection Method จากค่าเริ่มต้นมันจะเป็น Standard (TCP/IP) 
  • เปลี่ยนไปเลือกเป็น Standard TCP/IP over SSH
  • จากนั้นให้เรากรอกข้อมูลประมาณนี้ได้เลย
  • SSH Hostname ใส่เป็น host จริงที่มี MySQL รันอยู่ครับ
  • SSH Username กรอก user จริงที่ใช้ ssh remote
  • SSH Password หรือ SSH Key File อันนี้แล้วแต่ชอบว่า authen ด้วยรหัส หรือ public key authen
  • MySQL Hostname เราใส่เป็น localhost นะ เพราะเราจะเกาะพอร์ต 22 ที่ localhost เข้าไปยัง 3306 ที่ host จริง
  • MySQL Server Port ใส่เป็น 3306 เลย (ในกรณีที่เครื่อง local ได้ติดตั้ง MySQl Server ไว้ด้วย เราให้ เปลี่ยนพอร์ต MySQL บนเครื่อง local จาก 3306 เป็นอย่างหมายเลขอื่นๆ ก่อน หรือ stop MySQL บน local ไปก่อน แล้วเราจึงทำ tunnelling เพราะ หมายเลขมันจะชนกันนะ)
  • Username: และ Password: ใส่เป็น user และ pass ของ MySQL Server จริงๆ ไปเลยครับ
  • การตั้งค่ามีเพียงเท่านี้เอง Testing connection ได้เลยครับ
  • ซึ่งมันง่ายกว่าเวอร์ชั่นเก่านะที่เราต้อง config setting ของ putty ก่อนจึงจะ connect ได้ซึ่งลดเวลาการตั้งค่าเพื่อจะใช้เชื่อมต่อได้มากทีเดียว
เพิ่มเติม
Related
  • http://juuier.blogspot.com/2013/11/tunnelling-mysql-over-ssh-on-windows-8.html
  • http://juuier.blogspot.com/2013/10/tunnelling-mysql-over-ssh-in-linux.html

Tuesday, December 2, 2014

Upload photo and video from Android to Google Drive automatic

  • ประเด็นมีอยู่ว่า android ของเรา ในกรณีที่เราติดตั้ง Dropbox แล้วถ่ายภาพด้วยกล้องมือถือเรา ตัวแอพ Dropbox มันจะมี feature ให้ตั้งค่าสำรองไฟล์ภาพ หรือ วิดีโอที่เราได้ถ่ายด้วยมือถือเราขึ้น cloud storage ของ Dropbox เค้าเลย มันช่างง่ายซะจริงๆ
  • และใน OneDrive เค้าก็มี feature แบบนี้เหมือน Dropbox เลย 2 ค่ายนี้โอเคมากๆ เลย
  • Dropbox เราชอบนะ แต่พึ้นที่แบบฟรีมันน้อยไม่พอสำรองภาพและวิดีโอเรา
  • ส่วน OneDrive นั้นพื้นที่มันเยอะนะ แต่เรา สาย Google หว่า หลายๆ บริการใช้ Google อยู่
  • แต่ไง๋ Google Drive เราล่ะ มันทำไม่ได้เหมือน 2 ค่ายนั้นเค้าหว่า
Solved

  • เปิดโปรแกรมขึ้นมา On service ให้เรียบร้อยเพียงเท่านี้เองครับ
  • option มันมีให้เรียกเยอะครับ เช่น เลือกเฉพาะ folder Camera หรือ DCIM ซึ่งเป็นที่สำหรับเก็บไฟล์ที่เรา
  • ถ่ายภาพหรือวิดีโอเอาไว้อย่างเดียว หรือ จะเอาภาพที่อยู่ในเครื่องทั้งหมดอัพขึ้นด้วย
  • หรืออีก option เช่น เลือก folder ที่จะเอาภาพอัพโหลดขึ้นไปได้ด้วย เป็นต้น
ที่มา
  • http://dottech.org/109560/android-review-cloudvault/
  • http://www.addictivetips.com/android/cloudvault-instant-photo-video-upload-from-android-to-google-drive/
  • http://android.appstorm.net/how-to/synchronization/how-to-sync-photos-to-google-drive-via-foldersync/
  • https://play.google.com/store/apps/details?id=com.nekjo.photouploader&hl=en

Popular Posts