วันอังคารที่ 30 กรกฎาคม พ.ศ. 2556

Setup เครื่อง window Server หลายโดเมนใน 1 เครื่อง

Setup เครื่อง window Server หลายโดเมนใน 1 เครื่อง
วันนี้จะมาแนะนำการ Setup เครื่อง Window Server ครับโดยมีเงื่อนไขคือมีหลายโดเมนใน 1 เครื่องถ้าหากนึกภาพไม่ออกก็นึกถึงเครื่อง PC เราแล้วทำให้เป็น Webserver แบบนั้นเลยครับจากตัวอย่างนี้ทำโดย Window Server2008 R2 นะครับ เรามาเริ่มกันเลย

-ผมจะไม่พูดถึงการติดตั้ง Window Server2008 R2 นะครับคิดว่าคงทำได้ไม่ยากและหลังจากติดตั้งแล้วให้ทำการติดตั้ง DNS และ IIS ด้วยนะครับ หลังจากติดตั้งแล้วคลิกที่ DNS > Forward Lookup Zones  คลิกขวาเลือก Add New Zone เพื่อทำการเพิ่มชื่อเว็บไซต์ที่เราต้องการเข้าไป

- จะพบหน้า Wizard ในการติดตั้ง คลิก Next

-  กำหนด Zone เลือก Primary Zone คลิก Next

-  จากนั้นตั้งชื่อ Zone ตัวอย่างชื่อ Zone จะตั้งเป็นชื่อเว็บไซต์ (ไม่ต้องระบุ www) เช่น mis.com
-  จากนั้นเลือก Create New file..และตั้งชื่อไฟล์ (ปกติระบบจะเลือกชื่อ Zone มาเป็นชื่อไฟล์ให้อยู่แล้ว)สามารถคลิก Next ได้เลย
- เลือก Do Not Allow Dynamic Updates จากนั้นคลิก Next
- จากนั้นคลิกที่ Finish เสร็จสิ้นขั้นตอนการสร้าง Forward Lookup zones
ขั้นตอนการทำ Forward Lookup zones ก็เสร็จสิ้นครับ  บทความต่อไปจะกล่าวถึงการเพิ่มเว็บไซต์เข้ามาที่ DNS ที่เราสร้างขึ้นมานี้

วันจันทร์ที่ 29 กรกฎาคม พ.ศ. 2556

Windown Server2003 ไม่รองรับ .aspx มีวิธีเปิดใช้งาน

Windown Server2003 ไม่รองรับ .aspx มีวิธีเปิดใช้งาน
สำหรับหลายท่านที่ลง Windown Server 2003 แล้วรองรับเฉพาะ .asp แต่ไม่รองรับ .Net หรือ .aspx
วิธีการเปิดใช้งาน
  - คลิก Start
  - คลิก Control Panel
  - เลือก Add or Remove Program
  - เลือก Add/Remove Windown Companents
  - เลือก Appication Server

 - คลิก Detail
  - ติ๊กถูกที่ ASP.NET คลิกที่ OK รอสักพักระบบจะทำการเปิดการใช้งาน .Net หลังจากนั้น Restart Server 1ครั้งก็เสร็จแล้วครับ

วันอาทิตย์ที่ 28 กรกฎาคม พ.ศ. 2556

วิธีการสร้าง Banner แบบสุ่ม

วิธีการสร้าง Banner แบบสุ่ม
หมายถึงเราสามารถสร้างรูปภาพที่เป็น Banner ของเราและทำให้ Banner ของเราแสดงผลแบบสุ่มไปเรื่อยๆ และยังสามารถกำหนด Link ให้กำ Banner ได้ด้วย
source code

