28/3/59

แท็ก HTML Header ที่สำคัญที่ควรรู้จัก

แท็ก HTML Header ที่สำคัญที่ควรรู้จัก


เรามาดูและทำความรู้จักแท็กที่ส่วนมากเรากำหนดไว้ในแท็ก <head> กันครับ ซึ่งเรารู้แล้วว่าแท็กที่อยู่ใน <head> จะไม่ปรากฎในหน้าเว็บเพจ แต่จะเป็นแท็กที่เอาไว้สำหรับกำหนดคุณสมบัติต่าง ๆ ของเว็บเพจนั้น ๆ ซึ่งก็มีหลาย ๆ แท็กที่ควรนำไปใช้ และบางแท็กก็มีความสำคัญที่เราจะมองข้ามไม่ได้ เรามาดูกันครับ

The HTML <title> Tag

HTML <title> แท็กเอาไว้สำหรับกำหนด title ให้กับ HTML document

ตัวอย่างการใช้งานแท็ก <title>
<title>HTML Title Tag Example</title>

The HTML <meta> Tag

HTML <meta> แท็กจะใช้ในการกำหนด metadata ของ HTML document ซึ่งรวมไปถึงการเพิ่มข้อมูลเกี่ยวกับเพจ keywords description และอื่น ๆ อีกมาก เรามาดูตัวอย่างที่สำคัญกันครับ

<!-- เป็นการกำหนด keywords ให้กับเว็บเพจ ว่ามี keywords อะไรบ้างโดยกั้นด้วยเครื่องหมายจุลภาค หรือลูกน้ำ -->
<meta name="keywords" content="Java, PHP, HTML, Javascript, CSS">

<!-- เป็นการกำหนด description ให้กับเว็บเพจ -->
<meta name="description" content="เพราะทุกวันคือการเรียนรู้ เรียนรู้ไปพร้อมกันกับ คนดีที่แสนเลว">

<!-- เป็นการกำหนดข้อมูล Author ให้กับเว็บเพจ -->
<meta name="author" content="Doesystem">

<!-- เป็นการกำหนด content type ให้กับเว็บเพจนั้น ๆ -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- กำนหนดการ refreshing delay ให้กับ Page -->
<meta http-equiv="refresh" content="30">

<!-- เป็นการกำหนดค่า expiry -->
<meta http-equiv="expires" content="Wed, 21 June 2016 15:55:55 GMT">

<!-- เป็นแท็กที่บอกว่าไม่ให้ robots index ข้อมูลในเพจนี้ -->
<meta name="robots" content="noindex, nofollow">

The HTML <base> Tag

HTML <base> แท็กนี้ก็มีความสำคัญไม่น้อย ซึ่งจะเป็นแท็กที่ใช้สำหรับกำหนด base URL สำหรับ relative URLs ตัวอย่างง่าย ๆ ถ้าเราไม่ได้กำหนด base URL ถ้าเราอยู่ใน directory เช่น http://www.doesystem.info/html/index.html ถ้าเราต้องการไปที่ http://www.doesystem.info/index.html เราก็ต้องสร้างลิ้งซึ่งเป็นดังนี้ ../index.html เพื่อบอกว่าให้ย้อน URL ไปหนึ่งอัน แต่ถ้าเรามี base URL ที่ชี้ไปหา http://www.doesystem.info/ แล้วเราสามารถสร้างลิ้งเป็น index.html ได้เลย

The HTML <link> Tag

HTML <link> แท็กนี้เอาไว้ใช้สำหรับการกำหนดความสำพันธ์ระหว่างเอกสารปัจจุบันกับเอกสารภายนอก เช่นเราจะลิ้งไปยังเอกสารภายนอก ตัวอย่างโค้ด

<base href="http://www.doesystem.info/" />
<link rel="stylesheet" type="text/css" href="/css/style.css">

จากโค้ดเป็นการที่เรา ลิ้งไปยังเอกสารข้างนอกที่ชื่อ style.css ใน subdirectory css เราไม่จำเป็นต้องระบุ http://www.doesystem.info/css/style.css เพราะว่าเรามีแท็ก base ไว้อยู่แล้ว

The HTML <style> Tag

HTML <style> แท็กเป็นการกำหนด style ที่ใช้ในหน้าเพจนั้น ๆ ตัวอย่างโค้ดตามด้านล่าง

<style type="text/css">
.myclass{
   background-color: #aaa;
   padding: 10px;
}
</style>

The HTML <script> Tag

HTML <script> เป็นการกำหนด script ให้กับหน้าเพจนั้น ๆ ตัวอย่างโค้ดตามด้านล่าง

