26 เมษายน 2555

Internship, DAY 7

วันนี้งานไม่คืบหน้าอย่างรุนแรง เนื่องจากเนื้อหางานเข้าสู่โหมดความรู้เป็น 0 ของจริง เราใช้เวลา 2 ชั่วโมงนั่งงมโข่งหา plug in สำหรับ Auto Complete ใจจริงอยากจะเข้าใจภาษามันจริงๆซะทีจะได้เขียนเองไปเลย แต่ในเวลาอันสั้นคงทำไม่ได้เลยหาตัวช่วยไปก่อน ตอนแรกเจอโค้ด Auto Complete ตัวนึง หลงดีใจคิดว่าได้ใช้แล้วแหงๆ เอาให้พี่ต้องดู พี่ต้องบอกว่านี่มัน Auto Complete สำหรับ Browser เฉยๆนี่ กล่าวคือมันไม่ได้ดึงค่าจาก Database มาโชว์ให้ดูอย่างเดียว คือมันจะจำค่าเก่าที่เราเคยพิมพ์แล้ว Enter ไว้ก่อนหน้าเฉยๆ ไม่ใช่แบบที่เราอยากได้

โชคดีที่รู้ตัวเร็ว ก็ไปนั่งคุ้ยๆต่อ ไปเจอของเด็ดเข้าให้ มันบอกว่าสอนวิธีทำ Google Suggestion อ่านหน้าแรกๆ เข้าใจง่ายมาก เริ่มมีกำลังใจ พออ่านไปถึงหน้าสาม เนื้อหาหายงง แต่เห็นลิ้ง .pdf ก็นึกว่าให้โหลด ที่ไหนได้ เก็บตังค์ตั้ง $5 เมินซะเถอะ 5555

จากนั้นก็งม งม งม งม งม งม งม งม งม นานมากกกกกก ไปโหลดโค้ดชาวบ้านมาลองเล่นก็ไม่รู้เรื่อง ทำไม่ได้ โง่เกิ๊น~ จนกระทั่งทนไม่ไหวไปโวยวายใส่ twitter และ facebook พี่ชินมหาเมพก็แนะนำเว็บนึงมาให้ ซึ่งเป็นเว็บที่เราเคยเข้าไปดูแล้ว แต่ Demo มันกากเลยไม่ได้ใส่ใจ แต่มันทำให้เรารู้ว่า

ต้องโหลดไฟล์ของเค้ามาก่อนถึงจะใช้ได้ Orz

พี่ชินทำให้เรากลับมาเห็นความสำคัญของ jQuery UI อีกครั้ง 555 หลังจากอ่านคู่มือแล้วก็เอาโค้ดตัว Basic สุดของ Auto Complete ไปลองใช้ ปรากฎว่ามันเวิร์กว่ะเว่ยเห้ย! (แต่โก๊ะ พิมพ์ผิดมั่ง ลืมนู่นนี่มั่ง ก็เลยใช้เวลานานอยู่) แต่ตัวอัพเกรดขึ้นมาหน่อยคือดึงข้อมูลจาก Database ของเราเองยังใช้ไม่ได้ เราก็สงสัยสิว่าทำไม ลืมไรอีกฟะ?

ก็อย่างที่บอกไปแต่แรกอะนะว่า Demo มันกากก็ไปคุ้ยๆใน Google ดู แต่หมดอารมณ์อ่านภาษาอังกฤษแล้วก็เลยพยายามคุ้ยหาภาษาไทยแทน แต่คนไทยเท่าที่เคยคุ้ยเจอนี่เขียนสอนอะไรจะมีอยู่ 2 ระดับคือ ง่ายมาก จะง่ายไปไหน นึกภาพเอาไปประยุกต์ใช้ต่อไม่ค่อยออก กับ ยากสลัดผัก โค้ดยาวเป็นหางว่าว เอาไว้สำหรับ Geek คุยกันเอง ใครเจอที่สอนแบบกลางๆ แนะนำหนูบ้างเน้อ จริงๆแล้วไม่ค่อยชอบไปคุ้ยตามเว็บบอร์ดอะ ชอบเข้าเว็บสอนหรือเป็น Blog มากกว่า เว้นแต่จะติดปัญหาก็เจอเว็บบอร์ดที่ช่วยได้บ้างเหมือนกัน (แต่ส่วนใหญ่ไม่ค่อยเวิร์กฟ่ะ Orz)