<script language="javascript" src="ajax.js"></script>
<script language="javascript">
function doajax(){
   var ajax1=createAjax();
   ajax1.onreadystatechange=function(){
      if(ajax1.readyState==4 && ajax1.status==200){
         document.getElementById('myplace').innerHTML=ajax1.responseText;
      }else{
         return false;
      }
   }
   ajax1.open("GET","get_banner.php",true);
   ajax1.send(null);
}
window.onload=function(){
   setInterval("doajax()",2000); // กำหนดให้สลับแบนเนอร์ทุกๆ 2 วินาที
}
</script>
<div id="myplace">
<img src="images/mybanner_1.jpg"  />
</div>
=================================================================
โค้ด get_banner.php

<?php
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
   $banner_img_arr=array(
      "0"=>"images/mybanner_1.jpg", // key 0 เก็บรูป banner ที่ 1
      "1"=>"images/mybanner_2.jpg", // key 1 เก็บรูป banner ที่ 2
      "2"=>"images/mybanner_3.jpg"   // สามารถเพิ่มจำนวนได้
   );
   $banner_link_arr=array(
      "0"=>"http://www.google.com", // เก็บค่า link เรียงลำดับให้ตรงคู่กับรูปภาพ
      "1"=>"http://www.yahoo.com",
      "2"=>"http://www.hotmail.com"   // สามารถเพิ่มจำนวนได้
   );
   $rand_banner=rand(0,2); // ค่า key 0 ถึง 2
   $banner_img=$banner_img_arr[$rand_banner];
   $banner_link=$banner_link_arr[$rand_banner];
   $html_banner="<a href='".$banner_link."' target='_blank'>";
   $html_banner.="<img src='".$banner_img."' border='0'></a>";
   echo $html_banner; // แสดง แบนเนอร์
?>

วันศุกร์ที่ 26 กรกฎาคม พ.ศ. 2556

PHP กับการส่งเมล์

PHP กับการส่งเมล์
เขียน PHP ส่งเมล์ภาษาไทย
สำหรับคนที่เขียนเว็บไซต์ด้วย PHP แล้วในหน้าเว็บต้องการส่ง email ซึ่งปัญหาของหลายๆคนในการเขียนสคิป ในการส่งเมล์คือ อีเมล์ ที่ส่งไปนั้นสามารถส่งได้
แต่ผู้รับอีเมลล์แล้วอ่านไม่ออก ซึ่งเปิดอีเมล์ ออกมาจะเป็นภาษายึกยือ หรือภาษาต่างดาว

วันนี้ผมมีวิธีแก้ในการเขียนสคิปส่งเมล์ให้เป็นภาษาไทย
ใครที่เจอปัญหาส่งอีเมล ด้วย PHP แล้วไม่เป็นภาษาไทย ลองใช้ Script นี้ไปปรับใช้เอานะครับ

source code

$strTo = "panatsein@hotmail.com";// ใส่ email ที่ต้องการส่งเมล
 $strSubject =  "=?UTF-8?B?".base64_encode("หัวข้อใส่ที่นี่")."?="; 
 $strHeader = "'MIME-Version: 1.0' . \r\nContent-type: text/html; charset=utf-8\r\n"; 
 $strHeader .= "อีเมลฉบับนี้ส่งจาก\r\n";
 $strMessage = "เนื้อหาอีเมล์ใส่ที่นี่ครับ";
 
 $send = @mail($strTo,$strSubject,$strMessage,$strHeader);  // @ = No Show Error //

วันจันทร์ที่ 22 กรกฎาคม พ.ศ. 2556

มารู้จัก HTML 5 กับ input type number กัน

เบราเซอร์ที่รองรับ IE เวอร์ชั่น 8 ขึ้นไป Chome Safari Opera ไม่รองรับ Firefox นะครับ
 มารู้จัก HTML 5 กับ input type number กัน
ถ้านึกไม่ออกก็นึกถึง HTML เวอร์ชั่นเก่าๆที่เวลาที่เราต้องการให้ ผู้ใช้งานกรอก หรือระบุตัวเลขนั้นเราอาจนะทำเป็น List box หรืออื่นๆก็ตามแต่  แต่พอมาถึง HTML 5 แล้วนั้นมี input type ที่ให้เราสามารถเรียกใช้งานได้เลย มาดูตัวอย่างกัน