<script type="text/javascript">
function Hello(){
   alert("Hello, World");
}
</script>

การใช้ HTML marquee แบบง่าย ๆ และการปรับแต่ง

การใช้ HTML marquee แบบง่าย ๆ และการปรับแต่ง


บทความนี้เรามาดูวิธีการใช้ HTML marquee แบบง่าย ๆ กันครับ และการปรับแต่ง เช่นความเร็ว ทิศทาง ซึ่งแท็ก marquee เป็นการ scrolling ข้อความหรือรูปภาพทั้งแนวตั้งและแนวนอน ในเว็บเพจ เรามาดูว่ามีวิธีการใช้ยังไงกันครับ

ข้อแนะนำ
แท็ก marquee นี้บาง browser อาจจะไมี support ดังนั้นเราไม่แนะนำให้ใช้แท็กนี้ ซึ่งถ้าจะใช้ effect แบบนี้เราอาจจะใช้ javascript หรือใช้ CSS เข้ามาช่วย

เรามาดู Syntax กันก่อนครับ ตามด้านล่างเลย

<marquee attribute_name="attribute_value"....more attributes>
One or more lines or text message or image
</marquee>

จากตัวอย่าง Syntax ต่อไปเรามาดู Attributes กันต่อเลยครับตามด้านล่างเลย

- width เป็นการกำหนดขนาดความกว้างของ marquee เราสามารถใส่ค่าเป็นเปอร์เซ็นได้ เช่น 10 หรือ 20% และอื่น ๆ
- height เป็นการกำหนดขนาดความสูงของ marquee เราสามารถใส่ค่าเป็นเปอร์เซ็นได้ เช่น 10 หรือ 20% และอื่น ๆ
- direction เป็นการกำหนดทิศทางของ marquee ที่ต้องการจะเลื่อน ค่าที่สามารถใส่ได้ เช่น up, down, left หรือ right.
- behavior เป็นการกำหนดชนิดที่ใช้ในการเลื่อนของ marquee ค่าที่สามารถใส่ได้เช่น scroll, slide และ alternate.
- scrolldelay เป็นการกำหนดค่าในการ delay ระหว่างแต่ละรอบ ค่าที่สามารถใส่ได้ เช่น 10 และอื่น ๆ
- scrollamount เป็นการกำหนดความเร็วของ marquee text ค่าที่สามารถใส่ได้ เช่น 10 และอื่น ๆ
- loop เป็นการกำหนดเวลาในแต่ละรอบซึ่งค่า default ของมันก็คือ INFINITE
- bgcolor เป็นการกำหนดสีพื้นหลังใน terms
- hspace เป็นการกำหนด horizontal space รอบ ๆ marquee ค่าที่สามารถใส่ได้ เช่น 10 หรือ 20% หรืออื่น ๆ
- vspace เป็นการกำหนด vertical space รอบ ๆ marquee ค่าที่สามารถใส่ได้ เช่น 10 หรือ 20% หรืออื่น ๆ


ตัวอย่างโค้ดที่ 1
<marquee>นี่คือตัวอย่างพื้นฐานของการใช้แท็ก marquee</marquee>

ผลลัพธ์ที่ได้
นี่คือตัวอย่างพื้นฐานของการใช้แท็ก marquee

ตัวอย่างโค้ดที่ 2
<marquee direction="right">นี่จะเป็นการใช้แท็ก marquee ที่เลื่อนจากซ้ายไปขวา</marquee>

ผลลัพธ์ที่ได้
นี่จะเป็นการใช้แท็ก marquee ที่เลื่อนจากซ้ายไปขวา

การใช้ HTML List

การใช้ HTML List แบบง่าย ๆ


มาดูวิธีการใช้ List ใน HTML แบบง่าย ๆ กันครับ ซึ่งจะเป็นพื้นฐาน เราจะมาดูว่าโค้ดพื้นฐานเป็นแบบไหน และ List นั้นมีอะไรบ้าง

ใน HTML นั้นได้เสนอวิธีการกำหนดข้อมูลที่เป็น List ออกมาเป็น 3 วิธีนั่่นคือ

<ul> เป็นตัวย่อของ unordered list เป็นการแสดง List ให้เป็นรายการโดยไม่มีลำดับและ default เป็นรูปวงกลม
<ol> เป็นตัวย่อของ ordered list เป็นการแสดง List ในรูปแบบของลำดับตัวเลข
<dl> เป็นตัวย่อของ definition list เป็นการจัดแสดง List คล้าย ๆ รูปแบบของ dictionary

ตัวอย่างโค้ดและตัวอย่างการแสดงผลที่ได้

