Internship, DAY 13

หมดใจกับบั๊กจริงๆ เลยตัดสินใจถอยทัพไปทำพวก CSS ตกแต่งเว็บก่อน ทำผักชีโรยหน้าดีกว่า 555

เนื่องจากได้ตัวอย่างโค้ดที่เหมาะเหม็งกับงานเราที่สุดแล้ว ลองเอามาเทสต์ก็สามารถทำ Highlight บน Autocomplete ได้ (วิธีเทสต์ก็เหมือน blog ตอนที่แล้ว เพียงแค่แก้ตรง source แค่นั้นเอง จบ!)

เด็กฝึกงานคนใหม่ก็ใจดี๊ใจดีหาสารพัดวิธีทำมาให้ โดยที่ไม่รู้ว่า โค้ดมันก็ใช้ได้แหละ แต่พอเอามารวมร่างแล้วบรึ้มอยู่ดี เง้อออออ

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

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

หลังจากได้ CSS แบบที่เราชื่นชอบแล้ว ก็ต้องเอาโค้ดเราไปรวมร่างกับไฟล์ .php ที่ไว้ติดต่อกับ DB ทั้งหลาย วิธีการของเราคือสั่ง echo โค้ดภาษา HTML มันเลยก๊าบ ดิบเถื่อนไร้อารยธรรม แต่ได้ผลเสมอ :D

ตัวอย่างโค้ด คัดมาเฉพาะส่วนแสดงผล (แกรมม่าวิบัติ ไม่งั้นแสดงผลไม่ได้อะ)

echo '< br/ >';

echo '< label style="font-weight: bold;" >จังหวัด:< /label > '.$p.'< br/ >< br/ >';

echo '< table class="hovertable" >';

echo '< tr >< th >'.ตำบล.'< /th >< th >'.อำเภอ.'< /th >< th >'.จังหวัด.'< /th >< th >'.รหัสไปรษณีย์.'< /th >< /tr >';

while($rs=mysql_fetch_assoc($result))

{

    echo '< tr onmouseover="this.style.backgroundColor=\'#FFFFFF\';" onmouseout="this.style.backgroundColor=\'#E0E0E0 \';" >';

    foreach ($rs as $i)

        echo '< td >'.$i.'< /td >';

    echo '< /tr >';

    }

อย่าลืมว่าเหล่าเครื่องหมาย single quote จะต้องมีเครื่องหมาย back slash นำหน้าเสมอ ส่วน double quote ไม่ต้องมี ไม่รู้ทำไม แต่มันรันผ่านละกัน 555


ตัวอย่าง CSS เฉพาะส่วนที่ทำ table (เอาตัวอย่างมาจากเว็บชาวบ้าน แล้วแก้ไขสีเพิ่มเติม)

table.hovertable

{

    font-family: verdana,arial,sans-serif;

    font-size:15px;

    color:#333333;

    border-width: 1px;

    border-color: #999999;

    border-collapse: collapse;

    margin: auto;

}

table.hovertable th

{

    background-color:#C8C8C8;

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #E8E8E8 ;

    font-weight: bold;

}

table.hovertable tr

{

    background-color:#E0E0E0;

}

table.hovertable td

{

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #E8E8E8;

}

ส่วนนี้ยัดไว้ในไฟล์ .css ลองมาดูตัวอย่างที่ได้กัน









ฝั่งขวามือเป็น list ที่จัดการแปลงร่างให้เป็นโทนสีเทา hover link จะขีดเส้นใต้ให้ selected link จะเปลี่ยนสี แต่ visited link หน้าตาเหมือนเดิมเด้ะ ยังแก้ไม่ได้ สงสัยเพราะใช้ javascript รวมร่างกับ ajax แหง


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


เสร็จแล้วก็กะว่าจะทำโลโก้ซะหน่อย พี่ต้องบอกว่าขอเป็นภาษาไทย ในเครื่องเราไม่มี tool อย่าง photoshop ไรงี้ด้วย (ถึงมีก็ใช้ไม่เป็นหรอก 555) ก็เลยพยายามหาโปรแกรมที่เอาไว้ออกแบบโลโก้ เจอดีๆหลายอันนะ เช่น AAA LOGO หรือแม้กระทั่งทำโลโก้ออนไลน์ก็มี


แต่มันไม่รองรับภาษาไทยซักกะอัน Orz


ตอนนั้นเริ่มปวดท้องกระเพาะด้วย เพราะกินข้าวผิดเวลา ปวดโคตร ก็เลยใช้งานเด็กฝึกงานหน้าใหม่ให้หาโปรแกรมที่มันรับภาษาไทย แล้วมันก็หาเจอจนได้ แต่ก็ยังไม่ทันได้ใช้หรอกนะ


มาสรุปบั๊กที่ต้องแก้ไขดีกว่า

• ทำ Auto complete Highlight ให้ได้
• แก้บั๊กเรื่องจัดวาง layout เวลาย่อหน้าต่างเว็บแล้ว content มันเลย Header กับ Footer
• Link List ฝั่งขวามือไม่แสดงผลใน Firefox ซะงั้น (แต่ถ้ากด Firebug ดู มันก็อ่านเจอนะ = =)
• ส่วนใน Chrome เอง บางทีก็โชว์มั่งไม่โชว์มั่ง ปวดประสาท -*-
• ใน IE content ไม่ยอมอยู่ตรงกลางเลยอะ TwT
• ช่อง Search ต้องกดปุ่ม 'ค้นหา' อย่างเดียวถึงจะแสดงผล กด Enter แล้วบรึ้มม
• เปลี่ยนแบบ visited link ใน Link List ไม่ได้
• ถ้าเป็นไปได้ กดลิ้งชื่อจังหวัดแล้วอยากให้แสดงผลเลื่อนขึ้นมาโชว์บรรทัดแรกให้เห็นเลย ปกติกดปุ่มโชว์ปั๊บ ไม่มีเลื่อนหน้าใดๆทั้งสิ้น (feature นี้เอาไว้หลังจากแก้บั๊กข้อแรกๆได้หมดก่อน)

มัวแต่จมอยู่กับบั๊กอันเดียว บางทีก็ไม่ได้เรื่องนะ


นึกบั๊กออกแค่นี้แหละ เดี๋ยวทำไปเรื่อยๆก็คงเจอเพิ่มเอง = =