ตัวอย่าง
เลือกตัวเลข :
source code

เลือกตัวเลข : <input max="20" min="1" name="nums" type="number" />

มาเรียนรู้วิธีการใช้งาน Iframes

มาเรียนรู้วิธีการใช้งาน Iframes
Iframes คือการนำหน้าเพจอื่นๆมาแสดงในตำแหน่งที่เราต้องการ ซึ่งเราสามารถกำหนด ความกว้างของเพจ หรือ ความสูงของเพจเพิ่มเติมได้

ตัวอย่าง

source code

<iframe src='http://script-codephp.blogspot.com/' width='100%' height='300'></iframe>

วันอาทิตย์ที่ 21 กรกฎาคม พ.ศ. 2556

การใช้งาน JavaScript Popup

การใช้งาน JavaScript Popup
คือการทำ Popup หรือ Alert ต่างสามารถนำไปประยุกต์ใช้งานในเว็ปไซต์ต่างๆได้ โดยเมื่อมี Alert ขึ้นผู้ใช้สามารถคลิก OK เพื่อไปยังกระบวนการต่อไป

ตัวอย่าง

source code

<script>
function alerts()
{
alert('This alert Your can Click OK for next Process');
}
</script>
<input name="alerts" onclick="alerts()" type="button" value="ทดสอบ Alert" />

การสร้าง Layouts สำหรับเว็ปไซต์

การสร้าง  Layouts สำหรับเว็ปไซต์
ข้อดีของการสร้าง Layouts คือทำให้หน้าเว็ปไซต์ของเราสวยงาม โดยการสร้าง Layouts นั้นเราจะใช้ <div> Elements ในการจัดกลุ่มของ HTML ของเรา โดยตัวอย่างจะทำการแบ่งกลุ่มออกเป็น 4 กลุ่ม
  • header
  • Menu
  • Content
  • Footer


ตัวอย่าง
My Input Content Here

source code

<div id='container' style='width: 100%' >
<div id='header' style='background-color: #EEEEEE;'>
<h2 style='color: #666666; text-align: center; font-family: verdana; padding: 10px;'>My Slogan Company</h2></div>
<div id='menu' style='background-color: #66CCCC; height: 200px; width:20%; float:Left;'>
<b>Main Menu</b><br/>
Menu1<br/>
Menu2<br/>
Menu3<br/>
Menu4<br/>
</div>
<div id='content' style='background-color: #FFFFCC; height: 200px; width: 80%; float:Left;'>
My Input Content Here
</div>
<div id='footer' style='background-color: #EEEEEE; text-align: center; font-family: Verdana; color: #666666; padding: 5px;'>
สร้างและพัฒนาโดย http://script-codephp.blogspot.com
</div>
</div>

HTML Hyperlinks (Links)

HTML Hyperlinks (Links) แท็ก HTML สำหรับทำ Link ไปยังหน้าอื่นๆภายในเว็ปไซต์ หรือภายนอกเว็ปไซต์ เมื่อเราย้ายเคอร์เซอร์ไปยัง Link ที่เราสร้างขึ้นจะแสดงรูปมือเพื่อให้เราสามารถคลิกไปยัง Link อื่นๆที่เรากำหนดได้

ตัวอย่าง
ทดสอบ Hyperlinks http://script-codephp.blogspot.com/
source code

<a href="http://script-codephp.blogspot.com/" target="_blank">http://script-codephp.blogspot.com/</a>

หมายเหตุ * หากเพิ่ม "_blank" หมายถึงหากคลิกที่ Link จะเปิดแทปใหม่

วันเสาร์ที่ 20 กรกฎาคม พ.ศ. 2556

HTML 5 Input type date

HTML 5 Input type date
วันนี้มาแนะนำ input type ใหม่ใน HTML 5 ครับซึ่งความสามารถนั้นสามารถทดแทน Script datepicker ได้เลยประมาณนั้น  ลักษณะก็ดูดีในระดับหนึ่ง การเขียน Code เรียกใช้งานก็ง่ายไม่จำเป็นต้องเขียน Script ยาวๆเพื่อเรียกใช้งาน DatePicker อีกต่อไป