UL

<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>

ผลลัพธ์ที่ได้
  • Beetroot
  • Ginger
  • Potato
  • Radish

OL

<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>

ผลลัพธ์ที่ได้
  1. Beetroot
  2. Ginger
  3. Potato
  4. Radish

DL

<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

ผลลัพธ์ที่ได้
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

นี่เป็นตัวอย่างแบบง่ายแบบง่ายของการแสดง List ใน HTML นอกจากนี้เรายังสามารถกำหนด Attributes ให้กับ List เพื่อให้แสดงผลตามต้องการได้อีกหลาย ๆ แบบ เช่นเปลี่ยนเครื่องหมายหน้า list เป็น order จากตัวเลขเป็นอย่างอื่น และอื่น ๆ อีกมาก

HTML Tag, HTML Elements, HTML Attributes ต่างกันยังไง

HTML Tag, HTML Elements, HTML Attributes ต่างกันยังไง


มาดูความแตกต่างระหว่าง HTML Tag, HTML Element และ HTML Attributes กันดีกว่าครับ ว่ามันแตกต่างกันยังไง ซึ่งถ้าฟังดูแรก ๆ อาจจะสับสนระหว่างคำพวกนี้นี้

HTML Tag

ในการใช้ภาษา HTML นั้นเราจะรู้แล้วว่าถ้าเราต้องการจะทำ header แล้วเราสามารถใช้ <h1> <h2> <h3> .. ไปเรื่อย ๆ ได้ ซึ่งพวกนี้เราจะเรียกว่า Tag ซึ่งบางแท็กก็จะมีแท็กเปิด เช่น <h1> และก็มีแท็กปิดเช่น </h1> แต่บางแท็กก็ไม่จำเป็นต้องมีแท็กปิด เช่น <br />

HTML Element

HTML Element จะถูกกำหนดโดยการเปิดแท็ก และถ้าแท็กนั้นมีข้อมูลอยู่ก็จะมีแท็กปิด แต่บางแท็กไม่จำเป็นต้องมีแท็กปิด แต่เราจะเขียนโดยมีเครื่องหมายสแลชเพื่อเป็นการบอกว่ามีการปิดแท็กแล้ว มาดูตัวอย่างโค้ดกัน ตามด้านล่าง

<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>
<br />

จากตัวอย่างโค้ดเราจะเห็น <p>...</p> ซึ่งเราจะเรียกว่า HTML Element และ <h1>...</h1> ก็เป็นอีกหนึ่ง HTML Element และบาง Html Element ก็ไม่จำเป็นต้องมีแท็กปิด

HTML Attributes

ถ้าเราแปลคำว่า Attributes ให้เป็นภาษาไทยเราจะแปลได้ว่าคุณสมบัติ ซึ่งถ้าเปรียบเทียบกับ HTML Attributes ก็คือการเพิ่มคุณสมบัติให้กับ HTML นั่นเอง ซึ่งปกติถ้าเราใช้แท็กแบบไม่ใส่ Attributes ก็จะเป็นการใช้แบบปกติทั่วไป แต่เรายังสามารถใส่คุณสมบัติต่าง ๆ ตามต้องการให้กับ HMTL ได้

ในการกำหนด Attributes ให้กับ HTML นั้นจะมีส่วนประกอบอยู่ 2 อย่างนั่นคือ name กับ value ซึ่ง name จะเป็นการบอกว่าให้ใส่คุณสมบัติอะไร ส่วน value จะเป็นการบอกว่าให้คุณบัตินั้นเป็นแบบไหน เรามาดูตัวอย่างโค้ดกันดครับ

<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>

จากตัวอย่างโค้ดจะเห็นว่า เราจะใส่คุณสมบัติ align ซึ่งเป็นการกำหนดตำแหน่งให้กับแท็ก <p> ซึ่งมีค่า left center right ตามต้องการ ซึ่งถ้าดูแล้ว align ก็คือ name ส่วน left center right ก็คือ value ของ name นั่นเอง

22/3/59

การใช้ฟังก์ชัน fn:substring-after ใน XQuery Function เพื่อตัดข้อความหน้าข้อความที่ต้องการ

การใช้ฟังก์ชัน fn:substring-after ใน XQuery Function เพื่อตัดข้อความหน้าข้อความที่ต้องการ

การใช้ฟังก์ชัน fn:substring-after ใน XQuery Function เพื่อตัดข้อความหน้าข้อความที่ต้องการ โดยการค้นหาคำที่ต้องการจะค้นหาจากหลังมา ซึ่งต่างจาก fn:substring-before ซึ่งจะค้นหาจากหน้ามา