ลิ้งที่เจอแล้วไม่ค่อยใจจะไม่นำเสนอในนี้ แต่สุดท้ายก็หันกลับไปพึ่งภาษาอังกฤษอีกครั้ง แล้วก็เจอเว็บที่ถูกใจตรงสเปกพอดี เพราะเค้าด่าเจ้าเว็บ jQuery UI เอาไว้เหมือนกันเรื่อง Demo กากเนี่ย แต่ยังไม่ได้ลองใช้ เนื่องจากลองมาเยอะแล้ว มึน (แต่คิดว่าน่าจะใช้ได้แล้วนะ พอเถอะ ไม่ไหวแล้ว TwT) เลยไปลองเช็คดูว่าโค้ด php เราเองนั่นแหละ echo json ได้ไหม (ฟังก็ชั่นมันบังคับว่าต้อง return กลับมาในรูปแบบ json อะ) โดยลองกับโค้ด php เก่าจากงาน Database เผื่อพลาดอะไรจะได้ไม่มีปัญหาทีหลัง

บั๊กก็ตรงนี้ล่ะคับ TwT

มัน echo ภาษาไทยออกมาเป็นอักขระหยึกหยึย


 \u0e21\u0e32\u0e23\u0e34\u0e2a\u0e32 \u0e2a\u0e38\u0e42\u0e01\u0e28\u0e25 แบบนี้อ๊ะ 

ลองเปลี่ยนนู่น ลองนี่ ลบโค้ด



http-equiv=Content-Type content="text/html; charset=utf-8">


ออกจากบรรทัดแรกแล้วใส่


header("content-type:text/javascript;charset=utf-8");


ลงไปในส่วน tag ของ php แทนตามคำแนะนำของพี่ลิ่ว คำสั่งพวก  iconv ไรงี้ก็ลองหมด พี่ต้องมาช่วยแก้บั๊กให้ เปลี่ยน encoding สารพัดแล้วก็ยังไม่ได้

สุดท้าย ใช้วิธี ต่อ string โง่ๆ มันเลย Orz