ตัวอย่าง type date กรุณาเลือกวันเกิดของคุณ :

source code

<input type='date' name='todays'/><input type='submit' name='submit' value='ส่งข้อความ'/>

HTML 5 กับ Input Types ใหม่ๆ

HTML 5 มีอะไรใหม่ๆบ้างมาดูกัน จะยกตัวอย่าง Input Types ใหม่ๆที่เพิ่มขึ้นมาที่ละอย่างนะครับตัวอย่างแรก type Color ครับ
  • Color

  • ตัวอย่าง

    source code

    <input name="clor" type="color" />

    การทำ List Menu

    การทำ List Menu ด้วย แทก <ul> ซึ่งการใช้งานนั้นเราจะใช้งานร่วมกับ tag <li>ประดยชน์ของ Tag นี้คือมีการแบ่งรายการเมนูที่เราต้องการอย่างชัดเจน และสวยงาม หรือไม่จำเป็นต้องเป็นเมนูก็ได้ อาจจะเป็นหัวข้อเรื่องต่างๆก็ได้

    ตัวอย่าง
    • ทดสอบหัวข้อย่อย 1
    • ทดสอบหัวข้อย่อย 2
    • ทดสอบหัวข้อย่อย 3

    source code

    <ul>
    <li>ทดสอบหัวข้อย่อย 1</li>
    <li>ทดสอบหัวข้อย่อย 2</li>
    <li>ทดสอบหัวข้อย่อย 3</li>
    </ul>

    วิธีสร้างกรอบข้อความเพื่อให้เป็นสัดส่วน

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

    ตัวอย่าง
    ข้อมูลส่วนตัว Firstname

    Lastname

    source code

    <fieldset><legend><b>ข้อมูลส่วนตัว</b></legend>
    Firstname<br/>
    <input type='text' name='user' size='40'/><br/>
    Lastname<br/>
    <input type='text' name='lastname' size='40'/>
    </fieldset>

    วันศุกร์ที่ 19 กรกฎาคม พ.ศ. 2556

    นำรูปภาพมาทำปุ่ม Submit

    นำรูปภาพมาทำปุ่ม Submit
    ปกติแล้วเราจะสร้างปุ่ม Submit สักปุ่มนั้นส่วนมากก็จะมีรูปแบบที่ไม่สวยงาม หรืออาจไม่ถูกใจผู้พัฒนา ดังนั้นเราสามารถสร้างปุ่มกดจากโปรแกรมอื่นๆเช่น Photoshop หรือโปรแกรมอื่นตามแต่ใครถนัดจากนั้นก็สามารถนำมาใช้แทนปุ่มกดแบบเดิมๆได้ ตัวอย่างปุ่ม Submit แบบเดิมหลังจากที่เราสร้างปุ่มจากโปรแกรมตกแต่งภาพเสร็จเรียบร้อยก็สามารถเขียน Code เรียกใช้งานได้ดังตัวอย่างด้านล่าง

    ตัวอย่าง
    ชื่อผู้ใช้งาน
    รหัสผ่าน


    source code

    <input type='image' name='submit' src='http://www.upfile.codewebphp.com/files/register.gif' border='0' title='ทดสอบใช้รูปภาพเป็นปุ่มกด'/>

    หมายเหตุ * Code บรรทัดสีแดงให้เปลี่ยนเป็น PART ที่เก็บไฟล์รูปของคุณ เช่น src='images/register.gif'

    ทำ Select เมื่อนำเมาท์ไปชี้

    ทำ Select เมื่อนำเมาท์ไปชี้
    การทำ Select เมื่อนำเมาท์ไปชี้นั้นเราจะเห็นได้จากเว็ปที่ให้บริการ upload ไฟล์ต่างๆซึ่งเมื่อนำเมาท์ไปชี้ที่ Link แล้วจะทำการ Select ให้ทันที

    ตัวอย่าง


    source code

    <input type='text' name='testlink' size='50' value='http://script-codephp.blogspot.com/' onmouseover='this.select()'/>

    หมายเหตุ * Code บรรทัดสีแดง สามารถเปลี่ยนเป็นค่าอื่นๆที่ต้องการได้ เช่นระบุค่าตัวแปรลงไป
    value='$sumvalue' เป็นต้น

    วันพุธที่ 17 กรกฎาคม พ.ศ. 2556

    สร้างเมนูสวยๆด้วย CSS

    สร้างเมนูสวยๆด้วย CSS สวัสดีครับ วันนี้มาสร้างเมนูสวยๆไว้ใช้งานในเว็ปไซต์กัน สามารถนำไปตกแต่งแก้ไขให้เข้ากับเว็ปไวต์ท่านได้ตามต้องการครับ

    ตัวอย่าง

    ดาวส์โหลดไฟล์รูป Background ประกอบ คลิกที่นี่
    source code

    ไฟล์ .CSS
    .blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url('http://www.upfile.codewebphp.com/files/blueslate_background.gif') repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
    .blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
    .blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
    .blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
    .blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url('http://www.upfile.codewebphp.com/files/blueslate_backgroundOVER.gif') no-repeat top center;}

    ไฟล์แสดงเมนู
    <div class="blue">
    <div id="slatenav">
    <ul>
    <li><a href="#" title="css menus" class="current">Home</a></li>
    <li><a href="#" title="css menus">About Us</a></li>
    <li><a href="#" title="css menus">Services</a></li>
    <li><a href="#" title="css menus">Our Work</a></li>
    <li><a href="#" title="css menus">Contact Us</a></li>
    </ul>
    </div>
    </div>


    หมายเหตุ * code บรรทัดสีแดงให้เปลี่ยนที่อยู่รูปภาพพื้นหลังของเมนูให้ตรงกับ PART ที่เก็บไฟล์ภาพของคุณ เช่น url('images/blueslate_background.gif')

    วันอังคารที่ 16 กรกฎาคม พ.ศ. 2556

    ตรวจสอบการกรอกฟิลด์ E-mail (อีเมล์)

    ตรวจสอบการกรอกฟิลด์ E-mail (อีเมล์) การตรวจสอบการกรอกอีเมล์นั้นไม่สามารถใช้การตรวจสอบแบบ text ได้เนื่องจากอาจมีการกรอกข้อมูลที่ผิดรูปแบบของอีเมล์ ซึ่งควรมี Script มาตรวจสอบเบื้องต้นด้วย วิธีการทดสอบลองระบุข้อมูลที่ไม่ใช่รูปแบบอีเมล์ลงไป หลังจากคลิก "ตรวจสอบอีเมล์" จะมีข้อความแจ้งให้กรอกข้อมูลใหม่
    ตัวอย่าง

    source code

    <script type='text/javascript'>
    function check_email(elm){
        var regex_email=/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*\@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.([a-zA-Z]){2,4})$/
        if(!elm.value.match(regex_email)){
            alert('Your e-mail not working! please try agian');
        }else{
    alert('you email true');
    }
    }
    </script>
    <input name="email" onblur="check_email(this)" size="45" type="text" />

    วันอาทิตย์ที่ 14 กรกฎาคม พ.ศ. 2556

    Alert Confirm ทำให้มีการแจ้งเตือนก่อนคลิก Delete

    Alert Confirm ทำให้มีการแจ้งเตือนก่อนคลิก Delete ในการลบข้อมูลใดๆนั้นบางทีผู้ใช้อาจคลิกโดยไม่ได้ตั้งใจทำให้ข้อมูลอาจสูญหายได้  ดังนั้นต้องทำ Alert เพื่อให้ผู้ใช้คลิกยืนยันอีกครั้งในการกระทำนั้นๆ
    ตัวอย่าง
    firstname lastname address telephone edit delete
    testfirtname testlastname testaddress +66999-999-999


    source code
    <input name="submit" onclick="return confirm('คุณต้องการลบข้อมูลที่เลือก')" type="submit" value="Delete" />

    Check validate() ตรวจสอบการใส่ข้อความใน Textbox

    Check validate() ตรวจสอบการใส่ข้อความใน Textbox
    วันนี้มานำเสนอการตรวจสอบการกรอกข้อมูลใน Textbox ในกรณีที่เป็นฟิลด์ที่จำเป็นต้องระบุ  ซึ่งการตรวจสอบนั้นจะมีหลายอย่างทั้ง javascript และอื่นๆอีกมากมาย ทดสอบดดยไม่ต้องระบุค่าใดๆลงใน Textbox จากนั้นคลิกที่ตรวจสอบค่า จะมี Alert แจ้งให้ทำการใส่ข้อมูลลงไปก่อน

    ตัวอย่าง

    Username


    source code

    <script language="javascript">
    function checkvalidate()
    {
    if (document.form1.user.value == ""){
    alert('Please in put your name');
    document.form1.user.focus();
    return false;
    }
    document.form1.submit();
    }
    </script>
    <form name='form1' action='#' method='POST' onsubmit="javascript:return checkvalidate();"/> <input type='text' name='user' size='30'/>
    <input type='submit' name='submit' value='ตรวจสอบค่า'/>
    </form>



    วันเสาร์ที่ 13 กรกฎาคม พ.ศ. 2556

    สร้างหน้า Login สวยๆ ด้วย CSS

    สวัสดีครับ วันนี้มานำเสนอการสร้าง From สำหรับ Login ด้วย CSS เพื่อให้ดูสวยงามน่าใช้ โดยการใช้งานนั้นแล้วแต่จะถนัดนะครับใครถนัดแบบ inline ก็ใช้แบบนั้น หรือใครถนัดแบบแยกที่เก็บก็ตามถนัดครับ ดูตัวอย่างหน้าLogin ได้ด้านล่างครับ

    ตัวอย่าง
    USERNANE
    PASSWORD

    source code

    ไฟล์ .CSS
    .mytables{ width: 80%; border: 1px solid #DDDDDD; border-radius: 5px; padding: 10px; }
    .mytables td{ font-family: verdana; color: #666666; font-size: 12px; }
    .tblogin{ border: 1px solid #DDDDDD; width: 300px; height: 30px; }

    ไฟล์ login.php

    <table class='mytables' ailgn='center'>
    <tr>
    <td>USERNANE</td>
    </tr>
    <tr>
    <td><input type='text' name='username' class='tblogin'/></td>
    </tr>
    <tr>
    <td>PASSWORD</td>
    </tr>
    <tr>
    <td><input type='password' name='pass' class='tblogin'/></td>
    </tr>
    <tr>
    <td><input type='submit' name='submit' class='myButton' value='เข้าสู่ระบบ'/>
    </tr>
    </table>

    เปลี่ยนสีบรรทัดเมื่อชี้เมาท์

    วิธีการเปลี่ยนสีบรรทัดของตาราง สามารถแทรกโค๊ดลงไปที่ tag <tr> ได้เลย
    การเปลี่ยนสีของบรรทัดของตารางเมื่อนำเมาท์ไปชี้นั้นสามารถทำได้หลายวิธี แต่ขอเสนอวิธีที่ง่ายและไม่ต้องใช้ Java Script ที่ยาวๆก็สามารถทำได้ดูตัวอย่างจากตารางด้านล่าง

    ตัวอย่าง

    ชื่อ นามสกุล ประเทศ
    name1 Lastname1 Thai
    source code

    style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#EEEEEE';" onmouseout="this.style.backgroundColor='#FFFFFF';"

    อธิบายเพิ่มเติม
    สามารถเปลี่ยน #FFFFFF คือรหัสสีจากตัวอย่างคือสีขาว พอชี้เมาท์สีจะเปลี่ยนเป็น #EEEEEE สีเทา