เรามาดูตัวอย่างและวิธีการใช้ฟังก์ชัน fn:substring-after กันครับ

fn:substring-after($arg1 as xs:string?, $arg2 as xs:string?) as xs:string
fn:substring-after($arg1 as xs:string?, $arg2 as xs:string?, $collation as xs:string) as xs:string

fn:substring-after เป็นการตัดสตริงที่ต้องการ โดยการตัดนั้นจะตัดข้อความทั้งหมดหลังข้อความที่กำหนด

ตัวอย่างการเรียกใช้ฟังก์ชัน fn:substring-after ใน Xquery Function

มาลองเขียนฟังก์ชันเพื่อลองทดสอบดู


เมื่อเขียนเสร็จมาลองเทสฟังก์ชันที่ได้เขียนขึ้นดูจะได้ดังรูปด้านล่าง


จากรูปจะเห็นการเรียกใช้ฟังก์ชันแบบคร่าว ๆ และการแสดงผลค่าที่รีเทิร์นออกมา มาลองดูกรณีอื่น ๆ ที่น่าสนใจกัน

substring-after('query', 'u')
-> ery

substring-after('queryquery', 'ue')
-> ryquery

ดูฟังก์ชัน Xquery อื่น ๆ ได้ที่ http://www.doesystem.info/p/xquery.html

ตัวอย่างโค้ด android การทำ Selector ของ TextView

ตัวอย่างโค้ด android การทำ Selector ของ TextView

เรามาดูตัวอย่างโค้ดการทำ Selector ใน TextView กันครับ ซึ่งถ้าเราอยากให้ TextView นั้นคลิกได้ แล้วก็มี State แต่ละอย่างต่างกัน เช่น เมื่อเป็นตัวอักษรธรรมดาก็ให้เป็นสีขาว พอกดปุ๊ปก็ให้เปลี่ยนสีตัวอักษรเป็นสีน้ำเงิน หรืออยากให้พื้นหลังของ TextView จากปกติเป็นสีขาว เมื่อกด TextView แล้วให้มันเป็นสีน้ำเงินอะไรประมาณนี้ ซึ่งในที่นี้เราจะใช้ Selector เข้ามาช่วย เรามาดูตัวอย่างวิธีทำกันครับ

เริ่มด้วยให้เราสร้าง Selector ขึ้นมาก่อน ในที่นี้จะสร้าง Selector สำหรับเปลี่ยนสีตัวอักษรเวลากด โดยผมตั้งชื่อให้มันว่า selector_text_awesome_color.xml โดยเอาไฟล์ไปไว้ใน res/color แล้วตามด้วยตัวอย่างโค้ด android ด้านล่าง

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_pressed="true" />
    <item android:color="@color/colorTextHead" />
</selector>

เมื่อได้แล้ว ผมจะสร้าง Selector ขึ้นมาอีกอันหนึ่งเอาไว้สำหรับเปลี่ยนสี Background ของ TextView ตอนเวลากด โดยเอาไฟล์ไปไว้ใน res/drawable มีตัวอย่างโค้ด android ตามด้านล่าง

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true" />
    <item android:drawable="@color/colorPrimary" />
</selector>

เมื่อได้แล้ว เราก็จะมาสร้าง TextView แล้วก็ทำการเซต textColor กับ background ซึ่งมีตัวอย่างโค้ดตามด้านล่าง

<com.doesystem.educate.englishwords.views.TextViewAwesome android:id="@+id/text_awesome_close"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="@string/awesome_close"
                android:textAlignment="center"
                style="@style/TitleMyWords"
                android:textColor="@color/selector_text_awesome_color"
                android:clickable="true"
                android:background="@drawable/selector_text_awesome_bg_color"
                android:onClick="onBtnClick"/>

ในตัวอย่างนี้ผมใช้ TextViewAwesome ซึ่งก็มีการ extends มาจาก TextView นั่นแหละครับ ตรงนี้ให้คิดว่ามันเป็น TextView ธรรมดาละกัน ส่วนสำคัญที่ต้องดู คือในส่วนของ android:textColor="@color/selector_text_awesome_color" ซึ่งเป็นการบอกว่าสีของตัวอักษรให้ใช้ selector_text_awesome_color ตัวนี้นะ และส่วนของ android:background="@drawable/selector_text_awesome_bg_color" เป็นการบอกว่าให้เราใช้ background เป็น selector_text_awesome_bg_color ตัวนี้