แต่เราคิดว่ามันไม่น่าจะได้ผลแฮะ ตอนแรกบอกพี่ไปว่าแค่ออกมาเป็นฟอร์มนี้ก็น่าจะได้ (คิดอะไรอยู่เนี่ย = =") แต่จริงๆที่เรา return ออกไปแบบนั้นมันเป็น string ไม่ใช่ฟอร์ม json ก็เลยคิดว่า ยังไงก็น่าจะบรึ้ม Orz


แล้วแบบนี้เมื่อไหร่จะเสร็จ TwT

Internship, DAY 6

วันนี้ขอบอกก่อนเลยว่า เป็นวันที่โก๊ะและเพลียที่สุดในชีวิตฝึกงาน

เพราะอะไรน่ะเหรอ~

เพราะว่าไม่ยอมไปกินข้าวเที่ยงไงล่า Orz อาหารสำคัญมากนะคะเด็กๆ ยามทำงานห้ามอดอยากปากแห้งเด็ดขาด

วันนี้ตื่นเช้ากว่าทุกวัน แต่ดันไปสายกว่าทุกวัน เวรกรรม ==" ที่ตื่นเช้าสืบเนื่องจากเมื่อเช้าแดดแผดเผาเข้าห้อง สะลืมสะลือขึ้นมาเห็นมายอยู่หน้ากระจก เอ๊ะ ทำไมมายยังไม่ออกจากหอหว่า ปกติฟ้ายังไม่ทันสว่างก็เผ่นแล้วนี่นา ก็เลยหยิบมือถือขึ้นมาดูเวลา

"มาย นี่มันเจ็ดโมงครึ่งแล้วนะ ไม่สายหรอ?"

...จากนั้นมายก็ช็อกไปเลยคับ หูตูบวิ่งออกจากห้องไป ลืมปิดไฟอีกตะหาก 5555

ไปถึงออฟฟิศก็เจอทุกคนแล้ว(ยกเว้นพี่เติ้ง เพราะปกติพี่เค้าจะมาอีกเวลานึง) ขาดแต่พี่ต้น คือจริงๆแล้วเนี่ยพี่ต้นเป็นคนดูแลเราตามชื่อที่ขึ้นในเว็บฝึกงาน แต่ดูเหมือนพี่เค้าไม่ค่อยว่าง คนที่ assign งานให้ดูนู่นนี่ก็เลยกลายเป็นพี่ต้องแทน พอไปถึงปุ๊บเราก็โอ้เอ้แป๊บนึง เล่น FB ไปฟาดหมูปิ้งไป 4 ไม้ (สาเหตุที่ไม่ไปกินข้าวเที่ยงนั่นแหละ คือมันอิ่มข้าวเหนียวง่ะ กะว่าจะไปกินเลทๆ แต่สุดท้ายกลัวแดดร้อนเลยไม่ไป 555)

แล้วก็เริ่มวาง layout ตามแบบที่ได้ทำไว้เมื่อวาน ติดบั๊กบ้างอะไรบ้างแต่ก็ทำไปได้เรื่อยๆ และทำให้ได้ความรู้ใหม่ (แต่จริงๆทุกคนก็คงรู้กันหมด ยกเว้นเรา ><) ว่า CSS มันไล่โทนสีได้ ทำอะไรได้ตั้งหลายอย่าง แต่ครั้นจะให้เรานั่งจินตนาเกินเอาเองบน Notepad++ ไอคนไม่มีหัวศิลป์อย่างเรามันก็ลำบากอยู่ สุดท้ายเลยไปค้นเจอผู้ช่วยที่แสนดี Gen โค้ดไล่สีให้แม่งเลย 555 สะดวกสบายลัลล้ามาก

หลังจากวาง layout ซึ่งได้ 960 grid จากใน pencil project (พูดถึงในวันก่อนๆ) ช่วยออกแบบเทียบขนาด pixel ในเว็บ ทำให้สะดวกมากยิ่งขึ้น และไล่สี Header กับ Footer จนเรียบร้อยแล้ว เราก็นั่งเรียบเรียงลำดับความสำคัญในหัว ถ้าจะให้ทำ Auto-complete วันนี้เลยไม่เสร็จแน่ เพราะความรู้ jQuery Ajax ยังอ่อนด๋อยอยู่ ก็เลยไปทำส่วนที่ทำได้แน่ๆก่อนก็คือ link list (ไม่ใช่ Algorithm นะเห้ย หมายถึง list ที่มี link) ทางด้านขวามือ 77 จังหวัดเมื่อคลิกเข้าไปแล้วจะต้องให้ไฟล์ .php query ข้อมูลรหัสไปรษณีย์ของจังหวัดนั้นๆออกมา เรื่อง query ไม่ใช่ปัญหา เอาโค้ดเก่าจากงาน Database มาแก้นิดเดียวก็เสร็จ แต่ปัญหาคือ ต้องทำลิ้งทั้ง 77 จังหวัด แสรดดดดดด

ตอนนั้นเริ่มบ่ายสอง เริ่มหิวแล้ว แต่ไม่ยอมออกไปกิน (แดดมันแรง วันนี้ร้อนที่สุดด้วย 555) ก็เลยเพลียหน้ามึนอยู่หน้าโน้ตบุ๊กต่ออีกประมาณ 3 ชม. Orz

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

"ลองไปถามเจดูดิ"

Orz โชคดีที่เจออน FB อยู่ตอนนั้น ก็เลยไปถาม เจบอกว่าเจนึกออกแต่วิธีใช้ javascript ยากๆ (ซึ่งแน่นอน เราเก่ง javascript มวกกกก) และยังบอกอีกว่า

"ลองไปถามอุ้ยดูสิ อุ้ยน่าจะพอรู้วิธีที่ง่ายกว่านี้นะ"

กลัวว่าถ้าไปถามอุ้ย อุ้ยอาจจะโยนไปหาปอมก็เป็นได้ ก็เลยใช้ excel ให้เกิดประโยชน์สูงสุด ก๊อปโค้ดแมร่งง 77 บรรทัด อย่าได้แคร์ แต่ระหว่างที่นั่งลบพวก space, indent ที่มันเกินๆมา ก็นึกขึ้นมาได้ว่า ทำไมเราไม่ใช่ replace วะ แป๊บเดียวก็เสร็จ ก๊อปลง excel ทำไมเนี่ยยย TwT

แต่กว่าจะนึกได้ ก็ต้องแก้โค้ด 77 บรรทัดรอบที่ 2 แล้ว อยากจะบ้า อาการหนักสุดๆ

อธิบายโค้ดนิดนึงก่อน คือว่าเราเรียกการแสดงผล link list 77 จังหวัด ไปไว้ใน div ฝั่งขวามือ เมื่อกดลิ้งไปซักอันแล้ว ผลการ query ต้องไปแสดงผลใน div อีกส่วนนึงในหน้า page เดิม ตอนแรกคิดว่าจะเป็นงานหินซะแล้ว จนกระทั่งเจอโค้ดของชาวบ้าน มันเวิร์กจริงๆ แต่ก็เป็นสาเหตุที่ทำให้ต้องไปแก้โค้ด 77 บรรทัดรอบที่ 2 ด้วย (อ่านมาถึงตรงนี้แล้ว จะสังเกตเห็นว่า เรามึนมากๆ รู้ทั้งรู้ว่าลิ้งยังไม่เรียบร้อย ยังอุตส่าห์ก๊อปตั้ง 77 บรรทัดไปใช้ = =")

หลังจากแสดงผลถูกเรียบร้อยแล้ว แม้จะยังเน่าๆเพราะไม่ได้ตกแต่งอะไรเลยนอกจาก Header กับ Footer ก็ให้พี่ต้องมาดู ทำให้รู้ว่า ควรจะเรียกพี่เค้ามาตั้งแต่แรกๆ แต่ไม่ค่อยอยากเรียก เพราะพี่เค้าก็มีงานต้องทำเหมือนกัน พี่ต้องดูโค้ดแล้วถามกลับว่า

"ถ้าเกิด รมต. เกิดเฮี้ยนอยากเปลี่ยนชื่อจังหวัด 'กระบี่' เป็น 'กระบี่ไร้เทียมทาน' จะทำยังไง?"

ติด stunt ไปสามชั่วกัปป์ พี่ต้องก็เลยบอกว่าข้อมูล list 77 จังหวัดต้องดึงมากจาก Database สิ ก็มีให้อยู่แล้ว ณ ตอนนั้นแม้จะมึนมากเพราะเลยเวลาอาหารไปนานแล้วแต่ก็ยังถึงบางอ้อ เพราะมัวแต่คิดว่าจะโยนค่าให้ php เอาไป query ต่อยังไง ลืมนึกไปว่า Database ก็มีให้อยู่แล้ว จะไปโยนค่าไปทำซากอ้อยหอยหลอดอะไร แล้วโค้ดวนลูปสั้นๆ ที่จริงก็เคยทำมาในวิชา Database ด้วยซ้ำไป เพียงแต่คนที่เอาไปแก้คือทิพไม่ใช่เรา ทำให้อาจจะหลงๆลืมๆไปมั่ง แต่ที่แน่ๆ ก็แค่ทำฟอร์มประมาณ echo 'HTML code'.$var.'HTML code'; เหมือนที่เคยทำก็เรียบร้อยแล้ว

แล้วก็เอา scroll bar ตรงส่วน link list ออกด้วย พี่ต้องว่า scroll bar มันเยอะเกิน ให้เนื้อหามัน flow ไปตามปกติดีกว่า

ลองก๊อปโค้ดจากไฟล์ php ลงในตัว HTML ปรากฏว่าไม่เวิร์กแฮะ เห็นเหมยเคยทำได้ แต่เราเอาวิธีแบบเราละกัน ก็คือใช้โค้ดที่มาจากเว็บเดียวกับที่ทำให้คลิกลิ้งแล้วไปแสดงผลในส่วนของ div ได้ เพียงแต่หนนี้เราไม่ต้องการคลิกลิ้ง เราต้องการให้แสดงผลเลย เว็บนั้นก็มีให้เหมือนกัน แก้เสร็จแล้วก็ให้พี่ต้องดูอีกรอบ พี่ต้องถามว่า โค้ดนี้วน Loop กี่รอบ?

การเอาโค้ดเก่ามาแก้นั้นต้องระวังมาก แม้ว่าจะแสดงผลถูกต้องแล้วก็ตาม แต่ดันมีลูปพิเรนทร์ๆจากโค้ดเก่าซ้อนมาอีกชั้นนึงแบบไม่จำเป็น เพราะโค้ดก่อน query ออกมา 1 row มีหลาย column หนนี้มี column เดียว จะวนอะไรกันนักกันหนา แล้วก็เรื่องการตั้งชื่อตัวแปล ไม่ควรตั้งเป็นอักษรตัวเดียว เพราะมันจะดูเป็นตัวเลขมากกว่า และก็ไม่ค่อยบ่งบอกความหมาย คนที่เอาไปพัฒนาต่ออาจมึนตึ้บได้


ส่วนนึงโค้ดเก่าที่เอาผลจากการ query รหัสไปรษณีย์ในแต่ละจังหวัดไปแสดงเป็นตารางใน div
-ขออนุญาตพิมพ์ผิดหลักนิดนึง ไม่งั้นมันไม่โชว์โค้ดบางส่วนอะ


while($rs=mysql_fetch_assoc($result))
{
echo ' < tr > ';
foreach ($rs as $i)
echo ' < td >'.$i.' < /td > ';
echo ' < /tr > ';
}




ส่วนนึงโค้ดใหม่ที่ตอนแรกลืมเอา foreach ออก แต่ตอนนี้เอาออกเรียบร้อยละน้า (แต่ยังใช้ตัวแปรเป็นอักษรตัวเดียว แค่เลี่ยงตัว i จะได้ไม่คิดว่ามันเป็นตัวเลข)



while($rs=mysql_fetch_assoc($result))
{
$p = $rs["PROVINCE"];
echo ' < li >< a href="javascript:ajaxpage(\'province.php?p=' .$p'\',\'result\');" > ' .$p' < /a >< /li > ';

}




จบความมึนแต่เพียงเท่านี้...


ปล.พี่ต้องบอกให้ออกแบบโลโก้เว็บแบบเรียบๆ ใช้แค่ตัวอักษรก็พอ เป็นภาษาไทย คิดว่าจะใช้ font อันนี้แหละ แต่พรุ่งนี้คงต้องไปหา tool ออกแบบมาเพิ่ม
ปล.2 มังกรแนะนำ Auto-complete มาอีกตัว ยังไม่ได้ศึกษาเลย