บันทึกเล็กๆของผ้มมม...: May 2012

Thursday, May 3, 2012

jQuery UI Autocomplete widget

เห็น widget อันนี้แล้วต้องการใช้ครับ เอาไปประยุกต์ในการพัฒนาระบบค้นหาข้อมูลได้

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

ฝั่ง html

    <div>
    <p>    Search <input type="text" id="search" /> </p>
    </div>

ฝั่ง javascript

$(function() {
   var tags = ["love","like","bike"];
   $("#search").autocomplete({
       source: tags
   });
});

แค่นี้เองครับ แต่ที่ต้องทำต่อคือการไปดึงข้อมูลมาจากฐานข้อมูลแทน

เอกสารอ้างอิง

http://jqueryui.com/demos/autocomplete/

ปล. เท่าที่ทราบ ระบบของ google ไม่ได้เป็นแบบนี้ครับ แต่ใช้ ajax ทำการ sync ข้อมูลกับฐานข้อมูลตลอด

ข้อมูลจาก jqueryui.com ครับ

jQuery UI (UI = User Interface) ก็คือ widget หรือ interface ที่ออกแบบมาให้ใช้กับเว็บ ทำให้เว็บมีปฏิสัมพันธ์กับผู้ใช้ได้สะดวกและสวยงามขึ้น ซึ่ง jQuery UI เองก็ถูกพัฒนาโดยใช้ jQuery ซึ่งเป็น javascript library อย่างหนึ่ง (jquery.com)

ลองมาดูตัวอย่างการใช้งานครับ ในที่นี้เราจะลองใช้ datepicker widget หรือ calendar widget เพื่อป้อนข้อมูลวันที่ ดังนี้ครับ

การติดตั้งและขั้นตอนการใช้งาน ดูได้จาก http://jqueryui.com/docs/Getting_Started โดยสรุปสั้นๆว่า

ไปดาวน์โหลด jQuery UI มาก่อน สามารถเลือก theme หรือเลือกเฉพาะ widget ก็ได้ ถ้าอยากได้ง่ายๆไม่ต้องทำอะไรมากก็ดาวน์โหลดตัวปกติได้ที่หน้าหลัก เช่น http://jqueryui.com/download/jquery-ui-1.8.20.custom.zip
แตกไฟล์ออกมา จะมีไดเรกทอรี js (jQuery), css, development-bundle (เอกสาร, ตัวอย่าง, UI) และไฟล์ index.html
ใช้ text editor เปิดไฟล์ index.html จะเห็นว่ามี 3 บรรทัดคือ

< link type="text/css" href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
< script type="text/javascript" src="js/jquery-1.7.1.min.js" > < /script >
< script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js" > < /script >

จากนั้นให้สร้างไฟล์ html ของเราที่จะใช้งาน เช่น testUI.html แล้วนำโค้ดข้างต้นมาเพิ่ม พร้อมกับเติม textbox ที่ต้องการป้อนค่าวันที่เข้าไป เช่น

<html>
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
    <div>
    <p>    Date <input type="text" name="date" id="date" /> </p> </div>
</body>
</html>

ต่อมาให้สร้างไฟล์ javascript เช่น myScript.js ให้สอดคล้องกับไฟล์ html ที่อ้างถึง แล้วเพิ่มรายละเอียด ได้แก่

$(function(){
    $('#date').datepicker();
});

บันทึกไฟล์ทั้งหมด แล้วลองเปิดไฟล์ html ก็จะได้ผลลัพธ์ตามต้องการครับ

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

$(function(){
    $('#date').datepicker({ dateFormat: "dd/mm/yy" });
});

เอกสารอ้างอิง

http://jqueryui.com/docs/Getting_Started
http://jqueryui.com/demos/datepicker/
http://jquery.com

Wednesday, May 2, 2012

การใช้แท็ก div + style เพื่อกำหนด layout

ปรับเปลี่ยนและอ้างอิงจาก http://www.w3schools.com/html/html_layout.asp ครับ

Content

HTML โค้ดครับ

<html>
<body>

<div id="container" style="width:100%">

<div id="header" style="background-color:#98BF21;">
<h1 style="margin-bottom:0;text-align:center">Title</h1></div>

<div id="menu" style="background-color:#AAAAAA;height:200px;width:20%;float:left;">
<b>Menu</b><br />
First<br />
Second<br />
Third</div>

<div id="content" style="background-color:#CCCCCC;height:200px;width:80%;float:left;">
Content</div>

<div id="footer" style="background-color:#98BF21;clear:both;text-align:center;">
Copyleft © 2012</div>

</div>

</body>
</html>

HTML quick reference

ข้อมูลจาก http://www.w3schools.com/html/html_quick.asp ไว้สำหรับอ้างอิงครับ

HTML Basic Document

<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body> </html>

Heading Elements

<h1>Largest Heading</h1> <h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list

Ordered list

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
</tr>
<tr>
    <td>sometext</td>
    <td>sometext</td>
</tr>
</table>

Iframe

Frames

Forms

<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Entities

Other Elements

<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

Tuesday, May 1, 2012

โจทย์เกมส์ OX

ลองมาเขียนโปรแกรมเกมส์ OX แบบคอนโซลง่ายๆกันครับ

กติกา

ผู้เล่นคือ O กับ X เล่นสลับกัน
ตารางแสดงด้วยเลข 1-9
ห้ามเลือกเลขที่ถูกเลือกไปแล้ว
มีการตรวจสอบการชนะ คือแนวนอน แนวตั้ง และทะแยง
มีการตรวจสอบถ้าเสมอกัน

ผลลัพธ์ที่ต้องการ
กรณีมีผู้ชนะ

กรณีเสมอไม่แสดงรูปนะครับ ยาวเกิน

กรณีเลือกตำแหน่งซ้ำ โปรแกรมจะถามให้ป้อนใหม่เรื่อยๆจนกว่าจะถูก

ถ้าจะเช็คว่าป้อนเป็นตัวเลขอยู่ในช่วง 1-9 ได้ก็จะดีมากครับ