และอย่าลืมที่สำคัญอีกอย่างหนึ่งนั่นคือให้เราไปเปิดคุณสมบัติของ TextView ให้สามารถคลิกได้โดยการเซตค่า android:clickable="true" เพียงแค่นี้เราก็ได้ TextView ที่คลิกได้แล้วยังเปลี่ยนสีตัวอักษรหรือพื้นหลังได้ตามต้องการแล้ว

21/3/59

การใช้ฟังก์ชัน fn:substring-before ใน XQuery Function เพื่อตัดข้อความก่อนข้อความที่ต้องการ

การใช้ฟังก์ชัน fn:substring-before ใน XQuery Function เพื่อตัดข้อความก่อนข้อความที่ต้องการ

เรามาดูตัวอย่างและวิธีการใช้ฟังก์ชัน fn:substring-before กันครับ

fn:substring-before($arg1 as xs:string?, $arg2 as xs:string?) as xs:string
fn:substring-before($arg1 as xs:string?, $arg2 as xs:string?, $collation as xs:string) as xs:string

fn:substring-before เป็นการตัดสตริงที่ต้องการ โดยการตัดนั้นจะตัดข้อความทั้งหมดก่อนข้อความที่กำหนด

ตัวอย่างการเรียกใช้ฟังก์ชัน fn:substring-before ใน Xquery Function

มาลองเขียนฟังก์ชันเพื่อลองทดสอบดู


เมื่อเขียนเสร็จมาลองเทสฟังก์ชันที่ได้เขียนขึ้นดูจะได้ดังรูปด้านล่าง


จากรูปจะเห็นการเรียกใช้ฟังก์ชันแบบคร่าว ๆ และการแสดงผลค่าที่รีเทิร์นออกมา มาลองดูกรณีอื่น ๆ ที่น่าสนใจกัน

substring-before('query', 'r')
-> que

substring-before('queryquery', 'ery')
-> qu

ดูฟังก์ชัน Xquery อื่น ๆ ได้ที่ http://www.doesystem.info/p/xquery.html

การใช้ฟังก์ชัน fn:substring ใน XQuery Function เพื่อตัดข้อความที่ต้องการ

การใช้ฟังก์ชัน fn:substring ใน XQuery Function เพื่อตัดข้อความที่ต้องการ

เรามาดูตัวอย่างและวิธีการใช้ฟังก์ชัน fn:substring กันครับ

fn:substring($sourceString as xs:string?, $startingLoc as xs:double) as xs:string
fn:substring( $sourceString as xs:string?, $startingLoc as xs:double, $length as xs:double) as xs:string

fn:substring เป็นฟังก์ชันที่เอาไว้สำหรับ substring หรือตัดสตริง โดยมีการกำหนด $startingLoc สำหรับตัวเริ่มต้นที่ต้องการจะตัด ซึ่งตัวแรกในการจะตัดนั้นจะเริ่มที่ 1(ไม่ใช่ 0) และมี optional $length เป็น argument ที่เอาไว้สำหรับบอกว่าจำนวนที่ต้องการจะตัดสตริง ถ้าเราไม่ได้กำหนด $length จะเป็นการเอาสตริงที่เหลือทั้งหมด

fn:substring จะรีเทิร์นค่าเป็นสตริงที่เหลือจากการตัด

ตัวอย่างการเรียกใช้ฟังก์ชัน fn:substring ใน Xquery Function

มาลองเขียนฟังก์ชันเพื่อลองทดสอบดู


เมื่อเขียนเสร็จมาลองเทสฟังก์ชันที่ได้เขียนขึ้นดูจะได้ดังรูปด้านล่าง


จากรูปจะเห็นการเรียกใช้ฟังก์ชันแบบคร่าว ๆ และการแสดงผลค่าที่รีเทิร์นออกมา มาลองดูกรณีอื่น ๆ ที่น่าสนใจกัน

substring('query', 1)
-> query

substring('query', 1, 1)
-> q

substring('query', 2, 3)
-> uer

substring('query', 2, 850)
-> uery

substring('query', -2)
-> query

substring('query', -2, 5)
-> qu

fn:substring((), 1, 3)
-> ""

ดูฟังก์ชัน Xquery อื่น ๆ ได้ที่ http://www.doesystem.info/p/xquery.html

การใช้ฟังก์ชัน fn:tokenize ใน XQuery Function เพื่อ splite string

การใช้ฟังก์ชัน fn:tokenize ใน XQuery Function เพื่อ splite string

เรามาดูวิธีการใช้ฟังก์ชัน tokenize ใน XQuery Function กันครับ

fn:tokenize เป็นฟังก์ชันสำหรับการ splits a string หรือแยกสตริง โดยใช้ regular expression

