19 ธันวาคม 2554

การใช้งาน Header php

รูปแบบ
header("ชื่อเฮดเดอร์:ค่าเฮดเดอร์") เช่น header("Location:http://shineji.blogspot.com");

การป้องกัน Page Caching
เพื่อป้องการไม่ให้หน้าเว็บเพจเรียก cache มาแสดง โดยกำหนดดังนี้
header("Cache-Control: max-age=0; no-cache; no-store; must-revalidate");

การย้ายเพจ Redirect
คือการย้ายหน้าเพจที่แสดงในขณะนี้ไปยังเพจอื่น
header("Location: URL");
เช่น
header("Location: webboard/php_board.php");
header("Location: http://shineji.blogspot.com");
ในทางปฏิบัติ header() ไม่ได้ทำการย้ายเพจทันที ต้องรอให้เฮดเดอร์ถูกส่งมาที่เบราเซอร์ก่อน
ดังนั้นควรวางคำสั่ง exit หรือ die ตามหลัง ฟังก์ชั่น header() เช่น
header("Location: signin.php");
exit;

แบบหน่วงเวลา
header("Refresh: เวลาเป็นวินาที; url=เพจปลายทาง");

แบบ refresh ไม่กำหนด URL
header("Refresh: 5");

เว็บไซต์รวบรวม header
http://www.jonasjohn.de/snippets/php/headers.htm

8 ธันวาคม 2554

เว็บน่าสนใจ สำหรับคนทำเว็บ

รวบรวม Jquery แบบต่างๆโดย ผู้ใช้งาน
http://jquery.malsup.com/

เกี่ยวกับคอมพิวเตอร์
http://www.pcpitstop.com

ชุมชน jquery google group
http://groups.google.com/group/jquery-en?pli=1

Jquery API
http://api.jquery.com/

Google libraries API รวม url ภาษาสคริป สำหรับดึงโค้ดจาก google มาใช้งาน
http://code.google.com/intl/th-TH/apis/libraries/devguide.html

Jquery in thai สอน jquery
http://www.jquery.in.th/

Webmaster tools Utilities
http://www.webmaster-toolkit.com/web-utilities.shtml

สอน Jquery video online
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

PHP framework สำหรับ ใช้สำหรับเป็น แกนหลักของ ภาษา php
http://codeigniter.com/

SMarty Template Engine Framework แบ่งการทำงานระหว่าง web designer กับ Web programmer
http://www.smarty.net/

PHP script
http://www.phpjunkyard.com/php-click-counter.php

hot srcipt
www.hotscripts.com

5 PHP function for mysql
http://www.anyexample.com/programming/php/5_useful_php_functions_for_mysql_data_fetching.xml

free script
http://www.dynamicdrive.com

6 ธันวาคม 2554

ใช้ font ตามใจคุณ (สำหรับนักพัฒนาเว็บ)

Cufon สามารถบันดาลให้เว็บไซต์ของคุณมี font แปลกๆ ตามใจคุณได้ แต่ขอแนะนำว่า ให้ใช้เฉพาะฟ้อนท์แปลกๆที่หัวข้อที่สำคัญๆเท่านั้น หากใช้ทั้งเว็บ อาจส่งผลให้เว็บคุณช้าได้ เพราะ Cufón จะแปลงตัวหนังสือของคุณให้เป็นไฟล์ภาพ .png
วิธีทำ มีเพียง 4 ขั้นตอนง่า่ยๆ เท่านั้น ดังนี้
1. ดาวน์โหลดไฟล์ Cufon.yui.js
2. เอาฟ้อนท์ที่คุณอยากใช้ไปแปลงก่อน ที่ http://cufon.shoqolate.com/generate/ จะได้ไฟล์ .js มาตัวหนึ่ง
3. เรียกใช้ไฟล์ .js ทั้ง 2 ตัวมายังเพจที่จะใช้งาน
4. ระบุ elements ที่ต้องการใช้ฟ้อนท์แปลก ตามตัวอย่างด้านล่าง

