i love my sassy girl

ok มาถึง shoutbox ตอนที่ 2 กัน หึหึ ว่าแต่ไม่เคยเขียนอะไรเกิน ตอนที่ 1 เลย นี้เป็นตอนที่ 2 แรกเลยนะเนี้ย 555+ ใครหลงมาอ่านถือว่าโชคดีนะ

ผมตอนนี้ผมจะพูดถึง source code ที่ใช้ใน ระบบนี้นะคับ ก็จะมีตัวหลัก ๆ ที่ใช้

php

ภาษาหลักในการพัฒนา

code igniter

ตัวนี้เป็น framework ที่ในใช้ในการสร้างระบบ

javascript,ajax, jquery

(ผีตัวเดียวกันแหละคับ javascript เป็นภาษา ajax เป็นเทคโนโลยี่ jquery เป็น framework )
อันนี้เอาไว้ให้ระบบมัน interactive กับ user (ตอบสนองต่อผู้ใช้ แบบว่า เค้าพิมพ์ตัวหนังสือมากกว่า 50 ตัวอักษร มันก็จะพิมพ์ไม่ได้ หรือมีข้อความบอกว่า พิมพ์ต่อไม่ได้แล้วนะ ข้อความยาวเกินไปแล้ว อะไรแบบนี้ หุหุ)

html

อ่ะแน่นอนล่ะ ทำเว็บมันไม่มี html จะออกมายังไง หึหึ

css

อันนี้ก็เอาไว้ ตกแต่งเว็บให้สวยงาม (รึเปล่า ลองดูกันเอาเองล่ะกัน อิอิ)

รูปภาพ

รูปภาพตกแต่งนิดๆหน่อย

หมดแล้วมั้ง

เด๋วไว้นึกออกอีกจะมาเพิ่มนะ เอิ๊ก ๆๆ

เอา code ใน view นะคับ  เอามาให้ดูกันก่อน เด๋วตัว controller จะตามมาอีกที หุหุ

shoutbox_view.php
อันนี้ก็เป็น encode ภาษาไทย ใส่เข้าไป ไม่ใส่เด๋วออกมาเป็นภาษาต่างดาวอีก

<meta http-equiv="Content-Type" content="text/html; charset=windows-874"/>

อันนี้ก็เป็น css มัน include เข้ามา

<link type="text/css" rel="stylesheet" href="css/_hompy.css"/>

อันนี้ก็ javascript include jquery เข้ามาด้วย (แล้วจะได้ใช้ป่าวเนี้ย เด๋วนึกดูก่อน มันเหมือนว่าจะได้ใช้นะ แล้วใช้ตอนไหนหว่า ตอนนี้นึกไม่ออก เอิ๊ก ๆๆ เขียนโปรแกมนี้ ใช้ เซ้นล้วน ๆเลยนะเนี้ย อิอิ )

<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript">

function check() {
	var detail = document.getElementById("detail").value;

	if (detail == "") {
		alert("Please enter message");
		return false;
	}
}

	function textCounter( field, countfield, maxlimit ) {
		  if ( field.value.length > maxlimit ) {
		    field.value = field.value.substring( 0, maxlimit );
		    return false;
		  }
	}
}
</script>

เพิ่งรู้แฮะ เด๋วนี้เค้าทำเว็บ เวลาใช้ javascript มันต้องบอก charset ด้วย แสดงว่าเมื่อก่อนนี้ เราก็เขียนมั่วๆ มาตลอดเลยนะเนี้ย เอิีก ๆๆ อ่ะ ๆๆ ค่อยๆเรียนรู้กันไป

แบบนี้

<script charset="utf-8" type="text/javascript"></script>

อ่ะตัว jQuery ก็เริ่มต้นด้วย นี้เลย เขียนแบบนี้เตรียมไว้ก่อนได้เลย เพราะยังไงเราก็ต้องเขียนแบบนี้ไว้ก่อนอยู่แล้ว หุหุ

<script charset="utf-8" type="text/javascript">
     $(document).ready(function(){
          // code is here
     }
</script>

อันนี้ก็โค้ดตัวอย่าง เวลาเราอ้างถึงตัว html ที่มันเป็น ชื่อ class ในที่นี้ผมจะอ้างถึงสิ่งที่ใช้ class ชื่อ menu_id นะคับ ตัวอย่าง html นะคับ

<ul>
   <li>
     <strong id="1" class="menu_id">menu 1</strong>
   </li>
   <li>
     <strong id="2" class="menu_id">menu 2</strong>
   </li>
   <li>
     <strong id="3" class="menu_id">menu 3</strong>
   </li>
</ul>

แล้วอันนี้ก็เป็นตัวอย่าง jQuery ที่จะอ้างถึง class menu_id ที่เราทำอะไรบ้างอย่างกับมัน เมื่อคลิก

<script charset="utf-8" type="text/javascript">
     $(document).ready(function(){
         $('.menu_id').click(function(){
             // code is here
         });
     }
</script>

Taobao JavaScript Framework base on YUI zhaozexin

Framework ตัวนี้สร้างโดยคนจีนคับ (ภาษาจีนล้วนๆเลย เหอๆๆ) เค้าบอกว่า เจ้า TB.widget.SimpleSlide ตัวเนี้ย เค้าเอาไว้ทำเป็นป้ายโฆษณาขนาดใหญ่ๆได้ เพราะมันหมุนภาพไปได้เรื่อยๆ

มี config ประมาณนี้คับ
slidesClass, triggersClass, currentClass คลาส 3 ตัวนี้เป็น css กำหนดการแสดงป้ายโฆษณา
eventType การข้ามลำดับของภาพ ให้เลือกได้ว่าจะให้เมาส์ mouse หรือว่า click
disableAutoPlay การเลือนภาพอัตโนมันหรือไม่ เลือกได้ true และ false
autoPlayTimeout ระยะเวลาของการเลื่อนภาพ เลือกได้ในหน่วย วินาที 5 วิ, 10 วิ
effect การแสดงภาพจะเลือกได้ 2 แบบ แบบ fade หรือว่าแบบ scroll

ศึกษาข้อมูลเพิ่มเติมได้ทีนี้คับ
http://code.google.com/p/tbra/wiki/SimpleSlideHowTo