ตัวอย่างการเรียกใช้ฟังก์ชัน tokenize ใน XQuery Function

มาลองเขียนฟังก์ชันเพื่อลองทดสอบดู


เมื่อลองทำการ Test ฟังก์ชันดู จะได้ผลลัพธ์ตามรูปด้านล่าง


จากรูปจะเห็นตัวอย่างการเรียกใช้ฟังก์ชันคร่าว ๆ แล้ว มาลองดูกรณีอื่น ๆ ที่น่าสนใจกัน

tokenize('a b c', '\s')
-> ('a', 'b', 'c')

tokenize('a   b c', '\s')
-> ('a', '', '', 'b', 'c')

tokenize('a   b c', '\s+')
-> ('a', 'b', 'c')

tokenize((), '\s+')
-> ()

tokenize('a,xb,xc', ',|,x')
-> ('a', 'xb', 'xc')

ดูฟังก์ชัน Xquery อื่น ๆ ได้ที่ http://www.doesystem.info/p/xquery.html

20/3/59

การกู้คืนไฟล์ที่เผลอลบในโปรแกรม android studio

การกู้คืนไฟล์ที่เผลอลบในโปรแกรม android studio

เคยไหมกำลังเขียนโปรแกรมอยู่ดี ๆ ในโปรแกรม android studio แล้วอยู่ ๆ เกิดเผลอลบไฟล์ผิดในโปรแกรม ทำให้โปรแกรมเออเร่อหลายจุดเลย ซึ่งบางไฟล์เวลาจะลบจะมีการแจ้งเตือนว่ามีการใช้งานอยู่ แต่บางไฟล์นี่สิ ลบได้เลย พอลบเสร็จโปรแกรมเออเร่อไปดูไฟล์ในถังขยะ กลับไม่มีไฟล์ซะนิ ทำไงดีละ จะให้เขียนใหม่ก็ดูยุ่งยาก เยอะเกิน เขียนอะไรไปแล้วก็จำไม่ได้ มาดูวิธีแก้กันครับ โดยการดู History แล้วทำการ Revert ส่วนวิธีการทำนั้นก็ตามด้านล่างเลย

เริ่มด้วยการคลิกขวาที่โปรเจ็ค จากนั้นเลือก Local History จากนั้นเลือก Show History ตามรูปด้านล่าง


เมื่อเลือกแล้วจะปรากฏหน้าต่างของ History ของโปรแกรมขึ้นมา ในช่องด้านซ้ายจะเป็นไฟล์ที่แก้ไข ยังมีเวลาที่แก้ไขไปแล้วด้วย ส่วนด้านขวาจะเป็นส่วนที่ระบบได้แก้ไขทั้งหมด ดูรูปตัวอย่างได้ตามรูปด้านล่าง


เมื่อเลือกเสร็จแล้วให้คลิกขวา แล้วเลือก Revert Selection ตามรูปเลย

เพียงแค่นี้เราก็สามารถกูคืนไฟล์ที่ลบไปแล้ว หรือยังสามารถย้อนคืนสิ่งที่แก้ไขไปแล้วได้ด้วย เหมือน Git หรือ SVN เลยใช่ไหมหละ

19/3/59

การใช้ฟังก์ชัน fn:ends-with ใน XQuery Function เพื่อค้นหาว่าลงท้ายด้วยคำที่ต้องการหรือไม่

การใช้ฟังก์ชัน fn:ends-with ใน XQuery Function เพื่อค้นหาว่าลงท้ายด้วยคำที่ต้องการหรือไม่

เรามาดูวิธีการใช้ฟังก์ชัน ends-with ใน XQuery Function กันครับ

fn:ends-with เป็นฟังก์ชัน ที่ return ค่า xs:boolean จะเป็นฟังก์ชันเอาไว้สำหรับเปรียบเทียบว่า string($arg1) นั้นมีตัวอักษรที่ลงท้ายด้วย string ตัวที่สองหรือเปล่า string($arg2) ซึ่งฟังก์ชันนี้จะรวมไปถึงการเปรียบเทียบช่องว่างด้วย ดังนั้นก่อนที่เราจะเรียกฟังก์ชันนี้ เราควรจะใช้ฟังก์ชัน fn:normalize-space เพื่อทำการ trim สตริงพวกนั้นก่อนเรียกฟังก์ชันนี้

ตัวอย่างการเรียกใช้ฟังก์ชัน ends-with ใน XQuery Function

มาลองเขียนฟังก์ชันเพื่อลองทดสอบดู


เมื่อลองทำการ Test ฟังก์ชันดู จะได้ผลลัพธ์ตามรูปด้านล่าง