ส่วน head
<script src="script/cufon-yui.js" type="text/javascript"></script>
<script src="script/penthai_900-penthai_700-penthai_italic_900-penthai_italic_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
   Cufon.replace('h1,h2');
 
</script>
<style type="text/css">
 h1 { font-size:60px; color: #2A2A2A ; text-align:center}
 h1 span { color: #A0A0A4}
 h2 { font-size:42px; text-align:center; }
</style>

ส่วน body


<h1>คำสั่ง <span>WordPress</span> เบื้องต้น</h1>
<h2>บทที่ 1 sidebar</h2>

ตามตัวอย่าง เมื่อไรก็ตามที่เราเรียกใช้คำสั่ง h1 และ h2 มันจะเปลี่ยนเป็นฟ้อนท์ที่เราต้องการทันที และหากใช้คำสั่ง span ใน h1 จะมีสีตามที่เราระบุไว้ ดั่งตัวอย่าง


ที่มา http://www.select2web.com/jquery/font-on-web-by-cufon.html
http://www.select2web.com

15 พฤศจิกายน 2554

แอบดู ชาวบ้าน ว่าเขาใช้อะไร ทำเว็บ

เคยสงสัยกันไหมว่าเว็บนู่นเว็บนี่เขาใช้เทคโนโลยีอะไรกันในการสร้างเว็บ บางครั้งก็อยากทำได้แบบนี้บ้าง แต่ไม่รู้เขาใช้อะไรทำกัน วันนี้ขอเสนอวิธีง่ายๆ ในการดูหรือดมว่าเขาใช้อะไรทำเว็บกัน ด้วยซอฟต์แวร์ชื่อ Chrome Sniffer ซึ่งเป็นเอ็กซ์เทนชันสำหรับเว็บเบราว์เซอร์ โครม (Chrome) เท่านั้นนะครับ ใครยังไม่มีอาจดาวน์โหลดได้จาก http://www.google.com/chrome


ตัวอย่าง เว็บ การท่าเรือแห่งประเทศไทย http://www.port.co.th

เมื่อท่านติดตั้ง extension chrome sniffer แล้วเมื่อท่านเข้าเว็บใดๆก็ตาม ด้วย google chrome จะมีไอคอนปรากฏขวามือ ให้ท่านลองเอาเมาส์จิ้มๆ ก็จะบอกว่าเว็บใช้เทคโนโลยีไหนมาใช้งาน
เว็บการท่าเรือใช้ 3 ตัว และกำลัีงเพิ่มเทคโนโลยีใหม่ๆ
1.ใช้ google analytics เก็บสถิติ
2.ใช้จาวาสคริปต์ไลบรารี่ jquery และ jquery UI

ลองเอาไปเล่นดูครับ...




เว็บ thaimazda2.com

ใช้เพียบเลย
1.Prototype ไลบรารี่สคริป
2.Script.aculo ไลบรารี่สคริป
3.Jquery  ไลบรารี่จาวาสคริป
4.OpenX  จัดการโฆษณา
5.Piwik  ไม่ทราบ
6.SWFObject น่าจะเป็นแฟลช

ชื่อใดคือเทคโนโลยีใด ผมว่า copy ชื่อ paste ลง google search น่าจะได้ข้อมูลชัวร์สุด จัดไปครับอย่าช้า จะได้เอามาใช้กัน..

แถมการฝึกหมา http://www.expert2you.com/view_question2.php?q_id=16012

4 พฤศจิกายน 2554

จัดอันดับ เว็บบราวเซอร์ ปี 2011


ส่วนตัวผมใช้ทั้ง 3 ตัว
ชอบความเรียบง่าย,ปลั๊กอิน,การพัฒนาที่กว้าง และ ความรวดเร็วในการโหลดภาพของ Google chrome
ชอบปลั๊กอิน และความรวดเร็ว ความง่าย ของ Firefox
ชอบความเข้ากันได้กับ web app ได้อย่างกว้างขวางของ Internet Explorer

^_^"

3 พฤศจิกายน 2554

การสร้างมุมโค้งด้วย CSS3

เมื่อก่อนตอนอยากทำขอบโค้ง ๆ สวย ๆ ให้กรอบข้อความต้องก็ต้องทำโดยใช้ photoshop ทำเอา ซึ่งทำให้หน้าเว็บไซต์เราโหลดมากขึ้น เพราะมากชิ้นก็ใช้เวลาโหลดแต่ละชิ้น พอตอนมี CSS แล้วใช้แบบ div อะไรพวกนี้ก็ยังต้องเขียนโค้ด CSS สำหรับมุมโค้ง 4 ด้าน แล้วก็ต้องมาแก้ให้ใช้ได้ทุก Browser ซึ่งทำวิธีไหนก็เหนื่อยนั่นแหละ

พอดีไปเห็นขอบโค้ง ๆ ของชาวบ้านเขา แล้วก็แอบดูซอสโค้ดของเขาปรากฎว่าเขาไม่ได้ใช้รูปภาพทำ แต่เขาใช้ CSS ทำเอา เลยไปหาวิธีทำมาลองทำดูเองบ้าง แต่โค้ดนี้สามารถใช้ได้กับ Firefox,Chrome,Safari,Opera,ie9 ส่วน ie เวอร์ชั่นอื่น ๆ นั้นไม่สามารถใช้ได้

1.เริ่มด้วยสร้างขอบแบบธรรมดาขึ้นมาก่อนซึ่งจะใช้ความหนาเท่าไหร่ หรือขอบสีอะไรนั้นก็คิดขึ้นมาเองตามใจชอบได้เลย




2.เมื่อได้ขอบแล้วก็ให้ใส่เพิ่มโค้ดใน CSS แบบนี้

ซึ่งจะเห็นได้ว่ามันไม่เป็นโค้งเราต้องมาทำการใส่ prefix เพื่อให้ Browser รับรู้โค้ดที่เราเขียนโดย

-moz (เช่น -moz-border-radius) ทำให้โค้ดสามารถใช้งานได้ใน Firefox
-webkit (เช่น -webkit-border-radius) ทำให้โค้ดสามารถใช้งานได้ใน Safari และ Google Chrome

3.ใส่โค้ดดังกล่าวในข้อ 2 ลงใน CSS แบบนี้


-moz-border-radius:15px;
-webkit-border-radius:15px;

จะได้ผลลัพธ์ดังรูป



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

background:#D4F4AD;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;


ซึ่งจะได้ผลลัพธ์ตามรูป



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

-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topright:0;
-moz-border-radius-bottomleft:0;
-webkit-border-top-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-left-radius:0;


ได้ผลดังรูป



คราวนี้ลองมาทำเลียนแบบขอบโค้งในหน้าเว็บไซต์ Ofebia ดูบ้าง เอามาประยุกต์ดู ใช้ CSS หมดเลย ยกเว้นรูปภาพสัญลักษณ์

ของเดิม



ของใหม่ที่ใช้ Border Radius ทำเอา และประยุกต์อีกนิดหน่อย



ซึ่งจะเห็นได้ว่าคล้าย ๆ กัน ขาดเงาของพื้นหลัง ซึ่งคราวหน้าเราจะมาดูกันว่าใช้ CSS3 ทำเงาให้พื้นหลังได้ยังไง

แถมเว็บสร้างขอบมน online http://border-radius.com/

Credit : Ofebia

18 ตุลาคม 2554

ข้อมูลฐานข้อมูล แบบ myisam กับ innodb


การย้ายฐานข้อมูล mysql ในส่วนของข้อมูลจะอยู่ใน folder data ในตำแหน่งที่ติดตั้ง mysql
เช่น C:\Program files\Mysql\data
ข้อมูลฐานข้อมูลชนิด innodb จะอยู่ในรูปแบบไฟล์ ibdata1