จากรูปจะเห็นตัวอย่างการเรียกใช้ฟังก์ชันคร่าว ๆ แล้ว มาลองดูกรณีอื่น ๆ ที่น่าสนใจกัน

ends-with('doesystem', 'tem')
-> true

ends-with('doesystem', 'm')
-> true

ends-with('doesystem', '')
-> true

ends-with('doesystem ', 'm')
-> false

ends-with('', 'm')
-> false

ดูฟังก์ชัน Xquery อื่น ๆ ได้ที่ http://www.doesystem.info/p/xquery.html

4/3/59

Android SQLite Database with Relationship Tables

Android SQLite Database with Relationship Tables การสร้างตารางที่มีหลายตารางและมีความสัมพันธ์กัน


มาดูตัวอย่างโค้ด Android ที่มีหลาย ๆ Table แล้วแต่ละ Table มีความสัมพันธ์กัน

ก่อนอื่นเราก็ต้องมาทำการ list รายชื่อตารางและคอมลัมน์ออกมาก่อน ดังตัวอย่าง

    // WORD_GROUP_TABLE
    public static final String TABLE_WORDS_GROUP = "WORDS_GROUP";
    public static final String COL_TABLE_WORD_GROUP_ID = "ID";
    public static final String COL_TABLE_WORD_GROUP_EN = "GROUP_EN";
    public static final String COL_TABLE_WORD_GROUP_TH = "GROUP_TH";

    // WORD_ITEMS_TABLE
    public static final String TABLE_WORDS_ITEMS = "WORDS_ITEMS";
    public static final String COL_TABLE_WORD_ITEMS_ID = "ID";
    public static final String COL_TABLE_WORD_ITEMS_EN = "ITEM_EN";
    public static final String COL_TABLE_WORD_ITEMS_TH = "ITEM_TH";
    public static final String COL_TABLE_WORD_ITEMS_GROUP_REFERENCES = "ITEM_GROUP";

จากตัวอย่างข้างต้นเราจะสร้าง Table ขึ้นมา 2 Table ที่ชื่อว่า WORDS_GROUP และ WORDS_ITEMS ซึ่งจะมีความสัมพันธ์คือให้คอลัมน์ ITEM_GROUP ชี้ไปที่ ID ของ WORD_GROUP

เมื่อได้แล้ว เราก็ต้องทำการ สร้างตารางโดยเอาโค้ดไว้ในส่วน onCreate ดังตัวอย่างโค้ด

 db.execSQL("CREATE TABLE " + TABLE_WORDS_GROUP +" (" + COL_TABLE_WORD_GROUP_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, "
                        + COL_TABLE_WORD_GROUP_EN + " TEXT, "
                        + COL_TABLE_WORD_GROUP_TH + " TEXT);"
        );

        db.execSQL("CREATE TABLE " + TABLE_WORDS_ITEMS + " (" + COL_TABLE_WORD_ITEMS_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, "
                        + COL_TABLE_WORD_ITEMS_EN + " TEXT, "
                        + COL_TABLE_WORD_ITEMS_TH + " TEXT, "
                        + COL_TABLE_WORD_ITEMS_GROUP_REFERENCES + " INTEGER, "
                        + "FOREIGN KEY(" + COL_TABLE_WORD_ITEMS_GROUP_REFERENCES + ") REFERENCES "
                        + TABLE_WORDS_GROUP + "(" + COL_TABLE_WORD_GROUP_ID + "));"
        );

จากตัวอย่างโค้ดเราจะสร้างตารางโดย ใช้ Query จากนั้นก็ให้เราเพิ่มข้อมูลเข้าไปได้เลย

ดูตัวอย่างเต็ม ๆ ไฟล์ได้ตามโค้ดด้านล่าง


package com.doesystem.educate.englishwords.database;

import android.content.Context;
import android.database.DatabaseErrorHandler;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;

/**
 * Created by Doe on 2/25/2016.
 */
public class DBHelper extends SQLiteOpenHelper {
    private static final String DB_NAME = "DOE_WORDS";
    private static final int DB_VERSION = 6;

    // WORD_GROUP_TABLE
    public static final String TABLE_WORDS_GROUP = "WORDS_GROUP";
    public static final String COL_TABLE_WORD_GROUP_ID = "ID";
    public static final String COL_TABLE_WORD_GROUP_EN = "GROUP_EN";
    public static final String COL_TABLE_WORD_GROUP_TH = "GROUP_TH";

    // WORD_ITEMS_TABLE
    public static final String TABLE_WORDS_ITEMS = "WORDS_ITEMS";
    public static final String COL_TABLE_WORD_ITEMS_ID = "ID";
    public static final String COL_TABLE_WORD_ITEMS_EN = "ITEM_EN";
    public static final String COL_TABLE_WORD_ITEMS_TH = "ITEM_TH";
    public static final String COL_TABLE_WORD_ITEMS_GROUP_REFERENCES = "ITEM_GROUP";

    public DBHelper(Context context){
        super(context, DB_NAME, null, DB_VERSION);
    }

    public DBHelper(Context context, String name, SQLiteDatabase.CursorFactory factory, int version) {
        super(context, name, factory, version);
    }

    public DBHelper(Context context, String name, SQLiteDatabase.CursorFactory factory, int version, DatabaseErrorHandler errorHandler) {
        super(context, name, factory, version, errorHandler);
    }

    @Override
    public void onCreate(SQLiteDatabase db) {
        db.execSQL("CREATE TABLE " + TABLE_WORDS_GROUP +" (" + COL_TABLE_WORD_GROUP_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, "
                        + COL_TABLE_WORD_GROUP_EN + " TEXT, "
                        + COL_TABLE_WORD_GROUP_TH + " TEXT);"
        );

        db.execSQL("CREATE TABLE " + TABLE_WORDS_ITEMS + " (" + COL_TABLE_WORD_ITEMS_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, "
                        + COL_TABLE_WORD_ITEMS_EN + " TEXT, "
                        + COL_TABLE_WORD_ITEMS_TH + " TEXT, "
                        + COL_TABLE_WORD_ITEMS_GROUP_REFERENCES + " INTEGER, "
                        + "FOREIGN KEY(" + COL_TABLE_WORD_ITEMS_GROUP_REFERENCES + ") REFERENCES "
                        + TABLE_WORDS_GROUP + "(" + COL_TABLE_WORD_GROUP_ID + "));"
        );

        insertDataToTable(db);
    }

    @Override
    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_WORDS_GROUP);
        db.execSQL("DROP TABLE IF EXISTS " + TABLE_WORDS_ITEMS);
        onCreate(db);
    }

    String[][] dataGroup = new String[][]{
            {"Body", "ร่างกาย"},
            {"Internal Organs", "อวัยวะภายในร่างกาย"},
            {"Family", "ครอบครัว"},
            {"House and Around the House", "บ้านและรอบ ๆ บ้าน"},
            {"Bedroom", "ห้องนอน"},
            {"In the House", "ของใช้ในบ้าน"}
    };
    String[][][] dataItems = new String[][][]{
            {
                {"abdomen", "ท้อง"},
                {"ankle", "ข้อเท้า"},
                {"arm", "แขน"},
                {"armpit", "รักแร้"},
                {"back", "หลัง (ส่วนของร่างกาย)"},
                {"bone", "กระดูก"},
                {"bottom", "ก้น"},
                {"cheek", "แก้ม"},
                {"chest", "หน้าอก"},
                {"chin", "คาง"}
            },
            {
                {"adrenal gland", "ต่อมหมวกไต"},
                {"anus", "ทวารหนัก"},
                {"appendix", "ไส้ติ่ง"},
                {"artery", "เส้นเลือดแดงที่นำเลือดแดงออกจากหัวใจ"},
                {"bladder", "กระเพาะปัสสาวะ"}
            },
            {
                {"ancestor", "บรรพบุรุษ"}
            },
            {
                {"attic", "ห้องใต้หลังคา"}
            },
            {
                {"alarm clock", "นาฬิกาปลุก"}
            },
            {
                {"air-conditioner", "เครื่องปรับอากาศ"},
                {"aquarium", "ตู้ปลา"}
            }
    };

    private void insertDataToTable(SQLiteDatabase db){
        for(int i = 0; i < dataGroup.length; i++){
            insertToWordsGroupTable(db, dataGroup[i][0], dataGroup[i][1]);
            for(int j = 0; j < dataItems[i].length; j++){
                insertToWordsItemsTable(db, dataItems[i][j][0], dataItems[i][j][1], i + 1);
            }
        }
    }

    private void insertToWordsGroupTable(SQLiteDatabase db, String groupEn, String groupTh){
        db.execSQL("INSERT INTO " + TABLE_WORDS_GROUP
                + " VALUES (null, '" + groupEn + "', '" + groupTh + "');");
    }

    private void insertToWordsItemsTable(SQLiteDatabase db, String itemEn, String itemTh, int groupId){
        db.execSQL("INSERT INTO " + TABLE_WORDS_ITEMS
                + " VALUES (null, '" + itemEn + "', '" + itemTh + "', " + groupId + ");");
    }
}